/* ==========================================================================
   Martz Creative
   Units: 1rem = 1 design pixel. Desktop frame is 1440 wide, mobile frame 393 wide.
   The root size scales with the usable viewport (--vw, set in header.php), so the
   layout is exact at 1440 / 393 and proportional elsewhere. Above 1440 it stays 1:1.
   ========================================================================== */

/* 01. Tokens ------------------------------------------------------------- */
:root {
  --black: #1D1B1B;
  --grey-dark: #343434;
  --grey-card: #323232;
  --grey-pill: #2D2D2D;
  --cool: #E9EDF1;
  --white: #FFFFFF;
  --pink: #ED2B91;
  --pink-band: #EF419D; /* Home CTA band: #ED2B91 in Screen blend over #1D1B1B, as rendered in Figma */
  --muted: #8D8D8D;

  --draw-oval: 450ms;  /* hover redraw of the circled buttons */
  --draw-line: 300ms;  /* hover redraw of underlines */
  --ease-draw: cubic-bezier(.45, .05, .35, 1);
  --ease-out: cubic-bezier(.2, .7, .2, 1);

  font-size: min(1px, calc(var(--vw, 100vw) / 1440));
}
@media (max-width: 1023px) {
  :root { font-size: min(1.3px, calc(var(--vw, 100vw) / 393)); }
}

/* 02. Base --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0;
  background: var(--cool);
  color: var(--black);
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: max(14px, 18rem);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
strong, b { font-weight: var(--fw-bold); }
u { text-decoration-thickness: .06em; text-underline-offset: .08em; }
:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; }
.screen-reader-text, .skip-link:not(:focus) {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.skip-link:focus { position: fixed; z-index: 100; top: 8px; left: 8px; padding: 8px 12px; background: var(--black); color: var(--white); }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
/* Figma stacks page sections with a -1px gap (each overlaps the previous by 1px). */
main > * + *, main + .footer { margin-top: -1rem; }
.rich p + p { margin-top: var(--pspace, 18rem); }

/* Display headings: Acumin ExtraCondensed Black Italic, uppercase, -2% tracking. */
.h-display {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-style: var(--display-style, italic);
  font-variation-settings: var(--display-axes, normal);
  text-transform: uppercase;
  letter-spacing: -.02em;
  font-size: 120rem;
  line-height: 96rem;
}

/* 03. Buttons (UI Kit) ---------------------------------------------------- */
.btn {
  position: relative;
  display: inline-flex;
  font-weight: var(--fw-bold);
  font-size: 20rem;
  line-height: 23.96rem;
  color: var(--black);
}
.btn--light { color: var(--white); }

/* Circled: brush oval around the label; the oval redraws on hover. */
.btn--circle {
  width: calc(var(--btn-w, 182) * 1rem);
  height: 78rem;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.btn__oval {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.btn__oval use { color: currentColor; }
.btn__art--m { display: none; }
.btn__draw { stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.btn--circle:hover .btn__draw,
.btn--circle:focus-visible .btn__draw { animation: draw-oval var(--draw-oval) var(--ease-draw) both; }
@keyframes draw-oval { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.btn__label { position: relative; }

/* Underlined: brush line under the label; redraws left to right on hover. */
.btn--underline {
  flex-direction: column;
  align-items: flex-start;
  gap: 6rem;
  letter-spacing: .04em;
}
.btn__line, .nav-link__line {
  width: 100%;
  height: 5rem;
  color: currentColor;
  overflow: visible;
}
.btn--underline:hover .btn__line,
.btn--underline:focus-visible .btn__line { animation: draw-line var(--draw-line) var(--ease-draw) both; }
@keyframes draw-line { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

@media (prefers-reduced-motion: reduce) {
  .btn--circle:hover .btn__draw, .btn--underline:hover .btn__line { animation: none; }
}

/* 04. Navigation links ---------------------------------------------------- */
.nav-link {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  font-weight: var(--fw-bold);
  font-size: 32rem;
  line-height: 38.34rem;
  white-space: nowrap;
}
.nav-link__line {
  position: absolute;
  left: 0;
  top: 100%;
  clip-path: inset(0 100% 0 0);
  transition: clip-path var(--draw-line) var(--ease-draw);
}
.nav-link:hover .nav-link__line,
.nav-link:focus-visible .nav-link__line { clip-path: inset(0 0 0 0); }

/* 05. Masthead + compact bar + phone menu --------------------------------- */
.masthead {
  padding: 20rem 20rem 10rem;
  background: var(--cool);
}
.masthead--home { padding-bottom: 18rem; }
.masthead__logo { display: block; color: var(--pink); }
.wordmark { width: 100%; height: auto; }
.masthead__nav .nav-link, .footer__nav .nav-link { line-height: 38rem; }
.masthead__nav {
  display: flex;
  justify-content: space-between;
  margin-top: 10rem;
  padding: 0 1rem 0 2rem;
}

.bar {
  position: fixed;
  z-index: 50;
  inset: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 92.78rem;
  padding: 12rem 20rem;
  background: var(--cool);
  transform: translateY(-101%);
  transition: transform .45s var(--ease-out);
  will-change: transform;
}
.bar.is-visible { transform: none; box-shadow: 0 1px 0 rgba(29, 27, 27, .08); }
.bar__logo { display: block; width: 235rem; flex: none; }
.bar__logo svg { width: 100%; height: auto; }
.bar__nav { display: contents; }
.bar__nav .nav-link { font-size: 28rem; line-height: 33.54rem; }
.bar__toggle { display: none; }

.menu {
  position: fixed;
  z-index: 60;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 14rem 16rem 32rem;
  background: var(--black);
  color: var(--white);
  clip-path: inset(0 0 0 100%);
  transition: clip-path .55s var(--ease-out), visibility 0s linear .55s;
  visibility: hidden;
}
.menu[hidden] { display: flex; } /* kept in the DOM so it can animate; `hidden` is removed by JS */
.menu.is-open { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path .55s var(--ease-out); }
.menu__top { display: flex; justify-content: space-between; align-items: center; }
.menu__logo { width: 150rem; }
.menu__logo svg { width: 100%; height: auto; }
.menu__nav { display: flex; flex-direction: column; gap: 8rem; margin: auto 0; }
.menu__nav .nav-link {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-style: var(--display-style, italic);
  font-variation-settings: var(--display-axes, normal);
  text-transform: uppercase;
  letter-spacing: -.02em;
  font-size: 72rem;
  line-height: 64rem;
  opacity: 0;
  transform: translateX(40rem);
  transition: opacity .4s var(--ease-out), transform .5s var(--ease-out), color .2s;
}
.menu__nav .nav-link.is-current { color: var(--pink); }
.menu__nav .nav-link__line { display: none; }
.menu.is-open .nav-link { opacity: 1; transform: none; }
.menu.is-open .nav-link:nth-child(1) { transition-delay: .15s; }
.menu.is-open .nav-link:nth-child(2) { transition-delay: .21s; }
.menu.is-open .nav-link:nth-child(3) { transition-delay: .27s; }
.menu.is-open .nav-link:nth-child(4) { transition-delay: .33s; }
.menu__nav .nav-link:hover { color: var(--pink); }
.menu__close { width: 44rem; height: 44rem; display: grid; place-items: center; }
.menu__x, .bar__burger { position: relative; display: block; width: 26rem; height: 14rem; }
.menu__x i, .bar__burger i { position: absolute; left: 0; width: 100%; height: 2.5rem; background: currentColor; border-radius: 2rem; }
.bar__burger i:first-child { top: 0; }
.bar__burger i:last-child { bottom: 0; width: 70%; }
.menu__x i { top: 50%; }
.menu__x i:first-child { transform: rotate(45deg); }
.menu__x i:last-child { transform: rotate(-45deg); }
.menu__foot .social { justify-content: flex-start; }
body.menu-open { overflow: hidden; }

/* 06. Footer --------------------------------------------------------------- */
.footer {
  position: relative;
  height: 610rem;
  padding: 20rem 20rem 0;
  background: var(--black);
  color: var(--white);
  overflow: hidden;
}
.footer__logo { display: block; width: 1393rem; color: var(--grey-dark); }
.footer__nav {
  display: flex;
  justify-content: space-between;
  margin-top: 12rem;
  padding-left: 2rem;
}
.ticker {
  position: absolute;
  left: 50%;
  top: 410.76rem;
  width: 1455rem;
  height: 109rem;
  margin-left: -727.5rem;
  background: var(--white);
  color: var(--black);
  transform: translate(-13.65rem, -50%) rotate(-2.64deg);
  overflow: hidden;
  display: flex;
  align-items: center;
}
.ticker__track {
  display: flex;
  flex: none;
  gap: 40rem;
  padding-right: 40rem;
  animation: ticker 28s linear infinite;
}
.ticker__item {
  flex: none;
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-style: var(--display-style, italic);
  font-variation-settings: var(--display-axes, normal);
  text-transform: uppercase;
  letter-spacing: -.02em;
  font-size: 101rem;
  line-height: 80.8rem;
  white-space: nowrap;
}
@keyframes ticker { to { transform: translateX(-50%); } }
.footer__base {
  position: absolute;
  left: 22rem;
  right: 32rem;
  top: 523rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.footer__copy {
  margin-top: 28rem;
  font-size: 16rem;
  line-height: 12.8rem;
  letter-spacing: -.02em;
  color: var(--muted);
  text-align: right;
}
.social { display: flex; gap: 12rem; }
.social__link {
  display: grid;
  place-items: center;
  width: 60rem;
  height: 60rem;
  border-radius: 50%;
  background: var(--grey-dark);
  color: var(--white);
  transition: background-color .2s;
}
.social__link:hover, .social__link:focus-visible { background: var(--pink); }
.social__link svg { width: 25rem; height: 28rem; }

/* 07. Home: hero video ---------------------------------------------------- */
.home-hero { height: 780rem; overflow: hidden; background: var(--black); }
.home-hero__media { width: 100%; height: 100%; object-fit: cover; }

/* 08. Home: intro --------------------------------------------------------- */
.intro {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 95rem 64rem 113rem 60rem;
}
.intro__heading { flex: 0 0 780rem; color: var(--pink); white-space: nowrap; }
.intro__side { flex: 0 0 423rem; }
.intro__text { font-size: 18rem; line-height: 25.2rem; --pspace: 17rem; } /* Figma rounds the text box to 143 */
.intro__tagline { margin-top: 18rem; font-weight: var(--fw-bold); font-size: 18rem; line-height: 25rem; }
.intro__actions { display: flex; align-items: center; gap: 24rem; margin-top: 40rem; }

/* 09. Home: client logos marquee ------------------------------------------ */
.logos { padding: 10rem 0 19rem; overflow: hidden; }
.logos__row { display: flex; width: max-content; }
.logos__row + .logos__row { margin-top: 11rem; }
.logos__row--right { height: 113rem; }
.logos__row--left { height: 81rem; margin-left: -80rem; }
.logos__track { display: flex; align-items: center; gap: 44rem; padding-right: 44rem; flex: none; animation: marquee 60s linear infinite; }
.logos__row--right .logos__track { animation-direction: reverse; }
.logos__item { flex: none; width: calc(var(--w) * 1rem); height: calc(var(--h) * 1rem); }
.logos__item img { width: 100%; height: 100%; object-fit: contain; }
@keyframes marquee { to { transform: translateX(-100%); } }

/* 10. Home: our work tiles ------------------------------------------------- */
/* Right column starts 153 below the section top, left column 334; heading sits at 168. */
.home-work { position: relative; padding: 153rem 60rem 59rem; }
.home-work__heading { position: absolute; left: 60rem; top: 168rem; font-size: 100rem; line-height: 80rem; color: var(--black); }
.home-work__grid { display: flex; justify-content: space-between; align-items: flex-start; }
.home-work__col { display: flex; flex-direction: column; gap: 60rem; width: 621rem; }
.home-work__col--left { margin-top: 181rem; }
.home-work__more { display: flex; justify-content: center; margin-top: 6rem; order: 99; }
.tile { display: flex; flex-direction: column; gap: 12rem; }
.tile__media { display: block; height: 525rem; overflow: hidden; background: #d9dde2; }
.tile__media img { width: 100%; height: 100%; object-fit: cover; }
/* Hover (client R1): the image zooms in and the card tilts toward the cursor, up to --tilt-max (js/main.js sets
   --tilt-x / --tilt-y from -1 to 1). Pointer devices only; nothing moves on touch. */
@media (hover: hover) and (pointer: fine) {
  .tile { --tilt-max: 12deg; }
  .tile__media {
    transform: perspective(1400rem) rotateX(calc(var(--tilt-x, 0) * var(--tilt-max))) rotateY(calc(var(--tilt-y, 0) * var(--tilt-max)));
    transition: transform .6s var(--ease-out);
  }
  .tile:hover .tile__media { transition-duration: .2s; }
  .tile__media img { transition: transform .8s var(--ease-out); }
  .tile:hover .tile__media img { transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .tile__media, .tile__media img { transform: none !important; transition: none; }
}
.tile__label {
  display: flex;
  align-items: center;
  height: 25rem;
  gap: 8rem;
  font-size: 18rem;
  line-height: 25.2rem;
  color: #000;
}
.tile__label::before {
  content: "";
  width: 14rem;
  height: 14.25rem;
  background: var(--black);
  clip-path: polygon(30% 0, 100% 0, 70% 100%, 0 100%);
}

/* 11. Home: leadership ----------------------------------------------------- */
.lead {
  position: relative;
  height: 1023rem;
  padding: 83rem 60rem 0 62rem;
  overflow: hidden;
}
.lead__heading { position: relative; color: var(--pink); }
.lead__line-1 { display: block; width: 941rem; }
.lead__line-2 { position: absolute; left: 485rem; top: 96rem; width: 634rem; }
.lead__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24rem;
  width: 485rem;
  margin: 143rem 0 0 -2rem;
}
.lead__item { display: flex; flex-direction: column; gap: 12rem; }
.lead__title { font-weight: var(--fw-bold); font-size: 24rem; line-height: 26.4rem; }
.lead__text { font-size: 18rem; line-height: 25.2rem; }
.lead__body .btn { margin: 13rem 0 0 2rem; }
.lead__image { position: absolute; left: 623rem; top: 339rem; width: 825.26rem; }
.lead__image img { width: 100%; }

/* 12. Home: problem -------------------------------------------------------- */
.problem {
  position: relative;
  overflow: hidden;
  height: 785rem;
  background: var(--black);
  color: var(--white);
}
/* The heading sits above the hand graphic, so the starburst's edges tuck behind the type (client R1). */
.problem__heading { position: absolute; z-index: 1; left: 59rem; top: 84rem; font-size: 132rem; line-height: 105.6rem; color: var(--pink); }
.problem__part-1 { display: block; width: 735rem; }
.problem__part-2 { display: block; width: 537rem; margin: -6.2rem 0 0 124rem; }
.problem__part-2 u { text-decoration-thickness: 6rem; text-underline-offset: 8rem; }
.problem__image { position: absolute; left: 356rem; top: 408rem; width: 378rem; }
.problem__body { position: absolute; left: 848rem; top: 97rem; width: 539rem; }
.problem__intro, .problem__outro { font-size: 20rem; line-height: 28rem; }
.checklist { display: flex; flex-direction: column; gap: 24rem; margin: 50rem 0; }
.checklist__item {
  display: flex;
  gap: 16rem;
  padding-bottom: 12rem;
  border-bottom: 1px solid rgba(255, 255, 255, .2);
  font-weight: var(--fw-bold);
  font-size: 20rem;
  line-height: 28rem;
}
.icon-check { flex: none; width: 18rem; height: 28rem; }
.problem__body .btn { margin: 48rem 0 0 -1rem; }

/* 13. Home: services accordion -------------------------------------------- */
.services { padding: 120rem 60rem; background: var(--black); color: var(--white); }
.services__heading { font-size: 80rem; line-height: 64rem; }
.accordion { margin-top: 60rem; }
.acc__head { font: inherit; }
.acc { border-bottom: 1px solid rgba(255, 255, 255, .4); transition: background-color .25s, color .25s; }
.acc.is-open { background: var(--cool); color: var(--black); }
/* 40 side padding (client R1: +20); the column gaps give back the 20 so the description column stays at x=655. */
.acc__button {
  display: grid;
  grid-template-columns: 435rem 521rem 1fr;
  column-gap: 120rem;
  align-items: start;
  width: 100%;
  padding: 60rem 40rem;
  text-align: left;
}
.acc__title { font-weight: var(--fw-bold); font-size: 40rem; line-height: 32rem; letter-spacing: -.02em; }
.acc__summary { font-size: 17rem; line-height: 23.8rem; }
.acc__summary--mobile { display: none; }
.acc__icon {
  position: relative;
  justify-self: end;
  width: 44rem;
  height: 44rem;
  border-radius: 50%;
  background: var(--pink);
  color: var(--black);
  transition: background-color .25s, color .25s;
}
.acc__icon::before, .acc__icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 21rem;
  height: 1.5rem;
  margin: -.75rem 0 0 -10.5rem;
  background: currentColor;
  transition: transform .3s var(--ease-out);
}
.acc__icon::after { transform: rotate(90deg); }
.acc.is-open .acc__icon { background: var(--black); color: var(--white); }
.acc.is-open .acc__icon::after { transform: rotate(0deg); }
.acc__button:hover .acc__icon { transform: scale(1.06); }
.acc__icon { transition: background-color .25s, color .25s, transform .2s; }
.acc__panel { padding: 0 40rem 60rem 595rem; margin-top: -20rem; } /* chips align with the description column (x=655) */
.acc__panel[hidden] { display: none; }
/* Two columns filled top-to-bottom, as the design does. Columns size to their content so chips
   stay on one line, and shrink (wrapping inside the chip) if a label is ever too long to fit.
   The design's fixed 2x363.5 grid came from a hidden layer that overruns the 1440 frame. */
.pills {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, max-content));
  grid-template-rows: repeat(var(--rows, 4), auto);
  grid-auto-flow: column;
  column-gap: 24rem;
  row-gap: 8rem;
  justify-items: start;
  max-width: 100%;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8rem;
  padding: 8rem 12rem;
  border-radius: 100rem;
  background: var(--white);
  color: var(--black);
  font-weight: 500;
  font-size: 16rem;
  line-height: 22.4rem;
}
.pill .icon-check { width: 14rem; height: 22rem; }

/* 14. "Be bold" CTA ------------------------------------------------------- */
.cta-bold {
  position: relative;
  height: 734rem;
  background: var(--black);
  color: var(--white);
  overflow: hidden;
}
.cta-bold::before { content: ""; position: absolute; inset: 20rem 0 23rem; background: var(--pink); }
.home .cta-bold::before { background: var(--pink-band); } /* only Home uses the Screen-blended pink in Figma */
.cta-bold__image { position: absolute; left: 0; top: 43rem; width: 644.86rem; }
.cta-bold__heading { position: absolute; left: 493rem; top: 89rem; width: 878rem; }
.cta-bold__line-1 { display: block; }
.cta-bold__line-2 { display: block; margin-top: 3rem; text-align: right; text-decoration: underline; text-decoration-thickness: 6rem; text-underline-offset: 6rem; }
.cta-bold__text { position: absolute; left: 612rem; top: 424rem; width: 453rem; font-size: 24rem; line-height: 33.6rem; --pspace: 20rem; }
.cta-bold__action { position: absolute; left: 1203rem; top: 536rem; }

/* ==========================================================================
   Mobile (393 frame)
   ========================================================================== */
@media (max-width: 1023px) {
  body { font-size: max(14px, 16rem); }
  .h-display { font-size: 80rem; line-height: 64rem; }

  .btn { font-size: 18rem; line-height: 21.56rem; }
  .btn--circle { width: calc(var(--btn-mw, 133) * 1rem); height: calc(var(--btn-mh, 73) * 1rem); }
  .btn__art--d { display: none; }
  .btn__art--m { display: inline; }
  .btn__oval { transform: rotate(-3.61deg); }
  .btn--underline { gap: 2rem; letter-spacing: 0; }
  .btn__line { height: 3rem; }

  .nav-link { font-size: 18rem; line-height: 21.56rem; }
  .masthead { padding: 17rem 12rem 10rem 8rem; }
  .masthead--home { padding-bottom: 10rem; }
  .masthead__nav { margin-top: 10rem; padding: 0; }

  .bar { height: 60rem; padding: 8rem 12rem; }
  .bar__logo { width: 150rem; }
  .bar__nav { display: none; }
  .bar__toggle { display: grid; place-items: center; width: 44rem; height: 44rem; }

  .footer { height: 320rem; padding: 11rem 8rem 0 12rem; }
  .footer__logo { width: 373rem; }
  .footer__nav { margin-top: 9rem; padding: 0; }
  .footer__nav .nav-link { font-size: 16rem; line-height: 19.17rem; }
  .ticker { top: 156.4rem; width: 610rem; height: 46rem; margin-left: -305rem; transform: translate(59rem, -50%) rotate(-2.64deg); }
  .ticker__track { gap: 20rem; padding-right: 20rem; }
  .ticker__item { font-size: 43rem; line-height: 34.4rem; }
  .footer__base { left: 0; right: 0; top: 218rem; flex-direction: column; align-items: center; gap: 24rem; }
  .footer__copy { width: 384rem; margin-top: 0; font-size: 12rem; line-height: 9.6rem; text-align: center; }
  .masthead__nav .nav-link { line-height: 21.56rem; }
  .footer__nav .nav-link { line-height: 19.17rem; }
  .social { gap: 5rem; }
  .social__link { width: 44rem; height: 44rem; }
  .social__link svg { width: 18rem; height: 20rem; }

  /* Phones show the whole video frame at its own 16:9 shape instead of a cropped 390-tall slice (client R1). */
  .home-hero { height: auto; }
  .home-hero__media { height: auto; aspect-ratio: 16 / 9; }

  .intro { display: block; padding: 42rem 22rem 55rem 17rem; }
  .intro__heading { width: 353rem; font-size: 80rem; line-height: 64rem; white-space: normal; }
  .intro__heading br { display: none; }
  .intro__side { margin: 42rem 0 0 2rem; width: 312rem; }
  .intro__text { font-size: 16rem; line-height: 22.4rem; --pspace: 20rem; }
  .intro__tagline { margin-top: 16rem; }
  .intro__actions { gap: 22rem; margin-top: 24rem; }

  .logos { padding: 25rem 0 25rem; }
  .logos__row--right { height: 84rem; }
  .logos__row--left { height: 60rem; margin-left: -100rem; }
  .logos__row + .logos__row { margin-top: 5rem; }
  .logos__item { width: calc(var(--w) * .745rem); height: calc(var(--h) * .745rem); }

  .home-work { padding: 86rem 21rem 56rem 18rem; }
  .home-work__heading { position: static; font-size: 60rem; line-height: 48rem; }
  .home-work__grid { flex-direction: column; gap: 36rem; margin-top: 48rem; }
  .home-work__col { display: contents; }
  .tile__media { height: 334rem; }
  .home-work__more { justify-content: flex-start; margin: 16rem 0 0 3rem; }

  .lead { height: auto; padding: 19rem 16rem 0 12rem; }
  .lead__heading { font-size: 72rem; line-height: 57.6rem; }
  .lead__line-1 { width: 333rem; }
  .lead__line-2 { position: static; display: block; width: 333rem; margin-left: 18rem; }
  .lead__body { width: 365rem; margin: 40rem 0 0; gap: 28rem; }
  .lead__title { font-size: 16rem; line-height: 22.4rem; }
  .lead__text { font-size: 16rem; line-height: 22.4rem; }
  .lead__image { position: relative; left: -61rem; top: 0; width: 473rem; margin-top: 16rem; }

  .problem { height: auto; padding: 84rem 23rem 80rem 14rem; }
  .problem__heading { position: relative; left: 2rem; top: 0; font-size: 60rem; line-height: 48rem; }
  .problem__part-1 { width: auto; }
  .problem__part-2 { width: 274rem; margin: 2rem 0 0 38rem; }
  .problem__outro { margin-left: 2rem; }
  .problem__part-2 u { text-decoration-thickness: 3rem; text-underline-offset: 4rem; }
  .problem__image { left: auto; right: -42rem; top: 205rem; width: 198rem; } /* lowered beside "Doing?" (client R1) */
  .problem__body { position: static; width: auto; margin-top: 54rem; }
  .problem__intro, .problem__outro { font-size: 16rem; line-height: 22.4rem; }
  .checklist { margin: 36rem 0; }
  .checklist__item { font-size: 16rem; line-height: 22.4rem; gap: 16rem; }
  .icon-check { width: 14rem; height: 22rem; }
  .problem__body .btn { margin: 25rem 0 0 4rem; }

  .services { padding: 60rem 20rem; }
  .services__heading { font-size: 60rem; line-height: 48rem; }
  .acc__button { grid-template-columns: 1fr 36rem; column-gap: 12rem; align-items: center; padding: 24rem 0; }
  .acc__button .acc__summary { display: none; }
  .acc__title { font-size: 28rem; line-height: 22.4rem; }
  .acc__icon { width: 36rem; height: 36rem; }
  .acc__icon::before, .acc__icon::after { width: 17rem; margin-left: -8.5rem; }
  .acc.is-open { margin: 0 -20rem; padding: 0 20rem; }
  .acc__panel { padding: 0 0 24rem; margin: 0; }
  .acc__summary--mobile { display: block; margin-bottom: 20rem; font-size: 16rem; line-height: 22.4rem; }
  .pills { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; }
  .pill { font-size: 14rem; line-height: 19.6rem; }

  .cta-bold { height: 630rem; }
  .cta-bold::before { inset: 20rem 0 0; }
  .cta-bold__image { left: -12rem; top: 95rem; width: 317.47rem; }
  .cta-bold__heading { left: 13rem; top: 52rem; width: 352rem; font-size: 52rem; line-height: 41.6rem; }
  .cta-bold__line-2 { margin-top: -1.6rem; text-decoration-thickness: 3rem; text-underline-offset: 3rem; }
  .cta-bold__text { left: 20rem; top: 394rem; width: 353rem; font-size: 18rem; line-height: 25.2rem; }
  .cta-bold__action { left: 20rem; top: 545rem; }
  .cta-bold__action .btn--underline { gap: 6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .logos__track, .ticker__track { animation: none; }
  .bar, .menu, .menu__nav .nav-link { transition: none; }
}

/* ==========================================================================
   Inner pages (desktop first; mobile block at the end)
   ========================================================================== */

/* 15. Page hero (Work / About / How We Partner) ----------------------------- */
.page-hero { position: relative; height: 599rem; overflow: hidden; background: var(--black); color: var(--white); }
.page-hero--about { height: 658rem; }
.page-hero--partner { height: 715rem; background: #000; }
.page-hero__media { position: absolute; inset: 0 0 auto; height: 695rem; }
.page-hero--partner .page-hero__media { height: 715rem; }
.page-hero__media img, .page-hero__media video { width: 100%; height: 100%; object-fit: cover; }
.page-hero--about .page-hero__media::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .2); }
.page-hero--partner .page-hero__media::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .3); }
.page-hero__heading { position: absolute; left: 60rem; top: 45rem; width: 782rem; line-height: 93.6rem; }
.page-hero__text { position: absolute; width: 407rem; font-size: 18rem; line-height: 21.6rem; --pspace: 21.6rem; }
.page-hero--work .page-hero__text { left: 953rem; top: 329rem; }
.page-hero--about .page-hero__text { left: 62rem; top: 421rem; }
.page-hero--partner .page-hero__text { left: 953rem; top: 348rem; --pspace: 16rem; }
.page-hero__tagline { display: none; }
.page-hero__action { position: absolute; left: 960rem; top: 578rem; }
.btn--lg { font-size: 24rem; line-height: 28.75rem; }

/* 16. Work case studies ----------------------------------------------------- */
/* scroll-margin: links from the Home tiles (/work/#slug) land with the title clear of the fixed compact header. */
.case { padding: 60rem 0; overflow: hidden; scroll-margin-top: 80rem; }
.cases > .case:last-child { padding-bottom: 120rem; } /* double space before the CTA (client R1) */
.cases + .cta-bold::before { top: 0; } /* the pink starts right after the work, no black strip (client R1) */
.case__head { padding: 0 60rem; }
.case__title { font-size: 60rem; line-height: 48rem; color: var(--pink); }
.case__info { display: flex; gap: 20rem; margin-top: 40rem; }
.case__credits { display: flex; flex-direction: column; gap: 10rem; width: 650rem; margin: 0; }
.case__credit { display: flex; flex-direction: column; gap: 2rem; font-size: 15rem; line-height: 18rem; color: #000; }
.case__credit dt { font-weight: var(--fw-bold); }
.case__credit dd { margin: 0; }
.case__text { display: flex; gap: 20rem; width: 650rem; font-size: 15rem; line-height: 18rem; color: #000; }
.case__text p { flex: 0 0 315rem; }
.reel { margin-top: 40rem; overflow: hidden; }
@media (min-width: 1024px) {
  .reel { cursor: grab; user-select: none; touch-action: pan-y; }
  .reel.is-dragging { cursor: grabbing; }
  .reel img, .reel video { pointer-events: none; } /* drag the reel, not the image */
}
.reel__track { display: flex; gap: 10rem; width: max-content; will-change: transform; }
.reel__slide { flex: none; height: 589rem; aspect-ratio: var(--ar); overflow: hidden; background: #d9dde2; }
.reel__media { width: 100%; height: 100%; object-fit: cover; }

/* 17. About ------------------------------------------------------------------ */
.story, .founders, .capabilities { position: relative; }
.story { height: 684rem; }
.story__image { position: absolute; left: 88.66rem; top: 146rem; width: 556.34rem; }
.story__heading { position: absolute; left: 730rem; top: 106rem; line-height: 93.6rem; color: var(--pink); }
.story__text { position: absolute; left: 730rem; top: 269rem; width: 650rem; font-size: 32rem; line-height: 38.4rem; --pspace: 20rem; color: #000; }

.founders { height: 981rem; } /* +40 for the larger bios (client R1) */
.founders__heading { position: absolute; left: 60rem; top: 48rem; line-height: 93.6rem; color: var(--pink); }
.founders__grid { position: absolute; left: 283rem; top: 220rem; display: flex; gap: 46rem; }
.founder--1 { width: 401rem; }
.founder--2 { width: 395rem; }
.founder__photo { height: 326rem; overflow: hidden; }
.founder--2 .founder__photo { height: 323rem; }
.founder__photo img { width: 100%; height: 100%; object-fit: cover; }
.founder__name { margin-top: 16rem; font-weight: 500; font-size: 20rem; line-height: 28rem; color: #000; }
.founder--2 .founder__name { margin-top: 19rem; }
.founder__name span { display: block; }
.founder__bio { margin-top: 14rem; font-size: 16rem; line-height: 22.4rem; --pspace: 20rem; color: #000; } /* one size up (client R1) */

.capabilities { height: 801rem; }
.capabilities__image { position: absolute; left: 120rem; top: 141rem; width: 505.97rem; }
.capabilities__heading { position: absolute; left: 730rem; top: 137rem; line-height: 93.6rem; color: var(--pink); }
.capabilities__list { position: absolute; left: 730rem; top: 308rem; width: 650rem; display: flex; flex-direction: column; gap: 12rem; }
.capabilities__list li { display: flex; align-items: center; gap: 20rem; font-size: 28rem; line-height: 33.6rem; color: #000; }
.capabilities__list .icon-check { width: 25rem; height: 34rem; color: var(--pink); }

.faq { padding: 60rem; background: var(--black); color: var(--white); }
.faq__heading { line-height: 93.6rem; letter-spacing: 0; color: var(--pink); }
.accordion--faq { margin-top: 52rem; }
.accordion--faq .acc { border-bottom: 1px solid var(--white); }
/* Client R1: 20 more side padding, answers a size larger and wider (ending about halfway to the +/- button). */
.accordion--faq .acc__button { display: flex; justify-content: space-between; align-items: center; gap: 24rem; padding: 28rem 44rem; }
.accordion--faq .acc__title { font-weight: var(--fw-regular); font-size: 36rem; line-height: 43rem; letter-spacing: 0; }
.accordion--faq .acc__icon { flex: none; }
.accordion--faq .acc__panel { padding: 0 44rem 32rem; margin: 0; }
.acc__answer { max-width: 1060rem; font-size: 20rem; line-height: 28rem; --pspace: 16rem; }

.cta-fit, .cta-ignore { position: relative; background: var(--black); color: var(--white); overflow: hidden; }
.cta-fit::before, .cta-ignore::before { content: ""; position: absolute; inset: 20rem 0 0; background: var(--pink); }
.cta-fit { height: 620rem; }
.cta-fit__heading { position: absolute; left: 60rem; top: 119rem; width: 820rem; font-size: 140rem; line-height: 112rem; }
.cta-fit__heading .line { display: block; }
.cta-fit__heading .line:nth-child(2) { margin-left: 123rem; } /* design indents the second line */
.cta-fit__actions { position: absolute; left: 188rem; top: 412rem; display: flex; align-items: center; gap: 41rem; }
.cta-fit__actions .btn--underline { margin-top: 12rem; }
.cta-fit__image { position: absolute; left: 806rem; top: 108rem; width: 536rem; }

/* 18. How We Partner -------------------------------------------------------- */
.levels { position: relative; height: 997rem; }
.levels__image { position: absolute; left: 843rem; top: 67rem; width: 420.83rem; }
.levels__heading { position: absolute; left: 60rem; top: 100rem; width: 808rem; line-height: 93.6rem; color: var(--pink); }
.levels__intro { position: absolute; left: 60rem; top: 340rem; width: 602rem; font-size: 24rem; line-height: 28.8rem; color: #000; }
.cards { display: flex; gap: 19rem; }
.levels .cards { position: absolute; left: 60rem; top: 533rem; }
.card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40rem;
  width: 427rem;
  height: 388rem;
  padding: 24rem;
  background: var(--white);
  color: #000;
}
.card:nth-child(2) { width: 426rem; }
.card__meta { display: flex; justify-content: space-between; gap: 10rem; padding-bottom: 12rem; border-bottom: 1px solid currentColor; font-size: 16rem; line-height: 19.2rem; }
.card__body { display: flex; flex-direction: column; gap: 20rem; }
.card__title { font-size: 32rem; line-height: 38.4rem; font-weight: var(--fw-regular); }
.card__text { font-size: 18rem; line-height: 25.2rem; --pspace: 20rem; }

.process { position: relative; height: 698rem; background: var(--black); color: var(--white); }
.process__heading { position: absolute; left: 60rem; top: 87rem; line-height: 93.6rem; color: var(--pink); }
.process__intro { position: absolute; left: 731rem; top: 98rem; width: 634rem; font-size: 24rem; line-height: 28.8rem; }
.process .cards { position: absolute; left: 60rem; top: 286rem; }
.cards--dark .card { height: 356rem; background: var(--grey-card); color: var(--white); }

.project { position: relative; height: 606rem; background: var(--black); color: var(--white); }
.project__image { position: absolute; left: 797rem; top: 38rem; width: 508.2rem; }
.project__heading { position: absolute; left: 60rem; top: 87rem; width: 538rem; line-height: 93.6rem; color: var(--pink); }
.project__text { position: absolute; left: 60rem; top: 344rem; width: 595rem; font-size: 24rem; line-height: 28.8rem; }

.cta-ignore { height: 582rem; }
.cta-ignore__heading { position: absolute; left: 60rem; top: 119rem; width: 636rem; font-size: 140rem; line-height: 112rem; }
.cta-ignore__text { position: absolute; left: 953rem; top: 138rem; width: 412rem; font-size: 24rem; line-height: 28.8rem; }
.cta-ignore__action { position: absolute; left: 951rem; top: 301rem; }

/* 19. Contact ------------------------------------------------------------------ */
.contact { position: relative; height: 772rem; margin-top: 9rem; background: var(--black); color: var(--white); }
.contact__heading { position: absolute; left: 60rem; top: 107rem; line-height: 93.6rem; }
.contact__image { position: absolute; left: 169rem; top: 229rem; width: 356rem; }
.contact__body { position: absolute; left: 729rem; top: 118rem; width: 636rem; }
.contact__intro { font-size: 24rem; line-height: 28.8rem; }
.contact-form { position: relative; display: grid; grid-template-columns: 307rem 307rem; justify-content: space-between; row-gap: 39rem; margin-top: 70rem; }
.field { position: relative; }
.field--details { grid-column: 1 / -1; }
.field input, .field textarea {
  display: block;
  width: 100%;
  padding: 0 0 12rem;
  border: 0;
  border-bottom: 1px solid var(--white);
  border-radius: 0;
  background: none;
  color: var(--white);
  font: inherit;
  font-size: 20rem;
  line-height: 24rem;
  outline: none;
}
.field textarea { height: 111rem; resize: none; }
.field input::placeholder, .field textarea::placeholder { color: rgba(255, 255, 255, .6); opacity: 1; }
.field input:focus, .field textarea:focus, .field.has-error input, .field.has-error textarea { border-bottom-color: var(--pink); }
.contact-form__trap { position: absolute; left: -9999px; }
.contact-form__foot { grid-column: 1 / -1; display: flex; align-items: center; gap: 25rem; margin: 11rem 0 0 -5rem; }
.contact-form__note { width: 284rem; font-size: 16rem; line-height: 19.2rem; }
.contact-form__status { grid-column: 1 / -1; min-height: 24rem; font-size: 18rem; line-height: 24rem; }
.contact-form.is-sending { opacity: .6; pointer-events: none; }

.basic { padding: 80rem 60rem; }
.basic__content { max-width: 800rem; margin-top: 40rem; }

/* ==========================================================================
   Inner pages: mobile
   ========================================================================== */
@media (max-width: 1023px) {
  .btn--lg { font-size: 20rem; line-height: 23.96rem; }
  .btn--lg.btn--circle { height: 60rem; }

  .page-hero, .page-hero--about, .page-hero--partner { height: auto; padding: 390rem 21rem 54rem; background: none; color: var(--black); }
  .page-hero__media, .page-hero--partner .page-hero__media { height: 390rem; background: #000; }
  .page-hero__heading { top: 94rem; left: 21rem; width: 349rem; font-size: 68rem; line-height: 53.04rem; color: var(--white); }
  .page-hero--work .page-hero__heading { top: 170rem; left: 17rem; width: 353rem; font-size: 60rem; line-height: 48rem; }
  .page-hero--about .page-hero__heading { top: 252rem; }
  .page-hero__text,
  .page-hero--work .page-hero__text,
  .page-hero--about .page-hero__text,
  .page-hero--partner .page-hero__text { position: static; width: 349rem; margin-top: 45rem; font-size: 18rem; line-height: 21.6rem; }
  .page-hero--work { padding: 390rem 21rem 70rem 19rem; }
  .page-hero--work .page-hero__text { width: 312rem; margin-top: 42rem; font-size: 16rem; line-height: 22.4rem; --pspace: 20rem; }
  .page-hero--partner .page-hero__text { --pspace: 12rem; }
  .page-hero__tagline { display: block; margin-top: 16rem; font-weight: var(--fw-bold); font-size: 18rem; line-height: 25.2rem; }
  .page-hero__action { position: static; margin-top: 22rem; }
  .page-hero--partner { padding-bottom: 33rem; }
  .page-hero .btn--light { color: var(--black); }

  /* Case studies: stacked text, swipeable cards (dbco.online mobile pattern). */
  .case { padding: 40rem 16rem 44rem; scroll-margin-top: 50rem; }
  .cases > .case:last-child { padding-bottom: 88rem; }
  .case + .case { border-top: 1px solid rgba(29, 27, 27, .15); }
  .case__head { padding: 0; }
  .case__title { font-size: 44rem; line-height: 35.2rem; }
  .case__info { flex-direction: column; gap: 20rem; margin-top: 20rem; }
  .case__credits, .case__text { width: auto; }
  .case__text { flex-direction: column; gap: 14rem; font-size: 15rem; line-height: 20rem; }
  .case__text p { flex: none; }
  .reel {
    margin: 28rem -16rem 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 16rem;
    scrollbar-width: none;
  }
  .reel::-webkit-scrollbar { display: none; }
  .reel__track { align-items: flex-start; gap: 8rem; padding: 0 16rem; transform: none !important; }
  /* Each slide keeps its file's own proportions (client R1: they were being cropped): up to 300 tall and 340 wide,
     whichever limit the shape hits first. */
  .reel__slide { width: min(340rem, calc(300rem * var(--ar))); height: auto; scroll-snap-align: start; }
  .reel__media { object-fit: contain; }
  .reel__slide[aria-hidden="true"] { display: none; } /* loop copies are for the desktop drift only */

  .story { display: flex; flex-direction: column; height: auto; padding: 0 21rem 0 16rem; }
  .story__image { order: 3; }
  .project { display: flex; flex-direction: column; }
  .project__image { order: 3; }
  .capabilities { display: flex; flex-direction: column; }
  .capabilities__image { order: 3; }
  /* Contact submit keeps the desktop oval on phones. */
  .btn--keep.btn--lg { font-size: 24rem; line-height: 28.75rem; }
  .btn--keep .btn__art--d { display: inline; }
  .btn--keep .btn__art--m { display: none; }
  .btn--keep .btn__oval { transform: none; }
  .story__heading { position: static; font-size: 60rem; line-height: 46.8rem; }
  .story__text { position: static; width: 336rem; margin-top: 28rem; font-size: 24rem; line-height: 28.8rem; --pspace: 20rem; }
  .story__image { position: relative; left: -6rem; top: 0; width: 368.29rem; margin-top: 9rem; }

  .founders { height: auto; padding: 49rem 16rem 36rem; }
  .founders__heading { position: static; margin-left: 4rem; font-size: 60rem; line-height: 46.8rem; }
  .founders__grid { position: static; flex-direction: column; gap: 60rem; margin-top: 40rem; }
  .founder--1, .founder--2 { width: auto; }
  .founder__photo, .founder--2 .founder__photo { height: 326rem; }
  .founder__name, .founder--2 .founder__name { margin-top: 15rem; }
  .founder__bio { margin-top: 15rem; }

  .capabilities { height: auto; padding: 35rem 13rem 36rem 19rem; }
  .capabilities__heading { position: static; font-size: 60rem; line-height: 46.8rem; }
  .capabilities__list { position: static; width: 361rem; margin-top: 44rem; gap: 8rem; }
  .capabilities__list li { gap: 8rem; font-size: 20rem; line-height: 24rem; align-items: flex-start; }
  .capabilities__list .icon-check { width: 18rem; height: 24rem; }
  .capabilities__image { position: relative; left: 25rem; top: 0; width: 305.08rem; margin-top: 44rem; }

  .faq { padding: 60rem 16rem; }
  .faq__heading { font-size: 60rem; line-height: 46.8rem; }
  .accordion--faq { margin-top: 20rem; }
  /* Rows line up with the rest of the page (16 from the edge); the open row's grey runs to the screen edges. */
  .accordion--faq .acc__button { gap: 8rem; padding: 24rem 0; }
  .accordion--faq .acc__title { font-size: 24rem; line-height: 28.8rem; }
  .accordion--faq .acc.is-open { margin: 0 -16rem; padding: 0 16rem; }
  .accordion--faq .acc__panel { padding: 0 0 24rem; }
  .acc__answer { font-size: 18rem; line-height: 25.2rem; }

  /* Buttons moved down off the heading (client R1); image and band follow. */
  .cta-fit { height: 621rem; }
  .cta-fit__heading { left: 19rem; top: 28rem; width: 355rem; font-size: 72rem; line-height: 57.6rem; }
  .cta-fit__actions { left: 26rem; top: 221rem; gap: 22rem; }
  .cta-fit__actions .btn--underline { margin-top: 6rem; }
  .cta-fit__image { left: 29rem; top: 318rem; width: 332rem; }

  .levels { height: auto; padding: 23rem 0 33rem; overflow: hidden; }
  .levels__image { position: relative; left: 26.75rem; top: 0; width: 319.53rem; }
  .levels__heading { position: static; width: 365rem; margin: 21rem 0 0 18rem; font-size: 60rem; line-height: 46.8rem; }
  .levels__intro { position: static; width: 356rem; margin: 30rem 0 0 18rem; font-size: 16rem; line-height: 19.2rem; }
  .cards { gap: 12rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 18rem; padding: 0 18rem; scrollbar-width: none; }
  .cards::-webkit-scrollbar { display: none; }
  .levels .cards { position: static; margin-top: 57rem; }
  .card, .card:nth-child(2) { flex: none; width: 327rem; height: 359rem; scroll-snap-align: start; }
  .card__title { font-size: 24rem; line-height: 28.8rem; }
  .card__text { font-size: 15rem; line-height: 21rem; }

  .process { height: auto; padding: 32rem 0; }
  .process__heading, .process__intro { position: static; }
  .process__heading { margin-left: 17rem; font-size: 60rem; line-height: 46.8rem; }
  .process__intro { width: 321rem; margin: 27rem 0 0 17rem; font-size: 16rem; line-height: 19.2rem; }
  .process .cards { position: static; margin-top: 53rem; padding: 0 16rem; scroll-padding-left: 16rem; }
  .cards--dark .card { height: 264rem; }

  .project { height: auto; padding: 38rem 41rem 36rem 16rem; }
  .project__heading { position: static; width: 269rem; font-size: 60rem; line-height: 46.8rem; }
  .project__text { position: static; width: 336rem; margin-top: 32rem; font-size: 16rem; line-height: 19.2rem; }
  .project__image { position: relative; left: 0; top: 0; width: 317.68rem; margin-top: 25rem; }

  .cta-ignore { height: 336rem; }
  .cta-ignore__heading { left: 19rem; top: 28rem; width: 355rem; font-size: 72rem; line-height: 57.6rem; }
  .cta-ignore__text { display: none; }
  .cta-ignore__action { left: 236rem; top: 242rem; }

  .contact { height: auto; margin-top: 0; padding: 36rem 17rem 60rem 15rem; }
  .contact__heading { position: static; margin-left: 6rem; font-size: 72rem; line-height: 56.16rem; }
  .contact__image { position: relative; left: 55rem; top: 0; width: 238rem; margin-top: 41rem; }
  .contact__body { position: static; width: auto; margin-top: 31rem; }
  .contact__intro { font-size: 16rem; line-height: 19.2rem; }
  .contact-form { grid-template-columns: 173rem 173rem; margin: 26rem 0 0 1rem; }
  .contact-form__foot { margin: 0; gap: 18rem; }
  .contact-form__note { width: 151rem; font-size: 11rem; line-height: 13.2rem; }
}

/* 20. Contact form rendered by WPForms (fields styled to match the design) ---- */
.contact-form--wpforms { margin-top: 70rem; }
.contact-form--wpforms .wpforms-container { width: 100%; max-width: none; margin: 0; }
.contact-form--wpforms .wpforms-form { width: 100%; }
.contact-form--wpforms .wpforms-form {
  display: grid;
  grid-template-columns: 307rem 307rem;
  justify-content: space-between;
  row-gap: 39rem;
}
.contact-form--wpforms .wpforms-field-container { display: contents; }
.contact-form--wpforms .wpforms-field { padding: 0; margin: 0; }
/* WPForms anti-spam honeypot: no class of its own, and its own CSS is switched off. */
.contact-form--wpforms .wpforms-field-container > div:not([data-field-type]) { display: none !important; }
.contact-form--wpforms .martz-full,
.contact-form--wpforms .wpforms-field-textarea,
.contact-form--wpforms .wpforms-submit-container,
.contact-form--wpforms .wpforms-error-container { grid-column: 1 / -1; }
.contact-form--wpforms .wpforms-field-label,
.contact-form--wpforms .wpforms-field-sublabel,
.contact-form--wpforms .wpforms-required-label { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.contact-form--wpforms input[type="text"],
.contact-form--wpforms input[type="email"],
.contact-form--wpforms textarea {
  display: block;
  width: 100%;
  max-width: none;
  padding: 0 0 12rem;
  border: 0;
  border-bottom: 1px solid var(--white);
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--white);
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: 20rem;
  line-height: 24rem;
}
.contact-form--wpforms textarea { height: 111rem; min-height: 0; resize: none; }
.contact-form--wpforms input::placeholder,
.contact-form--wpforms textarea::placeholder { color: rgba(255, 255, 255, .6); opacity: 1; }
.contact-form--wpforms input:focus,
.contact-form--wpforms textarea:focus { border-bottom-color: var(--pink); outline: none; }
.contact-form--wpforms .wpforms-field.wpforms-has-error input,
.contact-form--wpforms .wpforms-field.wpforms-has-error textarea { border-bottom-color: var(--pink); }
.contact-form--wpforms .wpforms-error {
  margin-top: 8rem;
  color: var(--pink);
  font-size: 14rem;
  line-height: 18rem;
}
.contact-form--wpforms .wpforms-submit-container { margin: 11rem 0 0 -5rem; padding: 0; }
.contact-form--wpforms .wpforms-submit {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 174rem;
  height: 78rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--white);
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: 24rem;
  line-height: 28.75rem;
  text-align: center;
}
.contact-form--wpforms .wpforms-submit:hover,
.contact-form--wpforms .wpforms-submit:focus { background: none; color: var(--white); }
.contact-form--wpforms .wpforms-submit-spinner { margin-left: 10rem; }
.contact-form--wpforms .wpforms-confirmation-container-full,
.contact-form--wpforms .wpforms-confirmation-container {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--white);
  font-size: 18rem;
  line-height: 25.2rem;
}
/* The note sits beside the submit button, which WPForms renders on its own. */
.contact-form__note--after { margin: -58rem 0 0 199rem; }

@media (max-width: 1023px) {
  .contact-form--wpforms { margin-top: 26rem; }
  .contact-form__note--after { margin: -49rem 0 0 187rem; }
  .contact-form--wpforms .wpforms-form { grid-template-columns: 173rem 173rem; }
  .contact-form--wpforms .wpforms-submit-container { margin: 0; }
}

/* 20. Contact form rendered by WPForms (fields styled to match the design) ---- */
.contact-form--wpforms { margin-top: 70rem; }
.contact-form--wpforms .wpforms-container { margin: 0; }
.contact-form--wpforms .wpforms-form {
  display: grid;
  grid-template-columns: 307rem 307rem;
  justify-content: space-between;
  row-gap: 39rem;
}
.contact-form--wpforms .wpforms-field-container { display: contents; }
.contact-form--wpforms .wpforms-field { padding: 0; margin: 0; }
.contact-form--wpforms .martz-full,
.contact-form--wpforms .wpforms-field-textarea,
.contact-form--wpforms .wpforms-submit-container,
.contact-form--wpforms .wpforms-error-container { grid-column: 1 / -1; }
.contact-form--wpforms .wpforms-field-label,
.contact-form--wpforms .wpforms-field-sublabel,
.contact-form--wpforms .wpforms-required-label { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.contact-form--wpforms input[type="text"],
.contact-form--wpforms input[type="email"],
.contact-form--wpforms textarea {
  display: block;
  width: 100%;
  max-width: none;
  padding: 0 0 12rem;
  border: 0;
  border-bottom: 1px solid var(--white);
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--white);
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: 20rem;
  line-height: 24rem;
}
.contact-form--wpforms textarea { height: 111rem; min-height: 0; resize: none; }
.contact-form--wpforms input::placeholder,
.contact-form--wpforms textarea::placeholder { color: rgba(255, 255, 255, .6); opacity: 1; }
.contact-form--wpforms input:focus,
.contact-form--wpforms textarea:focus { border-bottom-color: var(--pink); outline: none; }
.contact-form--wpforms .wpforms-field.wpforms-has-error input,
.contact-form--wpforms .wpforms-field.wpforms-has-error textarea { border-bottom-color: var(--pink); }
.contact-form--wpforms .wpforms-error {
  margin-top: 8rem;
  color: var(--pink);
  font-size: 14rem;
  line-height: 18rem;
}
.contact-form--wpforms .wpforms-submit-container { margin: 11rem 0 0 -5rem; padding: 0; }
.contact-form--wpforms .wpforms-submit {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 174rem;
  height: 78rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--white);
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: 24rem;
  line-height: 28.75rem;
  text-align: center;
}
.contact-form--wpforms .wpforms-submit:hover,
.contact-form--wpforms .wpforms-submit:focus { background: none; color: var(--white); }
.contact-form--wpforms .wpforms-submit-spinner { margin-left: 10rem; }
.contact-form--wpforms .wpforms-confirmation-container-full,
.contact-form--wpforms .wpforms-confirmation-container {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--white);
  font-size: 18rem;
  line-height: 25.2rem;
}
/* The note sits beside the submit button, which WPForms renders on its own. */
.contact-form__note--after { margin: -58rem 0 0 199rem; }

@media (max-width: 1023px) {
  .contact-form--wpforms { margin-top: 26rem; }
  .contact-form__note--after { margin: -49rem 0 0 187rem; }
  .contact-form--wpforms .wpforms-form { grid-template-columns: 173rem 173rem; }
  .contact-form--wpforms .wpforms-submit-container { margin: 0; }
}

/* ==========================================================================
   21. Wider than the 1440 design frame
   The design canvas centres and keeps its size; background colours, the hero
   media and the scrolling bands keep running edge to edge.
   ========================================================================== */
:root { --edge: max(0px, (var(--vw, 100vw) - 1440rem) / 2); }

/* Sections on the page background: just centre them. */
.intro, .home-work, .lead, .story, .founders, .capabilities, .levels, .case, .basic {
  max-width: 1440rem;
  margin-inline: auto;
}

/* Sections with their own background stay full width; their content shifts to the canvas. */
.problem > *,
.cta-bold > *,
.cta-fit > *,
.cta-ignore > *,
.process > *,
.project > *,
.contact > *,
.page-hero > :not(.page-hero__media),
.footer > :not(.ticker) {
  transform: translateX(var(--edge));
}
.services, .faq { padding-inline: calc(var(--edge) + 60rem); }
.footer { padding-inline: calc(20rem); }
.footer__nav { max-width: 1391rem; }
.footer__base { right: auto; width: 1386rem; }

/* Bands run the full width of the window. */
.ticker {
  width: max(1455rem, var(--vw, 100vw));
  margin-left: calc(max(1455rem, var(--vw, 100vw)) / -2);
}

@media (max-width: 1023px) {
  /* The desktop padding-inline above used to win on phones too (60 instead of the mobile 20 / 16). Client R1:
     services 20, FAQ in line with the rest of the page (16). */
  .services { padding-inline: 20rem; }
  .faq { padding-inline: 16rem; }
  .footer { padding-inline: 8rem 12rem; }
  .footer__nav { max-width: none; }
  .footer__base { width: auto; right: 0; }
  .ticker { width: max(610rem, var(--vw, 100vw)); margin-left: calc(max(610rem, var(--vw, 100vw)) / -2); }
}

/* ==========================================================================
   22. Scroll reveals
   One system, four variants. Elements are tagged by js/main.js (REVEALS config),
   play once, and never change the final layout. Off entirely under reduced motion.
   ========================================================================== */
:root {
  --reveal-time: 750ms;
  --reveal-ease: cubic-bezier(.22, .61, .25, 1);
}

[data-reveal] {
  transition:
    opacity var(--reveal-time) var(--reveal-ease) var(--reveal-delay, 0ms),
    transform var(--reveal-time) var(--reveal-ease) var(--reveal-delay, 0ms),
    -webkit-mask-position var(--reveal-time) var(--reveal-ease) var(--reveal-delay, 0ms),
    mask-position var(--reveal-time) var(--reveal-ease) var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

/* Copy, buttons, cards: rise and fade. */
[data-reveal="up"] { opacity: 0; transform: translateY(24rem); }

/* Display headings: the type rises into view behind a mask.
   A mask is used rather than clip-path because Chrome counts an element's own clip-path
   when deciding whether it intersects the viewport, so a fully clipped heading never reveals. */
[data-reveal="wipe"] {
  opacity: 0;
  transform: translateY(12rem);
  -webkit-mask-image: linear-gradient(to top, #000 0 50%, transparent 50% 100%);
  mask-image: linear-gradient(to top, #000 0 50%, transparent 50% 100%);
  -webkit-mask-size: 100% 200%;
  mask-size: 100% 200%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 0% 0%;
  mask-position: 0% 0%;
}
[data-reveal="wipe"].is-in { -webkit-mask-position: 0% 100%; mask-position: 0% 100%; }
/* Mask cleared once the reveal finishes (js/main.js) so nothing outside the box stays hidden. */
[data-reveal="wipe"].is-done { -webkit-mask-image: none; mask-image: none; }

/* Photography: settle in from a touch larger. */
[data-reveal="image"] { opacity: 0; transform: scale(1.04); }
[data-reveal="image"] img { will-change: transform; }

/* B&W photo cards (torn / cut-out graphics): tossed onto the page like a print onto a table (client R1).
   The card comes in from above and to one side (--toss-dir, alternated in js/main.js), larger and spinning, drops
   with a shadow that tightens as it nears the "table", lands a little past square, and settles slightly off-kilter
   (--toss-land). Triggered later than other reveals (see tossIo in js/main.js). */
[data-reveal="torn"] { --toss-dir: 1; --toss-land: 1.5deg; opacity: 0; }
[data-reveal="torn"].is-in {
  transition: none;
  animation: toss 1050ms cubic-bezier(.2, .8, .25, 1) calc(var(--reveal-delay, 0ms) + 120ms) both;
}
@keyframes toss {
  0% {
    opacity: 0;
    transform: translate(calc(var(--toss-dir) * 140rem), -120rem) rotate(calc(var(--toss-dir) * -14deg)) scale(1.18);
    filter: drop-shadow(0 60rem 40rem rgba(0, 0, 0, .35));
  }
  18% { opacity: 1; }
  62% {
    transform: translate(calc(var(--toss-dir) * -6rem), 4rem) rotate(calc(var(--toss-dir) * var(--toss-land) * 2.2)) scale(.985);
    filter: drop-shadow(0 6rem 8rem rgba(0, 0, 0, .25));
  }
  80% { transform: translate(calc(var(--toss-dir) * 2rem), -1rem) rotate(calc(var(--toss-dir) * var(--toss-land) * .6)) scale(1.004); }
  100% {
    opacity: 1;
    transform: rotate(calc(var(--toss-dir) * var(--toss-land)));
    filter: none;
  }
}

[data-reveal].is-in {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* The hero plays on load rather than on scroll. */
.home-hero [data-reveal], .page-hero [data-reveal] { --reveal-time: 900ms; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-reveal].is-in {
    opacity: 1;
    transform: none;
    transition: none;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* After a WPForms submission the button is gone, so stack the privacy note under the thank-you message. */
.contact-form--wpforms:has(.wpforms-confirmation-container-full, .wpforms-confirmation-container) + .contact-form__note--after { margin: 16rem 0 0; }