@font-face {
  font-family: "Schibsted Grotesk";
  src: url("/fonts/schibsted-grotesk.woff2") format("woff2");
  font-weight: 400 900;
  font-display: swap;
}

:root {
  /* palette taken from the Culvert logo */
  --concrete: #EEF2F5;   /* page */
  --panel: #F8FAFB;      /* raised surface */
  --line: #D4DCE3;       /* hairlines, tracks */
  --ink: #12213A;        /* text: logo navy */
  --slate: #4A5D72;      /* secondary text */
  --navy: #12213A;       /* mark, dark facets */
  --navy-2: #21354D;     /* mark, light facets */
  --mint: #05CCA6;       /* logo streaks, inspected traffic */
  --link: #04806A;       /* mint, darkened for readable text */
  --water: #9DB0C3;      /* uninspected traffic */
  --threat: #F2545B;     /* malicious traffic before inspection */
  --measure: 34rem;
  --max: 74rem;
  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  color-scheme: light dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--concrete);
  color: var(--ink);
  font-family: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}
::selection { background: var(--mint); color: var(--navy); }

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

a { color: var(--link); text-underline-offset: .2em; text-decoration-thickness: 1px; transition: color .15s; }
a:hover { color: var(--ink); }
a:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; border-radius: 3px; }

/* ── Header ──────────────────────────────────── */
.top { border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; align-items: center; min-height: 4.5rem; }
.mark {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-weight: 800;
  font-size: 1.375rem;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
}
.logo { width: 2rem; height: 2rem; flex: none; }
.hx-a { fill: var(--navy); }
.hx-b { fill: var(--navy-2); }
.hx-in { fill: #fff; }
.hx-c { fill: var(--navy); }

/* ── The gateway diagram ─────────────────────── */
.diagram {
  margin: clamp(3rem, 6vw, 4.5rem) 0 0;
  padding: clamp(1rem, 3vw, 2rem) clamp(.5rem, 2vw, 1.5rem);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--mint);
  overflow: hidden;
}
.diagram svg { display: block; width: 100%; height: auto; }
.track path { fill: none; stroke: var(--line); stroke-width: 2; }
.pkt path { fill: none; stroke-width: 6; stroke-linecap: round; stroke-dasharray: 0 34; animation: flow 2.4s linear infinite; }
.pkt.in path { stroke: var(--water); }
.pkt.out path { stroke: var(--mint); animation-duration: 2s; }
.pkt.in path:nth-child(2n) { animation-duration: 3.1s; }
.pkt.out path:nth-child(2) { animation-duration: 1.7s; }
.streak { fill: var(--mint); }
.threat-halo { opacity: .22; }
.flash { fill: none; stroke: var(--mint); stroke-width: 1.6; stroke-linejoin: round; }
.stop-hit { stroke: var(--threat); stroke-width: 4; stroke-linecap: round; }
.halo { opacity: .55; }
@keyframes flow { to { stroke-dashoffset: -34; } }

/* ── Copy ────────────────────────────────────── */
.body { flex: 1; padding: clamp(2rem, 4.5vw, 3.5rem) 0 clamp(3rem, 7vw, 5.5rem); }
.grid { display: grid; gap: 3rem; align-items: start; }
@media (min-width: 60rem) {
  .grid { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(3rem, 6vw, 6rem); }
}

h1 {
  font-size: clamp(2.1rem, 4.2vw, 3.4rem);
  line-height: 1.04;
  letter-spacing: -0.032em;
  font-weight: 760;
  margin: 0 0 1.5rem;
  max-width: 21ch;
  text-wrap: balance;
}
.lede { max-width: var(--measure); margin: 0; color: var(--slate); font-size: clamp(1.125rem, 1.4vw, 1.25rem); line-height: 1.55; text-wrap: pretty; }

.contact {
  position: relative;
  max-width: var(--measure);
  padding: 1.75rem 1.75rem 1.5rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-top: 4px solid var(--mint);
  border-radius: 4px 4px 10px 10px;
  box-shadow: 0 1px 0 var(--line), 0 18px 40px -24px rgba(28, 43, 51, .35);
}
@media (min-width: 60rem) { .contact { margin-top: .6rem; } }
.contact h2 { font-size: 1.25rem; font-weight: 720; margin: 0 0 .5rem; letter-spacing: -0.015em; }
.contact p { margin: 0 0 1.25rem; color: var(--slate); }
.contact p:last-child { margin: 0; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.mail {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: clamp(1.1rem, 1.7vw, 1.3rem);
  font-weight: 680;
  letter-spacing: -0.012em;
  text-decoration: none;
  white-space: nowrap;
}
.mail:hover { text-decoration: underline; }

/* ── Footer ──────────────────────────────────── */
.foot { color: var(--slate); font-size: .875rem; }
.foot .wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .5rem 2rem;
  padding-top: 1.5rem;
  padding-bottom: 2rem;
  border-top: 1px solid var(--line);
}
.foot p { margin: 0; max-width: 46rem; }

@media (prefers-reduced-motion: reduce) {
  .pkt path { animation: none; }
  a { transition: none; }
  .threats, .flashes, .stop-hits { display: none; }
}

@media (prefers-color-scheme: dark) {
  :root {
    --concrete: #0B1524; --panel: #111F33; --line: #22344B;
    --ink: #E7EDF3; --slate: #9CADBF; --navy: #1A2D48; --navy-2: #26405F;
    --mint: #05CCA6; --link: #2FE0BD; --water: #3D5573;
  }
  .hx-c { fill: #12213A; }
  .logo .hx-a { stroke: #34506F; stroke-width: 1.5; }
  .diagram .hx-a { stroke: #34506F; stroke-width: .6; }
  .contact { box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .7); }
}