/* ============================================================
   DESIGN CONCEPT V2 — tokens captured from the new moberg.hr
   (moberg-web ... azurewebsites.net, live computed styles)
   Brand #430cda · Futura display · white canvas · violet footer
   Prototype rules kept: hatched image placeholders, no photos.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@500;600;700&family=Inter:wght@400;500;600&display=swap');

:root {
  --brand: #430cda;         /* --color-brand (verified) */
  --brand-dark: #3209b8;    /* --color-brand-dark (verified) */
  --brand-light: #5e2ee8;   /* --color-brand-light (verified) */
  --ink: #111111;           /* --foreground (verified) */
  --bg: #ffffff;            /* --background (verified) */
  --ash: #6b6b6b;
  --line: rgba(17,17,17,0.12);
  --light: #ffffff;
  --light-dim: rgba(255,255,255,0.6);
  --radius: 16px;
  --radius-s: 10px;
  --display: "Jost", Futura, "Trebuchet MS", Arial, sans-serif;  /* hosted Futura twin — no Trebuchet fallback for the ICP on Windows */
  --body: "Inter", Arial, Helvetica, sans-serif;
}

/* Black & white wireframe prototype — Moberg
   Pure greyscale. Borders over fills. No shadows. No images. */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: #fff;
  color: #111;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
}

a {
  color: #111;
  text-decoration: underline;
  text-underline-offset: 3px;
}
a:hover { color: #000; background: #f0f0f0; }

h1, h2, h3, h4 { font-weight: 600; line-height: 1.2; margin: 0 0 0.6em; }
h1 { font-size: 2.2rem; }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.15rem; }
p  { margin: 0 0 1em; }

.wrap { max-width: 1100px; margin: 0 auto; padding: 0 24px; }

/* Wireframe banner */
.wireframe-banner {
  background: #111; color: #fff;
  font-size: 12px; letter-spacing: 1px; text-transform: uppercase;
  padding: 6px 16px; text-align: center;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}

/* Nav — sticky to the top of the viewport on scroll */
.nav {
  border-bottom: 1px solid #111;
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 100;
}
.nav-inner {
  max-width: 1100px; margin: 0 auto; padding: 16px 24px;
  display: flex; align-items: center; gap: 24px;
}
.brand {
  font-weight: 700; text-transform: lowercase;
  text-decoration: none; font-size: 1.1rem;
  border: 1px solid #111; padding: 4px 10px;
}
.nav-links { display: flex; gap: 18px; flex: 1; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.nav-links a { text-decoration: none; font-size: 0.95rem; }
.nav-links a.current { font-weight: 700; text-decoration: underline; }

/* Nav dropdown — appears on hover/focus for Industries */
.nav-dropdown { position: relative; }
.nav-dropdown > a { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.nav-dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  background: #fff;
  border: 1px solid #111;
  min-width: 220px;
  z-index: 200;
  padding: 6px 0;
  display: none;
  box-shadow: 0 4px 0 rgba(0,0,0,0.05);
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu { display: block; }
.nav-dropdown-menu a {
  display: block;
  padding: 7px 14px;
  font-size: 0.88rem;
  text-decoration: none;
  white-space: nowrap;
  color: #111;
}
.nav-dropdown-menu a:hover, .nav-dropdown-menu a:focus { background: #f1f1f1; }
.nav-dropdown-menu a.current { font-weight: 700; text-decoration: underline; }
.nav-cta {
  border: 1px solid #111; padding: 6px 14px;
  text-decoration: none; font-size: 0.9rem;
}
.nav-cta:hover { background: #111; color: #fff; }

/* Breadcrumbs */
.crumbs {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px; color: #555;
  padding: 12px 0;
  border-bottom: 1px dashed #ccc;
}
.crumbs a { color: #555; }

/* Hero / page header */
.hero, .page-hero {
  padding: 48px 0 32px;
  border-bottom: 1px solid #111;
}
.eyebrow {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px; letter-spacing: 2px; text-transform: uppercase;
  color: #555;
}
.lede { font-size: 1.15rem; max-width: 700px; color: #333; }

/* Generic sections */
section { padding: 36px 0; border-bottom: 1px dashed #ccc; }
section:last-of-type { border-bottom: 1px solid #111; }

/* Box / card */
.box {
  border: 1px solid #111; padding: 18px;
  margin-bottom: 16px; background: #fff;
}
.box .meta {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
  color: #555; margin-bottom: 8px;
}
.box h3 { margin-bottom: 6px; }
.box p { margin-bottom: 10px; color: #333; }
.box a.more {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px;
}

/* Grids */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
/* grid-3 uses centered flex-wrap so an uneven last row centers instead of left-aligning */
.grid-3 { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.grid-3 > * { flex: 0 1 calc((100% - 32px) / 3); margin-bottom: 0; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 800px) {
  .grid-2, .grid-4 { grid-template-columns: 1fr; }
  .grid-3 > * { flex-basis: 100%; }
  .nav-inner { flex-wrap: wrap; }
}

/* Buttons */
.btn {
  display: inline-block;
  border: 1px solid #111; padding: 10px 18px;
  text-decoration: none; font-size: 0.95rem;
  margin-right: 10px;
}
.btn-primary { background: #111; color: #fff; }
.btn-primary:hover { background: #fff; color: #111; }
.btn-ghost { background: #fff; color: #111; }
.btn-ghost:hover { background: #111; color: #fff; }

/* Filter chips */
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }
.chip {
  border: 1px solid #111; background: #fff; color: #111;
  padding: 4px 12px; font-size: 0.85rem;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  cursor: pointer;
}
.chip.active { background: #111; color: #fff; }

/* Stories — toolbar (filters + search) */
.story-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin: 14px 0 18px;
  padding: 12px 14px;
  border: 1px solid #111;
}
.story-toolbar .chips { margin-bottom: 0; }
.story-search { display: flex; align-items: center; gap: 6px; }
.story-search input {
  border: 1px solid #111;
  background: #fff;
  padding: 6px 10px;
  font: inherit;
  font-size: 0.85rem;
  min-width: 240px;
}
.story-search .label-mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.8rem; }

/* Stories — vertical list */
.story-list { display: flex; flex-direction: column; gap: 12px; }
.story-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 18px;
  border: 1px solid #111;
  padding: 12px;
  text-decoration: none;
  color: #111;
  align-items: center;
}
.story-row:hover { background: #f6f6f6; }
.story-row .story-thumb {
  border: 1px solid #111;
  background: repeating-linear-gradient(45deg, #fff 0 6px, #f0f0f0 6px 12px);
  height: 80px;
  display: flex; align-items: center; justify-content: center;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.7rem;
  color: #555;
  text-align: center;
  padding: 4px;
}
.story-row .story-body .meta { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.78rem; color: #555; margin-bottom: 4px; }
.story-row .story-body h3 { margin: 0 0 4px 0; font-size: 1rem; }
.story-row .story-body p { margin: 0; font-size: 0.88rem; }
.story-empty { padding: 24px; text-align: center; color: #555; border: 1px dashed #777; font-family: ui-monospace, "SF Mono", Menlo, monospace; }
@media (max-width: 700px) { .story-row { grid-template-columns: 1fr; } }

/* Stat block */
.stat {
  border: 1px solid #111; padding: 14px; text-align: center;
}
.stat .num { font-size: 2rem; font-weight: 700; }
.stat .label { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; color: #555; }

/* Lists */
ul.plain { padding-left: 18px; }
ul.plain li { margin-bottom: 6px; }

/* Image placeholder */
.placeholder {
  border: 1px solid #111;
  background:
    repeating-linear-gradient(45deg, transparent 0 8px, #eee 8px 9px);
  display: flex; align-items: center; justify-content: center;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px; color: #555;
  min-height: 140px;
}

/* Form */
form .row { margin-bottom: 14px; display: flex; flex-direction: column; gap: 4px; }
form label { font-size: 0.85rem; color: #333; }
form input, form textarea, form select {
  border: 1px solid #111; padding: 8px; font-size: 0.95rem; background: #fff;
  font-family: inherit;
}
form textarea { min-height: 100px; }

/* Footer */
footer {
  border-top: 1px solid #111;
  padding: 24px; font-size: 0.85rem; color: #555;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
footer .wrap { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* Client logo strip — rendered as text list in B/W (legacy) */
.client-strip {
  border: 1px solid #111;
  padding: 12px 16px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 13px;
  line-height: 1.9;
  word-spacing: 4px;
}

/* Trusted-by marquee — auto-scrolling client logo carousel */
.brand-marquee {
  position: relative;
  overflow: hidden;
  margin-top: 14px;
  border-top: 1px solid #111;
  border-bottom: 1px solid #111;
  padding: 18px 0;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.brand-marquee-track {
  display: flex;
  gap: 28px;
  width: max-content;
  animation: brand-marquee 60s linear infinite;
}
.brand-marquee:hover .brand-marquee-track { animation-play-state: paused; }
.brand-logo {
  border: 1px solid #111;
  background: #fff;
  padding: 14px 22px;
  min-width: 140px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  flex-shrink: 0;
  white-space: nowrap;
}
@keyframes brand-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Sitemap (on About / footer) */
.sitemap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.sitemap h4 { font-size: 0.9rem; }
.sitemap ul { list-style: none; padding: 0; margin: 0; }
.sitemap li { margin: 4px 0; font-size: 0.85rem; }
@media (max-width: 1000px) { .sitemap { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px)  { .sitemap { grid-template-columns: 1fr 1fr; } }

/* Footer top — sitemap on the left, partner block flush right (aligned with "Get in Touch" button) */
.footer-top { display: grid; grid-template-columns: auto auto; justify-content: space-between; gap: 40px; align-items: start; }
@media (max-width: 900px) { .footer-top { grid-template-columns: 1fr; justify-content: stretch; gap: 32px; } }
.partner-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;
  text-align: right;
  margin-left: auto;          /* always pushed to the right */
}
.partner-block .meta { width: 100%; text-align: right; font-size: 0.7rem; }
/* Cards stack vertically, no outer box — just a logo + label */
.partner-block-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-end;
}
.partner-card {
  display: flex;
  flex-direction: row-reverse;  /* logo sits on the right edge, flush with the footer's right side */
  align-items: center;
  gap: 10px;
  border: 0;
  padding: 0;
  background: none;
  width: auto;
}
.partner-card .placeholder {
  width: 52px;
  height: 52px;
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
  min-height: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.55rem;
  padding: 4px;
  line-height: 1.15;
}
.partner-card .partner-label {
  font-size: 0.72rem;
  line-height: 1.3;
  text-align: right;
  max-width: 200px;
}
@media (max-width: 900px) {
  .partner-block { align-items: flex-start; text-align: left; margin-left: 0; }
  .partner-block .meta { text-align: left; }
  .partner-block-cards { align-items: flex-start; }
  .partner-card { flex-direction: row; }
  .partner-card .partner-label { text-align: left; }
}

/* ============ ACCELERATOR PAGES ============ */

/* Quote at top of an accelerator section */
.accel-quote {
  border-left: 4px solid #111;
  padding: 14px 20px;
  margin: 14px 0 24px;
  background: #fafafa;
}
.accel-quote p {
  font-size: 1.05rem;
  margin: 0 0 10px;
  color: #111;
  font-style: italic;
}
.accel-quote .attrib {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: #555;
  font-style: normal;
}

/* Interactive architecture widget — tabbed module navigator */
.arch {
  border: 1px solid #111;
  padding: 18px;
  margin: 18px 0 8px;
  background: #fff;
}
.arch-title {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: #555;
  margin-bottom: 10px;
}
.arch-tabs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-bottom: 18px;
}
@media (max-width: 900px) { .arch-tabs { grid-template-columns: repeat(2, 1fr); } }

/* Accelerator switcher — left-rail tabs for multi-accelerator industry pages */
.accel-switch {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 24px;
  margin-top: 18px;
}
@media (max-width: 900px) { .accel-switch { grid-template-columns: 1fr; } }
.accel-switch-nav { display: flex; flex-direction: column; gap: 8px; }
@media (max-width: 900px) { .accel-switch-nav { flex-direction: row; flex-wrap: wrap; } }
.accel-switch-tab {
  border: 1px solid #111;
  background: #fff;
  color: #111;
  padding: 14px 16px;
  text-align: left;
  cursor: pointer;
  font: inherit;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: background 120ms ease, color 120ms ease;
}
.accel-switch-tab:hover { background: #f4f4f4; }
.accel-switch-tab .accel-switch-label {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: #555;
}
.accel-switch-tab .accel-switch-name { font-weight: 700; font-size: 1rem; line-height: 1.25; }
.accel-switch-tab .accel-switch-tag {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10px; letter-spacing: 0.5px; color: #555; text-transform: uppercase;
  line-height: 1.3; margin-top: 2px;
}
.accel-switch-tab.is-active { background: #111; color: #fff; }
.accel-switch-tab.is-active .accel-switch-label,
.accel-switch-tab.is-active .accel-switch-tag { color: #ccc; }
.accel-pane { display: none; }
.accel-pane.is-active { display: block; }

/* Beta tag — quiet, monospace, distinguishable from titles (not competing) */
.beta-tag {
  display: inline-block;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.62em;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #777;
  background: transparent;
  border: 1px solid #bbb;
  padding: 1px 6px;
  margin-left: 8px;
  vertical-align: middle;
  border-radius: 2px;
  line-height: 1.4;
}
.nav-dropdown-menu .beta-tag { font-size: 9px; margin-left: 6px; }
.arch-tab {
  border: 1px solid #111;
  background: #fff;
  color: #111;
  padding: 12px 10px;
  text-align: left;
  cursor: pointer;
  font: inherit;
  display: flex;
  flex-direction: column;
  gap: 3px;
  transition: background 120ms ease, color 120ms ease;
  text-decoration: none;
}
.arch-tab:hover { background: #f4f4f4; }
.arch-tab .arch-num {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px; letter-spacing: 1px; color: #555;
}
.arch-tab .arch-name { font-weight: 700; font-size: 0.95rem; line-height: 1.2; }
.arch-tab .arch-tag {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10px; letter-spacing: 0.5px; color: #555; text-transform: uppercase;
  line-height: 1.3;
}
.arch-tab.is-active { background: #111; color: #fff; }
.arch-tab.is-active .arch-num,
.arch-tab.is-active .arch-tag { color: #ccc; }
.arch-panel { display: none; }
.arch-panel.is-active { display: block; }
.arch-panel h4 { font-size: 1.1rem; margin: 0 0 6px; }
.arch-panel .arch-lede { color: #333; margin-bottom: 12px; max-width: 720px; }
.arch-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 800px) { .arch-cols { grid-template-columns: 1fr; } }
.arch-cols h5 {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: #555;
  margin: 0 0 8px;
}

/* Discovery / process strip */
.process { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 18px; }
@media (max-width: 900px) { .process { grid-template-columns: 1fr 1fr; } }
.process-step { border: 1px solid #111; padding: 14px; }
.process-step .step-num {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px; letter-spacing: 1px; color: #555;
}
.process-step h3 { font-size: 1.05rem; margin: 4px 0 6px; }
.process-step p { margin: 0; font-size: 0.9rem; color: #333; }

/* Comparison table — accelerator vs SaaS / legacy / from-scratch */
.compare {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #111;
  font-size: 0.9rem;
  margin-top: 18px;
}
.compare th, .compare td {
  border: 1px solid #111;
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
}
.compare th {
  background: #f4f4f4;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
  font-weight: 700;
}
.compare th.us { background: #111; color: #fff; }
.compare td.us { background: #fafafa; font-weight: 600; }
.compare td.label {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
  color: #555; background: #fafafa;
}
@media (max-width: 700px) { .compare { font-size: 0.82rem; } .compare th, .compare td { padding: 8px; } }

/* Footer bottom — copyright at bottom-left, social icons at bottom-right corner */
.footer-bottom { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; gap: 40px; flex-wrap: wrap; }
.social-links {
  display: flex;
  gap: 6px;
  margin-left: auto;
  /* sits at the same right edge as the partner block and the "Get in Touch" button */
}
.social-links a {
  border: 1px solid #111;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  text-decoration: none;
  padding: 0;
}


/* ============================================================
   V2 OVERRIDES — the captured moberg.hr design system
   ============================================================ */

html, body { background: var(--bg); color: var(--ink); font-family: var(--body); font-size: 16px; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; letter-spacing: -0.025em; }
h1 { font-size: clamp(2.4rem, calc(6.111vw * var(--vz, 1)), 4rem); line-height: 1.05; }
h2 { font-size: clamp(1.6rem, calc(3.556vw * var(--vz, 1)), 2.6rem); line-height: 1.12; }
a:hover { color: var(--brand); background: transparent; }

/* Banner */
.wireframe-banner { background: var(--ink); color: var(--light-dim); }
.wireframe-banner a { color: #fff; }

/* Nav — light, sticky, brand pill CTA (as on the live site) */
.nav { background: var(--bg); border-bottom: 1px solid var(--line); }
.nav .brand { border: 0; padding: 4px 0; font-family: var(--display); font-weight: 700; font-size: 1.25rem; }
.nav-links a.current { text-decoration-color: var(--brand); color: var(--brand); }
.nav-links a:hover { color: var(--brand); }
.nav-dropdown-menu { border: 1px solid var(--line); border-radius: var(--radius-s); box-shadow: 0 10px 30px rgba(17,17,17,0.08); overflow: hidden; }
.nav-dropdown-menu a:hover, .nav-dropdown-menu a:focus { background: #f4f2fd; color: var(--brand); }
.nav-cta { background: var(--brand); border: 0; border-radius: 999px; color: #fff; padding: 8px 20px; font-weight: 700; font-size: 14px; }
.nav-cta:hover { background: var(--brand-dark); color: #fff; }

/* Hero — dark stage standing in for the site's hero video */
.hero, .page-hero { background: var(--ink); color: #fff; border-bottom: 0; padding: 72px 0 56px; }
.hero .lede, .page-hero .lede { color: var(--light-dim); }
.hero .eyebrow, .page-hero .eyebrow { color: var(--light-dim); }
.hero .placeholder, .page-hero .placeholder {
  border-color: rgba(255,255,255,0.25); color: rgba(255,255,255,0.55);
  background: repeating-linear-gradient(45deg, transparent 0 8px, rgba(255,255,255,0.07) 8px 9px);
}
.hero a:not(.btn), .page-hero a:not(.btn) { color: #fff; }
.hero p[style*="color:#555"], .page-hero p[style*="color:#555"] { color: var(--light-dim) !important; }
/* Hero buttons: white pill primary + outline ghost (as captured) */
.hero .btn-primary, .page-hero .btn-primary { background: #fff; color: var(--ink); border: 0; }
.hero .btn-primary:hover, .page-hero .btn-primary:hover { background: var(--brand); color: #fff; }
.hero .btn-ghost, .page-hero .btn-ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.5); }
.hero .btn-ghost:hover, .page-hero .btn-ghost:hover { background: #fff; color: var(--ink); }

/* Eyebrow */
.eyebrow { color: var(--brand); font-family: var(--display); font-weight: 700; letter-spacing: 1.5px; font-size: 13px; }

/* Sections */
section { padding: 64px 0; border-bottom: 1px solid var(--line); }
section:last-of-type { border-bottom: 0; }
.crumbs { border-bottom: 1px solid var(--line); color: var(--ash); }
.lede { color: #3a3a3a; font-size: 1.2rem; }

/* Cards */
.box { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; transition: border-color 140ms ease, box-shadow 140ms ease; }
.box:hover { border-color: var(--brand); }
.box .meta { color: var(--ash); }
.box a.more:hover { color: var(--brand); }

/* Buttons — brand pills, bold (as captured) */
.btn { border-radius: 999px; padding: 12px 26px; font-weight: 700; font-size: 15px; border: 0; }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-dark); color: #fff; }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.btn-ghost:hover { background: var(--ink); color: #fff; }

/* Numbered lists — the 01 / 02 / 03 pattern, brand at 40% (as captured) */
ul.plain { list-style: none; padding-left: 0 !important; counter-reset: pl; }
ul.plain li { counter-increment: pl; position: relative; padding: 10px 0 10px 44px; margin-bottom: 0; border-top: 1px solid var(--line); }
ul.plain li:first-child { border-top: 0; }
ul.plain li::before {
  content: counter(pl, decimal-leading-zero);
  position: absolute; left: 0; top: 8px;
  font-family: var(--display); font-weight: 700; font-size: 0.95rem;
  color: var(--brand);
}

/* Stats */
.stat { border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 14px; }
.stat .num { font-family: var(--display); font-weight: 700; font-size: 2.6rem; color: var(--brand); letter-spacing: -0.02em; }
.stat .label { color: var(--ash); }

/* Chips, toolbar, story list */
.chip { border-radius: 999px; border-color: var(--line); }
.chip:hover { border-color: var(--brand); color: var(--brand); }
.chip.active { background: var(--brand); color: #fff; border-color: var(--brand); }
.story-toolbar { border: 1px solid var(--line); border-radius: var(--radius); }
.story-search input { border-radius: 999px; border-color: var(--line); padding: 7px 14px; }
.story-row { border: 1px solid var(--line); border-radius: var(--radius); transition: border-color 140ms ease; }
.story-row:hover { background: #fff; border-color: var(--brand); }
.story-row .story-thumb { border-radius: var(--radius-s); border-color: var(--line); }
.story-empty { border-radius: var(--radius); }

/* Placeholders */
.placeholder { border: 1px solid var(--line); border-radius: var(--radius-s); }

/* Process strip */
.process-step { border: 1px solid var(--line); border-radius: var(--radius); }
.process-step .step-num { color: var(--brand); font-family: var(--display); font-weight: 700; }

/* Compare / matrix tables */
.compare { border: 1px solid var(--line); border-radius: var(--radius); border-collapse: separate; border-spacing: 0; overflow: hidden; }
.compare th, .compare td { border: 0; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); }
.compare tr > *:last-child { border-right: 0; }
.compare tbody tr:last-child > * { border-bottom: 0; }
.compare th { background: var(--ink); color: #fff; }
.compare th.us { background: var(--brand); color: #fff; }
.compare td.us { background: #f2eefc; font-weight: 600; }
.compare td.label { background: #fafafa; }

/* Arch widget + tabs */
.arch { border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.arch-tab, .accel-switch-tab { border: 1px solid var(--line); border-radius: var(--radius-s); transition: border-color 140ms ease, background 140ms ease, color 140ms ease; }
.arch-tab:hover, .accel-switch-tab:hover { background: #f7f5fe; border-color: var(--brand); }
.arch-tab.is-active, .accel-switch-tab.is-active { background: var(--brand); color: #fff; border-color: var(--brand); }
.arch-tab.is-active .arch-num, .arch-tab.is-active .arch-tag { color: rgba(255,255,255,0.7); }
.arch-tab .arch-num { font-family: var(--display); font-weight: 700; color: rgba(67,12,218,0.5); }
.arch-tab .arch-name, .accel-switch-tab .accel-switch-name { font-family: var(--display); }

/* Quotes */
.accel-quote { border-left: 4px solid var(--brand); border-radius: 0 var(--radius-s) var(--radius-s) 0; }
blockquote { border-left-color: var(--brand) !important; }

/* Brand marquee */
.brand-marquee { border-color: var(--line); }
.brand-logo { border: 1px solid var(--line); border-radius: var(--radius-s); }

/* Forms */
form input, form textarea, form select { border: 1px solid var(--line); border-radius: var(--radius-s); }
form input:focus, form textarea:focus, form select:focus { outline: 2px solid var(--brand); outline-offset: 0; border-color: transparent; }
button.btn { font-family: inherit; cursor: pointer; }

/* Footer — brand violet with white text (verified on the live site) */
footer { background: var(--brand); border-top: 0; color: rgba(255,255,255,0.85); padding: 44px 24px 24px; font-family: var(--body); }
footer a { color: #fff; }
footer a:hover { color: #fff; text-decoration-color: #fff; opacity: 0.8; }
footer .sitemap h4 { color: #fff; font-family: var(--display); }
.partner-card .placeholder {
  border-color: rgba(255,255,255,0.4); color: rgba(255,255,255,0.7);
  background: repeating-linear-gradient(45deg, transparent 0 8px, rgba(255,255,255,0.12) 8px 9px);
  border-radius: var(--radius-s);
}
.partner-card .partner-label { color: rgba(255,255,255,0.85); }
.partner-block .meta, footer .meta { color: rgba(255,255,255,0.6); }
.social-links a { border: 1px solid rgba(255,255,255,0.5); border-radius: 999px; color: #fff; }
.social-links a:hover { background: #fff; color: var(--brand); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.25); padding-top: 14px; }

/* Beta tag */
.beta-tag { border-color: var(--line); color: var(--ash); border-radius: 999px; }


/* ============================================================
   SOLUTIONS INDEX — numbered editorial rows (moberg.hr pattern)
   ============================================================ */
.sol-index { border-top: 1px solid var(--line); margin-top: 24px; }
.sol-row {
  display: grid;
  grid-template-columns: 84px 1.1fr 1.3fr 48px;
  gap: 24px;
  align-items: center;
  padding: 26px 8px;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: var(--ink);
  transition: background 140ms ease;
}
.sol-row:hover { background: #f7f5fe; }
.sol-num {
  font-family: var(--display); font-weight: 700;
  font-size: 1.9rem; letter-spacing: -0.02em;
  color: rgba(67,12,218,0.35);
  transition: color 140ms ease;
}
.sol-row:hover .sol-num { color: var(--brand); }
.sol-challenge {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--ash); margin-bottom: 6px;
}
.sol-row:hover .sol-challenge { color: var(--brand); }
.sol-row h3 { margin: 0; font-size: 1.35rem; }
.sol-desc { margin: 0; color: #3a3a3a; font-size: 0.95rem; line-height: 1.55; }
.sol-arrow {
  font-size: 1.4rem; color: var(--ash); justify-self: end;
  transition: transform 140ms ease, color 140ms ease;
}
.sol-row:hover .sol-arrow { transform: translateX(6px); color: var(--brand); }
.sol-row.sol-start { background: var(--ink); color: #fff; border-radius: var(--radius); border-bottom: 0; margin-bottom: 10px; }
.sol-row.sol-start .sol-desc { color: rgba(255,255,255,0.75); }
.sol-row.sol-start .sol-challenge { color: rgba(255,255,255,0.6); }
.sol-row.sol-start .sol-num { color: var(--brand-light); }
.sol-row.sol-start:hover { background: var(--brand); }
.sol-row.sol-start:hover .sol-num, .sol-row.sol-start:hover .sol-challenge, .sol-row.sol-start:hover .sol-arrow { color: #fff; }
@media (max-width: 900px) {
  .sol-row { grid-template-columns: 56px 1fr 32px; }
  .sol-desc { grid-column: 2; grid-row: 2; }
  .sol-num { font-size: 1.4rem; }
}


/* ============================================================
   USE-CASE INDEX — numbered list on solution detail pages
   ============================================================ */
.uc-index { border-top: 1px solid var(--line); margin-top: 20px; }
.uc-row {
  display: grid;
  grid-template-columns: 64px 1fr 1.45fr;
  gap: 24px;
  align-items: start;
  padding: 22px 8px;
  border-bottom: 1px solid var(--line);
}
.uc-num {
  font-family: var(--display); font-weight: 700;
  font-size: 1.5rem; letter-spacing: -0.02em;
  color: rgba(67,12,218,0.35); line-height: 1.2;
}
.uc-row:hover .uc-num { color: var(--brand); }
.uc-meta {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--ash); margin-bottom: 4px;
}
.uc-row h3 { margin: 0; font-size: 1.15rem; }
.uc-desc { margin: 0; color: #3a3a3a; font-size: 0.95rem; line-height: 1.55; }
@media (max-width: 800px) {
  .uc-row { grid-template-columns: 48px 1fr; }
  .uc-desc { grid-column: 2; }
  .uc-num { font-size: 1.2rem; }
}

/* ============================================================
   VALUE PANEL — value + timing as one complete block
   ============================================================ */
.value-panel {
  background: var(--ink); color: #fff;
  border-radius: var(--radius);
  padding: 36px;
  display: grid; grid-template-columns: 1.6fr 1fr; gap: 36px;
  align-items: start;
}
.value-panel .vp-label {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--brand-light); margin-bottom: 12px;
}
.value-panel p { color: rgba(255,255,255,0.85); margin: 0; line-height: 1.65; }
.value-panel strong { color: #fff; }
.value-panel .vp-side { border-left: 1px solid rgba(255,255,255,0.18); padding-left: 36px; }
@media (max-width: 800px) {
  .value-panel { grid-template-columns: 1fr; padding: 26px; }
  .value-panel .vp-side { border-left: 0; padding-left: 0; border-top: 1px solid rgba(255,255,255,0.18); padding-top: 24px; }
}


/* ============================================================
   MAGMA / ICE EXPERIMENT
   The brand story made visible: cool "ice" resting surfaces,
   "magma" heat on interaction. Violet stays the action color.
   ============================================================ */
:root {
  --magma: #e8490f;
  --magma-tint: #fdeee6;
  --ice: #edf3f7;
  --ice-deep: #e2ebf2;
}

/* Ice — alternate sections rest on a cool glacial tint */
section:nth-of-type(even) { background: var(--ice); }
section:nth-of-type(even) .box,
section:nth-of-type(even) .stat,
section:nth-of-type(even) .process-step,
section:nth-of-type(even) .story-row,
section:nth-of-type(even) .arch { background: #fff; }

/* Magma meets ice — the signature hairline where dark meets light */
.hero, .page-hero {
  border-bottom: 3px solid;
  border-image: linear-gradient(90deg, var(--magma) 0%, var(--brand) 45%, var(--ice-deep) 100%) 1;
}
footer {
  border-top: 3px solid;
  border-image: linear-gradient(90deg, var(--ice-deep) 0%, var(--brand) 55%, var(--magma) 100%) 1;
}

/* Heat on hover — the Solutions-page row highlight, everywhere rows live */
.sol-row, .uc-row, .story-row { transition: background 160ms ease, border-color 160ms ease; }
.sol-row:hover { background: var(--magma-tint); }
.sol-row:hover .sol-num, .sol-row:hover .sol-arrow, .sol-row:hover .sol-challenge { color: var(--magma); }
.sol-row.sol-start:hover { background: var(--magma); }
.uc-row:hover { background: var(--magma-tint); }
.uc-row:hover .uc-num { color: var(--magma); }
.uc-row:hover .uc-meta { color: var(--magma); }
.story-row:hover { background: var(--magma-tint); border-color: var(--magma); }
.arch-tab:hover, .accel-switch-tab:hover { background: var(--ice); border-color: var(--brand); }
.box:hover { border-color: var(--magma); }
.chip:hover { border-color: var(--magma); color: var(--magma); }

/* The payoff line burns magma */
.uc-value strong { color: var(--magma); }

/* Feature dashes cool by default, matching the resting state */
.uc-detail .uc-feats li::before { color: var(--brand); }


/* ============================================================
   DE-PROTOTYPING — modern statics instead of carousels,
   media slots instead of wireframe hatching
   ============================================================ */

/* Media placeholders: calm ice surface, not hatching */
.placeholder {
  background: linear-gradient(135deg, var(--ice) 0%, #ffffff 70%);
  border: 1px solid var(--line);
  color: var(--ash);
}
.hero .placeholder, .page-hero .placeholder {
  background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 70%);
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.45);
}
.partner-card .placeholder {
  background: linear-gradient(135deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.05) 70%);
}
.story-row .story-thumb { background: linear-gradient(135deg, var(--ice) 0%, #ffffff 70%); }

/* Testimonials: static editorial grid, featured voice first */
.quote-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 22px; }
.quote-card { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; padding: 26px; display: flex; flex-direction: column; }
.quote-card.featured { grid-column: span 2; }
.quote-card .q-mark { font-family: var(--display); font-weight: 700; font-size: 2.6rem; line-height: 1; color: var(--brand); margin-bottom: 10px; }
.quote-card.featured .q-text { font-size: 1.25rem; line-height: 1.5; }
.quote-card .q-text { margin: 0 0 18px; color: #2c2c2a; flex: 1; }
.quote-card .q-who { font-weight: 600; }
.quote-card .q-role { font-size: 0.85rem; color: var(--ash); }
@media (max-width: 900px) { .quote-grid { grid-template-columns: 1fr; } .quote-card.featured { grid-column: auto; } }

/* Clients: quiet static wall, no marquee */
.logo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 18px; }
.logo-tile {
  border: 1px solid var(--line); border-radius: var(--radius-s); background: #fff;
  min-height: 62px; display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 600; font-size: 0.95rem; color: var(--ash);
  transition: color 160ms ease, border-color 160ms ease;
}
.logo-tile:hover { color: var(--ink); border-color: var(--magma); }

/* Timeline: vertical spine, no scroll-snap */
.timeline { position: relative; margin-top: 24px; padding-left: 34px; display: flex; flex-direction: column; gap: 20px; }
.timeline::before { content: ""; position: absolute; left: 9px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(180deg, var(--magma), var(--brand) 30%, var(--ice-deep)); }
.tl-item { position: relative; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; padding: 20px 22px; transition: background 160ms ease, border-color 160ms ease; }
.tl-item::before { content: ""; position: absolute; left: -31px; top: 26px; width: 12px; height: 12px; border-radius: 50%; background: var(--brand); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line); }
.tl-item:hover { background: var(--magma-tint); border-color: var(--magma); }
.tl-item:hover::before { background: var(--magma); }
.tl-item .meta { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--ash); margin-bottom: 6px; }
.tl-item h3 { margin: 0 0 6px; }
.tl-item p { margin: 0 0 6px; color: #3a3a38; }


/* ============================================================
   NICE CAROUSELS — crafted, not wireframe
   ============================================================ */

/* Testimonial carousel: one voice at a time, big and calm */
.qc { position: relative; margin-top: 26px; overflow: hidden; }
.qc-track { display: flex; transition: transform 480ms cubic-bezier(.22,.61,.36,1); }
.qc-slide { flex: 0 0 100%; padding: 42px 48px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-sizing: border-box; }
.qc-slide .q-mark { font-family: var(--display); font-weight: 700; font-size: 3rem; line-height: 0.8; color: var(--brand); margin-bottom: 16px; }
.qc-slide .q-text { font-size: clamp(1.1rem, calc(2.222vw * var(--vz, 1)), 1.45rem); line-height: 1.55; color: #2c2c2a; margin: 0 0 26px; max-width: 860px; }
.qc-slide .q-who { font-family: var(--display); font-weight: 600; font-size: 1.05rem; }
.qc-slide .q-role { font-size: 0.9rem; color: var(--ash); margin-top: 2px; }
.qc-controls { display: flex; align-items: center; gap: 14px; }
.qc-btn {
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--ink); background: #fff; color: var(--ink);
  font-size: 1.1rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.qc-btn:hover { background: var(--magma); border-color: var(--magma); color: #fff; }
.qc-count { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; letter-spacing: 2px; color: var(--ash); min-width: 64px; text-align: center; }
.qc-dots { display: flex; gap: 8px; margin-top: 18px; }
.qc-dot { width: 26px; height: 3px; border-radius: 2px; background: var(--line); border: 0; padding: 0; cursor: pointer; transition: background 160ms ease; }
.qc-dot.on { background: var(--brand); }
@media (max-width: 700px) { .qc-slide { padding: 26px; } }

/* Logo marquee: soft-masked, slow, tiles from the new system */
.brand-marquee { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.brand-marquee .logo-tile { min-width: 160px; flex-shrink: 0; padding: 0 20px; height: 62px; }
.brand-marquee-track { gap: 12px; animation-duration: 80s; }


/* Quote nav — minimal, beneath the quote */
.qc-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; }
.qc-nav .qc-dots { margin-top: 0; }
.qc-mini {
  border: 0; background: none; padding: 4px 10px; cursor: pointer;
  font-size: 1.25rem; color: var(--ash); transition: color 140ms ease, transform 140ms ease;
}
.qc-mini:hover { color: var(--magma); transform: translateX(0) scale(1.1); }

/* Horizontal compact milestone timeline */
.tl-h { overflow-x: auto; padding-bottom: 10px; margin-top: 24px; }
.tl-h-track { display: flex; gap: 12px; min-width: max-content; position: relative; padding-top: 26px; }
.tl-h-track::before {
  content: ""; position: absolute; top: 7px; left: 4px; right: 4px; height: 2px;
  background: linear-gradient(90deg, var(--magma), var(--brand) 35%, var(--ice-deep));
}
.tl-h-item {
  position: relative; min-width: 215px; max-width: 240px;
  border: 1px solid var(--line); border-radius: var(--radius-s); background: #fff;
  padding: 16px 16px 14px; text-decoration: none; color: var(--ink);
  transition: background 160ms ease, border-color 160ms ease;
}
.tl-h-item::before {
  content: ""; position: absolute; top: -24px; left: 18px; width: 12px; height: 12px;
  border-radius: 50%; background: var(--brand); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line);
}
.tl-h-item:hover { background: var(--magma-tint); border-color: var(--magma); }
.tl-h-item:hover::before { background: var(--magma); }
.tl-h-item .meta {
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 10.5px;
  letter-spacing: 1px; text-transform: uppercase; color: var(--ash); margin-bottom: 6px;
}
.tl-h-item h3 { margin: 0 0 4px; font-size: 0.98rem; line-height: 1.3; }
.tl-h-item .more { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; color: var(--brand); }


/* Milestones — staggered above/below the line, everything visible, no scroll */
.tl-alt { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px 12px; margin-top: 26px; }
.tl-alt::before {
  content: ""; position: absolute; left: 0; right: 0; top: calc(50% - 1px); height: 2px;
  background: linear-gradient(90deg, var(--ice-deep), var(--brand) 60%, var(--magma));
}
.tl-alt-item {
  position: relative; border: 1px solid var(--line); border-radius: var(--radius-s); background: #fff;
  padding: 12px 14px; text-decoration: none; color: var(--ink);
  transition: background 160ms ease, border-color 160ms ease;
}
.tl-alt-item.top { grid-row: 1; margin-bottom: 14px; }
.tl-alt-item.bot { grid-row: 2; margin-top: 14px; }
.tl-alt-item::after {
  content: ""; position: absolute; left: 18px; width: 11px; height: 11px; border-radius: 50%;
  background: var(--brand); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line); z-index: 1;
}
.tl-alt-item.top::after { bottom: -22px; }
.tl-alt-item.bot::after { top: -22px; }
.tl-alt-item:hover { background: var(--magma-tint); border-color: var(--magma); }
.tl-alt-item:hover::after { background: var(--magma); }
.tl-alt-item .meta {
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 10px;
  letter-spacing: 1px; text-transform: uppercase; color: var(--ash); margin-bottom: 4px;
}
.tl-alt-item h3 { margin: 0 0 3px; font-size: 0.9rem; line-height: 1.3; }
.tl-alt-item .more { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 10.5px; color: var(--brand); }
@media (max-width: 900px) {
  .tl-alt { grid-template-columns: 1fr; }
  .tl-alt::before { display: none; }
  .tl-alt-item, .tl-alt-item.top, .tl-alt-item.bot { grid-row: auto; grid-column: 1 !important; margin: 0; }
  .tl-alt-item::after { display: none; }
}


/* ============================================================
   SOLUTIONS ARCHITECTURE — strategy on top, eight pillars below
   ============================================================ */
.sol-arch { margin-top: 26px; }
.sol-roof {
  display: grid; grid-template-columns: 84px 1.1fr 1.3fr 48px; gap: 24px; align-items: center;
  background: var(--ink); color: #fff; border-radius: var(--radius);
  padding: 30px 28px; text-decoration: none;
  transition: background 160ms ease;
}
.sol-roof:hover { background: var(--brand); color: #fff; }
.sol-roof .sol-num { color: var(--brand-light); }
.sol-roof:hover .sol-num, .sol-roof:hover .sol-challenge, .sol-roof:hover .sol-arrow { color: #fff; }
.sol-roof .sol-challenge { color: rgba(255,255,255,0.6); }
.sol-roof h3 { margin: 0; font-size: 1.5rem; color: #fff; }
.sol-roof .sol-desc { color: rgba(255,255,255,0.75); }
.sol-connect {
  display: grid; grid-template-columns: repeat(4, 1fr); height: 18px; padding: 0 40px;
}
.sol-connect span { width: 2px; height: 100%; background: var(--line); justify-self: center; }
.sol-pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.sol-pillar {
  display: flex; flex-direction: column; gap: 6px;
  border: 1px solid var(--line); border-radius: var(--radius); background: #fff;
  padding: 20px 18px 16px; text-decoration: none; color: var(--ink);
  transition: background 160ms ease, border-color 160ms ease;
}
.sol-pillar:hover { background: var(--magma-tint); border-color: var(--magma); }
.sol-pillar .sol-num { font-size: 1.3rem; }
.sol-pillar:hover .sol-num, .sol-pillar:hover .sol-challenge, .sol-pillar:hover .p-arrow { color: var(--magma); }
.sol-pillar .sol-challenge { margin-bottom: 0; }
.sol-pillar h3 { margin: 0; font-size: 1.08rem; line-height: 1.25; }
.sol-pillar .sol-desc { font-size: 0.88rem; flex: 1; }
.sol-pillar .p-arrow { font-size: 1.1rem; color: var(--ash); align-self: flex-end; transition: transform 140ms ease, color 140ms ease; }
.sol-pillar:hover .p-arrow { transform: translateX(5px); }
@media (max-width: 1000px) { .sol-pillars { grid-template-columns: repeat(2, 1fr); } .sol-connect { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) { .sol-roof { grid-template-columns: 56px 1fr 32px; } .sol-roof .sol-desc { grid-column: 2; grid-row: 2; } }
@media (max-width: 600px) { .sol-pillars { grid-template-columns: 1fr; } .sol-connect { display: none; } }


/* ============================================================
   FISHBONE STORYLINE — milestones as ribs feeding "Today"
   ============================================================ */
.fb { display: grid; grid-template-columns: 1fr 230px; gap: 0 26px; align-items: center; margin-top: 30px; }
.fb-body { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 64px 14px; padding: 4px 0; }
.fb-body::before {
  content: ""; position: absolute; left: 0; right: -26px; top: calc(50% - 1.5px); height: 3px;
  background: linear-gradient(90deg, var(--ice-deep), var(--brand) 55%, var(--magma));
  border-radius: 2px;
}
.fb-item {
  position: relative; border: 1px solid var(--line); border-radius: var(--radius-s); background: #fff;
  padding: 12px 14px; text-decoration: none; color: var(--ink); display: block;
  transition: background 160ms ease, border-color 160ms ease;
}
.fb-item.top { grid-row: 1; }
.fb-item.bot { grid-row: 2; }
/* ribs — slanting toward the head */
.fb-item::after {
  content: ""; position: absolute; left: 50%; width: 2px; height: 40px; background: var(--line);
  transition: background 160ms ease;
}
.fb-item.top::after { bottom: -44px; transform: rotate(32deg); transform-origin: top center; }
.fb-item.bot::after { top: -44px; transform: rotate(32deg); transform-origin: bottom center; }
.fb-item:hover { background: var(--magma-tint); border-color: var(--magma); }
.fb-item:hover::after { background: var(--magma); }
.fb-item .meta {
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 10px;
  letter-spacing: 1px; text-transform: uppercase; color: var(--ash); margin-bottom: 4px;
}
.fb-item h3 { margin: 0 0 3px; font-size: 0.9rem; line-height: 1.3; }
.fb-item .more { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 10.5px; color: var(--brand); }
/* the head — where the story arrives */
.fb-head {
  position: relative; display: block; background: var(--ink); color: #fff;
  border-radius: var(--radius); padding: 24px 22px; text-decoration: none;
  transition: background 160ms ease;
}
.fb-head::before {
  content: ""; position: absolute; left: -14px; top: calc(50% - 8px);
  border: 8px solid transparent; border-right: 10px solid var(--ink);
  transition: border-right-color 160ms ease;
}
.fb-head:hover { background: var(--brand); }
.fb-head:hover::before { border-right-color: var(--brand); }
.fb-head .meta {
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 10.5px;
  letter-spacing: 1.5px; text-transform: uppercase; color: var(--magma); margin-bottom: 8px;
}
.fb-head h3 { margin: 0 0 6px; font-size: 1.15rem; color: #fff; line-height: 1.3; }
.fb-head .more { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; color: rgba(255,255,255,0.75); }
@media (max-width: 1000px) {
  .fb { grid-template-columns: 1fr; gap: 20px; }
  .fb-body { grid-template-columns: repeat(2, 1fr); gap: 56px 12px; }
  .fb-body::before { right: 0; }
  .fb-head::before { display: none; }
}
@media (max-width: 640px) {
  .fb-body { grid-template-columns: 1fr; gap: 12px; }
  .fb-body::before, .fb-item::after { display: none; }
  .fb-item, .fb-item.top, .fb-item.bot { grid-row: auto; grid-column: 1 !important; }
}


/* ============================================================
   FLUID SCALE — laptop-first, grows with the screen,
   zooms cleanly in the browser (rem-driven root scale)
   ============================================================ */

/* One dial for the whole site: type & rem-based spacing scale with viewport */
html { font-size: clamp(14.5px, calc(0.444vw * var(--vz, 1)) + 11.5px, 19px); }
body { font-size: 1rem; }

/* Container breathes on large displays instead of floating in whitespace */
.wrap, .nav-inner { max-width: min(1400px, calc(100vw * var(--vz, 1))); }

/* Vertical rhythm: compact on laptops, generous on big screens */
section { padding: clamp(40px, calc(5vw * var(--vz, 1)), 84px) 0; }
.hero, .page-hero { padding: clamp(44px, calc(6.111vw * var(--vz, 1)), 96px) 0 clamp(32px, calc(4.444vw * var(--vz, 1)), 64px); }

/* Type ramps */
h1 { font-size: clamp(2.1rem, calc(4vw * var(--vz, 1)) + 0.6rem, 4.4rem); }
h2 { font-size: clamp(1.45rem, calc(2.222vw * var(--vz, 1)) + 0.5rem, 2.8rem); }
.lede { font-size: clamp(1.02rem, calc(0.667vw * var(--vz, 1)) + 0.85rem, 1.4rem); max-width: 46em; }

/* Hero media doesn't dominate a laptop viewport */
.hero .placeholder, .page-hero .placeholder { min-height: clamp(140px, calc(20vw * var(--vz, 1)), 320px); }

/* Wide-screen bonus: key grids use the extra room */
@media (min-width: 1500px) {
  .sol-pillars { grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .quote-grid { grid-template-columns: repeat(3, 1fr); }
  .fb { grid-template-columns: 1fr 260px; }
  .logo-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
}


/* ============================================================
   SCALE TRIM — tighter on laptop screens; large displays keep room
   ============================================================ */
html { font-size: clamp(13.5px, calc(0.356vw * var(--vz, 1)) + 10px, 18px); }

section { padding: clamp(30px, calc(3.778vw * var(--vz, 1)), 70px) 0; }
.hero, .page-hero { padding: clamp(34px, calc(4.667vw * var(--vz, 1)), 78px) 0 clamp(24px, calc(3.111vw * var(--vz, 1)), 52px); }

h1 { font-size: clamp(1.9rem, calc(3.222vw * var(--vz, 1)) + 0.5rem, 3.9rem); }
h2 { font-size: clamp(1.35rem, calc(1.778vw * var(--vz, 1)) + 0.45rem, 2.5rem); }
.lede { font-size: clamp(1rem, calc(0.556vw * var(--vz, 1)) + 0.82rem, 1.3rem); }

.hero .placeholder, .page-hero .placeholder { min-height: clamp(110px, calc(14.444vw * var(--vz, 1)), 280px); }
.placeholder { min-height: clamp(100px, calc(12.222vw * var(--vz, 1)), 220px); }

/* Big components slim down with the page */
.qc-slide { padding: clamp(22px, calc(2.889vw * var(--vz, 1)), 44px) clamp(24px, calc(3.333vw * var(--vz, 1)), 48px); }
.value-panel { padding: clamp(22px, calc(2.889vw * var(--vz, 1)), 36px); }
.sol-roof { padding: clamp(18px, calc(2.444vw * var(--vz, 1)), 30px) clamp(18px, calc(2.667vw * var(--vz, 1)), 28px); }
.sol-pillar { padding: clamp(14px, calc(1.778vw * var(--vz, 1)), 20px) clamp(13px, calc(1.667vw * var(--vz, 1)), 18px); }
.box { padding: clamp(14px, calc(1.778vw * var(--vz, 1)), 18px); }
.sol-row { padding: clamp(16px, calc(2.222vw * var(--vz, 1)), 26px) 8px; }
.uc-row { padding: clamp(14px, calc(2vw * var(--vz, 1)), 22px) 8px; }
.arch { padding: clamp(14px, calc(2vw * var(--vz, 1)), 22px); }
.fb-head { padding: clamp(16px, calc(2.222vw * var(--vz, 1)), 24px) clamp(15px, calc(2vw * var(--vz, 1)), 22px); }


/* Solutions: all eight pillars on one row under the strategy layer */
.sol-roof { grid-template-columns: 1.1fr 1.3fr 48px; }
.sol-pillars { grid-template-columns: repeat(8, 1fr); gap: 10px; }
.sol-connect { grid-template-columns: repeat(8, 1fr); }
.sol-pillar { padding: 14px 12px 12px; gap: 5px; }
.sol-pillar h3 { font-size: 0.92rem; }
.sol-pillar .sol-num { font-size: 1.05rem; }
.sol-pillar .sol-challenge { font-size: 9.5px; letter-spacing: 0.6px; }
.sol-pillar .sol-desc { font-size: 0.78rem; line-height: 1.45; }
@media (max-width: 1200px) {
  .sol-pillars, .sol-connect { grid-template-columns: repeat(4, 1fr); }
  .sol-pillar .sol-desc { font-size: 0.85rem; }
}
@media (max-width: 640px) { .sol-pillars { grid-template-columns: 1fr 1fr; } .sol-connect { display: none; } }


/* ============================================================
   SOLUTIONS AS A SUBLIST OF STRATEGY — nested, connected
   ============================================================ */
.sol-arch .sol-roof { margin-bottom: 0; border-radius: var(--radius) var(--radius) var(--radius) 0; }
.sol-sub { margin-left: 44px; border-left: 2px solid var(--line); position: relative; }
.sub-row {
  display: grid; grid-template-columns: 64px 1.05fr 1.35fr 40px; gap: 22px; align-items: center;
  padding: clamp(14px, calc(2vw * var(--vz, 1)), 22px) 8px clamp(14px, calc(2vw * var(--vz, 1)), 22px) 30px;
  border-bottom: 1px solid var(--line);
  position: relative; text-decoration: none; color: var(--ink);
  transition: background 160ms ease;
}
.sub-row::before { content: ""; position: absolute; left: 0; top: 50%; width: 20px; height: 2px; background: var(--line); transition: background 160ms ease; }
.sub-row:last-child { border-bottom: 0; }
.sub-row h3 { margin: 0; font-size: 1.2rem; }
.sub-row:hover { background: var(--magma-tint); }
.sub-row:hover::before { background: var(--magma); }
.sub-row:hover .sol-num, .sub-row:hover .sol-challenge, .sub-row:hover .sol-arrow { color: var(--magma); }
@media (max-width: 900px) {
  .sol-sub { margin-left: 16px; }
  .sub-row { grid-template-columns: 48px 1fr 32px; }
  .sub-row .sol-desc { grid-column: 2; grid-row: 2; }
}

/* ============================================================
   MORE MAGMA AT REST — markers & numerals run warm,
   actions (buttons, active tabs, links) stay brand violet
   ============================================================ */
.sol-num, .uc-num { color: rgba(232,73,15,0.45); }
.sol-roof .sol-num { color: var(--magma); }
ul.plain li::before { color: var(--magma); }
.arch-tab .arch-num { color: rgba(232,73,15,0.6); }
.arch-tab.is-active .arch-num { color: #ffb59a; }
.stat .num { color: var(--magma); }
.box a.more, .fb-item .more, .tl-h-item .more, .story-row .more { color: var(--magma); }
.uc-detail .uc-feats li::before { color: var(--magma); }
.value-panel .vp-label { color: var(--magma); }
.qc-slide .q-mark { color: var(--magma); }
.uc-value strong { color: var(--magma); }
.eyebrow { color: var(--brand); } /* brand voice stays violet */


/* ============================================================
   FOOTER REDESIGN — charcoal bookend, color as accent only
   (the violet block was one big shout; this is a quiet close)
   ============================================================ */
footer { background: var(--ink); color: rgba(255,255,255,0.6); }
footer a { color: rgba(255,255,255,0.88); }
footer a:hover { color: var(--brand-light); opacity: 1; text-decoration-color: var(--brand-light); }
footer .sitemap h4 { color: #fff; }
footer strong { color: #fff; }
.partner-block .meta, footer .meta { color: rgba(255,255,255,0.45); }
.partner-card .partner-label { color: rgba(255,255,255,0.65); }
.partner-card .placeholder {
  border-color: rgba(255,255,255,0.22); color: rgba(255,255,255,0.5);
  background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.03) 70%);
}
.social-links a { border-color: rgba(255,255,255,0.3); color: rgba(255,255,255,0.85); background: transparent; }
.social-links a:hover { background: transparent; border-color: var(--brand-light); color: var(--brand-light); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.12); }
/* the magma–violet–ice hairline on top stays — that is the brand moment now */


/* Industries panes share the solutions architecture (roof + sublist) */
.ind-pane .sub-row { align-items: start; }
.ind-pane .sub-row h3 { font-size: 1.12rem; }
.ind-pane .sol-roof .sol-desc { font-size: 0.95rem; }


/* ============================================================
   REAL MEDIA — hero photography, client logos, partner badges
   ============================================================ */
img.hero-img {
  width: 100%; height: clamp(190px, calc(28.889vw * var(--vz, 1)), 400px);
  object-fit: cover; display: block;
  border-radius: var(--radius); margin-bottom: 20px;
}
img.section-img {
  width: 100%; height: 100%; min-height: 300px;
  object-fit: cover; display: block; border-radius: var(--radius);
}
.logo-tile img {
  max-height: 30px; max-width: 76%; object-fit: contain;
  filter: grayscale(1); opacity: 0.65;
  transition: filter 160ms ease, opacity 160ms ease;
}
.logo-tile:hover img { filter: none; opacity: 1; }
.nav .brand img { height: 22px; display: block; }
.nav .brand { border: 0; padding: 4px 0; }
.partner-card img {
  width: 52px; height: 52px; object-fit: contain;
  background: #fff; border-radius: var(--radius-s); padding: 5px; display: block;
}


/* ============================================================
   FULL-BLEED HERO — the photograph is the stage
   ============================================================ */
.hero, .page-hero { position: relative; overflow: hidden; isolation: isolate; }
.hero-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: -2; margin: 0; border-radius: 0;
}
.hero::before, .page-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(17,17,17,0.86) 0%, rgba(17,17,17,0.62) 55%, rgba(17,17,17,0.35) 100%),
              linear-gradient(0deg, rgba(17,17,17,0.55) 0%, rgba(17,17,17,0) 40%);
}
.hero { min-height: clamp(380px, calc(57.778vh * var(--vz, 1)), 620px); display: flex; align-items: center; }
.page-hero { min-height: clamp(240px, calc(35.556vh * var(--vz, 1)), 420px); display: flex; align-items: center; }
.hero .wrap, .page-hero .wrap { width: 100%; }
/* keep the gradient hairline where photo meets page */


/* ============================================================
   HERO REFINE — picture breathes on top, text in the lower third
   ============================================================ */
.hero::before, .page-hero::before {
  background: linear-gradient(180deg,
    rgba(17,17,17,0.10) 0%,
    rgba(17,17,17,0.25) 40%,
    rgba(17,17,17,0.62) 70%,
    rgba(17,17,17,0.92) 100%);
}
.hero, .page-hero { align-items: flex-end; }
.hero {
  min-height: clamp(480px, calc(73.333vh * var(--vz, 1)), 780px);
  padding: clamp(120px, calc(26.667vh * var(--vz, 1)), 260px) 0 clamp(36px, calc(5vh * var(--vz, 1)), 56px);
}
.page-hero {
  min-height: clamp(320px, calc(48.889vh * var(--vz, 1)), 540px);
  padding: clamp(90px, calc(17.778vh * var(--vz, 1)), 180px) 0 clamp(28px, calc(3.889vh * var(--vz, 1)), 44px);
}


/* ============================================================
   HERO LOWER-THIRD FIX — taller stage, tighter text block,
   so the copy begins around the last third of the picture
   ============================================================ */
.hero { min-height: clamp(560px, calc(88.889vh * var(--vz, 1)), 880px); padding-bottom: clamp(32px, calc(4.444vh * var(--vz, 1)), 52px); }
.page-hero { min-height: clamp(380px, calc(60vh * var(--vz, 1)), 640px); padding-bottom: clamp(26px, calc(3.333vh * var(--vz, 1)), 40px); }

/* compact hero typography = shorter text block = starts lower */
.hero h1, .page-hero h1 { font-size: clamp(1.9rem, calc(2.667vw * var(--vz, 1)) + 0.6rem, 3.2rem); margin-bottom: 0.35em; }
.hero .lede, .page-hero .lede { font-size: clamp(0.98rem, calc(0.5vw * var(--vz, 1)) + 0.8rem, 1.2rem); margin-bottom: 0.5em; max-width: 44em; }
.hero .eyebrow, .page-hero .eyebrow { font-size: 12px; }

/* deepen the veil exactly where the text now lives */
.hero::before, .page-hero::before {
  background: linear-gradient(180deg,
    rgba(17,17,17,0.06) 0%,
    rgba(17,17,17,0.12) 45%,
    rgba(17,17,17,0.55) 68%,
    rgba(17,17,17,0.93) 100%);
}


/* Bigger brand mark */
.nav .brand img { height: 34px; }
@media (max-width: 700px) { .nav .brand img { height: 28px; } }


/* Inner-page heroes match the homepage stage */
.page-hero {
  min-height: clamp(560px, calc(88.889vh * var(--vz, 1)), 880px);
  padding-top: clamp(120px, calc(26.667vh * var(--vz, 1)), 260px);
  padding-bottom: clamp(32px, calc(4.444vh * var(--vz, 1)), 52px);
}


/* People photography */
img.person-lg {
  width: min(100%, 500px); aspect-ratio: 1 / 1; height: auto;
  object-fit: cover; object-position: center top;
  border-radius: var(--radius); display: block; margin: 0 auto;
}
img.person-sm {
  width: 100%; aspect-ratio: 1 / 1;
  object-fit: cover; object-position: center top;
  border-radius: var(--radius-s); display: block; margin-bottom: 8px;
}


/* Engagement options — "What it is" area equal height, so 01/02/03/04 align across cards */
.engage .box p:first-of-type { min-height: 8.5em; }
@media (max-width: 1100px) { .engage .box p:first-of-type { min-height: 10.5em; } }
@media (max-width: 900px)  { .engage .box p:first-of-type { min-height: 0; } }


/* ---- Case-study carousels (industry panes) ---- */
.cc { position: relative; overflow: hidden; margin-top: 12px; }
.cc-track { display: flex; transition: transform 420ms cubic-bezier(.22,.61,.36,1); }
.cc-slide { flex: 0 0 100%; box-sizing: border-box; display: block; text-decoration: none; color: inherit; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; padding: 22px 26px; }
.cc-slide h4 { font-family: var(--display); font-weight: 600; font-size: 1.12rem; margin: 6px 0 8px; transition: color 160ms ease; }
.cc-slide:hover h4 { color: var(--magma); }
.cc-slide p { font-size: 0.9rem; margin: 0 0 10px; max-width: 760px; }
.cc-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
.cc-dots { display: flex; gap: 8px; }
.cc-dot { width: 26px; height: 3px; border-radius: 2px; background: var(--line); border: 0; padding: 0; cursor: pointer; transition: background 160ms ease; }
.cc-dot.on { background: var(--magma); }
.cc-mini { border: 0; background: none; padding: 2px 6px; cursor: pointer; font-size: 1rem; color: var(--ash); transition: color 160ms ease; }
.cc-mini:hover { color: var(--magma); }
@media (max-width: 700px) { .cc-slide { padding: 18px; } }





/* Use-case detail content (solution pages) — same spec-sheet pattern as industries */
.uc-detail .uc-feats { list-style: none; margin: 10px 0; padding: 0; }
.uc-detail .uc-feats li { padding: 4px 0 4px 18px; position: relative; font-size: 0.9rem; color: #3a3a38; }
.uc-detail .uc-feats li::before { content: "—"; position: absolute; left: 0; color: var(--magma); }
.uc-detail .uc-value { margin: 6px 0 0; font-size: 0.92rem; }
.uc-detail .uc-value strong { color: var(--magma); font-weight: 600; }


/* ============================================================
   UNIFIED FOLD LISTS — same design on solutions, solution
   detail pages and industry spec sheets; smooth height motion
   ============================================================ */
.sol-sub .sub-row, .uc-index .uc-row { align-items: center; transition: background 220ms ease; }
.sol-sub .sub-row:hover, .uc-index .uc-row:hover { background: var(--magma-tint); }
.uc-index .uc-row { padding: clamp(14px, calc(2vw * var(--vz, 1)), 22px) 8px; }
.sub-row .sol-num, .uc-row .uc-num { font-size: 1.5rem; }
.sub-row h3, .uc-row h3, .ind-pane .sub-row h3 { font-size: 1.15rem; }
.uc-meta, .sub-row .sol-challenge { font-size: 10.5px; letter-spacing: 1px; }

.fold {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 560ms cubic-bezier(.45, 0, .18, 1), opacity 300ms ease;
}
.fold > .fold-in { min-height: 0; overflow: hidden; }
.fold .fold-in > :first-child { margin-top: 3px; }
.fold .fold-in > :last-child { margin-bottom: 3px; }
.sub-row:hover .fold, .uc-row:hover .fold {
  grid-template-rows: 1fr;
  opacity: 1;
  transition: grid-template-rows 560ms cubic-bezier(.45, 0, .18, 1), opacity 440ms ease 120ms;
}
@media (max-width: 900px) { .sub-row .fold { grid-column: 2; grid-row: 2; } }
@media (max-width: 800px) { .uc-row .fold { grid-column: 2; } }


/* ============================================================
   GLOBAL 90% SCALE — the whole site renders as at 90% browser
   zoom; viewport-relative units above are pre-compensated
   ============================================================ */
body { zoom: 0.9; }


/* Brand motto — quiet signature above the footer base line */
.footer-motto {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10px; letter-spacing: 3px; text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  margin: 26px 0 12px;
}


/* ============================================================
   FOOTER v2 — clear columns: brand / sitemap / partners
   ============================================================ */
footer .wrap { display: block; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 0.9fr 1fr 0.9fr 1.6fr; gap: 36px; align-items: start; padding: 6px 0 26px; }
.f-logo { height: 24px; width: auto; margin-bottom: 12px; }
.f-tag { margin: 0 0 14px; font-size: 0.88rem; color: rgba(255,255,255,0.75); line-height: 1.6; }
.f-contact { list-style: none; margin: 0; padding: 0; font-size: 0.82rem; color: rgba(255,255,255,0.55); }
.f-contact li { padding: 2px 0; }
.f-contact a { color: rgba(255,255,255,0.72); text-decoration: none; }
.f-contact a:hover { color: #fff; }
.footer-grid h4 { color: #fff; font-size: 0.82rem; letter-spacing: 0.4px; margin: 0 0 10px; }
.f-col ul { list-style: none; margin: 0; padding: 0; }
.f-col li { padding: 3px 0; font-size: 0.86rem; }
.f-col a { text-decoration: none; color: rgba(255,255,255,0.72); }
.f-col a:hover { color: #fff; text-decoration: underline; }
.f-partner { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.f-partner img { width: 42px; height: 42px; object-fit: contain; background: #fff; border-radius: 6px; padding: 3px; flex: 0 0 auto; }
.f-partner span { font-size: 0.74rem; color: rgba(255,255,255,0.6); line-height: 1.45; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; }
.footer-motto { margin: 0; }
@media (max-width: 1000px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .footer-grid { grid-template-columns: 1fr; } .footer-bottom { justify-content: flex-start; } }


/* Careers benefits — one continuous list, two clean columns, no rules */
ul.plain.benefits { columns: 2; column-gap: 64px; margin-top: 18px; }
ul.plain.benefits li {
  break-inside: avoid;
  border-top: 0 !important;
  padding: 9px 0 9px 44px;
}
@media (max-width: 800px) { ul.plain.benefits { columns: 1; } }


/* ============================================================
   UNIFIED BUTTONS — primary: brand fill · secondary: brand
   outline · inline arrow links stay magma. One pill geometry.
   ============================================================ */
.btn { border-radius: 999px; padding: 12px 26px; font-weight: 700; font-size: 15px; }
.btn-primary { background: var(--brand); color: #fff; border: 1.5px solid var(--brand); }
.btn-primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
.btn-ghost { background: transparent; color: var(--brand); border: 1.5px solid var(--brand); }
.btn-ghost:hover { background: var(--brand); color: #fff; }
.btn + .btn { margin-left: 10px; }
/* on photo heroes buttons stay white-based for contrast */
.hero .btn-primary, .page-hero .btn-primary { background: #fff; color: var(--ink); border-color: #fff; }
.hero .btn-primary:hover, .page-hero .btn-primary:hover { background: var(--brand); color: #fff; border-color: var(--brand); }
.hero .btn-ghost, .page-hero .btn-ghost { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,0.6); }
.hero .btn-ghost:hover, .page-hero .btn-ghost:hover { background: #fff; color: var(--ink); border-color: #fff; }


/* ============================================================
   LIGHT MOTION — heroes breathe in, sections rise as you scroll
   ============================================================ */
.hero, .page-hero { overflow: hidden; }
@keyframes heroSettle { from { transform: scale(1.07); } to { transform: scale(1); } }
.hero-bg { animation: heroSettle 7s cubic-bezier(.22,.61,.36,1) both; will-change: transform; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.hero .wrap > *, .page-hero .wrap > * { animation: fadeUp 700ms cubic-bezier(.22,.61,.36,1) both; }
.hero .wrap > :nth-child(1), .page-hero .wrap > :nth-child(1) { animation-delay: 80ms; }
.hero .wrap > :nth-child(2), .page-hero .wrap > :nth-child(2) { animation-delay: 200ms; }
.hero .wrap > :nth-child(3), .page-hero .wrap > :nth-child(3) { animation-delay: 320ms; }
.hero .wrap > :nth-child(4), .page-hero .wrap > :nth-child(4) { animation-delay: 440ms; }
/* sections rise gently on first entry (JS-gated so nothing hides without it) */
html.js section.reveal { opacity: 0; transform: translateY(14px); transition: opacity 600ms ease, transform 600ms cubic-bezier(.22,.61,.36,1); }
html.js section.reveal.on { opacity: 1; transform: none; }
/* cards get a soft lift */
.box, .cc-slide { transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease; }
.box:hover, .cc-slide:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(17,17,17,0.07); }
@media (prefers-reduced-motion: reduce) {
  .hero-bg, .hero .wrap > *, .page-hero .wrap > * { animation: none; }
  html.js section.reveal { opacity: 1; transform: none; transition: none; }
  .box:hover, .cc-slide:hover { transform: none; }
}


/* Tooling page — platform index chips */
.tool-index { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.tool-index .tool-chip { display: block; text-decoration: none; color: inherit; padding: 12px 14px; margin: 0; }
.tool-index .tool-chip .meta { font-size: 9.5px; margin-bottom: 4px; }
.tool-index .tool-chip h3 { font-size: 0.95rem; margin: 0; }
@media (max-width: 1000px) { .tool-index { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .tool-index { grid-template-columns: repeat(2, 1fr); } }


/* Competence leads — set apart inside the team section */
.leads-sep { margin-top: 36px; padding-top: 20px; position: relative; }
.leads-sep::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 64px; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--brand), var(--magma));
}
.leads-sep .eyebrow { margin-bottom: 0; }


/* Blog post author block */
.post-author { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-s); background: #fff; max-width: 720px; }


/* Blog accordion — fold rows whose detail spans the full width */
.acc .acc-row { grid-template-columns: 64px 1fr 40px; }
.acc .acc-detail { grid-column: 2 / 4; grid-row: 2; }
.acc .acc-detail h2 { display: none; }        /* recycled section headings not needed inside rows */
.acc .acc-detail .grid-2 { margin-top: 10px; }
.acc .acc-detail .box { background: #fff; }
@media (max-width: 800px) { .acc .acc-row { grid-template-columns: 48px 1fr; } .acc .acc-detail { grid-column: 2; } }


/* Blog accordion: click-to-open (hover-opening jumped the page while scrolling) */
.acc .acc-row { cursor: pointer; }
.acc .acc-row:hover .fold { grid-template-rows: 0fr; opacity: 0; }      /* cancel hover-unfold */
.acc .acc-row.open .fold, .acc .acc-row.open:hover .fold { grid-template-rows: 1fr; opacity: 1; }
.acc .acc-row::after { content: "+"; grid-column: 3; grid-row: 1; justify-self: end; align-self: center;
  font-family: var(--display); font-weight: 600; font-size: 1.3rem; color: var(--magma);
  transition: transform 300ms ease; }
.acc .acc-row.open::after { transform: rotate(45deg); }
@media (max-width: 800px) { .acc .acc-row::after { grid-column: 2; grid-row: 1; } }


/* Big screens: content column absorbs the width the damped zoom leaves over */
.wrap, .nav-inner { max-width: min(calc(1400px * var(--wf, 1)), calc(100vw * var(--vz, 1))); }


/* About stats — two feature numbers on ink, five compact below */
.stat-hero { background: var(--ink); border-radius: var(--radius); padding: 26px 26px 22px; }
.stat-hero .num { color: var(--magma); font-size: clamp(2.4rem, calc(3.333vw * var(--vz, 1)), 3.2rem); line-height: 1.05; }
.stat-hero .label { color: rgba(255,255,255,0.78); font-size: 0.98rem; margin-top: 6px; }


/* Scale band — company vs impact, side by side */
.scale-panel { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px 14px; background: #fff; }
.scale-panel > .meta { margin-bottom: 10px; }
.scale-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
.scale-grid .stat.feature { grid-column: 1 / -1; padding-bottom: 9px; border-bottom: 1px solid var(--line); }
.scale-grid .feature .num { font-size: clamp(1.9rem, calc(2.6vw * var(--vz, 1)), 2.4rem); line-height: 1.05; }
.scale-grid .stat .num { font-size: 1.35rem; }
.scale-grid .stat .label { font-size: 0.8rem; line-height: 1.35; }
.scale-panel:not(.scale-impact) .stat .num { color: var(--brand); }
.scale-impact { background: var(--ink); border-color: var(--ink); }
.scale-impact .stat .num { color: var(--magma); }
.scale-impact .stat .label { color: rgba(255,255,255,0.75); }
.scale-impact > .meta { color: rgba(255,255,255,0.5); }
.scale-impact .stat.feature { border-bottom-color: rgba(255,255,255,0.15); }
@media (max-width: 900px) { .scale-band { grid-template-columns: 1fr; } }


/* Scale lines — stat cards in the same language as the timeline cards */
.scale-line { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px 10px; align-items: stretch; padding: 6px 0; border-top: 0; }
.scale-line:last-child { border-bottom: 0; }
.scale-line > .meta { align-self: center; }
.scale-line .stat {
  display: flex; flex-direction: column; justify-content: flex-start; gap: 4px;
  text-align: left; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius-s); padding: 12px 14px;
}
.scale-line .stat .num { font-size: 1.5rem; line-height: 1.1; color: var(--brand); }
.scale-line .stat .label {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 9.5px; letter-spacing: 0.8px; text-transform: uppercase;
  color: var(--ash); line-height: 1.45;
}
.scale-line.impact .stat .num { color: var(--magma); }
@media (max-width: 900px) { .scale-line { grid-template-columns: 1fr 1fr; } .scale-line > .meta { grid-column: 1 / -1; } }


/* Fishbone — chess stagger: bottom cards sit between the top ones */
.fb-body .fb-item.bot { transform: translateX(calc(50% + 7px)); }
@media (max-width: 640px) { .fb-body .fb-item.bot { transform: none; } }


/* ============================================================
   MOBILE LAYER — menu, tap-friendly folds, fluid odds & ends
   ============================================================ */
.nav-toggle { display: none; border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 8px 14px; font: inherit; font-weight: 600; cursor: pointer; }
@media (max-width: 820px) {
  .nav-inner { flex-wrap: wrap; gap: 12px; }
  .nav-toggle { display: inline-flex; order: 3; margin-left: auto; }
  .nav-cta { order: 4; }
  .nav-links { display: none; }
  .nav.open .nav-links {
    display: flex; flex-direction: column; align-items: flex-start;
    flex-basis: 100%; order: 5; gap: 2px; padding: 8px 0 12px;
  }
  .nav.open .nav-links > a, .nav.open .nav-dropdown > a { padding: 8px 0; font-size: 1.05rem; }
  .nav-dropdown-menu { display: none !important; }   /* parent links carry navigation on mobile */
  table.compare { display: block; overflow-x: auto; }
  [style*="grid-template-columns:repeat(4"] { grid-template-columns: 1fr 1fr !important; }
  [style*="grid-template-columns:repeat(5"] { grid-template-columns: 1fr 1fr !important; }
  .scale-line { grid-template-columns: 1fr 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 8px; }
}
/* touch devices: folded rows open on tap (no hover available) */
.sub-row.open .fold, .uc-row.open .fold { grid-template-rows: 1fr; opacity: 1; }


/* ============================================================
   MOBILE DESIGN LAYER — tailored components under 760px
   ============================================================ */
@media (max-width: 760px) {
  /* rhythm & type: tighter, headline-led */
  .wrap { padding: 0 18px; }
  section { padding: 34px 0; }
  h2 { font-size: 1.4rem; line-height: 1.25; }
  .lede { font-size: 0.98rem; line-height: 1.6; }

  /* heroes: shorter, poster-like, stacked full-width actions */
  .hero, .page-hero { min-height: min(calc(72vh * var(--vz, 1)), 620px); }
  .hero h1, .page-hero h1 { font-size: 1.9rem; line-height: 1.15; }
  .hero .lede, .page-hero .lede { font-size: 0.95rem; }
  .hero .btn, .page-hero .btn { display: block; width: 100%; text-align: center; margin: 0 0 10px; }
  .hero .btn + .btn, .page-hero .btn + .btn { margin-left: 0; }

  /* mobile menu: full panel with hairline rows */
  .nav.open .nav-links { border-top: 1px solid var(--line); margin-top: 4px; }
  .nav.open .nav-links > a, .nav.open .nav-dropdown { width: 100%; }
  .nav.open .nav-links > a, .nav.open .nav-dropdown > a {
    display: block; width: 100%; padding: 13px 2px; font-size: 1.02rem;
    border-bottom: 1px solid var(--line); text-decoration: none;
  }

  /* numbered fold lists: card-like rows, roomier tap targets */
  .sol-sub { margin-left: 10px; }
  .sub-row { grid-template-columns: 40px 1fr; gap: 10px; padding: 14px 6px 14px 16px; }
  .sub-row .sol-num, .uc-row .uc-num { font-size: 1.05rem; }
  .sub-row .sol-arrow { display: none; }
  .sub-row .fold, .uc-row .fold { grid-column: 1 / -1; grid-row: 2; }
  .uc-row { grid-template-columns: 40px 1fr; gap: 10px; }
  .uc-meta, .sub-row .sol-challenge { font-size: 9px; }
  .sub-row h3, .uc-row h3, .ind-pane .sub-row h3 { font-size: 1.02rem; }

  /* dark roof card stacks */
  .sol-roof { grid-template-columns: 1fr !important; gap: 8px; }
  .sol-roof .sol-desc { grid-column: auto; grid-row: auto; }
  .sol-roof .sol-arrow { display: none; }

  /* value panel stacks with a hairline between halves */
  .value-panel { grid-template-columns: 1fr; gap: 18px; }
  .value-panel .vp-side { border-top: 1px solid rgba(255,255,255,0.18); padding-top: 16px; }

  /* carousels: edge-to-edge cards, arrows hidden (swipe instead) */
  .cc-slide { padding: 18px; }
  .cc-mini { display: none; }
  .cc-dot { width: 32px; height: 4px; }
  .qc-slide { padding: 20px 18px; }
  .qc-slide .q-text { font-size: 1rem; line-height: 1.55; }

  /* stats: 2-up cards with consistent height */
  .scale-line { gap: 8px; }
  .scale-line .stat .num { font-size: 1.3rem; }

  /* footer: calm stack */
  .footer-grid { gap: 22px; padding-bottom: 14px; }
  .f-partner img { width: 36px; height: 36px; }
  .footer-motto { letter-spacing: 2px; font-size: 9px; }
}

/* mobile timeline: vertical spine with dots (fishbone becomes a story list) */
@media (max-width: 640px) {
  .fb-body { border-left: 2px solid var(--line); padding-left: 18px; gap: 12px; }
  .fb-item { margin: 0; }
  .fb-item::before {
    content: ""; position: absolute; left: -24px; top: 18px;
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--magma); border: 2px solid #fff;
  }
  .fb-head { margin-top: 14px; }
  .fb-head::before { display: none; }
}