/* ==========================================================================
   Synerjy Consulting design system
   Palette derived from the brand mark: black, red #C60909, white.
   ========================================================================== */
:root {
  /* Brand red is #C60909. It clears 4.5:1 on white but only 3.2:1 on black,
     so red text sitting on the black bands uses --red-band instead. Solid
     fills stay true brand red in both themes. */
  --red:         #C60909;
  --red-solid:   #C60909;
  --red-solid-h: #9C0707;
  --red-band:    #E63329;
  --red-tint:    rgba(198, 9, 9, 0.08);
  --ground:     #FFFFFF;
  --ground-alt: #F4F3F1;
  --ink:        #101011;
  --ink-2:      #56534F;
  --ink-3:      #8B8781;
  --line:       #E3E0DB;
  --band:       #0B0B0C;
  --band-ink:   #F4F3F1;
  --band-ink-2: #A5A19B;
  --band-line:  #26262A;

  --display: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --pad: 20px;
  --maxw: 1180px;
}
@media (min-width: 768px) { :root { --pad: 40px; } }

@media (prefers-color-scheme: dark) {
  :root {
    --red:        #E63329;
    --red-tint:   rgba(230, 51, 41, 0.14);
    --ground:     #0B0B0D;
    --ground-alt: #141417;
    --ink:        #F2F0ED;
    --ink-2:      #A6A29C;
    --ink-3:      #6E6A64;
    --line:       #26262B;
    --band:       #000000;
    --band-ink:   #F2F0ED;
    --band-ink-2: #A6A29C;
    --band-line:  #26262B;
  }
}
:root[data-theme="light"] {
  --red:#C60909; --red-tint:rgba(198,9,9,0.08);
  --ground:#FFFFFF; --ground-alt:#F4F3F1; --ink:#101011; --ink-2:#56534F;
  --ink-3:#8B8781; --line:#E3E0DB; --band:#0B0B0C; --band-ink:#F4F3F1;
  --band-ink-2:#A5A19B; --band-line:#26262A;
}
:root[data-theme="dark"] {
  --red:#E63329; --red-tint:rgba(230,51,41,0.14);
  --ground:#0B0B0D; --ground-alt:#141417; --ink:#F2F0ED; --ink-2:#A6A29C;
  --ink-3:#6E6A64; --line:#26262B; --band:#000000; --band-ink:#F2F0ED;
  --band-ink-2:#A6A29C; --band-line:#26262B;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font-family: var(--body); font-size: 17px; line-height: 1.65;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img, svg { max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 2px; }
.skip {
  position: absolute; left: -9999px; top: 0; background: var(--red); color: #fff;
  padding: 12px 20px; z-index: 200; text-decoration: none;
}
.skip:focus { left: 0; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }

/* ---------- Type ---------- */
h1, h2, h3 { font-family: var(--display); font-weight: 700; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(32px, 6.2vw, 60px); line-height: 1.04; letter-spacing: -0.028em; }
h2 { font-size: clamp(25px, 3.8vw, 38px); line-height: 1.12; letter-spacing: -0.022em; }
h3 { font-size: clamp(19px, 2.2vw, 23px); line-height: 1.25; letter-spacing: -0.013em; }
p { margin: 0 0 1.1em; }
.lede { font-size: clamp(18px, 2.1vw, 21px); line-height: 1.55; color: var(--ink-2); max-width: 60ch; }
.prose { max-width: 68ch; }
.prose p { color: var(--ink-2); }
.prose h3 { color: var(--ink); margin: 2em 0 0.6em; }

.eyebrow {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--red); margin: 0 0 16px; font-weight: 500;
}
.eyebrow.q { color: var(--ink-3); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
  font-family: var(--body); font-size: 16px; font-weight: 600; line-height: 1;
  padding: 15px 24px; border: 1.5px solid transparent; cursor: pointer;
  border-radius: 2px; transition: background .16s, color .16s, border-color .16s;
  min-height: 48px; justify-content: center;
}
.btn .chev { width: 11px; height: 11px; transition: transform .16s; }
.btn:hover .chev { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .btn:hover .chev { transform: none; } }
.btn-red { background: var(--red-solid); color: #fff; }
.btn-red:hover { background: var(--red-solid-h); }
.btn-line { border-color: var(--line); color: var(--ink); }
.btn-line:hover { border-color: var(--ink); }
.on-band .btn-line { border-color: var(--band-line); color: var(--band-ink); }
.on-band .btn-line:hover { border-color: var(--band-ink); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Header ---------- */
.hdr {
  position: sticky; top: 0; z-index: 100; background: var(--ground);
  border-bottom: 1px solid var(--line);
}
.hdr .wrap { display: flex; align-items: center; gap: 16px; height: 68px; }
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; margin-right: auto; }
.brand .mark { width: 34px; height: 34px; flex: none; --m1: var(--red); --m2: var(--ink); }
.brand .wm {
  font-family: var(--display); font-weight: 700; font-size: 21px;
  letter-spacing: -0.02em; text-transform: uppercase; color: var(--ink); line-height: 1;
}
.brand .wm small {
  display: block; font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.28em;
  color: var(--red); font-weight: 500; margin-top: 3px; text-transform: uppercase;
}
.mainnav { display: none; gap: 26px; }
.mainnav a { text-decoration: none; font-size: 15px; color: var(--ink-2); position: relative; padding: 4px 0; }
.mainnav a:hover, .mainnav a[aria-current="page"] { color: var(--ink); }
.mainnav a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--red);
}
.hdr .btn { padding: 11px 18px; font-size: 15px; min-height: 42px; display: none; }
.burger {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; background: none; border: 0; cursor: pointer; padding: 10px;
}
.burger span { display: block; height: 2px; background: var(--ink); transition: transform .2s, opacity .2s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* Dropped from 1000px: at that breakpoint the full menu vanished on common
   laptop and panel widths, leaving only the burger. */
@media (min-width: 900px) {
  .mainnav { display: flex; gap: 20px; }
  .hdr .btn { display: inline-flex; }
  .burger { display: none; }
}

.drawer {
  display: none; border-bottom: 1px solid var(--line); background: var(--ground);
  position: sticky; top: 68px; z-index: 99; max-height: calc(100vh - 68px); overflow-y: auto;
}
.drawer.open { display: block; }
/* Must match the burger breakpoint, or the drawer could be left open with no
   control to close it. */
@media (min-width: 900px) { .drawer, .drawer.open { display: none; } }
.drawer .wrap { padding-top: 12px; padding-bottom: 24px; }
.drawer a { display: block; text-decoration: none; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 17px; }
.drawer .grp { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); margin: 22px 0 4px; }
.drawer .btn { width: 100%; margin-top: 20px; }

/* ---------- Hero ---------- */
.hero { background: var(--band); color: var(--band-ink); padding: 64px 0 56px; position: relative; overflow: hidden; }
.hero h1 { color: #fff; max-width: 15ch; }
.hero .lede { color: var(--band-ink-2); margin: 22px 0 30px; }
.hero .eyebrow { color: var(--red-band); }
.hero-rule { height: 3px; background: var(--red); width: 64px; margin-bottom: 28px; }
@media (min-width: 768px) { .hero { padding: 96px 0 84px; } }

.hero-sub { background: var(--ground-alt); border-bottom: 1px solid var(--line); padding: 44px 0 40px; }
.hero-sub .eyebrow { color: var(--red); }
.hero-sub h1 { max-width: 18ch; }
.hero-sub .lede { margin-top: 18px; }
@media (min-width: 768px) { .hero-sub { padding: 68px 0 60px; } }

.crumbs { font-size: 13px; color: var(--ink-3); margin-bottom: 18px; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--red); }
.crumbs span { margin: 0 7px; }

/* ---------- Stats ---------- */
.stats { border-bottom: 1px solid var(--line); background: var(--ground); }
.stats-grid { display: grid; grid-template-columns: 1fr 1fr; }
.stat { padding: 22px 0; border-bottom: 1px solid var(--line); }
.stat:nth-child(odd) { padding-right: 18px; border-right: 1px solid var(--line); }
.stat:nth-child(even) { padding-left: 18px; }
.stat:nth-last-child(-n+2) { border-bottom: 0; }
.stat b {
  display: block; font-family: var(--display); font-weight: 700;
  font-size: clamp(27px, 5vw, 40px); letter-spacing: -0.03em; color: var(--ink);
  font-variant-numeric: tabular-nums; line-height: 1.05;
}
.stat i { display: block; font-style: normal; font-size: 14px; color: var(--ink); margin-top: 6px; font-weight: 600; }
.stat span { display: block; font-size: 13px; color: var(--ink-3); margin-top: 2px; }
@media (min-width: 860px) {
  .stats-grid { grid-template-columns: repeat(4, 1fr); }
  .stat { padding: 34px 26px; border-bottom: 0; border-right: 1px solid var(--line); }
  .stat:nth-child(odd), .stat:nth-child(even) { padding-left: 26px; padding-right: 26px; }
  .stat:first-child { padding-left: 0; }
  .stat:last-child { border-right: 0; padding-right: 0; }
}

/* ---------- Sections ---------- */
.sec { padding: 56px 0; border-bottom: 1px solid var(--line); }
@media (min-width: 768px) { .sec { padding: 84px 0; } }
.sec-alt { background: var(--ground-alt); }
.sec-band { background: var(--band); color: var(--band-ink); border-bottom: 0; }
.sec-band h2, .sec-band h3 { color: #fff; }
.sec-band p { color: var(--band-ink-2); }
.sec-band .eyebrow { color: var(--red-band); }

/* Every block on the page shares one left edge. An earlier version put the
   eyebrow in a 200px side rail, which pushed section headings 240px right of
   the body text and gave the page three competing left edges. */
.sec-head { margin-bottom: 36px; }
.sec-head p { color: var(--ink-2); max-width: 62ch; margin-top: 16px; }
.sec-head h2 { max-width: 26ch; }

/* ---------- Card grids ---------- */
.cards { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 900px) { .cards-3 { grid-template-columns: repeat(3, 1fr); } }
.card { background: var(--ground); padding: 28px 24px; display: flex; flex-direction: column; gap: 12px; }
.sec-alt .card { background: var(--ground-alt); }
.card .rate { font-family: var(--mono); font-size: 12px; color: var(--red); letter-spacing: 0.04em; }
.card p { margin: 0; color: var(--ink-2); font-size: 15.5px; flex: 1; }
.card .fit { font-size: 13.5px; color: var(--ink-3); border-top: 1px solid var(--line); padding-top: 14px; }
.card .fit b { color: var(--ink-2); }
.card .go { text-decoration: none; font-weight: 600; font-size: 15px; color: var(--red); display: inline-flex; align-items: center; gap: 7px; }
.card .go .chev { width: 11px; height: 11px; transition: transform .16s; }
.card:hover .go .chev { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .card:hover .go .chev { transform: none; } }

/* ---------- Discipline list ---------- */
.disc { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 700px) { .disc { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .disc { grid-template-columns: repeat(3, 1fr); } }
.disc a {
  background: var(--ground); padding: 20px 22px; text-decoration: none;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-weight: 600; font-size: 16px; transition: background .15s, color .15s; min-height: 66px;
}
.sec-alt .disc a { background: var(--ground-alt); }
.disc a .chev { width: 12px; height: 12px; color: var(--red); flex: none; transition: transform .16s; }
.disc a:hover { background: var(--red-solid); color: #fff; }
.disc a:hover .chev { color: #fff; transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .disc a:hover .chev { transform: none; } }
.disc a em { display: block; font-style: normal; font-weight: 400; font-size: 13px; color: var(--ink-3); margin-top: 3px; }
.disc a:hover em { color: rgba(255,255,255,.8); }

/* ---------- Roles ---------- */
.roles { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
@media (min-width: 620px) { .roles { grid-template-columns: 1fr 1fr; column-gap: 32px; } }
.roles li { padding: 11px 0 11px 22px; border-bottom: 1px solid var(--line); position: relative; font-size: 15.5px; }
.roles li::before {
  content: ""; position: absolute; left: 0; top: 19px; width: 8px; height: 8px;
  background: var(--red); clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* ---------- Why list ---------- */
.why { display: grid; gap: 0; }
@media (min-width: 860px) { .why { grid-template-columns: 1fr 1fr; gap: 0 56px; } }
.why > div { padding: 24px 0; border-top: 1px solid var(--band-line); }
.why h3 { margin-bottom: 8px; }
.why p { margin: 0; font-size: 15.5px; }
.why .n { font-family: var(--mono); font-size: 11.5px; color: var(--red-band); letter-spacing: 0.14em; margin-bottom: 10px; display: block; }

/* ---------- Proof ---------- */
.logos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 700px) { .logos { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .logos { grid-template-columns: repeat(6, 1fr); } }
/* Cells stay white in both themes. Two of these marks carry their own
   background colour (Lufthansa navy, BAE red) and the rest are dark artwork,
   so a themed cell would either clash or make black wordmarks vanish in dark
   mode. Every logo sits on the ground it was drawn for. */
.logos div { background: #fff; min-height: 96px; display: flex; align-items: center; justify-content: center; padding: 18px 20px; text-align: center; }
.sec-alt .logos div { background: #fff; }
.logos div:has(.ph) { background: var(--ground-alt); }
/* All artwork shares one canvas ratio, so a single width keeps the set even. */
.logos img { width: 100%; max-width: 168px; height: auto; display: block; }

.cases { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 860px) { .cases { grid-template-columns: repeat(3, 1fr); } }
.case { background: var(--ground); padding: 26px 24px; }
.sec-alt .case { background: var(--ground-alt); }
.case .m { font-family: var(--display); font-weight: 700; font-size: 38px; letter-spacing: -0.03em; color: var(--red); line-height: 1; }
.case .ml { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin: 6px 0 18px; }
.case h3 { font-size: 19px; margin-bottom: 10px; }
.case p { font-size: 15px; color: var(--ink-2); margin: 0 0 10px; }
.case .sector { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); letter-spacing: 0.1em; text-transform: uppercase; }

.team { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 700px) { .team { grid-template-columns: repeat(3, 1fr); } }
.member { background: var(--ground); padding: 26px 24px; }
.sec-alt .member { background: var(--ground-alt); }
.member .av { width: 56px; height: 56px; background: var(--red-tint); color: var(--red); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; overflow: hidden; }
.member .av img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Admin chrome ----------
   The public nav collapses behind a burger below 1000px, which the admin header
   does not have. The admin gets its own nav that wraps and stays visible. */
.adminhdr .wrap { height: auto; padding-top: 14px; padding-bottom: 12px; }
.adminnav { border-top: 1px solid var(--line); }
.adminnav .wrap { display: flex; flex-wrap: wrap; gap: 4px 22px; padding-top: 10px; padding-bottom: 10px; }
.adminnav a { text-decoration: none; font-size: 15px; color: var(--ink-2); padding: 6px 0; position: relative; }
.adminnav a:hover { color: var(--ink); }
.adminnav a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.adminnav a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--red); }
.member .av .mark { width: 28px; height: 28px; --m1: var(--red); --m2: var(--ink-3); }
.member h3 { font-size: 18px; }
.member .role { font-size: 14px; color: var(--red); margin: 4px 0 2px; }
.member .spec { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px; }
.member p { font-size: 14.5px; color: var(--ink-2); margin: 0; }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; padding: 20px 40px 20px 0; font-weight: 600; font-size: 17px;
  position: relative; list-style: none; font-family: var(--display); letter-spacing: -0.012em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 11px; height: 11px;
  margin-top: -5px; border-right: 2px solid var(--red); border-bottom: 2px solid var(--red);
  transform: rotate(45deg) translateY(-2px); transition: transform .2s;
}
.faq details[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.faq .a { padding: 0 0 20px; color: var(--ink-2); max-width: 68ch; }
.faq .a p:last-child { margin-bottom: 0; }

/* ---------- Form ---------- */
.formwrap { background: var(--ground); border: 1px solid var(--line); padding: 26px 22px; }
.sec-band .formwrap { background: var(--band); border-color: var(--band-line); }
@media (min-width: 768px) { .formwrap { padding: 34px 32px; } }
.field { margin-bottom: 18px; }
.field label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 7px; }
.sec-band .field label { color: var(--band-ink); }
.field .hint { font-weight: 400; color: var(--ink-3); font-size: 13px; }
.field input, .field textarea, .field select {
  width: 100%; font-family: var(--body); font-size: 16px; padding: 13px 14px;
  background: var(--ground); color: var(--ink); border: 1.5px solid var(--line);
  border-radius: 2px; min-height: 50px;
}
/* Native select chrome ignores the brand entirely and looks foreign on the dark
   bands, so the control is restyled and given our own chevron. The arrow is a
   mid neutral that holds up on both light and dark grounds. */
.field select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  padding-right: 42px; cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5L6 8.5L10 4.5' fill='none' stroke='%238B8781' stroke-width='1.8' stroke-linecap='square'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 15px center; background-size: 12px;
}
.field select:hover { border-color: var(--ink-3); }
.field select option { background: var(--ground); color: var(--ink); }
.sec-band .field select option { background: #131316; color: var(--band-ink); }
.field input[type="file"] { padding: 9px 12px; cursor: pointer; }
.field input[type="file"]::file-selector-button {
  font-family: var(--body); font-size: 14px; font-weight: 600; cursor: pointer;
  background: var(--red-solid); color: #fff; border: 0; border-radius: 2px;
  padding: 9px 15px; margin-right: 14px;
}
.field input[type="file"]::file-selector-button:hover { background: var(--red-solid-h); }
.field input[type="date"] { cursor: pointer; }
.sec-band .field input, .sec-band .field textarea, .sec-band .field select {
  background: #131316; color: var(--band-ink); border-color: var(--band-line);
}
.field input:focus, .field textarea:focus, .field select:focus { outline: 2px solid var(--red); outline-offset: 1px; border-color: transparent; }
.field textarea { min-height: 110px; resize: vertical; }
.field-row { display: grid; gap: 0; }
@media (min-width: 620px) { .field-row { grid-template-columns: 1fr 1fr; gap: 0 18px; } }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { font-size: 13px; color: var(--ink-3); margin: 14px 0 0; }
.sec-band .form-note { color: var(--band-ink-2); }
.form-msg { padding: 14px 16px; border-left: 3px solid var(--red); background: var(--red-tint); font-size: 15px; margin-bottom: 20px; }
.form-msg[hidden] { display: none; }
.form-msg.ok { border-color: #0A7D3E; background: rgba(10,125,62,.09); }
.formwrap .btn { width: 100%; }
@media (min-width: 620px) { .formwrap .btn { width: auto; } }

/* ---------- Contact blocks ---------- */
.contact-grid { display: grid; gap: 36px; }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 1.15fr 1fr; gap: 56px; align-items: start; } }
.cblock { border-top: 1px solid var(--line); padding: 20px 0; }
.sec-band .cblock { border-color: var(--band-line); }
.cblock h3 { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; margin-bottom: 10px; }
.sec-band .cblock h3 { color: var(--band-ink-2); }
.cblock a { text-decoration: none; display: block; font-size: 17px; padding: 3px 0; }
.cblock a:hover { color: var(--red); }
.cblock address { font-style: normal; color: var(--ink-2); }
.sec-band .cblock address { color: var(--band-ink-2); }

/* ---------- CTA band ---------- */
.cta { background: var(--red-solid); color: #fff; padding: 52px 0; }
.cta h2 { color: #fff; max-width: 20ch; }
.cta p { color: rgba(255,255,255,.88); max-width: 56ch; margin: 16px 0 26px; }
.cta .btn-white { background: #fff; color: var(--red-solid); }
.cta .btn-white:hover { background: #f0eeea; }
.cta .btn-clear { border-color: rgba(255,255,255,.5); color: #fff; }
.cta .btn-clear:hover { border-color: #fff; }
@media (min-width: 768px) { .cta { padding: 72px 0; } }

/* ---------- Footer ---------- */
.ftr { background: var(--band); color: var(--band-ink-2); padding: 52px 0 100px; font-size: 15px; }
@media (min-width: 900px) { .ftr { padding-bottom: 32px; } }
.ftr-grid { display: grid; gap: 32px; margin-bottom: 40px; }
@media (min-width: 700px) { .ftr-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .ftr-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; } }
.ftr h3 { font-family: var(--mono); font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: #fff; font-weight: 500; margin-bottom: 14px; }
.ftr a { color: var(--band-ink-2); text-decoration: none; display: block; padding: 4px 0; }
.ftr a:hover { color: #fff; }
.ftr address { font-style: normal; line-height: 1.7; }
.ftr .brand .wm { color: #fff; }
.ftr .brand .wm small { color: var(--red-band); }
.ftr .brand .mark { --m1: var(--red-band); --m2: #fff; }
.ftr .brand { margin-bottom: 16px; }
.ftr .legal { border-top: 1px solid var(--band-line); padding-top: 22px; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; font-size: 13px; }
.ftr .legal a { display: inline; }

/* ---------- Mobile action bar ---------- */
.mbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 120; display: grid;
  grid-template-columns: 1fr 1fr; background: var(--ground);
  border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom);
}
.mbar a {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px;
  text-decoration: none; font-weight: 600; font-size: 15.5px;
}
.mbar a.primary { background: var(--red-solid); color: #fff; }
/* Matches the header breakpoint: above it the header CTA is visible, so the
   fixed bar would be a duplicate. */
@media (min-width: 900px) { .mbar { display: none; } }

/* ---------- Placeholder ---------- */
.ph {
  display: inline-block; background: repeating-linear-gradient(45deg, var(--red-tint), var(--red-tint) 8px, transparent 8px, transparent 16px);
  border: 1px dashed var(--red); color: var(--red); font-family: var(--mono);
  font-size: 12.5px; padding: 2px 8px; letter-spacing: 0; line-height: 1.5; font-weight: 500;
}

/* ---------- Reveal ----------
   Gated on .js, set by an inline script in the head. Without it, a slow or
   failed script left every revealed block permanently invisible. */
.js .rv { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.js .rv.in { opacity: 1; transform: none; }
/* Content already on screen at first paint is shown outright. Fading it in
   meant the top of every page arrived blank and animated, which read as the
   page loading badly rather than as polish. */
.js .rv.now { opacity: 1; transform: none; transition: none; }
@media (prefers-reduced-motion: reduce) {
  .js .rv { opacity: 1; transform: none; transition: none; }
}

/* ---------- Jobs ---------- */
.joblist { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 700px) { .joblist { grid-template-columns: 1fr 1fr; } }
.jobcard {
  background: var(--ground); padding: 24px 22px; text-decoration: none;
  display: flex; flex-direction: column; gap: 10px; transition: background .15s;
}
.sec-alt .jobcard { background: var(--ground-alt); }
.jobcard:hover { background: var(--red-tint); }
.jobcard h3 { font-size: 20px; }
.jobcard p { margin: 0; font-size: 15px; color: var(--ink-2); flex: 1; }
.jobcard .go { color: var(--red); font-weight: 600; font-size: 14.5px;
               display: inline-flex; align-items: center; gap: 7px; }
.jobcard .go .chev { width: 10px; height: 10px; transition: transform .16s; }
.jobcard:hover .go .chev { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .jobcard:hover .go .chev { transform: none; } }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 10px; border: 1px solid var(--line); color: var(--ink-3); border-radius: 2px;
}
.chip.on { border-color: var(--red); color: var(--red); }
.sec-band .chip { border-color: var(--band-line); color: var(--band-ink-2); }

.checklist { list-style: none; padding: 0; margin: 0; }
.checklist li { position: relative; padding: 10px 0 10px 26px; border-bottom: 1px solid var(--line);
                font-size: 15.5px; color: var(--ink-2); }
.checklist li::before {
  content: ""; position: absolute; left: 0; top: 18px; width: 9px; height: 9px;
  background: var(--red); clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.twocol { display: grid; gap: 40px; }
@media (min-width: 860px) { .twocol { grid-template-columns: 1fr 1fr; gap: 56px; } }

.notice {
  border-left: 3px solid var(--red); background: var(--red-tint);
  padding: 16px 18px; font-size: 15px; color: var(--ink-2); margin: 0 0 28px;
}
.notice b { color: var(--ink); }

/* ---------- Insights ---------- */
.postlist { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 860px) { .postlist { grid-template-columns: repeat(3, 1fr); } }
.postcard { background: var(--ground); padding: 26px 24px; text-decoration: none;
            display: flex; flex-direction: column; gap: 11px; transition: background .15s; }
.postcard:hover { background: var(--ground-alt); }
.postcard .kicker { font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
                    text-transform: uppercase; color: var(--red); }
.postcard h3 { font-size: 20px; }
.postcard p { margin: 0; font-size: 15px; color: var(--ink-2); flex: 1; }
.postcard time { font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

.post { max-width: 68ch; }
.post h2 { font-size: clamp(23px, 2.8vw, 30px); margin: 1.8em 0 .5em; }
.post h3 { margin: 1.6em 0 .4em; }
.post p, .post li { color: var(--ink-2); }
.post ul, .post ol { padding-left: 22px; margin: 0 0 1.1em; }
.post li { margin-bottom: .45em; }
.post blockquote {
  margin: 1.6em 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--red);
  font-family: var(--display); font-size: 20px; line-height: 1.4; color: var(--ink);
  letter-spacing: -.012em;
}
.post blockquote p { margin: 0 0 .5em; }
.post blockquote p:last-child { margin-bottom: 0; }
/* Second paragraph of a pull quote is the attribution. */
.post blockquote p + p { font-family: var(--body); font-size: .62em; line-height: 1.5; color: var(--ink-3); letter-spacing: 0; margin-top: .7em; }
.post a { color: var(--red); text-underline-offset: 3px; }
.post code { font-family: var(--mono); font-size: .9em; background: var(--ground-alt);
             padding: 2px 6px; border-radius: 2px; }
.post hr { border: 0; border-top: 1px solid var(--line); margin: 2.4em 0; }
.byline { font-size: 14px; color: var(--ink-3); margin-top: 18px; }
.byline time { font-variant-numeric: tabular-nums; }

.post .tablewrap { overflow-x: auto; margin: 0 0 1.5em; }
.post table { border-collapse: collapse; width: 100%; font-size: 15.5px; }
.post th, .post td { text-align: left; padding: 12px 18px 12px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.post th { font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; }
.post td:first-child { color: var(--ink); width: 38%; }
.post td { color: var(--ink-2); }

.draft-flag { border-left: 3px solid var(--red); background: var(--red-tint); padding: 16px 18px; margin: 0 0 26px; font-size: 15px; color: var(--ink-2); }
.draft-flag b { color: var(--ink); }