/* ============================================================
   DIGITALFLOW — Site Design System
   Shared across all pages. Built from Brand Guidelines v1.0
   + Website Hero (04b). Pure CSS, no framework dependencies.
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  /* Core canvas */
  --carbon: #0E0A14;
  --carbon-2: #15101D;
  --carbon-3: #1A1520;

  /* Bone / text on dark */
  --bone: #F3EAD8;
  --bone-dim: rgba(243, 234, 216, 0.72);
  --bone-faint: rgba(243, 234, 216, 0.5);
  --bone-line: rgba(243, 234, 216, 0.12);
  --bone-line-2: rgba(243, 234, 216, 0.06);

  /* Warm light surfaces */
  --paper: #F7F5F0;
  --ink: #14110D;
  --ink-dim: rgba(20, 17, 13, 0.66);
  --ink-faint: rgba(20, 17, 13, 0.42);
  --ink-line: rgba(20, 17, 13, 0.12);

  /* Brand accents */
  --ember: #E89853;
  --ember-solid: #D97F33;
  --coral: #E57373;
  --violet: #B67AFF;
  --success: #6FCF97;

  --gradient-flow: linear-gradient(110deg, var(--ember) 0%, var(--coral) 45%, var(--violet) 100%);

  /* Type */
  --font-display: 'Inter Tight', -apple-system, system-ui, sans-serif;
  --font-body: 'Inter', -apple-system, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Layout */
  --maxw: 1200px;
  --maxw-wide: 1440px;
  --gutter: 64px;
  --radius: 10px;
  --radius-lg: 14px;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- Reset ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--carbon);
  color: var(--bone);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
/* must come after the img rule above: `display: block` would otherwise
   beat the browser default for [hidden] and keep hidden images visible */
[hidden] { display: none !important; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; }

/* ---------- Utilities ---------- */
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.container-wide { max-width: var(--maxw-wide); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: 112px 0; position: relative; }
.section-sm { padding: 72px 0; }
.center { text-align: center; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* Backgrounds */
.bg-carbon { background: var(--carbon); }
.bg-carbon-2 { background: var(--carbon-2); color: var(--bone); }
.bg-paper { background: var(--paper); color: var(--ink); }

/* ---------- Typography ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ember);
  margin-bottom: 22px;
}
.eyebrow .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ember); flex: none;
}
.bg-paper .eyebrow { color: var(--ember-solid); }

.eyebrow-pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 6px 14px 6px 12px;
  background: rgba(243,234,216,0.04);
  border: 1px solid var(--bone-line);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone-dim);
}
.eyebrow-pill .pulse {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 0 rgba(111,207,151,0.6);
  animation: pulse 2s infinite;
}
.eyebrow-pill .div { color: var(--bone-line); }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(111,207,151,0.6); }
  70% { box-shadow: 0 0 0 8px rgba(111,207,151,0); }
  100% { box-shadow: 0 0 0 0 rgba(111,207,151,0); }
}

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.03em; }
.h-display {
  font-size: clamp(44px, 7vw, 92px);
  letter-spacing: -0.045em;
  line-height: 0.98;
}
h1, .h1 { font-size: clamp(38px, 5.5vw, 64px); line-height: 1.02; letter-spacing: -0.04em; }
h2, .h2 { font-size: clamp(30px, 4vw, 44px); line-height: 1.05; }
h3, .h3 { font-size: clamp(20px, 2.4vw, 24px); line-height: 1.2; }
h4, .h4 { font-size: 20px; line-height: 1.25; }

.flow-text {
  background: var(--gradient-flow);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-style: normal;
  display: inline-block;
  padding-right: 0.08em;
  margin-right: -0.08em;
}

.lead {
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.55;
  color: var(--bone-dim);
  font-weight: 300;
  max-width: 60ch;
}
.bg-paper .lead { color: var(--ink-dim); }
.muted { color: var(--bone-dim); }
.bg-paper .muted { color: var(--ink-dim); }

.mono-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bone-faint);
}
.bg-paper .mono-label { color: var(--ink-faint); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 8px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -0.01em;
  border: 1px solid transparent;
  transition: all 0.2s var(--ease);
  white-space: nowrap;
}
.btn .arrow { display: inline-block; transition: transform 0.2s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }
.btn-ember { background: var(--ember); color: var(--carbon); }
.btn-ember:hover { background: #f3a965; }
.btn-primary { background: var(--bone); color: var(--carbon); }
.btn-primary:hover { background: #fff; }
.btn-ghost { background: transparent; color: var(--bone); border-color: var(--bone-line); }
.btn-ghost:hover { border-color: rgba(243,234,216,0.4); }
.bg-paper .btn-ghost { color: var(--ink); border-color: var(--ink-line); }
.bg-paper .btn-ghost:hover { border-color: rgba(20,17,13,0.4); }
.btn-dark { background: var(--carbon); color: var(--bone); }
.btn-dark:hover { background: var(--carbon-3); }

.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ember);
  transition: gap 0.2s var(--ease);
}
.bg-paper .arrow-link { color: var(--ember-solid); }
.arrow-link:hover { gap: 10px; }

/* ---------- Atmospheric hero background ---------- */
.atmos { position: relative; overflow: hidden; background: var(--carbon); }
.atmos::before, .atmos::after {
  content: ""; position: absolute; border-radius: 50%;
  filter: blur(120px); opacity: 0.5; pointer-events: none; z-index: 0;
}
.atmos::before {
  width: 720px; height: 720px; top: -220px; right: -140px;
  background: radial-gradient(circle, rgba(232,152,83,0.5) 0%, rgba(232,152,83,0) 60%);
}
.atmos::after {
  width: 640px; height: 640px; bottom: -220px; left: 120px;
  background: radial-gradient(circle, rgba(182,122,255,0.38) 0%, rgba(182,122,255,0) 60%);
}
.atmos > * { position: relative; z-index: 1; }
.atmos-grid {
  position: absolute; inset: 0; z-index: 0;
  background-image:
    linear-gradient(rgba(243,234,216,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(243,234,216,0.025) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black 30%, transparent 75%);
}

/* ---------- Site header / nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(14,10,20,0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--bone-line-2);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 68px;
}
.brand-mark { display: flex; align-items: center; gap: 12px; }
.brand-mark svg { width: 34px; height: 34px; flex: none; }
.wordmark {
  font-family: var(--font-display); font-weight: 600;
  font-size: 21px; letter-spacing: -0.04em; color: var(--bone);
}
.wordmark .flow {
  background: var(--gradient-flow);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.nav-links {
  display: flex; align-items: center; gap: 26px;
  font-size: 15px; font-weight: 500; color: var(--bone-dim);
}
.nav-links a { padding: 6px 0; transition: color 0.2s; position: relative; }
.nav-links a:hover, .nav-links a.active { color: var(--bone); }
.nav-links a.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 2px; background: var(--ember); border-radius: 2px;
}
.nav-actions { display: flex; align-items: center; gap: 16px; }

/* Dropdown (Solutions) */
.has-dropdown { position: relative; }
.dropdown {
  position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(6px);
  min-width: 300px; padding: 10px;
  background: var(--carbon-2); border: 1px solid var(--bone-line);
  border-radius: var(--radius); box-shadow: 0 24px 60px rgba(0,0,0,0.5);
  opacity: 0; visibility: hidden; transition: all 0.18s var(--ease); z-index: 120;
}
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.dropdown a {
  display: block; padding: 10px 12px; border-radius: 7px;
  color: var(--bone-dim); font-size: 14px; font-weight: 500;
  transition: all 0.15s;
}
.dropdown a:hover { background: rgba(243,234,216,0.05); color: var(--bone); }
.dropdown a span { display: block; font-family: var(--font-body); font-weight: 400; font-size: 12px; color: var(--bone-faint); margin-top: 2px; }

/* Mobile toggle */
.nav-toggle {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; padding: 8px;
}
.nav-toggle span { width: 22px; height: 2px; background: var(--bone); border-radius: 2px; transition: all 0.25s var(--ease); }
.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Screenshot / browser frame ---------- */
.shot-frame {
  border: 1px solid var(--bone-line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--carbon-2);
  box-shadow: 0 24px 60px rgba(0,0,0,0.4);
}
.shot-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; background: rgba(255,255,255,0.02);
  border-bottom: 1px solid var(--bone-line);
}
.shot-bar .dots { display: flex; gap: 6px; }
.shot-bar .dots span { width: 10px; height: 10px; border-radius: 50%; background: rgba(243,234,216,0.18); }
.shot-bar .addr { font-family: var(--font-mono); font-size: 11px; color: var(--bone-faint); }
.shot-img {
  position: relative;
  aspect-ratio: 16 / 10;
  background-size: cover; background-position: top center;
  background-color: var(--carbon);
  background-image:
    radial-gradient(ellipse 60% 50% at 30% 0%, rgba(232,152,83,0.16), transparent 70%),
    radial-gradient(ellipse 50% 50% at 90% 100%, rgba(182,122,255,0.14), transparent 70%);
}
.shot-img .placeholder {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--bone-faint); text-align: center; padding: 20px;
}
.shot-img .placeholder .tag { color: var(--ember); }
.shot-cap { padding: 16px 18px; }
.shot-cap h4 { color: var(--bone); font-size: 16px; margin-bottom: 4px; }
.shot-cap p { font-size: 13px; color: var(--bone-dim); }

/* ---------- Integrohu hub diagram ---------- */
.hub {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--bone-line); border: 1px solid var(--bone-line);
  border-radius: var(--radius); overflow: hidden;
}
.hub .node {
  background: var(--carbon); padding: 22px 18px; text-align: center;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--bone-dim); display: flex; align-items: center; justify-content: center; min-height: 78px;
}
.hub .node.core {
  background: linear-gradient(135deg, rgba(232,152,83,0.16), rgba(182,122,255,0.14));
  color: var(--bone); font-family: var(--font-display); font-weight: 600; font-size: 17px;
  letter-spacing: -0.02em; text-transform: none;
}

/* ---------- Cards / grids ---------- */
.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--carbon-2);
  border: 1px solid var(--bone-line);
  border-radius: var(--radius);
  padding: 32px;
  transition: all 0.2s var(--ease);
}
.card:hover { border-color: rgba(243,234,216,0.22); transform: translateY(-3px); }
.card .num { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; color: var(--bone-faint); margin-bottom: 24px; }
.card h3, .card h4 { color: var(--bone); margin-bottom: 10px; }
.card p { font-size: 14px; color: var(--bone-dim); line-height: 1.6; }
.card .arrow-link { margin-top: 18px; }

/* Seamless bordered grid (like hero services) */
.tile-grid {
  display: grid; gap: 1px;
  background: var(--bone-line);
  border: 1px solid var(--bone-line);
  border-radius: var(--radius); overflow: hidden;
}
.tile-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.tile-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.tile {
  background: var(--carbon-2); padding: 36px 32px;
  transition: background 0.2s var(--ease);
}
.tile:hover { background: var(--carbon); }
.tile .num { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; color: var(--bone-faint); margin-bottom: 26px; }
.tile h3, .tile h4 { color: var(--bone); margin-bottom: 10px; }
.tile p { font-size: 14px; color: var(--bone-dim); line-height: 1.6; }
.tile .arrow-link { margin-top: 18px; }

/* Section header block */
.section-head { max-width: 60ch; margin-bottom: 56px; }
.section-head.center { margin-left: auto; margin-right: auto; }

/* ---------- Stat / status strip ---------- */
.status-strip {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--bone-line);
  border-bottom: 1px solid var(--bone-line);
  padding: 28px 0;
}
.status-cell { padding: 0 32px; border-right: 1px solid var(--bone-line); }
.status-cell:first-child { padding-left: 0; }
.status-cell:last-child { padding-right: 0; border-right: none; }
.status-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bone-faint); margin-bottom: 12px; }
.status-value { font-family: var(--font-display); font-weight: 500; font-size: 22px; letter-spacing: -0.02em; color: var(--bone); line-height: 1.2; }
.status-value .accent { color: var(--ember); }
.status-value .micro { display: block; font-family: var(--font-body); font-size: 13px; font-weight: 400; color: var(--bone-dim); margin-top: 4px; letter-spacing: 0; }

/* ---------- CTA band ---------- */
.cta-band { position: relative; overflow: hidden; border-radius: var(--radius-lg); padding: 72px var(--gutter); background: var(--carbon-2); border: 1px solid var(--bone-line); }
.cta-band h2 { max-width: 18ch; margin-bottom: 18px; }
.cta-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

/* ---------- Footer ---------- */
.site-footer { background: var(--carbon); border-top: 1px solid var(--bone-line); padding: 72px 0 40px; }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 56px; }
.footer-brand .wordmark { font-size: 22px; margin-bottom: 16px; }
.footer-brand p { font-size: 14px; color: var(--bone-dim); max-width: 34ch; }
.footer-col h5 { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bone-faint); margin-bottom: 18px; }
.footer-col a { display: block; font-size: 14px; color: var(--bone-dim); padding: 6px 0; transition: color 0.15s; }
.footer-col a:hover { color: var(--bone); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 28px; border-top: 1px solid var(--bone-line); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--bone-faint); }
.footer-bottom a:hover { color: var(--bone); }

/* ---------- Page hero (inner pages) ---------- */
.page-hero { padding: 88px 0 72px; }
.page-hero .h1 { max-width: 16ch; margin-bottom: 20px; }
.page-hero .lead { margin-top: 4px; }
.breadcrumb { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bone-faint); margin-bottom: 20px; }
.breadcrumb a:hover { color: var(--bone); }

/* Feature list with checkmarks */
.check-list li { display: flex; gap: 12px; padding: 10px 0; font-size: 15px; color: var(--bone-dim); align-items: flex-start; }
.check-list li::before { content: "→"; color: var(--ember); flex: none; font-weight: 600; }

/* Process steps */
.step { display: grid; grid-template-columns: 56px 1fr; gap: 24px; padding: 32px 0; border-top: 1px solid var(--bone-line); align-items: start; }
.step-mark { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.step-icon {
  width: 46px; height: 46px; flex: 0 0 46px;
  display: grid; place-items: center;
  border: 1px solid var(--bone-line);
  border-radius: 12px;
  background: rgba(232, 152, 83, 0.05);
  color: var(--ember);
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.step-icon svg { width: 22px; height: 22px; display: block; }
.step:hover .step-icon { border-color: rgba(232, 152, 83, 0.45); background: rgba(232, 152, 83, 0.1); }
.bg-paper .step-icon { border-color: var(--ink-line); background: rgba(217, 127, 51, 0.07); color: var(--ember-solid); }
.step:last-child { border-bottom: 1px solid var(--bone-line); }
.step .step-num { font-family: var(--font-mono); font-size: 13px; color: var(--ember); letter-spacing: 0.1em; }
.step h3 { margin-bottom: 8px; }
.step p { color: var(--bone-dim); font-size: 15px; max-width: 60ch; }

/* Forms */
.form-field { margin-bottom: 20px; }
.form-field label { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bone-faint); margin-bottom: 8px; }
.form-field input, .form-field textarea, .form-field select {
  width: 100%; padding: 14px 16px; font-family: var(--font-body); font-size: 15px;
  background: var(--carbon-2); border: 1px solid var(--bone-line); border-radius: 8px; color: var(--bone);
  transition: border-color 0.15s;
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus { outline: none; border-color: var(--ember); }
.form-field textarea { resize: vertical; min-height: 130px; }

/* Badges / tags */
.tag { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--bone-line); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bone-dim); }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  :root { --gutter: 40px; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 40px 24px; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
/* The primary nav runs out of horizontal room well before the page layout
   does, so it collapses to the hamburger at its own, wider breakpoint.

   The second condition catches tablets in landscape: an iPad Pro reports
   1366px, so it would otherwise get the desktop nav, whose dropdown opens on
   :hover — which a touch screen cannot do, leaving Solutions unreachable. */
@media (max-width: 1120px), (hover: none) and (max-width: 1400px) {
  .nav-links, .nav-actions .btn { display: none; }
  .nav-toggle { display: flex; }
  .nav-links {
    position: fixed; top: var(--header-offset, 68px); left: 0; right: 0; bottom: 0;
    flex-direction: column; align-items: flex-start; gap: 4px;
    background: var(--carbon); padding: 24px var(--gutter);
    /* Room for the fixed CTA bar, plus the iOS home indicator. */
    padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px));
    transform: translateX(100%); transition: transform 0.3s var(--ease);
    z-index: 90; overflow-y: auto; -webkit-overflow-scrolling: touch;
    /* Stops a scroll that reaches the end of the panel from carrying on
       into the page behind it. */
    overscroll-behavior: contain;
  }
  /* backdrop-filter makes an element the containing block for its
     position:fixed children. With it on, this panel measured itself against
     the 68px header rather than the screen and collapsed to nothing — the
     reason the mobile menu never appeared at all. It is dropped for the whole
     breakpoint rather than toggled with .nav-open, because a containing block
     that appears and disappears is handled inconsistently across browsers.
     The blur is replaced with a near-opaque fill, which reads the same on a
     phone. */
  .site-header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    /* Fully opaque: at 0.94 the hero's glow showed through as a smudge
       behind the wordmark. */
    background: var(--carbon);
  }
  .nav-open .nav-links { display: flex; transform: translateX(0); }
  .nav-links a { font-size: 20px; font-family: var(--font-display); padding: 12px 0; width: 100%; border-bottom: 1px solid var(--bone-line-2); }
  .nav-links .has-dropdown { width: 100%; }
  /* The :hover / :focus-within rules above are more specific than a bare
     .dropdown, so they have to be repeated here or they win. Touching a
     sub-link raises :focus-within, which re-applied the desktop's
     translateX(-50%) and threw the submenu half a panel to the left, off
     screen — the reason a tap on a Solutions item went nowhere. */
  .dropdown,
  .has-dropdown:hover .dropdown,
  .has-dropdown:focus-within .dropdown {
    position: static; transform: none;
    opacity: 1; visibility: visible;
    box-shadow: none; background: transparent; border: none;
    padding: 0 0 8px 16px; min-width: 0;
  }
  .dropdown a { font-size: 15px; padding: 8px 0; border: none; }

  /* The header CTA is hidden above; it reappears pinned to the foot of the
     open panel, so the main call to action still exists on a phone. */
  .nav-mobile-cta {
    display: none;
    position: fixed; left: 0; right: 0; bottom: 0;
    padding: 16px var(--gutter);
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    background: var(--carbon); border-top: 1px solid var(--bone-line-2);
    z-index: 95;
  }
  .nav-open .nav-mobile-cta { display: block; }
  .nav-mobile-cta .btn { display: flex; justify-content: center; width: 100%; }

  /* Without this the page scrolls behind the open panel — the single most
     obvious mobile-menu bug on iOS. */
  .nav-open { overflow: hidden; }
}

/* --header-offset is measured from the real header in site.js, so the panel
   sits under it whatever pushes the header down — the admin bar included. */
.nav-mobile-cta { display: none; }

/* ---------- Phone corrections ---------- */
@media (max-width: 560px) {

  /* The hero badge is one nowrap line of wide-tracked mono: at 46 characters
     it measures about 440px against a 276px screen, so it was being clipped.
     Let the two halves wrap onto their own lines, and drop the divider that
     only makes sense when they sit side by side. */
  .eyebrow-pill {
    flex-wrap: wrap;
    border-radius: 14px;
    font-size: 10px;
    letter-spacing: 0.12em;
    padding: 8px 14px;
    gap: 4px 10px;
  }
  .eyebrow-pill .div { display: none; }

  /* Nine nodes across three columns leaves ~90px each, and 36px of that is
     padding — not enough for "E-commerce" at this tracking. The 3x3 shape is
     the point of the diagram (the core sits dead centre), so keep the columns
     and shrink the type instead. */
  .hub .node {
    padding: 16px 6px;
    font-size: 9px;
    letter-spacing: 0.04em;
    min-height: 64px;
  }
  .hub .node.core { font-size: 14px; }
}

/* Eight top-level links plus six sub-links at tablet sizing come to roughly
   690px, which overflows a shorter phone (an iPhone SE leaves 599px). Tighten
   the rhythm so the whole menu is visible without scrolling. */
@media (max-width: 560px) {
  .nav-links { padding-top: 12px; gap: 0; }
  .nav-links a { font-size: 17px; padding: 10px 0; }
  .dropdown { padding: 0 0 6px 14px; }
  .dropdown a { font-size: 14px; padding: 6px 0; }
  .dropdown a span { font-size: 11px; margin-top: 1px; }
}

/* A phone held sideways has almost no vertical room. Drop the sub-link
   descriptions there so the list still fits. Both conditions repeat the nav's
   own breakpoint, so a short desktop window keeps the full desktop nav. */
@media (max-height: 520px) and (max-width: 1120px),
       (max-height: 520px) and (hover: none) and (max-width: 1400px) {
  .nav-links a { font-size: 16px; padding: 8px 0; }
  .dropdown a { font-size: 13px; padding: 5px 0; }
  .dropdown a span { display: none; }
}

@media (max-width: 860px) {
  .section { padding: 80px 0; }
  .grid-3, .grid-2, .tile-grid.cols-3, .tile-grid.cols-2 { grid-template-columns: 1fr; }
  .status-strip { grid-template-columns: 1fr; gap: 0; }
  .status-cell { border-right: none; border-bottom: 1px solid var(--bone-line); padding: 22px 0; }
  .status-cell:last-child { border-bottom: none; }
  .step { grid-template-columns: 1fr; gap: 14px; }
  .step-mark { flex-direction: row; align-items: center; gap: 14px; }
}
@media (max-width: 560px) {
  :root { --gutter: 22px; }
  .grid-4 { grid-template-columns: 1fr; }
  .section { padding: 64px 0; }
  .cta-band { padding: 48px 28px; }
  .footer-top { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; gap: 12px; align-items: flex-start; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ============================================================
   CLIENT LOGO SLIDER
   White marks by default; full colour on a light chip on hover.
   Auto-advances one slide every 2s (see assets/js/site.js).
   ============================================================ */
.clients-band { overflow: hidden; }
.clients-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 34ch); align-items: end; gap: 24px 48px; margin-bottom: 44px; }
.clients-head h2 { font-size: clamp(24px, 2.6vw, 34px); max-width: 22ch; }
.clients-head p { color: var(--bone-dim); font-size: 15px; }
@media (max-width: 1024px) { .clients-head { grid-template-columns: 1fr; align-items: start; } .clients-head h2 { max-width: none; } }

.logo-slider {
  --per-view: 5;
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 3.5%, #000 96.5%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 3.5%, #000 96.5%, transparent 100%);
}
.logo-track {
  display: flex;
  align-items: stretch;
  will-change: transform;
}
.logo-slide {
  flex: 0 0 calc(100% / var(--per-view));
  max-width: calc(100% / var(--per-view));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
}
.logo-chip {
  width: 100%;
  min-height: 92px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 20px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  transition: background 0.28s var(--ease), border-color 0.28s var(--ease);
}
.logo-mark { position: relative; display: block; }
.logo-mark img {
  display: block;
  height: 38px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  transition: opacity 0.28s var(--ease);
}
.logo-mark .lm-w { opacity: 0.85; }
.logo-mark .lm-c { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }

.logo-slide:hover .logo-chip,
.logo-slide:focus-within .logo-chip { background: var(--paper); border-color: rgba(20,17,13,0.08); }
.logo-slide:hover .lm-w,
.logo-slide:focus-within .lm-w { opacity: 0; }
.logo-slide:hover .lm-c,
.logo-slide:focus-within .lm-c { opacity: 1; }

@media (max-width: 1200px) { .logo-slider { --per-view: 4; } }
@media (max-width: 860px)  { .logo-slider { --per-view: 3; } .logo-chip { min-height: 78px; padding: 14px; } .logo-mark img { height: 32px; } }
@media (max-width: 560px)  { .logo-slider { --per-view: 2; } .clients-head { margin-bottom: 28px; } }

/* Touch devices have no hover: show colour on the chip instead */
@media (hover: none) {
  .logo-chip { background: rgba(243,234,216,0.04); border-color: var(--bone-line-2); }
}

/* ============================================================
   CLIENT LOGO WALL  (clients.html)
   Same chip/mark markup as the homepage slider, laid out as a grid.
   ============================================================ */
.logo-wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(186px, 1fr));
  gap: 12px;
}
.logo-wall .logo-chip {
  min-height: 108px;
  border-color: var(--bone-line-2);
  background: rgba(243, 234, 216, 0.02);
}

/* Hover on the chip itself, so the wall and the slider share one rule */
.logo-chip:hover { background: var(--paper); border-color: rgba(20, 17, 13, 0.08); }
.logo-chip:hover .lm-w { opacity: 0; }
.logo-chip:hover .lm-c { opacity: 1; }

@media (max-width: 560px) {
  .logo-wall { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 8px; }
  .logo-wall .logo-chip { min-height: 88px; padding: 12px; }
}

/* ============================================================
   CLIENT SUCCESS PANELS  (clients.html)
   ============================================================ */
.case-panel {
  border: 1px solid var(--bone-line);
  border-radius: var(--radius-lg);
  background: var(--carbon-2);
  padding: 36px;
  margin-bottom: 24px;
}
.case-panel:last-child { margin-bottom: 0; }

.case-head { display: flex; align-items: flex-start; gap: 26px; margin-bottom: 32px; }
.case-logo {
  flex: 0 0 116px;
  height: 62px;
  display: grid;
  place-items: center;
  padding: 10px 14px;
  border: 1px solid var(--bone-line-2);
  border-radius: var(--radius);
  background: rgba(243, 234, 216, 0.03);
}
.case-logo img { max-height: 100%; width: auto; max-width: 100%; object-fit: contain; opacity: 0.9; }
.case-title h3 { font-size: clamp(20px, 2.2vw, 27px); margin: 10px 0 12px; }
.case-title p { color: var(--bone-dim); font-size: 15px; max-width: 68ch; }

.case-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; align-items: start; }

/* --- the bar chart (pure CSS; bar heights are set inline as a % of the plot) --- */
.case-chart figcaption { margin-bottom: 22px; }
.chart-area {
  position: relative;
  height: 200px;
  border-bottom: 1px solid var(--bone-line);
}
.chart-bars, .chart-axis {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 10px;
}
.chart-bars { height: 100%; align-items: end; }
.chart.is-wide .chart-bars, .chart.is-wide .chart-axis { gap: 30px; max-width: 470px; }
.chart-col { height: 100%; display: flex; align-items: flex-end; }
.chart-bar {
  position: relative;
  width: 100%;
  border-radius: 5px 5px 0 0;
  background: linear-gradient(180deg, rgba(243, 234, 216, 0.26), rgba(243, 234, 216, 0.08));
  border-top: 2px solid rgba(243, 234, 216, 0.55);
  min-height: 3px;
}
.chart-col.is-peak .chart-bar {
  background: linear-gradient(180deg, rgba(232, 152, 83, 0.46), rgba(232, 152, 83, 0.1));
  border-top-color: var(--ember);
}
.chart-val {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding: 0 5px 7px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--bone-dim);
  white-space: nowrap;
  background: var(--carbon-2);
  z-index: 3;
}
.chart-col.is-peak .chart-val { color: var(--ember); }
.chart-axis { padding-top: 11px; }
.chart-axis span {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--bone-faint);
}
.chart-axis span.is-peak { color: var(--bone-dim); }

/* the horizontal comparison line */
.chart-ref {
  position: absolute;
  left: 0; right: 0;
  border-top: 1px dashed rgba(229, 115, 115, 0.8);
  pointer-events: none;
  z-index: 2;
}
.chart-ref span {
  position: absolute;
  left: 0;
  bottom: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--coral);
  white-space: nowrap;
}
.chart-note { margin-top: 20px; font-size: 13px; color: var(--bone-faint); max-width: 62ch; }

/* --- the stat rail --- */
.case-stats { display: flex; flex-direction: column; gap: 12px; }
.case-stat {
  border: 1px solid var(--bone-line-2);
  border-left: 3px solid var(--ember);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: rgba(243, 234, 216, 0.025);
  padding: 18px 20px;
}
.case-stat .v {
  font-family: var(--font-display);
  font-size: 25px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 8px;
}
.case-stat p { font-size: 13px; line-height: 1.5; color: var(--bone-dim); }

.case-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 32px;
  padding-top: 22px;
  border-top: 1px solid var(--bone-line);
}
.case-foot > div:first-child { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.case-stack { font-size: 14px; font-weight: 500; }
.case-meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--bone-faint); }

@media (max-width: 1024px) {
  .case-body { grid-template-columns: 1fr; gap: 32px; }
  .case-stats { display: grid; grid-template-columns: repeat(3, 1fr); }
  .chart.is-wide .chart-bars, .chart.is-wide .chart-axis { max-width: none; }
}
@media (max-width: 860px) {
  .case-panel { padding: 26px 22px; }
  .case-head { flex-direction: column; gap: 18px; }
  .case-stats { grid-template-columns: 1fr; }
  .chart-area { height: 168px; }
  .chart-bars, .chart-axis { gap: 6px; }
  .chart.is-wide .chart-bars, .chart.is-wide .chart-axis { gap: 16px; }
  .chart-ref span { font-size: 9px; letter-spacing: 0; }
}
@media (max-width: 560px) {
  .chart-val, .chart-axis span { font-size: 9px; letter-spacing: 0; }
  .chart-bars, .chart-axis { gap: 4px; }
}

/* ============================================================
   TEAM  (team.html)
   Avatars are square files shown as circles. Each .member-photo holds a
   <span class="mono"> with the person's initials BEHIND the <img>, so a
   missing or renamed file degrades to a monogram instead of a broken image
   (assets/js/site.js hides any avatar that fails to load).
   ============================================================ */
.team-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }

.member {
  position: relative;
  overflow: hidden;
  padding: 42px 28px 34px;
  text-align: center;
  border: 1px solid var(--bone-line);
  border-radius: var(--radius-lg);
  background: var(--carbon-2);
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.member::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--gradient-flow);
}
.member:hover { border-color: rgba(243, 234, 216, 0.22); transform: translateY(-3px); }

.member-photo {
  position: relative;
  width: 132px; height: 132px;
  margin: 0 auto 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  overflow: hidden;
  background: var(--carbon-3);
  border: 1px solid var(--bone-line);
}
.member-photo .mono {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--bone-faint);
}
.member-photo img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

.member-name { font-family: var(--font-display); font-size: 20px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 7px; }
.member-role {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ember);
  margin-bottom: 16px;
}
.member-bio { font-size: 14px; line-height: 1.6; color: var(--bone-dim); }

/* compact variant — the engineering bench (name + role only) */
.team-grid.is-compact { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.team-grid.is-compact .member { padding: 32px 20px 28px; }
.team-grid.is-compact .member::before { height: 2px; }
.team-grid.is-compact .member-photo { width: 86px; height: 86px; margin-bottom: 18px; }
.team-grid.is-compact .member-photo .mono { font-size: 22px; }
.team-grid.is-compact .member-name { font-size: 17px; }
.team-grid.is-compact .member-role { margin-bottom: 0; }

.team-note {
  margin-top: 32px;
  padding-top: 26px;
  border-top: 1px solid var(--bone-line);
  font-size: 15px;
  color: var(--bone-dim);
  max-width: 66ch;
}

@media (max-width: 1024px) {
  .team-grid, .team-grid.is-compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .team-grid { grid-template-columns: 1fr; }
  .team-grid.is-compact { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .member { padding: 34px 22px 28px; }
  .team-grid.is-compact .member { padding: 24px 14px 20px; }
  .team-grid.is-compact .member-photo { width: 68px; height: 68px; }
  .team-grid.is-compact .member-name { font-size: 15px; }
  .team-grid.is-compact .member-role { font-size: 10px; letter-spacing: 0.1em; }
}