/* Additions for editor-built pages (the rest of the design is in site.css). */

/* Contact form: spam trap field, invisible to people */
.pg-hp {
  position: absolute !important;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Free-form pages */
.pg-hero {
  padding-bottom: clamp(40px, 5vw, 80px);
}
.pg-button {
  grid-column: 1 / -1;
}

/* Rows of editor buttons (any number, in any order; alignment set in the editor) */
.pg-btns,
.pg-button {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.pg-btns--left {
  justify-content: flex-start;
}
.pg-btns--center {
  justify-content: center;
}
.pg-btns--right {
  justify-content: flex-end;
}
.ContactBlock-module__FViTyW__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
@media (min-width: 760px) {
  .ContactBlock-module__FViTyW__cta {
    justify-content: flex-end;
  }
}
.ContactBlock-module__FViTyW__cta.pg-btns--left {
  justify-content: flex-start;
  justify-self: start;
}
.ContactBlock-module__FViTyW__cta.pg-btns--center {
  justify-content: center;
  justify-self: center;
}
.CaseStudy-module__1fqkDa__next > .pg-btns {
  gap: 12px 28px;
}
@media (min-width: 900px) {
  .pg-button {
    grid-column: 5 / span 7;
  }
}
.pg-points {
  padding-block: clamp(32px, 4vw, 64px);
}
.pg-points--paper {
  padding-block: var(--section);
}
.pg-points ul {
  margin-top: clamp(32px, 4vw, 64px);
}
.pg-points h2 + ul {
  margin-top: clamp(48px, 6vw, 104px);
}

/* Links typed into editor text ([label](url)) */
.inline-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
  transition: color 0.2s;
}
.inline-link:hover {
  color: var(--pixel);
}
.theme-paper .inline-link:hover {
  color: var(--pixel-ink);
}

/* ---------- Header menu: plain words, green underline on hover and on the current page ---------- */
.Header-module__Af2_WG__navLink,
.Header-module__Af2_WG__menuBtn {
  position: relative;
}
.Header-module__Af2_WG__navLink::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 5px;
  height: 2px;
  background: var(--underline);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.45s var(--ease-out);
}
.Header-module__Af2_WG__navLink:hover::after,
.Header-module__Af2_WG__navLink:focus-visible::after,
.Header-module__Af2_WG__navLink[aria-current='page']::after {
  transform: scaleX(1);
  transform-origin: left center;
}
.Header-module__Af2_WG__menuLinks a {
  width: fit-content;
  text-decoration-line: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.14em;
  transition: text-decoration-color 0.3s;
}
.Header-module__Af2_WG__menuLinks a:hover,
.Header-module__Af2_WG__menuLinks a[aria-current='page'] {
  color: inherit;
  text-decoration-color: var(--underline);
}
@media (prefers-reduced-motion: reduce) {
  .Header-module__Af2_WG__navLink::after {
    transition: none;
  }
}
/* Menu button (phones): two lines to open, a cross to close, swapped smoothly */
@media (max-width: 759.98px) {
  .Header-module__Af2_WG__menuBtn {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-right: -11px;
    padding: 0;
  }
}
.menu-ico {
  grid-area: 1 / 1;
  display: block;
  height: auto;
  transition: opacity 0.35s var(--hover-ease), transform 0.45s var(--hover-ease);
}
.menu-ico--open {
  width: 26px;
}
.menu-ico--close {
  width: 16px;
  opacity: 0;
  transform: rotate(-90deg) scale(0.6);
}
[data-menu-toggle][aria-expanded='true'] .menu-ico--open {
  opacity: 0;
  transform: scaleX(0.4);
}
[data-menu-toggle][aria-expanded='true'] .menu-ico--close {
  opacity: 1;
  transform: none;
}
/* Opened or closed with a tap or click: no focus ring (keyboard users still get it) */
html[data-menu-pointer] [data-menu] :focus-visible,
html[data-menu-pointer] [data-menu-toggle]:focus-visible {
  outline: none;
}

/* ---------- Tags (services, disciplines, sectors, journal categories) ---------- */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tag {
  display: inline-block;
  padding: 4px 9px 5px;
  border-radius: 6px;
  background: var(--tag-bg);
  color: var(--tag-fg);
  font-family: var(--font-ui);
  font-size: var(--step-label);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0;
  white-space: nowrap;
}
.ProjectCard-module__MnOYna__services {
  margin-top: 4px;
}
.Home-module__rCrioW__cardMeta > .tags {
  margin-top: 2px;
}
@media (min-width: 900px) {
  .Home-module__rCrioW__cardWide .Home-module__rCrioW__cardMeta > .tags {
    grid-column: 10 / span 3;
    justify-self: end;
    justify-content: flex-end;
  }
}
.CaseStudy-module__1fqkDa__fact dd .tags {
  margin-top: 6px;
}
.Journal-module__AgLGVW__meta,
.journal-module__UGCK7q__meta {
  align-items: center;
}

/* ---------- Tile arrangements (Work and Journal grids, chosen in the editor) ----------
   Rows sit on a 12-column grid: full 12, half 6, third 4, large 8 + small 4. Phones show one per row. */
ul.tiles {
  container-type: inline-size;
}
ul.tiles > [data-tile] .MediaFrame-module__JEnrKa__frame {
  aspect-ratio: var(--tile-ratio, 16 / 10) !important;
}
@media (min-width: 760px) {
  ul.tiles {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  ul.tiles > [data-tile] {
    grid-column: span 6;
  }
  ul.tiles > [data-tile='full'] {
    grid-column: span 12;
  }
  ul.tiles > [data-tile='third'],
  ul.tiles > [data-tile='small'] {
    grid-column: span 4;
  }
  ul.tiles > [data-tile='large'] {
    grid-column: span 8;
  }
  ul.tiles > [data-tile='full'] .MediaFrame-module__JEnrKa__frame {
    aspect-ratio: 2 / 1 !important;
  }
  /* A large and a small tile share one picture height: the height of a half-width tile */
  ul.tiles > [data-tile='large'] .MediaFrame-module__JEnrKa__frame {
    aspect-ratio: calc(var(--tile-k, 1.6) * 4 / 3) !important;
  }
  ul.tiles > [data-tile='small'] .MediaFrame-module__JEnrKa__frame {
    aspect-ratio: calc(var(--tile-k, 1.6) * 2 / 3) !important;
  }
  @supports (height: 1cqw) {
    ul.tiles > [data-tile='large'] .MediaFrame-module__JEnrKa__frame,
    ul.tiles > [data-tile='small'] .MediaFrame-module__JEnrKa__frame {
      aspect-ratio: auto !important;
      height: calc((100cqw - var(--col-gap)) / 2 / var(--tile-k, 1.6));
    }
  }
}

/* ---------- Picture hover (Settings → Appearance → Picture hover) ----------
   shade: pictures inside links darken slowly (strength from --hover-shade, 10% by default).
   Card titles, hover pictures and the cursor label ease at the same calm pace. */
:root {
  --hover-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}
html[data-hover='shade'] a .MediaFrame-module__JEnrKa__frame::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.8s var(--hover-ease);
}
@media (hover: hover) {
  html[data-hover='shade'] a:hover .MediaFrame-module__JEnrKa__frame::after {
    opacity: var(--hover-shade, 0.1);
    transition-duration: 0.5s;
  }
}
html[data-hover='shade'] a:focus-visible .MediaFrame-module__JEnrKa__frame::after {
  opacity: var(--hover-shade, 0.1);
  transition-duration: 0.5s;
}
.ProjectCard-module__MnOYna__name,
.Journal-module__AgLGVW__title,
.Home-module__rCrioW__cardTitle,
.CaseStudy-module__1fqkDa__nextName {
  transition: color 0.5s var(--hover-ease);
}
.MediaFrame-module__JEnrKa__hover {
  transition: opacity 0.7s var(--hover-ease);
}
.cursor-label {
  scale: 0.92;
  transition: opacity 0.35s var(--hover-ease), scale 0.45s var(--hover-ease);
}
.cursor-label[data-active] {
  scale: 1;
}
/* Showreel mosaic (Home): the same colour bloom, calmer — gentler ease, slower, less zoom, a softer ripple */
.Home-module__rCrioW__tile img {
  transition: filter 1s var(--hover-ease), transform 1.4s var(--hover-ease);
  transition-delay: calc(var(--d, 0) * 10ms);
}
.Home-module__rCrioW__reelLink:hover .Home-module__rCrioW__tile img,
.Home-module__rCrioW__reelLink:focus-visible .Home-module__rCrioW__tile img {
  transform: scale(1.03);
}
.Home-module__rCrioW__reelButton {
  transition: background-color 0.5s var(--hover-ease), color 0.5s var(--hover-ease);
}
/* (Reduced motion: site.css already makes every transition instant.) */

/* ---------- Brand symbol (Settings → Logo & symbol): an SVG, picture or video in place of the X ----------
   The chosen animation plays once (or back and forth with "repeat"); pulse, float and rotate keep going. */
.bx-mark {
  --bx-dur: 1.4s;
  --bx-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  display: block;
  color: var(--mark, var(--pixel));
}
.bx-mark > svg,
.bx-mark > img,
.bx-mark > video {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.bx-mark.bx-colour-text,
.bx-maskmark.bx-colour-text {
  color: var(--fg);
}
/* the small copy between client names, painted in one colour through the SVG as a mask */
.bx-maskmark {
  display: inline-block;
  background: currentColor;
  -webkit-mask: no-repeat center / contain;
  mask: no-repeat center / contain;
}
.bx-speed-slow {
  --bx-dur: 2.4s;
}
.bx-speed-fast {
  --bx-dur: 0.8s;
}
.bx-mark > * {
  animation-duration: var(--bx-dur);
  animation-timing-function: var(--bx-ease);
  animation-delay: 0.25s;
  animation-fill-mode: both;
}
.bx-loop > *,
.bx-loop.bx-anim-draw [data-bx-shape] {
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.bx-anim-fade > * {
  animation-name: bx-fade;
}
.bx-anim-rise > * {
  animation-name: bx-rise;
}
.bx-anim-scale > * {
  animation-name: bx-scale;
}
.bx-anim-spin > * {
  animation-name: bx-spin;
}
.bx-anim-wipe > * {
  animation-name: bx-wipe;
}
.bx-anim-pulse > * {
  animation: bx-pulse calc(var(--bx-dur) * 2) ease-in-out infinite;
}
.bx-anim-float > * {
  animation: bx-float calc(var(--bx-dur) * 2.5) ease-in-out infinite;
}
.bx-anim-rotate > * {
  animation: bx-rotate calc(var(--bx-dur) * 8) linear infinite;
}
/* Draw (SVG): outlines draw in, the shapes fill, and lines added just for drawing fade away */
.bx-anim-draw > svg {
  animation-name: bx-draw-fill;
  animation-duration: calc(var(--bx-dur) * 1.7);
}
.bx-anim-draw [data-bx-shape] {
  animation: bx-draw-line calc(var(--bx-dur) * 1.7) var(--bx-ease) 0.25s both;
}
.bx-anim-draw [data-bx-tmp] {
  stroke: currentColor;
  stroke-width: 1.5px;
  vector-effect: non-scaling-stroke;
  animation: bx-draw-line calc(var(--bx-dur) * 1.7) var(--bx-ease) 0.25s both,
    bx-draw-unstroke calc(var(--bx-dur) * 1.7) var(--bx-ease) 0.25s both;
}
@keyframes bx-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes bx-rise {
  from { opacity: 0; transform: translateY(14%); }
  to { opacity: 1; transform: none; }
}
@keyframes bx-scale {
  from { opacity: 0; transform: scale(0.6); }
  to { opacity: 1; transform: none; }
}
@keyframes bx-spin {
  from { opacity: 0; transform: rotate(-120deg) scale(0.7); }
  to { opacity: 1; transform: none; }
}
@keyframes bx-wipe {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}
@keyframes bx-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}
@keyframes bx-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6%); }
}
@keyframes bx-rotate {
  to { transform: rotate(360deg); }
}
@keyframes bx-draw-line {
  0% { stroke-dasharray: 1; stroke-dashoffset: 1px; }
  60%, 99% { stroke-dasharray: 1; stroke-dashoffset: 0; }
  100% { stroke-dasharray: none; stroke-dashoffset: 0; } /* no seam once drawn */
}
@keyframes bx-draw-fill {
  0%, 45% { fill-opacity: 0; }
  100% { fill-opacity: 1; }
}
@keyframes bx-draw-unstroke {
  0%, 70% { stroke-opacity: 1; }
  100% { stroke-opacity: 0; }
}