/* ==========================================================================
   Beauld Communications — main.css

   Hand-written, no framework, no build step. Organised as:
     1. Reset & base          6. Header & footer
     2. Layout primitives     7. Home page
     3. Typography            8. Service & inner pages
     4. Buttons & links       9. Forms
     5. Reveal on scroll     10. Utilities & print

   The brand is three colours. Red is an accent and never a background for
   long-form text; black does the heavy lifting.
   ========================================================================== */

/* ==========================================================================
   1. Reset & base
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Anchored sections must clear the sticky header. */
  scroll-padding-top: calc(var(--header-h) + 1.5rem);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }

button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl { margin: 0; }
ul, ol { padding: 0; list-style: none; }

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: var(--s-7) 0;
}

::selection { background: var(--red); color: #fff; }

/* One focus treatment everywhere. Blue, not brand red, so it never reads as
   an intentional highlight. */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
:focus:not(:focus-visible) { outline: none; }

.skip-link {
  position: absolute;
  left: var(--s-4);
  top: -100px;
  z-index: 200;
  padding: var(--s-3) var(--s-5);
  background: var(--ink);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--r-md);
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: var(--s-4); }

.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;
}


/* ==========================================================================
   2. Layout primitives
   ========================================================================== */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: var(--wrap-narrow); }

.band     { padding-block: var(--band); }
.band--tight { padding-block: var(--band-tight); }
.band--flush-top { padding-top: 0; }

/* The dark band. Everything inside flips to the on-ink palette. */
.band--ink {
  background: var(--ink);
  color: var(--on-ink-soft);
}
.band--ink h1, .band--ink h2, .band--ink h3, .band--ink h4,
.band--ink .stat__num, .band--ink .lede { color: var(--on-ink); }
.band--ink .eyebrow { color: var(--red); }
.band--ink a { color: var(--on-ink); }

/* ...but not a button. `.band--ink a` outranks `.btn`, which was quietly
   painting every btn--light white-on-white on the black bands. A button
   always keeps the foreground its own variant sets. */
.band--ink .btn { color: var(--btn-fg); }

.band--warm { background: var(--paper-warm); }

/* Section head: eyebrow, title, optional lede — used by nearly every band. */
.sec-head { max-width: 62ch; margin-bottom: var(--s-7); }
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-head--wide { max-width: 78ch; }

/* Head with the title left and a link/CTA right, collapsing on small screens */
.sec-head--split {
  max-width: none;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-5);
}
.sec-head--split > div { max-width: 62ch; }

.grid { display: grid; gap: var(--s-5); }

/* Cards reach the grid two ways: wrapped in a [data-reveal] div (the home and
   index grids) or carrying data-reveal themselves (the service pages). Only
   the wrapper case needs the flex treatment — applying it to a card would lay
   that card's own children out in a row. */
.grid > [data-reveal]:not(.svc-card):not(.feature):not(.pkg) { display: flex; }
.grid > [data-reveal]:not(.svc-card):not(.feature):not(.pkg) > * { width: 100%; }

/* Either way, the card fills its grid row so cards in a row end level. */
.grid > .svc-card, .grid > .feature, .grid > .pkg,
.grid > [data-reveal] > .svc-card,
.grid > [data-reveal] > .feature,
.grid > [data-reveal] > .pkg { height: 100%; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1040px) {
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
}

/* Asymmetric split used for about/founder/product rows. */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: center;
}
.split--media-first .split__media { order: -1; }
.split--top { align-items: start; }
@media (max-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr); }
  .split--media-first .split__media { order: 0; }
}


/* ==========================================================================
   3. Typography
   ========================================================================== */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: var(--track-display);
  text-wrap: balance;
}

h1 { font-size: var(--t-4xl); line-height: var(--lh-tight); }
h2 { font-size: var(--t-3xl); }
h3 { font-size: var(--t-xl); letter-spacing: -0.018em; }
h4 { font-size: var(--t-lg); letter-spacing: -0.012em; }

p { text-wrap: pretty; }
p + p { margin-top: var(--s-4); }

.eyebrow {
  display: block;
  margin-bottom: var(--s-3);
  font-family: var(--font-body);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--red-dark);
}
.eyebrow--muted { color: var(--slate); }

/* Every eyebrow on the site is led by the emblem. It is the one brand mark
   that repeats often enough to become a rhythm rather than a logo drop, and
   the mask keeps it inheriting whatever colour the eyebrow is set in. */
.eyebrow--rule {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.eyebrow--rule::before {
  content: "";
  width: 15px;
  height: 15px;
  flex: none;
  background: currentColor;
  -webkit-mask: url("../img/logo-mark.svg") center / contain no-repeat;
          mask: url("../img/logo-mark.svg") center / contain no-repeat;
}
/* No mask support: fall back to the rule the site used before. */
@supports not ((-webkit-mask: url("")) or (mask: url(""))) {
  .eyebrow--rule::before {
    width: 28px; height: 2px;
    background: var(--red);
  }
}
.sec-head--center .eyebrow--rule { justify-content: center; }

/* On the black grounds the brand red measures 4.4:1 against #0A0A0A — fine
   for a heading, not for 12px uppercase with open tracking, which is what an
   eyebrow is. Gold clears AA at 13.8:1 and reads as deliberate rather than
   as a red that did not quite make it. The emblem goes with the text: the
   two are one unit at this size, and splitting them into two colours reads
   as a rendering fault. */
.hero .eyebrow,
.page-head .eyebrow,
.band--ink .eyebrow,
.site-footer .eyebrow { color: var(--gold); }

/* The CTA band is red, where gold would be shouting. It sets its own white. */
.cta .eyebrow { color: rgba(255, 255, 255, 0.85); }

/* Same reasoning for the other small red text that lands on black. */
.band--ink .svc-card__num { color: var(--gold); }

.lede {
  margin-top: var(--s-4);
  font-size: var(--t-lg);
  line-height: 1.55;
  color: var(--slate);
  max-width: var(--measure);
}
.band--ink .lede { color: var(--on-ink-soft); }
.sec-head--center .lede { margin-inline: auto; }

.prose { max-width: var(--measure); }
.prose p + p,
.prose h2, .prose h3 { margin-top: var(--s-5); }
.prose h2 + p, .prose h3 + p { margin-top: var(--s-3); }
.prose ul { margin-top: var(--s-4); }
.prose li {
  position: relative;
  padding-left: var(--s-5);
  margin-bottom: var(--s-3);
}
.prose li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--red);
}

/* Marks a single word or phrase inside a display heading. */
.accent { color: var(--red); }

/* Text that should sit on the display face outside a heading. */
.display { font-family: var(--font-display); letter-spacing: var(--track-display); }

.meta {
  font-size: var(--t-sm);
  color: var(--slate);
  letter-spacing: 0.01em;
}
.band--ink .meta { color: var(--on-ink-dim); }


/* ==========================================================================
   4. Buttons & links
   ========================================================================== */

a { color: var(--red-dark); text-underline-offset: 0.18em; }
a:hover { color: var(--red); }

.btn {
  --btn-bg: var(--ink);
  --btn-fg: #fff;
  --btn-bd: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  padding: 0.95em 1.9em;
  min-height: 48px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1.5px solid var(--btn-bd);
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur) var(--ease),
              color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.btn:hover {
  transform: translateY(-2px);
  color: var(--btn-fg);
}
.btn:active { transform: translateY(0); }

.btn--red   { --btn-bg: var(--red); --btn-bd: var(--red); }
.btn--red:hover { --btn-bg: var(--red-deep); --btn-bd: var(--red-deep); }

.btn--dark:hover { --btn-bg: var(--red); --btn-bd: var(--red); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-bd: var(--line-strong);
}
.btn--ghost:hover { --btn-bg: var(--ink); --btn-fg: #fff; --btn-bd: var(--ink); }

/* On black */
.btn--light { --btn-bg: #fff; --btn-fg: var(--ink); --btn-bd: #fff; }
.btn--light:hover { --btn-bg: var(--red); --btn-fg: #fff; --btn-bd: var(--red); }

.btn--ghost-light {
  --btn-bg: transparent;
  --btn-fg: #fff;
  --btn-bd: var(--line-on-ink);
}
.btn--ghost-light:hover { --btn-bg: #fff; --btn-fg: var(--ink); --btn-bd: #fff; }

.btn--sm { padding: 0.7em 1.4em; min-height: 40px; font-size: 0.875rem; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  margin-top: var(--s-6);
}
.btn-row--center { justify-content: center; }

/* Text link with a moving arrow — used for "read more" affordances. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  color: var(--ink);
}
.link-arrow svg { width: 16px; height: 16px; transition: transform var(--dur) var(--ease); }
.link-arrow:hover { color: var(--red); }
.link-arrow:hover svg { transform: translateX(5px); }
.band--ink .link-arrow { color: #fff; }
.band--ink .link-arrow:hover { color: var(--red); }


/* ==========================================================================
   5. Reveal on scroll
   ========================================================================== */
/* Scoped to .js so nothing is ever left invisible if the script fails. */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; }
}


/* ==========================================================================
   6. Header & footer
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease),
              background var(--dur) var(--ease);
}
.site-header.is-stuck {
  border-bottom-color: var(--line);
  background: rgba(255, 255, 255, 0.95);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  height: var(--header-h);
}

/* --- Brand lockup ----------------------------------------------------
   The real logo, drawn from the traced artwork in logo.js: wordmark,
   hairline rule, emblem, at the proportions the artwork sets. Height is the
   only thing set here — the width follows from the viewBox, so the lockup
   can never be stretched out of shape. */

.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--ink);
  flex: none;
}
.brand__logo {
  display: block;
  height: 38px;
  width: auto;
  transition: opacity var(--dur) var(--ease);
}
.brand:hover .brand__logo { opacity: 0.78; }
@media (max-width: 900px) { .brand__logo { height: 32px; } }

/* The footer sets the lockup larger and gives it room to breathe. */
.site-footer .brand__logo { height: 46px; }

/* Fallback if logo.js has not loaded — the name, never nothing. */
.brand__word {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1875rem;
  letter-spacing: -0.035em;
  color: var(--ink);
}
.brand--light .brand__word { color: #fff; }


/* --- Emblem watermark ------------------------------------------------
   One component for every oversized decorative emblem on the site. The
   position and opacity change per placement; the artwork never does. */

.mark-wash {
  position: absolute;
  display: block;
  color: currentColor;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.mark-wash svg { width: 100%; height: auto; display: block; }

.mark-wash--hero {
  right: -10%;
  top: 50%;
  translate: 0 -50%;
  width: min(680px, 62vw);
  color: #fff;
  opacity: 0.055;
}
@media (max-width: 900px) { .mark-wash--hero { right: -28%; opacity: 0.04; } }

.mark-wash--head {
  right: -6%;
  top: 50%;
  translate: 0 -50%;
  width: min(420px, 44vw);
  color: #fff;
  opacity: 0.05;
}
@media (max-width: 760px) { .mark-wash--head { display: none; } }

.mark-wash--cta {
  right: -6%;
  bottom: -42%;
  width: min(460px, 46vw);
  color: #fff;
  opacity: 0.13;
}
@media (max-width: 760px) { .mark-wash--cta { display: none; } }

.mark-wash--footer {
  left: -4%;
  bottom: -34%;
  width: min(380px, 40vw);
  color: #fff;
  opacity: 0.035;
}
@media (max-width: 760px) { .mark-wash--footer { display: none; } }

/* --- Desktop nav ----------------------------------------------------- */

.nav { display: flex; align-items: center; gap: var(--s-2); }

.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.55rem 0.85rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  border-radius: var(--r-md);
  white-space: nowrap;
  transition: color var(--dur) var(--ease);
}
.nav__link:hover { color: var(--ink); }
.nav__link[aria-current="page"],
.nav__item.is-active > .nav__link { color: var(--ink); font-weight: 600; }

/* The active item gets a red underline that grows from the centre. */
.nav__link::after {
  content: "";
  position: absolute;
  left: 0.85rem; right: 0.85rem;
  bottom: 0.15rem;
  height: 2px;
  background: var(--red);
  transform: scaleX(0);
  transition: transform var(--dur) var(--ease);
}
.nav__link[aria-current="page"]::after,
.nav__item.is-active > .nav__link::after,
.nav__item:hover > .nav__link::after { transform: scaleX(1); }

.nav__caret { width: 11px; height: 11px; opacity: 0.55; transition: transform var(--dur) var(--ease); }
.nav__item:hover .nav__caret { transform: rotate(180deg); }

/* --- Dropdown -------------------------------------------------------- */

.nav__item { position: relative; }

.dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translate(-50%, 10px);
  min-width: 340px;
  padding: var(--s-3);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              visibility var(--dur);
}
.nav__item:hover > .dropdown,
.nav__item:focus-within > .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.dropdown__link {
  display: block;
  padding: 0.6rem 0.75rem;
  border-radius: var(--r-md);
  text-decoration: none;
  color: var(--ink);
  transition: background var(--dur) var(--ease);
}
.dropdown__link:hover { background: var(--paper-warm); color: var(--ink); }
.dropdown__link strong {
  display: block;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.012em;
}
.dropdown__link span {
  display: block;
  margin-top: 1px;
  font-size: var(--t-sm);
  line-height: 1.4;
  color: var(--slate);
}

.header__cta { display: flex; align-items: center; gap: var(--s-3); flex: none; }

/* --- Mobile drawer --------------------------------------------------- */

.burger {
  display: none;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  cursor: pointer;
}
.burger span {
  position: relative;
  display: block;
  width: 18px; height: 1.5px;
  background: var(--ink);
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.burger span::before, .burger span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px; height: 1.5px;
  background: var(--ink);
  transition: transform var(--dur) var(--ease), top var(--dur) var(--ease);
}
.burger span::before { top: -6px; }
.burger span::after  { top: 6px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.burger[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

.drawer {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  z-index: 99;
  background: #fff;
  padding: var(--s-5) var(--gutter) var(--s-8);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              visibility var(--dur);
}
.drawer.is-open { opacity: 1; visibility: visible; transform: none; }

.drawer__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
}
.drawer__link[aria-current="page"] { color: var(--red); }

.drawer__sub {
  padding: var(--s-2) 0 var(--s-4);
  border-bottom: 1px solid var(--line);
}
.drawer__sub a {
  display: block;
  padding: 0.45rem 0;
  font-size: 0.9375rem;
  color: var(--slate);
  text-decoration: none;
}
.drawer__sub a:hover { color: var(--red); }

.drawer__foot { margin-top: var(--s-6); }
.drawer__foot .btn { width: 100%; }
.drawer__contact {
  margin-top: var(--s-5);
  display: grid;
  gap: var(--s-2);
  font-size: 0.9375rem;
}
.drawer__contact a { color: var(--ink); text-decoration: none; }

body.is-locked { overflow: hidden; }

@media (max-width: 1080px) {
  .nav, .header__cta .btn { display: none; }
  .burger { display: inline-flex; }
}

/* --- Footer ---------------------------------------------------------- */

.site-footer {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: var(--on-ink-soft);
  padding-top: var(--band-tight);
}
.site-footer > .wrap { position: relative; z-index: 1; }
.site-footer a { color: var(--on-ink-soft); text-decoration: none; }
.site-footer a:hover { color: #fff; }

.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr));
  gap: var(--s-6) var(--s-5);
  padding-bottom: var(--s-8);
}
@media (max-width: 1080px) {
  .footer__top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .footer__top { grid-template-columns: minmax(0, 1fr); }
}

.footer__blurb {
  margin-top: var(--s-4);
  max-width: 34ch;
  font-size: 0.9375rem;
  color: var(--on-ink-dim);
}

.footer__title {
  margin-bottom: var(--s-4);
  font-family: var(--font-body);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--on-ink-dim);
}
.footer__list li { margin-bottom: 0.6rem; font-size: 0.9375rem; }

.footer__office { margin-bottom: var(--s-4); font-size: 0.9375rem; line-height: 1.5; }
.footer__office strong { display: block; color: #fff; font-weight: 600; }

.socials { display: flex; gap: var(--s-3); margin-top: var(--s-5); }
.socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border: 1px solid var(--line-on-ink);
  border-radius: 50%;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.socials svg { width: 16px; height: 16px; fill: currentColor; }
.socials a:hover { background: var(--red); border-color: var(--red); color: #fff; }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding-block: var(--s-5);
  border-top: 1px solid var(--line-on-ink);
  font-size: var(--t-sm);
  color: var(--on-ink-dim);
}
.footer__legal { display: flex; flex-wrap: wrap; gap: var(--s-5); }


/* ==========================================================================
   7. Home page
   ========================================================================== */

/* --- Hero ------------------------------------------------------------ */

.hero {
  position: relative;
  padding-block: clamp(3.5rem, 2rem + 7vw, 8rem) clamp(3rem, 2rem + 4vw, 6rem);
  background: var(--ink);
  color: var(--on-ink-soft);
  overflow: hidden;
}



.hero__inner { position: relative; z-index: 1; max-width: 24ch; }
.hero__inner { max-width: none; }

.hero__title {
  font-size: var(--t-5xl);
  line-height: 0.98;
  font-weight: 600;
  letter-spacing: -0.035em;
  color: #fff;
  max-width: 16ch;
}
.hero__title .accent { color: var(--red); }

.hero__sub {
  margin-top: var(--s-5);
  max-width: 56ch;
  font-size: var(--t-lg);
  line-height: 1.55;
  color: var(--on-ink-soft);
}

/* The two offices, offered as a fork straight out of the hero. Most
   visitors arrive wanting one market or the other. */
.hero__regions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  margin-top: var(--s-6);
}
.hero__regions a {
  display: block;
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--line-on-ink);
  border-radius: var(--r-md);
  text-decoration: none;
  font-size: var(--t-sm);
  color: var(--on-ink-soft);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.hero__regions a:hover {
  border-color: var(--red);
  background: rgba(237, 16, 16, 0.08);
  color: #fff;
}
.hero__regions span {
  display: block;
  margin-bottom: 0.2rem;
  font-family: var(--font-display);
  font-size: var(--t-base);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #fff;
}
@media (max-width: 620px) {
  .hero__regions { flex-direction: column; }
  .hero__regions a { width: 100%; }
}

/* Strip of offices / credentials under the hero CTA. */
.hero__foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-6);
  margin-top: var(--s-8);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line-on-ink);
  font-size: var(--t-sm);
  color: var(--on-ink-dim);
}
.hero__foot span { display: inline-flex; align-items: center; gap: 0.5em; }
.hero__foot span::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--red);
  flex: none;
}

/* --- Stats ----------------------------------------------------------- */

.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-5);
}
@media (max-width: 780px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.stat { padding-left: var(--s-4); border-left: 2px solid var(--red); }
.stat__num {
  font-family: var(--font-display);
  font-size: var(--t-3xl);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
}
.stat__label {
  margin-top: var(--s-2);
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--slate);
}
.band--ink .stat__label { color: var(--on-ink-dim); }

/* --- Service cards --------------------------------------------------- */

.svc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--s-6);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.svc-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-slow) var(--ease-out);
}
.svc-card:hover {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow: var(--shadow-md);
  color: inherit;
}
.svc-card:hover::before { transform: scaleX(1); }

/* The emblem, bled off the corner and revealed on hover. It is the same
   path as the header logo, at 6% — a texture the eye reads as brand rather
   than as another piece of furniture. */
.svc-card__wash {
  position: absolute;
  right: -22%;
  bottom: -30%;
  width: 62%;
  color: var(--red);
  opacity: 0;
  transform: translate(8px, 8px);
  pointer-events: none;
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
}
.svc-card__wash svg { width: 100%; height: auto; display: block; }
.svc-card:hover .svc-card__wash { opacity: 0.07; transform: none; }
.band--ink .svc-card:hover .svc-card__wash { opacity: 0.13; }

.svc-card > *:not(.svc-card__wash) { position: relative; z-index: 1; }

.svc-card__num {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--red);
}
.svc-card__icon {
  width: 40px; height: 40px;
  margin-bottom: var(--s-5);
  color: var(--red);
}
.svc-card__icon svg { width: 100%; height: 100%; }
.svc-card h3 { margin-top: var(--s-3); }
.svc-card p {
  margin-top: var(--s-3);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--slate);
}
.svc-card__more {
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}
.svc-card__more svg { width: 15px; height: 15px; transition: transform var(--dur) var(--ease); }
.svc-card:hover .svc-card__more { color: var(--red); }
.svc-card:hover .svc-card__more svg { transform: translateX(5px); }

/* Dark variant, for the service grid on the black band. */
.band--ink .svc-card {
  background: rgba(255, 255, 255, 0.035);
  border-color: var(--line-on-ink);
}
.band--ink .svc-card p { color: var(--on-ink-dim); }
.band--ink .svc-card__more { color: #fff; border-top-color: var(--line-on-ink); }
.band--ink .svc-card:hover { background: rgba(255, 255, 255, 0.07); border-color: transparent; }

/* --- Product (flagship) cards ---------------------------------------- */

.product {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
  padding-block: var(--s-8);
  border-top: 1px solid var(--line);
}
.product:first-of-type { border-top: 0; padding-top: 0; }
.product--flip .product__media { order: -1; }
@media (max-width: 900px) {
  .product { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .product--flip .product__media { order: 0; }
}

.product__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.35em 0.9em;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate);
}
.product__tag::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--red);
}
.product h3 {
  margin-top: var(--s-4);
  font-size: var(--t-2xl);
}

/* The mark leads the product block; the name stays in the DOM for screen
   readers and for search, hidden behind .sr-only. */
.product__mark {
  display: block;
  width: auto;
  height: 38px;
  max-width: 240px;
  margin-top: var(--s-4);
  object-fit: contain;
  object-position: left center;
}
@media (max-width: 620px) { .product__mark { height: 32px; } }
.product__url {
  display: block;
  margin-top: var(--s-2);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  color: var(--red-dark);
}
.product p { margin-top: var(--s-4); color: var(--slate); }
.product__points {
  margin-top: var(--s-5);
  display: grid;
  gap: var(--s-3);
}
.product__points li {
  position: relative;
  padding-left: var(--s-6);
  font-size: 0.9375rem;
  color: var(--ink-soft);
}
.product__points li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 14px; height: 2px;
  background: var(--red);
}

/* The product "screen" — a CSS-drawn browser frame holding a logotype.
   Deliberately not a screenshot: it stays sharp, weighs nothing, and never
   goes stale when the product's UI changes. */
.screen {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-md);
}
.screen__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0.7rem 0.9rem;
  background: var(--paper-warm);
  border-bottom: 1px solid var(--line);
}
.screen__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); }
.screen__dot:first-child { background: var(--red); }
.screen__url {
  margin-left: var(--s-3);
  padding: 0.2rem 0.7rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--slate);
}
.screen__body {
  display: grid;
  place-items: center;
  min-height: 260px;
  padding: var(--s-7) var(--s-5);
  text-align: center;
  background:
    radial-gradient(circle at 50% 0%, rgba(237, 16, 16, 0.07), transparent 62%),
    var(--ink);
}
.screen__logo {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1rem + 4vw, 3.25rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  color: #fff;
}
/* A product's own logo, dropped into the browser frame at a size that
   respects its aspect ratio rather than stretching it to fit. */
.screen__logo--img {
  width: auto;
  max-width: min(72%, 260px);
  height: auto;
  max-height: 54px;
  object-fit: contain;
}

.screen__tag {
  margin-top: var(--s-3);
  font-size: 0.875rem;
  color: var(--on-ink-dim);
  max-width: 30ch;
}

/* --- Client marquee -------------------------------------------------- */

.marquee {
  position: relative;
  overflow: hidden;
  /* Fade the ends so names enter and leave rather than being chopped. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 44s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  .marquee { -webkit-mask-image: none; mask-image: none; overflow-x: auto; }
  .marquee__track { animation: none; }
}

.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: var(--s-6);
  padding-inline: var(--s-6);
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 0.9rem + 1vw, 1.625rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  white-space: nowrap;
  color: var(--slate);
}
.marquee__item::after {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--red);
  flex: none;
}
.band--ink .marquee__item { color: var(--on-ink-soft); }

/* --- Approach / process steps ---------------------------------------- */

.steps { counter-reset: step; display: grid; gap: 0; }
.step {
  counter-increment: step;
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: var(--s-5);
  padding-block: var(--s-6);
  border-top: 1px solid var(--line);
}
.step:last-child { border-bottom: 1px solid var(--line); }
.band--ink .step { border-color: var(--line-on-ink); }

.step::before {
  content: "0" counter(step);
  font-family: var(--font-display);
  font-size: var(--t-2xl);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--red);
}
.step p { margin-top: var(--s-3); color: var(--slate); max-width: 62ch; }
.band--ink .step p { color: var(--on-ink-dim); }

@media (max-width: 620px) {
  .step { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
}

/* --- Founder --------------------------------------------------------- */

.founder__media { position: relative; }
.founder__media img {
  width: 100%;
  border-radius: var(--r-lg);
  filter: grayscale(1) contrast(1.06);
}
/* A red rule offset behind the portrait, echoing the mark. */
.founder__media::after {
  content: "";
  position: absolute;
  inset: auto auto -14px -14px;
  width: 58%;
  height: 58%;
  border-left: 3px solid var(--red);
  border-bottom: 3px solid var(--red);
  border-radius: 0 0 0 var(--r-lg);
  z-index: -1;
}

.quote {
  font-family: var(--font-display);
  font-size: var(--t-xl);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.018em;
  color: var(--ink);
}
.band--ink .quote { color: #fff; }
.quote::before { content: "\201C"; color: var(--red); }
.quote::after  { content: "\201D"; color: var(--red); }

.byline { margin-top: var(--s-5); }
.byline strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.band--ink .byline strong { color: #fff; }
.byline span { font-size: 0.9375rem; color: var(--slate); }
.band--ink .byline span { color: var(--on-ink-dim); }

/* --- CTA band -------------------------------------------------------- */

.cta {
  position: relative;
  background: var(--red);
  color: #fff;
  overflow: hidden;
}
.cta > .wrap { position: relative; z-index: 1; }
.cta h2 { color: #fff; max-width: 20ch; }
.cta p { margin-top: var(--s-4); max-width: 54ch; color: rgba(255, 255, 255, 0.88); }
.cta .btn--light:hover { --btn-bg: var(--ink); --btn-fg: #fff; --btn-bd: var(--ink); }
.cta .btn--ghost-light { --btn-bd: rgba(255, 255, 255, 0.5); }
.cta .btn--ghost-light:hover { --btn-fg: var(--red); }




/* ==========================================================================
   8. Service & inner pages
   ========================================================================== */

/* --- Page banner ----------------------------------------------------- */

.page-head {
  position: relative;
  padding-block: clamp(3rem, 2rem + 4vw, 5.5rem) clamp(2.5rem, 2rem + 3vw, 4.5rem);
  background: var(--ink);
  color: var(--on-ink-soft);
  overflow: hidden;
}
.page-head h1, .page-head h2, .page-head h3 { color: var(--on-ink); }
.page-head h1 { max-width: 18ch; }
.page-head .lede { max-width: 60ch; }


.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5em;
  margin-bottom: var(--s-5);
  font-size: var(--t-sm);
  color: var(--on-ink-dim);
}
.crumbs a { color: var(--on-ink-dim); text-decoration: none; }
.crumbs a:hover { color: #fff; }
.crumbs li { display: inline-flex; align-items: center; gap: 0.5em; }
.crumbs li + li::before { content: "/"; color: var(--on-ink-dim); opacity: 0.6; }
.crumbs [aria-current] { color: #fff; }

/* --- Feature list (what's included) ---------------------------------- */

.feature {
  padding: var(--s-6);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.band--warm .feature { background: #fff; }
.feature__icon {
  display: block;
  width: 34px; height: 34px;
  margin-bottom: var(--s-4);
  color: var(--red);
}
.feature__icon svg { width: 100%; height: 100%; }

/* Numbered marker used instead of an icon where a card group would otherwise
   repeat the same glyph four times. */
.feature__num {
  display: block;
  margin-bottom: var(--s-4);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--red);
}
.feature__num::after {
  content: "";
  display: block;
  width: 26px; height: 2px;
  margin-top: var(--s-2);
  background: var(--red);
}
.feature h3 { font-size: var(--t-lg); }
.feature p { margin-top: var(--s-3); font-size: 0.9375rem; color: var(--slate); }

/* On the black bands the card has to invert too, or a white card carries a
   white heading. Mirrors the .band--ink .svc-card treatment. */
.band--ink .feature {
  background: rgba(255, 255, 255, 0.035);
  border-color: var(--line-on-ink);
}
.band--ink .feature p { color: var(--on-ink-dim); }

/* Compact check list for deliverables. */
.checks { display: grid; gap: var(--s-3); }
.checks li {
  position: relative;
  padding-left: 2rem;
  font-size: 0.9375rem;
  line-height: 1.55;
}
.checks li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.28em;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--red-pale);
}
.checks li::after {
  content: "";
  position: absolute;
  left: 5.5px; top: 0.58em;
  width: 7px; height: 3.5px;
  border-left: 2px solid var(--red-dark);
  border-bottom: 2px solid var(--red-dark);
  transform: rotate(-45deg);
}
.band--ink .checks li::before { background: rgba(237, 16, 16, 0.2); }
.band--ink .checks li::after  { border-color: var(--red); }
.checks--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 620px) { .checks--2 { grid-template-columns: minmax(0, 1fr); } }

/* --- Pricing / package cards ----------------------------------------- */

.pkg {
  display: flex;
  flex-direction: column;
  padding: var(--s-6);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.pkg--featured { border-color: var(--ink); box-shadow: var(--shadow-md); }
.pkg__name { font-size: var(--t-lg); }
.pkg__price {
  margin-top: var(--s-3);
  font-family: var(--font-display);
  font-size: var(--t-2xl);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--ink);
  line-height: 1;
}
.pkg__price small {
  display: block;
  margin-top: var(--s-2);
  font-family: var(--font-body);
  font-size: var(--t-sm);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--slate);
}
.pkg .checks { margin-top: var(--s-5); }
.pkg .btn { margin-top: auto; }
.pkg__foot { margin-top: var(--s-6); }
.pkg__foot .btn { width: 100%; }
.pkg__flag {
  align-self: flex-start;
  margin-bottom: var(--s-3);
  padding: 0.25em 0.75em;
  background: var(--red);
  border-radius: var(--r-pill);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
}

/* --- Accordion (FAQ) ------------------------------------------------- */

.acc { border-top: 1px solid var(--line); }
.acc__item { border-bottom: 1px solid var(--line); }

.acc__btn {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-5);
  width: 100%;
  padding: var(--s-5) 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.4;
  color: var(--ink);
  transition: color var(--dur) var(--ease);
}
.acc__btn:hover { color: var(--red); }

/* Plus/minus drawn in CSS so there is no icon font to load. */
.acc__sign {
  position: relative;
  flex: none;
  width: 22px; height: 22px;
  margin-top: 3px;
}
.acc__sign::before, .acc__sign::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 13px; height: 2px;
  background: var(--red);
  translate: -50% -50%;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.acc__sign::after { transform: rotate(90deg); }
.acc__btn[aria-expanded="true"] .acc__sign::after { transform: rotate(0deg); opacity: 0; }

/* Grid-rows animation: collapses to 0fr and expands to the content's own
   height, so no max-height guess is needed. */
.acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur) var(--ease);
}
.acc__panel[data-open="true"] { grid-template-rows: 1fr; }
.acc__panel > div { overflow: hidden; }
.acc__panel p {
  padding-bottom: var(--s-5);
  max-width: 72ch;
  color: var(--slate);
}

/* --- Contact ---------------------------------------------------------- */

.contact-card {
  padding: var(--s-6);
  background: var(--paper-warm);
  border-radius: var(--r-lg);
}
.contact-card + .contact-card { margin-top: var(--s-4); }
.contact-card h3 { font-size: var(--t-lg); }
.contact-card p { margin-top: var(--s-3); font-size: 0.9375rem; color: var(--slate); }
.contact-card a { font-weight: 500; }

.contact-list { display: grid; gap: var(--s-4); margin-top: var(--s-5); }
.contact-list li { display: flex; gap: var(--s-4); align-items: flex-start; }
.contact-list svg { width: 19px; height: 19px; flex: none; margin-top: 3px; color: var(--red); }
.contact-list strong {
  display: block;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--slate);
}
.contact-list a, .contact-list span {
  font-size: 0.9375rem;
  color: var(--ink);
  text-decoration: none;
}
.contact-list a:hover { color: var(--red); }


/* ==========================================================================
   9. Forms
   ========================================================================== */

.form { display: grid; gap: var(--s-4); }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
@media (max-width: 620px) { .form__row { grid-template-columns: minmax(0, 1fr); } }

.field { display: grid; gap: 0.4rem; }
.field > label {
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink);
}
.field > label .req { color: var(--red); }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  font-size: 0.9375rem;
  color: var(--ink);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field textarea { min-height: 150px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--slate-light); }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(10, 10, 10, 0.07);
}
.field input:user-invalid,
.field textarea:user-invalid,
.field select:user-invalid {
  border-color: var(--red);
  box-shadow: 0 0 0 3px var(--red-pale);
}

.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235E5E5E' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 12px;
  padding-right: 2.6rem;
}

.form__note { font-size: var(--t-sm); color: var(--slate); }

/* Result message written by site.js after a submit attempt. */
.form__msg {
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-md);
  font-size: 0.9375rem;
}
.form__msg[data-state="ok"]   { background: var(--red-pale); color: var(--ink); border-left: 3px solid var(--red); }
.form__msg[data-state="err"]  { background: var(--paper-dim); color: var(--ink); border-left: 3px solid var(--slate); }

/* Honeypot — hidden from people, irresistible to bots. */
.hp { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }


/* ==========================================================================
   10. Utilities & print
   ========================================================================== */

.mt-0 { margin-top: 0; }
.mt-4 { margin-top: var(--s-4); }
.mt-5 { margin-top: var(--s-5); }
.mt-6 { margin-top: var(--s-6); }
.mt-7 { margin-top: var(--s-7); }
.center { text-align: center; }

/* ==========================================================================
   Product names in running text

   VYPΛ and edimulo are their own brands. Wherever their names appear in
   copy, site.js wraps them so they carry their own colour instead of
   disappearing into the paragraph. The colour is decoration, not meaning —
   nothing is communicated by it alone — so colour-blind readers lose
   nothing.
   ========================================================================== */

.brand-name {
  font-weight: 600;
  white-space: nowrap;
}
.brand-name--vypa    { color: var(--vypa); }
.brand-name--edimulo { color: var(--edimulo); }

/* Every dark ground on the site takes the lifted variants. */
.hero .brand-name--vypa,
.page-head .brand-name--vypa,
.band--ink .brand-name--vypa,
.site-footer .brand-name--vypa,
.screen__body .brand-name--vypa,
.build-block__head .brand-name--vypa,
.tot__due .brand-name--vypa,
.toast .brand-name--vypa,
.bbar .brand-name--vypa { color: var(--vypa-bright); }

.hero .brand-name--edimulo,
.page-head .brand-name--edimulo,
.band--ink .brand-name--edimulo,
.site-footer .brand-name--edimulo,
.screen__body .brand-name--edimulo,
.build-block__head .brand-name--edimulo,
.tot__due .brand-name--edimulo,
.toast .brand-name--edimulo,
.bbar .brand-name--edimulo { color: var(--edimulo-bright); }

/* On the red band neither brand colour survives, so both go white. */
.cta .brand-name { color: #fff; }

/* A brand name that is also a link keeps its colour on hover rather than
   being dragged to the footer's white. */
.site-footer a:hover .brand-name--vypa    { color: var(--vypa-bright); }
.site-footer a:hover .brand-name--edimulo { color: var(--edimulo-bright); }


/* ==========================================================================
   Insights — the blog
   ========================================================================== */

.posts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-6) var(--s-5);
}
@media (max-width: 940px) { .posts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .posts { grid-template-columns: minmax(0, 1fr); } }

.post-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.post-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: transparent;
}
.band--warm .post-card { background: #fff; }

.post-card__media { display: block; }
.post-card__media img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
  background: var(--paper-dim);
}
.post-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: var(--s-5);
}

.post-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.75rem;
  font-size: var(--t-xs);
  color: var(--slate-light);
}
/* A dot between meta items, but never a leading one. */
.post-card__meta > * + *::before {
  content: "";
  display: inline-block;
  width: 3px; height: 3px;
  margin-right: 0.75rem;
  border-radius: 50%;
  background: currentColor;
  vertical-align: 2px;
}
.post-card__cat {
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--red);
}

.post-card h3 {
  margin-top: var(--s-3);
  font-size: var(--t-lg);
  line-height: 1.25;
}
.post-card h3 a { color: inherit; text-decoration: none; }
/* The whole card is clickable, with the title as the real link so the
   accessible name and the keyboard target stay on the heading. */
.post-card h3 a::after { content: ""; position: absolute; inset: 0; }
.post-card { position: relative; }
.post-card h3 a:hover { color: var(--red); }

.post-card p {
  margin-top: var(--s-3);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--slate);
}
.post-card .svc-card__more {
  margin-top: auto;
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}

/* The newest post gets the full width of the index and a bigger photograph. */
@media (min-width: 941px) {
  .posts--index .post-card--lead {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: stretch;
  }
  /* A portrait photograph would otherwise drive the whole row to its own
     height and strand the copy in whitespace. The media is clamped and the
     image crops into it. */
  .posts--index .post-card--lead .post-card__media {
    flex: 0 0 48%;
    max-height: 26rem;
  }
  .posts--index .post-card--lead .post-card__media img {
    height: 100%;
    min-height: 20rem;
    aspect-ratio: auto;
    object-position: center 30%;
  }
  .posts--index .post-card--lead .post-card__body {
    justify-content: center;
    padding: var(--s-7);
  }
  .posts--index .post-card--lead h3 { font-size: var(--t-2xl); }
  .posts--index .post-card--lead p { font-size: var(--t-lg); }
}

/* --- The article itself ------------------------------------------------ */

.post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line-on-ink);
  font-size: var(--t-sm);
  color: var(--on-ink-dim);
}

/* The photograph bleeds up into the black banner above it. */
.post-hero {
  margin: 0;
  padding: 0 var(--gutter);
  background: linear-gradient(var(--ink) 50%, var(--paper) 50%);
}
.post-hero img {
  display: block;
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  aspect-ratio: 16 / 7;
  object-fit: cover;
  /* Crop from near the top. A centre crop of a tall photograph reliably
     removes the subject, which is the one part worth keeping. */
  object-position: center 15%;
  border-radius: var(--r-lg);
}
@media (max-width: 700px) { .post-hero img { aspect-ratio: 4 / 3; } }

.prose--post { max-width: none; }
.prose--post > * { max-width: var(--measure); }
.prose--post h2 {
  margin-top: var(--s-8);
  font-size: var(--t-2xl);
}
.prose--post h3 { margin-top: var(--s-6); font-size: var(--t-xl); }
.prose--post p { margin-top: var(--s-5); }
.prose--post h2 + p, .prose--post h3 + p { margin-top: var(--s-4); }
.prose--post ul, .prose--post ol { margin-top: var(--s-4); }
.prose--post li + li { margin-top: var(--s-3); }

/* Numbered lists keep the counter in the brand red, matching the steps. */
.prose__ol { counter-reset: n; list-style: none; padding: 0; }
.prose__ol li {
  counter-increment: n;
  position: relative;
  padding-left: 2.4rem;
}
.prose__ol li::before {
  content: counter(n);
  position: absolute;
  left: 0; top: 0;
  width: 1.7rem;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--red);
}
.prose__ol li::after { content: none; }

.pull {
  max-width: none !important;
  margin: var(--s-7) 0;
  padding: var(--s-5) 0 var(--s-5) var(--s-6);
  border-left: 3px solid var(--red);
}
.pull p {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--t-xl);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.pull cite {
  display: block;
  margin-top: var(--s-3);
  font-style: normal;
  font-size: var(--t-sm);
  color: var(--slate);
}

.table-wrap { overflow-x: auto; margin-top: var(--s-5); max-width: none !important; }
.table {
  width: 100%;
  min-width: 32rem;
  border-collapse: collapse;
  font-size: 0.9375rem;
}
.table th, .table td {
  padding: 0.8rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--line);
}
.table thead th {
  border-bottom: 2px solid var(--ink);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate);
}
.table tbody tr:last-child td { border-bottom: 0; }
.table td:not(:first-child) { font-variant-numeric: tabular-nums; }

.post-cta {
  position: relative;
  max-width: none !important;
  margin: var(--s-7) 0;
  padding: var(--s-6);
  background: var(--paper-warm);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.post-cta__mark {
  position: absolute;
  right: -6%;
  bottom: -40%;
  width: 30%;
  color: var(--red);
  opacity: 0.07;
  pointer-events: none;
}
.post-cta__mark svg { width: 100%; height: auto; display: block; }
.post-cta > * { position: relative; z-index: 1; }
.post-cta p { margin: 0 0 var(--s-4); max-width: 60ch; }

.post-foot {
  margin-top: var(--s-8);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}


/* ==========================================================================
   Service areas
   ========================================================================== */

.area-sells {
  padding: var(--s-6);
  background: var(--paper-warm);
  border-radius: var(--r-lg);
}
.area-sells h2 { font-size: var(--t-lg); }

/* A plain row of links to the other areas. Internal linking is most of what
   a location page is for; it does not need to be a card grid. */
.area-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
}
.area-links a {
  color: var(--on-ink-soft);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid var(--line-on-ink);
  padding-bottom: 2px;
}
.area-links a:hover { color: #fff; border-bottom-color: var(--red); }


/* ==========================================================================
   Live client sites
   ========================================================================== */

.sites { display: grid; gap: var(--s-6); }

.site-card {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--s-6);
  align-items: center;
}
/* Alternating sides, so a column of three does not read as a list. */
.site-card:nth-child(even) .site-card__shot { order: 2; }

@media (max-width: 860px) {
  .site-card { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
  .site-card:nth-child(even) .site-card__shot { order: 0; }
}

/* The screenshot in a browser frame. */
.site-card__shot {
  display: block;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.site-card__shot:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.site-card__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0.6rem 0.9rem;
  background: var(--paper-dim);
  border-bottom: 1px solid var(--line);
}
.site-card__shot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  object-position: top center;
}

.site-card__sector {
  display: block;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red);
}
.site-card__body h3 { margin-top: var(--s-2); font-size: var(--t-xl); }
.site-card__body h3 a { color: inherit; text-decoration: none; }
.site-card__body h3 a:hover { color: var(--red); }
.site-card__tagline {
  margin-top: var(--s-2);
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink-soft);
}
.site-card__body > p:not(.site-card__tagline) {
  margin-top: var(--s-4);
  color: var(--slate);
  max-width: 62ch;
}
.site-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
}
.site-card__scope { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.site-card__where {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--t-sm);
  color: var(--slate);
}
.site-card__where svg { width: 15px; height: 15px; color: var(--red); flex: none; }

.band--ink .site-card__sector { color: var(--gold); }
.band--ink .site-card__tagline { color: var(--on-ink); }
.band--ink .site-card__body > p:not(.site-card__tagline),
.band--ink .site-card__where { color: var(--on-ink-dim); }
.band--ink .site-card__foot { border-top-color: var(--line-on-ink); }


/* ==========================================================================
   Client platforms
   ========================================================================== */

.project {
  position: relative;
  /* The grid gives any [data-reveal] child display:flex, which would lay a
     plain block card out as a row. Declaring the direction here keeps the
     card upright whatever the grid decides about it. */
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--s-6);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.project__mark {
  position: absolute;
  right: -12%;
  bottom: -30%;
  width: 40%;
  color: var(--red);
  opacity: 0.05;
  pointer-events: none;
}
.project__mark svg { width: 100%; height: auto; display: block; }
.project > *:not(.project__mark) { position: relative; z-index: 1; }
.project__tag {
  display: block;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red);
}
.project h3 { margin-top: var(--s-2); font-size: var(--t-xl); }
.project > p { margin-top: var(--s-4); color: var(--slate); max-width: 62ch; }
/* An archived URL is shown but not linked. */
.product__url--dead {
  color: var(--slate);
  text-decoration: none;
  border-bottom: 1px dotted var(--line-strong);
}
.product__url--dead em { font-style: normal; color: var(--slate-light); }

.project__note {
  margin-top: var(--s-5);
  padding-left: var(--s-4);
  border-left: 2px solid var(--red);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.band--ink .project__note { color: var(--on-ink-soft); }

.project__channels {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: var(--s-5);
}
/* The chip shape, without the button behaviour. */
.chip--static {
  padding: 0.3rem 0.7rem;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  color: var(--slate);
  cursor: default;
}
.band--ink .chip--static { border-color: var(--line-on-ink); color: var(--on-ink-soft); }

.project__client {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-4);
  margin-top: auto;
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
  font-size: var(--t-sm);
  color: var(--slate);
}
@media (max-width: 520px) { .project__client { grid-template-columns: minmax(0, 1fr); } }
.project__client strong {
  display: block;
  margin-bottom: 0.2rem;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate-light);
}
.band--ink .project {
  background: rgba(255, 255, 255, 0.035);
  border-color: var(--line-on-ink);
}
.band--ink .project > p,
.band--ink .project__client { color: var(--on-ink-dim); }
.band--ink .project__tag { color: var(--gold); }
.band--ink .project__client { border-top-color: var(--line-on-ink); }


/* ==========================================================================
   Regions — Canada and Nigeria
   ========================================================================== */

/* The region tiles on the home and about pages. */
.region-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--s-6);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.region-tile:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: transparent;
  color: inherit;
}
.region-tile__mark {
  position: absolute;
  right: -16%;
  bottom: -26%;
  width: 54%;
  color: var(--red);
  opacity: 0.05;
  pointer-events: none;
  transition: opacity var(--dur-slow) var(--ease-out);
}
.region-tile__mark svg { width: 100%; height: auto; display: block; }
.region-tile:hover .region-tile__mark { opacity: 0.1; }
.region-tile > *:not(.region-tile__mark) { position: relative; z-index: 1; }

/* On a black band the tile inverts, the way the service and feature cards
   already do. Left white, its heading inherited .band--ink's white text and
   vanished into the card. */
.band--ink .region-tile {
  background: rgba(255, 255, 255, 0.035);
  border-color: var(--line-on-ink);
}
.band--ink .region-tile:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: transparent;
}
.band--ink .region-tile h3 { color: #fff; }
.band--ink .region-tile p  { color: var(--on-ink-dim); }
.band--ink .region-tile .svc-card__more { color: #fff; }
/* Same 12px-uppercase problem the section eyebrows had. */
.band--ink .region-tile__eyebrow { color: var(--gold); }
/* The watermark has to sit further back on a dark card or it muddies the
   copy sitting on top of it. */
.band--ink .region-tile__mark { opacity: 0.06; }

.region-tile__eyebrow {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--red);
}
.region-tile h3 { margin-top: var(--s-2); font-size: var(--t-xl); }
.region-tile p {
  margin-top: var(--s-3);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--slate);
}
.region-tile .svc-card__more { margin-top: auto; }

/* The photograph beside a region's prose. */
.region__media img {
  width: 100%;
  border-radius: var(--r-lg);
  display: block;
}

/* Stats set inline under prose rather than across a full band. */
.stats--inline {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-4);
}
@media (max-width: 620px) {
  .stats--inline { grid-template-columns: minmax(0, 1fr); }
}

/* The office contact card that closes a region page. */
.region-card {
  position: relative;
  padding: var(--s-7) var(--s-6);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.region-card__mark {
  position: absolute;
  right: -8%;
  top: -34%;
  width: 40%;
  color: var(--red);
  opacity: 0.06;
  pointer-events: none;
}
.region-card__mark svg { width: 100%; height: auto; display: block; }
.region-card > *:not(.region-card__mark) { position: relative; z-index: 1; }
.region-card h2 { margin-top: var(--s-3); }
.region-card > p { margin-top: var(--s-4); max-width: 56ch; color: var(--slate); }


/* ==========================================================================
   Selected work
   ========================================================================== */

.work {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-5);
}
@media (max-width: 900px) { .work { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .work { grid-template-columns: minmax(0, 1fr); } }

.work__item {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #fff;
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.work__item:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

/* A fixed ratio so a row of photographs lines up whatever they were shot on. */
.work__item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  background: var(--paper-dim);
}
.work__item figcaption { padding: var(--s-5); }
.work__tag {
  display: block;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--red);
}
.work__item strong {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 600;
  letter-spacing: -0.02em;
}
.work__item figcaption > span:last-child {
  display: block;
  margin-top: var(--s-3);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--slate);
}


/* ==========================================================================
   Founder facts
   ========================================================================== */

/* The bio sits under a lede, so it needs the same separation two paragraphs
   would get from each other. */
[data-founder] .prose { margin-top: var(--s-5); }
[data-founder] .prose p + p { margin-top: var(--s-4); }

.facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-4);
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}
@media (max-width: 620px) { .facts { grid-template-columns: minmax(0, 1fr); } }
.facts dt {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate-light);
}
.facts dd {
  margin: 0.25rem 0 0;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink);
}
.band--ink .facts { border-color: var(--line-on-ink); }
.band--ink .facts dd { color: #fff; }

/* The emblem used as a marker on a plain feature card. */
.feature__mark {
  display: block;
  width: 26px;
  margin-bottom: var(--s-4);
  color: var(--red);
}
.feature__mark svg { width: 100%; height: auto; display: block; }


/* ==========================================================================
   Partner marks — VYPΛ and edimulo
   ========================================================================== */

.partner {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  flex-wrap: wrap;
}
.partner__logo {
  height: 30px;
  width: auto;
  display: block;
}
/* The VYPΛ mark is blue on light grounds and white on the black bands; the
   edimulo wordmark flips the same way. Both files exist, so the swap is a
   file swap rather than a filter that would wreck the colour. */
.partner__logo--dark { display: none; }
.band--ink .partner__logo--light,
.cta .partner__logo--light { display: none; }
.band--ink .partner__logo--dark,
.cta .partner__logo--dark { display: block; }

.partner-row {
  display: flex;
  align-items: center;
  gap: var(--s-7);
  flex-wrap: wrap;
  padding: var(--s-5) 0;
}
.partner-row img { height: 26px; width: auto; opacity: 0.85; }
.partner-row a:hover img { opacity: 1; }


/* --- Brand panel ------------------------------------------------------
   The stacked lockup, given room to be the logo rather than a fitting.
   Used where the brand itself is the subject. */

.brand-panel {
  padding: var(--s-7) var(--s-6);
  background: var(--ink);
  border-radius: var(--r-lg);
  text-align: center;
}
.brand-panel__lockup {
  display: block;
  width: 132px;
  margin: 0 auto var(--s-6);
}
.brand-panel__lockup svg { width: 100%; height: auto; display: block; }
.brand-panel p {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--on-ink-soft);
}
.brand-panel em { color: #fff; font-style: normal; font-weight: 600; }


/* 404 */
.oops { display: grid; place-items: center; text-align: center; padding-block: var(--s-9); }
.oops__mark {
  display: block;
  width: 78px;
  margin-bottom: var(--s-5);
  color: var(--red);
}
.oops__mark svg { width: 100%; height: auto; display: block; }
.oops__code {
  font-family: var(--font-display);
  font-size: clamp(5rem, 3rem + 14vw, 12rem);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 0.85;
  color: var(--red);
}

@media print {
  .site-header, .site-footer, .drawer, .cta, .btn-row, .burger { display: none !important; }
  body { color: #000; background: #fff; }
  .band, .band--ink, .page-head, .hero { background: #fff !important; color: #000 !important; padding-block: 1rem; }
  .band--ink h1, .band--ink h2, .hero__title, .page-head h1 { color: #000 !important; }
  a { color: #000; text-decoration: underline; }
}