@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,300..800&family=Plus+Jakarta+Sans:ital,wght@0,300..800;1,300..800&display=swap');


/* ============================================================
   ElevAIte Labs - site stylesheet
   ============================================================ */
/* Tweakable defaults via CSS variables (overridden by Tweaks panel) */
:root {
  /* The sticky navbar is 113px tall and shrinks to 101px once scrolled.
     Anything that has to sit clear of it - sticky rails, anchor targets -
     measures from here rather than guessing. */
  --nav-offset: 148px;
  --bg: #FAF9F6;
  --card: #F0EEE8;
  --white: #FFFFFF;
  --text: #0F0F0F;
  --body: #4A4A4A;
  --muted: #8A857A;
  --border: #E2DFD8;
  --accent: #1E88E5;
  --accent-deep: #1565C0;
  --footer-bg: #0F0F0F;
  --footer-link: #9A9A9A;
  --footer-bottom: #6A6A6A;

  --display: "Bricolage Grotesque", "Plus Jakarta Sans", system-ui, sans-serif;
  --sans: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;

  --radius-btn: 8px;
  --radius-card: 12px;
  --radius-card-lg: 16px;

  --section-pad: 88px;

  /* Spacing scale - use these instead of ad-hoc pixel values */
  --sp-1: 8px;
  --sp-2: 12px;
  --sp-3: 16px;
  --sp-4: 24px;
  --sp-5: 32px;
  --sp-6: 48px;
  --sp-7: 64px;
  --sp-8: 88px;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
}
body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img {
  max-width: 100%;
  display: block;
}
a {
  color: inherit;
  text-decoration: none;
}
/* ---------- Layout ---------- */
.wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
}
section {
  padding: var(--section-pad) 0;
}
/* ---------- Type ---------- */
.tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 24px;
}
.display {
  font-family: var(--display);
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.025em;
  line-height: 1.05;
}
h1.display {
  font-size: clamp(44px, 6.2vw, 80px);
  font-weight: 800;
}
h2.display {
  font-size: clamp(34px, 4.4vw, 52px);
  font-weight: 700;
}
h3.display {
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 700;
}
.subhead {
  font-size: 20px;
  line-height: 1.5;
  color: var(--body);
  font-weight: 400;
}
p {
  color: var(--body);
  text-align: left;
  text-wrap: pretty;
}
/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  border-radius: var(--radius-btn);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  border: 1px solid transparent;
  text-decoration: none;
  white-space: nowrap;
}
.btn-primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.btn-primary:hover {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(30, 136, 229, 0.3);
}
.btn-primary:active {
  transform: translateY(0);
  box-shadow: none;
}
.btn-ghost {
  background: transparent;
  color: var(--accent);
  border-color: var(--accent);
}
.btn-ghost:hover {
  background: var(--accent);
  color: #fff;
  transform: translateY(-2px);
}
.btn-ghost:active {
  transform: translateY(0);
}
.btn-light {
  background: #fff;
  color: var(--accent);
  border-color: #fff;
}
.btn-light:hover {
  background: var(--bg);
  transform: translateY(-2px);
}
.link-arrow {
  color: var(--accent);
  font-weight: 500;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: relative;
  padding-bottom: 2px;
}
.link-arrow::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 1px;
  background: var(--accent);
  transition: right 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.link-arrow:hover::after {
  right: 0;
}
.link-arrow .arrow {
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  display: inline-block;
}
.link-arrow:hover .arrow {
  transform: translateX(5px);
}
/* ---------- Scroll Progress Bar ---------- */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 200;
  pointer-events: none;
}
.scroll-progress-bar {
  height: 100%;
  background: var(--accent);
  width: 0%;
  transition: width 0.08s linear;
  border-radius: 0 2px 2px 0;
}
/* ---------- Navigation ---------- */
/* Every in-page jump stops below the sticky navbar, not behind it. */
html {
  scroll-padding-top: var(--nav-offset);
}
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 249, 246, 0.92);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: padding 0.3s ease, box-shadow 0.3s ease;
}
.nav.scrolled {
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.06);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 40px;
  max-width: 1440px;
  margin: 0 auto;
  gap: 40px;
  transition: padding 0.3s ease;
}
.nav.scrolled .nav-inner {
  padding-top: 12px;
  padding-bottom: 12px;
}
.logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  transition: opacity 0.2s;
}
.logo:hover {
  opacity: 0.8;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 36px;
  font-size: 15px;
  font-weight: 500;
}
.nav-links a {
  color: var(--body);
  position: relative;
  padding: 6px 0;
  transition: color 0.2s;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -2px;
  height: 2px;
  background: var(--accent);
  border-radius: 1px;
  transition: right 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.nav-links a:hover,
.nav-links a.active {
  color: var(--accent);
}
.nav-links a:hover::after,
.nav-links a.active::after {
  right: 0;
}
.nav-cta {
  padding: 10px 18px;
  font-size: 14px;
}
/* Hamburger → X */
.mobile-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  flex-direction: column;
  gap: 5px;
}
.mobile-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transform-origin: center;
  transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    opacity 0.25s ease,
    width 0.25s ease;
}
.mobile-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.mobile-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.mobile-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}
/* ---------- Sidebar drawer (mobile nav) ---------- */
.nav-sidebar-overlay {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: rgba(15, 15, 15, 0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.38s ease, visibility 0.38s;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.nav-sidebar-overlay.open {
  opacity: 1;
  visibility: visible;
}
.nav-sidebar {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(340px, 88vw);
  z-index: 151;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  transform: translateX(110%);
  transition: transform 0.42s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  box-shadow: -12px 0 48px rgba(0, 0, 0, 0.14);
  overflow-y: auto;
}
.nav-sidebar.open {
  transform: translateX(0);
}
.nav-sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 28px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.nav-sidebar-close {
  background: none;
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 18px;
  color: var(--text);
  transition: all 0.2s;
}
.nav-sidebar-close:hover {
  background: var(--text);
  color: #fff;
  border-color: var(--text);
}
.nav-sidebar-links {
  flex: 1;
  padding: 16px 0;
  display: flex;
  flex-direction: column;
}
.nav-sidebar-links a {
  font-family: var(--display);
  font-size: 26px;
  font-weight: 500;
  color: var(--text);
  padding: 14px 28px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: color 0.2s, padding-left 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94), background 0.2s;
  opacity: 0;
  transform: translateX(24px);
  transition: color 0.2s, padding-left 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    background 0.2s, opacity 0.4s ease, transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.nav-sidebar.open .nav-sidebar-links a {
  opacity: 1;
  transform: translateX(0);
}
.nav-sidebar.open .nav-sidebar-links a:nth-child(1) {
  transition-delay: 0.06s;
}
.nav-sidebar.open .nav-sidebar-links a:nth-child(2) {
  transition-delay: 0.10s;
}
.nav-sidebar.open .nav-sidebar-links a:nth-child(3) {
  transition-delay: 0.14s;
}
.nav-sidebar.open .nav-sidebar-links a:nth-child(4) {
  transition-delay: 0.18s;
}
.nav-sidebar.open .nav-sidebar-links a:nth-child(5) {
  transition-delay: 0.22s;
}
.nav-sidebar.open .nav-sidebar-links a:nth-child(6) {
  transition-delay: 0.26s;
}
.nav-sidebar.open .nav-sidebar-links a:nth-child(7) {
  transition-delay: 0.30s;
}
.nav-sidebar-links a:hover {
  color: var(--accent);
  padding-left: 36px;
  background: rgba(30, 136, 229, 0.04);
}
.nav-sidebar-links a.active {
  color: var(--accent);
}
.nav-sidebar-links a .sidebar-arrow {
  font-size: 18px;
  opacity: 0.4;
  transition: opacity 0.2s, transform 0.2s;
}
.nav-sidebar-links a:hover .sidebar-arrow {
  opacity: 1;
  transform: translateX(4px);
}
.nav-sidebar-footer {
  padding: 24px 28px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
/* ---------- Hero ---------- */
.hero {
  padding: 56px 0 72px;
}
/* Visual column gets the wider track - it now carries the run panel as well
   as the mascot, and both need room to sit side by side rather than stacked. */
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1.08fr;
  gap: 40px;
  align-items: center;
}
.hero-headline {
  font-family: var(--display);
  font-size: clamp(48px, 6.4vw, 82px);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: var(--text);
  margin: 18px 0 28px;
}
.hero-headline em {
  font-style: normal;
  color: var(--accent);
  font-weight: 800;
}
.hero-sub {
  font-size: 18px;
  line-height: 1.6;
  color: var(--body);
  max-width: 520px;
  margin-bottom: 36px;
}
.hero-cta-row {
  display: flex;
  gap: 12px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}
.hero-stats {
  font-size: 14px;
  color: var(--body);
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.hero-stats .dot {
  width: 3px;
  height: 3px;
  background: var(--muted);
  border-radius: 50%;
  display: inline-block;
}
/* Hero stat number pulse-in */
.hero-stat-num {
  font-weight: 600;
  color: var(--text);
}
/* Image collage */
/* ── Arkin hero character ─────────────────────────────────── */
.arkin-hero-wrap {
  position: relative;
  display: flex;
  align-items: flex-end;
  /* Arkin sits right so the run panel has room at his left */
  justify-content: flex-end;
  height: 600px;
  overflow: visible;
}
/* ── Hero run panel ───────────────────────────────────────
   Plays once, ~1.2s after load so it never competes with LCP,
   then holds its finished state. No loop: perpetual motion with
   no cause is what reads as decoration. */
.hero-run {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 244px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.hrun-step {
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 11px;
  box-shadow: 0 6px 18px -8px rgba(15, 15, 15, 0.18);
  opacity: 0;
  transform: translateY(6px);
  animation: hrunIn 0.4s var(--ease-out) forwards;
}
.hrun-step:nth-child(1) { animation-delay: 1.0s; }
.hrun-step:nth-child(2) { animation-delay: 1.45s; }
.hrun-step:nth-child(3) { animation-delay: 1.9s; }
.hrun-step:nth-child(4) { animation-delay: 2.35s; }
.hrun-step:nth-child(5) { animation-delay: 2.8s; }
.hrun-step:nth-child(6) { animation-delay: 3.25s; }
@keyframes hrunIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.hrun-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}
.hrun-body {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  min-width: 0;
}
.hrun-body b {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
}
.hrun-body span {
  font-size: 11px;
  color: var(--muted);
}
.hrun-foot {
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  padding-left: 4px;
  margin-top: 2px;
  opacity: 0;
  animation: hrunIn 0.4s var(--ease-out) 3.7s forwards;
}
.arkin-glow {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  /* The pulse scales this to 1.12, so a fixed 340px pushed past a 360px
     viewport and produced horizontal scroll on small phones. */
  width: min(340px, 72vw);
  height: min(340px, 72vw);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.18) 0%, transparent 70%);
  pointer-events: none;
  animation: arkinGlow 4s ease-in-out infinite;
}
.arkin-hero-img {
  position: relative;
  height: 620px;
  width: auto;
  object-fit: contain;
  object-position: bottom;
  animation: arkinFloat 5s ease-in-out infinite;
  filter: drop-shadow(0 32px 48px rgba(0, 0, 0, 0.18));
  transform-origin: bottom center;
  transition: transform 0.4s ease;
}
.arkin-hero-img:hover {
  transform: scale(1.03) translateY(-6px);
}
@keyframes arkinFloat {

  0%,
  100% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-14px);
  }
}
@keyframes arkinGlow {

  0%,
  100% {
    opacity: 0.7;
    transform: translateX(-50%) scale(1);
  }

  50% {
    opacity: 1;
    transform: translateX(-50%) scale(1.12);
  }
}
/* Collage legacy styles kept for other pages if needed */
.collage {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(6, 60px);
  gap: 6px;
  height: 580px;
}
.collage .ph {
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.collage .c1 {
  grid-column: 1 / 4;
  grid-row: 1 / 4;
}
.collage .c2 {
  grid-column: 4 / 7;
  grid-row: 1 / 3;
}
.collage .c3 {
  grid-column: 4 / 6;
  grid-row: 3 / 5;
}
.collage .c4 {
  grid-column: 6 / 7;
  grid-row: 3 / 5;
}
.collage .c5 {
  grid-column: 1 / 3;
  grid-row: 4 / 7;
}
.collage .c6 {
  grid-column: 3 / 5;
  grid-row: 5 / 7;
}
.collage .c7 {
  grid-column: 5 / 7;
  grid-row: 5 / 7;
}
.collage .ph {
  transform: translateY(var(--py, 0px));
}
/* ---------- Placeholder imagery ---------- */
.ph {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  display: flex;
  align-items: flex-end;
  padding: 14px;
  overflow: hidden;
  border-radius: var(--radius-card);
  isolation: isolate;
}
.ph::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: repeating-linear-gradient(135deg,
      rgba(15, 15, 15, 0.04) 0px,
      rgba(15, 15, 15, 0.04) 1px,
      transparent 1px,
      transparent 9px);
}
.ph-label {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.02em;
  background: rgba(250, 249, 246, 0.85);
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid var(--border);
}
/* Image-treatment variants (set on body) */
body[data-imagery="solid"] .ph::before {
  display: none;
}
body[data-imagery="solid"] .ph {
  background: var(--card);
}
body[data-imagery="geometric"] .ph::before {
  background-image:
    radial-gradient(circle at 30% 30%, rgba(30, 136, 229, 0.08) 0%, transparent 40%),
    radial-gradient(circle at 70% 70%, rgba(15, 15, 15, 0.05) 0%, transparent 50%);
}
/* ---------- About teaser ---------- */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 56px;
  align-items: stretch;
}
/* Work grid media - real screenshot, or a branded tile when the CMS row
   has no usable artwork (previously a generic Unsplash stock photo). */
.work-card-shot {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-card);
}
.work-card-tile {
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: var(--radius-card);
  background: linear-gradient(135deg, var(--text) 0%, #2b2b2b 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #fff;
}
.work-card-tile span {
  font-family: var(--display);
  font-size: 48px;
  font-weight: 700;
  line-height: 1;
}
.work-card-tile em {
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.6;
}
.about-copy h2 {
  margin-bottom: 28px;
}
.about-copy p {
  margin-bottom: 18px;
  max-width: 540px;
}
/* Proof panel - one dense card, not three stretched empty ones. Height comes
   from real content (stats + team + stack) rather than from padding. */
.about-proof {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-card-lg);
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  align-self: center;
}
.proof-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3);
}
.proof-num {
  display: block;
  font-family: var(--display);
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 6px;
}
.proof-label {
  display: block;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--muted);
}
.proof-team {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
}
.proof-faces {
  display: flex;
  flex: none;
}
.proof-faces img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--white);
  margin-left: -10px;
}
.proof-faces img:first-child {
  margin-left: 0;
}
.proof-team p {
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--body);
  margin: 0;
}
.proof-tools {
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
}
.proof-logos {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-top: var(--sp-2);
  flex-wrap: wrap;
}
/* No grayscale: several of these ship with an opaque background plate and
   desaturate into a grey box rather than a mark. */
.proof-logos img {
  height: 24px;
  width: auto;
  object-fit: contain;
  border-radius: 4px;
  opacity: 0.85;
  transition: opacity 0.2s ease;
}
.about-proof:hover .proof-logos img {
  opacity: 1;
}
@media (max-width: 560px) {
  .about-proof {
    padding: var(--sp-4);
  }

  .proof-stats {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-4) var(--sp-3);
  }
}
/* ---------- Services list ---------- */
.svc-list {
  border-top: 1px solid var(--border);
  margin-top: 40px;
}
/* Title column is the wider track so service names stay on one line - 
   wrapping here was adding ~90px per row. */
.svc-row {
  display: grid;
  grid-template-columns: 72px 1.15fr 1fr 40px;
  gap: 28px;
  align-items: center;
  padding: 24px 24px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: color 0.3s ease;
}
.svc-row::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: translateX(-100%);
  transition: transform 0.42s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  z-index: 0;
}
.svc-row:hover::before {
  transform: translateX(0);
}
.svc-row>* {
  position: relative;
  z-index: 1;
}
.svc-num {
  font-family: var(--display);
  font-size: 20px;
  font-weight: 500;
  color: var(--accent);
  font-style: italic;
  transition: color 0.3s;
}
.svc-title {
  font-family: var(--display);
  font-size: clamp(21px, 2.1vw, 29px);
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.01em;
  transition: color 0.3s;
}
.svc-desc {
  font-size: 16px;
  color: var(--body);
  max-width: 420px;
  transition: color 0.3s;
}
.svc-arrow {
  text-align: right;
  color: var(--text);
  font-size: 22px;
  transition: color 0.3s, transform 0.3s;
}
.svc-row:hover .svc-num,
.svc-row:hover .svc-title,
.svc-row:hover .svc-desc,
.svc-row:hover .svc-arrow {
  color: #fff;
}
.svc-row:hover .svc-arrow {
  transform: translateX(8px);
}
/* ---------- Process / How we work ---------- */
.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  margin-top: 64px;
  position: relative;
}
/* The connector draws left to right and each number lights up as it arrives,
   so the four steps read as a sequence rather than four things appearing. */
.process-grid::before {
  content: "";
  position: absolute;
  top: 30px;
  left: 5%;
  right: 5%;
  height: 1px;
  background: var(--border);
  z-index: 0;
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 1.6s var(--ease-out);
}
.process-grid.line-in::before {
  transform: scaleX(1);
}
.process-step {
  position: relative;
  z-index: 1;
  background: var(--bg);
  padding-right: 20px;
}
.process-num {
  font-family: var(--display);
  font-size: 56px;
  font-weight: 500;
  color: var(--border);
  line-height: 1;
  margin-bottom: 20px;
  background: var(--bg);
  display: inline-block;
  padding-right: 16px;
  transition: color 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
/* Each step lights as the connector reaches it */
.process-step.in .process-num {
  color: var(--accent);
  transform: translateY(-2px);
}
.process-grid>.process-step:nth-child(1) .process-num { transition-delay: 100ms; }
.process-grid>.process-step:nth-child(2) .process-num { transition-delay: 460ms; }
.process-grid>.process-step:nth-child(3) .process-num { transition-delay: 820ms; }
.process-grid>.process-step:nth-child(4) .process-num { transition-delay: 1180ms; }
/* Match the fade-up stagger to the sweep instead of the generic 80ms step */
.process-grid>.fade-up:nth-child(1) { transition-delay: 0ms; }
.process-grid>.fade-up:nth-child(2) { transition-delay: 200ms; }
.process-grid>.fade-up:nth-child(3) { transition-delay: 400ms; }
.process-grid>.fade-up:nth-child(4) { transition-delay: 600ms; }
@media (hover: hover) and (pointer: fine) {
  .process-step:hover .process-num {
    transform: scale(1.08) translateY(-2px);
  }
}
.process-step h3 {
  font-family: var(--sans);
  font-size: 19px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 10px;
}
.process-step p {
  font-size: 15px;
}
/* ---------- Featured Work masonry ---------- */
/* Uniform 3-up grid. Project screenshots arrive at uncontrolled aspect ratios,
   so the layout is the constant and the image is the variable — a fixed
   aperture crops them instead of letting each one dictate its card's height. */
.work-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5) var(--sp-4);
  margin-top: var(--sp-6);
}
.work-card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-card-lg);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 15, 15, 0.04);
  transition:
    transform 180ms var(--ease-out),
    box-shadow 180ms var(--ease-out),
    border-color 180ms ease;
}
/* The fixed aperture. Screenshot bleeds off the bottom edge so it reads as a
   window peek rather than a shrunk-to-fit full page. */
/* 16/9 rather than 16/10: the project screenshots measure 1.77–2.10, and the
   24px side padding narrows the inner box further — a taller well made `cover`
   crop the left/right edges hard enough to clip words out of the headings. */
.wc-media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--card);
  border-bottom: 1px solid var(--border);
  padding: var(--sp-3) var(--sp-3) 0;
  overflow: hidden;
}
.work-card-shot,
.work-card-tile {
  width: 100%;
  height: 100%;
  border-radius: 8px 8px 0 0;
  transform-origin: top center;
  transition: transform 260ms var(--ease-out);
}
.work-card-shot {
  object-fit: cover;
  object-position: top center;
  border: 1px solid var(--border);
  border-bottom: none;
  box-shadow: 0 8px 20px -10px rgba(15, 15, 15, 0.22);
  background: var(--white);
}
/* Applied by MediaOrTile when the source is shaped nothing like its box —
   a logo or a tall capture. Cropping those produces a slab, so contain. */
.work-card-shot.is-contained {
  object-fit: contain;
  padding: 6%;
}
.work-card-tile {
  aspect-ratio: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  background: linear-gradient(135deg, var(--text) 0%, #2b2b2b 100%);
  color: var(--white);
}
.work-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--sp-4);
}
.work-card .industry {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--sp-2);
}
.work-card .industry::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}
.work-card h3 {
  font-family: var(--display);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--text);
  margin-bottom: var(--sp-1);
}
.work-card .result {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--body);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Pinned to the bottom so card bodies align across a row */
.wc-cta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: var(--sp-3);
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
}
.wc-cta .arrow {
  transition: transform 160ms var(--ease-out);
}
/* Wide variant is data-driven (project.featured), never index-driven */
.work-card--lead {
  grid-column: span 2;
}
.work-card--lead .wc-media {
  aspect-ratio: 2 / 1;
}
.work-card--lead h3 {
  font-size: 26px;
}
.work-card--lead .result {
  -webkit-line-clamp: 3;
}
@media (hover: hover) and (pointer: fine) {
  .work-card:hover {
    transform: translateY(-4px);
    border-color: #D4D0C6;
    box-shadow: 0 14px 32px -14px rgba(15, 15, 15, 0.16);
    z-index: 2;
  }

  .work-card:hover .work-card-shot,
  .work-card:hover .work-card-tile {
    transform: scale(1.02);
  }

  .work-card:hover .wc-cta .arrow {
    transform: translateX(4px);
  }
}
.work-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  transform: translateY(-4px);
  box-shadow: 0 14px 32px -14px rgba(15, 15, 15, 0.16);
  z-index: 2;
}
.work-card:focus-visible .wc-cta .arrow {
  transform: translateX(4px);
}
.work-card:active {
  transform: translateY(-1px) scale(0.995);
  transition-duration: 100ms;
}
.work-cta {
  text-align: center;
  margin-top: var(--sp-6);
}
/* ---------- Kredoo modules (Instagram + WhatsApp) ---------- */
.kmod-section {
  background: var(--card);
}
.kmod-lead {
  font-size: 19px;
  line-height: 1.55;
  max-width: 720px;
  margin-top: var(--sp-3);
}
/* The end-to-end funnel. Numbers light up in sequence on scroll. */
.kmod-journey {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--sp-3);
  margin: var(--sp-6) 0 0;
  padding: 0;
  position: relative;
}
.kmod-journey::before {
  content: "";
  position: absolute;
  top: 13px;
  left: 4%;
  right: 4%;
  height: 1px;
  background: var(--border);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.6s var(--ease-out);
}
.kmod-journey.in::before {
  transform: scaleX(1);
}
.kmod-journey li {
  position: relative;
  padding-top: 34px;
  z-index: 1;
}
.kmod-journey .kj-num {
  position: absolute;
  top: 0;
  left: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  background: var(--white);
  border: 1px solid var(--border);
  color: var(--muted);
  transition: color 0.4s var(--ease-out), border-color 0.4s var(--ease-out), background 0.4s var(--ease-out);
}
.kmod-journey.in .kj-num {
  color: var(--white);
  background: var(--accent);
  border-color: var(--accent);
}
.kmod-journey li:nth-child(1) .kj-num { transition-delay: 120ms; }
.kmod-journey li:nth-child(2) .kj-num { transition-delay: 340ms; }
.kmod-journey li:nth-child(3) .kj-num { transition-delay: 560ms; }
.kmod-journey li:nth-child(4) .kj-num { transition-delay: 780ms; }
.kmod-journey li:nth-child(5) .kj-num { transition-delay: 1000ms; }
.kmod-journey li:nth-child(6) .kj-num { transition-delay: 1220ms; }
.kmod-journey strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
  margin-bottom: 4px;
}
.kmod-journey em {
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
/* The two module cards */
.kmod-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}
.kmod {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-card-lg);
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
}
.kmod-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
/* Channel colour lives only on the icon chip - the rest stays on brand */
.kmod-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: var(--white);
  flex: none;
}
.kmod-icon--ig {
  background: linear-gradient(45deg, #F58529 0%, #DD2A7B 55%, #8134AF 100%);
}
.kmod-icon--wa {
  background: #25D366;
}
.kmod-head h3 {
  font-family: var(--display);
  font-size: 26px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.kmod-role {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.kmod-pitch {
  font-size: 15.5px;
  line-height: 1.6;
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--border);
}
.kmod-list {
  list-style: none;
  margin: 0 0 var(--sp-4);
  padding: 0;
  flex: 1;
}
.kmod-list li {
  position: relative;
  padding-left: 24px;
  margin-bottom: var(--sp-2);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--body);
}
.kmod-list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.kmod-list b {
  color: var(--text);
  font-weight: 600;
}
.kmod-list code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12.5px;
  background: var(--card);
  border-radius: 4px;
  padding: 1px 5px;
}
.kmod-proof {
  margin-top: auto;
  background: var(--card);
  border-radius: var(--radius-card);
  padding: var(--sp-3);
}
.kmod-proof-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.kmod-proof-value {
  display: block;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
  font-weight: 500;
}
/* Shared-CRM footer */
.kmod-shared {
  margin-top: var(--sp-4);
  background: var(--text);
  color: var(--white);
  border-radius: var(--radius-card-lg);
  padding: var(--sp-5);
}
.kmod-shared h4 {
  font-family: var(--display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: var(--sp-4);
}
.kmod-shared ul {
  list-style: none;
  margin: 0 0 var(--sp-4);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-2) var(--sp-5);
}
.kmod-shared li {
  position: relative;
  padding-left: 22px;
  font-size: 14.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.72);
}
.kmod-shared li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.kmod-cta {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.kmod-shared .btn-ghost {
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.35);
}
@media (max-width: 1100px) {
  .kmod-journey {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-4) var(--sp-3);
  }

  .kmod-journey::before {
    display: none;
  }

  .kmod-shared ul {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 860px) {
  .kmod-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 560px) {
  .kmod-journey {
    grid-template-columns: 1fr 1fr;
  }

  .kmod-shared ul {
    grid-template-columns: 1fr;
  }

  .kmod,
  .kmod-shared {
    padding: var(--sp-4);
  }
}
/* ---------- Products ---------- */
/* auto-fit + a max track so a single product doesn't leave two empty columns */
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 380px));
  justify-content: center;
  gap: 24px;
  margin-top: 48px;
}
.product-card {
  background: var(--card);
  border-radius: var(--radius-card-lg);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    box-shadow 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 40px -12px rgba(15, 15, 15, 0.12);
}
.product-card .ph {
  aspect-ratio: 16/9;
  background: #fff;
  border: 1px solid var(--border);
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.product-card:hover .ph {
  transform: scale(1.02);
}
.product-card-body {
  padding: 6px 8px 10px;
}
.product-card h3 {
  font-family: var(--display);
  font-size: 26px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}
.product-card .tagline {
  font-size: 15px;
  color: var(--body);
  margin-bottom: 18px;
  line-height: 1.5;
}
.product-card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.btn-demo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.btn-demo:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-1px);
}
.btn-demo .play {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  padding-left: 1px;
  transition: transform 0.25s ease;
}
.btn-demo:hover .play {
  transform: scale(1.15);
}
/* ---------- Learn / reels ---------- */
.learn-section {
  background: var(--card);
}
.reels-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 56px;
}
.reel-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  cursor: pointer;
}
.reel-card .reel-media {
  aspect-ratio: 9/16;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-card-lg);
  position: relative;
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    box-shadow 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.reel-card:hover .reel-media {
  transform: translateY(-5px);
  box-shadow: 0 16px 40px -8px rgba(15, 15, 15, 0.14);
}
.reel-card:hover 
.reel-card .reel-cat {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
  font-weight: 600;
}
.reel-card h3 {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  margin-top: 4px;
}
/* ---------- Testimonials ---------- */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 56px;
}
.testimonial-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    box-shadow 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    border-color 0.3s;
}
.testimonial-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 36px -10px rgba(15, 15, 15, 0.1);
  border-color: var(--accent);
}
.quote-mark {
  font-family: var(--display);
  font-size: 64px;
  line-height: 0.8;
  color: var(--accent);
  font-weight: 600;
  height: 30px;
  transition: transform 0.3s ease;
}
.testimonial-card:hover .quote-mark {
  transform: scale(1.1) translateY(-2px);
}
.testimonial-card .quote {
  font-size: 17px;
  line-height: 1.55;
  color: var(--text);
  flex: 1;
}
.testimonial-meta {
  border-top: 1px solid var(--border);
  padding-top: 18px;
}
.testimonial-meta .name {
  font-weight: 600;
  color: var(--text);
  font-size: 15px;
}
.testimonial-meta .role {
  font-size: 14px;
  color: var(--body);
}
.testimonial-meta .company {
  font-size: 13px;
  color: var(--accent);
  font-weight: 500;
  margin-top: 2px;
}
/* ---------- Stats strip counter ---------- */
.stat-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
/* ---------- Quiz CTA ---------- */
.cta-quiz {
  background: #0F0F0F;
  color: #fff;
  text-align: center;
  border-radius: 0;
}
.cta-quiz .wrap {
  max-width: 760px;
}
.cta-quiz h2 {
  font-family: var(--display);
  font-size: clamp(36px, 4.4vw, 56px);
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 20px;
}
.cta-quiz p {
  font-size: 19px;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 36px;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}
.cta-quiz .tag {
  color: rgba(255, 255, 255, 0.5);
  border-color: rgba(255, 255, 255, 0.15);
}
.cta-quiz .btn-light {
  background: #fff;
  color: #0F0F0F;
  border-color: #fff;
}
.cta-quiz .btn-light:hover {
  background: rgba(255, 255, 255, 0.9);
}
/* ---------- Footer ---------- */
footer {
  background: #ffffff;
  color: var(--footer-link);
  padding: 80px 0 30px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 64px;
}
footer .logo {
  color: var(--text);
}
.footer-tag {
  margin-top: 18px;
  font-size: 15px;
  color: var(--body);
  max-width: 280px;
  line-height: 1.5;
}
.footer-col h4 {
  color: var(--text);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 18px;
  font-weight: 600;
}
.footer-col ul {
  list-style: none;
}
.footer-col li {
  margin-bottom: 10px;
}
.footer-col a {
  font-size: 14px;
  color: var(--body);
  transition: color 0.2s, padding-left 0.2s;
  display: inline-block;
}
.footer-col a:hover {
  color: var(--accent);
  padding-left: 4px;
}
.footer-bottom {
  border-top: 1px solid var(--border);
  padding-top: 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
}
.footer-bottom .copy {
  font-size: 13px;
  color: var(--body);
}
.footer-social {
  display: flex;
  gap: 16px;
}
.footer-social a {
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  transition: all 0.22s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.footer-social a:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  transform: translateY(-2px);
}
/* ---------- Generic content (inner pages) ---------- */
.page-hero {
  padding: 64px 0 48px;
  border-bottom: 1px solid var(--border);
}
.page-hero h1 {
  font-family: var(--display);
  font-size: clamp(48px, 6vw, 84px);
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.03em;
  line-height: 1.04;
  margin: 18px 0 24px;
}
.page-hero p {
  font-size: 19px;
  color: var(--body);
  max-width: 640px;
  line-height: 1.5;
}
/* ---------- Quiz Modal ---------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 15, 15, 0.55);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 24px;
  backdrop-filter: blur(4px);
}
.modal-backdrop.open {
  display: flex;
  animation: fadeIn 0.2s ease;
}
.modal {
  background: var(--bg);
  border-radius: 16px;
  width: 100%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 48px;
  position: relative;
  animation: slideUp 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 34px;
  height: 34px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--text);
  transition: all 0.2s;
}
.modal-close:hover {
  background: var(--text);
  color: #fff;
}
.quiz-progress {
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  margin-bottom: 24px;
  overflow: hidden;
}
.quiz-progress-bar {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  transition: width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.quiz-step-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 14px;
}
.quiz-question {
  font-family: var(--display);
  font-size: 30px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin-bottom: 28px;
}
.quiz-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 32px;
}
.quiz-option {
  padding: 16px 20px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 15px;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: all 0.18s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.quiz-option:hover {
  border-color: var(--accent);
  transform: translateX(4px);
}
.quiz-option.selected {
  border-color: var(--accent);
  background: rgba(30, 136, 229, 0.05);
  color: var(--accent);
}
.quiz-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.quiz-actions .btn {
  flex: 1;
  justify-content: center;
}
.quiz-back {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--body);
}
.quiz-back:hover {
  color: var(--text);
  border-color: var(--text);
  background: transparent;
}
.quiz-result h3 {
  font-family: var(--display);
  font-size: 36px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 14px;
  letter-spacing: -0.02em;
}
.quiz-result-score {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.quiz-result p {
  margin-bottom: 16px;
  line-height: 1.6;
}
.quiz-result-cta {
  margin-top: 28px;
}
/* ---------- Keyframe animations ---------- */
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
@keyframes slideUp {
  from {
    transform: translateY(28px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes slideInRight {
  from {
    transform: translateX(40px);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes scaleIn {
  from {
    transform: scale(0.92);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}
/* ---------- Scroll fade-up ---------- */
.fade-up {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.fade-up.in {
  opacity: 1;
  transform: translateY(0);
}
/* Work grid staggers by column position, not child index — the project count
   is API-driven, so nth-child(1..7) left everything past the 7th at 0ms. */
.work-grid>.fade-up {
  transition-delay: 0ms;
}
.work-grid>.fade-up:nth-child(3n + 2) {
  transition-delay: 60ms;
}
.work-grid>.fade-up:nth-child(3n + 3) {
  transition-delay: 120ms;
}
@media (max-width: 1100px) {

  .work-grid>.fade-up:nth-child(3n + 2),
  .work-grid>.fade-up:nth-child(3n + 3) {
    transition-delay: 0ms;
  }

  .work-grid>.fade-up:nth-child(2n) {
    transition-delay: 60ms;
  }
}
/* Stagger siblings inside common parents */
.stagger>.fade-up:nth-child(1),
.testimonials-grid>.fade-up:nth-child(1),
.products-grid>.fade-up:nth-child(1),
.reels-row>.fade-up:nth-child(1),
.values-grid>.fade-up:nth-child(1),
.team-grid>.fade-up:nth-child(1) {
  transition-delay: 0ms;
}
.stagger>.fade-up:nth-child(2),
.testimonials-grid>.fade-up:nth-child(2),
.products-grid>.fade-up:nth-child(2),
.reels-row>.fade-up:nth-child(2),
.values-grid>.fade-up:nth-child(2),
.team-grid>.fade-up:nth-child(2) {
  transition-delay: 80ms;
}
.stagger>.fade-up:nth-child(3),
.testimonials-grid>.fade-up:nth-child(3),
.products-grid>.fade-up:nth-child(3),
.reels-row>.fade-up:nth-child(3),
.values-grid>.fade-up:nth-child(3),
.team-grid>.fade-up:nth-child(3) {
  transition-delay: 160ms;
}
.stagger>.fade-up:nth-child(4),
.testimonials-grid>.fade-up:nth-child(4),
.products-grid>.fade-up:nth-child(4),
.reels-row>.fade-up:nth-child(4),
.values-grid>.fade-up:nth-child(4),
.team-grid>.fade-up:nth-child(4) {
  transition-delay: 240ms;
}
.stagger>.fade-up:nth-child(5),
.team-grid>.fade-up:nth-child(5) {
  transition-delay: 320ms;
}
.stagger>.fade-up:nth-child(6),
.team-grid>.fade-up:nth-child(6) {
  transition-delay: 400ms;
}
.stagger>.fade-up:nth-child(7) {
  transition-delay: 480ms;
}
/* ---------- Slide-in from sides ---------- */
.fade-left {
  opacity: 0;
  transform: translateX(-28px);
  transition: opacity 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.fade-left.in {
  opacity: 1;
  transform: translateX(0);
}
.fade-right {
  opacity: 0;
  transform: translateX(28px);
  transition: opacity 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.fade-right.in {
  opacity: 1;
  transform: translateX(0);
}
/* ---------- Cursor follower (desktop only) ---------- */
@media (hover: hover) and (pointer: fine) {

  .cursor-dot,
  .cursor-ring {
    position: fixed;
    pointer-events: none;
    border-radius: 50%;
    z-index: 9999;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
  }

  .cursor-dot {
    width: 8px;
    height: 8px;
    background: var(--accent);
    transition: width 0.2s ease, height 0.2s ease, background 0.2s ease, opacity 0.3s ease;
    mix-blend-mode: multiply;
  }

  .cursor-ring {
    width: 36px;
    height: 36px;
    border: 1.5px solid var(--accent);
    opacity: 0.45;
    transition: width 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
      height 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
      opacity 0.3s ease;
  }

  body.cursor-hover .cursor-dot {
    width: 14px;
    height: 14px;
    opacity: 0.7;
  }

  body.cursor-hover .cursor-ring {
    width: 56px;
    height: 56px;
    opacity: 0.2;
  }

  body.cursor-hidden .cursor-dot,
  body.cursor-hidden .cursor-ring {
    opacity: 0;
  }
}
/* ---------- Hero variant: stacked centered ---------- */
body[data-hero="centered"] .hero-grid {
  grid-template-columns: 1fr;
  text-align: center;
  gap: 56px;
}
body[data-hero="centered"] .hero-headline,
body[data-hero="centered"] .hero-sub {
  margin-left: auto;
  margin-right: auto;
}
body[data-hero="centered"] .hero-cta-row,
body[data-hero="centered"] .hero-stats {
  justify-content: center;
}
body[data-hero="centered"] .collage {
  height: 480px;
}
/* Hero variant: editorial (huge type, smaller image) */
body[data-hero="editorial"] .hero-grid {
  grid-template-columns: 1.4fr 1fr;
}
body[data-hero="editorial"] .hero-headline {
  font-size: clamp(56px, 8vw, 96px);
}
body[data-hero="editorial"] .collage {
  height: 520px;
}
/* Services variant: grid */
body[data-services="grid"] .svc-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
}
body[data-services="grid"] .svc-row {
  grid-template-columns: 1fr;
  border-right: 1px solid var(--border);
  align-items: flex-start;
  padding: 36px 28px 40px;
  gap: 16px;
}
body[data-services="grid"] .svc-arrow {
  display: none;
}
body[data-services="grid"] .svc-desc {
  max-width: none;
}
/* Services variant: minimal (no hover fill, just underline) */
body[data-services="minimal"] .svc-row::before {
  display: none;
}
body[data-services="minimal"] .svc-row:hover .svc-num,
body[data-services="minimal"] .svc-row:hover .svc-desc {
  color: inherit;
}
body[data-services="minimal"] .svc-row:hover .svc-title {
  color: var(--accent);
}
body[data-services="minimal"] .svc-row:hover .svc-arrow {
  color: var(--accent);
}
/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .reels-row[style*="repeat(5"] {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  .work-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .work-card--lead {
    grid-column: span 2;
  }

  .work-card--lead .wc-media {
    aspect-ratio: 16 / 9;
  }

  .work-card h3 {
    font-size: 22px;
  }
}
@media (max-width: 700px) {
  .reels-row[style*="repeat(5"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 960px) {
  :root {
    --section-pad: 64px;
  }

  .nav-links {
    display: none;
  }

  .nav-cta {
    display: none;
  }

  .mobile-toggle {
    display: flex;
    flex-direction: column;
  }

  .hero-grid,
  .about-grid {
    grid-template-columns: 1fr;
    gap: 56px;
  }

  .collage {
    height: 460px;
  }

  /* No order swap: leading with the mascot pushed the headline and the CTAs
     below the fold on a phone. Copy first, mascot after. */
  .arkin-hero-wrap {
    height: 340px;
    justify-content: center;
  }

  /* Overlaying cards on a 410px figure at phone width buries the mascot's
     arm and clips the caption - the mobile hero is dense enough already. */
  .hero-run {
    display: none;
  }

  .arkin-hero-img {
    height: 350px;
  }

  .process-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .process-grid::before {
    display: none;
  }

  .work-grid {
    gap: var(--sp-4);
    margin-top: var(--sp-5);
  }

  .wc-media {
    padding: var(--sp-3) var(--sp-3) 0;
  }

  .work-card h3 {
    font-size: 20px;
  }

  .products-grid {
    grid-template-columns: 1fr;
  }

  .reels-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .testimonials-grid {
    grid-template-columns: 1fr;
  }

  .svc-row {
    grid-template-columns: 56px 1fr;
    grid-template-rows: auto auto;
    gap: 4px 16px;
    padding: 28px 0;
  }

  .svc-num {
    grid-row: 1 / 3;
    align-self: start;
    padding-top: 4px;
    font-size: 16px;
  }

  .svc-title {
    font-size: 22px;
    grid-column: 2;
    grid-row: 1;
  }

  .svc-desc {
    grid-column: 2;
    grid-row: 2;
    max-width: 100%;
    font-size: 15px;
  }

  .svc-arrow {
    display: none;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }

  .wrap {
    padding: 0 24px;
  }

  .nav-inner {
    padding: 16px 24px;
  }

  .modal {
    padding: 32px 24px;
  }

  .quiz-question {
    font-size: 24px;
  }
}
@media (max-width: 560px) {
  :root {
    --section-pad: 48px;
  }

  .page-hero {
    padding: 40px 0 32px;
  }

  .work-grid {
    grid-template-columns: 1fr;
  }

  .work-card--lead {
    grid-column: span 1;
  }

  /* Taller ratio: a 16/10 crop on a 320px viewport leaves an unreadable sliver */
  .wc-media,
  .work-card--lead .wc-media {
    aspect-ratio: 4 / 3;
  }

  .work-card-body {
    padding: var(--sp-3);
  }

  .work-card .result {
    -webkit-line-clamp: 3;
  }

  .hero-cta-row {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-cta-row .btn {
    justify-content: center;
  }

  .reels-row {
    grid-template-columns: 1fr 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }
}
/* ================================================================
   PHASE 2 ADDITIONS - images · typewriter · tilt · clips · blogs · Kredoo
   ================================================================ */
/* ---------- Real photo support in .ph ---------- */
.ph[style*="background-image"] {
  background-size: cover;
  background-position: center;
  background-color: #111;
}
.ph[style*="background-image"]::before {
  opacity: 0;
}
.ph[style*="background-image"] .ph-label {
  background: rgba(0, 0, 0, 0.52);
  color: rgba(255, 255, 255, 0.92);
  border-color: rgba(255, 255, 255, 0.18);
  position: relative;
  z-index: 1;
}
/* Ensure img tags inside .ph fill the container */
.ph>img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}
/* ---------- Typewriter cursor ---------- */
/* Hero headline - lock typewriter word to its own line */
.hero-headline em {
  white-space: nowrap;
  font-style: normal;
  font-weight: 800;
  position: relative;
}
/* Collage cell staggered clip-reveal (above fold, JS triggers immediately) */
.collage .c1.clip-reveal {
  transition-delay: 0.10s;
}
.collage .c2.clip-reveal {
  transition-delay: 0.22s;
}
.collage .c3.clip-reveal {
  transition-delay: 0.34s;
}
.collage .c4.clip-reveal {
  transition-delay: 0.42s;
}
.collage .c5.clip-reveal {
  transition-delay: 0.50s;
}
.collage .c6.clip-reveal {
  transition-delay: 0.62s;
}
.collage .c7.clip-reveal {
  transition-delay: 0.74s;
}
/* Reel media background image support (same as .ph) */
.reel-media[style*="background-image"] {
  background-size: cover;
  background-position: center;
  background-color: #111;
}
.reel-media[style*="background-image"]::before {
  opacity: 0;
}
.product-card {
  position: relative;
  z-index: 1;
}
.product-card:hover {
  transform: translateY(-10px) !important;
  box-shadow: 0 28px 56px -10px rgba(15, 15, 15, 0.2) !important;
  z-index: 2;
}
.testimonial-card {
  position: relative;
  z-index: 1;
}
.testimonial-card:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 24px 52px -10px rgba(15, 15, 15, 0.15) !important;
  z-index: 2;
}
.reel-card {
  position: relative;
  z-index: 1;
}
.reel-card:hover {
  z-index: 2;
}
.reel-card:hover .reel-media {
  transform: translateY(-8px);
  box-shadow: 0 24px 52px -8px rgba(15, 15, 15, 0.22);
}
/* Kredoo iframe card */
.kredoo-iframe-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.4);
}
.kredoo-iframe-wrap {
  position: relative;
  height: 480px;
  overflow: hidden;
}
.kredoo-iframe {
  width: 167%;
  height: 800px;
  border: none;
  display: block;
  transform: scale(0.6);
  transform-origin: top left;
  pointer-events: none;
}
.kredoo-iframe-overlay {
  position: absolute;
  inset: 0;
  cursor: pointer;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 20px;
  background: linear-gradient(to top, rgba(5, 10, 30, 0.75) 0%, transparent 55%);
  text-decoration: none;
}
.kredoo-visit-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  color: var(--accent);
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.2s ease;
}
.kredoo-iframe-overlay:hover .kredoo-visit-btn {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}
/* Kredoo blog iframe embed card */
.kredoo-blog-iframe-card {
  border-radius: 16px;
  overflow: hidden;
  margin: 48px 0;
  border: 1px solid var(--border);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}
.kredoo-blog-iframe-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: #f0f0f0;
  border-bottom: 1px solid var(--border);
}
.kredoo-blog-iframe-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}
.kredoo-blog-iframe-dot:nth-child(1) {
  background: #FF5F57;
}
.kredoo-blog-iframe-dot:nth-child(2) {
  background: #FEBC2E;
}
.kredoo-blog-iframe-dot:nth-child(3) {
  background: #28C840;
}
.kredoo-blog-iframe-url {
  flex: 1;
  margin-left: 8px;
  font-size: 12px;
  color: #666;
  font-family: ui-monospace, Menlo, monospace;
}
.kredoo-blog-iframe-wrap {
  position: relative;
  height: 420px;
  overflow: hidden;
}
.kredoo-blog-iframe {
  width: 167%;
  height: 700px;
  border: none;
  display: block;
  transform: scale(0.6);
  transform-origin: top left;
  pointer-events: none;
}
.kredoo-blog-iframe-link {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 20px;
  background: linear-gradient(to top, rgba(15, 15, 15, 0.6) 0%, transparent 60%);
  text-decoration: none;
}
.kredoo-blog-visit-btn {
  background: var(--accent);
  color: #fff;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  transition: transform 0.2s, box-shadow 0.2s;
}
.kredoo-blog-iframe-link:hover .kredoo-blog-visit-btn {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(30, 136, 229, 0.4);
}
.tw-cursor {
  display: inline-block;
  width: 0.06em;
  height: 0.82em;
  background: var(--accent);
  vertical-align: middle;
  border-radius: 1px;
  margin-left: 3px;
  animation: tw-blink 0.72s step-end infinite;
}
@keyframes tw-blink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}
/* ---------- Clip-path image reveal ---------- */
.clip-reveal {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1s cubic-bezier(0.77, 0, 0.175, 1);
}
.clip-reveal.in {
  clip-path: inset(0 0% 0 0);
}
/* ---------- Instagram reel grid ---------- */
/* ---------- Blog list (horizontal) ---------- */
.blog-list {
  margin-top: 56px;
}
.blog-list-item {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 40px;
  align-items: center;
  padding: 44px 0;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
}
.blog-list-item:first-child {
  border-top: 1px solid var(--border);
}
.blog-list-item .cover {
  aspect-ratio: 3/2;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
}
.blog-list-item .cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.blog-list-item:hover .cover img {
  transform: scale(1.05);
}
/* ---------- Article page (/learn/:slug) ----------
   Hero band, then a sticky table of contents beside the prose column. */
.article-hero {
  padding: 56px 0 40px;
  border-bottom: 1px solid var(--border);
  /* Dotted field, same idea as the reference hero. */
  background-image: radial-gradient(rgba(15, 23, 42, 0.06) 1px, transparent 1px);
  background-size: 24px 24px;
}
.article-back {
  display: inline-block;
  margin-bottom: 28px;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
}
.article-back .arrow {
  display: inline-block;
  transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.article-back:hover .arrow {
  transform: translateX(-4px);
}
.article-head {
  max-width: 900px;
}
.article-head h1 {
  font-family: var(--sans);
  font-size: clamp(34px, 4.4vw, 54px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--text);
  margin: 18px 0 0;
}
.article-meta {
  margin-top: 20px;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #64748b;
}
.article-standfirst {
  margin-top: 20px;
  max-width: 700px;
  font-size: 20px;
  line-height: 1.6;
  color: var(--body);
}
.article {
  padding: 56px 0 96px;
}
.article-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}
.toc {
  position: sticky;
  top: var(--nav-offset);
  max-height: calc(100vh - var(--nav-offset) - 32px);
  overflow-y: auto;
  border-left: 2px solid var(--border);
  padding-left: 18px;
  font-size: 13px;
}
.toc-label {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #64748b;
  margin-bottom: 14px;
}
.toc ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 2px;
}
.toc a {
  color: var(--body);
  text-decoration: none;
  line-height: 1.4;
  display: block;
  /* Negative left margin pulls the active marker onto the rail itself. */
  margin-left: -20px;
  padding: 5px 0 5px 18px;
  border-left: 2px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.toc a:hover {
  color: var(--accent);
}
/* Section currently being read. */
.toc a.active {
  color: var(--accent);
  font-weight: 600;
  border-left-color: var(--accent);
}
.article-main {
  min-width: 0;
}
.article-cover {
  margin-bottom: 40px;
  border-radius: 20px;
  overflow: hidden;
}
.article-cover img {
  width: 100%;
  display: block;
}
.article-foot {
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
}
/* Long-form body copy. Sized for reading, not for matching the UI scale. */
.prose {
  max-width: 700px;
  font-size: 19px;
  line-height: 1.75;
  color: var(--text);
}
.prose > * + * {
  margin-top: 24px;
}
.prose h2 {
  font-family: var(--sans);
  font-size: clamp(24px, 2.6vw, 30px);
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: -0.025em;
  margin-top: 56px;
  /* Clears the fixed navbar when jumped to from the contents list. */
  scroll-margin-top: var(--nav-offset);
}
.prose h3 {
  font-family: var(--sans);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.3;
  margin-top: 40px;
  scroll-margin-top: var(--nav-offset);
}
.prose ul,
.prose ol {
  padding-left: 24px;
}
.prose li + li {
  margin-top: 10px;
}
.prose a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.prose img {
  max-width: 100%;
  height: auto;
  border-radius: 14px;
}
.prose blockquote {
  border-left: 3px solid var(--accent);
  background: var(--card);
  border-radius: 14px;
  padding: 20px 22px;
  color: var(--body);
}
.prose pre {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px;
  overflow-x: auto;
  font-size: 15px;
  line-height: 1.6;
}
.prose code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 0.92em;
}
@media (max-width: 1024px) {
  .article-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  /* Sticky sidebar makes no sense once it is stacked above the body. */
  .toc {
    position: static;
    border-left: none;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 20px 0;
  }
}
@media (max-width: 700px) {
  .article-hero {
    padding: 36px 0 32px;
  }
  .prose {
    font-size: 17px;
  }
  .article-standfirst {
    font-size: 18px;
  }
}
/* ---------- Article cards (Learn page) ----------
   Editorial card grid: category pill, monospace meta line, bold headline,
   excerpt, read link. No cover image, so CMS posts and the older hand-built
   articles present identically. */
.post-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 56px;
}
.post-card {
  display: flex;
  flex-direction: column;
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02);
  text-decoration: none;
  transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    border-color 0.25s ease, box-shadow 0.25s ease;
}
.post-card:hover {
  transform: translateY(-4px);
  border-color: rgba(30, 136, 229, 0.4);
  box-shadow: 0 22px 48px -20px rgba(10, 14, 26, 0.3);
}
.post-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.post-card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.post-tag {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #1461a0;
  background: rgba(30, 136, 229, 0.12);
  padding: 4px 8px;
  border-radius: 999px;
}
.post-dates {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #64748b;
}
.post-card h3 {
  font-family: var(--sans);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.28;
  letter-spacing: -0.025em;
  color: var(--text);
  margin-bottom: 12px;
  transition: color 0.2s ease;
}
.post-card:hover h3 {
  color: var(--accent);
}
.post-card p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--body);
  margin-bottom: 22px;
}
.post-read {
  margin-top: auto;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.post-card:hover .post-read {
  color: var(--accent);
}
.post-read .arrow {
  transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.post-card:hover .post-read .arrow {
  transform: translateX(4px);
}
@media (max-width: 1024px) {
  .post-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 700px) {
  .post-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .post-card {
    padding: 24px;
  }
  /* Nudge the summary up on small screens; 14.5px reads tight on a phone. */
  .post-card p {
    font-size: 15.5px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .post-card,
  .post-read .arrow {
    transition: none;
  }
  .post-card:hover {
    transform: none;
  }
}
/* Shown when a post has no cover image yet, so the two-column layout still
   holds. Matches the tile used for projects on /work. */
.blog-tile {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, var(--text) 0%, #2b2b2b 100%);
  color: #fff;
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.blog-tile span {
  font-family: var(--display);
  font-size: 56px;
  font-weight: 700;
  line-height: 1;
}
.blog-tile em {
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.6;
}
.blog-list-item:hover .blog-tile {
  transform: scale(1.05);
}
.blog-list-item .meta {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 10px;
}
.blog-list-item h3 {
  font-family: var(--display);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin-bottom: 12px;
  transition: color 0.2s;
}
.blog-list-item:hover h3 {
  color: var(--accent);
}
.blog-list-item .excerpt {
  font-size: 15px;
  line-height: 1.6;
  color: var(--body);
  margin-bottom: 18px;
}
@media (max-width: 760px) {
  .blog-list-item {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}
/* ---------- Blog article page ---------- */
.blog-wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 40px;
}
.blog-hero-img {
  width: 100%;
  aspect-ratio: 16/7;
  overflow: hidden;
  border-radius: 16px;
  margin: 40px 0 56px;
}
.blog-hero-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.blog-meta-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.blog-pill {
  background: rgba(30, 136, 229, 0.1);
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 999px;
}
.blog-byline {
  font-size: 13px;
  color: var(--muted);
}
.blog-dot {
  width: 3px;
  height: 3px;
  background: var(--muted);
  border-radius: 50%;
  display: inline-block;
}
.blog-article-title {
  font-family: var(--display);
  font-size: clamp(36px, 5vw, 58px);
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.025em;
  line-height: 1.07;
  margin-bottom: 24px;
}
.blog-lede {
  font-size: 20px;
  line-height: 1.6;
  color: var(--body);
  margin-bottom: 48px;
  padding-left: 20px;
  border-left: 3px solid var(--accent);
}
.blog-body h2 {
  font-family: var(--display);
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.02em;
  margin: 52px 0 16px;
  line-height: 1.15;
}
.blog-body h3 {
  font-family: var(--sans);
  font-size: 19px;
  font-weight: 700;
  color: var(--text);
  margin: 36px 0 12px;
}
.blog-body p {
  font-size: 17px;
  line-height: 1.8;
  color: #3C3C3C;
  margin-bottom: 22px;
}
.blog-body ul,
.blog-body ol {
  padding-left: 24px;
  margin-bottom: 24px;
}
.blog-body li {
  font-size: 17px;
  line-height: 1.75;
  color: #3C3C3C;
  margin-bottom: 10px;
}
.blog-callout {
  background: rgba(30, 136, 229, 0.06);
  border-left: 3px solid var(--accent);
  border-radius: 0 10px 10px 0;
  padding: 22px 28px;
  margin: 36px 0;
}
.blog-callout p {
  margin: 0;
  font-size: 16px;
  color: var(--text);
  line-height: 1.65;
}
.blog-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 48px 0;
}
.blog-share {
  background: var(--card);
  border-radius: 16px;
  padding: 40px;
  text-align: center;
  margin-top: 64px;
}
.blog-share h3 {
  font-family: var(--display);
  font-size: 28px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 10px;
}
.blog-share p {
  font-size: 16px;
  margin-bottom: 24px;
}
@media (max-width: 760px) {
  .blog-wrap {
    padding: 0 20px;
  }

  .blog-lede {
    font-size: 18px;
  }
}
/* ---------- Kredoo flagship section ---------- */
.kredoo-section {
  background: #0A0A0A;
  position: relative;
  overflow: hidden;
}
.kredoo-section::before {
  content: "";
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, transparent 70%);
  top: -200px;
  right: -100px;
  pointer-events: none;
}
.kredoo-section::after {
  content: "";
  position: absolute;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(96, 165, 250, 0.08) 0%, transparent 70%);
  bottom: -100px;
  left: -50px;
  pointer-events: none;
}
.kredoo-flagship {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.kredoo-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 20px;
}
.kredoo-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ADE80;
  animation: pulse-green 2s ease infinite;
}
@keyframes pulse-green {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.6;
    transform: scale(1.3);
  }
}
.kredoo-wordmark {
  font-family: var(--display);
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 10px;
}
.kredoo-wordmark span {
  color: #93C5FD;
  font-style: italic;
}
.kredoo-tagline {
  font-size: 19px;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 32px;
  line-height: 1.5;
  max-width: 440px;
}
.kredoo-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 36px;
}
.kredoo-feat {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 18px 20px;
  transition: background 0.25s, border-color 0.25s;
}
.kredoo-feat:hover {
  background: rgba(255, 255, 255, 0.13);
  border-color: rgba(255, 255, 255, 0.25);
}
.kredoo-feat-icon {
  font-size: 20px;
  margin-bottom: 8px;
}
.kredoo-feat h4 {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 4px;
}
.kredoo-feat p {
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}
.kredoo-stats {
  display: flex;
  gap: 28px;
  margin-bottom: 32px;
  padding: 20px 24px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.kredoo-stat {
  text-align: center;
  flex: 1;
}
.kredoo-stat-num {
  font-family: var(--display);
  font-size: 36px;
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.03em;
  line-height: 1;
}
.kredoo-stat-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 4px;
}
.kredoo-cta-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.kredoo-cta-row .btn-white {
  background: #fff;
  color: var(--accent);
  border: 1px solid #fff;
  padding: 14px 24px;
  border-radius: var(--radius-btn);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.kredoo-cta-row .btn-white:hover {
  background: rgba(255, 255, 255, 0.9);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25);
}
.kredoo-cta-row .btn-outline-white {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.35);
  padding: 14px 24px;
  border-radius: var(--radius-btn);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.kredoo-cta-row .btn-outline-white:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.6);
  transform: translateY(-2px);
}
/* Kredoo CSS dashboard mockup */
.kredoo-mockup {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.35);
}
.kredoo-mockup-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.kredoo-mockup-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}
.kd1 {
  background: #FF5F57;
}
.kd2 {
  background: #FEBC2E;
}
.kd3 {
  background: #28C840;
}
.kredoo-mockup-title {
  flex: 1;
  margin-left: 8px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
}
.kredoo-pipeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 16px;
}
.kredoo-col-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 8px;
  padding-left: 2px;
}
.kl-card {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 6px;
}
.kl-name {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 2px;
}
.kl-co {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 5px;
}
.kl-tag {
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  display: inline-block;
}
.kt-new {
  background: rgba(96, 165, 250, 0.2);
  color: #93C5FD;
}
.kt-hot {
  background: rgba(248, 113, 113, 0.2);
  color: #FCA5A5;
}
.kt-warm {
  background: rgba(251, 191, 36, 0.2);
  color: #FCD34D;
}
.kt-booked {
  background: rgba(74, 222, 128, 0.2);
  color: #86EFAC;
}
.kredoo-notif {
  margin: 0 16px 16px;
  background: rgba(74, 222, 128, 0.1);
  border: 1px solid rgba(74, 222, 128, 0.25);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: #86EFAC;
}
.kredoo-notif-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4ADE80;
  flex-shrink: 0;
  animation: pulse-green 2s ease infinite;
}
@media (max-width: 960px) {
  .kredoo-flagship {
    grid-template-columns: 1fr;
    gap: 48px;
  }

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

  .kredoo-stats {
    flex-direction: column;
    gap: 12px;
  }
}
/* ── Instagram Reels Premium Section ─────────────────────── */
.ig-section {
  background: #0A0A0A;
  padding: 100px 0;
}
.ig-section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 56px;
}
.tag-light {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.ig-embeds-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  align-items: start;
}
.ig-embed-card {
  border-radius: 14px;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.ig-embed-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
}
.ig-embed-card .instagram-media {
  border-radius: 12px !important;
  overflow: hidden;
}
.ig-follow-row {
  margin-top: 52px;
  text-align: center;
}
.ig-follow-btn {
  color: rgba(255, 255, 255, 0.75) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  font-size: 15px;
  padding: 14px 32px;
}
.ig-follow-btn:hover {
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.6) !important;
  background: rgba(255, 255, 255, 0.06) !important;
}
@media (max-width: 1200px) {
  .ig-embeds-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .ig-embed-card:nth-child(4),
  .ig-embed-card:nth-child(5) {
    display: none;
  }
}
@media (max-width: 720px) {
  .ig-embeds-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .ig-embed-card:nth-child(3) {
    display: none;
  }
}
/* ── Reel iframe autoplay embeds ──────────────────────────── */
.reel-media
.reel-media
.reel-media
/* ── Hero animations - page-specific ─────────────────────── */
.hero-tags-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 32px;
}
.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--border);
  font-size: 13px;
  font-weight: 500;
  color: var(--body);
  animation: heroTagFloat 5s ease-in-out infinite;
}
.hero-tag .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}
.hero-tag:nth-child(2) {
  animation-delay: 0.5s;
}
.hero-tag:nth-child(3) {
  animation-delay: 1.0s;
}
.hero-tag:nth-child(4) {
  animation-delay: 1.5s;
}
.hero-tag:nth-child(5) {
  animation-delay: 2.0s;
}
.hero-tag:nth-child(6) {
  animation-delay: 2.5s;
}
@keyframes heroTagFloat {

  0%,
  100% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-5px);
  }
}
.hero-stat-row {
  display: flex;
  gap: 48px;
  margin-top: 36px;
  flex-wrap: wrap;
}
.hero-stat-item {
  display: flex;
  flex-direction: column;
}
.hero-stat-num {
  font-family: var(--display);
  font-size: 52px;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
  letter-spacing: -0.03em;
}
.hero-stat-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--body);
  margin-top: 6px;
  font-weight: 600;
}
.hero-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
  align-items: center;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 12px;
  background: var(--card);
  border: 1px solid var(--border);
  font-size: 14px;
  color: var(--text);
  animation: heroTagFloat 6s ease-in-out infinite;
}
.hero-badge .badge-icon {
  font-size: 18px;
}
.hero-badge .badge-sub {
  font-size: 11px;
  color: var(--body);
  display: block;
  margin-top: 1px;
}
.hero-badge strong {
  font-weight: 600;
  display: block;
  line-height: 1;
}
.hero-badge:nth-child(2) {
  animation-delay: 0.7s;
}
.hero-badge:nth-child(3) {
  animation-delay: 1.4s;
}
/* contact page response badge */
.response-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-top: 32px;
  font-size: 14px;
  color: var(--text);
  animation: heroTagFloat 5s ease-in-out infinite;
}
.response-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  animation: pulse-green 2s ease infinite;
  flex-shrink: 0;
}
/* ── Kredoo logo SVG ──────────────────────────────────────── */
.kredoo-logo-svg {
  height: 64px;
  width: auto;
  display: block;
  margin-bottom: 20px;
}
/* ── Generic Arkin character - reused across pages ──────── */
.arkin-char-wrap {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: visible;
}
.arkin-char {
  width: auto;
  object-fit: contain;
  object-position: bottom center;
  filter: drop-shadow(0 20px 36px rgba(0, 0, 0, 0.13));
  animation: arkinFloat 5s ease-in-out infinite;
}
.arkin-char:hover {
  filter: drop-shadow(0 28px 44px rgba(0, 0, 0, 0.18));
}
/* Body of a CMS-authored article (/learn/:slug). The admin writes basic HTML,
   so style the raw tags rather than expecting utility classes. */
.post-body { font-size: 18px; line-height: 1.75; color: var(--text); }
.post-body > * + * { margin-top: 22px; }
.post-body h2 { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; margin-top: 44px; }
.post-body h3 { font-size: 22px; font-weight: 700; margin-top: 34px; }
.post-body ul,
.post-body ol { padding-left: 24px; }
.post-body li + li { margin-top: 10px; }
.post-body img { max-width: 100%; height: auto; border-radius: 14px; }
.post-body a { color: var(--brand, #1e88e5); text-decoration: underline; }
.post-body blockquote {
  border-left: 3px solid var(--border);
  padding-left: 20px;
  color: var(--muted);
  font-style: italic;
}
.post-body pre {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px;
  overflow-x: auto;
  font-size: 15px;
}
.post-body code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.92em; }
/* ---------- Reduced motion ----------
   Honour the OS setting: drop transforms and scroll reveals, but keep the
   non-motion hover/focus signals so the cards stay legible as interactive. */
@media (prefers-reduced-motion: reduce) {

  .work-card,
  .work-card-shot,
  .work-card-tile,
  .wc-cta .arrow {
    transition-duration: 0.01ms !important;
  }

  .work-card:hover,
  .work-card:focus-visible,
  .work-card:active {
    transform: none;
  }

  .work-card:hover .work-card-shot,
  .work-card:hover .work-card-tile {
    transform: none;
  }

  .work-card:hover,
  .work-card:focus-visible {
    border-color: var(--accent);
    box-shadow: 0 14px 32px -14px rgba(15, 15, 15, 0.16);
  }

  .fade-up,
  .fade-left,
  .fade-right {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* Sequences must land on their COMPLETED state, not their unlit start -
     killing the transition alone would leave grey numbers and undrawn lines. */
  .process-grid::before,
  .kmod-journey::before {
    transform: scaleX(1) !important;
    transition: none !important;
  }

  .process-num,
  .kmod-journey .kj-num {
    transition: none !important;
    transition-delay: 0ms !important;
  }

  .process-num {
    color: var(--accent) !important;
  }

  .kmod-journey .kj-num {
    color: var(--white) !important;
    background: var(--accent) !important;
    border-color: var(--accent) !important;
  }

  .arkin-hero-img,
  .arkin-char,
  .arkin-glow,
  .arkin-svc-img,
  .tool-logo {
    animation: none !important;
  }

  /* These reveal via a keyframe animation, not a transition, so the
     transition overrides above don't reach them - without this the run
     still staggers in for someone who asked for no motion. */
  .hrun-step,
  .hrun-foot {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}
/* ---------- Mobile consistency pass ----------
   Three things were inconsistent across pages at phone widths: micro-labels
   dropped to 9-11px, several links and chips sat under the 44px touch
   minimum, and nothing guaranteed content stayed inside the viewport. */
@media (max-width: 700px) {

  /* Nothing may exceed the viewport, whatever a child declares */
  html,
  body {
    overflow-x: hidden;
  }

  /* Floor every micro-label at 12px. Uppercase tracking at 10px is
     unreadable on a phone. */
  .tag,
  .work-card .industry,
  .svc-card .svc-eyebrow,
  .case-row .industry-tag,
  .hero-badge .badge-sub,
  .reel-cat,
  .reel-thumb-cat,
  .post-tag,
  .kmod-role,
  .kmod-journey em,
  .proof-label,
  .kmod-proof-label,
  .work-card-tile em,
  .case-tile em,
  .product-tile em {
    font-size: 12px;
  }

  .kmod-journey strong,
  .hrun-body b {
    font-size: 14px;
  }

  /* Touch minimum. Inline text links get a padded hit area rather than a
     bigger font, so the layout doesn't shift. */
  .link-arrow,
  .svc-card-cta,
  .svc-engage-quiz,
  .wc-cta {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .filter-chip {
    min-height: 44px;
    padding: 10px 18px;
  }

  .mobile-toggle,
  .nav-sidebar-close {
    min-width: 44px;
    min-height: 44px;
  }

  .footer-social a,
  .team-social a {
    width: 44px;
    height: 44px;
  }

  /* Buttons already clear 44px, but stretch them full width so the two CTAs
     in a row stop wrapping into uneven halves. */
  .hero-cta-row .btn,
  .kmod-cta .btn,
  .svc-engage-cta .btn {
    width: 100%;
    justify-content: center;
  }

  .btn-demo .play {
    font-size: 12px;
  }

  .kredoo-mockup-title {
    font-size: 12px;
  }

  /* Every button clears the touch minimum, not just the ones in CTA rows */
  .btn {
    min-height: 44px;
  }

  /* Higher-specificity holdouts that the list above could not reach */
  .reel-card .reel-cat,
  .kmod-journey .kj-num,
  .hero-stats,
  .hero-stats span {
    font-size: 12px;
  }

  /* Footer and nav lists are the densest tap clusters on the site */
  .footer-col a,
  .footer-col li,
  .nav-sidebar-links a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}
/* ---------- Landing page (/ai-automation-company-hyderabad) ---------- */
.lp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 48px;
}
.lp-card {
  display: flex;
  flex-direction: column;
  padding: 28px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 20px;
}
.lp-card h3 {
  font-family: var(--sans);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: 12px;
}
.lp-card p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--body);
  margin-bottom: 20px;
}
.lp-proof {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--text);
  font-weight: 600;
}
.lp-proof-label {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #1461a0;
  background: rgba(30, 136, 229, 0.12);
  padding: 3px 8px;
  border-radius: 999px;
  margin-right: 10px;
}
.lp-steps {
  display: grid;
  gap: 20px;
  margin-top: 48px;
}
.lp-step {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 20px;
  align-items: start;
  padding: 24px 0;
  border-bottom: 1px solid var(--border);
}
.lp-step:last-child { border-bottom: none; }
.lp-step-num {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 13px;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: 0.08em;
}
.lp-step h3 {
  font-family: var(--sans);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: 8px;
}
.lp-step p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--body);
  max-width: 680px;
}
.lp-faq {
  margin-top: 40px;
  max-width: 820px;
}
.lp-faq-item {
  border-bottom: 1px solid var(--border);
  padding: 4px 0;
}
.lp-faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 20px 36px 20px 0;
  position: relative;
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}
.lp-faq-item summary::-webkit-details-marker { display: none; }
.lp-faq-item summary::after {
  content: "+";
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  font-weight: 400;
  color: var(--accent);
  transition: transform 0.2s ease;
}
.lp-faq-item[open] summary::after {
  content: "−";
}
.lp-faq-item summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}
.lp-faq-item p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--body);
  padding: 0 40px 22px 0;
  max-width: 720px;
}
@media (max-width: 1024px) {
  .lp-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .lp-grid { grid-template-columns: 1fr; }
  .lp-card { padding: 24px; }
  .lp-step { grid-template-columns: 1fr; gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-faq-item summary::after { transition: none; }
}
/* Next-step links closing every article. Sits inside the prose column so it
   reads as part of the piece rather than as a footer widget. */
.article-next {
  margin-top: 48px;
  padding: 26px 28px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  max-width: 700px;
}
.article-next-label {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #64748b;
  margin-bottom: 16px;
}
.article-next ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}
.article-next li {
  font-size: 15px;
  line-height: 1.55;
  color: var(--body);
}
.article-next a {
  color: var(--accent);
  font-weight: 700;
  text-decoration: none;
}
.article-next a:hover { text-decoration: underline; }
/* Links the linker adds inside the prose. */
.prose strong a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (max-width: 700px) {
  .article-next { padding: 22px 20px; }
}
/* Suggestion bar for visitors whose timezone is not India. The navbar is
   sticky rather than fixed, so this sits in normal flow directly beneath it
   and needs no offset of its own. It scrolls away while the navbar stays. */
.region-hint {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  padding: 12px 56px 12px 20px;
  background: var(--text);
  color: rgba(255, 255, 255, 0.82);
  font-size: 14.5px;
  line-height: 1.45;
  text-align: center;
}
.region-hint-cta {
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}
.region-hint-cta:hover { color: var(--accent); }
.region-hint-close {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: 0;
  color: rgba(255, 255, 255, 0.55);
  font-size: 15px;
  line-height: 1;
  padding: 6px;
  cursor: pointer;
}
.region-hint-close:hover { color: #fff; }
@media (max-width: 640px) {
  .region-hint { font-size: 13.5px; padding: 11px 48px 11px 16px; gap: 8px; }
}
/* Rows that explain rather than navigate. .svc-row carries cursor:pointer and
   a hover treatment, which on a plain div promises a click that never happens. */
.svc-row.is-static { cursor: default; }
.svc-row.is-static:hover::before { transform: translateX(-100%); }
.svc-row.is-static:hover .svc-num,
.svc-row.is-static:hover .svc-title,
.svc-row.is-static:hover .svc-desc { color: inherit; }
.svc-row.is-static .svc-num { color: var(--accent); }
.svc-row.is-static .svc-title { color: var(--text); }
/* Where a clickable row leads, shown inside the row rather than as a nested
   anchor, which would be invalid inside the row's own link. */
.svc-proof {
  display: block;
  margin-top: 8px;
  color: var(--accent);
  font-weight: 500;
  font-size: 14px;
}
.svc-row:hover .svc-proof { color: inherit; }
/* ===== Reel cards (homepage + /learn) =====
   A facade over Instagram, not an embed: our poster, our play control, one
   link out. Nothing third-party loads until the visitor chooses to go.
   Posters are re-hosted by scripts/fetch-reel-posters.mjs because the
   Instagram CDN signs its URLs with an expiry. */
.reel-card-clean { display: flex; flex-direction: column; gap: 14px; }
.reel-thumb {
  position: relative;
  aspect-ratio: 9 / 16;            /* reserved up front so nothing shifts */
  border-radius: var(--radius-card-lg);
  overflow: hidden;
  background: #E8EEF8;
  transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              box-shadow 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.reel-card-clean:hover .reel-thumb {
  transform: translateY(-6px);
  box-shadow: 0 20px 48px -8px rgba(15, 15, 15, 0.18);
}
.reel-thumb-img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Keeps the category chip and the caption legible over any cover. */
.reel-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10,10,10,0.72) 0%, rgba(10,10,10,0.18) 45%, transparent 70%);
  border-radius: inherit;
  z-index: 1;
}
/* Only shown when a poster has not been fetched yet. */
.reel-thumb-bg {
  position: absolute; inset: 0; z-index: 0;
  background-image: repeating-linear-gradient(135deg,
    rgba(15,15,15,0.04) 0px, rgba(15,15,15,0.04) 1px, transparent 1px, transparent 9px);
}
.reel-thumb-cat {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: #fff; background: rgba(30, 136, 229, 0.9);
  padding: 4px 10px; border-radius: 999px;
}
.reel-thumb-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2;
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(255,255,255,0.94); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.25s cubic-bezier(0.25,0.46,0.45,0.94), box-shadow 0.25s ease, background 0.25s ease;
}
/* The triangle is optically heavy on its left edge; nudge it back to centre. */
.reel-thumb-play svg { transform: translateX(1px); }
.reel-card-clean:hover .reel-thumb-play {
  transform: translate(-50%, -50%) scale(1.12);
  box-shadow: 0 8px 28px rgba(30, 136, 229, 0.28);
  background: #fff;
}
.reel-thumb-ig {
  position: absolute; bottom: 14px; left: 14px; right: 14px; z-index: 2;
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 500; color: rgba(255,255,255,0.85);
}
.reel-thumb-ig svg { flex-shrink: 0; opacity: 0.85; }
.reel-card-clean .reel-cat {
  font-size: 11px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent);
}
.reel-card-clean h3 {
  font-family: var(--sans); font-size: 15px; font-weight: 600;
  line-height: 1.35; color: var(--text);
  transition: color 0.2s ease;
}
.reel-card-clean:hover h3 { color: var(--accent); }
/* The whole card is one link, so the ring belongs on the card. */
.reel-card-clean:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: var(--radius-card-lg);
}
@media (max-width: 900px) { .reels-row { grid-template-columns: repeat(2, 1fr); gap: 18px; } }
@media (max-width: 520px) { .reels-row { grid-template-columns: 1fr; gap: 22px; } }
@media (prefers-reduced-motion: reduce) {
  .reel-thumb, .reel-thumb-play, .reel-card-clean h3 { transition: none; }
  .reel-card-clean:hover .reel-thumb { transform: none; }
  .reel-card-clean:hover .reel-thumb-play { transform: translate(-50%, -50%); }
}