/* ═════════════════════════════════════════════════════════════════════════
   BISHT — a daylit pixel world on an airy, luminous page.
   Three typefaces: Fraunces for the BISHT wordmark, Plus Jakarta Sans
   everywhere else, Silkscreen for the tiny pixel labels only
   and tiny meta labels only. Soft blue light, generous space, round cards.
   The pixel art is the one hard-edged thing; it never gets smoothed.
   ═══════════════════════════════════════════════════════════════════════ */

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

:root {
  color-scheme: light;

  --paper:      #ffffff;
  --wash:       #f1f7fe;
  --wash-deep:  #e2eefb;
  --sky:        #8fcdf5;
  --ink:        #0b1b2b;
  --ink-soft:   #5a7184;
  --ink-faint:  #93a7b8;
  --blue:       #1769c7;
  --blue-soft:  #d6e8fb;
  --grass:      #3f9e52;
  --grass-soft: #dcf0df;
  --signal:     #e2453f;
  --signal-soft:#fbe3e2;
  --rule:       #e3ecf4;

  --r-card: 22px;
  --r-pill: 999px;
  --wrap: 1140px;
  --gutter: 24px;
}

html { scroll-behavior: smooth; }
@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 {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 16.5px;
  line-height: 1.6;
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 { font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 3px solid var(--signal); outline-offset: 3px; border-radius: 4px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.pixel { font-family: 'Silkscreen', 'Courier New', monospace; }

/* ── NAV ──────────────────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--rule);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; height: 64px;
  max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter);
}
/* Same face as the hero mark, so the brand reads as one thing. */
.nav-mark {
  font-family: 'Fraunces', Georgia, serif; font-weight: 700;
  font-variation-settings: 'opsz' 144, 'SOFT' 40, 'WONK' 1;
  font-size: 24px; color: var(--ink); letter-spacing: 0.06em;
  line-height: 1;
}
.nav-links { display: flex; gap: 28px; list-style: none; }
.nav-links a { color: var(--ink-soft); font-size: 15px; font-weight: 500; }
.nav-links a:hover { color: var(--ink); text-decoration: none; }
.nav-hire {
  font-size: 14.5px; font-weight: 600;
  background: var(--ink); color: #fff;
  padding: 9px 20px; border-radius: var(--r-pill);
}
.nav-hire:hover { background: var(--blue); text-decoration: none; }

/* ── HERO ─────────────────────────────────────────────────────────────── */
.hero {
  position: relative; overflow: hidden;
  min-height: min(88vh, 820px);
  /* Top-aligned, not centred: the card got wide enough to sit on top of the
     visitor panel pinned bottom-left. Lifting it leaves that corner free and
     puts the pixel city between the two, which reads better than either one
     dodging the other sideways. */
  display: flex; align-items: flex-start;
  padding: 64px 0 96px;
  background: var(--sky);
}

/* One oversized pixel sprite, panning sideways. It is 3.5:1, far wider than
   any viewport, so object-fit always leaves slack to scroll through. */
.hero-scene { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-scene img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 0% bottom;
  image-rendering: pixelated;
  animation: scenePan 84s ease-in-out infinite alternate;
}
@keyframes scenePan {
  from { object-position: 0% bottom; }
  to   { object-position: 100% bottom; }
}
.hero-haze {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.18) 30%,
    rgba(255,255,255,0.00) 56%, rgba(255,255,255,0.35) 92%);
}

.hero-inner { position: relative; z-index: 2; width: 100%; }

/* The frosted slab the copy sits on, so the city never fights the words.
   Two columns: who he is on the left, what he has done on the right. The
   left column is deliberately the narrower one — the wordmark only has to
   carry a name, while the numbers have to carry four labels. */
.hero-card {
  max-width: 1040px; margin: 0 auto; text-align: left;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(24px, 3.4vw, 46px);
  align-items: center;
  background: rgba(255, 255, 255, 0.68);
  backdrop-filter: saturate(150%) blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 30px;
  box-shadow: 0 20px 60px rgba(14, 50, 85, 0.13);
  padding: clamp(30px, 4.2vw, 48px) clamp(22px, 4vw, 48px);
}
.hero-id { min-width: 0; }

.hero-mark {
  font-family: 'Fraunces', Georgia, serif; font-weight: 700;
  font-variation-settings: 'opsz' 144, 'SOFT' 40, 'WONK' 1;
  font-size: clamp(50px, 7.4vw, 108px);
  line-height: 0.88; letter-spacing: 0.04em;
  color: var(--ink);
  margin-bottom: clamp(14px, 2vw, 20px);
}

/* The numbers carry the hero instead of a slogan. Two by two, because four
   across inside half a card turns every label into three cramped lines. */
.figures {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(18px, 2.4vw, 26px) clamp(16px, 2.2vw, 24px);
  border-left: 1px solid rgba(11, 27, 43, 0.12);
  padding-left: clamp(20px, 3vw, 38px);
}
.fig { position: relative; min-width: 0; }
/* Only between the two columns — in a 2x2 the odd-numbered tiles sit against
   the rule that already separates the halves. */
.fig:nth-child(even)::before {
  content: ""; position: absolute; left: calc(-1 * clamp(8px, 1.1vw, 12px)); top: 10%; bottom: 10%;
  width: 1px; background: rgba(11, 27, 43, 0.14);
}
.fig b {
  display: block; font-weight: 800;
  font-size: clamp(27px, 4.4vw, 46px);
  letter-spacing: -0.035em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.fig b em { font-style: normal; color: var(--blue); }
.fig span {
  display: block; margin-top: 8px;
  font-size: clamp(11px, 1.15vw, 13px); font-weight: 500;
  color: var(--ink-soft); line-height: 1.3;
}

.hero-line {
  font-size: clamp(16px, 1.75vw, 19px); color: #2a4055;
  max-width: 30ch; margin: 0 0 clamp(20px, 2.4vw, 28px);
}
.hero-line u {
  text-decoration: underline;
  text-decoration-color: var(--grass);
  text-decoration-thickness: 3px;
  text-underline-offset: 4px;
  font-weight: 700; color: var(--ink);
}
.hero-line u.b { text-decoration-color: var(--sky); }

.btn-row { display: flex; flex-wrap: wrap; gap: 11px; justify-content: flex-start; }
.btn {
  display: inline-block; font-size: 15.5px; font-weight: 600;
  padding: 13px 26px; border-radius: var(--r-pill);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn-solid { background: var(--ink); color: #fff; box-shadow: 0 6px 18px rgba(11,27,43,0.22); }
.btn-solid:hover { box-shadow: 0 10px 26px rgba(11,27,43,0.28); }
.btn-ghost { background: rgba(255,255,255,0.9); color: var(--ink); box-shadow: 0 4px 14px rgba(14,50,85,0.12); }

/* ── VISITOR CARD: the thing on the left that is not the wordmark ─────── */
.seen {
  position: absolute; left: var(--gutter); bottom: 26px; z-index: 3;
  width: 268px;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: saturate(150%) blur(14px);
  border: 1px solid rgba(255,255,255,0.9);
  border-radius: 18px;
  box-shadow: 0 14px 40px rgba(14, 50, 85, 0.14);
  padding: 15px 17px;
  text-align: left;
}
.seen h4 {
  font-family: 'Silkscreen', monospace; font-weight: 700;
  font-size: 9.5px; letter-spacing: 0.08em; color: var(--ink-faint);
  margin-bottom: 10px;
}
.seen dl { display: grid; grid-template-columns: auto 1fr; gap: 5px 12px; font-size: 12.5px; }
.seen dt { color: var(--ink-soft); white-space: nowrap; }
.seen dd { text-align: right; font-weight: 600; overflow-wrap: anywhere; }
.seen .more {
  margin-top: 11px; width: 100%;
  font: inherit; font-size: 12px; font-weight: 600;
  color: var(--blue); background: var(--blue-soft); border: 0;
  padding: 8px 10px; border-radius: var(--r-pill); cursor: pointer;
}
.seen .more:hover { background: #c6ddf7; }
.seen .note {
  margin-top: 10px; font-size: 11.5px; line-height: 1.45; color: var(--ink-soft);
  border-top: 1px solid var(--rule); padding-top: 9px;
}

/* ── GROUND: the floor of the world ──────────────────────────────────── */
.ground {
  height: 16px; position: relative; z-index: 3;
  background:
    repeating-linear-gradient(to right, #2f7f3c 0 4px, transparent 4px 12px) top / 100% 4px no-repeat,
    linear-gradient(to bottom, #4fae5d 0 6px, #7a5a3f 6px 100%);
  image-rendering: pixelated;
}

/* ── MARQUEE: the vendors, flowing past ──────────────────────────────── */
.flow {
  background: var(--wash); border-bottom: 1px solid var(--rule);
  padding: 22px 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
}
.flow-track { display: flex; width: max-content; animation: flowRun 34s linear infinite; }
.flow:hover .flow-track { animation-play-state: paused; }
@keyframes flowRun { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
.flow-item {
  display: flex; align-items: center; gap: 9px;
  padding: 0 30px; white-space: nowrap;
}
/* A name sitting beside its own mark, not standing in for one. */
.flow-lockup { color: #94399E; }
/* Each mark is the vendor's own file, in the vendor's own colours. */
.flow-logo {
  display: block; flex: none;
  height: var(--lh); width: var(--lw);
  object-fit: contain;
}
/* The two vendors with no usable mark, set to match the marks' weight. */
.flow-word {
  font-size: clamp(17px, 2vw, 22px); font-weight: 700;
  letter-spacing: -0.02em; color: #1f3850;
}
@media (max-width: 760px) {
  .flow-item { padding: 0 20px; }
  .flow-logo { height: calc(var(--lh) * 0.82); width: calc(var(--lw) * 0.82); }
}
.flow-cap {
  text-align: center; font-size: 12.5px; color: var(--ink-faint);
  padding-top: 14px;
}

/* ── SECTIONS ────────────────────────────────────────────────────────── */
section { padding: clamp(54px, 6.5vw, 86px) 0; }
section[id] { scroll-margin-top: 78px; }
.head { max-width: 60ch; margin-bottom: 36px; }
.head h2 { font-size: clamp(28px, 4vw, 42px); margin-bottom: 12px; }
.head p { color: var(--ink-soft); font-size: 17px; }

/* ── MAP ─────────────────────────────────────────────────────────────── */
.map-section {
  background: linear-gradient(180deg, var(--wash) 0%, #ffffff 62%);
}
.map-frame {
  background: linear-gradient(160deg, #e8f3fd 0%, #d9ebfb 100%);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  box-shadow: 0 18px 48px rgba(14, 50, 85, 0.10);
  overflow: hidden;
}

/* ── The world map ───────────────────────────────────────────────────────
   Real country outlines in SVG. This is the one part of the site that is
   deliberately NOT pixel art: a bit grid cannot tell Denmark from Belgium,
   and the point of the section is that these are real places.
   Everything is sized in the 1000x386 viewBox, so a stroke-width of 0.5 is
   about half a screen pixel at full width. */
.worldmap { display: block; width: 100%; height: auto; }

.worldmap .grat {
  fill: none; stroke: #bfdcf2; stroke-width: 0.5;
  stroke-dasharray: 2 4; opacity: 0.75;
}
.worldmap .land path {
  fill: url(#landG); stroke: #98c4a6; stroke-width: 0.45;
  stroke-linejoin: round; vector-effect: non-scaling-stroke;
}

/* The curves. Each one is drawn three times: a faint full-length line so the
   route is readable when nothing is moving, a wide soft pass, and a sharp one.
   Two passes are cheaper and crisper than an SVG blur filter. */
.worldmap .arc {
  fill: none; stroke: #7fb0dd; stroke-width: 0.9; opacity: 0.45;
  transition: stroke 0.2s ease, opacity 0.2s ease;
}
.worldmap .arc.is-on { stroke: var(--signal); opacity: 0.8; }

/* The flying dot and its streak. Both dash patterns repeat every
   (len + tail), so the two can never drift out of step; the head's keyframes
   are shifted forward by (tail - head) so the dot leads its own trail. */
.worldmap .arc-tail,
.worldmap .arc-run {
  fill: none; stroke: var(--signal); stroke-linecap: round;
  stroke-dashoffset: calc(var(--len) + var(--tail) + 1);   /* parked off-path */
}
.worldmap .arc-tail {
  stroke-width: 1.5; opacity: 0.3;
  stroke-dasharray: var(--tail) var(--len);
}
.worldmap .arc-run {
  stroke-width: 3.2;
  stroke-dasharray: var(--head) calc(var(--len) + var(--tail) - var(--head));
}
.worldmap.is-live .arc-tail {
  animation: arc-tail-fly var(--dur) linear var(--delay) infinite;
}
.worldmap.is-live .arc-run {
  animation: arc-head-fly var(--dur) linear var(--delay) infinite;
}
@keyframes arc-tail-fly {
  from { stroke-dashoffset: calc(var(--len) + var(--tail)); }
  to   { stroke-dashoffset: 0; }
}
@keyframes arc-head-fly {
  from { stroke-dashoffset: calc(var(--len) + var(--head)); }
  to   { stroke-dashoffset: calc(var(--head) - var(--tail)); }
}

@media (prefers-reduced-motion: reduce) {
  /* The global rule only shortens animations, which would freeze each comet
     as a red smear at the start of its curve. Take them off instead and let
     the static arcs carry the connection on their own. */
  .worldmap .arc-tail, .worldmap .arc-run, .worldmap .mk .pulse { display: none; }
  .worldmap .arc { opacity: 0.65; }
}

.worldmap .leader {
  fill: none; stroke: #c49a9a; stroke-width: 0.7; stroke-dasharray: 2 2.5;
}
.worldmap .leader.is-on { stroke: var(--signal); }
.worldmap .truept { fill: #c49a9a; }
.worldmap .truept.is-on { fill: var(--signal); }

.worldmap .hub-ring { fill: none; stroke: var(--blue); stroke-width: 1.1; opacity: 0.55; }
.worldmap .hub-dot  { fill: var(--blue); }
.worldmap .hub-lbl {
  fill: #2f6ea8; font-family: 'Silkscreen', monospace; font-size: 7.5px;
  letter-spacing: 0.04em; text-anchor: middle;
}

/* ── Markers ─────────────────────────────────────────────────────────────
   Each marker is a <g> translated to its point, so everything inside it is
   at 0,0 — which means a scale() animation pivots on the dot without needing
   transform-box, which is the part browsers disagree about. */
.worldmap .mk { cursor: pointer; }
.worldmap .mk .hit { fill: transparent; }
.worldmap .mk .dot {
  fill: var(--signal); stroke: #ffffff; stroke-width: 1.4;
  transition: r 0.18s ease;
}
.worldmap .mk .ring {
  fill: none; stroke: var(--signal); stroke-width: 1.2;
  opacity: 0; transition: opacity 0.18s ease;
}
.worldmap .mk .pulse { fill: var(--signal); opacity: 0; }
.worldmap.is-live .mk .pulse {
  animation: mk-pulse 2.8s ease-out var(--delay) infinite;
}
@keyframes mk-pulse {
  0%   { transform: scale(0.45); opacity: 0.42; }
  70%  { transform: scale(2.6);  opacity: 0; }
  100% { transform: scale(2.6);  opacity: 0; }
}
.worldmap .mk .lbl {
  fill: #0b1b2b; font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 9.5px; font-weight: 700; letter-spacing: -0.01em;
  paint-order: stroke; stroke: rgba(255,255,255,0.9); stroke-width: 2.4;
  stroke-linejoin: round; pointer-events: none;
}
.worldmap .mk:hover .dot,
.worldmap .mk:focus-visible .dot,
.worldmap .mk.is-on .dot { r: 5.6; }
.worldmap .mk.is-on .ring { opacity: 0.9; }
.worldmap .mk.is-on .lbl { fill: #b22b26; }
.worldmap .mk:focus { outline: none; }
.worldmap .mk:focus-visible .ring { opacity: 0.9; }

@media (max-width: 760px) {
  /* Ten names at a third of the width is a smudge. The list under the map
     carries them instead. Everything else grows, because the viewBox is
     being squeezed into about a third of the width it was drawn for and a
     4-unit dot lands on roughly one phone pixel. */
  .worldmap .mk .lbl, .worldmap .hub-lbl { display: none; }
  .worldmap .mk .dot { r: 7.5; stroke-width: 2.2; }
  .worldmap .mk:hover .dot, .worldmap .mk.is-on .dot { r: 9.5; }
  .worldmap .mk .ring { r: 14; stroke-width: 2.2; }
  .worldmap .mk .hit { r: 24; }
  .worldmap .mk .pulse { r: 8; }
  .worldmap .hub-dot { r: 5.5; }
  .worldmap .hub-ring { r: 9; stroke-width: 1.8; }
  .worldmap .arc { stroke-width: 1.5; }
  .worldmap .arc-tail { stroke-width: 2.6; }
  .worldmap .arc-run { stroke-width: 5.5; }
  .worldmap .leader { stroke-width: 1.2; }
  .worldmap .truept { r: 3; }
  .worldmap .land path { stroke-width: 0.7; }
  .worldmap .grat { stroke-width: 0.8; }
}

.map-note {
  font-family: 'Silkscreen', monospace; font-size: 9.5px; letter-spacing: 0.05em;
  color: var(--ink-faint); padding: 9px 14px;
  background: rgba(255,255,255,0.75); border-top: 1px solid var(--rule);
}

.detail {
  margin-top: 20px; background: #fff;
  border: 1px solid var(--rule); border-radius: var(--r-card);
  box-shadow: 0 14px 40px rgba(14, 50, 85, 0.09);
  padding: clamp(22px, 3vw, 30px);
  display: grid; grid-template-columns: 1.45fr 1fr; gap: 10px 34px; align-items: start;
}
.detail .co { grid-column: 1 / -1; font-size: 25px; font-weight: 800; letter-spacing: -0.03em; }
.detail .meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 7px; margin: 10px 0 15px; }
.chip {
  font-family: 'Silkscreen', monospace; font-size: 9px; letter-spacing: 0.04em;
  padding: 6px 9px; border-radius: var(--r-pill);
  background: var(--wash-deep); color: #3a5a78;
}
.chip.red { background: var(--signal-soft); color: #b22b26; }
.chip.green { background: var(--grass-soft); color: #26703a; }
.detail p { font-size: 15.5px; }

.reach-box {
  background: linear-gradient(165deg, #f2f8ff 0%, #e6f1fc 100%);
  border-radius: 16px; padding: 18px 20px;
}
.reach-box b {
  display: block; font-size: clamp(30px, 3.6vw, 40px); font-weight: 800;
  letter-spacing: -0.035em; line-height: 1; color: var(--blue);
  font-variant-numeric: tabular-nums;
}
.reach-box .u { display: block; font-size: 13.5px; font-weight: 600; margin-top: 7px; }
.reach-box .t { display: block; font-size: 13.5px; color: var(--ink-soft); margin-top: 11px; line-height: 1.5; }
.reach-box .s { display: block; font-size: 11px; color: var(--ink-faint); margin-top: 11px; line-height: 1.45; }

.site-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin-top: 20px; }
.site-btn {
  display: block; width: 100%; text-align: left; cursor: pointer; font: inherit; color: inherit;
  background: #fff; border: 1px solid var(--rule); border-radius: 14px; padding: 12px 14px;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}
.site-btn:hover { border-color: var(--sky); box-shadow: 0 6px 18px rgba(14,50,85,0.09); transform: translateY(-2px); }
.site-btn[aria-pressed="true"] { border-color: var(--signal); background: #fffaf9; }
.site-btn .co { display: block; font-weight: 700; font-size: 15px; letter-spacing: -0.01em; }
.site-btn .pl { font-size: 12.5px; color: var(--ink-soft); }
.site-btn .amt {
  font-family: 'Silkscreen', monospace; font-size: 9px;
  color: var(--grass); float: right; padding-top: 4px;
}

/* ── SERVICES ────────────────────────────────────────────────────────── */
.svc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.svc {
  background: var(--wash); border-radius: var(--r-card);
  padding: clamp(22px, 2.6vw, 30px);
}
.svc:nth-child(2), .svc:nth-child(3) {
  background: linear-gradient(160deg, #eef6ff 0%, #e2eefb 100%);
}
.svc h3 { font-size: 19.5px; margin-bottom: 9px; }
.svc p { color: var(--ink-soft); font-size: 15.5px; }

/* ── PROCESS ─────────────────────────────────────────────────────────── */
.path { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.leg { position: relative; padding-top: 30px; }
.leg::before {
  content: ""; position: absolute; top: 9px; left: 0; right: 0; height: 3px;
  background: repeating-linear-gradient(to right, var(--sky) 0 6px, transparent 6px 12px);
}
.leg:first-child::before { left: 9px; }
.leg:last-child::before { right: 50%; }
.leg::after {
  content: ""; position: absolute; top: 3px; left: 0;
  width: 15px; height: 15px; background: var(--grass); border-radius: 5px;
}
.leg .n {
  font-family: 'Silkscreen', monospace; font-size: 9px; color: var(--ink-faint);
  display: block; margin-bottom: 6px; letter-spacing: 0.06em;
}
.leg h3 { font-size: 17.5px; margin-bottom: 7px; }
.leg p { font-size: 14.5px; color: var(--ink-soft); }

/* ── WRITING ─────────────────────────────────────────────────────────── */
.posts { border-top: 1px solid var(--rule); }
.post {
  display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
  padding: 18px 6px; border-bottom: 1px solid var(--rule); color: var(--ink);
}
.post:hover { background: var(--wash); text-decoration: none; }
.post:hover .post-t { color: var(--blue); }
.post-t { font-weight: 700; font-size: 16.5px; flex: 1 1 320px; letter-spacing: -0.01em; }
.post-k { font-family: 'Silkscreen', monospace; font-size: 9px; color: var(--ink-faint); white-space: nowrap; letter-spacing: 0.05em; }

/* ── CONTACT ─────────────────────────────────────────────────────────── */
.contact { background: linear-gradient(180deg, #ffffff 0%, var(--wash) 100%); }
.contact-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: start; }
.mail {
  display: inline-block; font-weight: 800;
  font-size: clamp(21px, 3.2vw, 32px); letter-spacing: -0.03em;
  color: var(--ink); border-bottom: 4px solid var(--grass); padding-bottom: 4px;
}
.mail:hover { color: var(--blue); border-bottom-color: var(--blue); text-decoration: none; }
.socials { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 26px; }
.socials a {
  font-size: 14px; font-weight: 600; color: var(--ink);
  background: #fff; border: 1px solid var(--rule);
  padding: 9px 17px; border-radius: var(--r-pill);
}
.socials a:hover { border-color: var(--ink); text-decoration: none; }
.facts { background: #fff; border: 1px solid var(--rule); border-radius: var(--r-card); overflow: hidden; }
.fact { display: flex; justify-content: space-between; gap: 14px; padding: 14px 20px; font-size: 14.5px; border-bottom: 1px solid var(--rule); }
.fact:last-child { border-bottom: 0; }
.fact dt { color: var(--ink-soft); }
.fact dd { font-weight: 700; text-align: right; }
.dot-ok {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--grass); margin-right: 8px; vertical-align: 1px;
  animation: blink 2.4s steps(2) infinite;
}
@keyframes blink { 0%, 60% { opacity: 1; } 61%, 100% { opacity: 0.3; } }

/* ── FOOTER ──────────────────────────────────────────────────────────── */
.foot {
  border-top: 1px solid var(--rule); padding: 26px var(--gutter);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 14px; color: var(--ink-soft);
}
.foot a { color: var(--ink-soft); }

/* ── RESPONSIVE ──────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .hero { display: block; }
  .seen {
    position: static; width: auto; max-width: 440px;
    margin: 22px auto 0;
  }
  .seen dd { overflow-wrap: normal; }
}
@media (max-width: 900px) {
  /* The two hero columns stack. The rule that separated them becomes the
     line they now sit either side of, and the numbers go back to one row —
     two-by-two across a full-width card leaves them stranded in the corners. */
  .hero-card { grid-template-columns: 1fr; gap: clamp(22px, 4vw, 30px); }
  .figures {
    grid-template-columns: repeat(4, 1fr); gap: 10px;
    border-left: 0; padding-left: 0;
    border-top: 1px solid rgba(11, 27, 43, 0.12);
    padding-top: clamp(20px, 4vw, 28px);
  }
  .fig:nth-child(even)::before { display: none; }
  .fig + .fig::before {
    content: ""; display: block; position: absolute; left: -5px; top: 10%; bottom: 10%;
    width: 1px; background: rgba(11, 27, 43, 0.14);
  }
  .hero-line { max-width: 44ch; }
  .detail { grid-template-columns: 1fr; }
  .site-list { grid-template-columns: repeat(2, 1fr); }
  .path { grid-template-columns: repeat(2, 1fr); row-gap: 30px; }
  .leg:nth-child(2)::before { right: 50%; }
  .leg:nth-child(3)::before { left: 9px; }
  .contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .nav-links { display: none; }
  .svc-grid { grid-template-columns: 1fr; }
  .site-list { grid-template-columns: 1fr; }
  .path { grid-template-columns: 1fr; }
  .leg::before { display: none; }
  .hero { min-height: 0; padding: 40px 0 104px; }
  .hero-card { border-radius: 24px; }
  /* Four across stops fitting; back to two-by-two, dividers between the
     columns only. */
  .figures { grid-template-columns: repeat(2, 1fr); gap: 18px 10px; }
  .fig + .fig::before { display: none; }
  .fig:nth-child(even)::before {
    content: ""; display: block; position: absolute; left: -5px; top: 10%; bottom: 10%;
    width: 1px; background: rgba(11, 27, 43, 0.14);
  }
}

/* Critter layer: above the pixel scene and its haze, below the copy. */
.critters {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 2; pointer-events: none; display: block;
}