/* ============================================================
   ROOT & RESET
   ============================================================ */
:root {
  --ink: #0c0c0e;
  --gray-900: #1a1a1e;
  --gray-600: #6b6b70;
  --gray-500: #8a8a90;
  --gray-400: #b4b4b8;
  --gray-100: #f3f3f4;
  --gray-50: #f7f7f8;
  --line: #e9e9eb;
  --lime: #FA9800;            /* logo yellow - the single brand accent */
  --indigo: #FA9800;           /* was indigo; unified to logo yellow */
  --indigo-dark: #C97800;      /* darker yellow for hover states */
  --radius-btn: 10px;
  --radius-card: 16px;
  --max-width: 1440px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* Apple-style liquid glass */
  --glass-bg: rgba(255, 255, 255, 0.55);
  --glass-bg-strong: rgba(255, 255, 255, 0.7);
  --glass-blur: blur(40px) saturate(180%) brightness(108%);
  --glass-border: rgba(255, 255, 255, 0.65);
  --glass-shadow:
    0 8px 32px rgba(12, 12, 14, 0.10),
    0 1px 2px rgba(12, 12, 14, 0.04);
  --glass-inner:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 -1px 0 rgba(255, 255, 255, 0.28),
    inset 1px 0 0 rgba(255, 255, 255, 0.4),
    inset -1px 0 0 rgba(255, 255, 255, 0.4);
}

/* ============================================================
   LIQUID GLASS (Apple-style)
   ============================================================ */
.glass {
  position: relative;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow), var(--glass-inner);
  isolation: isolate;
}
/* Specular sheen across the top surface */
.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.55) 0%,
      rgba(255, 255, 255, 0.12) 32%,
      rgba(255, 255, 255, 0) 60%
    );
}
/* Soft edge refraction glow */
.glass::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(120% 80% at 15% 0%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 55%),
    radial-gradient(100% 90% at 100% 100%, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 60%);
}
.glass--strong { background: var(--glass-bg-strong); }

/* Dark-surface variant */
.glass--dark {
  background: rgba(20, 20, 24, 0.55);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(255, 255, 255, 0.06);
}
.glass--dark::before {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.16) 0%,
    rgba(255, 255, 255, 0.04) 35%,
    rgba(255, 255, 255, 0) 65%
  );
}
.glass--dark::after {
  background: radial-gradient(120% 80% at 15% 0%, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 55%);
}

@supports not (backdrop-filter: blur(1px)) {
  .glass { background: rgba(255, 255, 255, 0.92); }
  .glass--dark { background: rgba(20, 20, 24, 0.94); }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: #ffffff;
  -webkit-font-smoothing: antialiased;
  opacity: 1;
  transition: opacity .6s ease;
}
body.is-loaded { opacity: 1; }

ul, ol { list-style: none; margin: 0; padding: 0; }
a { text-decoration: none; color: inherit; }
button { font: inherit; cursor: pointer; }

::selection { background: var(--lime); color: var(--ink); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--gray-50); }
::-webkit-scrollbar-thumb { background: #d4d4d8; border-radius: 999px; border: 2px solid var(--gray-50); }
::-webkit-scrollbar-thumb:hover { background: var(--ink); }
html { scrollbar-color: #d4d4d8 var(--gray-50); scrollbar-width: thin; }

/* ---------- Grain overlay ---------- */
.grain-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Custom cursor ---------- */
.cursor-dot, .cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9998;
  pointer-events: none;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity .3s ease;
}
.cursor-dot {
  width: 6px;
  height: 6px;
  background: var(--lime);
  transition: opacity .3s ease, transform .15s ease;
}
.cursor-ring {
  width: 36px;
  height: 36px;
  border: 1.5px solid rgba(250, 152, 0, 0.45);
  transition: opacity .3s ease, transform .25s var(--ease), width .25s var(--ease), height .25s var(--ease), border-color .25s ease, background .25s ease;
}
body.has-fine-cursor .cursor-dot,
body.has-fine-cursor .cursor-ring { opacity: 1; }
body.has-fine-cursor { cursor: none; }
body.has-fine-cursor a,
body.has-fine-cursor button,
body.has-fine-cursor input,
body.has-fine-cursor textarea { cursor: none; }
.cursor-ring.is-active {
  width: 56px;
  height: 56px;
  background: rgba(250, 152, 0, 0.12);
  border-color: var(--lime);
}
.cursor-dot.is-active { opacity: 0; }

/* ---------- Scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--radius-btn);
  font-weight: 600;
  white-space: nowrap;
  border: none;
}
.btn-dark {
  background: var(--ink);
  color: #fff;
  transition: background .3s var(--ease), color .3s var(--ease);
}
.btn-dark:hover { background: var(--lime); color: var(--ink); }
.btn-dark:active { }
.btn-dark svg { transition: transform .3s var(--ease); }
.btn-dark:hover svg { transform: translateX(3px); }
.btn-nav { padding: 12px 22px; font-size: 14.5px; }
.btn-lg { padding: 17px 28px; font-size: 16px; }

/* ---------- Top accent line ---------- */
.top-accent-line {
  height: 3px;
  width: 100%;
  background: linear-gradient(90deg, #FA9800 0%, #FFD07A 25%, #FFB84D 50%, #FFD07A 75%, #FA9800 100%);
}

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  padding: 18px 40px;
  transition: background .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.site-header.is-stuck {
  background: rgba(255, 255, 255, 0.68);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 8px 32px rgba(12, 12, 14, 0.10);
  border-bottom-color: rgba(255, 255, 255, 0.7);
}
@supports not (backdrop-filter: blur(1px)) {
  .site-header { background: rgba(255, 255, 255, 0.95); }
}

/* Header sitting over a dark full-bleed hero. The light glass reads as a white
   strip pasted onto the hero, so stay transparent at the top of the page and
   hand back to the standard glass once .is-stuck kicks in (scrollY > 12). */
.site-header--on-dark:not(.is-stuck):not(.is-menu-open) {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
  box-shadow: none;
}
.site-header--on-dark:not(.is-stuck):not(.is-menu-open)::before { background: none; }
.site-header--on-dark:not(.is-stuck):not(.is-menu-open) .logo-text { color: #fff; }
img.logo-mark--ondark { display: none; }
.site-header--on-dark:not(.is-stuck):not(.is-menu-open) .logo-mark--default { display: none; }
.site-header--on-dark:not(.is-stuck):not(.is-menu-open) .logo-mark--ondark { display: block; }
.site-header--on-dark:not(.is-stuck):not(.is-menu-open) .menu-toggle { color: #fff; }
.site-header--on-dark:not(.is-stuck):not(.is-menu-open) .nav-pill {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26);
}
.site-header--on-dark:not(.is-stuck):not(.is-menu-open) .nav-pill::before { background: none; }
.site-header--on-dark:not(.is-stuck):not(.is-menu-open) .nav-pill > li > a,
.site-header--on-dark:not(.is-stuck):not(.is-menu-open) .nav-dd-trigger { color: rgba(255, 255, 255, 0.92); }
.site-header--on-dark:not(.is-stuck):not(.is-menu-open) .nav-pill > li > a:hover,
.site-header--on-dark:not(.is-stuck):not(.is-menu-open) .nav-dd-trigger:hover {
  color: var(--lime);
  background: rgba(255, 255, 255, 0.16);
}
.site-header--on-dark:not(.is-stuck):not(.is-menu-open) .logo:hover .logo-text { color: var(--lime); }
/* An open trigger gets a solid white pill, so its label must go dark again
   or it disappears against it. */
.site-header--on-dark:not(.is-stuck):not(.is-menu-open) .has-dropdown.is-open .nav-dd-trigger,
.site-header--on-dark:not(.is-stuck):not(.is-menu-open) .has-dropdown.is-open .nav-dd-trigger:hover {
  color: var(--ink);
  background: #fff;
}
.site-header--on-dark:not(.is-stuck):not(.is-menu-open) .btn-dark {
  background: #fff;
  color: var(--ink);
}
.site-header--on-dark:not(.is-stuck):not(.is-menu-open) .btn-dark:hover { background: var(--lime); color: var(--ink); }
.header-inner {
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.logo {
  display: flex;
  align-items: center;
  gap: 9px;
}
.logo-mark { width: 30px; height: auto; display: block; }
.logo-text {
  font-weight: 800;
  font-size: 21px;
  letter-spacing: 0.5px;
  color: var(--ink);
  transition: color .2s ease;
}
.logo:hover .logo-text { color: var(--lime); }

.menu-toggle {
  display: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  background: rgba(243, 243, 244, 0.65);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 999px;
  color: var(--ink);
}
.mobile-nav {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 10px 20px 20px;
  border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
}
.mobile-nav a {
  padding: 12px 6px;
  font-size: 16px;
  font-weight: 600;
  color: var(--gray-900);
  border-bottom: 1px solid var(--line);
  transition: color .2s ease;
}
.mobile-nav a:not(.mobile-nav__cta):hover { color: var(--lime); }
.mobile-nav__cta { margin-top: 12px; border: none; text-align: center; }
.site-header.is-menu-open .mobile-nav { display: flex; }

.main-nav { flex: 1; display: flex; justify-content: center; }
.nav-pill {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(24px) saturate(180%) brightness(106%);
  -webkit-backdrop-filter: blur(24px) saturate(180%) brightness(106%);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(255, 255, 255, 0.35),
    0 4px 16px rgba(12, 12, 14, 0.06);
  border-radius: 999px;
  padding: 6px;
  overflow: hidden;
}
.nav-pill::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 55%);
}
.nav-pill > li { position: relative; z-index: 1; }
.nav-pill > li > a,
.nav-dd-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--gray-900);
  background: transparent;
  border: none;
  transition: color .2s ease, background .2s ease;
}
.nav-pill > li > a:hover,
.nav-dd-trigger:hover { color: var(--lime); background: rgba(255,255,255,0.7); }
.has-dropdown.is-open .nav-dd-trigger { background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.has-dropdown.is-open .chev { transform: rotate(180deg); }
.chev { color: var(--gray-600); }

/* ---------- Dropdown panels ---------- */
.dropdown-panel {
  display: none;
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-16%);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  box-shadow:
    0 24px 60px rgba(15,15,20,0.16),
    0 2px 8px rgba(15,15,20,0.05),
    inset 0 1px 0 rgba(255,255,255,0.9),
    inset 0 -1px 0 rgba(255,255,255,0.3);
  padding: 10px;
  min-width: 300px;
  margin-top: 6px;
  overflow: hidden;
}
.dropdown-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 45%);
}
.dropdown-panel ul { position: relative; z-index: 1; }
.dropdown-panel.is-open { display: block; animation: glass-drop .35s var(--ease); }
@keyframes glass-drop {
  from { opacity: 0; transform: translateX(-16%) translateY(-8px) scale(0.98); }
  to { opacity: 1; transform: translateX(-16%) translateY(0) scale(1); }
}
@supports not (backdrop-filter: blur(1px)) {
  .dropdown-panel { background: rgba(255, 255, 255, 0.97); }
}
.dropdown-panel ul { display: flex; flex-direction: column; }
.dropdown-panel li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 9px;
  font-size: 15px;
  font-weight: 500;
  color: var(--gray-900);
  transition: background .18s ease, color .18s ease, transform .18s ease, padding-left .18s ease;
}
.dropdown-panel li a:hover { background: var(--gray-50); color: var(--lime); transform: translateX(2px); }
.dropdown-panel li a.has-sub { color: var(--ink); }
.dropdown-panel li a.is-current {
  background: rgba(250,152,0,0.12);
  color: var(--ink);
  font-weight: 700;
}
.dropdown-panel li a.is-current::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lime);
  flex-shrink: 0;
}
.dropdown-panel li a svg { color: var(--gray-500); flex-shrink: 0; }

/* Fixed width (not shrink-to-fit) + left:50%/translateX(-50%) to center on
   the page. left:0;right:0;margin:auto only centers a box with an explicit
   width — with width left auto it stretched to fill the whole header
   instead. translateX(-50%) is baked into the animation's keyframes too
   (not left as a separate static transform) so the opening animation can't
   momentarily override it and cause a jump. */
.dropdown-panel--mega { width: 960px; max-width: calc(100vw - 32px); padding: 20px; left: 50%; transform: translateX(-50%); }
.dropdown-panel--mega.is-open { animation: glass-drop-mega .35s var(--ease); }
@keyframes glass-drop-mega {
  from { opacity: 0; transform: translateX(-50%) translateY(-8px) scale(0.98); }
  to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
.mega-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(140px, 1fr));
  gap: 8px 20px;
}
.mega-col { display: flex; flex-direction: column; }
.mega-col__title {
  display: block;
  padding: 8px 10px 10px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--gray-100);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink);
  transition: color .18s ease;
}
.mega-col__title:hover { color: var(--lime); }
.mega-col ul { display: flex; flex-direction: column; }
.mega-col li a {
  display: block;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--gray-900);
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.mega-col li a:hover { background: var(--gray-50); color: var(--lime); transform: translateX(2px); }
.mega-panel__footer { position: relative; z-index: 1; margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--gray-100); display: flex; justify-content: flex-end; }
.mega-panel__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  transition: background .2s ease, transform .2s ease;
}
.mega-panel__cta:hover { background: var(--lime); transform: translateX(2px); }
@media (max-width: 900px) {
  .dropdown-panel--mega { width: 92vw; }
  .mega-grid { grid-template-columns: repeat(2, 1fr); gap: 16px 20px; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  overflow: hidden;
  background: linear-gradient(135deg, #0c0c0e 0%, #14141a 50%, #0c0c0e 100%);
}
.grid-decor { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.grid-line {
  position: absolute;
  background: var(--line);
}
.grid-line--v1 { left: 4.7%; top: 0; bottom: 0; width: 1px; }
.grid-line--v2 { left: 27%; top: 0; bottom: 0; width: 1px; }
.grid-line--v3 { right: 27%; top: 0; bottom: 0; width: 1px; }
.grid-line--v4 { right: 4.7%; top: 0; bottom: 0; width: 1px; }
.grid-line--h { left: 0; right: 0; top: 38%; height: 1px; }
.plus {
  position: absolute;
  color: var(--gray-400);
  font-size: 16px;
  line-height: 1;
  transform: translate(-50%, -50%);
}
.plus--1 { left: 11.8%; top: 38%; }
.plus--2 { right: 11.8%; top: 38%; }
.accent-line {
  position: absolute;
  background: var(--lime);
}
.accent-line--left {
  left: 0;
  width: 7%;
  top: 53.5%;
  height: 2px;
}
.accent-line--right {
  right: 4.7%;
  top: 38%;
  width: 2px;
  height: 190px;
}

.hero-inner {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  animation: fadeInUp 0.8s ease-out;
}
.eyebrow {
  margin: 0 0 22px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 3px;
  color: #FA9800;
  text-transform: uppercase;
  background: linear-gradient(135deg, #FA9800, #FFB84D);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero-title {
  margin: 0 0 28px;
  font-size: 84px;
  line-height: 1.03;
  font-weight: 900;
  letter-spacing: -2.5px;
  color: #ffffff;
  text-shadow: 0 0 30px rgba(250, 152, 0, 0.4), 0 0 60px rgba(250, 152, 0, 0.3);
  background: linear-gradient(135deg, #ffffff 0%, #FFD700 50%, #FFA500 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.3));
}
.hero-sub {
  margin: 0 auto 40px;
  max-width: 640px;
  font-size: 18px;
  line-height: 1.6;
  color: #b4b4b8;
}
.hero-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
}
.rating-badge {
  display: flex;
  align-items: center;
  gap: 10px;
}
.rating-badge__stars { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.stars { color: #FFB020; font-size: 14px; letter-spacing: 1px; }
.rating-badge__label { font-size: 13px; color: var(--gray-600); font-weight: 500; }

/* ---------- Consultants CTA ---------- */
.consult-section {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 70px 40px 120px;
}
.consult-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 24px;
}
.consult-dots span {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--gray-100);
}
.consult-dots span.is-active { background: #C97800; }

.consult-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: 20px;
  overflow: hidden;
}
.consult-card__photo {
  position: relative;
  background: radial-gradient(120% 140% at 20% 20%, #1c1c22 0%, #14141a 65%, #0c0c0e 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 420px;
}
.consult-card__mark {
  width: 45%;
  max-width: 220px;
  opacity: 0.9;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,0.35));
  transition: transform .5s var(--ease);
}
.consult-card:hover .consult-card__mark { transform: scale(1.05) rotate(-4deg); }

.consult-card__content {
  position: relative;
  background-color: #0c0c0e;
  background-image:
    linear-gradient(45deg, rgba(255,255,255,0.035) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255,255,255,0.035) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(255,255,255,0.035) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(255,255,255,0.035) 75%);
  background-size: 56px 56px;
  background-position: 0 0, 0 28px, 28px -28px, -28px 0;
  padding: 64px 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.consult-card__content h2 {
  margin: 0 0 22px;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.25;
  color: #fff;
}
.consult-card__content p {
  margin: 0 0 32px;
  font-size: 15.5px;
  line-height: 1.7;
  color: rgba(255,255,255,0.72);
  max-width: 480px;
}
.btn-consult {
  align-self: flex-start;
  padding: 15px 26px;
  background: #f2c94c;
  color: #14141a;
}
.btn-consult:hover { background: #f6d873; transform: translateY(-2px); box-shadow: 0 14px 28px -14px rgba(242,201,76,0.7); }

/* ---------- Trust / deliver banner ---------- */
.trust-section {
  min-height: 100vh;
  padding: 90px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.trust-logos-label {
  text-align: center;
  margin: 0 0 32px;
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-500);
}
.trust-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px 48px;
  margin-bottom: 64px;
  padding: 0 40px;
}
.trust-logos span {
  font-size: 19px;
  font-weight: 700;
  color: var(--gray-400);
  letter-spacing: -0.2px;
  transition: color .2s ease;
}
.trust-logos span:hover { color: var(--ink); }

.trust-banner {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.trust-banner__panel {
  position: relative;
  min-height: 62vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 48px 56px;
  overflow: hidden;
}
.trust-banner__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: transform .6s var(--ease);
}
.trust-banner__panel:hover .trust-banner__art { transform: scale(1.05); }
.trust-banner__panel::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.15) 55%, rgba(0,0,0,0.05) 100%);
  transition: background .35s ease;
}
.trust-banner__panel:hover::before { background: linear-gradient(0deg, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.25) 55%, rgba(0,0,0,0.1) 100%); }
.trust-banner__panel--services {
  background: linear-gradient(135deg, #6b5a4a 0%, #3c322a 100%);
}
.trust-banner__panel--industries {
  background: linear-gradient(135deg, #2a2a30 0%, #14141a 100%);
}
.trust-banner__label {
  position: relative;
  z-index: 2;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
  margin-bottom: 8px;
}
.trust-banner__panel h3 {
  position: relative;
  z-index: 2;
  margin: 0;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #fff;
  transition: transform .35s var(--ease);
}
.trust-banner__panel:hover h3 { transform: translateX(6px); }

/* ---------- Testimonials ---------- */
.testimonials-section {
  background: #eef1f3;
  padding: 100px 0 90px;
  overflow: hidden;
}
.testimonials-title {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 56px;
  padding: 0 40px;
  font-size: 42px;
  font-weight: 800;
  letter-spacing: -1px;
  color: #0c0c0e;
}
.testimonials-title__accent { color: #A85D00; }

.testimonial-carousel {
  position: relative;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 80px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.testimonial-track {
  flex: 1;
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 20px calc(50% - 165px);
}
.testimonial-track::-webkit-scrollbar { display: none; }

.testimonial-card {
  position: relative;
  flex: 0 0 auto;
  width: min(330px, 82vw);
  scroll-snap-align: center;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: 22px;
  padding: 36px 32px;
  box-shadow:
    0 12px 30px -18px rgba(20,30,40,0.18),
    inset 0 1px 0 rgba(255,255,255,0.9),
    inset 0 -1px 0 rgba(255,255,255,0.3);
  opacity: 0.6;
  transform: scale(0.94);
  transition: opacity .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
  overflow: hidden;
}
.testimonial-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 50%);
}
.testimonial-card > * { position: relative; z-index: 1; }
.testimonial-card.is-active {
  opacity: 1;
  transform: scale(1);
  background: rgba(255, 255, 255, 0.72);
  box-shadow:
    0 30px 60px -24px rgba(20,30,40,0.28),
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(255,255,255,0.4);
}
.testimonial-card__quote-mark {
  position: absolute;
  top: 18px;
  right: 28px;
  font-size: 64px;
  font-weight: 800;
  color: var(--gray-100);
  line-height: 1;
  font-family: Georgia, serif;
}
.testimonial-card__meta { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.testimonial-card__stars { color: #A85D00; font-size: 14px; letter-spacing: 1px; }
.testimonial-card__badge {
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.testimonial-card__quote {
  position: relative;
  z-index: 1;
  margin: 0 0 22px;
  font-size: 17px;
  line-height: 1.6;
  font-style: italic;
  color: #0c0c0e;
  min-height: 108px;
}
.testimonial-card__link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  font-weight: 600;
  color: #A85D00;
  margin-bottom: 26px;
}
.testimonial-card__link span { transition: transform .2s ease; }
.testimonial-card__link:hover span { transform: translateX(3px); }
.testimonial-card__author { display: flex; align-items: center; gap: 12px; }
.testimonial-card__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--gray-100);
  color: var(--gray-500);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  flex-shrink: 0;
}
.testimonial-card__author strong { display: block; font-size: 14.5px; color: #0c0c0e; }
.testimonial-card__author span { display: block; font-size: 13px; color: var(--gray-500); }

.testimonial-arrow {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: #0c0c0e;
  transition: color .2s ease, transform .2s var(--ease);
}
.testimonial-arrow:hover { color: #A85D00; transform: scale(1.15); }

.testimonial-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 40px;
}
.testimonial-dots button {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: none;
  padding: 0;
  background: #c8cdd1;
  cursor: pointer;
  transition: all .25s ease;
}
.testimonial-dots button.is-active { width: 14px; height: 14px; background: var(--lime); }

/* ---------- Section head (shared) ---------- */
.section-head {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 60px;
  flex-wrap: wrap;
}
.section-title {
  margin: 0;
  font-size: 42px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -1px;
  flex: 1 1 380px;
}
.section-title .ink { color: var(--ink); }
.section-title .muted { color: var(--gray-400); }
.section-desc {
  margin: 6px 0 0;
  max-width: 420px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--gray-600);
  flex: 1 1 320px;
}

/* ---------- Help / carousel section ---------- */
.help-section {
  position: relative;
  padding: 130px 0 70px;
  z-index: 1;
}
.carousel {
  position: relative;
  max-width: var(--max-width);
  margin: 70px auto 0;
  padding: 0 40px;
}
.carousel-track {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  width: 100%;
}
.service-card {
  background: var(--gray-50);
  border-radius: var(--radius-card);
  padding: 28px;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.service-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -22px rgba(12,12,14,0.22); }
.service-card__icon { color: var(--ink); }
.service-card__art { flex: 1; width: 100%; height: auto; margin: 14px 0; }
.service-card__title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
}

.service-card--uxui { background: #f6f4fd; }
.service-card--mobile { background: #f1f7fe; }
.service-card--web { background: #f0faf5; }
.service-card--qa { background: #fdf6ed; }
.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  transition: background .2s ease, transform .2s var(--ease), box-shadow .2s ease;
}
.carousel-arrow--prev { left: 0; }
.carousel-arrow--next { right: 0; }
.carousel-arrow:hover { background: var(--gray-50); transform: translateY(-50%) scale(1.08); box-shadow: 0 8px 18px -8px rgba(12,12,14,0.25); }

.trusted-line {
  text-align: center;
  margin: 90px 0 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--gray-500);
}

/* ---------- Cases section ---------- */
.cases-section {
  background: #0a0a0c;
  padding: 120px 0 130px;
}
.cases-section .section-title .ink { color: #fff; }
.cases-section .section-title .muted { color: #6b6b70; }

.cases-grid {
  max-width: var(--max-width);
  margin: 56px auto 0;
  padding: 0 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px 28px;
}
.case-card { transition: transform .35s var(--ease); }
.case-card:hover { transform: translateY(-6px); }
.case-card__visual {
  display: block;
  aspect-ratio: 1.46 / 1;
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 16px;
  background: #141416;
  box-shadow: 0 0 0 rgba(0,0,0,0);
  transition: box-shadow .35s var(--ease);
}
.case-card:hover .case-card__visual { box-shadow: 0 24px 48px -20px rgba(0,0,0,0.55); }
.case-card__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
  transition: transform .5s var(--ease);
}
.case-card:hover .case-card__visual img { transform: scale(1.06); }
.case-card__title {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
}
.case-card__desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: #8a8a90;
}

/* ---------- Process section ---------- */
.process-section {
  background: linear-gradient(180deg, #fff5e9 0%, #fdf1e3 100%);
  padding: 110px 0 120px;
}
.process-head {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 40px;
  text-align: center;
}
.process-title {
  margin: 0;
  font-size: 42px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -1px;
  color: var(--ink);
}
.process-title__accent { color: #A85D00; }
.process-intro {
  max-width: 480px;
  margin: 18px auto 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--gray-600);
}

.process-grid {
  max-width: var(--max-width);
  margin: 56px auto 0;
  padding: 0 40px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.process-card {
  background: var(--ink);
  border-radius: var(--radius-card);
  padding: 36px 34px 34px;
  display: flex;
  flex-direction: column;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.process-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 54px -24px rgba(12, 12, 14, 0.45);
}

.process-card__eyebrow {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #FFB84D;
}
.process-card__title {
  margin: 0 0 12px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.3px;
  color: #fff;
}
.process-card__desc {
  margin: 0 0 28px;
  font-size: 14.5px;
  line-height: 1.65;
  color: #b4b4b8;
}

.process-card__art {
  position: relative;
  margin-top: auto;
  border-radius: 12px;
  overflow: hidden;
}
.process-card__art svg { display: block; width: 100%; height: auto; }

.process-card__callout {
  position: absolute;
  background: #fff;
  color: var(--ink);
  font-size: 11px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 50px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
  white-space: nowrap;
}

@media (max-width: 1080px) {
  .process-grid { grid-template-columns: 1fr; max-width: 560px; }
}

@media (max-width: 560px) {
  .process-section { padding: 80px 0 90px; }
  .process-head { padding: 0 20px; }
  .process-title { font-size: 28px; }
  .process-grid { padding: 0 20px; gap: 18px; margin-top: 40px; }
  .process-card__callout { font-size: 10px; padding: 5px 10px; }
}

/* ---------- Industries section ---------- */
.industries-section {
  background: #eef1f3;
  padding: 110px 0 120px;
}
.industries-head {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 40px;
  text-align: center;
}
.industries-eyebrow {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #A85D00;
}
.industries-title {
  margin: 0;
  font-size: 42px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -1px;
  color: var(--ink);
}
.industries-title__accent { color: #A85D00; }
.industries-intro {
  max-width: 620px;
  margin: 18px auto 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--gray-600);
}

.industries-grid {
  max-width: var(--max-width);
  margin: 56px auto 0;
  padding: 0 40px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.industry-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 32px 30px 28px;
  background: #fff;
  border: 1px solid rgba(12, 12, 14, 0.06);
  border-radius: var(--radius-card);
  text-decoration: none;
  overflow: hidden;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
/* Accent wash that fades in on hover */
.industry-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(150deg, rgba(250, 152, 0, 0.10) 0%, rgba(250, 152, 0, 0) 55%);
  opacity: 0;
  transition: opacity .4s var(--ease);
  pointer-events: none;
}
.industry-card:hover {
  transform: translateY(-6px);
  border-color: rgba(250, 152, 0, 0.35);
  box-shadow: 0 22px 48px -24px rgba(12, 12, 14, 0.32);
}
.industry-card:hover::before { opacity: 1; }
.industry-card:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 3px;
}

.industry-card__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 22px;
  border-radius: 14px;
  background: rgba(250, 152, 0, 0.10);
  color: #A85D00;
  transition: background .4s var(--ease), color .4s var(--ease), transform .4s var(--ease);
}
.industry-card__icon svg { width: 26px; height: 26px; }
.industry-card:hover .industry-card__icon {
  background: var(--lime);
  color: #fff;
  transform: scale(1.06);
}

.industry-card__name {
  margin: 0 0 10px;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.4px;
  color: var(--ink);
}
.industry-card__desc {
  margin: 0 0 22px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--gray-600);
}
.industry-card__cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 700;
  color: #A85D00;
}
.industry-card__cta span {
  transition: transform .35s var(--ease);
}
.industry-card:hover .industry-card__cta span { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .industry-card,
  .industry-card::before,
  .industry-card__icon,
  .industry-card__cta span { transition: none; }
  .industry-card:hover { transform: none; }
  .industry-card:hover .industry-card__icon { transform: none; }
  .industry-card:hover .industry-card__cta span { transform: none; }
}

.highlight { color: var(--ink); background: linear-gradient(180deg, transparent 62%, var(--lime) 62%); }

/* ---------- Approach section ---------- */
.approach-section {
  padding: 110px 0 130px;
}
.approach-title { font-size: 42px; }
.approach-desc { align-self: flex-start; margin-top: 14px; }

.approach-grid {
  max-width: var(--max-width);
  margin: 64px auto 0;
  padding: 0 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px 64px;
}
.approach-item__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--lime);
  color: var(--ink);
  margin-bottom: 18px;
  transition: transform .35s var(--ease), background .35s var(--ease);
}
.approach-item:hover .approach-item__icon { transform: scale(1.1) rotate(-6deg); background: var(--lime); }
.approach-item h3 {
  margin: 0 0 10px;
  font-size: 19px;
  font-weight: 700;
  color: var(--ink);
}
.approach-item p {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--gray-600);
  max-width: 460px;
}

/* ---------- Good hands section ---------- */
.hands-section {
  padding: 110px 0 130px;
  background: var(--gray-50);
}
.hands-head { justify-content: center; text-align: center; }
.hands-head .section-title { flex: none; font-size: 42px; }

.hands-stats {
  max-width: var(--max-width);
  margin: 64px auto 0;
  padding: 0 40px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}
.hands-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 0 20px;
  border-left: 1px solid var(--line);
}
.hands-stat:first-child { border-left: none; }
.hands-stat:hover .hands-stat__icon { transform: scale(1.1); background: var(--lime); color: var(--ink); }
.hands-stat__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1.5px solid var(--lime);
  color: var(--gray-600);
  margin-bottom: 6px;
  transition: transform .35s var(--ease), background .35s var(--ease), color .35s var(--ease);
}
.hands-stat__label { font-size: 14px; font-weight: 600; color: var(--ink); }
.hands-stat__num { font-size: 30px; font-weight: 800; color: var(--ink); }
.hands-stat__link {
  margin-top: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-600);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.hands-stat__link span { color: var(--ink); transition: transform .15s ease; }
.hands-stat__link:hover span { transform: translateX(3px); }

.hands-logos-label {
  text-align: center;
  margin: 76px 0 32px;
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-500);
}
.hands-logos {
  position: relative;
  width: 100%;
  overflow: hidden;
  display: flex;
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.hands-logos__track {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 44px;
  padding: 0 22px;
  animation: hands-marquee 34s linear infinite;
}
.hands-logos:hover .hands-logos__track { animation-play-state: paused; }
.hands-logos span {
  font-size: 17px;
  font-weight: 700;
  color: var(--gray-400);
  letter-spacing: -0.2px;
  white-space: nowrap;
  transition: color .2s ease;
}
.hands-logos span:hover { color: var(--ink); }

@keyframes hands-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}
@media (prefers-reduced-motion: reduce) {
  .hands-logos__track { animation: none; }
}

/* ---------- Featured case studies ---------- */
.featured-section {
  background: #e9f7f6;
  padding: 100px 0;
}
.featured-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  align-items: center;
  gap: 64px;
}
.featured-carousel { flex: 1; min-width: 0; }

.featured-track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.featured-track::-webkit-scrollbar { display: none; }

.featured-card {
  position: relative;
  flex: 0 0 auto;
  width: 300px;
  aspect-ratio: 0.8 / 1;
  border-radius: 10px;
  overflow: hidden;
  scroll-snap-align: start;
  background: #0c0c0e;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.featured-card:hover { transform: translateY(-6px); box-shadow: 0 26px 46px -20px rgba(12,12,14,0.4); }
.featured-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
  transition: transform .5s var(--ease);
}
.featured-card:hover img { transform: scale(1.06); }
.featured-card__badge {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 1;
  background: rgba(12,12,14,0.55);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 5px;
}
.featured-card__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 26px;
  background: linear-gradient(0deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.15) 55%, rgba(0,0,0,0) 75%);
}
.featured-card__overlay h3 {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
}
.featured-card__overlay p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255,255,255,0.85);
}

.featured-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 28px;
}
.featured-dots button {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: none;
  padding: 0;
  background: #f3f3f4;
  cursor: pointer;
  transition: all .2s ease;
}
.featured-dots button.is-active { width: 24px; background: #C97800; }

.featured-side { flex: 0 0 340px; }
.featured-side h2 {
  margin: 0 0 16px;
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: #0c0c0e;
}
.featured-side p {
  margin: 0 0 32px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--gray-600);
  max-width: 320px;
}
.featured-side__row {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}
.featured-side__arrows { display: flex; gap: 12px; }
.featured-arrow {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 1.5px solid #C97800;
  background: transparent;
  color: #A85D00;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s ease, color .2s ease, transform .2s var(--ease);
}
.featured-arrow:hover { background: #C97800; color: #fff; transform: scale(1.08); }
.featured-side__link {
  font-size: 15px;
  font-weight: 600;
  color: #A85D00;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .2s ease;
}
.featured-side__link:hover { color: #C97800; }

/* ---------- Why us / rocks section ---------- */
.rocks-section {
  padding: 100px 0 130px;
}
.rocks-head {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 40px;
  text-align: center;
}
.rocks-title {
  margin: 0 0 18px;
  font-size: 46px;
  font-weight: 600;
  letter-spacing: -1px;
  color: var(--ink);
}
.rocks-sub {
  margin: 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--gray-600);
}

.rocks-grid {
  max-width: var(--max-width);
  margin: 56px auto 0;
  padding: 0 40px;
  display: grid;
  grid-template-columns: 1fr 1.05fr 2fr;
  grid-template-rows: repeat(2, 190px);
  gap: 24px;
}
.rocks-card {
  border-radius: 20px;
  padding: 28px;
  position: relative;
  overflow: hidden;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.rocks-card:hover { transform: translateY(-5px); box-shadow: 0 24px 44px -22px rgba(12,12,14,0.3); }
.rocks-card__num {
  display: block;
  font-size: 30px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
}
.rocks-card__num--dark { color: var(--ink); }
.rocks-card__label { display: block; font-size: 14px; color: rgba(255,255,255,0.8); }
.rocks-card__label--dark { color: var(--gray-600); }

.rocks-card--years {
  grid-column: 1;
  grid-row: 1 / 3;
  background: linear-gradient(160deg, #FA9800 0%, #C97800 100%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.rocks-card__art { width: 100%; height: auto; margin-top: 20px; }

.rocks-card--apps {
  grid-column: 2;
  grid-row: 1;
  background: #f6dfc0;
}
.rocks-card--devs {
  grid-column: 2;
  grid-row: 2;
  background: #FFF1DC;
}

.rocks-card--founder {
  grid-column: 3;
  grid-row: 1 / 3;
  background: #eee1d3;
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 32px;
}
.rocks-card__deco {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.rocks-card__photo {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: 200px;
  align-self: stretch;
  border-radius: 14px;
  background: #e3d5c4;
  overflow: hidden;
}
.rocks-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: transform .5s var(--ease);
}
.rocks-card--founder:hover .rocks-card__photo img { transform: scale(1.05); }
.rocks-card__body { position: relative; z-index: 1; }
.rocks-card__brand {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 16px;
}
.rocks-card__brand-mark { width: 18px; height: auto; }
.rocks-card__brand span { font-size: 13px; font-weight: 800; letter-spacing: 0.5px; color: var(--ink); }
.rocks-card--founder h3 {
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
}
.rocks-card--founder p {
  margin: 0 0 40px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--gray-600);
  max-width: 320px;
}
.rocks-card__meta { display: flex; flex-direction: column; gap: 2px; }
.rocks-card__meta strong { font-size: 15px; color: var(--ink); }
.rocks-card__meta span { font-size: 13px; color: var(--gray-500); }

/* ---------- Workflow section ---------- */
.workflow-section {
  position: relative;
  padding: 130px 0 140px;
  overflow: hidden;
  background: #fbfbfc;
}
.workflow-divider {
  position: relative;
  z-index: 1;
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
  border-top: 1px solid var(--line);
  margin-top: 66px;
}
.workflow-inner {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
  padding: 0 40px;
  text-align: center;
}
.workflow-inner .eyebrow { margin-bottom: 18px; }
.workflow-title {
  margin: 0 0 20px;
  font-size: 48px;
  font-weight: 700;
  letter-spacing: -1.5px;
  line-height: 1.1;
}
.workflow-title .ink { color: var(--ink); }
.workflow-title .muted { color: var(--gray-400); }
.workflow-sub {
  margin: 0 0 36px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--gray-600);
}

.workflow-grid {
  position: relative;
  z-index: 1;
  max-width: var(--max-width);
  margin: 56px auto 0;
  padding: 0 40px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.workflow-card {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  padding: 32px;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: transform .25s ease, box-shadow .25s ease;
}
.workflow-card:hover { transform: translateY(-4px); }
.workflow-card--top { justify-content: flex-start; }
.workflow-card--top .workflow-card__icon { margin-bottom: 0; }
.workflow-card--top .workflow-card__label { max-width: 240px; }
.workflow-card__icon {
  position: relative;
  z-index: 1;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: auto;
}
.workflow-card__num {
  position: relative;
  z-index: 1;
  display: block;
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -1px;
  color: #fff;
  margin: 22px 0 10px;
}
.workflow-card__num--dark { color: var(--ink); }
.workflow-card__label {
  position: relative;
  z-index: 1;
  display: block;
  max-width: 220px;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(255,255,255,0.82);
}
.workflow-card__label--dark { color: var(--gray-600); }

.workflow-card--code {
  background: linear-gradient(155deg, #FFB84D 0%, #FA9800 45%, #C97800 100%);
  box-shadow: 0 20px 45px -18px rgba(124,58,237,0.55);
}
.workflow-card--code:hover { box-shadow: 0 28px 55px -18px rgba(124,58,237,0.65); }
.workflow-card--code::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 100% 0%, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0) 55%);
}
.workflow-card__waves { position: absolute; inset: 0; width: 100%; height: 100%; }

.workflow-card--engineers {
  background: linear-gradient(160deg, #14141a 0%, #0c0c0e 100%);
  box-shadow: 0 20px 45px -18px rgba(8,20,40,0.55);
}
.workflow-card--engineers:hover { box-shadow: 0 28px 55px -18px rgba(8,20,40,0.65); }
.workflow-card__wave { position: absolute; inset: 0; width: 100%; height: 100%; }

.workflow-card--speed {
  background: linear-gradient(160deg, #f3e9dc 0%, #e9dac6 100%);
  box-shadow: 0 20px 45px -20px rgba(90,74,143,0.28);
}
.workflow-card--speed:hover { box-shadow: 0 28px 55px -20px rgba(90,74,143,0.35); }
.workflow-card__rocket {
  position: absolute;
  top: 26px;
  right: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.workflow-card__trend { position: absolute; left: 0; bottom: 0; width: 100%; height: 55%; }

/* ---------- Chat widget ---------- */
.chat-widget {
  position: fixed;
  right: 0;
  bottom: 90px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.chat-widget__label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  background: var(--indigo);
  color: #0c0c0e;
  border: none;
  padding: 16px 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3px;
  border-radius: 10px 0 0 10px;
  transition: background .25s ease;
}
.chat-widget__label:hover { background: var(--indigo-dark); }
.chat-widget__bubble {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--indigo-dark);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
  margin-right: 6px;
  box-shadow: 0 6px 16px rgba(65,71,184,0.35);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.chat-widget__bubble:hover { transform: scale(1.12); box-shadow: 0 10px 22px rgba(65,71,184,0.5); }

/* ---------- FAQ ---------- */
.faq-section {
  padding: 110px 0 140px;
}
.faq-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  gap: 80px;
}
.faq-heading {
  flex: 0 0 340px;
  margin: 0;
  font-size: 46px;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -1px;
}
.faq-heading .ink { color: var(--ink); }
.faq-heading .muted { color: var(--gray-400); }

.faq-list { flex: 1; min-width: 0; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item:first-child { border-top: 1px solid var(--line); }
.faq-item__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 26px 4px;
  background: none;
  border: none;
  text-align: left;
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
}
.faq-item__icon {
  position: relative;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
}
.faq-item__icon::before,
.faq-item__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--ink);
  transform: translate(-50%, -50%);
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.faq-item__icon::before { width: 14px; height: 1.6px; }
.faq-item__icon::after { width: 1.6px; height: 14px; }
.faq-item.is-open .faq-item__icon::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.faq-item.is-open .faq-item__q { color: #C97800; }

.faq-item__a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s var(--ease);
}
.faq-item__a p {
  margin: 0;
  padding: 0 4px 26px;
  max-width: 720px;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--gray-600);
}

/* ---------- Footer ---------- */
.site-footer {
  background: #fff;
  padding: 100px 40px 0;
}
.footer-cta {
  max-width: var(--max-width);
  margin: 0 auto;
  background: var(--ink);
  border-radius: 24px;
  padding: 80px 60px;
  text-align: center;
}
.footer-cta__title {
  margin: 0 0 20px;
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1.15;
}
.footer-cta__title .ink { color: #fff; }
.footer-cta__title .muted { color: #6b6b70; }
.footer-cta__desc {
  margin: 0 auto 36px;
  max-width: 560px;
  font-size: 16px;
  line-height: 1.65;
  color: rgba(255,255,255,0.72);
}
.btn-footer {
  padding: 16px 30px;
  background: #fff;
  color: var(--ink);
}
.btn-footer:hover { background: var(--lime); transform: translateY(-2px); box-shadow: 0 14px 28px -14px rgba(250, 152, 0, 0.7); }

.footer-links {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 80px 20px 60px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1.3fr;
  gap: 40px;
}
.footer-col h3 {
  margin: 0 0 22px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--ink);
}
.footer-col ul { display: flex; flex-direction: column; gap: 14px; }
.footer-col ul a {
  font-size: 15px;
  color: var(--gray-600);
  transition: color .2s ease;
}
.footer-col ul a:hover { color: var(--ink); }

.footer-col--contact { display: flex; flex-direction: column; }
.footer-contact__label { margin: 0 0 4px; font-size: 13px; color: var(--gray-500); }
.footer-contact__value {
  display: inline-block;
  margin-bottom: 20px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  transition: color .2s ease;
}
.footer-contact__value:hover { color: #C97800; }

.footer-social { display: flex; gap: 10px; margin-top: 8px; }
.footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--ink);
  transition: transform .2s var(--ease);
}
.footer-social a:hover { transform: translateY(-2px); }

.footer-bottom {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 28px 20px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.footer-bottom__logo { display: flex; align-items: center; gap: 8px; }
.footer-bottom__mark { width: 20px; height: auto; }
.footer-bottom__logo span { font-weight: 800; font-size: 14px; letter-spacing: 0.5px; color: var(--ink); }
.footer-bottom p { margin: 0; font-size: 13px; color: var(--gray-500); }

/* ---------- Subpage hero ---------- */
.subpage-hero {
  position: relative;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 150px 40px 96px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 64px;
  overflow: hidden;
  isolation: isolate;
}
/* soft ambient wash so the section never reads as a flat white slab */
.subpage-hero::before {
  content: "";
  position: absolute;
  top: -22%;
  right: -8%;
  width: 62%;
  height: 130%;
  background: radial-gradient(ellipse at center, rgba(250,152,0,0.10) 0%, rgba(250,152,0,0) 68%);
  pointer-events: none;
  z-index: -1;
}
.subpage-hero__decor { position: absolute; inset: 0; pointer-events: none; z-index: -1; }
.subpage-hero__decor .sh-line {
  position: absolute;
  top: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(180deg, rgba(12,12,14,0) 0%, rgba(12,12,14,0.055) 45%, rgba(12,12,14,0) 100%);
}
.subpage-hero__decor .sh-line--1 { left: 16%; }
.subpage-hero__decor .sh-line--2 { left: 52%; }
.subpage-hero__decor .sh-line--3 { left: 84%; }
.subpage-hero__decor .sh-plus {
  position: absolute;
  font-size: 15px;
  font-weight: 300;
  color: rgba(250,152,0,0.45);
  line-height: 1;
}
.subpage-hero__decor .sh-plus--1 { left: 52%; top: 18%; }
.subpage-hero__decor .sh-plus--2 { left: 16%; bottom: 16%; }

.subpage-hero__text { position: relative; z-index: 1; max-width: 560px; }
.subpage-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 22px;
  padding: 7px 15px 7px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,0.72);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--gray-600);
}
.subpage-hero__eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 3px rgba(250,152,0,0.18);
  flex: none;
}
.subpage-hero__text h1 {
  margin: 0 0 24px;
  font-size: 62px;
  line-height: 1.03;
  font-weight: 800;
  letter-spacing: -2px;
  color: var(--ink);
}
.subpage-hero__text p {
  margin: 0 0 16px;
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--gray-600);
}
.subpage-hero__cta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 30px;
}
.subpage-hero__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 14px 8px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1.5px solid transparent;
  transition: border-color .3s var(--ease), gap .3s var(--ease);
}
.subpage-hero__link:hover { border-bottom-color: var(--lime); gap: 11px; }

.subpage-hero__art-wrap {
  position: relative;
  width: 500px;
  max-width: 48%;
  flex-shrink: 0;
}
.subpage-hero__glow {
  position: absolute;
  inset: -40px;
  background: radial-gradient(circle, rgba(250, 152, 0, 0.16) 0%, rgba(250, 152, 0, 0) 70%);
  pointer-events: none;
}
/* outlined accent card peeking out behind the main photo */
.subpage-hero__frame {
  position: absolute;
  top: -26px;
  right: -26px;
  width: 62%;
  height: 58%;
  border: 1.5px solid rgba(250,152,0,0.6);
  border-radius: 26px;
  pointer-events: none;
}
.subpage-hero__stack { position: relative; z-index: 1; padding-bottom: 58px; will-change: transform; }

/* 3:2 — several sources have wide text baked in ("QUALITY ASSURANCE",
   "WEB DEVELOPMENT"), so a portrait crop would slice straight through it. */
.subpage-hero__photo {
  display: block;
  width: 100%;
  height: auto; /* beats the width/height attribute hints so aspect-ratio wins */
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 24px;
  border: 1px solid var(--line);
  box-shadow: 0 34px 70px -36px rgba(12, 12, 14, 0.6);
}
/* smaller photo overlapping the main one, bottom-left */
.subpage-hero__photo-sub {
  position: absolute;
  left: -34px;
  bottom: 0;
  width: 54%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 16px;
  border: 6px solid #fff;
  box-shadow: 0 24px 46px -22px rgba(12, 12, 14, 0.42);
}
/* For sources whose subject sits off-centre and would otherwise be clipped */
.subpage-hero__photo--right { object-position: 78% center; }

/* ---------- AI dark hero banner ---------- */
.ai-hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background:
    radial-gradient(55% 65% at 78% 55%, rgba(250,152,0,0.16) 0%, rgba(250,152,0,0) 65%),
    radial-gradient(45% 55% at 26% 24%, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(135deg, #050505 0%, #0c0c0e 32%, #131315 58%, #0a0a0b 100%);
  padding: 150px 40px 90px;
}
.ai-hero__video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
}
.ai-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(135deg, rgba(4,4,5,0.9) 0%, rgba(8,8,9,0.84) 32%, rgba(12,12,13,0.74) 58%, rgba(10,10,11,0.68) 100%);
}
.ai-hero__pattern {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.4;
  background-image: url('data:image/svg+xml,<svg width=%22120%22 height=%22120%22 viewBox=%220 0 120 120%22 xmlns=%22http://www.w3.org/2000/svg%22><circle cx=%2210%22 cy=%2210%22 r=%221.4%22 fill=%22%23ffffff%22 opacity=%220.4%22/><circle cx=%2260%22 cy=%2245%22 r=%221%22 fill=%22%23ffffff%22 opacity=%220.3%22/><circle cx=%22100%22 cy=%2220%22 r=%221.2%22 fill=%22%23ffffff%22 opacity=%220.35%22/><circle cx=%2230%22 cy=%2290%22 r=%221%22 fill=%22%23ffffff%22 opacity=%220.25%22/><circle cx=%2290%22 cy=%2295%22 r=%221.4%22 fill=%22%23ffffff%22 opacity=%220.35%22/><path d=%22M10 10L60 45M60 45L100 20M60 45L30 90M60 45L90 95%22 stroke=%22%23ffffff%22 stroke-width=%220.6%22 opacity=%220.18%22/></svg>');
  background-size: 240px 240px;
  mask-image: linear-gradient(120deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.45) 45%, rgba(0,0,0,0) 78%);
  -webkit-mask-image: linear-gradient(120deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.45) 45%, rgba(0,0,0,0) 78%);
}
.ai-hero__glow { position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none; z-index: 0; }
.ai-hero__glow--1 { width: 560px; height: 560px; top: -140px; right: -100px; background: rgba(250,152,0,0.22); }
.ai-hero__glow--2 { width: 380px; height: 380px; bottom: -120px; left: 8%; background: rgba(255,255,255,0.05); }
.ai-hero__inner {
  position: relative;
  z-index: 1;
  max-width: var(--max-width);
  margin: 0 auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 64px;
}
.ai-hero__text { max-width: 600px; }
.ai-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 22px;
  padding: 7px 15px 7px 12px;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
}
.ai-hero__eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 9px 2px rgba(250,152,0,0.75);
  flex: none;
}
.ai-hero__title { margin: 0 0 22px; font-size: 58px; line-height: 1.06; font-weight: 800; letter-spacing: -2px; color: #fff; }
.ai-hero__desc { margin: 0 0 16px; font-size: 15.5px; line-height: 1.75; color: rgba(255,255,255,0.6); max-width: 520px; }
.ai-hero__cta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 30px; }
.ai-hero__btn { background: #fff; color: #0c0c0e; box-shadow: 0 20px 44px -14px rgba(250,152,0,0.4); }
.ai-hero__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 14px 8px;
  font-size: 14.5px;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  border-bottom: 1.5px solid transparent;
  transition: border-color .3s var(--ease), gap .3s var(--ease);
}
.ai-hero__link:hover { border-bottom-color: var(--lime); gap: 11px; }
.ai-hero__facts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; }
.ai-hero__fact {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.04);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: rgba(255,255,255,0.72);
}

.ai-hero__art { position: relative; width: 560px; max-width: 46%; flex-shrink: 0; }
.ai-hero__art-glow {
  position: absolute;
  inset: -15% -10%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(250,152,0,0.28) 0%, rgba(255,255,255,0.06) 45%, rgba(250,152,0,0) 72%);
  filter: blur(10px);
  z-index: 0;
}
.ai-hero__art img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  border-radius: 26px;
  filter: drop-shadow(0 40px 70px rgba(0,0,0,0.5));
  will-change: transform;
}
.ai-hero__badge, .ai-hero__note {
  position: absolute;
  z-index: 2;
  padding: 14px 20px;
  font-size: 13.5px;
  font-weight: 600;
  color: #fff;
}
.ai-hero__badge { top: 8%; left: -6%; border-radius: 999px; }
.ai-hero__note { bottom: 14%; right: -8%; max-width: 230px; padding: 16px 20px; border-radius: 16px; font-size: 13px; font-weight: 500; line-height: 1.55; color: rgba(255,255,255,0.85); }
.ai-hero__note b { color: #fff; font-weight: 700; }
@media (max-width: 900px) {
  .ai-hero { padding: 130px 20px 60px; min-height: auto; }
  .ai-hero__inner { flex-direction: column; align-items: flex-start; gap: 44px; }
  .ai-hero__title { font-size: 40px; letter-spacing: -1.2px; }
  .ai-hero__art { width: 100%; max-width: 380px; margin: 0 auto; }
  .ai-hero__badge { left: 0; }
  .ai-hero__note { right: 0; }
}

/* ---------- AI pillars strip (4-icon capability cards) ---------- */
.ai-pillars {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 40px;
  margin-top: -64px;
  position: relative;
  z-index: 2;
}
.ai-pillars__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.ai-pillars__card {
  padding: 30px 26px;
  border-radius: 20px;
  color: #fff;
  box-shadow: 0 24px 50px -24px rgba(20, 10, 40, 0.5);
}
.ai-pillars__card--1 { background: linear-gradient(155deg, #7a5ac4 0%, #5c3fa8 100%); }
.ai-pillars__card--2 { background: linear-gradient(155deg, #e78a72 0%, #d1654a 100%); }
.ai-pillars__card--3 { background: linear-gradient(155deg, #6f83b8 0%, #566a9e 100%); }
.ai-pillars__card--4 { background: linear-gradient(155deg, #5c7aa8 0%, #445e8a 100%); }
.ai-pillars__icon { display: block; width: 56px; height: 56px; margin-bottom: 20px; object-fit: contain; }
.ai-pillars__card h3 { margin: 0 0 8px; font-size: 17px; font-weight: 700; }
.ai-pillars__card p { margin: 0; font-size: 13.5px; line-height: 1.6; color: rgba(255,255,255,0.82); }
@media (max-width: 900px) {
  .ai-pillars { padding: 0 20px; margin-top: -40px; }
  .ai-pillars__grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}

/* ---------- AI feature rows (image + text, alternating sides) ---------- */
.ai-feature {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 64px 40px;
  display: flex;
  align-items: center;
  gap: 72px;
  scroll-margin-top: 110px;
}
.ai-feature--reverse { flex-direction: row-reverse; }
.ai-feature__media { flex: 0 0 44%; position: relative; }
.ai-feature__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 22px;
  border: 1px solid var(--line);
  box-shadow: 0 30px 60px -32px rgba(12, 12, 14, 0.5);
  will-change: transform;
}
.ai-feature__text { flex: 1; }
.ai-feature__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--lime);
}
.ai-feature__text h2 { margin: 0 0 16px; font-size: 34px; line-height: 1.15; font-weight: 800; letter-spacing: -1px; color: var(--ink); }
.ai-feature__text > p { margin: 0 0 22px; font-size: 15.5px; line-height: 1.75; color: var(--gray-600); max-width: 520px; }
.ai-feature__list { display: flex; flex-direction: column; gap: 10px; }
.ai-feature__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  background: rgba(255,255,255,0.6);
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.ai-feature__list a:hover { border-color: var(--lime); background: #fff; transform: translateX(3px); }
.ai-feature__list a svg { color: var(--gray-400); flex-shrink: 0; transition: color .2s ease, transform .2s ease; }
.ai-feature__list a:hover svg { color: var(--lime); transform: translateX(2px); }
@media (max-width: 900px) {
  .ai-feature, .ai-feature--reverse { flex-direction: column; gap: 32px; padding: 48px 20px; }
  .ai-feature__media { flex: none; width: 100%; }
}

/* ---------- Example / deliverables block ---------- */
.example-block {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 64px 40px;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: start;
}
.example-block__label {
  display: inline-block;
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--lime);
}
.example-block__narrative {
  background: var(--gray-50);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 36px;
}
.example-block__narrative h2 { margin: 0 0 14px; font-size: 26px; line-height: 1.2; font-weight: 800; letter-spacing: -0.5px; color: var(--ink); }
.example-block__narrative p { margin: 0; font-size: 15px; line-height: 1.75; color: var(--gray-600); }
.example-block__deliverables h3 { margin: 0 0 16px; font-size: 13px; font-weight: 700; color: var(--gray-500); text-transform: uppercase; letter-spacing: 1.4px; }
.example-block__deliverables ul { display: flex; flex-direction: column; gap: 12px; }
.example-block__deliverables li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--gray-900);
  background: #fff;
}
.example-block__deliverables li svg { flex-shrink: 0; margin-top: 2px; color: var(--lime); }
@media (max-width: 900px) {
  .example-block { grid-template-columns: 1fr; padding: 48px 20px; gap: 28px; }
}

/* ---------- Tech stack strip ---------- */
.tech-stack { max-width: var(--max-width); margin: 0 auto; padding: 64px 40px 64px; }
.tech-stack__label {
  display: block;
  margin: 0 0 18px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--gray-500);
}
.tech-stack__row { display: flex; flex-wrap: wrap; gap: 10px; }
.tech-stack__pill {
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--gray-50);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--gray-900);
  transition: border-color .2s ease, background .2s ease;
}
.tech-stack__pill:hover { border-color: var(--lime); background: #fff; }
@media (max-width: 900px) { .tech-stack { padding: 40px 20px 48px; } }

/* ---------- Quote block ---------- */
.quote-block { padding: 64px 40px 90px; }
.quote-block__inner {
  position: relative;
  max-width: var(--max-width);
  margin: 0 auto;
  background: linear-gradient(155deg, #f7f8f5 0%, #eef1e6 100%);
  border-radius: 22px;
  border-left: 4px solid var(--lime);
  padding: 52px 60px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  overflow: hidden;
}
.quote-block__mark {
  position: absolute;
  top: 8px;
  left: 24px;
  font-size: 110px;
  font-weight: 800;
  font-family: Georgia, serif;
  color: rgba(12,12,14,0.06);
  line-height: 1;
  pointer-events: none;
}
.quote-block__quote {
  position: relative;
  margin: 0;
  font-size: 25px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink);
}
.quote-block__answer {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--gray-600);
}

/* ---------- Contact CTA card ---------- */
.contact-cta { padding: 64px 40px 100px; }
.contact-card {
  position: relative;
  max-width: var(--max-width);
  margin: 0 auto;
  background: radial-gradient(120% 160% at 100% 0%, #1a1a1e 0%, #0c0c0e 55%), var(--ink);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 28px;
  padding: 56px;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 60px;
  overflow: hidden;
  box-shadow:
    0 40px 80px -40px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(255,255,255,0.14),
    inset 0 -1px 0 rgba(255,255,255,0.04);
}
.contact-card::before {
  content: "";
  position: absolute;
  top: -120px;
  right: -80px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(250, 152, 0, 0.14) 0%, rgba(250, 152, 0, 0) 70%);
  pointer-events: none;
}
.contact-card__side { position: relative; z-index: 1; }
.contact-card__side h2 { margin: 0 0 28px; font-size: 30px; font-weight: 800; color: #fff; }
.contact-card__list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 32px; }
.contact-card__list li { display: flex; align-items: center; gap: 12px; }
.contact-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(155deg, #FFD07A, var(--lime));
  box-shadow: 0 4px 12px -2px rgba(250, 152, 0, 0.5);
  flex-shrink: 0;
  transition: transform .25s var(--ease);
}
.contact-card__list li:hover .contact-card__icon { transform: scale(1.12) rotate(-8deg); }
.contact-card__list span:last-child { font-size: 14.5px; color: rgba(255,255,255,0.85); }
.contact-card__list a { color: #fff; font-weight: 600; transition: color .2s ease; }
.contact-card__list a:hover { color: var(--lime); }

.contact-card__testimonial {
  position: relative;
  background: rgba(255,255,255,0.07);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 20px;
  padding: 22px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.2),
    inset 0 -1px 0 rgba(255,255,255,0.05);
  transition: border-color .3s ease, background .3s ease, box-shadow .3s ease;
}
.contact-card__testimonial:hover {
  background: rgba(255,255,255,0.11);
  border-color: rgba(250,152,0,0.35);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.26),
    0 10px 28px rgba(0,0,0,0.28);
}
.contact-card__testimonial > p {
  margin: 0 0 18px;
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(255,255,255,0.85);
}
.contact-card__testimonial-row { display: flex; align-items: center; gap: 12px; }
.contact-card__testimonial-row img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.contact-card__testimonial-row div { flex: 1; min-width: 0; }
.contact-card__testimonial-row strong { display: block; font-size: 13.5px; color: #fff; }
.contact-card__testimonial-row span { display: block; font-size: 12px; color: rgba(255,255,255,0.55); }

.btn-pill-lime {
  flex-shrink: 0;
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--lime);
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  transition: transform .2s var(--ease), background .2s ease;
}
.btn-pill-lime:hover { background: #C97800; transform: translateY(-1px); }

.contact-form {
  position: relative;
  z-index: 1;
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 22px;
  padding: 26px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.2),
    inset 0 -1px 0 rgba(255,255,255,0.05),
    0 12px 32px rgba(0,0,0,0.25);
  overflow: hidden;
}
.contact-form::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.09) 0%, rgba(255,255,255,0) 45%);
}
.contact-form > * { position: relative; z-index: 1; }
.contact-form__label { margin: 0 0 12px; font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.7); }
.contact-form__pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.contact-form__pills--toggle { flex: 0 0 auto; margin-bottom: 0; }
.pill {
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: transparent;
  color: rgba(255,255,255,0.75);
  font-size: 13px;
  font-weight: 600;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s var(--ease);
}
.pill:hover { border-color: rgba(255,255,255,0.3); color: #fff; transform: translateY(-1px); }
.pill.is-active { background: var(--lime); border-color: var(--lime); color: var(--ink); box-shadow: 0 6px 14px -4px rgba(250, 152, 0, 0.5); }

.contact-form__row { display: flex; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.contact-form__row .contact-form__input { flex: 1; min-width: 140px; margin-bottom: 0; }
.contact-form__input {
  width: 100%;
  margin-bottom: 12px;
  padding: 13px 16px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.03);
  color: #fff;
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
  transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.contact-form__input::placeholder { color: rgba(255,255,255,0.4); }
.contact-form__input:hover { background: rgba(255,255,255,0.05); }
.contact-form__input:focus { outline: none; border-color: var(--lime); box-shadow: 0 0 0 3px rgba(250, 152, 0, 0.15); background: rgba(255,255,255,0.05); }

.contact-form__note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 18px;
  font-size: 13px;
  color: rgba(255,255,255,0.6);
}
.btn-lime { background: var(--lime); color: var(--ink); }
.btn-lime:hover { background: #C97800; transform: translateY(-2px); box-shadow: 0 14px 28px -14px rgba(250, 152, 0, 0.6); }
.contact-form__submit { width: 100%; padding: 15px; font-size: 15px; }
.contact-form__success {
  display: none;
  margin: 14px 0 0;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(250, 152, 0, 0.1);
  border: 1px solid rgba(250, 152, 0, 0.3);
  color: var(--lime);
  font-size: 13.5px;
  text-align: center;
}
.contact-form__success.is-visible { display: block; }

/* ---------- Steps ---------- */
.steps-section { padding: 64px 40px 110px; }
.steps-list {
  max-width: 820px;
  margin: 0 auto;
  position: relative;
  padding-left: 60px;
}
.steps-list::before {
  content: "";
  position: absolute;
  left: 19px;
  top: 20px;
  bottom: 20px;
  width: 1px;
  background: linear-gradient(180deg, var(--lime) 0%, var(--line) 15%, var(--line) 85%, transparent 100%);
}
.step { position: relative; padding-bottom: 48px; transition: transform .3s var(--ease); }
.step:last-child { padding-bottom: 0; }
.step:hover { transform: translateX(4px); }
.step__num {
  position: absolute;
  left: -60px;
  top: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--gray-100);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 15px;
  box-shadow: 0 0 0 4px #fff;
  transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.step:hover .step__num { background: var(--ink); color: var(--lime); transform: scale(1.08); }
.step__body h3 {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
}
.step__body h3 span { display: block; font-weight: 500; color: var(--gray-500); font-size: 15px; margin-top: 2px; }
.step__body p { margin: 0 0 10px; font-size: 14.5px; line-height: 1.7; color: var(--gray-600); }
.step__body p:last-child { margin-bottom: 0; }

/* ---------- Two-col highlight ---------- */
.highlight-two-col {
  max-width: 820px;
  margin: 0 auto 60px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.highlight-two-col__item {
  background: var(--gray-50);
  border: 1px solid transparent;
  border-radius: 16px;
  padding: 28px;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s ease, background .3s ease;
}
.highlight-two-col__item:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -24px rgba(12,12,14,0.25);
  border-color: var(--line);
  background: #fff;
}
.highlight-two-col__item h4 {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
}
.highlight-two-col__item h4 span { display: block; font-weight: 500; color: var(--gray-500); font-size: 14px; margin-top: 2px; }
.highlight-two-col__item p { margin: 0; font-size: 14px; line-height: 1.7; color: var(--gray-600); }

.conclusion-block {
  max-width: 820px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 40px;
  align-items: start;
}
.conclusion-block h4 { margin: 0; font-size: 16px; font-weight: 700; color: var(--ink); }
.conclusion-block h4 span { display: block; font-weight: 500; color: var(--gray-500); font-size: 14px; margin-top: 2px; }
.conclusion-block p { margin: 0; font-size: 14.5px; line-height: 1.7; color: var(--gray-600); }

/* ---------- Info card grid ---------- */
.info-grid {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 64px 40px 90px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.info-card {
  position: relative;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 18px;
  padding: 30px 32px;
  overflow: hidden;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s ease, background .3s ease;
}
.info-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 22px;
  bottom: 22px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--lime);
  opacity: 0;
  transition: opacity .35s var(--ease);
}
.info-card:hover {
  transform: translateY(-4px);
  backdrop-filter: blur(25px) saturate(190%);
  -webkit-backdrop-filter: blur(25px) saturate(190%);
  background: rgba(255, 255, 255, 0.75);
  border-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 22px 44px -26px rgba(12,12,14,0.28), 0 8px 32px rgba(0, 0, 0, 0.08);
}
.info-card:hover::before { opacity: 1; }
.info-card--wide { grid-column: 1 / -1; }
.info-card h3 {
  margin: 0 0 14px;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
}
.info-card p { margin: 0 0 10px; font-size: 14.5px; line-height: 1.7; color: var(--gray-600); }
.info-card p:last-child { margin-bottom: 0; }
.info-card ul { display: flex; flex-direction: column; gap: 9px; }
.info-card li {
  position: relative;
  padding-left: 18px;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--gray-600);
}
.info-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lime);
}

/* ---------- Accent banner ---------- */
.banner-accent { padding: 64px 40px 90px; }
.banner-accent__inner {
  position: relative;
  max-width: var(--max-width);
  margin: 0 auto;
  background: linear-gradient(135deg, var(--lime) 0%, #ffb43d 100%);
  border-radius: 22px;
  padding: 46px 52px;
  overflow: hidden;
  box-shadow: 0 24px 50px -30px rgba(250,152,0,0.65);
}
.banner-accent__inner::after {
  content: "";
  position: absolute;
  top: -60px;
  right: -40px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0) 70%);
  pointer-events: none;
}
.banner-accent h2 {
  position: relative;
  margin: 0 0 14px;
  font-size: 25px;
  font-weight: 800;
  letter-spacing: -0.4px;
  color: #241500;
}
.banner-accent p {
  position: relative;
  margin: 0;
  max-width: 900px;
  font-size: 14.5px;
  line-height: 1.75;
  color: rgba(36,21,0,0.82);
}

/* ---------- Why choose ---------- */
.why-choose {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 64px 40px 90px;
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 60px;
  align-items: start;
}
.why-choose h2 {
  margin: 0;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.6px;
  color: var(--ink);
}
.why-choose__list { display: flex; flex-direction: column; gap: 26px; }
.why-choose__item {
  padding: 24px 32px;
  padding-left: 20px;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-left: 2px solid var(--line);
  border-radius: 12px;
  transition: border-color .3s ease, padding-left .3s var(--ease), box-shadow .3s ease;
}
.why-choose__item:hover {
  border-left-color: var(--lime);
  padding-left: 24px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}
.why-choose__item h3 {
  margin: 0 0 8px;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--ink);
}
.why-choose__item h3 b { color: var(--lime); margin-right: 4px; }
.why-choose__item p { margin: 0; font-size: 14.5px; line-height: 1.7; color: var(--gray-600); }

/* ---------- Services box ---------- */
.services-box { padding: 64px 40px 90px; }
.services-box__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  background: var(--gray-50);
  border-radius: 20px;
  padding: 44px 48px;
}
.services-box h2 {
  margin: 0 0 22px;
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
}
.services-box ul { display: flex; flex-direction: column; gap: 13px; margin-bottom: 22px; }
.services-box li {
  position: relative;
  padding-left: 20px;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--gray-600);
}
.services-box li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lime);
}
.services-box li b { color: var(--ink); }
.services-box__note { margin: 0; font-size: 14.5px; line-height: 1.7; color: var(--gray-600); }

/* ---------- Stats strip ---------- */
.stats-strip {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 64px 40px 90px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.stat-tile {
  background: var(--gray-50);
  border: 1px solid transparent;
  border-radius: 16px;
  padding: 26px 24px;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .3s ease, border-color .3s ease;
}
.stat-tile:hover {
  transform: translateY(-4px);
  background: #fff;
  border-color: var(--line);
  box-shadow: 0 20px 40px -26px rgba(12,12,14,0.26);
}
.stat-tile__num {
  display: block;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -1px;
  color: var(--ink);
  margin-bottom: 6px;
}
.stat-tile__label { display: block; font-size: 14px; line-height: 1.6; color: var(--gray-600); }

/* ============================================================
   VARIED PAGE SECTIONS
   ============================================================ */

/* ---------- Animated counters ---------- */
.counters { padding: 64px 40px 90px; }
.counters__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(180deg, #fff 0%, var(--gray-50) 100%);
}
.counter {
  padding: 34px 30px;
  border-right: 1px solid var(--line);
  transition: background .3s ease;
}
.counter:last-child { border-right: none; }
.counter:hover { background: #fff; }
.counter__value {
  display: block;
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -1.5px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  margin-bottom: 6px;
}
.counter__label { display: block; font-size: 13.5px; line-height: 1.55; color: var(--gray-600); }

/* ---------- Zigzag feature rows ---------- */
.zigzag { max-width: var(--max-width); margin: 0 auto; padding: 64px 40px 40px; }
.zigzag__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  padding: 46px 0;
  border-bottom: 1px solid var(--line);
}
.zigzag__row:last-child { border-bottom: none; }
.zigzag__row--flip .zigzag__text { order: 2; }
.zigzag__kicker {
  display: inline-block;
  margin-bottom: 12px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(250,152,0,0.12);
  color: #8a5400;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}
.zigzag__text h3 {
  margin: 0 0 12px;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.6px;
  color: var(--ink);
}
.zigzag__text p { margin: 0 0 16px; font-size: 15px; line-height: 1.75; color: var(--gray-600); }
.zigzag__list { display: flex; flex-direction: column; gap: 10px; }
.zigzag__list li {
  position: relative;
  padding-left: 26px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--gray-600);
}
.zigzag__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: rgba(250,152,0,0.15);
  border: 1px solid var(--lime);
}
.zigzag__list li::after {
  content: "";
  position: absolute;
  left: 4.5px;
  top: 8.5px;
  width: 5px;
  height: 2.5px;
  border-left: 1.6px solid var(--lime);
  border-bottom: 1.6px solid var(--lime);
  transform: rotate(-45deg);
}
.zigzag__art {
  border-radius: 20px;
  background: linear-gradient(150deg, #fbfbfc 0%, var(--gray-50) 100%);
  border: 1px solid var(--line);
  padding: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 250px;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.zigzag__art:hover { transform: translateY(-5px); box-shadow: 0 26px 50px -30px rgba(12,12,14,0.3); }
.zigzag__art svg { width: 100%; height: auto; max-width: 300px; }

/* Photo variant of the zigzag art panel.
   Doubled class beats the padding reset in the max-width:900px block below. */
.zigzag__art.zigzag__art--photo {
  display: block;
  padding: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--gray-50);
}
.zigzag__art--photo img {
  display: block;
  width: 100%;
  height: auto; /* beats the width/height attribute hints so aspect-ratio wins */
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform .6s var(--ease);
}
.zigzag__art--photo:hover img { transform: scale(1.05); }

/* ---------- Horizontal timeline ---------- */
.timeline-h { max-width: var(--max-width); margin: 0 auto; padding: 64px 40px 90px; }
.timeline-h__heading {
  margin: 0 0 44px;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.7px;
  color: var(--ink);
}
.timeline-h__track { position: relative; }
.timeline-h__line {
  position: absolute;
  left: 0;
  right: 0;
  top: 21px;
  height: 2px;
  background: var(--line);
  border-radius: 2px;
  overflow: hidden;
}
.timeline-h__line i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--lime), #ffc46b);
  transition: width 1.6s var(--ease);
}
.timeline-h.is-visible .timeline-h__line i { width: 100%; }
.timeline-h__items {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 22px;
}
.tl-step { padding-right: 14px; }
.tl-step__dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--line);
  margin-bottom: 16px;
  transition: border-color .4s var(--ease), background .4s var(--ease), transform .4s var(--ease);
}
.tl-step__dot b { font-size: 14px; font-weight: 700; color: var(--gray-500); transition: color .4s var(--ease); }
.tl-step:hover .tl-step__dot { border-color: var(--lime); background: var(--lime); transform: scale(1.08); }
.tl-step:hover .tl-step__dot b { color: #241500; }
.tl-step h4 { margin: 0 0 8px; font-size: 15.5px; font-weight: 700; color: var(--ink); }
.tl-step p { margin: 0; font-size: 14px; line-height: 1.65; color: var(--gray-600); }

/* ---------- Capability tabs ---------- */
.cap-tabs { padding: 64px 40px 90px; }
.cap-tabs__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 22px;
  padding: 44px 48px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}
.cap-tabs__heading {
  margin: 0 0 26px;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.6px;
  color: var(--ink);
}
.cap-tabs__nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; }
.cap-tab {
  padding: 11px 20px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-600);
  transition: all .25s var(--ease);
}
.cap-tab:hover { color: var(--ink); border-color: var(--gray-400); transform: translateY(-1px); }
.cap-tab.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
  box-shadow: 0 8px 18px -8px rgba(12,12,14,0.45);
}
.cap-panel { display: none; }
.cap-panel.is-active { display: block; animation: cap-fade .45s var(--ease); }
@keyframes cap-fade {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.cap-panel h3 { margin: 0 0 12px; font-size: 20px; font-weight: 700; color: var(--ink); }
.cap-panel p { margin: 0 0 16px; font-size: 15px; line-height: 1.75; color: var(--gray-600); max-width: 760px; }
.cap-panel ul { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 30px; }
.cap-panel li {
  position: relative;
  padding-left: 18px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--gray-600);
}
.cap-panel li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lime);
}

/* ---------- Tech stack ---------- */
.tech-stack { padding: 64px 40px 90px; }
.tech-stack__inner { max-width: var(--max-width); margin: 0 auto; }
.tech-stack__head { margin-bottom: 30px; }
.tech-stack__head h2 {
  margin: 0 0 10px;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.7px;
  color: var(--ink);
}
.tech-stack__head p { margin: 0; max-width: 640px; font-size: 15px; line-height: 1.7; color: var(--gray-600); }
.tech-stack__groups { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.tech-group h4 {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--gray-500);
}
.tech-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tech-chips span {
  padding: 8px 14px;
  border-radius: 10px;
  background: var(--gray-50);
  border: 1px solid var(--line);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--gray-900);
  transition: all .25s var(--ease);
}
.tech-chips span:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 20px -10px rgba(12,12,14,0.4);
}

/* ---------- Comparison ---------- */
.compare { padding: 64px 40px 90px; }
.compare__inner { max-width: var(--max-width); margin: 0 auto; }
.compare__heading {
  margin: 0 0 32px;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.7px;
  color: var(--ink);
  text-align: center;
}
.compare__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.compare__col {
  border-radius: 20px;
  padding: 32px 34px;
  border: 1px solid var(--line);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.compare__col:hover { transform: translateY(-4px); }
.compare__col h3 { margin: 0 0 18px; font-size: 17px; font-weight: 700; }
.compare__col ul { display: flex; flex-direction: column; gap: 12px; }
.compare__col li { position: relative; padding-left: 28px; font-size: 14.5px; line-height: 1.6; }
.compare__col--bad { background: var(--gray-50); }
.compare__col--bad h3 { color: var(--gray-500); }
.compare__col--bad li { color: var(--gray-500); }
.compare__col--bad li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1.5px solid var(--gray-400);
}
.compare__col--bad li::after {
  content: "";
  position: absolute;
  left: 4.6px;
  top: 9.6px;
  width: 7px;
  height: 1.6px;
  background: var(--gray-400);
}
.compare__col--good {
  background: linear-gradient(160deg, #fffaf2 0%, #fff4e3 100%);
  border-color: rgba(250,152,0,0.35);
  box-shadow: 0 20px 44px -32px rgba(250,152,0,0.6);
}
.compare__col--good:hover { box-shadow: 0 28px 54px -30px rgba(250,152,0,0.7); }
.compare__col--good h3 { color: #7a4a00; }
.compare__col--good li { color: #55401f; }
.compare__col--good li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--lime);
}
.compare__col--good li::after {
  content: "";
  position: absolute;
  left: 4.6px;
  top: 8.6px;
  width: 6px;
  height: 3px;
  border-left: 1.8px solid #fff;
  border-bottom: 1.8px solid #fff;
  transform: rotate(-45deg);
}

/* ---------- Spotlight band ---------- */
.spotlight { padding: 64px 40px 90px; }
.spotlight__inner {
  position: relative;
  max-width: var(--max-width);
  margin: 0 auto;
  background: radial-gradient(120% 150% at 100% 0%, #1c1c22 0%, #0c0c0e 60%), var(--ink);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 26px;
  padding: 60px 60px 54px;
  overflow: hidden;
  box-shadow: 0 40px 80px -46px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.1);
}
.spotlight__glow {
  position: absolute;
  top: -140px;
  right: -80px;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(250,152,0,0.20) 0%, rgba(250,152,0,0) 70%);
  pointer-events: none;
}
.spotlight__kicker {
  position: relative;
  display: inline-block;
  margin-bottom: 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: var(--lime);
}
.spotlight h2 {
  position: relative;
  margin: 0 0 16px;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1.2;
  color: #fff;
  max-width: 760px;
}
.spotlight p {
  position: relative;
  margin: 0 0 32px;
  max-width: 700px;
  font-size: 15.5px;
  line-height: 1.75;
  color: rgba(255,255,255,0.7);
}
.spotlight__points { position: relative; display: flex; flex-wrap: wrap; gap: 14px 32px; }
.spotlight__point {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
  font-weight: 600;
  color: rgba(255,255,255,0.9);
}
.spotlight__point span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 4px rgba(250,152,0,0.18);
  flex-shrink: 0;
}

/* ---------- Icon grid ---------- */
.icon-grid { padding: 64px 40px 90px; }
.icon-grid__inner { max-width: var(--max-width); margin: 0 auto; }
.icon-grid__head { margin-bottom: 32px; max-width: 720px; }
.icon-grid__head h2 {
  margin: 0 0 10px;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.7px;
  color: var(--ink);
}
.icon-grid__head p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--gray-600); }
.icon-grid__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.icon-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 28px 26px;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s ease;
}
.icon-card:hover {
  transform: translateY(-5px);
  border-color: rgba(250,152,0,0.4);
  box-shadow: 0 24px 46px -28px rgba(12,12,14,0.3);
}
.icon-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: rgba(250,152,0,0.1);
  color: #b06a00;
  margin-bottom: 18px;
  transition: background .35s var(--ease), color .35s var(--ease), transform .35s var(--ease);
}
.icon-card:hover .icon-card__icon { transform: scale(1.05); }
.icon-card h3 { margin: 0 0 10px; font-size: 16.5px; font-weight: 700; color: var(--ink); }
.icon-card p { margin: 0; font-size: 14.5px; line-height: 1.7; color: var(--gray-600); }

/* ---------- Checklist split ---------- */
.checklist { padding: 64px 40px 90px; }
.checklist__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 60px;
  align-items: start;
}
.checklist__text h2 {
  margin: 0 0 14px;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.7px;
  color: var(--ink);
}
.checklist__text p { margin: 0 0 12px; font-size: 15px; line-height: 1.75; color: var(--gray-600); }
.checklist__note {
  padding-left: 16px;
  border-left: 3px solid var(--lime);
  font-size: 14.5px !important;
  color: var(--gray-900) !important;
}
/* Capability lists render as numbered cards rather than a plain tick list.
   The markup is shared by 135 sections across 17 pages, so the whole
   treatment lives here in CSS — no per-page HTML changes. The number comes
   from a CSS counter, which means items stay correctly numbered even though
   the HTML carries no numbering of its own. */
.checklist__items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  counter-reset: cap;
  padding: 0;
  margin: 0;
  list-style: none;
}

.checklist__items li {
  counter-increment: cap;
  position: relative;
  display: block;
  padding: 18px 20px 18px 56px;
  border: 1px solid rgba(12, 12, 14, 0.07);
  border-radius: 16px;
  /* Warm corner glow layered over a soft gradient, echoing the glass cards
     used elsewhere on the site without the cost of a backdrop-filter on
     what can be 250+ cards in a single page. */
  background:
    radial-gradient(130px 90px at 100% 0%, rgba(250, 152, 0, 0.10), transparent 72%),
    linear-gradient(158deg, #ffffff 0%, #fffdfa 55%, #fff6ea 100%);
  box-shadow:
    0 1px 2px rgba(12, 12, 14, 0.04),
    0 10px 26px -18px rgba(12, 12, 14, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  font-size: 14.5px;
  line-height: 1.6;
  font-weight: 500;
  color: var(--gray-600);
  overflow: hidden;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease),
              border-color .4s var(--ease), background .4s var(--ease);
}

/* Some items are a bold term followed by a description; others are a bare
   label. Block layout keeps both readable — a flex row split the term and
   its description into two narrow columns. */
.checklist__items li b {
  display: block;
  margin-bottom: 3px;
  font-weight: 700;
  color: var(--ink);
}

/* Numeral sits in its own chip, in place of the old checkmark. */
.checklist__items li::before {
  content: counter(cap, decimal-leading-zero);
  position: absolute;
  left: 16px;
  top: 16px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.4px;
  color: var(--lime);
  background: rgba(250, 152, 0, 0.13);
  border: 1px solid rgba(250, 152, 0, 0.3);
  transition: background .4s var(--ease), color .4s var(--ease),
              border-color .4s var(--ease), transform .4s var(--ease);
}

/* Corner bracket accent, drawn with a single element. */
.checklist__items li::after {
  content: "";
  position: absolute;
  top: 10px;
  right: 10px;
  width: 10px;
  height: 10px;
  border-top: 2px solid var(--lime);
  border-right: 2px solid var(--lime);
  border-radius: 1px;
  opacity: 0;
  transform: translate(-4px, 4px);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}

.checklist__items li:hover {
  transform: translateY(-4px);
  border-color: rgba(250, 152, 0, 0.42);
  background:
    radial-gradient(150px 110px at 100% 0%, rgba(250, 152, 0, 0.18), transparent 72%),
    linear-gradient(158deg, #ffffff 0%, #fffaf3 55%, #ffefdb 100%);
  box-shadow:
    0 2px 4px rgba(12, 12, 14, 0.04),
    0 22px 40px -22px rgba(250, 152, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.checklist__items li:hover::before {
  background: var(--lime);
  border-color: var(--lime);
  color: #fff;
  transform: scale(1.06);
}

.checklist__items li:hover::after { opacity: 1; transform: translate(0, 0); }

/* The tick span is now redundant but still present in the markup. */
.checklist__tick { display: none; }

@media (prefers-reduced-motion: reduce) {
  .checklist__items li,
  .checklist__items li::before,
  .checklist__items li::after { transition: none; }
  .checklist__items li:hover { transform: none; }
}

@media (max-width: 560px) {
  .checklist__items { grid-template-columns: 1fr; gap: 12px; }
  .checklist__items li { padding: 16px 16px 16px 52px; }
}

/* ---------- Split photo list (single background photo + 2-col checklist) ---------- */
.split-photo-list { position: relative; overflow: hidden; padding: 100px 40px; }
.split-photo-list__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: sepia(0.2) saturate(0.85) brightness(1.08);
}
.split-photo-list__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(250,244,231,0.9) 0%, rgba(250,244,231,0.82) 100%);
}
.split-photo-list__inner { position: relative; z-index: 1; max-width: var(--max-width); margin: 0 auto; }
.split-photo-list__head { max-width: 640px; margin: 0 0 48px; }
.split-photo-list__head h2 { margin: 0 0 12px; font-size: 30px; font-weight: 700; letter-spacing: -0.7px; color: var(--ink); }
.split-photo-list__head p { margin: 0; font-size: 15px; line-height: 1.75; color: var(--gray-900); }
.split-photo-list__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px 64px;
}
.split-photo-list__item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding-bottom: 36px;
  border-bottom: 1px solid rgba(12,12,14,0.12);
}
.split-photo-list__tick {
  position: relative;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(250,152,0,0.14);
  border: 1px solid rgba(250,152,0,0.55);
  margin-top: 4px;
}
.split-photo-list__tick::after {
  content: "";
  position: absolute;
  left: 7.5px;
  top: 8.5px;
  width: 8px;
  height: 4px;
  border-left: 2px solid var(--lime);
  border-bottom: 2px solid var(--lime);
  transform: rotate(-45deg);
}
.split-photo-list__item h3 {
  margin: 0 0 6px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 23px;
  font-weight: 500;
  letter-spacing: -0.3px;
  color: var(--ink);
}
.split-photo-list__item p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--gray-900); }
@media (max-width: 900px) {
  .split-photo-list { padding: 56px 20px; }
  .split-photo-list__grid { grid-template-columns: 1fr; gap: 28px; }
}

/* ---------- Photo feature grid (one photo per checklist item) ---------- */
.photo-feature-grid { padding: 90px 40px; background: #FFF8EE; }
.photo-feature-grid__inner { max-width: var(--max-width); margin: 0 auto; }
.photo-feature-grid__head { max-width: 640px; margin: 0 0 40px; }
.photo-feature-grid__head h2 { margin: 0 0 12px; font-size: 30px; font-weight: 700; letter-spacing: -0.7px; color: var(--ink); }
.photo-feature-grid__head p { margin: 0; font-size: 15px; line-height: 1.75; color: var(--gray-600); }
.photo-feature-grid__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.photo-feature-card {
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(12,12,14,0.08);
}
.photo-feature-card__img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.photo-feature-card__body { display: flex; align-items: flex-start; gap: 10px; padding: 16px 18px 18px; }
.photo-feature-card__tick {
  position: relative;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(250,152,0,0.12);
  border: 1px solid rgba(250,152,0,0.5);
  margin-top: 2px;
}
.photo-feature-card__tick::after {
  content: "";
  position: absolute;
  left: 5.6px;
  top: 6px;
  width: 6px;
  height: 3px;
  border-left: 1.8px solid var(--lime);
  border-bottom: 1.8px solid var(--lime);
  transform: rotate(-45deg);
}
.photo-feature-card__body h3 { margin: 0 0 4px; font-size: 15.5px; font-weight: 700; color: var(--ink); }
.photo-feature-card__body p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--gray-600); }
@media (max-width: 900px) {
  .photo-feature-grid { padding: 56px 20px; }
  .photo-feature-grid__grid { grid-template-columns: 1fr 1fr; gap: 16px; }
}
@media (max-width: 560px) {
  .photo-feature-grid__grid { grid-template-columns: 1fr; }
}

/* ---------- CTA strip ---------- */
.cta-strip { padding: 64px 40px 90px; }
.cta-strip__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  background: linear-gradient(135deg, #fffaf2 0%, #fff2df 100%);
  border: 1px solid rgba(250,152,0,0.28);
  border-radius: 20px;
  padding: 34px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
}
.cta-strip h2 { margin: 0 0 6px; font-size: 21px; font-weight: 700; color: var(--ink); }
.cta-strip p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--gray-600); max-width: 640px; }
.cta-strip__btn { flex-shrink: 0; padding: 14px 26px; font-size: 14.5px; }

/* ============================================================
   ABOUT PAGE STYLES
   ============================================================ */

/* Mission Section */
.mission-section { padding: 64px 40px 90px; }
.mission-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}
.mission-card {
  padding: 48px;
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.mission-card h3 {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  color: var(--ink);
}
.mission-card p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--gray-600);
}

/* Why Section */
.why-section { padding: 64px 40px 90px; }
.why-inner {
  max-width: var(--max-width);
  margin: 0 auto;
}
.why-content {
  margin-bottom: 56px;
  max-width: 720px;
}
.why-content h2 {
  margin: 0 0 12px;
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.8px;
  color: var(--ink);
}
.why-content p {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--gray-600);
}
.why-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}
.why-item {
  padding: 36px;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.why-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
}
.why-item h4 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
}
.why-item p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--gray-600);
}

/* Values Section */
.values-section { padding: 64px 40px 90px; }
.values-inner {
  max-width: var(--max-width);
  margin: 0 auto;
}
.values-inner h2 {
  margin: 0 0 56px;
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.8px;
  color: var(--ink);
  text-align: center;
}
.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.value-card {
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.value-card h4 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
}
.value-card p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--gray-600);
}

/* Team Culture Section */
.team-culture-section { padding: 64px 40px 90px; }
.team-culture-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.team-culture-text h2 {
  margin: 0 0 20px;
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.8px;
  color: var(--ink);
}
.team-culture-text > p {
  margin: 0 0 36px;
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--gray-600);
  max-width: 520px;
}
.team-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.stat strong {
  font-size: 28px;
  font-weight: 800;
  color: var(--lime);
}
.stat span {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--gray-600);
}
.team-culture-highlight {
  padding: 48px;
  border-radius: 24px;
}
.team-culture-highlight h3 {
  margin: 0 0 16px;
  font-size: 24px;
  font-weight: 700;
  color: var(--ink);
}
.team-culture-highlight p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--gray-600);
}

/* Timeline Section */
.timeline-section { padding: 64px 40px 90px; }
.timeline-inner {
  max-width: var(--max-width);
  margin: 0 auto;
}
.timeline-inner h2 {
  margin: 0 0 48px;
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.8px;
  color: var(--ink);
  text-align: center;
}
.timeline-items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.timeline-item {
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.timeline-item h4 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--lime);
}
.timeline-item p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--gray-600);
}

/* About CTA Section */
.about-cta-section { padding: 64px 40px 90px; }
.about-cta-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 64px;
  border-radius: 32px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
}
.about-cta-inner h2 {
  margin: 0;
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -1px;
  color: var(--ink);
  max-width: 640px;
}
.about-cta-inner p {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--gray-600);
  max-width: 640px;
}

/* Footer */
.site-footer {
  padding: 60px 40px 40px;
  background: rgba(255, 255, 255, 0.4);
  border-top: 1px solid rgba(255, 255, 255, 0.6);
}
.footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.footer-section h4 {
  margin: 0 0 16px;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--ink);
}
.footer-section ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-section a {
  font-size: 14px;
  color: var(--gray-600);
  transition: color .3s var(--ease);
}
.footer-section a:hover { color: var(--ink); }
.footer-bottom {
  grid-column: 1 / -1;
  text-align: center;
  padding-top: 24px;
}
.footer-bottom p {
  margin: 0;
  font-size: 13px;
  color: var(--gray-600);
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .hero-title { font-size: 60px; letter-spacing: -1.5px; }
  .carousel-track { grid-template-columns: repeat(2, 1fr); }
  .service-card { min-height: 280px; }
  .carousel-arrow { display: none; }
  .rocks-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto; }
  .rocks-card--years { grid-column: 1; grid-row: 1 / 3; }
  .rocks-card--apps { grid-column: 2; grid-row: 1; }
  .rocks-card--devs { grid-column: 2; grid-row: 2; }
  .rocks-card--founder { grid-column: 1 / 3; grid-row: 3; }
  .workflow-grid { grid-template-columns: 1fr 1fr; }
  .workflow-card--code { grid-column: 1 / 3; }
  .mission-inner { grid-template-columns: 1fr; }
  .why-grid { grid-template-columns: 1fr; }
  .values-grid { grid-template-columns: repeat(2, 1fr); }
  .team-culture-inner { grid-template-columns: 1fr; gap: 40px; }
  .timeline-items { grid-template-columns: repeat(2, 1fr); }
  .industries-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1199px) {
  .nav-pill > li > a,
  .nav-dd-trigger {
    padding: 10px 6px;
  }
}

@media (min-width: 1200px) {
  .nav-pill > li > a,
  .nav-dd-trigger {
    padding: 10px 18px;
  }
}

@media (max-width: 860px) {
  .main-nav { display: none; }
  .btn-nav { display: none; }
  .menu-toggle { display: flex; }
  .site-header { padding: 16px 20px; }
  .counters { padding: 40px 20px 60px; }
  .counters__inner { grid-template-columns: 1fr 1fr; }
  .counter { border-right: none; border-bottom: 1px solid var(--line); padding: 24px 20px; }
  .counter:nth-child(odd) { border-right: 1px solid var(--line); }
  .counter__value { font-size: 30px; }
  .zigzag { padding: 40px 20px 20px; }
  .zigzag__row { grid-template-columns: 1fr; gap: 26px; padding: 34px 0; }
  .mission-section { padding: 40px 20px 60px; }
  .mission-inner { gap: 28px; }
  .mission-card { padding: 36px; }
  .why-section { padding: 40px 20px 60px; }
  .why-grid { grid-template-columns: 1fr; gap: 20px; }
  .why-content { margin-bottom: 36px; }
  .why-content h2 { font-size: 28px; }
  .values-section { padding: 40px 20px 60px; }
  .values-grid { grid-template-columns: 1fr; gap: 20px; }
  .values-inner h2 { font-size: 28px; margin-bottom: 36px; }
  .team-culture-section { padding: 40px 20px 60px; }
  .team-culture-text h2 { font-size: 28px; }
  .team-stats { grid-template-columns: 1fr 1fr; gap: 20px; }
  .team-culture-highlight { padding: 36px; }
  .timeline-section { padding: 40px 20px 60px; }
  .timeline-items { grid-template-columns: 1fr; gap: 20px; }
  .timeline-inner h2 { font-size: 28px; margin-bottom: 36px; }
  .about-cta-section { padding: 40px 20px 60px; }
  .about-cta-inner { padding: 48px 32px; }
  .about-cta-inner h2 { font-size: 28px; }
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 32px 28px; }
  .zigzag__row--flip .zigzag__text { order: 0; }
  .zigzag__text h3 { font-size: 22px; }
  .zigzag__art { min-height: 190px; padding: 22px; }
  .timeline-h { padding: 40px 20px 60px; }
  .timeline-h__heading { font-size: 25px; margin-bottom: 30px; }
  .timeline-h__line { display: none; }
  .timeline-h__items { grid-auto-flow: row; gap: 26px; }
  .cap-tabs { padding: 40px 20px 60px; }
  .cap-tabs__inner { padding: 30px 24px; }
  .cap-tabs__heading { font-size: 23px; }
  .cap-panel ul { grid-template-columns: 1fr; }
  .tech-stack { padding: 40px 20px 60px; }
  .tech-stack__groups { grid-template-columns: 1fr 1fr; }
  .tech-stack__head h2 { font-size: 25px; }
  .compare { padding: 40px 20px 60px; }
  .compare__cols { grid-template-columns: 1fr; }
  .compare__col { padding: 26px 24px; }
  .compare__heading { font-size: 25px; }
  .spotlight { padding: 40px 20px 60px; }
  .spotlight__inner { padding: 38px 26px 34px; border-radius: 20px; }
  .spotlight h2 { font-size: 25px; }
  .icon-grid { padding: 40px 20px 60px; }
  .icon-grid__cards { grid-template-columns: 1fr; }
  .icon-grid__head h2 { font-size: 25px; }
  .checklist { padding: 40px 20px 60px; }
  .checklist__inner { grid-template-columns: 1fr; gap: 26px; }
  .checklist__items { grid-template-columns: 1fr; }
  .checklist__text h2 { font-size: 25px; }
  .cta-strip { padding: 40px 20px 60px; }
  .cta-strip__inner { padding: 26px 24px; }
  .info-grid { grid-template-columns: 1fr; padding: 40px 20px 60px; }
  .info-card { padding: 24px 22px; }
  .banner-accent { padding: 40px 20px 60px; }
  .banner-accent__inner { padding: 32px 26px; border-radius: 18px; }
  .banner-accent h2 { font-size: 21px; }
  .why-choose { grid-template-columns: 1fr; gap: 28px; padding: 40px 20px 60px; }
  .why-choose h2 { font-size: 25px; }
  .services-box { padding: 40px 20px 60px; }
  .services-box__inner { padding: 30px 24px; }
  .stats-strip { grid-template-columns: 1fr 1fr; padding: 40px 20px 60px; gap: 14px; }
  .stat-tile { padding: 20px 18px; }
  .stat-tile__num { font-size: 26px; }
  .hero { padding: 70px 20px 60px; }
  .hero-title { font-size: 42px; }
  .hero-sub { font-size: 16px; }
  .faq-inner { flex-direction: column; gap: 32px; padding: 0 20px; }
  .faq-heading { flex: none; font-size: 32px; }
  .subpage-hero { flex-direction: column; align-items: flex-start; gap: 44px; padding: 56px 20px 48px; }
  .subpage-hero__text h1 { font-size: 38px; letter-spacing: -1.2px; }
  .subpage-hero__cta { margin-top: 24px; }
  .subpage-hero__decor { display: none; }
  /* the wrap keeps its desktop percentage cap otherwise, so the art stays tiny */
  .subpage-hero__art-wrap { width: 100%; max-width: 100%; }
  /* landscape crop reads better than 4:5 once the column is full-bleed */
  .subpage-hero__photo { aspect-ratio: 3 / 2; }
  .subpage-hero__stack { padding-bottom: 0; margin-right: 46px; }
  .subpage-hero__photo-sub { left: auto; right: -46px; bottom: -26px; width: 44%; border-width: 5px; }
  .subpage-hero__frame { top: -12px; right: -12px; width: 50%; height: 46%; }
  .quote-block { padding: 40px 20px 60px; }
  .quote-block__inner { grid-template-columns: 1fr; padding: 32px 26px; gap: 20px; }
  .quote-block__quote { font-size: 20px; }
  .contact-cta { padding: 40px 20px 70px; }
  .contact-card { grid-template-columns: 1fr; padding: 32px 24px; gap: 32px; border-radius: 20px; }
  .contact-card__side h2 { font-size: 24px; }
  .steps-section { padding: 40px 20px 70px; }
  .steps-list { padding-left: 46px; }
  .step__num { left: -46px; width: 32px; height: 32px; font-size: 13px; }
  .highlight-two-col { grid-template-columns: 1fr; }
  .conclusion-block { grid-template-columns: 1fr; gap: 12px; }
  .faq-item__q { font-size: 16px; padding: 20px 4px; }
  .site-footer { padding: 70px 20px 0; }
  .footer-cta { padding: 50px 28px; border-radius: 20px; }
  .footer-cta__title { font-size: 30px; }
  .footer-links { grid-template-columns: 1fr 1fr; padding: 56px 4px 40px; gap: 36px 20px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; padding: 24px 4px; }
  .section-head { padding: 0 20px; gap: 24px; }
  .section-title { font-size: 32px; }
  .consult-section { padding: 50px 20px 70px; }
  .consult-card { grid-template-columns: 1fr; }
  .consult-card__photo { min-height: 220px; }
  .consult-card__content { padding: 40px 28px; }
  .consult-card__content h2 { font-size: 26px; }
  .trust-section { padding: 60px 0 70px; }
  .trust-logos { padding: 0 20px; gap: 16px 32px; margin-bottom: 40px; }
  .trust-banner { grid-template-columns: 1fr; }
  .trust-banner__panel { min-height: 320px; padding: 32px; }
  .testimonials-title { font-size: 28px; }
  .testimonial-carousel { padding: 0 44px; }
  .testimonial-track { padding: 20px calc(50% - 42vw); }
  .testimonial-card { width: 84vw; }
  .carousel { padding: 0 20px; }
  .carousel-track { grid-template-columns: 1fr 1fr; gap: 14px; }
  .service-card { min-height: 220px; padding: 22px; }
  .industries-section { padding: 80px 0 90px; }
  .industries-head { padding: 0 20px; }
  .industries-title { font-size: 30px; }
  .industries-grid { padding: 0 20px; gap: 16px; margin-top: 40px; }
  .grid-line--v2, .grid-line--v3 { display: none; }
  .cases-grid { grid-template-columns: 1fr; padding: 0 20px; gap: 28px; }
  .cases-section { padding: 80px 0 90px; }
  .approach-grid { grid-template-columns: 1fr; padding: 0 20px; gap: 32px; }
  .approach-title, .hands-head .section-title { font-size: 32px; }
  .hands-stats { grid-template-columns: 1fr 1fr; padding: 0 20px; gap: 32px 0; }
  .hands-stat { border-left: none; padding: 0; }
  .hands-logos__track { gap: 28px; animation-duration: 22s; }
  .hands-logos span { font-size: 15px; }
  .featured-inner { flex-direction: column; align-items: stretch; padding: 0 20px; gap: 32px; }
  .featured-side { flex: none; order: -1; }
  .featured-side p { max-width: none; }
  .featured-track { padding: 0 20px; margin: 0 -20px; }
  .featured-card { width: 240px; }
  .rocks-head { padding: 0 20px; }
  .rocks-title { font-size: 32px; }
  .rocks-grid { grid-template-columns: 1fr; grid-template-rows: auto; padding: 0 20px; gap: 16px; }
  .rocks-card--years, .rocks-card--apps, .rocks-card--devs, .rocks-card--founder { grid-column: 1; grid-row: auto; }
  .rocks-card--founder { flex-direction: column; align-items: flex-start; }
  .rocks-card__photo { width: 100%; height: 180px; }
  .workflow-title { font-size: 32px; }
  .workflow-inner { padding: 0 20px; }
  .workflow-grid { grid-template-columns: 1fr; padding: 0 20px; }
  .workflow-card--code { grid-column: 1; }
}

@media (max-width: 560px) {
  .carousel-track { grid-template-columns: 1fr; }
  .industries-grid { grid-template-columns: 1fr; }
  .industries-title { font-size: 26px; }
  .industries-intro { font-size: 15px; }
  .industry-card { padding: 26px 22px 24px; }
  .hero-title { font-size: 34px; }
  .hero-cta { flex-direction: column; gap: 18px; }
}
/* ---------- Full-bleed video band (reusable) ---------- */
.media-band {
  position: relative;
  /* scales with the viewport rather than sitting as a thin strip on wide screens */
  min-height: clamp(560px, 72vh, 820px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-align: center;
  background: #0c0c0e;
}

.media-band__video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.media-band__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 10, 14, 0.68) 0%, rgba(10, 10, 14, 0.58) 45%, rgba(10, 10, 14, 0.74) 100%);
  z-index: 1;
  pointer-events: none;
}

.media-band__inner {
  position: relative;
  z-index: 2;
  max-width: 960px;
  padding: clamp(90px, 11vh, 150px) 40px;
}

.media-band__eyebrow {
  margin: 0 0 20px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #FFB020;
}

.media-band__title {
  margin: 0 0 22px;
  font-size: clamp(34px, 3.8vw, 58px);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -1.5px;
  color: #fff;
}

.media-band__text {
  margin: 0 auto;
  max-width: 660px;
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.88);
}

@media (max-width: 900px) {
  .media-band { min-height: 440px; }
  .media-band__inner { padding: 72px 20px; }
}


/* ---------- Parallax band (reusable) ---------- */
/* =============================================
   PARALLAX BAND
   ============================================= */

.parallax-band {
  position: relative;
  min-height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #0c0c0e;
  text-align: center;
}

/* oversized so it can translate without exposing an edge */
.parallax-band__media {
  position: absolute;
  top: -15%;
  left: 0;
  width: 100%;
  height: 130%;
  object-fit: cover;
  will-change: transform;
  z-index: 0;
}

.parallax-band__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,10,14,0.78) 0%, rgba(10,10,14,0.62) 45%, rgba(10,10,14,0.84) 100%);
  z-index: 1;
}

.parallax-band__inner {
  position: relative;
  z-index: 2;
  max-width: 860px;
  padding: 100px 40px;
}

.parallax-band__eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #FFB020;
  margin: 0 0 18px;
}

.parallax-band__title {
  font-size: 52px;
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -1.5px;
  color: #fff;
  margin: 0 0 20px;
}

.parallax-band__text {
  font-size: 18px;
  line-height: 1.7;
  color: rgba(255,255,255,0.88);
  margin: 0;
}

@media (max-width: 900px) {
  .parallax-band { min-height: 400px; }
  .parallax-band__inner { padding: 70px 20px; }
  .parallax-band__title { font-size: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  .parallax-band__media { transform: none !important; }
}

/* Several pages hardcode `grid-template-columns: repeat(N, 1fr)` as an inline
   style. Inline styles outrank media queries, so those grids kept N columns
   even at phone widths and pushed content past the viewport (about.html was
   overflowing to 552px on a 390px screen). Attribute selectors + !important
   are the only way to reach an inline declaration, so the override is scoped
   to small screens only — desktop layout is untouched. */
@media (max-width: 860px) {
  [style*="grid-template-columns: repeat(4, 1fr)"],
  [style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 560px) {
  [style*="grid-template-columns: repeat(4, 1fr)"],
  [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="grid-template-columns: repeat(2, 1fr)"] {
    grid-template-columns: 1fr !important;
  }
}

/* Same problem, written as bare fr values rather than repeat() — two-column
   splits that also need to stack on phones. */
@media (max-width: 760px) {
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns: 0.9fr 1.1fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* ── Feature blocks ────────────────────────────────────────────────────────
   A richer alternative to the tag-style capability cards: icon, heading and
   a real paragraph. Used where a list of short labels reads as keyword
   padding and the content deserves actual prose. Drops into the same
   .checklist__inner shell, replacing the <ul>. */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}

.feature-card {
  position: relative;
  padding: 24px 22px;
  border: 1px solid rgba(12, 12, 14, 0.07);
  border-radius: 18px;
  background:
    radial-gradient(150px 100px at 100% 0%, rgba(250, 152, 0, 0.10), transparent 72%),
    linear-gradient(158deg, #ffffff 0%, #fffdfa 55%, #fff6ea 100%);
  box-shadow:
    0 1px 2px rgba(12, 12, 14, 0.04),
    0 12px 28px -20px rgba(12, 12, 14, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease),
              border-color .4s var(--ease);
}

.feature-card__icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 15px;
  border-radius: 12px;
  color: var(--lime);
  background: rgba(250, 152, 0, 0.12);
  border: 1px solid rgba(250, 152, 0, 0.28);
  transition: background .4s var(--ease), color .4s var(--ease);
}

.feature-card__icon svg { width: 21px; height: 21px; }

.feature-card h3 {
  margin: 0 0 9px;
  font-size: 16.5px;
  font-weight: 700;
  letter-spacing: -0.3px;
  line-height: 1.3;
  color: var(--ink);
}

.feature-card p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--gray-600);
}

.feature-card:hover {
  transform: translateY(-4px);
  border-color: rgba(250, 152, 0, 0.42);
  box-shadow:
    0 2px 4px rgba(12, 12, 14, 0.04),
    0 24px 44px -24px rgba(250, 152, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.feature-card:hover .feature-card__icon {
  background: var(--lime);
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .feature-card, .feature-card__icon { transition: none; }
  .feature-card:hover { transform: none; }
}

@media (max-width: 560px) {
  .feature-grid { grid-template-columns: 1fr; }
  .feature-card { padding: 20px 18px; }
}

/* Sections whose right column is a feature grid stack instead of sitting
   side-by-side: the heading and intro run above, and the cards use the full
   width beneath. The two-column split left a tall empty gap under short
   intro copy, and it capped the grid at two columns on wide screens. */
.checklist--stacked .checklist__inner {
  grid-template-columns: 1fr;
  gap: 34px;
}

.checklist--stacked .checklist__text { max-width: 760px; }

.checklist--stacked .feature-grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* Card sections repeat many times per page, so they alternate between two
   background treatments to break the rhythm. Everything here is CSS —
   gradients, a hairline grid and a blurred orb — so it costs no image
   requests. The orb carries data-parallax and is moved by the existing
   scroll handler, which already opts out on touch and reduced-motion. */
.checklist--stacked {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(680px 380px at 88% -12%, rgba(250, 152, 0, 0.07), transparent 68%),
    linear-gradient(180deg, #ffffff 0%, #fffcf7 100%);
}

.checklist--stacked.is-alt {
  background:
    radial-gradient(640px 360px at 8% -6%, rgba(250, 152, 0, 0.09), transparent 66%),
    linear-gradient(180deg, #fdfaf5 0%, #ffffff 100%);
}

/* Hairline vertical rules, echoing the grid decoration in the hero. Faded at
   both ends so the section edges stay soft. */
.checklist--stacked::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(90deg, rgba(12, 12, 14, 0.035) 1px, transparent 1px);
  background-size: 172px 100%;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
}

.section-orb {
  position: absolute;
  width: 430px;
  height: 430px;
  top: -150px;
  right: -130px;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(48px);
  opacity: .5;
  will-change: transform;
  background: radial-gradient(circle, rgba(250, 152, 0, 0.32), transparent 70%);
}

.checklist--stacked.is-alt .section-orb {
  right: auto;
  left: -150px;
  background: radial-gradient(circle, rgba(255, 184, 77, 0.30), transparent 70%);
}

/* Keep content above the decorative layers. */
.checklist--stacked .checklist__inner { position: relative; z-index: 1; }

@media (max-width: 760px) {
  .section-orb { width: 280px; height: 280px; filter: blur(38px); }
  .checklist--stacked::before { background-size: 110px 100%; }
}

/* Optional imagery inside a stacked card section, sitting between the
   heading and the cards. Serves WebP with a JPEG fallback; the intrinsic
   aspect ratio is declared so the cards below don't shift while it loads. */
.checklist__media {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
}

.checklist__media figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(12, 12, 14, 0.07);
  background: #f4f4f6;
  box-shadow: 0 18px 44px -28px rgba(12, 12, 14, 0.55);
}

.checklist__media img {
  display: block;
  width: 100%;
  /* The width/height attributes are presentational hints, so height stays at
     768px unless reset — and aspect-ratio is ignored while it does. */
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform .6s var(--ease);
}

.checklist__media figure:hover img { transform: scale(1.04); }

@media (prefers-reduced-motion: reduce) {
  .checklist__media img { transition: none; }
  .checklist__media figure:hover img { transform: none; }
}

/* Active navigation link — current page */
.main-nav a.nav-active,
.main-nav .nav-dd-trigger.nav-active,
.mobile-nav a.nav-active,
.dropdown-panel a.nav-active {
  color: #FA9800;
  font-weight: 600;
}

/* ============================================================
   RESPONSIVE FIXES
   ============================================================ */

/* ---------- Inline grids that never collapsed ----------
   Many sections set grid-template-columns inline. Inline styles beat media
   queries, so these grids kept their desktop column count on a phone, and a
   1fr track defaults to min-width:auto — it refuses to shrink below its
   content. The row then forced the whole document wider than the screen
   (case-study.html measured 702px on a 375px viewport), which is why sections
   appeared shifted left with their text cut off.

   Match every inline pattern actually used on the site — "1fr 1fr" is the most
   common by far (75 uses, including the about.html hero), so matching only
   repeat() misses most of them. Overriding needs !important because the
   declaration being beaten is inline. */
@media (max-width: 900px) {
  [style*="repeat(4, 1fr)"],
  [style*="repeat(3, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
  /* Let tracks shrink to fit rather than pushing the page wider. */
  [style*="grid-template-columns"] > * { min-width: 0; }
}
@media (max-width: 600px) {
  [style*="repeat(4, 1fr)"],
  [style*="repeat(3, 1fr)"],
  [style*="repeat(2, 1fr)"],
  [style*="1fr 1fr"],
  [style*="0.9fr 1.1fr"],
  [style*="minmax("] { grid-template-columns: 1fr !important; }
  /* 48-60px gutters between stacked rows is a lot of dead scroll on a phone. */
  [style*="grid-template-columns"] { gap: 24px !important; }
}

/* Headings are grid/flex items, so min-width defaults to auto and the track
   will not shrink below the longest line. Cap them instead.
   Deliberately NOT using overflow-wrap:break-word here — it splits words
   mid-syllable ("Transforming" became "Transform ing" in the about.html hero). */
@media (max-width: 400px) {
  h1, h2, h3, .section-title { max-width: 100%; min-width: 0; }
}

/* ---------- Very narrow phones (iPhone SE and similar) ----------
   These two card grids keep two columns down to 320px. They are defined in the
   page-specific stylesheets (ai-premium.css, ai-strategy.css) which load after
   this file, so the override needs !important to win on equal specificity. */
@media (max-width: 400px) {
  .ai-pillars__grid,
  .strat-cases__grid { grid-template-columns: 1fr !important; }
}

/* ---------- Mobile nav submenus ----------
   The Services / Industries / Artificial Intelligence entries in .mobile-nav
   were plain links; their sub-pages lived only in the desktop hover panels, so
   on a phone they were unreachable. script.js clones each panel in beneath its
   link and toggles it from the caret. */
.mobile-nav__group { display: flex; flex-direction: column; }
.mobile-nav__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}
.mobile-nav__row > a { flex: 1; border-bottom: none; }
.mobile-nav__caret {
  background: transparent;
  border: none;
  padding: 12px 6px 12px 14px;
  cursor: pointer;
  color: var(--gray-900);
  display: flex;
  align-items: center;
  /* Widen the tap target without changing the visual box. */
  min-width: 44px;
  justify-content: flex-end;
}
.mobile-nav__caret svg { transition: transform .25s ease; }
.mobile-nav__group.is-open .mobile-nav__caret svg { transform: rotate(180deg); }
.mobile-nav__sub {
  display: none;
  flex-direction: column;
  padding: 4px 0 8px 14px;
  border-left: 2px solid var(--line);
  margin: 6px 0 6px 6px;
}
.mobile-nav__group.is-open .mobile-nav__sub { display: flex; }
.mobile-nav__sub a {
  padding: 10px 6px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--gray-600);
  border-bottom: none;
}
.mobile-nav__sub a:hover { color: var(--lime); }

/* Long menus need to scroll rather than run off the bottom of the screen. */
@media (max-width: 900px) {
  .site-header.is-menu-open .mobile-nav {
    max-height: calc(100vh - 70px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Inline CTA rows are "display: flex; gap: 16px" with no wrap, so two buttons
   are forced to share the width. On a phone that squeezed the about.html hero
   button to 136px while its nowrap label needed 201px, and the text spilled
   past the button background. Let button rows wrap instead.
   :has() scopes this to rows that actually contain buttons, so unrelated inline
   flex rows (icon + label pairs, badges) keep their current behaviour. */
@media (max-width: 600px) {
  [style*="display: flex"]:has(> .btn) { flex-wrap: wrap; }
  .btn { max-width: 100%; }
}

/* Last-resort wrapping at 320px. Safe to apply now that the inline grids above
   collapse to one column — headings get the full width, so this only triggers
   for a word genuinely too long for the screen. Applying it before that fix
   split "Transforming" into "Transform ing" in the about.html hero, because the
   heading was still trapped in a 136px column. */
@media (max-width: 360px) {
  h1, h2, h3, .section-title, p { overflow-wrap: break-word; }
}

/* ---------- Mobile: card padding and filter tabs ----------
   Cards carry 48-64px of inline padding. On a phone that leaves almost nothing
   for the content — the Cosmosii card on case-studies.html had 128px of
   horizontal padding inside a 240px box, so its description wrapped to two or
   three words a line. The trailing semicolon in the selector keeps this off
   section padding like "80px 40px", which is a different thing. */
@media (max-width: 600px) {
  [style*="padding: 64px;"],
  [style*="padding: 56px;"],
  [style*="padding: 48px;"],
  .project-card { padding: 20px !important; }

  /* Filter buttons were 12px/28px at 14px uppercase, making each one 170px wide.
     Only one fitted per row, so six filters became a tall vertical stack.
     Shrink them and put them in a single swipeable row. */
  .filter-btn {
    padding: 6px 12px !important;
    font-size: 11px !important;
    letter-spacing: 0.2px !important;
    border-width: 1px !important;
    flex: 0 0 auto;            /* never shrink — labels stay on one line */
    scroll-snap-align: start;
  }
  [style*="display: flex"]:has(> .filter-btn) {
    flex-wrap: nowrap !important;
    /* The inline style is justify-content:center. Combined with overflow-x that
       leaves the leading buttons unreachable — the browser centres the content
       and there is no way to scroll back past the start. Must be flex-start. */
    justify-content: flex-start !important;
    gap: 8px !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    /* Without this the snapport starts at the padding edge, so the browser
       immediately scrolls to 40px to align the first chip — leaving it flush
       against the screen with no leading gap. Inset the snapport to match. */
    scroll-padding-left: 40px;
    scroll-padding-right: 40px;
    -webkit-overflow-scrolling: touch;
    /* Bleed to the screen edges so it reads as a tab bar and the last chip is
       not visually trapped against the section padding. */
    margin-left: -40px;
    margin-right: -40px;
    padding: 2px 40px;
    /* Hide the scrollbar; the cut-off chip at the edge signals it swipes. */
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  [style*="display: flex"]:has(> .filter-btn)::-webkit-scrollbar { display: none; }
}

/* ---------- case-studies.html hero stat row: 2x2 instead of 1 column ----------
   This grid also carries inline repeat(4, 1fr), so the generic rule above
   collapsed it to a single column like every other 4-up grid on the site. Here
   that reads as four skinny stacked rows instead of a compact stat block, so it
   gets its own class to override to two columns specifically. Equal-specificity
   attribute vs. class selectors resolve by source order, so this must stay
   after the generic block above. */
@media (max-width: 600px) {
  .case-stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 28px 16px !important; }
  .about-stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 24px !important; }
  .filter-buttons-container { gap: 20px !important; }
}
@media (max-width: 360px) {
  /* Keep the big gradient numbers from crowding two labels like
     "Client Satisfaction" into a ~140px column at the smallest phone sizes. */
  .case-stats-grid [style*="font-size: 36px"] { font-size: 30px !important; }
  .about-stats-grid [style*="font-size: 32px"] { font-size: 26px !important; }
}