/* ---- Inline icons ---- */

/* An unsized inline SVG falls back to a 300px box, which blows out whatever
   link it sits in. Size it once here; contexts override the gap as needed. */
.icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* Links pairing a glyph with a label keep both on one row. */
a:has(> .icon) {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}

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

.hero {
  position: relative;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-block-end: var(--sp-16);
  padding-inline: var(--gutter);
  overflow: hidden;
  /* Doubles as the still fallback whenever the video is suppressed. */
  background: url("/assets/images/hero-poster.jpg") center / cover no-repeat;
}

.hero canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  /* hero.js draws the displaced video here while the pointer is moving and
     fades it out when idle so the plain <video> shows through. */
  opacity: 0;
  transition: opacity 1.6s ease;
  pointer-events: none;
}

.hero canvas.is-active {
  opacity: 1;
}

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Scrim — the footage is bright magenta and blue, so the headline needs
   cover. Heaviest at the bottom where the copy sits. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(10, 10, 10, 0.92) 0%,
    rgba(10, 10, 10, 0.78) 30%,
    rgba(10, 10, 10, 0.45) 60%,
    rgba(10, 10, 10, 0.25) 100%
  );
}

.hero__content {
  position: relative;
  z-index: 2;
  max-width: 800px;
}

/* Motion-sensitive visitors get the poster frame, held still. */
@media (prefers-reduced-motion: reduce) {
  .hero__video {
    display: none;
  }
}

.hero__eyebrow {
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--sp-4);
}

.hero__title {
  margin-bottom: var(--sp-6);
}

.hero__sub {
  font-size: var(--text-m);
  color: var(--muted);
  max-width: 50ch;
}

/* ---- Logo Row ---- */

.logo-wall {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding-block: var(--sp-12);
}

.logo-wall__label {
  display: block;
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--sp-8);
}

/* Explicit counts rather than auto-fit: 6 / 3 / 2 all divide the current
   six clients evenly, so no logo is ever orphaned on its own row. */
.logo-wall__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--sp-8) var(--sp-8);
  align-items: center;
}

@media (max-width: 1023px) {
  .logo-wall__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.logo-wall__item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
}

/* Knock any source logo to pure white: brightness(0) flattens it to
   black, invert(1) flips that to white. Means a colour, black or
   multi-colour SVG can be dropped in untouched and still match.

   --logo-scale nudges an individual mark. A height cap alone makes wide
   wordmarks read large and compact marks read small, so square-ish logos
   usually want 1.2-1.4. Set it per item, no re-export needed:
     <div class="logo-wall__item" style="--logo-scale: 1.3"> */
/* A logo may be wrapped in <a> to deep-link to its case study. */
.logo-wall__item a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  text-decoration: none;
}

.logo-wall__item img {
  max-width: 100%;
  max-height: calc(29px * var(--logo-scale, 1));
  width: auto;
  /* Optical nudge for wordmarks whose ascenders or descenders pull the
     box off the visual centre. Set --logo-shift on the item. */
  transform: translateY(var(--logo-shift, 0px));
  filter: brightness(0) invert(1);
  opacity: 0.7;
  transition: opacity var(--dur) var(--ease);
}

.logo-wall__item:hover img {
  opacity: 1;
}

/* Typographic stand-in, used until a real mark is dropped in. */
.logo-wall__wordmark {
  font-family: var(--mono);
  font-size: var(--text-s);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  transition: color var(--dur) var(--ease);
}

.logo-wall__item:hover .logo-wall__wordmark {
  color: var(--fg);
}

@media (max-width: 640px) {
  .logo-wall__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-6);
  }
}

/* ---- Work Grid + Cards ---- */

.work-filter {
  display: flex;
  gap: var(--sp-6);
  margin-bottom: var(--sp-12);
  flex-wrap: wrap;
}

.work-filter__btn {
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: var(--sp-1);
  border-bottom: 1px solid transparent;
  transition: color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}

.work-filter__btn:hover,
.work-filter__btn.active {
  color: var(--fg);
  border-color: var(--fg);
}

/* Mono eyebrow above a section, matching .logo-wall__label. */
.section__label {
  display: block;
  font-family: var(--mono);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--sp-8);
}

.work-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: var(--sp-8);
}

/* Homepage featured row: always three across, so the trio never reflows
   into an orphan. Collapses to one column below the 340px card minimum. */
.work-grid--featured {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 1100px) {
  .work-grid--featured {
    grid-template-columns: 1fr;
  }
}

.card {
  display: block;
  text-decoration: none;
}

.card__thumb {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--border);
  margin-bottom: var(--sp-4);
}

/* Stand-in when a thumb is absent or fails to load. */
.card__thumb-empty {
  width: 100%;
  height: 100%;
  background: var(--border);
}

.card__thumb img,
.card__thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms var(--ease);
}

.card:hover .card__thumb img,
.card:hover .card__thumb video {
  transform: scale(1.03);
}

.card__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--sp-2);
}

.card__client {
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.card__title {
  font-size: var(--text-base);
  font-weight: 400;
  margin-bottom: var(--sp-2);
}

/* Featured cards carry no meta, summary, or tags — the title is the last
   element, so drop its trailing margin. */
.card--featured .card__title {
  margin-bottom: 0;
}

.card__summary {
  font-size: var(--text-s);
  color: var(--muted);
  max-width: 48ch;
}

.card__tags {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-top: var(--sp-3);
}

.tag {
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--border);
  padding: 3px 9px;
}

/* ---- Booking Strip ---- */

.booking-strip {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding-block: var(--sp-8);
  display: flex;
  align-items: center;
  gap: var(--sp-6);
}

/* Set at the h3 step rather than the mono label step — this is the only
   CTA between the work grid and the footer, so it reads as copy, not meta. */
.booking-strip__label {
  font-family: var(--sans);
  font-size: var(--text-m);
  letter-spacing: -0.01em;
  color: var(--muted);
}

/* Sits inline right after the prompt so the two read as one sentence. */
.booking-strip__cta {
  font-family: var(--sans);
  font-size: var(--text-m);
  letter-spacing: -0.01em;
  color: var(--fg);
  border-bottom: 1px solid var(--fg);
  padding-bottom: 2px;
  transition: color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}

.booking-strip__cta:hover {
  color: var(--accent);
  border-color: var(--accent);
}

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

.site-footer {
  border-top: 1px solid var(--border);
  padding-block: var(--sp-12);
}

.site-footer__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-8);
}

.site-footer__links {
  display: flex;
  gap: var(--sp-6);
  flex-wrap: wrap;
}

.site-footer__links a {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color var(--dur) var(--ease);
}


.site-footer__links a:hover {
  color: var(--fg);
}

/* Shares the footer row with the links rather than sitting on its own rule. */
.site-footer__legal {
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  color: var(--muted);
}

/* ---- Case Study: Header Block ---- */

.cs-header {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-8);
  padding-block: var(--sp-12);
  border-bottom: 1px solid var(--border);
}

.cs-header__group {}

/* ---- Case Study: Hero ---- */

.cs-hero {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--border);
}

.cs-hero img,
.cs-hero video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Portrait source (phone footage): letterbox inside the 16:9 slot instead of
   cropping to a sliver. Pair with a poster so the pillars read as intentional. */
/* Portrait phone video shown in the body rather than the 16:9 hero. */
.cs-figure--video-portrait video {
  display: block;
  width: 100%;
  max-width: 480px;
  margin-inline: auto;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  background: #0a0a0a;
}

/* ---- Case Study: Body ---- */

.cs-body {
  padding-block: var(--sp-16);
}

/* Section headers double as dividers: hairline rule, then a bright
   mono label with generous space above so sections read at a glance. */
.cs-body h3 {
  margin-top: var(--sp-24);
  margin-bottom: var(--sp-8);
  padding-top: var(--sp-8);
  border-top: 1px solid var(--border);
  font-family: var(--mono);
  font-size: var(--text-base);
  line-height: 1.3;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg);
}

.cs-body h3:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.cs-body p {
  font-size: var(--text-base);
  line-height: 1.7;
  max-width: 65ch;
}

/* ---- Tech Spec Block ---- */

.spec-block {
  border: 1px solid var(--border);
  padding: var(--sp-8);
  margin-block: var(--sp-12);
}

.spec-block__title {
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--sp-6);
}

.spec-table {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: var(--sp-3) var(--sp-8);
}

.spec-table dt {
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 2px;
}

.spec-table dd {
  font-family: var(--mono);
  font-size: var(--text-xs);
  color: var(--fg);
}

/* ---- Case Study: Inline figures ---- */

.cs-figure {
  margin-block: var(--sp-12);
}

.cs-figure img {
  width: 100%;
  height: auto;
  display: block;
  background: var(--border);
  cursor: zoom-in;
  transition: opacity var(--dur) var(--ease);
}

.cs-figure img:hover {
  opacity: 0.85;
}

/* Side-by-side pairs. Cells share one ratio so the row stays even. */
.cs-figure__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
}

.cs-figure__grid img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.cs-figure__grid--tall img {
  aspect-ratio: 3 / 4;
}

.cs-figure figcaption {
  font-family: var(--mono);
  font-size: var(--text-xs);
  line-height: 1.6;
  color: var(--muted);
  margin-top: var(--sp-3);
  max-width: 65ch;
}

@media (max-width: 640px) {
  .cs-figure__grid {
    grid-template-columns: 1fr;
  }
}

/* ---- Gallery ---- */

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--sp-4);
  margin-block: var(--sp-12);
}

.gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  cursor: zoom-in;
  transition: opacity var(--dur) var(--ease);
}

.gallery img:hover {
  opacity: 0.85;
}

/* ---- Lightbox ---- */

.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.92);
  z-index: 200;
  align-items: center;
  justify-content: center;
  padding: var(--sp-8);
}

.lightbox.open {
  display: flex;
}

.lightbox img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
}

.lightbox__close {
  position: absolute;
  top: var(--sp-6);
  right: var(--sp-6);
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
}

/* ---- Services Blocks ---- */

.service-block {
  padding-block: var(--sp-16);
  border-bottom: 1px solid var(--border);
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--sp-16);
  align-items: start;
}

.service-block:first-child {
  padding-top: 0;
}

/* The block before #bigger-idea would otherwise stack its muted bottom rule
   right above that section's brighter accent rule. Keep only the accent one,
   and let #bigger-idea close the page without a trailing rule of its own. */
.service-block:has(+ #bigger-idea),
#bigger-idea {
  border-bottom: none;
}

.service-block__name {
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  position: sticky;
  top: var(--sp-24);
}

.service-block__body h2 {
  font-size: var(--text-l);
  margin-bottom: var(--sp-6);
}

.service-block__body p {
  color: var(--muted);
  margin-bottom: var(--sp-8);
}

/* ---- Service media ---- */

/* Auto-fit so a block works with one image or four without a variant class.
   Slots hold the same neutral grey as an empty card thumb until filled. */
.service-media {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--sp-4);
  margin-bottom: var(--sp-8);
}

.service-media__item {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--border);
}

.service-media__item img,
.service-media__item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---- Prototype Week pill ---- */

.prototype-week {
  border: 1px solid var(--accent);
  display: inline-block;
  padding: var(--sp-3) var(--sp-6);
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: var(--sp-8);
  color: var(--accent);
}

/* ---- People / Studio ---- */

.people-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-16);
  margin-block: var(--sp-16);
}

.person__name {
  font-size: var(--text-l);
  margin-bottom: var(--sp-4);
}

.person__role {
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--sp-6);
}

/* ---- Thinking / Essay list ---- */

.essay-list {
  display: flex;
  flex-direction: column;
}

.essay-item {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: var(--sp-8);
  align-items: baseline;
  padding-block: var(--sp-6);
  border-bottom: 1px solid var(--border);
  transition: background var(--dur) var(--ease);
}

.essay-item:hover {
  background: rgba(255,255,255,0.02);
}

.essay-item__date {
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  color: var(--muted);
}

.essay-item__title {
  font-size: var(--text-base);
}

.essay-item__arrow {
  font-family: var(--mono);
  font-size: var(--text-xs);
  color: var(--muted);
}

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

.contact-emails {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-block: var(--sp-8);
}

.contact-email {
  display: flex;
  align-items: baseline;
  gap: var(--sp-6);
  padding-block: var(--sp-4);
  border-bottom: 1px solid var(--border);
  transition: background var(--dur) var(--ease);
}

.contact-email:hover {
  background: rgba(255,255,255,0.02);
}

.contact-email__type {
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  width: 120px;
  flex-shrink: 0;
}

.contact-email__addr {
  font-size: var(--text-base);
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  max-width: 600px;
  margin-top: var(--sp-12);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.form-group label {
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.form-group input,
.form-group select,
.form-group textarea {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--fg);
  font-family: var(--sans);
  font-size: var(--text-base);
  padding: var(--sp-3) var(--sp-4);
  outline: none;
  transition: border-color var(--dur) var(--ease);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--muted);
}

.form-group select option {
  background: var(--bg);
}

.form-group textarea {
  resize: vertical;
  min-height: 120px;
}

.form-submit {
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid var(--fg);
  color: var(--fg);
  padding: var(--sp-4) var(--sp-8);
  cursor: pointer;
  background: transparent;
  transition: background var(--dur) var(--ease),
              color var(--dur) var(--ease);
  align-self: flex-start;
}

.form-submit:hover {
  background: var(--fg);
  color: var(--bg);
}

/* ---- Scroll reveal ---- */

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 600ms var(--ease),
              transform 600ms var(--ease);
}

.reveal.visible {
  opacity: 1;
  transform: none;
}

/* ---- Mobile responsive ---- */

@media (max-width: 768px) {
  .cs-header {
    grid-template-columns: 1fr;
  }

  .service-block {
    grid-template-columns: 1fr;
  }

  .service-block__name {
    position: static;
  }

  .people-grid {
    grid-template-columns: 1fr;
  }

  .essay-item {
    grid-template-columns: 60px 1fr;
  }

  .essay-item__arrow {
    display: none;
  }

  .contact-email {
    flex-direction: column;
    gap: var(--sp-1);
  }

  .contact-email__type {
    width: auto;
  }

  .spec-table {
    grid-template-columns: 120px 1fr;
  }
}

/* Embedded third-party video (YouTube) shown as a body figure. */
.cs-figure--embed iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  background: #0a0a0a;
}

/* Landscape video shown as a body figure. */
.cs-figure--video video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #0a0a0a;
}
/* Grid of short landscape clips (e.g. one per effect). */
.cs-figure__grid--video video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #0a0a0a;
}

/* Instagram embed (public reel). The blockquote is replaced by Instagram's iframe. */
.cs-figure--instagram .instagram-media { background: #0a0a0a; border: 1px solid var(--border); border-radius: 4px; }
.cs-figure--instagram iframe { margin-inline: auto !important; }