/*
 * DCE Media — one-page site.
 *
 * The palette is not invented: it was sampled off Deano's own brand board
 * (the "DCE MEDIA / CONTENT FOR TRADES" post). Near-black ground, hot pink as
 * the single loud accent, sky blue and plum as the supporting pair, off-white
 * for the light sections. Keep it that way — the whole point is that the page
 * looks like his grid.
 */

:root {
  --ink: #08080A;          /* his board reads as pure black; nudged off it for screens */
  --ink-soft: #14141A;
  --pink: #F40A59;         /* sampled #F40A59 — the signature */
  --pink-dark: #C80748;
  --sky: #96C9DC;
  --plum: #391C32;
  --paper: #FDFDFD;
  --paper-2: #F2F2F3;
  --grey: #6B6B72;
  --line: rgba(255, 255, 255, 0.12);
  --line-dark: rgba(8, 8, 10, 0.12);

  --display: "Archivo Black", "Arial Black", Impact, system-ui, sans-serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --wrap: 1140px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 20px;
}

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--pink); color: #fff; padding: 10px 16px; z-index: 100;
}
.skip:focus { left: 8px; top: 8px; }

/* ──────────────────────────────────────────────────────── intro card */
/*
 * Deano on screen, then it slides up and out after three seconds.
 *
 * The exit is a CSS animation with `forwards`, NOT a JS timer, so the card
 * clears itself on any browser that renders the page at all. A splash that
 * depends on script is a splash that can trap someone on a blank screen.
 *
 * `visibility: hidden` at the end of the keyframe is what stops the finished
 * card swallowing taps — an off-screen fixed layer still catches pointer events
 * without it.
 *
 * The photo is contained rather than full-bleed on purpose: the source is only
 * 456px wide, and covering a tall phone screen with it would upscale it into
 * mush. A title card sized to the image looks deliberate; a soft full-screen
 * photo looks broken.
 */
.intro {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  background: var(--ink);
  cursor: pointer;
  animation: intro-out .85s cubic-bezier(.76, 0, .24, 1) 3s forwards;
}

/* `[hidden]`'s display:none loses to `.intro { display: grid }` on specificity,
   so without this the JS clean-up silently does nothing. */
.intro[hidden] { display: none; }

@keyframes intro-out {
  to { transform: translateY(-101%); visibility: hidden; }
}

/* Tap-to-skip: cancel the waiting animation and transition out immediately. */
.intro.is-gone {
  animation: none;
  transform: translateY(-101%);
  transition: transform .5s cubic-bezier(.76, 0, .24, 1);
}

.intro__card { text-align: center; padding: 24px; }

.intro__photo {
  /* Trimmed from 280px to make room for the logo underneath without the card
     running past the bottom of a phone screen. */
  width: min(52vw, 230px);
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 18px;
  margin: 0 auto 26px;
  box-shadow: 0 0 0 3px var(--pink), 0 30px 60px rgba(0, 0, 0, .55);
  animation: intro-photo-in .8s cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes intro-photo-in {
  from { opacity: 0; transform: translateY(18px) scale(.96); }
  to   { opacity: 1; transform: none; }
}

/* The real logo carries its own wordmark, so the card sets no type of its own. */
.intro__logo {
  width: min(46vw, 190px);
  height: auto;
  margin: 0 auto;
  display: block;
  animation: intro-photo-in .8s cubic-bezier(.22, 1, .36, 1) .12s both;
}

.intro__strap {
  margin: 10px 0 0;
  font-size: 12px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--sky);
}

.intro__skip {
  position: absolute; bottom: 28px; left: 0; right: 0;
  text-align: center;
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255, 255, 255, .35);
}

/* Asked for less movement: no card at all, straight to the page. */
@media (prefers-reduced-motion: reduce) {
  .intro { display: none; }
}

/* ───────────────────────────────────────────────────────────── buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  font-family: var(--body);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
  text-decoration: none;
  padding: 15px 26px;
  border: 2px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  transition: transform .15s ease, background-color .15s ease, color .15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--sm { padding: 10px 20px; font-size: 14px; }
.btn--wide { width: 100%; padding-block: 17px; font-size: 16px; }

.btn--pink { background: var(--pink); color: #fff; }
.btn--pink:hover { background: var(--pink-dark); }
.btn--dark { background: var(--ink); color: #fff; }
.btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }
.btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,.08); }

/* ───────────────────────────────────────────────────────────── shapes */
.blob { position: absolute; border-radius: 50%; pointer-events: none; }
.blob--pink { width: 420px; height: 420px; background: var(--pink); top: -190px; left: -140px; opacity: .95; }
.blob--plum { width: 560px; height: 560px; background: var(--plum); right: -230px; bottom: -280px; }
.blob--sky  { width: 200px; height: 200px; background: var(--sky); left: -110px; bottom: 60px; }

.dots {
  position: absolute; width: 132px; height: 132px; pointer-events: none;
  background-image: radial-gradient(var(--pink) 2.2px, transparent 2.2px);
  background-size: 22px 22px;
  opacity: .9;
}
.dots--tr { top: 96px; right: 28px; }
.dots--bl { bottom: 40px; left: 24px; opacity: .55; }

/* ──────────────────────────────────────────────────────────────── nav */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(8, 8, 10, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav__inner { display: flex; align-items: center; gap: 24px; height: 68px; }
.nav__links { display: flex; gap: 26px; margin-left: auto; }
.nav__links a {
  color: rgba(255,255,255,.72); text-decoration: none;
  font-size: 14px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
}
.nav__links a:hover { color: #fff; }
.nav .btn { margin-left: 8px; }

.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }

/*
 * His real mark, lifted from the 1600px original.
 *
 * The transparent gap between the iris and the plum arc is not a mistake: in
 * the artwork that ring IS the background showing through. So the mark only
 * reads correctly on a dark surface — keep it on --ink, never on white.
 */
.logo__mark {
  width: 30px; height: 30px;
  object-fit: contain;
  flex: none;
}
.logo__word {
  font-family: var(--display);
  font-size: 19px; letter-spacing: .04em; color: #fff; line-height: 1;
}
.logo__word span { color: var(--pink); }

/* ─────────────────────────────────────────────────────────────── hero */
.hero {
  position: relative; overflow: hidden;
  background: var(--ink); color: #fff;
  padding-block: 104px 116px;
}
.hero__inner { position: relative; z-index: 2; max-width: 860px; }

.eyebrow {
  margin: 0 0 18px;
  font-size: 13px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: var(--sky);
}
.eyebrow--dark { color: var(--pink); }

.hero h1 {
  font-family: var(--display);
  font-size: clamp(2.6rem, 7.4vw, 5rem);
  line-height: .98;
  letter-spacing: -.015em;
  margin: 0 0 26px;
}
.hero h1 em { font-style: normal; color: var(--pink); }

.lede { font-size: clamp(1.05rem, 2.2vw, 1.25rem); color: rgba(255,255,255,.8); max-width: 640px; margin: 0 0 34px; }

.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }

.hero__strap {
  margin: 44px 0 0; padding-top: 22px; border-top: 1px solid var(--line);
  font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.55);
}
.hero__strap b { color: #fff; }
.hero__strap span { color: var(--pink); }

/* ───────────────────────────────────────────────────────── hero phone */
/*
 * A phone held back-to-you with the camera out, flash pulsing.
 *
 * It sits BEHIND the hero text (z-index 1 against .hero__inner's 2) and is
 * pinned to the right, so it never reflows a word of the copy at any width. The
 * hero already clips its own overflow, which is what lets the phone bleed off
 * the edge instead of widening the page.
 *
 * On a phone it shrinks and drops into the bottom-right corner at low opacity:
 * still there, never fighting the headline for the same pixels.
 */
.phone {
  position: absolute;
  z-index: 1;
  top: 50%;
  right: 6%;
  transform: translateY(-50%) rotate(-7deg);
  width: 236px;
  pointer-events: none;
}

.phone__svg {
  position: relative;
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .55));
}

/* The glow the flash throws onto the air around the phone. */
.phone__halo {
  position: absolute;
  left: 50%;
  top: 22%;
  width: 300px;
  height: 300px;
  margin: -150px 0 0 -150px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 246, 226, .22), rgba(244, 10, 89, .10) 45%, transparent 70%);
  animation: phone-halo 3.6s ease-in-out infinite;
}

/* The bulb itself. The bloom is a drop-shadow so it animates with the fill. */
.phone__flash {
  transform-origin: 152px 66px;
  animation: phone-flash 3.6s ease-in-out infinite;
}

@keyframes phone-flash {
  0%, 62%, 100% {
    opacity: .45;
    filter: drop-shadow(0 0 2px rgba(255, 246, 226, .5));
  }
  70% {
    opacity: 1;
    filter: drop-shadow(0 0 16px rgba(255, 246, 226, .95)) drop-shadow(0 0 34px rgba(255, 246, 226, .6));
  }
  78% {
    opacity: .8;
    filter: drop-shadow(0 0 8px rgba(255, 246, 226, .7));
  }
}

@keyframes phone-halo {
  0%, 62%, 100% { opacity: .25; transform: scale(.94); }
  70%           { opacity: .9;  transform: scale(1.06); }
  78%           { opacity: .45; transform: scale(.98); }
}

/* Between the phone breakpoint and a roomy desktop the headline is wide enough
   to run straight across the phone: at 1000px it overlapped the camera bump by
   103px. Narrow the copy column through that band so the last line wraps before
   the phone lane instead. */
@media (min-width: 901px) and (max-width: 1180px) {
  /* Cap the TEXT, not the wrapper: shrinking .hero__inner would re-centre it and
     break its gutter alignment with every section below. */
  .hero h1,
  .hero .lede { max-width: 560px; }
}

@media (max-width: 1100px) {
  .phone { width: 190px; right: 2%; }
}

@media (max-width: 900px) {
  .phone {
    top: auto;
    bottom: -40px;
    right: -34px;
    width: 168px;
    transform: rotate(-10deg);
    opacity: .5;
  }
}

/* On a narrow phone the two buttons go full width, so the 900px corner position
   put the camera array directly behind "Watch the work". Tuck it further into
   the corner and shrink it: still visible, no longer sitting under a control. */
@media (max-width: 620px) {
  .phone {
    bottom: -78px;
    right: -70px;
    width: 130px;
    opacity: .42;
    transform: rotate(-12deg);
  }
}

/* Asked for less movement: keep the phone, lose the blink. */
@media (prefers-reduced-motion: reduce) {
  .phone__flash,
  .phone__halo { animation: none; }
  .phone__flash { opacity: .85; filter: drop-shadow(0 0 10px rgba(255, 246, 226, .7)); }
  .phone__halo { opacity: .35; }
}

/* ──────────────────────────────────────────────────────────── pillars */
/*
 * The three blocks breathe, and take over from the pointer on hover.
 *
 * The pulse is an INSET GLOW, not a scale. The blocks sit flush against each
 * other (2px gap), so scaling one would shove its seam across its neighbour and
 * the whole strip would wobble. A glow reads as a pulse and leaves the seams
 * dead straight.
 *
 * The three are staggered, so the strip ripples left to right instead of all
 * three throbbing in unison — which looks like a fault rather than a flourish.
 *
 * On hover the idle animation PAUSES and the block lifts. Pausing matters: a
 * block that keeps breathing while you point at it feels like it is ignoring
 * you, and the lift is what makes it feel picked up.
 */
@keyframes pillar-breathe {
  0%, 100% { box-shadow: inset 0 0 0 rgba(255, 255, 255, 0); }
  50%      { box-shadow: inset 0 0 70px rgba(255, 255, 255, 0.16); }
}

@keyframes pillar-icon-float {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-3px) scale(1.07); }
}

.pillars { background: var(--ink); padding-bottom: 6px; }
.pillars__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }

.pillar {
  position: relative;
  padding: 38px 30px 42px;
  color: #fff;
  animation: pillar-breathe 5.2s ease-in-out infinite;
  transition:
    transform .45s cubic-bezier(.22, 1, .36, 1),
    box-shadow .45s ease,
    filter .45s ease;
}
.pillar:nth-child(2) { animation-delay: 1.7s; }
.pillar:nth-child(3) { animation-delay: 3.4s; }

.pillar--pink { background: var(--pink); }
.pillar--plum { background: var(--plum); }
.pillar--sky  { background: var(--sky); color: var(--ink); }

.pillar__icon {
  font-size: 22px; display: block; margin-bottom: 14px;
  animation: pillar-icon-float 5.2s ease-in-out infinite;
  transition: transform .45s cubic-bezier(.22, 1, .36, 1);
}
.pillar:nth-child(2) .pillar__icon { animation-delay: 1.7s; }
.pillar:nth-child(3) .pillar__icon { animation-delay: 3.4s; }

.pillar:hover,
.pillar:focus-within {
  animation-play-state: paused;
  transform: translateY(-6px);
  filter: brightness(1.06);
  box-shadow:
    0 18px 38px rgba(0, 0, 0, .38),
    inset 0 0 90px rgba(255, 255, 255, .2);
  z-index: 2;
}
.pillar:hover .pillar__icon,
.pillar:focus-within .pillar__icon {
  animation-play-state: paused;
  transform: translateY(-2px) scale(1.2);
}
/* Touch has no hover, so give a finger something back on press. */
.pillar:active { transform: translateY(-2px); }

/* Anyone who has asked for less movement gets the hover polish and no pulse. */
@media (prefers-reduced-motion: reduce) {
  .pillar,
  .pillar__icon { animation: none; }
  .pillar:hover,
  .pillar:focus-within { transform: none; }
  .pillar:hover .pillar__icon,
  .pillar:focus-within .pillar__icon { transform: scale(1.1); }
}
.pillar h2 {
  font-family: var(--display); font-size: 1.28rem; line-height: 1.12;
  letter-spacing: .02em; text-transform: uppercase; margin: 0 0 12px;
}
.pillar p { margin: 0; font-size: 15px; opacity: .92; }

/* ────────────────────────────────────────────────────── shared blocks */
.h2 {
  font-family: var(--display);
  font-size: clamp(1.9rem, 4.4vw, 3rem);
  line-height: 1.04; letter-spacing: -.01em;
  margin: 0 0 40px;
}
.h2--light { color: #fff; }

.what { background: var(--paper); padding-block: 92px; }

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.card {
  background: #fff; border: 1px solid var(--line-dark); border-radius: 16px;
  padding: 26px 24px 28px;
  border-top: 4px solid var(--pink);
}
.card h3 { font-size: 1.06rem; font-weight: 700; margin: 0 0 8px; }
.card p { margin: 0; color: var(--grey); font-size: 15px; }

/* ────────────────────────────────────────────────────────────── how it works */

.howto { padding-block: 96px; background: var(--ink); }

.howto__inner {
  display: grid;
  grid-template-columns: 1fr minmax(240px, 320px);
  gap: 56px;
  align-items: center;
}

/* .h2 ships with a 40px bottom margin for sections that end there; this one is followed
   by the lede, which brings its own. */
.howto .h2 { margin-bottom: 0; }

.howto__lede {
  margin: 18px 0 28px;
  max-width: 46ch;
  color: rgba(255, 255, 255, .72);
  font-size: 17px;
  line-height: 1.7;
}

/* The reel is 9:16. aspect-ratio holds the slot before the file loads, so the section does
   not jolt the page down when the video arrives. */
.howto__video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  border-radius: 22px;
  border: 1px solid var(--line);
  background: var(--ink-soft);
  box-shadow:
    0 0 26px rgba(244, 10, 89, .16),
    0 22px 44px rgba(0, 0, 0, .55);
}

@media (max-width: 860px) {
  .howto { padding-block: 72px; }
  .howto__inner { grid-template-columns: 1fr; gap: 34px; }
  /* Capped so a 9:16 video does not become the entire screen on a phone. */
  .howto__player { max-width: 300px; }
}
/* ──────────────────────────────────────────────────────────── clients slider */
.clients {
  background: var(--ink);
  color: #fff;
  padding-block: 84px 92px;
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.clients__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 36px;
  gap: 24px;
  flex-wrap: wrap;
}

.clients__copy { max-width: 680px; }
.clients__copy .h2 { margin-bottom: 16px; }
.clients__lede {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.78);
  margin: 0;
  line-height: 1.6;
}

.clients__controls {
  display: flex;
  gap: 12px;
  align-self: flex-end;
}

.clients__btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--ink-soft);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all .25s cubic-bezier(.22, 1, .36, 1);
}

.clients__btn:hover,
.clients__btn:focus-visible {
  background: var(--pink);
  border-color: var(--pink);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(244, 10, 89, 0.35);
}

.clients__btn:active {
  transform: translateY(0) scale(0.95);
}

.clients__viewport {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  user-select: none;
  padding-inline: max(20px, calc((100vw - var(--wrap)) / 2 + 20px));
  /* Room for the card glow. overflow-y cannot be visible on a horizontal
     scroller, so the halo would be sliced off top and bottom; pad it out and
     pull the same amount back with a negative margin so the section keeps its
     original rhythm. Hover blurs 86px and lifts 6px, hence the asymmetry. */
  padding-block: 56px 60px;
  margin-block: -48px -44px;
}

.clients__viewport::-webkit-scrollbar {
  display: none;
}

.clients__viewport:focus-visible {
  outline: 2px solid var(--pink);
  outline-offset: 4px;
}

.clients__viewport.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
}

.clients__track {
  display: flex;
  gap: 20px;
  width: max-content;
  align-items: stretch;
}

.client-card {
  flex: 0 0 310px;
  background: var(--ink-soft);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-top: 3px solid rgba(244, 10, 89, 0.4);
  border-radius: 16px;
  padding: 22px 20px 24px;
  text-decoration: none;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition:
    transform .35s cubic-bezier(.22, 1, .36, 1),
    border-color .35s ease,
    box-shadow .35s ease;
  outline: none;
  /*
   * Neon sitting behind the card. Built in layers, tightest and lightest first,
   * because that is how a real bulb behaves: a white-hot core, his pink around
   * it, then a wide red falloff into the dark.
   *
   * A stack of box-shadows rather than a filter: filters force the whole card
   * onto its own compositing layer, and fifteen of those scrolling continuously
   * is work the browser does not need to do.
   */
  box-shadow:
    0 0 14px rgba(255, 255, 255, .05),
    0 0 26px rgba(244, 10, 89, .18),
    0 0 58px rgba(219, 18, 42, .13),
    0 14px 30px rgba(0, 0, 0, .45);
}

.client-card:hover,
.client-card:focus-visible {
  transform: translateY(-6px);
  border-top-color: var(--pink);
  border-color: rgba(244, 10, 89, 0.55);
  /* Same lamp, turned up. */
  box-shadow:
    0 0 16px rgba(255, 255, 255, .12),
    0 0 38px rgba(244, 10, 89, .42),
    0 0 86px rgba(219, 18, 42, .28),
    0 20px 40px rgba(0, 0, 0, .55);
}

/* A LIGHT chip, because the real brand marks are drawn for a white page: the
 * All Aspects wordmark is near-black and the CCC emblem is navy, and both
 * disappeared against the dark card. */
.client-card__logo-wrap {
  background: #F4F5F7;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 72px;
  transition: background .3s ease;
}

.client-card:hover .client-card__logo-wrap {
  background: #FFFFFF;
}

/*
 * Ten of the fifteen clients have no logo to use: most trade only through a
 * Facebook or Instagram page, one site is down and one blocks us outright.
 *
 * Rather than leave a hole or invent a mark for somebody else's business, those
 * cards set the NAME on the same chip. Same size, same colour, same weight of
 * presence, so the row reads as one designed thing instead of half a row of
 * missing images.
 */
.client-card__logo-wrap--text {
  padding: 10px 14px;
}

.client-card__wordmark {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: 17px;
  line-height: 1.2;
  letter-spacing: .01em;
  color: #15223D;
  text-align: center;
  /* Long names wrap to two lines rather than shrinking the whole row. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.client-card__logo-wrap img {
  max-height: 52px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

.client-card__body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.client-card__tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--pink);
  margin-bottom: 6px;
}

.client-card__name {
  font-family: var(--display);
  font-size: 1.15rem;
  margin: 0 0 8px;
  line-height: 1.22;
  color: #fff;
}

.client-card__desc {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.5;
  margin: 0 0 16px;
  flex-grow: 1;
}

.client-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--sky);
  margin-top: auto;
  transition: color .2s ease, transform .2s ease;
}

.client-card:hover .client-card__link,
.client-card:focus-visible .client-card__link {
  color: #fff;
}

.client-card:hover .client-card__link span,
.client-card:focus-visible .client-card__link span {
  transform: translateX(4px);
  transition: transform .2s ease;
}

@media (max-width: 640px) {
  .clients { padding-block: 64px 72px; }
  .clients__header { margin-bottom: 24px; }
  .client-card { flex: 0 0 270px; padding: 18px 16px 20px; }
}

/* ─────────────────────────────────────────────────────────── argument */
.argument { background: var(--paper-2); padding-block: 92px; }
.argument__inner { display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: center; }
.argument .h2 { margin-bottom: 26px; }

.ticks { list-style: none; margin: 0 0 26px; padding: 0; }
.ticks li {
  position: relative; padding-left: 42px; margin-bottom: 14px;
  font-size: 1.14rem; font-weight: 600;
}
.ticks li::before {
  content: "✓";
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--pink); color: #fff;
  font-size: 14px; font-weight: 700;
  display: grid; place-items: center;
}

.argument__note { margin: 0 0 14px; font-size: 1.08rem; max-width: 30ch; }
.argument__note em { font-style: normal; color: var(--pink); font-weight: 700; }
.argument__note--big { font-size: 1.24rem; font-weight: 600; }

.argument__fig { margin: 0; }
.argument__fig img { border-radius: 14px; box-shadow: 0 18px 44px rgba(8,8,10,.14); }

/* ─────────────────────────────────────────────────────────────── work */
.work { background: var(--ink); color: #fff; padding-block: 92px; }
.work__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.tile { display: block; border-radius: 14px; overflow: hidden; background: var(--ink-soft); }
.tile img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; transition: transform .35s ease, opacity .2s ease; }
.tile:hover img { transform: scale(1.04); opacity: .9; }
.work__more { margin: 30px 0 0; color: rgba(255,255,255,.65); font-size: 15px; }
.work__more a { color: var(--sky); text-underline-offset: 3px; }

/* ────────────────────────────────────────────────────────────── about */
.about { background: var(--paper); padding-block: 92px; }
.about__inner { display: grid; grid-template-columns: .8fr 1.2fr; gap: 56px; align-items: center; }
.about__fig { margin: 0; position: relative; }
.about__fig img { border-radius: 16px; position: relative; z-index: 1; }
.about__fig::after {
  content: ""; position: absolute; inset: auto -14px -14px auto;
  width: 96px; height: 96px; border-radius: 50%;
  background: var(--pink); z-index: 0;
}
.about__copy p { color: var(--grey); }
.about .h2 { margin-bottom: 18px; }
.about__sig {
  font-family: var(--display); font-size: 1.05rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink) !important; margin-top: 26px;
}
.about__links { display: flex; gap: 10px; margin-top: 22px; }

/* ──────────────────────────────────────────────────────────── contact */
.contact { position: relative; overflow: hidden; background: var(--plum); color: #fff; padding-block: 92px; }
.contact__inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.contact__lede { color: rgba(255,255,255,.82); }
/*
 * His actual contact details. Every row is a real tap target on a phone —
 * mailto, wa.me and tel: — because the whole point of putting them here is that
 * a lead can reach him in one tap rather than composing a DM.
 */
.contact__details {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  border-top: 1px solid rgba(255, 255, 255, .14);
}
.contact__details li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  /* Thin, because the anchor itself carries the padding — see below. */
  padding: 3px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.contact__label {
  flex: none;
  min-width: 96px;
  font-size: 11px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255, 255, 255, .45);
}
.contact__details a {
  color: var(--sky);
  font-size: 15px; font-weight: 600;
  text-decoration: none;
  /* Long email on a narrow phone must wrap rather than push the card sideways. */
  overflow-wrap: anywhere;
  /* The padding lives on the LINK, not the row, so the thing a thumb has to hit
     is ~44px tall rather than the 24px a bare line of text gives you. This is a
     phone-first page for a phone-first bloke; 24px is a mis-tap waiting. */
  display: inline-block;
  padding: 10px 0;
}
.contact__details a:hover,
.contact__details a:focus-visible { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

.contact__where {
  margin: 18px 0 0;
  font-size: 13px; letter-spacing: .04em;
  color: rgba(255, 255, 255, .55);
}

.form { background: #fff; color: var(--ink); border-radius: 18px; padding: 30px 28px 32px; }
.form__row { margin-bottom: 16px; }
.form__two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 6px; letter-spacing: .02em; }
.form label span { color: var(--pink); margin-left: 2px; }
.form input, .form select, .form textarea {
  width: 100%; font: inherit; font-size: 15px;
  padding: 12px 14px;
  border: 1.5px solid var(--line-dark); border-radius: 10px;
  background: #fff; color: var(--ink);
}
.form input:focus, .form select:focus, .form textarea:focus {
  outline: none; border-color: var(--pink); box-shadow: 0 0 0 3px rgba(244,10,89,.15);
}
.form textarea { resize: vertical; }
.form__status { margin: 14px 0 0; font-size: 14px; font-weight: 600; min-height: 1.2em; }
/* The status line can carry his address as a fallback link — it has to be
   obviously tappable, and wrap rather than widen the card on a phone. */
.form__status a {
  color: var(--pink-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}
.form__status[data-state="ok"] { color: #0A7B45; }
.form__status[data-state="err"] { color: var(--pink-dark); }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ───────────────────────────────────────────────────────────── footer */
.foot { background: var(--ink); color: rgba(255,255,255,.6); padding-block: 44px; }
.foot__inner { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.logo--foot .logo__word { font-size: 17px; }
.foot__strap { margin: 0; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }
.foot__strap em { font-style: normal; color: var(--pink); }
.foot__legal { margin: 0; font-size: 13px; }
.foot__legal a { color: var(--sky); }
.foot__pages { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 13px; }
.foot__pages a { color: rgba(255,255,255,.62); text-decoration: none; }
.foot__pages a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* Partner credit, set apart with a hairline so it reads as a credit rather than
   another line of his own footer copy. */
.foot__partner {
  width: 100%;
  margin: 6px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: 13px;
}
.foot__partner a { color: #fff; font-weight: 700; text-decoration: none; }
.foot__partner a span { color: var(--pink); }
.foot__partner a:hover { color: var(--pink); }


/* ─────────────────────────────────────────────────────── areas covered */
.areas { background: var(--ink); color: #fff; padding-block: 92px; }
.areas__lede {
  margin: 0 0 40px;
  max-width: 62ch;
  color: rgba(255, 255, 255, .72);
  font-size: 1.04rem;
}
.areas__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.area {
  background: rgba(255, 255, 255, .045);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 24px 22px 22px;
}
.area h3 {
  margin: 0 0 10px;
  font-size: 1.04rem; font-weight: 700;
  color: #fff;
}
/* The town list is the part a local search actually matches on, so it is sized
   and coloured to be read, not tucked away as a caption. */
.area__towns {
  margin: 0 0 12px;
  font-size: 14.5px; font-weight: 600;
  color: var(--sky);
  line-height: 1.7;
}
.area__note { margin: 0; font-size: 14.5px; color: rgba(255, 255, 255, .6); }
.areas__cta { margin: 36px 0 0; }

/* ───────────────────────────────────────────────────────────────── FAQ */
.faq { background: var(--paper-2); padding-block: 92px; }
.faq__list { display: grid; gap: 12px; max-width: 860px; }
.faq__item {
  background: #fff;
  border: 1px solid var(--line-dark);
  border-radius: 12px;
  overflow: hidden;
}
.faq__item summary {
  /* list-style on the summary itself kills the default triangle everywhere except
     older Safari, which needs the ::-webkit-details-marker rule below. */
  list-style: none;
  cursor: pointer;
  padding: 18px 52px 18px 22px;
  font-weight: 700; font-size: 1rem;
  position: relative;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:focus-visible {
  outline: 2px solid var(--pink);
  outline-offset: -2px;
}
/* Drawn rather than a glyph so it can rotate; the pseudo-element is the only
   thing that moves, which keeps the open/close off the layout. */
.faq__item summary::after {
  content: "";
  position: absolute;
  right: 22px; top: 50%;
  width: 9px; height: 9px;
  margin-top: -6px;
  border-right: 2.5px solid var(--pink);
  border-bottom: 2.5px solid var(--pink);
  transform: rotate(45deg);
  transition: transform .18s ease;
}
.faq__item[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq__a { padding: 0 22px 20px; }
.faq__a p { margin: 0; color: var(--grey); font-size: 15.5px; }
@media (prefers-reduced-motion: reduce) {
  .faq__item summary::after { transition: none; }
}


/* ──────────────────────────────────────────────────────── trade reels */
.reels { background: var(--paper-2); padding-block: 92px; }
/* Belt and braces: [hidden] is a UA-stylesheet default that any stray
   display rule would beat, and this section being visible while empty is
   exactly the thing it exists to prevent. */
.reels[hidden] { display: none; }
.reels__lede { margin: 0 0 36px; max-width: 58ch; color: var(--grey); }
.reels__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.reel { margin: 0; }
/* The frame holds the shape so the grid does not reflow between the poster
   loading and the video being tapped. */
.reel__frame {
  position: relative;
  aspect-ratio: 9 / 16;
  background: var(--ink);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 14px 34px rgba(8, 8, 10, .16);
}
.reel__video { width: 100%; height: 100%; object-fit: cover; display: block; }
.reel__title { margin: 12px 0 2px; font-size: 1rem; font-weight: 700; }
.reel__meta { margin: 0; font-size: 14px; color: var(--grey); }


/* ───────────────────────────────────────────── service / industry pages */
/* Used by the generated pages under /video-production/ etc. The homepage
   hero is not reused: it carries the phone SVG and three blobs, which are a
   title-card device and would be odd repeated on every page. */
.phero {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: #fff;
  padding-block: 116px 76px;
}
.phero__inner { position: relative; z-index: 2; max-width: 780px; }
/* The hero blob is sized for the homepage title card; on this shorter hero it
   swallows the corner, so it is pulled back rather than reused at full size. */
.phero .blob--pink { width: 300px; height: 300px; top: -170px; left: -120px; opacity: .8; }
.phero h1 {
  font-family: var(--display);
  font-size: clamp(2.1rem, 5.4vw, 3.5rem);
  line-height: 1.04;
  margin: 10px 0 20px;
  letter-spacing: -0.01em;
}
.phero h1 em { font-style: normal; color: var(--pink); }
.phero .lede { margin: 0 0 28px; font-size: 1.08rem; color: rgba(255,255,255,.78); max-width: 62ch; }

.crumb { font-size: 13px; color: rgba(255,255,255,.5); margin-bottom: 18px; }
.crumb a { color: var(--sky); text-decoration: none; }
.crumb a:hover { text-decoration: underline; text-underline-offset: 3px; }

.pcopy { background: var(--paper); padding-block: 84px; }
.pcopy__inner { display: grid; grid-template-columns: 1.55fr .95fr; gap: 56px; align-items: start; }
.pcopy__block { margin-bottom: 40px; }
.pcopy__block:last-child { margin-bottom: 0; }
.pcopy__block .h2 { margin-bottom: 14px; }
.pcopy__block p { margin: 0 0 14px; color: #2C2C31; }
.pcopy__block p:last-child { margin-bottom: 0; }

/* Sticky so the list and the call to action stay with you down a long read. */
.pcopy__side {
  position: sticky;
  top: 96px;
  background: var(--paper-2);
  border: 1px solid var(--line-dark);
  border-radius: 16px;
  padding: 26px 24px;
}
.pcopy__sideh { font-size: 1.02rem; font-weight: 700; margin: 0 0 16px; }
.pcopy__side .ticks { margin-bottom: 22px; }
.pcopy__side .ticks li { font-size: 15px; }

.prel { background: var(--ink); color: #fff; padding-block: 64px; }
.prel__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 18px; }
.rel {
  display: block;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px 24px;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.04rem;
  color: #fff;
  transition: border-color .18s ease, transform .18s ease;
}
.rel span {
  display: block;
  font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--pink); margin-bottom: 7px;
}
.rel:hover { border-color: rgba(255,255,255,.4); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .rel:hover { transform: none; } }

/* Homepage row that links out to the service pages. */
.svc { background: var(--paper-2); padding-block: 72px; }
.svc__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 22px; }
.svc__link {
  display: block;
  background: #fff;
  border: 1px solid var(--line-dark);
  border-radius: 12px;
  padding: 20px 22px;
  text-decoration: none;
  color: var(--ink);
  font-weight: 700;
  transition: border-color .18s ease, transform .18s ease;
}
.svc__link small {
  display: block; margin-top: 6px;
  font-size: 14px; font-weight: 500; color: var(--grey);
}
.svc__link:hover { border-color: var(--pink); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .svc__link:hover { transform: none; } }


/* ────────────────────────────────────────────── notes index + articles */
.posts { background: var(--paper); padding-block: 84px; }
.posts__list { max-width: 760px; }
.post { padding: 28px 0; border-bottom: 1px solid var(--line-dark); }
.post:first-child { padding-top: 0; }
.post:last-child { border-bottom: 0; }
.post__date {
  margin: 0 0 8px;
  font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--pink);
}
.post__title { margin: 0 0 10px; font-size: 1.36rem; line-height: 1.24; font-weight: 700; }
.post__title a { color: var(--ink); text-decoration: none; }
.post__title a:hover { color: var(--pink-dark); text-decoration: underline; text-underline-offset: 4px; }
.post__desc { margin: 0 0 12px; color: var(--grey); }
.post__more { font-size: 14px; font-weight: 700; color: var(--pink-dark); }
.post__empty { color: var(--grey); margin: 0; }

.article__head { background: var(--ink); color: #fff; padding-block: 112px 64px; position: relative; overflow: hidden; }
.article__headinner { max-width: 760px; }
.article__head h1 {
  font-family: var(--display);
  font-size: clamp(1.9rem, 4.6vw, 3rem);
  line-height: 1.08;
  margin: 10px 0 16px;
  letter-spacing: -0.01em;
}
.article__meta { margin: 0; font-size: 14px; color: rgba(255,255,255,.58); }

/* The body is generated from Markdown, so every element it can emit is styled
   here rather than relying on whatever the post happens to contain. */
.article__body { max-width: 720px; padding-block: 56px 8px; }
.article__body h2 { font-size: 1.5rem; font-weight: 700; margin: 38px 0 12px; line-height: 1.22; }
.article__body h3 { font-size: 1.18rem; font-weight: 700; margin: 30px 0 10px; }
.article__body h4 { font-size: 1.02rem; font-weight: 700; margin: 24px 0 8px; }
.article__body h2:first-child, .article__body h3:first-child { margin-top: 0; }
.article__body p { margin: 0 0 18px; color: #2C2C31; font-size: 1.04rem; }
.article__body ul, .article__body ol { margin: 0 0 18px; padding-left: 22px; color: #2C2C31; }
.article__body li { margin-bottom: 8px; }
.article__body a { color: var(--pink-dark); text-underline-offset: 3px; }
.article__body code {
  background: var(--paper-2); border: 1px solid var(--line-dark);
  border-radius: 5px; padding: 1px 6px; font-size: .92em;
}
.article__body blockquote {
  margin: 0 0 18px; padding: 4px 0 4px 20px;
  border-left: 3px solid var(--pink);
}
.article__body blockquote p { margin: 0; font-size: 1.1rem; font-weight: 500; }

.article__cta {
  max-width: 720px;
  margin-bottom: 84px;
  padding: 32px 30px;
  background: var(--paper-2);
  border: 1px solid var(--line-dark);
  border-radius: 16px;
}
.article__cta .h2 { margin-bottom: 10px; }
.article__cta p { margin: 0 0 20px; color: var(--grey); }
.article__cta .btn { margin-right: 8px; }

/* ───────────────────────────────────────────────────────── responsive */
@media (max-width: 900px) {
  .pillars__grid { grid-template-columns: 1fr; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .argument__inner, .about__inner, .contact__inner { grid-template-columns: 1fr; gap: 40px; }
  .about__fig { max-width: 340px; }
  .work__grid { grid-template-columns: repeat(2, 1fr); }
  .pcopy__inner { grid-template-columns: 1fr; gap: 36px; }
  .pcopy__side { position: static; }
  .svc__grid { grid-template-columns: repeat(2, 1fr); }
  .reels__grid { grid-template-columns: repeat(2, 1fr); }
  .areas__grid { grid-template-columns: repeat(2, 1fr); }
  .nav__links { display: none; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .hero { padding-block: 72px 80px; }
  .cards { grid-template-columns: 1fr; }
  .form__two { grid-template-columns: 1fr; }
  .blob--pink { width: 260px; height: 260px; top: -130px; left: -90px; }
  .blob--plum { width: 330px; height: 330px; right: -160px; bottom: -190px; }
  .dots--tr { display: none; }
  .hero__cta .btn { width: 100%; }
  .areas__grid { grid-template-columns: 1fr; }
  .areas__cta .btn { width: 100%; }
  .prel__grid, .svc__grid { grid-template-columns: 1fr; }
  .article__head { padding-block: 92px 52px; }
  .article__cta { padding: 26px 22px; }
  .article__cta .btn { width: 100%; margin: 0 0 8px; }
  .posts { padding-block: 64px; }
  .phero { padding-block: 96px 60px; }
  .what, .argument, .work, .about, .contact, .areas, .faq, .reels, .pcopy, .svc { padding-block: 64px; }
}