@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&display=swap");

/* =========================================================
01. DESIGN TOKENS
========================================================= */

:root {
  /* Colors */
  --bg: #08090D;
  --surface: #0F1118;
  --surface-alt: #161820;

  --ink: #EDE9E0;
  --ink-soft: #8B8880;
  --muted: #555350;

  --primary: #C4A35A;
  --primary-dark: #0F1118;
  --primary-light: rgba(196,163,90,0.15);

  --border: rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.16);

  /* Typography */
  --sans: "DM Sans", system-ui, sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
  --mono: "DM Mono", monospace;

  /* Layout */
  --container: 1240px;
  --page-padding: 32px;
  --section-space: 100px;

  /* Shape */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;

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

/* =========================================================
02. RESET
========================================================= */

* {
  box-sizing: border-box;
  overflow-x: none;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--ink);

  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;

  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

button,
input,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

h1,
h2,
h3,
h4,
p {
  margin: 0;
}

/* =========================================================
03. GLOBAL LAYOUT
========================================================= */

.container {
  width: min(var(--container), calc(100% - (var(--page-padding) * 2)));

  margin-inline: auto;
}

section {
  position: relative;
}

.divider {
  width: min(var(--container), calc(100% - (var(--page-padding) * 2)));

  height: 1px;
  margin-inline: auto;

  background: var(--border);
}

/* =========================================================
04. PAGE SYSTEM
========================================================= */

.page {
  display: none;
}

.page.active {
  display: block;
}

/* =========================================================
05. NAVIGATION
========================================================= */

nav {
  position: sticky;
  top: 0;
  z-index: 100;

  width: 100%;

  display: flex;
  align-items: center;

  min-height: 76px;

  padding: 0 var(--page-padding);

  background: var(--surface-alt);

  /* border-bottom: 1px solid var(--border); */

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition:
    transform 280ms ease,
    background 180ms ease;
}
nav.nav-hidden {
  transform: translateY(-100%);
}

.nav-logo {
  margin-right: auto;

  color: var(--primary);

  font-family: var(--sans);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.04em;
  cursor: pointer;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;

  margin: 0;
  padding-left: 10px;

  list-style: none;

  /* background: var(--surface-alt); */
  border-radius: 999px;
}
.nav-links a {
  display: flex;
  align-items: center;
  justify-content: center;

  min-height: 36px;
  padding: 0 16px;

  border-radius: 999px;

  color: var(--ink-soft);

  font-size: 16px;
  font-weight: 500;

  transition:
    background 180ms ease,
    color 180ms ease;
}

.nav-links a:hover
 {
  background: color-mix(in srgb, var(--primary) 20%, transparent);
  /* color: var(--surface-alt); */
}
.nav-links a.active {
  background: color-mix(in srgb, var(--primary) 20%, transparent);
  color: var(--ink);
}

.nav-cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 12px 24px;

  border: 1px solid var(--primary);
  border-radius: 999px;

  background: var(--primary);
  color: #fff;

  font-size: 14px;
  font-weight: 600;
  text-decoration: none;

  cursor: pointer;
}

/* sliding primary layer */
.nav-cta::before {
  content: "";

  position: absolute;
  inset: 0;

  background: var(--ink);
 

  transform: translateX(-101%);
  transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1);

  z-index: -1;
}

.nav-cta:hover::before {
  transform: translateX(0);
}
.nav-cta:hover{
 color:var(--primary-dark);
}
.nav-cta span {
  position: relative;
  z-index: 1;
}
body:has(#page-home.active) .nav-cta {
  display: none;
}

/* =========================================================
06. HERO
========================================================= */
.floating-cta {
  position: fixed;
  right: 32px;
  bottom: 28px;

  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding: 15px 22px;

  background: var(--primary);
  color: #fff;

  border: 1px solid var(--primary);
  border-radius: 999px;

  font-size: 14px;
  font-weight: 600;
  text-decoration: none;

  opacity: 0;
  visibility: hidden;
  transform: translateY(30px);

  transition:
    opacity 0.3s ease,
    transform 0.35s cubic-bezier(0.65, 0, 0.35, 1),
    visibility 0.3s ease;

  z-index: 9999;

  overflow: hidden;
  isolation: isolate;

  cursor: pointer;
}

/* sliding dark hover */
.floating-cta::before {
  content: "";

  position: absolute;
  inset: 0;  
  background: var(--ink);
  transform: translateX(-101%);
  transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1);

  z-index: -1;
}

.floating-cta:hover::before {
  transform: translateX(0);
}
.floating-cta:hover {
  color: var(--primary-dark);
  border-color: var(--ink);
}

.floating-cta span {
  position: relative;
  z-index: 1;
}

/* visible after leaving hero */
.floating-cta.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.hero {
  width: min(var(--container), calc(100% - (var(--page-padding) * 2)));

  min-height: calc(100vh - 76px);

  margin-inline: auto;

  display: flex;
  flex-direction: column;
  justify-content: center;

  padding: 110px 0 90px;

  text-align: center;
  align-items: center;
}

/* =========================================================
HERO ARCHITECTURAL VISUAL
========================================================= */

.hero {
  position: relative;
}

.hero-architecture {
  position: absolute;

  top: 0;
  bottom: 0;

  left: calc(50% - 50vw);
  width: 100vw;

  pointer-events: none;

  z-index: 0;

  overflow: hidden;
}

/* Keep hero content above the visual */

.hero > *:not(.hero-architecture) {
  position: relative;
  z-index: 2;
}

/* =========================================================
STRUCTURES
========================================================= */

.architecture {
  position: absolute;

  width: 50vw;
  height: 380px;

  color: var(--primary);

  opacity: 0.9;
}

/* LEFT */

.architecture-left {
  left: 0;
  top: 25%;
}

/* RIGHT */

.architecture-right {
  right: 0;
  top: 25%;
}

/* =========================================================
FRAME LINES
========================================================= */

.architecture-line {
  position: absolute;

  display: block;

  background: var(--primary);

  opacity: 0.15;
}

/* Horizontal frame */

.architecture .line-top {
  top: 70px;

  width: 14vw;
  height: 1px;
}

.architecture .line-bottom {
  bottom: 70px;

  width: 14vw;
  height: 1px;
}
.architecture .line-top-right {
  right: 0;
}
.architecture .line-bottom-right {
  right: 0;
}

/* Vertical frame */

.architecture .line-vertical {
  top: 70px;

  width: 1px;
  height: 240px;
}

/* LEFT frame position */

.architecture-left .line-vertical {
  left: 28%;
}

/* RIGHT frame position */

.architecture-right .line-vertical {
  right: 28%;
}

/* =========================================================
DIAGONAL CONNECTIONS
========================================================= */

.architecture .diagonal {
  height: 1px;

  background: transparent;

  /*
  This creates the fine dotted/dashed appearance.
  */
  border-top: 1px dashed var(--primary);

  opacity: 0.26;

  transform-origin: left center;
}

/* LEFT — upper connection */
.architecture-left .diagonal-top {
  width: 26vw;
  left: 28%;
  top: 70px;

  transform: rotate(12deg);
}

/* LEFT — lower connection */
.architecture-left .diagonal-bottom {
  width: 26vw;
  left: 28%;
  bottom: 70px;

  transform: rotate(-12deg);
}

/* RIGHT — upper connection */
.architecture-right .diagonal-top {
  width: 26vw;
  right: 28%;
  top: 70px;

  transform-origin: right center;

  transform: rotate(-12deg);
}

/* RIGHT — lower connection */
.architecture-right .diagonal-bottom {
  width: 26vw;
  right: 28%;
  bottom: 70px;

  transform-origin: right center;

  transform: rotate(12deg);
}

/* =========================================================
NODES
========================================================= */

.architecture-node {
  position: absolute;

  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: var(--primary);

  opacity: 0.35;

  z-index: 3;
}

/* LEFT */

.architecture-left .node-top {
  left: calc(28% - 3px);
  top: 67px;
}

.architecture-left .node-bottom {
  left: calc(28% - 3px);
  bottom: 67px;
}

/* RIGHT */

.architecture-right .node-top {
  right: calc(28% - 3px);
  top: 67px;
}

.architecture-right .node-bottom {
  right: calc(28% - 3px);
  bottom: 67px;
}

/* =========================================================
LABELS
========================================================= */

.architecture-label {
  position: absolute;

  font-family: var(--mono);

  font-size: 9px;
  font-weight: 500;

  letter-spacing: 0.16em;

  color: var(--primary);

  opacity: 0.3;

  white-space: nowrap;
}

/* LEFT */

.architecture-left .label-system {
  top: 42px;
  left: calc(28% - 40px);
}

.architecture-left .label-data {
  bottom: 38px;
  left: calc(28% - 25px);
}

/* RIGHT */

.architecture-right .label-capital {
  top: 42px;
  right: calc(28% - 35px);
}

.architecture-right .label-definition {
  bottom: 38px;
  right: calc(28% - 55px);
}

/* -----------------------------------------
Ambient movement
----------------------------------------- */

/* .architecture-left {
  animation:
  architectureLeft
  10s
  ease-in-out
  infinite;
}

.architecture-right {
  animation:
  architectureRight
  10s
  ease-in-out
  infinite;
}

@keyframes architectureLeft {

  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

50% {
  transform: translate3d(12px, -8px, 0);
}

}

@keyframes architectureRight {

  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

50% {
  transform: translate3d(-10px, 9px, 0);
}

} */

.hero-label,
.section-label,
.paper-tag {
  margin-bottom: 20px;

  color: var(--primary);

  font-family: var(--serif);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.hero h1 {
  max-width: 1000px;
  margin-inline: auto;

  font-size: clamp(52px, 7vw, 96px);
  line-height: 0.98;
  letter-spacing: -0.055em;
  font-weight: 500;
}
.hero-emphasis {
  color: var(--primary);
  font-weight: 600;
  font-style: bold;
}

.hero h1 em {
  color: var(--primary);
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
}

.hero-sub {
  max-width: 650px;
  margin: 36px auto 0;

  color: var(--ink-soft);

  font-size: 18px;
  line-height: 1.65;
}

.hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;

  margin-top: 40px;
}

.hero-scroll {
  margin-top: auto;
  padding-top: 80px;

  color: var(--muted);

  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* =========================================================
HERO — COHERENCE VISUAL
========================================================= */

.hero-copy {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
}

.hero-title {
  position: relative;
  z-index: 2;

  max-width: 1050px;
  margin: 0 auto;

  text-align: center;
}

.hero-line {
  display: block;
}

.coherence-word {
  position: relative;
  display: inline-block;

  z-index: 3;

  color: var(--ink);
}

.coherence-main {
  color: var(--primary);
  color: var(--primary);
  font-weight: 500;
  position: relative;
}

/* SVG sits behind the typography */

.coherence-svg {
  position: absolute;

  inset: -30px -80px;

  width: calc(100% + 160px);
  height: calc(100% + 60px);

  z-index: 1;

  pointer-events: none;

  overflow: visible;
  /* display:none; */
}

/* Nodes */
.coherence-line {
  stroke: var(--primary);
  stroke-width: 1.2;
  fill: none;

  /* Completely invisible before animation */
  opacity: 0;

  stroke-linecap: round;

  /* Dashed appearance */
  stroke-dasharray: 4 8;

  /* Start hidden */
  stroke-dashoffset: 1000;
}

.coherence-node {
  fill: var(--primary);
  opacity: 0;

  transform-box: fill-box;
  transform-origin: center;

  transition: opacity 300ms ease;
}

/* ================================
ANIMATION
================================ */
.hero.coherence-active .coherence-line {
  animation: drawCoherence 1.5s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

/* Stagger the three relationships */

.hero.coherence-active .line-financial {
  animation-delay: 0s;
}

.hero.coherence-active .line-operational {
  animation-delay: 0.2s;
}

.hero.coherence-active .line-data {
  animation-delay: 0.4s;
}

.hero.coherence-active .coherence-node {
  opacity: 0.7;
}

.hero.coherence-active .node-center {
  opacity: 1;

  animation: coherencePulse 700ms ease-out 1.5s forwards;
}

/* Draw the lines */

@keyframes drawCoherence {
  from {
    opacity: 0;
    stroke-dashoffset: 1000;
  }

  to {
    opacity: 0.4;
    stroke-dashoffset: 0;
  }
}

/* Tiny pulse when everything meets */

@keyframes coherencePulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  40% {
    transform: scale(2.5);
    opacity: 0.35;
  }

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

/* =========================================================
07. BUTTONS
========================================================= */

.btn-primary,
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 48px;
  padding: 0 22px;

  border-radius: 999px;

  font-size: 14px;
  font-weight: 600;

  transition:
    transform 180ms ease,
    background 180ms ease,
    color 180ms ease,
    border-color 180ms ease;
}

.btn-primary {
  position: relative;
  overflow: hidden;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 48px;
  padding: 0 24px;

  border: 1px solid var(--primary);
  border-radius: 999px;

  background: var(--primary);
  color: #fff;

  font-size: 14px;
  font-weight: 600;

  isolation: isolate;
}

.btn-primary::before {
  content: "";

  position: absolute;
  inset: 0;

  background: var(--ink);

  transform: scaleX(0);
  transform-origin: left;

  transition: transform 320ms cubic-bezier(0.65, 0, 0.35, 1);

  z-index: -1;
}

.btn-primary:hover::before {
  transform: scaleX(1);
}

.btn-primary:hover {
  color: var(--primary-dark);
  border-color: var(--ink);
}

.btn-ghost {
  position: relative;
  overflow: hidden;

  display: inline-flex;
  align-items: center;
  justify-content: center;
color:var(--ink);
  min-height: 48px;
  padding: 0 22px;

  border: 1px solid var(--border-strong);
  border-radius: 999px;

  background: transparent;
  /* color:  var(--primary-dark); */

  font-size: 14px;
  font-weight: 600;

  isolation: isolate;

  transition:
    color 220ms ease,
    border-color 220ms ease;
}

.btn-ghost::before {
  content: "";

  position: absolute;
  inset: 0;

  background: var(--ink);

  transform: scaleX(0);
  transform-origin: left;

  transition: transform 320ms cubic-bezier(0.65, 0, 0.35, 1);

  z-index: -1;
}

.btn-ghost:hover::before {
  transform: scaleX(1);
}

.btn-ghost:hover {
  color: var(--primary-dark);
  border-color: var(--ink);
}
/* =========================================================
   PROBLEM SECTION
   ========================================================= */

.problem-section {
  width: min(
    var(--container),
    calc(100% - (var(--page-padding) * 2))
  );

  margin-inline: auto;

  padding: var(--section-space) 0;
}


/* =========================================================
   INTRO
   ========================================================= */

.problem-intro {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(320px, 0.8fr);

  align-items: center;

  gap: 80px;

  margin-bottom: 110px;
}

.problem-intro-content {
  max-width: 700px;
}

.problem-intro h2 {
  max-width: 700px;

  margin-bottom: 30px;

  font-size: clamp(48px, 6vw, 82px);

  line-height: 0.98;

  letter-spacing: -0.05em;

  font-weight: 500;
}

.problem-intro h2 span {
  display: block;

  color: var(--primary);
}

.problem-intro-copy {
  max-width: 680px;

  color: var(--ink-soft);

  font-size: 17px;

  line-height: 1.7;
}


/* =========================================================
   INTRO VISUAL
   ========================================================= */

.problem-intro-visual {
  display: flex;

  align-items: center;
  justify-content: center;

  width: 100%;

  min-width: 0;
}

.problem-intro-visual img {
  display: block;

  width: 100%;
  max-width: 520px;

  height: auto;
}


/* =========================================================
   PROBLEM LIST
   ========================================================= */

.problem-item {
  display: grid;

  grid-template-columns:
    72px
    minmax(0, 1fr);

  gap: 32px;

  padding: 30px 0;

  opacity: 0;

  transform: translateY(35px);

  transition:
    opacity 800ms ease,
    transform 800ms cubic-bezier(.16, 1, .3, 1),
    border-color 300ms ease;
}

.problem-item.is-visible {
  opacity: 1;

  transform: translateY(0);
}

.problem-number {
  padding-top: 8px;

  color: var(--primary);

  font-family: var(--mono);

  font-size: 16px;

  line-height: 1;

  letter-spacing: 0.14em;
}

.problem-content {
  max-width: 900px;

  min-width: 0;
}

.problem-content h3 {
  max-width: 850px;

  margin-bottom: 22px;

  font-family: var(--serif);

  font-size: clamp(32px, 4vw, 58px);

  font-weight: 400;

  line-height: 1.05;

  letter-spacing: -0.02em;

  transition:
    color 300ms ease,
    transform 500ms cubic-bezier(.16, 1, .3, 1);
}

.problem-body {
  max-width: 800px;

  margin-bottom: 30px;

  color: var(--ink-soft);

  font-size: 16px;

  line-height: 1.75;
}

.problem-surface {
  position: relative;

  max-width: 820px;

  margin: 0;

  padding: 20px 0 0;

  border-top: 1px solid var(--border);

  color: var(--primary);

  font-family: var(--serif);

  font-size: clamp(21px, 2.2vw, 28px);

  font-style: italic;

  line-height: 1.25;

  transition:
    border-color 300ms ease,
    padding-left 400ms cubic-bezier(.16, 1, .3, 1);
}

.problem-surface::before {
  content: "↳";

  position: absolute;

  left: 0;
  top: 18px;

  color: var(--primary);

  font-family: var(--mono);

  font-size: 14px;

  font-style: normal;
}


/* =========================================================
   HOVER
   ========================================================= */

.problem-item:hover {
  border-bottom-color: var(--border-strong);
}

.problem-item:hover .problem-content h3 {
  color: var(--primary);

  transform: translateX(4px);
}

.problem-item:hover .problem-surface {
  border-color: var(--primary);

  padding-left: 30px;
}


/* =========================================================
   CONCLUSION
   ========================================================= */

.problem-conclusion {
  max-width: 950px;

  margin: 50px auto 0;

  padding: 0 50px;

  font-size: 20px;
}

.problem-conclusion span {
  color: var(--primary);

  line-height: 0.98;

  letter-spacing: -0.05em;

  font-weight: 800;
}


/* =========================================================
   TABLET
   901px – 1100px
   ========================================================= */




/* =========================================================
   TABLET
   ========================================================= */




/* =========================================================
   MOBILE
   ========================================================= */




/* =========================================================
   VERY SMALL PHONES
   ========================================================= */


/* =========================================================
08. OUTCOMES
========================================================= */

.outcomes {
  width: min(var(--container), calc(100% - (var(--page-padding) * 2)));

  margin-inline: auto;

  padding: var(--section-space) 0;
}

.section-title {
  max-width: 700px;

  margin-bottom: 50px;

  font-size: clamp(38px, 5vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.045em;
  font-weight: 500;
}

.outcomes-grid {
  display: flex;
  flex-direction: column;
  /* gap: 20px; */
}

.outcomes-row {
  display: flex;
  justify-content: center;
  gap: 20px;
  padding:10px;
}

.outcome-card {
  flex: 1;
  min-width: 0;
  flex: 1;


  border: 1px solid var(--border);
  padding: 20px;

  background: var(--surface-alt);

  transition:
    transform 220ms var(--ease),
    border-color 180ms ease,
    background 180ms ease;
}

.outcomes-row-bottom {
  padding-inline: 12%;
}
.outcome-card:hover {
  background: var(--surface);
  transform: translateY(-3px);
   border-color: var(--primary);
}

.outcome-number {
  margin-bottom: 28px;

  color: var(--primary);

  font-family: var(--serif);
  font-size: clamp(42px, 4vw, 64px);
  line-height: 0.95;
}

.outcome-label {
  max-width: 260px;

  margin-bottom: 12px;

  color: var(--ink);

  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
}

.outcome-detail {
  max-width: 330px;

  color: var(--ink-soft);

  font-size: 14px;
  line-height: 1.6;
}

.word-counter {
  height: 0.9em;
  overflow: hidden;
  display: inline-block;
}

.word-track {
  display: flex;
  flex-direction: column;

  transform: translateY(0);

  transition: transform 900ms cubic-bezier(0.65, 0, 0.35, 1);
}

.word-track span {
  display: block;
  /* height: 1.15em; */
  line-height: 1.15em;
}
/* =========================
   OUTCOMES — RESPONSIVE
   ========================= */











/* =========================================================
09. PLATFORM / WHAT
========================================================= */

.what {
  width: 100%;
  /* padding: var(--section-space) 0; */
  background: var(--ink);
  color: var(--primary-dark);
}

.what-inner {
  width: min(1240px, calc(100% - 64px));

  margin-inline: auto;
padding: var(--section-space) 0;
  display: flex;
  flex-direction: column;

  gap: 90px;
}

.what-left h2 {
  max-width: 1000px;
  margin-bottom: 32px;

  font-size: clamp(44px, 5vw, 72px);
  line-height: 0.98;
  letter-spacing: -0.05em;
  font-weight: 500;
}

.what-left .section-label {
  color: var(--primary);
}

.what-left p:not(.section-label):not(.what-tagline) {
  /* max-width: 570px; */

  margin-bottom: 20px;

  color: var;

  font-size: 16px;
  line-height: 1.7;
}

.what-tagline {
  /* max-width: 550px; */

  margin-top: 40px;

  color:  var(--primary);

  font-family: var(--serif);
  font-size: 36px;
  line-height: 1.25;
}

.what-right {
  position: relative;
  width: 100%;
  min-height: 760px;
  border: 0;
}

.capability-stage {
  position: relative;

  width: min(1500px, 100%);
  min-height: 760px;
  margin-inline: auto;

  overflow: visible;
}
/* =========================================
CLOCKWISE CAPABILITY REVEAL
========================================= */

.capability-stage .capability-callout {
  opacity: 0;
  transform: translateY(14px);

  transition:
    opacity 700ms ease,
    transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* 02 — TOP */
.capability-stage.is-visible .capability-top {
  transition-delay: 0ms;
}

/* 05 — TOP RIGHT */
.capability-stage.is-visible .right-1 {
  transition-delay: 180ms;
}

/* 06 — MID RIGHT */
.capability-stage.is-visible .right-2 {
  transition-delay: 360ms;
}

/* 07 — BOTTOM RIGHT */
.capability-stage.is-visible .right-3 {
  transition-delay: 540ms;
}

/* 08 — BOTTOM */
.capability-stage.is-visible .capability-bottom {
  transition-delay: 720ms;
}

/* 04 — BOTTOM LEFT */
.capability-stage.is-visible .left-3 {
  transition-delay: 900ms;
}

/* 03 — MID LEFT */
.capability-stage.is-visible .left-2 {
  transition-delay: 1080ms;
}

/* 01 — TOP LEFT */
.capability-stage.is-visible .left-1 {
  transition-delay: 1260ms;
}

/* Final visible state */
.capability-stage.is-visible .capability-callout {
  opacity: 1;
  transform: translateY(0);
}

/* =========================================================
LAPTOP
========================================================= */

.laptop-core {
  position: absolute;

  left: 50%;
  top: 50%;

  width: 35em;

  transform: translate(-50%, -50%);

  z-index: 10;
}

.laptop-image {
  display: block;

  width: 100%;
  height: auto;
}

/* subtle glow behind laptop */

.laptop-core::before {
  content: "";

  position: absolute;

  left: 50%;
  top: 50%;

  width: 460px;
  height: 220px;

  transform: translate(-50%, -50%);

  border-radius: 50%;

  background: var(--primary);

  filter: blur(45px);

  z-index: -1;
}

/* =========================================================
ORBIT
========================================================= */

.capability-orbit {
  position: absolute;

  left: 50%;
  top: 50%;

  width: 710px;
  height: 610px;

  transform: translate(-50%, -50%);

  border: 1px solid var(--primary-light);

  border-radius: 50%;

  background: radial-gradient(
    circle,
   var(--primary-light) 0%,
    var(--primary-light) 1px,
    transparent 1px,
    transparent 100%
  );

  z-index: 1;
}

/* =========================================================
CALLOUT BASE
========================================================= */

.capability-callout {
  position: absolute;

  width: 350px;

  color: var(--primary-dark);

  z-index: 20;

  opacity: 0;

  transform: translateY(14px);

  transition:
    opacity 700ms ease,
    transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}

.capability-stage.is-visible .capability-callout {
  opacity: 1;
  transform: translateY(0);
}

/* =========================================================
TEXT
========================================================= */

.callout-number {
  display: block;

  margin-bottom: 7px;

  color: var(--primary);

  font-family: var(--mono);

  font-size: 14px;
  font-weight: 400;

  letter-spacing: 0.14em;
}

.capability-callout strong {
  display: block;

  margin-bottom: 7px;

  color: var(--primary-dark);

  font-size: 16px;
  line-height: 1.35;

  font-weight: 600;
}

.capability-callout p {
  max-width: 350px;

  margin: 0;

  color: var(--primary-dark);

  font-size: 16px;
  line-height: 1.5;
}

/* =========================================================
POSITIONS
========================================================= */

/* TOP */

.capability-top {
  left: 36%;
  top: -8%;
  text-align: center;
}

/* LEFT */

.left-1 {
  left: 0%;
  top: 15%;

  text-align: right;
}

.left-2 {
  left: -5%;
  top: 46%;

  text-align: right;
}

.left-3 {
  left: 0%;
  top: 73%;

  text-align: right;
}

/* RIGHT */

.right-1 {
  right: 0%;
  top: 15%;
}

.right-2 {
  right: -5%;
  top: 46%;
}

.right-3 {
  right: 0%;
  top: 73%;
}

/* BOTTOM */

.capability-bottom {
  left: 36%;
  bottom: -10%;
  text-align: center;
}
/* =========================================================
HOVER
========================================================= */

.capability-left:hover {
  transform: translateX(-5px);
}

.capability-right:hover {
  transform: translateX(5px);
}

.capability-callout:hover strong {
  color: var(--primary);
}

/* =========================================================
11. DIAGNOSTIC
========================================================= */

.diagnostic {
  position: relative;

  padding-top: 100px;
  padding-bottom: 100px;

  background: var(--bg);
  color: var(--ink);

  overflow: hidden;
}

.diagnostic-inner {
  width: min(1200px, calc(100% - (var(--page-padding) * 2)));

  margin-inline: auto;
}
.diagnostic-inner {
  position: relative;
}

.diagnostic-mark {
  position: absolute;

  top: 0px;
  right: 0px;

  font-family: var(--serif);
  font-size: clamp(280px, 32vw, 460px);
  font-weight: 400;
  line-height: 0.8;

  color: var(--primary);

  opacity: 0.055;

  pointer-events: none;

  z-index: 0;
}

.diagnostic h2,
.diagnostic-sub,
.question {
  position: relative;
  z-index: 1;
}
.diagnostic-mark span {
  position: absolute;

  width: 90px;
  height: 1px;

  right: 55px;
  top: 70%;

  background: var(--primary);

  opacity: 0.35;

  transform: rotate(-25deg);
}

/* =========================================================
INTRO
========================================================= */

.diagnostic .section-label {
  margin-bottom: 22px;
}

.diagnostic h2 {
  max-width: 800px;

  margin-bottom: 28px;

  font-size: clamp(48px, 6vw, 78px);
  line-height: 0.98;
  letter-spacing: -0.05em;
  font-weight: 500;
}

.diagnostic-sub {
  max-width: 720px;

  margin-bottom: 50px;

  color: var(--ink-soft);

  font-size: 16px;
  line-height: 1.7;
}

/* =========================================================
QUESTION
========================================================= */

.question {
  position: sticky;
  top: 32vh;

  min-height: 200px;

  display: flex;
  align-items: center;

  padding: 100px 0;

  border-top: 1px solid var(--border);

  font-family: var(--serif);
  font-size: clamp(32px, 4vw, 40px);
  line-height: 1.08;

  opacity: 0.15;

  transform: translateY(25px);

  transition:
    opacity 900ms ease,
    transform 1200ms cubic-bezier(0.16, 1, 0.3, 1),
    color 800ms ease;
}

.question:last-of-type {
  border-bottom: 1px solid var(--border);
}

/* =========================================================
ACTIVE QUESTION
========================================================= */

.question.is-active {
  color: var(--ink);

  opacity: 1;

  transform: translateY(0);
}

/* =========================================================
PREVIOUS QUESTIONS
========================================================= */

.question.is-past {
  color: var(--text-3);

  opacity: 0.18;

  transform: translateY(-15px);
}

/* =========================================================
ACTIVE ACCENT LINE
========================================================= */

.question::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: -1px;

  width: 0;
  height: 2px;

  background: var(--primary);

  transition: width 1100ms cubic-bezier(0.16, 1, 0.3, 1);
}

.question.is-active::after {
  width: 180px;
}

/* =========================================================
NUMBER
========================================================= */

.question::before {
  content: attr(data-question);

  position: absolute;

  left: -80px;
  top: 50%;

  transform: translateY(-50%);

  color: var(--primary);

  font-family: var(--mono);

  font-size: 24px;

  letter-spacing: 0.16em;

  opacity: 0;

  transition: opacity 500ms ease;
}

.question.is-active::before {
  opacity: 1;
}

/* =========================================================
FOOTER / CONCLUSION
========================================================= */

.diagnostic-footer {
  max-width: 760px;

  margin-top: 80px;

  color: var(--ink-soft);

  font-size: 16px;

  line-height: 1.7;

  opacity: 0;

  transform: translateY(20px);

  transition:
    opacity 900ms ease,
    transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
}

.diagnostic-footer.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* =========================================================
CTA BANNER
========================================================= */

.cta-banner {
  width: 100%;
  background: var(--primary-light);
  color: var(--primary);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 40px 0;
  letter-spacing: -0.045em;
  font-weight: 500;
}
.cta-content-em {
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.045em;
}
.tdl-process-image {
  width: 25vw;
}
.tdl-process-image {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.tdl-process-image img {
  display: block;

  width: 540px;
  max-width: none;

  height: auto;

  transform: translateX(30px);
}
/* =========================================================
CTA INNER
========================================================= */

.cta-banner-inner {
  width: min(var(--container), calc(100% - (var(--page-padding) * 2)));

  min-height: 430px;

  margin-inline: auto;

  display: grid;
  grid-template-columns: 1.1fr 0.9fr;

  align-items: center;

  gap: 100px;
}

/* =========================================================
CTA CONTENT
========================================================= */

.cta-content {
  padding: 70px 0;
}

.cta-banner h2 {
  max-width: 720px;
  margin: 0 0 36px;

  font-size: clamp(38px, 5vw, 64px);

  line-height: 1;

  letter-spacing: -0.045em;

  font-weight: 500;
}

.cta-banner h2 em {
  font-family: var(--serif);

  font-weight: 400;
}

/* =========================================================
CTA BUTTON
========================================================= */

.cta-banner .btn-primary {
  position: relative;
  overflow: hidden;
  isolation: isolate;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 48px;
  padding: 0 24px;

  border: 1px solid var(--primary);
  border-radius: 999px;

  background: var(--primary);
  color: #fff;

  font-size: 14px;
  font-weight: 600;

  transition: color 250ms ease;
}

.cta-banner .btn-primary::before {
  content: "";

  position: absolute;
  inset: 0;

  background: var(--ink);
  color:var(--primary-dark);

  transform: scaleX(0);
  transform-origin: left;

  transition: transform 320ms cubic-bezier(0.65, 0, 0.35, 1);

  z-index: -1;
}

.cta-banner .btn-primary:hover {
  
  /* background: var(--ink); */
  color:var(--primary-dark);
}

.cta-banner .btn-primary:hover::before {
  transform: scaleX(1);
}
.cta-action {
  position: relative;
  display: inline-block;
}

.cta-cursor {
  position: absolute;

  width: 0;
  height: 0;

  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-left: 14px solid var(--ink);

  left: 150%;
  top: 100%;

  transform: rotate(-20deg);

  opacity: 0;

  animation: cursorClick 3s ease-in-out infinite;

  z-index: 10;
}
.cta-action::after {
  content: "";

  position: absolute;

  width: 8px;
  height: 8px;

  border: 2px solid var(--ink);
  border-radius: 50%;

  left: 55%;
  top: 50%;

  transform: translate(-50%, -50%) scale(0);

  opacity: 0;

  animation: clickRipple 3s ease-in-out infinite;

  pointer-events: none;
}

@keyframes clickRipple {
  0%,
  60% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0);
  }

  63% {
    opacity: 0.5;
    transform: translate(-50%, -50%) scale(1);
  }

  75% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(4);
  }

  100% {
    opacity: 0;
  }
}

/* Cursor travels toward CTA */
@keyframes cursorClick {
  0% {
    opacity: 0;
    left: 120%;
    top: 120%;
    transform: rotate(-20deg) scale(1);
  }

  15% {
    opacity: 1;
  }

  55% {
    left: 55%;
    top: 50%;
    transform: rotate(-20deg) scale(1);
  }

  /* click */
  62% {
    left: 55%;
    top: 50%;
    transform: rotate(-20deg) scale(0.75);
  }

  68% {
    left: 55%;
    top: 50%;
    transform: rotate(-20deg) scale(1);
  }

  78% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    left: 55%;
    top: 50%;
    transform: rotate(-20deg) scale(1);
  }
}
/* =========================================================
CTA VISUAL
========================================================= */

.cta-visual {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.cta-visual img {
  display: block;

  width: 540px;
  max-width: none;

  height: auto;

  transform: translateX(30px);
}

/* =========================================================
13. RESEARCH PAGE
========================================================= */

/* =========================================================
RESEARCH HERO
========================================================= */

.research-hero {
  width: min(var(--container), calc(100% - (var(--page-padding) * 2)));
  display: flex;
  margin-inline: auto;

  min-height: 620px;

  padding: 120px 0 100px;

  align-items: center;

  column-gap: 100px;
}

.research-hero-content {
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 2;
}

.research-hero h1 {
  max-width: 850px;

  margin: 0 0 32px;

  font-size: clamp(54px, 6.5vw, 94px);

  line-height: 0.98;

  letter-spacing: -0.055em;

  font-weight: 500;
}

.research-hero-content > p:last-child {
  max-width: 650px;

  margin: 0;

  color: var(--ink-soft);

  font-size: 16px;

  line-height: 1.6;
}

/* =========================================================
VISUAL
========================================================= */

.research-hero-visual {
  display: flex;

  align-items: center;
  justify-content: center;

  position: relative;

  min-width: 0;
}

.research-hero-visual img {
  display: block;
  width: 100%;
  max-width: 600px;

  height: auto;

  object-fit: contain;
}

/* =========================================================
PUBLISHED RESEARCH
========================================================= */

.papers {
  width: min(1100px, calc(100% - (var(--page-padding) * 2)));

  margin-inline: auto;

  padding-bottom: 100px;
}

/* =========================================================
HEADER
========================================================= */

.papers-header {
  display: flex;

  align-items: baseline;
  justify-content: space-between;

  margin-bottom: 28px;
}

.papers-header .section-label {
  margin: 0;
}

.papers-count {
  color: var(--muted);

  font-family: var(--mono);

  font-size: 16px;

  letter-spacing: 0.14em;
}

/* =========================================================
PAPER CARD
========================================================= */

.paper-card {
  position: relative;

  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 28px;

  padding: 42px 0;

  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);

  transition:
    padding 500ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 300ms ease,
    background 300ms ease;
}

/* left index */

.paper-index {
  padding-top: 8px;

  color: var(--primary);

  font-family: var(--mono);

  font-size: 16px;

  letter-spacing: 0.14em;

  opacity: 0.7;
}

/* =========================================================
TOPLINE
========================================================= */

.paper-topline {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 20px;

  margin-bottom: 14px;
}

.paper-tag {
  margin: 0;

  color: var(--primary);

  font-family: var(--mono);

  font-size: 16px;

  line-height: 1.5;

  letter-spacing: 0.1em;

  text-transform: uppercase;
}

.paper-status {
  flex-shrink: 0;

  padding: 5px 9px;

  border: 1px solid var(--border);

  border-radius: 999px;

  color: var(--muted);

  font-family: var(--mono);

  font-size: 14px;

  letter-spacing: 0.12em;
}

.paper-status.active {
  border-color: rgba(8, 127, 123, 0.25);

  color: var(--primary);

  background: rgba(8, 127, 123, 0.05);
}

/* =========================================================
TITLE
========================================================= */

.paper-title {
  max-width: 900px;

  margin: 0 0 22px;

  font-family: var(--serif);

  font-size: clamp(30px, 4vw, 52px);

  line-height: 1.02;

  font-weight: 400;

  letter-spacing: -0.02em;

  transition:
    color 300ms ease,
    transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* =========================================================
ABSTRACT
========================================================= */

.paper-abstract {
  max-width: 800px;

  margin: 0 0 22px;

  color: var(--ink-soft);

  font-size: 16px;

  line-height: 1.7;

  transition: color 300ms ease;
}

/* =========================================================
META
========================================================= */

.paper-meta {
  max-width: 820px;

  margin: 0;

  color: var(--muted);

  font-family: var(--mono);

  font-size: 14px;

  line-height: 1.7;

  letter-spacing: 0.05em;

  transition: color 300ms ease;
}

/* =========================================================
HOVER ACTION
========================================================= */

.paper-action {
  display: inline-flex;

  align-items: center;

  gap: 8px;

  margin-top: 24px;

  color: var(--primary);

  font-family: var(--mono);

  font-size: 10px;

  letter-spacing: 0.1em;

  text-transform: uppercase;

  opacity: 0;

  transform: translateY(8px);

  transition:
    opacity 300ms ease,
    transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

.paper-action span {
  display: inline-block;

  transition: transform 300ms ease;
}

/* =========================================================
FEATURED PAPER
========================================================= */

.paper-featured {
  padding-top: 58px;
  padding-bottom: 58px;
}

.paper-featured .paper-title {
  font-size: clamp(34px, 4.5vw, 58px);
}

/* =========================================================
BOOK
========================================================= */

.paper-book {
  border-color: rgba(8, 127, 123, 0.18);
}

/* =========================================================
HOVER
========================================================= */

.paper-card:hover {
  padding-left: 16px;
  border-color: var(--primary);
}

.paper-card:hover .paper-title {
  color: var(--primary);

  transform: translateX(4px);
}

.paper-card:hover .paper-abstract {
  color: var(--ink);
}

.paper-card:hover .paper-meta {
  color: var(--ink-soft);
}

.paper-card:hover .paper-action {
  opacity: 1;

  transform: translateY(0);
}

.paper-card:hover .paper-action span {
  transform: translate(3px, -3px);
}

/* subtle featured background */

/* .paper-featured:hover {
  background:
  linear-gradient(
  90deg,
  var(--primary-light) 0%,
  transparent 5%
  );
} */

.ell-explainer {
  padding: 100px 0;

  background: var(--surface-alt);
}

.ell-inner {
  width: min(900px, calc(100% - (var(--page-padding) * 2)));

  margin-inline: auto;
}

.ell-inner h2 {
  max-width: 850px;

  margin-bottom: 40px;

  font-size: clamp(44px, 6vw, 76px);
  line-height: 0.98;
  letter-spacing: -0.05em;
  font-weight: 500;
}

.ell-inner > p:not(.section-label) {
  max-width: 760px;

  margin-bottom: 24px;

  color: var(--ink-soft);

  font-size: 16px;
  line-height: 1.75;
}

.pull-quote {
  margin: 60px 0;

  padding: 20px 0 20px 0;
  font-family: var(--serif);
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.15;
}

/* =========================================================
14. CONTACT PAGE
========================================================= */
/* =========================================================
CONTACT HERO
========================================================= */

.contact-hero {
  width: min(var(--container), calc(100% - (var(--page-padding) * 2)));

  margin-inline: auto;

  min-height: 650px;

  padding: 120px 0 90px;

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(420px, 0.95fr);

  gap: 60px;

  align-items: center;
}

.contact-hero-content {
  position: relative;
  z-index: 2;
}

.contact-hero .section-label {
  margin-bottom: 24px;
}

.contact-hero h1 {
  max-width: 760px;

  margin: 0 0 34px;

  color: var(--ink);

  font-size: clamp(52px, 6vw, 88px);

  line-height: 0.98;

  letter-spacing: -0.055em;

  font-weight: 500;
}

.contact-intro {
  max-width: 680px;

  margin: 0;

  color: var(--ink-soft);

  font-size: 16px;

  line-height: 1.7;
}

/* =========================================================
DIAGRAM
========================================================= */

.contact-hero-visual {
  width: 100%;

  display: flex;
  align-items: center;
  justify-content: center;
}

.conversation-diagram {
  display: block;

  width: 100%;
  max-width: 800px;
  height: auto;

  overflow: visible;
}

.flow {
  fill: none;

  stroke: var(--primary);

  stroke-width: 1.5;

  stroke-linecap: round;
  stroke-linejoin: round;

  stroke-dasharray: 5 6;

  opacity: 0.75;
}

.flow-left {
  stroke: var(--primary);
  stroke-width: 1.2;
  opacity: 0.65;
}

.flow-right {
  stroke: var(--primary);
  stroke-width: 1.4;
  opacity: 0.75;
}

.flow.dotted {
  stroke-dasharray: 5 6;
}

/* =========================================================
NODES
========================================================= */

.input-system circle,
.output-system circle {
  fill: var(--primary);
}

.input-system path,
.output-system path {
  fill: none;

  stroke: var(--primary);

  stroke-width: 1;

  opacity: 0.35;
}

.center-glow {
  fill: var(--primary);
}

/* =========================================================
LABELS
========================================================= */

.diagram-label {
  font-family: var(--mono);

  font-size: 16px;

  font-weight: 500;

  letter-spacing: 0.14em;

  fill: var(--primary);
}

.diagram-sub {
  font-family: var(--sans);

  font-size: 16px;

  fill: var(--ink-soft);
}

/* =========================================================
FORM
========================================================= */
/* =========================================================
CONTACT FORM
========================================================= */

.contact-form-section {
  width: min(1000px, calc(100% - (var(--page-padding) * 2)));

  margin-inline: auto;

  padding-bottom: var(--section-space);
}

/* =========================================================
FORM GRID / PANEL
========================================================= */

.form-grid {
  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  column-gap: 48px;
  row-gap: 30px;

  padding: 40px;

  background: var(--primary-light);

  border: 1px solid rgba(8, 127, 123, 0.08);

  border-radius: 20px;
}

/* =========================================================
FORM GROUP
========================================================= */

.form-full {
  grid-column: 1 / -1;
}

/* =========================================================
LABEL
========================================================= */

.form-group label {
  display: block;

  margin-bottom: 0px;

  color: var(--ink);

  font-family: var(--mono);

  font-size: 16px;

  font-weight: 500;

  letter-spacing: 0.12em;

  text-transform: uppercase;
}

/* =========================================================
INPUTS
========================================================= */

.form-group input,
.form-group textarea {
  width: 100%;

  padding: 14px 0 15px;

  border: 0;

  border-bottom: 1px solid  var(--primary);

  border-radius: 0;

  outline: none;

  background: transparent;

  color: var(--ink);

  font-family: var(--sans);

  font-size: 16px;

  line-height: 1.5;

  transition: border-color 250ms ease;
}

.form-group input:focus,
.form-group textarea:focus {
  border-bottom-color: var(--primary);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--ink-soft);
}

.form-group textarea {
  min-height: 150px;

  resize: vertical;
}
/* =========================================================
SUBMIT
========================================================= */

.form-submit {
  display: flex;

  align-items: center;
  justify-content: center;

  gap: 24px;

  margin-top: 28px;
}

.form-note {
  margin: 0;

  max-width: 360px;

  color: var(--ink-soft);

  font-size: 12px;

  line-height: 1.5;
}

/* =========================================================
FORM VALIDATION
========================================================= */

.field-error {
  min-height: 18px;

  margin: 7px 0 0;

  color: #b45b5b;

  font-size: 12px;
  line-height: 1.4;

  opacity: 0;

  transform: translateY(-3px);

  transition:
    opacity 180ms ease,
    transform 180ms ease;
}

.form-group.has-error .field-error {
  opacity: 1;
  transform: translateY(0);
}

.form-group.has-error input,
.form-group.has-error textarea {
  border-color: #b45b5b;
}

.form-group.has-error label {
  color: #b45b5b;
}

/* Valid state */

.form-group.is-valid input,
.form-group.is-valid textarea {
  border-color: var(--primary);
}

/* Make autofill / focus coexist nicely */

.form-group input:focus,
.form-group textarea:focus {
  border-color: var(--primary);
}

.form-group.has-error input:focus,
.form-group.has-error textarea:focus {
  border-color: #b45b5b;
}
/* =========================================================
MOBILE
========================================================= */


/* =========================================================
15. FOOTER
========================================================= */

/* =========================================================
FOOTER
========================================================= */

footer {
  width: 100%;

  background: var(--surface-alt);
  color: #f3f7f6;

  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-inner {
  width: min(var(--container), calc(100% - (var(--page-padding) * 2)));

  margin-inline: auto;

  display: grid;

  grid-template-columns: 1fr auto 1fr;

  align-items: center;

  gap: 40px;

  padding: 40px 0;
}

/* =========================================================
LOGO
========================================================= */

.footer-logo {
  color: var(--primary);

  font-size: 24px;
  font-weight: 700;

  letter-spacing: -0.04em;
}

/* =========================================================
NAVIGATION
========================================================= */

.footer-links {
  display: flex;

  gap: 28px;

  margin: 0;
  padding: 0;

  list-style: none;
}

.footer-links a {
  color: var(--ink-soft);

  font-size: 16px;

  text-decoration: none;

  transition:
    color 180ms ease,
    opacity 180ms ease;
}

.footer-links a:hover {
  color: var(--primary);
}

/* =========================================================
COPYRIGHT
========================================================= */

.footer-copy {
  justify-self: end;

  color: var(--ink-soft);

  font-size: 11px;
}

/* =========================================================
16. RESPONSIVE
========================================================= */

/* =========================================================
   RESPONSIVE STYLES
   ========================================================= */

@media (max-width: 1100px) {

  .problem-intro {
    gap: 50px;
  }

  .problem-intro h2 {
    font-size: clamp(46px, 6vw, 68px);
  }

  .problem-intro-visual img {
    max-width: 460px;
  }

}

@media (max-width: 900px) {

  .problem-section {
    padding: 90px 0;
  }

  .problem-intro {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(260px, 0.7fr);

    gap: 40px;

    margin-bottom: 80px;
  }

  .problem-intro h2 {
    font-size: 52px;
  }

  .problem-intro-copy {
    font-size: 16px;
  }

  .problem-intro-visual img {
    max-width: 400px;
  }

  .problem-item {
    grid-template-columns:
      52px
      minmax(0, 1fr);

    gap: 24px;

    padding: 48px 0;
  }

  .problem-content h3 {
    font-size: 40px;
  }

  .problem-body {
    font-size: 15px;
  }

  .problem-surface {
    font-size: 23px;
  }

  .problem-conclusion {
    margin-top: 100px;

    padding-inline: 30px;
  }

}

@media (max-width: 640px) {

  .problem-section {
    padding: 60px 0;
  }

  .problem-intro {
    display: flex;

    flex-direction: column;

    align-items: stretch;

    gap: 40px;

    margin-bottom: 60px;
  }

  .problem-intro-content {
    max-width: none;
  }

  .problem-intro h2 {
    max-width: none;

    font-size: 48px;
  }

  .problem-intro-copy {
    max-width: none;

    font-size: 16px;

    line-height: 1.7;
  }

  .problem-intro-visual {
    justify-content: center;
  }

  .problem-intro-visual img {
    width: 85%;

    max-width: 420px;
  }

  .problem-item {
    grid-template-columns: 1fr;

    gap: 12px;

    padding: 38px 0;
  }

  .problem-number {
    padding-top: 0;

    margin-bottom: 6px;
  }

  .problem-content {
    max-width: none;
  }

  .problem-content h3 {
    max-width: none;

    margin-bottom: 18px;

    font-size: 34px;
  }

  .problem-body {
    max-width: none;

    margin-bottom: 24px;

    font-size: 15px;

    line-height: 1.7;
  }

  .problem-surface {
    max-width: none;

    padding: 18px 0 0 20px;

    font-size: 21px;

    line-height: 1.3;
  }

  .problem-surface::before {
    top: 17px;

    font-size: 12px;
  }

  .problem-item:hover .problem-content h3 {
    transform: none;
  }

  .problem-item:hover .problem-surface {
    padding-left: 20px;
  }

  .problem-conclusion {
    max-width: none;

    margin-top: 80px;

    padding: 0;

    font-size: 17px;
    line-height: 1.7;
  }

  .problem-conclusion span {
    display: block;

    margin-bottom: 24px;

    font-size: 34px;
  }

}

@media (max-width: 480px) {

  .problem-intro h2 {
    font-size: 42px;
  }

  .problem-intro-visual img {
    width: 95%;
  }

  .problem-content h3 {
    font-size: 30px;
  }

  .problem-surface {
    font-size: 20px;
  }

  .problem-conclusion span {
    font-size: 30px;
  }

}

@media (max-width: 1100px) {
  .outcomes {
    padding: 90px 0;
  }

  .outcomes-row {
    gap: 16px;
    padding: 8px;
  }

  .outcome-card {
    padding: 18px;
  }

  .outcomes-row-bottom {
    padding-inline: 8%;
  }

  .outcome-number {
    font-size: clamp(38px, 4.5vw, 58px);
  }

  .outcome-label {
    font-size: 14px;
  }

  .outcome-detail {
    font-size: 13px;
  }
}

@media (max-width: 900px) {
  .section-title {
    max-width: 600px;
    margin-bottom: 40px;
    font-size: clamp(36px, 6vw, 54px);
  }

  .outcomes-row {
    gap: 12px;
    padding: 6px;
  }

  .outcome-card {
    padding: 16px;
  }

  .outcomes-row-bottom {
    padding-inline: 4%;
  }

  .outcome-number {
    margin-bottom: 22px;
    font-size: clamp(34px, 5vw, 48px);
  }

  .outcome-label {
    max-width: 220px;
    font-size: 14px;
  }

  .outcome-detail {
    max-width: 280px;
    font-size: 13px;
    line-height: 1.55;
  }
}

@media (max-width: 640px) {
  .outcomes {
    padding: 70px 0;
  }

  .section-title {
    margin-bottom: 32px;
    font-size: clamp(34px, 9vw, 46px);
    line-height: 1;
  }

  .outcomes-grid {
    gap: 14px;
  }

  .outcomes-row {
    flex-direction: column;
    gap: 14px;
    padding: 0;
  }

  .outcomes-row-bottom {
    padding-inline: 0;
  }

  .outcome-card {
    width: 100%;
    padding: 20px;
  }

  .outcome-number {
    margin-bottom: 20px;
    font-size: clamp(40px, 11vw, 54px);
  }

  .outcome-label {
    max-width: 100%;
    margin-bottom: 10px;
    font-size: 15px;
  }

  .outcome-detail {
    max-width: 100%;
    font-size: 14px;
    line-height: 1.6;
  }

  .word-counter {
    display: block;
  }
}

@media (max-width: 480px) {
  .outcomes {
    padding: 60px 0;
  }

  .section-title {
    font-size: 32px;
  }

  .outcome-card {
    padding: 18px;
  }

  .outcome-number {
    font-size: 42px;
  }

  .outcome-label {
    font-size: 14px;
  }

  .outcome-detail {
    font-size: 13px;
  }
}

@media (max-width: 640px) {
  .contact-hero {
    padding-top: 100px;
    padding-bottom: 70px;
  }

  .contact-hero h1 {
    font-size: clamp(46px, 12vw, 64px);
  }

  .contact-intro {
    font-size: 15px;
  }

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

  .form-full {
    grid-column: auto;
  }

  .form-submit {
    align-items: flex-start;

    flex-direction: column;

    gap: 16px;
  }
}

@media (max-width: 900px) {
  :root {
    --page-padding: 24px;
    --section-space: 90px;
  }
  nav {
    position: sticky;
    top: 0;

    z-index: 100;
  }

  .nav-links {
    gap: 20px;
    margin: 0 20px;
  }

  .nav-cta {
    display: none;
  }
  body:has(#page-home.active) nav,
  body:has(#page-home.active) nav.nav-hidden {
    position: sticky;
    top: 0;

    transform: none;
  }
  .hero {
    min-height: auto;
    padding: 100px 0 80px;
  }

  .hero h1 {
    font-size: clamp(48px, 9vw, 76px);
  }

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

  .what-inner {
    width: min(var(--container), calc(100% - (var(--page-padding) * 2)));

    margin-inline: auto;

    display: flex;
    flex-direction: column;

    gap: 90px;
  }

  .what-left {
    position: relative;
    top: auto;
  }

  .what-left h2 {
    max-width: 800px;

    margin-bottom: 36px;

    font-size: clamp(48px, 6vw, 82px);
    line-height: 0.98;

    letter-spacing: -0.05em;

    font-weight: 500;
  }

  .platform-copy {
    width: min(820px, 100%);
  }

  .platform-copy p {
    max-width: 780px;

    margin-bottom: 22px;

    color: #aab9b8;

    font-size: 16px;
    line-height: 1.75;
  }

  .what-tagline {
    max-width: 700px;

    margin-top: 40px;

    color: var(--primary);

    font-family: var(--serif);

    font-size: 28px;
    line-height: 1.25;
  }

  .cta-banner {
    padding: 60px 30px;
  }

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

  .footer-copy {
    justify-self: start;
  }
  .what-right {
    min-height: auto;
  }

  .capability-stage {
    width: 100%;
    min-height: auto;

    padding: 40px 32px 70px;

    display: flex;
    flex-direction: column;
  }

  /* =======================================================
HIDE DESKTOP VISUAL
======================================================= */

  .capability-orbit,
  .laptop-core {
    display: none;
  }

  /* =======================================================
CAPABILITY LIST
======================================================= */

  .capability-callout {
    position: relative;

    width: 100%;

    left: auto;
    right: auto;
    top: auto;
    bottom: auto;

    padding: 26px 0;

    text-align: left;

    border-bottom: 1px solid rgba(255, 255, 255, 0.1);

    transform: none;
  }

  .capability-callout:first-of-type {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

  /* Remove all desktop positioning */

  .capability-top,
  .capability-bottom,
  .left-1,
  .left-2,
  .left-3,
  .right-1,
  .right-2,
  .right-3 {
    position: relative;

    left: auto;
    right: auto;
    top: auto;
    bottom: auto;

    width: 100%;

    transform: none;

    text-align: left;
  }

  /* =======================================================
TYPOGRAPHY
======================================================= */

  .callout-number {
    margin-bottom: 6px;

    font-size: 11px;
  }

  .capability-callout strong {
    margin-bottom: 7px;

    font-size: 17px;
    line-height: 1.35;
  }

  .capability-callout p {
    max-width: 650px;

    font-size: 14px;
    line-height: 1.55;
  }

  /* =======================================================
REMOVE CONNECTORS / NODES
======================================================= */

  .callout-connector,
  .capability-callout::after {
    display: none;
  }

  /* =======================================================
CLOCKWISE REVEAL → LIST REVEAL
======================================================= */

  .capability-stage .capability-callout {
    opacity: 0;

    transform: translateY(14px);

    transition:
      opacity 500ms ease,
      transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  .capability-stage.is-visible .capability-callout {
    opacity: 1;
    transform: translateY(0);
  }

  /* =======================================================
NATURAL 01 → 08 ORDER
======================================================= */

  .capability-top {
    order: 1;
  }

  .left-1 {
    order: 8;
  }

  .left-2 {
    order: 7;
  }

  .left-3 {
    order: 6;
  }

  .right-1 {
    order: 2;
  }

  .right-2 {
    order: 3;
  }

  .right-3 {
    order: 4;
  }

  .capability-bottom {
    order: 5;
  }

  /* =======================================================
STAGGER
======================================================= */

  .capability-stage.is-visible .left-1 {
    transition-delay: 0ms;
  }

  .capability-stage.is-visible .capability-top {
    transition-delay: 120ms;
  }

  .capability-stage.is-visible .left-2 {
    transition-delay: 240ms;
  }

  .capability-stage.is-visible .left-3 {
    transition-delay: 360ms;
  }

  .capability-stage.is-visible .right-1 {
    transition-delay: 480ms;
  }

  .capability-stage.is-visible .right-2 {
    transition-delay: 600ms;
  }

  .capability-stage.is-visible .right-3 {
    transition-delay: 720ms;
  }

  .capability-stage.is-visible .capability-bottom {
    transition-delay: 840ms;
  }
  .research-hero-visual {
    display: none;
  }
}

@media (max-width: 640px) {
  :root {
    --page-padding: 20px;
    --section-space: 50px;
  }

  nav {
    position: sticky;
    top: 0;

    z-index: 100;
  }

  body:has(#page-home.active) nav,
  body:has(#page-home.active) nav.nav-hidden {
    position: sticky;
    top: 0;

    transform: none;
  }
  .nav-links {
    gap: 14px;
    margin-left: auto;
    margin-right: 0;
  }

  .nav-links a {
    font-size: 12px;
  }

  .nav-logo {
    font-size: 18px;
  }

  .hero {
    padding: 80px 0 60px;
  }

  .hero h1 {
    font-size: clamp(42px, 13vw, 64px);
  }

  .hero-sub {
    font-size: 16px;
  }

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

  .btn-primary,
  .btn-ghost {
    width: 100%;
  }

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

  .outcome-card {
    min-height: auto;
  }

  .what-left h2,
  .diagnostic h2,
  .ell-inner h2 {
    font-size: 48px;
  }

  .research-hero,
  .contact-hero {
    padding: 80px 0 70px;
  }

  .research-hero h1,
  .contact-hero h1 {
    font-size: clamp(48px, 14vw, 68px);
  }

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

  .form-full {
    grid-column: auto;
  }

  .form-submit {
    align-items: stretch;
    flex-direction: column;
  }

  .footer-links {
    flex-wrap: wrap;
  }

  .cta-banner-inner {
    grid-template-columns: 1fr;

    min-height: auto;

    gap: 20px;

    padding: 60px 0 0;

    text-align: center;
  }

  .cta-content {
    padding: 0;
  }

  .cta-banner h2 {
    margin-inline: auto;
  }

  .cta-visual {
    justify-content: center;
  }

  .cta-visual img {
    width: 80%;
    max-width: 420px;

    transform: none;
  }
  .what-right {
    min-height: auto;
  }

  .capability-stage {
    width: 100%;
    min-height: auto;
    padding: 40px 24px 60px;

    display: flex;
    flex-direction: column;
    gap: 0;
  }

  /* Hide decorative center elements */
  .capability-orbit,
  .laptop-core {
    display: none;
  }

  /* -----------------------------------------
ALL CAPABILITIES
----------------------------------------- */

  .capability-callout {
    position: relative;

    width: 100%;

    left: auto;
    right: auto;
    top: auto;
    bottom: auto;

    transform: none;

    padding: 24px 0;

    text-align: left;

    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .capability-callout:first-of-type {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

  /* -----------------------------------------
REMOVE DESKTOP POSITIONING
----------------------------------------- */

  .capability-top,
  .capability-bottom,
  .left-1,
  .left-2,
  .left-3,
  .right-1,
  .right-2,
  .right-3 {
    position: relative;

    left: auto;
    right: auto;
    top: auto;
    bottom: auto;

    width: 100%;

    transform: none;

    text-align: left;
  }

  /* -----------------------------------------
TYPOGRAPHY
----------------------------------------- */

  .callout-number {
    margin-bottom: 6px;
    font-size: 10px;
  }

  .capability-callout strong {
    margin-bottom: 6px;

    font-size: 16px;
    line-height: 1.35;
  }

  .capability-callout p {
    max-width: 100%;

    font-size: 13px;
    line-height: 1.5;
  }

  /* -----------------------------------------
DISABLE CONNECTORS / NODES
----------------------------------------- */

  .callout-connector,
  .capability-callout::after {
    display: none;
  }

  /* -----------------------------------------
MOBILE REVEAL
----------------------------------------- */

  .capability-stage .capability-callout {
    opacity: 0;
    transform: translateY(14px);

    transition:
      opacity 500ms ease,
      transform 500ms ease;
  }

  .capability-stage.is-visible .capability-callout {
    opacity: 1;
    transform: translateY(0);
  }

  /* Keep clockwise order */
  .capability-stage.is-visible .capability-top {
    transition-delay: 0ms;
  }

  .capability-stage.is-visible .right-1 {
    transition-delay: 120ms;
  }

  .capability-stage.is-visible .right-2 {
    transition-delay: 240ms;
  }

  .capability-stage.is-visible .right-3 {
    transition-delay: 360ms;
  }

  .capability-stage.is-visible .capability-bottom {
    transition-delay: 480ms;
  }

  .capability-stage.is-visible .left-3 {
    transition-delay: 600ms;
  }

  .capability-stage.is-visible .left-2 {
    transition-delay: 720ms;
  }

  .capability-stage.is-visible .left-1 {
    transition-delay: 840ms;
  }
  .capability-top {
    order: 1;
  }

  .left-1 {
    order: 8;
  }

  .left-2 {
    order: 7;
  }

  .left-3 {
    order: 6;
  }

  .right-1 {
    order: 2;
  }

  .right-2 {
    order: 3;
  }

  .right-3 {
    order: 4;
  }

  .capability-bottom {
    order: 5;
  }
  .research-hero-visual {
    display: none;
  }
}

@media (max-width: 900px) {
  /* Footer uses the existing single-column responsive intent
  on the actual inner grid element. */
  .footer-inner {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  /* Contact hero stacks before the two-column layout becomes tight. */
  .contact-hero {
    grid-template-columns: 1fr;
    min-height: auto;
    gap: 50px;
  }

  /* CTA content and visual stack at tablet width. */
  .cta-banner-inner {
    grid-template-columns: 1fr;
    min-height: auto;
    gap: 20px;
  }

  .cta-content {
    padding: 60px 0 0;
  }

  .cta-visual {
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .footer-inner {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 32px 0;
  }

  .footer-links {
    flex-wrap: wrap;
    gap: 16px 22px;
  }

  .footer-copy {
    justify-self: start;
  }

  .contact-hero {
    width: min(100%, calc(100% - (var(--page-padding) * 2)));
  }
}

@media (max-width: 900px) {
  .research-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-height: auto;
    padding: 100px 0 80px;
    row-gap: 50px;
  }

  .research-hero-content {
    width: 100%;
    max-width: 900px;
  }

  .research-hero h1 {
    max-width: 850px;
    font-size: clamp(54px, 8vw, 76px);
  }

  .research-hero-content > p:last-child {
    max-width: 700px;
  }

  .research-hero-visual {
    width: 100%;
    min-width: 0;
  }

  .research-hero-visual img {
    width: min(80%, 600px);
    max-width: 600px;
    margin-inline: auto;
  }

  .papers {
    width: min(100%, calc(100% - (var(--page-padding) * 2)));
    padding-bottom: 90px;
  }

  .paper-card {
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 24px;
    padding: 38px 0;
  }

  .paper-featured {
    padding-top: 50px;
    padding-bottom: 50px;
  }

  .paper-tag {
    font-size: 14px;
  }

  .paper-status {
    font-size: 12px;
  }

  .paper-title {
    max-width: 100%;
    font-size: clamp(30px, 4.5vw, 48px);
  }

  .paper-featured .paper-title {
    font-size: clamp(34px, 5vw, 54px);
  }

  .paper-abstract {
    max-width: 100%;
    font-size: 15px;
  }

  .paper-meta {
    max-width: 100%;
    font-size: 13px;
  }

  .ell-explainer {
    padding: 90px 0;
  }

  .ell-inner {
    width: min(100%, calc(100% - (var(--page-padding) * 2)));
  }

  .ell-inner h2 {
    max-width: 850px;
    font-size: clamp(44px, 7vw, 68px);
  }

  .ell-inner > p:not(.section-label) {
    max-width: 780px;
  }

  .pull-quote {
    margin: 50px 0;
    padding: 20px 0;
    font-size: clamp(28px, 4.5vw, 40px);
  }
}

@media (max-width: 640px) {
  .research-hero {
    padding: 80px 0 60px;
    row-gap: 36px;
  }

  .research-hero h1 {
    max-width: 100%;
    margin-bottom: 24px;
    font-size: clamp(46px, 12vw, 64px);
    line-height: 0.98;
  }

  .research-hero-content > p:last-child {
    max-width: 100%;
    font-size: 15px;
    line-height: 1.65;
  }

  .research-hero-visual {
    width: 100%;
    overflow: hidden;
  }

  .research-hero-visual img {
    width: 100%;
    max-width: 600px;
  }

  .papers {
    width: min(100%, calc(100% - (var(--page-padding) * 2)));
    padding-bottom: 70px;
  }

  .papers-header {
    margin-bottom: 20px;
  }

  .papers-count {
    font-size: 12px;
  }

  .paper-card {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 30px 0;
  }

  .paper-featured {
    padding-top: 38px;
    padding-bottom: 38px;
  }

  .paper-index {
    padding-top: 0;
    font-size: 12px;
  }

  .paper-topline {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
  }

  .paper-tag {
    font-size: 11px;
    line-height: 1.45;
    letter-spacing: 0.08em;
  }

  .paper-status {
    font-size: 10px;
    padding: 4px 8px;
    letter-spacing: 0.1em;
  }

  .paper-title,
  .paper-featured .paper-title {
    max-width: 100%;
    font-size: clamp(30px, 8vw, 42px);
    line-height: 1.04;
  }

  .paper-abstract {
    max-width: 100%;
    margin-bottom: 18px;
    font-size: 15px;
    line-height: 1.65;
  }

  .paper-meta {
    max-width: 100%;
    font-size: 11px;
    line-height: 1.65;
    letter-spacing: 0.03em;
  }

  .paper-card:hover {
    padding-left: 0;
  }

  .paper-card:hover .paper-title {
    transform: translateX(0);
  }

  .ell-explainer {
    padding: 70px 0;
  }

  .ell-inner {
    width: min(100%, calc(100% - (var(--page-padding) * 2)));
  }

  .ell-inner h2 {
    max-width: 100%;
    margin-bottom: 30px;
    font-size: clamp(42px, 11vw, 58px);
  }

  .ell-inner > p:not(.section-label) {
    max-width: 100%;
    margin-bottom: 20px;
    font-size: 15px;
    line-height: 1.7;
  }

  .pull-quote {
    margin: 40px 0;
    padding: 12px 0;
    font-size: clamp(28px, 8vw, 38px);
    line-height: 1.12;
  }
}

@media (max-width: 900px) {
  .cta-banner {
    width: 100%;
    padding: 60px 30px;
  }

  .cta-banner-inner {
    width: 100%;
    min-height: auto;

    grid-template-columns: 1fr;

    gap: 40px;

    text-align: center;
  }

  .cta-content {
    width: 100%;
    padding: 0;
  }

  .cta-banner h2 {
    max-width: 720px;
    margin: 0 auto 36px;
  }

  .cta-banner .btn-primary {
    margin-inline: auto;
  }

  .cta-visual,
  .tdl-process-image {
    width: 100%;
    height: auto;

    display: flex;
    align-items: center;
    justify-content: center;
  }

  .cta-visual img,
  .tdl-process-image img {
    width: 80%;
    max-width: 540px;
    height: auto;

    transform: none;
  }

  .cta-action {
    margin-inline: auto;
  }
}

@media (max-width: 640px) {
  .cta-banner {
    padding: 50px 20px;
  }

  .cta-banner-inner {
    width: 100%;

    gap: 30px;

    padding: 0;
  }

  .cta-content {
    width: 100%;
  }

  .cta-banner h2 {
    max-width: 100%;
    margin-bottom: 28px;

    font-size: clamp(38px, 9vw, 52px);
    line-height: 1.02;
  }

  .cta-banner .btn-primary {
    min-height: 48px;
    padding: 0 22px;
  }

  .cta-visual,
  .tdl-process-image {
    width: 100%;
  }

  .cta-visual img,
  .tdl-process-image img {
    width: 90%;
    max-width: 420px;

    transform: none;
  }

  .cta-cursor {
    display: none;
  }

  .cta-action::after {
    display: none;
  }
}