html { font-size: 90%; }
/* Variable fonts, self-hosted: one file per family covers every weight.
   (The per-weight files were byte-identical copies of these same VFs.) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter-var.woff2') format('woff2-variations');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/fonts/jakarta-var.woff2') format('woff2-variations');
}
/* Metrics-adjusted local fallbacks: the page keeps its layout while the
   webfonts load, so the swap causes no visible shift. */
@font-face {
  font-family: 'Inter-fb';
  src: local('Arial');
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Jakarta-fb';
  src: local('Arial');
  size-adjust: 104%;
  ascent-override: 98%;
  line-gap-override: 0%;
}

  /* ══════════════════════════════════════════════════════════════
     IRIS DESIGN SYSTEM
     0.5rem spacing scale · 12-col fluid grid · WCAG AA tokens
     Light + dark mode from one token set
     ══════════════════════════════════════════════════════════════ */
  :root {
    /* type */
    --font-display: "Plus Jakarta Sans", "Jakarta-fb", "Segoe UI", system-ui, sans-serif;
    --font-text: "Inter", "Inter-fb", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

    /* brand */
    --brand: #3f5ef5;
    --brand-strong: #2563eb;
    --brand-soft: #eef4ff;
    --brand-glow: rgba(63, 94, 245, .26);
    --iris-2: #41E2FF;           /* secondary / gradient partner */
    --grad-primary: linear-gradient(135deg, #3f5ef5 0%, #41E2FF 100%);
    --grad-cta: linear-gradient(90deg, #3f5ef5, #41E2FF);

    /* semantic */
    --success: #22c55e;  --success-soft: #e9f9ef;  --success-text: #15803d;
    --warning: #f59e0b;  --warning-soft: #fdf5e3;  --warning-text: #b45309;
    --error:   #ef4444;  --error-soft:   #fdeeee;

    /* neutrals — slate light */
    --ink: #0f172a;
    --ink-2: #1e293b;
    --text: #475569;
    --muted: #6b6b6b;
    --faint: #5b6472;
    --accent: var(--iris-2);
    --mono: ui-monospace, "SF Mono", "Cascadia Code", "Segoe UI Mono", Consolas, monospace;
    --bg: #ffffff;
    --wash: #F7FAFF;
    --alt: #f1f5f9;
    --surface: #ffffff;
    --border: #E3E8F4;
    --border-strong: #CBD6E8;

    /* dark-panel tokens (used by ink sections in both modes) */
    --panel: #0f172a;
    --panel-2: #1e293b;
    --panel-border: #2c3b58;
    --panel-text: #CBD6E8;
    --panel-faint: #8494ad;

    /* geometry */
    --r-sm: 0.625rem; --r-md: 0.875rem; --r-lg: 1.25rem; --r-xl: 1.75rem; --pill: 62.4375rem;

    /* elevation */
    --sh-1: 0 1px 2px rgba(15,23,42,.04), 0 0.25rem 1rem rgba(15,23,42,.05);
    --sh-2: 0 2px 0.25rem rgba(15,23,42,.05), 0 0.75rem 2rem rgba(15,23,42,.09);
    --sh-3: 0 0.25rem 0.5rem rgba(15,23,42,.06), 0 1.75rem 4rem rgba(15,23,42,.14);
    --sh-brand: 0 0.5rem 1.5rem rgba(63,94,245,.3);

    /* motion */
    --ease: cubic-bezier(.21,.6,.35,1);
    --t-fast: .22s; --t-med: .4s; --t-slow: .7s;

    /* spacing scale (0.5rem system) */
    --s-1: 0.5rem; --s-2: 1rem; --s-3: 1.5rem; --s-4: 2rem;
    --s-6: 3rem; --s-8: 4rem; --s-12: 6rem; --s-16: 8rem;
  }

  /* dark theme — set by the header toggle ([data-theme="dark"]),
     or by system preference when the user hasn't chosen */
  :root[data-theme="dark"] {
    --ink: #f1f5f9;
    --ink-2: #E3E8F4;
    --text: #CBD6E8;
    --muted: #94a3b8;
    --faint: #8b98ac;
    --bg: #0b1120;
    --wash: #0d1526;
    --alt: #0d1526;
    --surface: #131c31;
    --border: #22304b;
    --border-strong: #334155;
    --brand-soft: #1a2450;
    --success-soft: #0c2b1c;
    --warning-soft: #2d2110;
    --success-text: #4ade80;
    --warning-text: #fbbf24;
    --sh-1: 0 1px 2px rgba(0,0,0,.3), 0 0.25rem 1rem rgba(0,0,0,.3);
    --sh-2: 0 2px 0.25rem rgba(0,0,0,.35), 0 0.75rem 2rem rgba(0,0,0,.4);
    --sh-3: 0 0.25rem 0.5rem rgba(0,0,0,.4), 0 1.75rem 4rem rgba(0,0,0,.5);
    --panel: #0d1526;
    --panel-2: #16203a;
    --panel-border: #2c3b58;
  }
  :root[data-theme="dark"] .wash-section,
  :root[data-theme="dark"] .alt-section { background: #0d1526 !important; }
  :root[data-theme="dark"] .hero { background: linear-gradient(180deg, #0b1120 0%, #0d1526 60%, #101b38 100%) !important; }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --ink: #f1f5f9;
      --ink-2: #E3E8F4;
      --text: #CBD6E8;
      --muted: #94a3b8;
      --faint: #8b98ac;
      --bg: #0b1120;
      --wash: #0d1526;
      --alt: #0d1526;
      --surface: #131c31;
      --border: #22304b;
      --border-strong: #334155;
      --brand-soft: #1a2450;
      --success-soft: #0c2b1c;
      --warning-soft: #2d2110;
      --success-text: #4ade80;
      --warning-text: #fbbf24;
      --sh-1: 0 1px 2px rgba(0,0,0,.3), 0 0.25rem 1rem rgba(0,0,0,.3);
      --sh-2: 0 2px 0.25rem rgba(0,0,0,.35), 0 0.75rem 2rem rgba(0,0,0,.4);
      --sh-3: 0 0.25rem 0.5rem rgba(0,0,0,.4), 0 1.75rem 4rem rgba(0,0,0,.5);
      --panel: #0d1526;
      --panel-2: #16203a;
      --panel-border: #2c3b58;
    }
    :root:not([data-theme="light"]) .wash-section,
    :root:not([data-theme="light"]) .alt-section { background: #0d1526 !important; }
    :root:not([data-theme="light"]) .hero { background: linear-gradient(180deg, #0b1120 0%, #0d1526 60%, #101b38 100%) !important; }
  }

  /* ── reset & base ─────────────────────────────────────────── */
  * { margin: 0; padding: 0; box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  ::selection { background: var(--brand); color: #fff; }
  img { max-width: 100%; }

  body {
    font-family: var(--font-text);
    background: var(--bg);
    color: var(--text);
    line-height: 1.7;
    font-size: 1rem;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
  }

  .container { max-width: 75rem; margin: 0 auto; padding: 0 var(--s-3); }

  h1,h2,h3,h4 {
    font-family: var(--font-display);
    color: var(--ink); letter-spacing: -0.025em; line-height: 1.15;
  }

  a:focus-visible, button:focus-visible {
    outline: 0.1875rem solid var(--brand);
    outline-offset: 0.1875rem;
  }

  /* skip link */
  .skip-link {
    position: absolute; left: -624.9375rem; top: 1rem; z-index: 2000;
    background: var(--brand); color: #fff; padding: 0.75rem 1.5rem;
    border-radius: var(--pill); text-decoration: none; font-weight: 600;
  }
  .skip-link:focus { left: 1rem; }

  /* scroll progress */
  .progress {
    position: fixed; top: 0; left: 0; height: 0.1875rem; width: 0;
    background: linear-gradient(90deg, var(--brand), var(--iris-2));
    z-index: 1500; transition: width .1s linear;
  }

  /* ── reveal system ────────────────────────────────────────── */
  .reveal { opacity: 0; transform: translateY(1.75rem); transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); }
  .reveal.in { opacity: 1; transform: none; }
  .reveal.d1 { transition-delay: .07s; } .reveal.d2 { transition-delay: .14s; }
  .reveal.d3 { transition-delay: .21s; } .reveal.d4 { transition-delay: .28s; }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .reveal { opacity: 1 !important; transform: none !important; transition: none; }
    * { animation: none !important; }
  }

  /* ── button system ────────────────────────────────────────── */
  .btn {
    position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.625rem;
    font-family: var(--font-text); font-weight: 600; font-size: 1rem;
    padding: 0.9375rem 1.875rem; border-radius: var(--r-sm);
    text-decoration: none; border: 1px solid transparent; cursor: pointer;
    transition: transform var(--t-fast) var(--ease), box-shadow var(--t-med) var(--ease),
                background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
    white-space: nowrap;
  }
  .btn:hover { transform: translateY(-1px); }
  .btn:active { transform: translateY(0) scale(.985); }
  .btn-primary { background: var(--grad-cta); color: #fff; box-shadow: var(--sh-brand); }
  .btn-primary:hover { background: linear-gradient(90deg, #3249d6, #3fa3f0); box-shadow: 0 0.75rem 2rem rgba(63,94,245,.38); }
  .btn-secondary { background: var(--ink); color: var(--bg); }
  .btn-secondary:hover { background: var(--ink-2); }
  .btn-outline { background: var(--surface); color: var(--ink); border-color: var(--border-strong); box-shadow: var(--sh-1); }
  .btn-outline:hover { border-color: var(--brand); color: var(--brand); }
  .btn-ghost-light { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.25); backdrop-filter: blur(0.5rem); }
  .btn-ghost-light:hover { background: rgba(255,255,255,.18); }
  .btn-on-dark { background: #fff; color: var(--panel); box-shadow: 0 0.625rem 1.875rem rgba(0,0,0,.25); }
  .btn-on-dark:hover { background: #eef4ff; }
  .btn .arr { transition: transform var(--t-fast) var(--ease); }
  .btn:hover .arr { transform: translateX(0.25rem); }

  /* ── header ───────────────────────────────────────────────── */
  .header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1020;
    border-bottom: 1px solid transparent;
    transition: background var(--t-med), border-color var(--t-med), box-shadow var(--t-med);
  }
  .header.scrolled {
    background: color-mix(in srgb, var(--bg) 82%, transparent);
    backdrop-filter: blur(1.125rem) saturate(1.4);
    border-bottom-color: var(--border);
    box-shadow: var(--sh-1);
  }
  .navbar { display: flex; align-items: center; justify-content: space-between; height: 4.75rem; }
  .navbar-brand {
    font-family: var(--font-display);
    color: var(--ink); text-decoration: none;
    font-size: 1.375rem; font-weight: 700; letter-spacing: -0.03em;
  }
  .navbar-brand .accent {
    background: linear-gradient(92deg, var(--brand), var(--iris-2));
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .navbar-nav { display: flex; align-items: center; gap: 2px; list-style: none; }
  .nav-link {
    position: relative; display: block; padding: 0.5625rem 0.8125rem;
    color: var(--muted); text-decoration: none;
    font-size: 0.875rem; font-weight: 500; border-radius: var(--r-sm);
    transition: color var(--t-fast), background var(--t-fast);
  }
  .nav-link:hover { color: var(--ink); background: var(--brand-soft); }
  .nav-link.active { color: var(--brand); font-weight: 650; }
  .navbar .btn { padding: 0.625rem 1.375rem; font-size: 0.875rem; margin-left: var(--s-2); }

  /* dropdown menus */
  .nav-item { position: relative; }
  .nav-item > .nav-link { display: inline-flex; align-items: center; gap: 0.375rem; }
  .nav-item > .nav-link .caret { width: 0.6875rem; height: 0.6875rem; transition: transform var(--t-fast) var(--ease); }
  .nav-item:hover > .nav-link .caret,
  .nav-item:focus-within > .nav-link .caret { transform: rotate(180deg); }
  .dropdown {
    position: absolute; top: calc(100% + 0.5rem); left: 0; min-width: 15.625rem; z-index: 1030;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-md); box-shadow: var(--sh-3);
    padding: 0.5rem; list-style: none;
    opacity: 0; visibility: hidden; transform: translateY(0.625rem); pointer-events: none;
    transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), visibility var(--t-fast);
  }
  .nav-item::after { /* hover bridge so the menu doesn't close in the gap */
    content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 0.75rem;
  }
  .nav-item:hover .dropdown,
  .nav-item:focus-within .dropdown {
    opacity: 1; visibility: visible; transform: none; pointer-events: auto;
  }
  .dropdown a {
    display: block; padding: 0.5625rem 0.875rem; border-radius: 0.625rem;
    color: var(--text); text-decoration: none; font-size: 0.875rem; font-weight: 500;
    transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast) var(--ease);
  }
  .dropdown a:hover { background: var(--brand-soft); color: var(--brand); transform: translateX(2px); }
  .nav-item.nav-item-end .dropdown { left: auto; right: 0; }  /* keep last menu on-screen */

  /* theme toggle */
  .theme-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.5rem; height: 2.5rem; border-radius: 50%;
    background: transparent; border: 1px solid var(--border-strong);
    color: var(--muted); cursor: pointer; margin-left: var(--s-1);
    transition: color var(--t-fast), border-color var(--t-fast),
                background var(--t-fast), transform var(--t-med) var(--ease);
  }
  .theme-toggle:hover {
    color: var(--brand); border-color: var(--brand);
    background: var(--brand-soft); transform: rotate(20deg);
  }
  .theme-toggle svg { width: 1.1875rem; height: 1.1875rem; }
  .theme-toggle .ico-sun { display: none; }
  :root[data-theme="dark"] .theme-toggle .ico-sun { display: block; }
  :root[data-theme="dark"] .theme-toggle .ico-moon { display: none; }

  /* hamburger — mobile only */
  .nav-burger {
    display: none; position: relative;
    width: 2.5rem; height: 2.5rem; border-radius: var(--r-sm);
    background: transparent; border: 1px solid var(--border-strong);
    cursor: pointer; margin-left: var(--s-1); flex-shrink: 0;
  }
  .nav-burger span {
    position: absolute; left: 0.625rem; right: 0.625rem; height: 2px; border-radius: 2px;
    background: var(--ink); transition: transform var(--t-med) var(--ease), opacity var(--t-fast), top var(--t-med) var(--ease);
  }
  .nav-burger span:nth-child(1) { top: 0.8125rem; }
  .nav-burger span:nth-child(2) { top: 1.1875rem; }
  .nav-burger span:nth-child(3) { top: 1.5625rem; }
  .nav-burger[aria-expanded="true"] span:nth-child(1) { top: 1.1875rem; transform: rotate(45deg); }
  .nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-burger[aria-expanded="true"] span:nth-child(3) { top: 1.1875rem; transform: rotate(-45deg); }

  /* mobile menu panel */
  .mobile-menu {
    position: fixed; top: 4.75rem; left: 0; right: 0; z-index: 1010;
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    backdrop-filter: blur(1.125rem) saturate(1.4);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--sh-2);
    padding: var(--s-2) var(--s-3) var(--s-3);
    max-height: calc(100vh - 4.75rem); overflow-y: auto;
    opacity: 0; transform: translateY(-0.625rem); pointer-events: none; visibility: hidden;
    transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease), visibility var(--t-med);
  }
  .mobile-menu.open { opacity: 1; transform: none; pointer-events: auto; visibility: visible; }
  .mobile-menu ul { list-style: none; }
  .mobile-menu .nav-link {
    display: block; padding: 0.875rem 0.625rem;
    font-family: var(--font-display); font-size: 1rem; font-weight: 600;
    color: var(--ink); border-bottom: 1px solid var(--border); border-radius: 0;
  }
  .mobile-menu .nav-link:hover { color: var(--brand); background: transparent; }
  .mobile-menu .btn { width: 100%; margin: var(--s-2) 0 0; }

  /* ── hero ─────────────────────────────────────────────────── */
  .hero {
    position: relative; overflow: hidden;
    padding: 11rem 0 0;
    background: linear-gradient(180deg, #ffffff 0%, #F7FAFF 45%, #eef4ff 100%);
  }
  .hero-light {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background:
      radial-gradient(52% 42% at 78% 6%, var(--brand-glow), transparent 68%),
      radial-gradient(40% 34% at 8% 30%, rgba(5,176,136,.14), transparent 70%);
    filter: blur(3.25rem); opacity: .8;
  }
  .hero-grid-lines {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image:
      linear-gradient(var(--border) 1px, transparent 1px),
      linear-gradient(90deg, var(--border) 1px, transparent 1px);
    background-size: 4.5rem 4.5rem; opacity: .5;
    mask-image: radial-gradient(70% 60% at 50% 20%, #000 20%, transparent 100%);
  }
  .hero .container { position: relative; z-index: 2; }
  .hero-split { display: grid; grid-template-columns: 7fr 5fr; gap: var(--s-8); align-items: center; }

  .hero-badge {
    display: inline-flex; align-items: center; gap: 0.625rem;
    background: var(--surface); color: var(--ink);
    border: 1px solid var(--border); box-shadow: var(--sh-1);
    font-size: 0.8125rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
    padding: 0.5rem 1.125rem; border-radius: var(--pill); margin-bottom: var(--s-3);
  }
  .hero-badge .stars { color: var(--warning); letter-spacing: .12em; font-size: 0.75rem; }
  .hero-badge .dot {
    width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--success);
    box-shadow: 0 0 0 0 rgba(34,197,94,.5); animation: pulse 2.2s infinite;
  }
  @keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(34,197,94,.45); }
    70% { box-shadow: 0 0 0 0.5625rem rgba(34,197,94,0); }
    100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
  }

  .hero-title {
    font-size: clamp(2.125rem, 4.4vw, 3.75rem); font-weight: 700;
    letter-spacing: -0.035em; line-height: 1.08;
    margin-bottom: var(--s-3); text-wrap: balance;
  }
  .hero-title .grad {
    background: linear-gradient(92deg, var(--brand) 10%, var(--iris-2) 90%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .hero .lead {
    font-size: clamp(1rem, 1.8vw, 1.1875rem); color: var(--muted);
    max-width: 35rem; margin-bottom: var(--s-4);
  }
  .hero-actions { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-bottom: var(--s-6); }

  /* floating ui cards */
  .hero-visual { position: relative; min-height: 23.75rem; }
  .fcard {
    position: absolute;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-md); box-shadow: var(--sh-2);
    padding: 1.125rem 1.375rem; display: flex; align-items: center; gap: 0.875rem;
    animation: floaty 7s ease-in-out infinite;
  }
  .fcard .fi {
    width: 2.5rem; height: 2.5rem; border-radius: 0.875rem; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
  }
  .fcard .fi svg { width: 1.25rem; height: 1.25rem; }
  .fcard .ft { font-family: var(--font-display); font-weight: 600; font-size: 0.875rem; color: var(--ink); line-height: 1.3; }
  .fcard .fs { font-size: 0.75rem; color: var(--faint); }
  .fcard-1 { top: 6%; right: 8%; animation-delay: 0s; }
  .fcard-1 .fi { background: var(--brand-soft); color: var(--brand); }
  .fcard-2 { top: 40%; right: 32%; animation-delay: 1.6s; }
  .fcard-2 .fi { background: var(--success-soft); color: var(--success-text); }
  .fcard-3 { top: 74%; right: 2%; animation-delay: 3.2s; }
  .fcard-3 .fi { background: var(--warning-soft); color: var(--warning-text); }
  @keyframes floaty {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-0.75rem); }
  }
  .hero-visual .ring {
    position: absolute; right: -8%; top: 50%; transform: translateY(-50%);
    width: 30rem; height: 30rem; border-radius: 50%;
    border: 1px dashed var(--border-strong); opacity: .8;
  }
  .hero-visual .ring::before {
    content: ""; position: absolute; inset: 3.5rem; border-radius: 50%;
    border: 1px dashed var(--border);
  }

  /* stats — slim editorial row */
  .stats {
    position: relative; z-index: 2;
    display: grid; grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--border);
    margin-top: var(--s-4);
  }
  .stat { padding: var(--s-4) var(--s-3); border-left: 1px solid var(--border); }
  .stat:first-child { border-left: 0; padding-left: 0; }
  .stat .num {
    font-family: var(--font-display);
    font-size: clamp(1.625rem, 2.6vw, 2.375rem); font-weight: 700; color: var(--ink); letter-spacing: -0.03em;
  }
  .stat .num span { color: var(--brand); }
  .stat .lbl { font-size: 0.75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); margin-top: 2px; font-weight: 600; }

  /* ── marquee ──────────────────────────────────────────────── */
  .marquee {
    position: relative; overflow: hidden; padding: 1.375rem 0;
    border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
    background: var(--wash);
  }
  .marquee::before, .marquee::after {
    content: ""; position: absolute; top: 0; bottom: 0; width: 7.5rem; z-index: 2; pointer-events: none;
  }
  .marquee::before { left: 0; background: linear-gradient(90deg, var(--bg), transparent); }
  .marquee::after { right: 0; background: linear-gradient(-90deg, var(--bg), transparent); }
  .marquee .track { display: flex; gap: 3.5rem; width: max-content; animation: scroll 32s linear infinite; }
  .marquee:hover .track { animation-play-state: paused; }
  @keyframes scroll { to { transform: translateX(-50%); } }
  .marquee .item {
    display: flex; align-items: center; gap: 0.875rem; white-space: nowrap;
    color: var(--muted); font-size: 0.8125rem; font-weight: 600;
    letter-spacing: .08em; text-transform: uppercase;
    font-family: var(--font-display);
  }
  .marquee .item::before { content: "◆"; color: var(--brand); font-size: 0.5rem; }

  /* ── sections ─────────────────────────────────────────────── */
  section { padding: var(--s-16) 0; }
  section[id] { scroll-margin-top: 5.75rem; }  /* anchors land clear of the fixed header */
  section.wash-section { background: var(--wash); }
  section.alt-section { background: var(--alt); }
  .section-title { text-align: center; margin-bottom: var(--s-8); }
  .kicker {
    display: inline-flex; align-items: center; gap: 0.5rem;
    font-family: var(--font-display);
    font-size: 0.8125rem; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; color: var(--brand);
    margin-bottom: var(--s-2);
  }
  .kicker::before, .kicker::after { content: ""; width: 1.5rem; height: 1px; background: linear-gradient(90deg, transparent, var(--brand)); }
  .kicker::after { background: linear-gradient(-90deg, transparent, var(--brand)); }
  .section-title h2 {
    font-size: clamp(1.75rem, 3.6vw, 2.75rem); font-weight: 700;
    margin: 0 auto var(--s-2); max-width: 51.25rem; text-wrap: balance;
  }
  .section-title .sub {
    font-size: clamp(1rem, 1.8vw, 1.125rem); color: var(--muted);
    max-width: 40rem; margin: 0 auto; text-wrap: balance;
  }
  .section-cta { text-align: center; margin-top: var(--s-8); }

  /* ── positioning — editorial split ───────────────────────── */
  .positioning { padding: var(--s-12) 0; }
  .positioning .grid { display: grid; grid-template-columns: 5fr 6fr; gap: var(--s-8); align-items: center; }
  .positioning .kicker { justify-content: flex-start; }
  .positioning .kicker::after { display: none; }
  .positioning h2 { font-size: clamp(1.75rem, 3.4vw, 2.625rem); font-weight: 700; margin-bottom: var(--s-2); }
  .positioning p { color: var(--muted); font-size: 1.0625rem; }
  .quote-card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-2);
    padding: var(--s-6);
    overflow: hidden;
  }
  .quote-card::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 0.25rem;
    background: linear-gradient(180deg, var(--brand), var(--iris-2));
  }
  .quote-card .myth {
    display: inline-block; color: var(--faint); text-decoration: line-through;
    background: var(--wash); border: 1px solid var(--border); border-radius: var(--pill);
    padding: 0.4375rem 1rem; margin-bottom: var(--s-2); font-size: 0.875rem;
  }
  .quote-card .truth {
    font-family: var(--font-display);
    color: var(--ink); font-weight: 600; font-size: clamp(1.125rem, 2vw, 1.375rem);
    line-height: 1.45; display: block; letter-spacing: -0.015em;
  }
  .quote-card .truth .hl {
    background: linear-gradient(92deg, var(--brand), var(--iris-2));
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }

  /* ── why — dark panel, numbered pillars ──────────────────── */
  .why {
    background: var(--panel); color: var(--panel-text);
    position: relative; overflow: hidden;
  }
  .why .glow {
    position: absolute; width: 62.5rem; height: 32.5rem; left: 50%; top: -18.75rem;
    transform: translateX(-50%); filter: blur(6.25rem); opacity: .45; pointer-events: none;
    background: radial-gradient(closest-side, rgba(63,94,245,.5), transparent);
  }
  .why .container { position: relative; }
  .why .section-title h2 { color: #fff; }
  .why .kicker { color: var(--iris-2); }
  .why .kicker::before { background: linear-gradient(90deg, transparent, var(--iris-2)); }
  .why .kicker::after { background: linear-gradient(-90deg, transparent, var(--iris-2)); }
  .why .section-title .sub { color: var(--panel-faint); }

  .why-formula {
    background: rgba(255,255,255,.03);
    border: 1px solid var(--panel-border);
    border-radius: var(--r-lg); backdrop-filter: blur(0.5rem);
    padding: var(--s-6); max-width: 50rem; margin: 0 auto var(--s-8); text-align: center;
  }
  .why-formula .formula {
    display: flex; align-items: center; justify-content: center; gap: var(--s-2);
    flex-wrap: wrap; margin-bottom: var(--s-3);
    font-family: var(--font-display); font-weight: 600; font-size: 1.125rem;
  }
  .why-formula .chip {
    background: rgba(5,176,136,.14); color: #7fe0cd;
    border: 1px solid rgba(8,174,134,.4);
    padding: 0.6875rem 1.625rem; border-radius: var(--pill);
  }
  .why-formula .op { color: var(--panel-faint); font-size: 1.375rem; }
  .why-formula .chip.result {
    background: linear-gradient(92deg, var(--brand), var(--iris-2)); color: #fff; border: none;
    box-shadow: 0 0.5rem 1.875rem rgba(63,94,245,.4);
  }
  .why-formula p { color: var(--panel-faint); max-width: 40rem; margin: 0 auto; }

  .why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); counter-reset: why; }
  .why-item {
    position: relative; counter-increment: why;
    background: var(--panel-2);
    border: 1px solid var(--panel-border);
    border-radius: var(--r-md); padding: var(--s-4) var(--s-3) var(--s-3);
    transition: border-color var(--t-med), transform var(--t-med) var(--ease), background var(--t-med);
  }
  .why-item::before {
    content: "0" counter(why);
    position: absolute; top: 1.125rem; right: 1.25rem;
    font-family: var(--font-display); font-size: 0.8125rem; font-weight: 700;
    color: var(--panel-faint); opacity: .7; letter-spacing: .05em;
  }
  .why-item:hover {
    border-color: rgba(8,174,134,.55); background: #1f2a47;
    transform: translateY(-0.25rem);
  }
  .why-item h3 { color: #fff; font-size: 1.125rem; font-weight: 600; margin-bottom: 0.625rem; padding-right: 2.25rem; }
  .why-item p { color: var(--panel-faint); font-size: 0.875rem; }

  .why-note {
    text-align: center; color: var(--panel-faint); font-size: 1rem;
    max-width: 45rem; margin: var(--s-8) auto 0;
  }
  .why-note strong { color: #fff; }

  /* ── services — premium cards ────────────────────────────── */
  .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }
  .card {
    position: relative; overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-1);
    padding: var(--s-4);
    transition: box-shadow var(--t-med) var(--ease), transform var(--t-med) var(--ease), border-color var(--t-fast);
  }
  .card::before {
    content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity var(--t-med);
    background: radial-gradient(28.75rem circle at var(--mx, 50%) var(--my, 50%), rgba(63,94,245,.06), transparent 65%);
    pointer-events: none;
  }
  .card::after {  /* top gradient hairline on hover */
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 0.1875rem;
    background: linear-gradient(90deg, var(--brand), var(--iris-2));
    transform: scaleX(0); transform-origin: left; transition: transform var(--t-med) var(--ease);
  }
  .card:hover::before { opacity: 1; }
  .card:hover::after { transform: scaleX(1); }
  .card:hover { transform: translateY(-0.3125rem); box-shadow: var(--sh-3); border-color: var(--border-strong); }
  .card .icon {
    width: 2.875rem; height: 2.875rem; border-radius: 0.875rem;
    display: flex; align-items: center; justify-content: center;
    background: var(--brand-soft); color: var(--brand);
    border: 1px solid color-mix(in srgb, var(--brand) 18%, transparent);
    margin-bottom: var(--s-2);
    transition: transform var(--t-med) var(--ease), background var(--t-fast), color var(--t-fast);
  }
  .card:hover .icon { transform: scale(1.06); background: var(--brand); color: #fff; }
  .card .icon svg { width: 1.375rem; height: 1.375rem; }
  .card h3 { font-size: 1.125rem; font-weight: 700; margin-bottom: var(--s-1); }
  .card > p { color: var(--muted); font-size: 0.875rem; margin-bottom: var(--s-2); }
  .card ul { list-style: none; }
  .card li { font-size: 0.875rem; padding: 0.3125rem 0 0.3125rem 1.625rem; position: relative; color: var(--text); }
  .card li::before {
    content: ""; position: absolute; left: 0; top: 0.5625rem;
    width: 1rem; height: 1rem; border-radius: 50%;
    background-color: var(--brand-soft);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233f5ef5' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
    background-size: 0.5625rem; background-position: center; background-repeat: no-repeat;
  }
  .card.card-cta {
    display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
    background: linear-gradient(var(--surface), var(--surface)) padding-box,
                linear-gradient(135deg, var(--brand), var(--iris-2)) border-box;
    border: 2px solid transparent;
  }
  .card.card-cta h3 { font-size: 1.25rem; margin-bottom: var(--s-2); }
  .card.card-cta p { font-size: 0.875rem; margin-bottom: var(--s-3); }
  .card.card-cta .btn { padding: 0.75rem 1.375rem; font-size: 0.875rem; }

  /* ── works — portfolio cards ─────────────────────────────── */
  .works { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }
  .work {
    position: relative; overflow: hidden; display: flex; flex-direction: column;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-lg); box-shadow: var(--sh-1);
    text-decoration: none;
    transition: box-shadow var(--t-med) var(--ease), transform var(--t-med) var(--ease), border-color var(--t-fast);
  }
  .work:hover { transform: translateY(-0.375rem); box-shadow: var(--sh-3); border-color: var(--border-strong); }
  .work .thumb {
    position: relative; height: 11.875rem; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
  }
  .work .thumb .mono {
    font-family: var(--font-display); font-weight: 800; letter-spacing: -0.04em;
    font-size: 3.25rem; color: rgba(255,255,255,.92);
    text-shadow: 0 0.5rem 1.875rem rgba(0,0,0,.25);
    transition: transform var(--t-med) var(--ease);
  }
  .work:hover .thumb .mono { transform: scale(1.07); }
  .work .thumb::after {  /* soft scrim grounds the screenshot against the card */
    content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background: linear-gradient(180deg, transparent 70%, rgba(15,23,42,.18));
    border-bottom: 1px solid var(--border);
  }
  .work.w1 .thumb { background: linear-gradient(135deg, #2563eb, #41E2FF); }
  .work.w2 .thumb { background: linear-gradient(135deg, #0ea5e9, #2563eb); }
  .work.w3 .thumb { background: linear-gradient(135deg, #41E2FF, #db2777); }
  .work .body { padding: var(--s-3) var(--s-3) var(--s-4); display: flex; flex-direction: column; flex: 1; }
  .work .tag {
    align-self: flex-start;
    font-family: var(--font-display); font-size: 0.75rem; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase;
    background: var(--brand-soft); color: var(--brand);
    padding: 0.3125rem 0.75rem; border-radius: var(--pill); margin-bottom: var(--s-2);
  }
  .work h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.5rem; }
  .work p { color: var(--muted); font-size: 0.875rem; flex: 1; }
  .work .view {
    margin-top: var(--s-2); font-size: 0.875rem; font-weight: 600; color: var(--brand);
    display: inline-flex; align-items: center; gap: 0.4375rem;
  }
  .work .view .arr { transition: transform var(--t-fast) var(--ease); }
  .work:hover .view .arr { transform: translateX(0.25rem); }

  /* ── clients — logo wall ─────────────────────────────────── */
  .clients-intro { max-width: 45rem; margin: 0 auto var(--s-6); text-align: center; color: var(--muted); font-size: 1.0625rem; }
  .logo-wall { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2); }
  .logo-wall .client {
    display: inline-flex; align-items: center; gap: 0.625rem;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--pill); box-shadow: var(--sh-1);
    padding: 0.75rem 1.5rem;
    font-family: var(--font-display); font-weight: 600; font-size: 0.875rem; color: var(--ink-2);
    transition: transform var(--t-fast) var(--ease), border-color var(--t-fast), box-shadow var(--t-med) var(--ease);
  }
  .logo-wall .client::before { content: "◆"; color: var(--brand); font-size: 0.5rem; }
  .logo-wall .client:hover { transform: translateY(-0.1875rem); border-color: var(--brand); box-shadow: var(--sh-2); }

  /* ── testimonials — masonry columns ───────────────────────── */
  .t-wall { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); align-items: stretch; }
  .t-card {
    break-inside: avoid; margin-bottom: var(--s-3);
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-lg); box-shadow: var(--sh-1);
    padding: var(--s-4);
    transition: box-shadow var(--t-med) var(--ease), transform var(--t-med) var(--ease), border-color var(--t-fast);
  }
  .t-card:hover { transform: translateY(-0.25rem); box-shadow: var(--sh-2); border-color: var(--border-strong); }
  .t-card .qmark {
    font-family: var(--font-display); font-size: 2.5rem; font-weight: 800; line-height: 1;
    background: linear-gradient(92deg, var(--brand), var(--iris-2));
    -webkit-background-clip: text; background-clip: text; color: transparent;
    display: block; margin-bottom: 0.375rem;
  }
  .t-card blockquote { border: 0; color: var(--text); font-size: 0.9375rem; line-height: 1.75; margin-bottom: var(--s-3); }
  .t-card .who { display: flex; align-items: center; gap: 0.8125rem; border-top: 1px dashed var(--border); padding-top: var(--s-2); }
  .t-card .avatar {
    width: 2.625rem; height: 2.625rem; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-weight: 700; font-size: 0.9375rem; color: #fff;
    background: var(--grad-primary);
  }
  .t-card:nth-child(3n+2) .avatar { background: linear-gradient(135deg, #0ea5e9, #2563eb); }
  .t-card:nth-child(3n) .avatar { background: linear-gradient(135deg, #41E2FF, #db2777); }
  .t-card .who .n { font-family: var(--font-display); font-weight: 700; font-size: 0.875rem; color: var(--ink); line-height: 1.3; }
  .t-card .who .r { font-size: 0.8125rem; color: var(--faint); }

  /* ── blog cards ───────────────────────────────────────────── */
  .posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }
  .post {
    position: relative; overflow: hidden; display: flex; flex-direction: column;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-lg); box-shadow: var(--sh-1);
    padding: var(--s-4); text-decoration: none;
    transition: box-shadow var(--t-med) var(--ease), transform var(--t-med) var(--ease), border-color var(--t-fast);
  }
  .post::after {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 0.1875rem;
    background: linear-gradient(90deg, var(--brand), var(--iris-2));
    transform: scaleX(0); transform-origin: left; transition: transform var(--t-med) var(--ease);
  }
  .post:hover { transform: translateY(-0.3125rem); box-shadow: var(--sh-3); border-color: var(--border-strong); }
  .post:hover::after { transform: scaleX(1); }
  .post .meta { display: flex; align-items: center; gap: 0.625rem; margin-bottom: var(--s-2); flex-wrap: wrap; }
  .post .cat {
    font-family: var(--font-display); font-size: 0.75rem; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase;
    background: var(--brand-soft); color: var(--brand);
    padding: 0.3125rem 0.75rem; border-radius: var(--pill);
  }
  .post time { font-size: 0.8125rem; color: var(--faint); font-weight: 600; }
  .post h3 { font-size: 1.125rem; font-weight: 700; line-height: 1.35; margin-bottom: 0.625rem; transition: color var(--t-fast); }
  .post:hover h3 { color: var(--brand); }
  .post p { color: var(--muted); font-size: 0.875rem; flex: 1; }
  .post .read {
    margin-top: var(--s-2); font-size: 0.875rem; font-weight: 600; color: var(--brand);
    display: inline-flex; align-items: center; gap: 0.4375rem;
  }
  .post .read .arr { transition: transform var(--t-fast) var(--ease); }
  .post:hover .read .arr { transform: translateX(0.25rem); }

  /* ── cta ──────────────────────────────────────────────────── */
  .cta { padding: var(--s-12) 0 var(--s-16); }
  .cta .box {
    position: relative; overflow: hidden; text-align: center;
    background: var(--panel);
    border-radius: var(--r-xl); padding: var(--s-12) var(--s-4); color: #fff;
  }
  .cta .box .glow {
    position: absolute; inset: -40%; filter: blur(5rem); opacity: .5; pointer-events: none;
    background:
      radial-gradient(38% 48% at 28% 30%, rgba(63,94,245,.5), transparent 70%),
      radial-gradient(32% 42% at 72% 72%, rgba(8,174,134,.4), transparent 70%);
    animation: drift 16s ease-in-out infinite alternate;
  }
  @keyframes drift {
    0%   { transform: scale(1) translate(0,0); }
    100% { transform: scale(1.08) translate(2%, -2%); }
  }
  .cta .inner { position: relative; }
  .cta .kicker { color: var(--iris-2); }
  .cta .kicker::before { background: linear-gradient(90deg, transparent, var(--iris-2)); }
  .cta .kicker::after { background: linear-gradient(-90deg, transparent, var(--iris-2)); }
  .cta h2 {
    color: #fff; font-size: clamp(1.6875rem, 3.6vw, 2.75rem);
    font-weight: 700; margin-bottom: var(--s-2); text-wrap: balance;
  }
  .cta p { color: var(--panel-text); max-width: 40rem; margin: 0 auto var(--s-4); font-size: 1.0625rem; }
  .cta .cta-actions { display: flex; gap: var(--s-2); justify-content: center; flex-wrap: wrap; }
  .cta .contact-line { margin-top: var(--s-4); font-size: 0.9375rem; color: var(--panel-faint); }
  .cta .contact-line a { color: #fff; text-decoration: none; }
  .cta .contact-line a:hover { color: var(--iris-2); }

  /* ── footer ───────────────────────────────────────────────── */
  .footer {
    padding: var(--s-12) 0 var(--s-4); background: var(--panel);
    color: var(--panel-text);
  }
  .footer .footer-grid { display: grid; grid-template-columns: 4fr 1fr 4fr 3fr; gap: var(--s-4); }
  .footer .logo {
    font-family: var(--font-display);
    color: #fff; font-size: 1.4375rem; font-weight: 700; letter-spacing: -0.03em;
  }
  .footer .logo .accent {
    background: linear-gradient(92deg, var(--brand), var(--iris-2));
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .footer .brand-blurb { font-size: 0.875rem; line-height: 1.75; color: var(--panel-faint); margin: var(--s-2) 0 var(--s-3); }
  .footer h3 {
    font-family: var(--font-display);
    color: var(--panel-faint); font-size: 0.75rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .08em; margin: var(--s-3) 0 var(--s-1);
  }
  .footer h3:first-child { margin-top: 0; }
  .footer p, .footer li { font-size: 0.875rem; line-height: 1.75; }
  .footer a { color: var(--panel-text); text-decoration: none; transition: color var(--t-fast); }
  .footer a:hover { color: #fff; }
  .footer ul { list-style: none; margin-bottom: var(--s-3); }
  .footer .social-links { display: flex; gap: 0.625rem; }
  .footer .social-links a {
    display: flex; align-items: center; justify-content: center;
    width: 2.625rem; height: 2.625rem; border-radius: 0.875rem;
    background: rgba(255,255,255,.07); border: 1px solid var(--panel-border);
    color: #fff; font-size: 0.875rem; font-weight: 600;
    transition: background var(--t-fast), transform var(--t-fast) var(--ease), border-color var(--t-fast);
  }
  .footer .social-links a:hover { background: var(--brand); border-color: var(--brand); transform: translateY(-0.1875rem); color: #fff; }
  .footer .copyright {
    border-top: 1px solid var(--panel-border);
    margin-top: var(--s-8); padding-top: var(--s-3);
    font-size: 0.875rem; color: var(--panel-faint); text-align: center;
  }

  /* ── chatbot ──────────────────────────────────────────────── */
  .chatbot { position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 1100; }
  .chat-toggle {
    position: relative;
    width: 3.75rem; height: 3.75rem; border-radius: 50%;
    background: var(--grad-primary);
    color: #fff; border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0.875rem 2.25rem rgba(63,94,245,.4);
    transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
  }
  .chat-toggle:hover { transform: translateY(-0.1875rem) scale(1.05); box-shadow: 0 1.25rem 2.75rem rgba(63,94,245,.5); }
  .chat-toggle svg { width: 1.6875rem; height: 1.6875rem; transition: opacity var(--t-fast), transform var(--t-med) var(--ease); }
  .chat-toggle .ico-close { position: absolute; opacity: 0; transform: rotate(-90deg) scale(.6); }
  .chatbot.open .chat-toggle .ico-chat { opacity: 0; transform: rotate(90deg) scale(.6); }
  .chatbot.open .chat-toggle .ico-close { opacity: 1; transform: none; }
  .chat-toggle .online {
    position: absolute; top: 2px; right: 2px;
    width: 0.8125rem; height: 0.8125rem; border-radius: 50%;
    background: var(--success); border: 2.5px solid var(--bg);
    box-shadow: 0 0 0 0 rgba(34,197,94,.5); animation: pulse 2.2s infinite;
  }
  .chat-panel {
    position: absolute; right: 0; bottom: 4.75rem;
    width: 21.5rem; max-width: calc(100vw - 3rem);
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-3);
    overflow: hidden;
    opacity: 0; transform: translateY(1rem) scale(.97); pointer-events: none;
    transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease);
  }
  .chatbot.open .chat-panel { opacity: 1; transform: none; pointer-events: auto; }
  .chat-head {
    background: var(--grad-primary); color: #fff;
    padding: 1.25rem 1.375rem; display: flex; align-items: center; gap: 0.875rem;
  }
  .chat-head .avatar {
    width: 2.625rem; height: 2.625rem; border-radius: 0.875rem; flex-shrink: 0;
    background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.3);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem;
  }
  .chat-head .t { font-family: var(--font-display); font-weight: 600; font-size: 1rem; line-height: 1.3; }
  .chat-head .s { font-size: 0.8125rem; color: rgba(255,255,255,.85); display: flex; align-items: center; gap: 0.375rem; }
  .chat-head .s::before { content: ""; width: 0.4375rem; height: 0.4375rem; border-radius: 50%; background: #86efac; }
  .chat-body { padding: 1.25rem; background: var(--wash); }
  .chat-msg {
    background: var(--surface); border: 1px solid var(--border); border-radius: 0.875rem 1rem 1rem 0.25rem;
    box-shadow: var(--sh-1);
    padding: 0.875rem 1rem; font-size: 0.875rem; color: var(--text); margin-bottom: 0.875rem;
  }
  .chat-actions { display: flex; flex-direction: column; gap: 0.5625rem; }
  .chat-action {
    display: flex; align-items: center; gap: 0.6875rem;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm);
    padding: 0.75rem 0.9375rem; text-decoration: none;
    color: var(--ink); font-size: 0.875rem; font-weight: 600;
    transition: border-color var(--t-fast), transform var(--t-fast) var(--ease), box-shadow var(--t-fast);
  }
  .chat-action:hover { border-color: var(--brand); transform: translateX(0.1875rem); box-shadow: var(--sh-1); }
  .chat-action .ci {
    width: 2.125rem; height: 2.125rem; border-radius: 0.625rem; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
  }
  .chat-action .ci svg { width: 1.0625rem; height: 1.0625rem; }
  .chat-action:nth-child(1) .ci { background: var(--brand-soft); color: var(--brand); }
  .chat-action:nth-child(2) .ci { background: var(--success-soft); color: var(--success-text); }
  .chat-action:nth-child(3) .ci { background: var(--warning-soft); color: var(--warning-text); }
  .chat-foot {
    padding: 0.625rem; text-align: center; font-size: 0.75rem;
    color: var(--faint); background: var(--surface); border-top: 1px solid var(--border);
  }

  /* ── imagery ──────────────────────────────────────────────── */
  .card .media {
    height: 9.375rem; overflow: hidden;
    margin: calc(-1 * var(--s-4)) calc(-1 * var(--s-4)) var(--s-3);
    border-bottom: 1px solid var(--border);  /* hairline seats the image into the card */
  }
  .card .media img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform var(--t-slow) var(--ease);
  }
  .card:hover .media img { transform: scale(1.05); }

  .work .thumb img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; display: block; z-index: 1;
    transition: transform var(--t-med) var(--ease);
  }
  .work:hover .thumb img { transform: scale(1.06); }

  /* client logo marquee */
  .logo-strip {
    position: relative; overflow: hidden; padding: 0.5rem 0;
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  }
  .logo-strip + .logo-strip { margin-top: var(--s-2); }
  .logo-track { display: flex; gap: var(--s-2); width: max-content; animation: scroll 70s linear infinite; }
  .logo-strip.rev .logo-track { animation-direction: reverse; }
  .logo-strip:hover .logo-track { animation-play-state: paused; }
  .logo-pill {
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    height: 4.875rem; padding: 0.875rem 1.625rem;
    background: var(--panel-2); border: 1px solid var(--panel-border);  /* white-knockout logos need a dark surface; panel-2 stays distinct from dark-mode section backgrounds */
    border-radius: var(--r-md); box-shadow: var(--sh-1);
  }
  .logo-pill img {
    max-height: 2.875rem; max-width: 8.75rem; width: auto; object-fit: contain; display: block;
    image-rendering: -webkit-optimize-contrast;  /* sharper downscaled PNG logos in Chromium */
  }

  /* accreditations */
  .accr { display: flex; justify-content: center; align-items: center; gap: var(--s-2); margin-top: var(--s-8); flex-wrap: wrap; }
  .accr .accr-label {
    width: 100%; text-align: center;
    font-family: var(--font-display); font-size: 0.75rem; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase; color: var(--faint);
    margin-bottom: 0.375rem;
  }
  .accr .a-badge {
    background: var(--panel-2); border: 1px solid var(--panel-border);  /* white-knockout badge art needs a dark surface; panel-2 stays distinct in dark mode */
    border-radius: var(--r-md); box-shadow: var(--sh-1);
    padding: 0.875rem 1.625rem;
    transition: transform var(--t-fast) var(--ease), box-shadow var(--t-med) var(--ease);
  }
  .accr .a-badge:hover { transform: translateY(-0.1875rem); box-shadow: var(--sh-2); }
  .accr .a-badge img { height: 2.875rem; width: auto; display: block; image-rendering: -webkit-optimize-contrast; }

  .post .media {
    height: 10.9375rem; overflow: hidden;
    margin: calc(-1 * var(--s-4)) calc(-1 * var(--s-4)) var(--s-3);
    border-bottom: 1px solid var(--border);
  }
  .post .media img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform var(--t-slow) var(--ease);
  }
  .post:hover .media img { transform: scale(1.05); }

  .why-item .wicon {
    width: 3.375rem; height: 3.375rem; border-radius: 0.875rem;
    display: flex; align-items: center; justify-content: center;
    background: #fff; border: 1px solid var(--panel-border);  /* white chip keeps PNG icons legible on the dark panel */
    box-shadow: 0 0.375rem 1.125rem rgba(0,0,0,.25);
    margin-bottom: var(--s-2);
  }
  .why-item .wicon img { width: 1.875rem; height: 1.875rem; object-fit: contain; display: block; }

  .cta .bg-img {
    position: absolute; inset: 0; pointer-events: none; opacity: .16;
    background: url("/images/cta.jpg") center/cover no-repeat;
  }

  /* ── responsive ───────────────────────────────────────────── */
  @media (max-width: 67.5rem) {
    .hero-split { grid-template-columns: 1fr; gap: var(--s-6); }
    .hero-visual { min-height: 18.75rem; }
    .hero-visual .ring { right: 10%; width: 23.75rem; height: 23.75rem; }
    .t-wall { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 76.25rem) {
    .nav-link { padding: 0.5625rem 0.625rem; font-size: 0.875rem; }
  }
  @media (max-width: 70rem) {
    /* the six dropdown menus can't fit — collapse to the burger early */
    .navbar-nav .nav-item { display: none; }
    .nav-burger { display: inline-flex; }
  }
  @media (max-width: 61.9375rem) {
    .cards { grid-template-columns: 1fr 1fr; }
    .why-grid { grid-template-columns: 1fr; }
    .works, .posts { grid-template-columns: 1fr; max-width: 30rem; margin: 0 auto; }
    .positioning .grid { grid-template-columns: 1fr; gap: var(--s-4); }
    .footer .footer-grid { grid-template-columns: 1fr 1fr; }
    .stats { grid-template-columns: 1fr 1fr; }
    .stat:nth-child(odd) { border-left: 0; }
  }
  @media (max-width: 37.5rem) {
    .cards { grid-template-columns: 1fr; }
    .hero { padding-top: 8.75rem; }
    section { padding: var(--s-12) 0; }
    .t-wall { grid-template-columns: 1fr; }
    .footer .footer-grid { grid-template-columns: 1fr; }
    .navbar-nav .btn { display: none; }  /* CTA lives in the mobile menu here */
    .chatbot { right: 1rem; bottom: 1rem; }
    .chat-toggle { width: 3.375rem; height: 3.375rem; }
    .chat-panel { bottom: 4.25rem; }
    .hero-visual { display: none; }
  }

/* ══════════════ subpage components (rebuild) ══════════════ */
.page-hero {
  position: relative; overflow: hidden; padding: 9.375rem 0 3.75rem;
  background: linear-gradient(180deg, #ffffff 0%, #F7FAFF 45%, #eef4ff 100%);
}
:root[data-theme="dark"] .page-hero { background: linear-gradient(180deg, #0b1120 0%, #0d1526 60%, #101b38 100%) !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .page-hero { background: linear-gradient(180deg, #0b1120 0%, #0d1526 60%, #101b38 100%) !important; }
}
.page-hero .container { position: relative; z-index: 2; }
.breadcrumb { font-size: 0.875rem; color: var(--faint); margin-bottom: var(--s-2); }
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--brand); }
.page-hero h1 {
  font-size: clamp(1.875rem, 4vw, 3.125rem); font-weight: 700; letter-spacing: -0.035em;
  line-height: 1.1; max-width: 56.25rem; margin-bottom: var(--s-2); text-wrap: balance;
}
.page-hero .lead { font-size: clamp(1rem, 1.8vw, 1.1875rem); color: var(--muted); max-width: 47.5rem; }

.content-section { padding: var(--s-8) 0; }
.content-section:first-of-type { padding-top: var(--s-8); }

.prose { max-width: 55rem; margin: 0 auto; }
.prose .sec-h { font-size: clamp(1.4375rem, 2.6vw, 2rem); margin: 0 0 var(--s-3); text-wrap: balance; }
.prose h3 { font-size: 1.25rem; margin: var(--s-4) 0 var(--s-1); }
.prose p { margin-bottom: var(--s-2); }
.prose a { color: var(--brand); font-weight: 600; text-decoration: none; }
.prose a:hover { text-decoration: underline; }
.check-list { list-style: none; margin: 0 0 var(--s-3); }
.check-list li { position: relative; padding: 0.375rem 0 0.375rem 1.875rem; }
.check-list li::before {
  content: ""; position: absolute; left: 0; top: 0.6875rem;
  width: 1.0625rem; height: 1.0625rem; border-radius: 50%;
  background-color: var(--brand-soft);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233f5ef5' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-size: 0.5625rem; background-position: center; background-repeat: no-repeat;
}
ol.check-list { counter-reset: cl; }
ol.check-list li::before {
  content: counter(cl); counter-increment: cl;
  background-image: none; color: var(--brand); font-size: 0.72rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.table-wrap { overflow-x: auto; margin: 0 0 var(--s-3); border: 1px solid var(--border); border-radius: var(--r-md); }
.table-wrap table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.table-wrap th, .table-wrap td { text-align: left; padding: 0.75rem 1rem; border-bottom: 1px solid var(--border); }
.table-wrap th { font-family: var(--font-display); font-size: 0.8125rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink); background: var(--wash); }
.table-wrap tr:last-child td { border-bottom: 0; }
.pull-quote {
  border-left: 0.25rem solid var(--brand); background: var(--wash);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: var(--s-3); margin: 0 0 var(--s-3);
  font-family: var(--font-display); font-size: 1.0625rem; color: var(--ink);
}

.f-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); margin: var(--s-2) 0 var(--s-4); }
.f-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: var(--s-4);
  transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease), border-color var(--t-fast);
  position: relative; overflow: hidden;
}
.f-card::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 0.1875rem;
  background: linear-gradient(90deg, var(--brand), var(--iris-2));
  transform: scaleX(0); transform-origin: left; transition: transform var(--t-med) var(--ease);
}
.f-card:hover { transform: translateY(-0.25rem); box-shadow: var(--sh-2); border-color: var(--border-strong); }
.f-card:hover::after { transform: scaleX(1); }
.f-card h3 { font-size: 1.0625rem; margin: 0 0 0.5rem; }
.f-card p { font-size: 0.875rem; color: var(--muted); margin: 0; }

.figure { border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-2); margin: var(--s-4) 0; background: var(--surface); }
.figure img { width: 100%; display: block; }

.article { max-width: 50rem; margin: 0 auto; }
.article .meta { display: flex; align-items: center; gap: 0.75rem; margin-bottom: var(--s-3); }
.article .meta .cat {
  font-family: var(--font-display); font-size: 0.75rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  background: var(--brand-soft); color: var(--brand); padding: 0.3125rem 0.75rem; border-radius: var(--pill);
}
.article .meta time { font-size: 0.8125rem; color: var(--faint); font-weight: 600; }
.article .cover { border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-2); margin-bottom: var(--s-4); }
.article .cover img { width: 100%; display: block; }
.article h2, .article .sec-h { font-size: clamp(1.375rem, 2.4vw, 1.75rem); margin: var(--s-4) 0 var(--s-2); }
.article p { margin-bottom: var(--s-2); }

.posts-index { grid-template-columns: repeat(3, 1fr); }
.works-index { grid-template-columns: repeat(3, 1fr); }
.works-index .work .body h3 { margin-bottom: 0.5rem; }
div.work { cursor: default; }

.contact-grid { display: grid; grid-template-columns: 5fr 7fr; gap: var(--s-6); align-items: start; }
.info-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  box-shadow: var(--sh-1); padding: var(--s-3); margin-bottom: var(--s-2);
}
.info-card h3 { font-size: 0.8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); margin-bottom: 0.375rem; }
.info-card p { font-size: 0.9375rem; }
.info-card a { color: var(--ink); font-weight: 600; text-decoration: none; }
.info-card a:hover { color: var(--brand); }
.contact-form {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--sh-2); padding: var(--s-4);
  scroll-margin-top: 5.75rem;   /* #enquiry anchor (error redirects) clears the fixed header */
}
.field { margin-bottom: var(--s-2); }
.field label { display: block; font-family: var(--font-display); font-size: 0.8125rem; font-weight: 600; color: var(--ink); margin-bottom: 0.375rem; }
.field input, .field textarea, .field select {
  width: 100%; padding: 0.8125rem 1rem; font: inherit; font-size: max(16px, 1rem);   /* ≥1rem stops iOS zoom-on-focus */
  border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  background: var(--bg); color: var(--ink);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.field select { appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.875rem center; background-size: 1rem;
  padding-right: 2.625rem; }
.field label .opt { font-weight: 400; color: var(--faint); }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 0.25rem var(--brand-glow); }
.cta .cta-trust { margin-top: var(--s-3); font-size: 0.875rem; letter-spacing: .02em; color: var(--panel-faint); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.hp { position: absolute; left: -624.9375rem; opacity: 0; height: 0; }

.stats-3 { grid-template-columns: repeat(3, 1fr); margin: var(--s-4) 0 0; }

.prose .sec-h.statement {
  font-size: clamp(1.1875rem, 2.1vw, 1.5625rem); font-weight: 650;
  line-height: 1.45; letter-spacing: -0.015em;
}

.fact-sec { padding: 0 0 var(--s-4); }
.fact-strip {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-3);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--sh-2);
  padding: var(--s-3) var(--s-4);
}
.fact .fl {
  display: block; font-family: var(--font-display);
  font-size: 0.75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--brand); margin-bottom: 0.1875rem;
}
.fact .fv { font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: var(--ink); }

.faq-list { display: flex; flex-direction: column; gap: var(--s-2); margin: var(--s-2) 0; }
.faq {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); box-shadow: var(--sh-1);
  transition: box-shadow var(--t-med) var(--ease), border-color var(--t-fast);
  overflow: hidden;
}
.faq:hover { box-shadow: var(--sh-2); }
.faq[open] { border-color: color-mix(in srgb, var(--brand) 35%, var(--border)); box-shadow: var(--sh-2); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-2);
  padding: 1.125rem var(--s-3); cursor: pointer; list-style: none;
  font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: var(--ink);
  transition: color var(--t-fast);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--brand); }
.faq .chev {
  flex-shrink: 0; width: 1.75rem; height: 1.75rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-soft); color: var(--brand);
  transition: transform var(--t-med) var(--ease), background var(--t-fast), color var(--t-fast);
}
.faq .chev svg { width: 0.875rem; height: 0.875rem; }
.faq[open] .chev { transform: rotate(180deg); background: var(--brand); color: #fff; }
.faq .faq-body { padding: 0 var(--s-3) var(--s-3); color: var(--muted); font-size: 0.9375rem; line-height: 1.75; }

.err-hero { padding-bottom: var(--s-12); }
.err-code {
  font-family: var(--font-display); font-weight: 800; line-height: 1;
  font-size: clamp(5.625rem, 16vw, 11.25rem); letter-spacing: -0.05em;
  background: linear-gradient(92deg, var(--brand), var(--iris-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.err-hero .btn { margin: 0 0.375rem; }

.cookie-bar {
  position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 1300;
  max-width: 38.75rem; margin: 0 auto;
  display: flex; align-items: center; gap: var(--s-2);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); box-shadow: var(--sh-3);
  padding: 0.875rem 1.125rem; font-size: 0.875rem; color: var(--text);
}
.cookie-bar[hidden] { display: none; }
.cookie-bar p { flex: 1; margin: 0; }
.cookie-bar a { color: var(--brand); font-weight: 600; text-decoration: none; }
.cookie-bar .btn { padding: 0.5625rem 1.25rem; font-size: 0.875rem; }
.cookie-bar .btn-outline { padding: 0.5625rem 1rem; }

.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1150;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(1rem) saturate(1.4);
  border-top: 1px solid var(--border); box-shadow: var(--sh-3);
  transform: translateY(100%); transition: transform var(--t-med) var(--ease);
}
.sticky-cta.shown { transform: none; }
.sticky-cta[hidden] { display: none; }
.sticky-cta .container { display: flex; align-items: center; gap: var(--s-3); padding-top: 0.75rem; padding-bottom: 0.75rem; }
.sticky-cta p { flex: 1; margin: 0; font-size: 0.875rem; color: var(--text); }
.sticky-cta p strong { font-family: var(--font-display); color: var(--ink); }
.sticky-cta .btn { padding: 0.625rem 1.375rem; font-size: 0.875rem; white-space: nowrap; }
.sticky-cta .sc-close {
  width: 2.125rem; height: 2.125rem; border-radius: 50%; flex-shrink: 0;
  background: transparent; border: 1px solid var(--border-strong);
  color: var(--muted); cursor: pointer; font-size: 0.8125rem;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.sticky-cta .sc-close:hover { color: var(--error); border-color: var(--error); }

.err-links { margin-top: var(--s-6); display: flex; gap: var(--s-2); justify-content: center; flex-wrap: wrap; }
.err-links a {
  font-size: 0.875rem; font-weight: 600; color: var(--muted); text-decoration: none;
  padding: 0.5rem 1.125rem; border: 1px solid var(--border); border-radius: var(--pill);
  background: var(--surface); transition: color var(--t-fast), border-color var(--t-fast);
}
.err-links a:hover { color: var(--brand); border-color: var(--brand); }

.rel-service {
  margin-top: var(--s-4); padding: var(--s-2) var(--s-3);
  background: var(--brand-soft); border-radius: var(--r-md);
  font-size: 0.875rem; font-weight: 600; color: var(--ink);
}
.rel-card h3 { color: var(--brand); }
.rel-card { text-decoration: none; display: block; }

@media (max-width: 61.9375rem) {
  .f-grid, .posts-index, .works-index { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .fact-strip { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 37.5rem) {
  .f-grid, .posts-index, .works-index { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .page-hero { padding-top: 8.125rem; }
  .fact-strip { grid-template-columns: 1fr; gap: var(--s-2); }
}

.form-error {
  background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5;
  padding: 0.75rem 1rem; border-radius: var(--r-md);
  font-size: 0.875rem; font-weight: 600; margin-bottom: var(--s-3);
}
[data-theme="dark"] .form-error {
  background: #450a0a; color: #fecaca; border-color: #7f1d1d;
}


/* ── IRIS 2.0 tokens ── */
:root {
  --cyan: #22d3ee;
  --sh-4: 0 2rem 5rem rgba(10,14,31,.22);
  --glow-brand: 0 0 2.75rem rgba(63,94,245,.35);
  --ease-out2: cubic-bezier(.16,1,.3,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --t-cine: 1100ms;
}
/* ── fluid display type ── */
.hero-title { font-size: clamp(2.125rem, 3.7vw, 3.25rem); line-height: 1.12; letter-spacing: -.022em;
  text-wrap: balance; max-width: 16ch; }
.section-title h2 { font-size: clamp(1.5625rem, 2.7vw, 2.25rem); letter-spacing: -.02em; text-wrap: balance; }
.page-hero h1 { font-size: clamp(1.875rem, 3.4vw, 2.875rem); letter-spacing: -.022em; text-wrap: balance; }
/* ── hero atmosphere ── */
.hero, .page-hero { position: relative; overflow: hidden; isolation: isolate; }
.hero::before, .page-hero::before {
  content: ""; position: absolute; inset: -35% -15%; z-index: -1; pointer-events: none;
  filter: blur(4.375rem); opacity: .32;
  background:
    radial-gradient(36% 30% at 22% 32%, rgba(63,94,245,.55), transparent 70%),
    radial-gradient(30% 26% at 74% 24%, rgba(5,176,136,.45), transparent 70%),
    radial-gradient(26% 24% at 58% 76%, rgba(34,211,238,.28), transparent 70%);
  animation: iris-drift 18s ease-in-out infinite alternate;
}
[data-theme="dark"] .hero::before, [data-theme="dark"] .page-hero::before { opacity: .5; }
@keyframes iris-drift { to { transform: translate3d(3%, -4%, 0) scale(1.06) rotate(2deg); } }
/* ── hero load sequence (animation, runs once; server pre-adds .in) ── */
@keyframes iris-rise { from { opacity: 0; transform: translateY(1.625rem); filter: blur(0.1875rem); }
                       to   { opacity: 1; transform: none; filter: none; } }
.hero .reveal.in { animation: iris-rise .9s var(--ease-out2) backwards; }
.hero .reveal.in.d1 { animation-delay: .12s; } .hero .reveal.in.d2 { animation-delay: .24s; }
.hero .reveal.in.d3 { animation-delay: .36s; } .hero .reveal.in.d4 { animation-delay: .48s; }
/* ── buttons: glow + arrow choreography + ripple ── */
.btn { position: relative; overflow: hidden; will-change: transform;
  transition: transform .18s var(--ease-out2), box-shadow .3s var(--ease-out2),
              background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast); }
.btn-primary { box-shadow: 0 0.625rem 1.875rem rgba(63,94,245,.35); }
.btn-primary:hover { box-shadow: 0 1rem 3rem rgba(63,94,245,.55); }
.btn .arr { display: inline-block; transition: transform .25s var(--ease-spring); }
.btn:hover .arr { transform: translateX(0.3125rem); }
/* ── reveal 2.0: rise + blur ── */
.reveal { transform: translateY(1.625rem); filter: blur(2px);
  transition: opacity .7s var(--ease-out2), transform .7s var(--ease-out2), filter .7s var(--ease-out2); }
.reveal.in { filter: none; }
@media (prefers-reduced-motion: reduce) {
  .hero::before, .page-hero::before, .hero .reveal.in { animation: none; }
  .reveal { filter: none; transform: none; }
}

/* ── service/content cards: depth + gradient border trace + tilt ── */
.card { transform-style: preserve-3d; will-change: transform;
  transition: transform .25s var(--ease-out2), box-shadow .3s var(--ease-out2), border-color .25s; }
.card:hover { box-shadow: var(--sh-4), 0 0 2.5rem rgba(63,94,245,.10); }
.card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(var(--ga,120deg), rgba(63,94,245,.75), rgba(5,176,136,.75), transparent 62%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .3s; pointer-events: none; }
.card:hover::after { opacity: 1; }
.card .media img { transition: transform .6s var(--ease-out2); }
.card:hover .media img { transform: scale(1.05); }
/* ── testimonials: dark aurora band + glass carousel ── */
#testimonials { border-radius: 0; padding-top: 5.625rem; padding-bottom: 5.625rem;
  position: relative; overflow: hidden; isolation: isolate; background: #32373C; }
#testimonials::before { content: ""; position: absolute; inset: -30%; z-index: -1; filter: blur(5rem);
  opacity: .5; pointer-events: none;
  background: radial-gradient(32% 30% at 25% 30%, rgba(63,94,245,.4), transparent 70%),
              radial-gradient(28% 26% at 75% 60%, rgba(5,176,136,.36), transparent 70%); }
#testimonials .section-title h2 { color: #f2f4ff; }
#testimonials .kicker { color: #9db1ff; }
#testimonials .sub { color: #97a1c8; }

.t-row { display: flex; gap: 1.125rem; width: max-content; animation: t-drift 70s linear infinite; }
.t-row.t-rev { animation-direction: reverse; }
.t-row:hover { animation-play-state: paused; }
@keyframes t-drift { to { transform: translateX(-50%); } }
#testimonials .t-card {
  background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.11);
  backdrop-filter: blur(0.875rem); box-shadow: none;
  transition: transform .25s var(--ease-out2), background .25s, border-color .25s; }
#testimonials .t-card:hover { transform: translateY(-0.25rem); background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.2); }
#testimonials .t-card blockquote { color: #c3cbe8; }
#testimonials .t-card .n { color: #eef1ff; } #testimonials .t-card .r { color: #7d87ad; }
#testimonials .t-card .qmark { color: rgba(99,132,255,.5); }
#testimonials .t-wall.t-carousel { mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
/* fallback (JS off / reduced motion): original wall, dark-styled */
@media (prefers-reduced-motion: reduce) { .t-row { animation: none; } }
/* ── footer: aurora ribbon + hover polish ── */
.footer { position: relative; overflow: hidden; }
.footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--brand), var(--accent, #41E2FF), var(--cyan), transparent);
  background-size: 200% 100%; animation: iris-ribbon 12s linear infinite; }
@keyframes iris-ribbon { to { background-position: 200% 0; } }
.footer a { transition: color var(--t-fast), transform var(--t-fast); }
.footer a:hover { color: var(--brand); }
/* ── logo strip polish: edge fades + hover pause ── */
.logo-strip { mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.logo-strip:hover .marquee-track, .logo-strip:hover [class*="marquee"] { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .footer::before { animation: none; }
  .card, .card .media img, #testimonials .t-card { transition: none; }
}
@media (max-width: 47.9375rem) {
  #testimonials .t-wall.t-carousel { mask-image: none; }
  .t-row { animation-duration: 90s; }
}


/* ═══ IRIS 2.0 · Phase 2 ═══ */
/* ── nav choreography ── */
.nav-item .dropdown { transform-origin: top center; transform: scale(.96) translateY(-0.375rem);
  transition: opacity .25s var(--ease-out2), transform .25s var(--ease-out2), visibility .25s; }
.nav-item:hover .dropdown, .nav-item:focus-within .dropdown { transform: none; }
.dropdown li { opacity: 0; transform: translateY(-0.3125rem);
  transition: opacity .25s var(--ease-out2), transform .25s var(--ease-out2); }
.nav-item:hover .dropdown li, .nav-item:focus-within .dropdown li { opacity: 1; transform: none; }
.dropdown li:nth-child(2) { transition-delay: .03s; } .dropdown li:nth-child(3) { transition-delay: .06s; }
.dropdown li:nth-child(4) { transition-delay: .09s; } .dropdown li:nth-child(5) { transition-delay: .12s; }
.dropdown li:nth-child(6) { transition-delay: .15s; }
.mobile-menu.open li, #mobileMenu.open li { animation: iris-rise .45s var(--ease-out2) backwards; }
#mobileMenu.open li:nth-child(2) { animation-delay: .04s; } #mobileMenu.open li:nth-child(3) { animation-delay: .08s; }
#mobileMenu.open li:nth-child(4) { animation-delay: .12s; } #mobileMenu.open li:nth-child(5) { animation-delay: .16s; }
#mobileMenu.open li:nth-child(6) { animation-delay: .2s; } #mobileMenu.open li:nth-child(7) { animation-delay: .24s; }
/* ── per-category hero hues (wayfinding, zero content change) ── */
.pg-ai-and-ml .page-hero::before { background:
  radial-gradient(36% 30% at 22% 32%, rgba(5,176,136,.55), transparent 70%),
  radial-gradient(30% 26% at 74% 24%, rgba(34,211,238,.4), transparent 70%); }
.pg-digital-marketing .page-hero::before { background:
  radial-gradient(36% 30% at 22% 32%, rgba(5,176,136,.5), transparent 70%),
  radial-gradient(30% 26% at 74% 24%, rgba(236,72,153,.35), transparent 70%); }
.pg-mobile-app .page-hero::before { background:
  radial-gradient(36% 30% at 22% 32%, rgba(34,211,238,.45), transparent 70%),
  radial-gradient(30% 26% at 74% 24%, rgba(63,94,245,.45), transparent 70%); }
.pg-design-and-branding .page-hero::before { background:
  radial-gradient(36% 30% at 22% 32%, rgba(236,72,153,.4), transparent 70%),
  radial-gradient(30% 26% at 74% 24%, rgba(5,176,136,.45), transparent 70%); }
.pg-career .page-hero { min-height: clamp(31rem, 68vh, 43rem);
  padding: 9.5rem 0 5rem; background: linear-gradient(180deg, #f9fbff 0%, #eef5ff 100%); }
.pg-career .page-hero::before { opacity: .18; z-index: 1; background:
  radial-gradient(44% 34% at 18% 30%, rgba(95,186,255,.26), transparent 72%),
  radial-gradient(30% 24% at 76% 20%, rgba(63,94,245,.16), transparent 72%); }
.pg-career .page-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: url('/images/career/interview-hero.webp') 68% center / cover no-repeat;
  filter: brightness(.98) saturate(.9) contrast(1.05);
  transform: scale(1.05); animation: career-drift 18s ease-in-out infinite alternate;
}
.pg-career .hero-light { position: absolute; inset: 0; z-index: 1; background:
  linear-gradient(90deg, rgba(249,251,255,.97) 0%, rgba(249,251,255,.91) 30%,
    rgba(249,251,255,.56) 58%, rgba(249,251,255,.16) 100%),
  linear-gradient(180deg, rgba(95,186,255,.12) 0%, rgba(255,255,255,.08) 100%),
  radial-gradient(46% 34% at 14% 82%, rgba(95,186,255,.18), transparent 70%); }
.pg-career .page-hero .container { max-width: 80rem; }
.pg-career .page-hero h1 { max-width: 34rem; color: #18263e; }
.pg-career .page-hero .lead { max-width: 35rem; color: #55677f; }
.pg-career .breadcrumb, .pg-career .breadcrumb a { color: rgba(55,74,100,.78); }
@keyframes career-drift {
  from { transform: scale(1.05) translate3d(0, 0, 0); }
  to { transform: scale(1.11) translate3d(-2.6%, -1.2%, 0); }
}
:root[data-theme="dark"] .pg-career .page-hero { background:
  linear-gradient(180deg, #0c1424 0%, #101a2d 100%) !important; }
:root[data-theme="dark"] .pg-career .page-hero::before { opacity: .28; }
:root[data-theme="dark"] .pg-career .hero-light { background:
  linear-gradient(90deg, rgba(11,17,32,.94) 0%, rgba(11,17,32,.86) 34%,
    rgba(11,17,32,.56) 62%, rgba(11,17,32,.24) 100%),
  linear-gradient(180deg, rgba(95,186,255,.1) 0%, rgba(11,17,32,.18) 100%),
  radial-gradient(46% 34% at 14% 82%, rgba(95,186,255,.16), transparent 70%); }
:root[data-theme="dark"] .pg-career .page-hero h1 { color: #f4f7fb; }
:root[data-theme="dark"] .pg-career .page-hero .lead,
:root[data-theme="dark"] .pg-career .breadcrumb,
:root[data-theme="dark"] .pg-career .breadcrumb a { color: rgba(226,233,244,.82); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pg-career .page-hero { background:
    linear-gradient(180deg, #0c1424 0%, #101a2d 100%) !important; }
  :root:not([data-theme="light"]) .pg-career .page-hero::before { opacity: .28; }
  :root:not([data-theme="light"]) .pg-career .hero-light { background:
    linear-gradient(90deg, rgba(11,17,32,.94) 0%, rgba(11,17,32,.86) 34%,
      rgba(11,17,32,.56) 62%, rgba(11,17,32,.24) 100%),
    linear-gradient(180deg, rgba(95,186,255,.1) 0%, rgba(11,17,32,.18) 100%),
    radial-gradient(46% 34% at 14% 82%, rgba(95,186,255,.16), transparent 70%); }
  :root:not([data-theme="light"]) .pg-career .page-hero h1 { color: #f4f7fb; }
  :root:not([data-theme="light"]) .pg-career .page-hero .lead,
  :root:not([data-theme="light"]) .pg-career .breadcrumb,
  :root:not([data-theme="light"]) .pg-career .breadcrumb a { color: rgba(226,233,244,.82); }
}
@media (prefers-reduced-motion: reduce) {
  .pg-career .page-hero::after { animation: none; transform: scale(1.06); }
}
@media (max-width: 48rem) {
  .pg-career .page-hero { min-height: 28rem; padding: 8.75rem 0 4rem; }
  .pg-career .page-hero::after { background-position: 74% center; }
  .pg-career .hero-light { background:
    linear-gradient(180deg, rgba(249,251,255,.88) 0%, rgba(249,251,255,.76) 36%,
      rgba(249,251,255,.5) 100%),
    linear-gradient(180deg, rgba(95,186,255,.1) 0%, rgba(255,255,255,.08) 100%),
    radial-gradient(46% 34% at 14% 82%, rgba(95,186,255,.16), transparent 70%); }
}
/* ── portfolio: browser frames + filters ── */
.work .thumb.frame { position: relative; background: #0d1228; overflow: hidden; }
.work .thumb.frame .frame-bar { position: absolute; top: 0; left: 0; right: 0; height: 1.875rem;
  z-index: 2; background: #141b38; border-bottom: 1px solid rgba(255,255,255,.08); }
.work .thumb.frame .frame-bar::before { content: ""; position: absolute; left: 0.875rem; top: 0.6875rem;
  width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #f87171;
  box-shadow: 0.875rem 0 0 #fbbf24, 1.75rem 0 0 #34d399; }
.work .thumb.frame img { top: 1.875rem; height: calc(100% - 1.875rem); object-position: top;
  transition: transform 3.5s var(--ease-out2), object-position 3.5s var(--ease-out2); }
.work:hover .thumb.frame img { transform: scale(1.04); object-position: bottom; }
.ind-badge { display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--brand); background: var(--brand-soft);
  padding: 0.25rem 0.625rem; border-radius: 62.4375rem; margin-bottom: 0.625rem; }
.pf-filters { display: flex; flex-wrap: wrap; gap: 0.625rem; margin-bottom: 2.125rem; justify-content: center; }
.pf-chip { font: 600 0.875rem var(--font-text, inherit); padding: 0.5625rem 1.25rem; border-radius: 62.4375rem;
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--muted);
  cursor: pointer; transition: all var(--t-fast); }
.pf-chip:hover { border-color: var(--brand); color: var(--brand); }
.pf-chip.active { background: var(--grad-primary, linear-gradient(120deg,#3f5ef5,#41E2FF));
  color: #fff; border-color: transparent; }
.work.pf-hide { display: none; }
/* ── about timeline ── */
.timeline { position: relative; padding-left: 2.125rem; }
.timeline::before { content: ""; position: absolute; left: 0.625rem; top: 0.375rem; bottom: 0.375rem; width: 2px;
  background: linear-gradient(180deg, var(--brand), var(--accent, #41E2FF), transparent);
  border-radius: 2px; }
.tl-item { position: relative; }
.tl-item + .tl-item { margin-top: 1.625rem; }
.tl-dot { position: absolute; left: -1.875rem; top: 0.5rem; width: 0.75rem; height: 0.75rem; border-radius: 50%;
  background: var(--grad-primary, linear-gradient(120deg,#3f5ef5,#41E2FF));
  box-shadow: 0 0 0 0.25rem var(--brand-soft), 0 0 0.875rem rgba(63,94,245,.5); }
.tl-item p { margin: 0; }
/* ── contact: field focus glow + validation + morphing submit ── */
.contact-form .field { transition: transform .2s var(--ease-out2); }
.contact-form .field:focus-within label { color: var(--brand); }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus {
  border-color: var(--brand); box-shadow: 0 0 0 0.25rem var(--brand-soft), 0 0 1.5rem rgba(63,94,245,.12); }
.contact-form input:user-valid:not(:placeholder-shown) { border-color: rgba(52,211,153,.6);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2334d399' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='m5 13 4 4 10-10'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 1rem; }
.contact-form input:user-invalid { border-color: rgba(248,113,113,.7); }
.contact-form .btn[data-sending] { pointer-events: none; opacity: .85; }
.contact-form .btn[data-sending] .arr { display: none; }
.contact-form .btn[data-sending]::after { content: ""; width: 1rem; height: 1rem; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; display: inline-block;
  animation: iris-spin .7s linear infinite; margin-left: 0.25rem; }
@keyframes iris-spin { to { transform: rotate(360deg); } }
.cal-card { border: 1px solid var(--brand-soft);
  background: linear-gradient(160deg, var(--brand-soft), transparent 70%); }
.cal-card .cal-btn { margin-top: 0.75rem; font-size: 0.875rem; padding: 0.6875rem 1.25rem; }
@media (prefers-reduced-motion: reduce) {
  .dropdown li, .nav-item .dropdown, #mobileMenu.open li { transition: none; animation: none; opacity: 1; transform: none; }
  .work .thumb.frame img { transition: none; }
}


/* ═══ IRIS 2.0 · Phase 3 ═══ */
/* ── CTA band: retire the stock photo for a generated aurora ── */
.cta .bg-img { background: none; opacity: 1; filter: none; }
.cta .bg-img::before { content: ""; position: absolute; inset: -40%; filter: blur(4.375rem); opacity: .5;
  background: radial-gradient(34% 30% at 22% 35%, rgba(63,94,245,.6), transparent 70%),
              radial-gradient(28% 26% at 76% 30%, rgba(5,176,136,.55), transparent 70%),
              radial-gradient(24% 22% at 55% 80%, rgba(34,211,238,.3), transparent 70%);
  animation: iris-drift 20s ease-in-out infinite alternate; }
/* ── blog article typography kit ── */
.pg-blog .article.longform > p:first-of-type::first-letter {
  float: left; font-family: var(--font-display); font-size: 3.4em; line-height: .82;
  font-weight: 800; padding: 0.375rem 0.75rem 0 0;
  background: linear-gradient(120deg, #3f5ef5, #41E2FF);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.pg-blog .article blockquote { position: relative; margin: 2rem 0; padding: 1.25rem 1.625rem;
  border-left: 0.1875rem solid var(--brand); border-radius: 0 0.875rem 0.875rem 0;
  background: var(--brand-soft); font-size: 1.08em; font-style: italic; }
.pg-blog .article img { border-radius: 0.875rem; box-shadow: var(--sh-3); }
.pg-blog .article h2 { margin-top: 2.2em; letter-spacing: -.02em; }
.pg-blog .article a { text-decoration-thickness: 2px; text-underline-offset: 0.1875rem; }
/* ── about: UK <-> India connection arc ── */
.geo-arc { position: relative; height: 8.125rem; max-width: 40rem; margin: 0 auto; }
.geo-line { position: absolute; inset: 0; width: 100%; height: 100%; }
.geo-node { position: absolute; bottom: 2.75rem; width: 1rem; height: 1rem; }
.geo-uk { left: 0.75rem; } .geo-in { right: 0.75rem; }
.geo-node i { display: block; width: 100%; height: 100%; border-radius: 50%;
  background: linear-gradient(120deg, #3f5ef5, #41E2FF);
  box-shadow: 0 0 0 0.375rem var(--brand-soft), 0 0 1.5rem rgba(63,94,245,.6);
  animation: geo-pulse 2.6s infinite; }
.geo-in i { animation-delay: 1.3s; }
@keyframes geo-pulse { 50% { box-shadow: 0 0 0 0.75rem transparent, 0 0 1.5rem rgba(63,94,245,.6); } }
/* ── ⌘K command palette ── */
.search-btn { width: 2.625rem; height: 2.625rem; border-radius: 50%; border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--muted); cursor: pointer; display: grid; place-items: center;
  transition: color var(--t-fast), border-color var(--t-fast); }
.search-btn:hover { color: var(--brand); border-color: var(--brand); }
.search-btn svg { width: 1.125rem; height: 1.125rem; }
.kbar { position: fixed; inset: 0; z-index: 2000; display: none; }
.kbar.open { display: block; }
.kbar-bg { position: absolute; inset: 0; background: rgba(5,8,20,.6); backdrop-filter: blur(0.375rem);
  animation: kbar-in .2s var(--ease-out2); }
.kbar-panel { position: relative; max-width: 35rem; margin: 12vh auto 0; padding: 0 1rem;
  animation: kbar-rise .25s var(--ease-out2); }
@keyframes kbar-in { from { opacity: 0; } }
@keyframes kbar-rise { from { opacity: 0; transform: translateY(0.875rem) scale(.98); } }
.kbar-box { background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: 1.25rem; box-shadow: var(--sh-4), 0 0 3.75rem rgba(63,94,245,.15); overflow: hidden; }
.kbar-input { display: flex; align-items: center; gap: 0.75rem; padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border); }
.kbar-input svg { width: 1.125rem; height: 1.125rem; color: var(--muted); flex-shrink: 0; }
.kbar-input input { flex: 1; border: 0; outline: 0; background: none; color: var(--ink);
  font: 500 1rem var(--font-text, inherit); }
.kbar-list { max-height: 46vh; overflow-y: auto; padding: 0.5rem; }
.kbar-item { display: block; padding: 0.6875rem 0.875rem; border-radius: 0.875rem; text-decoration: none;
  cursor: pointer; }
.kbar-item .kt { font-size: 0.875rem; font-weight: 600; color: var(--ink); }
.kbar-item .ku { font-size: 0.75rem; color: var(--muted); }
.kbar-item.sel, .kbar-item:hover { background: var(--brand-soft); }
.kbar-item.sel .kt { color: var(--brand); }
.kbar-empty { padding: 1.375rem; text-align: center; font-size: 0.875rem; color: var(--muted); }
/* ── ambient cursor glow on dark bands ── */
@media (prefers-reduced-motion: reduce) {
  .cta .bg-img::before, .geo-node i, .geo-line path animate { animation: none; }
  .kbar-bg, .kbar-panel { animation: none; }
}


/* ═══ IRIS 3 · fixes & completions ═══ */
/* ── card border-trace: one ::after, fully repaired (the legacy 0.1875rem hairline
      rule merged with the masked ring and corrupted the flagship hover) ── */
.card::after { height: auto; transform: none; transform-origin: center; }
.card:hover::after { transform: none; }
/* ── portfolio index: the 30rem single-column clamp crushed the 2-col tablet grid ── */
@media (max-width: 61.9375rem) {
  .works.works-index { max-width: none; margin: 0; }
}
/* ── marquee edge fades painted the wrong colour (white smears over wash) ── */
.marquee::before, .marquee::after { display: none; }
.marquee { -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
/* ── dark-mode AA: brand blue text failed 4.5:1 on dark grounds sitewide.
      --brand-text carries all TEXT uses; --brand stays for fills/borders. ── */
:root { --brand-text: var(--brand); }
[data-theme="dark"] { --brand-text: #93a8ff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --brand-text: #93a8ff; } }
.prose a, .kicker, .post .read, .work .view, .info-card h3, .breadcrumb a:hover,
.fact .fl, .rel-card h3, .tag, .cat, .ind-badge, .footer a:hover,
.err-links a:hover, .faq summary:hover, .check-list a { color: var(--brand-text); }
/* ── measure: body text ran 95–105 characters per line ── */
.prose p, .prose li { max-width: 68ch; }
.prose .table-wrap, .prose .f-grid, .prose .faq-list { max-width: none; }
.article { max-width: 45rem; }
/* ── hero badge: verifiable link, AA stars (was 2.15:1 amber, aria-hidden) ── */
a.hero-badge { text-decoration: none; cursor: pointer; }
a.hero-badge:hover { border-color: var(--brand); }
.hero-badge .stars { color: #b45309; }
[data-theme="dark"] .hero-badge .stars { color: #fbbf24; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hero-badge .stars { color: #fbbf24; } }
/* ── ⌘K: selected item URL line failed contrast; esc is a real button ── */
.kbar-item.sel .ku { color: var(--text); }
.kbar-esc { font: 600 0.72rem var(--mono, monospace); color: var(--muted); background: none;
  border: 1px solid var(--border-strong); border-radius: 0.375rem; padding: 0.1875rem 0.4375rem; cursor: pointer; }
/* ── focus ring follows the element's own radius; 2px is the Stripe weight ── */
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible {
  outline-width: 2px; outline-offset: 2px; }
/* ── images never distort: attribute heights yield to fluid width ── */
img { max-width: 100%; height: auto; }
/* ── page heroes: CTAs above the fold on every money page ── */
.page-hero .hero-actions { display: flex; flex-wrap: wrap; gap: 0.875rem; margin-top: var(--s-3); }
.ph-kicker { font-family: var(--font-display); font-size: 0.8125rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--brand-text); margin-bottom: 0.625rem; }
.cat-grid { padding-top: var(--s-6); }
/* ── one H2 scale (three max sizes coexisted on the homepage) ── */
.positioning h2, .cta h2 { font-size: clamp(1.625rem, 2.8vw, 2.25rem); }
/* ── subpage rhythm: 4rem sections read cramped beside the 8rem homepage ── */
.content-section { padding: var(--s-12, 6rem) 0; }
/* ── proof block ── */
.proof-card { display: block; text-decoration: none; max-width: 35rem; }
.proof-card .pc-kicker { display: inline-block; font-family: var(--font-display); font-size: 0.72rem;
  font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-text);
  background: var(--brand-soft); border-radius: 62.4375rem; padding: 0.25rem 0.625rem; margin-bottom: 0.625rem; }
.proof-card .read { color: var(--brand-text); font-weight: 600; font-size: 0.875rem; }
.proof-trust { font-size: 0.875rem; color: var(--muted); margin-top: 0.875rem; }
/* ── case studies: built-with chips + pager ── */
.built-with { display: flex; flex-wrap: wrap; align-items: center; gap: 0.625rem; margin: 0; }
.built-with .bw-label { font-family: var(--font-display); font-size: 0.75rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.svc-chip { font-size: 0.875rem; font-weight: 600; color: var(--brand-text); text-decoration: none;
  background: var(--brand-soft); border-radius: 62.4375rem; padding: 0.5rem 1rem; min-height: 1.5rem;
  transition: background var(--t-fast), color var(--t-fast); }
.svc-chip:hover { background: var(--brand); color: #fff; }
.cs-pager-sec { padding-top: 0; }
.cs-pager { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.cs-pager a { font-weight: 600; font-size: 0.875rem; color: var(--muted); text-decoration: none;
  padding: 0.625rem 1.125rem; border: 1px solid var(--border); border-radius: 62.4375rem; background: var(--surface); }
.cs-pager a:hover { color: var(--brand-text); border-color: var(--brand); }

/* ── mobile menu v2 ── */
.mobile-menu { max-height: calc(100dvh - 4rem); overflow-y: auto; overscroll-behavior: contain; }
body.menu-open { overflow: hidden; }
.mm-cat summary { display: flex; align-items: center; justify-content: space-between;
  padding: 0.8125rem 0.25rem; min-height: 2.75rem; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: var(--ink); }
.mm-cat summary::-webkit-details-marker { display: none; }
.mm-cat summary .caret { transition: transform var(--t-fast); }
.mm-cat[open] summary .caret { transform: rotate(180deg); }
.mm-cat ul { list-style: none; margin: 0 0 0.5rem; padding: 0 0 0 0.875rem; border-left: 2px solid var(--border); }
.mm-cat ul a { display: block; padding: 0.625rem 0.25rem; min-height: 2.5rem; font-size: 0.875rem;
  color: var(--muted); text-decoration: none; }
.mm-cat ul a:hover { color: var(--brand-text); }
.mm-links { display: flex; flex-wrap: wrap; gap: 0.25rem 1.125rem; padding: 0.875rem 0.25rem;
  border-top: 1px solid var(--border); margin-top: 0.5rem; }
.mm-links a { font-family: var(--font-display); font-weight: 600; font-size: 0.9375rem;
  color: var(--ink); text-decoration: none; padding: 0.5rem 0; min-height: 2.5rem; }
.mm-actions { display: flex; gap: 0.625rem; padding-top: 0.75rem; }
.mm-actions .btn { flex: 1; text-align: center; min-height: 2.875rem; }
/* ── touch dropdowns (iPad at desktop widths could never open them) ── */
.nav-item.open .dropdown { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
.nav-item.open .dropdown li { opacity: 1; transform: none; }
/* ── sticky CTA: low-commitment pair + safe areas + 2.75rem close ── */
.sticky-cta .sc-alt { font-size: 0.875rem; font-weight: 600; color: var(--brand-text);
  text-decoration: none; white-space: nowrap; }
.sticky-cta .sc-alt:hover { text-decoration: underline; }
.sticky-cta .container { padding-bottom: calc(0.75rem + env(safe-area-inset-bottom)); }
.sticky-cta .sc-close { width: 2.75rem; height: 2.75rem; }
.cookie-bar { bottom: calc(1rem + env(safe-area-inset-bottom)); }
/* chat FAB docks above the sticky bar instead of hiding behind it */
body:has(.sticky-cta.shown) .chatbot { transform: translateY(-4rem); }
.chatbot { transition: transform .3s var(--ease-out2); }
/* ── touch target floor (WCAG 2.5.8 / Apple 44pt) ── */
@media (pointer: coarse) {
  .pf-chip, .cookie-bar .btn { min-height: 2.75rem; }
  .footer li a { display: inline-block; padding-top: 0.375rem; padding-bottom: 0.375rem; }
}
@media (max-width: 30rem) {
  .cookie-bar { flex-wrap: wrap; }
  .cookie-bar p { flex-basis: 100%; }
  .cookie-bar .btn { flex: 1; }
}
/* ── footer: services column replaces the empty spacer ──
      (scoped .footer .footer-grid to out-specificity the legacy 4fr 1fr rule) */
.footer .footer-grid { grid-template-columns: 4fr 3fr 4fr 3fr; }
.footer-services ul { list-style: none; margin: 0 0 1.125rem; padding: 0; }
.footer-services li a { display: inline-block; padding: 0.25rem 0; }
.social-links svg { display: block; }
/* ── misc ── */
.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; }
.form-note { font-size: 0.8125rem; color: var(--muted); margin: 0.75rem 0 0; }
.err-search kbd { font: 600 0.72rem var(--mono, monospace); border: 1px solid var(--border-strong);
  border-radius: 0.375rem; padding: 2px 0.375rem; }
.progress { width: 100%; transform: scaleX(0); transform-origin: 0 50%; transition: none; z-index: 1400; }
@media (max-width: 56.25rem) {
  .footer .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 35rem) {
  .footer .footer-grid { grid-template-columns: 1fr; }
  .cs-pager { flex-direction: column; }
  .cs-pager a { text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .chatbot { transition: none; }
}


/* ═══ IRIS 3.1 · precision pass (alignment · rhythm · consistency) ═══ */
/* breadcrumbs: a styled separator, not literal text */
.bc-sep { margin: 0 0.5rem; color: var(--faint); }
/* blog cards: equal heights — the read affordance sits on one baseline,
   and the meta row reserves its height even when a post has no date */
.post { display: flex; flex-direction: column; }
.post .read { margin-top: auto; padding-top: 0.75rem; }
.post .meta { min-height: 1.625rem; }
/* portfolio: unlinked projects are honest about it, and read as secondary */
div.work .thumb { opacity: .92; }
.work .soon { display: inline-block; margin-top: 0.625rem; font-family: var(--font-display);
  font-size: 0.75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--faint); }
/* 404: flex gap instead of magic margins */
.err-hero .reveal.d2 { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; }
.err-hero .btn { margin: 0; }
/* ⌘K result rows: block layout, no <br> */
.kbar-item .kt { display: block; }
/* small screens: stat separators off (the 2×2 collapse kept odd left rules),
   sticky bar drops its message and keeps the two actions side by side */
@media (max-width: 37.5rem) {
  .stats .stat { border-left: 0; }
  .sticky-cta p { display: none; }
  .sticky-cta .container { justify-content: flex-end; gap: var(--s-2); }
}

/* ── hero trust microcopy ── */
.hero-note { font-size: 0.8125rem; color: var(--muted); margin-top: 0.875rem; }

/* ── testimonial quote-river ── */
#testimonials .container { position: relative; }
/* river mode overrides the grid fallback */
#testimonials .t-wall.t-carousel, #testimonials .t-wall.t-swipe {
  display: flex; flex-direction: column; gap: 1.125rem; }
/* cinematic pace: slow enough to finish any quote before it travels a card-width */
.t-row { animation-duration: 110s; }
.t-row.t-rev { animation-duration: 130s; }
/* pause: hover, keyboard focus, or the control */
.t-wall.t-carousel:hover .t-row,
.t-wall.t-carousel:focus-within .t-row,
.t-wall.t-paused .t-row { animation-play-state: paused; }
/* equal-height cards — quote breathes, every name/role sits on one baseline */
#testimonials .t-card { display: flex; flex-direction: column; min-height: 14.5rem; }
/* fixed card width belongs to the river modes; the grid fallback sizes by track */
#testimonials .t-carousel .t-card, #testimonials .t-swipe .t-card {
  width: 23.75rem; max-width: 84vw; flex-shrink: 0; }
/* grid fallback: 10 cards end 3+3+3+1 — centre the orphan */
#testimonials .t-wall:not(.t-carousel):not(.t-swipe) .t-card:last-child:nth-child(3n+1) {
  grid-column: 2; }
#testimonials .t-card blockquote { flex: 1; margin-bottom: var(--s-2);
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
#testimonials .t-card .who { margin-top: auto; border-top: 1px solid rgba(255,255,255,.12); }
/* pause/play control — top-right of the band, glass to match the cards */
.t-pause { position: absolute; top: 0.375rem; right: 1.5rem; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.07); color: #c3cbe8;
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast); }
.t-pause:hover { color: #fff; border-color: rgba(255,255,255,.45); background: rgba(255,255,255,.12); }
/* touch: no auto-motion — native swipe with snap, momentum, hidden scrollbar */
.t-wall.t-swipe .t-row { animation: none; width: auto; overflow-x: auto;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; padding-bottom: 0.25rem; }
.t-wall.t-swipe .t-row::-webkit-scrollbar { display: none; }
.t-wall.t-swipe .t-card { scroll-snap-align: start; flex-shrink: 0; }
@media (prefers-reduced-motion: reduce) { .t-row { animation: none; } }

/* ═══ Review-pass fixes (fresh-eyes audit, 20 Jul) ═══ */
/* A2: unsized inline SVG defaults to 300×150 — the accordion carets need bounds */
.mm-cat summary .caret { width: 0.75rem; height: 0.75rem; flex-shrink: 0; }
/* A11: menu sits at top:4.75rem — the old max-height left 0.75rem unreachable */
.mobile-menu { max-height: calc(100dvh - 4.75rem); }
/* A3: homepage cards became anchors — kill UA underline/blue, style the affordance */
a.card { text-decoration: none; color: inherit; }
.card .read { margin-top: var(--s-2); font-size: 0.875rem; font-weight: 600;
  color: var(--brand-text); display: inline-flex; align-items: center; gap: 0.4375rem; }
.card:hover .read .arr { transform: translateX(0.25rem); }
.card .read .arr { transition: transform .25s var(--ease-spring); }
/* A5: the white PNG chip meets stroked SVGs — brand strokes, sized */
.why-item .wicon { color: var(--brand); }
.why-item .wicon svg { width: 1.625rem; height: 1.625rem; }
/* B1: dark-band kickers were 3.13:1 — same value the testimonial kicker uses */
.why .kicker, .cta .kicker { color: #9db1ff; }
/* B2: hero-note read as a stats caption, 3rem from its buttons */
.hero .hero-actions { margin-bottom: 0.875rem; }
.hero .hero-note { margin: 0 0 var(--s-6); }
/* B4: hub group headings are links — headings first, links second */
.sec-h a { color: inherit; font-weight: inherit; text-decoration: none; }
.sec-h a:hover { color: var(--brand-text); }
/* B5: table header cells vanished inside wash sections */
.table-wrap { background: var(--surface); }
/* B6: homepage works/posts sat in a 30rem strip across the whole tablet range */
@media (min-width: 37.5625rem) and (max-width: 61.9375rem) {
  .works, .posts { grid-template-columns: 1fr 1fr; max-width: none; }
}
/* A9/B7: legacy category cards keep their blurbs; the linked heading carries
   the route at text weight, not a second card-grid's worth of visual noise */
.f-card h3 a { color: inherit; text-decoration: none; }
.f-card h3 a:hover { color: var(--brand-text); }
.cat-grid { padding-bottom: 0; }

/* ═══ Motion set (owner-approved: 01 · 02 · 03 · 07 · 08) ═══ */
/* 01 · shine sweep — hero/CTA primaries only (never the form submit: its
      data-sending spinner also uses ::after) */
.hero .btn-primary::after, .page-hero .btn-primary::after, .cta .btn-on-dark::after,
.card-cta .btn-primary::after {
  content: ""; position: absolute; top: -10%; bottom: -10%; left: -30%; width: 40%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-20deg) translateX(-160%); pointer-events: none; }
.hero .btn-primary:hover::after, .page-hero .btn-primary:hover::after,
.cta .btn-on-dark:hover::after, .card-cta .btn-primary:hover::after {
  transition: transform .65s var(--ease-out2); transform: skewX(-20deg) translateX(420%); }
/* 03 · aurora border — exactly two surfaces: the services CTA tile + estimator */
@property --iris-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.card.card-cta {
  background: linear-gradient(var(--surface), var(--surface)) padding-box,
    conic-gradient(from var(--iris-angle), var(--brand), var(--iris-2), var(--cyan), var(--brand)) border-box;
  animation: iris-orbit 7s linear infinite; }
@keyframes iris-orbit { to { --iris-angle: 360deg; } }
/* 07 · odometer stats */
.stat .num.odo { display: flex; overflow: hidden; height: 1.12em; line-height: 1.12em; }
.stat .num.odo .odo-col { display: flex; flex-direction: column;
  transition: transform 1.5s var(--ease-out2); }
.stat .num.odo .odo-col span { height: 1.12em; line-height: 1.12em; }
/* 08 · glare sweep — light passes over the portfolio "screens" */
.work .thumb.frame::after { content: ""; position: absolute; inset: -40%; z-index: 3;
  background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.12) 50%, transparent 58%);
  transform: translateX(-70%); pointer-events: none; }
.work:hover .thumb.frame::after {
  transition: transform .9s var(--ease-out2); transform: translateX(70%); }
@media (prefers-reduced-motion: reduce) {
  .card.card-cta { animation: none; }
  .hero .btn-primary::after, .page-hero .btn-primary::after, .cta .btn-on-dark::after,
  .card-cta .btn-primary::after, .work .thumb.frame::after { display: none; }
  .stat .num.odo .odo-col { transition: none; }
}

/* ═══ D3 · category hero glyphs ═══ */
.ph-art { position: absolute; right: 4%; top: 50%; transform: translateY(-42%);
  width: clamp(13.75rem, 24vw, 20rem); color: var(--brand); opacity: .35; z-index: 1;
  pointer-events: none; }
.ph-art svg { width: 100%; height: auto; display: block; }
[data-theme="dark"] .ph-art { opacity: .3; }
@media (max-width: 61.9375rem) { .ph-art { display: none; } }


/* ═══ Talk to a Sales Advisor — utility trigger + compact panel ═══ */
.nav-contact-btn { margin-left: 0.25rem; }
.call-btn { width: 2.625rem; height: 2.625rem; border-radius: 50%;
  border: 1px solid rgba(95,186,255,.34);
  background: linear-gradient(180deg, rgba(95,186,255,.14) 0%, rgba(24,38,68,.24) 34%, rgba(10,16,30,.44) 100%);
  backdrop-filter: blur(1.125rem) saturate(160%); -webkit-backdrop-filter: blur(1.125rem) saturate(160%);
  color: #F7FAFF; cursor: pointer; display: grid; place-items: center;
  box-shadow: 0 0.75rem 1.625rem rgba(7,13,28,.10), inset 0 1px 0 rgba(255,255,255,.22), 0 0 0 1px rgba(95,186,255,.10), 0 0 1rem rgba(95,186,255,.08);
  transition: transform var(--t-fast), background var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast); }
.call-btn:hover, .call-btn:focus-visible {
  background: linear-gradient(180deg, rgba(95,186,255,.18) 0%, rgba(27,44,78,.28) 36%, rgba(11,18,33,.50) 100%);
  border-color: rgba(95,186,255,.48); color: #fff; transform: translateY(-1px);
  box-shadow: 0 1rem 1.875rem rgba(7,13,28,.14), inset 0 1px 0 rgba(255,255,255,.24), 0 0 1.125rem rgba(95,186,255,.14); }
.call-btn:active {
  background: linear-gradient(180deg, rgba(95,186,255,.12) 0%, rgba(18,29,53,.24) 32%, rgba(10,16,30,.48) 100%);
  transform: translateY(0); box-shadow: 0 0.5rem 1.125rem rgba(7,13,28,.10), inset 0 1px 0 rgba(255,255,255,.18), 0 0 0.625rem rgba(95,186,255,.10); }
.call-btn svg { width: 1.125rem; height: 1.125rem; }

.cd-backdrop { position: fixed; inset: 0; z-index: 1450;
  background: rgba(5,8,20,.18); backdrop-filter: blur(0.1875rem); -webkit-backdrop-filter: blur(0.1875rem);
  opacity: 0; transition: opacity .65s cubic-bezier(.22,1,.36,1); }
.cd-backdrop.open { opacity: 1; }
.call-drawer { position: fixed; top: 5.125rem; right: 1.375rem; z-index: 1500;
  width: min(21.5rem, calc(100vw - 1.75rem)); padding: 1.25rem; isolation: isolate;
  background: linear-gradient(180deg, rgba(95,186,255,.12) 0%, rgba(20,32,58,.26) 18%, rgba(11,19,36,.40) 42%, rgba(8,14,26,.50) 100%);
  backdrop-filter: blur(1.875rem) saturate(165%); -webkit-backdrop-filter: blur(1.875rem) saturate(165%);
  border: 1px solid rgba(95,186,255,.34); border-radius: 1.25rem;
  box-shadow: 0 1.5rem 3.75rem rgba(4,7,18,.10), inset 0 1px 0 rgba(255,255,255,.22), 0 0 0 1px rgba(95,186,255,.10), 0 0 1.125rem rgba(95,186,255,.08);
  transform: translateY(-1rem) scale(.96); transform-origin: top right;
  opacity: 0; pointer-events: none;
  transition: transform .65s cubic-bezier(.22,1,.36,1), opacity .65s cubic-bezier(.22,1,.36,1); }
.call-drawer::before { content: ""; position: absolute; inset: -30%; z-index: -1;
  filter: blur(4.375rem); opacity: .14; pointer-events: none;
  background: radial-gradient(30% 24% at 20% 18%, rgba(95,186,255,.18), transparent 70%),
              radial-gradient(24% 24% at 82% 70%, rgba(95,186,255,.08), transparent 72%); }
.call-drawer::after { content: ""; position: absolute; inset: 1px; border-radius: inherit;
  pointer-events: none; border: 1px solid rgba(95,186,255,.16);
  background: linear-gradient(180deg, rgba(255,255,255,.24), rgba(95,186,255,.08) 24%, rgba(255,255,255,0) 42%); }
.call-drawer.open { transform: none; opacity: 1; pointer-events: auto; }
.cd-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 0.75rem; }
.cd-kicker { display: inline-block; font: 700 0.6944rem var(--font-display); letter-spacing: .08em;
  text-transform: uppercase; color: #dce7ff; margin-bottom: 0.3125rem; opacity: .82; }
.cd-close { width: 2.125rem; height: 2.125rem; flex-shrink: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(95,186,255,.24); background: rgba(95,186,255,.08); color: #dff1ff;
  backdrop-filter: blur(0.875rem) saturate(145%); -webkit-backdrop-filter: blur(0.875rem) saturate(145%);
  display: grid; place-items: center; transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast); }
.cd-close:hover { color: #fff; border-color: rgba(95,186,255,.38); background: rgba(95,186,255,.14); }
.cd-close svg { width: 0.9375rem; height: 0.9375rem; }
.call-drawer h2 { color: #f2f4ff; font-size: 1.375rem; line-height: 1.15; letter-spacing: -.02em; margin: 0; }
.cd-sub { color: #9ca6c7; font-size: 0.8125rem; line-height: 1.65; margin: 0 0 0.875rem; }
.cd-call { display: flex; align-items: center; gap: 0.8125rem; text-decoration: none;
  background: linear-gradient(180deg, rgba(95,186,255,.12), rgba(255,255,255,.035));
  backdrop-filter: blur(1.125rem) saturate(150%); -webkit-backdrop-filter: blur(1.125rem) saturate(150%);
  border: 1px solid rgba(95,186,255,.22);
  border-radius: 0.875rem; padding: 0.8125rem 0.875rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 0 0.75rem rgba(95,186,255,.04);
  transition: transform var(--t-fast), border-color var(--t-fast), background var(--t-fast); }
.cd-call:hover, .cd-call:focus-visible { transform: translateX(0.1875rem);
  border-color: rgba(95,186,255,.32); background: linear-gradient(180deg, rgba(95,186,255,.16), rgba(255,255,255,.05)); }
.cd-ic { flex-shrink: 0; width: 2.375rem; height: 2.375rem; border-radius: 0.875rem;
  display: grid; place-items: center; color: #e8f2ff;
  background: linear-gradient(180deg, rgba(95,186,255,.16), rgba(95,186,255,.05));
  border: 1px solid rgba(95,186,255,.24); box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
  backdrop-filter: blur(0.75rem) saturate(145%); -webkit-backdrop-filter: blur(0.75rem) saturate(145%); }
.cd-ic svg { width: 1.125rem; height: 1.125rem; }
.cd-call .cdl { display: block; font: 700 0.6944rem var(--font-display); letter-spacing: .08em;
  text-transform: uppercase; color: #dbe8ff; opacity: .86; }
.cd-call .cdv { display: block; font: 600 0.9375rem var(--font-display); color: #eef1ff; }
.cd-arr { margin-left: auto; color: #effdff; transition: transform .25s var(--ease-spring); }
.cd-call:hover .cd-arr { transform: translateX(0.25rem); }
.call-drawer .cd-submit {
  width: 100%; justify-content: center; margin-top: 0.875rem;
  background: linear-gradient(180deg, rgba(95,186,255,.18) 0%, rgba(95,186,255,.11) 48%, rgba(255,255,255,.05) 100%);
  backdrop-filter: blur(1.125rem) saturate(150%); -webkit-backdrop-filter: blur(1.125rem) saturate(150%);
  border-color: rgba(95,186,255,.34); color: #F7FAFF;
  box-shadow: 0 0.75rem 1.5rem rgba(7,13,28,.10), inset 0 1px 0 rgba(255,255,255,.22), 0 0 0.875rem rgba(95,186,255,.10); }
.call-drawer .cd-submit:hover,
.call-drawer .cd-submit:focus-visible {
  background: linear-gradient(180deg, rgba(95,186,255,.24) 0%, rgba(95,186,255,.14) 52%, rgba(255,255,255,.06) 100%);
  border-color: rgba(95,186,255,.46); color: #fff;
  box-shadow: 0 1rem 1.875rem rgba(7,13,28,.12), inset 0 1px 0 rgba(255,255,255,.24), 0 0 1rem rgba(95,186,255,.14); }
.call-drawer .cd-submit:active {
  background: linear-gradient(180deg, rgba(95,186,255,.14) 0%, rgba(95,186,255,.08) 52%, rgba(255,255,255,.04) 100%);
  box-shadow: 0 0.5rem 1.125rem rgba(7,13,28,.10), inset 0 1px 0 rgba(255,255,255,.18), 0 0 0.625rem rgba(95,186,255,.10); }
.cd-trust { margin: 0.875rem 0 0; font-size: 0.75rem; line-height: 1.7; color: #7d87ad; }
body.cd-open { overflow: hidden; }
@media (max-width: 40rem) {
  .call-drawer { top: auto; right: 0; bottom: 0; left: 0; width: 100%;
    border-radius: 1.25rem 1.375rem 0 0; padding: 1.25rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom));
    transform: translateY(108%); transform-origin: center bottom; }
  .call-drawer.open { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cd-backdrop, .call-drawer { transition: none; }
}

/* ═══ Premium contact page (owner-directed) ═══ */
.ph-trust { font-size: 0.8125rem; color: var(--muted); margin-top: 0.875rem; }
.contact-panel { position: sticky; top: 6rem; align-self: start;
  border-radius: 1.25rem; padding: 2rem 1.875rem; overflow: hidden; isolation: isolate;
  background: #32373C; border: 1px solid rgba(255,255,255,.1); }
.contact-panel::before { content: ""; position: absolute; inset: -30%; z-index: -1;
  filter: blur(4.375rem); opacity: .45;
  background: radial-gradient(32% 30% at 22% 32%, rgba(63,94,245,.5), transparent 70%),
              radial-gradient(28% 26% at 78% 60%, rgba(5,176,136,.4), transparent 70%); }
.cp-kicker { font: 800 0.75rem var(--font-display); letter-spacing: .12em;
  text-transform: uppercase; color: #9db1ff; }
.contact-panel h2 { color: #f2f4ff; font-size: clamp(1.375rem, 2.4vw, 1.75rem);
  letter-spacing: -.02em; margin: 0.5rem 0 0.375rem; }
.cp-sub { color: #97a1c8; font-size: 0.875rem; margin: 0 0 1.375rem; }
.cp-rows { display: flex; flex-direction: column; gap: 0.625rem; margin-bottom: 1.625rem; }
.cp-row { display: flex; align-items: center; gap: 0.875rem; text-decoration: none;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.11);
  border-radius: 0.875rem; padding: 0.8125rem 1rem; min-height: 2.75rem;
  transition: transform var(--t-fast), border-color var(--t-fast), background var(--t-fast); }
.cp-row:hover, .cp-row:focus-visible { transform: translateX(0.1875rem);
  border-color: rgba(99,132,255,.55); background: rgba(255,255,255,.08); }
.cp-ic { flex-shrink: 0; width: 2.375rem; height: 2.375rem; border-radius: 0.6875rem;
  display: grid; place-items: center; color: #9db1ff;
  background: rgba(99,132,255,.14); border: 1px solid rgba(99,132,255,.25); }
.cp-ic svg { width: 1.125rem; height: 1.125rem; }
.cpl { display: block; font: 700 0.72rem var(--font-display); letter-spacing: .08em;
  text-transform: uppercase; color: #7d87ad; }
.cpv { display: block; font: 600 0.875rem var(--font-display); color: #eef1ff; }
.cpv .arr { display: inline-block; transition: transform .25s var(--ease-spring); }
.cp-row:hover .cpv .arr { transform: translateX(0.25rem); }
.cp-offices { display: grid; grid-template-columns: 1fr 1fr; gap: 1.125rem;
  padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,.12); }
.cp-office { position: relative; padding-left: 1.25rem; }
.cp-dot { position: absolute; left: 0; top: 0.3125rem; width: 0.5625rem; height: 0.5625rem; border-radius: 50%;
  background: linear-gradient(120deg, #3f5ef5, #41E2FF);
  box-shadow: 0 0 0 0.25rem rgba(99,132,255,.15), 0 0 0.75rem rgba(63,94,245,.5);
  animation: geo-pulse 2.6s infinite; }
.cp-dot.cp-d2 { animation-delay: 1.3s; }
.cp-office h3 { font-size: 0.8125rem; color: #eef1ff; margin: 0 0 0.375rem;
  letter-spacing: .04em; text-transform: uppercase; }
.cp-office p { font-size: 0.8125rem; line-height: 1.7; color: #97a1c8; margin: 0; }
.cp-foot { margin: 1.25rem 0 0; font-size: 0.8125rem; color: #7d87ad; }
/* the form answers attention: its border warms the moment you start typing */
.contact-form { border-radius: 1.25rem;
  transition: border-color var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease); }
.contact-form:focus-within { border-color: color-mix(in srgb, var(--brand) 40%, var(--border));
  box-shadow: var(--sh-3), 0 0 2.75rem rgba(63,94,245,.10); }
.cf-head { margin-bottom: 1.375rem; padding-bottom: 1.125rem; border-bottom: 1px solid var(--border); }
.cf-head h2 { font-size: 1.375rem; letter-spacing: -.015em; margin: 0 0 0.375rem; }
.cf-head p { font-size: 0.875rem; color: var(--muted); margin: 0; }
.contact-form button[type="submit"] { width: 100%; justify-content: center; }
@media (max-width: 61.9375rem) {
  .contact-panel { position: static; order: 2; }
  .contact-grid form { order: 1; }
  .cp-offices { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .cp-dot { animation: none; } }

/* ── click-to-load office maps: on-brand facades, Google only on request ── */
.map-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.map-card { position: relative; border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--border); background: var(--surface); min-height: 18.75rem; }
.map-face { position: relative; height: 100%; min-height: 18.75rem;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: var(--s-4); }
.map-face::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 2.5rem 2.5rem; opacity: .4;
  -webkit-mask-image: radial-gradient(70% 70% at 50% 45%, #000, transparent 80%);
  mask-image: radial-gradient(70% 70% at 50% 45%, #000, transparent 80%); }
.map-face > * { position: relative; }
.map-pin { width: 1rem; height: 1rem; border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg); margin-bottom: 1rem;
  background: linear-gradient(120deg, var(--brand), var(--iris-2));
  box-shadow: 0 0 0 0.3125rem var(--brand-soft), 0 0 1.125rem rgba(63,94,245,.45);
  animation: geo-pulse 2.6s infinite; }
.map-pin.map-pin2 { animation-delay: 1.3s; }
.map-face h3 { font-size: 1.125rem; margin: 0 0 0.375rem; }
.map-face p { font-size: 0.875rem; color: var(--muted); line-height: 1.7; margin: 0 0 1rem; }
.map-actions { display: flex; flex-wrap: wrap; gap: 0.625rem 1rem; align-items: center;
  justify-content: center; }
.map-load { padding: 0.625rem 1.125rem; font-size: 0.875rem; }
.map-ext { font-size: 0.875rem; font-weight: 600; color: var(--brand-text);
  text-decoration: none; display: inline-flex; align-items: center; gap: 0.375rem; }
.map-ext .arr { transition: transform .25s var(--ease-spring); }
.map-ext:hover .arr { transform: translateX(0.25rem); }
.map-note { font-size: 0.75rem; color: var(--faint); margin: 0.875rem 0 0; }
.map-card iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map-card.map-loading .map-load { pointer-events: none; opacity: .7; }
.map-card.map-on .map-face { display: none; }
.map-back { position: absolute; top: 0.625rem; right: 0.625rem; z-index: 2;
  font: 600 0.8125rem var(--font-display); color: var(--ink);
  background: rgba(255,255,255,.92); border: 1px solid var(--border-strong);
  border-radius: 62.4375rem; padding: 0.4375rem 0.875rem; cursor: pointer;
  box-shadow: var(--sh-1); }
.map-back:hover { border-color: var(--brand); color: var(--brand-text); }

/* ── footer ambient footage: team planning, dark-band colourist recipe ── */
.ft-video { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0; filter: saturate(.85); opacity: .85; }
.ft-veil { position: absolute; inset: 0; z-index: 0; background:
  linear-gradient(180deg, rgba(5,176,136,.07), rgba(5,176,136,.07)),
  linear-gradient(180deg, rgba(24,27,32,.94) 0%,
    rgba(24,27,32,.72) 40%, rgba(24,27,32,.82) 100%); }
.footer > .container { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .ft-video { display: none; } }
@media (max-width: 48rem) { .ft-video { display: none; } }
@media (max-width: 47.9375rem) { .map-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .map-pin { animation: none; } }

/* ═══ WAC-style navigation (owner-directed) ═══ */
/* ── header rhythm: one 2.5rem control height, one gap system, grouped zones ──
      WAC composition: links sit left-of-centre beside the logo; the divider's
      auto-margin pushes the utility cluster + CTA to the right edge */
.navbar-nav { align-items: center; gap: 0.25rem; flex: 1; margin-left: 2.75rem; }
.navbar-nav > li { display: flex; align-items: center; }
.nav-sep { width: 1px; height: 1.375rem; background: var(--border-strong); margin: 0 0.75rem 0 auto; }
/* 2026 standard: links rest muted at medium weight, sharpen to ink on
   hover — no pill wash. Quiet until needed; the active underline is the
   only accent that stays lit. */
.navbar-nav > li > .nav-link { padding: 0.5625rem 0.75rem; font-size: 1.0625rem; font-weight: 500;
  letter-spacing: 0; color: rgba(255,255,255,.96); border-radius: 0.625rem; position: relative;
  transition: color var(--t-fast); }
.navbar-nav > li > .nav-link:hover { background: transparent; color: #FFFFFF; }
.navbar-nav > li > .nav-link .caret { width: 0.625rem; height: 0.625rem; opacity: .6;
  transition: transform .25s var(--ease-out2), opacity var(--t-fast); }
.nav-item:hover > .nav-link .caret, .nav-item.open > .nav-link .caret,
.nav-item:focus-within > .nav-link .caret { transform: rotate(180deg); opacity: 1; }
/* active page: a quiet brand underline instead of a filled pill —
   the caret and label stay clean, the location signal stays visible */
.navbar-nav > li > .nav-link.active { background: transparent; color: #FFFFFF; }
.navbar-nav > li > .nav-link.active::after { content: ""; position: absolute;
  left: 0.8125rem; right: 0.8125rem; bottom: 0.1875rem; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--brand), var(--iris-2)); }
.nav-mega > .nav-link.active::after { right: 1.875rem; }   /* clears the caret */
.navbar .btn-primary { height: 2.5rem; padding: 0 1.375rem; display: inline-flex;
  align-items: center; font-size: 1rem; margin-left: 0.25rem; color: #FFFFFF; }
/* ── N1: scroll condense — the header breathes down as reading begins ── */
.navbar { transition: height .3s var(--ease); }
.header.scrolled .navbar { height: 3.875rem; }
.navbar-brand { transition: transform .3s var(--ease); transform-origin: left center; }
.navbar-brand svg { display: block; height: 2rem; width: auto; color: var(--ink); }
.header.scrolled .navbar-brand { transform: scale(.92); }
.header.scrolled .mobile-menu { top: 3.875rem; max-height: calc(100dvh - 3.875rem); }
@media (prefers-reduced-motion: reduce) {
  .navbar, .navbar-brand { transition: none; }
}
/* ── N2: mega column glyphs (the service-card icon set, at nav scale) ── */
.mega .mg-hub { display: flex; align-items: center; gap: 0.5rem; }
.mg-ic { display: grid; place-items: center; width: 1rem; height: 1rem;
  color: var(--brand-text); opacity: .8; }
.mg-ic svg { width: 0.9375rem; height: 0.9375rem; }
.mega .mg-hub:hover .mg-ic { opacity: 1; }
/* ── N3: mega footer — the panel ends with a next step, not a dead edge ── */
.mg-foot { grid-column: 1 / -1; display: flex; align-items: center; gap: 1.125rem;
  flex-wrap: wrap; margin-top: 0.875rem; padding-top: 0.875rem;
  border-top: 1px solid var(--border); font-size: 0.8125rem; color: var(--muted); }
.mg-cta { font: 600 0.8125rem var(--font-display); color: var(--brand-text);
  text-decoration: none; display: inline-flex; align-items: center; gap: 0.375rem; }
.mg-cta .arr { transition: transform .25s var(--ease-spring); }
.mg-cta:hover .arr { transform: translateX(0.25rem); }
.mg-foot .mg-all { margin-left: auto; margin-top: 0; padding: 0; }
/* HOVER-AREA BUG FIX: the generic li-side hover bridge (.nav-item::after,
   a 0.75rem strip at left:0;right:0) re-anchored to the relative .navbar once
   .nav-mega went position:static — becoming an invisible full-header-width
   strip that opened Services while hovering under ANY nav item. The mega
   item drops that bridge; the panel carries its own, which is inert while
   closed (the closed dropdown is pointer-events:none) and only keeps the
   menu open while the pointer crosses the gap after a legitimate open. */
.nav-mega::after { content: none; }
.dropdown.mega::before { content: ""; position: absolute; left: 0; right: 0;
  bottom: 100%; height: 0.875rem; }
/* mega panel: crowned with the brand hairline, deeper shadow, calmer entry */
.dropdown.mega::after { content: ""; position: absolute; top: 0; left: 1.5rem; right: 1.5rem;
  height: 2px; border-radius: 0 0 2px 2px;
  background: linear-gradient(90deg, var(--brand), var(--iris-2), transparent); }
.dropdown.mega {
  background: linear-gradient(180deg, rgba(255,255,255,.74), rgba(247,250,255,.62));
  border: 1px solid rgba(255,255,255,.42);
  box-shadow: 0 1.75rem 4.5rem rgba(15,23,42,.15), inset 0 1px 0 rgba(255,255,255,.52);
  backdrop-filter: blur(1.375rem) saturate(1.16);
  -webkit-backdrop-filter: blur(1.375rem) saturate(1.16);
  transition: opacity 1s cubic-bezier(.22,1,.36,1),
              transform 1.56s cubic-bezier(.22,1,.36,1),
              visibility 1s;
}
.header .navbar { position: relative; }
.nav-mega { position: static; }
.dropdown.mega { left: 50%; right: auto; width: 100vw; max-width: 100vw;
  display: grid; grid-template-columns: 1.35fr repeat(4, 1fr); gap: 0.625rem 2rem;
  padding: 2rem 2.375rem 1.625rem; border-radius: var(--r-lg);
  transform: translateX(-50%) scale(.985) translateY(-0.625rem); }
.nav-item:hover .dropdown.mega, .nav-item:focus-within .dropdown.mega,
.nav-item.open .dropdown.mega { transform: translateX(-50%); }
.dropdown.mega li {
  transition: opacity .42s cubic-bezier(.22,1,.36,1),
              transform .42s cubic-bezier(.22,1,.36,1);
}
.dropdown.mega li:nth-child(2) { transition-delay: .03s; }
.dropdown.mega li:nth-child(3) { transition-delay: .06s; }
.dropdown.mega li:nth-child(4) { transition-delay: .09s; }
.dropdown.mega li:nth-child(5) { transition-delay: .12s; }
.dropdown.mega li:nth-child(6) { transition-delay: .15s; }
.mega .mg-col ul { list-style: none; margin: 0; padding: 0; }
.mega .mg-hub { display: block; font: 800 1.0625rem var(--font-display);
  letter-spacing: .02em; color: var(--ink); text-decoration: none;
  padding: 0.375rem 0.625rem 0.5rem; border-bottom: 1px solid var(--border); margin-bottom: 0.5rem; }
.mega .mg-hub:hover { color: var(--brand-text); }
.mega .mg-hub-stack { margin-top: 0.875rem; }
.mg-intro { display: flex; flex-direction: column; justify-content: space-between;
  gap: 1.5rem; padding: 0.5rem 1.875rem 0.875rem 0.75rem; border-right: 1px solid var(--border); }
.mg-intro .mg-line { margin: 0; font: 600 1.375rem/1.3 var(--font-display);
  letter-spacing: -.01em; color: var(--ink); text-wrap: balance; }
.mg-over { font: 600 0.9375rem var(--font-text); color: var(--ink);
  text-decoration: none; display: inline-flex; align-items: center; gap: 0.375rem;
  padding: 0.375rem 0; }
.mg-over .arr { transition: transform .25s var(--ease-spring); }
.mg-over:hover .arr { transform: translateX(0.25rem); }
.mg-over:hover { text-decoration: underline; text-underline-offset: 0.1875rem; }
.mega .mg-col li a { display: block; font-family: var(--font-text); font-size: 1rem; font-weight: 500;
  line-height: 1.5; letter-spacing: 0; color: var(--ink); text-decoration: none;
  padding: 0.4375rem 0.625rem; border-radius: 0.625rem; }
.mega .mg-col li a:hover { color: var(--brand-text); background: rgba(255,255,255,.4); }
.mg-all { grid-column: 1 / -1; justify-self: end; margin-top: 0.625rem;
  font: 600 0.9375rem var(--font-text); color: var(--ink); text-decoration: none;
  display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.625rem; }
.mg-all .arr { transition: transform .25s var(--ease-spring); }
.mg-all:hover .arr { transform: translateX(0.25rem); }
:root[data-theme="dark"] .dropdown.mega {
  background: linear-gradient(180deg, rgba(11,17,32,.72), rgba(14,21,38,.6));
  border-color: rgba(147,168,255,.16);
  box-shadow: 0 1.75rem 4.5rem rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.05);
}
:root[data-theme="dark"] .mega .mg-col li a:hover { background: rgba(147,168,255,.1); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .dropdown.mega {
    background: linear-gradient(180deg, rgba(11,17,32,.72), rgba(14,21,38,.6));
    border-color: rgba(147,168,255,.16);
    box-shadow: 0 1.75rem 4.5rem rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.05);
  }
  :root:not([data-theme="light"]) .mega .mg-col li a:hover { background: rgba(147,168,255,.1); }
}
.mm-group a { font-weight: 700; color: var(--ink) !important; margin-top: 0.5rem; }
/* C1 fix: the 70rem collapse only matched .nav-item — the four flat links,
   divider and (on phones) the search icon must collapse too, or the burger
   is pushed past the clipped right edge and mobile navigation is unreachable */
@media (max-width: 70rem) {
  .navbar-nav .nav-flat, .navbar-nav .nav-sep { display: none; }
}
@media (max-width: 37.5rem) {
  .navbar-nav .search-btn { display: none; }
}

/* ═══ Hero card orbit ═══ */
/* compact ring, fully inside the viewport — carrier matches it exactly */
.hero-visual .ring { right: 4%; width: 21.25rem; height: 21.25rem; }
.fcarrier { position: absolute; right: 4%; top: 50%; transform: translateY(-50%);
  width: 21.25rem; height: 21.25rem; pointer-events: none; }
.fspin { position: absolute; inset: 0; animation: fspin-rot 100s linear infinite; }
@keyframes fspin-rot { to { transform: rotate(360deg); } }
.fslot { position: absolute; top: 50%; left: 50%;
  transform: rotate(var(--fa)) translateX(var(--frad, 10.625rem)) rotate(calc(var(--fa) * -1)); }
.fcent { transform: translate(-50%, -50%); }
/* cards leave their old absolute spots; counter-spin keeps text upright.
   Compact card sizing so the trio sits comfortably on the smaller ring. */
.fspin .fcard { position: relative; top: auto; right: auto; bottom: auto; left: auto;
  padding: 0.5rem 0.75rem; gap: 0.5rem; max-width: 10.75rem;
  animation: fcard-counter 100s linear infinite; }
.fspin .fcard .fi { width: 1.6875rem; height: 1.6875rem; border-radius: 0.625rem; }
.fspin .fcard .fi svg { width: 0.875rem; height: 0.875rem; }
.fspin .fcard .ft { font-size: 0.75rem; }
.fspin .fcard .fs { font-size: 0.6944rem; }
.fcard-4 .fi { background: color-mix(in srgb, var(--cyan, #22d3ee) 15%, transparent); color: #0e7490; }
.fcard-5 .fi { background: color-mix(in srgb, var(--iris-2, #41E2FF) 14%, transparent); color: var(--iris-2, #41E2FF); }
[data-theme="dark"] .fcard-4 .fi { color: #67e8f9; }
[data-theme="dark"] .fcard-5 .fi { color: #c4b5fd; }
@keyframes fcard-counter { to { transform: rotate(-360deg); } }
/* rest while the visitor is looking */
.hero-visual:hover .fspin, .hero-visual:hover .fspin .fcard { animation-play-state: paused; }
@media (max-width: 81.25rem) {
  .hero-visual .ring, .fcarrier { right: 9%; width: 18.75rem; height: 18.75rem; }
  .fslot { --frad: 9.375rem; }
  .fspin .fcard { max-width: 9.375rem; }
}
@media (max-width: 67.5rem) {
  .hero-visual .ring { right: 14%; width: 16.25rem; height: 16.25rem; }
  .fcarrier { right: 14%; width: 16.25rem; height: 16.25rem; }
  .fslot { --frad: 8.125rem; }
}
@media (prefers-reduced-motion: reduce) {
  .fspin, .fspin .fcard { animation: none; }
}

/* ═══ Service icon tilt + gloss (owner-selected T1+T4) ═══ */
/* the chip leans toward the cursor like a small physical object; a single
   gloss sweep crosses it as it fills. Fine pointers only; flat under
   reduced-motion; the card itself stays flat as previously decided. */
.card .icon { position: relative; overflow: hidden; }
.card .icon::after { content: ""; position: absolute; top: -20%; bottom: -20%;
  left: -40%; width: 45%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.5), transparent);
  transform: skewX(-20deg) translateX(-170%); pointer-events: none; }
@media (hover: hover) and (pointer: fine) {
  .card .icon { transition: transform .12s ease-out,
    background var(--t-fast), color var(--t-fast); }
  .card:hover .icon { transform: perspective(18.75rem)
      rotateX(calc(var(--ty, 0) * -14deg))
      rotateY(calc(var(--tx, 0) * 14deg))
      rotate(calc(var(--tx, 0) * 4deg))
      scale(1.08); }
  .card:hover .icon::after { transition: transform .6s var(--ease-out2) .05s;
    transform: skewX(-20deg) translateX(340%); }
  /* the glyph itself takes one spring-eased turn as the chip fills,
     and unwinds on leave */
  .card .icon svg { transition: transform .55s var(--ease-out2); }
  .card:hover .icon svg { transform: rotate(360deg); }
}
/* the Why pillars' chips join the same physics — white chip fills brand */
.why-item .wicon { position: relative; overflow: hidden;
  transition: transform .12s ease-out, background var(--t-fast), color var(--t-fast); }
.why-item .wicon::after { content: ""; position: absolute; top: -20%; bottom: -20%;
  left: -40%; width: 45%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-20deg) translateX(-170%); pointer-events: none; }
@media (hover: hover) and (pointer: fine) {
  .why-item:hover .wicon { background: var(--brand); color: #fff;
    transform: perspective(18.75rem)
      rotateX(calc(var(--ty, 0) * -14deg))
      rotateY(calc(var(--tx, 0) * 14deg))
      rotate(calc(var(--tx, 0) * 4deg))
      scale(1.08); }
  .why-item:hover .wicon::after { transition: transform .6s var(--ease-out2) .05s;
    transform: skewX(-20deg) translateX(340%); }
  .why-item .wicon svg { transition: transform .55s var(--ease-out2); }
  .why-item:hover .wicon svg { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .card:hover .icon { transform: scale(1.06); }
  .card .icon::after { display: none; }
  .card .icon svg { transition: none; }
  .card:hover .icon svg { transform: none; }
  .why-item:hover .wicon { transform: scale(1.06); }
  .why-item .wicon::after { display: none; }
  .why-item .wicon svg { transition: none; }
  .why-item:hover .wicon svg { transform: none; }
}

/* ═══ Chat FAB nudge (owner-requested) ═══ */
/* one soft double-hop every ~14s — a polite "I am here", never a nag.
   Rests while the chat is open; off under reduced-motion. */
@keyframes chat-nudge {
  0% { transform: translateY(0); }
  2.5% { transform: translateY(-9.375rem); }
  5% { transform: translateY(0); }
  7.5% { transform: translateY(-6.25rem); }
  10% { transform: translateY(0); }
  12.5% { transform: translateY(-3.125rem); }
  15% { transform: translateY(0); }
  17% { transform: translateY(-1.5625rem); }
  19% { transform: translateY(0); }
  20.5% { transform: translateY(-0.1875rem); }
  22%, 100% { transform: translateY(0); }
}
.chatbot:not(.open) .chat-toggle { animation: chat-nudge 14s ease-in-out infinite 3s; }
@media (prefers-reduced-motion: reduce) {
  .chatbot:not(.open) .chat-toggle { animation: none; }
}

/* ═══ Hire-us stack blocks (Vindaloo-pattern, our stack) ═══ */
.hs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.hs-block { background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: var(--s-3) var(--s-4); }
.hs-block h3 { font-size: 1rem; margin: 0 0 0.25rem; }
.hs-block h3 a { color: inherit; text-decoration: none; }
.hs-block h3 a:hover { color: var(--brand-text); }
.hs-block p { font-size: 0.8125rem; color: var(--muted); margin: 0 0 0.75rem; }
.hs-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.hs-chips span { display: inline-flex; align-items: center; gap: 0.4375rem;
  font: 600 0.75rem var(--mono, monospace); letter-spacing: .02em;
  color: var(--muted); background: var(--wash); border: 1px solid var(--border);
  border-radius: 62.4375rem; padding: 0.375rem 0.75rem;
  transition: color var(--t-fast), border-color var(--t-fast); }
.hs-chips img { width: 1rem; height: 1rem; display: block; }
.hs-block:hover .hs-chips span { color: var(--text); }
.hs-chips span:hover { color: var(--brand-text); border-color: var(--brand); }
@media (max-width: 47.9375rem) { .hs-grid { grid-template-columns: 1fr; } }

/* ═══ Services section polish ═══ */
/* equal-height cards: every "View services →" sits on one shared baseline */
.cards .card { display: flex; flex-direction: column; }
.cards .card ul { margin-bottom: var(--s-2); }
.cards .card .read { margin-top: auto; }



/* one-family system: headings drop Jakarta bold for Inter light/regular */
h1, h2, h3, h4, .sec-h, .hero-title, .page-hero h1,
.section-title h2, .positioning h2, .cta h2 {
  font-family: var(--font-text); }

/* body — WAC base 1.125rem, lh 1.6 */
body { font-size: 1.125rem; line-height: 1.6; }

/* hero — ttl-120 role, light */
.hero-title { font-size: clamp(2.5rem, 6vw, 5.25rem); font-weight: 300;
  line-height: 1.1; letter-spacing: -.019em;
  color: #294cff; }
.hero-title strong, .hero-title b { font-weight: 400; }

/* page heroes + homepage section titles — ttl-80, regular */
.page-hero h1 { font-size: clamp(2.25rem, 5vw, 5rem); font-weight: 400;
  line-height: 1.12; letter-spacing: -.019em; }
.section-title h2, .positioning h2, .cta h2 {
  font-size: clamp(2.25rem, 5vw, 4.5rem); font-weight: 400;
  line-height: 1.15; letter-spacing: -.019em; }

/* inner section titles — ttl-40/50 band */
.sec-h, .prose .sec-h { font-size: clamp(1.625rem, 3vw, 2.75rem); font-weight: 400;
  line-height: 1.2; letter-spacing: -.02em; }
.article h2, .article .sec-h { font-size: clamp(1.5rem, 2.6vw, 2.125rem);
  font-weight: 400; line-height: 1.25; }

/* card / list headings — ttl-24/28: medium, calm */
.card h3, .f-card h3, .why-item h3, .faq summary { font-weight: 500; }

/* leads under heroes — WAC body-large 1.25rem */
.page-hero .lead, .hero-sub { font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  line-height: 1.55; }

/* nav — slightly larger and brighter for the hero footage */
.navbar-nav > li > .nav-link { font-size: 1.0625rem; font-weight: 500; }

/* section rhythm — WAC ~6.25rem bands */
.content-section { padding: 6.25rem 0; }
.section-title { margin-bottom: 3.5rem; }
@media (max-width: 48rem) {
  .content-section { padding: 4rem 0; }
  .section-title { margin-bottom: 2.25rem; }
  body { font-size: 1.0625rem; }
}


/* sections read left-aligned, like a studio site — not a centered template */
.section-title { text-align: left; }
.section-title h2 { margin-left: 0; margin-right: 0; }
.section-title p { margin-left: 0; }

/* kickers: quiet editorial labels with a short rule, not tracked-caps badges */
.kicker, .ph-kicker, .pc-kicker {
  text-transform: none; letter-spacing: 0; font-family: var(--font-text);
  font-size: 0.9375rem; font-weight: 500; color: var(--muted); background: none; }
.kicker::before { content: ""; width: 1.625rem; height: 1px; background: currentColor;
  opacity: .6; align-self: center; }
#testimonials .kicker { color: #93a8ff; }

/* display text is set solid — no gradient-clipped type anywhere */
.hero-title .grad, .quote-card .truth .hl, .footer .logo .accent,
.t-card .qmark, .err-code {
  background: none; -webkit-background-clip: initial; background-clip: initial;
  -webkit-text-fill-color: currentColor; }
.hero-title .grad { color: inherit; }
.quote-card .truth .hl, .t-card .qmark { color: var(--brand-text); }
.footer .logo .accent { color: #41E2FF; }
.err-code { color: var(--brand-text); }

/* buttons: one confident solid, hover darkens — no gradient sweep */
.btn-primary { background: #294cff; }
.btn-primary:hover { background: #1e3be0; }

/* calmer surfaces: tighter corners, borders over glow */
.card, .f-card, .why-item, .t-card, .proof-card { border-radius: 0.875rem; }


/* vindaloo palette on our tokens */
:root {
  --wash: #F7FAFF; --border: #E3E8F4; --border-strong: #CBD6E8;
  --ink: #1D1D1D; --ink-2: #32373C; --text: #454545; --muted: #6b6b6b;
  --faint: #848484;
  --panel: #32373C; --panel-2: #3d434b; --panel-border: #4a515a;
  --panel-faint: #9aa1a8; --panel-text: #d2d6db;
  --brand: #05B088; --brand-strong: #049776; --brand-text: #04795F;
  --brand-glow: rgba(5,176,136,.25); --brand-soft: #E2FFF8; }
.btn-primary { background: #05B088; }
.btn-primary:hover { background: #049776; }

/* light hero on the blue-white wash with a soft teal light */
.hero { background:
  radial-gradient(52% 42% at 78% 6%, rgba(5,176,136,.12), transparent 68%),
  #F8FBFF; }
.hero-light {
  background: radial-gradient(38% 28% at 12% 90%, rgba(65,226,255,.05), transparent 72%);
  filter: blur(1.625rem); opacity: .48;
}
/* day mode: headline in the two logo blues, 50:50 across the split */
.hero-grid-lines { display: none; }
.hero-badge {
  background: rgba(255,255,255,.88);
  color: #24364b;
  border-color: rgba(41,76,255,.16);
  box-shadow: 0 1rem 2.375rem rgba(15,23,42,.12), inset 0 1px 0 rgba(255,255,255,.72);
  font-family: var(--font-text); font-size: 0.875rem; font-weight: 600;
  letter-spacing: .02em; text-transform: none;
}
.hero-badge .stars { color: #9a3412; letter-spacing: .04em; font-size: 0.8125rem; }
.hero-title { color: #203fd0; text-shadow: none; }
.hero-title .grad {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: #247fd8;
  color: #247fd8;
  text-shadow: none;
}
.hero .lead { color: #26384d; font-weight: 500; text-shadow: none; }
.hero-note { color: #31465f; font-size: 0.9375rem; font-weight: 600; }
.hero .btn-outline {
  background: rgba(255,255,255,.84); color: #1f3047;
  border-color: rgba(41,76,255,.18); box-shadow: 0 0.75rem 2rem rgba(15,23,42,.10);
}
.hero .btn-outline:hover { background: rgba(255,255,255,.92); color: var(--brand-text); border-color: rgba(41,76,255,.28); }

/* moon toggle: the hero flips dark — headline goes near-white, teal light stays */
:root[data-theme="dark"] .hero {
  background: linear-gradient(180deg, #0b1120 0%, #0d1526 60%, #101b38 100%); }
:root[data-theme="dark"] .hero-title { color: #F1F5F9; }
:root[data-theme="dark"] .hero .lead,
:root[data-theme="dark"] .hero-note { color: rgba(241,245,249,.86); }
:root[data-theme="dark"] .hero-light { background:
  radial-gradient(52% 42% at 78% 6%, rgba(5,176,136,.14), transparent 68%); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero {
    background: linear-gradient(180deg, #0b1120 0%, #0d1526 60%, #101b38 100%); }
  :root:not([data-theme="light"]) .hero-title { color: #F1F5F9; }
  :root:not([data-theme="light"]) .hero .lead,
  :root:not([data-theme="light"]) .hero-note { color: rgba(241,245,249,.86); }
  :root:not([data-theme="light"]) .hero-light { background:
    radial-gradient(52% 42% at 78% 6%, rgba(5,176,136,.14), transparent 68%); }
}

/* alternating band rhythm like theirs: blue-white / deeper blue-gray */
.alt-section { background: #E3E8F4; }

/* ── hero background video, veiled for readability ── */
.hero { position: relative; overflow: hidden; }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 42%;
  filter: none; backface-visibility: hidden;
  -webkit-backface-visibility: hidden; z-index: 0; }
.hero-veil { position: absolute; inset: 0; z-index: 0; background:
  linear-gradient(90deg, rgba(248,251,255,.56) 0%,
    rgba(248,251,255,.22) 40%, rgba(248,251,255,.03) 100%); }
.hero > .container, .hero .hero-split { position: relative; z-index: 1; }
:root[data-theme="dark"] .hero-veil { background:
  linear-gradient(90deg, rgba(11,17,32,.95) 0%,
    rgba(11,17,32,.88) 46%, rgba(11,17,32,.74) 100%); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero-veil { background:
    linear-gradient(90deg, rgba(11,17,32,.95) 0%,
      rgba(11,17,32,.88) 46%, rgba(11,17,32,.74) 100%); }
}
@media (prefers-reduced-motion: reduce) { .hero-video { display: none; } }
@media (max-width: 48rem) { .hero-video { display: none; } }

/* decorative motion only runs while the section is in view */
.hero:not(.is-live) .fspin,
.hero:not(.is-live) .fspin .fcard,
.marquee:not(.is-live) .track,
.logo-strip:not(.is-live) .logo-track,
#testimonials:not(.is-live) .t-row,
.footer:not(.is-live)::before {
  animation-play-state: paused;
}

/* below-the-fold sections defer layout/paint until near view */
#main > :not(.hero):not(.marquee-services),
.footer {
  content-visibility: auto;
  contain-intrinsic-size: 50rem;
}

/* ═══ craft pass (owner-pasted humanize brief, 22 Jul) — alignment truth,
   grouping, reading measure, gentle motion, varied rhythm. No identity,
   content, button or palette changes. ═══ */

/* alignment: subs were still auto-centered under left-aligned titles */
.section-title .sub { margin: 0; }
.section-title h2 { margin: 0 0 0.625rem; }
.section-title .kicker { margin-bottom: 0.625rem; }
.section-title { margin-bottom: 3.625rem; }

/* proximity: title cluster tight, air before the content it introduces */
.prose .sec-h { margin-bottom: 1.125rem; }

/* reading measure: 1.125rem body wants a bounded line */
.prose p, .article p { max-width: 70ch; }
.section-title .sub { max-width: 58ch; }
.why-formula p { max-width: 58ch; }

/* micro-interactions: gentle, consistent */
a { transition: color .16s ease; }
.card, .f-card, .why-item, .t-card, .proof-card, .hs-block {
  transition: transform .35s var(--ease-out2), box-shadow .35s ease,
    border-color .35s ease; }
.card:hover, .f-card:hover, .why-item:hover { transform: translateY(-0.1875rem); }

/* rhythm: sections pace the story instead of repeating one band */
.content-section { padding: 5.75rem 0; }
.wash-section { padding: 6.5rem 0; }
#why { padding-top: 7rem; padding-bottom: 6.5rem; }
#testimonials { padding-top: 6.5rem; padding-bottom: 6.5rem; }
.cta { padding-top: 7.375rem; padding-bottom: 7.875rem; }
@media (max-width: 48rem) {
  .content-section, .wash-section { padding: 4rem 0; }
  #why, #testimonials { padding-top: 4.5rem; padding-bottom: 4.5rem; }
  .cta { padding-top: 5rem; padding-bottom: 5.5rem; }
  .section-title { margin-bottom: 2.5rem; } }

/* the finale is the one deliberately centered moment on the page */
.cta { text-align: center; }
.cta h2 { margin-left: auto; margin-right: auto; }

/* footer: clearer column grouping */
.footer .footer-grid { gap: 3rem 2.5rem; }
.footer h3 { margin-bottom: 0.875rem; }
.footer li { margin-bottom: 0.5rem; }

/* ── Why-section ambient footage, hero-style veil ── */
.why { position: relative; overflow: hidden; }
.why-video { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0; }
.why-veil { position: absolute; inset: 0; z-index: 0; background:
  linear-gradient(180deg, rgba(5,176,136,.05), rgba(5,176,136,.05)),
  linear-gradient(180deg, rgba(24,27,32,.88) 0%,
    rgba(24,27,32,.50) 28%, rgba(24,27,32,.42) 72%,
    rgba(24,27,32,.88) 100%); }
.why-video { filter: none; opacity: 1; backface-visibility: hidden;
  -webkit-backface-visibility: hidden; }
.why > .glow, .why > .container { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .why-video { display: none; } }
@media (max-width: 48rem) { .why-video { display: none; } }

/* ── contact page cinema: footage behind the whole page ── */
.pg-contact .cine { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.pg-contact .cine video { width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.85); }
.pg-contact .cine-veil { position: absolute; inset: 0; background:
  linear-gradient(180deg, rgba(5,176,136,.07), rgba(5,176,136,.07)),
  linear-gradient(180deg, rgba(248,251,255,.86) 0%,
    rgba(248,251,255,.7) 38%, rgba(248,251,255,.56) 100%); }
/* hero copy holds its own on the footage */
.pg-contact .page-hero h1 { color: var(--ink); }
.pg-contact .page-hero .lead, .pg-contact .ph-trust { color: var(--text); }
.pg-contact main > :not(.cine), .pg-contact .header, .pg-contact footer,
.pg-contact .chatbot, .pg-contact .call-fab { position: relative; z-index: 1; }
.pg-contact .page-hero { background: transparent !important; }
.pg-contact .content-section { background: transparent; }
.pg-contact .wash-section { background: rgba(247,250,255,.55); }
:root[data-theme="dark"] .pg-contact .cine-veil { background:
  linear-gradient(180deg, rgba(5,176,136,.07), rgba(5,176,136,.07)),
  rgba(11,17,32,.78); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pg-contact .cine-veil { background:
    linear-gradient(180deg, rgba(5,176,136,.07), rgba(5,176,136,.07)),
    rgba(11,17,32,.78); } }
@media (prefers-reduced-motion: reduce) { .pg-contact .cine video { display: none; } }
@media (max-width: 48rem) { .pg-contact .cine video { display: none; } }

/* ── hand-drawn marker under "hands-on" — draws in on section reveal ── */
.hand-mark { position: relative; display: inline-block; }
.hand-mark svg { position: absolute; left: -2%; bottom: -.26em; width: 104%;
  height: .36em; overflow: visible; }
.hand-mark path { fill: none; stroke: #05B088; stroke-width: 5;
  stroke-linecap: round; opacity: .8;
  stroke-dasharray: 480; stroke-dashoffset: 480; }
.section-title.in .hand-mark path { stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.1s cubic-bezier(.65,0,.35,1) .45s; }
@media (prefers-reduced-motion: reduce) {
  .hand-mark path { stroke-dashoffset: 0; }
  .section-title.in .hand-mark path { transition: none; } }


/* performance overrides: preserve the current look, reduce first-paint cost */
.hero-video { opacity: 0; transition: opacity .6s var(--ease-out2); }
.hero-video.is-ready { opacity: 1; }
.hero .no-animate-lcp {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  animation: none !important;
  transition: none !important;
}

/* homepage service marquee: logo-style badges instead of plain text */
.marquee-services { padding: 1rem 0 1.125rem; }
.marquee-services .track { gap: .9rem; animation-duration: 48s; }
.marquee-services .item {
  gap: .75rem;
  padding: .7rem .95rem;
  border: 1px solid rgba(50,55,60,.08);
  border-radius: 62.4375rem;
  background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(247,250,255,.98));
  color: var(--text);
  letter-spacing: 0;
  text-transform: none;
  font-size: .9rem;
  font-weight: 600;
  box-shadow: 0 0.625rem 1.5rem rgba(15,23,42,.06);
}
.marquee-services .item::before { content: none; }
.marquee-services .svc-logo .svc-label { color: var(--text); }
.marquee-services .svc-tag {
  color: var(--muted);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.marquee-services .svc-mark {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.marquee-services .svc-mark-img {
  min-width: 1.75rem;
  height: 1.5rem;
}
.marquee-services .svc-mark-img img {
  display: block;
  width: auto;
  height: 1.4rem;
  max-width: 5.5rem;
}
.marquee-services .svc-label { line-height: 1; }
[data-theme="dark"] .marquee-services .item {
  background: rgba(17,23,34,.78);
  border-color: rgba(147,168,255,.18);
  box-shadow: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .marquee-services .item {
    background: rgba(17,23,34,.78);
    border-color: rgba(147,168,255,.18);
    box-shadow: none;
  }
}
@media (max-width: 48rem) {
  .marquee-services .track { gap: .75rem; animation-duration: 34s; }
  .marquee-services .item { padding: .62rem .82rem; }
  .marquee-services .svc-mark-img { min-width: 1.45rem; height: 1.25rem; }
  .marquee-services .svc-mark-img img { height: 1.15rem; max-width: 4.6rem; }
  .marquee-services .svc-label { font-size: .84rem; }
  .marquee-services .svc-tag .svc-label { font-size: .72rem; }
}

/* iOS no-zoom floor for the search input (real 16px) */
.kbar-input input { font-size: max(16px, 1rem); }
.social-links svg { width: 1.0625rem; height: 1.0625rem; }
.t-pause svg { width: 0.875rem; height: 0.875rem; }

/* ═══ Enterprise validation pass (23 Jul 2026) ═══ */
.header {
  --nav-link-color: rgba(255,255,255,.96);
  --nav-link-strong: #ffffff;
  --nav-utility-bg: rgba(255,255,255,.12);
  --nav-utility-border: rgba(255,255,255,.24);
  --nav-utility-shadow: 0 0 0 rgba(0,0,0,0);
}
.navbar-brand svg { color: var(--nav-logo-color, var(--ink)); }
.navbar-nav > li > .nav-link { color: var(--nav-link-color); }
.navbar-nav > li > .nav-link:hover,
.navbar-nav > li > .nav-link:focus-visible,
.navbar-nav > li > .nav-link.active { color: var(--nav-link-strong); }
.theme-toggle, .search-btn, .call-btn, .nav-burger {
  background: var(--nav-utility-bg);
  border-color: var(--nav-utility-border);
  box-shadow: var(--nav-utility-shadow);
  color: var(--nav-link-color);
  backdrop-filter: blur(12px) saturate(1.18);
}
.theme-toggle:hover, .search-btn:hover, .call-btn:hover, .nav-burger:hover,
.theme-toggle:focus-visible, .search-btn:focus-visible, .call-btn:focus-visible, .nav-burger:focus-visible {
  color: var(--nav-link-strong);
}
:root[data-theme="light"] .header,
:root[data-theme="light"] .header.scrolled {
  --nav-link-color: rgba(24,38,62,.84);
  --nav-link-strong: #18263e;
  --nav-utility-bg: rgba(255,255,255,.88);
  --nav-utility-border: rgba(24,38,62,.12);
  --nav-utility-shadow: 0 1rem 2.25rem rgba(15,23,42,.08);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .header,
  :root:not([data-theme="dark"]) .header.scrolled {
    --nav-link-color: rgba(24,38,62,.84);
    --nav-link-strong: #18263e;
    --nav-utility-bg: rgba(255,255,255,.88);
    --nav-utility-border: rgba(24,38,62,.12);
    --nav-utility-shadow: 0 1rem 2.25rem rgba(15,23,42,.08);
  }
}
@media (hover: hover) and (pointer: fine) and (min-width: 1121px) {
  .header .nav-item:not(.open):hover > .dropdown {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  .header .nav-item:not(.open):hover > .dropdown li {
    opacity: 0;
    transform: translateY(-0.3125rem);
  }
  .header .nav-item.open > .dropdown,
  .header .nav-item.open:focus-within > .dropdown,
  .header .nav-item.open:hover > .dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .header .nav-item.open > .dropdown.mega,
  .header .nav-item.open:focus-within > .dropdown.mega,
  .header .nav-item.open:hover > .dropdown.mega {
    transform: translateX(-50%);
  }
  .header .nav-item.open > .dropdown li,
  .header .nav-item.open:focus-within > .dropdown li,
  .header .nav-item.open:hover > .dropdown li {
    opacity: 1;
    transform: none;
  }
}
.hero-split > :first-child { min-width: 0; }
.hero .lead, .hero-note { max-width: 36rem; }
@media (max-width: 1080px) {
  .hero-split { grid-template-columns: 1fr; }
  .hero-visual { display: none; }
  .hero-title { max-width: 12ch; }
}
@media (max-width: 768px) {
  .hero .container { padding-inline: 1rem; }
  .hero-title { font-size: clamp(2.2rem, 9vw, 3.55rem); max-width: 10.5ch; }
  .hero .lead { font-size: 1rem; line-height: 1.72; max-width: 31ch; }
  .hero-actions { gap: 0.75rem; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .hero-note { max-width: 30ch; margin-bottom: 1.75rem; }
  .stats { gap: 0.75rem; }
  .cookie-bar { left: 0.75rem; right: 0.75rem; max-width: none; }
}
@media (max-width: 480px) {
  body:has(.sticky-cta.shown) .chatbot { transform: translateY(-5rem); }
}