/* ==========================================================================
   PRIME INNOVATIONS — Design System & Site Styles
   ========================================================================== */

/* ---- Design Tokens ---- */
:root {
  /* Brand colors (sampled from logo) */
  --c-black: #191a1c;
  --c-orange: #f5660a;
  --c-orange-light: #ff8a3d;
  --c-orange-surface: #c14e0d; /* muted — for large fills, so it doesn't fight with text */
  --c-blue: #2072f2;
  --c-blue-light: #5b9bff;

  /* Surfaces */
  --bg-base: #0a0b0d;
  --bg-surface: #141519;
  --bg-surface-2: #1c1e24;
  --bg-surface-3: #24262e;
  --border-subtle: rgba(244, 243, 239, 0.08);
  --border-strong: rgba(244, 243, 239, 0.16);

  /* Text */
  --text-primary: #f4f3ef;
  --text-secondary: #a8a9b3;
  --text-tertiary: #6e7079;
  --text-on-accent: #0a0b0d;

  /* Semantic */
  --success: #34d399;
  --error: #f87171;

  /* Gradient */
  --gradient-brand: linear-gradient(135deg, var(--c-orange) 0%, var(--c-blue) 100%);

  /* Typography */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Sora', system-ui, sans-serif;
  --font-accent: 'Manrope', system-ui, sans-serif;

  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-xl: 1.75rem;
  --fs-2xl: 2.25rem;
  --fs-3xl: 2.75rem;
  --fs-4xl: 3.5rem;
  --fs-5xl: 4.25rem;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --space-11: 168px;
  --space-12: 220px;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-full: 999px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 400ms;

  /* Layout */
  --container-max: 1240px;
  --header-h: 84px;

  /* Z-index scale */
  --z-header: 100;
  --z-mobile-menu: 200;
  --z-floater: 150;
  --z-toast: 300;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.6;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
}

img, picture, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
ul, ol { list-style: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

::selection { background: var(--c-orange); color: var(--text-on-accent); }

:focus-visible {
  outline: 2px solid var(--c-blue-light);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---- Layout helpers ---- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

.section { padding-block: var(--space-9); }
.section-tight { padding-block: var(--space-7); }
.section-lg { padding-block: var(--space-11); }

@media (max-width: 640px) {
  .section { padding-block: var(--space-7); }
  .section-lg { padding-block: var(--space-9); }
  .container { padding-inline: var(--space-4); }
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-orange-light);
  margin-bottom: var(--space-4);
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--gradient-brand);
  border-radius: 2px;
}

.section-head { max-width: 720px; margin-bottom: var(--space-8); }
.section-head.center { margin-inline: auto; text-align: center; }

h2.section-title { font-size: clamp(1.8rem, 3.4vw, var(--fs-3xl)); }
p.section-lead {
  color: var(--text-secondary);
  font-size: var(--fs-md);
  margin-top: var(--space-4);
}

.text-accent {
  font-family: var(--font-accent);
  font-style: normal;
  font-weight: 400;
}

/* Editorial statement voice — reserved for page-level statements (hero, CTA),
   not functional UI headings, so the two type voices stay distinct. */
.serif-display {
  font-family: var(--font-accent);
  font-style: normal;
  font-weight: 400;
  letter-spacing: -0.01em;
}

.grad-text {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: 0 var(--space-6);
  border-radius: var(--radius-full);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-sm);
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
  touch-action: manipulation;
}
.btn:active { transform: scale(0.97); }

.btn-primary {
  background: var(--c-orange);
  color: #100b06;
  box-shadow: 0 8px 24px -8px rgba(245, 102, 10, 0.55);
}
.btn-primary:hover {
  background: var(--c-orange-light);
  box-shadow: 0 10px 30px -6px rgba(245, 102, 10, 0.65);
}

.btn-secondary {
  background: transparent;
  color: var(--text-primary);
  border: 1.5px solid var(--border-strong);
}
.btn-secondary:hover {
  border-color: var(--c-blue-light);
  background: rgba(32, 114, 242, 0.1);
}

.btn-ghost {
  color: var(--text-secondary);
  padding-inline: var(--space-3);
  min-height: 40px;
}
.btn-ghost:hover { color: var(--text-primary); }

.btn-block { width: 100%; }
.btn-lg { min-height: 56px; padding: 0 var(--space-7); font-size: var(--fs-base); }

/* ---- Header — floating pill nav (not an edge-to-edge bar) ---- */
.site-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--z-header);
  height: var(--header-h);
  display: flex;
  align-items: center;
  padding-inline: var(--space-5);
  pointer-events: none;
}
.header-inner {
  width: 100%;
  max-width: calc(var(--container-max) - 40px);
  margin-inline: auto;
  padding: var(--space-3) var(--space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  pointer-events: auto;
  border-radius: var(--radius-full);
  background: rgba(20, 21, 25, 0.6);
  border: 1px solid var(--border-subtle);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 10px 34px -12px rgba(0, 0, 0, 0.5);
  transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), padding var(--dur-base) var(--ease-out);
}
.site-header.is-scrolled .header-inner {
  padding-block: var(--space-2);
  background: rgba(20, 21, 25, 0.85);
  border-color: var(--border-strong);
  box-shadow: 0 14px 40px -10px rgba(0, 0, 0, 0.6);
}

/* Logo */
.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}
.logo-img { height: 36px; width: auto; display: block; }
.footer-brand .logo-img { height: 32px; }
@media (max-width: 400px) { .logo-img { height: 30px; } }

.nav-menu-logo { height: 44px; width: auto; display: block; align-self: flex-start; margin-bottom: var(--space-9); }
@media (max-width: 640px) { .nav-menu-logo { height: 36px; margin-bottom: var(--space-7); } }

.logo-mark { width: 34px; height: 34px; flex-shrink: 0; }
.logo-mark svg { width: 100%; height: 100%; }
.logo-text-group { display: flex; flex-direction: column; line-height: 1; gap: 3px; }
.logo-word {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: -0.01em;
}
.logo-word .lt-b { color: var(--text-primary); }
.logo-word .lt-o { color: var(--c-orange); }
.logo-sub {
  font-family: var(--font-accent);
  font-size: 0.62rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

/* The menu is a single mechanism at every breakpoint (full-screen takeover),
   not a separate desktop nav bar — see .site-menu below. */
.header-actions { display: flex; align-items: center; gap: var(--space-3); }

/* Menu toggle — always visible & accessible */
.menu-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  flex-shrink: 0;
  position: relative;
  z-index: var(--z-mobile-menu);
}
.menu-toggle:hover { border-color: var(--border-strong); }
.menu-toggle .bar {
  position: absolute;
  width: 20px;
  height: 2px;
  background: var(--text-primary);
  border-radius: 2px;
  transition: transform var(--dur-base) var(--ease-in-out), opacity var(--dur-base) var(--ease-in-out), width var(--dur-base) var(--ease-in-out);
}
.menu-toggle .bar:nth-child(1) { transform: translateY(-6px); }
.menu-toggle .bar:nth-child(2) { transform: translateY(0); }
.menu-toggle .bar:nth-child(3) { transform: translateY(6px); }
.menu-toggle[aria-expanded="true"] .bar:nth-child(1) { transform: translateY(0) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .bar:nth-child(2) { opacity: 0; width: 20px; }
.menu-toggle[aria-expanded="true"] .bar:nth-child(3) { transform: translateY(0) rotate(-45deg); }

/* ---- Site menu — bold full-screen takeover, active at every breakpoint
   (rabbit.tech reference). This IS the primary navigation mechanism, not a
   mobile-only fallback. ---- */
.nav-mobile {
  position: fixed;
  inset: 0;
  z-index: var(--z-mobile-menu);
  background: var(--c-orange-surface);
  display: flex;
  flex-direction: column;
  padding: calc(var(--header-h) + var(--space-6)) var(--space-6) var(--space-8);
  clip-path: circle(0% at calc(100% - 44px) 44px);
  visibility: hidden;
  transition: clip-path 650ms var(--ease-in-out), visibility 0s linear 650ms;
  overflow-y: auto;
}
.nav-mobile.is-open {
  clip-path: circle(150% at calc(100% - 44px) 44px);
  visibility: visible;
  transition: clip-path 650ms var(--ease-in-out), visibility 0s linear 0s;
}

.nav-menu-close {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  width: 48px; height: 48px;
  border-radius: var(--radius-md);
  background: rgba(10, 11, 13, 0.12);
  display: flex; align-items: center; justify-content: center;
  color: #0a0b0d;
}
.nav-menu-close svg { width: 20px; height: 20px; }

.nav-mobile-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-9);
  max-width: 640px;
}
.nav-mobile-links a {
  font-family: var(--font-body);
  font-size: clamp(2.1rem, 6.4vw, 3.4rem);
  font-weight: 600;
  line-height: 1.25;
  text-transform: lowercase;
  padding-block: var(--space-1);
  color: #0a0b0d;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.nav-mobile.is-open .nav-mobile-links a { opacity: 1; transform: translateY(0); }
.nav-mobile-links a:nth-child(1) { transition-delay: 90ms; }
.nav-mobile-links a:nth-child(2) { transition-delay: 140ms; }
.nav-mobile-links a:nth-child(3) { transition-delay: 190ms; }
.nav-mobile-links a:nth-child(4) { transition-delay: 240ms; }
.nav-mobile-links a:nth-child(5) { transition-delay: 290ms; }
.nav-mobile-links a:nth-child(6) { transition-delay: 340ms; }
.nav-mobile-links a:nth-child(7) { transition-delay: 390ms; }
.nav-mobile-links a[aria-current="page"] { color: #0a0b0d; text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.nav-mobile-links a:hover { color: #0a0b0d; text-decoration: underline; text-underline-offset: 6px; }

.nav-mobile-foot {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(10, 11, 13, 0.15);
}
.nav-mobile-social { display: flex; gap: var(--space-3); }
.nav-mobile-social a {
  width: 44px; height: 44px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(10, 11, 13, 0.25);
  color: #0a0b0d;
  display: flex; align-items: center; justify-content: center;
}
.nav-mobile-social svg { width: 18px; height: 18px; }
.nav-mobile-foot p { color: rgba(10, 11, 13, 0.65); }

body.menu-open { overflow: hidden; }

@media (min-width: 640px) {
  .header-actions .btn { min-height: 44px; padding-inline: var(--space-5); }
}

/* The header CTA button crowded the pill against the menu toggle on small
   phones, pushing the toggle past the edge of the screen. The menu (with
   "Get in Touch" as its last item) plus the assistant widget already cover
   this, so the header stays to just logo + toggle below 768px. */
@media (max-width: 767px) {
  .header-actions .btn { display: none; }
}

/* ---- Hero ---- */
.hero {
  position: relative;
  padding-block-start: calc(var(--header-h) + var(--space-8));
  padding-block-end: var(--space-9);
  overflow: hidden;
}
.hero-glow {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.35;
  pointer-events: none;
}
.hero-glow.orange { width: 480px; height: 480px; background: var(--c-orange); top: -160px; left: -120px; }
.hero-glow.blue { width: 420px; height: 420px; background: var(--c-blue); top: 40px; right: -140px; opacity: 0.28; }

.hero-grid {
  position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(var(--border-subtle) 1px, transparent 1px),
    linear-gradient(90deg, var(--border-subtle) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 60% 50% at 50% 0%, #000 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 0%, #000 40%, transparent 100%);
}

.hero-title {
  font-size: clamp(2.4rem, 6vw, var(--fs-5xl));
  max-width: 15ch;
}
.hero-lead {
  margin-top: var(--space-5);
  font-size: var(--fs-md);
  color: var(--text-secondary);
  max-width: 56ch;
}
.hero-actions {
  margin-top: var(--space-7);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.hero-note {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-subtle);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  color: var(--text-tertiary);
  font-size: var(--fs-xs);
}
.hero-note strong { color: var(--text-secondary); font-weight: 600; }

/* Page hero (interior pages) */
.page-hero {
  position: relative;
  padding-block-start: calc(var(--header-h) + var(--space-7));
  padding-block-end: var(--space-8);
  overflow: hidden;
  border-bottom: 1px solid var(--border-subtle);
}
.page-hero-title {
  font-family: var(--font-accent);
  font-weight: 400;
  font-style: normal;
  letter-spacing: -0.01em;
  line-height: 1.1;
  font-size: clamp(2.1rem, 4.8vw, var(--fs-4xl));
  max-width: 18ch;
}
.page-hero-lead { margin-top: var(--space-4); color: var(--text-secondary); font-size: var(--fs-md); max-width: 62ch; }
.breadcrumbs {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--fs-xs); color: var(--text-tertiary);
  margin-bottom: var(--space-5);
}
.breadcrumbs a { color: var(--text-tertiary); transition: color var(--dur-fast); }
.breadcrumbs a:hover { color: var(--c-orange-light); }
.breadcrumbs span[aria-current] { color: var(--text-secondary); }

/* ---- Cards & Grids ---- */
.grid { display: grid; gap: var(--space-5); }
.grid > * { min-width: 0; } /* grid items default to min-width:auto, which lets long
  unwrappable content (long headings, non-shrinking tags) force the track — and the
  whole page — wider than the viewport. This is the one rule that prevents that. */
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.card {
  position: relative;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.card:hover {
  transform: translateY(-4px);
  border-color: var(--border-strong);
  background: var(--bg-surface-2);
}

.icon-tile {
  width: 52px; height: 52px;
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  background: var(--gradient-brand);
  margin-bottom: var(--space-5);
  flex-shrink: 0;
}
.icon-tile svg { width: 24px; height: 24px; color: #0a0b0d; }

.card h3 { font-size: var(--fs-md); margin-bottom: var(--space-3); }
.card p { color: var(--text-secondary); font-size: var(--fs-sm); }

.card-link {
  margin-top: var(--space-5);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--c-orange-light);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.card-link svg { width: 14px; height: 14px; transition: transform var(--dur-fast) var(--ease-out); }
.card:hover .card-link svg { transform: translateX(3px); }

/* Tag / pill */
.tag {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--fs-xs);
  font-weight: 600;
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
}
.tag.tag-sample { color: var(--c-orange-light); border-color: rgba(245, 102, 10, 0.35); background: rgba(245, 102, 10, 0.08); }

/* ---- Process steps ---- */
.steps { counter-reset: step; }
.step {
  position: relative;
  padding-left: var(--space-8);
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
}
.step:last-child { border-bottom: none; }
.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0; top: var(--space-5);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--c-orange);
  width: 40px;
}
.step h3 { font-size: var(--fs-lg); margin-bottom: var(--space-2); }
.step p { color: var(--text-secondary); }

/* ---- Stats ---- */
.stat-value {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: 700;
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat-label { color: var(--text-secondary); font-size: var(--fs-sm); margin-top: var(--space-2); }

/* ---- Quote / testimonial ---- */
.quote-block {
  border-left: 3px solid;
  border-image: var(--gradient-brand) 1;
  padding-left: var(--space-6);
}
.quote-block p {
  font-family: var(--font-accent);
  font-style: normal;
  font-size: var(--fs-xl);
  font-weight: 400;
  color: var(--text-primary);
  line-height: 1.4;
}
.quote-cite {
  display: block;
  margin-top: var(--space-5);
  font-family: var(--font-body);
  font-style: normal;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}

/* ---- CTA (editorial, no card chrome) ---- */
.cta-editorial { text-align: center; padding-block: var(--space-6); }
.cta-editorial h2 {
  font-family: var(--font-accent);
  font-weight: 400;
  font-style: normal;
  line-height: 1.15;
  letter-spacing: -0.01em;
  font-size: clamp(1.8rem, 3.6vw, var(--fs-3xl));
  max-width: 24ch;
  margin-inline: auto;
}
.cta-editorial p { color: var(--text-secondary); margin-top: var(--space-5); max-width: 52ch; margin-inline: auto; }
.cta-actions { margin-top: var(--space-8); display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-4); }

/* ---- Footer ---- */
.site-footer {
  padding-block: var(--space-8) var(--space-6);
  background: var(--bg-surface);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: var(--space-7);
}
.footer-grid > * { min-width: 0; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

.footer-brand .logo-word { font-size: 1.6rem; }
.footer-brand p { color: var(--text-secondary); font-size: var(--fs-base); margin-top: var(--space-5); max-width: 32ch; }
.footer-social { display: flex; gap: var(--space-3); margin-top: var(--space-5); }
.footer-social a {
  width: 40px; height: 40px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-subtle);
  display: flex; align-items: center; justify-content: center;
  transition: border-color var(--dur-fast), color var(--dur-fast);
  color: var(--text-secondary);
}
.footer-social a:hover { border-color: var(--c-orange); color: var(--c-orange-light); }
.footer-social svg { width: 16px; height: 16px; }

.footer-col h4 {
  font-family: var(--font-display);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-tertiary);
  margin-bottom: var(--space-4);
}
.footer-col ul { display: flex; flex-direction: column; gap: var(--space-3); }
.footer-col a, .footer-col p {
  font-size: var(--fs-xs);
  letter-spacing: 0.01em;
  color: var(--text-secondary);
  transition: color var(--dur-fast);
}
.footer-col a:hover { color: var(--c-orange-light); }

.footer-bottom {
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-subtle);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
}

/* ---- WhatsApp floater (always visible) ---- */
.whatsapp-float {
  position: fixed;
  right: var(--space-5);
  bottom: var(--space-5);
  z-index: var(--z-floater);
  width: 60px; height: 60px;
  border-radius: var(--radius-full);
  background: #25d366;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 30px -8px rgba(37, 211, 102, 0.6);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.whatsapp-float:hover { transform: scale(1.08); box-shadow: 0 14px 36px -8px rgba(37, 211, 102, 0.75); }
.whatsapp-float svg { width: 30px; height: 30px; color: #fff; }
.whatsapp-float .ping {
  position: absolute; inset: 0;
  border-radius: var(--radius-full);
  background: #25d366;
  animation: ping 2.4s cubic-bezier(0,0,0.2,1) infinite;
}
@media (prefers-reduced-motion: reduce) { .whatsapp-float .ping { animation: none; } }
@keyframes ping {
  0% { transform: scale(1); opacity: 0.5; }
  75%, 100% { transform: scale(1.7); opacity: 0; }
}

@media (max-width: 640px) {
  .whatsapp-float { width: 54px; height: 54px; right: var(--space-4); bottom: var(--space-4); }
  .whatsapp-float svg { width: 26px; height: 26px; }
}

/* Mobile bottom action: chatbot assistant only (no "Get in Touch" bar —
   that's reachable via the menu and the assistant itself). */
@media (max-width: 767px) {
  .whatsapp-float { display: none; }
}

/* ---- Assistant chatbot — cosmetic FAQ widget, no backend ---- */
.assistant-toggle {
  position: fixed;
  left: var(--space-5);
  bottom: var(--space-5);
  z-index: var(--z-floater);
  width: 56px; height: 56px;
  border-radius: var(--radius-full);
  background: var(--gradient-brand);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 28px -8px rgba(32, 114, 242, 0.5);
  transition: transform var(--dur-fast) var(--ease-out);
}
.assistant-toggle:hover { transform: scale(1.06); }
.assistant-toggle svg { width: 26px; height: 26px; color: #0a0b0d; }

/* Assistant label — visible on hover always, and periodically flashed on its
   own while scrolling so people notice it without hovering. */
.assistant-toggle-wrap { position: fixed; left: var(--space-5); bottom: var(--space-5); z-index: var(--z-floater); }
.assistant-toggle-wrap .assistant-toggle { position: static; }
.assistant-label {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%) translateY(6px);
  white-space: nowrap;
  background: var(--bg-surface-2);
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  box-shadow: 0 8px 20px -6px rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.assistant-toggle-wrap:hover .assistant-label,
.assistant-toggle-wrap.is-highlighted .assistant-label {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.assistant-toggle-wrap.is-highlighted .assistant-toggle { animation: assistant-pulse 900ms var(--ease-out) 2; }
@keyframes assistant-pulse {
  0%, 100% { box-shadow: 0 10px 28px -8px rgba(32, 114, 242, 0.5); }
  50% { box-shadow: 0 10px 28px -8px rgba(32, 114, 242, 0.5), 0 0 0 10px rgba(245, 102, 10, 0.18); }
}
@media (prefers-reduced-motion: reduce) {
  .assistant-toggle-wrap.is-highlighted .assistant-toggle { animation: none; }
}

@media (max-width: 767px) {
  .assistant-toggle-wrap { left: auto; right: var(--space-4); bottom: var(--space-4); }
  .assistant-label { left: auto; right: 0; transform: translateX(0) translateY(6px); }
  .assistant-toggle-wrap:hover .assistant-label,
  .assistant-toggle-wrap.is-highlighted .assistant-label { transform: translateX(0) translateY(0); }
}

/* On mobile there's no WhatsApp floater to clash with, so the assistant
   takes the bottom-right thumb-zone spot instead of sitting bottom-left
   (positioning lives on .assistant-toggle-wrap, see below). */
@media (max-width: 767px) {
  .assistant-toggle { width: 52px; height: 52px; }
}

.assistant-panel {
  position: fixed;
  z-index: var(--z-toast);
  right: var(--space-5);
  bottom: 92px;
  width: min(380px, calc(100vw - 2 * var(--space-5)));
  max-height: min(560px, calc(100vh - 140px));
  display: flex;
  flex-direction: column;
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.6);
  opacity: 0;
  transform: translateY(16px) scale(0.98);
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
  overflow: hidden;
}
.assistant-panel.is-open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }

@media (max-width: 767px) {
  .assistant-panel {
    left: var(--space-3); right: var(--space-3); bottom: 84px;
    width: auto;
    max-height: min(70vh, 520px);
  }
}

.assistant-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
}
.assistant-head-title { display: flex; align-items: center; gap: var(--space-3); }
.assistant-head-title .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); flex-shrink: 0; }
.assistant-head-title h3 { font-size: var(--fs-sm); font-family: var(--font-display); }
.assistant-head-title span { display: block; font-size: var(--fs-xs); color: var(--text-tertiary); margin-top: 2px; }
.assistant-close { width: 32px; height: 32px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; color: var(--text-secondary); }
.assistant-close:hover { color: var(--text-primary); background: var(--bg-surface-2); }
.assistant-close svg { width: 16px; height: 16px; }

.assistant-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.assistant-msg { display: flex; }
.assistant-msg.from-bot { justify-content: flex-start; }
.assistant-msg.from-user { justify-content: flex-end; }
.assistant-bubble {
  max-width: 84%;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.assistant-msg.from-bot .assistant-bubble { background: var(--bg-surface-2); color: var(--text-primary); border-bottom-left-radius: 4px; }
.assistant-msg.from-user .assistant-bubble { background: var(--gradient-brand); color: #0a0b0d; font-weight: 500; border-bottom-right-radius: 4px; }

.assistant-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 0 var(--space-5) var(--space-4); flex-shrink: 0; }
.assistant-chip {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  border: 1px solid var(--border-subtle);
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  transition: border-color var(--dur-fast), color var(--dur-fast);
}
.assistant-chip:hover { border-color: var(--c-orange); color: var(--c-orange-light); }

.assistant-input-row {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 var(--space-4) var(--space-4);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  background: var(--bg-surface-2);
  border: 1px solid var(--border-subtle);
}
.assistant-input-row .plus {
  width: 28px; height: 28px; flex-shrink: 0;
  border-radius: var(--radius-full);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-tertiary);
}
.assistant-input-row .plus svg { width: 15px; height: 15px; }
.assistant-input-row input {
  flex: 1; min-width: 0;
  background: none; border: none;
  font-size: var(--fs-sm);
  color: var(--text-primary);
  min-height: 32px;
}
.assistant-input-row input::placeholder { color: var(--text-tertiary); }
.assistant-input-row input:focus { outline: none; }
.assistant-send {
  width: 32px; height: 32px; flex-shrink: 0;
  border-radius: var(--radius-full);
  background: var(--gradient-brand);
  display: flex; align-items: center; justify-content: center;
}
.assistant-send svg { width: 15px; height: 15px; color: #0a0b0d; }

/* ---- Reveal-on-scroll ---- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
}
.reveal-stagger.is-visible > * { opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 80ms; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 160ms; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 240ms; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 320ms; }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 400ms; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-stagger > * { opacity: 1; transform: none; transition: none; }
}

/* ---- Forms ---- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.form-grid > * { min-width: 0; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field.full { grid-column: 1 / -1; }
.field label { font-size: var(--fs-xs); font-weight: 600; color: var(--text-secondary); }
.field label .req { color: var(--c-orange-light); }
.field input, .field textarea, .field select {
  background: var(--bg-surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  min-height: 48px;
  font-size: var(--fs-base);
  color: var(--text-primary);
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--c-blue);
  background: var(--bg-surface-3);
  outline: none;
}
.field small { font-size: var(--fs-xs); color: var(--text-tertiary); }
.field.has-error input, .field.has-error textarea { border-color: var(--error); }
.field-error { font-size: var(--fs-xs); color: var(--error); display: none; }
.field.has-error .field-error { display: block; }

.form-status {
  margin-top: var(--space-5);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  display: none;
}
.form-status.is-success { display: block; background: rgba(52, 211, 153, 0.1); border: 1px solid rgba(52, 211, 153, 0.35); color: var(--success); }
.form-status.is-error { display: block; background: rgba(248, 113, 113, 0.1); border: 1px solid rgba(248, 113, 113, 0.35); color: var(--error); }

/* honeypot */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---- Contact info list ---- */
.contact-list { display: flex; flex-direction: column; gap: var(--space-6); }
.contact-item { display: flex; gap: var(--space-4); align-items: flex-start; }
.contact-item .icon-tile { width: 44px; height: 44px; margin-bottom: 0; }
.contact-item .icon-tile svg { width: 20px; height: 20px; }
.contact-item h4 { font-size: var(--fs-sm); margin-bottom: var(--space-1); }
.contact-item p, .contact-item a { color: var(--text-secondary); font-size: var(--fs-sm); }
.contact-item a:hover { color: var(--c-orange-light); }

/* ---- Map ---- */
.map-frame {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  aspect-ratio: 16 / 11;
  background: var(--bg-surface-2);
}
.map-frame iframe { width: 100%; height: 100%; border: 0; filter: grayscale(0.4) invert(0.92) contrast(0.9); }
.map-frame:hover iframe { filter: grayscale(0.15) invert(0.92) contrast(0.95); }
.map-frame iframe { transition: filter var(--dur-base) var(--ease-out); }

/* ---- Filter tabs (portfolio) ---- */
.filter-tabs { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-7); }
.filter-tab {
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-full);
  border: 1px solid var(--border-subtle);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-secondary);
  transition: all var(--dur-fast) var(--ease-out);
}
.filter-tab:hover { border-color: var(--border-strong); color: var(--text-primary); }
.filter-tab.is-active { background: var(--gradient-brand); color: #0a0b0d; border-color: transparent; font-weight: 700; }

.portfolio-item { transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.portfolio-item.is-hidden { display: none; }

/* Halftone dot-field — a callback to the cursor mark's halftone trail in the
   logo, used as a consistent generative "art direction" instead of stock imagery. */
.portfolio-media {
  aspect-ratio: 4/3;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-5);
  position: relative;
  overflow: hidden;
  background: linear-gradient(155deg, var(--bg-surface-2), var(--bg-surface-3));
}
.portfolio-media::before {
  content: "";
  position: absolute;
  inset: -25%;
  background-image: radial-gradient(circle, var(--dot-color, var(--c-orange)) 1.6px, transparent 1.6px);
  background-size: 16px 16px;
  mask-image: radial-gradient(circle at var(--dot-cx, 62%) var(--dot-cy, 38%), #000 0%, transparent 68%);
  -webkit-mask-image: radial-gradient(circle at var(--dot-cx, 62%) var(--dot-cy, 38%), #000 0%, transparent 68%);
  opacity: 0.9;
  transition: transform 600ms var(--ease-out);
}
.card:hover .portfolio-media::before { transform: scale(1.1); }
.portfolio-media.dot-blue { --dot-color: var(--c-blue); }
.portfolio-media.dot-mixed::before {
  background-image:
    radial-gradient(circle, var(--c-orange) 1.6px, transparent 1.6px),
    radial-gradient(circle, var(--c-blue) 1.6px, transparent 1.6px);
  background-size: 16px 16px, 24px 24px;
  background-position: 0 0, 9px 13px;
}

/* ---- 404 ---- */
.error-page {
  min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: var(--space-6);
}
.error-code {
  font-family: var(--font-display);
  font-size: clamp(4rem, 14vw, 8rem);
  font-weight: 700;
  background: var(--gradient-brand);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---- Skip link ---- */
.skip-link {
  position: fixed;
  top: -100px;
  left: var(--space-4);
  z-index: 400;
  background: var(--c-orange);
  color: #100b06;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  font-weight: 600;
  transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus { top: var(--space-4); }

/* ==========================================================================
   Handcrafted micro-interactions
   ========================================================================== */

/* ---- Custom cursor (fine-pointer desktop only, brand cursor-mark motif) ---- */
body.has-custom-cursor, body.has-custom-cursor * { cursor: none !important; }
.cursor-dot, .cursor-ring {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 500;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  will-change: transform;
}
.cursor-dot {
  width: 6px; height: 6px;
  background: var(--c-orange);
}
.cursor-ring {
  width: 30px; height: 30px;
  border: 1.5px solid var(--c-blue-light);
  transition: width var(--dur-base) var(--ease-out), height var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.cursor-ring.is-active {
  width: 52px; height: 52px;
  border-color: var(--c-orange);
  background: rgba(245, 102, 10, 0.1);
}
body:not(.has-custom-cursor) .cursor-dot,
body:not(.has-custom-cursor) .cursor-ring { display: none; }

/* ---- Spotlight hover — a soft glow on cards that follows the real cursor ---- */
.card::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(245, 102, 10, 0.14), transparent 70%);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
  pointer-events: none;
}
.card:hover::after { opacity: 1; }

/* ---- Alternate reveal treatments (replace blanket fade-up per context) ---- */
.reveal-clip {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 800ms var(--ease-out);
}
.reveal-clip.is-visible { clip-path: inset(0 0 0 0); }

.reveal-scale {
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 550ms var(--ease-out), transform 550ms var(--ease-out);
}
.reveal-scale.is-visible { opacity: 1; transform: scale(1); }

/* ---- Animated gradient divider — draws itself in on scroll ---- */
.divider-draw {
  height: 2px;
  background: var(--gradient-brand);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 900ms var(--ease-out);
}
.divider-draw.is-visible { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  .reveal-clip, .reveal-scale { opacity: 1; transform: none; clip-path: none; transition: none; }
  .divider-draw { transform: scaleX(1); transition: none; }
  .cursor-dot, .cursor-ring { display: none !important; }
}

/* ---- Editorial testimonial ---- */
.editorial-quote { max-width: 46ch; margin-inline: auto; text-align: center; }
.editorial-quote p {
  font-family: var(--font-accent);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(1.5rem, 3.4vw, var(--fs-2xl));
  line-height: 1.35;
  color: var(--text-primary);
}
.editorial-quote cite {
  display: block;
  margin-top: var(--space-6);
  font-family: var(--font-body);
  font-style: normal;
  font-size: var(--fs-sm);
  color: var(--text-tertiary);
}

/* ---- Asymmetric stat feature (one hero stat + supporting list) ---- */
.stat-feature-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--space-9); align-items: center; }
.stat-feature-grid > * { min-width: 0; }
@media (max-width: 800px) { .stat-feature-grid { grid-template-columns: 1fr; gap: var(--space-7); } }
.stat-value-lg {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3.5rem, 8vw, 6rem);
  line-height: 1;
  background: var(--gradient-brand);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat-hero .stat-label { margin-top: var(--space-4); font-size: var(--fs-md); max-width: 32ch; color: var(--text-secondary); }
.stat-support-list { display: flex; flex-direction: column; gap: var(--space-5); }
.stat-support {
  display: flex; align-items: baseline; gap: var(--space-4);
  border-top: 1px solid var(--border-subtle);
  padding-top: var(--space-5);
}
.stat-support:first-child { border-top: none; padding-top: 0; }
.stat-support .stat-value { font-size: var(--fs-2xl); flex-shrink: 0; min-width: 2.5ch; }
.stat-support .stat-label { margin-top: 0; }

/* ==========================================================================
   Page-specific art direction (reference-matched sections)
   ========================================================================== */

/* ---- Enhanced slide-up reveal — used as the section-divider moment ---- */
.reveal-up {
  opacity: 0;
  transform: translateY(44px);
  transition: opacity 750ms var(--ease-out), transform 750ms var(--ease-out);
}

/* Staggered entrance — each hero element appears top to bottom in sequence
   instead of all at once. */
.stagger-1 { transition-delay: 0ms; }
.stagger-2 { transition-delay: 160ms; }
.stagger-3 { transition-delay: 320ms; }
.stagger-4 { transition-delay: 480ms; }
.stagger-5 { transition-delay: 640ms; }
.stagger-6 { transition-delay: 800ms; }
.reveal-up.is-visible { opacity: 1; transform: translateY(0); }

.mask-reveal { overflow: hidden; display: block; }
.mask-reveal .mask-inner {
  display: block;
  transform: translateY(112%);
  transition: transform 900ms var(--ease-out);
}
.mask-reveal.is-visible .mask-inner { transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .reveal-up { opacity: 1; transform: none; transition: none; }
  .mask-reveal .mask-inner { transform: none; transition: none; }
}

/* ---- Home hero — split duotone background, tracked wordmark (Darkmatter ref) ---- */
.hero-split {
  position: relative;
  min-height: min(90vh, 800px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding-block-start: calc(var(--header-h) + var(--space-6));
  padding-block-end: var(--space-8);
}
.hero-split-bg {
  position: absolute; inset: 0; z-index: -2;
  background: linear-gradient(101deg, var(--c-orange-surface) 0%, var(--c-orange-surface) 47%, var(--bg-base) 53%, var(--bg-base) 100%);
}
.hero-mark {
  position: absolute;
  top: 52%; left: 50%;
  width: min(50vw, 620px);
  transform: translate(-50%, -50%);
  z-index: -1;
  opacity: 0.13;
  pointer-events: none;
}
.hero-mark svg { width: 100%; height: auto; }
.hero-split-content { text-align: center; position: relative; }
.hero-title-split {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  font-size: clamp(2.1rem, 7.6vw, 5.2rem);
  line-height: 1;
  color: var(--text-primary);
}
.hero-title-sub {
  font-family: var(--font-accent);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(1rem, 2vw, var(--fs-lg));
  color: var(--text-secondary);
  margin-top: var(--space-4);
}
.hero-split .hero-lead {
  margin-inline: auto; text-align: center; margin-top: var(--space-6);
  color: rgba(244, 243, 239, 0.88);
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.4);
  max-width: 56ch;
}
.hero-split .hero-actions { justify-content: center; }

.hero-split-foot {
  position: relative;
  margin-top: var(--space-10);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
}
.hero-foot-line { flex: 1; max-width: 140px; height: 1px; background: var(--border-strong); }
.hero-foot-link {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  white-space: nowrap;
  transition: color var(--dur-fast);
}
.hero-foot-link:hover { color: var(--c-orange-light); }
.hero-foot-circle {
  flex-shrink: 0;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--gradient-brand);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px -6px rgba(245, 102, 10, 0.5);
  transition: transform var(--dur-fast) var(--ease-out);
}
.hero-foot-circle:hover { transform: scale(1.08); }
.hero-foot-circle svg { width: 20px; height: 20px; color: #0a0b0d; }

@media (max-width: 640px) {
  .hero-split-foot { gap: var(--space-3); }
  .hero-foot-line { max-width: 32px; }
  .hero-foot-link { font-size: 0.62rem; }
  .hero-foot-circle { width: 44px; height: 44px; }
}

/* ---- Numbered whitespace grid — no card chrome (Vita "How It Works" ref) ---- */
.numbered-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-11) var(--space-9);
}
.numbered-grid > * { min-width: 0; }
@media (max-width: 800px) { .numbered-grid { grid-template-columns: 1fr; gap: var(--space-9); } }
.numbered-item { position: relative; }
.numbered-item .icon-tile { background: none; border: 1.5px solid var(--border-strong); margin-bottom: var(--space-6); }
.numbered-item .icon-tile svg { color: var(--text-primary); }
.numbered-item .num {
  position: absolute;
  top: 2px; right: 0;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-tertiary);
}
.numbered-item h3 { font-size: var(--fs-lg); margin-bottom: var(--space-3); }
.numbered-item p { color: var(--text-secondary); max-width: 42ch; }
.numbered-item:hover .card-link svg { transform: translateX(3px); }
.numbered-item-image { aspect-ratio: 4 / 3; margin-bottom: var(--space-5); }
.numbered-item .num { position: static; display: block; margin-bottom: var(--space-3); }

/* ---- Statement section — oversized background word (Vita "Travel" ref) ---- */
.statement-section { position: relative; text-align: center; overflow: hidden; }
.statement-bg-word {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(4rem, 17vw, 12rem);
  letter-spacing: -0.02em;
  color: var(--text-primary);
  opacity: 0.045;
  white-space: nowrap;
  pointer-events: none;
  z-index: 0;
}
.statement-content { position: relative; z-index: 1; }
.statement-content h2 {
  font-family: var(--font-accent);
  font-weight: 400;
  font-style: normal;
  font-size: clamp(2rem, 4.2vw, var(--fs-4xl));
  line-height: 1.15;
  max-width: 18ch;
  margin-inline: auto;
}
.statement-content .section-lead { margin-inline: auto; }
.statement-steps {
  margin-top: var(--space-9);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-8);
}
.statement-step { max-width: 200px; }
.statement-step .num { font-family: var(--font-display); font-weight: 700; color: var(--c-orange); font-size: var(--fs-sm); display: block; margin-bottom: var(--space-2); }
.statement-step h4 { font-size: var(--fs-sm); font-weight: 600; margin-bottom: var(--space-2); }
.statement-step p { color: var(--text-secondary); font-size: var(--fs-xs); }

/* Moving imagery — a slow continuous pan/zoom inside a rounded "box",
   used for the section-lead image and one small image per stage. */
.moving-frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface-2);
}
.moving-frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  animation: moving-frame-pan 16s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes moving-frame-pan {
  from { transform: scale(1) translate(0, 0); }
  to { transform: scale(1.14) translate(-2%, -2%); }
}
@media (prefers-reduced-motion: reduce) {
  .moving-frame img { animation: none; }
}

.statement-hero-image {
  aspect-ratio: 21 / 8;
  margin-bottom: var(--space-9);
}
.statement-step-img {
  width: 76px; height: 76px;
  border-radius: var(--radius-md);
  margin: 0 auto var(--space-4);
}
@media (max-width: 640px) {
  .statement-hero-image { aspect-ratio: 4 / 3; margin-bottom: var(--space-7); }
  .statement-step-img { width: 64px; height: 64px; }
}

/* ---- Scroll-spread — two images whose zoom/lift is scrubbed directly by
   scroll position (JS sets transform every frame; see main.js) ---- */
.scroll-spread {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  margin-bottom: var(--space-9);
}
.scroll-spread-img {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface-2);
}
.scroll-spread-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  will-change: transform;
}
@media (max-width: 640px) {
  .scroll-spread { gap: var(--space-3); margin-bottom: var(--space-7); }
}

/* ---- Photo collage with a bold statement centered between two staggered
   rows of moving images (Kononenko-style reference) ---- */
.collage-section { overflow: hidden; }
.collage-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  align-items: start;
}
.collage-img { aspect-ratio: 3 / 4; border-radius: var(--radius-lg); }
.collage-grid.top .collage-img:nth-child(2) { margin-top: var(--space-8); }
.collage-grid.bottom .collage-img:nth-child(1) { margin-top: var(--space-7); }
.collage-grid.bottom .collage-img:nth-child(3) { margin-top: var(--space-4); }
.collage-center { text-align: center; padding-block: var(--space-7); }
.collage-center-text {
  font-family: var(--font-accent);
  font-weight: 400;
  font-style: normal;
  font-size: clamp(2.1rem, 5vw, 3.6rem);
  line-height: 1.15;
  color: var(--text-primary);
}
@media (max-width: 640px) {
  .collage-grid { gap: var(--space-3); }
  .collage-img { aspect-ratio: 1 / 1; }
  .collage-grid.top .collage-img:nth-child(2) { margin-top: var(--space-5); }
  .collage-grid.bottom .collage-img:nth-child(1) { margin-top: var(--space-4); }
  .collage-grid.bottom .collage-img:nth-child(3) { margin-top: var(--space-2); }
  .collage-center { padding-block: var(--space-5); }
}

/* ---- Marquee divider — continuously auto-scrolling text + images, used as
   a visual section-break instead of plain whitespace ---- */
.marquee-divider {
  overflow: hidden;
  border-block: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  padding-block: var(--space-5);
}
.marquee-track {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  width: max-content;
  animation: marquee-scroll 26s linear infinite;
}
.marquee-item {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.3rem, 2.8vw, 2.1rem);
  color: var(--text-secondary);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
.marquee-item.accent {
  background: var(--gradient-brand);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.marquee-img {
  width: 52px; height: 52px;
  border-radius: var(--radius-full);
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid var(--border-strong);
}
.marquee-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}
@media (max-width: 640px) {
  .marquee-divider { padding-block: var(--space-4); }
  .marquee-track { gap: var(--space-5); animation-duration: 20s; }
  .marquee-img { width: 40px; height: 40px; }
}

/* ---- Photo hero — rounded full-bleed image card with overlaid text
   (Wolverine Worldwide careers-page reference) ---- */
.photo-hero { padding-block-start: calc(var(--header-h) + var(--space-5)); padding-block-end: var(--space-8); }
.photo-hero-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 620px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--space-8) var(--space-7);
  border: 1px solid var(--border-subtle);
}
.photo-hero-card img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  animation: moving-frame-pan 18s ease-in-out infinite alternate;
}
.photo-hero-card::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10, 11, 13, 0.8) 0%, rgba(10, 11, 13, 0.25) 32%, rgba(10, 11, 13, 0.45) 68%, rgba(10, 11, 13, 0.88) 100%);
}
.photo-hero-top, .photo-hero-bottom { position: relative; z-index: 1; text-align: center; max-width: 760px; margin-inline: auto; }
.photo-hero-title {
  font-family: var(--font-display);
  font-weight: 700;
  color: #fff;
  font-size: clamp(2.2rem, 5.6vw, 3.8rem);
  line-height: 1.05;
}
.photo-hero-lead { color: rgba(255, 255, 255, 0.85); margin-top: var(--space-4); font-size: var(--fs-md); }
.photo-hero-bottom .btn { margin-top: var(--space-6); background: #fff; color: #0a0b0d; box-shadow: 0 10px 26px -8px rgba(0, 0, 0, 0.5); }
.photo-hero-bottom .btn:hover { background: #f0efeb; }
@media (max-width: 640px) {
  .photo-hero-card { min-height: 560px; padding: var(--space-6) var(--space-5); }
}

/* ---- Textured hero — grid-paper background, floating photo cluster, serif
   headline (Brunello Cucinelli reference) ---- */
.textured-hero { position: relative; padding-block-start: calc(var(--header-h) + var(--space-6)); padding-block-end: var(--space-8); overflow: hidden; }
.textured-hero-bg {
  position: absolute; inset: 0; z-index: -1;
  background-color: var(--bg-surface);
  background-image:
    linear-gradient(var(--border-subtle) 1px, transparent 1px),
    linear-gradient(90deg, var(--border-subtle) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 25%, #000 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 25%, #000 40%, transparent 100%);
}
.textured-photo-cluster {
  display: grid;
  grid-template-columns: 0.82fr 1fr 0.82fr;
  gap: var(--space-4);
  align-items: end;
  max-width: 760px;
  margin-inline: auto;
  margin-bottom: var(--space-8);
}
.cluster-img { border-radius: var(--radius-lg); }
.cluster-img:nth-child(1), .cluster-img:nth-child(3) { aspect-ratio: 3 / 4.3; }
.cluster-img:nth-child(2) { aspect-ratio: 3 / 5.6; }
.textured-hero-content { text-align: center; }
.textured-hero-title {
  font-family: var(--font-accent);
  font-weight: 400;
  font-style: normal;
  line-height: 1.08;
  letter-spacing: -0.01em;
  font-size: clamp(2.2rem, 5.6vw, 4rem);
  max-width: 18ch;
  margin-inline: auto;
}
.textured-hero-lead { text-align: center; margin-inline: auto; margin-top: var(--space-5); color: var(--text-secondary); max-width: 56ch; font-size: var(--fs-md); }
@media (max-width: 640px) {
  .textured-photo-cluster { gap: var(--space-3); margin-bottom: var(--space-6); }
}

/* ---- Feature card — image top, labeled content panel below (8020 Market ref) ---- */
.feature-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.feature-card:hover { border-color: var(--border-strong); transform: translateY(-4px); }
.feature-card-media { aspect-ratio: 4 / 3; overflow: hidden; }
.feature-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; animation: moving-frame-pan 16s ease-in-out infinite alternate; }
.feature-card-body { padding: var(--space-6); }
.feature-card-eyebrow { font-family: var(--font-display); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-orange-light); margin-bottom: var(--space-2); }
.feature-card-body h3 { font-size: var(--fs-lg); margin-bottom: var(--space-3); }
.feature-card-body p { color: var(--text-secondary); font-size: var(--fs-sm); margin-bottom: var(--space-5); }
.feature-card-cta {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-full);
  border: 1.5px solid var(--border-strong);
  font-size: var(--fs-sm); font-weight: 600;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.feature-card-cta:hover { border-color: var(--c-orange); background: rgba(245, 102, 10, 0.08); }

/* ---- Photo-word hero — full-bleed photo, oversized word, bottom-anchored
   content (Vita Travels reference) ---- */
.photo-word-hero {
  position: relative;
  min-height: min(90vh, 780px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  padding-block-start: calc(var(--header-h) + var(--space-6));
  padding-block-end: var(--space-8);
}
.photo-word-hero-media { position: absolute; inset: 0; z-index: -1; }
.photo-word-hero-media img { width: 100%; height: 100%; object-fit: cover; animation: moving-frame-pan 20s ease-in-out infinite alternate; }
.photo-word-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10, 11, 13, 0.1) 0%, rgba(10, 11, 13, 0.25) 40%, rgba(10, 11, 13, 0.88) 100%);
}
.photo-word-hero-word {
  font-family: var(--font-display);
  font-weight: 700;
  color: #fff;
  font-size: clamp(4rem, 15vw, 10rem);
  line-height: 0.92;
  letter-spacing: -0.02em;
}
.photo-word-hero-sub { color: #fff; font-size: clamp(1.1rem, 2.4vw, var(--fs-xl)); font-weight: 600; margin-top: var(--space-4); max-width: 32ch; }
.photo-word-hero-lead { color: rgba(255, 255, 255, 0.82); margin-top: var(--space-4); max-width: 56ch; font-size: var(--fs-md); }
.photo-word-hero .btn { margin-top: var(--space-7); background: #fff; color: #0a0b0d; box-shadow: 0 10px 26px -8px rgba(0, 0, 0, 0.5); }
.photo-word-hero .btn:hover { background: #f0efeb; }
@media (max-width: 640px) {
  .photo-word-hero { min-height: min(88vh, 640px); padding-block-start: calc(var(--header-h) + var(--space-4)); }
}

/* ---- Portfolio samples — plain 2-up grid, no horizontal scroll ---- */
.samples-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
.samples-grid > * { min-width: 0; }
@media (max-width: 560px) { .samples-grid { gap: var(--space-4) var(--space-3); } }

.client-card-image { aspect-ratio: 4 / 3; margin-bottom: var(--space-4); position: relative; }
.client-card-badge {
  position: absolute; top: var(--space-3); left: var(--space-3); z-index: 2;
  background: rgba(10, 11, 13, 0.75);
  color: var(--c-orange-light);
  font-size: var(--fs-xs); font-weight: 600;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.client-card-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); min-width: 0; }
.client-card-row h3 { font-size: var(--fs-md); margin: 0; min-width: 0; overflow-wrap: break-word; flex: 1 1 auto; }
.client-card-row .tag { flex-shrink: 0; }
@media (max-width: 560px) {
  .client-card-row h3 { font-size: var(--fs-sm); }
}
.client-card-industry { color: var(--text-tertiary); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em; margin: var(--space-1) 0 var(--space-3); }

/* ---- Device-mockup hero — Solutions page (emotionalerhunger ref) ---- */
.mockup-hero { position: relative; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: var(--space-10); }
.mockup-hero > * { min-width: 0; }
@media (max-width: 900px) { .mockup-hero { grid-template-columns: 1fr; gap: var(--space-9); } }

.mockup-visual { position: relative; min-height: 340px; }
.mockup-frame-lg {
  position: relative; width: 82%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-strong);
  background: var(--bg-surface-2);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.5);
}
.mockup-chrome { display: flex; align-items: center; gap: 6px; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-subtle); }
.mockup-chrome span { width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); }
.mockup-screen { aspect-ratio: 4/3; position: relative; overflow: hidden; }
.mockup-frame-sm .mockup-screen { aspect-ratio: 9/16; }

.mockup-frame-sm {
  position: absolute; right: 0; bottom: -6%; width: 34%;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border-strong);
  background: var(--bg-surface-2);
  box-shadow: 0 24px 50px -16px rgba(0, 0, 0, 0.55);
}

.mockup-badge {
  position: absolute; top: -5%; left: -3%;
  width: 112px; height: 112px;
  border-radius: 50%;
  background: var(--gradient-brand);
  color: #0a0b0d;
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-family: var(--font-display); font-weight: 700; font-size: 0.7rem; line-height: 1.25;
  padding: var(--space-3);
  box-shadow: 0 14px 30px -8px rgba(245, 102, 10, 0.5);
}

.mockup-accent-line { position: absolute; left: -6%; top: 0%; bottom: 10%; width: 1px; background: var(--border-strong); }
.mockup-accent-line::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 8px; height: 8px; border-radius: 50%; background: var(--c-orange);
}

.mockup-side-label {
  position: absolute; right: -7%; top: 50%;
  transform: translateY(-50%) rotate(90deg); transform-origin: center;
  font-family: var(--font-display); font-size: var(--fs-xs);
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-tertiary);
  white-space: nowrap;
}

@media (max-width: 900px) {
  .mockup-badge, .mockup-accent-line, .mockup-side-label { display: none; }
  .mockup-frame-lg { width: 88%; margin-inline: auto; }
  .mockup-frame-sm { width: 40%; }
}

/* ---- Mobile: designed layout decisions, not a shrunk desktop ---- */
@media (max-width: 640px) {
  .hero-note {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .hero-note::-webkit-scrollbar { display: none; }
  .hero-note span { scroll-snap-align: start; flex-shrink: 0; white-space: nowrap; }

  .carousel-mobile {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: var(--space-4);
    margin-inline: calc(var(--space-4) * -1);
    padding-inline: var(--space-4);
    padding-bottom: var(--space-2);
    scrollbar-width: none;
  }
  .carousel-mobile::-webkit-scrollbar { display: none; }
  .carousel-mobile > * { flex: 0 0 82%; scroll-snap-align: start; }

  /* Tighten card density and calm the hero glow on phone screens */
  .card { padding: var(--space-5); }
  .hero-glow.orange { width: 280px; height: 280px; filter: blur(60px); top: -90px; left: -80px; }
  .hero-glow.blue { width: 240px; height: 240px; filter: blur(55px); top: 20px; right: -80px; }
}

@media (max-width: 400px) {
  .logo { gap: var(--space-2); }
  .logo-mark { width: 28px; height: 28px; }
  .logo-word { font-size: 1.1rem; }
  .logo-sub { font-size: 0.56rem; letter-spacing: 0.26em; }
}