/* WE_AINA · design system v4.2: white/blue AI-native product studio.
   Blue leads, navy inverts, green is a PINCH (positive numbers only),
   orange retired to micro-accents. Space Grotesk display, Inter body,
   mono for data. Fonts self-hosted, no external requests. */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/fonts/bricolage-var-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: "InterVar";
  src: url("/fonts/inter-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  /* optional: no late swap repaint, kills the font-driven LCP penalty;
     slow connections keep the metric-compatible fallback below */
  font-display: optional;
}
/* fallback tuned to Inter metrics so optional-miss causes no layout shift */
@font-face {
  font-family: "InterFallback";
  src: local("Helvetica Neue"), local("Arial");
  ascent-override: 96%;
  descent-override: 24%;
  line-gap-override: 0%;
}
:root {
  --paper: #FAFCFF;   /* default bg */
  --ink: #0A1830;     /* text, deep navy ink */
  --blue: #0B5FFF;    /* THE brand color */
  --deep: #0A1F44;    /* navy inverted sections */
  --green: #0ACF6B;   /* pinch: positive deltas only */
  --orange: #FF6A1A;  /* micro-accent only */
  --sans: "InterVar", "InterFallback", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display: "Bricolage Grotesque", "InterVar", -apple-system, sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  /* legacy alias kept so nothing silently breaks */
  --bone: #FAFCFF;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

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

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--ink); text-decoration-color: var(--blue); text-underline-offset: 4px; }
a:hover { color: var(--blue); }
::selection { background: var(--blue); color: var(--paper); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
body { font-variant-numeric: tabular-nums; }

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

section { padding: 120px 0; border-top: 1px solid rgba(10, 24, 48, 0.1); }
section:first-of-type { border-top: none; }

/* v3: deep-green inverted sections, rhythm is the energy mechanism */
section.deep { background: var(--deep); color: #FFFFFF; border-top: 4px solid var(--blue); }
section.deep .dim { color: rgba(255, 255, 255, 0.75); }
section.deep a { color: #FFFFFF; }
section.deep a:hover { color: #7FB0FF; }
section.deep .step, section.deep .founder, section.deep .svc { border-top-color: rgba(255, 255, 255, 0.18); }
section.deep .label { color: #7FB0FF; }
section.deep h2 .accent, section.deep .accent { color: #7FB0FF; }
section.deep ::selection { background: #FFFFFF; color: var(--deep); }

/* reveal-on-scroll, transform/opacity only, no layout thrash.
   .rv fades up; parents with .stagger cascade their .rv children. */
.rv { opacity: 0; transform: translateY(26px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.rv.in { opacity: 1; transform: none; }
.stagger > .rv:nth-child(2) { transition-delay: 0.08s; }
.stagger > .rv:nth-child(3) { transition-delay: 0.16s; }
.stagger > .rv:nth-child(4) { transition-delay: 0.24s; }
.stagger > .rv:nth-child(5) { transition-delay: 0.32s; }
.stagger > .rv:nth-child(6) { transition-delay: 0.4s; }
/* hero line-by-line rise */
.rise > span { display: block; opacity: 0; transform: translateY(34px); animation: rise 0.9s var(--ease) forwards; }
.rise > span:nth-child(2) { animation-delay: 0.12s; }
.rise > span:nth-child(3) { animation-delay: 0.24s; }
@keyframes rise { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .rv, .rise > span { opacity: 1; transform: none; animation: none; }
}

.label {
  font-family: var(--mono);
  color: var(--blue);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 32px;
}

h1 { font-family: var(--display); font-size: clamp(36px, 5.5vw, 68px); line-height: 1.06; font-weight: 700; letter-spacing: -0.02em; }
h2 { font-family: var(--display); font-size: clamp(26px, 3.4vw, 40px); line-height: 1.15; font-weight: 700; letter-spacing: -0.015em; margin-bottom: 28px; }
h3 { font-family: var(--display); font-size: 18px; font-weight: 700; }

.dim { color: rgba(10, 24, 48, 0.62); }
.accent { color: var(--blue); }

/* ---- buttons: bordered, not carded ---- */
.btn {
  display: inline-block;
  border: 2px solid var(--blue);
  background: var(--blue);
  color: #FFFFFF;
  font-weight: 600;
  padding: 16px 32px;
  font-family: var(--mono);
  font-size: 15px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.btn:hover { background: transparent; color: var(--blue); }

/* ---- hero ---- */
#hero { min-height: 92vh; display: flex; align-items: center; padding: 0; }
#hero .wrap { padding-top: 120px; padding-bottom: 80px; }
#hero p { max-width: 620px; margin: 32px 0 44px; font-size: 18px; }
.hero-meta { margin-top: 72px; font-size: 13px; }
.hero-meta span { margin-right: 32px; }

/* ticker removed 2026-07-22 (founder call): a scrolling strip of raw numbers
   taught a buyer nothing. The hero meta row now carries the offer instead,
   and the numbers live in #casestudy where they have a story around them. */

/* ---- shift ---- */
#shift .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
#shift .col h3 { margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid rgba(10,24,48,0.14); }
#shift .col.now h3 { border-bottom-color: var(--blue); }
#shift li { list-style: none; padding: 10px 0; font-size: 15px; }
#shift li::before { content: "– "; color: var(--blue); }

/* ---- services ---- */
.svc { display: block; padding: 28px 0; border-top: 1px solid rgba(10,24,48,0.1); text-decoration: none; }
.svc:first-of-type { border-top: none; }
.svc .num { color: var(--blue); font-size: 13px; margin-right: 20px; font-weight: 700; font-family: var(--mono); }
.svc h3 { display: inline; }
.svc p { margin-top: 8px; padding-left: 44px; font-size: 14px; }
.svc:hover h3 { color: var(--blue); }

/* ---- banner band: a 4-shot crossfade of real delivery work.
   Founder call 2026-07-22: the single stock team photo was cut outright
   ("remove this image totally"); the slot keeps an image, but it rotates.
   Opacity + transform only, so the band never costs a layout pass. ---- */
.band-cycle { margin: 0 0 48px; }
.bc-frames {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 1;
  border-radius: 22px;
  overflow: hidden;
  background: var(--deep);
}
.bc-frames img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: bandCycle 28s infinite;
  will-change: opacity, transform;
}
.bc-frames img:nth-child(1) { animation-delay: 0s; }
.bc-frames img:nth-child(2) { animation-delay: 7s; }
.bc-frames img:nth-child(3) { animation-delay: 14s; }
.bc-frames img:nth-child(4) { animation-delay: 21s; }
@keyframes bandCycle {
  0%   { opacity: 0; transform: scale(1.02); }
  3%   { opacity: 1; }
  25%  { opacity: 1; transform: scale(1.06); }
  28%  { opacity: 0; }
  100% { opacity: 0; transform: scale(1.02); }
}
@media (max-width: 768px) { .bc-frames { aspect-ratio: 3 / 2; } }
/* reduced motion: hold the first shot, no rotation. The global reduce rule
   kills the animation, which would otherwise leave every frame at opacity 0 */
@media (prefers-reduced-motion: reduce) {
  .bc-frames img { opacity: 0; transform: none; }
  .bc-frames img:first-child { opacity: 1; }
}

/* ---- hero assistant: replaced the stat row 2026-07-22 ----
   Borders and inversion only. No shadow, no gradient (design rule 3, and
   the verify gate fails the build on either). */
#ask { max-width: 720px; margin: 0 auto; text-align: left; }
.ask-form { display: flex; align-items: center; gap: 8px; border: 2px solid rgba(127,176,255,0.55); border-radius: 999px; background: var(--deep); padding: 6px 6px 6px 22px; }
.ask-form:focus-within { border-color: #FFFFFF; }
.ask-input { flex: 1; background: none; border: none; color: #FFFFFF; font-family: var(--sans); font-size: 16px; padding: 14px 0; min-width: 0; }
.ask-input::placeholder { color: rgba(255,255,255,0.7); }
.ask-input:focus { outline: none; }
.ask-send { flex: none; width: 46px; height: 46px; border-radius: 999px; border: none; background: var(--blue); color: #FFFFFF; font-family: var(--mono); font-size: 19px; cursor: pointer; transition: background 0.15s; }
.ask-send:hover { background: #FFFFFF; color: var(--blue); }

.ask-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
/* Solid navy, not translucent: over a photographic hero a see-through chip
   picks up whatever is behind it and reads as torn. (founder, 2026-07-22) */
.ask-chips button { background: var(--deep); border: 1px solid rgba(127,176,255,0.55); color: #FFFFFF; font-family: var(--sans); font-size: 13px; padding: 9px 15px; border-radius: 999px; cursor: pointer; transition: background 0.2s, border-color 0.2s, transform 0.2s var(--ease); }
.ask-chips button:hover { background: var(--blue); border-color: var(--blue); transform: translateY(-2px); }

.ask-log { display: none; margin-top: 22px; max-height: 300px; overflow-y: auto; border-top: 1px solid rgba(255,255,255,0.3); padding-top: 18px; }
#ask.open .ask-log { display: block; }
#ask.open .ask-chips { display: none; }
.ask-msg { font-size: 15px; line-height: 1.62; margin-bottom: 16px; max-width: 92%; }
.ask-msg.me { margin-left: auto; text-align: right; color: #7FB0FF; font-family: var(--mono); font-size: 14px; }
.ask-msg.bot { color: rgba(255,255,255,0.94); border-left: 2px solid var(--blue); padding-left: 16px; }
.ask-follow { margin-top: 10px; color: rgba(255,255,255,0.72); }
.ask-links { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 18px; }
.ask-links a { font-family: var(--mono); font-size: 13px; font-weight: 700; color: #7FB0FF; text-decoration: none; }
.ask-links a:hover { color: #FFFFFF; text-decoration: underline; }
.ask-cta { margin-top: 30px; text-align: center; }

.ask-dots i { display: inline-block; width: 6px; height: 6px; margin-right: 4px; border-radius: 50%; background: #7FB0FF; animation: askblink 1.1s infinite; }
.ask-dots i:nth-child(2) { animation-delay: 0.18s; }
.ask-dots i:nth-child(3) { animation-delay: 0.36s; }
@keyframes askblink { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ask-dots i { animation: none; opacity: 0.6; } }
@media (max-width: 600px) {
  .ask-form { padding-left: 16px; }
  .ask-input { font-size: 15px; }
  .ask-chips button { font-size: 12px; }
}

/* ---- then vs now: what agents changed about our own economics ---- */
.thennow { margin-top: 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid rgba(255,255,255,0.25); }
.thennow .tn { padding: 32px; border-right: 1px solid rgba(255,255,255,0.25); }
.thennow .tn.now { border-right: none; background: rgba(127,176,255,0.08); }
.thennow .tnk { font-family: var(--mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: #7FB0FF; }
.thennow .tnv { font-family: var(--mono); font-size: clamp(26px, 3.4vw, 40px); font-weight: 700; line-height: 1.1; margin: 10px 0 8px; }
.thennow .tn.now .tnv { color: var(--green); }   /* pinch: the positive delta */
.thennow .tn p.dim { font-size: 14px; }
.thennow .tnnote { grid-column: 1 / -1; padding: 24px 32px; border-top: 1px solid rgba(255,255,255,0.25); font-size: 14px; }
@media (max-width: 768px) {
  .thennow { grid-template-columns: 1fr; }
  .thennow .tn { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.25); }
}

/* ---- case study ---- */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.cs-h2 { font-size: clamp(30px, 4.2vw, 52px); max-width: 900px; margin-top: 20px; }
#casestudy .sub { max-width: 700px; margin-top: 22px; font-size: 17px; }
/* .tens sets 3 columns further down the sheet, so this needs the extra
   class to win the cascade rather than relying on source order */
.tens.tens-4 { grid-template-columns: repeat(4, 1fr); gap: 28px; }
.cs-cmp { margin-top: 64px; }
.cs-cmp th:first-child { width: 18%; }
.cs-cmp td:not(:first-child) { width: 41%; }
.cs-more { margin-top: 44px; font-family: var(--mono); font-size: 15px; font-weight: 700; }
#casestudy .artifact-strip img { border-color: rgba(255, 255, 255, 0.25); }
/* the two mockups crop to different heights; pin the captions to a common
   baseline so the pair reads as one row */
#casestudy .artifact-strip { align-items: stretch; }
#casestudy .artifact-strip figure { display: flex; flex-direction: column; }
#casestudy .artifact-strip figcaption { margin-top: auto; padding-top: 14px; }

@media (max-width: 1000px) { .tens.tens-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) {
  .tens.tens-4 { grid-template-columns: 1fr; }
  .cs-cmp th:first-child, .cs-cmp td:not(:first-child) { width: auto; }
}

/* ---- process ---- */
.step { display: grid; grid-template-columns: 120px 1fr; gap: 24px; padding: 32px 0; border-top: 1px solid rgba(10,24,48,0.1); }
.step:first-of-type { border-top: none; }
.step .k { color: var(--blue); font-size: 14px; font-weight: 700; font-family: var(--mono); }
section.deep .step .k { color: #7FB0FF; }
.step p { margin-top: 8px; font-size: 15px; }

/* ---- work grid ---- */
.work-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid rgba(247,251,247,0.25); }
section.deep .work-grid { border-color: rgba(247,251,247,0.25); }
.work { padding: 32px; border: 1px solid rgba(247,251,247,0.25); margin: -1px 0 0 -1px; }
.work img { width: 100%; display: block; margin-bottom: 20px; border: 1px solid rgba(247,251,247,0.25); }
.work .tag { color: #7FB0FF; font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase; font-family: var(--mono); }
.work h3 { margin: 10px 0 6px; }
.work .receipt { font-size: 26px; font-weight: 700; font-family: var(--mono); }
.work p { font-size: 14px; margin-top: 6px; }
@media (max-width: 768px) { .work-grid { grid-template-columns: 1fr; } }

/* ---- founders ---- */
.founder { padding: 28px 0; border-top: 1px solid rgba(10,24,48,0.1); display: grid; grid-template-columns: 88px 1fr; gap: 24px; align-items: start; }
.founder:first-of-type { border-top: none; }
.founder .role { color: var(--blue); font-size: 13px; }
.founder p { margin-top: 8px; font-size: 15px; max-width: 640px; }
.founder .cred { font-size: 13px; margin-top: 4px; }

/* ---- score widget ---- */
#score-widget { max-width: 760px; margin: 56px auto 0; border: 2px solid var(--blue); border-radius: 22px; padding: 48px; background: #FFFFFF; }
#score-progress { height: 3px; background: rgba(10,24,48,0.1); margin-bottom: 40px; }
#score-progress i { display: block; height: 100%; width: 0; background: var(--blue); transition: width 0.25s; }
.q { display: none; }
.q.on { display: block; }
.q h3 { margin-bottom: 24px; font-size: 19px; }
.q .qnum { color: var(--blue); font-size: 12px; display: block; margin-bottom: 12px; }
.opt {
  display: block; width: 100%; text-align: left;
  background: transparent; color: var(--ink);
  border: 1.5px solid rgba(10,24,48,0.22); border-radius: 12px;
  font-family: var(--sans); font-size: 15px; font-weight: 600;
  padding: 15px 20px; margin-bottom: 12px; cursor: pointer;
  transition: border-color 0.2s, background 0.2s, transform 0.2s var(--ease);
}
.opt:hover { transform: translateY(-1px); }
.opt:hover, .opt:focus-visible { border-color: var(--blue); color: var(--blue); outline: none; }
.opt[aria-pressed="true"] { border-color: var(--blue); background: var(--blue); color: #FFFFFF; }
.q input[type="text"], .q input[type="email"] {
  width: 100%; background: transparent; color: var(--ink);
  border: 1.5px solid rgba(10,24,48,0.22); border-radius: 12px; padding: 15px 20px;
  font-family: var(--sans); font-size: 15px;
}
.q input:focus { border-color: var(--blue); outline: none; }
.q .next { margin-top: 20px; }
.q .hint { font-size: 12px; margin-top: 10px; }
#score-result { display: none; text-align: center; }
#score-result.on { display: block; }
#dial { margin: 0 auto 24px; display: block; }
#dial .track { stroke: rgba(10,24,48,0.12); }
#dial .arc { stroke: var(--blue); transition: stroke-dashoffset 1.2s ease; }
#dial text { fill: var(--ink); font-family: var(--mono); font-size: 30px; font-weight: 700; }
#verdict { font-size: 16px; }

/* ---- sticky CTA pill ---- */
#cta-pill {
  position: fixed; right: 24px; bottom: 24px; z-index: 10;
  opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity 0.3s, transform 0.3s;
}
#cta-pill.show { opacity: 1; transform: none; pointer-events: auto; }
#cta-pill:hover { background: var(--deep); border-color: var(--deep); color: #FFFFFF; }
@media (max-width: 768px) { #cta-pill { right: 12px; bottom: 12px; font-size: 13px; padding: 12px 18px; } }

/* ---- footer ---- */
footer { border-top: 1px solid rgba(10,24,48,0.1); padding: 48px 0; font-size: 13px; }
footer .row { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; }

@media (max-width: 768px) {
  section { padding: 72px 0; }
  #shift .grid2 { grid-template-columns: 1fr; }
  .step { grid-template-columns: 1fr; gap: 8px; }
  #score-widget { padding: 24px; }
}

/* ---- v3 additions: avatars, founder note, artifact strip ---- */
.avatar {
  width: 88px; height: 88px; border: 2px solid var(--blue);
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; font-weight: 700; color: var(--blue);
  background: rgba(11, 95, 255, 0.06);
  font-family: var(--mono);
}
.founder-note {
  border-left: 4px solid var(--blue);
  padding: 8px 0 8px 28px;
  margin-top: 56px;
  max-width: 720px;
  font-size: 16px;
}
.founder-note .sig { margin-top: 16px; color: var(--blue); font-weight: 700; }
.human-promise { margin-top: 40px; font-size: 15px; }
.human-promise b { color: var(--blue); }

.artifact-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 48px; }
.artifact-strip figure { margin: 0; }
.artifact-strip img { width: 100%; display: block; border: 1px solid rgba(10,24,48,0.15); }
.artifact-strip figcaption { font-size: 13px; padding-top: 10px; }
@media (max-width: 768px) { .artifact-strip { grid-template-columns: 1fr; } }

/* ---- v4: 10x thesis band + budget ---- */
.tens { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 48px; }
.ten { border-top: 4px solid var(--blue); padding-top: 20px; }
.ten .n { font-family: var(--mono); font-size: clamp(40px, 5vw, 64px); font-weight: 700; color: #7FB0FF; line-height: 1; }
.ten .n em { font-style: normal; color: var(--green); } /* the pinch: positive delta */
.ten p { margin-top: 10px; font-size: 15px; }
.budget { margin-top: 56px; border: 1px solid rgba(255,255,255,0.25); padding: 32px; }
.budget .row2 { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; align-items: baseline; }
.budget .amt { font-family: var(--mono); font-size: clamp(24px, 3vw, 34px); font-weight: 700; color: #FFFFFF; }
@media (max-width: 768px) { .tens { grid-template-columns: 1fr; } }

/* hero meta numbers in mono */
.hero-meta { font-family: var(--mono); }
.receipt, [data-count] { font-family: var(--mono); }

/* ---- v4.1: top nav + inner pages ---- */
.nav { border-bottom: 1px solid rgba(10,24,48,0.1); background: var(--paper); position: sticky; top: 0; z-index: 20; }
.nav .row { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; }
.nav .logo { font-family: var(--mono); font-weight: 700; font-size: 16px; text-decoration: none; letter-spacing: 0.02em; }
.nav .logo span { color: var(--blue); }
.nav nav { display: flex; align-items: center; gap: 26px; }
.nav nav a { font-size: 14px; text-decoration: none; color: rgba(10,24,48,0.75); position: relative; }
.nav nav a:not(.btn)::after { content: ""; position: absolute; left: 0; bottom: -6px; height: 2px; width: 0; background: var(--blue); transition: width 0.25s var(--ease); }
.nav nav a:not(.btn):hover::after, .nav nav a[aria-current="page"]:not(.btn)::after { width: 100%; }
.nav nav a:hover, .nav nav a[aria-current="page"] { color: var(--blue); }
.nav .btn { padding: 10px 18px; font-size: 13px; }
.nav nav a.btn { color: #FFFFFF; }
.nav nav a.btn:hover { color: var(--blue); }
@media (max-width: 860px) { .nav nav a:not(.btn) { display: none; } }

.page-hero { padding: 96px 0 72px; }
.page-hero h1 { max-width: 900px; }
.page-hero .sub { max-width: 680px; margin-top: 24px; font-size: 18px; }

/* comparison table (how-we-work) */
.cmp { width: 100%; border-collapse: collapse; margin-top: 48px; font-size: 15px; }
.cmp th { font-family: var(--mono); text-align: left; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; padding: 14px 16px; border-bottom: 2px solid var(--blue); }
.cmp td { padding: 16px; border-bottom: 1px solid rgba(10,24,48,0.1); vertical-align: top; }
.cmp td:first-child { color: rgba(10,24,48,0.6); width: 22%; }
.cmp .us { background: rgba(11,95,255,0.05); border-left: 3px solid var(--blue); }
.cmp td:first-child { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; padding-top: 20px; }
section.deep .cmp td { border-bottom-color: rgba(255,255,255,0.14); }
section.deep .cmp td:first-child { color: #7FB0FF; }
section.deep .cmp .us { background: rgba(127,176,255,0.08); }
.cmp-wrap { overflow-x: auto; }

/* principle blocks */
.principle { display: grid; grid-template-columns: 64px 1fr; gap: 24px; padding: 36px 0; border-top: 1px solid rgba(10,24,48,0.1); }
.principle:first-of-type { border-top: none; }
.principle .pn { font-family: var(--mono); font-size: 28px; font-weight: 700; color: var(--blue); }
.principle p { margin-top: 8px; max-width: 720px; }

/* bench roles */
.bench { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; }
.bench .role-card { border: 1px solid rgba(10,24,48,0.15); padding: 26px; transition: transform 0.3s var(--ease), border-color 0.3s; }
.bench .role-card:hover { transform: translateY(-4px); border-color: var(--blue); }
.bench .role-card .ri { font-family: var(--mono); color: var(--blue); font-size: 13px; }
section.deep .bench .role-card .ri { color: #7FB0FF; }
.bench .role-card h3 { margin: 8px 0 6px; font-size: 16px; }
.bench .role-card p { font-size: 14px; }
@media (max-width: 860px) { .bench { grid-template-columns: 1fr; } }

/* case cards */
.case { border: 1px solid rgba(10,24,48,0.15); padding: 32px; margin-top: 24px; display: grid; grid-template-columns: 1fr 220px; gap: 24px; transition: transform 0.3s var(--ease), border-color 0.3s; }
.case:hover { transform: translateY(-4px); border-color: var(--blue); }
.case .ctag { font-family: var(--mono); color: var(--blue); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; }
.case h3 { margin: 10px 0 8px; font-size: 20px; }
.case .cnum { font-family: var(--mono); font-weight: 700; font-size: 24px; text-align: right; color: var(--blue); }
.case .cnum small { display: block; font-family: var(--sans); font-weight: 400; font-size: 13px; color: rgba(10,24,48,0.6); margin-top: 6px; }
.case.placeholder { border-style: dashed; opacity: 0.75; }
@media (max-width: 768px) { .case { grid-template-columns: 1fr; } .case .cnum { text-align: left; } }

/* blog list + article */
.post-item { padding: 32px 0; border-top: 1px solid rgba(10,24,48,0.1); }
.post-item:first-of-type { border-top: none; }
.post-item .pdate { font-family: var(--mono); font-size: 13px; color: rgba(10,24,48,0.55); }
.post-item h3 { margin: 8px 0; font-size: 22px; }
.post-item h3 a { text-decoration: none; }
article.post { max-width: 760px; }
article.post p { margin: 20px 0; font-size: 17px; line-height: 1.75; }
article.post h2 { font-size: 26px; margin-top: 48px; }
article.post blockquote { border-left: 4px solid var(--blue); padding-left: 24px; color: rgba(10,24,48,0.7); margin: 28px 0; font-size: 18px; }

/* ---- v4.2: Bain-style two-question router ---- */
#router { background: #FFFFFF; }
#router .q-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
#router .q-count { font-family: var(--mono); font-size: 13px; color: rgba(10,24,48,0.62); }
.pills { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.pill-opt {
  font-family: var(--sans); font-size: 15px; font-weight: 600;
  color: var(--blue); background: transparent;
  border: 1.5px solid rgba(11,95,255,0.45); border-radius: 999px;
  padding: 13px 26px; cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s, transform 0.2s var(--ease), border-color 0.2s;
}
.pill-opt:hover { background: rgba(11,95,255,0.08); border-color: var(--blue); transform: translateY(-2px); }
.pill-opt[aria-pressed="true"] { background: var(--blue); color: #fff; border-color: var(--blue); }
.q-step { display: none; }
.q-step.on { display: block; animation: qfade 0.45s var(--ease); }
@keyframes qfade { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
#router .q-back { font-family: var(--mono); font-size: 13px; background: none; border: none; color: rgba(10,24,48,0.55); cursor: pointer; margin-top: 28px; padding: 0; }
#router .q-back:hover { color: var(--blue); }
.q-result { border: 2px solid var(--blue); padding: 36px; margin-top: 8px; }
.q-result .qr-tag { font-family: var(--mono); font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--blue); }
.q-result h3 { font-size: 24px; margin: 12px 0 10px; }
.q-result p { max-width: 640px; }
.q-result .qr-links { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.q-result .qr-links a.text { font-weight: 600; }

/* ---- v4.2: mega footer ---- */
footer.mega { border-top: 4px solid var(--blue); background: var(--deep); color: #fff; padding: 0; font-size: 14px; }
footer.mega .cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; padding: 72px 0 56px; }
footer.mega .fh { font-family: var(--mono); font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase; color: #7FB0FF; margin-bottom: 18px; }
footer.mega a { color: rgba(255,255,255,0.8); text-decoration: none; display: block; padding: 5px 0; }
footer.mega a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--blue); }
footer.mega .brand p { color: rgba(255,255,255,0.7); max-width: 340px; margin-top: 14px; }
footer.mega .logo { font-family: var(--mono); font-weight: 700; font-size: 18px; color: #fff; text-decoration: none; }
footer.mega .logo span { color: #7FB0FF; }
footer.mega .baseline { border-top: 1px solid rgba(255,255,255,0.15); padding: 22px 0; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; color: rgba(255,255,255,0.55); font-size: 13px; }
@media (max-width: 860px) { footer.mega .cols { grid-template-columns: 1fr 1fr; gap: 32px; } }

/* ============ v5: Infosys-pattern layer ============ */

/* floating pill nav */
.nav { border-bottom: none; background: transparent; padding: 14px 0; position: fixed; left: 0; right: 0; }
.nav .row { background: rgba(250,252,255,0.97);
  border: 1px solid rgba(10,24,48,0.08); border-radius: 999px; padding: 10px 12px 10px 24px; }
.nav[data-shadow-ok] .row { box-shadow: 0 8px 30px rgba(10,24,48,0.10); }
.nav .btn { border-radius: 999px; }
body { padding-top: 0; }
main, section:first-of-type { scroll-margin-top: 90px; }

/* full-bleed cinematic hero */
#hero { min-height: 100vh; padding: 0; position: relative; overflow: hidden; background: var(--deep); color: #fff; display: flex; align-items: center; }
/* hero background images removed 2026-07-22 (founder: no zebra lines). The
   hero-*.jpg set was procedural placeholder art, diagonal blue bands, not
   photography. Hero is flat navy now, which also drops an LCP image. */
#hero .wrap { position: relative; z-index: 2; text-align: center; padding-top: 140px; padding-bottom: 100px; width: 100%; }
#hero h1 { color: #fff; margin: 0 auto; max-width: 1000px; }
#hero p { max-width: 640px; margin: 30px auto 42px; font-size: 18px; color: rgba(255,255,255,0.85); }
#hero .label { color: #B7E3FF; }
#hero .label a { color: inherit; }
#hero .hero-meta { color: rgba(255,255,255,0.8); margin-top: 64px; }
#hero .hero-meta .accent { color: #7FB0FF; }
#hero .btn { border-radius: 12px; }

/* centered display sections */
.center-head { text-align: center; }
.center-head h2 { font-size: clamp(30px, 4.2vw, 52px); max-width: 900px; margin-left: auto; margin-right: auto; }
.center-head .sub { max-width: 680px; margin: 18px auto 0; font-size: 17px; }
.center-head .accent2 { color: var(--blue); }

/* rounded card system (Infosys-style) */
.xcard { background: #FFFFFF; border-radius: 22px; overflow: hidden; border: 1px solid rgba(10,24,48,0.08);
  display: flex; flex-direction: column; transition: transform 0.35s var(--ease); color: var(--ink); text-decoration: none; }
[data-shadow-ok] .xcard { box-shadow: 0 10px 34px rgba(10,24,48,0.12); }
.xcard:hover { transform: translateY(-6px); }
.xcard img.art { width: 100%; height: 240px; object-fit: cover; display: block; }
.xcard .body h3 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 44px; }
.xcard .body p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.xcard .body { padding: 26px 26px 28px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.xcard .body p { font-size: 14.5px; }
.xcard .go { margin-top: auto; padding-top: 14px; font-weight: 600; color: var(--blue); font-size: 14.5px; }
.tagpill { align-self: flex-start; font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em;
  background: var(--deep); color: #fff; border-radius: 999px; padding: 5px 14px; }

/* carousel band */
.band-dark { background: var(--deep); color: #fff; }
.band-dark .dim { color: rgba(255,255,255,0.72); }
.band-dark .label { color: #7FB0FF; }
.carousel-wrap { position: relative; margin-top: 56px; }
.carousel { display: flex; gap: 26px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 4px 22px; scrollbar-width: none; }
.carousel::-webkit-scrollbar { display: none; }
.carousel > * { flex: 0 0 min(390px, 82vw); scroll-snap-align: start; }
.car-btns { display: flex; gap: 12px; justify-content: flex-end; margin-top: 4px; }
.car-btn { width: 46px; height: 46px; border-radius: 999px; border: 1.5px solid rgba(255,255,255,0.4);
  background: transparent; color: #fff; font-size: 19px; cursor: pointer; transition: background 0.2s, border-color 0.2s; }
.car-btn:hover { background: var(--blue); border-color: var(--blue); }
section:not(.band-dark):not(.deep) .car-btn { border-color: rgba(10,24,48,0.3); color: var(--ink); }
section:not(.band-dark):not(.deep) .car-btn:hover { color: #fff; }

/* rounded core buttons */
.btn { border-radius: 12px; }
.pill-opt { border-radius: 999px; }
#score-widget { border-radius: 22px; }
.q-result { border-radius: 22px; }
.work, .work-grid { border-radius: 0; }
.case { border-radius: 22px; }
.bench .role-card { border-radius: 18px; }
.budget { border-radius: 18px; }

/* stat blocks on light pages */
section:not(.deep):not(.band-dark) .ten .n { color: var(--blue); }

/* xcard is always white, its text never inherits band colors */
.xcard .body p, .band-dark .xcard .dim, section.deep .xcard .dim { color: rgba(10, 24, 48, 0.62); }
.xcard h3 { color: var(--ink); }