/* ============================================================================
   Sections - the home-page blocks and the shared inner-page hero.
   ========================================================================= */

/* ---------------------------------------------------------------- hero */

.section--hero {
  position: relative;
  display: flex;
  align-items: center;
  /* dvh, not vh - mobile browser chrome must not clip the hero. */
  block-size: 88dvh;
  min-block-size: 640px;
  padding-block: var(--header-h) var(--s-11);
  overflow: hidden;
}

@media (min-width: 576px) { .section--hero { block-size: 90dvh; } }
@media (min-width: 768px) { .section--hero { block-size: 92dvh; } }
@media (min-width: 992px) { .section--hero { block-size: 94dvh; } }
@media (min-width: 1200px) { .section--hero { block-size: 100dvh; } }

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__media img,
.hero__media video {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* Video is attached after window.load, on every screen size. */
.hero__media video { display: none; }
.hero__media.has-video video { display: block; }
.hero__media.has-video img { display: none; }

/*
 * YouTube / Vimeo background embed.
 *
 * object-fit does nothing to an iframe, so the frame is sized to the widest
 * of "100vw at 16:9" and "100vh at 16:9" and centred. That crops the letterbox
 * off both axes and keeps the video filling the hero at any aspect ratio,
 * which is what a background video has to do.
 */
.hero__embed {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none; /* the hero's buttons stay clickable */
  /* Transparent until main.js confirms the player has loaded, so the poster
     image shows through instead of the iframe's own black background. */
  opacity: 0;
  transition: opacity 700ms var(--ease);
}

.hero__media.has-embed .hero__embed { opacity: 1; }

/* Without JS the fade never runs, so show it rather than hide it forever. */
html:not(.js) .hero__embed { opacity: 1; }

.hero__embed iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  /*
   * The extra scale is not decorative. YouTube paints the video title and
   * channel name over the top-left of the frame for the first seconds of
   * playback, and the modestbranding parameter no longer suppresses it.
   * Overscaling pushes that chrome outside the visible area, so the hero
   * shows video and nothing else.
   */
  transform: translate(-50%, -50%) scale(1.35);
  inline-size: max(100vw, 177.78vh);   /* 16/9 */
  block-size:  max(100vh, 56.25vw);    /* 9/16 */
  border: 0;
}

/* The background now plays on small screens as well. The opt-outs that remain
   - Save-Data and reduced-motion - are handled in main.js, where they belong:
   they are visitor signals, not a screen-width guess. */

.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(600px 400px at 20% 80%, rgba(46, 107, 255, .16), transparent 70%),
    linear-gradient(180deg, rgba(11, 11, 12, .72) 0%, rgba(11, 11, 12, .55) 45%, rgba(11, 11, 12, .94) 100%);
}

.hero__inner {
  position: relative;
  z-index: 2;
  inline-size: 100%;
}

.hero__content {
  max-inline-size: 1080px;
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-6);
}

.hero__title {
  font-size: var(--fs-hero);
  letter-spacing: var(--tr-hero);
  line-height: var(--lh-hero);
  text-transform: uppercase;
  color: var(--white);
  margin: 0;
}

/* Word-by-word mask reveal: each word sits in an overflow:hidden wrapper. */
.hero__title .word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}

/*
 * The reveal runs as a CSS animation rather than a JS-toggled class. It used
 * to wait for main.js to add .is-in, which meant the site's main headline
 * stayed invisible forever if that module ever failed to load, was blocked,
 * or errored before its boot ran. Driving it from CSS makes the animation an
 * enhancement again: the words always end up on screen.
 */
.hero__title .word > span {
  display: inline-block;
  transform: translateY(105%);
  animation: hero-word-rise 800ms var(--ease-out-expo) forwards;
  animation-delay: calc(var(--i, 0) * 90ms);
}

@keyframes hero-word-rise {
  to { transform: none; }
}

.hero__sub {
  max-inline-size: 720px;
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--mist-200);
  margin: 0;
}

@media (max-width: 575.98px) {
  .hero__sub { font-size: 15px; }
}

.hero__actions {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  inline-size: 100%;
  max-inline-size: 340px;
}

@media (min-width: 576px) {
  .hero__actions { flex-direction: row; inline-size: auto; max-inline-size: none; justify-content: center; }
}

/* scroll indicator */

.hero__scroll {
  position: absolute;
  inset-block-end: var(--s-8);
  inset-inline-start: var(--gutter);
  z-index: 2;
  display: none;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tr-index);
  color: var(--mist-600);
}

@media (min-width: 992px) { .hero__scroll { display: flex; } }

.hero__scroll-line {
  position: relative;
  inline-size: 1px;
  block-size: 48px;
  background: var(--line-strong);
}

.hero__scroll-line::after {
  content: "";
  position: absolute;
  inset-inline-start: -2px;
  inline-size: 5px;
  block-size: 5px;
  border-radius: var(--r-pill);
  background: var(--blue-500);
  animation: scroll-dot 2s var(--ease) infinite;
}

@keyframes scroll-dot {
  0% { transform: translateY(0); opacity: 0; }
  25% { opacity: 1; }
  100% { transform: translateY(43px); opacity: 0; }
}

/* credibility ticker */

.hero__ticker {
  position: absolute;
  inset-block-end: var(--s-8);
  inset-inline-end: var(--gutter);
  z-index: 2;
  display: none;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--mist-600);
  block-size: 1.4em;
  overflow: hidden;
}

@media (min-width: 992px) { .hero__ticker { display: block; } }

.hero__ticker span {
  display: block;
  opacity: 0;
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  white-space: nowrap;
  transition: opacity var(--t-slow) var(--ease);
}

.hero__ticker span.is-in { opacity: 1; position: relative; }

/* ---------------------------------------------------------------- inner hero */

.inner-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-block-size: 34vh;
  padding-block: calc(var(--header-h) + var(--s-9)) var(--s-9);
  background: var(--ink-850);
  overflow: hidden;
  border-block-end: 1px solid var(--line);
}

@media (min-width: 768px) {
  .inner-hero { min-block-size: 42vh; padding-block: calc(var(--header-h) + var(--s-11)) var(--s-10); }
}

.inner-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: .18;
}

.inner-hero__bg img { inline-size: 100%; block-size: 100%; object-fit: cover; }

.inner-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(16, 16, 18, .5) 0%, rgba(16, 16, 18, .92) 100%);
}

.inner-hero__inner { position: relative; z-index: 2; inline-size: 100%; }

.inner-hero__title { margin-block: var(--s-4) 0; max-inline-size: 22ch; }

.inner-hero__deck {
  margin-block-start: var(--s-5);
  max-inline-size: 60ch;
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--mist-400);
}

/* ---------------------------------------------------------------- statement */

.statement__lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--mist-200);
  margin-block-end: var(--s-6);
}

.statement__body { color: var(--mist-400); }
.statement__body p + p { margin-block-start: var(--s-5); }

/* ---------------------------------------------------------------- stats */

.section--stats { background: var(--ink-850); padding-block: var(--s-10); }

.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border-block: 1px solid var(--line);
}

@media (min-width: 768px) { .stats { grid-template-columns: repeat(4, 1fr); } }

.stat {
  background: var(--ink-850);
  padding: var(--s-7) var(--s-5);
  text-align: center;
}

@media (min-width: 768px) { .stat { padding: var(--s-8) var(--s-6); } }

.stat__value {
  font-size: var(--fs-stat);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--white);
  font-variant-numeric: tabular-nums;
}

.stat__suffix { color: var(--blue-500); }

.stat__label {
  margin-block-start: var(--s-4);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mist-400);
}

/* ---------------------------------------------------------------- services list */

.service-list { border-block-start: 1px solid var(--line); }

.service-row { border-block-end: 1px solid var(--line); }

.service-row__trigger {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  align-items: center;
  gap: var(--s-4);
  inline-size: 100%;
  min-block-size: 72px;
  padding-inline: var(--s-4);
  text-align: start;
  transition: background var(--t-base) var(--ease);
}

@media (min-width: 768px) {
  .service-row__trigger {
    grid-template-columns: 72px minmax(0, 1fr) minmax(0, 1fr) auto;
    min-block-size: 96px;
    padding-inline: var(--s-5);
  }
}

.service-row__num {
  font-family: var(--font-mono);
  font-size: var(--fs-index);
  letter-spacing: var(--tr-index);
  color: var(--blue-500);
  transition: color var(--t-base) var(--ease);
}

.service-row__title {
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: var(--tr-h3);
  text-transform: uppercase;
  color: var(--white);
  transition: transform var(--t-base) var(--ease);
}

.service-row__desc {
  display: none;
  font-size: var(--fs-small);
  color: var(--mist-400);
}

@media (min-width: 768px) { .service-row__desc { display: block; } }

.service-row__chevron {
  color: var(--mist-600);
  transition: transform var(--t-base) var(--ease), color var(--t-base) var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  .service-row__trigger:hover { background: var(--ink-850); }
  .service-row__trigger:hover .service-row__num { color: var(--white); }
  .service-row__trigger:hover .service-row__title { transform: translateX(8px); }
  .service-row__trigger:hover .service-row__chevron { color: var(--white); transform: translateX(4px); }
}

.service-row__trigger[aria-expanded="true"] { background: var(--ink-850); }
.service-row__trigger[aria-expanded="true"] .service-row__chevron { transform: rotate(90deg); }

.service-row__panel {
  overflow: hidden;
  block-size: 0;
  transition: block-size 320ms var(--ease);
  background: var(--ink-850);
}

.service-row__panel-inner {
  display: grid;
  gap: var(--s-6);
  padding: 0 var(--s-4) var(--s-7);
}

@media (min-width: 768px) {
  .service-row__panel-inner {
    grid-template-columns: 72px 1fr 320px;
    gap: var(--s-7);
    padding: 0 var(--s-5) var(--s-8);
  }
}

.service-row__outcomes { list-style: none; padding: 0; margin: 0 0 var(--s-6); }

.service-row__outcomes li {
  position: relative;
  padding-inline-start: var(--s-6);
  margin-block-end: var(--s-3);
  color: var(--mist-400);
  font-size: var(--fs-small);
}

.service-row__outcomes li::before {
  content: "";
  position: absolute;
  inset-block-start: .7em;
  inset-inline-start: 0;
  inline-size: 12px;
  block-size: 1px;
  background: var(--blue-500);
}

.service-row__thumb {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--r-xs);
  background: var(--ink-800);
}

.service-row__thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; }

/* ---------------------------------------------------------------- client wall */

.marquee {
  position: relative;
  overflow: hidden;
  block-size: 64px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

@media (min-width: 768px) { .marquee { block-size: 96px; } }

.marquee__track {
  display: flex;
  align-items: center;
  gap: 72px;
  inline-size: max-content;
  block-size: 100%;
  animation: marquee 40s linear infinite;
}

.marquee--reverse .marquee__track { animation-duration: 48s; animation-direction: reverse; }

.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track { animation-play-state: paused; }

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.marquee__item {
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.marquee__item img {
  max-block-size: 34px;
  inline-size: auto;
  filter: grayscale(1) brightness(1.6);
  opacity: .42;
  transition: opacity 240ms var(--ease), filter 240ms var(--ease);
}

.marquee__item:hover img,
.marquee__item:focus-visible img { opacity: 1; filter: none; }

@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; flex-wrap: wrap; justify-content: center; inline-size: 100%; }
  .marquee { block-size: auto; }
}

/* Static grid fallback, selectable in admin. */
.logo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

@media (min-width: 576px) { .logo-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 992px) { .logo-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1440px) { .logo-grid { grid-template-columns: repeat(6, 1fr); } }

.logo-grid__cell {
  display: grid;
  place-items: center;
  padding: var(--s-6);
  min-block-size: 96px;
  background: var(--ink-900);
}

.logo-grid__cell img {
  max-block-size: 34px;
  inline-size: auto;
  filter: grayscale(1) brightness(1.6);
  opacity: .42;
  transition: opacity 240ms var(--ease), filter 240ms var(--ease);
}

.logo-grid__cell:hover img { opacity: 1; filter: none; }

/* ---------------------------------------------------------------- industries */

.industries { display: grid; gap: var(--s-8); }

@media (min-width: 992px) {
  .industries { grid-template-columns: 4fr 8fr; gap: var(--s-11); align-items: start; }
}

.industries__tabs {
  display: none;
  flex-direction: column;
  border-block-start: 1px solid var(--line);
}

@media (min-width: 992px) { .industries__tabs { display: flex; } }

.industries__tab {
  display: flex;
  align-items: center;
  min-block-size: 56px;
  padding-inline: var(--s-5);
  border-block-end: 1px solid var(--line);
  border-inline-start: 2px solid transparent;
  text-align: start;
  font-size: var(--fs-h4);
  font-weight: 500;
  color: var(--mist-400);
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

.industries__tab:hover { color: var(--white); }

.industries__tab[aria-selected="true"] {
  color: var(--white);
  background: var(--ink-850);
  border-inline-start-color: var(--blue-500);
}

.industries__panel { display: none; }

@media (min-width: 992px) {
  .industries__panel {
    display: block;
    opacity: 0;
    transition: opacity 220ms var(--ease);
  }
  .industries__panel.is-active { display: block; opacity: 1; }
  .industries__panel:not(.is-active) { display: none; }
}

.industries__panel-image {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--r-sm);
  margin-block-start: var(--s-7);
  background: var(--ink-800);
}

.industries__panel-image img { inline-size: 100%; block-size: 100%; object-fit: cover; }

/* Scroll stage for the industries tabs.

   The block is given extra height by industry-scroll.js and its contents are
   pinned while that height is scrolled, so a reader who never clicks a tab
   still moves through all of them. Height comes from JS, which means with
   scripting off the wrapper collapses to its natural size and the tabs behave
   exactly as they did before.

   Only meaningful at the tab breakpoint: below 992px the block is a stacked
   accordion, where pinning would fight the reader for no benefit. */
.industries-stage__inner { min-block-size: 0; }

@media (min-width: 992px) {
  .industries-stage { position: relative; }

  .industries-stage__inner {
    position: sticky;
    /* Clears the sticky header, which reappears on any upward scroll. */
    inset-block-start: calc(var(--header-h) + var(--s-6));
    /* A pinned panel taller than the viewport can never be read to the end:
       its foot sits permanently below the fold while the next tab is already
       arriving. Size the pinned area to what actually fits on screen and let
       the panel lay itself out inside that.

       A definite block-size, not max-block-size: the percentage heights below
       have nothing to resolve against a maximum, so the panel would overflow
       the cap instead of fitting inside it. svh keeps mobile browser chrome
       collapsing from resizing the stage mid-scroll. */
    block-size: calc(100svh - var(--header-h) - var(--s-6) - var(--s-7));
    min-block-size: 420px;
  }

  /* The column has to stretch for the panel to know how much room it has;
     the block's own rule start-aligns both columns. */
  .industries-stage__inner .industries {
    align-items: stretch;
    block-size: 100%;
    min-block-size: 0;
  }

  .industries-stage__inner .industries__panels {
    block-size: 100%;
    min-block-size: 0;
  }

  /* Text takes the space it needs, the image absorbs whatever is left, so the
     whole panel always ends inside the pinned viewport. */
  .industries-stage__inner .industries__panel.is-active {
    display: flex;
    flex-direction: column;
    block-size: 100%;
    min-block-size: 0;

    /* A true cross-fade would need the outgoing panel to stay rendered, and it
       cannot: panels are swapped with [hidden], which utilities.css enforces as
       `display: none !important` - correctly, since hidden should always mean
       hidden. A transition is dead in the water for the same reason, because
       the incoming panel has no rendered starting state to transition from.
       An animation does run when an element becomes displayed, so that is what
       carries the change. */
    animation: industries-panel-in var(--t-base) var(--ease-out-expo) both;
  }

  /* The image lands just behind the text rather than everything arriving at
     once, which reads as deliberate instead of abrupt. */
  .industries-stage__inner .industries__panel.is-active .industries__panel-image {
    animation: industries-panel-in 420ms var(--ease-out-expo) 90ms both;
  }

  .industries-stage__inner .industries__panel-image {
    flex: 1 1 auto;
    min-block-size: 140px;
    aspect-ratio: auto;
    margin-block-start: var(--s-6);
  }
}

@keyframes industries-panel-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* Pinning is motion. Under reduced-motion the block keeps its natural height
   and the tabs stay manual - the JS bails out and never sets a height, and
   this makes sure a height set before the preference changed is dropped too. */
@media (prefers-reduced-motion: reduce) {
  .industries-stage { block-size: auto !important; }

  /* Opt out of the viewport-fitting layout as well, not just the pinning -
     with nothing pinned there is no reason to squeeze the panel into a
     screenful, and the image goes back to its natural ratio. */
  .industries-stage__inner {
    position: static;
    block-size: auto;
    min-block-size: 0;
  }

  .industries-stage__inner .industries {
    align-items: start;
    block-size: auto;
  }

  .industries-stage__inner .industries__panels { block-size: auto; }

  .industries-stage__inner .industries__panel.is-active {
    display: block;
    block-size: auto;
  }

  .industries-stage__inner .industries__panel-image {
    flex: none;
    aspect-ratio: 16 / 10;
  }
}

/* ---------------------------------------------------------------- philosophy */

.section--philosophy { background: var(--ink-850); padding-block: calc(var(--sec-y) * 1.25); }

.philosophy__kicker {
  font-size: var(--fs-h3);
  font-weight: 400;
  color: var(--mist-200);
  margin-block: var(--s-6) var(--s-7);
}

.philosophy__body { color: var(--mist-400); }
.philosophy__body p { max-inline-size: none; margin-block-end: var(--s-5); }

@media (min-width: 1200px) {
  .philosophy__body { columns: 2; column-gap: var(--s-9); }
  .philosophy__body p { break-inside: avoid; }
}

.philosophy__quote {
  margin-block: var(--s-8) 0;
  padding-inline-start: var(--s-6);
  border-inline-start: 2px solid var(--blue-500);
  font-size: var(--fs-h3);
  line-height: 1.4;
  color: var(--mist-200);
}

.signature {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  margin-block-start: var(--s-9);
}

@media (min-width: 992px) {
  .signature { justify-content: flex-end; text-align: end; }
  .signature__text { order: 2; }
  .signature__portrait { order: 1; }
}

.signature__portrait {
  flex-shrink: 0;
  inline-size: 96px;
  block-size: 96px;
  border-radius: var(--r-pill);
  overflow: hidden;
  background: var(--ink-800);
}

.signature__portrait img { inline-size: 100%; block-size: 100%; object-fit: cover; }

.signature__rule {
  inline-size: 48px;
  block-size: 1px;
  background: var(--blue-500);
  margin-block-end: var(--s-4);
}

@media (min-width: 992px) { .signature__rule { margin-inline-start: auto; } }

.signature__name { font-size: var(--fs-h4); color: var(--white); font-weight: 600; }
.signature__role { font-size: var(--fs-small); color: var(--mist-400); margin-block-start: 2px; }

/* ---------------------------------------------------------------- awards */

.awards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

@media (min-width: 768px) { .awards-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .awards-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1440px) { .awards-grid { grid-template-columns: repeat(6, 1fr); } }

.award-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-4);
  padding: var(--s-7) var(--s-5);
  min-block-size: 180px;
  background: var(--ink-900);
  text-align: center;
  transition: transform var(--t-base) var(--ease), background var(--t-base) var(--ease);
}

.award-tile img {
  max-block-size: 56px;
  inline-size: auto;
  filter: grayscale(1) brightness(1.5);
  opacity: .6;
  transition: filter var(--t-base) var(--ease), opacity var(--t-base) var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  .award-tile:hover { transform: translateY(-4px); background: var(--ink-850); }
  .award-tile:hover img { filter: none; opacity: 1; }
}

.award-tile__title {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--mist-200);
}

.award-tile__year {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--blue-500);
}

/* ---------------------------------------------------------------- work cards */

.work-card .card__media {
  aspect-ratio: 4 / 3;
  margin-block-end: 0;
}

.work-card {
  padding: 0;
  overflow: hidden;
  background: var(--ink-800);
}

.work-card__body {
  position: relative;
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.work-card__client {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--blue-400);
  margin-block-end: var(--s-3);
}

.work-card__title {
  font-size: var(--fs-h3);
  font-weight: 600;
  color: var(--white);
  margin-block-end: var(--s-5);
}

.work-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-block-end: var(--s-6);
}

/* Snap-scroll carousel below 992. */
@media (max-width: 991.98px) {
  .work-scroller {
    display: flex;
    gap: var(--s-4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-inline: var(--gutter);
    margin-inline: calc(var(--gutter) * -1);
  }
  .work-scroller::-webkit-scrollbar { display: none; }
  .work-scroller > * {
    flex: 0 0 88vw;
    scroll-snap-align: start;
  }
}

.scroll-progress {
  block-size: 2px;
  background: var(--line);
  margin-block-start: var(--s-5);
}

@media (min-width: 992px) { .scroll-progress { display: none; } }

.scroll-progress__bar {
  block-size: 100%;
  inline-size: 33%;
  background: var(--blue-500);
  transition: transform var(--t-fast) linear;
  transform-origin: left;
}

/* ---------------------------------------------------------------- testimonials */

.testimonials { text-align: center; }

.testimonial-slider {
  position: relative;
  max-inline-size: 900px;
  margin-inline: auto;
  min-block-size: 280px;
}

.testimonial {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-base) var(--ease);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-6);
}

.testimonial.is-active { position: relative; opacity: 1; visibility: visible; }

.testimonial__icon { font-size: 40px; color: var(--blue-500); line-height: 1; }

.testimonial__quote {
  font-size: var(--fs-h3);
  font-weight: 400;
  line-height: 1.45;
  color: var(--mist-200);
  margin: 0;
  max-inline-size: none;
}

.testimonial__name { font-size: var(--fs-small); font-weight: 600; color: var(--white); }
.testimonial__role { font-size: 13px; color: var(--mist-600); margin-block-start: 2px; }

.slider-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-5);
  margin-block-start: var(--s-8);
}

.slider-btn {
  display: grid;
  place-items: center;
  inline-size: 48px;
  block-size: 48px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  color: var(--white);
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

.slider-btn:hover { background: rgba(255, 255, 255, .06); border-color: var(--white); }

.slider-count {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--mist-600);
  font-variant-numeric: tabular-nums;
  min-inline-size: 64px;
}

/* masonry variant */
.testimonial-masonry {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: 1fr;
  text-align: start;
}

@media (min-width: 768px) { .testimonial-masonry { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .testimonial-masonry { grid-template-columns: repeat(3, 1fr); } }

/* ---------------------------------------------------------------- CTA band */

.section--cta {
  position: relative;
  overflow: hidden;
  background: linear-gradient(120deg, var(--blue-600), var(--blue-500));
  padding-block: var(--s-11);
  text-align: center;
}

@media (min-width: 768px) { .section--cta { padding-block: var(--s-11); } }

.section--cta::before {
  content: "[ ]";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%) rotate(-12deg);
  font-family: var(--font-mono);
  font-size: clamp(200px, 40vw, 600px);
  line-height: 1;
  color: var(--white);
  opacity: .06;
  pointer-events: none;
  user-select: none;
}

.cta__inner { position: relative; z-index: 1; }

.cta__title { color: var(--white); }

.cta__sub {
  margin: var(--s-5) auto 0;
  max-inline-size: 56ch;
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--blue-100);
}

.cta__actions {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin-block-start: var(--s-8);
  align-items: center;
}

@media (min-width: 576px) { .cta__actions { flex-direction: row; justify-content: center; gap: var(--s-4); } }

.cta__facts {
  display: none;
  align-items: center;
  justify-content: center;
  gap: var(--s-6);
  margin-block-start: var(--s-8);
  font-size: 13px;
  color: var(--white);
  opacity: .9;
}

@media (min-width: 992px) { .cta__facts { display: flex; } }

.cta__facts li { list-style: none; margin: 0; }
.cta__facts li + li { padding-inline-start: var(--s-6); border-inline-start: 1px solid rgba(255, 255, 255, .3); }

/* ---------------------------------------------------------------- newsletter */

.newsletter__form {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin-block-start: var(--s-5);
}

@media (min-width: 576px) {
  .newsletter__form { flex-direction: row; }
  .newsletter__form .input { flex: 1; }
  .newsletter__form .btn { inline-size: auto; flex-shrink: 0; }
}

.newsletter__consent {
  margin-block-start: var(--s-3);
  font-size: 12px;
  color: var(--mist-600);
}

/* ---------------------------------------------------------------- timeline */

.timeline {
  display: grid;
  gap: var(--s-7);
  grid-template-columns: 1fr;
  position: relative;
}

@media (min-width: 768px) {
  .timeline { grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--s-6); }
  /* Hairline connector runs behind the numerals. */
  .timeline::before {
    content: "";
    position: absolute;
    inset-block-start: 12px;
    inset-inline: 0;
    block-size: 1px;
    background: var(--line);
  }
}

.timeline__step { position: relative; padding-block-start: var(--s-7); }

@media (max-width: 767.98px) {
  .timeline__step { padding-block-start: 0; padding-inline-start: var(--s-8); }
  .timeline__step::before {
    content: "";
    position: absolute;
    inset-block: 4px 0;
    inset-inline-start: 5px;
    inline-size: 1px;
    background: var(--line);
  }
  .timeline__step:last-child::before { inset-block-end: auto; block-size: 0; }
}

.timeline__num {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-index);
  letter-spacing: var(--tr-index);
  color: var(--blue-500);
  background: var(--ink-900);
  padding-inline-end: var(--s-3);
}

.section--alt .timeline__num { background: var(--ink-850); }

.timeline__title { font-size: var(--fs-h4); color: var(--white); margin-block-end: var(--s-3); }
.timeline__text { font-size: var(--fs-small); color: var(--mist-400); }

/* ---------------------------------------------------------------- gallery */

.gallery { display: grid; gap: var(--s-3); grid-template-columns: repeat(2, 1fr); }

@media (min-width: 768px) {
  .gallery--3 { grid-template-columns: repeat(3, 1fr); }
  .gallery--4 { grid-template-columns: repeat(4, 1fr); }
}

.gallery figure { margin: 0; }

.gallery img {
  inline-size: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-xs);
}

/* ---------------------------------------------------------------- process steps */

.process {
  display: grid;
  gap: var(--s-8);
  grid-template-columns: 1fr;
  counter-reset: step;
}

@media (min-width: 768px) { .process { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .process { grid-template-columns: repeat(4, 1fr); } }

/* ---------------------------------------------------------------- team */

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

@media (min-width: 768px) { .team-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .team-grid { grid-template-columns: repeat(4, 1fr); } }

.team-card__photo {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--r-xs);
  margin-block-end: var(--s-4);
  background: var(--ink-800);
}

.team-card__photo img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  filter: grayscale(1);
  transition: filter var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  .team-card:hover .team-card__photo img { filter: none; transform: scale(1.03); }
}

.team-card__name { font-size: var(--fs-h4); color: var(--white); }
.team-card__role { font-size: 13px; color: var(--mist-600); margin-block-start: 2px; }