/* ============================================================
   TwentySix Consulting — styled to the Zigbert Design System
   Tokens mirror Zigbert-Design-System.docx (src/index.css @theme)
   ============================================================ */
:root {
  /* core */
  --ink:         #121C2B;   /* text, headings, structure, dark sections */
  --cream:       #FFFFFF;   /* page canvas. Was #FBFBF8 warm off-white until
                              14 Sep 2026, changed to pure white on request.
                              Token name kept so the revert is one line. */
  --surface:     #FFFFFF;   /* cards, panels */
  --muted:       #4B5563;   /* secondary / body-supporting text */
  --line:        #E9E3D8;   /* warm hairline borders */
  /* clay — brand highlight accent (used sparingly) */
  --clay:        #C9785A;
  --clay-deep:   #B0603F;   /* clay text on light; hover */
  --clay-bright: #DDA288;   /* clay on dark */
  --clay-tint:   #E8D8CE;   /* soft clay fills */
  /* slate — logo blue / chart bands */
  --slate:       #7285A5;
  --slate-tint:  #D9E0EA;
  /* steel — cool secondary */
  --steel:       #4B5563;
  --steel-bright:#8794A6;
  --steel-tint:  #E4E7EC;
  /* action blue — buttons / CTAs / launch bar (component styles) */
  --cta-blue:       #5E7191;
  --cta-blue-hover: #54657F;
  /* type */
  --font-display: "Poppins", ui-sans-serif, system-ui, sans-serif;
  --font-sans:    "Inter", ui-sans-serif, system-ui, sans-serif;
  /* shape */
  --radius-xl2: 1.25rem;
  --radius-input: 0.85rem;
  --maxw: 1120px;
  /* elevation */
  --shadow-card: 0 1px 2px rgba(18,28,43,.04), 0 18px 46px -28px rgba(18,28,43,.26);
  --shadow-cta: 0 12px 26px -10px rgba(94,113,145,.55);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* ===== Typography ===== */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1.06;
  margin: 0 0 .5em;
  font-weight: 700;
}
h1 { font-size: clamp(2.4rem, 5vw, 3.8rem); font-weight: 800; line-height: 1.04; }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); font-weight: 700; }
h3 { font-size: 1.3rem; font-weight: 600; }
h4 { font-size: 1.08rem; font-weight: 600; }
p { margin: 0 0 1rem; }
.center { text-align: center; }

/* Clay accent — highlight words + big numbers use the clay text gradient */
.accent {
  background: linear-gradient(135deg, #DDA288 0%, #C9785A 52%, #B0603F 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--clay-deep);
  margin-bottom: 1rem;
}
.eyebrow-clay { color: var(--clay-deep); }
.eyebrow.center { display: block; text-align: center; }
.endorse { font-size: .9rem; color: var(--muted); margin: -0.4rem 0 1.4rem; }
.lead { font-size: 1.15rem; color: var(--muted); }
.lead-accent { font-size: 1.15rem; font-weight: 600; color: var(--clay-deep); }
.section-intro { max-width: 760px; margin: 0 auto 3rem; color: var(--muted); font-size: 1.08rem; }

/* ===== Buttons ===== */
.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .96rem;
  padding: .8rem 1.6rem;
  border-radius: 9999px;
  transition: transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease;
  cursor: pointer;
}
/* Blue owns actions */
.btn-primary { background: var(--cta-blue); color: #fff; box-shadow: var(--shadow-cta); }
.btn-primary:hover { background: var(--cta-blue-hover); transform: translateY(-1px); }
/* Ghost: hover borders + text go clay */
.btn-ghost { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
.btn-ghost:hover { border-color: var(--clay); color: var(--clay-deep); transform: translateY(-1px); }
.btn-ghost-light { color: #fff; border: 1px solid rgba(255,255,255,.5); }
.btn-ghost-light:hover { background: #fff; color: var(--ink); transform: translateY(-1px); }

/* ===== Announcement bar (Zigbert launch — desktop only) ===== */
.announce { background: linear-gradient(135deg, #8497B5 0%, #7285A5 52%, #5E7191 100%); color: #fff; }
.announce-inner { display: flex; align-items: center; justify-content: center; gap: .85rem;
  padding: .5rem 0; flex-wrap: wrap; text-align: center; font-size: .85rem; }
.announce strong { font-weight: 700; }
.announce a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.announce a:hover { opacity: .85; }

/* ===== Header ===== */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 78px; }
.brand-logo { height: 42px; width: auto; align-self: flex-start; }
.nav { display: flex; align-items: center; gap: 2rem; }
.nav a { font-weight: 500; color: var(--muted); font-size: .98rem; transition: color .2s; }
.nav a:hover { color: var(--clay-deep); }
.nav a.active { color: var(--clay-deep); font-weight: 700; }
.nav-zigbert { display: none; } /* mobile dropdown only — kept out of the desktop nav */
.nav a.nav-zigbert { color: var(--clay-deep); font-weight: 600; }
.nav a.nav-zigbert:hover { color: var(--clay); }
.nav-zigbert img { height: 20px; width: auto; display: block; }
.nav-cta { background: var(--cta-blue); color: #fff !important; padding: .5rem 1.1rem; border-radius: 9999px; box-shadow: var(--shadow-cta); }
.nav-cta:hover { background: var(--cta-blue-hover); }

/* Hamburger toggle (mobile only) */
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; margin: -8px; }
.nav-toggle span { display: block; width: 26px; height: 2.5px; background: var(--ink); border-radius: 2px; transition: transform .25s ease, opacity .2s ease; }
.nav-toggle span + span { margin-top: 6px; }
.nav-toggle.is-open span:nth-child(1) { transform: translateY(8.5px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-8.5px) rotate(-45deg); }

/* ===== Hero (with canvas glow) ===== */
.hero {
  padding: clamp(3.5rem, 8vw, 7rem) 0;
  background:
    radial-gradient(46% 55% at 82% 8%, rgba(201,120,90,.16) 0%, rgba(201,120,90,0) 60%),
    radial-gradient(42% 55% at 6% 92%, rgba(114,133,165,.12) 0%, rgba(114,133,165,0) 60%);
}
.hero-inner { display: block; }
.hero-copy { max-width: 820px; }
.hero h1 { margin-top: .3rem; }
.hero-actions { display: flex; gap: 1rem; margin-top: 2rem; flex-wrap: wrap; }
.hero-art { color: var(--ink); opacity: .92; }
.hero-art svg { width: 100%; height: auto; }
.hero-img { width: 100%; height: auto; display: block; border-radius: 16px; box-shadow: 0 18px 50px -18px rgba(18,28,43,.35); }

/* ===== Sections ===== */
.section { padding: clamp(3.5rem, 7vw, 6rem) 0; }
section[id] { scroll-margin-top: 90px; }

/* Page header (inner pages) */
.page-head { padding: clamp(2.75rem, 6vw, 4.5rem) 0 0; text-align: center;
  background: radial-gradient(50% 70% at 50% 0%, rgba(201,120,90,.10) 0%, rgba(201,120,90,0) 70%); }
.page-head h1 { font-size: clamp(2rem, 4.2vw, 3.1rem); margin-bottom: .3rem; }
.page-head .section-intro { margin: .8rem auto 0; }
a.service-card { color: inherit; display: block; }
a.service-card h4 { display: flex; justify-content: space-between; align-items: center; }

/* Zigbert */
.zigbert { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.zigbert-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 4rem; align-items: center; }
.callout {
  background: var(--ink); color: #fff; padding: 1.7rem 1.9rem;
  border-radius: var(--radius-xl2); margin: 1.8rem 0;
}
.callout h3 { color: #fff; margin-bottom: .4rem; }
.callout p { color: rgba(255,255,255,.82); margin: 0; font-size: .98rem; }
.callout strong { color: var(--clay-bright); font-weight: 700; }
.zigbert-sub h4 { color: var(--clay-deep); margin-bottom: .3rem; font-size: 1.15rem; }
.zigbert-sub .btn { margin-top: .6rem; }
.zigbert-brand { text-align: center; }
.zigbert-logo { max-width: 250px; margin: 0 auto 2rem; align-self: flex-start; }
.dash-mock {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-xl2); padding: 1.2rem; box-shadow: var(--shadow-card);
}
.dash-row { display: flex; gap: .4rem; margin-bottom: 1rem; }
.dash-row .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.dash-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.tile { background: var(--cream); border: 1px solid var(--line); border-radius: 12px; padding: 1rem; text-align: left; }
.tile.clay { background: var(--clay); border-color: var(--clay); color: #fff; }
.tile-num { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
.tile.clay .tile-num { color: #fff; }
.tile-label { font-size: .74rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.tile.clay .tile-label { color: rgba(255,255,255,.9); }

/* Steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-bottom: 4rem; }
.step { position: relative; padding-top: 1rem; border-top: 3px solid var(--clay); }
.step-num { font-family: var(--font-display); font-size: 2rem; font-weight: 700; color: var(--slate); }
.step h3 { margin: .3rem 0 .5rem; }
.step p { color: var(--muted); margin: 0; }

/* Service grid */
.service-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.service-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-xl2); padding: 1.6rem;
  box-shadow: var(--shadow-card);
  transition: transform .18s ease, box-shadow .18s ease;
}
.service-card:hover { transform: translateY(-4px); box-shadow: 0 1px 2px rgba(18,28,43,.04), 0 26px 50px -26px rgba(18,28,43,.35); }
.service-card h4 { color: var(--ink); border-bottom: 1px solid var(--line); padding-bottom: .7rem; margin-bottom: .9rem; }
.service-card ul { list-style: none; margin: 0; padding: 0; }
.service-card li { position: relative; padding-left: 1.3rem; margin-bottom: .55rem; color: var(--muted); font-size: .95rem; }
.service-card li::before { content: "›"; position: absolute; left: 0; color: var(--clay); font-weight: 700; }

/* Band (dark / ink) */
.band { background: var(--ink); position: relative; }
.band .light { color: #fff; }
.light-muted { color: rgba(255,255,255,.75) !important; }
.triple { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
.triple-item { border-left: 2px solid rgba(255,255,255,.15); padding-left: 1.5rem; }
.triple-item h4 { color: var(--clay-bright); }
.triple-item p { color: rgba(255,255,255,.78); }

/* Benchmarking */
.bench-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.bench-grid p { color: var(--muted); }
.bench-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.bench-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xl2); padding: 1.4rem; border-top: 3px solid var(--steel); box-shadow: var(--shadow-card); }
.bench-card h4 { margin-bottom: .4rem; }
.bench-card p { margin: 0; font-size: .92rem; color: var(--muted); }

/* Cost of getting it wrong — 1% callout */
.cost-band { padding: 0 0 clamp(2rem, 5vw, 3.5rem); }
.cost-callout { background: var(--ink); color: #fff; border-radius: var(--radius-xl2);
  padding: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3rem); text-align: center; box-shadow: var(--shadow-card); }
.cost-stat { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15;
  font-size: clamp(1.5rem, 3.2vw, 2.3rem); color: #fff; max-width: 22ch; margin: .3rem auto .8rem; }
.cost-sub { color: rgba(255,255,255,.78); max-width: 52ch; margin: 0 auto; font-size: 1.02rem; }

/* Zigbert — slim secondary mention */
.zlite { display: grid; grid-template-columns: 1.4fr .6fr; gap: 2.5rem; align-items: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xl2);
  padding: 2.4rem 2.6rem; box-shadow: var(--shadow-card); }
.zlite-copy h3 { margin-bottom: .5rem; }
.zlite-copy p { color: var(--muted); margin-bottom: 1.3rem; max-width: 56ch; }
.zlite-brand { display: flex; justify-content: center; }
.zlite-logo { max-width: 180px; width: 100%; }

/* The art of reward */
.approach-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 3.5rem; align-items: center; }
.approach-grid p { color: var(--muted); }
.quote-panel { margin: 0; background: var(--clay-tint); border-radius: var(--radius-xl2); padding: 2.2rem 2.4rem; position: relative; }
.quote-panel::before { content: "\201C"; position: absolute; top: .1rem; left: 1.1rem; font-family: var(--font-display); font-size: 4rem; color: var(--clay); opacity: .5; line-height: 1; }
.quote-panel p { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: 1.3rem; line-height: 1.4; letter-spacing: -0.01em; color: var(--ink); }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 3.5rem; padding-top: 2.5rem; border-top: 1px solid var(--line); }
.stat { display: flex; flex-direction: column; gap: .4rem; }
.stat-num { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.6rem, 2.4vw, 2.1rem); letter-spacing: -0.02em;
  background: linear-gradient(135deg, #DDA288 0%, #C9785A 52%, #B0603F 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.stat-label { font-size: .88rem; color: var(--muted); line-height: 1.4; }

/* Team */
.band-light { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
.team-card { background: var(--cream); border-radius: var(--radius-xl2); padding: 1.8rem; text-align: center; border: 1px solid var(--line); }
.avatar {
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--ink); color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: 1.35rem;
  display: flex; align-items: center; justify-content: center; margin: 0 auto 1.1rem;
}
.team-card:nth-child(2) .avatar { background: var(--clay); }
.team-card:nth-child(3) .avatar { background: var(--slate); }
.team-card:nth-child(4) .avatar { background: var(--steel); }
.team-card h3 { font-size: 1.18rem; margin-bottom: .2rem; }
.role { display: block; color: var(--clay-deep); font-weight: 600; font-size: .86rem; margin-bottom: .8rem; }
.team-card p { color: var(--muted); font-size: .9rem; margin: 0; }

/* Testimonial + clients */
.testimonial { max-width: 820px; margin: 0 auto 3.5rem; text-align: center; border: none; padding: 0; }
.testimonial p { font-family: var(--font-display); font-weight: 500; font-size: 1.4rem; line-height: 1.45; letter-spacing: -0.01em; color: var(--ink); }
.testimonial cite { display: block; margin-top: 1.2rem; font-style: normal; font-weight: 600; color: var(--clay-deep); font-size: .95rem; }
.clients-label { text-align: center; text-transform: uppercase; letter-spacing: .2em; font-size: .72rem; font-weight: 600; font-family: var(--font-display); color: var(--slate); margin-bottom: 1.6rem; }
.clients { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem 1rem; padding: 0; max-width: 900px; margin: 0 auto; }
.clients li { background: var(--clay-tint); border: 1px solid transparent; border-radius: 9999px; padding: .5rem 1.1rem; font-size: .9rem; font-weight: 500; color: var(--ink); }

/* CTA */
.cta { background: var(--ink); }
.cta-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8rem; }
.cta-card { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-xl2); padding: 2rem; }
.cta-card h3 { color: #fff; }
.cta-card p { color: rgba(255,255,255,.75); font-size: .96rem; }
.cta-card .btn { margin-top: .8rem; }

/* CTA cards on a light background (Contact page) */
.cta-card--light { background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-card); }
.cta-card--light h3 { color: var(--ink); }
.cta-card--light p { color: var(--muted); }
.cta-inline { text-align: center; }
.cta-inline .btn { margin-top: 1rem; }
.contact-line { text-align: center; margin-top: 2.5rem; color: var(--muted); }
.contact-line a { color: var(--clay-deep); font-weight: 600; }

/* Footer */
.site-footer { background: #0c1420; padding: 3rem 0; }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.footer-logo { height: 50px; filter: brightness(0) invert(1); opacity: .9; }
.footer-meta { text-align: right; }
.footer-meta p { color: rgba(255,255,255,.65); margin: .2rem 0; font-size: .92rem; }
.footer-meta a { color: var(--clay-bright); font-weight: 600; }
.copyright { font-size: .8rem !important; color: rgba(255,255,255,.4) !important; }

/* ===== Responsive ===== */
@media (max-width: 900px) {
  .hero-inner, .zigbert-grid, .bench-grid, .approach-grid, .zlite { grid-template-columns: 1fr; gap: 2.5rem; }
  .zlite-brand { order: -1; }
  .hero-art { max-width: 420px; margin: 0 auto; }
  .steps, .triple, .service-grid, .team-grid, .cta-grid, .bench-cards, .stats { grid-template-columns: 1fr 1fr; }
  .triple-item { border-left: none; padding-left: 0; border-top: 2px solid rgba(255,255,255,.15); padding-top: 1rem; }
}
@media (max-width: 919px) {
  .announce { display: none; }
  .nav-toggle { display: block; }
  .nav-zigbert { display: block; }
  /* On mobile the home page is a landing page only; sections that have their
     own standalone page (reached via the dropdown) are hidden here. */
  .nav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--cream);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 24px 40px -26px rgba(18,28,43,.45);
    padding: .4rem 0; display: none;
  }
  .nav.open { display: flex; }
  .nav a { padding: .95rem 24px; font-size: 1.05rem; border-bottom: 1px solid var(--line); }
  .nav a:last-child { border-bottom: none; }
  .nav-cta { background: transparent; color: var(--muted) !important; border-radius: 0; box-shadow: none; padding: .95rem 24px; }
  .nav-cta:hover { background: transparent; color: var(--clay-deep) !important; }
  .nav a.active { color: var(--clay-deep); }
}
@media (max-width: 620px) {
  .steps, .triple, .service-grid, .team-grid, .cta-grid, .bench-cards, .stats { grid-template-columns: 1fr; }
  .footer-inner { flex-direction: column; text-align: center; }
  .footer-meta { text-align: center; }
}

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

/* ============================================================
   Phase 1 additions. Existing tokens and
   components above are untouched; everything here is new.
   ============================================================ */

/* ===== Unresolved values ============================================
   Every figure nobody has supplied is rendered, not hidden. If you can
   see one of these on the live site, that page is not ready to ship. */
.todo {
  display: inline;
  background: var(--clay-tint);
  color: var(--ink);
  border-bottom: 2px solid var(--clay);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .86em;
  padding: .1em .35em;
  border-radius: 4px;
}
.todo-note {
  display: block;
  background: var(--clay-tint);
  color: var(--ink);
  border-left: 4px solid var(--clay);
  border-radius: 0 12px 12px 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .88rem;
  line-height: 1.55;
  padding: 1rem 1.2rem;
  margin: 1.6rem 0;
}
.todo-note strong { color: var(--clay-deep); display: block; margin-bottom: .35rem; letter-spacing: .04em; text-transform: uppercase; font-size: .76rem; }

/* ===== Long-form prose =====
   Centred, not pinned left. 46rem is about 75 characters a line, which is the
   top of the comfortable range; stretching it to the full 1120px container
   would give roughly 115 and read noticeably worse. */
.prose { max-width: 46rem; margin-left: auto; margin-right: auto; }
.prose.wide { max-width: 60rem; }
.prose p { color: var(--muted); }
.prose h2 { margin-top: 2.6rem; }
.prose h3 { margin-top: 2rem; }
.prose > ul { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.prose > ul > li { position: relative; padding-left: 1.4rem; margin-bottom: .7rem; color: var(--muted); }
.prose > ul > li::before { content: "›"; position: absolute; left: 0; top: -.05em; color: var(--clay); font-weight: 700; }
.prose > ul > li strong { color: var(--ink); }
.prose .lead { color: var(--ink); }

/* ===== Homepage router ===== */
.router-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; margin-top: 2.2rem; }
.router-option {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-xl2); padding: 1.7rem;
  box-shadow: var(--shadow-card);
}
.router-option h3 { margin-bottom: .6rem; }
.router-option p { color: var(--muted); margin: 0; font-size: .96rem; }
.router-option.rule { grid-column: 1 / -1; background: var(--cream); border-top: 3px solid var(--slate); }
.router-actions { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 2rem; }

/* ===== Sectors ===== */
.sector-block { border-top: 1px solid var(--line); padding-top: 1.6rem; margin-top: 1.6rem; }
.sector-block:first-of-type { border-top: 0; margin-top: 0; }
.sector-block h3 { margin-bottom: .5rem; }
.sector-block p { color: var(--muted); }
.sector-names { font-size: .95rem; color: var(--ink); }
.sector-more { font-weight: 600; color: var(--cta-blue); }
a.sector-more:hover { color: var(--clay-deep); }

/* ===== Case studies ===== */
.case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2.2rem; }
.case-card {
  background: var(--surface); border: 1px solid var(--line);
  border-top: 3px solid var(--clay);
  border-radius: var(--radius-xl2); padding: 1.6rem;
  box-shadow: var(--shadow-card);
  display: flex; flex-direction: column;
}
.case-card h3 { font-size: 1.15rem; margin-bottom: .8rem; }
.case-card .case-body { flex: 1; }

/* ===== Grouped logo wall ===== */
.client-group { margin-top: 2.2rem; }
.client-group h3 { font-size: 1rem; color: var(--muted); font-weight: 600; letter-spacing: .02em; margin-bottom: .8rem; }

/* ===== Monospace output block (one role, priced) ===== */
.mono-out {
  background: var(--ink); color: #E8EDF5;
  border-radius: var(--radius-xl2);
  padding: 1.6rem 1.8rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .85rem; line-height: 1.75;
  white-space: pre-wrap;
  overflow-x: auto;
  margin: 1.8rem 0;
}
.mono-out .mono-key { color: var(--clay-bright); }
.mono-out .todo { background: rgba(221,162,136,.18); color: var(--clay-bright); border-bottom-color: var(--clay-bright); }

/* ===== Contact scope selector ===== */
.scope-form { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xl2); padding: 1.8rem; box-shadow: var(--shadow-card); max-width: 46rem; }
.scope-form legend { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; padding: 0; margin-bottom: 1rem; }
.scope-form fieldset { border: 0; padding: 0; margin: 0 0 1.4rem; }
.scope-list { display: grid; gap: .6rem; }
.scope-option { display: flex; gap: .7rem; align-items: flex-start; padding: .8rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-input); cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.scope-option:hover { border-color: var(--clay); }
.scope-option input { margin: .25rem 0 0; accent-color: var(--cta-blue); flex: none; }
.scope-option:focus-within { border-color: var(--cta-blue); box-shadow: 0 0 0 3px rgba(94,113,145,.25); }
.scope-option span { font-size: .96rem; }

/* ===== Visible keyboard focus, everywhere ===== */
a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--cta-blue);
  outline-offset: 3px;
  border-radius: 4px;
}
.band a:focus-visible, .cta a:focus-visible, .announce a:focus-visible, .site-footer a:focus-visible {
  outline-color: #fff;
}

/* ===== Skip link ===== */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: #fff; padding: .7rem 1.2rem;
  font-family: var(--font-display); font-weight: 600; border-radius: 0 0 12px 0;
}
.skip-link:focus { left: 0; }

@media (max-width: 900px) {
  .router-grid { grid-template-columns: 1fr; }
  .case-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .mono-out { font-size: .78rem; padding: 1.2rem 1rem; }
}

/* ===== 320px: long unbreakable strings ==============================
   Email addresses and the monospace TODO blocks contain tokens longer
   than a 320px column, which pushed the whole page sideways. */
.todo, .todo-note, .mono-out { overflow-wrap: anywhere; }
.site-footer .footer-meta a, .contact-line a, .scope-fallback, .scope-fallback a { overflow-wrap: anywhere; }
@media (max-width: 380px) {
  .footer-inner { text-align: left; }
}

/* ============================================================
   Navy content blocks moved onto the light ground.
   The footer and the team avatars stay navy on purpose.
   Overrides live here rather than editing the original rules,
   so reverting is a matter of deleting this block.
   ============================================================ */

/* Homepage arithmetic card */
.cost-callout {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-top: 3px solid var(--clay);
}
.cost-stat { color: var(--ink); }
.cost-sub  { color: var(--muted); }

/* Three doors, homepage and /contact/ */
.cta {
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.cta .light        { color: var(--ink); }
.cta .light-muted  { color: var(--muted) !important; }
.cta-card {
  background: var(--cream);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
}
.cta-card h3 { color: var(--ink); }
.cta-card p  { color: var(--muted); }
/* Ghost buttons in here were drawn for a dark ground */
.cta .btn-ghost-light { color: var(--ink); border: 1px solid var(--line); background: var(--surface); }
.cta .btn-ghost-light:hover { border-color: var(--clay); color: var(--clay-deep); background: var(--surface); }

/* Worked-example output block */
.mono-out {
  background: var(--cream);
  color: var(--ink);
  border: 1px solid var(--line);
  border-left: 3px solid var(--slate);
}
.mono-out .mono-key { color: var(--clay-deep); }
.mono-out .todo {
  background: var(--clay-tint);
  color: var(--ink);
  border-bottom-color: var(--clay);
}

/* ===== Nav at mid widths ============================================
   Seven desktop items plus the button need more room than the 2rem gap
   allows between the hamburger breakpoint (920px) and about 1100px. Left
   alone, labels break onto two or three lines and the nav runs into the
   logo. Labels never wrap; the gap and type tighten instead. */
.nav a { white-space: nowrap; }

@media (max-width: 1100px) and (min-width: 920px) {
  .nav { gap: 1.15rem; }
  .nav a { font-size: .9rem; }
  .nav-cta { padding: .45rem .85rem; }
  .brand-logo { height: 36px; }
}

/* ===== Brand lockup, split =========================================
   The mark and the wordmark are separate images so the mark can be
   swapped without touching the wording. Heights are matched to the old
   single-image lockup: 42px tall overall, mark slightly larger than the
   wordmark's cap height, which is how the original artwork sat. */
/* The new mark is a fine-lined, nearly square monogram with internal space,
   where the old one was a solid wider-than-tall block. It needs a little more
   height than the old mark to hold the same optical weight beside the word. */
/* The wordmark image is two lines: 'TwentySix' is only 64% of the block
   height, with 'Consulting' below it. So the block has to be set larger than
   the mark for the capitals to read at the same size as the numerals. */
@media (max-width: 1100px) and (min-width: 920px) {
}
@media (max-width: 480px) {
}

/* Footer lockup: the reversed mark carries its own light colours, so it must
   not be filtered. Only the wordmark is knocked out to white. */

/* The bottom-aligned wordmark is wider than the centred one was, which ate the
   clearance next to the nav. Tighten the lockup in the narrowest band that
   still shows the full nav, rather than pushing the hamburger up again. */
@media (max-width: 1000px) and (min-width: 920px) {
}

/* ===== Brand lockup ================================================
   Three alignments, measured off the artwork rather than eyeballed:

     top of the T        = top arch of the 6's bowl
     bottom of the T     = bottom arch of the 6's bowl
     Consulting baseline = bottom of the 2's horizontal bar

   In the mark the bowl runs 0.284 to 0.754 of the box and the 2's bar
   bottoms at 0.969. In the wordmark the T runs 0.003 to 0.649 and
   Consulting's baseline sits at 0.946. Solving the first two gives a
   wordmark 0.728x the mark, offset down by 0.2817; the third wants
   0.2800, which is 0.1px away at this size. So one number drives it. */
.brand {
  --mark-h: 62px;
  display: flex;
  align-items: flex-start;
  gap: .7rem;
}
.brand-mark { height: var(--mark-h); width: auto; flex: none; }
.brand-word {
  height: calc(var(--mark-h) * 0.728);
  margin-top: calc(var(--mark-h) * 0.281);
  width: auto; flex: none;
}

@media (max-width: 1100px) and (min-width: 1001px) { .brand { --mark-h: 54px; } }
@media (max-width: 1000px) and (min-width: 920px)  { .brand { --mark-h: 48px; } }
@media (max-width: 480px)                          { .brand { --mark-h: 50px; } }

/* Footer: the reversed mark carries its own light colours, so only the
   wordmark is knocked out to white. */
.footer-brand .brand-mark { filter: none; }
.footer-brand .brand-word { filter: brightness(0) invert(1); opacity: .92; }