/* ==========================================================================
   Unbreakable Media — theme + layout + motion
   Sharp edges (0 radius), dark editorial, generous space.
   ========================================================================== */

/* Brand primary typeface — abeatbyKai (self-hosted) */
@font-face {
  font-family: "abeatbyKai";
  src: url("assets/fonts/abeatbykai-regular.woff2") format("woff2"),
       url("assets/fonts/abeatbykai-regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg:        #000000;
  --text:      #ffffff;
  --accent:    #00aeef;
  --muted:     #9a9aa0;
  --surface:   #0c0c0d;
  --surface-2: #141416;
  --line:      #232327;

  --font-head: "Montserrat", sans-serif;
  --font-body: "Futura", "Futura PT", "Century Gothic", sans-serif;
  --font-brand: "abeatbyKai", "Futura", sans-serif; /* display accents only — no dashes/accents in glyph set */

  --wrap: 1200px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section-pad: clamp(4.5rem, 10vw, 8.5rem);

  --t-fast: 180ms;
  --t-med:  320ms;
  --t-slow: 450ms;
  --ease:   cubic-bezier(.22, .61, .36, 1);
  --ease-pop: cubic-bezier(.34, 1.56, .64, 1);
}

/* ---------- Base ---------- */

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

html { -webkit-text-size-adjust: 100%; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
}

h1, h2, h3 {
  font-family: var(--font-head);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1.08;
  letter-spacing: .01em;
  margin: 0;
}

p { margin: 0; }
p + p { margin-top: 1rem; }

img, video { display: block; max-width: 100%; }

ul, ol { margin: 0; padding: 0; list-style: none; }

[hidden] { display: none !important; }

a { color: inherit; text-decoration: none; }

strong { font-weight: 600; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 100;
  padding: .75rem 1.25rem;
  background: var(--accent);
  color: #000;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-block;
  position: relative;
  overflow: hidden;
  padding: .95rem 1.9rem;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  border: 1px solid transparent;
  transition: background var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
}

.btn--primary {
  background: var(--accent);
  color: #000;
}
.btn--primary:hover {
  background: #33c1f5;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0, 174, 239, .28);
}

.btn--ghost {
  border-color: var(--line);
  color: var(--text);
}
.btn--ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-2px);
}

.btn--lg { padding: 1.15rem 2.6rem; font-size: .875rem; }

/* ---------- Wordmark (logo placeholder) ---------- */

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--font-head);
  font-weight: 400;
  font-size: 1rem;
  letter-spacing: .08em;
  white-space: nowrap;
  margin: 0;
}

.wordmark__clip {
  width: .85em;
  height: .85em;
  background: var(--accent);
  flex: none;
  transition: transform var(--t-med) var(--ease);
}
a.wordmark:hover .wordmark__clip { transform: rotate(90deg); }

.wordmark__accent { color: var(--accent); }

/* Real logo image (header + footer) */
.site-logo { display: inline-flex; align-items: center; }
.site-logo img, img.site-logo { display: block; height: 32px; width: auto; }
.site-logo img { transition: opacity var(--t-med) var(--ease); }
a.site-logo:hover img { opacity: .82; }
img.site-logo--footer { height: 38px; }

/* Brand display face (abeatbyKai) on dash-free accents only */
.site-nav__list a,
.btn,
.trust__line {
  font-family: var(--font-brand);
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background var(--t-med) var(--ease),
              border-color var(--t-med) var(--ease);
}

.site-header__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 1.6rem var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  transition: padding var(--t-med) var(--ease);
}

.site-header.is-condensed {
  background: rgba(0, 0, 0, .88);
  border-bottom-color: var(--line);
  backdrop-filter: blur(10px);
}
.site-header.is-condensed .site-header__inner {
  padding-top: .85rem;
  padding-bottom: .85rem;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 2.25rem;
}

.site-nav__list {
  display: flex;
  gap: 1.9rem;
}

.site-nav__list a {
  position: relative;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--muted);
  padding: .35rem 0;
  transition: color var(--t-fast) var(--ease);
}
.site-nav__list a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-med) var(--ease);
}
.site-nav__list a:hover { color: var(--text); }
.site-nav__list a:hover::after,
.site-nav__list a:focus-visible::after { transform: scaleX(1); }

.btn--nav { padding: .7rem 1.3rem; font-size: .7rem; }

/* Hamburger */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: none;
  border: 1px solid var(--line);
  cursor: pointer;
}
.nav-toggle__bar {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--text);
  transition: transform var(--t-med) var(--ease), opacity var(--t-fast) var(--ease);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Sections (shared) ---------- */

.section {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: var(--section-pad) var(--gutter);
}

.section__head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }

.section__title {
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
}
.section__title::after {
  content: "";
  display: block;
  width: 3.25rem;
  height: 4px;
  margin-top: 1.1rem;
  background: var(--accent);
}

.section__sub {
  margin-top: 1.1rem;
  color: var(--muted);
  font-size: 1.1rem;
  max-width: 44ch;
}

/* ---------- Media placeholders ---------- */

.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background:
    repeating-linear-gradient(-45deg,
      var(--surface) 0 14px,
      var(--surface-2) 14px 28px);
  border: 1px dashed #3a3a40;
  min-height: 120px;
  padding: 1rem;
}

.placeholder__label {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--muted);
  line-height: 1.5;
}
.placeholder__label span {
  display: block;
  margin-top: .4rem;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: .72rem;
  text-transform: none;
  letter-spacing: .04em;
  color: #6a6a70;
}

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

.hero {
  position: relative;
  min-height: min(92vh, 60rem);
  display: flex;
  align-items: center;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  /* Sticky header overlaps the hero; pull it up underneath */
  margin-top: calc(-1 * (44px + 3.2rem));
  padding-top: calc(44px + 3.2rem);
}

/* Hero media block — structure per HERO-VIDEO-BLUEPRINT.md */
.hero__media { position: absolute; inset: 0; overflow: hidden; z-index: 0; }

.hero__video,
.hero__still {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;            /* full-bleed, no letterboxing */
  object-position: center;
}

.placeholder--hero {
  position: absolute;
  inset: 0;
  border: 0;
}

/* Darkens the side the headline sits on so text stays readable */
.hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(
    100deg,
    rgba(0,0,0,.78) 0%,
    rgba(0,0,0,.45) 45%,
    rgba(0,0,0,.10) 100%
  );
}

/* Hero content must sit above the media */
.hero__content {
  position: relative;
  z-index: 1;
  max-width: var(--wrap);
  width: 100%;
  margin: 0 auto;
  padding: clamp(4rem, 9vw, 7rem) var(--gutter);
}

.hero__eyebrow {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .22em;
  color: var(--accent);
}

.hero__title {
  margin-top: 1.2rem;
  font-size: clamp(2.1rem, 5.6vw, 4.3rem);
  max-width: 15ch;
}

.hero__body {
  margin-top: 1.6rem;
  max-width: 58ch;
  color: #d6d6da;
}
.hero__body + .hero__body { margin-top: 1rem; }

.hero__actions {
  margin-top: 2.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* ---------- Trust strip ---------- */

.trust {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: clamp(3rem, 6vw, 4.5rem) var(--gutter);
  border-bottom: 1px solid var(--line);
}

.trust__line {
  text-align: center;
  color: var(--muted);
  font-size: .95rem;
  letter-spacing: .04em;
}

/* Logo marquee — multicolor client marks each sit on their own white cell
   (sharp 0px corners per brand spec). Base styles are the static fallback:
   one wrapped, centred set. The infinite scroll only exists inside
   prefers-reduced-motion: no-preference further down. */

.logo-marquee {
  margin-top: 2.5rem;
  overflow: hidden;
}

.logo-marquee__track { display: flex; }

.logo-marquee__set {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  flex: 1 1 auto;
  min-width: 0;
}

/* Duplicate set is purely for the seamless loop — hidden when static */
.logo-marquee__set + .logo-marquee__set { display: none; }

.logo-cell {
  flex: none;
  margin: .4rem;
  background: #fff;   /* clean white cell keeps multicolor logos intact on black */
}

.logo-cell img {
  display: block;
  width: auto;
  height: 96px;       /* consistent logo height in every cell (padding baked into canvas) */
}

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

.services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 2.1rem 1.9rem;
  transition: transform var(--t-fast) var(--ease-pop),
              border-color var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
}
/* Hover POP — clear lift + scale, accent border, soft cyan glow */
.card:hover {
  transform: translateY(-8px) scale(1.045);
  border-color: var(--accent);
  background: var(--surface-2);
  box-shadow: 0 22px 48px rgba(0, 0, 0, .55),
              0 12px 36px rgba(0, 174, 239, .22),
              inset 0 2px 0 var(--accent);
}

.card__index {
  display: block;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .18em;
  color: var(--accent);
}

.card__title {
  margin-top: .9rem;
  font-size: 1rem;
  letter-spacing: .05em;
}
.card__title small {
  font-size: .72em;
  color: var(--muted);
}

.card p { margin-top: .9rem; color: var(--muted); font-size: .96rem; }

/* ---------- Photo marquee (auto-scrolling strip) ----------
   Same mechanism as the logo marquee: two identical sets inside a
   max-content track that slides one set-width via CSS. Base styles are
   the reduced-motion fallback — a static, horizontally-scrollable strip
   with the duplicate set hidden. The animation only exists inside
   prefers-reduced-motion: no-preference further down. */

.carousel {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.carousel__viewport {
  position: relative;
  overflow: hidden;
}

.carousel__track {
  display: flex;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

.carousel__set {
  display: flex;
  flex: none;
}

/* Duplicate set is purely for the seamless loop — hidden when static */
.carousel__set + .carousel__set { display: none; }

.carousel__slide {
  flex: 0 0 auto;
  width: clamp(230px, 24vw, 330px);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--surface-2);
  margin-right: 1px; /* slide gap lives here so the loop seam matches */
}

.carousel__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
  user-select: none;
}

/* ---------- Panoramic banner band ---------- */

.banner-band {
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  overflow: hidden;
}

.banner-band img {
  display: block;
  width: 100%;
  /* Native ratio ≈ 6:1 on wide screens; on narrow screens keep a readable
     minimum height and let object-fit crop rather than squash the montage. */
  height: clamp(150px, 16.55vw, 400px);
  object-fit: cover;
  object-position: center;
}

/* ---------- Why us ---------- */

.why__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 3rem;
}

.why__list li {
  position: relative;
  padding: 1.35rem 0 1.35rem 2.1rem;
  border-bottom: 1px solid var(--line);
  font-size: 1.05rem;
}
.why__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.85rem;
  width: .8rem;
  height: .8rem;
  background: var(--accent);
}

/* ---------- Workflow ---------- */

.workflow { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); max-width: none; }
.workflow > * { max-width: var(--wrap); margin-left: auto; margin-right: auto; }

.workflow__steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  counter-reset: step;
}

.step {
  border-top: 4px solid var(--accent);
  background: var(--bg);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-left: 1px solid var(--line);
  padding: 1.8rem 1.6rem 2rem;
  transition: transform var(--t-fast) var(--ease-pop),
              border-color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
}
/* Same hover POP treatment as the What-we-do cards */
.step:hover {
  transform: translateY(-8px) scale(1.045);
  border-right-color: var(--accent);
  border-bottom-color: var(--accent);
  border-left-color: var(--accent);
  box-shadow: 0 22px 48px rgba(0, 0, 0, .55),
              0 12px 36px rgba(0, 174, 239, .22);
}

.step__num {
  display: block;
  font-family: var(--font-head);
  font-weight: 400;
  font-size: 2.2rem;
  color: var(--accent);
  line-height: 1;
}

.step__title {
  margin-top: 1rem;
  font-size: .95rem;
  letter-spacing: .05em;
}

.step p { margin-top: .8rem; color: var(--muted); font-size: .93rem; }

/* ---------- Process / BTS ---------- */

.process {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: var(--section-pad) var(--gutter);
}

.process__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.placeholder--wide {
  aspect-ratio: 16 / 9;
  min-height: 0;
}

.process__figure {
  margin: 0;
  border: 1px solid var(--line);
  background: var(--surface);
}

/* Native 3:2 landscape frames — no portrait-to-wide crops, no upscaling */
.process__figure img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.process__figure figcaption {
  padding: .9rem 1.1rem;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .66rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--muted);
  border-top: 1px solid var(--line);
}

/* ---------- Team ---------- */

.team { padding-top: 0; }

/* Marlie (native square) sits centred on top; André + Tuin pair up below
   in identical fixed 4:5 frames so their name/role lines align. */
.team__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  max-width: 56rem;
  margin: 0 auto;
}

.card--team { padding: 0 0 1.9rem; overflow: hidden; }

.card--team-lead {
  grid-column: 1 / -1;
  width: min(100%, 27rem);
  justify-self: center;
}

/* Tuin's placeholder frame matches André's native portrait ratio (4480:6515) */
.placeholder--headshot {
  aspect-ratio: 4480 / 6515;
  border-left: 0;
  border-right: 0;
  border-top: 0;
}

.card__photo {
  width: 100%;
  height: auto;
  border-bottom: 1px solid var(--line);
}

/* Below-lead pair (André + Tuin): shared portrait frame, faces kept high */
.card--team:not(.card--team-lead) .card__photo {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 20%;
}

.card--team .card__title,
.card--team .card__role,
.card--team p { padding-left: 1.9rem; padding-right: 1.9rem; }

.card--team .card__title { margin-top: 1.6rem; }

.card__role {
  margin-top: .35rem;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--accent);
}

.team__network {
  margin-top: 2.75rem;
  color: var(--muted);
  border-left: 4px solid var(--accent);
  padding-left: 1.4rem;
  max-width: 62ch;
}

/* ---------- Audience ---------- */

.audience {
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  max-width: none;
}
.audience > * { max-width: var(--wrap); margin-left: auto; margin-right: auto; }

.audience__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
}

.audience__list li {
  background: var(--bg);
  border: 1px solid var(--line);
  padding: 1.5rem 1.7rem;
  font-size: 1.02rem;
}

.audience__note {
  margin-top: 2.5rem;
  font-family: var(--font-head);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(1rem, 2vw, 1.35rem);
  letter-spacing: .04em;
  line-height: 1.5;
  max-width: 34ch;
}

/* ---------- Selected example + Work (lite YouTube embeds) ---------- */

.example__figure { margin: 0; }

.example__caption {
  margin-top: 1.2rem;
  color: var(--muted);
  font-size: .95rem;
}

/* Click-to-play frame: poster image + play button; iframe injected on demand */
.yt {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--line);
  transition: border-color var(--t-med) var(--ease),
              box-shadow var(--t-med) var(--ease);
}
.yt:hover {
  border-color: var(--accent);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .5),
              0 6px 24px rgba(0, 174, 239, .12);
}

.yt__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.yt__poster img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.yt__play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 84px;
  height: 84px;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, .55);
  border: 1px solid var(--accent);
  transition: background var(--t-fast) var(--ease), transform var(--t-med) var(--ease-pop);
}
.yt__play::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-38%, -50%);
  border-style: solid;
  border-width: 14px 0 14px 24px;
  border-color: transparent transparent transparent var(--accent);
}
.yt__poster:hover .yt__play,
.yt__poster:focus-visible .yt__play {
  background: var(--accent);
  transform: translate(-50%, -50%) scale(1.12);
}
.yt__poster:hover .yt__play::after,
.yt__poster:focus-visible .yt__play::after {
  border-left-color: #000;
}

.yt__iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Work portfolio grid */
.work { padding-top: 0; }

.work__groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3rem 1.5rem;
}

.work__cat {
  font-size: .8rem;
  letter-spacing: .18em;
  color: var(--accent);
  padding-bottom: .8rem;
  margin-bottom: 1.1rem;
  border-bottom: 1px solid var(--line);
}

.work__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}

.work__card .yt__play {
  width: 56px;
  height: 56px;
}
.work__card .yt__play::after {
  border-width: 9px 0 9px 16px;
  transform: translate(-34%, -50%);
}

/* ---------- Reviews ---------- */

/* Surface band (same treatment as .workflow / .audience) so the section
   reads as its own trust block between the Work grid and the CTA. */
.reviews {
  background: var(--surface);
  border-top: 1px solid var(--line);
  max-width: none;
}
.reviews > * { max-width: var(--wrap); margin-left: auto; margin-right: auto; }

.reviews__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}

/* Quote card — .card shell (hover lift + accent come for free); black card
   on the surface band, same figure-reset approach as .process__figure. */
.card--review {
  margin: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

/* Oversized accent quotation mark — decorative, pure CSS */
.card--review::before {
  content: "\201C";
  display: block;
  height: .48em;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 3.4rem;
  line-height: 1;
  color: var(--accent);
}

/* Quotes stay on the body face — they carry em-dashes/colons the brand
   display font has no glyphs for. */
.card__quote { margin: 1.2rem 0 0; }
.card__quote p {
  margin-top: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  color: #d6d6da;
}

/* Attribution — small-label treatment; brand face is safe here
   (client names are dash- and accent-free). */
.card__client {
  margin-top: auto;
  padding-top: 1.5rem;
  font-family: var(--font-brand);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--accent);
}

/* ---------- Blog ---------- */

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

/* Post card — .card shell with padding moved into __body so the
   thumbnail bleeds to the edges (same approach as .card--team). */
.post-card {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

.post-card__media {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
.post-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.post-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 1.6rem 1.6rem 1.7rem;
}

.post-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.post-card__chip {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .6rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: .32rem .6rem;
}

.post-card .card__title {
  margin-top: 1.1rem;
  font-size: .92rem;
  line-height: 1.4;
}
.post-card .card__title:first-child { margin-top: 0; }

.post-card p { font-size: .93rem; }

.post-card__foot {
  margin-top: auto;
  padding-top: 1.4rem;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .64rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--muted);
}
.post-card__foot time { color: var(--text); }

/* ---------- Article (blog post pages) ---------- */

.article {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 4.5rem) var(--gutter) var(--section-pad);
}

.article__back-top {
  margin-bottom: 1.6rem;
}

.article__back {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--muted);
  transition: color var(--t-fast) var(--ease);
}
.article__back:hover { color: var(--accent); }

/* Hero image spans the readable measure; sharp edges per brand spec */
.article__hero {
  margin: 0 auto 2.2rem;
  border: 1px solid var(--line);
  background: var(--surface-2);
  overflow: hidden;
}
.article__hero img {
  width: 100%;
  height: auto;
  display: block;
}

.article__header {
  max-width: min(72ch, 100%);
  margin: 0 auto 2.2rem;
}

.article__chips {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1.1rem;
}

.article__title {
  font-size: clamp(1.6rem, 3.6vw, 2.5rem);
  line-height: 1.12;
}

.article__meta {
  margin-top: 1.3rem;
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  align-items: baseline;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .66rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--muted);
}
.article__meta time { color: var(--text); }
.article__meta .article__dot { color: var(--accent); }

/* Body copy — comfortable measure, generous line-height */
.article__body {
  max-width: min(72ch, 100%);
  margin: 0 auto;
  line-height: 1.78;
  color: #d6d6da;
}

.article__body > * + * { margin-top: 1.2rem; }

.article__body h2 {
  margin-top: 2.6rem;
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  color: var(--text);
  letter-spacing: .04em;
}
.article__body h3 {
  margin-top: 2rem;
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: var(--text);
  letter-spacing: .04em;
}
.article__body h2::after {
  content: "";
  display: block;
  width: 2.5rem;
  height: 3px;
  margin-top: .8rem;
  background: var(--accent);
}

.article__body p { color: #d6d6da; }
.article__body strong { color: var(--text); }
.article__body em { color: #d6d6da; }

.article__body a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--t-fast) var(--ease);
}
.article__body a:hover { color: #33c1f5; }

/* Bulleted / numbered lists inside the body */
.article__body ul,
.article__body ol {
  padding-left: 1.4rem;
  display: grid;
  gap: .55rem;
}
.article__body ul { list-style: none; }
.article__body ul > li {
  position: relative;
  padding-left: 1.4rem;
}
.article__body ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: .5rem;
  height: .5rem;
  background: var(--accent);
}
.article__body ol { list-style: decimal; }
.article__body ol > li { padding-left: .4rem; }
.article__body ol > li::marker {
  color: var(--accent);
  font-family: var(--font-head);
  font-weight: 600;
}
.article__body li > ul,
.article__body li > ol { margin-top: .55rem; }

/* Images within the article body — full width of the measure */
.article__body figure {
  margin: 2rem 0;
  border: 1px solid var(--line);
  background: var(--surface);
}
.article__body figure img {
  width: 100%;
  height: auto;
  display: block;
}
.article__body figure figcaption {
  padding: .8rem 1.1rem;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .64rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--muted);
  border-top: 1px solid var(--line);
}

/* Pull quotes (client testimonials in-body) */
.article__body blockquote {
  margin: 2rem 0;
  padding: 1.2rem 0 1.2rem 1.5rem;
  border-left: 4px solid var(--accent);
  font-family: var(--font-body);
  font-size: 1.08rem;
  color: var(--text);
}
.article__body blockquote p { color: var(--text); }

/* Click-to-play video embed inside the article (reuses .yt pattern) */
.article__video {
  margin: 2.2rem 0;
}
.article__video .yt { aspect-ratio: 16 / 9; }
.article__video-note {
  margin-top: .9rem;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .64rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--muted);
}

/* Tags row (chips reuse the post-card chip styling) */
.article__tags {
  max-width: min(72ch, 100%);
  margin: 3rem auto 0;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}
.article__tags-label {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .64rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--muted);
  margin-bottom: 1rem;
}
.article__tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.article__tag {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .6rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: .32rem .6rem;
}

.article__back-bottom {
  max-width: min(72ch, 100%);
  margin: 2.4rem auto 0;
}

/* ---------- Soft CTA ---------- */

.cta {
  text-align: center;
  border-top: 1px solid var(--line);
  max-width: none;
}

.cta__inner { max-width: 46rem; margin: 0 auto; }

.cta .section__title::after { margin-left: auto; margin-right: auto; }

.cta__body {
  margin-top: 1.6rem;
  color: var(--muted);
  font-size: 1.08rem;
}

.cta .btn { margin-top: 2.4rem; }

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

.site-footer {
  border-top: 1px solid var(--line);
  background: var(--surface);
}

.site-footer__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: clamp(3rem, 6vw, 4.5rem) var(--gutter);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem 3rem;
  align-items: start;
}

.wordmark--footer { font-size: .9rem; }

.site-footer__contact {
  font-style: normal;
  display: grid;
  gap: .4rem;
  color: var(--muted);
  font-size: .95rem;
}
.site-footer__contact a {
  color: var(--text);
  transition: color var(--t-fast) var(--ease);
}
.site-footer__contact a:hover { color: var(--accent); }

.site-footer__social {
  display: flex;
  gap: 1.6rem;
}
.site-footer__social a {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--muted);
  transition: color var(--t-fast) var(--ease);
}
.site-footer__social a:hover { color: var(--accent); }

.site-footer__legal {
  grid-column: 1 / -1;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
  color: #6a6a70;
  font-size: .85rem;
}

/* ==========================================================================
   Motion — everything non-essential lives inside no-preference
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {

  /* Directional reveals shift children sideways during entrance; clip the
     transient overflow without creating a scroll container (sticky-safe). */
  body { overflow-x: clip; }

  /* Scroll reveal (staggering handled per-child via --d set in script.js).
     Gated on html.js so content is never hidden if scripts don't run. */
  .js .reveal,
  .js [data-stagger] > * {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity var(--t-slow) var(--ease),
                transform 560ms var(--ease);
    transition-delay: var(--d, 0ms);
  }
  /* POP variant — overshoot entrance for card sections (services, workflow,
     team, work). Same observer, punchier curve. */
  .js [data-stagger="pop"] > * {
    transform: translateY(34px) scale(.92);
    transition: opacity 480ms var(--ease),
                transform 640ms var(--ease-pop);
    transition-delay: var(--d, 0ms);
  }

  .reveal.in,
  .reveal.in [data-stagger] > *,
  [data-stagger].in > * {
    opacity: 1;
    transform: none;
  }

  /* Directional reveals — section headings SLIDE in from the left while
     supporting copy rises with extra travel (hero keeps its own sequence). */
  .js .reveal .section__title,
  .js .reveal .work__cat {
    opacity: 0;
    transform: translateX(-48px);
    transition: opacity 600ms var(--ease),
                transform 600ms var(--ease);
  }
  .js .cta.reveal .section__title { transform: translateY(32px); } /* centred heading rises */
  .js .reveal .section__sub,
  .js .reveal .trust__line,
  .js .reveal .team__network,
  .js .reveal .audience__note,
  .js .reveal .cta__body,
  .js .reveal .example__caption {
    opacity: 0;
    transform: translateY(34px);
    transition: opacity 620ms var(--ease) 120ms,
                transform 620ms var(--ease) 120ms;
  }

  /* Why-us bullets slide in from alternating sides (odd left, even right) */
  .js .why__list > li:nth-child(odd)  { transform: translateX(-40px); }
  .js .why__list > li:nth-child(even) { transform: translateX(40px); }

  /* Review cards slide in from alternating sides, keeping the pop curve */
  .js .reviews__grid > :nth-child(odd)  { transform: translateX(-44px) translateY(14px) scale(.96); }
  .js .reviews__grid > :nth-child(even) { transform: translateX(44px) translateY(14px) scale(.96); }

  /* Settled state for every directional variant above */
  .js .reveal.in .section__title,
  .js .reveal.in .work__cat,
  .js .reveal.in .section__sub,
  .js .reveal.in .trust__line,
  .js .reveal.in .team__network,
  .js .reveal.in .audience__note,
  .js .reveal.in .cta__body,
  .js .reveal.in .example__caption,
  .js .reveal.in .why__list > li,
  .js .reveal.in .reviews__grid > * {
    opacity: 1;
    transform: none;
  }

  /* Section headings: accent underline draws in as the section reveals */
  .js .reveal .section__title::after {
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 700ms var(--ease) 250ms;
  }
  .js .cta.reveal .section__title::after { transform-origin: center; }
  .js .reveal.in .section__title::after { transform: scaleX(1); }

  /* Button shine sweep on hover */
  .btn::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -80%;
    width: 55%;
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .3), transparent);
    transform: skewX(-18deg);
    pointer-events: none;
  }
  .btn:hover::before,
  .btn:focus-visible::before {
    animation: btn-shine 650ms var(--ease);
  }
  @keyframes btn-shine {
    to { left: 130%; }
  }

  /* Hero entrance sequence */
  .hero__eyebrow, .hero__title, .hero__body, .hero__actions {
    opacity: 0;
    transform: translateY(22px);
    animation: hero-in 640ms var(--ease) forwards;
  }
  .hero__eyebrow          { animation-delay: 120ms; }
  .hero__title            { animation-delay: 260ms; }
  .hero__body             { animation-delay: 430ms; }
  .hero__body + .hero__body { animation-delay: 540ms; }
  .hero__actions          { animation-delay: 680ms; }

  @keyframes hero-in {
    to { opacity: 1; transform: none; }
  }

  /* Slow Ken Burns drift on a hero still image only (the video moves on its own) */
  .hero__still,
  .placeholder--hero {
    animation: ken-burns 26s var(--ease) infinite alternate;
    will-change: transform;
  }
  @keyframes ken-burns {
    from { transform: scale(1) translateX(0); }
    to   { transform: scale(1.07) translateX(-1.5%); }
  }

  /* Infinite logo marquee — two identical sets, track slides one set-width.
     Spacing lives on .logo-cell margins so the loop seam is invisible. */
  .logo-marquee {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  }
  .logo-marquee__set { flex: none; flex-wrap: nowrap; }
  .logo-marquee__set + .logo-marquee__set { display: flex; }
  .logo-marquee__track {
    width: max-content;
    animation: logo-scroll 48s linear infinite;
  }
  .logo-marquee:hover .logo-marquee__track,
  .logo-marquee:focus-within .logo-marquee__track {
    animation-play-state: paused;
  }
  @keyframes logo-scroll {
    to { transform: translateX(-50%); }
  }

  /* Infinite photo marquee — identical mechanism to the logo marquee:
     two identical sets, the track glides one set-width (-50%) and loops.
     Slower than the logos because the photos are large. */
  .carousel__viewport {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  }
  .carousel__set + .carousel__set { display: flex; }
  .carousel__track {
    width: max-content;
    overflow: visible;
    animation: photo-scroll 40s linear infinite;
  }
  .carousel:hover .carousel__track,
  .carousel:focus-within .carousel__track {
    animation-play-state: paused;
  }
  @keyframes photo-scroll {
    to { transform: translateX(-50%); }
  }

  /* Parallax targets ([data-parallax]) get their transform from script.js;
     hint the compositor and hide the drift overflow. */
  [data-parallax] { will-change: transform; }

  /* Work cards: poster zoom on hover */
  .yt__poster img { transition: transform var(--t-slow) var(--ease); }
  .work__card:hover .yt__poster img { transform: scale(1.06); }
  .yt--featured:hover .yt__poster img { transform: scale(1.025); }

  /* Blog cards: thumbnail zoom on hover (lift comes from .card:hover) */
  .post-card__media img { transition: transform var(--t-slow) var(--ease); }
  .post-card:hover .post-card__media img { transform: scale(1.06); }
}

/* Accessibility: no autoplay motion for users who opt out — show the still.
   Swap the placeholder color for hero-poster.jpg once supplied:
   background: #000 center/cover no-repeat url("assets/video/hero-poster.jpg"); */
@media (prefers-reduced-motion: reduce) {
  .hero__video { display: none; }
  .hero__media { background: #000 center/cover no-repeat url("assets/video/hero-poster.jpg"); }
}

/* ==========================================================================
   Responsive — 900px / 620px
   ========================================================================== */

@media (max-width: 900px) {

  .nav-toggle { display: flex; }

  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: rgba(0, 0, 0, .96);
    border-bottom: 1px solid var(--line);
    padding: 1rem var(--gutter) 1.75rem;
    display: none;
  }
  .site-nav.is-open { display: flex; }

  .site-nav__list {
    flex-direction: column;
    gap: 0;
  }
  .site-nav__list a {
    display: block;
    padding: .95rem 0;
    font-size: .85rem;
    border-bottom: 1px solid var(--line);
  }
  .site-nav__list a::after { display: none; }

  .btn--nav { margin-top: 1.25rem; text-align: center; }

  .site-header { background: rgba(0, 0, 0, .88); border-bottom-color: var(--line); }

  .hero { margin-top: 0; padding-top: 0; }

  .services__grid { grid-template-columns: repeat(2, 1fr); }

  .blog-grid { grid-template-columns: repeat(2, 1fr); }

  .logo-cell img { height: 80px; }

  .carousel__slide { width: 42vw; }

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

  .workflow__steps { grid-template-columns: repeat(2, 1fr); }

  .card--team .card__title,
  .card--team .card__role,
  .card--team p { padding-left: 1.2rem; padding-right: 1.2rem; }
}

@media (max-width: 620px) {

  body { font-size: 1rem; }

  /* Mobile hero: show the FULL video instead of cropping its sides. The media
     becomes a full-width 16:9 band at the top; the headline flows below it.
     (Desktop is untouched — this only applies on phones.) */
  .hero { display: block; min-height: 0; }
  .hero__media { position: relative; inset: auto; width: 100%; aspect-ratio: 16 / 9; }
  .hero__scrim { display: none; }
  .hero__content { padding-top: 2rem; }

  .services__grid,
  .workflow__steps,
  .team__grid,
  .process__grid,
  .work__groups,
  .reviews__grid,
  .blog-grid,
  .audience__list { grid-template-columns: 1fr; }

  .card--team-lead { width: 100%; }

  .logo-cell img { height: 68px; }

  .carousel__slide { width: 72vw; }

  .hero__actions .btn { width: 100%; text-align: center; }

  .site-footer__inner { grid-template-columns: 1fr; }
  .site-footer__social { flex-wrap: wrap; }
}