/* ==========================================================================
   CONCEPT 2 — MOMENTUM
   Kinetic typographic scrollytelling. Three acts, dark → light.
   ========================================================================== */

body { background: var(--c-ink); color: var(--t-body-on-dark); }

/* ---------- Preloader: counter races, curtain wipes up ------------------ */

.preloader {
  position: fixed;
  inset: 0;
  z-index: var(--z-loader);
  background: var(--c-ink);
  transition: translate 0.75s var(--ease-out-expo), visibility 0s 0.75s;
}
.preloader.is-done { translate: 0 -101%; visibility: hidden; }

/* lockup commands the center of the screen while the counter races below */
.preloader__logo {
  position: absolute;
  inset: 0;
  margin: auto;
  inline-size: clamp(13rem, 24vw, 20rem);
  block-size: auto;
  animation: pre-logo-in 1s var(--ease-out-expo) both,
             pre-logo-glow 2.4s var(--ease-in-out) 1s infinite;
}
@keyframes pre-logo-in {
  from { opacity: 0; scale: 0.88; translate: 0 1.25rem; }
  to { opacity: 1; scale: 1; translate: 0 0; }
}
@keyframes pre-logo-glow {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(125, 191, 187, 0)); }
  50% { filter: drop-shadow(0 0 26px rgba(125, 191, 187, 0.35)); }
}

.preloader__count {
  position: absolute;
  inset-block-end: 8vh;
  inset-inline-start: max(var(--sp-gutter), calc((100vw - var(--content-max)) / 2 + var(--sp-gutter)));
  font-size: clamp(5rem, 16vw, 13rem);
  font-weight: var(--fw-bold);
  font-stretch: 78%;
  line-height: 0.85;
  color: var(--t-strong-on-dark);
  font-variant-numeric: tabular-nums;
}
.preloader__count i { font-style: normal; color: var(--c-aqua); font-size: 0.4em; }

.preloader__tag {
  position: absolute;
  inset-block-end: 8vh;
  inset-inline-end: max(var(--sp-gutter), calc((100vw - var(--content-max)) / 2 + var(--sp-gutter)));
  max-inline-size: 18rem;
  text-align: end;
  font-size: var(--fs-small);
  color: var(--t-faint-on-dark);
}

.preloader__bar {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  block-size: 2px;
  background: rgba(244, 245, 243, 0.12);
}
.preloader__bar i {
  display: block;
  block-size: 100%;
  background: var(--c-aqua);
  scale: 0 1;
  transform-origin: left;
}
[dir="rtl"] .preloader__bar i { transform-origin: right; }

@media (prefers-reduced-motion: reduce) {
  .preloader { display: none; }
}
.is-static .preloader, .no-js .preloader { display: none; }

/* ---------- Header ------------------------------------------------------ */

.site-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--z-menu);
  transition: background var(--dur-fast) var(--ease-out);
}
.site-header.has-scrolled {
  background: rgba(30, 31, 33, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-block-end: 1px solid var(--c-ink-3);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-inline-size: var(--content-max);
  margin-inline: auto;
  padding: var(--sp-3) var(--sp-gutter);
}
.site-header__brand img { inline-size: clamp(8rem, 11vw, 9.5rem); block-size: auto; }

.menu-btn {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  color: var(--t-strong-on-dark);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  min-block-size: 2.75rem;
}
.menu-btn__label { position: relative; }
.menu-btn__label[data-close] { display: none; }
.menu-btn[aria-expanded="true"] .menu-btn__label[data-open] { display: none; }
.menu-btn[aria-expanded="true"] .menu-btn__label[data-close] { display: inline; }
.menu-btn__lines { display: grid; gap: 6px; inline-size: 3.5rem; }
.menu-btn__lines i {
  display: block;
  block-size: 1px;
  background: var(--t-strong-on-dark);
  transition: rotate var(--dur-fast) var(--ease-out), translate var(--dur-fast) var(--ease-out);
}
.menu-btn[aria-expanded="true"] .menu-btn__lines i:first-child { rotate: 8deg; translate: 0 3px; }
.menu-btn[aria-expanded="true"] .menu-btn__lines i:last-child { rotate: -8deg; translate: 0 -3px; }

.fs-menu[hidden] { display: none; }
.fs-menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-nav);
  display: grid;
  place-content: center;
  gap: var(--sp-6);
  background:
    radial-gradient(80rem 40rem at 85% 110%, rgba(112, 96, 164, 0.25), transparent 60%),
    radial-gradient(70rem 35rem at 10% -10%, rgba(54, 121, 130, 0.3), transparent 60%),
    var(--c-ink);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s var(--ease-out), visibility 0s 0.45s;
}
.fs-menu.is-open { opacity: 1; visibility: visible; transition: opacity 0.45s var(--ease-out); }
.fs-menu ul { display: grid; gap: var(--sp-3); text-align: center; }
.fs-menu a {
  display: inline-block;
  font-size: var(--fs-h2);
  color: var(--t-strong-on-dark);
  overflow: hidden;
}
.fs-menu li {
  translate: 0 1.5rem;
  opacity: 0;
  transition: translate 0.6s var(--ease-out-expo), opacity 0.6s var(--ease-out);
  transition-delay: calc(var(--i) * 60ms);
}
.fs-menu.is-open li { translate: 0 0; opacity: 1; }
.fs-menu a:hover, .fs-menu a:focus-visible { color: var(--c-aqua); }
.fs-menu__tag {
  text-align: center;
  color: var(--t-faint-on-dark);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

/* ---------- Act 1 · Hero ------------------------------------------------ */

.hero {
  min-block-size: 100svh;
  display: grid;
  align-content: center;
  position: relative;
  overflow: clip;
  padding-block: 8rem 4rem;
}
.hero__kicker { margin-block-end: var(--sp-4); }

/* The living brand object: 3D facet cube floating in the upper-right void */
.hero__cube {
  position: absolute;
  inset-block-start: 6%;
  inset-inline-end: 3%;
  inline-size: clamp(18rem, 32vw, 32rem);
  aspect-ratio: 1;
  z-index: 0;
  pointer-events: none;
}
.hero__cube::before {
  content: "";
  position: absolute;
  inset: -22%;
  background: radial-gradient(closest-side,
    rgba(125, 191, 187, 0.16), rgba(112, 96, 164, 0.1) 55%, transparent 78%);
  filter: blur(12px);
}
.hero__cube canvas {
  position: relative;
  inline-size: 100%;
  block-size: 100%;
}
.hero__lockup { position: relative; z-index: 1; }

@media (max-width: 63.9rem) {
  .hero__cube {
    inset-block-start: 2%;
    inset-inline-end: -14%;
    inline-size: 68vw;
    opacity: 0.45;
  }
}

.hero__title {
  font-size: clamp(3rem, 0.5rem + 11vw, 10.5rem);
  font-weight: var(--fw-bold);
  font-stretch: 78%;
  text-transform: uppercase;
  line-height: 0.95;
  color: var(--t-strong-on-dark);
  display: grid;
}
.hero__line { display: block; overflow: hidden; }
.hero__line > span { display: inline-block; }
.hero__line--media {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 2rem);
  overflow: visible;
}
.hero__deliver { color: var(--c-aqua); }

.hero__window {
  position: relative;
  display: block;
  inline-size: clamp(8rem, 22vw, 22rem);
  block-size: clamp(4rem, 11vw, 11rem);
  border-radius: var(--radius-m);
  overflow: hidden;
  flex: none;
  will-change: transform;
}
.hero__window img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.hero__lead {
  margin-block-start: var(--sp-5);
  display: flex;
  justify-content: flex-end;
}
.hero__lead p { max-inline-size: 34rem; font-size: var(--fs-lead); }

.hero__scrollbar {
  position: absolute;
  inset-inline-start: max(var(--sp-gutter), calc((100vw - var(--content-max)) / 2 + var(--sp-gutter)));
  inset-block-end: 0;
  inline-size: 1px;
  block-size: 9rem;
  background: rgba(244, 245, 243, 0.2);
  overflow: hidden;
}
.hero__scrollbar i {
  position: absolute;
  inset-inline: 0;
  block-size: 2.75rem;
  background: var(--c-aqua);
  animation: scroll-thread 2.2s linear infinite;
}
@keyframes scroll-thread {
  from { translate: 0 -3rem; }
  to { translate: 0 9.5rem; }
}

/* (the hero pin provides the full-bleed beat; no spacer needed) */
.stage { display: none; }

/* ---------- Giant stat -------------------------------------------------- */

.bigstat {
  position: relative;
  min-block-size: 90svh;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: var(--sp-5);
  text-align: center;
  overflow: clip;
  background: var(--c-ink-2);
}
.bigstat__num {
  font-size: clamp(5rem, 21vw, 19rem);
  font-weight: var(--fw-bold);
  font-stretch: 75%;
  line-height: 0.85;
  white-space: nowrap;
  color: var(--c-ink-3);
  -webkit-text-stroke: 1px rgba(125, 191, 187, 0.35);
  will-change: transform;
}
.bigstat__num span { color: var(--c-aqua); -webkit-text-stroke: 0; }
.bigstat__caption { font-size: var(--fs-lead); color: var(--t-strong-on-dark); }

/* ---------- Solutions scrollytelling ------------------------------------ */

.sol { padding-block: var(--sp-section); }
.sol__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--sp-6);
}
.sol__list ol {
  display: grid;
  gap: 22vh;
  margin-block-start: 24vh;
  padding-block-end: 18vh;
  position: relative;
  padding-inline-start: 2.75rem;
}
/* progress spine: a hairline the active node travels along */
.sol__list ol::before {
  content: "";
  position: absolute;
  inset-block: 1rem;
  inset-inline-start: 0.45rem;
  inline-size: 1px;
  background: linear-gradient(180deg,
    transparent, rgba(125, 191, 187, 0.35) 10% 90%, transparent);
}

.sol__item { --accent: var(--c-aqua); position: relative; opacity: 0.28; transition: opacity 0.5s var(--ease-out); }
/* diamond node on the spine — lights up in the item's facet color */
.sol__item::before {
  content: "";
  position: absolute;
  inset-inline-start: -2.6rem;
  inset-block-start: 0.5rem;
  inline-size: 0.6rem;
  block-size: 0.6rem;
  rotate: 45deg;
  background: var(--c-ink);
  border: 1px solid rgba(244, 245, 243, 0.35);
  transition: background 0.45s var(--ease-out), border-color 0.45s var(--ease-out),
              box-shadow 0.45s var(--ease-out);
}
.sol__item.is-active::before {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 18px rgba(125, 191, 187, 0.45);
}
.sol__item.is-active { opacity: 1; }
.sol__item[data-accent="purple"] { --accent: var(--c-purple); }
.sol__item[data-accent="slate"] { --accent: var(--c-slate); }
.sol__item[data-accent="teal"] { --accent: var(--c-aqua); }

.sol__num {
  display: block;
  font-size: var(--fs-small);
  letter-spacing: var(--ls-label);
  color: var(--accent);
  margin-block-end: var(--sp-3);
}
.sol__item h2 {
  font-size: var(--fs-h2);
  color: var(--t-strong-on-dark);
  transition: color 0.5s var(--ease-out), font-variation-settings 0.5s var(--ease-out);
}
.sol__item.is-active h2 { color: var(--accent); }
.sol__item p { margin-block-start: var(--sp-3); max-inline-size: 30rem; }

.sol__media { position: relative; }
.sol__mask {
  position: sticky;
  top: 14vh;
  block-size: 72vh;
  /* brand hexagon silhouette as an image mask — the concept's signature.
     (Deliberately NOT the logo artwork: brand rules forbid repurposing it.) */
  -webkit-mask: url("../../_shared/brand/hexagon-mask.svg") center / contain no-repeat;
          mask: url("../../_shared/brand/hexagon-mask.svg") center / contain no-repeat;
}
.sol__mask img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s var(--ease-out);
}
.sol__mask img.is-active { opacity: 1; }

@media (max-width: 63.9rem) {
  .sol__grid { grid-template-columns: 1fr; }
  .sol__media { display: none; }
  .sol__list ol { gap: var(--sp-6); margin-block-start: var(--sp-5); padding-block-end: 0; }
  .sol__item { opacity: 1; }
}

/* ---------- Manifesto --------------------------------------------------- */

.manifesto { padding-block: var(--sp-section); background: var(--c-ink-2); }
/* Readable by default — JS applies the dim gradient state per line only
   when it actually creates the scroll-sweep tweens */
.manifesto__text {
  margin-block-start: var(--sp-4);
  font-size: clamp(1.5rem, 0.9rem + 2.8vw, 3.25rem);
  font-weight: var(--fw-light);
  line-height: 1.35;
  max-inline-size: 62rem;
  color: rgba(244, 245, 243, 0.92);
}
.manifesto__text .st-line { display: block; }

/* ---------- Chant marquee ----------------------------------------------- */

.chant { padding-block: var(--sp-5); border-block: 1px solid var(--c-ink-3); overflow: hidden; }
.chant .marquee__track {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  padding-inline-end: var(--sp-5); /* completes the loop period exactly */
  inline-size: max-content;
}
.chant span {
  font-size: clamp(2rem, 1rem + 4.5vw, 4.5rem);
  font-weight: var(--fw-bold);
  font-stretch: 80%;
  text-transform: uppercase;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px rgba(244, 245, 243, 0.4);
}
.chant span:nth-child(4n + 1) { color: var(--t-strong-on-dark); -webkit-text-stroke: 0; }
.chant i {
  inline-size: 0.75rem;
  block-size: 0.75rem;
  rotate: 45deg;
  background: var(--c-aqua);
  flex: none;
}

/* ---------- HUD kickers: label + fading rule + terminal ----------------- */

.projects .kicker, .partners .kicker, .why__head .kicker,
.sol .kicker, .manifesto .kicker {
  inline-size: fit-content;
}
.projects .kicker::after, .partners .kicker::after, .why__head .kicker::after,
.sol .kicker::after, .manifesto .kicker::after {
  content: "";
  inline-size: clamp(3.5rem, 9vw, 9rem);
  block-size: 1px;
  background: linear-gradient(90deg, currentColor, transparent);
  opacity: 0.55;
  flex: none;
}

/* ---------- Act 3 · Projects (paper) ------------------------------------ */

.projects {
  background: linear-gradient(180deg, #F5F6F4 0%, #ECEEEA 100%);
  color: var(--t-body-on-light);
  padding-block: var(--sp-section) 0;
}
.projects .kicker { color: var(--c-teal); }
.projects .projects__title {
  font-size: var(--fs-h1);
  color: var(--t-strong-on-light);
  margin-block: var(--sp-3) var(--sp-6);
}
.projects__title strong { font-weight: var(--fw-bold); }

.projects__rows { border-block-start: 1px solid var(--c-mist); }
.project-row { border-block-end: 1px solid var(--c-mist); }
.project-row a {
  position: relative;
  display: block;
  overflow: hidden;
}
.project-row a > figure {
  position: absolute;
  inset: 0;
  clip-path: inset(100% 0 0 0);
  transition: clip-path 0.65s var(--ease-in-out);
}
.project-row a > figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(30, 31, 33, 0.55);
}
.project-row a > figure img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.project-row a:hover > figure, .project-row a:focus-visible > figure { clip-path: inset(0 0 0 0); }

.project-row__text {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 4rem minmax(14rem, 22rem) 1fr clamp(7rem, 10vw, 10rem);
  align-items: center;
  gap: var(--sp-4);
  padding-block: var(--sp-4);
  transition: color 0.4s var(--ease-out);
}
.project-row__thumb {
  inline-size: clamp(7rem, 10vw, 10rem);
  aspect-ratio: 16 / 10;
  overflow: hidden;
  clip-path: polygon(0 0, calc(100% - 0.9rem) 0, 100% 0.9rem, 100% 100%, 0 100%);
  justify-self: end;
}
.project-row__thumb img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: scale 0.9s var(--ease-out);
}
.project-row a:hover .project-row__thumb img { scale: 1.08; }
.project-row__idx { font-size: var(--fs-small); letter-spacing: var(--ls-label); color: var(--c-teal); }
.project-row__text h3 { font-size: var(--fs-h3); color: var(--t-strong-on-light); transition: color 0.4s var(--ease-out); }
.project-row__text p { max-inline-size: 34rem; }
.project-row a:hover .project-row__text,
.project-row a:hover .project-row__text h3,
.project-row a:focus-visible .project-row__text,
.project-row a:focus-visible .project-row__text h3 { color: var(--t-strong-on-dark); }
.project-row a:hover .project-row__idx, .project-row a:focus-visible .project-row__idx { color: var(--c-aqua); }

@media (max-width: 47.9rem) {
  .project-row__text { grid-template-columns: 1fr; gap: var(--sp-2); }
  .project-row__thumb { display: none; }
}

/* ---------- Why rail ---------------------------------------------------- */

.why { background: linear-gradient(180deg, #ECEEEA 0%, #F5F6F4 45%, #EDEFEB 100%); color: var(--t-body-on-light); overflow: clip; }
.why__pin { padding-block: var(--sp-section); }
.why__head { margin-block-end: var(--sp-6); }
.why__head .kicker { color: var(--c-teal); }
.why__head h2 { font-size: var(--fs-h2); color: var(--t-strong-on-light); margin-block-start: var(--sp-3); }

.why__rail {
  display: flex;
  gap: var(--sp-4);
  padding-inline: max(var(--sp-gutter), calc((100vw - var(--content-max)) / 2 + var(--sp-gutter)));
  inline-size: max-content;
}
.why-card {
  --card-accent: var(--c-teal);
  position: relative;
  inline-size: clamp(18rem, 30vw, 26rem);
  padding: var(--sp-5);
  background: var(--c-paper-2);
  border: 1px solid var(--c-mist);
  border-block-start: 3px solid var(--card-accent);
  clip-path: polygon(0 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% 100%, 0 100%);
  display: grid;
  align-content: start;
  gap: var(--sp-3);
  transition: translate 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}
.why-card:hover { translate: 0 -0.35rem; box-shadow: 0 1.25rem 2.5rem rgba(30, 31, 33, 0.1); }
.why-card:nth-child(1) { --card-accent: var(--c-purple); }
.why-card:nth-child(2) { --card-accent: var(--c-indigo); }
.why-card:nth-child(3) { --card-accent: var(--c-slate); }
.why-card:nth-child(4) { --card-accent: var(--c-teal); }
.why-card:nth-child(5) { --card-accent: var(--c-aqua); }
/* index as giant outline numeral, technical-poster style */
.why-card > span {
  position: absolute;
  inset-block-start: var(--sp-3);
  inset-inline-end: var(--sp-4);
  font-size: 3.25rem;
  font-weight: var(--fw-bold);
  font-stretch: 78%;
  letter-spacing: 0;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(43, 43, 43, 0.22);
}
.why-card h3 { font-size: var(--fs-h3); color: var(--t-strong-on-light); max-inline-size: 78%; }
.why-card--cta { background: var(--c-teal); border-color: var(--c-teal); justify-items: start; }
.why-card--cta h3 { color: var(--t-strong-on-dark); max-inline-size: none; }

@media (max-width: 63.9rem) {
  .why__rail { flex-direction: column; inline-size: auto; padding-inline: var(--sp-gutter); }
  .why-card { inline-size: 100%; }
}
/* static capture mode: rail wraps instead of pinning */
.is-static .why__rail { flex-wrap: wrap; inline-size: auto; }

/* keyboard focus must stay visible on the light half of the page */
.projects :focus-visible, .why :focus-visible, .partners :focus-visible {
  outline-color: var(--c-teal);
}

/* ---------- Partners wall ----------------------------------------------- */

.partners { background: linear-gradient(180deg, #EDEFEB 0%, #F5F6F4 100%); color: var(--t-body-on-light); padding-block: var(--sp-section); }
.partners .kicker { color: var(--c-teal); }
.partners__wall {
  margin-block-start: var(--sp-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-5);
  align-items: baseline;
}
.partners__wall li {
  font-size: clamp(1.25rem, 1rem + 1.6vw, 2.25rem);
  font-weight: var(--fw-light);
  color: var(--t-faint-on-light);
  transition: color var(--dur-fast) var(--ease-out);
}
.partners__wall li:hover { color: var(--c-teal); }

/* ---------- Footer / mega CTA ------------------------------------------- */

.site-footer { background: var(--c-ink); }
.mega-cta {
  display: grid;
  gap: var(--sp-3);
  padding-block: var(--sp-7);
  border-block-end: 1px solid var(--c-ink-3);
}
.mega-cta__label {
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-aqua);
}
.mega-cta__title {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  font-stretch: 82%;
  text-transform: uppercase;
  color: var(--t-strong-on-dark);
  transition: color var(--dur-fast) var(--ease-out);
}
.mega-cta:hover .mega-cta__title, .mega-cta:focus-visible .mega-cta__title { color: var(--c-aqua); }
.mega-cta .arrow { color: var(--c-aqua); }

.site-footer__grid {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--sp-5);
  padding-block: var(--sp-5);
}
.site-footer__logo { inline-size: 5.5rem; block-size: auto; }
.site-footer address { font-style: normal; color: var(--t-body-on-dark); }
.site-footer address a:hover { color: var(--c-aqua); }
.site-footer__social { display: flex; gap: var(--sp-3); }
.site-footer__social a {
  font-size: var(--fs-small);
  border: 1px solid var(--c-ink-3);
  border-radius: var(--radius-pill);
  padding: 0.4em 1em;
}
.site-footer__social a:hover { border-color: var(--c-aqua); color: var(--c-aqua); }
.site-footer__legal {
  padding-block: var(--sp-4);
  border-block-start: 1px solid var(--c-ink-3);
  font-size: var(--fs-small);
  color: var(--t-faint-on-dark);
}
@media (max-width: 63.9rem) {
  .site-footer__grid { grid-template-columns: 1fr; justify-items: start; }
}