/* ============================================================================
   McBride Digital — Phase II homepage
   Owned by Task 1. Consumes css/tokens.css; defines no colour or size of its
   own that is not derived from a token.
   ============================================================================ */

/* ============================================================================
   HERO
   ============================================================================ */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-block: calc(var(--nav-height) + var(--space-5)) var(--space-6);
  overflow: hidden;
  isolation: isolate;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--dark-blue);   /* what shows while the poster loads */
}

/* The media layer is the full hero, deliberately. An earlier version widened
   it past the right edge to push the bulb clear of the headline; that worked
   for contrast but cropped the screw base and the cable off the frame, and the
   whole bulb is the shot. The headline is sized to stay off the glass instead
   — see .hero__inner. */

.hero__video,
.hero__still {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The still only stands in under reduced motion — see the block at the bottom
   of this file. */
.hero__still { display: none; }

/* Scrim: heaviest over the copy, lightest over the bulb. Measured rather than
   eyeballed — white on the composited result is 15.96:1 at worst across the
   video's four brightest moments in the headline zone. */
.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right,
              rgba(4, 9, 29, 0.55) 0%,
              rgba(4, 9, 29, 0.38) 45%,
              rgba(4, 9, 29, 0.15) 100%);
}

/* Held to the left of the container, not centred in it: the copy sits on the
   dark half of the frame and the bulb keeps the right.

   This width is what keeps the headline off the bulb, now that the video is
   framed whole. With cover at a typical desktop aspect the bulb's glass starts
   around 57% of the viewport; the container is already inset (14% of a 1600px
   viewport), so a column of about 34rem lands the headline's right edge near
   47% — clear of the glass with room, at every width, because the container's
   inset shrinks as the viewport does and the two roughly cancel.

   It also sets the type size: the H1 below is 9.5cqw of this column. */
.hero__inner {
  max-width: 34rem;
  margin-right: auto;
  container-type: inline-size;
}

/* This headline breaks by hand after "Marketing Solutions" and that break is
   the whole point, so the line must never wrap again underneath it.

   "Marketing Solutions" measures 10.19em in Montserrat 700 at -0.02em, so it
   fits whenever the font size is at or under 9.81% of the column. Expressing
   that as cqw makes it true by construction, at any width, without having to
   guess how much a scrollbar took: the type scale applies until the line would
   overflow, and the column takes over from there. A vw-based guess got this
   wrong twice — at 386px the line still spilled to a second row. */
.hero__title {
  font-size: min(var(--fs-display), 9.5cqw);
  font-weight: var(--fw-bold);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  text-wrap: initial;   /* never balance; the breaks are authored */
}

.hero__sub {
  margin-top: var(--space-3);
  font-size: var(--fs-lead);
  font-weight: var(--fw-light);
  color: var(--ink-muted);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-5);
}

/* ============================================================================
   TRUSTED BY
   ============================================================================ */

.trusted {
  padding-block: var(--space-5);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--dark-blue);
}

.trusted__label {
  margin-bottom: var(--space-4);
  color: var(--ink-subtle);
}

.marquee {
  overflow: hidden;
  cursor: grab;
  /* Claim horizontal gestures for the strip and leave vertical ones to the
     page, so dragging the logos never fights the scroll on a phone. */
  touch-action: pan-y;
}
.marquee.is-dragging { cursor: grabbing; }

.marquee__track {
  display: flex;
  width: max-content;
  will-change: transform;
}

.marquee__set {
  display: flex;
  align-items: center;
  gap: var(--space-7);
  padding-right: var(--space-7);
  margin: 0;
  opacity: 0.55;
  transition: opacity var(--dur) var(--ease);
}

.marquee:hover .marquee__set,
.marquee:focus-within .marquee__set { opacity: 1; }

.marquee__set img {
  height: 34px;
  width: auto;
  max-width: 150px;
  object-fit: contain;
  /* The logos arrive in assorted colours; flatten them to white so the strip
     reads as one row rather than nine brand marks competing. */
  filter: brightness(0) invert(1);
  /* A dragged image would otherwise be picked up by the browser's own
     drag-and-drop and never reach the marquee's pointer handlers. */
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
}

/* ============================================================================
   WHAT WE DO
   ============================================================================ */

.services-preview {
  padding-block: var(--space-section);
}

.services-preview__head {
  max-width: 34ch;
  margin-bottom: var(--space-6);
}

.services-preview__title {
  margin-top: var(--space-2);
  font-size: var(--fs-h2);
  letter-spacing: var(--ls-display);
}

.svc-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}

/* Each card opens on a hairline with the number sitting on it — the same
   call-sheet device the services page runs on, so the two read as one
   sequence broken across two pages. */
.svc-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
  transition: border-color var(--dur) var(--ease);
}

.svc-card:hover { border-top-color: var(--electric-blue); }

.svc-card__num {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  color: var(--electric-blue);
}

.svc-card__name {
  margin-top: var(--space-4);
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.01em;
}

.svc-card__blurb {
  margin-top: var(--space-1);
  color: var(--ink-subtle);
  font-size: var(--fs-small);
}

.svc-card__arrow {
  margin-top: auto;
  padding-top: var(--space-3);
  color: var(--electric-blue);
  transition: transform var(--dur) var(--ease);
}
.svc-card:hover .svc-card__arrow { transform: translateX(6px); }

.services-preview__all { margin-top: var(--space-6); }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--electric-blue);
}

.text-link__arrow { transition: transform var(--dur) var(--ease); }
.text-link:hover .text-link__arrow { transform: translateX(5px); }

/* The closing "Let's Talk." block lives in css/reset.css — the services page
   uses the same one, and it is owned by neither task. */

/* ============================================================================
   RESPONSIVE
   ============================================================================ */

@media (max-width: 900px) {
  .svc-cards { grid-template-columns: 1fr; gap: var(--space-4); }
  .svc-card { height: auto; }
  .svc-card__arrow { margin-top: var(--space-3); padding-top: 0; }
}

@media (max-width: 767px) {
  /* The copy now sits over the whole frame rather than beside the bulb, so the
     scrim goes full-width and heavier to keep the headline legible over the
     lit filament. */
  .hero__scrim {
    background: linear-gradient(to right,
                rgba(4, 9, 29, 0.78) 0%,
                rgba(4, 9, 29, 0.70) 100%);
  }

  .hero { min-height: 92svh; }
  .hero__inner { max-width: none; }
  .hero__actions > .btn { flex: 1 1 auto; }

  .marquee__set { gap: var(--space-5); padding-right: var(--space-5); }
  .marquee__set img { height: 28px; max-width: 120px; }
}

/* ============================================================================
   REDUCED MOTION
   The video never autoplays (js/hero-video.js simply does not call play), so
   swap in the lit still. The marquee stands still — js/marquee.js leaves the
   track untransformed — and becomes a normal scrollable row so the logos past
   the fold are still reachable.
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
  .hero__video { display: none; }
  .hero__still { display: block; }

  .marquee {
    overflow-x: auto;
    cursor: default;
  }

  /* One set is enough when nothing is looping. */
  .marquee__set[aria-hidden='true'] { display: none; }
  .marquee__set { opacity: 1; }

  .svc-card:hover .svc-card__arrow,
  .text-link:hover .text-link__arrow { transform: none; }
}