/* =========================================================================
   Eastbound Link — design system
   Derived from the reference EMS sites (Pentagon, GBS, Venture):
   deep industrial navy, a confident warm copper accent, clean sans-serif.
   ========================================================================= */

:root {
  /* Color system */
  --ink: #120220;          /* deep navy — hero, header, footer */
  --ink-2: #0a0114;        /* darker navy */
  --ink-3: #240838;        /* raised panel on dark */
  --accent: #f0067b;       /* copper — for fills, bars, icons, and text on dark backgrounds (>=4.5:1 on ink) */
  --accent-2: #ffb020;     /* lighter copper — for text/gradients on dark backgrounds */
  --accent-text: #c4006b;  /* darker copper — for text on LIGHT backgrounds (>=4.5:1 on white) */
  --accent-ink: #120220;   /* text on accent */
  --bg: #ffffff;           /* off-white section bg */
  --bg-2: #fbf7fc;         /* alternating light bg */
  --card: #ffffff;
  --text: #1b1023;         /* near-black text */
  --muted: #6a5c72;        /* secondary text */
  --line: #efe4f2;         /* borders on light */
  --line-dark: rgba(255,255,255,.08);
  --success: #2e9e63;

  /* Typography */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, "Noto Sans", sans-serif;

  /* Spacing / radii */
  --radius: 14px;
  --radius-sm: 9px;
  --width: 1180px;
  --shadow: 0 18px 40px -24px rgba(18,2,32,.45);
  --shadow-sm: 0 10px 24px -18px rgba(18,2,32,.4);
  --ease: cubic-bezier(.22,.61,.36,1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
ul { margin: 0; padding: 0; }

.container { width: min(92vw, var(--width)); margin-inline: auto; }
.center { text-align: center; }
.muted { color: var(--muted); }

/* ---------- Links & buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent); color: var(--accent-ink);
  font-weight: 700; font-size: 15.5px;
  padding: 13px 24px; border-radius: 10px;
  border: 0; transition: transform .18s var(--ease), background .18s, box-shadow .18s;
  white-space: nowrap;
}
.btn:hover { background: var(--accent-2); transform: translateY(-2px); box-shadow: var(--shadow); }


.btn--lg { padding: 16px 30px; font-size: 16.5px; }
.btn--light { background: #fff; color: var(--ink); }
.btn--light:hover { background: #fbf7fc; }

/* ---------- Accessibility ---------- */
.skip-link { position: absolute; left: -999px; top: -999px; background: var(--ink); color: #fff;
  padding: 12px 18px; border-radius: 8px; z-index: 1000; font-weight: 700; font-size: 15px; }
.skip-link:focus { left: 16px; top: 16px; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible,
select:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--accent-text); outline-offset: 2px; border-radius: 6px;
}
.section--dark a:focus-visible, .section--dark button:focus-visible,
.site-footer a:focus-visible, .contact-info a:focus-visible {
  outline-color: var(--accent-2);
}

.link { color: var(--accent-text); font-weight: 600; }
.link:hover { text-decoration: underline; }
.section--dark .link, .site-footer .link, .contact-info .link, .page-hero .link { color: var(--accent-2); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(18,2,32,.92);
  backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid var(--line-dark);
}
.nav { display: flex; align-items: center; justify-content: space-between; height: 70px; }
.brand { display: flex; align-items: center; gap: 11px; color: #fff; }
.brand__mark {
  width: 30px; height: 30px; border-radius: 8px; flex: 0 0 auto;
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  display: grid; place-items: center; color: var(--accent-ink);
  font-weight: 800; font-size: 16px; letter-spacing: -.5px;
}
.brand__name { font-weight: 800; letter-spacing: -.3px; font-size: 19px; line-height: 1; }
.brand__sub { display: block; font-weight: 500; font-size: 12px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--accent); margin-top: 3px; }

.nav__links { display: flex; align-items: center; gap: 6px; list-style: none; }
.nav__links a {
  color: #e5d9ea; font-weight: 600; font-size: 15px; padding: 9px 13px; border-radius: 8px;
  transition: color .16s, background .16s;
}
.nav__links a:hover { color: #fff; background: rgba(255,255,255,.06); }
.nav__links a.is-active { color: #fff; }
.nav__links a.is-active::after { content:""; }
.nav__cta { margin-left: 10px; }

.nav__toggle { display: none; background: none; border: 0; padding: 8px; }
.nav__toggle span {
  display: block; width: 24px; height: 2px; background: #fff; margin: 5px 0;
  border-radius: 2px; transition: transform .2s var(--ease), opacity .2s;
}
.nav__toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* ---------- Hero (one image: day until 18:00, night after) ---------- */
.hero {
  position: relative; min-height: 92vh; min-height: 92dvh; display: flex; align-items: center;
  color: #fff; overflow: hidden; background: var(--ink-2);
}
.hero__media {
  position: absolute; inset: 0;
  background: var(--ink-2) url("../img/hero-day.jpg") center / cover no-repeat;
}
html.is-night .hero__media { background-image: url("../img/hero-night.jpg"); }
.hero__overlay {
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(100deg, rgba(18,2,32,.9) 0%, rgba(18,2,32,.62) 46%, rgba(18,2,32,.28) 100%);
}
.hero__inner { position: relative; z-index: 3; width: min(92vw, var(--width)); margin-inline: auto; padding: 130px 0 150px; }
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 600; font-size: 13.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent-2); margin-bottom: 22px;
}
.hero__eyebrow::before { content:""; width: 26px; height: 2px; background: var(--accent); }
.hero h1 {
  margin: 0 0 20px; font-size: clamp(2.15rem, 5.2vw, 4rem);
  font-weight: 800; letter-spacing: -.02em; line-height: 1.06; max-width: 14ch;
}
.hero__sub { font-size: clamp(1.05rem, 2vw, 1.3rem); max-width: 54ch; color: #f3eaf5; margin: 0 0 34px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- Sections ---------- */
.section { padding: 88px 0; }
.section--tint { background: var(--bg-2); }
.section--dark { background: var(--ink); color: #f3eaf5; }
.section--dark .muted { color: #c9b7d2; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 13px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent-text); margin: 0 0 16px;
}
.eyebrow::before { content:""; width: 24px; height: 2px; background: var(--accent); }
.section--dark .eyebrow { color: var(--accent-2); }
.section--dark .pull cite { color: var(--accent-2); }
.center .eyebrow { justify-content: center; }

.section__head { max-width: 760px; margin: 0 auto 52px; text-align: center; }
.section__head h2 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); font-weight: 800; letter-spacing: -.01em; margin: 0 0 14px; line-height: 1.15; }
.section__head p { font-size: 1.1rem; color: #4a3556; margin: 0; }
.section--dark .section__head p { color: #c9b7d2; }
.section__head--left { margin-left: 0; text-align: left; }
.section__head--left .eyebrow { justify-content: flex-start; }

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

.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px; box-shadow: var(--shadow-sm); transition: transform .2s var(--ease), box-shadow .2s;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.card__icon { width: 46px; height: 46px; border-radius: 11px; margin-bottom: 18px;
  background: linear-gradient(135deg, rgba(240,6,123,.14), rgba(240,6,123,.05));
  color: var(--accent); display: grid; place-items: center; }
.card h3 { font-size: 1.16rem; margin: 0 0 8px; letter-spacing: -.01em; }
.card p { margin: 0; color: var(--muted); font-size: 15.5px; }

/* ---------- Stats band ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; text-align: center; }
.stat { padding: 10px 6px; }
.stat__num { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; color: var(--accent-2);
  letter-spacing: -.02em; line-height: 1; }
.stat__label { margin-top: 10px; font-size: 14.5px; color: #c9b7d2; }

/* ---------- Industries ---------- */
.industries { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.industry { display: flex; align-items: center; gap: 14px; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 18px 20px;
  box-shadow: var(--shadow-sm); }
.industry svg { flex: 0 0 auto; color: var(--accent); }
.industry span { font-weight: 600; color: var(--ink); }

/* ---------- Capabilities / ecosystem ---------- */
.caps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.cap-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 24px; box-shadow: var(--shadow-sm); transition: transform .2s var(--ease), box-shadow .2s; }
.cap-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.cap-card__head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.cap-card__icon { width: 44px; height: 44px; border-radius: 11px; flex: 0 0 auto;
  background: linear-gradient(135deg, rgba(240,6,123,.14), rgba(240,6,123,.05));
  color: var(--accent); display: grid; place-items: center; }
.cap-card h3 { margin: 0; font-size: 1.1rem; letter-spacing: -.01em; }
.cap-card p { margin: 0 0 14px; color: var(--muted); font-size: 14.5px; }
.cap-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.cap-tags span { font-size: 13.5px; font-weight: 600; color: #4a3556; background: var(--bg-2);
  border: 1px solid var(--line); padding: 6px 11px; border-radius: 999px; }

/* ---------- Differentiator ---------- */
.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.split.mirror { grid-template-columns: .95fr 1.05fr; }
.split h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); font-weight: 800; margin: 0 0 18px; line-height: 1.15; }
.split p { color: var(--muted); font-size: 1.05rem; }
.split__list { list-style: none; margin: 26px 0 0; display: grid; gap: 14px; }
.split__list li { display: flex; gap: 12px; color: #4a3556; font-size: 18px; font-weight: 700; }
.split__list li::before { content: ""; flex: 0 0 auto; margin-top: 3px; width: 9px; height: 9px;
  border-radius: 50%; background: var(--accent); }
.split__img { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.split__img img { height: 100%; object-fit: cover; object-position: 50% 42%; filter: saturate(.94) contrast(.98); }

/* ---------- Quote / pull ---------- */
.pull { max-width: 900px; margin: 0 auto; text-align: center; }
.pull blockquote { font-size: clamp(1.5rem, 3.2vw, 2.3rem); font-weight: 700; letter-spacing: -.01em;
  margin: 0 0 20px; line-height: 1.3; }
.pull cite { font-style: normal; color: var(--accent); font-weight: 700; letter-spacing: .04em; }

/* ---------- Testimonials ---------- */
.testis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.testi { background: rgba(255,255,255,.05); border: 1px solid var(--line-dark); border-radius: var(--radius); padding: 30px; }
.testi p { font-style: italic; margin: 0 0 18px; color: #eadfee; }
.testi__who { display: flex; align-items: center; gap: 12px; }
.testi__avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--accent);
  color: var(--accent-ink); display: grid; place-items: center; font-weight: 800; }
.testi__name { font-weight: 700; font-size: 15px; }
.testi__role { font-size: 13px; color: #c9b7d2; }

/* ---------- How we work (steps) ---------- */
.steps { counter-reset: step; display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.step { position: relative; padding-top: 14px; }
.step::before { counter-increment: step; content: "0" counter(step);
  font-size: 2.4rem; font-weight: 800; color: var(--accent-text); opacity: .9; letter-spacing: -.02em; }
.step h3 { margin: 10px 0 6px; font-size: 1.05rem; }
.step p { margin: 0; font-size: 14.5px; color: var(--muted); }

/* ---------- Services (detail list) ---------- */
.service-row { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding: 40px 0;
  border-bottom: 1px solid var(--line); }
.service-row:last-child { border-bottom: 0; }
.service-row__body h3 { font-size: 1.5rem; margin: 6px 0 10px; letter-spacing: -.01em; }
.service-row__body p { color: var(--muted); margin: 0 0 16px; }
.service-row__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag { font-size: 13px; font-weight: 600; background: var(--bg-2); border: 1px solid var(--line);
  padding: 6px 12px; border-radius: 999px; color: #4a3556; }
.service-row__img { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.service-row__img img { height: 100%; object-fit: cover; }
.service-row--flip .service-row__body { order: 2; }
.service-row--flip .service-row__img { order: 1; }

/* ---------- Pricing ---------- */
.pricing-intro { max-width: 720px; margin: 0 auto 56px; text-align: center; }
.pricing-intro h1 { font-size: clamp(2.1rem, 4vw, 3rem); font-weight: 800; margin: 0 0 16px; letter-spacing: -.02em; }
.pricing-intro p { color: var(--muted); font-size: 1.12rem; margin: 0; }
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.tier { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 34px 30px; display: flex; flex-direction: column; box-shadow: var(--shadow-sm);
  transition: transform .2s var(--ease), box-shadow .2s; }
.tier:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.tier--featured { border-color: var(--accent); box-shadow: 0 24px 48px -26px rgba(240,6,123,.55); position: relative; }
.tier--featured::before { content: "Most projects start here"; position: absolute; top: -13px; left: 26px;
  background: var(--accent); color: var(--accent-ink); font-size: 12px; font-weight: 800;
  padding: 5px 12px; border-radius: 999px; }
.tier__name { font-size: 1.18rem; font-weight: 800; }
.tier__price { margin: 14px 0 4px; font-size: 2.1rem; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.tier__price small { font-size: 1rem; font-weight: 600; color: var(--muted); }
.tier__desc { color: var(--muted); font-size: 15px; margin: 0 0 18px; }
.tier__list { list-style: none; margin: 0 0 26px; display: grid; gap: 11px; }
.tier__list li { display: flex; gap: 10px; font-size: 15px; color: #4a3556; }
.tier__list li::before { content:""; flex: 0 0 auto; margin-top: 7px; width: 6px; height: 6px;
  border-radius: 50%; background: var(--accent); }
.tier .btn { margin-top: auto; justify-content: center; }
.tier__note { text-align: center; color: var(--muted); font-size: 15px; margin-top: 18px; }

.pricing-note { margin-top: 40px; padding: 24px 26px; background: var(--bg-2);
  border: 1px solid var(--line); border-radius: var(--radius); color: #4a3556; font-size: 15.5px; }
.pricing-note strong { color: var(--ink); }

.rate-row { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; justify-content: space-between;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 30px;
  box-shadow: var(--shadow-sm); }
.rate-row__main { flex: 1 1 auto; min-width: 220px; }
.rate-row h3 { margin: 0 0 4px; font-size: 1.2rem; }
.rate-row p { margin: 0; color: var(--muted); font-size: 15px; max-width: 60ch; }
.rate-row h3 { color: var(--ink); }
.rate-row__price { font-size: 1.7rem; font-weight: 800; color: var(--ink); white-space: nowrap; }
.rate-row__price small { font-size: 1rem; font-weight: 600; color: var(--muted); }
.rate-row .btn { flex: 0 0 auto; }

/* ---------- FAQ ---------- */
.faq { max-width: 800px; margin: 0 auto; display: grid; gap: 14px; }
.faq__item { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.faq__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: none; border: 0; text-align: left; font-size: 1.02rem; font-weight: 700;
  padding: 20px 22px; color: var(--ink); }
.faq__q::after { content: "+"; font-size: 1.6rem; font-weight: 300; color: var(--accent-text); transition: transform .2s; }
.faq__item.is-open .faq__q::after { transform: rotate(45deg); }
.faq__a { max-height: 0; overflow: hidden; transition: max-height .3s var(--ease); }
.faq__a p { margin: 0; padding: 0 22px 22px; color: var(--muted); font-size: 15.5px; }

/* ---------- Contact ---------- */
.contact-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.field { margin-bottom: 18px; }
.field label { display: block; font-weight: 600; font-size: 14.5px; margin-bottom: 7px; }
.field input, .field textarea, .field select {
  width: 100%; padding: 13px 14px; border: 1px solid var(--line); border-radius: 10px;
  font: inherit; color: var(--ink); background: #fff; transition: border-color .16s, box-shadow .16s;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(240,6,123,.16);
}
.contact-info { background: var(--ink); color: #eadfee; border-radius: var(--radius); padding: 34px; }
.contact-info h2, .contact-info h3 { color: #fff; margin: 0 0 8px; font-size: 1.4rem; letter-spacing: -.01em; }
.contact-form h2 { font-size: 1.35rem; margin: 0 0 20px; letter-spacing: -.01em; color: var(--ink); }
.contact-info p { color: #c9b7d2; margin: 0 0 22px; }
.contact-info__row { display: flex; gap: 12px; padding: 14px 0; border-top: 1px solid var(--line-dark); }
.contact-info__row svg { flex: 0 0 auto; color: var(--accent); margin-top: 2px; }
.contact-info__row b { color: #fff; display: block; font-size: 14.5px; }
.contact-info__row span { color: #c9b7d2; font-size: 14.5px; }

/* ---------- CTA band ---------- */
.cta { background: linear-gradient(115deg, var(--ink) 0%, var(--ink-3) 60%, var(--ink) 100%); color: #fff;
  border-radius: 20px; padding: 62px 40px; text-align: center; position: relative; overflow: hidden; }
.cta::before { content:""; position: absolute; width: 360px; height: 360px; border-radius: 50%;
  background: radial-gradient(circle, rgba(240,6,123,.28), transparent 70%); top: -120px; right: -80px; }
.cta h2 { font-size: clamp(1.8rem, 3.4vw, 2.7rem); font-weight: 800; margin: 0 0 14px; letter-spacing: -.01em; }
.cta p { color: #e8dcec; font-size: 1.1rem; max-width: 54ch; margin: 0 auto 30px; }
.cta .btn { position: relative; z-index: 1; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink-2); color: #c9b7d2; padding: 64px 0 30px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 36px; }
.footer-grid h3 { color: #fff; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 16px; }
.footer-grid p { font-size: 14.5px; margin: 0 0 14px; max-width: 34ch; }
.footer-grid a { font-size: 14.5px; display: block; color: #c9b7d2; padding: 5px 0; }
.footer-grid a:hover { color: #fff; }
.footer-grid address { font-style: normal; font-size: 14.5px; }
.footer-bottom { border-top: 1px solid var(--line-dark); margin-top: 44px; padding-top: 26px;
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; font-size: 13.5px; color: #a995b4; }
.footer-bottom .wordmark { color: #fff; font-weight: 800; }
.footer-bottom a:hover { color: #fff; }

/* ---------- Page hero (subpages) ---------- */
.page-hero { background: linear-gradient(120deg, var(--ink) 0%, var(--ink-3) 70%, var(--ink) 100%); color: #fff;
  padding: 84px 0 72px; }
.page-hero .eyebrow { color: var(--accent-2); }
.page-hero h1 { font-size: clamp(2.1rem, 4.4vw, 3.2rem); font-weight: 800; letter-spacing: -.02em;
  margin: 0 0 16px; max-width: 18ch; line-height: 1.1; }
.page-hero p { color: #e8dcec; font-size: 1.15rem; max-width: 58ch; margin: 0; }

/* ---------- About partners ---------- */
.partners { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.partner { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 34px; box-shadow: var(--shadow-sm); }
.partner__head { display: flex; gap: 18px; align-items: center; margin-bottom: 20px; }
.partner__avatar { width: 76px; height: 76px; border-radius: 18px; flex: 0 0 auto; position: relative;
  background: linear-gradient(135deg, var(--ink-3), var(--ink-2));
  color: var(--accent-2); display: grid; place-items: center; font-weight: 800; font-size: 26px;
  border: 1px solid var(--line-dark); }
.partner__avatar::after { content: "add photo"; position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%);
  font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  background: var(--accent); color: var(--accent-ink); padding: 3px 8px; border-radius: 999px; }
.partner__name { font-size: 1.35rem; font-weight: 800; margin: 0; letter-spacing: -.01em; }
.partner__role { color: var(--muted); font-size: 14px; font-weight: 600; margin: 2px 0 0; }
.partner__base { color: var(--accent-text); font-size: 13px; font-weight: 700; }
.partner p { color: var(--muted); font-size: 15.5px; margin: 0 0 16px; }
.partner__results { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 20px; }
.partner__results li { font-size: 13px; font-weight: 700; color: var(--ink); background: var(--bg-2);
  border: 1px solid var(--line); padding: 7px 12px; border-radius: 999px; }
.partner__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.partner__tags span { font-size: 12.5px; color: var(--muted); border: 1px dashed var(--line);
  padding: 6px 10px; border-radius: 999px; }

/* ---------- Utility ---------- */
.flex { display: flex; }
.gap-2 { gap: 10px; }
.section-tight { padding: 56px 0; }
.lead { font-size: 1.1rem; color: #4a3556; }
.section--dark .lead { color: #c9b7d2; }
.mt-2 { margin-top: 20px; }
.grid--services { grid-template-columns: repeat(3, 1fr); }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .grid--3, .grid--4, .grid--services, .testis, .tiers, .steps, .caps { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .industries { grid-template-columns: repeat(2, 1fr); }
  .split, .split.mirror, .service-row, .contact-wrap, .partners { grid-template-columns: 1fr; }
  .service-row--flip .service-row__body, .service-row--flip .service-row__img { order: unset; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Header fit ----------
   The brand lockup is intrinsically wide (167px logo + wordmark + tagline) and
   the nav carries 7 items; on one line they need ~1271px of header width. From
   1300px down the tagline steps aside and the nav tightens, which keeps the
   header on a single 70px line all the way to the mobile menu. */
@media (max-width: 1300px) {
  .brand__sub { display: none; }
  .nav__links a { font-size: 14px; padding: 9px 9px; }
}
@media (max-width: 820px) {
  .nav__links {
    position: absolute; top: 70px; left: 0; right: 0; flex-direction: column; align-items: stretch;
    background: var(--ink-2); gap: 2px; padding: 10px 18px 20px; border-bottom: 1px solid var(--line-dark);
    display: none;
  }
  .nav__links.is-open { display: flex; }
  .nav__links a { font-size: 15px; padding: 13px 12px; }
  .nav__cta { margin: 8px 0 0; }
  .nav__toggle { display: block; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .grid--3, .grid--4, .grid--services, .testis, .tiers, .steps, .stats, .industries, .caps { grid-template-columns: 1fr; }
  .hero { min-height: 88vh; min-height: 88dvh; }
  .hero__inner { padding: 110px 0 130px; }
  .section { padding: 64px 0; }
  .cta { padding: 48px 24px; }
}

/* ---------- Scroll reveal ---------- */
.will-reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.is-visible { opacity: 1; transform: none; }

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

/* =========================================================================
   Eastbound Link — brand layer
   Palette from the logo + journey-stage artwork:
   plum #120220 · magenta #fc079a/#f0067b · red-orange #fd320b
   amber #ffa70b · yellow #fdd906          Page body stays white.
   ========================================================================= */
:root {
  --brand-1: #f0067b;   /* magenta   4.75:1 on ink */
  --brand-2: #fd320b;   /* red-orange 5.34:1 on ink */
  --brand-3: #ffa70b;   /* amber    10.2:1 on ink */
  --brand-4: #fdd906;   /* yellow   12.3:1 on ink */
  --brand-orange: #fd8803; /* sampled from the logo trace gradient */
  --brand-ink: #c4006b; /* magenta for text on white (5.9:1) */
  --grad: linear-gradient(100deg, var(--brand-1), var(--brand-2));
  --grad-warm: linear-gradient(100deg, var(--brand-2), var(--brand-3));
}

/* brand mark: the two gradient traces from the logo */
.brand__mark--img { height: 26px; width: auto; background: none; border-radius: 0; display: block; }
.nav .brand__name { font-size: 20px; }

/* primary action uses the logo orange, with plum text (7.2:1) */
.btn { background: var(--brand-orange); color: #120220; }
.btn:hover { background: var(--brand-orange); box-shadow: 0 18px 40px -24px rgba(253,136,3,.75); }

/* gradient rules echo the logo where the old copper hairline was used */
.eyebrow::before, .hero__eyebrow::before,
.service-row__tags .tag:first-child::before { background: var(--grad); }
.step::before { background: var(--grad); -webkit-background-clip: text; background-clip: text;
  color: transparent; opacity: 1; }
.pull__mark, .testi__avatar, .brand__mark { background: var(--grad); }
.tier--featured { box-shadow: 0 24px 48px -26px rgba(240,6,123,.55); }
.cta::before { background: radial-gradient(circle, rgba(253,50,11,.30), transparent 70%); }
.contact-info { background: linear-gradient(150deg, var(--ink) 0%, var(--ink-3) 100%); }
.hero__overlay { background: linear-gradient(100deg, rgba(18,2,32,.92) 0%, rgba(18,2,32,.66) 46%, rgba(18,2,32,.30) 100%); }
.section--dark, .site-footer { background-image:
  radial-gradient(120% 90% at 100% 0%, rgba(240,6,123,.16), transparent 55%),
  radial-gradient(90% 80% at 0% 100%, rgba(253,50,11,.12), transparent 60%); }

/* =========================================================================
   Buttons — one consistent family
   .btn         solid logo orange, plum text           (primary)
   .btn--ghost  transparent, magenta outline + text   (secondary)
   Hover keeps the same fill (elevation + shadow only): no colour jump, no
   white outline, no white text, no switch to amber.
   ========================================================================= */
.btn { background: var(--brand-orange); color: #120220; border: 0; }
.btn:hover {
  background: var(--brand-orange);           /* unchanged - no colour jump */
  box-shadow: 0 18px 40px -24px rgba(253,136,3,.75);
}
.btn:active { transform: translateY(0); }

.btn--ghost {
  background: transparent;
  color: #c4006b;                            /* magenta on light surfaces */
  box-shadow: inset 0 0 0 1.5px currentColor;
}
.btn--ghost:hover {
  background: rgba(240,6,123,.10);
  color: #c4006b;
  box-shadow: inset 0 0 0 1.5px currentColor;
}

/* on dark surfaces use the lighter magenta so it stays legible */
.hero .btn--ghost,
.section--dark .btn--ghost,
.cta .btn--ghost,
.site-footer .btn--ghost,
.page-hero .btn--ghost { color: #ff6fb5; }
.hero .btn--ghost:hover,
.section--dark .btn--ghost:hover,
.cta .btn--ghost:hover,
.site-footer .btn--ghost:hover,
.page-hero .btn--ghost:hover { background: rgba(255,111,181,.12); }

/* keep the unused light variant in the same family */
.btn--light { background: #fff; color: #120220; box-shadow: inset 0 0 0 1.5px #e8dcec; }
.btn--light:hover { background: #fbf7fc; box-shadow: inset 0 0 0 1.5px #e8dcec; }

/* header/footer logo: full lockup (traces + EASTBOUND LINK), slogan removed.
   Tagline sits *under* the lockup (not beside) so the brand block stays ~225px
   wide and the 7 nav items still fit the 70px header. */
.brand__logo { height: 57.2px; width: auto; display: block; }
.nav .brand, .site-footer .brand { flex-direction: column; align-items: center; text-align: center; gap: 2px; }
.brand__sub { color: #fff; font-size: 10px; letter-spacing: .18em; padding-left: .18em; }
@media (min-width: 1301px) {
  .nav { height: 82px; }
}

/* =========================================================================
   Header CTA ("Start a project")

   It is a .btn inside .nav__links, and `.nav__links a` (0,1,1) outranks
   `.btn` (0,1,0). That gave it light text, smaller padding/radius/weight,
   and a `background: rgba(255,255,255,.06)` hover which wiped out the
   magenta fill. Restore the button with a selector that wins:
   (0,3,1) at rest, (0,4,1) on hover.
   ========================================================================= */
.nav__links .nav__cta a.btn,
.nav__links .nav__cta a.btn:visited {
  color: #120220;
  background: var(--brand-orange);
  padding: 13px 24px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 15.5px;
  box-shadow: none;
  transition: transform .18s var(--ease), background .18s, box-shadow .18s, color .18s;
}
.nav__links .nav__cta a.btn:hover,
.nav__links .nav__cta a.btn:focus-visible {
  color: #120220;
  background: var(--brand-orange);
  box-shadow: 0 18px 40px -24px rgba(253,136,3,.75);
}

/* =========================================================================
   Bullet alignment
   The ::before dots were pinned with a fixed margin-top (3px / 7px) while the
   line box is 1.6em tall, so each dot rode above the first line of text.
   Centre the dot on the first line instead:
        margin-top = half the line box  -  half the dot  +  optical nudge
      = (0.8em - dot/2) + 0.1em = 0.9em - dot/2
   Measured from the live screenshot: 9px dot in a 27px line -> 10.8px.
   ========================================================================= */
.split__list li::before { margin-top: calc(0.9em - 4.5px); }  /* 9px dot  */
.tier__list  li::before { margin-top: calc(0.9em - 3px); }     /* 6px dot  */

/* ---------- Legal pages ---------- */
.legal { max-width: 820px; }
.legal h2 { font-size: 1.22rem; margin: 2.2rem 0 .55rem; color: var(--ink); }
.legal h3 { font-size: 1.02rem; margin: 1.5rem 0 .35rem; color: var(--ink); }
.legal p, .legal li { color: #4a3556; line-height: 1.7; }
.legal p { margin: 0 0 .9rem; }
.legal ul { margin: .4rem 0 1rem 1.15rem; }
.legal li { margin: .25rem 0; }
.legal address { font-style: normal; color: #4a3556; line-height: 1.7; margin: 0 0 1rem; }
.legal .legal-meta { color: var(--muted); font-size: 14px; }
.legal a.link { color: var(--brand-ink); }
.legal a.link:hover { text-decoration: underline; }
.legal code { font-size: .92em; background: var(--bg-2); padding: 1px 5px; border-radius: 4px; }

/* contact form states */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { margin-top: 14px; font-weight: 600; }
.form-status.is-ok { color: #1f7a4d; }
.form-status.is-err { color: #b3261e; }

/* =========================================================================
   Refresh 2026 — paper & ink
   The palette below replaces the plum/magenta scheme: warm paper, graphite,
   and one oxide accent drawn from the warm end of the logo trace. The live
   pink lives only inside the brand mark, on the dark masthead and footer.
   ========================================================================= */
:root {
  --paper: #f6f2ea;
  --paper-2: #eee7da;
  --ink: #141110;
  --ink-2: #0c0a09;
  --ink-3: #241f1b;
  --rule: #ded5c6;
  --rule-dark: rgba(246,242,234,.14);
  --text: #1c1815;
  --muted: #6c6258;
  --accent: #a63b12;
  --accent-2: #f2a279;
  --accent-text: #a63b12;
  --accent-ink: #fbf7ef;
  --bg: #f6f2ea;
  --bg-2: #eee7da;
  --card: #fbf8f2;
  --line: #ded5c6;
  --line-dark: rgba(246,242,234,.14);
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font: var(--sans);
  --radius: 2px;
  --radius-sm: 2px;
  --shadow: none;
  --shadow-sm: none;
  --width: 1240px;
}

body { background: var(--paper); color: var(--text); font-family: var(--sans); font-size: 17px; line-height: 1.62; }
h1, h2 { font-family: var(--serif); font-weight: 600; line-height: 1.08; letter-spacing: -.018em; }
h1 { font-size: clamp(2.5rem, 4.6vw, 4.05rem); text-wrap: balance; }
h2 { text-wrap: balance; }
h2 { font-size: clamp(1.85rem, 3vw, 2.7rem); }
h3, h4 { font-family: var(--sans); font-weight: 600; letter-spacing: -.01em; }
p { text-wrap: pretty; }
.container { width: min(92vw, var(--width)); }

/* ---------- Masthead ---------- */
.site-header { background: rgba(20,17,16,.97); border-bottom: 1px solid var(--rule-dark); backdrop-filter: blur(12px); }
.nav { height: 84px; }
.brand__logo { height: 28px; }
.brand__logo { height: 26px; }
.nav .brand__sub { color: rgba(246,242,234,.5); font-family: var(--mono); font-size: 9.5px;
  letter-spacing: .22em; padding-left: .22em; }
.nav__links a { color: rgba(246,242,234,.76); font-size: 14px; font-weight: 500; padding: 8px 11px; border-radius: 0; }
.nav__links a:hover { color: #fff; background: transparent; }
.nav__links a.is-active { color: #fff; }
.nav__links a.is-active::after { content: ""; display: block; height: 1px; background: var(--paper); margin-top: 5px; }
.nav__toggle span { background: #fff; }
.nav__links .nav__cta a.btn,
.nav__links .nav__cta a.btn:visited { background: var(--paper); color: var(--ink); border-radius: 2px;
  padding: 11px 20px; font-size: 13.5px; font-weight: 600; box-shadow: none; }
.nav__links .nav__cta a.btn:hover,
.nav__links .nav__cta a.btn:focus-visible { background: #fff; color: var(--ink); box-shadow: none; }

/* ---------- Buttons & links ---------- */
.btn { background: var(--ink); color: var(--paper); border-radius: 2px; font-weight: 600;
  font-size: 15px; padding: 14px 24px; box-shadow: none; letter-spacing: .005em; }
.btn:hover { background: #000; transform: none; box-shadow: none; }
.btn--lg { padding: 16px 28px; font-size: 15.5px; }
.btn--ghost { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px var(--rule); }
.btn--ghost:hover { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px var(--ink); }
.btn--light { background: var(--paper); color: var(--ink); box-shadow: none; }
.link { color: var(--accent); font-weight: 500; }
.textlink { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 500;
  border-bottom: 1px solid var(--rule); padding-bottom: 4px; transition: border-color .2s; }
.textlink:hover { border-color: var(--ink); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible,
select:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 0; }

/* ---------- Section frame ---------- */
.section { padding: 112px 0; }
.section--tint { background: var(--paper-2); }
.section--dark { background: var(--ink); color: var(--paper); background-image: none; }
.eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--accent); font-weight: 500; margin: 0; }
.eyebrow::before { display: none; }
.section--dark .eyebrow { color: var(--accent-2); }
.section__head { max-width: none; margin: 0 0 56px; text-align: left; display: grid; gap: 18px;
  border-top: 1px solid var(--rule); padding-top: 22px; }
.section__head h2 { margin: 0; max-width: 26ch; }
.section__head p { font-size: 1.04rem; color: var(--muted); max-width: 58ch; margin: 0; }
.section--dark .section__head { border-top-color: var(--rule-dark); }
.section--dark .section__head p { color: rgba(246,242,234,.66); }
.section--dark p, .section--dark .card p, .section--dark .cap-card p { color: rgba(246,242,234,.7); }
.section--dark .step p, .section--dark .step2 p { color: rgba(246,242,234,.7); }
.section__head--left { text-align: left; }
.center .eyebrow { justify-content: flex-start; }

/* ---------- Hero ---------- */
.hero2 { background: var(--paper); padding: 76px 0 0; }
.hero2__grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: 72px; align-items: start; }
.hero2__copy { padding-top: 18px; }
.kicker { display: flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.kicker__more { white-space: nowrap; }
.kicker i { width: 5px; height: 5px; background: var(--accent); border-radius: 50%; display: block; }
.hero2 h1 { margin: 26px 0 0; max-width: 15ch; }
.hero2__lede { margin: 26px 0 0; font-size: 1.12rem; line-height: 1.6; color: #3d3630; max-width: 44ch; }
.hero2__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 26px; margin-top: 38px; }
.hero2__figure { margin: 0; }
.hero2__figure img { width: 100%; height: clamp(420px, 40vw, 560px); object-fit: cover; object-position: 50% 42%; filter: saturate(.9) contrast(.97); }
.hero2__cap { display: flex; justify-content: space-between; gap: 18px; margin-top: 12px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 68px;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.fact { display: flex; align-items: baseline; gap: 14px; padding: 20px 26px 20px 0; }
.fact + .fact { border-left: 1px solid var(--rule); padding-left: 26px; }
.fact__num { font-family: var(--serif); font-size: 1.45rem; line-height: 1; white-space: nowrap; }
.fact__label { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); line-height: 1.5; }

/* ---------- Service list ---------- */
.svc { display: grid; grid-template-columns: 64px 1fr 1.25fr; gap: 32px; padding: 34px 0;
  border-top: 1px solid var(--rule); align-items: start; }
.svc:last-of-type { border-bottom: 1px solid var(--rule); }
.svc__idx { font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; color: var(--accent); padding-top: 10px; }
.svc h3 { font-family: var(--serif); font-size: 1.62rem; font-weight: 600; margin: 0; max-width: 20ch; line-height: 1.15; }
.svc p { margin: 0 0 14px; color: var(--muted); font-size: 15.5px; }
.svc__tags { display: flex; flex-wrap: wrap; gap: 4px 0; font-family: var(--mono); font-size: 11px;
  letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.svc__tags span { display: inline-block; }
.svc__tags span + span::before { content: "·"; margin: 0 9px; color: var(--rule); }

/* ---------- People ---------- */
.people { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--rule); }
.person { padding: 38px 44px 42px 0; }
.person + .person { border-left: 1px solid var(--rule); padding-left: 44px; padding-right: 0; }
.person__base { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.person h3 { font-family: var(--serif); font-size: 1.95rem; font-weight: 600; margin: 12px 0 3px; }
.person__role { font-size: 13.5px; color: var(--accent); margin: 0 0 18px; }
.person p { color: var(--muted); font-size: 15.5px; margin: 0 0 22px; max-width: 46ch; }
.person__metrics { display: flex; flex-wrap: wrap; gap: 28px; border-top: 1px solid var(--rule); padding-top: 16px; }
.metric b { display: block; font-family: var(--serif); font-size: 1.12rem; font-weight: 600; }
.metric span { font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

/* ---------- Network ---------- */
.net { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--rule); }
.net__item { padding: 26px 34px 30px 0; border-bottom: 1px solid var(--rule); }
.net__item:nth-child(3n+2), .net__item:nth-child(3n+3) { padding-left: 34px; border-left: 1px solid var(--rule); }
.net h3 { font-size: 1rem; margin: 0 0 8px; }
.net p { font-family: var(--mono); font-size: 11px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted); margin: 0; line-height: 1.9; }

/* ---------- Process ---------- */
.process { display: grid; grid-template-columns: repeat(5, 1fr); }
.step2 { padding: 22px 28px 0 0; border-top: 1px solid var(--rule); }
.step2__no { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; color: var(--accent-2); }
.step2 h3 { font-size: .98rem; margin: 12px 0 8px; }
.step2 p { font-size: 14.5px; line-height: 1.55; color: rgba(246,242,234,.72); margin: 0; }

/* ---------- Closing CTA ---------- */
.cta2 { background: var(--ink); color: var(--paper); padding: 76px 0; border-bottom: 1px solid var(--rule-dark); }
.cta2__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: end; }
.cta2 h2 { margin: 0; max-width: 18ch; color: var(--paper); }
.cta2 p { color: rgba(246,242,234,.66); margin: 18px 0 0; max-width: 40ch; font-size: 1rem; }
.cta2__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.cta2 .btn { background: var(--paper); color: var(--ink); }
.cta2 .btn:hover { background: #fff; }
.cta2 .cta2__mail { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; color: rgba(246,242,234,.7); }
.cta2 .cta2__mail:hover { color: #fff; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink-2); color: rgba(246,242,234,.6); padding: 72px 0 32px; background-image: none; }
.footer-grid { grid-template-columns: 1.7fr 1fr 1fr 1.1fr; gap: 40px; }
.footer-grid h3 { color: rgba(246,242,234,.55); font-family: var(--mono); font-size: 10px;
  letter-spacing: .18em; text-transform: uppercase; margin: 0 0 16px; }
.footer-grid p { font-size: 14px; color: rgba(246,242,234,.6); max-width: 34ch; }
.footer-grid a { font-size: 14px; color: rgba(246,242,234,.6); padding: 4px 0; }
.footer-grid a:hover { color: #fff; }
.footer-grid .brand__logo { height: 24px; }
.footer-bottom { border-top: 1px solid var(--rule-dark); color: rgba(246,242,234,.58); font-size: 12px;
  font-family: var(--mono); letter-spacing: .02em; }
.footer-bottom .wordmark { color: var(--paper); font-weight: 500; }
.footer-grid address { color: rgba(246,242,234,.6); }
.footer-grid address b { color: rgba(246,242,234,.85); font-weight: 500; }

/* ---------- Subpage hero & shared components ---------- */
.page-hero { background: var(--paper); color: var(--text); padding: 96px 0 64px; border-bottom: 1px solid var(--rule); }
.page-hero .eyebrow { color: var(--accent); }
.page-hero h1 { color: var(--ink); font-family: var(--serif); font-weight: 600; max-width: 20ch; }
.page-hero p { color: var(--muted); font-size: 1.1rem; }
.card, .cap-card, .industry, .tier, .partner, .rate-row, .faq__item, .pricing-note {
  background: transparent; border: 0; border-top: 1px solid var(--rule); border-radius: 0; box-shadow: none; }
.card { padding: 26px 0 0; }
.card:hover, .cap-card:hover, .tier:hover { transform: none; box-shadow: none; }
.card__icon, .cap-card__icon { background: none; color: var(--accent); width: auto; height: auto;
  border-radius: 0; margin-bottom: 14px; }
.cap-card { padding: 26px 0 0; }
.cap-card__head { margin-bottom: 12px; }
.cap-tags span, .tag, .partner__results li, .partner__tags span { background: transparent; border: 0;
  border-radius: 0; padding: 0; font-family: var(--mono); font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); }
.cap-tags, .partner__results { gap: 4px 0; }
.cap-tags span + span::before, .partner__results li + li::before { content: "·"; margin: 0 8px; color: var(--rule); }
.stats { text-align: left; gap: 0; border-top: 1px solid var(--rule-dark); padding-top: 26px; }
.stat { padding: 0 24px 0 0; }
.stat + .stat { border-left: 1px solid var(--rule-dark); padding-left: 24px; }
.stat__num { font-family: var(--serif); font-weight: 600; color: var(--paper); }
.stat__label { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(246,242,234,.55); }
.steps { gap: 0; }
.step { padding: 22px 26px 0 0; border-top: 1px solid var(--rule); }
.step::before { font-family: var(--mono); font-size: 11px; font-weight: 400; background: none; color: var(--accent);
  -webkit-text-fill-color: currentColor; }
.step h3 { font-size: .98rem; }
.step p { font-size: 13.5px; color: var(--muted); }
.split__img, .service-row__img { border-radius: 0; box-shadow: none; }
.split h2, .pricing-intro h1 { font-family: var(--serif); font-weight: 600; }
.pull blockquote { font-family: var(--serif); font-weight: 600; }
.cta { background: var(--ink); border-radius: 0; text-align: left; }
.cta::before { display: none; }
.cta h2 { color: var(--paper); font-family: var(--serif); font-weight: 600; }
.cta p { color: rgba(246,242,234,.66); margin-left: 0; }
.cta .btn { background: var(--paper); color: var(--ink); }
.contact-info { background: var(--ink); border-radius: 0; }
.field input, .field textarea, .field select { border-radius: 2px; border-color: var(--rule); background: #fffdf8; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(166,59,18,.12); }
.pricing-note { color: var(--muted); padding: 24px 0 0; }
.legal p, .legal li, .legal address { color: var(--muted); }
.tier--featured { border-top: 1px solid var(--accent); }
.tier--featured::before { background: var(--accent); color: var(--paper); border-radius: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .hero2__grid { grid-template-columns: 1fr; gap: 44px; }
  .hero2__figure img { height: clamp(300px, 52vw, 460px); }
  .svc { grid-template-columns: 44px 1fr 1.1fr; gap: 22px; }
  .net { grid-template-columns: repeat(2, 1fr); }
  .net__item:nth-child(3n+2), .net__item:nth-child(3n+3) { padding-left: 0; border-left: 0; }
  .net__item:nth-child(2n) { padding-left: 28px; border-left: 1px solid var(--rule); }
  .process { grid-template-columns: repeat(3, 1fr); row-gap: 28px; }
  .cta2__grid { grid-template-columns: 1fr; gap: 34px; }
}
@media (max-width: 860px) {
  .nav__links { background: var(--ink-2); border-bottom: 1px solid var(--rule-dark); }
  .facts { grid-template-columns: 1fr; }
  .fact + .fact { border-left: 0; border-top: 1px solid var(--rule); padding-left: 0; }
  .svc { grid-template-columns: 1fr; gap: 10px; padding: 26px 0; }
  .svc__idx { padding-top: 0; }
  .people { grid-template-columns: 1fr; }
  .person + .person { border-left: 0; border-top: 1px solid var(--rule); padding-left: 0; }
  .net { grid-template-columns: 1fr; }
  .net__item, .net__item:nth-child(2n) { padding-left: 0; border-left: 0; }
  .process { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .section { padding: 72px 0; }
  .hero2 { padding-top: 48px; }
  .process { grid-template-columns: 1fr; }
  .cta2 { padding: 64px 0; }
  .footer-grid { grid-template-columns: 1fr; }
  .svc h3 { font-size: 1.4rem; }
  .kicker__more { display: none; }
}

/* =========================================================================
   Hero — original photograph, original day/night switch
   The layout below restyles the existing .hero markup; the image pair
   (img/hero-day.jpg, img/hero-night.jpg) and the is-night toggle in
   js/main.js are unchanged.
   ========================================================================= */
.hero { min-height: 86vh; min-height: 86dvh; background: var(--ink-2); color: var(--paper); }
.hero__overlay { background: linear-gradient(96deg, rgba(10,8,7,.95) 0%, rgba(10,8,7,.74) 44%, rgba(10,8,7,.30) 100%); }
.hero__inner { width: min(92vw, var(--width)); padding: 118px 0 112px; }
.hero__eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(246,242,234,.68); gap: 13px; margin-bottom: 26px; }
.hero__eyebrow::before { width: 6px; height: 6px; background: var(--accent-2); }
.hero h1 { font-family: var(--serif); font-weight: 600; font-size: clamp(1.95rem, 3.05vw, 2.9rem);
  line-height: 1.14; letter-spacing: -.014em; max-width: 23ch; margin: 0 0 24px; text-wrap: balance; }
.hero__sub { font-size: 1.08rem; line-height: 1.6; max-width: 52ch; color: rgba(246,242,234,.76); margin: 0 0 34px; }
.hero__actions { gap: 26px; align-items: center; }
.hero .btn { background: var(--paper); color: var(--ink); }
.hero .btn:hover { background: #fff; }
.hero .btn--ghost { color: var(--paper); box-shadow: inset 0 0 0 1px rgba(246,242,234,.38); background: transparent; }
.hero .btn--ghost:hover { color: var(--paper); box-shadow: inset 0 0 0 1px var(--paper); background: transparent; }

/* dark sections: headings and body copy on ink */
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: var(--paper); }
.section--dark .split__list li, .section--dark .lead { color: rgba(246,242,234,.8); }

/* stats on ink */
.section--dark .stats { border-top: 1px solid var(--rule-dark); padding-top: 30px; }

/* industries — flat ruled cells, original icons kept */
.industries { gap: 0; border-top: 1px solid var(--rule); }
.industry { background: transparent; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0;
  box-shadow: none; padding: 20px 24px 20px 0; gap: 14px; }
.industry + .industry { border-left: 1px solid var(--rule); padding-left: 24px; }
.industry svg { color: var(--accent); width: 20px; height: 20px; }
.industry span { color: var(--text); font-weight: 500; font-size: 15.5px; }

/* positioning list — original bullets, quieter weight */
.split__list li { color: var(--text); font-size: 17px; font-weight: 400; line-height: 1.55; }
.split__list li::before { width: 5px; height: 5px; background: var(--accent); }
.split__img { border-radius: 0; box-shadow: none; }

/* quote block */
.pull blockquote { font-family: var(--serif); font-weight: 600; letter-spacing: -.015em; }

/* closing CTA — paper, not another dark band */
.cta { background: var(--paper-2); color: var(--text); text-align: left; border-radius: 0; padding: 72px 0; }
.cta h2 { color: var(--ink); font-family: var(--serif); font-weight: 600; max-width: 24ch; }
.cta p { color: var(--muted); margin-left: 0; max-width: 54ch; }
.cta .btn { background: var(--ink); color: var(--paper); }

@media (max-width: 860px) {
  .industries { grid-template-columns: 1fr; }
  .industry, .industry + .industry { border-left: 0; padding-left: 0; }
  .hero__inner { padding: 84px 0 92px; }
}

/* =========================================================================
   v3 prototype — proof strip, pain-point selector, honest limits
   ========================================================================= */
.proof-strip { display: flex; flex-wrap: wrap; margin-top: 46px; padding-top: 18px;
  border-top: 1px solid rgba(246,242,234,.22); }
.proof-strip span { font-family: var(--mono); font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase;
  color: rgba(246,242,234,.68); padding: 4px 0; }
.proof-strip span + span { border-left: 1px solid rgba(246,242,234,.22); margin-left: 20px; padding-left: 20px; }

/* who you're talking to */
.who { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--rule); }
.who__p { padding: 34px 44px 38px 0; }
.who__p + .who__p { border-left: 1px solid var(--rule); padding-left: 44px; padding-right: 0; }
.who__base { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.who__p h3 { font-family: var(--serif); font-size: 1.9rem; font-weight: 600; margin: 12px 0 2px; }
.who__role { font-size: 13.5px; color: var(--accent); margin: 0 0 16px; }
.who__p p { color: var(--muted); font-size: 15.5px; margin: 0 0 20px; max-width: 46ch; }
.who__m { display: flex; flex-wrap: wrap; gap: 26px; border-top: 1px solid var(--rule); padding-top: 14px; }
.who__m b { display: block; font-family: var(--serif); font-size: 1.1rem; font-weight: 600; }
.who__m span { font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

.limits { margin-top: 54px; padding-top: 26px; border-top: 1px solid var(--rule);
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.limits p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--text); max-width: 42ch; }
.limits .ref { border-left: 2px solid var(--accent); padding-left: 18px; }
.limits .ref b { font-weight: 600; }

/* selector */
.picker { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 0 0 8px; }
.pick { text-align: left; background: transparent; border: 1px solid var(--rule); border-radius: 2px;
  padding: 15px 16px; font-family: var(--sans); font-size: 14.5px; line-height: 1.4; color: var(--text);
  cursor: pointer; transition: border-color .16s, background .16s, color .16s; }
.pick:hover { border-color: var(--ink); }
.pick[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.pick:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.picker__hint { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin: 14px 0 0; }

.diag { margin-top: 38px; }
.diag:empty { display: none; }
.diag__item { display: grid; grid-template-columns: 260px 1fr; gap: 40px; padding: 28px 0;
  border-top: 1px solid var(--rule); }
.diag__item:last-child { border-bottom: 1px solid var(--rule); }
.diag__q { font-family: var(--serif); font-size: 1.25rem; line-height: 1.25; font-weight: 600; margin: 0; }
.diag__body { display: grid; gap: 10px; }
.diag__row { display: grid; grid-template-columns: 104px 1fr; gap: 16px; align-items: start; }
.diag__k { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent); padding-top: 5px; }
.diag__v { font-size: 15px; line-height: 1.55; color: var(--text); margin: 0; max-width: 66ch; }
.diag__v.muted { color: var(--muted); }

.picker__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 30px; }
.picker__cta[hidden] { display: none; }
.picker__count { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

/* where we've shipped */
.gap-note { border-top: 1px solid var(--rule); margin-top: 46px; padding-top: 26px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.gap-note p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--text); max-width: 44ch; }
.gap-note p + p { color: var(--muted); }

@media (max-width: 1080px) {
  .picker { grid-template-columns: repeat(2, 1fr); }
  .diag__item { grid-template-columns: 1fr; gap: 12px; }
}
@media (max-width: 860px) {
  .who { grid-template-columns: 1fr; }
  .who__p + .who__p { border-left: 0; border-top: 1px solid var(--rule); padding-left: 0; }
  .limits, .gap-note { grid-template-columns: 1fr; gap: 20px; }
  .proof-strip span + span { border-left: 0; margin-left: 0; padding-left: 0; }
}
@media (max-width: 560px) {
  .picker { grid-template-columns: 1fr; }
  .diag__row { grid-template-columns: 1fr; gap: 2px; }
}

/* =========================================================================
   v3 — network ledger + reach diagram
   ========================================================================= */
.network { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.ledger { border-top: 1px solid var(--rule); }
.ledger__cap { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); padding: 16px 0 12px; border-bottom: 1px solid var(--rule); }
.ledger__row { display: grid; grid-template-columns: 64px 1fr; gap: 20px; padding: 13px 0;
  border-bottom: 1px solid var(--rule); align-items: baseline; }
.ledger__row strong { font-weight: 600; font-size: 15px; }
.ledger__id { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; color: var(--accent); }
.ledger__where { font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); margin-left: 10px; }
.ledger__sub { display: grid; grid-template-columns: 1fr auto; gap: 24px; padding: 11px 0;
  border-bottom: 1px solid var(--rule); font-size: 14.5px; align-items: baseline; }
.ledger__sub span:last-child { font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.subs { margin-top: 46px; }
.subs__cap { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); padding: 0 0 12px; border-bottom: 1px solid var(--rule); }
.subs__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 64px; }
.ledger__note { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); padding-top: 14px; }

.netmap { position: static; }
.netmap svg { width: 100%; height: auto; display: block; }
.dg-line { stroke: var(--rule); stroke-width: 1; fill: none; }
.dg-line--reach { stroke: var(--rule); stroke-width: 1; stroke-dasharray: 2 4; }
.dg-frame { fill: none; stroke: var(--rule); stroke-width: 1; stroke-dasharray: 3 5; }
.dg-dot { fill: var(--ink); }
.dg-dot--home { fill: var(--accent); }
.dg-label { font-family: var(--mono); font-size: 10px; letter-spacing: .07em; text-transform: uppercase; fill: var(--muted); }
.dg-label--ink { fill: var(--text); }
.dg-box { fill: none; stroke: var(--rule); }
.dg-num { font-family: var(--serif); font-size: 15px; fill: var(--text); }
.dg-cap { font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; fill: var(--muted); }

@media (max-width: 900px) {
  .network { grid-template-columns: 1fr; gap: 40px; }
  .netmap { position: static; order: -1; }
}

.ledger__provenance { margin: 24px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--muted); max-width: 40ch; }
.ledger__provenance b { color: var(--text); font-weight: 600; }

/* selector → solutions deep links */
.diag__more { display: inline-block; margin-top: 6px; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .09em; text-transform: uppercase; color: var(--accent);
  border-bottom: 1px solid transparent; transition: border-color .16s; }
.diag__more:hover { border-bottom-color: currentColor; }

/* anchor arrivals must clear the sticky masthead */
.service-row, .page-hero, section[id] { scroll-margin-top: 132px; }
.service-row:target { background: rgba(20, 17, 10, .045); }
.service-row:target .service-row__body h3::after { content: ""; }

/* reverse link on solutions rows */
.svc-back { margin: 20px 0 0; padding-top: 14px; border-top: 1px solid var(--rule); font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; }
.svc-back a { color: var(--accent); border-bottom: 1px solid transparent; }
.svc-back a:hover { border-bottom-color: currentColor; }

/* grouped symptom picker */

.picks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pick { display: block; width: 100%; text-align: left; background: transparent; border: 1px solid var(--rule);
  border-radius: 2px; padding: 14px 16px 15px; font-family: var(--sans); color: var(--text); cursor: pointer;
  transition: border-color .16s, background .16s, color .16s; }
.pick:hover { border-color: var(--ink); }
.pick__cat { display: block; font-family: var(--mono); font-size: 9px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 7px; }
.pick__q { display: block; font-size: 14.5px; line-height: 1.4; }
.pick[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.pick[aria-pressed="true"] .pick__cat { color: var(--accent-2); }
.pick:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pick[hidden] { display: none; }

.picksel { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 22px; }
.picksel[hidden] { display: none; }
.picksel__chip { display: inline-flex; align-items: center; gap: 9px; background: transparent;
  border: 1px solid var(--rule); border-radius: 2px; padding: 7px 11px; font-size: 12.5px; color: var(--text);
  cursor: pointer; }
.picksel__chip[data-active="true"] { border-color: var(--ink); background: var(--paper-2); }
.picksel__x { font-size: 14px; line-height: 1; color: var(--muted); }
.picksel__chip:hover .picksel__x { color: var(--ink); }
.picksel__clear { background: none; border: 0; font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); cursor: pointer; padding: 6px 2px; }
.picksel__clear:hover { color: var(--ink); }

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

/* category cards */
.picks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.cat { border: 1px solid var(--rule); border-radius: 2px; padding: 14px 16px 6px; }
.cat[hidden] { display: none; }
.cat__h { font-family: var(--mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); padding-bottom: 8px; }
.cat__item { display: block; width: 100%; text-align: left; background: none; border: 0;
  border-top: 1px solid var(--rule); padding: 11px 0; font-family: var(--sans); font-size: 14px;
  line-height: 1.4; color: var(--text); cursor: pointer; transition: color .16s, padding-left .16s; }
.cat__item:hover { color: var(--ink); padding-left: 4px; }
.cat__item[aria-pressed="true"] { color: var(--accent); font-weight: 500; }
.cat__item[aria-pressed="true"]::before { content: "▸ "; }
.cat__item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 1080px) { .picks { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .picks { grid-template-columns: 1fr; } }

/* =========================================================================
   Solutions — NPI roadmap (five stages)
   ========================================================================= */
.sol-head { max-width: 60ch; margin-bottom: 44px; }
.sol-head .eyebrow { margin-bottom: 16px; }
.sol-head h2 { margin: 0 0 18px; }
.sol-lede { font-size: 1.06rem; line-height: 1.6; color: var(--muted); margin: 0; }

.roadmap { display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(6, auto);
  align-items: start; border-top: 1px solid var(--rule);
  padding-top: 30px; margin-bottom: 22px; }
.stage { position: relative; padding: 0 26px 0 0; display: grid; grid-row: span 6;
  grid-template-rows: subgrid; align-items: start; }
.stage + .stage { border-left: 1px solid var(--rule); padding-left: 26px; }
.stage::before { content: ""; position: absolute; top: -34px; left: 0; width: 7px; height: 7px;
  border-radius: 50%; background: var(--accent); }
.stage + .stage::before { left: 26px; }
.stage__no { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; color: var(--accent); }
.stage h3 { font-family: var(--serif); font-size: 1.1rem; font-weight: 600; margin: 8px 0 16px;
  line-height: 1.18; }
.stage__cap { font-family: var(--mono); font-size: 9px; letter-spacing: .15em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 8px; }
.stage ul { list-style: none; margin: 0 0 18px; padding: 0; }
.stage li { position: relative; font-size: 13px; line-height: 1.45; color: var(--text); padding: 3px 0 3px 12px; }
.stage li::before { content: ""; position: absolute; left: 0; top: 11px; width: 5px; height: 1px; background: var(--rule); }
.stage__doing li { color: var(--muted); }
.stage__we { border-top: 1px solid var(--rule); padding-top: 12px; margin-bottom: 0; }
.stage__we li { font-size: 12.5px; color: var(--ink); padding-left: 13px; }
.stage__we li::before { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); top: 9px; }
.roadmap--4 { grid-template-columns: repeat(4, 1fr); }
.roadmap__note { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px;
  border-top: 1px solid var(--rule); padding-top: 18px; margin: 0 0 64px; }
.roadmap__note p { margin: 0; font-size: 15px; color: var(--text); }
.roadmap__note span { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); align-self: center; }

.sol-body { display: grid; grid-template-columns: 1.35fr .65fr; gap: 64px; align-items: start; }
.sol-body h3 { font-family: var(--serif); font-size: 1.5rem; font-weight: 600; margin: 0 0 14px; }
.sol-body p { font-size: 16px; line-height: 1.62; color: var(--muted); margin: 0 0 22px; max-width: 62ch; }
.sol-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.sol-list li { padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: 15px; color: var(--text);
  display: grid; grid-template-columns: 22px 1fr; gap: 12px; }
.sol-list li::before { content: "→"; color: var(--accent); font-size: 13px; line-height: 1.5; }
.sol-side { border-top: 1px solid var(--rule); padding-top: 20px; }
.sol-side p { font-size: 14.5px; color: var(--muted); margin: 0 0 18px; }
.sol-side a { display: block; font-size: 14.5px; padding: 11px 0; border-top: 1px solid var(--rule); color: var(--text); }
.sol-side a:first-of-type { border-top: 0; }
.sol-side a:hover { color: var(--accent); }
.sol-side .sol-side__label { font-family: var(--mono); font-size: 9px; letter-spacing: .15em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 6px; }

@media (max-width: 1080px) {
  .roadmap, .roadmap--4 { grid-template-columns: 1fr; grid-template-rows: none; border-top: 0; padding-top: 0; }
  .stage { display: block; grid-row: auto; }
  .stage { padding: 0 0 26px 24px; border-left: 1px solid var(--rule); }
  .stage + .stage { border-left: 1px solid var(--rule); padding-left: 24px; }
  .stage::before, .stage + .stage::before { top: 4px; left: -4px; }
  .stage h3 { min-height: 0; }
  .sol-body { grid-template-columns: 1fr; gap: 36px; }
}

/* =========================================================================
   Solutions — section jump nav
   ========================================================================= */
.jump { position: sticky; top: 84px; z-index: 40; background: rgba(246, 242, 234, .97);
  border-bottom: 1px solid var(--rule); backdrop-filter: blur(10px); }
.jump__inner { display: flex; gap: 0; overflow-x: auto; scrollbar-width: none; }
.jump__inner::-webkit-scrollbar { display: none; }
.jump a { flex: 0 0 auto; font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); padding: 14px 18px 12px; white-space: nowrap;
  border-bottom: 2px solid transparent; transition: color .16s, border-color .16s; }
.jump a:hover { color: var(--ink); }
.jump a.is-active { color: var(--ink); border-bottom-color: var(--ink); }
.jump a:first-child { padding-left: 0; }

@media (max-width: 900px) {
  .jump { position: static; }
  .jump a { padding: 12px 14px 10px; }
}

/* =========================================================================
   Brand lockup — 2026 artwork (transparent), no separate tagline
   ========================================================================= */
.nav .brand__logo { height: 38px; width: auto; }
.site-footer .brand__logo, .footer-grid .brand__logo { height: 72px; width: auto; }
.nav .brand, .site-footer .brand { gap: 0; }
@media (max-width: 640px) {
  .nav .brand__logo { height: 32px; }
  .site-footer .brand__logo, .footer-grid .brand__logo { height: 48px; }
}