/*
 * Two views, one set of content. The base rules below are the MOBILE view.
 * The DESKTOP view is layered on at the bottom, inside @media (min-width: 900px).
 * Every page shows the same content in both views; only the layout changes.
 * `make layout` renders both views of every page and checks for overflow.
 */

/* Brand tokens. Gray #999 (--steel) fails contrast on --bg, so use it only for decoration. */
:root {
  --maroon: #8B1724;
  --maroon-deep: #6E111C;
  --maroon-wash: #F3E7E8;
  --bg: #FBFAF6;
  --surface: #FFFFFF;
  --ink: #16181C;
  --text: #22252B;
  --muted: #5B6470;
  --rule: #EBE8E8;  /* lightest gray tint in the brand guide */
  --steel: #999999;
  --serif: Georgia, "Times New Roman", serif;
  --sans: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --wrap: 1120px;
  --gutter: clamp(16px, 4vw, 32px);
}

/* ================= Base: the mobile view ================= */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: var(--maroon); text-underline-offset: 3px; }
a:hover { color: var(--maroon-deep); }
:focus-visible { outline: 2px solid var(--maroon); outline-offset: 3px; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.wrap > * { min-width: 0; }

.skip { position: absolute; left: -9999px; top: 8px; background: var(--surface); padding: 8px 14px; z-index: 100; }
.skip:focus { left: 8px; }

/* ---------- Type ---------- */
h1, h2, h3 { font-family: var(--serif); font-weight: 400; margin: 0; color: var(--ink); }
h1 em { color: var(--maroon); }
h2 { font-style: italic; color: var(--maroon); font-size: clamp(32px, 4vw, 44px); line-height: 1.15; }
h3 { font-size: 22px; line-height: 1.3; }
p { margin: 0 0 16px; text-wrap: pretty; }  /* avoid one- or two-word last lines */
p:last-child { margin-bottom: 0; }
.lead { font-size: clamp(21px, 2.3vw, 27px); line-height: 1.4; color: var(--ink); margin-bottom: 22px; }
h2 + .lead { margin-top: 22px; }
.label { font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--muted); margin: 0 0 6px; }

section { padding: 64px 0; }
section + section { border-top: 1px solid var(--rule); }
.section-head { margin-bottom: 40px; max-width: 760px; }
.section-head p { margin-top: 18px; color: var(--muted); font-size: 19px; }

/* ---------- Nav: menu button opens a full-width panel ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(251, 250, 246, .94);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--rule);
}
.nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand svg { width: 32px; height: 32px; }
/* The wordmark is the brand guide's outlined Gotham artwork; size it by its height */
.brand .wordmark { width: auto; height: 11px; aspect-ratio: 346.56 / 25.32; }
.menu-toggle { display: block; background: none; border: 0; padding: 10px; margin-right: -10px; cursor: pointer; color: var(--ink); }
.menu-toggle .icon-close { display: none; }
.menu-toggle[aria-expanded="true"] .icon-open { display: none; }
.menu-toggle[aria-expanded="true"] .icon-close { display: block; }
.nav-links {
  display: none; position: absolute; top: 68px; left: 0; right: 0;
  background: var(--bg); flex-direction: column; align-items: stretch;
  padding: 8px var(--gutter) 20px; border-bottom: 1px solid var(--rule);
  box-shadow: 0 12px 24px rgba(22, 24, 28, .06);
}
.nav-links.open { display: flex; }
.nav-links a { font-family: var(--sans); font-size: 17px; font-weight: 600; color: var(--muted); text-decoration: none; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--maroon); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--sans); font-weight: 600; font-size: 16px;
  padding: 12px 22px; border-radius: 4px; text-decoration: none;
  border: 1.5px solid var(--maroon); transition: background .15s, color .15s, border-color .15s;
}
.btn-primary { background: var(--maroon); color: #fff; }
.btn-primary:hover { background: var(--maroon-deep); border-color: var(--maroon-deep); color: #fff; }
.btn-secondary { color: var(--maroon); background: transparent; }
.btn-secondary:hover { background: var(--maroon-wash); }
.nav-links .btn { margin-top: 16px; color: #fff; border-bottom: 1.5px solid var(--maroon); padding: 12px 16px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* ---------- Landing hero: copy, then the chart drawn for a narrow screen ---------- */
.hero-data { padding: 36px 0 48px; }
.hero-stage { position: relative; }
.hero-copy h1 { font-size: clamp(32px, 8.4vw, 40px); line-height: 1.12; letter-spacing: -.01em; max-width: 10.8em; }
.hero-copy h1 em { white-space: nowrap; }
.hero-copy .intro { margin: 16px 0 0; font-size: 17px; color: var(--muted); }
.hero-copy .intro + .intro { margin-top: 10px; }  /* paragraphs read as one block... */
.hero-copy .term { color: var(--ink); }  /* the defined term: italic (em) in ink, not maroon */
.hero-copy .actions { margin-top: 28px; }  /* ...and the buttons as a separate action */
/* The hero artwork is texture, not content: the desktop view only */
.hero-chart { display: none; width: 100%; height: auto; }
/* Hero artwork: a texture, not a chart. Back to front: hairline guides, faint equations,
   the hatched power diagram, then the maroon data dots as the only full-strength element. */
.hc-guides line { stroke-width: 1; }
.hero-chart linearGradient stop { stop-color: #D9D5CB; }
.hc-eq, .hc-ann { font-family: "Times New Roman", Times, serif; font-style: italic; fill: var(--ink); }
.hc-ann { fill: var(--muted); stroke: var(--bg); stroke-width: 3px; paint-order: stroke; stroke-linejoin: round; }  /* halo keeps labels clean over hatching */
.hc-power path, .hc-power line { fill: none; vector-effect: non-scaling-stroke; }
.hc-curve-null { stroke: var(--muted); stroke-width: 1.1; opacity: .55; }
.hc-curve-alt { stroke: var(--maroon); stroke-width: 1.1; opacity: .55; }
.hc-power .hc-fill-power { fill: url(#hc-hatch-desktop); opacity: .42; }
.hc-power .hc-fill-alpha { fill: var(--muted); opacity: .16; }
.hc-base { stroke: var(--muted); stroke-width: 1; opacity: .35; }
.hc-crit { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 3 3; opacity: .35; }
.hc-bracket { stroke: var(--muted); stroke-width: 1; opacity: .5; }
.hero-chart pattern line { stroke: var(--maroon); stroke-width: 1; }
.hc-dots circle { fill: var(--maroon); }

/* ---------- Careers hero ---------- */
.hero { padding: 32px 0 40px; }  /* careers page header: compact, not a full hero */
.hero h1 { font-size: clamp(32px, 8.4vw, 40px); line-height: 1.15; letter-spacing: -.01em; }
.hero .intro { font-size: 18px; color: var(--muted); max-width: 640px; margin: 18px 0 0; }
.fit { margin-top: 56px; }
.fit h2 { margin-bottom: 16px; }
.fit p { max-width: 760px; }
.hero-mark { display: none; }
.hero-mark svg { width: 100%; height: auto; overflow: visible; }
/* The grey backing shape fades in and pushes in from the top right while site.js draws
   the red C as a line, out from its top-right corner and around back to it */
.hero-mark .grey { animation: settle 1.8s cubic-bezier(.25,.6,.2,1) both .2s; }
@keyframes settle { from { opacity: 0; transform: translate(13px, -13px); } to { opacity: 1; transform: none; } }

/* ---------- Our work: label above content, everything in one column ---------- */
.work-block { padding: 32px 0; border-top: 1px solid var(--rule); }
.work-block > h3 { font-style: italic; color: var(--maroon); font-size: 26px; line-height: 1.2; margin-bottom: 18px; }
.work-block > div > p { max-width: 760px; }

/* Each Our Work block has its own layout: prose (Overview), two diagram panels (Evidence),
   a ruled list (Questions), and three columns (Delivery, the only three-column block). */
.trio { display: grid; gap: 22px; }
.trio h4, .panel h4 { font-family: var(--serif); font-weight: 400; font-size: 20px; color: var(--ink); margin: 0 0 6px; }
.trio p, .panel p { color: var(--muted); font-size: 16px; }

.evidence { display: grid; gap: 36px; }
.panel .diagram { display: block; height: 140px; width: auto; max-width: 100%; margin-bottom: 18px; }
.dg-src { fill: #C3BEB4; }
.dg-ctl { fill: var(--steel); }
.dg-trt { fill: var(--maroon); }
.dg-line { fill: none; stroke: var(--rule); stroke-width: 1.5; }
.dg-cut { stroke: #CFCAC0; stroke-width: 1.2; stroke-dasharray: 3 3; }

.qintro { margin-bottom: 16px; }
.qlist { margin: 0; border-top: 1px solid var(--rule); }
.qlist > div { padding: 12px 0; border-bottom: 1px solid var(--rule); }
.qlist dt { font-size: 20px; line-height: 1.3; color: var(--ink); }  /* category: the larger line */
.qlist dd { margin: 2px 0 0; font-style: italic; color: var(--muted); font-size: 16px; line-height: 1.45; }  /* question */

/* ---------- Maroon band: closing moments ---------- */
.band { position: relative; overflow: hidden; background: var(--maroon); color: #fff; border-top: 0; }
/* The reversed (all-white) mark from the brand guide, as a faint watermark behind the text */
.band-mark { --mark-gray: #fff; --mark-red: #fff; position: absolute; right: -36px; bottom: -44px; width: 220px; height: 220px; opacity: .07; pointer-events: none; }
.band .wrap { position: relative; }
.band + section, section + .band { border-top: 0; }
.band h2, .band h3 { color: #fff; }
.band p { color: #F6E3E5; }
.band .lead { color: #fff; }
/* Closing line echoes the hero headline: large serif, with "what-if" italic in a pale tint that reads on maroon */
.band .callback { margin: 0 0 10px; font-style: normal; font-size: clamp(32px, 7vw, 46px); line-height: 1.15; color: #fff; }
.band .callback em { font-style: italic; color: #fff; white-space: nowrap; margin-right: .1em; }  /* room for the italic f before the "?" */
.band a { color: #fff; }
.band .wrap { display: grid; gap: 36px; }
.band .contact { border-top: 1px solid rgba(255,255,255,.3); padding-top: 20px; }
.band .contact .label { color: #F0CED2; }
.band .contact a { font-size: clamp(17px, 2vw, 23px); overflow-wrap: anywhere; }

/* ---------- Careers ---------- */
.reasons { border-top: 1px solid var(--rule); }
.reason { padding: 20px 0; border-bottom: 1px solid var(--rule); }
.reason h3 { font-style: italic; color: var(--maroon); font-size: 22px; line-height: 1.2; margin-bottom: 6px; }


/* ---------- Footer ---------- */
footer { border-top: 1px solid var(--rule); padding: 32px 0 40px; font-family: var(--sans); font-size: 15px; color: var(--muted); }
footer .wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
footer .meta { display: flex; flex-direction: column; gap: 6px; }
footer a { color: var(--muted); }
footer .brand svg { width: 26px; height: 26px; }
footer .brand .wordmark { height: 10px; }

/* ---------- Reveal: only when JS is running, so content never stays hidden ---------- */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .hero-mark .red, .hero-mark .grey { animation: none; }
  html { scroll-behavior: auto; }
}

/* ================= Desktop view ================= */
@media (min-width: 900px) {
  body { font-size: 18px; }
  section { padding: 96px 0; }
  .section-head { margin-bottom: 56px; }

  /* Nav: links inline, no menu button */
  .brand .wordmark { height: 13px; }
  .menu-toggle { display: none; }
  .nav-links, .nav-links.open {
    display: flex; position: static; flex-direction: row; align-items: center; gap: 28px;
    padding: 0; border: 0; box-shadow: none; background: none;
  }
  .nav-links a { font-size: 15px; padding: 0; border: 0; }
  .nav-links .btn { margin-top: 0; padding: 8px 16px; font-size: 15px; border-bottom: 1.5px solid var(--maroon); }
  .actions { gap: 14px; margin-top: 32px; }

  /* Landing hero: the artwork starts near the top and the copy sits lower, layered over its
     right side. Artwork, wash and copy share one grid cell, so the hero is as tall as the
     tallest of them. The wash is a near-white gradient over the whole right side, from the
     copy column to the screen edge and the full height of the artwork: dots pass faintly beneath the
     text while it keeps full contrast. */
  .hero-data { padding: 20px 0 56px; --stage-w: calc(min(100vw, var(--wrap)) - 2 * var(--gutter)); }
  .hero-stage { display: grid; }
  .hero-stage > *, .hero-stage::after { grid-area: 1 / 1; }
  .hero-stage::after {
    content: ""; z-index: 1; pointer-events: none;
    margin: -20px calc(50% - 50vw) -56px 0;  /* through the section padding: top, screen edge, and down to the rule below */
    background: linear-gradient(to right,
      rgba(251, 250, 246, 0) calc(var(--stage-w) * .36),
      rgba(251, 250, 246, .95) calc(var(--stage-w) * .51));  /* --bg, so the wash matches the page */
  }
  .hero-copy { justify-self: end; align-self: start; width: 47%; margin: clamp(40px, 5.5vw, 80px) 0 0; z-index: 2; position: relative; }
  .hero-copy h1 { font-size: clamp(32px, 3.7vw, 50px); }
  .hero-copy .intro { margin-top: 18px; font-size: clamp(16px, 1.45vw, 19px); }
  .hero-copy .actions { margin-top: 32px; }
  .hero-copy .btn-secondary { background: var(--bg); }  /* solid, so dots don't show inside the outline */
  .hero-copy .btn-secondary:hover { background: var(--maroon-wash); }
  .hero-chart--desktop { display: block; align-self: start; }

  /* Careers hero: text beside the animated mark */
  /* Careers page header: text block with a small animated mark beside it */
  .hero { padding: 52px 0 56px; }
  .hero .wrap { display: grid; grid-template-columns: 1fr auto; gap: 56px; align-items: center; }
  .hero h1 { font-size: clamp(34px, 3.4vw, 42px); max-width: 22em; }
  .hero .intro { font-size: clamp(18px, 1.6vw, 20px); margin-top: 18px; }
  .hero .actions { margin-top: 24px; }
  /* Centered under the nav links; site.js sets the exact offset once fonts have loaded */
  .hero-mark { display: block; width: 100px; margin-right: var(--mark-offset, 74px); }

  /* Our work: label column beside content */
  .work-block { display: grid; grid-template-columns: 220px 1fr; gap: 48px; padding: 44px 0; }
  .work-block > h3 { font-size: 28px; margin-bottom: 0; }
  .trio { grid-template-columns: repeat(3, 1fr); gap: 36px; }
  .trio h4, .panel h4 { font-size: 21px; margin-bottom: 8px; }
  .trio p, .panel p { font-size: 17px; }
  .evidence { grid-template-columns: 1fr 1fr; gap: 56px; }
  .qlist > div { display: grid; grid-template-columns: 230px 1fr; gap: 24px; align-items: baseline; padding: 11px 0; }
  .qlist dt { font-size: 22px; }
  .qlist dd { margin: 0; font-size: 17px; }

  .band .wrap { grid-template-columns: 1.3fr 1fr; gap: 64px; align-items: center; }
  .band .contact { padding-top: 22px; }
  .band-mark { width: 300px; height: 300px; right: 32px; bottom: -64px; }

  .reason { display: grid; grid-template-columns: 220px 1fr; gap: 48px; padding: 22px 0; align-items: baseline; }
  .reason h3 { font-size: 24px; margin-bottom: 0; }

  footer { padding: 36px 0 44px; }
  footer .wrap { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 32px; }
  footer .meta { flex-direction: row; flex-wrap: wrap; gap: 8px 24px; }
}