/* ──────────────────────────────────────────────────────────────────────
   Components: buttons, nav, hero, trust strip
   ────────────────────────────────────────────────────────────────────── */

/* ── Buttons ───────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 500 15px/1 var(--font-sans);
  padding: 14px 22px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn .arr { transition: transform .25s ease; display: inline-block; }
.btn:hover .arr { transform: translateX(3px); }

.btn-primary  { background: var(--color-snow-white); color: var(--ink-dark); }
.btn-primary:hover { background: rgba(255,255,255,.85); color: var(--ink-dark); }
.btn-ghost    { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--ink); color: var(--ink); }
.btn-blue     { background: var(--blue); color: var(--color-snow-white); }
.btn-blue:hover { background: var(--blue-hover); color: var(--color-snow-white); }
.btn-link {
  font: 500 15px/1 var(--font-sans);
  color: var(--blue);
  display: inline-flex; align-items: center; gap: 6px;
  text-decoration: none;
}
.btn-link:hover { text-decoration: none; color: var(--blue-hover); }
.btn-link .arr { transition: transform .25s ease; display: inline-block; }
.btn-link:hover .arr { transform: translateX(3px); }

/* ── Nav ───────────────────────────────────────────────────────────── */
/* Floating frosted nav (Dimension signature component): detaches from the
   viewport edge instead of sitting flush/sticky. Fixed positioning takes it
   out of document flow, so .top-visual-wrapper below carries compensating
   top padding for the offset + bar height. */
.nav {
  position: fixed; top: 16px; left: 50%; z-index: 50;
  transform: translateX(-50%);
  width: calc(100% - 32px);
  max-width: var(--max-wide);
  background: rgba(22,22,22,0.7);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--line-soft);
  border-radius: 19px;
  padding: 0 20px;
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 64px;
}
.nav-brand {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--color-snow-white);
  font: 700 15px/1 var(--font-sans);
  letter-spacing: -0.01em;
  text-decoration: none;
}
.nav-brand:hover { text-decoration: none; }
@media (max-width: 480px) {
  .nav-brand-text { display: none; }
}
.nav-mark {
  width: 28px; height: 28px;
  border-radius: var(--r-icon);
  background: var(--blue);
  position: relative; overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-snow-white);
  font: 600 13px/1 var(--font-mono);
  letter-spacing: 0;
}
.nav-mark::before {
  content: "›";
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 600;
  color: var(--color-snow-white);
  transform: translate(-2px, -1px);
}
.nav-mark::after {
  content: "";
  width: 6px;
  height: 1.5px;
  background: var(--color-snow-white);
  border-radius: 1px;
  margin-left: 1px;
  transform: translateY(3px);
  animation: cursor-blink 1.2s steps(2, end) infinite;
}
@keyframes cursor-blink {
  0%, 50%  { opacity: 1; }
  51%, 100% { opacity: 0; }
}
.nav-brand .dim { color: var(--ink-quiet); font-weight: 450; }
nav { display: flex; align-items: center; gap: 30px; }
.nav-links {
  display: flex; align-items: center; gap: 30px;
  list-style: none; margin: 0; padding: 0;
}
.nav-links > li > a {
  color: var(--ink-soft);
  font: 500 14px/1 var(--font-sans);
  text-decoration: none;
}
.nav-links > li > a:hover { color: var(--color-snow-white); text-decoration: none; }
.nav-actions {
  display: flex; align-items: center; gap: 16px;
}
.nav-actions .nav-cta {
  background: var(--color-snow-white); color: var(--ink-dark);
  padding: 9px 16px; border-radius: 999px;
  font: 600 14px/1 var(--font-sans);
  text-decoration: none;
  transition: background .18s ease, color .18s ease;
}
.nav-actions .nav-cta:hover { background: var(--blue); color: var(--color-snow-white); text-decoration: none; }
.nav-toggle-btn {
  display: none;
}

.lang-toggle {
  appearance: none;
  background: transparent;
  border: 1px solid var(--line-soft);
  color: var(--ink-soft);
  font: 500 14px/1 var(--font-sans);
  padding: 9px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color .18s ease, color .18s ease;
}
.lang-toggle:hover { border-color: var(--line); color: var(--color-snow-white); }

@media (max-width: 800px) {
  .nav-toggle-btn {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 22px;
    height: 14px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 100;
  }
  .nav-toggle-btn .hamburger-line {
    width: 100%;
    height: 2px;
    background-color: var(--bg-warm);
    border-radius: 1px;
    transition: transform 0.25s var(--ease-out), opacity 0.2s ease;
  }
  
  /* Open state transformations */
  .nav.nav-open .nav-toggle-btn .hamburger-line:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }
  .nav.nav-open .nav-toggle-btn .hamburger-line:nth-child(2) {
    opacity: 0;
  }
  .nav.nav-open .nav-toggle-btn .hamburger-line:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }

  .nav-links {
    /* 16px top offset + 64px bar height + 16px clearance, matching the
       floating nav's new position/dimensions (was 64px for the old flush
       sticky nav). */
    position: fixed;
    top: 96px;
    left: 0;
    width: 100%;
    height: calc(100vh - 96px);
    background: rgba(18, 18, 22, 0.98);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 48px 24px;
    gap: 28px;
    transform: translateY(-100%);
    opacity: 0;
    transition: transform 0.35s var(--ease-out), opacity 0.3s ease;
    pointer-events: none;
    border-bottom: 1px solid var(--line-soft);
    z-index: 40;
  }

  .nav.nav-open .nav-links {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .nav-links > li.nav-li {
    display: block; /* Show links in mobile layout */
    opacity: 0;
    transform: translateY(10px);
    transition: transform 0.3s ease, opacity 0.3s ease;
  }
  
  .nav.nav-open .nav-links > li.nav-li {
    opacity: 1;
    transform: translateY(0);
  }
  
  /* Stagger animation entry for mobile items */
  .nav.nav-open .nav-links > li.nav-li:nth-child(1) { transition-delay: 0.1s; }
  .nav.nav-open .nav-links > li.nav-li:nth-child(2) { transition-delay: 0.15s; }
  .nav.nav-open .nav-links > li.nav-li:nth-child(3) { transition-delay: 0.2s; }
  .nav.nav-open .nav-links > li.nav-li:nth-child(4) { transition-delay: 0.25s; }

  .nav-links > li > a {
    font-size: 20px;
    font-weight: 500;
  }

  /* Lang toggle + CTA stay visible in the collapsed top bar (not tucked into
     the drawer) — only the section links collapse. Sized to the 44px+
     touch-target minimum here since they're always tappable, not just an
     occasional drawer item. */
  nav { gap: 12px; }
  .nav-actions {
    gap: 8px;
  }
  .lang-toggle {
    padding: 10px 12px;
    font-size: 13px;
    min-height: 44px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
  }
  .nav-actions .nav-cta {
    padding: 10px 16px;
    font-size: 13px;
    min-height: 44px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
  }
  /* Enlarge the tap target via padding without disturbing the icon's own
     22x14px line layout (flex-direction:column + justify-content:space-between
     from the base .nav-toggle-btn rule above still applies here). */
  .nav-toggle-btn {
    padding: 15px 11px;
    box-sizing: content-box;
  }
}


/* ── Hero ──────────────────────────────────────────────────────────── */
.top-visual-wrapper {
  position: relative;
  overflow: hidden;
  /* Compensates for the nav's move to position:fixed (16px offset + 64px bar
     + 16px clearance) — the nav no longer pushes this down via normal flow. */
  padding-top: 96px;
  /* Dimension's signature "Hero Horizon" gradient — amber/coral through
     violet to cobalt, at reduced opacity over the void canvas so the hero
     canvas grid and light text on top stay fully legible. This element
     wraps the hero AND the Services section below it (pre-existing markup,
     not something to restructure here), so the gradient fades to fully
     transparent by ~60% down rather than running the full box height —
     otherwise it washes over Services too. Matches how the previous
     radial-glow version behaved: visible near the hero, gone by the time
     you reach the next section. */
  background:
    linear-gradient(135deg,
      rgba(232,147,90,0.36) 0%,
      rgba(217,119,87,0.28) 14%,
      rgba(107,98,242,0.30) 32%,
      rgba(43,89,217,0.28) 46%,
      rgba(43,89,217,0) 60%
    ),
    var(--bg-warm);
}
.hero {
  position: relative;
  padding: clamp(48px, 5.5vw, 80px) 0 clamp(40px, 5vw, 72px);
  overflow: hidden;
  background: transparent;
}
.hero-shapes {
  position: absolute; inset: 0;
  pointer-events: none;
}
.hero-shapes canvas { display: block; }
.hero-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 4.5vw, 56px);
}
.hero-top {
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 6vw, 80px);
}

.hero-copy { max-width: 780px; }

.hero-visual { position: relative; }
.hero-visual-frame {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--line);
}
.hero-visual-frame img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1200 / 630;
  object-fit: cover;
}
.hero-visual-caption {
  margin-top: 16px;
  font: 500 12px/1 var(--font-mono);
  letter-spacing: 0.04em;
  color: var(--ink-quiet);
  text-align: center;
}

.hero-meta-row {
  display: flex; align-items: center; gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}
.hero-meta-row .sep { width: 1px; height: 14px; background: var(--line); }
.hero-meta-row .meta {
  font: 500 12px/1 var(--font-sans);
  color: var(--ink-soft);
  letter-spacing: 0.02em;
  display: inline-flex; align-items: center; gap: 8px;
}
.hero-meta-row .dot {
  width: 7px; height: 7px;
  border-radius: 999px;
  background: var(--teal);
  position: relative;
}
.hero-meta-row .dot::after {
  content: "";
  position: absolute; inset: -4px;
  border-radius: 999px;
  background: var(--teal);
  opacity: 0.4;
  animation: ping 2.4s cubic-bezier(0,0,0.2,1) infinite;
}
@keyframes ping {
  0%   { transform: scale(0.7); opacity: 0.4; }
  80%  { transform: scale(2.2); opacity: 0; }
  100% { transform: scale(2.2); opacity: 0; }
}

.hero h1 { max-width: 17ch; margin: 0; font-size: clamp(40px, 5vw, 72px); }
.hero .lede { margin-top: clamp(18px, 1.8vw, 28px); max-width: 46ch; }
.hero-cta-row {
  margin-top: clamp(24px, 2.5vw, 36px);
  display: flex; gap: 12px; flex-wrap: wrap;
}

.proof-band {
  padding-top: clamp(28px, 3vw, 32px);
  border-top: 1px solid var(--line-soft);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px 24px;
}
.proof-band-item .n {
  font-family: var(--font-display);
  font-size: clamp(19px, 1.4vw, 23px);
  font-style: italic;
  font-weight: var(--display-weight);
  letter-spacing: -0.018em;
  color: var(--ink);
  line-height: 1.1;
  margin-bottom: 8px;
}
.proof-band-item .l {
  font-size: 13.5px; line-height: 1.45;
  color: var(--ink-quiet);
  max-width: 24ch;
}
@media (max-width: 800px) {
  .proof-band { grid-template-columns: repeat(2, 1fr); gap: 24px 20px; }
}
@media (max-width: 520px) {
  .proof-band { grid-template-columns: 1fr; gap: 20px 0; }
}

/* ── AI value scenarios (illustrative, not case studies) ───────────── */
.value-bg { background: var(--bg-warm); }
/* Full-width divided rows -- deliberately NOT a bordered card grid, so this
   doesn't repeat the ai-creds layout family two sections up the page. */
.value-grid {
  display: flex;
  flex-direction: column;
}

.value-card {
  display: grid;
  grid-template-columns: 300px 1fr;
  column-gap: clamp(28px, 3.5vw, 48px);
  padding: clamp(28px, 3vw, 40px) 4px;
  border-top: 1px solid var(--line-soft);
}
@media (max-width: 760px) {
  .value-card {
    grid-template-columns: 1fr;
    row-gap: 12px;
  }
}

.value-tag {
  font: 500 12.5px/1.7 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-quiet);
  margin: 0;
}
.value-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.value-h {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: clamp(21px, 1.8vw, 27px);
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0;
  max-width: 24ch;
}
.value-d {
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--ink-soft);
  margin: 0;
  max-width: 48em;
}
.value-roi {
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  max-width: 48em;
}
.value-roi-label {
  font: 500 11.5px/1 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue);
  margin: 0;
  padding-top: 2px;
  white-space: nowrap;
}
.value-roi-text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-quiet);
  margin: 0;
}
.value-footnote {
  margin: clamp(24px, 2.4vw, 32px) 4px 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-quiet);
  font-style: italic;
}

/* ── Reusable engagement patterns (Services) ───────────────────────── */
.patterns-strip {
  margin-top: 24px;
}
.patterns-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.pattern-item {
  display: flex; flex-direction: column; gap: 8px;
  border-top: 2px solid var(--ink);
  padding-top: 16px;
}
.pattern-item .pattern-h {
  font: 500 12px/1 var(--font-mono);
  letter-spacing: 0.08em;
  color: var(--ink);
}
.pattern-item .pattern-d {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-quiet);
}
@media (max-width: 900px) {
  .patterns-grid { grid-template-columns: repeat(2, 1fr); gap: 24px 20px; }
}
@media (max-width: 520px) {
  .patterns-grid { grid-template-columns: 1fr; }
}

/* ── Applied-AI credentials row (dark Proof band) ──────────────────── */
.ai-creds {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: clamp(28px, 3vw, 40px) 0 clamp(48px, 5vw, 64px);
}
.ai-cred {
  position: relative;
  background: var(--glass-fill);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: 28px;
  display: flex; flex-direction: column; gap: 8px;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.ai-cred:hover {
  border-color: var(--line);
}
@media (prefers-reduced-motion: no-preference) {
  .service:hover {
    transform: translateY(-3px);
  }
  .ai-cred:hover { transform: translateY(-2px); }
}

/* Spotlight border: a soft teal glow traces the card edge, anchored to
   cursor position via --mx/--my (set in scroll-reveal.js on mousemove).
   Paint-only (a masked radial-gradient), no layout impact. Skipped
   entirely on touch devices since there's no persistent cursor to track. */
@media (hover: hover) and (pointer: fine) {
  .service::before,
  .ai-cred::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: radial-gradient(180px circle at var(--mx, 50%) var(--my, 50%), rgba(53,185,204,0.65), transparent 70%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 1;
  }
  .service:hover::before,
  .ai-cred:hover::before {
    opacity: 1;
  }
}
.ai-cred-tag {
  font: 500 11.5px/1 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal);
  margin: 0 0 4px;
}
.ai-cred-h {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 21px;
  letter-spacing: -0.02em;
  color: var(--color-snow-white);
  margin: 0 0 6px;
}
.ai-cred-d {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
}
@media (max-width: 800px) { .ai-creds { grid-template-columns: 1fr; } }

/* ── Proof strip (Selected work metrics) ───────────────────────────── */
.proof-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin: 0 0 clamp(48px, 5vw, 64px);
  padding: clamp(24px, 2.5vw, 36px) 0;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.proof-item .proof-n {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: clamp(40px, 4.4vw, 64px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--color-snow-white);
  font-variant-numeric: tabular-nums;
}
.proof-item .proof-l {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 22ch;
}
@media (max-width: 700px) {
  .proof-strip { grid-template-columns: 1fr; gap: 24px; }
}

/* ── Trust strip ───────────────────────────────────────────────────── */
.trust { padding: clamp(48px, 5vw, 72px) 0; background: var(--glass-fill); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); border-bottom: 1px solid var(--line-soft); border-top: 1px solid var(--line-soft); }
.trust-head { display: flex; align-items: baseline; gap: 24px; margin-bottom: 36px; flex-wrap: wrap; }
.trust-head .eyebrow { color: var(--ink); }
.trust-head .small { color: var(--ink-quiet); }
.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.trust-cell {
  padding: 22px 24px;
  border-left: 1px solid var(--line-soft);
  text-decoration: none;
  display: flex; flex-direction: column; gap: 8px;
  transition: background .18s ease;
}
.trust-cell:hover { background: var(--bg-warm-2); text-decoration: none; }
.trust-cell:first-child { border-left: 0; padding-left: 0; }
.trust-cell .name {
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--ink);
}
.trust-cell .tag {
  font-size: 13px;
  color: var(--ink-quiet);
  line-height: 1.35;
}
.trust-cell .status {
  margin-top: 4px;
  font: 500 11px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-quiet);
  display: inline-flex; align-items: center; gap: 7px;
}
.trust-cell .status::before {
  content: "";
  width: 6px; height: 6px;
  background: #1aa073;
  border-radius: 999px;
}
.trust-cell[data-status="dev"] .status::before { background: #d99a2b; }
@media (max-width: 800px) {
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .trust-cell:nth-child(3) { border-left: 0; padding-left: 0; }
  .trust-cell { border-top: 1px solid var(--line-soft); padding-top: 22px; }
  .trust-cell:nth-child(1), .trust-cell:nth-child(2) { border-top: 0; padding-top: 22px; }
}

/* ──────────────────────────────────────────────────────────────────────
   Section components: services, work, how-we-work, why, AI, about, CTA, footer
   ────────────────────────────────────────────────────────────────────── */

/* ── Section header ───────────────────────────────────────────────── */
.sec-head {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: clamp(48px, 5vw, 80px);
}
.sec-head .lede { max-width: 60ch; }
.sec-head h2 { margin-top: 14px; }

/* ── Services (2 cards) ───────────────────────────────────────────── */
.services-bg { background: transparent; }

.services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
@media (max-width: 900px) { .services-grid { grid-template-columns: 1fr; } }

.service {
  position: relative;
  background: var(--glass-fill);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--line-soft);
  border-radius: var(--r-xl);
  padding: clamp(32px, 3.6vw, 56px);
  display: flex; flex-direction: column;
  gap: 24px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.service:hover {
  border-color: var(--line);
  box-shadow: var(--shadow-md);
}
.service-kicker {
  font: 500 11.5px/1 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-quiet);
}
.service h3 { margin: 0; }
.service .sub {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(15px, 1.1vw, 15.5px);
  font-weight: 400;
  color: var(--ink-quiet);
  margin: -4px 0 4px;
}
.service .body { max-width: 50ch; }
.service-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 9px;
}
.service-list li {
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--ink-soft);
  display: flex; align-items: flex-start; gap: 12px;
}
.service-list li::before {
  content: "—";
  font-family: var(--font-mono);
  color: var(--blue);
  flex-shrink: 0;
}

/* ── Selected work ────────────────────────────────────────────────── */
/* ── Proof band (dark, full-bleed) ─────────────────────────────────── */
.work-bg { background: var(--ink-dark); }
.work-bg .sec-head h2 { color: var(--color-snow-white); }
.work-bg .lede { color: var(--ink-soft); }
.work-bg .eyebrow-num { color: var(--ink-quiet); }
.work-bg .eyebrow { color: var(--teal); }

.work-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 4vw, 56px);
  align-items: center;
}
.work-grid + .work-grid {
  margin-top: clamp(56px, 6vw, 96px);
  padding-top: clamp(56px, 6vw, 96px);
  border-top: 1px solid var(--line-soft);
}
@media (max-width: 900px) { .work-grid { grid-template-columns: 1fr; } }

.case-media {
  display: flex; flex-direction: column; gap: 16px;
}
.case-media .shot {
  border-radius: var(--r-md);
  border: 1px solid var(--line-soft);
  overflow: hidden;
}
.case-media img {
  display: block;
  width: 100%;
  height: auto;
}
.case-body {
  display: flex; flex-direction: column;
  gap: 16px;
}
.case-meta-line {
  font: 500 11.5px/1 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal);
  margin: 0;
}
.case-title {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: clamp(24px, 2vw, 30px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--color-snow-white);
  margin: 0;
}
.case-desc {
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 56ch;
  text-wrap: pretty;
  margin: 0;
}
.case-desc strong { color: var(--color-snow-white); }
.case-stack {
  font: 500 12px/1.5 var(--font-mono);
  color: var(--ink-quiet);
  letter-spacing: 0.02em;
}
.case-links { display: inline-flex; gap: 12px; flex-wrap: wrap; }
.case-links .btn-link {
  color: var(--color-snow-white);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  padding: 9px 18px;
  font-size: 14px;
  font-weight: 600;
  transition: border-color .18s ease, color .18s ease;
}
.case-links .btn-link:hover {
  border-color: var(--teal);
  color: var(--teal);
  text-decoration: none;
}

.work-footnote {
  margin: 4px 0 0;
  font: 400 12px/1.7 var(--font-mono);
  color: var(--ink-quiet);
}
.work-footnote strong { color: var(--ink-soft); font-weight: 400; }

/* ── How we work ──────────────────────────────────────────────────── */
.how-bg { background: var(--bg-warm); }

.how-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.how-cell {
  padding: 28px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  display: flex; flex-direction: column;
  gap: 12px;
  background: var(--glass-fill);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}
.how-cell .h4 { margin: 0; font-size: 20px; }
.how-cell .body { font-size: 14px; flex: 1; }
.how-meta {
  display: grid; grid-template-columns: 1fr; gap: 8px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
  font-size: 12.5px;
}
.how-meta-row { align-items: baseline; }
.how-meta dt {
  font: 500 10.5px/1.2 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-quiet);
  flex-shrink: 0;
}
.how-meta dd {
  margin: 0;
  color: var(--ink-soft);
  text-align: right;
}
.how-num {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-quiet);
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}
@media (max-width: 900px) { .how-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .how-grid { grid-template-columns: 1fr; } }

/* ── About ────────────────────────────────────────────────────────── */
.about-bg { background: var(--bg-warm); }
.about-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(40px, 5vw, 64px);
  align-items: start;
}
@media (max-width: 900px) { .about-grid { grid-template-columns: 1fr; } }
.about-body { display: flex; flex-direction: column; gap: 18px; }
.about-h2 { margin: 0 0 6px; font-size: clamp(30px, 3.2vw, 44px); }
.about-body p {
  font-size: 16px; line-height: 1.65;
  color: var(--ink-soft);
  margin: 0;
  max-width: 56ch;
}
.about-card {
  background: var(--glass-fill);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.about-card-photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.about-card-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.about-card-body { padding: 24px 28px 28px; }
.about-card .name {
  font: 700 19px/1.2 var(--font-sans);
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 4px;
}
.about-card .role {
  font: 500 11.5px/1 var(--font-mono);
  color: var(--ink-quiet);
  margin-bottom: 20px;
}
.about-card dl {
  margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.about-card .row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px;
  border-top: 1px dashed var(--line-soft);
  padding-top: 10px;
}
.about-card .row dt {
  font: 500 10.5px/1.2 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-quiet);
  flex-shrink: 0;
}
.about-card .row dd {
  margin: 0;
  font-size: 13.5px;
  color: var(--ink-soft);
  text-align: right;
}

/* ── Final CTA ────────────────────────────────────────────────────── */
.cta-bg { background: var(--bg-warm); }
.cta-card {
  background:
    radial-gradient(900px 400px at 90% 0%, rgba(53,185,204,0.20), transparent 60%),
    radial-gradient(700px 400px at 0% 100%, rgba(107,98,242,0.16), transparent 60%),
    var(--glass-fill);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--line-soft);
  border-radius: clamp(20px, 3vw, 36px);
  padding: clamp(48px, 6vw, 96px);
  color: var(--color-snow-white);
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
  align-items: end;
}
.cta-card::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right,  rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 70% 60% at 30% 50%, #000, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 30% 50%, #000, transparent 80%);
  pointer-events: none;
}
.cta-card > * { position: relative; }
.cta-card .eyebrow { color: var(--teal); }
.cta-card h2 { color: var(--color-snow-white); margin: 18px 0 0; }
.cta-card .lede { color: rgba(255,255,255,0.78); margin-top: 24px; max-width: 38ch; }
.cta-actions { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.cta-card .btn-primary { background: var(--teal); color: var(--ink-dark); }
.cta-card .btn-primary:hover { background: #6efce7; color: var(--ink-dark); }
.cta-card .btn-ghost { color: var(--color-snow-white); border-color: rgba(255,255,255,0.20); }
.cta-card .btn-ghost:hover { border-color: rgba(255,255,255,0.50); }
.cta-meta {
  font: 400 12.5px/1.4 var(--font-mono);
  color: var(--ink-quiet);
  letter-spacing: 0.02em;
}
.cta-check { color: #55b47a; }
@media (max-width: 900px) {
  .cta-card { grid-template-columns: 1fr; gap: 32px; }
}

/* ── Service / legal detail pages ────────────────────────────────────
   Single source of truth for the six service/privacy pages (EN+ES).
   Previously this block was duplicated verbatim inline in each page's
   <style> tag, which is how the content-block/legal-content headings
   drifted from the site's Fraunces display type onto the plain body
   sans — nothing enforced them staying in sync. */
.service-detail-hero,
.legal-hero {
  padding: clamp(100px, 10vw, 160px) 0 clamp(48px, 6vw, 96px);
}
.service-detail-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: clamp(48px, 6vw, 96px);
  margin-top: 64px;
  align-items: start;
}
@media (max-width: 900px) {
  .service-detail-grid { grid-template-columns: 1fr; gap: 48px; }
}
.content-block { display: flex; flex-direction: column; gap: 32px; }
.content-block h2,
.legal-content h2 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  font-size: clamp(28px, 2.5vw, 36px);
  line-height: 1.15;
  color: var(--ink);
  margin: 0;
  margin-top: 24px;
}
.content-block p {
  font-size: 17.5px;
  line-height: 1.65;
  color: var(--ink-soft);
}
.content-block ul {
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.content-block li {
  font-size: 16.5px;
  color: var(--ink-soft);
  line-height: 1.5;
}
.sidebar-box {
  background: var(--bg-warm);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-xl);
  padding: clamp(24px, 2.5vw, 36px);
  position: sticky;
  top: 104px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.sidebar-box h4 { margin: 0; }
.sidebar-box ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sidebar-box li {
  font-size: 14.5px;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 8px;
}
.sidebar-box li::before { content: "✓"; color: var(--teal); font-weight: bold; }

.legal-content {
  max-width: 720px;
  margin: 48px auto;
  display: flex;
  flex-direction: column;
  gap: 32px;
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--ink-soft);
}
.legal-content p { margin: 0; }

/* ── Reading progress (long-form service/privacy pages) ─────────────── */
.reading-progress {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 3px;
  z-index: 60; /* above .nav (z-index: 50) */
  background: transparent;
  pointer-events: none;
}
.reading-progress-bar {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--teal), var(--blue));
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .reading-progress { display: none; }
}

/* ── Footer ────────────────────────────────────────────────────────── */
.footer {
  background: var(--bg-warm);
  color: var(--ink);
  border-top: 1px solid var(--line-soft);
  padding: clamp(56px, 5vw, 88px) 0 32px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr 1fr; gap: 32px;
  gap: 48px;
  padding-bottom: 56px;
  border-bottom: 1px solid var(--line-soft);
}
@media (max-width: 800px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
.footer h5 {
  font: 600 11px/1 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-quiet);
  margin: 0 0 18px;
}
.footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.footer ul a {
  color: var(--ink-soft);
  font: 400 15px/1.2 var(--font-sans);
  text-decoration: none;
}
.footer ul a:hover { color: var(--blue); text-decoration: none; }
.footer-brand {
  display: flex; flex-direction: column; gap: 16px;
  max-width: 36ch;
}
.footer-brand .nav-brand { color: var(--ink); }
.footer-brand .nav-mark { background: var(--blue); color: var(--color-snow-white); }
.footer-brand .nav-mark::before, .footer-brand .nav-mark::after { color: var(--color-snow-white); }
.footer-brand p {
  color: var(--ink-soft);
  font-size: 14px; line-height: 1.55;
  margin: 0;
}
.footer-bottom {
  padding-top: 24px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  font-family: var(--font-mono);
}
.footer-bottom .small {
  color: var(--ink-quiet);
  font-size: 12px;
}
.footer-bottom .mono {
  font: 500 12px/1 var(--font-mono);
  color: var(--ink-quiet);
  letter-spacing: 0.04em;
}
.footer-legal-link { color: var(--ink-quiet); text-decoration: none; transition: color 0.2s; }
.footer-legal-link:hover { color: var(--ink); }

.code-block {
  background: var(--bg-soft);
  color: var(--ink-soft);
  padding: 16px;
  border-radius: var(--r-md);
  overflow-x: auto;
  font-family: monospace;
  font-size: 13.5px;
  margin: 16px 0;
  border: 1px solid var(--line-soft);
}

/* ── Tech-Forward Scroll & Interaction Enhancements ──────────────── */

/* Word clipping for text reveal */
.word-mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  /* Padding (with cancelling negative margins) gives descenders and italic
     overhang room inside the overflow:hidden mask without shifting layout. */
  padding: 0 0.1em 0.15em 0.02em;
  margin: 0 -0.1em -0.15em -0.02em;
}
.word-inner {
  display: inline-block;
  transform: translateY(130%);
  will-change: transform;
}

/* ── Split Hero & Terminal-log Layout ──────────────────────────────── */
@media (min-width: 901px) {
  .hero-top {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: clamp(48px, 4vw, 80px);
  }
  .hero-copy {
    flex: 1.05;
    max-width: 660px;
  }
  .hero-visual {
    flex: 0.95;
    max-width: 480px;
    display: block;
    position: relative;
  }
}
.hero-visual {
  display: block;
  width: 100%;
}

/* Hero photo + floating "product moment" card */
.hero-photo-wrap { position: relative; }
.hero-photo {
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--line);
}
.hero-photo img {
  display: block;
  width: 100%;
  height: auto;
}
/* Frosted-glass wrap around the real team photo — keeps the human/photography
   brand differentiator while matching the Dimension panel treatment. */
.hero-photo-card {
  position: absolute;
  right: 14px;
  bottom: 14px;
  background: var(--glass-fill);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.hpc-top { display: flex; align-items: center; gap: 7px; }
.hpc-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); flex-shrink: 0; }
.hpc-label {
  font: 500 10px/1 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-quiet);
}
.hpc-line { font-size: 12.5px; color: var(--ink-soft); }
.hpc-n { font-weight: 600; color: var(--ink); }
.hpc-badge {
  align-self: flex-start;
  font: 500 10.5px/1 var(--font-mono);
  color: var(--ink-dark);
  background: #e5b567;
  padding: 5px 9px;
  border-radius: 999px;
}

/* Enterprise capability band (landing, section 01) */
.ent-band {
  margin-top: clamp(28px, 3.5vw, 44px);
  border: 1px solid rgba(43,89,217,0.18);
  background: rgba(43,89,217,0.04);
  border-radius: var(--r-lg);
  padding: clamp(22px, 2.8vw, 32px);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: clamp(18px, 2.5vw, 36px);
}
.ent-band-tag {
  font: 500 11px/1 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue);
  margin: 0 0 10px;
}
.ent-band-h {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: clamp(19px, 1.6vw, 24px);
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 8px;
}
.ent-band-d {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
  max-width: 62ch;
}
.ent-band .service-link { margin-top: 0; white-space: nowrap; }
@media (max-width: 860px) {
  .ent-band { grid-template-columns: 1fr; }
}

/* ── Browser Mockup (Baja Care) ────────────────────────────────────────
   Deliberately kept light regardless of the site's dark theme — this is a
   product-screenshot mockup (Dimension's own "Device Mockup Frame" is
   explicitly white/light too, matching how a real app screenshot reads),
   so it uses self-contained light literals instead of the shared tokens
   above, which are dark-mode values everywhere else in this file. */
.browser-mockup {
  width: 100%;
  height: 100%;
  background: #fbfaf5;
  display: flex;
  flex-direction: column;
  font-family: var(--font-sans);
  color: #16161a;
  overflow: hidden;
  border-radius: var(--r-xl);
  border: 1px solid var(--line-soft);
}
.browser-bar {
  background: #efe9d8;
  height: 36px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 8px;
  border-bottom: 1px solid #ddd7c8;
  flex-shrink: 0;
}
.browser-bar .dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  display: inline-block;
}
.browser-bar .dot.red { background: #ff5f56; }
.browser-bar .dot.yellow { background: #ffbd2e; }
.browser-bar .dot.green { background: #27c93f; }
.browser-bar .browser-address {
  margin-left: 12px;
  background: #ffffff;
  border-radius: 4px;
  padding: 3px 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: #5f5c52;
  flex-grow: 1;
  max-width: 220px;
  text-align: center;
  border: 1px solid #ddd7c8;
}
.browser-content {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex-grow: 1;
  background: #fbfaf5;
}
.mock-search {
  background: #f4f1ea;
  border: 1px solid #ddd7c8;
  border-radius: var(--r-sm);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #5f5c52;
}
.mock-card {
  background: #ffffff;
  border: 1px solid #ddd7c8;
  border-radius: var(--r-md);
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 1px 2px rgba(20,22,30,.06);
}
.mock-card-avatar {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--navy), var(--teal));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 13px;
}
.mock-card-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-grow: 1;
}
.mock-card-title {
  font-size: 14px;
  font-weight: 600;
  color: #16161a;
}
.mock-card-subtitle {
  font-size: 12px;
  color: #5f5c52;
}
.mock-tags {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}
.mock-tag {
  font-size: 10px;
  background: #f4f1ea;
  border-radius: 999px;
  padding: 3px 10px;
  color: #454337;
  font-weight: 500;
}
.mock-tag.highlight {
  background: #bfe9ee;
  color: var(--navy);
}

/* ── Interactive Booking Form (in the dark Contact card) ──────────── */
.cta-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
}
.cta-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 480px) {
  .cta-form .form-row {
    grid-template-columns: 1fr;
  }
}
.cta-form input,
.cta-form textarea {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  padding: 13px 16px;
  font: 15px/1.4 var(--font-sans);
  color: var(--color-snow-white);
  outline: none;
  transition: border-color 0.22s ease, background 0.22s ease, box-shadow 0.22s ease;
}
.cta-form input::placeholder,
.cta-form textarea::placeholder {
  color: var(--ink-quiet);
  opacity: 1;
}
.cta-form input:focus,
.cta-form textarea:focus {
  border-color: var(--teal);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 0 4px rgba(53, 185, 204, 0.2);
}
.cta-form button[type="submit"] {
  align-self: flex-start;
}
.form-success-message {
  margin-top: 4px;
  font: 500 13.5px/1.5 var(--font-sans);
  color: var(--teal);
  background: rgba(53, 185, 204, 0.08);
  border: 1px solid rgba(53, 185, 204, 0.25);
  border-radius: var(--r-md);
  padding: 12px 16px;
  animation: formSuccessFade 0.4s ease forwards;
}
@keyframes formSuccessFade {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.form-error-message {
  margin-top: 4px;
  font: 500 13.5px/1.5 var(--font-sans);
  color: #ff8a7a;
  background: rgba(255, 90, 70, 0.08);
  border: 1px solid rgba(255, 90, 70, 0.25);
  border-radius: var(--r-md);
  padding: 12px 16px;
  animation: formSuccessFade 0.4s ease forwards;
}

/* ── FAQ Section ────────────────────────────────────────────────── */
.faq-bg { background: var(--bg-warm); }
.faq-grid {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 48px;
}
@media (max-width: 760px) { .faq-grid { grid-template-columns: 1fr; gap: 24px; } }
.faq-h2 { margin: 0; font-size: clamp(26px, 2.4vw, 36px); }
.faq-list {
  display: flex;
  flex-direction: column;
}
.faq-item {
  padding: 26px 0;
  border-top: 1px solid var(--line-soft);
}
.faq-item-last { border-bottom: 1px solid var(--line-soft); }
.faq-item h3 {
  margin: 0 0 10px;
  font: 700 18px/1.3 var(--font-sans);
  letter-spacing: -0.015em;
  color: var(--ink);
}
.faq-item p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-quiet);
  max-width: 50em;
}

.service-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  text-decoration: none;
  color: var(--blue);
  font-size: 14.5px;
  margin-top: 20px;
  transition: color 0.18s ease;
}
.service-link:hover {
  color: var(--ink);
}
.service-link .arr {
  transition: transform 0.18s ease;
  display: inline-block;
}
.service-link:hover .arr {
  transform: translateX(4px);
}

/* Hero entrance animations */
@keyframes heroEntrance {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.hero-meta-row {
  opacity: 0;
  animation: heroEntrance 0.6s var(--ease-out) 0.05s forwards;
}
.hero h1 {
  opacity: 0;
  animation: heroEntrance 0.7s var(--ease-out) 0.12s forwards;
}
.hero .lede {
  opacity: 0;
  animation: heroEntrance 0.6s var(--ease-out) 0.2s forwards;
}
.hero-cta-row {
  opacity: 0;
  animation: heroEntrance 0.6s var(--ease-out) 0.28s forwards;
}
.hero-helper-row {
  opacity: 0;
  animation: heroEntrance 0.6s var(--ease-out) 0.32s forwards;
}
.hero-visual {
  opacity: 0;
  animation: heroEntrance 0.7s var(--ease-out) 0.35s forwards;
}

@media (prefers-reduced-motion: reduce) {
  .hero-meta-row,
  .hero h1,
  .hero .lede,
  .hero-cta-row,
  .hero-helper-row,
  .hero-visual {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}

.value-scenario-badge {
  display: inline-block;
  font: 600 9px/1 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal);
  border: 1px solid rgba(53, 185, 204, 0.35);
  background: rgba(53, 185, 204, 0.08);
  border-radius: var(--r-sm);
  padding: 4px 6px 3px 6px;
  align-self: flex-start;
  margin-top: 4px;
}