/* o2 sections. One rule: the spine is fixed, every section hangs off it the same way.
   Every section is  .scene > .wrap > .content  (12 columns), with the same header pattern. */
main { position: relative; display: block; }

/* ---------- the spine: one SVG over <main>, above scene backgrounds, under content ---------- */
.spine {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: visible;
  pointer-events: none;
}
.spine__line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.spine__line--n { stroke-width: 3; }
#thread-blue, #thread-blue-n { stroke: var(--blue); }
#thread-white, #thread-white-n { stroke: var(--white); }
.spine__puck { r: 9px; fill: var(--blue); stroke: var(--white); stroke-width: 3; opacity: 0; filter: drop-shadow(0 1px 2px rgba(10, 26, 63, 0.35)); }
@media (max-width: 767px) {
  .spine__puck { r: 7px; }
}

/* ---------- scenes and the shared header pattern ---------- */
.scene { position: relative; padding-block: var(--sec-pad); }
.scene .wrap, .foot .wrap { position: relative; z-index: 2; }
.scene--white { background: var(--white); color: var(--blue-deep); --focus: var(--blue); }
.scene--blue { background: var(--blue); color: var(--white); --focus: var(--white); }
.scene--ink { background: var(--blue-ink); color: var(--white); --focus: var(--blue-sky); }
.scene--pale { background: var(--blue-pale); color: var(--blue-deep); --focus: var(--blue); }

.sec-head {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-columns: subgrid;
  column-gap: var(--gap);
  align-items: end;
  margin-bottom: var(--s8);
}
.sec-head__title { grid-column: 1 / 8; }
.sec-head__line { grid-column: 8 / 13; max-width: 44ch; font-size: 18px; line-height: 1.5; padding-bottom: 6px; }
.scene--white .sec-head__title, .scene--pale .sec-head__title { color: var(--blue); }
.scene--blue .sec-head__title, .scene--ink .sec-head__title { color: var(--white); }
.scene--ink .sec-head__line { color: var(--blue-sky); }
@media (max-width: 1023px) {
  .sec-head { margin-bottom: var(--s7); row-gap: 16px; }
  .sec-head__title, .sec-head__line { grid-column: 1 / -1; }
}

/* ---------- hero: the showreel ---------- */
.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  background: var(--white);
  color: var(--white);
  --focus: var(--white);
}
.hero__media {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  overflow: hidden;
  background: var(--blue-ink);
}
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(10, 26, 63, 0.72) 0%, rgba(10, 26, 63, 0.28) 45%, rgba(10, 26, 63, 0) 72%),
    linear-gradient(90deg, rgba(10, 26, 63, 0.72) 0%, rgba(10, 26, 63, 0.42) 52%, rgba(10, 26, 63, 0) 86%),
    linear-gradient(to bottom, rgba(10, 26, 63, 0.55) 0, rgba(10, 26, 63, 0) 160px);
}
.hero__content {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  padding-bottom: 56px;
}
.hero__content .wrap { align-items: end; }
.hero__grid { align-items: end; }
.hero__text { grid-column: 1 / 10; }
.hero__title { color: var(--white); text-wrap: balance; }
.hero__sub { max-width: 44ch; margin-top: 24px; font-size: 20px; line-height: 1.45; font-weight: 500; color: var(--blue-sky); }
.hero__cta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 16px; margin-top: 32px; }
.hero__cue {
  position: absolute;
  right: calc(var(--pad) + 12px);
  bottom: 32px;
  z-index: 3;
  overflow: visible;
}
html.is-loading .hero__play { display: none; }
@media (max-width: 1023px) {
  .hero__text { grid-column: 1 / -1; }
  .hero__cue { display: none; }
}
@media (max-width: 767px) {
  .hero__sub { font-size: 18px; }
  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__cta .btn { width: 100%; }
}

/* ---------- media frames, shared ---------- */
.mframe {
  position: relative;
  display: block;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: var(--blue-ink);
}
.mframe--169 { aspect-ratio: 16 / 9; }
.mframe--45 { aspect-ratio: 4 / 5; }
.mframe > video, .mframe > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
button.mframe { padding: 0; border: 0; text-align: left; cursor: pointer; }
/* The Virtual court footage is a near-square picture between black bars: scale it so the picture fills the frame */
.mframe > video.crop-bars { left: -40%; top: -40%; width: 180%; max-width: none; height: 180%; }
.play {
  position: absolute;
  left: 16px;
  bottom: 16px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--white);
  display: grid;
  place-items: center;
  pointer-events: none;
}
.play svg { width: 24px; height: 24px; fill: var(--blue); }
/* four-corner viewfinder frames (built in ui.js, drawn by Motion on hover or focus) */
.frame { position: absolute; inset: 10px; pointer-events: none; overflow: visible; color: var(--white); }
.frame path { fill: none; stroke: currentColor; stroke-width: 2; }
.mframe .frame { opacity: 0; transition: opacity 0.2s ease; }
.mframe:hover .frame, .mframe:focus-visible .frame, .tile-item:hover .frame, .card__btn:hover .frame, .card__btn:focus-visible .frame { opacity: 1; }
.frames-js .mframe .frame { opacity: 1; transition: none; }
.frames-js .frame path { stroke-dasharray: 1; stroke-dashoffset: 1; }

/* ---------- who we are ---------- */
.who__text { grid-column: 1 / 7; align-self: start; }
.who__p + .who__p { margin-top: 24px; }
.who__media { grid-column: 8 / 13; margin: 0; }
@media (max-width: 1023px) {
  .who__text, .who__media { grid-column: 1 / -1; }
  .who__media { margin-top: var(--s7); max-width: 460px; }
}

/* ---------- what we do: six rows on one subgrid ---------- */
.rows {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-columns: subgrid;
  column-gap: var(--gap);
  grid-auto-rows: minmax(132px, auto) 2px;
}
.row {
  position: relative;
  grid-column: 1 / -1;
  grid-row: span 2;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-columns: subgrid;
  grid-template-rows: minmax(132px, auto) 2px;
  grid-template-rows: subgrid;
  column-gap: var(--gap);
  align-items: center;
  color: var(--white);
  cursor: pointer;
}
.row::before {
  content: "";
  position: absolute;
  left: calc(var(--spine-off) * -1);
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(10, 26, 63, 0.16);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}
.row:hover::before, .row:focus-within::before { opacity: 1; }
.row__icon { grid-column: 1; grid-row: 1; width: 56px; height: 56px; position: relative; }
.row__icon svg { width: 56px; height: 56px; fill: none; stroke: var(--white); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.row__name { grid-column: 2 / 7; grid-row: 1; position: relative; color: var(--white); }
.row__text { grid-column: 7 / 11; grid-row: 1; position: relative; font-size: 18px; line-height: 1.5; color: var(--white); }
.row__link { grid-column: 11 / 13; grid-row: 1; position: relative; justify-self: end; color: var(--white); white-space: nowrap; }
.row__thumb { display: none; }
.row__rule { grid-column: 1 / -1; grid-row: 2; align-self: start; width: calc(100% + var(--spine-off)); margin-left: calc(var(--spine-off) * -1); height: 2px; overflow: visible; }
.row__rule path { fill: none; stroke: var(--white); stroke-width: 2; }
@media (max-width: 1023px) {
  .rows { grid-auto-rows: auto; }
  .row { grid-row: auto; grid-template-rows: auto auto auto 2px; row-gap: 8px; padding-top: 28px; align-items: start; }
  .row__icon { grid-row: 1; }
  .row__name { grid-column: 2 / -1; grid-row: 1; align-self: center; }
  .row__text { grid-column: 2 / -1; grid-row: 2; }
  .row__link { grid-column: 2 / -1; grid-row: 3; justify-self: start; margin-bottom: 28px; }
  .row__rule { grid-row: 4; }
}
@media (hover: none), (max-width: 767px) {
  .row__thumb { display: block; grid-column: 2 / -1; grid-row: 4; width: 96px; height: 54px; margin-bottom: 28px; border-radius: 8px; object-fit: cover; }
  .row__rule { grid-row: 5; }
  .row { grid-template-rows: auto auto auto auto 2px; }
}
/* Phones: the icon sits beside the name, and the sentence and link use the full width
   (an indented column wrapped one sentence onto seven lines). The work section below
   carries the media, so the row thumbnail goes. */
@media (max-width: 767px) {
  .row { grid-template-rows: auto auto auto 2px; }
  .row__icon, .row__icon svg { width: 40px; height: 40px; }
  .row__name { font-size: 28px; }
  .row__text { grid-column: 1 / -1; font-size: 17px; }
  .row__link { grid-column: 1 / -1; }
  .row__thumb { display: none; }
  .row__rule { grid-row: 4; }
}

/* cursor preview */
.preview {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 60;
  width: 320px;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: var(--blue-ink);
  box-shadow: 0 18px 40px rgba(10, 26, 63, 0.35);
  opacity: 0;
  pointer-events: none;
}
.pv { position: absolute; inset: 0; display: none; }
.pv.is-on { display: block; }
.pv img, .pv video { width: 100%; height: 100%; object-fit: cover; }
.pv--art { background: var(--blue-ink); }
.pv--art svg { width: 100%; height: 100%; padding: 12px; }
.pv--art path { fill: none; stroke-width: 14; stroke-linejoin: miter; }
.echo__a { stroke: var(--white); }
.echo__b { stroke: var(--blue-sky); }
@media (hover: none), (max-width: 1023px) {
  .preview { display: none; }
}

/* ---------- achievements: 3 x 2, labels always below ---------- */
.claims {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: var(--s8);
}
.claim { min-width: 0; }
.claim__fig { position: relative; display: inline-block; padding-bottom: 13px; }
.claim__num {
  display: block;
  font-size: var(--numeral-size);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--blue);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.claim__rule { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 3px; overflow: visible; }
.claim__rule path { fill: none; stroke: var(--blue); stroke-width: 3; }
.claim__label { display: block; margin-top: 12px; font-size: 20px; line-height: 1.3; color: var(--blue-deep); }
@media (max-width: 767px) {
  .claims { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s7); }
  :root { --numeral-size: clamp(40px, 11.5vw, 56px); }
  .claim__label { font-size: 18px; }
}

/* ---------- selected work: 8+4 over 4+4+4, captions on one subgrid ---------- */
.feat {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-columns: subgrid;
  column-gap: var(--gap);
  grid-template-rows: auto auto auto auto auto auto;
}
.tile-item {
  display: grid;
  grid-template-rows: auto auto;
  grid-template-rows: subgrid;
  min-width: 0;
}
.tile-item--a { grid-column: 1 / 9; grid-row: 1 / 5; grid-template-rows: 1fr auto; grid-template-rows: subgrid; }
.tile-item--b { grid-column: 9 / 13; grid-row: 1 / 3; }
.tile-item--c { grid-column: 9 / 13; grid-row: 3 / 5; }
.tile-item--d { grid-column: 1 / 5; grid-row: 5 / 7; }
.tile-item--e { grid-column: 5 / 9; grid-row: 5 / 7; }
.tile-item--f { grid-column: 9 / 13; grid-row: 5 / 7; }
.tile__media { aspect-ratio: 16 / 9; min-height: 0; }
.tile-item--a .tile__media { grid-row: 1 / 4; aspect-ratio: auto; align-self: stretch; height: 100%; }
.tile-item--a .tile__cap { grid-row: 4; }
.tile__cap { padding: 16px 0 var(--s7); }
.tile__title { font-size: 22px; font-weight: 700; line-height: 1.25; color: var(--white); }
.tile__svc { margin-top: 6px; font-size: 15px; line-height: 1.5; color: var(--blue-sky); }
@media (max-width: 1023px) {
  .feat { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; }
  .tile-item, .tile-item--a { grid-column: auto; grid-row: auto; display: block; }
  .tile-item--a { grid-column: 1 / -1; }
  .tile-item--a .tile__media { aspect-ratio: 16 / 9; height: auto; }
}
@media (max-width: 767px) {
  .feat { grid-template-columns: minmax(0, 1fr); }
  .tile-item--a { grid-column: auto; }
}

/* more work: chips and a 4-column card grid, the whole card is the button */
.more { grid-column: 1 / -1; margin-top: var(--s7); }
.more__title { color: var(--white); }
.chips { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--s5); }
.chip {
  min-height: 44px;
  padding: 0 20px;
  border: 2px solid var(--blue-line);
  border-radius: 999px;
  background: transparent;
  color: var(--white);
  font: 500 15px/1 var(--font);
  cursor: pointer;
}
.chip[aria-pressed="true"] { background: var(--white); border-color: var(--white); color: var(--blue-ink); }
.more__count { margin-top: 16px; font-size: 15px; color: var(--blue-sky); }
.cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--gap);
  grid-auto-rows: auto auto auto;
  margin-top: var(--s5);
}
.card { display: contents; }
.card[hidden] { display: none; }
.card__btn {
  grid-row: span 3;
  display: grid;
  grid-template-rows: auto auto auto;
  grid-template-rows: subgrid;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--white);
  text-align: left;
  cursor: pointer;
}
.card__media { aspect-ratio: 16 / 9; margin-bottom: 12px; }
.card__title { display: block; font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--white); }
.card__svc { display: block; margin-top: 4px; padding-bottom: var(--s6); font-size: 15px; line-height: 1.5; color: var(--blue-sky); }
@media (max-width: 1023px) {
  .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; }
  .card__title { font-size: 16px; }
}

/* ---------- clients: bordered logo grid ---------- */
.wall {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  border-top: 1px solid var(--blue-sky);
  border-left: 1px solid var(--blue-sky);
  background: var(--white);
}
.client {
  position: relative;
  aspect-ratio: 3 / 2;
  min-height: 0;
  background: var(--white);
  border-right: 1px solid var(--blue-sky);
  border-bottom: 1px solid var(--blue-sky);
}
/* Logos are trimmed to their ink, so one box sizes them evenly: wide marks fill the
   width, square crests fill the height. */
.client img { position: absolute; inset: 0; margin: auto; width: 64%; height: 52%; object-fit: contain; mix-blend-mode: multiply; }
.wall__cta { grid-column: span 5; background: var(--blue); border-right: 1px solid var(--blue-sky); border-bottom: 1px solid var(--blue-sky); display: grid; }
.wall__link {
  display: grid;
  place-items: center;
  padding: var(--s5);
  color: var(--white);
  font-size: clamp(22px, 2.2vw, 32px);
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
}
.wall__link:hover { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 0.2em; }
.wall__link:focus-visible { outline-color: var(--white); outline-offset: -6px; }
@media (max-width: 1023px) {
  .wall { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .wall__cta { grid-column: span 5; }
}
@media (max-width: 767px) {
  .wall { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wall__cta { grid-column: span 2; }
  .wall__link { font-size: 20px; padding: 12px; }
}

/* ---------- contact: header, a two-column block, and the K the spine ends on ---------- */
.contact__block {
  grid-column: 1 / -1;
  position: relative;
  --ck: 240px;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-columns: subgrid;
  column-gap: var(--gap);
  align-items: start;
}
/* The K sits under the buttons, its apex on the spine, so the CTA and the list keep the
   shared left edges (content col 1 and the header line's col 8). */
.contact__k {
  grid-column: 1 / 5;
  grid-row: 2;
  width: var(--ck);
  height: var(--ck);
  margin-top: var(--s6);
  margin-left: calc(var(--spine-off) * -1 - var(--ck) * 0.18);
  overflow: visible;
}
.k-outline { fill: none; stroke: var(--white); stroke-width: 14; stroke-linejoin: miter; stroke-linecap: butt; }
.k-solid { fill: var(--white); }
.contact__main { grid-column: 1 / 8; grid-row: 1; }
.contact__actions { display: flex; flex-wrap: wrap; gap: 16px; }
.contact__list { grid-column: 8 / 13; grid-row: 1 / span 2; font-size: 18px; line-height: 1.6; }
.contact__list > div + div { margin-top: var(--s5); }
.contact__list dt { font-size: 15px; font-weight: 500; color: var(--blue-sky); }
.contact__list dd { color: var(--white); }
@media (max-width: 1023px) {
  .contact__block { display: flex; flex-direction: column; --ck: 160px; }
  .contact__main { order: 1; }
  .contact__list { order: 2; margin-top: var(--s7); }
  .contact__k { order: 3; flex: none; }
}
@media (max-width: 767px) {
  .contact__block { --ck: 120px; }
  .contact__actions { flex-direction: column; align-items: stretch; }
}

/* ---------- footer: deep band on the same grid ---------- */
.foot { position: relative; background: var(--blue-ink); color: var(--white); padding: var(--s6) 0; --focus: var(--blue-sky); }
.foot__grid { align-items: center; row-gap: 16px; }
.foot__logo { grid-column: 1 / 4; width: auto; height: 32px; }
.foot__parent { grid-column: 5 / 9; font-size: 15px; font-weight: 500; text-align: center; color: var(--white); }
.foot__city { grid-column: 11 / 13; font-size: 15px; font-weight: 500; text-align: right; color: var(--white); }
@media (max-width: 1023px) {
  .foot__logo, .foot__parent, .foot__city { grid-column: 1 / -1; text-align: left; }
}