/* ARC — A Random Company · Slate v1.0 · main.css */

/* ── TOKENS ──────────────────────────────────────────────────── */
:root {
  --arc-ink:        #1B1E2A;
  --arc-vermillion: #D43828;
  --arc-frost:      #EDEEF2;
  --arc-steel:      #7A7E92;
  --arc-cloud:      #D8DAE6;
  --arc-card:       #F6F7FA;
  --arc-paper:      #FFFFFF;
  --arc-ink-90:     #2E323F;
  --arc-ink-70:     #4A4F60;
  --arc-ink-50:     #7A7E92;
  --arc-ink-30:     #A8ACBC;
  --arc-ink-10:     #D8DAE6;
  --arc-vermillion-hover:  #BC2F20;
  --arc-vermillion-active: #A22717;
  --arc-vermillion-soft:   #F4D8D4;
  --arc-vermillion-quiet:  #FBEEEC;
  --arc-font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --arc-font-sans:    'Space Grotesk', system-ui, sans-serif;
  --arc-font-mono:    'DM Mono', ui-monospace, monospace;
  --arc-shadow-xs:  0 1px 2px rgba(27,30,42,0.04);
  --arc-shadow-sm:  0 1px 3px rgba(27,30,42,0.06), 0 1px 2px rgba(27,30,42,0.04);
  --arc-shadow-md:  0 4px 12px rgba(27,30,42,0.06), 0 2px 4px rgba(27,30,42,0.04);
  --arc-shadow-lg:  0 12px 32px rgba(27,30,42,0.08), 0 4px 8px rgba(27,30,42,0.04);
  --arc-shadow-focus: 0 0 0 3px rgba(212,56,40,0.22);
  --ease: cubic-bezier(0.4,0,0.2,1);
}

@font-face {
  font-family: 'Newsreader';
  src: url('../brand/fonts/Newsreader-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Newsreader';
  src: url('../brand/fonts/Newsreader-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Newsreader';
  src: url('../brand/fonts/Newsreader-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('../brand/fonts/SpaceGrotesk-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Mono';
  src: url('../brand/fonts/DMMono-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Mono';
  src: url('../brand/fonts/DMMono-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ── RESET ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
img, video { max-width: 100%; display: block; }

body {
  font-family: var(--arc-font-sans);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--arc-ink);
  background: var(--arc-frost);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font: inherit; }

/* ── WRAP ────────────────────────────────────────────────────── */
.wrap {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 48px;
}
@media (max-width: 1024px) { .wrap { padding-inline: 32px; } }
@media (max-width: 768px)  { .wrap { padding-inline: 20px; } }

/* ── TYPOGRAPHY ──────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--arc-font-display);
  font-weight: 500;
  letter-spacing: -0.012em;
  line-height: 1.08;
  color: var(--arc-ink);
}

.label {
  font-family: var(--arc-font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--arc-steel);
}
.label-accent { color: var(--arc-vermillion); }

.h-display {
  font-family: var(--arc-font-display);
  font-size: clamp(48px, 8vw, 96px);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.02;
  color: var(--arc-ink);
}
.h-display em { color: var(--arc-vermillion); font-style: normal; }

.h-page {
  font-family: var(--arc-font-display);
  font-size: clamp(36px, 5.5vw, 64px);
  font-weight: 500;
  letter-spacing: -0.014em;
  line-height: 1.05;
  color: var(--arc-ink);
}

.h-section {
  font-family: var(--arc-font-display);
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 500;
  letter-spacing: -0.012em;
  line-height: 1.1;
  color: var(--arc-ink);
}

.h-card {
  font-family: var(--arc-font-display);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--arc-ink);
}

.lede {
  font-size: 18px;
  line-height: 1.6;
  color: var(--arc-ink-70);
}

.body-text {
  font-size: 15px;
  line-height: 1.7;
  color: var(--arc-ink-70);
}

.mt-sm  { margin-top: 12px; }
.mt-md  { margin-top: 24px; }
.mt-lg  { margin-top: 48px; }

/* ── BUTTONS ─────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 22px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-family: var(--arc-font-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background 120ms var(--ease), border-color 120ms var(--ease), color 120ms var(--ease), box-shadow 120ms var(--ease);
}
.btn:focus-visible { outline: none; box-shadow: var(--arc-shadow-focus); }

.btn--primary {
  background: var(--arc-ink);
  color: var(--arc-frost);
  border-color: var(--arc-ink);
}
.btn--primary:hover  { background: var(--arc-ink-90); border-color: var(--arc-ink-90); }

.btn--secondary {
  background: var(--arc-paper);
  color: var(--arc-ink);
  border-color: var(--arc-cloud);
}
.btn--secondary:hover { border-color: var(--arc-ink-30); }

.btn--ghost {
  background: transparent;
  color: var(--arc-ink);
  border-color: transparent;
  padding-inline: 8px;
}
.btn--ghost:hover { color: var(--arc-vermillion); }

.btn--light {
  background: var(--arc-frost);
  color: var(--arc-ink);
  border-color: transparent;
}
.btn--light:hover { background: var(--arc-cloud); }

.btn--destructive {
  background: var(--arc-vermillion);
  color: var(--arc-frost);
}
.btn--destructive:hover { background: var(--arc-vermillion-hover); }

.btn__arrow {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  transition: transform 120ms var(--ease);
}

.btn:hover .btn__arrow {
  transform: translateX(2px);
}

.btn__arrow--ghost {
  width: 16px;
  height: 16px;
  margin-left: 2px;
}

/* ── NAV ─────────────────────────────────────────────────────── */
.nav-bar {
  position: sticky;
  top: 0;
  z-index: 200;
  height: 60px;
  background: rgba(237,238,242,0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: opacity 320ms var(--ease), transform 320ms var(--ease), filter 320ms var(--ease), border-color 220ms var(--ease), background 220ms var(--ease);
  will-change: opacity, transform;
}

.nav-bar.is-hidden-for-lp-scroll {
  opacity: 0;
  transform: translateY(-100%);
  filter: blur(6px);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .nav-bar { transition: opacity 120ms linear; }
  .nav-bar.is-hidden-for-lp-scroll {
    transform: none;
    filter: none;
  }
}

.nav-inner {
  display: flex;
  align-items: center;
  gap: 32px;
  height: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 48px;
}
@media (max-width: 1024px) { .nav-inner { padding-inline: 32px; } }
@media (max-width: 768px)  { .nav-inner { padding-inline: 20px; } }

.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  text-decoration: none;
}

.nav-logo svg { display: block; }

.nav-brand-text {
  font-family: var(--arc-font-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--arc-ink);
}

.nav-inner > nav { margin-left: auto; }

.nav-links {
  display: flex;
  gap: 28px;
  list-style: none;
  margin-left: auto;
}

.nav-links a {
  font-family: var(--arc-font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--arc-ink-70);
  text-decoration: none;
  transition: color 120ms var(--ease);
}
.nav-links a:hover,
.nav-links a.active { color: var(--arc-ink); }

.nav-cta {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 16px;
  background: var(--arc-ink);
  color: var(--arc-frost);
  font-family: var(--arc-font-display);
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px;
  text-decoration: none;
  transition: background 120ms var(--ease);
  flex-shrink: 0;
}
.nav-cta:hover { background: var(--arc-ink-90); color: var(--arc-frost); }

.language-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 36px;
  border: 1px solid var(--arc-cloud);
  border-radius: 8px;
  background: rgba(255,255,255,0.28);
  color: var(--arc-ink);
  font-family: var(--arc-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1;
  transition: border-color 120ms var(--ease), background 120ms var(--ease), color 120ms var(--ease), box-shadow 120ms var(--ease);
  flex-shrink: 0;
}
.language-toggle:hover {
  border-color: var(--arc-ink-30);
  background: var(--arc-paper);
  color: var(--arc-vermillion);
}
.language-toggle:focus-visible {
  outline: none;
  box-shadow: var(--arc-shadow-focus);
}

.langfab {
  position: fixed;
  right: max(24px, env(safe-area-inset-right));
  bottom: max(24px, env(safe-area-inset-bottom));
  z-index: 300;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-sizing: border-box;
  height: 50px;
  max-width: calc(100vw - 32px);
  padding: 0 8px 0 18px;
  border: 1px solid rgba(237,238,242,.14);
  border-radius: 999px;
  background: var(--arc-ink);
  color: var(--arc-frost);
  cursor: pointer;
  font-family: var(--arc-font-display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -.005em;
  box-shadow: 0 12px 30px rgba(27,30,42,.28);
  opacity: var(--langfab-opacity, 1);
  visibility: var(--langfab-visibility, visible);
  transform: translateY(calc(var(--langfab-scroll-y, 0px) + var(--langfab-hover-y, 0px)));
  pointer-events: var(--langfab-pointer, auto);
  transition:
    box-shadow .18s var(--ease),
    opacity .22s var(--ease),
    transform .22s var(--ease),
    visibility 0s linear var(--langfab-visibility-delay, 0s);
}

.langfab:hover {
  --langfab-hover-y: -2px;
  box-shadow: 0 16px 36px rgba(27,30,42,.34);
}

.langfab__globe {
  width: 18px;
  height: 18px;
  stroke: #ff6a5a;
  flex-shrink: 0;
}

.langfab__label {
  opacity: .7;
}

.langfab__pill {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--arc-vermillion);
  color: #fff;
  font-family: var(--arc-font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  font-weight: 500;
}

@media (max-width:680px) {
  .langfab {
    right: calc(16px + env(safe-area-inset-right, 0px));
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    height: 46px;
    max-width: calc(100% - 32px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
    /* Keep the scroll-fade (opacity/pointer-events) but kill the
       translateY drift — on mobile that drift was pushing the button
       toward the safe-area edge and making it look cut off. */
    transform: none;
  }

  .langfab__label {
    display: none;
  }
}

.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 28px;
  padding: 4px;
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
}
.nav-hamburger span {
  display: block;
  height: 1.5px;
  background: var(--arc-ink);
  border-radius: 2px;
  transition: transform 200ms var(--ease), opacity 200ms var(--ease);
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 768px) {
  .nav-links, .nav-cta { display: none; }
  .nav-hamburger { display: flex; }
  .nav-inner > .language-toggle { margin-left: auto; }
  .nav-inner > .language-toggle + .nav-hamburger { margin-left: 0; }
}

/* ── MOBILE DRAWER ───────────────────────────────────────────── */
.nav-drawer {
  position: fixed;
  inset: 60px 0 0 0;
  background: var(--arc-frost);
  border-top: 1px solid var(--arc-cloud);
  z-index: 190;
  padding: 32px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transform: translateY(-110%);
  transition: transform 250ms var(--ease);
}
.nav-drawer.open { transform: translateY(0); }

.nav-drawer__links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.nav-drawer__links a {
  display: block;
  padding: 14px 0;
  font-family: var(--arc-font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--arc-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--arc-cloud);
  transition: color 120ms var(--ease);
}
.nav-drawer__links a:hover { color: var(--arc-vermillion); }

.nav-drawer__cta {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 22px;
  background: var(--arc-ink);
  color: var(--arc-frost);
  font-family: var(--arc-font-display);
  font-size: 14px;
  font-weight: 600;
  border-radius: 8px;
  text-decoration: none;
  margin-top: 20px;
  align-self: flex-start;
}

.nav-drawer > .language-toggle {
  width: 52px;
  height: 40px;
  margin-top: 16px;
}

/* ── SECTIONS ────────────────────────────────────────────────── */
.section--flush { padding-top: 0; }

.section {
  padding-block: 96px;
}
@media (max-width: 1024px) { .section { padding-block: 64px; } }
@media (max-width: 768px)  { .section { padding-block: 48px; } }

.section-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
  margin-bottom: 56px;
}
@media (max-width: 768px) {
  .section-header { grid-template-columns: 1fr; gap: 16px; margin-bottom: 36px; }
}

.section-header--narrow {
  max-width: 640px;
  margin-bottom: 56px;
}
@media (max-width: 768px) { .section-header--narrow { margin-bottom: 36px; } }

/* ── HERO ────────────────────────────────────────────────────── */
.hero {
  padding: 96px 0 80px;
  position: relative;
  overflow: hidden;
}
@media (max-width: 768px) { .hero { padding: 64px 0 56px; } }

.hero__watermark {
  position: absolute;
  right: -48px;
  top: 50%;
  transform: translateY(-50%);
  width: 420px;
  opacity: 0.04;
  pointer-events: none;
  user-select: none;
}
@media (max-width: 1024px) { .hero__watermark { display: none; } }

.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
}
.hero__eyebrow-line {
  display: block;
  width: 24px;
  height: 1px;
  background: var(--arc-vermillion);
}

.hero__headline { margin-bottom: 24px; }

.hero__sub {
  max-width: 560px;
  margin-bottom: 36px;
}

.hero__ctas {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.hero__meta {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--arc-cloud);
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}

/* ── PAGE HERO (inner pages) ─────────────────────────────────── */
.page-hero {
  padding: 64px 0 72px;
  border-bottom: 1px solid var(--arc-cloud);
  margin-bottom: 0;
  background: var(--arc-frost);
}
@media (max-width: 768px) { .page-hero { padding: 48px 0 52px; } }

.page-hero__label { margin-bottom: 16px; }

.page-hero__sub {
  max-width: 620px;
  margin-top: 16px;
}

/* ── CARD GRID ───────────────────────────────────────────────── */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 960px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .card-grid { grid-template-columns: 1fr; } }

.card {
  background: var(--arc-paper);
  border: 1px solid var(--arc-cloud);
  border-radius: 12px;
  padding: 28px;
  transition: box-shadow 200ms var(--ease);
}
.card:hover { box-shadow: var(--arc-shadow-md); }

.card__num {
  font-family: var(--arc-font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--arc-steel);
  margin-bottom: 16px;
}

.card__icon {
  width: 32px;
  height: 32px;
  color: var(--arc-ink);
  margin-bottom: 16px;
}

.card__title { margin-bottom: 10px; }

.card__body {
  font-size: 14px;
  line-height: 1.65;
  color: var(--arc-ink-70);
  margin-bottom: 20px;
}

.card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--arc-font-display);
  font-size: 13px;
  font-weight: 600;
  color: var(--arc-ink);
  text-decoration: none;
  transition: color 120ms var(--ease);
}
.card__link:hover { color: var(--arc-vermillion); }

/* ── PROCESS STEPS ───────────────────────────────────────────── */
.process {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  position: relative;
}
@media (max-width: 960px) { .process { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .process { grid-template-columns: 1fr; } }

.step { position: relative; }

.step__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--arc-vermillion);
  margin-bottom: 16px;
}

.step__num {
  font-family: var(--arc-font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--arc-steel);
  margin-bottom: 8px;
}

.step__title {
  font-family: var(--arc-font-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--arc-ink);
  margin-bottom: 10px;
}

.step__body {
  font-size: 14px;
  line-height: 1.65;
  color: var(--arc-ink-70);
}

/* ── CTA STRIP ───────────────────────────────────────────────── */
.cta-strip {
  background: var(--arc-ink);
  padding: 56px 0;
  position: relative;
  overflow: hidden;
}
.cta-strip::before {
  content: '';
  position: absolute;
  top: -20%;
  right: -10%;
  width: 50%;
  height: 140%;
  background: radial-gradient(ellipse at center, rgba(212,56,40,0.18), transparent 65%);
  pointer-events: none;
}

.cta-strip__inner {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  position: relative;
}
@media (max-width: 1024px) { .cta-strip__inner { padding-inline: 32px; } }
@media (max-width: 768px) {
  .cta-strip__inner { flex-direction: column; align-items: flex-start; padding-inline: 20px; }
}

.cta-strip__heading {
  font-family: var(--arc-font-display);
  font-size: clamp(22px, 3vw, 34px);
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--arc-frost);
  line-height: 1.15;
}

/* ── ABOUT GRID ──────────────────────────────────────────────── */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}
@media (max-width: 960px) { .about-grid { grid-template-columns: 1fr; gap: 48px; } }

.about-stat {
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--arc-cloud);
}

.about-stat__num {
  font-family: var(--arc-font-display);
  font-size: 36px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--arc-ink);
  margin-bottom: 4px;
}

.about-stat__label {
  font-family: var(--arc-font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--arc-steel);
}

/* ── PHILOSOPHY LIST ─────────────────────────────────────────── */
.philosophy-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.philosophy-list li {
  display: flex;
  gap: 28px;
  align-items: baseline;
  padding: 24px 0;
  border-bottom: 1px solid var(--arc-cloud);
}
.philosophy-list li:first-child { border-top: 1px solid var(--arc-cloud); }

.philosophy-list__num {
  font-family: var(--arc-font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--arc-steel);
  flex-shrink: 0;
  padding-top: 2px;
}

.philosophy-list__text {
  font-size: 15px;
  line-height: 1.7;
  color: var(--arc-ink-70);
}
.philosophy-list__text strong { color: var(--arc-ink); font-weight: 600; }

/* ── CONTACT PAGE ────────────────────────────────────────────── */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 80px;
  align-items: start;
}
@media (max-width: 960px) { .contact-grid { grid-template-columns: 1fr; gap: 48px; } }

.contact-info__item {
  padding: 16px 0;
  border-bottom: 1px solid var(--arc-cloud);
}
.contact-info__item:first-of-type { border-top: 1px solid var(--arc-cloud); }

.contact-info__label {
  display: block;
  font-family: var(--arc-font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--arc-steel);
  margin-bottom: 4px;
}

.contact-info__val {
  display: block;
  font-size: 15px;
  color: var(--arc-ink);
  font-weight: 500;
}

/* ── FORM ────────────────────────────────────────────────────── */
.contact-form { display: flex; flex-direction: column; gap: 16px; }

.form-group { display: flex; flex-direction: column; gap: 6px; }

.form-label {
  font-family: var(--arc-font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--arc-steel);
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--arc-cloud);
  border-radius: 4px;
  background: var(--arc-paper);
  color: var(--arc-ink);
  font-family: var(--arc-font-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  transition: border-color 120ms var(--ease), box-shadow 120ms var(--ease);
  appearance: none;
}
.form-input::placeholder,
.form-textarea::placeholder { color: var(--arc-steel); }
.form-input:hover,
.form-select:hover,
.form-textarea:hover { border-color: var(--arc-ink-30); }
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--arc-vermillion);
  box-shadow: var(--arc-shadow-focus);
}
.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237A7E92' stroke-width='1.5' fill='none' stroke-linecap='square'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
  cursor: pointer;
}
.form-textarea { min-height: 120px; resize: vertical; }

/* ── SERVICES PAGE ───────────────────────────────────────────── */
.services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
@media (max-width: 768px) { .services-grid { grid-template-columns: 1fr; } }

.service-block {
  background: var(--arc-paper);
  border: 1px solid var(--arc-cloud);
  border-radius: 12px;
  padding: 36px;
  transition: box-shadow 200ms var(--ease);
}
.service-block:hover { box-shadow: var(--arc-shadow-md); }

.service-block__tag {
  font-family: var(--arc-font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--arc-vermillion);
  margin-bottom: 12px;
  display: block;
}

.service-block__title {
  font-family: var(--arc-font-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--arc-ink);
  margin-bottom: 12px;
}

.service-block__body {
  font-size: 14px;
  line-height: 1.7;
  color: var(--arc-ink-70);
  margin-bottom: 24px;
}

.service-block__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 24px;
}

.service-block__list li {
  display: flex;
  gap: 10px;
  align-items: baseline;
  font-size: 14px;
  color: var(--arc-ink-70);
}
.service-block__list li::before {
  content: '—';
  color: var(--arc-steel);
  font-family: var(--arc-font-mono);
  font-size: 10px;
  flex-shrink: 0;
}

/* ── SOLUTIONS PAGE ──────────────────────────────────────────── */
.solutions-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
@media (max-width: 768px) { .solutions-grid { grid-template-columns: 1fr; } }

.solution-card {
  background: var(--arc-paper);
  border: 1px solid var(--arc-cloud);
  border-radius: 12px;
  padding: 32px;
}

.solution-card__num {
  font-family: var(--arc-font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--arc-steel);
  margin-bottom: 12px;
}

.solution-card__title {
  font-family: var(--arc-font-display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--arc-ink);
  margin-bottom: 10px;
}

.solution-card__body {
  font-size: 14px;
  line-height: 1.65;
  color: var(--arc-ink-70);
}

/* ── PRODUCT PAGE ────────────────────────────────────────────── */
.product-hero { padding: 96px 0 80px; }

.product-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 960px) { .product-features { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .product-features { grid-template-columns: 1fr; } }

.feature {
  padding: 24px;
  background: var(--arc-card);
  border: 1px solid var(--arc-cloud);
  border-radius: 8px;
}

.feature__title {
  font-family: var(--arc-font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--arc-ink);
  margin-bottom: 8px;
}

.feature__body {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--arc-ink-70);
}

/* ── QUOTE BLOCK ─────────────────────────────────────────────── */
.quote-block {
  background: var(--arc-ink);
  border-radius: 12px;
  padding: 48px;
  position: relative;
  overflow: hidden;
}
.quote-block::before {
  content: '';
  position: absolute;
  top: -30%;
  right: -10%;
  width: 50%;
  height: 150%;
  background: radial-gradient(ellipse at center, rgba(212,56,40,0.2), transparent 65%);
  pointer-events: none;
}
.quote-block p {
  font-family: var(--arc-font-display);
  font-size: clamp(20px, 3vw, 28px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: var(--arc-frost);
  position: relative;
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
}

/* ── FOOTER ──────────────────────────────────────────────────── */
.footer {
  background: var(--arc-ink);
  color: var(--arc-frost);
  padding: 64px 0 32px;
}

.footer__top {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 48px;
  margin-bottom: 48px;
}
@media (max-width: 1024px) { .footer__top { padding-inline: 32px; } }
@media (max-width: 768px)  { .footer__top { padding-inline: 20px; } }

.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
}
@media (max-width: 960px)  { .footer__grid { grid-template-columns: 1fr 1fr; gap: 36px; } }
@media (max-width: 600px)  { .footer__grid { grid-template-columns: 1fr; gap: 28px; } }

.footer__brand-name {
  font-family: var(--arc-font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--arc-frost);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.footer__tagline {
  font-size: 13px;
  line-height: 1.65;
  color: rgba(237,238,242,0.55);
  max-width: 240px;
  margin-top: 8px;
}

.footer__col-title {
  font-family: var(--arc-font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(237,238,242,0.45);
  margin-bottom: 16px;
}

.footer__links { list-style: none; display: flex; flex-direction: column; gap: 0; }

.footer__links a {
  display: block;
  font-size: 13px;
  color: rgba(237,238,242,0.65);
  text-decoration: none;
  padding: 5px 0;
  transition: color 120ms var(--ease);
}
.footer__links a:hover { color: var(--arc-frost); }

.footer__bottom {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 48px;
  padding-top: 24px;
  border-top: 1px solid rgba(216,218,230,0.12);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
@media (max-width: 1024px) { .footer__bottom { padding-inline: 32px; } }
@media (max-width: 768px)  { .footer__bottom { padding-inline: 20px; } }

.footer__copy {
  font-family: var(--arc-font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: rgba(237,238,242,0.35);
}

/* ── REVEAL ANIMATIONS ───────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 480ms var(--ease), transform 480ms var(--ease);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 80ms; }
.reveal-delay-2 { transition-delay: 160ms; }
.reveal-delay-3 { transition-delay: 240ms; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ── SERVICE GRID ────────────────────────────────────────────── */
.service-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (max-width: 768px) { .service-grid { grid-template-columns: 1fr; } }

.service-card {
  background: var(--arc-paper);
  border: 1px solid var(--arc-cloud);
  border-radius: 12px;
  padding: 28px;
  transition: box-shadow 200ms var(--ease);
}
.service-card:hover { box-shadow: var(--arc-shadow-md); }

.service-card__icon {
  width: 32px;
  height: 32px;
  color: var(--arc-ink);
  margin-bottom: 14px;
}

.service-card__label {
  display: block;
  font-family: var(--arc-font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--arc-vermillion);
  margin-bottom: 8px;
}

.card-grid--2 {
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 768px) { .card-grid--2 { grid-template-columns: 1fr; } }

/* ── SOLUTIONS PAGE ──────────────────────────────────────────── */
.solutions-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (max-width: 768px) { .solutions-grid { grid-template-columns: 1fr; } }

.solution-card {
  background: var(--arc-paper);
  border: 1px solid var(--arc-cloud);
  border-radius: 12px;
  padding: 28px;
  display: flex;
  flex-direction: column;
}

.solution-card__sector {
  display: block;
  font-family: var(--arc-font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--arc-vermillion);
  margin-bottom: 10px;
}

.solution-card__title {
  font-family: var(--arc-font-display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--arc-ink);
  margin-bottom: 10px;
}

.solution-card__body {
  font-size: 14px;
  line-height: 1.65;
  color: var(--arc-ink-70);
  margin-bottom: 16px;
  flex: 1;
}

.solution-card__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pill {
  display: inline-flex;
  padding: 4px 10px;
  background: var(--arc-card);
  border: 1px solid var(--arc-cloud);
  border-radius: 999px;
  font-family: var(--arc-font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--arc-steel);
}

/* Before / After */
.before-after {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--arc-cloud);
  border-radius: 12px;
  overflow: hidden;
}
@media (max-width: 768px) { .before-after { grid-template-columns: 1fr; } }

.ba-col { padding: 36px; }
.ba-col--before { background: var(--arc-card); border-right: 1px solid var(--arc-cloud); }
.ba-col--after  { background: var(--arc-paper); }
@media (max-width: 768px) {
  .ba-col--before { border-right: none; border-bottom: 1px solid var(--arc-cloud); }
}

.ba-col__label {
  font-family: var(--arc-font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--arc-steel);
  margin-bottom: 20px;
}
.ba-col--after .ba-col__label { color: var(--arc-vermillion); }

.ba-items { display: flex; flex-direction: column; gap: 0; }

.ba-item {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--arc-ink-70);
  padding: 10px 0;
  border-bottom: 1px solid var(--arc-cloud);
  display: flex;
  gap: 10px;
  align-items: baseline;
}
.ba-item:last-child { border-bottom: none; }

.ba-col--after .ba-item { color: var(--arc-ink); }

/* ── BOTS PAGE ───────────────────────────────────────────────── */
.bots-capabilities {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--arc-cloud);
  border: 1px solid var(--arc-cloud);
  border-radius: 12px;
  overflow: hidden;
}
@media (max-width: 768px) { .bots-capabilities { grid-template-columns: 1fr; } }

.bots-capability {
  background: var(--arc-paper);
  padding: 32px 28px;
}

.bots-capability__num {
  font-family: var(--arc-font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--arc-vermillion);
  margin-bottom: 12px;
}

.bots-capability__title {
  font-family: var(--arc-font-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--arc-ink);
  margin-bottom: 10px;
}

.bots-capability__body {
  font-size: 14px;
  line-height: 1.65;
  color: var(--arc-ink-70);
}

.bots-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 960px) { .bots-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .bots-grid { grid-template-columns: 1fr; } }

.bots-card {
  background: var(--arc-paper);
  border: 1px solid var(--arc-cloud);
  border-radius: 12px;
  padding: 24px;
  transition: box-shadow 200ms var(--ease);
}
.bots-card:hover { box-shadow: var(--arc-shadow-md); }

.bots-card__icon {
  width: 28px;
  height: 28px;
  color: var(--arc-ink);
  margin-bottom: 14px;
}

.bots-card__label {
  display: block;
  font-family: var(--arc-font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--arc-vermillion);
  margin-bottom: 6px;
}

.bots-card__title {
  font-family: var(--arc-font-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--arc-ink);
  margin-bottom: 8px;
}

.bots-card__body {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--arc-ink-70);
}

/* ── SUCCESS STATE ───────────────────────────────────────────── */
.form-success {
  display: none;
  text-align: center;
  padding: 48px 24px;
}
.form-success.visible { display: block; }
.form-success__icon {
  width: 48px;
  height: 48px;
  background: var(--arc-vermillion-quiet);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  color: var(--arc-vermillion);
}

/* Landing page refresh inspired by ARC Landing Page.html */
.nav-logo__asset {
  width: 96px;
  height: auto;
}

.footer-logo__asset {
  width: 118px;
  height: auto;
}

.landing-nav {
  height: 72px;
  background: rgba(237,238,242,0.78);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.landing-nav .nav-inner {
  height: 72px;
}

.btn--accent {
  background: var(--arc-vermillion);
  color: var(--arc-paper);
  border-color: var(--arc-vermillion);
}

.btn--accent:hover {
  background: var(--arc-vermillion-hover);
  border-color: var(--arc-vermillion-hover);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(212,56,40,0.24);
}

.btn--outline {
  background: transparent;
  color: var(--arc-frost);
  border-color: rgba(237,238,242,0.32);
}

.btn--outline:hover {
  border-color: var(--arc-frost);
  background: rgba(237,238,242,0.06);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--arc-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--arc-vermillion);
}

.eyebrow::before {
  content: '';
  width: 28px;
  height: 1px;
  background: currentColor;
}

.eyebrow--muted {
  color: var(--arc-steel);
}

.landing-hero {
  position: relative;
  overflow: hidden;
  padding: 34px 0 96px;
}

.landing-hero__dashboard {
  position: absolute;
  top: 51%;
  right: -1%;
  transform: translateY(-50%);
  width: clamp(460px, 52vw, 820px);
  z-index: 1;
  pointer-events: none;
  opacity: 0.95;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.55) 18%, #000 38%);
  mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.55) 18%, #000 38%);
}

.landing-hero__dashboard img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 14px;
}

.landing-hero__glow {
  position: absolute;
  right: -6%;
  bottom: -20%;
  width: 50%;
  height: 80%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(212,56,40,0.07), transparent 62%);
}

.landing-hero .wrap {
  position: relative;
  z-index: 2;
}

.landing-hero__content {
  position: relative;
  z-index: 2;
  max-width: 900px;
}

.landing-display {
  max-width: 920px;
  margin: 26px 0 0;
  font-family: var(--arc-font-display);
  font-size: clamp(46px, 7.5vw, 104px);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 0.95;
  color: var(--arc-ink);
}

.landing-display em {
  display: block;
  color: var(--arc-vermillion);
  font-style: normal;
}

.landing-display--dynamic {
  margin-top: 0;
  line-height: 0.94;
}

.landing-display__visual {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.landing-display__line {
  display: block;
}

.landing-display__line--mid,
.landing-display__line--tail {
  font-size: 1em;
}

.landing-display__line--mid {
  display: block;
  color: var(--arc-vermillion);
}

.landing-display__prefix {
  display: inline-block;
}

.landing-display__rotator {
  position: relative;
  display: inline-block;
  vertical-align: baseline;
  max-width: 100%;
  color: var(--arc-vermillion);
  white-space: nowrap;
}

.landing-display__rotator-sizer {
  display: block;
  visibility: hidden;
  pointer-events: none;
  user-select: none;
}

.landing-display__phrase {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  color: var(--arc-vermillion);
  opacity: 0;
  transform: translateY(0.18em);
  transition: opacity 560ms cubic-bezier(.4,0,.2,1), transform 560ms cubic-bezier(.4,0,.2,1);
  font-style: normal;
}

.landing-display__phrase.is-active {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .landing-display__phrase {
    transition: none;
    transform: none;
  }
}

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

.landing-hero__sub {
  max-width: 610px;
  margin-top: 24px;
  font-size: clamp(18px, 2vw, 21px);
  line-height: 1.55;
  color: var(--arc-ink-70);
}

.landing-hero__ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 30px;
}

/* ── ARC PROOF SECTION (white metrics / success proof) ────────── */
.arc-proof-section {
  position: relative;
  z-index: 2;
  background: var(--arc-paper);
  padding: 82px 0 76px;
  margin: 0;
}

.arc-proof-container {
  max-width: 1480px;
  margin-inline: auto;
  padding-inline: 72px;
}

.arc-proof-heading {
  max-width: 820px;
  margin: 0 auto 72px;
  text-align: center;
  color: var(--arc-ink);
  font-family: var(--arc-font-display);
  font-size: clamp(36px, 3.2vw, 50px);
  line-height: 1.18;
  font-weight: 400;
  letter-spacing: -0.025em;
}

.arc-proof-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: stretch;
  gap: 0;
  width: 100%;
}

.arc-proof-item {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 0 34px;
  min-height: 245px;
  border-left: 1px solid rgba(27, 30, 42, 0.22);
}
.arc-proof-item:first-child {
  border-left: none;
}

.arc-proof-metric {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  color: var(--arc-ink);
  font-family: var(--arc-font-sans);
  font-size: clamp(34px, 2.7vw, 46px);
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.045em;
  white-space: nowrap;
}

.arc-proof-arrow {
  display: inline-flex;
  flex: 0 0 auto;
  width: 15px;
  height: 26px;
  color: var(--arc-vermillion);
  opacity: 0;
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}
.arc-proof-arrow--up {
  transform: translateY(0.5rem);
}
.arc-proof-arrow--down {
  transform: translateY(-0.5rem);
}
.arc-proof-metric.is-arrow-visible .arc-proof-arrow {
  opacity: 1;
  transform: translateY(0);
}
.arc-proof-item:nth-child(1) .arc-proof-metric.is-arrow-visible .arc-proof-arrow { transition-delay: 0s; }
.arc-proof-item:nth-child(2) .arc-proof-metric.is-arrow-visible .arc-proof-arrow { transition-delay: 0.2s; }
.arc-proof-item:nth-child(3) .arc-proof-metric.is-arrow-visible .arc-proof-arrow { transition-delay: 0.4s; }
.arc-proof-item:nth-child(4) .arc-proof-metric.is-arrow-visible .arc-proof-arrow { transition-delay: 0.6s; }
.arc-proof-item:nth-child(5) .arc-proof-metric.is-arrow-visible .arc-proof-arrow { transition-delay: 0.8s; }
.arc-proof-metric:not(.is-arrow-visible) .arc-proof-arrow {
  transition-duration: 0.1s;
  transition-delay: 0s;
}
.arc-proof-arrow svg {
  display: block;
  width: 100%;
  height: 100%;
}

.arc-proof-label {
  margin: 0 0 24px;
  max-width: 190px;
  color: var(--arc-ink-70);
  font-family: var(--arc-font-sans);
  font-size: 15px;
  line-height: 1.4;
  font-weight: 500;
}

.arc-proof-description {
  margin: 0 0 28px;
  max-width: 205px;
  color: var(--arc-steel);
  font-family: var(--arc-font-sans);
  font-size: 15px;
  line-height: 1.45;
  font-weight: 400;
}

.arc-proof-link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: max-content;
  color: var(--arc-vermillion);
  font-family: var(--arc-font-sans);
  font-size: 14px;
  line-height: 1;
  font-weight: 700;
  text-decoration: none;
  transition: gap 180ms var(--ease), color 180ms var(--ease);
}
.arc-proof-link:hover {
  gap: 9px;
  color: var(--arc-vermillion-hover);
}

.arc-proof-more {
  display: flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  margin: 58px auto 0;
  color: var(--arc-vermillion);
  font-family: var(--arc-font-sans);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  transition: transform 180ms var(--ease), color 180ms var(--ease);
}
.arc-proof-more:hover {
  transform: translateX(3px);
  color: var(--arc-vermillion-hover);
}

@media (max-width: 1200px) {
  .arc-proof-container {
    padding-inline: 44px;
  }
  .arc-proof-item {
    padding: 0 24px;
  }
  .arc-proof-metric {
    font-size: clamp(30px, 2.4vw, 38px);
  }
}

@media (max-width: 980px) {
  .arc-proof-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 44px;
  }
  .arc-proof-item:nth-child(odd) {
    border-left: none;
  }
  .arc-proof-item:nth-child(even) {
    border-left: 1px solid rgba(27, 30, 42, 0.22);
  }
}

@media (max-width: 700px) {
  .arc-proof-section {
    padding: 64px 0;
  }
  .arc-proof-container {
    padding-inline: 24px;
  }
  .arc-proof-heading {
    text-align: left;
    margin: 0 0 44px;
    font-size: clamp(32px, 10vw, 42px);
    line-height: 1.12;
  }
  .arc-proof-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .arc-proof-item,
  .arc-proof-item:nth-child(even),
  .arc-proof-item:nth-child(odd) {
    border-left: none;
    border-top: 1px solid rgba(27, 30, 42, 0.16);
    padding: 28px 0;
    min-height: auto;
  }
  .arc-proof-item:first-child {
    border-top: none;
  }
  .arc-proof-description,
  .arc-proof-label {
    max-width: 100%;
  }
  .arc-proof-more {
    margin: 36px 0 0;
    justify-content: flex-start;
  }
}

.eyebrow--on-dark {
  color: #ff6a5a;
}

.eyebrow--on-dark::before {
  background: #ff6a5a;
}

.landing-section-head {
  max-width: 780px;
}

.landing-section-head h2 {
  margin-top: 16px;
  font-family: var(--arc-font-display);
  font-size: clamp(32px, 4.4vw, 54px);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: 0;
  color: var(--arc-ink);
}

.landing-section-head p {
  max-width: 650px;
  margin-top: 20px;
  font-size: 18px;
  line-height: 1.62;
  color: var(--arc-ink-70);
}

.landing-solve {
  position: relative;
  overflow: hidden;
  background: var(--arc-ink);
  color: var(--arc-frost);
}

.landing-solve .landing-section-head h2,
.landing-solve .landing-flow h3 {
  color: var(--arc-frost);
}

.landing-solve .landing-section-head p {
  color: rgba(237,238,242,0.72);
}

.landing-solve__streak {
  position: absolute;
  left: -10%;
  bottom: -30%;
  width: 46%;
  height: 150%;
  opacity: 0.06;
  pointer-events: none;
  z-index: 0;
}

.landing-solve .wrap {
  position: relative;
  z-index: 2;
}

.landing-solve__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  margin-top: 64px;
  position: relative;
  z-index: 1;
}

.landing-problems {
  display: flex;
  flex-direction: column;
  list-style: none;
}

.landing-problems li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 18px 0;
  border-bottom: 1px solid rgba(237,238,242,0.1);
  color: rgba(237,238,242,0.78);
  font-size: 16px;
  line-height: 1.5;
}

.landing-problems span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  flex: 0 0 22px;
  background: rgba(212,56,40,0.16);
  color: #ff6a5a;
  font-family: var(--arc-font-mono);
  font-size: 12px;
}

.landing-flow {
  padding: 40px;
  border: 1px solid rgba(237,238,242,0.12);
  border-radius: 16px;
  background: var(--arc-ink-90);
}

.landing-flow h3 {
  margin: 12px 0 14px;
  font-family: var(--arc-font-display);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.15;
}

.landing-flow p {
  margin-bottom: 26px;
  color: rgba(237,238,242,0.74);
  font-size: 15.5px;
  line-height: 1.6;
}

.landing-flow__nodes {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.landing-flow__nodes div {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid rgba(237,238,242,0.08);
  border-radius: 10px;
  background: rgba(237,238,242,0.05);
  font-family: var(--arc-font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: rgba(237,238,242,0.86);
}

.landing-flow__nodes div span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--arc-vermillion);
  flex: 0 0 9px;
}

.landing-flow__nodes div.active {
  background: rgba(212,56,40,0.08);
  border-color: rgba(212,56,40,0.32);
}

.landing-cap-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 60px;
}

.landing-cap {
  position: relative;
  overflow: hidden;
  min-height: 330px;
  padding: 38px 36px 34px;
  border: 1px solid var(--arc-cloud);
  border-radius: 16px;
  background: var(--arc-paper);
  transition: transform 200ms var(--ease), box-shadow 200ms var(--ease), border-color 200ms var(--ease);
}

.landing-cap:hover {
  transform: translateY(-4px);
  border-color: var(--arc-ink-30);
  box-shadow: 0 18px 40px rgba(27,30,42,0.09);
}

.landing-cap__tag {
  position: absolute;
  top: 32px;
  right: 32px;
  max-width: calc(100% - 64px);
  padding: 4px 8px;
  border: 1px solid var(--arc-cloud);
  border-radius: 4px;
  font-family: var(--arc-font-mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--arc-steel);
}

.landing-cap__num {
  font-family: var(--arc-font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--arc-steel);
}

.landing-cap__icon {
  width: 40px;
  height: 40px;
  margin: 28px 0 22px;
  color: var(--arc-ink);
  transition: color 200ms var(--ease);
}

.landing-cap:hover .landing-cap__icon {
  color: var(--arc-vermillion);
}

.landing-cap h3 {
  max-width: 520px;
  margin-bottom: 12px;
  font-family: var(--arc-font-display);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0;
}

.landing-cap p {
  max-width: 560px;
  margin-bottom: 24px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--arc-ink-70);
}

.landing-cap a {
  display: inline-flex;
  font-family: var(--arc-font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--arc-ink);
  transition: color 160ms var(--ease);
}

.landing-cap:hover a {
  color: var(--arc-vermillion);
}

.landing-process {
  padding-top: 64px;
}

.landing-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 64px;
}

.landing-steps article {
  padding-right: 28px;
  border-right: 1px solid var(--arc-cloud);
}

.landing-steps article + article {
  padding-left: 28px;
}

.landing-steps article:last-child {
  border-right: none;
}

.landing-steps span {
  display: inline-flex;
  margin-bottom: 24px;
  font-family: var(--arc-font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--arc-steel);
}

.landing-steps h3 {
  margin-bottom: 12px;
  font-family: var(--arc-font-display);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0;
}

.landing-steps p {
  font-size: 14.5px;
  line-height: 1.58;
  color: var(--arc-ink-70);
}

.landing-proof {
  background: var(--arc-card);
  border-top: 1px solid var(--arc-cloud);
  border-bottom: 1px solid var(--arc-cloud);
}

.landing-proof__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
  margin-top: 60px;
}

.landing-proof__grid strong {
  display: block;
  font-family: var(--arc-font-display);
  font-size: clamp(40px, 4.6vw, 58px);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1;
  color: var(--arc-ink);
}

.landing-proof__grid span {
  display: block;
  margin-top: 14px;
}

.landing-proof__grid p {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--arc-ink-70);
}

.landing-quote {
  padding: 104px 0;
  background: var(--arc-frost);
}

.landing-quote blockquote {
  max-width: 920px;
  margin: 30px 0 0;
  font-family: var(--arc-font-display);
  font-size: clamp(28px, 3.5vw, 42px);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: 0;
  color: var(--arc-ink);
}

.landing-cta {
  position: relative;
  overflow: hidden;
  background: var(--arc-ink);
  color: var(--arc-frost);
}

.landing-cta__streak {
  position: absolute;
  right: -4%;
  top: -30%;
  width: 34%;
  height: 170%;
  opacity: 0.9;
  pointer-events: none;
}

.landing-cta__inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding-block: 80px;
}

.landing-cta h2 {
  max-width: 650px;
  margin-top: 18px;
  font-family: var(--arc-font-display);
  font-size: clamp(31px, 4vw, 50px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: 0;
  color: var(--arc-frost);
}

.landing-cta p {
  max-width: 620px;
  margin-top: 16px;
  color: rgba(237,238,242,0.7);
}

.landing-cta__actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  flex: 0 0 auto;
}

@media (max-width: 1024px) {
  .landing-hero {
    min-height: auto;
  }
  .landing-hero__dashboard {
    width: clamp(360px, 56vw, 560px);
    right: -10%;
    opacity: 0.55;
  }
  .landing-solve__grid,
  .landing-cap-grid {
    grid-template-columns: 1fr;
  }
  .landing-steps,
  .landing-proof__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .landing-steps article:nth-child(2) {
    border-right: none;
  }
  .landing-steps article:nth-child(3) {
    padding-left: 0;
  }
  .landing-cta__inner {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 768px) {
  .nav-logo__asset {
    width: 82px;
  }
  .landing-hero {
    padding: 28px 0 58px;
  }
  .landing-hero__dashboard {
    display: none;
  }
  .landing-display {
    font-size: clamp(44px, 14vw, 64px);
    max-width: 100%;
  }
  .landing-display--dynamic {
    font-size: clamp(26px, 8vw, 50px);
    line-height: 0.98;
    overflow-wrap: normal;
    white-space: normal;
  }
  .landing-display__line--mid,
  .landing-display__line--tail {
    font-size: 1em;
    max-width: 100%;
    white-space: nowrap;
  }
  .landing-display__rotator,
  .landing-display__rotator-sizer,
  .landing-display__phrase {
    white-space: nowrap;
  }
  .landing-hero__content {
    max-width: 100%;
    overflow: visible;
  }
  .landing-hero__ctas .btn,
  .landing-cta__actions .btn {
    width: 100%;
  }
  .landing-flow,
  .landing-cap {
    padding: 28px 24px;
  }
  .landing-cap__tag {
    position: static;
    display: inline-flex;
    margin-bottom: 22px;
    max-width: 100%;
  }
  .landing-steps,
  .landing-proof__grid {
    grid-template-columns: 1fr;
  }
  .landing-steps article,
  .landing-steps article + article,
  .landing-steps article:nth-child(3) {
    padding: 0 0 28px;
    border-right: none;
    border-bottom: 1px solid var(--arc-cloud);
  }
  .landing-steps article:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }
  .landing-quote {
    padding: 72px 0;
  }
  .landing-cta__inner {
    padding-block: 58px;
  }
}

/* ══════════════════════════════════════════════════════════════
   ARC EDITORIAL SYSTEM — v2.0 additions
   Frost-and-ink · Vermillion intent · Interior page components
   ══════════════════════════════════════════════════════════════ */

/* ── NAV: sticky scroll state ────────────────────────────────── */
.nav-bar.scrolled,
.nav-bar.menu-open {
  background: rgba(237,238,242,0.98);
  border-bottom-color: var(--arc-cloud);
}

/* ── NAV MEGA MENU (Servicios + Carreras) ───────────────────── */
.nav-mega { position: relative; }

.nav-mega__trigger {
  display: inline-flex;
  align-items: center;
  font-family: var(--arc-font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--arc-ink-70);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 0;
  position: relative;
  transition: color 120ms var(--ease);
}
.nav-mega__trigger::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: var(--arc-vermillion);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 260ms var(--ease);
}
.nav-mega__trigger:hover,
.nav-mega.is-open .nav-mega__trigger,
.nav-mega.is-active .nav-mega__trigger {
  color: var(--arc-ink);
}
.nav-mega__trigger:hover::after,
.nav-mega.is-open .nav-mega__trigger::after {
  transform: scaleX(1);
}
.nav-mega__trigger:focus-visible {
  outline: none;
}
.nav-mega__trigger:focus-visible::after {
  transform: scaleX(1);
}

/* Chevron on mega triggers */
.nav-mega__trigger { gap: 6px; }
.nav-mega__chevron {
  display: block;
  flex-shrink: 0;
  margin-top: 1px;
  transition: transform 200ms var(--ease);
}
.nav-mega.is-open .nav-mega__chevron {
  transform: rotate(180deg);
}

/* Mega panel — floating card anchored under its trigger.
   Absolutely positioned inside the sticky header: never takes
   layout space, never pushes the hero. JS sets `left` so the
   card centers under the trigger, clamped to the viewport. */
.nav-mega-panel {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  width: min(980px, calc(100vw - 64px));
  background: var(--arc-paper);
  border: 1px solid var(--arc-cloud);
  border-radius: 18px;
  box-shadow:
    0 24px 60px rgba(27, 30, 42, 0.12),
    0 6px 18px rgba(27, 30, 42, 0.06);
  padding: 28px 32px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 180ms var(--ease), transform 180ms var(--ease), visibility 0s linear 180ms;
  z-index: 1200;
}
.nav-mega-panel.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition: opacity 180ms var(--ease), transform 180ms var(--ease);
}
/* Invisible bridge over the 14px gap so hover survives the crossing */
.nav-mega-panel::before {
  content: "";
  position: absolute;
  top: -16px;
  left: 0;
  right: 0;
  height: 16px;
}

.mega-menu--careers {
  width: min(760px, calc(100vw - 64px));
  padding: 18px;
}

.mega-menu__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}
.mega-menu--careers .mega-menu__grid { gap: 14px; }

.mega-menu__heading {
  font-family: var(--arc-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--arc-steel);
  margin: 0 0 10px 12px;
}

.mega-menu__item {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 12px;
  align-items: flex-start;
  padding: 12px;
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  transition: background 160ms var(--ease), transform 160ms var(--ease);
}
.mega-menu__item:hover,
.mega-menu__item:focus-visible {
  background: var(--arc-card);
  transform: translateY(-1px);
}

.mega-menu__icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--arc-frost);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.mega-menu__icon img {
  display: block;
  width: 22px;
  height: 22px;
  object-fit: contain;
}
:where(.mega-menu--careers) .mega-menu__icon--line {
  color: var(--arc-ink);
  transition: color 180ms var(--ease);
}
:where(.mega-menu--careers) .mega-menu__item:hover .mega-menu__icon--line,
:where(.mega-menu--careers) .mega-menu__item:focus-visible .mega-menu__icon--line {
  color: var(--arc-vermillion);
}
.mega-menu__icon--line svg {
  display: block;
  width: 20px;
  height: 20px;
}

.mega-menu__title {
  display: block;
  font-family: var(--arc-font-sans);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--arc-ink);
  margin-bottom: 3px;
}
.mega-menu__desc {
  display: block;
  font-family: var(--arc-font-sans);
  font-size: 13px;
  line-height: 1.45;
  color: var(--arc-ink-70);
}

.mega-menu__footer {
  border-top: 1px solid var(--arc-cloud);
  margin-top: 20px;
  padding-top: 16px;
}
.mega-menu__all {
  font-family: var(--arc-font-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--arc-vermillion);
  text-decoration: none;
}
.mega-menu__all:hover { color: var(--arc-vermillion-hover); }

@media (max-width: 1024px) {
  .nav-mega-panel { padding: 22px 24px; }
  .mega-menu__grid { gap: 18px; }
}

/* ── ARC SERVICES MEGA — Ignis-style featured panel (JS-built) ──
   Faithful port of the Agencia Ignis "Servicios" mega menu:
   1090px white panel (1fr 1fr 1.2fr 1.2fr), two featured cards with
   animated device mockups + two right-side four-service list columns.
   (The 1090px width appends a fourth 1.2fr track + one 12px gap to the
   original 800px geometry so the first three tracks keep their widths.)
   Opens/closes with a fast 160ms fade + 6px descent; the mockup scroll
   animations are keyed on .is-open so they replay on every open. */
.nav-mega-panel.arc-services-mega {
  /* Scoped theme hooks — retune the menu here without touching the rules
     below. Skeleton grays, traffic lights and the success tint have no
     ARC token equivalent, so they are defined once as component tokens. */
  --smm-bg: var(--arc-paper);
  --smm-bg-card: color-mix(in srgb, var(--arc-card) 60%, transparent);
  --smm-bg-card-hover: var(--arc-card);
  --smm-fg: var(--arc-ink);
  --smm-muted: var(--arc-ink-70);
  --smm-border: var(--arc-cloud);
  --smm-accent: var(--arc-vermillion);
  --smm-accent-soft: color-mix(in srgb, var(--arc-vermillion) 30%, var(--arc-cloud));
  --smm-hover-bg: var(--arc-frost);
  --smm-skeleton-strong: #d4d4d4;
  --smm-skeleton: #e5e5e5;
  --smm-skeleton-faint: #f5f5f5;
  --smm-dot-red: #ff6568;
  --smm-dot-amber: #fcbb00;
  --smm-dot-green: #05df72;
  --smm-success: rgba(208, 250, 229, 0.8);

  width: min(1090px, 92vw);
  top: calc(100% - 5px);
  padding: 16px;
  border: 1px solid var(--smm-border);
  border-radius: 16px;
  background: var(--smm-bg);
  overflow: hidden;
  box-shadow:
    0 30px 60px -30px rgba(0, 0, 0, 0.25),
    0 0 0 1px rgba(0, 0, 0, 0.02);
  transform: translateX(-50%) translateY(-6px);
  transition: opacity 160ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 160ms cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0s linear 160ms;
}
.nav-mega-panel.arc-services-mega.is-open {
  transform: translateX(-50%) translateY(0);
  transition: opacity 160ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 160ms cubic-bezier(0.16, 1, 0.3, 1);
}

.arc-services-mega__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1.2fr);
  gap: 12px;
  align-items: stretch;
}

/* Featured cards (two left columns) */
.arc-services-mega__card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--smm-border);
  border-radius: 12px;
  background: var(--smm-bg-card);
  text-decoration: none;
  color: inherit;
  transition: background-color 180ms var(--ease), border-color 180ms var(--ease);
}
.arc-services-mega__card:hover,
.arc-services-mega__card:focus-visible {
  background: var(--smm-bg-card-hover);
  border-color: var(--smm-accent-soft);
}
.arc-services-mega__card:focus-visible,
.arc-services-mega__item:focus-visible {
  outline: 2px solid var(--smm-accent);
  outline-offset: 2px;
}

.arc-services-mega__icon {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  border: 1px solid var(--smm-border);
  background: var(--smm-bg);
  box-shadow: var(--arc-shadow-xs);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--smm-fg);
  flex: 0 0 auto;
  transition: border-color 180ms var(--ease), color 180ms var(--ease);
}
.arc-services-mega__card:hover .arc-services-mega__icon,
.arc-services-mega__card:focus-visible .arc-services-mega__icon,
.arc-services-mega__item:hover .arc-services-mega__icon,
.arc-services-mega__item:focus-visible .arc-services-mega__icon {
  border-color: var(--smm-accent-soft);
  color: var(--smm-accent);
}
.arc-services-mega__icon svg { width: 24px; height: 24px; display: block; }
.arc-services-mega__icon--sm { width: 36px; height: 36px; border-radius: 6px; }
.arc-services-mega__icon--sm svg { width: 18px; height: 18px; }

.arc-services-mega__card-copy {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
}
.arc-services-mega__card-title {
  display: block;
  font-family: var(--arc-font-sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--smm-fg);
}
.arc-services-mega__card-desc {
  display: block;
  margin-top: 4px;
  font-family: var(--arc-font-sans);
  font-size: 12px;
  line-height: 1.4;
  color: var(--smm-muted);
}
.arc-services-mega__mock { display: block; margin-top: 4px; }

/* Services lists (two right columns, each divided by a left border) */
.arc-services-mega__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  border-left: 1px solid var(--smm-border);
  padding-left: 12px;
}

.arc-services-mega__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  transition: background-color 160ms var(--ease);
}
.arc-services-mega__item:hover,
.arc-services-mega__item:focus-visible {
  background: var(--smm-hover-bg);
}

.arc-services-mega__item-copy { display: block; min-width: 0; }
.arc-services-mega__item-title {
  display: block;
  font-family: var(--arc-font-sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--smm-fg);
}
.arc-services-mega__item-desc {
  display: block;
  margin-top: 2px;
  font-family: var(--arc-font-sans);
  font-size: 12px;
  line-height: 1.4;
  color: var(--smm-muted);
}

/* Narrow desktop (hamburger takes over at 768px): four tracks would crush
   the featured cards, so re-wrap to two rows — cards on top, the two list
   columns below with top dividers. Same components, no service removed. */
@media (max-width: 1024px) {
  .nav-mega-panel.arc-services-mega { width: min(800px, 92vw); }
  .arc-services-mega__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .arc-services-mega__list {
    border-left: 0;
    border-top: 1px solid var(--smm-border);
    padding-left: 0;
    padding-top: 12px;
  }
}

/* ── Browser mockup — pure HTML/CSS skeleton (~155px incl. chrome) ── */
.arc-mega-browser {
  display: block;
  overflow: hidden;
  border: 1px solid var(--smm-border);
  border-radius: 8px;
  background: var(--smm-bg);
  box-shadow: var(--arc-shadow-xs);
}
.arc-mega-browser__chrome {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--smm-border);
}
.arc-mega-browser__dot {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.arc-mega-browser__dot--red { background: var(--smm-dot-red); }
.arc-mega-browser__dot--amber { background: var(--smm-dot-amber); }
.arc-mega-browser__dot--green { background: var(--smm-dot-green); }
.arc-mega-browser__address {
  display: block;
  height: 8px;
  flex: 1 1 auto;
  margin-left: 4px;
  border-radius: 4px;
  background: var(--smm-hover-bg);
}
.arc-mega-browser__screen {
  display: block;
  position: relative;
  height: 132px;
  overflow: hidden;
}
.arc-mega-browser__page {
  display: block;
  width: 100%;
  padding: 10px;
  will-change: transform;
}
.arc-mega-browser__page > span { display: block; border-radius: 4px; }
.arc-mega-browser__title {
  height: 12px;
  width: 75%;
  margin-bottom: 8px;
  background: var(--smm-skeleton-strong);
}
.arc-mega-browser__line { height: 8px; margin-bottom: 4px; background: var(--smm-skeleton); }
.arc-mega-browser__thin { height: 6px; margin-bottom: 4px; background: var(--smm-skeleton); }
.arc-mega-browser__label { height: 8px; margin-bottom: 4px; background: var(--smm-skeleton-strong); }
.arc-mega-browser__w50 { width: 50%; }
.arc-mega-browser__w66 { width: 66.666%; }
.arc-mega-browser__w75 { width: 75%; }
.arc-mega-browser__w83 { width: 83.333%; }
.arc-mega-browser__end { margin-bottom: 12px; }
.arc-mega-browser__btns {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
}
.arc-mega-browser__btns span { display: block; height: 16px; border-radius: 4px; }
.arc-mega-browser__btns span:first-child { width: 48px; background: var(--smm-fg); }
.arc-mega-browser__btns span:last-child { width: 40px; border: 1px solid var(--smm-border); }
.arc-mega-browser__cols { display: grid; gap: 4px; margin-bottom: 10px; }
.arc-mega-browser__cols--3 { grid-template-columns: repeat(3, 1fr); }
.arc-mega-browser__cols--2 { grid-template-columns: repeat(2, 1fr); margin-bottom: 12px; }
.arc-mega-browser__cols span {
  display: block;
  border-radius: 4px;
  background: var(--smm-skeleton-faint);
}
.arc-mega-browser__cols--3 span { height: 36px; }
.arc-mega-browser__cols--2 span { height: 40px; }
.arc-mega-browser__hero {
  height: 48px;
  border-radius: 6px;
  margin-bottom: 12px;
  background: linear-gradient(
    to bottom right,
    color-mix(in srgb, var(--smm-accent) 20%, transparent),
    color-mix(in srgb, var(--smm-accent) 5%, transparent)
  );
}
.arc-mega-browser__track {
  position: absolute;
  top: 4px;
  bottom: 4px;
  right: 4px;
  width: 2px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--smm-skeleton-faint);
  pointer-events: none;
}
.arc-mega-browser__thumb {
  display: block;
  width: 2px;
  height: 24px;
  border-radius: 999px;
  background: var(--smm-skeleton-strong);
  will-change: transform;
}

/* ── Phone mockup — abstract chat skeleton (72px wide, 144px screen) ── */
.arc-mega-phone {
  display: block;
  width: 72px;
  margin: 0 auto;
  border: 3px solid var(--smm-fg);
  border-radius: 14px;
  background: var(--smm-fg);
  box-shadow: var(--arc-shadow-md);
}
.arc-mega-phone__screen {
  display: block;
  position: relative;
  height: 144px;
  overflow: hidden;
  border-radius: 11px;
  background: var(--smm-bg);
}
.arc-mega-phone__notch {
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 6px;
  border-radius: 999px;
  background: var(--smm-fg);
  z-index: 2;
}
.arc-mega-phone__content {
  display: block;
  padding: 16px 6px 12px;
  will-change: transform;
}
.arc-mega-phone__content > span { display: block; border-radius: 4px; }
/* Child selector beats the `content > span` display/radius reset so the
   vermillion marker and the contact line sit on one row (chat header). */
.arc-mega-phone__content > .arc-mega-phone__head {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 8px;
  border-radius: 0;
}
.arc-mega-phone__logo {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 3px;
  background: var(--smm-accent);
  flex: 0 0 auto;
}
.arc-mega-phone__headline {
  display: block;
  height: 6px;
  flex: 1 1 auto;
  border-radius: 4px;
  background: var(--smm-skeleton);
}
/* Abstract conversation — no text: left/right alignment, varied widths
   and the faint-gray vs pale-green fills carry the chat read. A 2px gap
   ties a tiny continuation bar to its bubble; 10px marks a speaker change. */
.arc-mega-phone__message { margin-bottom: 10px; }
.arc-mega-phone__message--incoming { margin-right: auto; background: var(--smm-skeleton-faint); }
.arc-mega-phone__message--outgoing { margin-left: auto; background: var(--smm-success); }
.arc-mega-phone__message--gray-1 { width: 38px; height: 14px; margin-bottom: 2px; }
.arc-mega-phone__message--gray-2 { width: 46px; height: 20px; margin-bottom: 2px; }
.arc-mega-phone__message--gray-3 { width: 32px; height: 12px; margin-bottom: 0; }
.arc-mega-phone__message--green-1 { width: 36px; height: 16px; }
.arc-mega-phone__message--green-2 { width: 44px; height: 14px; }
.arc-mega-phone__message--green-3 { width: 38px; height: 14px; margin-top: 12px; margin-bottom: 0; }
.arc-mega-phone__cont { width: 24px; height: 6px; margin-bottom: 10px; background: var(--smm-skeleton); }
.arc-mega-phone__cont--wide { width: 30px; }
.arc-mega-phone__bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--smm-bg);
  z-index: 2;
}
.arc-mega-phone__home {
  display: block;
  width: 28px;
  height: 2px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--smm-fg) 40%, transparent);
}

/* ── Device scroll animations — run once per open, reset on close ──
   Keyed on .is-open: closing removes the animation (content snaps back
   to frame 0), reopening re-applies it so the sequence replays. */
@keyframes arc-mega-browser-scroll {
  0%   { transform: translateY(0); }
  55%  { transform: translateY(-140px); }
  70%  { transform: translateY(-140px); }
  100% { transform: translateY(0); }
}
@keyframes arc-mega-browser-thumb {
  0%   { transform: translateY(0); }
  55%  { transform: translateY(60px); }
  70%  { transform: translateY(60px); }
  100% { transform: translateY(0); }
}
@keyframes arc-mega-phone-scroll {
  0%   { transform: translateY(0); }
  8%   { transform: translateY(0); }
  45%  { transform: translateY(-56px); }
  65%  { transform: translateY(-68px); }
  76%  { transform: translateY(-68px); }
  100% { transform: translateY(0); }
}
.nav-mega-panel.arc-services-mega.is-open .arc-mega-browser__page {
  animation: arc-mega-browser-scroll 4.2s ease-in-out 0.15s 1 both;
}
.nav-mega-panel.arc-services-mega.is-open .arc-mega-browser__thumb {
  animation: arc-mega-browser-thumb 4.2s ease-in-out 0.15s 1 both;
}
.nav-mega-panel.arc-services-mega.is-open .arc-mega-phone__content {
  animation: arc-mega-phone-scroll 5.5s ease-in-out 0.2s 1 both;
}

@media (prefers-reduced-motion: reduce) {
  .nav-mega-panel.arc-services-mega,
  .nav-mega-panel.arc-services-mega.is-open {
    transform: translateX(-50%) translateY(0);
    transition: opacity 120ms linear, visibility 0s linear 120ms;
  }
  .nav-mega-panel.arc-services-mega.is-open {
    transition: opacity 120ms linear;
  }
  .nav-mega-panel.arc-services-mega.is-open .arc-mega-browser__page,
  .nav-mega-panel.arc-services-mega.is-open .arc-mega-browser__thumb,
  .nav-mega-panel.arc-services-mega.is-open .arc-mega-phone__content {
    animation: none;
  }
}

/* Hide mega panel on mobile — drawer accordions take over */
@media (max-width: 768px) {
  .nav-mega-panel { display: none !important; }
}

/* ── NAV DROPDOWN ────────────────────────────────────────────── */
.nav-dropdown { position: relative; }

.nav-dropdown__trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--arc-font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--arc-ink-70);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 0;
  transition: color 120ms var(--ease);
  position: relative;
}
.nav-dropdown__trigger::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 2px;
  background: var(--arc-vermillion);
  transition: width 250ms var(--ease);
}
.nav-dropdown__trigger:hover,
.nav-dropdown.open .nav-dropdown__trigger { color: var(--arc-ink); }
.nav-dropdown__trigger:hover::after,
.nav-dropdown.open .nav-dropdown__trigger::after { width: 100%; }

.nav-dropdown__chevron {
  width: 10px;
  height: 10px;
  transition: transform 200ms var(--ease);
}
.nav-dropdown.open .nav-dropdown__chevron { transform: rotate(180deg); }

.nav-dropdown__menu {
  position: absolute;
  top: calc(100% + 14px);
  left: -16px;
  min-width: 210px;
  background: var(--arc-paper);
  border: 1px solid var(--arc-cloud);
  border-radius: 10px;
  padding: 8px;
  list-style: none;
  box-shadow: 0 8px 28px rgba(27,30,42,0.11);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 160ms var(--ease), transform 160ms var(--ease), visibility 0s 160ms;
  z-index: 300;
}
.nav-dropdown.open .nav-dropdown__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 160ms var(--ease), transform 160ms var(--ease);
}
.nav-dropdown__menu a {
  display: block;
  padding: 9px 12px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--arc-ink-70);
  border-radius: 6px;
  transition: background 120ms var(--ease), color 120ms var(--ease);
  text-decoration: none;
}
.nav-dropdown__menu a:hover { background: var(--arc-card); color: var(--arc-ink); }

/* Mobile drawer sub-menu */
.nav-drawer__expand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 0;
  font-family: var(--arc-font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--arc-ink);
  background: none;
  border: none;
  border-bottom: 1px solid var(--arc-cloud);
  cursor: pointer;
  text-align: left;
}
.nav-drawer__expand svg { flex-shrink: 0; transition: transform 200ms var(--ease); }
.nav-drawer__expand[aria-expanded="true"] svg { transform: rotate(180deg); }

.nav-drawer__sub {
  list-style: none;
  overflow: hidden;
  max-height: 0;
  transition: max-height 280ms var(--ease);
  padding-left: 0;
}
.nav-drawer__sub.open { max-height: 400px; }
.nav-drawer__sub a {
  display: block;
  padding: 11px 16px;
  font-family: var(--arc-font-display);
  font-size: 15px;
  font-weight: 500;
  color: var(--arc-ink-70);
  border-bottom: 1px solid var(--arc-cloud);
  transition: color 120ms var(--ease);
  text-decoration: none;
}
.nav-drawer__sub a:hover { color: var(--arc-vermillion); }

/* ── SHEAD (section header shorthand) ───────────────────────── */
.shead { max-width: 760px; }
.shead h2 {
  font-family: var(--arc-font-display);
  font-weight: 600;
  font-size: clamp(32px, 4.4vw, 52px);
  line-height: 1.06;
  letter-spacing: -0.025em;
  margin: 16px 0 0;
}
.shead p {
  font-size: 18px;
  color: var(--arc-ink-70);
  margin: 20px 0 0;
  max-width: 620px;
  line-height: 1.6;
}

.section--card {
  background: var(--arc-card);
  border-top: 1px solid var(--arc-cloud);
  border-bottom: 1px solid var(--arc-cloud);
}
.section--tight { padding-block: 72px; }

/* ── PHERO (editorial interior page hero with streak) ────────── */
.phero {
  position: relative;
  overflow: hidden;
  padding: 72px 0 60px;
}
@media (max-width: 768px) { .phero { padding: 52px 0 44px; } }

.phero__streak {
  position: absolute;
  right: -6%;
  top: -12%;
  width: min(46vw, 640px);
  height: 135%;
  opacity: 0.85;
  pointer-events: none;
  z-index: 0;
}
@media (max-width: 768px) { .phero__streak { opacity: 0.4; right: -16%; } }

.phero__inner {
  position: relative;
  z-index: 2;
  max-width: 860px;
}

.phero h1 {
  font-family: var(--arc-font-display);
  font-weight: 600;
  font-size: clamp(40px, 6vw, 76px);
  line-height: 0.98;
  letter-spacing: -0.035em;
  margin: 24px 0 0;
}
.phero h1 em { font-style: normal; color: var(--arc-vermillion); }

.phero__sub {
  font-size: clamp(17px, 1.9vw, 20px);
  line-height: 1.55;
  color: var(--arc-ink-70);
  max-width: 600px;
  margin: 28px 0 0;
}
.phero__ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 38px;
}

/* ── PHERO · split (text left / image right) ─────────────────── */
.phero--split { padding-bottom: 72px; }

.phero--split .phero__inner { max-width: none; }
.phero--split h1 { margin-top: 0; }

.phero__split {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 56px;
  align-items: center;
}

.phero__lead {
  font-family: var(--arc-font-display);
  font-weight: 500;
  font-size: clamp(20px, 2.1vw, 26px);
  line-height: 1.3;
  color: var(--arc-ink-70);
  margin: 18px 0 0;
  max-width: 560px;
  letter-spacing: -0.005em;
}

.phero__media {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.phero__media-img {
  display: block;
  width: 100%;
  max-width: 600px;
  height: auto;
  object-fit: contain;
  border-radius: 6px;
  filter: drop-shadow(0 28px 56px rgba(27, 30, 42, 0.20));
}

@media (max-width: 960px) {
  .phero__split {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .phero__media { order: 2; }
  .phero__media-img { max-width: 440px; }
}

@media (max-width: 480px) {
  .phero__media-img { max-width: 320px; }
}

/* ── CTA DARK (prominent dark section with streak) ───────────── */
.cta-dark {
  background: var(--arc-ink);
  color: var(--arc-frost);
  position: relative;
  overflow: hidden;
}
.cta-dark__streak {
  position: absolute;
  right: -4%;
  top: -30%;
  width: 34%;
  height: 170%;
  opacity: 0.9;
  pointer-events: none;
  z-index: 0;
}
.cta-dark__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 80px 0;
  position: relative;
  z-index: 2;
  flex-wrap: wrap;
}
@media (max-width: 768px) {
  .cta-dark__inner { flex-direction: column; align-items: flex-start; padding: 56px 0; }
}
.cta-dark .eyebrow { color: #ff6a5a; }
.cta-dark .eyebrow::before { background: #ff6a5a; }
.cta-dark h2 {
  font-family: var(--arc-font-display);
  font-weight: 600;
  font-size: clamp(30px, 3.8vw, 46px);
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 18px 0 0;
  color: var(--arc-frost);
  max-width: 600px;
}
.cta-dark p { color: rgba(237,238,242,0.7); margin: 16px 0 0; font-size: 16px; }
.cta-dark__actions { display: flex; gap: 14px; flex-wrap: wrap; flex-shrink: 0; }

/* ── SOLVE (ink band problem/solution) ───────────────────────── */
.solve {
  background: var(--arc-ink);
  color: var(--arc-frost);
  position: relative;
  overflow: hidden;
}
.solve__streak {
  position: absolute;
  left: -10%;
  bottom: -30%;
  width: 46%;
  height: 150%;
  opacity: 0.06;
  pointer-events: none;
  z-index: 0;
}
.solve .wrap { position: relative; z-index: 2; }
.solve .shead h2 { color: var(--arc-frost); }
.solve .shead p { color: rgba(237,238,242,0.72); }
.solve .eyebrow { color: #ff6a5a; }
.solve .eyebrow::before { background: #ff6a5a; }

.solve__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  margin-top: 64px;
  position: relative;
  z-index: 2;
}
@media (max-width: 1024px) { .solve__grid { grid-template-columns: 1fr; gap: 40px; } }

.solve__list { list-style: none; }
.solve__list li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 18px 0;
  border-bottom: 1px solid rgba(237,238,242,0.1);
  font-size: 16px;
  color: rgba(237,238,242,0.78);
  line-height: 1.5;
}
.solve__list li .x {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  margin-top: 1px;
}
.solve__list li .x--no  { background: rgba(212,56,40,0.16); color: #ff6a5a; }
.solve__list li .x--yes { background: rgba(46,125,91,0.18); color: #5fd6a0; }

.solve__panel {
  background: var(--arc-ink-90);
  border: 1px solid rgba(237,238,242,0.12);
  border-radius: 16px;
  padding: 40px;
}
@media (max-width: 600px) { .solve__panel { padding: 28px 24px; } }
.solve__panel .label { color: rgba(237,238,242,0.5); }
.solve__panel h3 {
  font-family: var(--arc-font-display);
  font-weight: 600;
  font-size: 26px;
  letter-spacing: -0.02em;
  margin: 12px 0 14px;
  color: var(--arc-frost);
}
.solve__panel p { color: rgba(237,238,242,0.74); font-size: 15.5px; line-height: 1.6; margin: 0 0 26px; }

.flow-nodes { display: flex; flex-direction: column; gap: 10px; }
.flow-node {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 10px;
  background: rgba(237,238,242,0.05);
  border: 1px solid rgba(237,238,242,0.08);
}
.flow-node .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--arc-vermillion);
  flex-shrink: 0;
}
.flow-node--active { background: rgba(212,56,40,0.08); border-color: rgba(212,56,40,0.3); }
.flow-node span {
  font-family: var(--arc-font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: rgba(237,238,242,0.85);
}
.flow-line { width: 1px; height: 14px; background: rgba(237,238,242,0.2); margin-left: 23px; }

/* ── CAP GRID (large editorial capability cards) ─────────────── */
.cap-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 60px;
}
@media (max-width: 768px) { .cap-grid { grid-template-columns: 1fr; } }

.cap {
  position: relative;
  background: var(--arc-paper);
  border: 1px solid var(--arc-cloud);
  border-radius: 16px;
  padding: 38px 36px 34px;
  transition: transform 200ms var(--ease), box-shadow 200ms var(--ease), border-color 200ms var(--ease);
  overflow: hidden;
  min-height: 260px;
}
@media (max-width: 600px) { .cap { padding: 28px 24px; } }
.cap:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(27,30,42,0.09);
  border-color: var(--arc-ink-30);
}
.cap__tag {
  position: absolute;
  top: 32px;
  right: 32px;
  font-family: var(--arc-font-mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--arc-steel);
  border: 1px solid var(--arc-cloud);
  border-radius: 4px;
  padding: 4px 8px;
}
.cap__num {
  font-family: var(--arc-font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--arc-steel);
}
.cap__icon {
  width: 40px;
  height: 40px;
  color: var(--arc-ink);
  margin: 22px 0;
  transition: color 200ms var(--ease);
}
.cap:hover .cap__icon { color: var(--arc-vermillion); }
.cap h3 {
  font-family: var(--arc-font-display);
  font-weight: 600;
  font-size: 23px;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
}
.cap p { font-size: 15px; color: var(--arc-ink-70); line-height: 1.6; margin: 0 0 24px; }
.cap__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--arc-font-display);
  font-weight: 600;
  font-size: 14px;
  color: var(--arc-ink);
  transition: color 150ms var(--ease);
}
.cap__link svg { width: 13px; height: 13px; transition: transform 200ms var(--ease); }
.cap:hover .cap__link { color: var(--arc-vermillion); }
.cap:hover .cap__link svg { transform: translateX(3px); }

/* ── FEAT GRID (3-col feature cards) ─────────────────────────── */
.feat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 48px;
}
@media (max-width: 960px) { .feat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .feat-grid { grid-template-columns: 1fr; } }

.feat-card {
  background: var(--arc-paper);
  border: 1px solid var(--arc-cloud);
  border-radius: 14px;
  padding: 30px;
}
.service-icon,
.solution-icon,
.feature-icon,
.card-icon,
.landing-cap__icon,
.cap__icon,
.bots-card__icon,
.feat-card .ic {
  display: block;
  object-fit: contain;
}
.solution-icon {
  width: 34px;
  height: 34px;
  margin-bottom: 18px;
}
.feat-card .ic { width: 34px; height: 34px; color: var(--arc-vermillion); margin-bottom: 18px; }
.feat-card h4 {
  font-family: var(--arc-font-display);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.01em;
  margin: 0 0 9px;
}
.feat-card p { font-size: 14.5px; color: var(--arc-ink-70); margin: 0; line-height: 1.55; }

/* ── PRODUCT DETAIL (pd-grid + ui mockup) ────────────────────── */
.pd-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: center;
  position: relative;
  z-index: 2;
}
@media (max-width: 1024px) { .pd-grid { grid-template-columns: 1fr; gap: 40px; } }

.pd-visual {
  background: var(--arc-paper);
  border: 1px solid var(--arc-cloud);
  border-radius: 16px;
  box-shadow: 0 18px 44px rgba(27,30,42,0.1);
  overflow: hidden;
}
.pd-visual__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--arc-cloud);
}
.pd-visual__bar i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--arc-cloud);
  font-style: normal;
}
.pd-visual__bar b {
  margin-left: 8px;
  font-family: var(--arc-font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--arc-steel);
  font-weight: 500;
}
.pd-visual__rows { padding: 18px; display: flex; flex-direction: column; gap: 11px; }
.pd-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 9px;
  background: var(--arc-card);
  border: 1px solid var(--arc-cloud);
}
.pd-row .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--arc-ink-30); flex-shrink: 0; }
.pd-row .bar { height: 8px; border-radius: 4px; background: var(--arc-cloud); flex: 1; }
.pd-row .bar.s { flex: 0.5; }
.pd-row--hi { background: var(--arc-vermillion-quiet); border-color: var(--arc-vermillion-soft); }
.pd-row--hi .dot { background: var(--arc-vermillion); }

/* ── SPEC LIST ───────────────────────────────────────────────── */
.speclist { list-style: none; margin: 48px 0 0; border-top: 1px solid var(--arc-cloud); }
.speclist li {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 24px 0;
  border-bottom: 1px solid var(--arc-cloud);
}
@media (max-width: 600px) { .speclist li { flex-direction: column; gap: 8px; } }
.speclist li .k {
  font-family: var(--arc-font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--arc-vermillion);
  flex-shrink: 0;
  width: 120px;
  padding-top: 3px;
  text-transform: uppercase;
}
.speclist li h4 {
  font-family: var(--arc-font-display);
  font-weight: 600;
  font-size: 19px;
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}
.speclist li p { font-size: 15px; color: var(--arc-ink-70); margin: 0; line-height: 1.55; max-width: 560px; }

/* ── ABOUT ───────────────────────────────────────────────────── */
.ab-statement {
  font-family: var(--arc-font-display);
  font-weight: 500;
  font-size: clamp(26px, 3.4vw, 44px);
  line-height: 1.22;
  letter-spacing: -0.02em;
  max-width: 900px;
  margin: 28px 0 0;
}
.ab-statement .accent, .ab-statement em { color: var(--arc-vermillion); font-style: normal; }

.ab-split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
@media (max-width: 1024px) { .ab-split { grid-template-columns: 1fr; gap: 40px; } }

.ab-values { display: flex; flex-direction: column; }
.ab-value { padding: 24px 0; border-bottom: 1px solid var(--arc-cloud); display: flex; gap: 22px; }
.ab-value:first-child { padding-top: 0; }
.ab-value .n {
  font-family: var(--arc-font-mono);
  font-size: 12px;
  color: var(--arc-vermillion);
  letter-spacing: 0.06em;
  flex-shrink: 0;
  width: 34px;
  padding-top: 3px;
}
.ab-value h4 { font-family: var(--arc-font-display); font-weight: 600; font-size: 19px; margin: 0 0 6px; letter-spacing: -0.01em; }
.ab-value p { font-size: 15px; color: var(--arc-ink-70); margin: 0; line-height: 1.55; }

/* ── CONTACT SPLIT ───────────────────────────────────────────── */
.ct-split {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  border: 1px solid var(--arc-cloud);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 22px 50px rgba(27,30,42,0.1);
}
@media (max-width: 960px) { .ct-split { grid-template-columns: 1fr; } }

.ct-left {
  background: var(--arc-ink);
  color: var(--arc-frost);
  padding: 60px 52px;
  position: relative;
  overflow: hidden;
}
@media (max-width: 600px) { .ct-left { padding: 40px 28px; } }
.ct-left__streak {
  position: absolute;
  left: -20%;
  bottom: -20%;
  width: 80%;
  height: 90%;
  opacity: 0.07;
}
.ct-left .eyebrow { color: #ff6a5a; }
.ct-left .eyebrow::before { background: #ff6a5a; }
.ct-left h2 {
  font-family: var(--arc-font-display);
  font-weight: 600;
  font-size: clamp(28px, 3vw, 38px);
  letter-spacing: -0.025em;
  color: var(--arc-frost);
  margin: 18px 0 0;
  line-height: 1.05;
}
.ct-left p { color: rgba(237,238,242,0.72); margin: 18px 0 0; font-size: 15px; max-width: 360px; }

.ct-meta { margin-top: 44px; display: flex; flex-direction: column; gap: 22px; position: relative; z-index: 2; }
.ct-meta div .label { color: rgba(237,238,242,0.5); display: block; margin-bottom: 6px; }
.ct-meta div b { font-family: var(--arc-font-display); font-weight: 500; font-size: 16px; color: var(--arc-frost); }

.ct-right { background: var(--arc-paper); padding: 60px 52px; }
@media (max-width: 600px) { .ct-right { padding: 36px 22px; } }
@media (max-width: 380px) { .ct-right { padding: 32px 18px; } }

.ct-field { margin-bottom: 22px; }
@media (max-width: 600px) { .ct-field { margin-bottom: 16px; } }
.ct-field label {
  font-family: var(--arc-font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--arc-steel);
  display: block;
  margin-bottom: 8px;
}
.ct-input {
  width: 100%;
  max-width: 100%;
  height: 48px;
  padding: 0 14px;
  border: 1px solid var(--arc-cloud);
  border-radius: 6px;
  background: var(--arc-frost);
  font-family: var(--arc-font-sans);
  font-size: 14px;
  color: var(--arc-ink);
  transition: border-color 150ms var(--ease), box-shadow 150ms var(--ease);
}
.ct-input.area { height: 120px; padding: 12px 14px; resize: vertical; }
.ct-input::placeholder { color: var(--arc-steel); }
.ct-input:focus { outline: none; border-color: var(--arc-vermillion); box-shadow: var(--arc-shadow-focus); background: var(--arc-paper); }
/* Prevent iOS auto-zoom on focus, which shifts and reflows the form. */
@media (max-width: 600px) {
  .ct-input { font-size: 16px; }
}
.ct-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 600px) { .ct-row { grid-template-columns: 1fr; gap: 0; } }

.ct-ok {
  display: none;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  font-family: var(--arc-font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--arc-vermillion);
}
.ct-ok.visible { display: flex; }
.ct-ok__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--arc-vermillion); flex-shrink: 0; }

/* ── SO GRID (solutions cards) ───────────────────────────────── */
.so-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 56px;
}
@media (max-width: 768px) { .so-grid { grid-template-columns: 1fr; } }

.so-card {
  display: flex;
  flex-direction: column;
  background: var(--arc-paper);
  border: 1px solid var(--arc-cloud);
  border-radius: 16px;
  padding: 34px;
  transition: transform 200ms var(--ease), box-shadow 200ms var(--ease), border-color 200ms var(--ease);
}
.so-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(27,30,42,0.09); border-color: var(--arc-ink-30); }
.so-card .num { font-family: var(--arc-font-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--arc-steel); }
.so-card h3 { font-family: var(--arc-font-display); font-weight: 600; font-size: 22px; letter-spacing: -0.02em; margin: 18px 0 10px; }
.so-card p { font-size: 15px; color: var(--arc-ink-70); margin: 0 0 22px; line-height: 1.55; flex: 1; }
.so-card .arrow { display: inline-flex; align-items: center; gap: 7px; font-family: var(--arc-font-display); font-weight: 600; font-size: 14px; color: var(--arc-vermillion); }
.so-card .arrow svg { width: 13px; height: 13px; transition: transform 200ms var(--ease); }
.so-card:hover .arrow svg { transform: translateX(3px); }

.so-card--wide {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  gap: 40px;
  background: var(--arc-ink);
  color: var(--arc-frost);
}
.so-card--wide h3 { color: var(--arc-frost); margin-top: 14px; }
.so-card--wide .num { color: #ff6a5a; }
.so-card--wide p { color: rgba(237,238,242,0.72); }
@media (max-width: 600px) { .so-card--wide { flex-direction: column; align-items: flex-start; gap: 18px; } }

/* ── PROOF GRID (stats) ──────────────────────────────────────── */
.proof-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  margin-top: 60px;
}
@media (max-width: 1024px) { .proof-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .proof-grid { grid-template-columns: 1fr 1fr; gap: 20px; } }

.proof-item .v {
  font-family: var(--arc-font-display);
  font-weight: 600;
  font-size: clamp(40px, 4.6vw, 58px);
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--arc-ink);
}
.proof-item .v .accent { color: var(--arc-vermillion); }
.proof-item .k { display: block; margin-top: 14px; color: var(--arc-steel); }
.proof-item p { font-size: 14px; color: var(--arc-ink-70); margin: 10px 0 0; line-height: 1.5; }

/* ── FOOTER LOGO ─────────────────────────────────────────────── */
.footer-logo { width: 96px; height: auto; display: block; }

/* ══════════════════════════════════════════════════════════════
   LANDING v3 — Scrollytelling, benefits, system
   ══════════════════════════════════════════════════════════════ */

/* ── SCROLLYTELLING SERVICES ─────────────────────────────────── */
.lp-scroll {
  position: relative;
  background: #010101;
  color: var(--arc-frost);
  --lp-stages: 9;
  --lp-step: 70vh;
  --lp-stage-h: 100vh;
  height: calc(var(--lp-stages) * var(--lp-step) + 20vh);
  z-index: 0;
}

.lp-scroll__streak {
  position: absolute;
  right: 0;
  top: 8%;
  width: 42%;
  height: 84%;
  pointer-events: none;
  z-index: 0;
}

.lp-scroll__stage {
  position: sticky;
  top: 0;
  height: var(--lp-stage-h);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 1;
}

.lp-scroll__wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  z-index: 1;
}

.lp-scroll__bar {
  position: relative;
  padding-top: 36px;
  padding-bottom: 0;
  flex: 0 0 auto;
}
.lp-scroll__bar::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(237,238,242,0) 0%,
    rgba(237,238,242,0.12) 20%,
    rgba(237,238,242,0.12) 80%,
    rgba(237,238,242,0) 100%);
}

/* Removed: bar-head, eyebrow, progress (no longer in markup) */

.lp-scroll__tabs {
  display: flex;
  gap: 28px;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-behavior: smooth;
  padding: 0 2px;
  margin: 0 -2px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}
.lp-scroll__tabs::-webkit-scrollbar { display: none; }

.lp-scroll__tab {
  position: relative;
  flex: 0 0 auto;
  padding: 4px 2px 16px;
  font-family: var(--arc-font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(237,238,242,0.38);
  background: transparent;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  transition: color 220ms var(--ease);
  white-space: nowrap;
}
.lp-scroll__tab::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--arc-vermillion);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 320ms var(--ease);
}
.lp-scroll__tab:hover { color: rgba(237,238,242,0.72); }
.lp-scroll__tab.is-active { color: var(--arc-frost); }
.lp-scroll__tab.is-active::after { transform: scaleX(1); }

.lp-scroll__stack {
  position: relative;
  flex: 1;
  min-height: 0;
}

.lp-scroll__panel {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 80px;
  align-items: center;
  padding: 40px 0 24px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(14px);
  transition: opacity 520ms var(--ease), transform 520ms var(--ease);
}
.lp-scroll__panel.is-active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.lp-scroll__copy { max-width: 540px; }

.lp-scroll__title {
  margin-top: 0;
  font-family: var(--arc-font-display);
  font-size: clamp(38px, 5vw, 64px);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--arc-frost);
}

.lp-scroll__desc {
  margin-top: 22px;
  font-size: clamp(16.5px, 1.4vw, 19px);
  line-height: 1.55;
  color: rgba(237,238,242,0.78);
  max-width: 460px;
}

.lp-scroll__tag {
  display: inline-block;
  margin-top: 36px;
  padding: 0;
  font-family: var(--arc-font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: #ff7a6b;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.lp-scroll__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 30px;
  padding: 13px 22px;
  font-family: var(--arc-font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--arc-ink);
  background: var(--arc-frost);
  border-radius: 999px;
  transition: transform 200ms var(--ease), background 200ms var(--ease), gap 200ms var(--ease);
}
.lp-scroll__cta:hover {
  background: var(--arc-paper);
  gap: 14px;
}
.lp-scroll__cta svg { width: 14px; height: 14px; }

.lp-scroll__visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 280px;
}

.lp-scroll__icon-wrap {
  position: relative;
  width: clamp(240px, 28vw, 340px);
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(212,56,40,0.08) 0%, rgba(212,56,40,0) 70%);
}
.lp-scroll__icon-wrap svg {
  position: relative;
  z-index: 1;
  width: 62%;
  height: 62%;
  color: var(--arc-frost) !important;
  stroke-width: 1.4;
}
.lp-scroll__icon-wrap svg .accent { fill: var(--arc-vermillion); stroke: none; }
.lp-scroll__icon-wrap svg .accent-stroke { stroke: var(--arc-vermillion); fill: none; }

/* Tablet/mobile: drop sticky scrollytelling, show as vertical cards */
@media (max-width: 1024px) {
  .lp-scroll {
    height: auto;
  }
  .lp-scroll__stage {
    position: relative;
    top: 0;
    height: auto;
    overflow: visible;
  }
  .lp-scroll__bar {
    padding-top: 28px;
    position: sticky;
    top: 0;
    background: #010101;
    z-index: 4;
  }
  .lp-scroll__stack {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .lp-scroll__panel {
    position: relative;
    inset: auto;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 56px 0;
    border-bottom: 1px solid rgba(237,238,242,0.08);
  }
  .lp-scroll__panel:last-child { border-bottom: none; }
}

@media (max-width: 768px) {
  .lp-scroll__bar {
    padding-top: 22px;
    padding-bottom: 0;
  }
  .lp-scroll__tabs { gap: 22px; }
  .lp-scroll__tab { font-size: 12.5px; padding: 4px 0 14px; }
  .lp-scroll__panel { padding: 44px 0; gap: 28px; }
  .lp-scroll__title { font-size: clamp(32px, 9vw, 44px); }
  .lp-scroll__visual { min-height: 220px; order: -1; }
  .lp-scroll__icon-wrap { width: clamp(180px, 60vw, 240px); }
}

/* ── PROCESS (lp-process) reuses landing-steps look ──────────── */
.lp-process { padding-top: 96px; padding-bottom: 96px; }

/* ── BENEFITS GRID ───────────────────────────────────────────── */
.lp-benefits {
  background: var(--arc-frost);
  border-top: 1px solid var(--arc-cloud);
}

.lp-benefits__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin-top: 56px;
}

.lp-benefit {
  position: relative;
  padding: 40px 28px;
  background: var(--arc-paper);
  border: 1px solid var(--arc-cloud);
  border-radius: 14px;
  transition: transform 240ms var(--ease), box-shadow 240ms var(--ease), border-color 240ms var(--ease);
}
.lp-benefit:hover {
  transform: translateY(-3px);
  border-color: var(--arc-ink-30);
  box-shadow: 0 14px 36px rgba(27,30,42,0.07);
}

.lp-benefit__num {
  display: inline-block;
  font-family: var(--arc-font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--arc-vermillion);
}

.lp-benefit h3 {
  margin-top: 14px;
  font-family: var(--arc-font-display);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.15;
}

@media (max-width: 1024px) {
  .lp-benefits__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 540px) {
  .lp-benefits__grid { grid-template-columns: 1fr; }
}

/* ── CLIENTS (logo grid) ─────────────────────────────────────── */
.lp-clients {
  background: var(--arc-paper);
  border-top: 1px solid var(--arc-cloud);
  border-bottom: 1px solid var(--arc-cloud);
  padding-top: 96px;
  padding-bottom: 96px;
}

.lp-clients__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0;
  margin-top: 56px;
  border-top: 1px solid var(--arc-cloud);
  border-left: 1px solid var(--arc-cloud);
}

.lp-clients__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  padding: 24px;
  border-right: 1px solid var(--arc-cloud);
  border-bottom: 1px solid var(--arc-cloud);
  font-family: var(--arc-font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--arc-steel);
  transition: color 240ms var(--ease), background 240ms var(--ease);
}

.lp-clients__logo:hover {
  color: var(--arc-ink);
  background: var(--arc-card);
}

.lp-clients__logo-img {
  max-width: 70%;
  max-height: 56px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.55;
  transition: filter 240ms var(--ease), opacity 240ms var(--ease);
}

.lp-clients__logo:hover .lp-clients__logo-img {
  filter: grayscale(0%);
  opacity: 1;
}

@media (max-width: 1024px) {
  .lp-clients__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 540px) {
  .lp-clients__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-clients__logo { min-height: 96px; }
}

/* ── GUARANTEE (success guarantee — 3 certifications) ────────── */
.lp-guarantee {
  background: var(--arc-frost);
  border-top: 1px solid var(--arc-cloud);
  border-bottom: 1px solid var(--arc-cloud);
  padding-block: clamp(78px, 9vw, 128px);
}

.lp-guarantee .wrap {
  max-width: 1440px;
}

.landing-section-head--center {
  margin-inline: auto;
  text-align: center;
}
.lp-guarantee .landing-section-head--center {
  max-width: 1360px;
}
.lp-guarantee .landing-section-head--center h2 {
  margin-top: 0;
  font-size: clamp(40px, 5.8vw, 72px);
  line-height: 1.02;
  letter-spacing: 0;
}
.landing-section-head--center p {
  margin-inline: auto;
}
.lp-guarantee .landing-section-head--center p {
  width: 100%;
  max-width: 1320px;
  margin-top: 28px;
  margin-left: auto;
  margin-right: auto;
  font-size: clamp(17px, 1.7vw, 21px);
  line-height: 1.68;
}

.lp-guarantee__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 20px);
  align-items: start;
  margin-top: clamp(64px, 8vw, 96px);
}

.lp-guarantee__item {
  text-align: center;
  min-width: 0;
}

.lp-guarantee__title {
  margin-top: 32px;
  font-size: clamp(23px, 2.1vw, 30px);
  line-height: 1.12;
  letter-spacing: 0;
}

.lp-guarantee__item p {
  max-width: 340px;
  margin: 16px auto 0;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--arc-ink-70);
}

.lp-guarantee__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 190px;
  margin-inline: auto;
}

.lp-guarantee__logo-img {
  display: block;
  width: auto;
  max-width: 260px;
  height: 190px;
  object-fit: contain;
}

@media (max-width: 900px) {
  .lp-guarantee__grid {
    grid-template-columns: 1fr;
    max-width: 560px;
    margin-inline: auto;
    gap: 58px;
  }
  .lp-guarantee__item p {
    max-width: 460px;
  }
}

@media (max-width: 540px) {
  .lp-guarantee {
    padding-block: 62px;
  }
  .lp-guarantee .landing-section-head--center h2 {
    font-size: clamp(34px, 11vw, 46px);
  }
  .lp-guarantee .landing-section-head--center p {
    margin-top: 22px;
    font-size: 16px;
  }
  .lp-guarantee__grid {
    margin-top: 52px;
    gap: 52px;
  }
  .lp-guarantee__logo {
    height: 150px;
  }
  .lp-guarantee__logo-img {
    max-width: min(230px, 92%);
    height: 150px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lp-scroll__panel {
    transition: opacity 200ms linear, transform 200ms linear;
    transform: none !important;
  }
  .lp-benefit { transition: none; }
}

/* ── CAREERS ─────────────────────────────────────────────────── */
.jobs-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 36px;
}
.jobs-filter__btn {
  padding: 8px 14px;
  background: var(--arc-paper);
  border: 1px solid var(--arc-cloud);
  border-radius: 999px;
  font-family: var(--arc-font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--arc-steel);
  text-transform: uppercase;
  cursor: pointer;
  transition: background 180ms var(--ease), color 180ms var(--ease), border-color 180ms var(--ease);
}
.jobs-filter__btn:hover { color: var(--arc-ink); border-color: var(--arc-ink-30); }
.jobs-filter__btn.active {
  background: var(--arc-ink);
  color: var(--arc-frost);
  border-color: var(--arc-ink);
}

.jobs {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  border-top: 1px solid var(--arc-cloud);
}
.jobs__item {
  display: grid;
  grid-template-columns: 1.5fr 1fr auto;
  gap: 28px;
  align-items: center;
  padding: 28px 6px;
  border-bottom: 1px solid var(--arc-cloud);
  transition: background 180ms var(--ease);
}
.jobs__item:hover { background: var(--arc-card); }
.jobs__item.is-hidden { display: none; }
.jobs__main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.jobs__area {
  font-family: var(--arc-font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--arc-vermillion);
  text-transform: uppercase;
}
.jobs__role {
  font-family: var(--arc-font-display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--arc-ink);
  margin: 0;
  line-height: 1.25;
}
.jobs__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.jobs__apply { justify-self: end; white-space: nowrap; }
.jobs__empty {
  text-align: center;
  padding: 56px 0;
  color: var(--arc-steel);
  font-family: var(--arc-font-display);
  font-size: 18px;
  display: none;
}
.jobs__empty.visible { display: block; }
@media (max-width: 768px) {
  .jobs__item {
    grid-template-columns: 1fr;
    gap: 18px;
    align-items: flex-start;
    padding: 26px 0;
  }
  .jobs__apply { justify-self: start; }
  .jobs__role { font-size: 20px; }
}

.careers-ok {
  display: none;
  align-items: center;
  gap: 10px;
  background: rgba(212,56,40,0.06);
  border: 1px solid var(--arc-vermillion-soft);
  border-radius: 12px;
  padding: 16px 18px;
  color: var(--arc-ink);
  font-family: var(--arc-font-display);
  font-size: 15px;
}
.careers-ok.visible { display: flex; }
.careers-ok__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--arc-vermillion); flex-shrink: 0; }

/* ── CANDIDATE SCAM NOTICE (careers) — premium institutional alert ── */
.career-alert {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 920px;
  margin: 0 auto;
  padding: 28px 32px;
  background: var(--arc-paper);
  border: 1px solid var(--arc-cloud);
  border-radius: 14px;
  box-shadow: var(--arc-shadow-sm);
  transition: background-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.career-alert:hover {
  background: var(--arc-card);
  transform: translateY(-2px);
  box-shadow: var(--arc-shadow-md);
}
.career-alert__date {
  font-family: var(--arc-font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--arc-vermillion);
}
.career-alert__head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.career-alert__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 9px;
  background: var(--arc-card);
  border: 1px solid var(--arc-cloud);
  color: var(--arc-steel);
}
.career-alert__title {
  margin: 0;
  font-family: var(--arc-font-display);
  font-weight: 600;
  font-size: clamp(19px, 2vw, 23px);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--arc-ink);
}
.career-alert__body {
  margin: 0;
  font-size: clamp(14px, 1.2vw, 16px);
  line-height: 1.65;
  color: var(--arc-ink-70);
  max-width: 74ch;
}
.career-alert__verify {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 2px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--arc-cloud);
  font-family: var(--arc-font-sans);
  font-weight: 500;
  font-size: 14px;
  color: var(--arc-ink);
}
.career-alert__verify::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--arc-vermillion);
  flex-shrink: 0;
}
@media (max-width: 600px) {
  .career-alert { padding: 22px 20px; }
}

/* ── Students page: drop decorative eyebrow / number lines (scoped) ── */
.page-careers-students .eyebrow::before,
.page-careers-students .eyebrow::after,
.page-careers-students .speclist .k::before,
.page-careers-students .speclist .k::after {
  display: none !important;
  content: none !important;
}
.page-careers-students .eyebrow { gap: 0; }

/* ── Professionals page: drop decorative eyebrow / number lines (scoped) ── */
.page-careers-professionals .eyebrow::before,
.page-careers-professionals .eyebrow::after,
.page-careers-professionals .shead .eyebrow::before,
.page-careers-professionals .shead .eyebrow::after,
.page-careers-professionals .feat-card .eyebrow::before,
.page-careers-professionals .feat-card .eyebrow::after,
.page-careers-professionals .speclist .k::before,
.page-careers-professionals .speclist .k::after {
  display: none !important;
  content: none !important;
}
.page-careers-professionals .eyebrow { gap: 0; }

/* ── PAUSED APPLICATION FORM (careers) ───────────────────────── */
.form-paused {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  padding: 14px 16px;
  background: var(--arc-vermillion-quiet);
  border: 1px solid var(--arc-vermillion-soft);
  border-radius: 12px;
  color: var(--arc-ink);
  font-family: var(--arc-font-sans);
  font-size: 14px;
  line-height: 1.5;
}
.form-paused__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--arc-vermillion); flex-shrink: 0; }
.contact-form--paused .ct-input:disabled {
  background: var(--arc-card);
  color: var(--arc-steel);
  cursor: not-allowed;
  opacity: 1;
  -webkit-text-fill-color: var(--arc-steel);
}
.contact-form--paused .btn:disabled {
  cursor: not-allowed;
  opacity: 0.65;
  pointer-events: none;
}

/* ── ARC UNDERLINED LINK (animated underline, ZEISS-style) ───── */
.arc-underlined-link {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 30px;
  padding: 4px 0 10px;
  font-family: var(--arc-font-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.2;
  color: #ffffff;
  background: transparent;
  border: 0;
  border-radius: 0;
  text-decoration: none;
  width: max-content;
  max-width: 100%;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.arc-underlined-link__label { white-space: nowrap; }
.arc-underlined-link__arrow {
  display: inline-block;
  font-size: 1em;
  line-height: 1;
  transition: transform 320ms var(--ease);
  will-change: transform;
}
.arc-underlined-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: #ffffff;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 800ms cubic-bezier(0.65, 0, 0.35, 1);
  pointer-events: none;
}
.arc-underlined-link:hover::after,
.arc-underlined-link:focus-visible::after,
.arc-underlined-link.is-loading::after,
.arc-underlined-link.is-active::after,
.arc-underlined-link[aria-current]::after {
  transform: scaleX(1);
}
.arc-underlined-link:hover .arc-underlined-link__arrow,
.arc-underlined-link:focus-visible .arc-underlined-link__arrow,
.arc-underlined-link.is-loading .arc-underlined-link__arrow {
  transform: translateX(4px);
}
.arc-underlined-link:focus { outline: none; }
.arc-underlined-link:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.45);
  outline-offset: 6px;
  border-radius: 2px;
}

@media (max-width: 480px) {
  .arc-underlined-link { font-size: 13px; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .arc-underlined-link::after,
  .arc-underlined-link__arrow {
    transition: none;
  }
}

/* ── CAREERS · single-line phero subtitle on desktop ─────────── */
.phero__sub--single {
  max-width: none;
}
@media (min-width: 900px) {
  .phero__sub--single {
    white-space: nowrap;
  }
}

/* ── CAREERS · phero with background video ───────────────────── */
.phero--video {
  isolation: isolate;
  background: #171a25;
  padding-top: 96px;
  padding-bottom: 180px;
  min-height: 540px;
  display: flex;
  align-items: flex-start;
}
@media (max-width: 768px) {
  .phero--video {
    padding-top: 70px;
    padding-bottom: 120px;
    min-height: 420px;
  }
}

.phero--video .wrap {
  padding-left: 16px;
  padding-right: 24px;
}
@media (max-width: 600px) {
  .phero--video .wrap {
    padding-left: 16px;
    padding-right: 16px;
  }
}

.phero--video .phero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}

.phero--video .phero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(17, 20, 32, 0.42) 0%,
    rgba(17, 20, 32, 0.18) 45%,
    rgba(17, 20, 32, 0.04) 100%
  );
}

.phero--video .wrap,
.phero--video .phero__inner {
  position: relative;
  z-index: 2;
}

.phero--video .phero__streak {
  display: none;
}

.phero--video .phero__inner {
  max-width: 920px;
}

.phero--video h1 {
  color: var(--arc-frost);
  text-shadow: 0 2px 28px rgba(0, 0, 0, 0.45);
}
.phero--video h1 em {
  color: var(--arc-vermillion);
}

.phero--video .phero__sub {
  color: rgba(237, 238, 242, 0.95);
  text-shadow: 0 1px 18px rgba(0, 0, 0, 0.5);
}

/* Pause/play toggle */
.phero__video-toggle {
  position: absolute;
  top: 28px;
  right: 28px;
  z-index: 4;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #171a25;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), background 0.2s var(--ease);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.phero__video-toggle:hover {
  background: #fff;
}
.phero__video-toggle:focus-visible {
  outline: 2px solid var(--arc-vermillion);
  outline-offset: 3px;
  opacity: 1;
  transform: translateY(0);
}
.phero--video:hover .phero__video-toggle,
.phero--video:focus-within .phero__video-toggle {
  opacity: 1;
  transform: translateY(0);
}
.phero__video-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
.phero__video-icon[hidden] { display: none; }

@media (max-width: 768px) {
  .phero__video-toggle {
    top: 18px;
    right: 18px;
    width: 44px;
    height: 44px;
  }
}
@media (hover: none) {
  .phero__video-toggle {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .phero--video .phero__video {
    display: none;
  }
  .phero__video-toggle {
    transition: none;
  }
}

/* Career subnav adapts when sitting over the dark video hero */
.phero--video .career-subnav { color: rgba(237, 238, 242, 0.72); }
.phero--video .career-subnav a {
  color: rgba(237, 238, 242, 0.78);
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.45);
}
.phero--video .career-subnav a:hover,
.phero--video .career-subnav a.is-current,
.phero--video .career-subnav a[aria-current="page"] {
  color: var(--arc-frost);
  border-bottom-color: var(--arc-vermillion);
}
.phero--video .career-subnav span { color: rgba(237, 238, 242, 0.35); }

/* Professionals video — slight downward focal point to keep the person framed */
.phero--video-pro .phero__video { object-position: 50% 40%; }

/* ── CAREER MOTIVATION (reused image+content block for Students/Graduated/Professionals) ── */
.career-motivation { /* alias of .career-intro layout, kept distinct so we can tune spacing */
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 64px;
  align-items: center;
}
@media (max-width: 900px) {
  .career-motivation { grid-template-columns: 1fr; gap: 36px; }
}
.career-motivation__media { position: relative; }
.career-motivation__panel {
  position: relative;
  aspect-ratio: 4 / 3;
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(212, 56, 40, 0.06), transparent 60%),
    linear-gradient(160deg, var(--arc-paper) 0%, var(--arc-card) 100%);
  border: 1px solid var(--arc-cloud);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--arc-shadow-sm);
}
.career-motivation__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.career-motivation__content {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.career-motivation__lead {
  font-family: var(--arc-font-display);
  font-weight: 500;
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.2;
  letter-spacing: -0.018em;
  color: var(--arc-ink);
  margin: 0;
}
.career-motivation__body {
  font-size: clamp(15px, 1.3vw, 17px);
  line-height: 1.65;
  color: var(--arc-ink-70);
  margin: 0;
  max-width: 56ch;
}

/* ── CAREER SECTION TOOLBAR (in-page chip nav) ───────────────── */
.career-section-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}
.career-section-toolbar a {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border: 1px solid var(--arc-cloud);
  border-radius: 999px;
  background: var(--arc-paper);
  font-family: var(--arc-font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--arc-ink-70);
  text-decoration: none;
  transition: color 160ms var(--ease), border-color 160ms var(--ease), background 160ms var(--ease), transform 160ms var(--ease);
}
.career-section-toolbar a:hover {
  color: var(--arc-ink);
  border-color: var(--arc-ink-30);
  background: var(--arc-card);
  transform: translateY(-1px);
}
.career-section-toolbar a:focus-visible {
  outline: 2px solid var(--arc-vermillion);
  outline-offset: 3px;
}
@media (max-width: 600px) {
  .career-section-toolbar a { padding: 7px 12px; font-size: 11px; }
}

/* Anchor offsets so the sticky 72px navbar doesn't clip headings */
#students-overview,
#students-paths,
#students-profile,
#professionals-overview,
#roles,
#areas,
#graduated-systems,
#graduated-growth,
#graduated-apply { scroll-margin-top: 96px; }


/* ── CAREERS · editorial intro (text + visual) ───────────────── */
.career-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 72px;
  align-items: center;
}
@media (max-width: 900px) {
  .career-intro {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

.career-intro__media {
  position: relative;
}
.career-intro__panel {
  position: relative;
  aspect-ratio: 4 / 3;
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(212, 56, 40, 0.06), transparent 60%),
    linear-gradient(160deg, var(--arc-paper) 0%, var(--arc-card) 100%);
  border: 1px solid var(--arc-cloud);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--arc-shadow-sm);
}
.career-intro__streak {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0.95;
}
.career-intro__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.career-intro__copy {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.career-intro__lead {
  font-family: var(--arc-font-display);
  font-weight: 500;
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--arc-ink);
  margin: 0;
}
.career-intro__body {
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.65;
  color: var(--arc-ink-70);
  margin: 0;
  max-width: 56ch;
}

/* ── CAREERS · Team ARC carousel ─────────────────────────────── */
.team-arc {
  padding-top: 96px;
  padding-bottom: 96px;
}
@media (max-width: 768px) {
  .team-arc { padding-top: 64px; padding-bottom: 64px; }
}

.shead--center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.team-arc__lead {
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.6;
  color: var(--arc-ink-70);
  max-width: 640px;
  margin: 14px auto 0;
}

.team-arc-carousel {
  position: relative;
  margin-top: 56px;
}

.team-arc-carousel__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
}
.team-arc-carousel__viewport::-webkit-scrollbar { display: none; }
.team-arc-carousel__viewport.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
}

.team-arc-carousel__track {
  display: flex;
  gap: 24px;
  padding: 4px 2px 4px 2px;
  outline: none;
}

.team-arc-card {
  flex: 0 0 88%;
  scroll-snap-align: start;
  background: var(--arc-paper);
  border: 1px solid var(--arc-cloud);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 240ms var(--ease), transform 240ms var(--ease), border-color 240ms var(--ease);
  user-select: none;
}
.team-arc-card:hover {
  box-shadow: var(--arc-shadow-md);
  border-color: var(--arc-ink-30);
  transform: translateY(-2px);
}
@media (min-width: 640px) {
  .team-arc-card { flex-basis: calc((100% - 24px) / 2); }
}
@media (min-width: 960px) {
  .team-arc-card { flex-basis: calc((100% - 24px * 2) / 3); }
}
@media (min-width: 1200px) {
  .team-arc-card { flex-basis: calc((100% - 24px * 3) / 4); }
}

.team-arc-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--arc-card);
  border-bottom: 1px solid var(--arc-cloud);
}
.team-arc-card__media img {
  width: 46%;
  max-width: 140px;
  height: auto;
  opacity: 0.92;
  pointer-events: none;
}
.team-arc-card__media[data-tac-color="ink"] {
  background: var(--arc-ink);
}
.team-arc-card__media[data-tac-color="ink"] img { filter: brightness(0) invert(1); opacity: 0.9; }
.team-arc-card__media[data-tac-color="vermillion"] {
  background: linear-gradient(160deg, var(--arc-vermillion) 0%, var(--arc-vermillion-active) 100%);
}
.team-arc-card__media[data-tac-color="vermillion"] img { filter: brightness(0) invert(1); }
.team-arc-card__media[data-tac-color="frost"] {
  background: var(--arc-frost);
}

.team-arc-card__body {
  position: relative;
  padding: 24px 26px 56px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 1 auto;
  min-height: 180px;
}
.team-arc-card__title {
  font-family: var(--arc-font-display);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--arc-ink);
  margin: 0;
}
.team-arc-card__desc {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--arc-ink-70);
  margin: 0;
}
.team-arc-card__arrow {
  position: absolute;
  right: 22px;
  bottom: 20px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--arc-ink);
  border: 1px solid var(--arc-cloud);
  border-radius: 999px;
  transition: background 200ms var(--ease), color 200ms var(--ease), border-color 200ms var(--ease), transform 200ms var(--ease);
}
.team-arc-card__arrow svg { width: 16px; height: 16px; }
.team-arc-card:hover .team-arc-card__arrow {
  background: var(--arc-vermillion);
  color: #fff;
  border-color: var(--arc-vermillion);
  transform: translateX(2px);
}

.team-arc-carousel__nav {
  position: absolute;
  top: 38%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: var(--arc-paper);
  border: 1px solid var(--arc-cloud);
  color: var(--arc-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
  box-shadow: var(--arc-shadow-sm);
  transition: background 180ms var(--ease), color 180ms var(--ease), border-color 180ms var(--ease), opacity 180ms var(--ease);
}
.team-arc-carousel__nav:hover {
  background: var(--arc-ink);
  color: #fff;
  border-color: var(--arc-ink);
}
.team-arc-carousel__nav:focus-visible {
  outline: 2px solid var(--arc-vermillion);
  outline-offset: 3px;
}
.team-arc-carousel__nav:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.team-arc-carousel__nav--prev { left: -22px; }
.team-arc-carousel__nav--next { right: -22px; }
@media (max-width: 768px) {
  .team-arc-carousel__nav { display: none; }
}

.team-arc-progress {
  position: relative;
  height: 3px;
  background: var(--arc-cloud);
  border-radius: 999px;
  overflow: hidden;
  margin: 32px auto 0;
  max-width: 320px;
}
.team-arc-progress__bar {
  position: absolute;
  inset: 0;
  background: var(--arc-ink);
  border-radius: 999px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 240ms var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  .team-arc-carousel__viewport { scroll-behavior: auto; }
  .team-arc-card,
  .team-arc-card__arrow,
  .team-arc-progress__bar { transition: none; }
}

/* ── CAREER SUBNAV (Careers # Students # Graduated) ─────────── */
.career-subnav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin: 32px 0 0;
  font-family: var(--arc-font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--arc-steel);
}
.career-subnav a {
  color: var(--arc-ink-70);
  text-decoration: none;
  padding: 4px 2px;
  border-bottom: 1px solid transparent;
  transition: color 160ms var(--ease), border-color 160ms var(--ease);
}
.career-subnav a:hover {
  color: var(--arc-ink);
  border-bottom-color: var(--arc-vermillion);
}
.career-subnav a.is-current,
.career-subnav a[aria-current="page"] {
  color: var(--arc-ink);
  border-bottom-color: var(--arc-vermillion);
}
.career-subnav span {
  color: var(--arc-cloud);
  font-size: 14px;
  line-height: 1;
  user-select: none;
}

/* Graduated anchor offset so the sticky 72px navbar doesn't hide the heading */
#graduated { scroll-margin-top: 96px; }
.career-subnav__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 40px;
}
/* ARC web design gallery */
.arc-web-gallery {
  background: #f6f7f7;
  color: #111;
  overflow: hidden;
  padding: clamp(88px, 8vw, 112px) 0;
  position: relative;
}

.arc-web-gallery__header {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto 42px;
  text-align: center;
}

.arc-web-gallery__eyebrow {
  margin: 0 0 14px;
  font-size: 0.76rem;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(17, 17, 17, 0.58);
}

.arc-web-gallery__header h2 {
  margin: 0;
  font-size: clamp(2.35rem, 5vw, 4.75rem);
  line-height: 0.95;
  letter-spacing: -0.055em;
  font-weight: 600;
  color: #111;
}

.arc-web-gallery__description {
  max-width: 720px;
  margin: 22px auto 0;
  font-size: clamp(1rem, 1.35vw, 1.25rem);
  line-height: 1.55;
  color: rgba(17, 17, 17, 0.68);
}

.arc-web-marquees {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  display: grid;
  gap: 24px;
}

.arc-web-marquee {
  --arc-web-marquee-distance: 0px;
  --arc-web-marquee-duration: 60s;

  position: relative;
  width: 100%;
  overflow: hidden;
}

.arc-web-marquee::before,
.arc-web-marquee::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: min(120px, 14vw);
  z-index: 2;
  pointer-events: none;
}

.arc-web-marquee::before {
  left: 0;
  background: linear-gradient(to right, #f6f7f7 0%, rgba(246, 247, 247, 0) 100%);
}

.arc-web-marquee::after {
  right: 0;
  background: linear-gradient(to left, #f6f7f7 0%, rgba(246, 247, 247, 0) 100%);
}

.arc-web-marquee__track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: arcWebMarqueeLeft var(--arc-web-marquee-duration) linear infinite;
}

.arc-web-marquee--left {
  --arc-web-marquee-duration: 60s;
}

.arc-web-marquee--right {
  --arc-web-marquee-duration: 80s;
}

.arc-web-marquee--right .arc-web-marquee__track {
  margin-left: -304px;
  animation-name: arcWebMarqueeRight;
}

.arc-web-marquee:hover .arc-web-marquee__track,
.arc-web-marquee:focus-within .arc-web-marquee__track {
  animation-play-state: paused;
}

.arc-web-marquee__group {
  display: flex;
  align-items: stretch;
  gap: 24px;
  padding-right: 24px;
  flex-shrink: 0;
}

.arc-web-card {
  flex: 0 0 auto;
  min-width: 310px;
  width: 42vw;
  max-width: 426px;
  aspect-ratio: 609 / 375;
  margin: 0;
  border-radius: 8px;
  overflow: hidden;
  background: #e6e6e6;
  box-shadow:
    0 18px 55px rgba(0, 0, 0, 0.08),
    0 2px 8px rgba(0, 0, 0, 0.06);
  transform: translateZ(0);
}

.arc-web-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@keyframes arcWebMarqueeLeft {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(calc(var(--arc-web-marquee-distance) * -1), 0, 0);
  }
}

@keyframes arcWebMarqueeRight {
  from {
    transform: translate3d(calc(var(--arc-web-marquee-distance) * -1), 0, 0);
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

@media (max-width: 767px) {
  .arc-web-gallery {
    padding: 64px 0;
  }

  .arc-web-gallery__header {
    width: min(100% - 32px, 620px);
    margin-bottom: 32px;
    text-align: left;
  }

  .arc-web-gallery__description {
    margin-left: 0;
    margin-right: 0;
  }

  .arc-web-marquees {
    gap: 16px;
  }

  .arc-web-marquee__group {
    gap: 16px;
    padding-right: 16px;
  }

  .arc-web-card {
    min-width: 260px;
    width: min(78vw, 310px);
    max-width: 310px;
    aspect-ratio: 609 / 375;
  }

  .arc-web-marquee--right .arc-web-marquee__track {
    margin-left: -120px;
  }

  .arc-web-marquee::before,
  .arc-web-marquee::after {
    width: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .arc-web-marquee__track {
    animation: none !important;
    transform: none !important;
  }

  .arc-web-marquee--right .arc-web-marquee__track {
    margin-left: 0;
  }

  .arc-web-marquee {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .arc-web-marquee::-webkit-scrollbar {
    display: none;
  }
}

/* ── ARC SITE LOADER — intro animation (websites.html only) ──────────────────
   Self-contained module. No external libs, no GSAP, no canvas, no video.
   Markup lives at the top of websites.html; behaviour in
   assets/js/websites-loader.js. The accent reuses the brand token
   --arc-vermillion (#D43828). Sequence: "A Random Company" rises, then swaps
   inside its mask to "ARC" while "A Random" / "Web" / "Design" rise to its
   right and the group slides back to centre → "ARC A Random Web Design".
   To retire the intro, remove this block, the .arc-site-loader markup, and
   websites-loader.js together. */

html.arc-loader-lock,
body.arc-loader-active {
  overflow: hidden;
}

/* Hide the mouse cursor for the entire intro — nothing on screen but the
   animation. Restored automatically once the lock/active classes are removed. */
html.arc-loader-lock,
html.arc-loader-lock body,
body.arc-loader-active,
body.arc-loader-active * {
  cursor: none !important;
}

body.arc-loader-active main,
body.arc-loader-active header,
body.arc-loader-active nav,
body.arc-loader-active footer {
  visibility: hidden;
}

body.arc-loader-finished main,
body.arc-loader-finished header,
body.arc-loader-finished nav,
body.arc-loader-finished footer {
  visibility: visible;
}

.arc-site-loader {
  /* module-scoped tokens */
  --arc-loader-bg: #050505;
  --arc-loader-text: #f4f1ea;
  --arc-loader-muted: rgba(244, 241, 234, 0.72);
  --arc-loader-vermilion: var(--arc-vermillion);
  --arc-loader-ease-out: cubic-bezier(0.19, 0.91, 0.16, 1);
  --arc-loader-ease-smooth: cubic-bezier(0.76, 0, 0.24, 1);

  position: fixed;
  inset: 0;
  width: 100%;
  height: 100svh;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  pointer-events: none;
  background: var(--arc-loader-bg);
  color: var(--arc-loader-text);
  font-family: var(--arc-font-display);
  isolation: isolate;
}

.arc-site-loader__background {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 52%, rgba(212, 56, 40, 0.075), transparent 34%),
    linear-gradient(180deg, #070707 0%, #030303 100%);
  opacity: 1;
  transform: scale(1);
  z-index: 0;
}

.arc-site-loader__content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(92vw, 980px);
  height: auto;
}

.arc-site-loader__phrase {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.3rem, 0.85vw, 0.62rem);
  white-space: nowrap;
  transform: translateX(var(--arc-loader-phrase-x, 0px));
  will-change: transform, opacity, filter;
}

.arc-site-loader__mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: middle;
  line-height: 1;
  padding-bottom: 0.22em;
}

.arc-site-loader__word {
  display: inline-block;
  transform: translateY(125%);
  opacity: 1;
  will-change: transform;
  font-family: inherit;
  font-size: clamp(1.4rem, 2.6vw, 2.45rem);
  line-height: 1;
  letter-spacing: -0.01em;
  font-weight: 600;
  color: var(--arc-loader-text);
}

/* The swap slot: "Company" (in flow, sets the slot width) is replaced by "Web"
   (absolute, vermillion) rising in as the slot tightens to the "Web" width. */
.arc-site-loader__swap-mask {
  position: relative;
  width: var(--arc-loader-swap-w, auto);
}

.arc-site-loader__swap-from {
  position: relative;
}

.arc-site-loader__swap-to {
  position: absolute;
  left: 0;
  top: 0;
}

.arc-site-loader__word--accent {
  color: var(--arc-loader-vermilion);
  text-shadow:
    0 0 10px rgba(212, 56, 40, 0.34),
    0 0 24px rgba(212, 56, 40, 0.14);
}

.arc-site-loader__reveal {
  position: absolute;
  inset: auto 0 0 0;
  height: 100%;
  z-index: 4;
  background: var(--arc-loader-vermilion);
  transform: translateY(102%);
  will-change: transform;
}

/* Custom sound-wave "cursor" — replaces the hidden native pointer during the
   intro and invites the visitor to activate the audio. Follows the mouse
   (position set by websites-loader.js); a click on it OR a scroll starts the
   sound, after which it fades out. Purely a hint, so it never eats pointer
   events. */
.arc-site-loader__cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  transform: translate3d(-9999px, -9999px, 0);
  opacity: 0;
  transition: opacity 280ms var(--arc-loader-ease-out);
  pointer-events: none;
  will-change: transform, opacity;
}

.arc-site-loader__cursor.is-visible {
  opacity: 1;
}

/* Once the audio is actually playing the hint has done its job → fade away. */
.arc-site-loader__cursor.is-active {
  opacity: 0;
}

.arc-site-loader__cursor-waves {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 20px;
}

.arc-site-loader__cursor-waves i {
  display: block;
  width: 3px;
  height: 100%;
  border-radius: 3px;
  background: var(--arc-loader-vermilion);
  transform: scaleY(0.32);
  transform-origin: center;
  box-shadow: 0 0 10px rgba(212, 56, 40, 0.35);
  animation: arcLoaderCursorWave 1100ms ease-in-out infinite;
}

.arc-site-loader__cursor-waves i:nth-child(1) { animation-delay: 0ms; }
.arc-site-loader__cursor-waves i:nth-child(2) { animation-delay: 140ms; }
.arc-site-loader__cursor-waves i:nth-child(3) { animation-delay: 280ms; }
.arc-site-loader__cursor-waves i:nth-child(4) { animation-delay: 200ms; }
.arc-site-loader__cursor-waves i:nth-child(5) { animation-delay: 80ms; }

@keyframes arcLoaderCursorWave {
  0%, 100% { transform: scaleY(0.32); }
  50%      { transform: scaleY(1); }
}

.arc-site-loader.is-intro-ready .arc-site-loader__background {
  animation: arcLoaderBgPulse 1800ms ease-out forwards;
}

/* During the exit the content box clips to the text's own height, so the line
   it slides into sits right below the words. */
.arc-site-loader.is-exiting .arc-site-loader__content {
  overflow: hidden;
}

.arc-site-loader.is-exiting .arc-site-loader__phrase {
  animation: arcLoaderPhraseExit 440ms cubic-bezier(0.6, 0, 0.85, 0.2) forwards;
}

.arc-site-loader.is-exiting .arc-site-loader__background {
  animation: arcLoaderBgExit 850ms var(--arc-loader-ease-smooth) forwards;
}

/* Once the vermillion wipe begins, keep the phrase hidden. Removing .is-exiting
   in the JS drops the content's overflow clip, and the phrase is held at
   translateY(125%) by the exit animation's fill:forwards — without this it would
   reappear on the black loader background after the placard slides off the top. */
.arc-site-loader.is-revealing .arc-site-loader__content {
  visibility: hidden;
}

/* Faster full-screen vermillion wipe (was 680ms up / 760ms out). */
.arc-site-loader.is-revealing .arc-site-loader__reveal {
  animation:
    arcLoaderRevealUp 420ms var(--arc-loader-ease-smooth) forwards,
    arcLoaderRevealOut 480ms var(--arc-loader-ease-smooth) 420ms forwards;
}

.arc-site-loader.is-hidden {
  display: none;
}

@keyframes arcLoaderBgPulse {
  0%   { opacity: 1; transform: scale(1); }
  100% { opacity: 1; transform: scale(1.035); }
}

@keyframes arcLoaderPhraseExit {
  0%   { transform: translateX(0) translateY(0%); }
  100% { transform: translateX(0) translateY(125%); }
}

@keyframes arcLoaderBgExit {
  0%   { opacity: 1; }
  100% { opacity: 0.98; }
}

@keyframes arcLoaderRevealUp {
  0%   { transform: translateY(102%); }
  100% { transform: translateY(0%); }
}

@keyframes arcLoaderRevealOut {
  0%   { transform: translateY(0%); }
  100% { transform: translateY(-102%); }
}

@media (max-width: 767px) {
  .arc-site-loader__content {
    width: min(90vw, 520px);
  }

  .arc-site-loader__word {
    font-size: clamp(1.05rem, 4.7vw, 1.7rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  html.arc-loader-lock,
  body.arc-loader-active {
    overflow: auto;
  }

  body.arc-loader-active main,
  body.arc-loader-active header,
  body.arc-loader-active nav,
  body.arc-loader-active footer {
    visibility: visible;
  }

  .arc-site-loader {
    display: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   WEBSITES PAGE — dark premium hero composition (websites.html only)
   Transparent nav fused with the dark hero, scroll-compression stage, the new
   hero title accent, and the editorial "What we can build" list.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── NAV — transparent over the dark hero, solid once scrolled ───────────── */
/* The nav floats over the hero (fixed, removed from flow) so the dark hero
   reads behind it as one composition. It turns into the frosted light bar the
   moment the user scrolls (handled by the .scrolled toggle in websites.js) or
   when a desktop mega menu opens (.menu-open). */
.nav-bar.landing-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}

.nav-bar .nav-logo { color: var(--arc-frost); }          /* drives streak currentColor */
.nav-bar .nav-brand-text { color: currentColor; }
.nav-bar .nav-links a,
.nav-bar .nav-mega__trigger { color: rgba(237, 238, 242, 0.80); }
.nav-bar .nav-links a:hover,
.nav-bar .nav-links a.active,
.nav-bar .nav-mega__trigger:hover { color: #fff; }
.nav-bar .nav-hamburger span { background: var(--arc-frost); }
.nav-bar .nav-cta {
  background: rgba(237, 238, 242, 0.10);
  color: var(--arc-frost);
  border: 1px solid rgba(237, 238, 242, 0.30);
}
.nav-bar .nav-cta:hover { background: var(--arc-frost); color: var(--arc-ink); }

/* Solid state: scrolled past the hero, or a desktop mega menu is open. */
.nav-bar.landing-nav.scrolled,
.nav-bar.landing-nav.menu-open {
  background: rgba(237, 238, 242, 0.98);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--arc-cloud);
}
.nav-bar.scrolled .nav-logo,
.nav-bar.menu-open .nav-logo { color: var(--arc-ink); }
.nav-bar.scrolled .nav-links a,
.nav-bar.menu-open .nav-links a,
.nav-bar.scrolled .nav-mega__trigger,
.nav-bar.menu-open .nav-mega__trigger { color: var(--arc-ink-70); }
.nav-bar.scrolled .nav-links a:hover,
.nav-bar.scrolled .nav-links a.active,
.nav-bar.menu-open .nav-links a:hover,
.nav-bar.menu-open .nav-links a.active,
.nav-bar.scrolled .nav-mega__trigger:hover,
.nav-bar.menu-open .nav-mega__trigger:hover { color: var(--arc-ink); }
.nav-bar.scrolled .nav-hamburger span,
.nav-bar.menu-open .nav-hamburger span { background: var(--arc-ink); }
.nav-bar.scrolled .nav-cta,
.nav-bar.menu-open .nav-cta {
  background: var(--arc-ink);
  color: var(--arc-frost);
  border-color: transparent;
}
.nav-bar.scrolled .nav-cta:hover,
.nav-bar.menu-open .nav-cta:hover { background: var(--arc-ink-90); color: var(--arc-frost); }

/* ── HERO STAGE — the surface revealed when the hero compresses ──────────── */
/* The hero scales down into a rounded panel on scroll (websites-scroll.js);
   this stage is the light surface (matching the gallery) that shows around it. */
.arc-hero-stage {
  position: relative;
  background: #f6f7f7;
}
.arc-hero-stage .arc-hero {
  will-change: transform;
  border-radius: 0;
}

/* ── WHAT WE CAN BUILD — clean vertical editorial list ──────────────────── */
.arc-build {
  position: relative;
  background: #0a0b10;
  color: var(--arc-frost);
  padding-block: clamp(88px, 12vw, 160px);
}

.arc-build__inner {
  width: min(100% - 48px, 1100px);
  margin-inline: auto;
}

.arc-build__head {
  max-width: 720px;
  margin-bottom: clamp(48px, 7vw, 88px);
}

.arc-build__title {
  position: relative;
  margin: 0;
  font-family: var(--arc-font-display, 'Newsreader', Georgia, serif);
  font-weight: 500;
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: #fff;
}
.arc-build__title > span { display: block; }

/* Pixel-build overlay canvas (positioned over the title by websites-scroll.js).
   Only present once the scroll system mounts it; the plain white <h2> is the
   fallback if JS / GSAP never run. */
.arc-build__pixels {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.arc-build__lead {
  margin: clamp(20px, 3vw, 30px) 0 0;
  max-width: 56ch;
  font-family: var(--arc-font-sans);
  font-size: clamp(1rem, 1.3vw, 1.2rem);
  line-height: 1.6;
  color: rgba(237, 238, 242, 0.66);
}

.arc-build__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.arc-build__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(20px, 5vw, 64px);
  align-items: center;
  padding: clamp(28px, 4vw, 44px) 0;
  border-top: 1px solid rgba(237, 238, 242, 0.12);
}
.arc-build__item:last-child {
  border-bottom: 1px solid rgba(237, 238, 242, 0.12);
}

.arc-build__num {
  order: 2;
  justify-self: end;
  text-align: right;
  font-family: var(--arc-font-mono);
  font-size: clamp(2.6rem, 7vw, 6rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--arc-vermillion);
}

.arc-build__body {
  order: 1;
  max-width: 64ch;
}

.arc-build__name {
  margin: 0;
  font-family: var(--arc-font-display, 'Newsreader', Georgia, serif);
  font-weight: 500;
  font-size: clamp(2.2rem, 5vw, 4rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--arc-frost);
}

@media (max-width: 768px) {
  .arc-build__item {
    grid-template-columns: 1fr;
    gap: 8px;
    padding-block: 26px;
  }
}

/* ── VISIBILITY — present in Google & AI (websites.html only) ────────────────
   Replaces the old arc-value cards. Light editorial 2-column block: left copy,
   right a stack of floating panels (Google result / ChatGPT answer / site
   preview) that converge right→left on scroll. The scroll converge and the arc
   "draw-in" live in buildVisibility() (websites-scroll.js); everything below is
   the assembled, fully-drawn fallback for no-JS / reduced-motion. Brand accent is
   the real --arc-vermillion token; Google/ChatGPT use real /assets/picture art. */
.arc-visible {
  position: relative;
  overflow: hidden;
  background: #ffffff;
  padding-block: clamp(84px, 9vw, 136px);
}

/* decorative arc / sweep line system (draws in on enter) */
.arc-visible__lines {
  position: absolute;
  top: -8%;
  left: 0;
  width: 100%;
  height: 116%;            /* 8% bleed top/bottom so [data-parallax] never gaps */
  z-index: 0;
  pointer-events: none;
}
.arc-visible__ring,
.arc-visible__sweep {
  fill: none;
  stroke: var(--arc-cloud);
  stroke-width: 1;
  opacity: 0.55;
}
.arc-visible__sweep--accent {
  stroke: var(--arc-vermillion);
  stroke-width: 1.2;
  opacity: 0.26;
}

.arc-visible__inner {
  position: relative;
  z-index: 1;
  width: min(100% - 48px, 1180px);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: clamp(40px, 5.5vw, 84px);
  align-items: center;
}

/* LEFT — copy */
.arc-visible__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
  font-family: var(--arc-font-mono);
  font-size: 0.74rem;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--arc-vermillion);
}
.arc-visible__eyebrow-rule {
  width: 30px;
  height: 1px;
  background: var(--arc-vermillion);
  opacity: 0.55;
}

.arc-visible__title {
  margin: 0;
  font-family: var(--arc-font-display);
  font-weight: 500;
  font-size: clamp(2.1rem, 3.9vw, 3.5rem);
  line-height: 1.07;
  letter-spacing: -0.02em;
  color: var(--arc-ink);
}
.arc-visible__title > span { display: block; }
.arc-visible__hl { color: var(--arc-vermillion); }

.arc-visible__lead {
  margin: clamp(18px, 2.4vw, 26px) 0 0;
  max-width: 52ch;
  font-family: var(--arc-font-sans);
  font-size: clamp(1.02rem, 1.25vw, 1.18rem);
  line-height: 1.62;
  color: var(--arc-steel);
}

.arc-visible__chips {
  list-style: none;
  margin: clamp(22px, 3vw, 30px) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.arc-visible__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--arc-cloud);
  border-radius: 999px;
  background: var(--arc-vermillion-quiet);
  font-family: var(--arc-font-sans);
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--arc-ink);
}
.arc-visible__chip svg {
  width: 15px;
  height: 15px;
  color: var(--arc-vermillion);
  flex: none;
}

.arc-visible__cta {
  margin-top: clamp(26px, 3.4vw, 38px);
}
.arc-visible__cta .btn {
  height: 46px;
  padding: 0 26px;
  font-size: 0.95rem;
}

/* RIGHT — floating panels (assembled / fallback state) */
.arc-visible__stage { position: relative; }
.arc-visible__panels {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.arc-visible__panel {
  position: relative;
  width: min(86%, 410px);
  will-change: transform;
}
.arc-visible__panel--google  { align-self: flex-start; z-index: 3; transform: rotate(-3deg); }
.arc-visible__panel--chatgpt { align-self: flex-end;   z-index: 4; margin-top: clamp(-58px, -3vw, -28px); transform: rotate(2.5deg); }
.arc-visible__panel--site    { align-self: flex-start; z-index: 2; margin-left: 7%; margin-top: clamp(-46px, -2.4vw, -22px); transform: rotate(3.5deg); }

.arc-visible__card {
  background: var(--arc-paper);
  border: 1px solid var(--arc-cloud);
  border-radius: 18px;
  padding: 16px;
  box-shadow:
    0 1px 2px rgba(27, 30, 42, 0.04),
    0 26px 50px -26px rgba(27, 30, 42, 0.26);
  transition:
    transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.arc-visible__panel:hover .arc-visible__card {
  transform: translateY(-5px);
  box-shadow:
    0 2px 6px rgba(212, 56, 40, 0.07),
    0 34px 60px -28px rgba(27, 30, 42, 0.34);
}

/* shared logo art */
.arc-visible__brandmark {
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex: none;
  display: block;
}
.arc-visible__brandmark--chat {
  width: 26px;
  height: 26px;
  border-radius: 7px;
}

/* Card 1 — Google search result */
.arc-visible__searchbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border: 1px solid var(--arc-cloud);
  border-radius: 999px;
  background: var(--arc-card);
}
.arc-visible__searchq {
  flex: 1;
  min-width: 0;
  font-family: var(--arc-font-sans);
  font-size: 0.84rem;
  color: var(--arc-ink-70);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.arc-visible__searchicon {
  width: 16px;
  height: 16px;
  color: var(--arc-steel);
  flex: none;
}
.arc-visible__result {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 14px;
}
.arc-visible__result-tag {
  align-self: flex-start;
  margin-bottom: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--arc-vermillion-quiet);
  color: var(--arc-vermillion);
  font-family: var(--arc-font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.arc-visible__result-url {
  font-family: var(--arc-font-sans);
  font-size: 0.74rem;
  color: var(--arc-steel);
}
.arc-visible__result-title {
  font-family: var(--arc-font-sans);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--arc-ink);
}
.arc-visible__result-desc {
  font-family: var(--arc-font-sans);
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--arc-steel);
}

/* Card 2 — ChatGPT answer */
.arc-visible__chat-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.arc-visible__chat-name {
  font-family: var(--arc-font-sans);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--arc-ink);
}
.arc-visible__chat-msg {
  margin: 0;
  font-family: var(--arc-font-sans);
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--arc-ink);
}
.arc-visible__chat-cite {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--arc-cloud);
  font-family: var(--arc-font-sans);
  font-size: 0.78rem;
  color: var(--arc-steel);
}
.arc-visible__chat-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--arc-vermillion);
  flex: none;
}

/* Card 3 — website / dashboard preview */
.arc-visible__site-bar {
  display: flex;
  gap: 6px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--arc-cloud);
}
.arc-visible__site-bar span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--arc-cloud);
}
.arc-visible__site-title {
  display: block;
  font-family: var(--arc-font-display);
  font-weight: 500;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: var(--arc-ink);
}
.arc-visible__metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 14px 0;
}
.arc-visible__metric {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px;
  border-radius: 11px;
  background: var(--arc-card);
}
.arc-visible__metric b {
  font-family: var(--arc-font-sans);
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--arc-vermillion);
}
.arc-visible__metric span {
  font-family: var(--arc-font-sans);
  font-size: 0.68rem;
  color: var(--arc-steel);
}
.arc-visible__bars {
  display: flex;
  align-items: flex-end;
  gap: 7px;
  height: 56px;
}
.arc-visible__bars span {
  flex: 1;
  border-radius: 4px 4px 0 0;
  background: var(--arc-vermillion-soft);
}
.arc-visible__bars span:nth-child(1) { height: 40%; }
.arc-visible__bars span:nth-child(2) { height: 62%; }
.arc-visible__bars span:nth-child(3) { height: 50%; }
.arc-visible__bars span:nth-child(4) { height: 78%; }
.arc-visible__bars span:nth-child(5) { height: 90%; background: var(--arc-vermillion); }
.arc-visible__bars span:nth-child(6) { height: 68%; }

/* ── responsive ── */
@media (max-width: 900px) {
  .arc-visible__inner {
    grid-template-columns: 1fr;
    gap: clamp(40px, 8vw, 60px);
  }
  .arc-visible__copy { max-width: 640px; }
  .arc-visible__stage {
    width: 100%;
    max-width: 520px;
    margin-inline: auto;
  }
}
@media (max-width: 560px) {
  .arc-visible__panel { width: min(94%, 360px); }
  .arc-visible__panel--google  { transform: rotate(-1.6deg); }
  .arc-visible__panel--chatgpt { margin-top: -20px; transform: rotate(1.4deg); }
  .arc-visible__panel--site    { margin-left: 4%; margin-top: -16px; transform: rotate(2deg); }
  .arc-visible__metric { padding: 8px; }
  .arc-visible__metric b { font-size: 0.95rem; }
}

/* ───────────────────────────────────────────────────────────────────────────
   CLIENT LOGOS — "Estás en buenas manos"  (websites.html only)
   Adapted from the reference Clients gallery: a staggered clip-path wipe
   reveal + a title underline "draw". Everything is isolated under
   .arc-client-logos and only borrows ARC tokens/type. The DEFAULT state below
   is the no-JS / reduced-motion / GSAP-bail fallback (logos visible, underline
   already drawn); websites-scroll.js hides + reveals only when motion is OK.
   --------------------------------------------------------------------------- */
.arc-client-logos {
  position: relative;
  background: var(--arc-frost);
  padding-block: clamp(84px, 9vw, 132px);
}

.arc-client-logos__inner {
  width: min(100% - 48px, 1280px);
  margin-inline: auto;
}

.arc-client-logos__title {
  margin: 0 0 clamp(40px, 5vw, 66px);
  text-align: left;
  font-family: var(--arc-font-display);
  font-weight: 500;
  font-size: clamp(2rem, 3.8vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--arc-ink);
}
/* one line, left-aligned: the two phrases sit inline with a normal word space */
.arc-client-logos__line { display: inline; }

/* highlighted phrase + animated underline (vermillion "draw") */
.arc-client-logos__hl {
  --arc-logos-underline: 1;          /* 0 → 1 driven by JS; default = drawn */
  position: relative;
  display: inline-block;
  color: var(--arc-ink);
}
/* slightly curved underline — mirrors the reference "underlineCurve" highlight.
   It draws left→right via stroke-dashoffset, off the same --arc-logos-underline
   var the JS already animates (default 1 = fully drawn = no-JS fallback). */
.arc-client-logos__curve {
  position: absolute;
  left: 0;
  bottom: -0.22em;
  width: 100%;
  height: 0.46em;
  overflow: visible;
  pointer-events: none;
}
.arc-client-logos__curve path {
  fill: none;
  stroke: var(--arc-vermillion);
  stroke-width: 3;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;   /* keep thickness even though the path is stretched */
  stroke-dasharray: 1;                  /* pathLength="1" → normalized draw */
  stroke-dashoffset: calc(1 - var(--arc-logos-underline));
}

/* grid — wide on desktop, fewer columns as the viewport narrows */
.arc-client-logos__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(16px, 2.4vw, 40px);
}

.arc-client-logos__item {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;         /* tall "widescreen" cell, as in the reference gallery */
  overflow: hidden;             /* clip the cover zoom (only empty PNG margin is cropped) */
}

.arc-client-logos__image {
  display: block;
  width: 100%;
  height: 100%;
  /* The source PNGs are 1000×400 canvases with the actual mark sitting small in
     the centre, surrounded by wide empty margins. `cover` (like the reference
     gallery) zooms past those margins so the logo reads at a usable size; the
     tall 16/9 cell only crops the empty left/right whitespace, never the mark. */
  object-fit: cover;
  opacity: 0.62;
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.arc-client-logos__item:hover .arc-client-logos__image {
  opacity: 1;
  transform: translateY(-4px) scale(1.04);
}

/* ── responsive ── */
@media (max-width: 1100px) {
  .arc-client-logos__grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 760px) {
  .arc-client-logos__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 480px) {
  .arc-client-logos__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
}

/* reduced motion → no hover lift / transitions (reveal JS is already off) */
@media (prefers-reduced-motion: reduce) {
  .arc-client-logos__image { transition: none; }
  .arc-client-logos__item:hover .arc-client-logos__image { transform: none; }
}

/* ── ELEVATE EXPERIENCES — concentric experience model (websites.html only) ──
   Orange palette: the four rings step from the lightest tone (outer / Brand
   Experience) to pure #D43828 (centre / Brand Core). Same tones drive the left
   list dots; the thin list rules ("divider lines") use the soft vermillion tone
   so they read as the orange palette. Rings are nested absolutely-positioned
   circles, each label parked in its own exposed band (padding-top % is relative
   to the .arc-elevate__rings width, which is square, so the maths is stable). */
.arc-elevate {
  --arc-exp-1: #FCEAE7; /* Brand Experience    — outer, lightest */
  --arc-exp-2: #F3BDB5; /* Customer Experience */
  --arc-exp-3: #E5897E; /* User Experience     */
  --arc-exp-4: #D43828; /* Brand Core          — centre, pure vermillion */

  background: #f6f7f7;
  padding-block: clamp(88px, 10vw, 140px);
}

.arc-elevate__inner {
  width: min(100% - 48px, 1180px);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
}

.arc-elevate__eyebrow {
  display: inline-block;
  margin: 0 0 16px;
  font-family: var(--arc-font-mono);
  font-size: 0.74rem;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--arc-vermillion);
}

.arc-elevate__title {
  margin: 0;
  font-family: var(--arc-font-display);
  font-weight: 500;
  font-size: clamp(2rem, 3.6vw, 3.2rem);
  line-height: 1.07;
  letter-spacing: -0.02em;
  color: var(--arc-ink);
}
.arc-elevate__title > span { display: block; }

.arc-elevate__subtitle {
  margin: clamp(16px, 2.2vw, 22px) 0 0;
  max-width: 48ch;
  font-family: var(--arc-font-sans);
  font-size: clamp(1rem, 1.25vw, 1.15rem);
  line-height: 1.6;
  color: var(--arc-steel);
}

.arc-elevate__layers {
  list-style: none;
  margin: clamp(26px, 3.4vw, 40px) 0 0;
  padding: 0;
}

.arc-elevate__layer {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 14px;
  row-gap: 3px;
  padding: clamp(14px, 1.7vw, 19px) 0;
  border-top: 1px solid var(--arc-vermillion-soft); /* orange palette divider */
}

.arc-elevate__layer-dot {
  grid-row: 1 / span 2;
  align-self: start;
  width: 13px;
  height: 13px;
  margin-top: 0.42em;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(27, 30, 42, 0.10);
}
.arc-elevate__layer-dot--1 { background: var(--arc-exp-1); }
.arc-elevate__layer-dot--2 { background: var(--arc-exp-2); }
.arc-elevate__layer-dot--3 { background: var(--arc-exp-3); }
.arc-elevate__layer-dot--4 { background: var(--arc-exp-4); }

.arc-elevate__layer-name {
  grid-column: 2;
  font-family: var(--arc-font-sans);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -0.01em;
  color: var(--arc-ink);
}

.arc-elevate__layer-desc {
  grid-column: 2;
  font-family: var(--arc-font-sans);
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--arc-steel);
}

/* Concentric rings */
.arc-elevate__rings {
  position: relative;
  width: min(100%, 470px);
  margin-inline: auto;
  aspect-ratio: 1;
}

.arc-elevate__ring {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.arc-elevate__ring--1 { width: 100%; height: 100%; background: var(--arc-exp-1); padding-top: 6%; }
.arc-elevate__ring--2 { width: 74%;  height: 74%;  background: var(--arc-exp-2); padding-top: 6%; }
.arc-elevate__ring--3 { width: 50%;  height: 50%;  background: var(--arc-exp-3); padding-top: 5%; }
.arc-elevate__ring--4 {
  width: 27%;
  height: 27%;
  background: var(--arc-exp-4);
  align-items: center;
  padding-top: 0;
  box-shadow: 0 16px 34px -12px rgba(212, 56, 40, 0.55);
}

.arc-elevate__ring-label {
  font-family: var(--arc-font-mono);
  font-size: clamp(0.55rem, 1.5vw, 0.78rem);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  line-height: 1;
  color: var(--arc-ink);
}
.arc-elevate__ring-label--core { color: #ffffff; }

@media (max-width: 900px) {
  .arc-elevate__inner {
    grid-template-columns: 1fr;
    gap: clamp(36px, 7vw, 56px);
  }
  .arc-elevate__copy { max-width: 640px; }
}