/* ============================================================
   Paradigm Shift — paradigmshift.net

   Type and colour descend from the original Squarespace site:
   Source Sans Pro 700 uppercase for display, Roboto 300 for body,
   Dosis for buttons, #111 ground with white content panels.
   The accent is sampled from the hero image's network mesh.
   ============================================================ */

/* ---------- fonts (self-hosted; no third-party requests) ---------- */

@font-face {
  font-family: 'Source Sans Pro'; font-style: normal; font-weight: 600;
  font-display: swap; src: url('/assets/fonts/sourcesanspro-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Sans Pro'; font-style: normal; font-weight: 700;
  font-display: swap; src: url('/assets/fonts/sourcesanspro-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Roboto'; font-style: normal; font-weight: 300 500;
  font-display: swap; src: url('/assets/fonts/roboto-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Dosis'; font-style: normal; font-weight: 400 600;
  font-display: swap; src: url('/assets/fonts/dosis-var.woff2') format('woff2');
}

/* ---------- tokens ---------- */

:root {
  --ground:    #0b0d12;
  --ground-2:  #12151d;
  --panel:     #fff;
  --ink:       #14171d;
  --muted:     #5a6070;
  --muted-dim: #8a90a0;
  --rule:      #e4e7ec;
  --accent:    #5fb0e5;
  --accent-ink:#1d6ea3;

  --panel-w:       880px;
  --panel-w-wide:  1180px;
  --head-h:        84px;

  --display: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
  --body:    'Roboto', 'Helvetica Neue', Arial, sans-serif;
  --button:  'Dosis', 'Helvetica Neue', Arial, sans-serif;

  --pad:     clamp(1.25rem, 4vw, 2.75rem);
  --section: clamp(3.5rem, 9vw, 7.5rem);
  --ease:    cubic-bezier(.22, .61, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: var(--head-h); }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--body);
  font-weight: 300;
  font-size: clamp(1rem, .97rem + .15vw, 1.075rem);
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent-ink); text-underline-offset: 3px; }

::selection { background: var(--accent); color: #06080c; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--accent); color: #06080c; padding: .8rem 1.15rem; font-weight: 600;
}
.skip:focus { left: 0; }

.center { text-align: center; }

/* ---------- motion ---------- */

.reveal { opacity: 0; transform: translateY(18px); }
.reveal.in { opacity: 1; transform: none; transition: opacity .7s var(--ease), transform .7s var(--ease); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}
/* Never leave content hidden if JS doesn't run. */
.no-js .reveal { opacity: 1; transform: none; }

/* ---------- header ---------- */

.site-head {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  height: var(--head-h);
  transition: background .3s var(--ease), box-shadow .3s var(--ease), height .3s var(--ease);
}
.site-head.is-stuck {
  background: rgba(11, 13, 18, .92);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(255,255,255,.07);
  height: 68px;
}
.head-inner {
  height: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 0 var(--pad);
}
.brand img { width: clamp(120px, 11vw, 150px); height: auto; transition: width .3s var(--ease); }

.main-nav { display: flex; align-items: center; gap: clamp(1.1rem, 2.2vw, 2rem); }
.main-nav a {
  font-family: var(--display); font-weight: 600; font-size: 12px;
  text-transform: uppercase; letter-spacing: .18em; text-decoration: none;
  color: #fff; opacity: .82; transition: opacity .15s, color .15s;
  position: relative; padding: .35rem 0;
}
.main-nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform .25s var(--ease);
}
.main-nav a:hover { opacity: 1; }
.main-nav a:hover::after, .main-nav a.is-active::after { transform: scaleX(1); }
.main-nav .nav-cta {
  border: 1px solid rgba(255,255,255,.35); border-radius: 999px;
  padding: .5rem 1.15rem; opacity: 1;
}
.main-nav .nav-cta::after { display: none; }
.main-nav .nav-cta:hover { border-color: var(--accent); color: var(--accent); }

/* interior pages sit on white */
.page-light .main-nav a { color: var(--ink); }
.page-light .main-nav .nav-cta { border-color: rgba(0,0,0,.22); }
.page-light .site-head.is-stuck { background: rgba(255,255,255,.94); box-shadow: 0 1px 0 var(--rule); }

.nav-toggle {
  display: none; background: none; border: 0; cursor: pointer;
  width: 44px; height: 44px; padding: 11px; margin-right: -11px;
}
.nav-toggle span { display: block; height: 2px; background: #fff; margin: 4px 0; transition: transform .25s var(--ease), opacity .2s; }
.page-light .nav-toggle span { background: var(--ink); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 860px) {
  .nav-toggle { display: block; }
  .main-nav {
    position: fixed; inset: var(--head-h) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0; display: none;
    background: rgba(11,13,18,.98); backdrop-filter: blur(12px);
    padding: .5rem var(--pad) 1.5rem; max-height: calc(100vh - var(--head-h)); overflow-y: auto;
  }
  .main-nav.open { display: flex; }
  .main-nav a, .page-light .main-nav a { color: #fff; padding: 1rem 0; border-bottom: 1px solid rgba(255,255,255,.1); }
  .main-nav a::after { display: none; }
  .main-nav .nav-cta { border: 1px solid rgba(255,255,255,.35); text-align: center; margin-top: 1.25rem; }
}

/* ---------- dot nav ---------- */

.dot-nav {
  position: fixed; right: 20px; top: 50%; transform: translateY(-50%);
  z-index: 150; display: grid; gap: 16px;
}
.dot-nav a { position: relative; display: block; text-decoration: none; padding: 3px; }
.dot-nav .dot {
  display: block; width: 8px; height: 8px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.7); background: transparent;
  transition: background .2s, border-color .2s, transform .2s;
}
.dot-nav a:hover .dot { transform: scale(1.35); }
.dot-nav a.is-active .dot { background: var(--accent); border-color: var(--accent); }
.dot-nav .dot-label {
  position: absolute; right: calc(100% + 12px); top: 50%;
  font-family: var(--display); font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .16em; color: #fff;
  opacity: 0; transform: translateY(-50%) translateX(6px);
  transition: opacity .2s var(--ease), transform .2s var(--ease);
  white-space: nowrap; pointer-events: none;
  text-shadow: 0 1px 10px rgba(0,0,0,.6);
}
.dot-nav a:hover .dot-label { opacity: 1; transform: translateY(-50%) translateX(0); }
/* On white sections the dots need to invert to stay visible. */
.dot-nav.on-light .dot { border-color: rgba(0,0,0,.45); }
.dot-nav.on-light a.is-active .dot { background: var(--accent-ink); border-color: var(--accent-ink); }
.dot-nav.on-light .dot-label { color: var(--ink); text-shadow: none; }
@media (max-width: 1100px) { .dot-nav { display: none; } }

/* ---------- banners ---------- */

.banner {
  position: relative; overflow: hidden;
  min-height: 100vh; min-height: 100svh;
  display: flex; align-items: center; justify-content: center;
  background: #0d1119;
  text-align: center;
  padding: calc(var(--head-h) + 2rem) var(--pad) 5rem;
}
/* Only the hero earns a full viewport. The others sit above content that people
   jump straight to from the nav, and at 100vh the anchor landed on the banner
   with the section's actual content entirely below the fold. */
.banner:not(.banner--hero) {
  min-height: clamp(240px, 42vh, 420px);
  /* The generous top padding exists to clear the fixed header on the hero. On
     a mid-page banner you have already scrolled past it, so it is just dead
     space that pushed the section's content below the fold. */
  padding-top: clamp(2.5rem, 6vh, 4rem);
  padding-bottom: clamp(2.5rem, 6vh, 4rem);
}

.banner-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
  will-change: transform;
}
.banner::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 45%, rgba(6,8,12,.24), rgba(6,8,12,.62)),
    linear-gradient(180deg, rgba(6,8,12,.55), rgba(6,8,12,.18) 32%, rgba(6,8,12,.72));
}
/* The technology banner's photo is a subject on a near-white studio backdrop.
   A flat dark wash over it just reads muddy, so grade the image itself —
   desaturated and dropped in brightness — and keep the same gradient scrim as
   the other banners. Deliberate rather than veiled, and the white display type
   clears contrast comfortably. */
.banner--light-photo .banner-img {
  filter: grayscale(.7) brightness(.42) contrast(1.25);
}

.banner-inner { position: relative; z-index: 2; max-width: 900px; }

.eyebrow {
  margin: 0 0 1.4rem; color: var(--accent);
  font-family: var(--display); font-size: clamp(.66rem, .6rem + .2vw, .76rem);
  font-weight: 600; letter-spacing: .28em; text-transform: uppercase;
}

.banner-title {
  margin: 0;
  font-family: var(--display); font-weight: 700;
  text-transform: uppercase; color: #fff;
  line-height: 1.02; letter-spacing: .1em;
  font-size: clamp(1.9rem, 1.15rem + 3.4vw, 3.6rem);
  text-shadow: 0 2px 40px rgba(0,0,0,.4);
}
.hero-title {
  font-size: clamp(2.4rem, 1.1rem + 6.4vw, 6.4rem);
  letter-spacing: .06em;
}

.hero-sub {
  margin: 1.6rem auto 0; max-width: 46ch;
  color: rgba(255,255,255,.9);
  font-size: clamp(1.02rem, .95rem + .5vw, 1.32rem);
  text-shadow: 0 1px 20px rgba(0,0,0,.5);
}

.cta-row { margin-top: 2.4rem; display: flex; flex-wrap: wrap; gap: .85rem; justify-content: center; }

.scroll-arrow {
  position: absolute; z-index: 2; bottom: 2.2rem; left: 50%; transform: translateX(-50%);
  text-decoration: none; color: #fff; display: grid; gap: .5rem; justify-items: center;
}
.scroll-arrow span {
  font-family: var(--display); font-size: 10px; font-weight: 600;
  letter-spacing: .28em; text-transform: uppercase; opacity: .75;
}
.scroll-arrow::after {
  content: ''; width: 11px; height: 11px;
  border-right: 1.5px solid #fff; border-bottom: 1.5px solid #fff;
  transform: rotate(45deg); opacity: .75;
  animation: nudge 2.4s var(--ease) infinite;
}
@keyframes nudge {
  0%, 100% { transform: rotate(45deg) translate(0,0); opacity: .75; }
  50%      { transform: rotate(45deg) translate(4px,4px); opacity: 1; }
}

/* ---------- content panels ---------- */

.content { background: var(--ground); }
.content-inner {
  background: var(--panel);
  max-width: var(--panel-w);
  margin: 0 auto;
  padding: var(--section) clamp(1.5rem, 6vw, 5rem);
}
.content-inner--wide { max-width: var(--panel-w-wide); }

/* Consecutive white panels butt together and read as one continuous sheet, so
   their stacked padding doubles. Trim the top and mark the join with a rule
   rather than an accidental gulf of whitespace. */
.content-inner--joined {
  padding-top: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--rule);
}

.section-kicker {
  margin: 0 0 1rem; color: var(--accent-ink);
  font-family: var(--display); font-size: .72rem; font-weight: 600;
  letter-spacing: .24em; text-transform: uppercase;
}
.section-title {
  margin: 0 0 2.75rem;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.5rem, 1.2rem + 1.6vw, 2.35rem);
  text-transform: uppercase; letter-spacing: .06em; line-height: 1.15;
}
.lead {
  font-size: clamp(1.12rem, 1rem + .8vw, 1.5rem);
  line-height: 1.6; color: var(--ink); margin: 0 0 1.5rem; font-weight: 300;
}
.content-inner p:last-child { margin-bottom: 0; }
.content-inner p { margin: 0 0 1.35em; color: var(--muted); }
.content-inner .lead { color: var(--ink); }

/* ---------- AI band ---------- */

/* A dark, type-led statement between two white panels. Deliberately carries no
   photograph: the rest of the page is stock imagery, and there is no honest
   stock photo of "AI" — the abstract ones are cliché and the literal ones are
   robots. Type on black says more, and breaks up the run of white panels. */

.ai-band {
  position: relative;
  background:
    radial-gradient(90% 120% at 18% 0%, rgba(95,176,229,.14), transparent 60%),
    linear-gradient(180deg, #0e1219, #0b0d12);
  padding: clamp(3.5rem, 9vw, 7rem) var(--pad);
  border-top: 1px solid rgba(255,255,255,.07);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.ai-inner { max-width: var(--panel-w-wide); margin: 0 auto; }

.ai-kicker { color: var(--accent); }

.ai-title {
  margin: 0 0 1.5rem; max-width: 18ch;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.8rem, 1.25rem + 2.6vw, 3.2rem);
  line-height: 1.08; letter-spacing: .04em;
  text-transform: uppercase; color: #fff;
}
.ai-lead {
  margin: 0 0 clamp(2.5rem, 5vw, 4rem); max-width: 60ch;
  color: rgba(255,255,255,.78);
  font-size: clamp(1.05rem, .98rem + .55vw, 1.32rem);
  font-weight: 300; line-height: 1.62;
}

.ai-cols {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(1.75rem, 3.5vw, 3rem);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 780px) { .ai-cols { grid-template-columns: 1fr; } }

.ai-cols li { border-top: 1px solid rgba(255,255,255,.18); padding-top: 1.15rem; }
.ai-cols h3 {
  margin: 0 0 .55rem;
  font-family: var(--display); font-weight: 700; font-size: .95rem;
  text-transform: uppercase; letter-spacing: .16em; color: var(--accent);
}
.ai-cols p { margin: 0; color: rgba(255,255,255,.7); font-size: .97rem; line-height: 1.72; }

/* ---------- capabilities ---------- */

.cap-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(1.75rem, 3.5vw, 3rem);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 900px) { .cap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .cap-grid { grid-template-columns: 1fr; } }

.cap-media { overflow: hidden; background: #eef0f3; aspect-ratio: 3 / 2; }
.cap-media img {
  width: 100%; height: 100%; object-fit: cover;
  /* The nine stock photos come from wildly different sources. Desaturating
     them to a common cast makes the grid read as one set; colour returns on
     hover so the imagery still has some life. */
  filter: grayscale(1) contrast(1.06) brightness(.96);
  transition: filter .45s var(--ease), transform .6s var(--ease);
}
.cap:hover .cap-media img { filter: none; transform: scale(1.04); }

.cap h3 {
  margin: 1.15rem 0 .5rem;
  font-family: var(--display); font-weight: 700; font-size: .95rem;
  text-transform: uppercase; letter-spacing: .14em;
}
.cap p { margin: 0; font-size: .96rem; color: var(--muted); line-height: 1.7; }

/* ---------- approach ---------- */

.steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(1.75rem, 3.5vw, 3rem);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  counter-reset: step;
}
@media (max-width: 780px) { .steps { grid-template-columns: 1fr; } }

.step { border-top: 2px solid var(--ink); padding-top: 1.25rem; }
.step-num {
  display: block; margin-bottom: .6rem;
  font-family: var(--display); font-weight: 700; font-size: .8rem;
  letter-spacing: .2em; color: var(--accent-ink); font-variant-numeric: tabular-nums;
}
.step h3 {
  margin: 0 0 .5rem;
  font-family: var(--display); font-weight: 700; font-size: 1.05rem;
  text-transform: uppercase; letter-spacing: .12em;
}
.step p { margin: 0; color: var(--muted); font-size: .97rem; }

/* ---------- clients ---------- */

.client-grid {
  list-style: none; margin: 0 0 3rem; padding: 0;
  display: grid; gap: clamp(1.5rem, 4vw, 3.5rem);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
}
@media (max-width: 620px) { .client-grid { grid-template-columns: 1fr; } }
.client-grid img {
  margin: 0 auto; max-height: 150px; width: auto; object-fit: contain;
  /* Greyscale so three very different logos sit together as a set; they still
     need to be legible, so keep them close to full strength. */
  filter: grayscale(1); opacity: .88;
  transition: filter .35s var(--ease), opacity .35s var(--ease);
}
.client-grid li:hover img { filter: none; opacity: 1; }

/* ---------- buttons ---------- */

.btn {
  display: inline-block; cursor: pointer;
  font-family: var(--button); font-weight: 600; font-size: 14px;
  text-transform: uppercase; letter-spacing: .22em; text-decoration: none;
  padding: 16px 32px; border: 1px solid transparent;
  transition: background .2s var(--ease), color .2s var(--ease),
              border-color .2s var(--ease), transform .2s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn-light   { background: #fff; color: #0b0d12; border-color: #fff; }
.btn-light:hover { background: var(--accent); border-color: var(--accent); color: #06080c; }
.btn-outline { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.btn-outline:hover { border-color: #fff; background: rgba(255,255,255,.1); }
.btn-dark, button.btn { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn-dark:hover, button.btn:hover { background: var(--accent-ink); border-color: var(--accent-ink); }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }

/* ---------- forms ---------- */

.contact-form { margin-top: 2.25rem; max-width: 640px; }
.field-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.25rem;
  align-items: start;
}
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }

/* Flex column rather than grid: grid items stretch along the block axis, which
   let the two halves of .field-row resolve to different heights and made the
   Last Name label and input 12px taller than First Name. In a flex column the
   label and input are sized by their content, so the pair always matches. */
.field {
  margin: 0 0 1.4rem;
  display: flex; flex-direction: column; align-items: stretch;
  gap: .45rem;
}
.field label { line-height: 1.35; }
.field label {
  font-family: var(--display); font-size: .7rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .18em; color: var(--muted);
}
.field input, .field textarea {
  font: inherit; color: var(--ink);
  border: 1px solid var(--rule); background: #fafbfc;
  padding: .8rem .95rem; width: 100%; border-radius: 0;
  transition: border-color .18s, background .18s, box-shadow .18s;
}
.field input:focus, .field textarea:focus {
  border-color: var(--accent-ink); background: #fff;
  box-shadow: 0 0 0 3px rgba(95,176,229,.18); outline: none;
}
.field textarea { resize: vertical; min-height: 150px; }

/* Honeypot: out of sight and out of the tab order, without display:none —
   which the better bots know to skip. */
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.form-status { margin: 0 0 1.5rem; padding: .9rem 1.15rem; border-left: 3px solid; font-size: .95rem; }
.form-status.is-ok    { border-color: #1c7c4a; background: #f1f8f3; color: #14603a; }
.form-status.is-error { border-color: #b3261e; background: #fdf3f2; color: #8c1d18; }

.cf-turnstile { margin: 0 0 1.5rem; }

/* ---------- interior pages ---------- */

.page-light { background: var(--panel); }
.page-head {
  padding: calc(var(--head-h) + clamp(3rem, 8vw, 6rem)) var(--pad) clamp(1.5rem, 4vw, 2.5rem);
  text-align: center; background: var(--panel);
}
.page-head h1 {
  margin: 0 0 1rem;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.8rem, 1.2rem + 2.6vw, 3.1rem);
  text-transform: uppercase; letter-spacing: .1em; color: var(--ink);
}
.page-head .page-sub { margin: 0 auto; max-width: 52ch; color: var(--muted); font-size: 1.08rem; }
.page-body { background: var(--panel); }
.page-body .content-inner { padding-top: clamp(2rem, 5vw, 3.5rem); }

.work-hero { margin-bottom: clamp(2.5rem, 6vw, 4rem); }

/* ---------- footer ---------- */

.site-foot { background: var(--ground); color: var(--muted-dim); font-size: .9rem; }
.foot-inner {
  max-width: var(--panel-w-wide); margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 4rem) var(--pad) 2rem;
  display: flex; flex-wrap: wrap; gap: 2rem 3rem; justify-content: space-between;
}
.foot-brand img { filter: brightness(1.6); margin-bottom: .9rem; }
.foot-brand p { margin: 0; max-width: 34ch; }
.foot-nav { display: flex; flex-wrap: wrap; gap: .6rem 1.75rem; align-content: start; }
.foot-nav a {
  color: #fff; opacity: .78; text-decoration: none;
  font-family: var(--display); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .18em;
}
.foot-nav a:hover { opacity: 1; color: var(--accent); }
.foot-bottom {
  max-width: var(--panel-w-wide); margin: 0 auto;
  padding: 1.5rem var(--pad) 2.5rem;
  border-top: 1px solid rgba(255,255,255,.09);
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between;
  font-size: .82rem;
}
.foot-bottom p { margin: 0; }
.foot-bottom a { color: inherit; text-decoration: none; }
.foot-bottom a:hover { color: #fff; }

/* ---------- 404 ---------- */

.center-page {
  min-height: 70vh; display: grid; place-content: center; text-align: center;
  gap: 1.25rem; padding: calc(var(--head-h) + 4rem) var(--pad) 5rem; background: var(--panel);
}

/* ---------- print ---------- */

@media print {
  .site-head, .dot-nav, .scroll-arrow, .cf-turnstile, .contact-form, .site-foot { display: none !important; }
  .banner { min-height: auto; padding: 2rem 0; }
  .banner-img, .banner::after { display: none; }
  .banner-title, .hero-sub, .eyebrow { color: #000 !important; text-shadow: none !important; }
  body, .content, .content-inner { background: #fff !important; color: #000 !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* The logo artwork is light, drawn for the dark index. Interior pages sit on
   white, so render the same file in black rather than shipping a second asset.
   (The footer keeps the light version — it sits on the dark ground.) */
.page-light .brand img { filter: brightness(0); }