/* ============================================================
   Modern Marketing Lab — shared design system
   60% cream · 30% black · 10% red
   ============================================================ */

:root {
  --cream:    #FAF8F4;
  --cream-2:  #F2ECE1;
  --hairline: #E4DCCE;
  --black:    #111111;
  --text-2:   #544F49;
  --red:      #C62828;
  --red-ink:  #A81E1E;

  --maxw: 1240px;
  --gutter: clamp(20px, 5vw, 64px);
  --nav-h: 68px;

  --font-display: "Schibsted Grotesk", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 12px); zoom: 1.1; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  padding-top: var(--nav-h);
  background: var(--cream);
  color: var(--black);
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

::selection { background: var(--red); color: #fff; }

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.02;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-2);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--red);
}
.eyebrow--plain::before { display: none; }
.eyebrow--red { color: var(--red); }

.lead {
  font-size: clamp(20px, 2.4vw, 27px);
  line-height: 1.45;
  color: var(--text-2);
  font-weight: 400;
  max-width: 40ch;
}

.display {
  font-size: clamp(42px, 7vw, 92px);
  letter-spacing: -0.04em;
}
.section-title {
  font-size: clamp(34px, 5vw, 64px);
}

.red { color: var(--red); }
.muted { color: var(--text-2); }

a { color: var(--red); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Layout ---------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding-inline: var(--gutter);
}
section { position: relative; }
.section {
  padding-block: clamp(72px, 11vw, 150px);
}
.section--tight { padding-block: clamp(56px, 8vw, 104px); }

.dark {
  background: var(--black);
  color: var(--cream);
}
.dark h1, .dark h2, .dark h3, .dark h4 { color: var(--cream); }
.dark .lead, .dark .muted { color: #B6AFA6; }
.dark .eyebrow { color: #B6AFA6; }
.dark .hairline-rule { background: rgba(255,255,255,0.14); }

.hairline-rule { height: 1px; background: var(--hairline); border: 0; margin: 0; }

/* ---------- Buttons ---------- */
.btn {
  --pad-y: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  padding: var(--pad-y) 26px;
  border-radius: 14px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background .3s var(--ease), color .3s var(--ease),
              border-color .3s var(--ease), transform .15s var(--ease);
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }

.btn--red {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
}
.btn--red:hover { background: var(--red-ink); border-color: var(--red-ink); color:#fff; }

.btn--ghost {
  background: transparent;
  color: var(--black);
  border-color: var(--black);
}
.btn--ghost:hover { background: var(--black); color: var(--cream); }

.dark .btn--ghost { color: var(--cream); border-color: rgba(255,255,255,0.55); }
.dark .btn--ghost:hover { background: var(--cream); color: var(--black); border-color: var(--cream); }

.btn--lg { font-size: 17px; --pad-y: 18px; padding-inline: 32px; }

.btn .arrow { transition: transform .3s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

/* ---------- Focus ---------- */
:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px;
  border-radius: 14px;
}
.dark :focus-visible { outline-color: #fff; }

.skip-link {
  position: absolute;
  left: 16px; top: -60px;
  background: var(--red); color: #fff;
  padding: 12px 18px; border-radius: 2px; z-index: 200;
  font-family: var(--font-mono); font-size: 13px; letter-spacing: .1em;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 16px; text-decoration: none; }

/* ============================================================
   Navigation
   ============================================================ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--cream) 88%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--hairline);
}
.nav--onhero {
  background: transparent;
  border-bottom-color: transparent;
}
.nav__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 12px var(--gutter);
  display: flex;
  align-items: center;
  gap: 28px;
}
.nav__brand {
  display: flex; align-items: center; gap: 12px;
  text-decoration: none; color: inherit;
  margin-right: auto;
}
.nav__brand:hover { text-decoration: none; }
.nav__brand img { width: 44px; height: 44px; border-radius: 7px; }
.nav__brand span {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: inherit;
  line-height: 1.25;
  white-space: nowrap;
}
.nav__links {
  display: flex;
  align-items: center;
  gap: 30px;
  list-style: none;
  margin: 0; padding: 0;
}
.nav__links a {
  color: inherit;
  font-size: 15.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  position: relative;
  padding: 4px 0;
}
.nav__links a:hover { text-decoration: none; }
.nav__links a::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -2px;
  height: 2px; background: var(--red);
  transform: scaleX(0); transform-origin: left;
  transition: transform .25s var(--ease);
}
.nav__links a:hover::after { transform: scaleX(1); }
.nav__links a[aria-current="page"] { color: var(--red); }
.nav__links a[aria-current="page"]::after { transform: scaleX(1); }

.nav--onhero,
.nav--onhero .nav__brand span,
.nav--onhero .nav__links a { color: var(--cream); }
.nav--onhero .nav__links a[aria-current="page"] { color: #fff; }

/* once scrolled past the hero, nav returns to the calm cream system */
.nav--onhero.nav--solid {
  background: color-mix(in srgb, var(--cream) 88%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--hairline);
}
.nav--onhero.nav--solid,
.nav--onhero.nav--solid .nav__brand span,
.nav--onhero.nav--solid .nav__links a { color: var(--black); }
.nav--onhero.nav--solid .nav__links a[aria-current="page"] { color: var(--red); }

.nav__cta { display: flex; align-items: center; gap: 14px; }

.nav__toggle {
  display: none;
  background: none; border: 0; cursor: pointer;
  width: 42px; height: 42px; padding: 9px;
  color: inherit;
}
.nav__toggle svg { width: 100%; height: 100%; }

/* ============================================================
   Mobile nav — full-screen editorial overlay  (<= 880px only)
   Designed via judge-panel workflow. Reacts purely to
   body.menu-open + button[aria-expanded="true"]. No JS changes.
   Desktop (>=881px) untouched.
   ============================================================ */
@media (max-width: 880px) {

  .nav__toggle { display: inline-flex; }
  .nav__cta .btn--red { display: none; }

  /* toggle stays above the overlay so it acts as the close (X) */
  .nav__toggle {
    position: relative;
    z-index: 140;
    width: 46px; height: 46px;
    padding: 11px;
    color: inherit;
    transform: none;
  }
  /* keep the real brand visible above the overlay as the menu header */
  .nav__brand { position: relative; z-index: 140; }

  /* ---- full-screen overlay panel (the <ul>) ---- */
  .nav__links {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    z-index: 130;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    margin: 0;
    padding-top: max(calc(var(--nav-h) + 28px), env(safe-area-inset-top, 0px));
    padding-right: var(--gutter);
    padding-left: var(--gutter);
    padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
    background: var(--cream);
    color: var(--black);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    pointer-events: none;
    transition: opacity .42s var(--ease), transform .55s var(--ease), visibility 0s linear .42s;
  }
  .nav__links::before {
    content: "Menu";
    display: block;
    font-family: var(--font-mono);
    font-size: 12px; font-weight: 500;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--red);
    padding-bottom: 18px; margin-bottom: 28px;
    border-bottom: 1px solid var(--hairline);
    opacity: 0; transform: translateY(8px);
    transition: opacity .4s var(--ease) .06s, transform .4s var(--ease) .06s;
  }
  body.menu-open .nav__links {
    opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
    transition: opacity .42s var(--ease), transform .55s var(--ease), visibility 0s linear 0s;
  }
  body.menu-open .nav__links::before { opacity: 1; transform: translateY(0); }
  body.menu-open { overflow: hidden; scrollbar-gutter: stable; }

  /* ---- link items: large display type, generous targets ---- */
  .nav__links li { list-style: none; border-bottom: 1px solid var(--hairline); }
  .nav__links a {
    display: flex; align-items: center;
    min-height: 64px; padding: 14px 0;
    font-family: var(--font-display);
    font-size: clamp(30px, 8.5vw, 42px);
    font-weight: 500; letter-spacing: -0.02em; line-height: 1.05;
    color: var(--black);
  }
  body.menu-open .nav--onhero .nav__links a,
  body.menu-open .nav--onhero.nav--solid .nav__links a { color: var(--black); }
  body.menu-open .nav--onhero .nav__links a[aria-current="page"],
  body.menu-open .nav--onhero.nav--solid .nav__links a[aria-current="page"] { color: var(--red); }
  .nav__links a::after { content: none; }
  .nav__links a:active { color: var(--red-ink); }
  .nav__links a[aria-current="page"] { color: var(--red); }
  .nav__links a[aria-current="page"]::before {
    content: ""; width: 10px; height: 10px; border-radius: 50%;
    background: var(--red); margin-right: 16px; margin-top: -0.18em; flex: none;
  }
  .nav__links a:focus-visible { outline: 2px solid var(--red-ink); outline-offset: 4px; border-radius: 4px; }

  /* per-item entrance stagger */
  .nav__links li { opacity: 0; transform: translateY(12px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
  body.menu-open .nav__links li { opacity: 1; transform: translateY(0); }
  body.menu-open .nav__links li:nth-child(1) { transition-delay: .10s; }
  body.menu-open .nav__links li:nth-child(2) { transition-delay: .16s; }
  body.menu-open .nav__links li:nth-child(3) { transition-delay: .22s; }
  body.menu-open .nav__links li:nth-child(4) { transition-delay: .28s; }
  body.menu-open .nav__links li:nth-child(5) { transition-delay: .34s; }

  @media (max-width: 360px) {
    .nav__links a { font-size: clamp(26px, 9vw, 32px); min-height: 58px; }
    .nav__links a[aria-current="page"]::before { width: 9px; height: 9px; }
  }

  /* ---- CONTACT section: 6 social icons, 2 cols x 3 rows ---- */
  .nav__links .nav__contact { border-bottom: 0; margin-top: auto; padding-top: 26px; }
  .nav__contact-label {
    display: block;
    font-family: var(--font-mono);
    font-size: 12px; font-weight: 500;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--text-2);
    margin-bottom: 14px;
  }
  .nav__socials { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .nav__socials .social-btn {
    display: grid; place-items: center;
    width: 100%; height: 54px; min-height: 54px;
    padding: 0; border-radius: 14px;
    color: var(--black);
    background: rgba(198,40,40,.04);
    border: 1.5px solid rgba(198,40,40,.45);
    font-size: 0;
  }
  .nav__socials .social-btn svg { width: 22px; height: 22px; }
  .nav__socials .social-btn:active { color: var(--red); background: rgba(198,40,40,.1); }

  /* ---- Book-a-call CTA — full-width red button, very bottom ---- */
  .nav__links .nav__cta-mobile { border-bottom: 0; margin-top: 0; padding-top: 18px; }
  .nav__links .nav__cta-mobile .btn {
    display: flex; width: 100%; min-height: 60px;
    padding: 18px 26px; font-size: 17px; border-radius: 16px;
  }

  /* ---- hamburger -> close (X), CSS only ---- */
  .nav__toggle svg { position: relative; z-index: 1; transition: opacity .25s var(--ease), transform .35s var(--ease); }
  .nav__toggle::before,
  .nav__toggle::after {
    content: ""; position: absolute; left: 50%; top: 50%; z-index: 2;
    width: 24px; height: 2px; background: currentColor; border-radius: 2px;
    transform: translate(-50%, -50%) rotate(0deg) scaleX(0);
    transition: transform .35s var(--ease), opacity .25s var(--ease);
    opacity: 0; pointer-events: none;
  }
  body.menu-open .nav__toggle svg,
  .nav__toggle[aria-expanded="true"] svg {
    opacity: 0; visibility: hidden; transform: scale(.6) rotate(90deg);
    transition: opacity .25s var(--ease), transform .35s var(--ease), visibility 0s linear .25s;
  }
  body.menu-open .nav__toggle::before,
  .nav__toggle[aria-expanded="true"]::before { opacity: 1; transform: translate(-50%, -50%) rotate(45deg) scaleX(1); }
  body.menu-open .nav__toggle::after,
  .nav__toggle[aria-expanded="true"]::after { opacity: 1; transform: translate(-50%, -50%) rotate(-45deg) scaleX(1); }
  body.menu-open .nav__toggle,
  body.menu-open .nav__brand,
  body.menu-open .nav__brand span { color: var(--black); }
  .nav__toggle:focus-visible { outline: 2px solid var(--red-ink); outline-offset: 2px; border-radius: 8px; }

  /* ---- scrim kept for JS click-to-close ---- */
  .menu-scrim {
    position: fixed; inset: 0; background: transparent;
    opacity: 0; pointer-events: none; transition: opacity .4s var(--ease); z-index: 99;
  }
  body.menu-open .menu-scrim { opacity: 1; pointer-events: auto; }

  @media (prefers-reduced-motion: reduce) {
    .nav__links, .nav__links::before, .nav__links li,
    .nav__toggle svg, .nav__toggle::before, .nav__toggle::after, .menu-scrim { transform: none !important; }
    .nav__links { transition: opacity 1ms linear, visibility 0s linear 1ms !important; }
    body.menu-open .nav__links { transition: opacity 1ms linear, visibility 0s linear 0s !important; }
    .nav__links::before, .nav__links li, .menu-scrim { transition: opacity 1ms linear !important; }
    .nav__toggle svg, .nav__toggle::before, .nav__toggle::after { transition: opacity 1ms linear !important; }
    body.menu-open .nav__links li { transition-delay: 0s !important; }
  }
}
@media (min-width: 881px) {
  .nav__cta-mobile { display: none; }
}

/* ============================================================
   Hero (animated particle background) — home only
   ============================================================ */
.hero {
  position: relative;
  margin-top: calc(-1 * var(--nav-h));
  background: var(--black);
  color: var(--cream);
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}
#hero-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
  display: block;
}
/* dark gradient so text stays legible over moving particles */
.hero__veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(17,17,17,0.96) 0%, rgba(17,17,17,0.78) 34%, rgba(17,17,17,0.12) 70%, rgba(17,17,17,0) 100%),
    linear-gradient(0deg, rgba(17,17,17,0.85) 0%, rgba(17,17,17,0) 38%);
}
@media (max-width: 720px) {
  .hero__veil {
    background:
      linear-gradient(0deg, rgba(17,17,17,0.92) 6%, rgba(17,17,17,0.55) 48%, rgba(17,17,17,0.35) 100%);
  }
}
.hero__inner {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--maxw);
  margin: 0 auto; padding-inline: var(--gutter);
  padding-block: clamp(120px, 18vh, 200px) 64px;
}
.hero__content { max-width: min(860px, 100%); }
.hero h1 {
  color: var(--cream);
  max-width: none;
  white-space: nowrap;
  font-size: clamp(26px, 5.6vw, 70px);
  letter-spacing: -0.045em;
  line-height: 0.98;
  margin-bottom: 28px;
}
.hero__sub {
  color: #D7D0C6;
  font-size: clamp(18px, 2.1vw, 24px);
  line-height: 1.5;
  max-width: 46ch;
  margin-bottom: 40px;
  font-weight: 400;
}
.hero__actions { display: flex; gap: 16px; flex-wrap: wrap; }
.hero__scroll {
  position: fixed;
  right: var(--gutter);
  bottom: 48px;
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  cursor: default;
  user-select: none;
  transition: opacity .4s var(--ease);
}
.hero__scroll span {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: rgba(250,248,244,0.85);
  writing-mode: horizontal-tb;
  margin-bottom: 2px;
}
.scroll-mouse {
  width: 22px;
  height: 36px;
  flex: none;
}
.scroll-mouse rect {
  stroke: rgba(250,248,244,0.85);
}
.scroll-dot {
  fill: var(--red);
  animation: scrolldot 2s var(--ease) infinite;
}
@keyframes scrolldot {
  0%   { transform: translateY(0);    opacity: 1; }
  60%  { transform: translateY(11px); opacity: 0.6; }
  100% { transform: translateY(0);    opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-dot { animation: none; }
}

/* ============================================================
   Generic content blocks
   ============================================================ */
.grid { display: grid; gap: clamp(24px, 4vw, 56px); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) {
  .grid--2, .grid--3 { grid-template-columns: 1fr; }
}

.section-head { max-width: 760px; }
.section-head .eyebrow { margin-bottom: 22px; }
.section-head .section-title { margin-bottom: 24px; }

/* capability / feature card */
.card {
  background: var(--cream);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  padding: clamp(28px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.card:hover { border-color: var(--black); transform: translateY(-3px); }
.card__num {
  font-family: var(--font-mono);
  font-size: 13px; letter-spacing: .12em;
  color: var(--red);
}
.card h3 { font-size: clamp(22px, 2.4vw, 27px); letter-spacing: -0.025em; }
.card p { color: var(--text-2); font-size: 16.5px; }
.card ul {
  list-style: none; margin: 6px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 9px;
}
.card li {
  font-size: 15px; color: var(--black);
  padding-left: 20px; position: relative;
}
.card li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 7px; height: 7px; background: var(--red);
  border-radius: 50%;
}
.dark .card {
  background: #1a1a1a; border-color: rgba(255,255,255,0.1);
}
.dark .card:hover { border-color: rgba(255,255,255,0.35); }
.dark .card p { color: #B6AFA6; }
.dark .card li { color: var(--cream); }

/* stat */
.stat__num {
  font-size: clamp(48px, 7vw, 84px);
  font-weight: 800; letter-spacing: -0.04em;
  line-height: 1;
  color: var(--red);
}
.stat__label { color: var(--text-2); font-size: 16px; margin-top: 10px; }

/* ---- Case study KPI block (04 — Proof) ---- */
.cs-block { display: flex; flex-direction: column; gap: 0; }
.cs-header { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.cs-icon {
  width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid var(--hairline); background: var(--cream);
  display: grid; place-items: center; flex: none;
}
.cs-icon svg { width: 22px; height: 22px; }
.cs-eyebrow {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--red); margin: 0 0 4px;
}
.cs-company { font-size: 17px; font-weight: 600; color: var(--black); margin: 0; letter-spacing: -0.01em; }
.cs-context {
  font-size: 15.5px; line-height: 1.5; color: var(--text-2);
  margin: 0 0 20px; max-width: 52ch;
  padding-left: 16px; border-left: 2px solid rgba(198,40,40,.35);
}
.cs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cs-card {
  background: var(--cream);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: clamp(22px, 2.6vw, 32px) clamp(20px, 2.4vw, 28px) 22px;
  display: flex; flex-direction: column; gap: 10px;
}
.cs-num {
  font-family: var(--font-display);
  font-size: clamp(42px, 5.5vw, 68px);
  font-weight: 800; letter-spacing: -0.04em; line-height: 1;
  color: var(--red);
}
.cs-label { font-size: 15px; color: var(--black); line-height: 1.4; margin: 0; }
.cs-card { justify-content: flex-start; }
.cs-rule { display: block; width: 34px; height: 2px; background: var(--red); border-radius: 2px; margin-top: 8px; }
.cs-note {
  display: flex; align-items: center; gap: 8px;
  margin-top: 16px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .01em;
  color: var(--text-2);
}
.cs-note-t { white-space: nowrap; }
.cs-note svg { flex: none; color: var(--red); }
.cs-note a { color: var(--red); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; transition: color .2s var(--ease); }
.cs-note a:hover { color: var(--red-ink); }

/* ============================================================
   03 — WHAT WE BUILD  (Three layers. One system.)
   ============================================================ */
.build-head { margin-bottom: clamp(40px,5vw,60px); }
.build-title {
  font-size: clamp(40px, 5.5vw, 80px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.95;
  margin: 22px 0 28px;
  white-space: nowrap;
}
@media (max-width: 600px) { .build-title { white-space: normal; } }
.build-sub {
  font-size: clamp(16px, 1.4vw, 19px);
  color: var(--text-2);
  max-width: 48ch;
  line-height: 1.55;
  margin: 0 0 32px;
}

/* intro row: paragraph left, interactive guarantee callout right */
.build-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
  gap: clamp(28px, 4vw, 60px);
  align-items: center;
}
.build-row .build-sub { margin: 0; }

/* no box — clean shield (trust mark) + copy */
.build-guarantee {
  display: flex; align-items: center; gap: 14px;
  transform: translateY(clamp(40px, 8vw, 120px));
}
.bg-bind { flex: none; color: var(--red); transition: transform .35s var(--ease); }
.bg-bind svg { width: 36px; height: 36px; display: block; }
.build-guarantee:hover .bg-bind { transform: scale(1.1) rotate(-4deg); }
.bg-copy { margin: 0; max-width: 36ch; font-size: 14.5px; line-height: 1.45; color: var(--text-2); }
.bg-copy strong { display: block; margin-bottom: 2px; color: var(--black); font-weight: 700; letter-spacing: -0.01em; }
.bg-nowrap { white-space: nowrap; }

@media (max-width: 860px) {
  .build-row { grid-template-columns: 1fr; gap: 26px; }
  .build-guarantee { transform: none; }
}

/* ---- Connected-pipeline layout ---- */
.layers {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(16px, 2vw, 30px);
  row-gap: clamp(30px, 4.5vw, 66px);
  align-items: start;
}
/* container keeps .reveal so site.js toggles .in; we animate the cards, not the box */
.layers.reveal { opacity: 1; transform: none; }

/* asymmetric placement — reading order L1 → L2 → L3 stays obvious */
.layer--1 { grid-column: 1 / span 5;  grid-row: 1; }
.layer--2 { grid-column: 8 / span 5;  grid-row: 1; margin-top: clamp(46px, 7vw, 104px); }
.layer--3 { grid-column: 3 / span 7;  grid-row: 2; margin-top: clamp(6px, 2vw, 26px); }

/* the continuous data-flow beam, sitting behind the cards */
.layers__beam {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 0; pointer-events: none; overflow: visible;
}
.beam-track { stroke: rgba(198,40,40,.16); stroke-width: 2; stroke-linecap: round; }
.beam-flow  { stroke-width: 2.6; stroke-linecap: round; opacity: 0; transition: opacity .6s var(--ease); }
.layers.in .beam-flow { opacity: 1; }

/* the cards */
.layer {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  background:
    radial-gradient(130% 90% at 0% 0%, rgba(198,40,40,.045), rgba(198,40,40,0) 58%),
    linear-gradient(180deg, #FFFDFA 0%, var(--cream) 100%);
  border: 1px solid rgba(198,40,40,.4);
  border-radius: 22px;
  padding: clamp(22px, 2.5vw, 32px);
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 26px 54px -30px rgba(198,40,40,.4);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.layer:hover {
  transform: translateY(-5px);
  border-color: rgba(198,40,40,.5);
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 30px 60px -30px rgba(198,40,40,.4);
}



/* card header */
.layer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.layer__no {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; font-weight: 600;
  color: var(--red);
  border: 1px solid rgba(198,40,40,.4); border-radius: 8px;
  padding: 5px 9px; line-height: 1;
}
.layer__kicker {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--text-2);
}
.layer__head-l { display: inline-flex; align-items: center; gap: 9px; }
.layer__flag {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; line-height: 1;
  color: #fff; background: var(--red);
  border-radius: 999px; padding: 5px 9px;
}

/* L2 is the differentiator — give it quiet prominence via a stronger
   red border + deeper glow + the CORE pill (no top accent bar). */
.layer--feature {
  border-color: rgba(198,40,40,.7);
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 30px 64px -28px rgba(198,40,40,.55);
}
.layer--feature:hover {
  border-color: rgba(198,40,40,.85);
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 36px 72px -28px rgba(198,40,40,.6);
}

/* per-layer abstract diagram */
.layer__diagram {
  height: clamp(94px, 9.5vw, 118px);
  border-radius: 14px;
  background:
    radial-gradient(120% 150% at 50% 0%, rgba(198,40,40,.06), rgba(198,40,40,0) 70%),
    var(--cream-2);
  border: 1px solid var(--hairline);
  padding: 14px; margin-bottom: 22px; overflow: hidden;
}
.layer__diagram svg { width: 100%; height: 100%; display: block; }

/* ============================================================
   Per-layer diagrams — full-width "before → after" stories.
   L1 strangers pour through a funnel into customers ·
   L2 data flows into an AI chip, out comes a decision ·
   L3 scattered tools wire up into one hub. No words.
   ============================================================ */
.dg { width: 100%; height: 100%; display: block; overflow: visible; }

/* ---- L1 · ACQUIRE — a megaphone broadcasts and reaches the audience ---- */
.dg-mega-mouth, .dg-mega-horn, .dg-mega-handle { fill: var(--red); }
.dg-wave { fill: none; stroke: var(--red); stroke-width: 2.4; stroke-linecap: round; opacity: 0; transform-box: fill-box; transform-origin: left center; }
.dg-reached { fill: rgba(17,17,17,.4); }

.layers.in .dg-wave    { animation: dgWave 2.4s var(--ease) infinite; animation-delay: calc(var(--i) * .5s); }
.layers.in .dg-reached { animation: dgReached 2.4s var(--ease) infinite; animation-delay: calc(var(--i) * .3s + .35s); }
/* interactive: hovering the card speeds the broadcast up */
.layer:hover .dg-wave, .layer:hover .dg-reached { animation-duration: 1.5s; }

@keyframes dgWave {
  0%   { opacity: 0; transform: translateX(0) scale(.55); }
  22%  { opacity: 1; }
  78%  { opacity: .3; transform: translateX(34px) scale(1.3); }
  100% { opacity: 0; transform: translateX(42px) scale(1.35); }
}
@keyframes dgReached { 0%,42% { fill: rgba(17,17,17,.4); } 56% { fill: var(--red); } 85% { fill: var(--red); } 100% { fill: rgba(17,17,17,.4); } }

/* ---- L2 · DECIDE — data → AI chip → decision (left to right) ---- */
.dg-data rect { fill: rgba(17,17,17,.22); }
.dg-wire { stroke: rgba(17,17,17,.18); stroke-width: 1.4; }
.dg-aiflow { stroke: var(--red); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 6 94; stroke-dashoffset: 100; opacity: 0; filter: drop-shadow(0 0 2px rgba(198,40,40,.7)); }
.dg-chip-body { stroke: var(--red); stroke-width: 2; fill: rgba(198,40,40,.05); }
.dg-pins line { stroke: rgba(17,17,17,.3); stroke-width: 1.6; stroke-linecap: round; }
.dg-core { fill: var(--red); font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: .02em; text-anchor: middle; transform-box: fill-box; transform-origin: center; }
.dg-decide-ring { fill: none; stroke: rgba(198,40,40,.35); stroke-width: 1.8; }
.dg-decide-badge { fill: var(--red); transform-box: fill-box; transform-origin: center; }
.dg-check { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

.layers.in .dg-data rect { animation: dgDataPulse 2.8s var(--ease) infinite; }
.layers.in .dg-data rect:nth-child(2) { animation-delay: .1s; }
.layers.in .dg-data rect:nth-child(3) { animation-delay: .2s; }
.layers.in .dg-data rect:nth-child(4) { animation-delay: .3s; }
.layers.in .dg-aiflow-1 { animation: dgAiFlow1 2.8s linear infinite; }
.layers.in .dg-aiflow-2 { animation: dgAiFlow2 2.8s linear infinite; }
.layers.in .dg-core { animation: dgCorePulse 2.8s var(--ease) infinite; }
.layers.in .dg-decide-badge { animation: dgBadge 2.8s var(--ease) infinite; }

@keyframes dgDataPulse { 0%,100% { opacity: .5; } 50% { opacity: 1; } }
@keyframes dgAiFlow1 { 0% { stroke-dashoffset: 100; opacity: 0; } 5% { opacity: 1; } 30% { stroke-dashoffset: 0; opacity: 1; } 36%,100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes dgCorePulse { 0%,30% { transform: scale(1); } 40% { transform: scale(1.4); } 55% { transform: scale(1); } 100% { transform: scale(1); } }
@keyframes dgAiFlow2 { 0%,45% { stroke-dashoffset: 100; opacity: 0; } 50% { opacity: 1; } 72% { stroke-dashoffset: 0; opacity: 1; } 78%,100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes dgBadge { 0%,62% { transform: scale(1); } 74% { transform: scale(1.18); } 86%,100% { transform: scale(1); } }

/* ---- L3 · CONNECT — scattered marketing tools wire into one dashboard ---- */
.dg-conn-line { fill: none; stroke: rgba(17,17,17,.18); stroke-width: 1.5; stroke-dasharray: 100; stroke-dashoffset: 100; }
.dg-flow { fill: none; stroke: var(--red); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 6 94; stroke-dashoffset: 100; opacity: 0; filter: drop-shadow(0 0 2px rgba(198,40,40,.6)); }
.dg-tile { color: rgba(17,17,17,.42); }
.dg-tile-bg { fill: rgba(17,17,17,.05); stroke: currentColor; stroke-width: 1.6; }
.dg-glyph { fill: currentColor; }
.dg-glyph-stroke { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.dg-glyph-stroke .dg-glyph-fill { fill: currentColor; stroke: none; }
.dg-hub-tile { fill: var(--red); stroke: var(--red); }
.dg-hub-grid rect { fill: #fff; opacity: .92; }
.dg-hubg { transform-box: fill-box; transform-origin: center; }

.layers.in .dg-conn-line { animation: dgConnDraw .7s var(--ease) forwards; animation-delay: calc(var(--i) * .18s + .2s); }
.layers.in .dg-tile { animation: dgTileOn .5s var(--ease) forwards; animation-delay: calc(var(--i) * .18s + .7s); }
.layers.in .dg-flow { animation: dgFlowIn 2.4s linear infinite; animation-delay: calc(var(--i) * .3s + 1.6s); }
.layers.in .dg-hubg { animation: dgHubPulse 2.4s var(--ease) 1.6s infinite; }

@keyframes dgConnDraw { to { stroke-dashoffset: 0; } }
@keyframes dgTileOn { from { color: rgba(17,17,17,.42); } to { color: var(--red); } }
@keyframes dgFlowIn { 0% { stroke-dashoffset: 100; opacity: 0; } 8% { opacity: 1; } 70% { stroke-dashoffset: 0; opacity: 1; } 80%,100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes dgHubPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }

/* card text */
.layer h3 { font-size: clamp(19px, 1.6vw, 23px); letter-spacing: -0.025em; margin: 0 0 10px; }
.layer p  { font-size: 15px; color: var(--text-2); line-height: 1.55; margin: 0 0 20px; }

/* tags */
.layer__tags { list-style: none; margin: auto 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.layer__tags li {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .01em;
  color: var(--black); background: var(--cream);
  border: 1px solid var(--hairline); border-radius: 999px;
  padding: 6px 12px; line-height: 1;
}

/* staggered card reveal */
.layers .layer { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.layers.in .layer--1 { opacity: 1; transform: none; transition-delay: 0s; }
.layers.in .layer--2 { opacity: 1; transform: none; transition-delay: .12s; }
.layers.in .layer--3 { opacity: 1; transform: none; transition-delay: .24s; }

@media (max-width: 900px) {
  .layers { grid-template-columns: 1fr; }
  /* reset grid-row too, or L1 and L2 (both grid-row:1) collapse into the
     same cell on mobile and L1 disappears behind L2 */
  .layer--1, .layer--2, .layer--3 { grid-column: 1 / -1; grid-row: auto; margin-top: 0; }
  .layers__beam { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .layer { transition: border-color .2s; }
  .layer:hover { transform: none; }
  .layers .layer { opacity: 1; transform: none; transition: none; }
  /* diagrams settle to a clear static frame, no motion */
  .dg-wave { display: none; }
  .dg-reached { fill: var(--red); animation: none; }
  .dg-aiflow, .dg-flow { display: none; }
  .dg-data rect, .dg-core, .dg-decide-badge, .dg-check { animation: none; }
  .dg-decide-badge, .dg-check { opacity: 1; }
  .dg-conn-line { stroke-dashoffset: 0; animation: none; }
  .dg-tile { color: var(--red); animation: none; }
  .dg-hubg { animation: none; }
  .beam-flow { opacity: 1 !important; }
}

/* trust statement */
.trust-stmt {
  display: flex; align-items: center; gap: 10px;
  justify-content: flex-end;
  margin-top: clamp(32px,4vw,52px);
  font-size: 13.5px; color: var(--text-2);
}
.trust-stmt svg { flex: none; color: var(--text-2); }
@media (max-width: 640px) { .trust-stmt { justify-content: flex-start; } }

/* ============================================================
   Closing CTA band
   ============================================================ */
.cta-band {
  background: var(--black);
  color: var(--cream);
  text-align: center;
  padding-block: clamp(28px, 3.2vw, 44px);
  position: relative;
  overflow: hidden;
}
.cta-band__inner { max-width: 820px; margin: 0 auto; position: relative; z-index: 1; }
.cta-band h2 {
  color: var(--cream);
  font-size: clamp(36px, 6vw, 72px);
  letter-spacing: -0.04em;
  margin-bottom: 22px;
}
.cta-band p { color: #B6AFA6; font-size: clamp(18px, 2.2vw, 22px); margin-bottom: 40px; }
.cta-band .btn--ghost { color: var(--cream); border-color: rgba(255,255,255,.5); }
.cta-band .btn--ghost:hover { background: var(--cream); color: var(--black); }
.cta-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
/* faint loop glow behind CTA */
.cta-band__glow {
  position: absolute; left: 50%; top: 50%;
  width: 560px; height: 560px; transform: translate(-50%,-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(198,40,40,.20), transparent 62%);
  pointer-events: none;
}

/* ============================================================
   Footer
   ============================================================ */
.footer {
  background: var(--black);
  color: var(--cream);
  padding-block: clamp(56px, 7vw, 84px);
}
.footer {
  padding-top: 0;
  padding-bottom: 0;
}
.footer a { color: #C9C2B8; }
.footer a:hover { color: #fff; }

.footer__main {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(220px, 0.6fr);
  gap: clamp(40px, 8vw, 120px);
  align-items: start;
}
.footer__label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--red);
  font-weight: 500;
  margin: 0 0 26px;
}

/* contact — social buttons */
.footer__socials { display: flex; flex-wrap: nowrap; gap: 12px; }
.social-btn {
  width: 64px; height: 64px;
  display: inline-grid; place-items: center;
  border-radius: 16px;
  background: rgba(198,40,40,.03);
  border: 1.5px solid rgba(198,40,40,.5);
  color: #f3f0eb;
  transition: background .2s var(--ease), border-color .2s var(--ease),
              transform .2s var(--ease), box-shadow .2s var(--ease), color .2s var(--ease);
}
.social-btn svg { width: 24px; height: 24px; display: block; }
.social-btn:hover {
  background: rgba(198,40,40,.12);
  border-color: var(--red);
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 10px 32px rgba(198,40,40,.4), 0 0 0 1px rgba(198,40,40,.55);
}
.social-btn:active { transform: translateY(-1px); }
.social-btn:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.footer__connect { color: #8E877E; font-size: 14px; margin: 24px 0 0; }

/* site nav */
.footer__site ul { list-style: none; margin: 0; padding: 0; display: flex; flex-flow: row wrap; gap: 14px 28px; }
.footer__site a {
  font-size: 16px; color: #C9C2B8;
  position: relative; display: inline-block;
  transition: color .2s var(--ease), transform .2s var(--ease);
}
.footer__site a::after {
  content: ""; position: absolute; left: 0; bottom: -3px;
  width: 100%; height: 1px; background: var(--red);
  transform: scaleX(0); transform-origin: left;
  transition: transform .2s var(--ease);
}
.footer__site a:hover { color: #fff; text-decoration: none; }
.footer__site a:hover::after { transform: scaleX(1); }

/* divider + bottom bar */
.footer__divider {
  border-top: none;
  margin-top: 0;
}
.footer__bottom {
  display: flex; justify-content: space-between; align-items: center;
  gap: 20px; flex-wrap: wrap;
  padding-top: 0;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em;
  color: #8E877E; text-transform: uppercase;
}
.footer__bottom a { color: #8E877E; text-decoration: none; }
.footer__bottom a:hover { color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .social-btn, .footer__site a { transition: background .15s, border-color .15s, color .15s; }
  .social-btn:hover { transform: none; }
}

@media (max-width: 820px) {
  .footer__main { grid-template-columns: 1fr; gap: clamp(40px, 8vw, 56px); }
}
@media (max-width: 480px) {
  .social-btn { width: 46px; height: 46px; border-radius: 12px; }
  .social-btn svg { width: 20px; height: 20px; }
  .footer__socials { gap: 8px; }
  .footer__bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* ============================================================
   Loop motif
   ============================================================ */
.loop-figure { display: flex; justify-content: center; align-items: center; }
.loop-svg { width: 100%; max-width: 420px; height: auto; }
.loop-svg .ring-base { stroke: var(--black); }
.dark .loop-svg .ring-base { stroke: var(--cream); }
.loop-svg .ring-accent { stroke: var(--red); }
.loop-node { fill: var(--red); }
.loop-spin { transform-origin: 110px 110px; animation: loopspin 9s linear infinite; }
@keyframes loopspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .loop-spin { animation: none; } }

/* cycle list (Audience → Campaign → ...) */
.cycle {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
}
.cycle__item {
  font-family: var(--font-mono); font-size: 13px; letter-spacing: .1em;
  text-transform: uppercase;
  border: 1px solid var(--hairline);
  background: var(--cream);
  padding: 11px 16px; border-radius: 999px;
}
.dark .cycle__item { border-color: rgba(255,255,255,.18); background: #1a1a1a; color: var(--cream); }
.cycle__arrow { color: var(--red); font-size: 15px; }

/* ============================================================
   Approach section (02 — The approach)
   Balanced two-column: large globe + headline/paragraph/loop.
   ============================================================ */
/* problem section grid 52/48 */
.problem-grid {
  display: grid;
  grid-template-columns: 52% 48%;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.disconnect-vis { width: 100%; }
.disconnect-vis svg { width: 100%; height: auto; display: block; }
@media (max-width: 820px) {
  .problem-grid { grid-template-columns: 1fr; }
  .disconnect-vis { max-width: 480px; margin-inline: auto; }
}

.approach { padding-block: clamp(72px, 11vw, 150px); }
.section--even, .approach {
  min-height: clamp(640px, 80vh, 840px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.approach-grid {
  display: grid;
  grid-template-columns: 48% 52%;
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
.approach-visual {
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.approach-content { max-width: 680px; }
.approach-content .eyebrow { margin-bottom: 22px; }
.approach-content .section-title {
  font-size: clamp(44px, 5vw, 78px);
  line-height: 0.95;
  letter-spacing: -0.035em;
}
.approach-lead {
  margin-top: clamp(24px, 3vw, 34px);
  font-size: clamp(18px, 1.5vw, 21px);
  line-height: 1.5;
  color: #B6AFA6;
  max-width: 560px;
  font-weight: 400;
}
.approach-cta { margin-top: clamp(28px, 3vw, 38px); }

/* larger globe */
.globe-figure--lg { max-width: clamp(360px, 42vw, 600px); }

/* ---- feedback loop ---- */
.approach-loop {
  position: relative;
  width: 100%;
  max-width: 460px;
  aspect-ratio: 600 / 440;
  margin-top: clamp(40px, 4vw, 56px);
}
.loop-wires {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  overflow: visible;
}
.wire-ring { opacity: .38; }
.wire-spark {
  filter: drop-shadow(0 0 5px rgba(198,40,40,.9)) drop-shadow(0 0 11px rgba(198,40,40,.55));
}

/* nodes */
.loop-pill {
  position: absolute;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  background: #1a1a1a;
  border: 1px solid rgba(255,255,255,.18);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--cream);
  transition: border-color .3s var(--ease), background .3s var(--ease),
              box-shadow .3s var(--ease);
  cursor: default;
}
.loop-pill svg { width: 15px; height: 15px; flex: none; }
.loop-pill:hover {
  border-color: var(--red);
  background: #201515;
  box-shadow: 0 0 0 1px rgba(198,40,40,.35), 0 0 22px rgba(198,40,40,.28);
}
/* oval placement (matches viewBox vertices) */
.is-audience     { left: 50%;   top: 8%; }
.is-campaign     { left: 84%;   top: 35.5%; }
.is-data         { left: 71%;   top: 80%; }
.is-intelligence { left: 29%;   top: 80%; }
.is-decision     { left: 16%;   top: 35.5%; }

/* centre infinity */
.loop-centre {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  text-align: center;
}
.loop-infinity { width: 52px; height: 26px; opacity: .9; }
.loop-infinity path { animation: infinityGlow 4s var(--ease) infinite; }
@keyframes infinityGlow { 0%,100% { opacity:.55; } 50% { opacity:1; } }
.loop-centre__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .16em;
  line-height: 1.55;
  text-transform: uppercase;
  color: #8E877E;
}

@media (prefers-reduced-motion: reduce) {
  .wire-spark { display: none; }
  .loop-infinity path { animation: none; }
}

/* ---- responsive ---- */
@media (max-width: 1080px) {
  .approach-grid { grid-template-columns: 46% 54%; gap: 28px; }
  .loop-pill { font-size: 11px; height: 38px; padding: 0 13px; gap: 6px; }
  .loop-pill svg { width: 14px; height: 14px; }
}
@media (max-width: 820px) {
  .approach-grid { grid-template-columns: 1fr; gap: clamp(40px, 7vw, 64px); }
  .approach-visual { order: 2; }
  .approach-content { order: 1; max-width: none; }
  .globe-figure--lg { max-width: 460px; }
  .approach-loop { margin-inline: auto; }
}
@media (max-width: 460px) {
  .loop-pill { font-size: 10px; height: 36px; padding: 0 11px; gap: 5px; letter-spacing: .04em; }
  .loop-pill svg { width: 13px; height: 13px; }
  .loop-centre__label { font-size: 9px; }
  .loop-infinity { width: 40px; }
}

/* image placeholder — subtle stripes + mono caption (drop real imagery here) */
.ph {
  position: relative;
  background-color: var(--cream-2);
  background-image: repeating-linear-gradient(135deg, transparent 0 11px, rgba(84,79,73,0.06) 11px 22px);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  min-height: 220px;
  overflow: hidden;
}
.ph span {
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-2);
  background: var(--cream); padding: 7px 12px; border: 1px solid var(--hairline); border-radius: 2px;
}
.dark .ph { background-color: #1a1a1a; border-color: rgba(255,255,255,.12);
  background-image: repeating-linear-gradient(135deg, transparent 0 11px, rgba(255,255,255,0.05) 11px 22px); }
.dark .ph span { background:#111; color:#B6AFA6; border-color: rgba(255,255,255,.16); }

/* logo wall */
.logo-wall { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--hairline); border:1px solid var(--hairline); border-radius:4px; overflow:hidden; }
.logo-wall .ph { border:0; border-radius:0; min-height:120px; background-color:var(--cream); }
@media (max-width:640px){ .logo-wall { grid-template-columns:repeat(2,1fr); } }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Page header (interior pages) ---------- */
.page-head { padding-block: clamp(64px, 9vw, 128px) clamp(40px, 6vw, 72px); }
.page-head .display { margin-bottom: 26px; max-width: 16ch; }

/* process steps */
.steps { counter-reset: step; display: flex; flex-direction: column; gap: 0; }
.step {
  display: grid; grid-template-columns: auto 1fr; gap: clamp(20px,3vw,48px);
  padding-block: clamp(28px, 4vw, 44px);
  border-top: 1px solid var(--hairline);
  align-items: start;
}
.step:last-child { border-bottom: 1px solid var(--hairline); }
.step__k { font-family: var(--font-mono); font-size: 13px; letter-spacing:.1em; color: var(--red); padding-top: 8px; }
.step h3 { font-size: clamp(24px,3vw,34px); margin-bottom: 14px; }
.step p { color: var(--text-2); max-width: 60ch; }

/* form */
.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 22px; }
.field label { font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); }
.field input, .field textarea, .field select {
  font-family: var(--font-display); font-size: 17px; color: var(--black);
  background: var(--cream); border: 1.5px solid var(--hairline);
  border-radius: 3px; padding: 14px 16px; width: 100%;
  transition: border-color .25s var(--ease);
}
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--black); outline: none;
}
.field textarea { resize: vertical; min-height: 130px; }
.form-note { font-size: 14px; color: var(--text-2); margin-top: 6px; }

/* honeypot — visually hidden, off-screen, never focusable by humans */
.hp-field {
  position: absolute !important;
  left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

/* inline form error */
.form-error {
  margin-top: 14px;
  font-size: 14.5px; line-height: 1.5;
  color: var(--red-ink);
  background: rgba(198,40,40,.06);
  border: 1px solid rgba(198,40,40,.28);
  border-radius: 10px;
  padding: 12px 14px;
}
.form-error a { color: var(--red-ink); font-weight: 600; text-decoration: underline; }

/* ============================================================
   MOTION SYSTEM — site-wide animated language
   ============================================================ */

/* ---- Kinetic headline reveal (masked word rise) ---- */
.split { }
.split .word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: 0.04em 0.05em 0.16em;
  margin: 0 -0.05em;
}
.split .word-i {
  display: inline-block;
  transform: translateY(118%);
  transition: transform .9s var(--ease);
  will-change: transform;
}
/* revealed when an ancestor (or self) carries .in, or hero h1 plays on load */
.in .split .word-i,
.reveal.in .word-i,
.split.in .word-i,
.hero h1.words-in .word-i { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .split .word-i { transform: none; transition: none; }
}

/* ---- Loop motif: living energy ---- */
.loop-node { transform-box: fill-box; transform-origin: center; animation: nodepulse 2.6s var(--ease) infinite; }
@keyframes nodepulse { 0%,100%{ transform: scale(1); opacity:1; } 50%{ transform: scale(1.35); opacity:.78; } }
.loop-svg .ring-base { stroke-dasharray: 2 0; }
.loop-glow { filter: drop-shadow(0 0 7px rgba(198,40,40,.55)); }
/* broken arcs gently drift to feel unstable / disconnected */
.loop-broken .arc-l { animation: driftL 4.5s var(--ease) infinite; }
.loop-broken .arc-r { animation: driftR 4.5s var(--ease) infinite; }
@keyframes driftL { 0%,100%{ transform: translate(0,0);} 50%{ transform: translate(-3px,-2px);} }
@keyframes driftR { 0%,100%{ transform: translate(0,0);} 50%{ transform: translate(3px,2px);} }
@media (prefers-reduced-motion: reduce) {
  .loop-node, .loop-broken .arc-l, .loop-broken .arc-r { animation: none; }
}

/* ---- Marquee band ---- */
.marquee {
  overflow: hidden;
  background: var(--black);
  border-block: 1px solid rgba(255,255,255,.10);
  padding-block: 20px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  animation: marquee 32s linear infinite;
  will-change: transform;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
  font-family: var(--font-mono);
  font-size: 14px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--cream);
  display: inline-flex; align-items: center;
}
.marquee__item.alt { color: var(--red); }
.marquee__sep {
  width: 7px; height: 7px; border-radius: 50%; background: var(--red);
  margin-inline: 30px; flex: none;
}
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee--reverse .marquee__track { animation-direction: reverse; }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* ---- Particle flow canvases (hero echo) ---- */
.cta-band { isolation: isolate; }
.cta-flow { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.cta-band__inner { position: relative; z-index: 1; }
.cta-band__glow { z-index: 1; }

/* floating contact icons in the CTA band (3 left, 3 right) */
.cta-floaters { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.cta-float { position: absolute; pointer-events: none; animation: ctaFloat 7s var(--ease) infinite; }
.cta-float .social-btn { pointer-events: auto; width: 76px; height: 76px; border-radius: 18px; }
.cta-float .social-btn svg { width: 30px; height: 30px; }
.cta-float:nth-child(1) { left: 5%;  top: 14%; animation-duration: 6.5s; animation-delay: -0.2s; }
.cta-float:nth-child(2) { left: 9%;  top: 45%; animation-duration: 7.8s; animation-delay: -2.4s; }
.cta-float:nth-child(3) { left: 4%;  top: 76%; animation-duration: 6.9s; animation-delay: -4.1s; }
.cta-float:nth-child(4) { right: 5%; top: 18%; animation-duration: 7.4s; animation-delay: -1.1s; }
.cta-float:nth-child(5) { right: 9%; top: 49%; animation-duration: 6.6s; animation-delay: -3.3s; }
.cta-float:nth-child(6) { right: 4%; top: 78%; animation-duration: 8.0s; animation-delay: -5.0s; }
@keyframes ctaFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}
@media (max-width: 1240px) { .cta-floaters { display: none; } }
@media (prefers-reduced-motion: reduce) { .cta-float { animation: none; } }
.page-head { position: relative; isolation: isolate; }
.head-flow { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; display: block; pointer-events: none; opacity: .9; }
.page-head .wrap { position: relative; z-index: 1; }

/* ---- Magnetic / shine buttons ---- */
.btn--red { position: relative; overflow: hidden; will-change: transform; }
.btn--red::after {
  content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-18deg); transition: none;
}
.btn--red:hover::after { animation: shine .8s var(--ease); }
@keyframes shine { from { left: -120%; } to { left: 160%; } }
@media (prefers-reduced-motion: reduce) { .btn--red:hover::after { animation: none; } }

/* ---- Cursor glow (dark sections, desktop) ---- */
.cursor-glow {
  position: fixed; top: 0; left: 0; width: 460px; height: 460px;
  margin: -230px 0 0 -230px; border-radius: 50%;
  background: radial-gradient(circle, rgba(198,40,40,.16), transparent 64%);
  pointer-events: none; z-index: 3; opacity: 0;
  transition: opacity .4s var(--ease);
  will-change: transform;
}
.cursor-glow.on { opacity: 1; }

/* ---- Placeholder shimmer ---- */
.ph::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.45) 50%, transparent 65%);
  transform: translateX(-100%);
  animation: shimmer 3.6s var(--ease) infinite;
}
.dark .ph::after { background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.10) 50%, transparent 65%); }
@keyframes shimmer { 0% { transform: translateX(-100%);} 55%,100% { transform: translateX(100%);} }
@media (prefers-reduced-motion: reduce) { .ph::after { animation: none; display: none; } }

/* ---- Reveal flavours ---- */
.reveal--left { opacity: 0; transform: translateX(-26px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal--left.in { opacity: 1; transform: none; }
.reveal--scale { opacity: 0; transform: scale(.94); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal--scale.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal--left, .reveal--scale { opacity: 1; transform: none; transition: none; }
}

/* stagger helper */
.stagger > * { transition-delay: calc(var(--i, 0) * 90ms); }

/* ---- Network globe ---- */
.globe-figure {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin-inline: auto;
  aspect-ratio: 1 / 1;
}
.globe { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.globe-figure--dark {
  background: radial-gradient(circle at 50% 46%, #1c0d0d 0%, var(--black) 62%);
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(255,255,255,.05), 0 30px 80px -30px rgba(198,40,40,.4);
}
.globe-cap {
  position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--text-2); white-space: nowrap;
}
.globe-cap--flow {
  position: static; transform: none; margin-top: 18px;
}
.dark .globe-cap { color: #8E877E; }

/* ============================================================
   Contact modal
   ============================================================ */
.modal {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(16px, 4vw, 40px);
  visibility: hidden; opacity: 0;
  transition: opacity .28s var(--ease), visibility 0s linear .28s;
}
.modal.open { visibility: visible; opacity: 1; transition: opacity .28s var(--ease); }
.modal__scrim {
  position: absolute; inset: 0;
  background: rgba(12, 8, 8, 0.6);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.modal__dialog {
  position: relative; z-index: 1;
  width: min(920px, 100%); max-height: min(90vh, 760px);
  overflow: auto; -webkit-overflow-scrolling: touch;
  background: var(--cream);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  box-shadow: 0 40px 120px -30px rgba(0,0,0,.55);
  transform: translateY(18px) scale(.98);
  transition: transform .32s var(--ease);
}
.modal.open .modal__dialog { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .modal, .modal.open, .modal__dialog { transition: none; }
  .modal__dialog { transform: none; }
}
.modal__close {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 40px; height: 40px; border-radius: 12px;
  display: grid; place-items: center; cursor: pointer;
  background: rgba(0,0,0,.04); border: 1px solid var(--hairline);
  color: var(--black); transition: background .2s var(--ease), transform .2s var(--ease);
}
.modal__close:hover { background: rgba(0,0,0,.08); transform: rotate(90deg); }
.modal__grid {
  display: grid; grid-template-columns: 0.92fr 1.08fr;
}
.modal__intro {
  padding: clamp(28px, 3vw, 44px);
  background: var(--cream-2);
  border-right: 1px solid var(--hairline);
  border-radius: 16px 0 0 16px;
}
.modal__intro h2 { font-size: clamp(28px, 3vw, 38px); line-height: 1.02; letter-spacing: -0.02em; margin-top: 16px; }
.modal__lead { color: var(--text-2); margin-top: 16px; line-height: 1.5; max-width: 34ch; }
.modal__reassure { display: flex; flex-direction: column; gap: 13px; margin-top: 26px; }
.modal__reassure-item { display: flex; gap: 12px; align-items: flex-start; }
.modal__reassure-item .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); margin-top: 8px; flex: none; }
.modal__reassure-item p { color: var(--text-2); font-size: 15px; line-height: 1.45; }
.modal__reassure-item strong { color: var(--black); font-weight: 600; }
.modal__direct { margin-top: 26px; display: flex; flex-direction: row; flex-wrap: nowrap; gap: 10px; }
.modal__direct .social-btn { width: 50px; height: 50px; border-radius: 14px; color: var(--black); background: rgba(198,40,40,.04); flex: 0 0 auto; }
.modal__direct .social-btn svg { width: 21px; height: 21px; }
.modal__direct .social-btn:hover { color: var(--red); }
.modal__formwrap { padding: clamp(28px, 3vw, 44px); }
.modal__formwrap .field { margin-bottom: 16px; }
.modal .form-success { display: none; text-align: center; padding: 24px 0; }
.modal .form-success.show { display: block; }
/* When the success state is showing, center it vertically in the panel */
.modal__formwrap:has(.form-success.show) { display: flex; flex-direction: column; justify-content: center; }
.modal .form-success .check {
  width: 60px; height: 60px; border-radius: 50%; background: var(--red); color: #fff;
  display: flex; align-items: center; justify-content: center; margin: 0 auto 20px;
}
@media (max-width: 760px) {
  .modal__grid { grid-template-columns: 1fr; }
  .modal__intro { border-right: 0; border-bottom: 1px solid var(--hairline); border-radius: 16px 16px 0 0; }
  .modal__reassure { margin-top: 18px; }
  .modal__direct { display: none; }
}
body.modal-open { overflow: hidden; }

/* ============================================================
   MOBILE ADAPTATION  (≤ 760px)
   Everything below is mobile-only. Desktop layout above is untouched.
   ============================================================ */
@media (max-width: 760px) {
  /* The desktop 1.1x upscale pushed ~10% of every full-bleed section
     off the right edge on phones. Reset it for mobile only. */
  html { zoom: 1; }

  /* Backstop: never allow horizontal scroll on phones. Safe here because
     the nav is position:fixed (not sticky), so clipping x does not break it. */
  html, body { overflow-x: hidden; max-width: 100%; }

  /* Hero — wrap the headline instead of forcing one over-wide line */
  .hero h1 { white-space: normal; font-size: clamp(32px, 9vw, 46px); }
  .hero__sub { max-width: none; font-size: 17px; }
  .hero__inner { padding-block: 104px 44px; }

  /* Proof — stack the case-study figures into a single column */
  .cs-grid { grid-template-columns: 1fr; }
  /* These nowrap lines are wider than a phone and were forcing the whole
     page wide (clipping every section's text). Let them wrap on mobile. */
  .bg-nowrap { white-space: normal; }
  /* Hide the "Two quarters. Zero new hires. One system ·" one-liner on mobile */
  .cs-note { display: none; }
  /* Remove the marquee edge fade so both strips run edge-to-edge
     (the mask was fading the black strip to transparent, showing cream
     "white borders" on the sides) */
  .marquee { -webkit-mask-image: none; mask-image: none; }

  /* Hide selected items on mobile only (e.g. extra L2 pills) */
  .hide-mobile { display: none !important; }
}