/* Sagar Patel — homepage.
   Loaded after base.css and interaction.css. Nothing here redefines a shared
   primitive; these are the rules the homepage bands need and nothing else. */

/* =============================================================== hero ==== */

.hero {
  position: relative;
  /* The masthead is sticky, which means it is *in flow* and already occupies
     the first 4.25rem of the page. A plain 100svh here makes the hero one
     masthead too tall and pushes the source bar below the fold — subtract it.
     There is no bottom padding: the source bar is the last flex item and
     provides the bottom edge itself. */
  min-height: calc(100svh - 4.25rem);
  display: flex;
  flex-direction: column;
  padding-top: var(--s-7);
  isolation: isolate;
  overflow: clip;
}

/* ---- the monitor wall ---- */

.hero__wall {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--ink-sunk);
}

.wall__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 2px;
  width: 100%;
  height: 100%;
}

.wall__cell {
  position: relative;
  overflow: hidden;
  background: var(--ink-sunk);
}

.wall__cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Off-program monitors are dim and desaturated — that is literally what a
     multiviewer looks like, and it is also what keeps a nine-image background
     from competing with the headline sitting on top of it. */
  opacity: 0.22;
  /* Rack focus: off-program monitors are soft as well as dim. The blur is
     what keeps nine plates' worth of slate text from competing with the
     headline sitting on top of them — it reads as depth, not as a filter. */
  filter: grayscale(0.85) contrast(1.05) blur(1.5px);
  transform: scale(1.04);
  transition:
    opacity var(--motion-slow) var(--ease-out-expressive),
    filter var(--motion-slow) var(--ease-out-expressive),
    transform var(--motion-slow) var(--ease-out-expressive);
}

.wall__cell.is-live img {
  opacity: 0.62;
  filter: grayscale(0) contrast(1) blur(0);
  transform: scale(1);
}

.wall__id {
  position: absolute;
  top: var(--s-3);
  left: var(--s-3);
  font-size: 0.625rem;
  color: var(--paper-faint);
  opacity: 0.5;
  transition: color var(--motion-fast) var(--ease-out-soft);
}

.wall__cell.is-live .wall__id {
  color: var(--tally);
  opacity: 1;
}

/* The tally frame. An inset ring rather than a border so it cannot shift the
   cell's box by a pixel when it appears. */
.wall__tally {
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 0 var(--tally);
  transition: box-shadow var(--motion-fast) var(--ease-out-expressive);
  pointer-events: none;
}

.wall__cell.is-live .wall__tally {
  box-shadow:
    inset 0 0 0 2px var(--tally),
    inset 0 0 40px -12px color-mix(in oklab, var(--tally) 70%, transparent);
}

/* The scrim carries the whole legibility burden for the hero copy. Two stops
   rather than one: a vertical wash for the headline block, and a horizontal
   one so the left column stays dark even when a bright cell lands there. */
.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, var(--ink) 6%, color-mix(in oklab, var(--ink) 72%, transparent) 46%, color-mix(in oklab, var(--ink) 30%, transparent) 100%),
    linear-gradient(to right, var(--ink) 0%, color-mix(in oklab, var(--ink) 40%, transparent) 62%, transparent 100%);
}

/* ---- hero copy ---- */

/* The copy block takes all the slack and bottom-aligns inside it, so the hero
   reads as bottom-weighted without the block ever being positioned out of
   flow. An absolutely-positioned hero is how content ends up below the fold
   on a short laptop; this cannot overflow, it can only get tighter. */
.hero__in {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: var(--s-7);
}

.hero__kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-5);
}

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

.hero__line { display: block; }

/* The second line is the one that carries the idea, so it gets the width axis
   opened up and the tally colour. One emphasis, once. */
.hero__line--em {
  font-stretch: 62%;
  color: var(--tally);
  text-shadow: 0 0 60px color-mix(in oklab, var(--tally) 25%, transparent);
}

.hero__standfirst { margin-bottom: var(--s-6); }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

/* ---- the source bar ---- */

.hero__bar {
  position: relative;
  border-top: 1px solid var(--line);
  background: color-mix(in oklab, var(--ink) 88%, transparent);
  backdrop-filter: blur(8px);
  padding-block: var(--s-3);
}

.hero__bar-in {
  display: flex;
  align-items: center;
  gap: var(--s-5);
}

.hero__bar-in .label { display: inline-flex; align-items: center; gap: var(--s-2); }

.hero__bar-end { margin-left: auto; }

@media (max-width: 46rem) {
  /* Scoped to .hero__bar-in deliberately: the `.hero__bar-in .label` rule
     above is a two-class selector, so a bare `.hero__bar-end` here loses on
     specificity no matter where it sits in the file. */
  .hero__bar-in .hero__bar-end { display: none; }
  .hero { padding-top: var(--s-6); }
}

/* The hero's source bar and the fixed timecode rail both live on the bottom
   edge and, at the top of the page, land on top of each other. The rail has
   nothing to say at 00:00:00:00, so it yields until the reader has scrolled —
   keyed off the same data-lifted flag the masthead already toggles. */
[data-tally-rail] {
  transition:
    opacity var(--motion-fast) var(--ease-out-soft),
    transform var(--motion-fast) var(--ease-out-soft);
}

body:has(#masthead[data-lifted="false"]) [data-tally-rail] {
  opacity: 0;
  transform: translateY(100%);
}

/* ============================================================= ticker ==== */

.ticker {
  overflow: hidden;
  border-block: 1px solid var(--line-soft);
  padding-block: var(--s-5);
}

.ticker__item {
  display: inline-flex;
  align-items: center;
  gap: var(--s-6);
  font-family: var(--face-display);
  font-weight: 600;
  font-stretch: 78%;
  font-size: clamp(1.25rem, 0.9rem + 1.4vw, 2rem);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--paper-faint);
  white-space: nowrap;
  padding-right: var(--s-6);
}

.ticker__sep { color: var(--tally); }

/* =========================================================== services ==== */

.services {
  display: grid;
  gap: 1px;
  background: var(--line-soft);
  border-block: 1px solid var(--line-soft);
}

.service {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-4);
  padding: var(--s-7) 0;
  background: var(--ink);
  transition: background var(--motion-base) var(--ease-out-soft);
}

.service:hover { background: var(--ink-raised); }

.service__index {
  color: var(--paper-faint);
  font-stretch: 62%;
  transition: color var(--motion-base) var(--ease-out-soft);
}

.service:hover .service__index { color: var(--tally); }

.service__body > * + * { margin-top: var(--s-4); }

.service__lede {
  font-size: var(--t-lede);
  color: var(--paper);
  max-width: var(--measure);
}

.service__caps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

@media (min-width: 56rem) {
  .service {
    grid-template-columns: 6rem minmax(0, 1fr);
    gap: var(--s-7);
    padding-inline: var(--s-5);
  }
}

/* =========================================================== selected ==== */

.selected {
  display: grid;
  gap: var(--s-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

.tile {
  display: grid;
  gap: var(--s-4);
  background: var(--ink-raised);
  padding: var(--s-4);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-2);
  transition:
    border-color var(--motion-base) var(--ease-out-expressive),
    background var(--motion-base) var(--ease-out-expressive),
    transform var(--motion-base) var(--ease-out-expressive);
}

.tile:hover {
  background: var(--ink-high);
  border-color: var(--line-loud);
  transform: translateY(-4px);
}

.tile__well {
  display: block;
  overflow: hidden;
  background: var(--ink-sunk);
  border-radius: var(--r-1);
}

.tile__well--wide { aspect-ratio: 16 / 9; }
.tile__well--tall { aspect-ratio: 16 / 9; } /* vertical work is letterboxed in the grid so the row keeps one baseline */

.tile__well img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--motion-slow) var(--ease-out-expressive);
}

.tile:hover .tile__well img { transform: scale(1.03); }

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

.tile__title { color: var(--paper); }

.tile__summary {
  color: var(--paper-dim);
  font-size: var(--t-small);
  line-height: 1.45;
}

.tile__foot { color: var(--paper-faint); }

.selected__more { margin-top: var(--s-7); }

/* ============================================================ clients ==== */

.clients {
  display: grid;
  gap: var(--s-4) var(--s-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  margin-block: var(--s-5) var(--s-4);
}

.clients__item {
  color: var(--paper-faint);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--line-soft);
  transition: color var(--motion-fast) var(--ease-out-soft);
}

.clients__item:hover { color: var(--paper-dim); }

.clients__note { color: var(--tally); opacity: 0.8; }

/* ============================================================ process ==== */

.process {
  display: grid;
  gap: var(--s-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  counter-reset: step;
}

.process__step {
  display: grid;
  gap: var(--s-3);
  align-content: start;
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
}

/* ============================================================ contact ==== */

.contact__grid {
  display: grid;
  gap: var(--s-8);
  align-items: start;
}

@media (min-width: 60rem) {
  .contact__grid { grid-template-columns: 1.1fr 0.9fr; gap: var(--s-9); }
}

.contact__title { margin-bottom: var(--s-5); }

.contact__card {
  background: var(--ink-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  padding: var(--s-6);
  display: grid;
  gap: var(--s-4);
}

.contact__email {
  color: var(--paper);
  word-break: break-word;
  position: relative;
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--line-loud);
  transition: color var(--motion-fast) var(--ease-out-soft), border-color var(--motion-fast) var(--ease-out-soft);
}

.contact__email:hover {
  color: var(--tally);
  border-bottom-color: var(--tally);
}

.contact__prompts-head { margin-top: var(--s-3); }

.contact__prompts { display: grid; gap: var(--s-2); color: var(--paper-dim); }

.contact__prompts li {
  padding-left: var(--s-5);
  position: relative;
  font-size: var(--t-small);
}

.contact__prompts li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 10px;
  height: 1px;
  background: var(--tally);
}

.contact__status { margin-top: var(--s-2); }