/* Shared content edges; section backgrounds and sticky scenes remain full bleed. */
:root {
  --content-width: 1120px;
  --page-gutter: clamp(24px, 6vw, 96px);
  --content-inset: max(var(--page-gutter), calc((100% - var(--content-width)) / 2));
}

.hero-type {
  width: min(1000px, calc(100% - 2 * var(--page-gutter)));
  margin-inline: auto;
  padding-inline: 0;
}
.hero h1 {
  font-size: clamp(60px, 7.6vw, 100px);
  letter-spacing: -.075em;
}
.hero-sub { max-width: 490px; }
.hero-bottom { left: var(--content-inset); right: var(--content-inset); }

.clients { min-height: 320px; padding-block: 64px; }
.clients h2 {
  max-width: 860px;
  padding-inline: var(--page-gutter);
  font-size: clamp(26px, 2.5vw, 34px);
  color: var(--ink);
  text-wrap: balance;
}
.clients-marquee { margin-top: 64px; }

.journey-intro, .results-intro {
  min-height: 62svh;
  padding: 112px var(--content-inset) 80px;
  justify-content: center;
}
.journey-intro h2 {
  max-width: 900px;
  font-size: clamp(44px, 5.5vw, 80px);
  line-height: 1.04;
  letter-spacing: -.065em;
}
.journey-intro h2 strong { letter-spacing: -.075em; }
.results-intro h2 {
  max-width: 800px;
  margin-block: 0;
  font-size: clamp(54px, 6.2vw, 88px);
  line-height: 1.02;
  letter-spacing: -.07em;
}
.results-intro:after {
  right: var(--content-inset);
  font-size: clamp(140px, 18vw, 260px);
}

.journey-copy h3 {
  font-size: clamp(46px, 4.4vw, 64px);
  line-height: 1.02;
  letter-spacing: -.065em;
}
/* An absolute grid child otherwise uses the inset grid area as its bounds. */
.is-motion .journey-map {
  grid-column: auto;
  grid-row: auto;
  width: auto;
}
.map-heading, .map-footer {
  left: var(--content-inset);
  right: var(--content-inset);
}
.map-heading h3 {
  max-width: 700px;
  font-size: clamp(36px, 3.6vw, 52px);
  line-height: 1.02;
  letter-spacing: -.06em;
}
.result-copy, .result-artifact { margin-inline: var(--content-inset); }
.result-copy h3 {
  max-width: 700px;
  font-size: clamp(40px, 4vw, 60px);
  line-height: 1.02;
  letter-spacing: -.065em;
}
.results-stage-top, .results-stage-bottom {
  left: var(--content-inset);
  right: var(--content-inset);
}

.ugc-heading { max-width: 900px; padding-inline: var(--page-gutter); }
.ugc-gallery { width: min(920px, calc(100% - 2 * var(--page-gutter))); }

.about-section { padding: 88px var(--content-inset); }
.about-inner { max-width: var(--content-width); gap: clamp(40px, 5vw, 72px); }
.about-copy h2 {
  max-width: 620px;
  font-size: clamp(38px, 4vw, 58px);
  line-height: 1.06;
  letter-spacing: -.06em;
}
.about-label { margin-bottom: 32px; }
.about-description {
  max-width: 520px;
  margin-top: 32px;
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.5;
}
.about-bottom { margin-top: 36px; }
.journey-outro { min-height: 260px; padding: 72px var(--content-inset); }
.journey-outro p {
  max-width: 640px;
  font-size: clamp(34px, 3.8vw, 54px);
  line-height: 1.06;
  letter-spacing: -.06em;
}
.site-footer { padding: 126px var(--content-inset) 40px; }
.footer-links, .footer-bottom { max-width: var(--content-width); }
.footer-column a { font-size: 17px; }
.footer-column h2 { margin-bottom: 24px; }
.footer-bottom { margin-top: 64px; font-size: 13px; }

@media (min-width: 761px) {
  .journey-sticky {
    padding-inline: var(--content-inset);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 48px;
  }
  .journey-copy { padding-inline: 0; }
  .is-motion .journey-copy-chat { left: 0; right: 0; }
  .journey-progress { left: 0; right: 0; }
  .journey-visual, .is-motion .journey-visual { width: min(480px, 100%); }
  .map-field {
    width: min(var(--content-width), calc(100% - 2 * var(--page-gutter)));
    margin-inline: auto;
  }
}

@media (max-width: 760px) {
  :root { --page-gutter: 24px; }
  .hero h1 { font-size: clamp(56px, 13vw, 82px); white-space: normal; }
  .hero h1 em { display: block; }
  .hero-sub { max-width: 335px; }
  .clients { min-height: 280px; padding-block: 48px; }
  .clients h2 { font-size: 26px; }
  .clients-marquee { margin-top: 48px; }
  .journey-intro, .results-intro {
    min-height: 52svh;
    padding: 100px var(--content-inset) 64px;
  }
  .journey-intro h2 { font-size: clamp(36px, 8vw, 54px); line-height: 1.08; }
  .results-intro h2 { font-size: clamp(46px, 10vw, 64px); }
  .journey-sticky, .is-motion .journey-sticky { padding-inline: var(--page-gutter); }
  .journey-copy { padding-inline: 0; }
  .is-motion .journey-copy-chat, .is-motion .journey-copy-team { left: 0; right: 0; }
  .journey-progress { left: 0; right: 0; }
  .journey-copy h3, .is-motion .journey-copy h3 { font-size: clamp(36px, 7vw, 48px); }
  .map-heading h3 { font-size: clamp(30px, 7vw, 42px); }
  .result-copy h3 { font-size: clamp(34px, 7.5vw, 48px); }
  .ugc-heading { padding-inline: var(--page-gutter); }
  .about-section { padding-block: 64px; }
  .about-copy h2 { font-size: clamp(36px, 7.5vw, 48px); }
  .about-description { font-size: 17px; }
  .journey-outro { padding: 56px var(--content-inset); gap: 28px; }
  .journey-outro p { font-size: clamp(34px, 7vw, 46px); }
  .site-footer { padding-top: 108px; padding-bottom: 32px; }
  .footer-column a { font-size: 16px; }
  .footer-links { gap: 40px 24px; }
  .footer-bottom { margin-top: 48px; font-size: 12px; }
}

/* Fifteen brand marks keep a consistent optical size and a gentle drift. */
.clients-track{animation-duration:55s;mix-blend-mode:multiply}
.clients-set{gap:clamp(64px,6vw,96px);padding-right:clamp(64px,6vw,96px)}
.client-logo{width:148px;height:62px;object-fit:contain;filter:grayscale(1);mix-blend-mode:multiply}
.client-bni,.client-bri{width:118px}
.client-jt,.client-nazeem,.client-secure,.client-buildx{width:156px}
.client-santo,.client-abfresh,.client-ocean,.client-blau{width:96px;height:72px}
.client-khatulistiwa{width:132px;height:72px}
.client-celestails{width:142px}
@media(max-width:720px){.clients-set{gap:52px;padding-right:52px}.client-logo{height:50px}.client-santo,.client-abfresh,.client-ocean,.client-blau,.client-khatulistiwa{height:60px}}
@media(prefers-reduced-motion:reduce){.clients-track{animation:none}}

.client-celestails,.client-nazeem,.client-khatulistiwa{filter:grayscale(1) brightness(0)}

.client-buildx{display:flex;align-items:center;justify-content:center;gap:5px;font-size:24px;font-weight:500;letter-spacing:-.04em;color:oklch(.23 .005 295)}
.client-buildx .client-mark{width:54px;height:54px;object-fit:contain;flex:none}
@media(max-width:720px){.client-buildx .client-mark{width:46px;height:46px}}

/* Reveal each brand's original palette while the pointer rests on it. */
.client-logo{transition:filter 240ms cubic-bezier(.22,1,.36,1)}
@media(hover:hover){
  .clients-marquee:hover .clients-track{animation-play-state:paused}
  .client-logo:hover{filter:grayscale(0) brightness(1)}
}