/* =========================================================================
   Magenta - front page sections
   ========================================================================= */

/* =================================================================== Hero */
.hero {
  padding-top: clamp(2.5rem, 1rem + 6vw, 5rem);
  background:
    radial-gradient(60% 55% at 78% 22%, var(--m-tint) 0%, transparent 62%),
    var(--paper);
}

.hero__grid {
  display: grid;
  gap: clamp(2.5rem, 1rem + 5vw, 4.5rem);
  align-items: center;
}

@media (min-width: 940px) {
  .hero__grid { grid-template-columns: 1.08fr 0.92fr; }
}

/* Not --fs-h1. That token tops out at 9.5rem because it was set for the single
   word "MAGENTA"; this headline is a five-word phrase, and at that size it ran
   off the grid. Sized for a line of type instead. */
.hero__title {
  margin: 0 0 var(--sp-5);
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 1.4rem + 5vw, 6rem);
  line-height: 0.92;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  text-wrap: balance;
  max-width: 15ch;
}

.hero__title em {
  font-family: var(--font-hand);
  font-style: normal;
  text-transform: none;
  font-size: 1.15em;
  line-height: 1;
  color: var(--m);
}

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

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-bottom: var(--sp-7);
}

/* Grid rather than wrapping flex: as flex these fell into three stacked rows
   on a phone and cost 164px of height for three short labels. */
.hero__facts {
  display: grid;
  /* 5rem, not 6: at 6rem three columns plus two gaps came to 336px against a
     335px content box and dropped to two rows. */
  grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr));
  gap: var(--sp-4) var(--sp-5);
  margin: 0;
  padding-top: var(--sp-5);
  border-top: 2px solid var(--rule);
}

.hero__facts dt {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.hero__facts dd {
  margin: var(--sp-1) 0 0;
  font-family: var(--font-display);
  font-size: 1.2rem;
  text-transform: uppercase;
}

/* --- Hero media ------------------------------------------------------- */
.hero__media { position: relative; }

.hero__frame {
  position: relative;
  overflow: hidden;
  border: 3px solid var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-hard-lg);
  rotate: -1.4deg;
  aspect-ratio: 4 / 5;
  background: var(--stock);
}

.hero__frame img { width: 100%; height: 100%; object-fit: cover; }
.hero__frame .slot-ph { height: 100%; }

.hero__sticker-a { position: absolute; top: -1.25rem; left: -1rem; z-index: 3; }
.hero__sticker-b { position: absolute; bottom: 1.5rem; right: -1.25rem; z-index: 3; font-family: var(--font-hand); font-size: 1.1rem; text-transform: none; letter-spacing: 0; }

.tape--hero { top: -14px; right: 22%; rotate: 6deg; }

/* The frame is rotated, so its bounding box is wider than its box: at -1.4deg
   a 335px frame measures 345px and eats 5px of the 20px gutter on each side.
   Add the sticker hanging 20px past the right edge and the whole block sat
   flush against the screen. Ease the rotation and bring the stickers inboard
   on narrow screens. */
@media (max-width: 640px) {
  .hero__frame { rotate: -0.7deg; }
  .hero__sticker-a { top: -0.9rem; left: -0.25rem; }
  .hero__sticker-b { right: -0.25rem; bottom: 1rem; }
  .tape--hero { right: 26%; }
}

.hero__scroll {
  /* Block-level flex, not inline-flex: this box carries an explicit width and
     relies on margin-inline:auto to line its left edge up with the wrap. Auto
     margins do not centre an inline-level box, so as inline-flex it sat at
     x:0, hard against the screen edge while the rest of the page was inset by
     the gutter - which read as the cue having lost its styling entirely. */
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-8);
  margin-inline: auto;
  width: min(100% - (var(--gutter) * 2), var(--wrap));
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-soft);
}

.hero__scroll-arrow { animation: nudge 1.8s var(--ease-out) infinite; }

@keyframes nudge {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}

/* =============================================================== Services */
.service-grid {
  display: grid;
  gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
}

.service-card {
  display: flex;
  flex-direction: column;
  border: var(--border);
  border-radius: var(--radius-lg);
  background: var(--paper);
  overflow: hidden;
  transition: transform var(--dur) var(--ease-back), box-shadow var(--dur) var(--ease-out);
}

.service-card:hover {
  transform: translate(-4px, -4px);
  box-shadow: var(--shadow-hard-lg);
}

.service-card__media { position: relative; aspect-ratio: 1 / 1; background: var(--stock); border-bottom: var(--border); }
.service-card__media img { width: 100%; height: 100%; object-fit: cover; }
.service-card__media .slot-ph { height: 100%; }

.service-card__tag {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--y);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 700;
}

.service-card__body { padding: var(--sp-5); }

.service-card__title {
  margin-bottom: var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  text-transform: uppercase;
  letter-spacing: var(--tracking-display);
}

.service-card__body p { margin: 0; font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.6; }

.services__note { margin: var(--sp-8) 0 0; text-align: center; }

/* On a phone the six service cards stacked full width came to 3413px - more
   than four screens for six short paragraphs. Laid on their side with a
   thumbnail they read faster and cost about a quarter of the height. The copy
   is the point in this section, not the picture. */
@media (max-width: 640px) {
  .service-grid { grid-template-columns: 1fr; gap: var(--sp-4); }

  .service-card { flex-direction: row; align-items: stretch; }

  .service-card__media {
    flex: 0 0 116px;
    aspect-ratio: auto;
    border-bottom: 0;
    border-right: var(--border);
  }

  .service-card__tag {
    top: var(--sp-2);
    left: var(--sp-2);
    width: 1.75rem;
    height: 1.75rem;
    font-size: 0.68rem;
  }

  .service-card__body { padding: var(--sp-4); }
  .service-card__title { font-size: 1.15rem; }
  .service-card__body p { font-size: var(--fs-xs); }

  /* The lift-on-hover offset has no meaning on touch and only clips. */
  .service-card:hover { transform: none; box-shadow: none; }
}

/* =================================================================== Work */
.work .work-grid { margin-top: var(--sp-6); }
.tape--card { top: -12px; left: 18%; rotate: -5deg; z-index: 2; }

/* Two up on a phone. Full-width cards ran the section to 3662px; the work is
   photographic so it keeps its image, just at half the width. */
@media (max-width: 640px) {
  .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
  .work-card__title { font-size: 1.05rem; }
  .work-card__client { font-size: 0.95rem; }
  .work-card__meta { font-size: 0.66rem; }
  .tape--card { width: 74px; height: 22px; }
}

/* ======================================================= Doodle placement
   Each mark is pinned to the thing it comments on. All hidden below 700px:
   at phone width there is no margin for a mark to live in, and crowding them
   over the type is worse than leaving them out. */
.doodle--hero-star {
  top: -2.5rem;
  right: 18%;
  width: 42px;
  height: 42px;
}

.doodle--hero-arrow {
  left: -5.5rem;
  bottom: 12%;
  width: 92px;
  height: 80px;
  transform: scaleX(-1) rotate(-12deg);
}

.doodle--services {
  top: -1.75rem;
  right: 2%;
  width: 108px;
  height: 64px;
  rotate: 8deg;
}

.work__cta-wrap { position: relative; display: inline-block; }

.doodle--work-arrow {
  right: -4.75rem;
  top: -2.25rem;
  width: 86px;
  height: 74px;
  transform: rotate(24deg);
}

.doodle--cta-arrow {
  right: -3rem;
  bottom: -1rem;
  width: 96px;
  height: 84px;
  transform: rotate(-8deg);
}

.doodle--cta-sparkle {
  top: 2.5rem;
  right: 8%;
  width: 38px;
  height: 38px;
}

@media (max-width: 700px) {
  .doodle--hero-star,
  .doodle--hero-arrow,
  .doodle--services,
  .doodle--work-arrow,
  .doodle--cta-arrow,
  .doodle--cta-sparkle { display: none; }
}

/* ================================================================== Reels
   Vertical phone footage, shown upright. On narrow screens the strip becomes
   a swipeable rail rather than stacking three tall videos down the page. */
.reel-strip {
  display: grid;
  gap: clamp(1.25rem, 1rem + 1.5vw, 2rem);
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 780px) {
  .reel-strip {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 68%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    padding-bottom: var(--sp-3);
    /* Bleed to the screen edge so the rail reads as scrollable. */
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
  }
  .reel { scroll-snap-align: start; }
}

.reel__frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 9 / 16;
  border: var(--border);
  border-radius: var(--radius-lg);
  background: var(--ink);
  box-shadow: var(--shadow-hard);
  transition: transform var(--dur) var(--ease-back), box-shadow var(--dur) var(--ease-out);
}

.reel:nth-child(even) .reel__frame { rotate: 1.2deg; }
.reel:nth-child(odd) .reel__frame { rotate: -1deg; }

.reel__frame:hover {
  rotate: 0deg;
  transform: translate(-3px, -3px);
  box-shadow: var(--shadow-hard-lg);
}

.reel__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.reel__badge {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  background: var(--m-deep);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 700;
}

.reel__body { padding-top: var(--sp-3); }

.reel__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  text-transform: uppercase;
  letter-spacing: var(--tracking-display);
}

.reel__meta {
  margin: var(--sp-1) 0 0;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.6;
}

/* ================================================================ Process
   A sheet running through the machine. The press shot goes full bleed with
   the title on it, then the stations hang off a rail that fills with the
   scroll — paper advancing, not a bulleted list. */
.process {
  position: relative;
  z-index: var(--z-base);
  /* Not flat --ink. The brand's dark is #333, and a whole section of it reads
     as an empty grey panel; this keeps a dark ground but pulls it toward the
     magenta end so it belongs to the palette rather than sitting outside it. */
  background:
    radial-gradient(120% 80% at 15% 0%, #3a1330 0%, transparent 60%),
    radial-gradient(100% 90% at 90% 100%, #12303a 0%, transparent 55%),
    #241726;
  color: var(--paper);
  overflow: clip;
}

/* Brand shapes behind the steps, well back so the type stays first. */
.process__shapes {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: clip;
}

.process__shapes .blob {
  position: absolute;
  width: auto;
}

.blob--process-a {
  color: var(--m);
  height: 46rem;
  right: -14rem;
  top: 46%;
  opacity: 0.22;
}

.blob--process-b {
  color: var(--teal);
  height: 34rem;
  left: -12rem;
  bottom: 4%;
  opacity: 0.2;
}

.blob--process-c {
  color: var(--y);
  height: 20rem;
  right: 18%;
  bottom: -6rem;
  opacity: 0.14;
}

@media (max-width: 820px) {
  .blob--process-a { height: 30rem; right: -12rem; }
  .blob--process-b { height: 22rem; left: -9rem; }
  .blob--process-c { display: none; }
}

/* Steps and rail sit above the shapes. */
.process__stations { z-index: 1; }

/* ------------------------------------------------------------ Press band */
.process__band {
  position: relative;
  display: grid;
  align-items: end;
  min-height: clamp(24rem, 18rem + 26vw, 40rem);
  overflow: clip;
  isolation: isolate;
}

.process__band-media {
  position: absolute;
  inset: -8% 0;
  z-index: 0;
}

.process__band-media img,
.process__band-media .slot-ph {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Ink wash so the type holds over any exposure that comes back from the
   shoot — the photograph is not yet taken, so the section cannot depend on
   it being dark in the right places. */
.process__band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to top,
    rgba(13, 13, 13, 0.94) 0%,
    rgba(13, 13, 13, 0.72) 38%,
    rgba(13, 13, 13, 0.28) 100%
  );
}

.process__band-inner {
  position: relative;
  z-index: 2;
  padding-block: var(--sp-8) var(--sp-7);
}

.process__title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-3) var(--sp-4);
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 1.2rem + 6vw, 6.5rem);
  line-height: 0.9;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--paper);
  margin-bottom: var(--sp-5);
}

.process__title em {
  font-family: var(--font-hand);
  font-style: normal;
  text-transform: none;
  font-size: 0.92em;
  color: var(--y);
}

/* The rule between "from file" and "to finish" is the sheet's travel. */
.process__title-rule {
  flex: 1 1 4rem;
  min-width: 3rem;
  height: 3px;
  background: var(--m);
  position: relative;
  align-self: center;
}

.process__title-rule::after {
  content: "";
  position: absolute;
  right: -2px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--m);
  transform: translateY(-50%);
}

.process__standfirst {
  max-width: 46ch;
  font-size: var(--fs-lede);
  line-height: 1.4;
  color: rgba(253, 254, 255, 0.82);
  margin: 0;
}

.process__band-bar { position: absolute; inset: auto 0 0 0; z-index: 3; }

/* -------------------------------------------------------------- Stations */
.process__stations {
  position: relative;
  padding-block: clamp(3.5rem, 2rem + 5vw, 6rem);
}

/* The rail sits behind the dots and fills as the block passes the viewport. */
.process__rail {
  position: absolute;
  top: clamp(3.5rem, 2rem + 5vw, 6rem);
  bottom: clamp(6rem, 4rem + 6vw, 9rem);
  left: 0;
  width: 2px;
  background: rgba(253, 254, 255, 0.16);
}

.process__rail-fill {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--m);
  transform-origin: top;
  transform: scaleY(var(--pass, 0));
  transition: transform 120ms linear;
}

.process-list { display: grid; gap: clamp(2rem, 1rem + 3vw, 3.5rem); }

.station {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-2);
  padding-left: var(--sp-6);
}

@media (min-width: 820px) {
  .station {
    grid-template-columns: 8rem minmax(0, 1fr);
    gap: var(--sp-3) var(--sp-7);
    align-items: start;
    padding-left: var(--sp-7);
  }
}

/* Station marker on the rail. Hollow until the step reveals, then inked. */
.station__dot {
  position: absolute;
  left: -5px;
  top: 0.6rem;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--m);
  background: var(--ink);
  transition: background-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-back);
}

.station.is-in .station__dot { background: var(--m); transform: scale(1.35); }

.station__n {
  font-family: var(--font-display);
  font-size: clamp(3rem, 2rem + 4vw, 5.5rem);
  /* 0.82 cropped the digits at their own font size on narrow screens. */
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(253, 254, 255, 0.62);
  transition: color var(--dur-slow) var(--ease-out), -webkit-text-stroke-color var(--dur-slow) var(--ease-out);
}

/* Plate number inks in when the station arrives. */
.station.is-in .station__n {
  color: var(--m);
  -webkit-text-stroke-color: transparent;
}

.station__note {
  margin: 0 0 var(--sp-1);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--y);
}

.station__title {
  margin-bottom: var(--sp-3);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.4rem);
  text-transform: uppercase;
  letter-spacing: var(--tracking-display);
  color: var(--paper);
}

.station__copy {
  margin: 0;
  max-width: 56ch;
  color: rgba(253, 254, 255, 0.74);
}

.process__close { margin: clamp(2.5rem, 1.5rem + 3vw, 4rem) 0 0; padding-left: var(--sp-6); }

.process__close .sticker {
  font-family: var(--font-hand);
  /* Was 1.15rem, which read as a footnote against 5.5rem plate numbers. This
     is the closing remark of the section and needs to hold its own. */
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.2rem);
  padding: 0.5em 1.1em;
  text-transform: none;
  letter-spacing: 0;
  box-shadow: var(--shadow-hard-lg);
}

@media (min-width: 820px) {
  .process__close { padding-left: var(--sp-7); }
}

/* ================================================================= Studio */
.about__grid {
  display: grid;
  gap: clamp(2.5rem, 1.5rem + 4vw, 5rem);
  align-items: center;
}

@media (min-width: 940px) {
  .about__grid { grid-template-columns: 0.95fr 1.05fr; }
}

.about__media { position: relative; }

.about__frame {
  overflow: hidden;
  border: 3px solid var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-hard-lg);
  rotate: 1.6deg;
  aspect-ratio: 4 / 5;
  background: var(--stock);
}

.about__frame img { width: 100%; height: 100%; object-fit: cover; }
.about__frame .slot-ph { height: 100%; }

.about__frame--small {
  position: absolute;
  right: -1.5rem;
  bottom: -2rem;
  width: 42%;
  aspect-ratio: 3 / 4;
  rotate: -5deg;
  z-index: 3;
}

.tape--about { top: -16px; left: 12%; rotate: -8deg; z-index: 4; }

/* At full column width the 4:5 portrait frame came to 53% of a phone screen -
   the same footprint as the hero's, which the hero earns and a bio section
   does not. Setting the two frames side by side keeps the portrait ratio
   intact (cropping it to landscape would cut the subject in half) while
   dropping it to about a third of the viewport.

   The breakpoint tracks the layout switch at 940px, NOT the 640px used
   elsewhere in this file. The overlapping absolute placement below only has
   room in the two-column arrangement; while the grid is still one column the
   small frame's `right: -1.5rem` hangs past the viewport and gets clipped by
   the section. That left a 300px-wide band - large phones in landscape and
   small tablets - where the swatch frame ran off the right edge. */
@media (max-width: 939.98px) {
  .about__media {
    display: flex;
    align-items: flex-end;
    gap: var(--sp-4);
  }

  .about__frame {
    flex: 0 1 62%;
    rotate: 1deg;
  }

  .about__frame--small {
    position: static;
    flex: 0 1 34%;
    width: auto;
    rotate: -3deg;
  }

  .tape--about { left: 6%; }
}

/* The heading carried no bottom margin, so the prose began against it. The
   underline mark made the collision obvious but the spacing was wrong first. */
.about__copy .display { margin-bottom: var(--sp-5); }

.about__signature {
  margin: var(--sp-5) 0;
  font-family: var(--font-hand);
  font-size: clamp(2rem, 1.2rem + 3vw, 3.2rem);
  line-height: 1;
  color: var(--m);
}

/* =========================================================== Client words */
.quote-grid {
  display: grid;
  gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

.quote-note {
  padding: var(--sp-6);
  border: var(--border);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow-hard);
  transition: transform var(--dur) var(--ease-back);
}

.quote-note:nth-child(odd)  { rotate: -1.4deg; }
.quote-note:nth-child(even) { rotate: 1.2deg; }
.quote-note:hover { rotate: 0deg; transform: translateY(-6px); }

.quote-note__body p { margin: 0; font-size: var(--fs-lede); line-height: 1.45; }
.quote-note__body p::before { content: "\201C"; }
.quote-note__body p::after  { content: "\201D"; }

.quote-note__by { margin: var(--sp-5) 0 0; font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.08em; text-transform: uppercase; }
.quote-note__by strong { display: block; }
.quote-note__by span { color: var(--ink-soft); }

/* Pending state is meant to look unfinished. That is the point: nothing here
   pretends to be a real client statement until one exists. */
.quote-note--pending {
  background: repeating-linear-gradient(
    45deg,
    var(--stock) 0 10px,
    var(--paper) 10px 20px
  );
  border-style: dashed;
  box-shadow: none;
}

.quote-note__pending {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  text-transform: uppercase;
  letter-spacing: var(--tracking-display);
  color: var(--ink-soft);
}

.quote-note__hint { margin: var(--sp-2) 0 0; font-family: var(--font-mono); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); }

.testimonials__note {
  margin: var(--sp-6) 0 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--paper);
}

/* ==================================================================== CTA */
.cta__grid {
  display: grid;
  gap: clamp(2.5rem, 1.5rem + 4vw, 5rem);
  /* stretch, not start: the contact column is taller than the map's own
     height, and starting both at the top left the map floating over a block
     of empty ground. */
  align-items: stretch;
}

@media (min-width: 940px) {
  .cta__grid { grid-template-columns: 1.05fr 0.95fr; }
}

/* Closing background, washed back so the copy holds over whatever exposure
   comes back from the shoot. Same reasoning as .process__band::after: the
   photograph is not taken yet, so the section cannot depend on it. */
.cta { position: relative; isolation: isolate; }

.cta__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.cta__bg img,
.cta__bg .slot-ph {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to right,
    var(--paper) 0%,
    color-mix(in srgb, var(--paper) 92%, transparent) 48%,
    color-mix(in srgb, var(--paper) 72%, transparent) 100%
  );
}

/* Everything real sits above the wash. */
.cta > .wrap { position: relative; z-index: 2; }

.cta__copy { position: relative; }

.cta__title {
  margin: 0 0 var(--sp-5);
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 1.2rem + 6vw, 5.5rem);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--m);
}
.cta__title em {
  display: block;
  margin-top: var(--sp-2);
  font-family: var(--font-hand);
  font-style: normal;
  font-size: clamp(1.8rem, 1rem + 4vw, 3.4rem);
  line-height: 1;
  color: var(--m);
}

.cta__list {
  display: grid;
  gap: var(--sp-2);
  margin: var(--sp-6) 0 0;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  letter-spacing: 0.06em;
}

.cta__sticker { display: inline-block; margin-top: var(--sp-6); }

/* ==================================================================== FAQ */
/* Answers stay visible rather than sitting behind a disclosure control. The
   section reads as a printed FAQ sheet: numbered entries, rules between them,
   answer set narrower than the question so the eye finds the question first. */
.faq-list {
  display: grid;
  gap: 0;
  border-top: 2px solid var(--ink);
}

.faq-item {
  padding-block: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border-bottom: 2px solid var(--ink);
}

.faq-item__q {
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  text-transform: uppercase;
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}

.faq-item__num {
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  /* --m-deep, not --m: the bright magenta on the stock ground measures 3.29:1
     at this size. Same hue, 5.72:1. */
  color: var(--m-deep);
}

.faq-item__a {
  /* Indented to clear the number column so answers line up under the question
     text, not under its counter. */
  margin: var(--sp-3) 0 0;
  padding-left: calc(2ch + var(--sp-4));
  max-width: 68ch;
  color: var(--ink-soft);
}

@media (max-width: 600px) {
  .faq-item__a { padding-left: 0; }
}

/* Editor-only backlog. Deliberately plain - it is a work note, not design. */
.faq-pending {
  margin-top: var(--sp-7);
  padding: var(--sp-5);
  border: 2px dashed var(--m);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--m-tint) 60%, transparent);
}

.faq-pending__head,
.faq-pending__how {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  line-height: var(--lh-body);
  letter-spacing: 0.04em;
}

.faq-pending ul {
  margin: var(--sp-4) 0;
  padding-left: 1.2rem;
  display: grid;
  gap: var(--sp-2);
}

.faq-pending li { font-size: var(--fs-sm); }

/* Workshop band closing the studio section. Full width on purpose - it is the
   evidence for the paragraph above it, so it should not sit in a column. */
.about__studio {
  margin: clamp(3rem, 2rem + 4vw, 5rem) auto 0;
  width: min(100% - (var(--gutter) * 2), var(--wrap));
}

.about__studio img,
.about__studio .slot-ph {
  width: 100%;
  height: auto;
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-hard-lg);
}

.about__studio-cap {
  margin-top: var(--sp-4);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* Brand shapes in the hero. These sit where the registration crosses used to,
   and are the same device as the process section so the page reads as one
   identity rather than two. */
.hero { position: relative; overflow: clip; }

.hero__shapes {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: clip;
}

.hero__shapes .blob { position: absolute; width: auto; }

.blob--hero-a {
  color: var(--teal);
  height: 40rem;
  left: -16rem;
  top: -8rem;
  opacity: 0.14;
}

.blob--hero-b {
  color: var(--y);
  height: 26rem;
  right: -8rem;
  bottom: -6rem;
  opacity: 0.3;
}

.hero__grid { position: relative; z-index: 1; }

@media (max-width: 820px) {
  .blob--hero-a { height: 26rem; left: -12rem; }
  .blob--hero-b { height: 16rem; right: -6rem; }
}

/* ========================================================== Hero slider
   Real jobs cycling in the hero. Slides are stacked and cross-faded rather
   than translated, so the frame never changes height and the surrounding
   layout cannot shift as it advances. */
.hero-slider { position: relative; }

.hero-slider__track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}

.hero-slider__slide {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease-out), visibility 0s linear var(--dur);
}

.hero-slider__slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur) var(--ease-out), visibility 0s;
}

.hero-slider__slide img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}

.hero-slider__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: var(--sp-6) var(--sp-4) var(--sp-4);
  display: grid;
  gap: 0.15rem;
  border-radius: 0 0 var(--radius) var(--radius);
  /* Scrim rather than a flat bar: the photographs vary, so the caption cannot
     assume the corner it sits in is dark. */
  background: linear-gradient(to top, rgba(20, 12, 20, 0.92) 0%, rgba(20, 12, 20, 0.7) 55%, transparent 100%);
  color: var(--paper);
}

.hero-slider__caption strong {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  text-transform: uppercase;
  letter-spacing: var(--tracking-display);
  line-height: 1;
}

.hero-slider__caption span {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero-slider__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  margin-top: var(--sp-4);
}

.hero-slider__arrow {
  display: grid;
  place-items: center;
  /* 44px is the comfortable touch target on every platform guideline; 2.6rem
     computed to 42 and missed it. */
  width: 2.75rem;
  height: 2.75rem;
  min-width: 44px;
  min-height: 44px;
  border: var(--border);
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  font-size: 1rem;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-back), background-color var(--dur-fast);
}

.hero-slider__arrow:hover,
.hero-slider__arrow:focus-visible { background: var(--y); transform: translateY(-2px); }

.hero-slider__dots { display: flex; align-items: center; gap: var(--sp-2); }

.hero-slider__dot {
  width: 0.7rem;
  height: 0.7rem;
  padding: 0;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background-color var(--dur-fast), transform var(--dur-fast);
}

.hero-slider__dot.is-active { background: var(--m-deep); transform: scale(1.25); }
.hero-slider__dot:hover { background: var(--y); }

/* Touch targets stay 44px even though the dot itself is small. */
.hero-slider__dot::before {
  content: "";
  position: absolute;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}
.hero-slider__dots { position: relative; }
.hero-slider__dot { position: relative; }

/* Video cards in the work grid. The clips are 9:16 phone footage and the grid
   is 4:5, so the card crops rather than letterboxes — matching the stills
   beside it matters more than showing the whole frame. */
.work-card__media--video { position: relative; overflow: hidden; }

.work-card__media--video .reel__video {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: var(--border);
  border-radius: var(--radius);
  background: var(--ink);
}

/* Contact details live in the copy column now, under the lede. */
.cta__copy .contact-list { margin-top: var(--sp-7); }

/* The map is the whole right-hand column, and fills it. */
.cta__contact { display: grid; }

.cta__contact .contact-map {
  margin-top: 0;
  height: 100%;
  min-height: clamp(18rem, 14rem + 14vw, 30rem);
}

.cta__contact .contact-map iframe { height: 100%; }

@media (max-width: 939px) {
  /* Single column: the map goes back to its own height rather than trying to
     match a row it no longer shares. */
  .cta__contact .contact-map { height: auto; min-height: 0; }
  .cta__contact .contact-map iframe { height: clamp(15rem, 12rem + 12vw, 22rem); }
}