/* ==========================================================================
   SURVEILLANCE — site styles
   Two colours, one typeface, two sizes. Everything else is spacing and 1px lines.
   ========================================================================== */

:root {
  --ink: #030303;
  --paper: #FAFAFA;
  /* Lines and secondary text are paper mixed into ink, so the palette stays two colours. */
  --line: color-mix(in srgb, var(--paper) 26%, var(--ink));
  --muted: color-mix(in srgb, var(--paper) 62%, var(--ink));
  --raise: color-mix(in srgb, var(--paper) 5%, var(--ink));

  --font: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Two type sizes only: headings and everything else. */
  --fs-text: clamp(12px, 0.35vw + 10.5px, 14px);
  --fs-head: clamp(14px, 0.25vw + 12.5px, 16px);

  /* One page edge and three spacing steps, used everywhere. */
  --edge: clamp(20px, 5vw, 96px);
  --space-s: clamp(24px, 3vw, 40px);   /* inside cells and rows */
  --space-m: clamp(48px, 6vw, 80px);   /* hero bottom, between a heading and content */
  --space-l: clamp(64px, 9vw, 120px);  /* between sections */
  --nav-h: 56px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-h);
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font: 400 var(--fs-text)/1.45 var(--font);
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, p, ul, ol, fieldset, legend { margin: 0; padding: 0; font-weight: 400; }
h1, h2, h3 { font-size: var(--fs-head); line-height: 1.15; }
ul, ol { list-style: none; }
fieldset { border: 0; min-width: 0; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
}
button { background: none; border: 0; padding: 0; cursor: pointer; }

[hidden] { display: none !important; }
::selection { background: var(--paper); color: var(--ink); }
:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: var(--edge);
  top: -100px;
  z-index: 100;
  padding: 8px 12px;
  background: var(--paper);
  color: var(--ink);
}
.skip:focus { top: 8px; }

/* --------------------------------------------------------------------------
   Links and buttons. Every hover is an instant state change, no fades.
   -------------------------------------------------------------------------- */

.arrow { display: inline-block; }

.link {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
}
a:hover .arrow,
button:hover .arrow { transform: translateX(4px); }

/* Links inside muted copy stand out by colour, not underline. */
.inline { color: var(--paper); }
.inline:hover { color: var(--muted); }

.button {
  display: inline-flex;
  align-items: center;
  gap: 0.8em;
  padding: 12px 18px;
  border: 1px solid currentColor;
}
.button:hover,
.button:focus-visible { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.on-paper .button:hover,
.on-paper .button:focus-visible { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* Full-bleed action bar: form submit, "back to all work". */
.bar {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px var(--edge);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-head);
  text-align: left;
}
.bar:hover,
.bar:focus-visible { background: var(--paper); color: var(--ink); outline: none; }
.bar:disabled { opacity: 0.5; cursor: wait; }

/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 var(--edge);
  background: var(--ink);
  border-bottom: 1px solid var(--line);
}

.nav__mark img,
.footer__mark img { height: 14px; width: auto; }

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.2vw, 36px);
}
.nav__links a { padding: 4px 0; }
/* No underlines: hover dims the link; the current page stays dimmed. */
.nav__links a:hover,
.nav__links a[aria-current="page"] { color: var(--muted); }

.nav__toggle { display: none; padding: 8px 0; }

@media (max-width: 900px) {
  .nav__toggle { display: block; }
  .nav__links {
    position: fixed;
    inset: var(--nav-h) 0 0 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--ink);
    font-size: var(--fs-head);
    visibility: hidden;
  }
  .nav.is-open .nav__links { visibility: visible; }
  .nav__links li { border-bottom: 1px solid var(--line); }
  .nav__links a {
    display: flex;
    justify-content: space-between;
    padding: var(--space-s) var(--edge);
    border: 0;
  }
  .nav__links a:hover { background: var(--paper); color: var(--ink); }
  body.nav-locked { overflow: hidden; }
}

/* --------------------------------------------------------------------------
   Hero: the same on every page. The homepage version fills the screen.
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  display: flex;
  align-items: end;
  padding: calc(var(--nav-h) + var(--space-m)) var(--edge) var(--space-m);
  isolation: isolate;
  overflow: hidden;
}
.hero--full { min-height: 100vh; min-height: 100svh; }
/* Work page: intro on the left, filters flush right and top-aligned with
   the title, cards close underneath. */
.hero--tight {
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  padding-bottom: 24px;
}

/* Motion reel slot, full bleed behind the copy. Hidden until it has a source. */
.reel { position: absolute; inset: 0; z-index: -1; }
.reel video { width: 100%; height: 100%; object-fit: cover; }
.reel video:not([src]):not(:has(source)) { display: none; }
/* Dark fade along the bottom so the hero copy stays readable over bright footage. */
.reel::after {
  content: "";
  position: absolute;
  inset: 45% 0 0;
  background: linear-gradient(to top, color-mix(in srgb, var(--ink) 85%, transparent), transparent);
  pointer-events: none;
}

.hero__inner { display: grid; gap: 18px; max-width: 60ch; }
.hero__title { max-width: 34ch; }
.hero__sub { color: var(--muted); max-width: 60ch; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 6px; }

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */

.section-head {
  display: grid;
  gap: 12px;
  padding: var(--space-l) var(--edge) var(--space-s);
}
.section-head h2 { max-width: 34ch; }
.section-head .sub { color: var(--muted); max-width: 60ch; }

.section-foot { padding: var(--space-s) var(--edge) var(--space-l); }
.page-end { padding-bottom: var(--space-l); }

/* Closing call to action, inverted. */
.cta {
  padding: var(--space-l) var(--edge);
  background: var(--paper);
  color: var(--ink);
}
.cta__inner { display: grid; gap: 18px; max-width: 46ch; }
.cta p { color: color-mix(in srgb, var(--ink) 72%, var(--paper)); }
.cta .button { justify-self: start; margin-top: 12px; }

/* --------------------------------------------------------------------------
   Grid of cells: service cards, agency models, contact form.
   1px gaps over a line-coloured background draw the rules between cells.
   -------------------------------------------------------------------------- */

.grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border-block: 1px solid var(--line);
}
.grid--3 { --cols: 3; }
.grid + .grid { border-top: 0; }

.cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: var(--space-s) var(--edge);
  background: var(--ink);
}
.cell p,
.cell__text { color: var(--muted); max-width: 46ch; }
.cell__key { color: var(--muted); }
.cell__title { font-size: var(--fs-head); line-height: 1.15; }

.cell--link .link { margin-top: auto; padding-top: 10px; }
.cell--link:hover,
.cell--link:focus-visible { background: var(--paper); color: var(--ink); outline: none; }
.cell--link:hover p,
.cell--link:focus-visible p { color: var(--ink); }

@media (max-width: 900px) { .grid--3 { --cols: 1; } }
@media (max-width: 700px) { .grid { --cols: 1; } }

/* --------------------------------------------------------------------------
   Numbered list (service deliverables, agency capabilities)
   -------------------------------------------------------------------------- */

.list { counter-reset: item; border-top: 1px solid var(--line); }
.list li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  column-gap: 16px;
  row-gap: 6px;
  align-items: baseline;
  padding: 18px var(--edge);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-head);
  line-height: 1.2;
}
.list li::before {
  counter-increment: item;
  content: counter(item, decimal-leading-zero);
  font-size: var(--fs-text);
  color: var(--muted);
}
.list li > * { grid-column: 2; }
.list li p { font-size: var(--fs-text); line-height: 1.45; color: var(--muted); max-width: 60ch; }

/* --------------------------------------------------------------------------
   Project cards (homepage + work page)
   -------------------------------------------------------------------------- */

.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-m) clamp(16px, 2vw, 28px);
  padding: 0 var(--edge);
}
@media (max-width: 900px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .cards { grid-template-columns: 1fr; } }

.card { display: grid; gap: 12px; align-content: start; }
.card .media { aspect-ratio: 4 / 5; margin-bottom: 6px; }
.card:hover .media { border-color: var(--paper); }
.card:hover .media img,
.card:hover .media video { transform: scale(1.03); }
.card__meta { display: flex; flex-wrap: wrap; color: var(--muted); }
.card__meta span + span::before { content: "/"; margin: 0 0.8em; }
.card__title { font-size: var(--fs-head); line-height: 1.15; }
.card__desc { color: var(--muted); max-width: 48ch; }
.card .link { justify-self: start; margin-top: 4px; }

.media {
  position: relative;
  overflow: hidden;
  background: var(--raise);
  border: 1px solid var(--line);
}
.media img,
.media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.media__ph {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 16px;
  color: var(--muted);
  text-align: center;
}

/* Work page filters (inside the hero) */
.filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
@media (max-width: 700px) { .filters { justify-content: flex-start; } }
.filter { padding: 8px 12px; border: 1px solid var(--line); }
.filter:hover { border-color: var(--paper); }
.filter[aria-pressed="true"] { background: var(--paper); color: var(--ink); border-color: var(--paper); }

/* --------------------------------------------------------------------------
   Case study
   -------------------------------------------------------------------------- */

.hero__inner:has(.cs-meta) { gap: 6px; }
.cs-meta { display: flex; flex-wrap: wrap; gap: 12px clamp(32px, 5vw, 72px); margin: 14px 0 0; }
.cs-meta dt { color: var(--muted); margin-bottom: 2px; }
.cs-meta dd { margin: 0; }
.cs-cover { aspect-ratio: 16 / 9; border-inline: 0; }

.approach { padding: var(--space-l) var(--edge); }
.approach--stack { padding-block: var(--space-m); border-top: 1px solid var(--line); }
.approach__copy { display: grid; gap: 18px; max-width: 58ch; }
.approach__copy p { color: var(--muted); }
.approach__copy .button { justify-self: start; margin-top: 12px; }

.plain-list li { padding: 10px 0; border-bottom: 1px solid var(--line); }
.plain-list li:first-child { border-top: 1px solid var(--line); }

.gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.5vw, 20px);
  padding: 0 var(--edge);
}
.gallery .media { aspect-ratio: 4 / 5; }
.gallery .media--wide { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
@media (max-width: 600px) { .gallery { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Contact form: inquiry type + fields as one gridded sheet.
   -------------------------------------------------------------------------- */

/* Inquiry type: the chosen option is inverted, like a hover that stays. */
.choice__opt { cursor: pointer; }
.choice__opt:hover { box-shadow: inset 0 0 0 1px var(--paper); }
.choice__opt:has(input:checked) { background: var(--paper); color: var(--ink); }
.choice__opt:has(input:checked) .cell__key { color: var(--ink); }
.choice__opt:has(input:focus-visible) { outline: 1px solid var(--paper); outline-offset: -6px; }

/* Form cells are compact, about the height of a button:
   label and input share one line on wider screens. */
.inquiry .cell { padding-block: 14px; }
.field {
  display: grid;
  grid-template-columns: minmax(12ch, 22ch) minmax(0, 1fr);
  align-items: baseline;
  gap: 6px 16px;
}
.field--full { grid-column: 1 / -1; }
.field label { color: var(--muted); }
.field:focus-within { box-shadow: inset 0 0 0 1px var(--paper); }
.field:focus-within label { color: var(--paper); }

/* Same one-line height and text size as the fields below. */
.choice__opt {
  flex-direction: row;
  align-items: baseline;
  gap: 14px;
}
.choice__opt .cell__title { font-size: var(--fs-text); }

@media (max-width: 600px) {
  .field { grid-template-columns: 1fr; }
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  appearance: none;
  outline: none;
  color: var(--paper);
}
.field textarea { resize: vertical; min-height: 1.45em; }
.field select {
  padding-right: 24px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M.5.5 5 5 9.5.5' fill='none' stroke='%23FAFAFA'/%3E%3C/svg%3E") no-repeat right 2px center / 10px 6px;
  cursor: pointer;
}
.field select option { background: var(--ink); color: var(--paper); }
/* An unanswered select reads like a placeholder. */
.field select:has(option[value=""]:checked) { color: var(--line); }
.field ::placeholder { color: var(--line); }
.field input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 100px var(--ink) inset;
  -webkit-text-fill-color: var(--paper);
}

.inquiry__error:empty,
.inquiry__status:empty { display: none; }
.inquiry__error { padding: 18px var(--edge) 0; color: var(--muted); }
.inquiry__status {
  padding: 0 var(--edge);
  max-width: calc(var(--edge) + 46ch);
  font-size: var(--fs-head);
  line-height: 1.3;
}

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

.footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 40px clamp(40px, 6vw, 96px);
  padding: 56px var(--edge) 32px;
  border-top: 1px solid var(--line);
}
.footer__brand { display: grid; gap: 12px; align-content: start; }
.footer__mark { justify-self: start; }
.footer__brand span { color: var(--muted); max-width: 36ch; }
.footer__nav,
.footer__social { display: grid; gap: 10px; align-content: start; }
.footer__nav a,
.footer__social a { color: var(--muted); }
.footer__nav a:hover,
.footer__social a:hover { color: var(--paper); }
.footer__base {
  grid-column: 1 / -1;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  color: var(--muted);
}

@media (max-width: 700px) {
  .footer { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}