/* Webalix V7 — cinematic opening, editorial body */

@font-face {
  font-family: "Inter Tight"; font-style: normal; font-weight: 300 500; font-display: swap;
  src: url("fonts/inter-tight-300-500.72c0f761ef.woff2") format("woff2");
}

:root {
  --ink: #141311;
  --ink-2: #3a3833;
  --mute: #8b867d;
  --line: #dcd6cb;
  --stone: #e8e2d7;
  --ivory: #f4f0e8;
  --paper: #faf8f3;
  --film: #0f0e0c;
  --light: #f6f2ea;

  --font: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ease: cubic-bezier(.2, .7, 0, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);

  --gutter: clamp(20px, 3.4vw, 56px);
  --maxw: 1680px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.55;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01" 0, "cv11" 1;
  overflow-x: hidden;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
em, i, cite { font-style: normal; }
h1, h2, h3, p, dl, dd, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
::selection { background: var(--ink); color: var(--paper); }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.eyebrow {
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--mute); font-weight: 500;
}
.display {
  font-size: clamp(2.4rem, 5.2vw, 5.6rem);
  line-height: 1.02; letter-spacing: -.03em; font-weight: 400;
}

/* ---------- Navigation ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 22px var(--gutter);
  color: var(--light);
  transition: color .5s var(--ease), background-color .5s var(--ease), transform .6s var(--ease), padding .5s var(--ease);
  opacity: 0; animation: fade 1.6s var(--ease) .9s forwards;
}
.nav__mark { font-size: 15px; font-weight: 500; letter-spacing: .14em; justify-self: start; }
.nav__links { display: flex; gap: 36px; font-size: 14px; letter-spacing: .01em; }
.nav__links a, .nav__cta { opacity: .82; transition: opacity .3s; }
.nav__links a:hover, .nav__cta:hover { opacity: 1; }
.nav__cta { justify-self: end; font-size: 14px; padding-bottom: 2px; border-bottom: 1px solid currentColor; }
.nav.is-solid { color: var(--ink); background: rgba(250, 248, 243, .96); padding-top: 16px; padding-bottom: 16px; }
.nav.is-solid.is-dark { color: var(--light); background: transparent; }
.nav.is-hidden { transform: translateY(-100%); }

/* ---------- Hero ---------- */
.hero { position: relative; height: 165vh; height: 165svh; background: var(--paper); }
.hero__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.hero__film {
  position: absolute; inset: 0; background: var(--film);
  overflow: hidden;
}
.hero__poster, .hero__poster img, .hero__video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.hero__poster img, .hero__video { transform: scale(var(--film-scale, 1.06)); transform-origin: 50% 45%; }
.hero__poster img { animation: settle 3.2s var(--ease) forwards; }
.hero__video { opacity: 0; transition: opacity 1.4s var(--ease); }
.hero__video.is-playing { opacity: 1; }
.hero__shade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(12, 11, 9, .38) 0%, rgba(12, 11, 9, 0) 18%),
    linear-gradient(to top, rgba(12, 11, 9, .62) 0%, rgba(12, 11, 9, .22) 34%, rgba(12, 11, 9, 0) 60%);
}

.hero__content {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  padding: 0 var(--gutter) clamp(28px, 5.2vh, 64px);
  color: var(--light);
  opacity: var(--content-o, 1);
  transform: translateY(var(--content-y, 0px));
}
.hero__title {
  font-weight: 400;
  /* two lines at every width above phones: ~14.5em is the longer line */
  font-size: clamp(2.1rem, 4.6vw, 5.8rem);
  line-height: 1.02;
  letter-spacing: -.035em;
  max-width: none;
}
/* Title sequence: each line is a mask; words rise into it, resolving from a slight blur */
.hero__title .line { display: block; white-space: nowrap; overflow: hidden; padding: .06em 0 .1em; margin: -.06em 0 -.1em; }
.hero__title .w {
  display: inline-block; opacity: 0; filter: blur(4px); transform: translateY(1.02em);
  animation: word 1.05s cubic-bezier(.19, 1, .22, 1) forwards;
  animation-delay: calc(.4s + var(--l, 0) * .14s);
}
.m-br { display: none; }
.hero__title .line--soft { color: rgba(246, 242, 234, .7); }

.hero__foot {
  margin-top: clamp(24px, 4.2vh, 48px);
  display: flex; justify-content: space-between; align-items: flex-end; gap: 40px;
}
.hero__lede p { max-width: 36ch; font-size: 16.5px; line-height: 1.5; color: rgba(246, 242, 234, .9); }
.hero__actions { display: flex; align-items: center; gap: 28px; margin-top: 26px; }

.hero__timing { display: flex; gap: clamp(28px, 3.6vw, 64px); text-align: left; }
.hero__timing div { border-top: 1px solid rgba(246, 242, 234, .32); padding-top: 12px; min-width: 150px; }
.hero__timing dt { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: rgba(246, 242, 234, .6); }
.hero__timing dd { font-size: 16px; margin-top: 4px; color: rgba(246, 242, 234, .92); }

.hero__cue {
  position: absolute; left: 50%; bottom: 0; z-index: 2; width: 1px; height: 56px;
  background: rgba(246, 242, 234, .22); overflow: hidden; opacity: var(--content-o, 1);
}
.hero__cue span { position: absolute; left: 0; top: 0; width: 1px; height: 100%; background: var(--light); animation: cue 2.8s var(--ease-io) 2.4s infinite; transform: translateY(-100%); }

.hero__caption {
  position: absolute; left: var(--caption-x, 0px); right: var(--caption-x, 0px); top: var(--caption-top, 100%);
  display: flex; justify-content: space-between; gap: 24px;
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 500;
  color: var(--ink); opacity: var(--caption-o, 0);
}
.hero__caption span:last-child { color: var(--mute); }

.reveal-late { opacity: 0; animation: fade 1.4s var(--ease) 1.25s forwards; }

/* ---------- Buttons & links ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  height: 50px; padding: 0 26px; font-size: 15px; letter-spacing: .005em;
  border-radius: 0; transition: background-color .35s var(--ease), color .35s var(--ease);
}
.btn--light { background: var(--light); color: var(--ink); }
.btn--light:hover { background: #fff; }
.btn--ink { background: var(--ink); color: var(--paper); }
.btn--ink:hover { background: #000; }
.link { font-size: 15px; position: relative; padding-bottom: 3px; }
.link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; opacity: .45; transform-origin: left; transition: opacity .3s; }
.link:hover::after { opacity: 1; }
.link--light { color: var(--light); }

/* ---------- Keyframes ---------- */
@keyframes word { 60% { filter: blur(0); } to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes fade { to { opacity: 1; } }
@keyframes settle { from { transform: scale(1.1); } to { transform: scale(var(--film-scale, 1.06)); } }
@keyframes cue { 0% { transform: translateY(-100%); } 55% { transform: translateY(0); } 100% { transform: translateY(100%); } }

/* ---------- Mobile ---------- */
@media (max-width: 860px) {
  .nav__links { display: none; }
  .nav { grid-template-columns: 1fr auto; padding: 18px var(--gutter); }
  .hero__foot { flex-direction: column; align-items: stretch; gap: 30px; }
  .hero__timing div { min-width: 0; flex: 1; }
}
@media (max-width: 599px) {
  .hero__title .line { white-space: normal; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .hero__title { font-size: clamp(2.15rem, 10.4vw, 3.1rem); letter-spacing: -.035em; line-height: 1.02; }
  .m-br { display: inline; }
  .hero__title .line .w { white-space: nowrap; }
  .hero__lede p { font-size: 15.5px; }
  .hero__actions { gap: 22px; margin-top: 22px; }
  .hero__timing dd { font-size: 15px; }
  .hero__cue { display: none; }
  .hero__caption span:last-child { display: none; }
  .hero__shade {
    background:
      linear-gradient(to bottom, rgba(12, 11, 9, .42) 0%, rgba(12, 11, 9, 0) 16%),
      linear-gradient(to top, rgba(12, 11, 9, .74) 0%, rgba(12, 11, 9, .36) 42%, rgba(12, 11, 9, 0) 70%);
  }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
  .hero__title .w { opacity: 1; filter: none; transform: none; }
  .hero__cue, .hero__caption { display: none; }
  .hero { height: 100vh; height: 100svh; }
}

/* =====================================================================
   Editorial body
   ===================================================================== */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mute { color: var(--mute); }
.eyebrow--light { color: rgba(246, 242, 234, .62); }
section { position: relative; }


/* ---------- The plate: DESIGN = structure · BUILD = activity · LAUNCH = clarity ---------- */
.what__stage { position: relative; }
.plate {
  --sel: #3f6fe0; --note: #efe3a8; --red: #cf5a3c;
  position: sticky; top: calc(50vh - min(19vw, 270px)); margin: 0;
  container-type: inline-size;
}
.plate__win {
  position: relative; aspect-ratio: 16 / 10.4; background: var(--paper);
  border: 1px solid var(--line); overflow: hidden; display: flex; flex-direction: column;
  box-shadow: 0 40px 80px -60px rgba(20, 19, 17, .35);
}
.plate__bar { display: flex; align-items: center; gap: 2cqw; height: 5cqw; min-height: 26px; padding: 0 1.8cqw; border-bottom: 1px solid var(--line); font-size: max(10px, 1.35cqw); color: var(--mute); }
.plate__dots { display: flex; gap: .8cqw; }
.plate__dots i { width: max(6px, .9cqw); aspect-ratio: 1; border-radius: 50%; background: var(--line); }
.plate__url { margin: 0 auto; display: inline-flex; align-items: center; gap: 1cqw; padding: .5cqw 1.6cqw; background: var(--ivory); letter-spacing: .02em; }
.plate__live { width: max(6px, .8cqw); aspect-ratio: 1; border-radius: 50%; background: var(--line); transition: background-color .6s var(--ease), box-shadow .6s var(--ease); }
.plate__state { position: relative; width: 9cqw; text-align: right; text-transform: uppercase; letter-spacing: .14em; font-size: max(9px, 1.15cqw); font-weight: 500; }
.plate__state span { position: absolute; right: 0; top: 50%; transform: translateY(-50%); opacity: 0; transition: opacity .5s; }
.plate[data-stage="1"] [data-s="1"], .plate[data-stage="2"] [data-s="2"], .plate[data-stage="3"] [data-s="3"] { opacity: 1; }
.plate[data-stage="2"] .plate__live { background: #d99a2b; animation: pulse 1.2s ease-in-out infinite; }
.plate[data-stage="3"] .plate__live { background: #4f8a55; box-shadow: 0 0 0 .6cqw rgba(79, 138, 85, .15); }
.plate[data-stage="3"] .plate__url, .plate[data-stage="3"] [data-s="3"] { color: var(--ink); }
.plate__page { position: relative; flex: 1; }

/* 1 · DESIGN — wireframe, grid, notes, selection */
.wire, .site { position: absolute; inset: 0; padding: 4.6cqw 6cqw; }
.wire { background: #f7f4ee; transition: opacity .7s var(--ease); }
.wire__grid { position: absolute; inset: 0 6cqw; display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.4cqw; }
.wire__grid i { background: rgba(207, 90, 60, .05); border-inline: 1px solid rgba(207, 90, 60, .16); }
.wire b { display: block; background: #e3ddd1; }
.wire__nav { position: relative; display: flex; justify-content: space-between; }
.wire__nav > b { width: 12cqw; height: 1.4cqw; }
.wire__nav span { display: flex; gap: 2cqw; }
.wire__nav span b { width: 6cqw; height: 1.4cqw; }
.wire__copy { position: absolute; left: 6cqw; top: 15cqw; width: 42cqw; }
.wire__sel { position: relative; padding: 1cqw; margin: -1cqw; outline: 1px solid var(--sel); }
.wire__sel .h { position: absolute; width: .9cqw; min-width: 5px; aspect-ratio: 1; background: #fff; border: 1px solid var(--sel); }
.wire__sel .tl { left: -.45cqw; top: -.45cqw; } .wire__sel .tr { right: -.45cqw; top: -.45cqw; }
.wire__sel .bl { left: -.45cqw; bottom: -.45cqw; } .wire__sel .br { right: -.45cqw; bottom: -.45cqw; }
.wire__h { height: 5cqw; width: 34cqw; }
.wire__h--2 { width: 40cqw; margin-top: 1.2cqw; }
.wire__tag { position: absolute; left: -1px; top: -3.2cqw; font: 500 max(8px, 1.05cqw)/1 var(--font); letter-spacing: .04em; color: #fff; background: var(--sel); padding: .5cqw .8cqw; white-space: nowrap; }
.wire__tag--body { position: static; display: inline-block; margin-top: 3.4cqw; background: transparent; color: var(--sel); padding: 0; }
.wire__p { height: 1.3cqw; width: 30cqw; margin-top: 1.2cqw; }
.wire__p--2 { width: 24cqw; }
.wire__btn { width: 14cqw; height: 4.4cqw; margin-top: 3cqw; border: 1px dashed #b9b1a3; background: transparent !important; font: 500 max(8px, 1.1cqw)/4.4cqw var(--font); text-align: center; color: var(--mute); letter-spacing: .1em; }
.wire__img { position: absolute; right: 6cqw; top: 12cqw; width: 30cqw; aspect-ratio: 4 / 5; border: 1px solid #cfc7b8; color: #cfc7b8; background: #efe9de; }
.wire__img svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.wire__img span { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: #efe9de; padding: .4cqw .8cqw; font: 500 max(8px, 1.05cqw)/1 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.wire__measure { position: absolute; left: 48cqw; top: 26cqw; width: 12cqw; display: flex; align-items: center; justify-content: center; font: 500 max(8px, 1cqw)/1 var(--font); color: var(--red); }
.wire__measure i { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--red); }
.wire__measure i::before, .wire__measure i::after { content: ""; position: absolute; top: -.6cqw; width: 1px; height: 1.3cqw; background: var(--red); }
.wire__measure i::before { left: 0; } .wire__measure i::after { right: 0; }
.wire__measure { background: linear-gradient(#f7f4ee, #f7f4ee) center / 3.6cqw 1.8cqw no-repeat; z-index: 1; }
.wire__note {
  position: absolute; left: 34cqw; bottom: 5cqw; width: 19cqw; padding: 1.4cqw 1.6cqw;
  background: var(--note); color: #4a4331; font-size: max(9px, 1.2cqw); line-height: 1.35; transform: rotate(-2.5deg);
  box-shadow: 0 1.2cqw 2cqw -1.4cqw rgba(0, 0, 0, .35);
}
.wire__cursor { position: absolute; left: 40cqw; top: 27.5cqw; width: 2.2cqw; min-width: 11px; aspect-ratio: 11 / 17; background: #141311; clip-path: polygon(0 0, 0 88%, 26% 67%, 46% 100%, 60% 94%, 40% 62%, 72% 62%); }

/* 2 + 3 · the real page */
.site { opacity: 0; transition: opacity .8s var(--ease); display: flex; flex-direction: column; }
.site__nav { position: relative; display: flex; justify-content: space-between; align-items: center; font-size: max(8px, 1.2cqw); }
.site__mark { font-weight: 500; letter-spacing: .1em; }
.site__links { display: flex; gap: 2.6cqw; color: var(--ink-2); }
.site__hero { position: relative; flex: 1; display: grid; grid-template-columns: 1fr 30cqw; gap: 6cqw; align-items: center; }
.site__copy { position: relative; }
.site__h { font-size: 4.9cqw; line-height: 1.02; letter-spacing: -.035em; }
.site__p { margin-top: 2cqw; max-width: 30ch; font-size: max(8px, 1.35cqw); line-height: 1.45; color: var(--ink-2); }
.site__btn { position: relative; display: inline-block; margin-top: 3cqw; padding: 1.2cqw 2.2cqw; background: var(--ink); color: var(--paper); font-size: max(8px, 1.2cqw); transition: background-color .5s var(--ease), box-shadow .5s var(--ease); }
.site__img { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--stone); }
.site__img img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; transition: filter 1.2s var(--ease), transform 1.6s var(--ease); }

/* BUILD makes the page visibly under construction */
.site__nav::after, .site__copy::after, .site__img::after {
  content: attr(data-c); position: absolute; inset: -.8cqw; border: 1px dashed var(--sel); opacity: 0; pointer-events: none;
  transition: opacity .5s var(--ease);
}

.site__nav::after, .site__copy::after, .site__img::after { font: 500 max(7px, .95cqw)/1 var(--font); letter-spacing: .04em; color: var(--sel); padding: .4cqw .5cqw; text-align: left; }

/* production artifacts, like working stickers on a desk */
.arts { position: absolute; inset: 0; pointer-events: none; }
.art {
  position: absolute; display: inline-flex; align-items: center; gap: 1cqw;
  padding: 1cqw 1.4cqw; background: #fff; border: 1px solid rgba(20, 19, 17, .1); border-radius: .9cqw;
  font: 500 max(9px, 1.25cqw)/1.15 var(--font); color: var(--ink); white-space: nowrap;
  box-shadow: 0 1.6cqw 3cqw -1.8cqw rgba(20, 19, 17, .45);
  opacity: 0; transform: translateY(1.6cqw) rotate(var(--r, 0deg)) scale(.94);
  transition: opacity .45s var(--ease), transform .7s var(--ease);
  transition-delay: calc(var(--d) * 75ms);
}
.art svg { width: 1.7cqw; min-width: 10px; height: auto; flex: none; }
.art code { font: 500 max(9px, 1.2cqw)/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: -.01em; }
.art small { display: block; font-weight: 400; color: var(--mute); margin-top: .3cqw; }
.art--figma { left: -5cqw; top: -3cqw; --r: -3deg; }
.art--react { right: -6cqw; top: 13cqw; --r: 2deg; }
.art--css { left: -8cqw; top: 33cqw; --r: -1deg; background: #1d1c1a; color: #e9e4da; border-color: #1d1c1a; }
.art--css code { color: #e9e4da; }
.art--asset { right: -7cqw; top: 45cqw; --r: -2deg; padding: .8cqw; }
.art--asset img { width: 5.4cqw; height: 5.4cqw; min-width: 28px; min-height: 28px; object-fit: cover; object-position: 30% 50%; }
.art--framer { left: 9cqw; bottom: -3cqw; --r: 2.5deg; }
.art--state { left: 28cqw; top: 46cqw; --r: 0deg; font-size: max(8px, 1.05cqw); }
.art--state .dot { width: .9cqw; min-width: 6px; aspect-ratio: 1; border-radius: 50%; background: var(--sel); }
.art--bp { right: 9cqw; top: -2.4cqw; gap: 0; padding: 0; overflow: hidden; --r: 0deg; }
.art--bp b { font-weight: 500; padding: .9cqw 1.3cqw; color: var(--mute); border-left: 1px solid var(--line); }
.art--bp b:first-child { border-left: 0; }
.art--bp b.on { color: #fff; background: var(--ink); }
.art--deploy { right: 20cqw; bottom: -3.4cqw; --r: -1.5deg; }
.art--deploy .bar { width: 10cqw; height: .5cqw; background: var(--line); overflow: hidden; margin-top: .6cqw; }
.art--deploy .bar i { display: block; width: 40%; height: 100%; background: var(--ink); animation: build 1.4s var(--ease-io) infinite; }
.caret { width: 1px; height: 1.4cqw; background: #e9e4da; animation: blink 1s steps(1) infinite; }

/* 3 · LAUNCH — the phone joins the finished desktop */
.phone {
  position: absolute; right: -4cqw; bottom: -9cqw; width: 21cqw; aspect-ratio: 9 / 18.5;
  padding: .7cqw; border-radius: 3.4cqw; background: #141311;
  box-shadow: 0 3cqw 5cqw -3cqw rgba(20, 19, 17, .55);
  opacity: 0; transform: translateY(5cqw); transition: opacity .7s var(--ease) .15s, transform 1.1s var(--ease) .15s;
}
.phone__screen { height: 100%; border-radius: 2.8cqw; background: var(--paper); overflow: hidden; padding: 3.2cqw 1.8cqw 0; display: flex; flex-direction: column; }
.phone .site__nav { font-size: max(6px, .9cqw); }
.phone__menu { display: grid; gap: .45cqw; }
.phone__menu i { width: 2.2cqw; height: 1px; background: var(--ink); }
.phone__img { margin-top: 2.2cqw; aspect-ratio: 1; overflow: hidden; }
.phone__img img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; }
.phone .site__h { margin-top: 2cqw; font-size: 2.3cqw; }
.phone .site__btn { align-self: flex-start; margin-top: 1.8cqw; padding: .9cqw 1.4cqw; font-size: max(6px, .85cqw); }

@keyframes pulse { 50% { opacity: .35; } }
@keyframes shimmer { to { background-position: -250% 0; } }
@keyframes build { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes drag { 0%, 12% { transform: translate(0, 0); } 45%, 60% { transform: translate(6cqw, -2.4cqw); } 92%, 100% { transform: translate(0, 0); } }



/* ---------- Philosophy ---------- */
.philosophy { min-height: 118vh; display: flex; align-items: center; color: var(--light); overflow: hidden; background: var(--film); }
.philosophy__img { position: absolute; inset: 0; }
.philosophy__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.62) saturate(.85); transform: scale(calc(1.06 + var(--img-blur-n, 0) * .04)); will-change: transform; }
/* the "impression" state is a pre-blurred copy crossfaded by scroll: same look, no per-frame filter work */
.philosophy__img .philosophy__soft { opacity: var(--img-blur-n, 0); will-change: opacity, transform; }
.philosophy__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(12, 11, 9, .55) 0%, rgba(12, 11, 9, .15) 60%, rgba(12, 11, 9, .05) 100%); }
.philosophy__inner { position: relative; width: 100%; padding-top: 16vh; padding-bottom: 16vh; }
.philosophy__title { margin-top: 26px; font-weight: 400; font-size: clamp(2.6rem, 5.6vw, 6.4rem); line-height: 1; letter-spacing: -.04em; max-width: 13ch; }
.philosophy__sub { margin-top: 28px; font-size: clamp(1.4rem, 2.3vw, 2.4rem); line-height: 1.18; letter-spacing: -.025em; max-width: 24ch; color: rgba(246, 242, 234, .78); }
.philosophy__line {
  margin-top: clamp(80px, 16vh, 180px); padding-top: 26px; max-width: 19ch;
  border-top: 1px solid rgba(246, 242, 234, .35);
  font-size: clamp(1.7rem, 3.1vw, 3.3rem); line-height: 1.08; letter-spacing: -.03em; text-wrap: balance;
  filter: blur(var(--txt-blur, 0px)); opacity: var(--txt-o, 1);
}

/* ---------- Final ---------- */
.final { padding: clamp(140px, 22vh, 260px) 0 0; background: var(--paper); overflow: hidden; }
.final__title { max-width: 20ch; text-wrap: balance; }
.final__btn { margin-top: clamp(40px, 6vh, 64px); height: 58px; padding: 0 30px; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; font-weight: 500; }
.final__btn span { transition: transform .4s var(--ease); }
.final__btn:hover span { transform: translateX(5px); }


/* ---------- Ending: the name, as a poster ---------- */
.end { background: var(--paper); overflow: hidden; }
.end__meta { display: flex; justify-content: space-between; gap: 20px; padding-top: 22px; padding-bottom: clamp(40px, 7vh, 90px); font-size: 13px; color: var(--mute); letter-spacing: .02em; }
.end__meta a:hover { color: var(--ink); }
.end__mark { padding: 0 var(--gutter) clamp(14px, 2.2vw, 36px); line-height: .8; overflow: hidden; }

/* ---------- Body: tablet & mobile ---------- */
@media (max-width: 860px) {

  .philosophy { min-height: 100vh; }
}
@media (max-width: 560px) {
  .final__btn { width: 100%; justify-content: center; }
  .end__meta { flex-wrap: wrap; font-size: 12px; }
  .end__meta a { display: none; }
}

/* =====================================================================
   V6.2 — scroll-driven scenes (state is a function of scroll position)
   ===================================================================== */
:root { --ease-w: cubic-bezier(.19, 1, .22, 1); }

/* ---------- What we do: pinned scene ---------- */
.what { height: 380vh; background: var(--paper); }
.what__pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; overflow: hidden; }
.what__grid { width: 100%; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(40px, 6vw, 110px); align-items: center; }
.what__steps { margin-top: 30px; }
.what__step { padding: 6px 0; }
.what__word { font-size: clamp(2.4rem, 4.8vw, 5.4rem); line-height: 1.04; letter-spacing: -.04em; color: #d9d3c8; transition: color .6s var(--ease-w); }
.what__step.is-on .what__word { color: var(--ink); }
.what__note { display: grid; grid-template-rows: 0fr; max-width: 30ch; color: var(--ink-2); opacity: 0; transition: grid-template-rows .6s var(--ease-w), opacity .5s var(--ease-w), margin .6s var(--ease-w); }
.what__step.is-on .what__note { grid-template-rows: 1fr; opacity: 1; margin: 12px 0 18px; }
.what__note { overflow: hidden; }

.plate { position: relative; top: auto; }
.wire { opacity: var(--w, 1); transition: none; }
.wire__cursor { animation: none !important; transform: translate(calc(var(--c, 0) * 7cqw), calc(var(--c, 0) * -2.6cqw)); }
.wire__sel { transform: translateX(calc(var(--c, 0) * 1cqw)); }
.site { opacity: var(--s, 0); transition: none; }
.site__nav::after, .site__copy::after, .site__img::after { opacity: calc(var(--b, 0) * .85); transition: none; }
.site__img img { filter: blur(calc(var(--b, 0) * 1.4cqw)) saturate(calc(1 - var(--b, 0) * .6)); transform: scale(calc(1 + var(--b, 0) * .08)); transition: none; }
.site__img::before { content: ""; position: absolute; inset: 0; z-index: 1; opacity: var(--b, 0); background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%) 0 0 / 250% 100%; animation: shimmer 1.6s linear infinite; }
.site__btn { box-shadow: 0 0 0 calc(var(--b, 0) * .5cqw) rgba(63, 111, 224, .28); transition: none; }
.art {
  opacity: calc(var(--t, 0) * (1 - var(--e, 0)));
  transform:
    translate(calc((1 - var(--t, 0)) * var(--dx, 0cqw)), calc((1 - var(--t, 0)) * 4cqw - var(--e, 0) * 3cqw))
    rotate(var(--r, 0deg)) scale(calc(.92 + var(--t, 0) * .08 - var(--e, 0) * .05));
  transition: none;
}
.art--figma { --dx: -5cqw; } .art--react { --dx: 5cqw; } .art--css { --dx: -6cqw; } .art--asset { --dx: 6cqw; }
.art--framer { --dx: -3cqw; } .art--state { --dx: 0cqw; } .art--bp { --dx: 4cqw; } .art--deploy { --dx: 3cqw; }
.phone { opacity: var(--l, 0); transform: translateY(calc((1 - var(--l, 0)) * 8cqw)); transition: none; }
.plate__win { box-shadow: 0 40px 80px -60px rgba(20, 19, 17, .35); }

/* ---------- Your company changed: pinned scene ---------- */
.problem { height: 400vh; background: var(--ivory); }
.problem__pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.problem__grid { height: 100%; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 110px); align-items: center; }
.problem__title { max-width: 16ch !important; }
.problem__list { margin-top: clamp(32px, 6vh, 64px); }
.problem__list p { font-size: clamp(1.25rem, 1.9vw, 2rem); line-height: 1.2; letter-spacing: -.025em; padding: 14px 0; border-top: 1px solid var(--line); }
.moved { opacity: calc(.16 + var(--t, 0) * .84); transform: translateX(calc((1 - var(--t, 0)) * -16px)); }
.still { color: var(--mute); }
.fix { margin-top: 26px; border-top: 1px solid var(--ink) !important; font-weight: 500; opacity: var(--t, 0); transform: translateY(calc((1 - var(--t, 0)) * 10px)); }
.problem__field { position: relative; height: 100%; }
.rise { position: absolute; top: 0; margin: 0; overflow: hidden; background: var(--stone); will-change: transform; transform: translate3d(0, 110vh, 0); }
.rise img { width: 100%; height: 100%; object-fit: cover; }
.rise--1 { left: 0; width: 46%; aspect-ratio: 4 / 3; }
.rise--2 { right: 0; width: 50%; aspect-ratio: 16 / 9; }
.rise--3 { right: 0; width: 54%; aspect-ratio: 3 / 2; z-index: 2; }
/* the website that stays behind */
.oldsite { position: absolute; left: 0; bottom: 7%; width: 52%; aspect-ratio: 16 / 11; z-index: 3; background: #fff; border: 1px solid #cfc9bf; container-type: inline-size; overflow: hidden; box-shadow: 0 30px 60px -45px rgba(20, 19, 17, .4); }
.oldsite__bar { display: flex; align-items: center; gap: 1.4cqw; height: 7cqw; padding: 0 2.4cqw; background: #eceae6; border-bottom: 1px solid #d6d2ca; font-size: max(8px, 2.2cqw); color: #8a857c; }
.oldsite__bar i { width: 1.6cqw; aspect-ratio: 1; border-radius: 50%; background: #cfcac1; }
.oldsite__bar span { margin-left: auto; margin-right: auto; }
.oldsite__then, .oldsite__now { position: absolute; left: 0; right: 0; top: 7cqw; bottom: 0; }
.oldsite__then { opacity: calc(1 - var(--f, 0)); font-family: Arial, Helvetica, sans-serif; background: #f2f2f2; }
.then__head { display: flex; justify-content: space-between; align-items: center; padding: 2.6cqw 3cqw; background: linear-gradient(#4b6b8f, #34506f); color: #fff; font-size: max(8px, 2.3cqw); }
.then__head b { font-size: max(9px, 3.4cqw); }
.then__head span { color: #d7e2ee; text-decoration: underline; }
.then__banner { margin: 3cqw; padding: 3cqw; background: #dfe6ec; border: 1px solid #b7c3cf; color: #2b4460; font-weight: 700; font-size: max(9px, 3.6cqw); text-align: center; }
.then__body { display: flex; gap: 3cqw; padding: 0 3cqw; }
.then__pic { width: 34%; aspect-ratio: 4 / 3; background: linear-gradient(135deg, #b9c4cc, #8d9aa5); border: 2px ridge #c9ced3; }
.then__txt { flex: 1; display: grid; gap: 1.8cqw; align-content: start; }
.then__txt i { height: 1.4cqw; background: #cfcfcf; }
.then__txt i.short { width: 60%; }
.then__foot { position: absolute; left: 0; right: 0; bottom: 0; padding: 2cqw 3cqw; font-size: max(7px, 1.9cqw); color: #777; background: #e3e3e3; text-align: center; }
.oldsite__now { background: var(--paper); padding: 4cqw 5cqw; clip-path: inset(calc((1 - var(--f, 0)) * 100%) 0 0 0); display: flex; flex-direction: column; }
.now__nav { display: flex; justify-content: space-between; font-size: max(7px, 1.9cqw); letter-spacing: .08em; font-weight: 500; }
.now__links { display: flex; gap: 3cqw; letter-spacing: 0; font-weight: 400; color: var(--ink-2); }
.now__hero { flex: 1; display: grid; grid-template-columns: 1fr 40%; gap: 5cqw; align-items: center; }
.now__hero p { font-size: 6.6cqw; line-height: 1.02; letter-spacing: -.035em; }
.now__img { aspect-ratio: 4 / 5; overflow: hidden; }
.now__img img { width: 100%; height: 100%; object-fit: cover; transform: scale(calc(1.1 - var(--f, 0) * .1)); }

/* ---------- Method: one continuous line ---------- */
.method { padding: clamp(140px, 20vh, 240px) 0; background: var(--paper); }
.method__head, .industries__head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 120px); align-items: start; }
.method__head .eyebrow, .industries__head .eyebrow { padding-top: .9em; }
.industries { padding: clamp(120px, 16vh, 200px) 0 clamp(140px, 20vh, 240px); background: var(--ivory); }
.industries__grid { margin-top: clamp(64px, 10vh, 120px); display: grid; gap: clamp(40px, 6vw, 120px); }
.method__track { position: relative; margin-top: clamp(72px, 12vh, 140px); --m: 0; }
.method__rail { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line); }
.method__line { position: absolute; inset: 0; background: var(--ink); transform: scaleX(var(--m)); transform-origin: left; }
.method__list { margin-top: 0 !important; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 2.6vw, 44px); }
.method__list li { position: relative; padding-top: 34px; }
.method__list li::before { content: none !important; }
.method__dot { position: absolute; left: 0; top: -4.5px; width: 9px; height: 9px; border-radius: 50%; background: var(--paper); border: 1px solid var(--line); transition: background-color .5s var(--ease-w), border-color .5s var(--ease-w); }
.method__n { font-size: 12px; letter-spacing: .14em; font-weight: 500; color: var(--mute); transition: color .5s var(--ease-w); }
.method__list h3 { font-weight: 400; font-size: clamp(1.6rem, 2.3vw, 2.4rem); letter-spacing: -.03em; line-height: 1.05; margin: 40px 0 16px; color: #bdb7ab; transition: color .6s var(--ease-w); }
.method__list p { color: var(--ink-2); max-width: 26ch; font-size: 16px; }
.method__list li.is-on .method__dot { background: var(--ink); border-color: var(--ink); }
.method__list li.is-on .method__n { color: var(--ink); }
.method__list li.is-on h3 { color: var(--ink); }

/* ---------- Industries: name, then its sentence; one image beside ---------- */
.industries__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr) !important; align-items: start; }
.industries__media { position: sticky; top: 110px; }
.industries__frame { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--stone); }
.industries__frame img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  clip-path: inset(100% 0 0 0); transform: scale(1.07); z-index: 1;
  transition: clip-path 1s cubic-bezier(.7, 0, .2, 1), transform 1.6s var(--ease-w);
}
.industries__frame img.is-prev { clip-path: inset(0); transform: scale(1); z-index: 1; transition: none; }
.industries__frame img.is-active { clip-path: inset(0); transform: scale(1); z-index: 2; }
.industries__list li { border-top: 1px solid var(--line); }
.industries__list li:last-child { border-bottom: 1px solid var(--line); }
.industries__list button {
  all: unset; box-sizing: border-box; cursor: pointer; width: 100%;
  display: grid; grid-template-columns: clamp(34px, 3.4vw, 56px) 1fr; align-items: baseline;
  padding: clamp(20px, 2.8vh, 30px) 0; font-family: var(--font);
}
.industries__list .n { font-size: 12px; letter-spacing: .14em; color: var(--mute); font-weight: 500; }
.industries__list .name { display: block; font-size: clamp(1.7rem, 2.9vw, 3.1rem); line-height: 1.04; letter-spacing: -.035em; color: #b9b3a7; transition: color .5s var(--ease-w); }
.industries__list .desc { display: block; margin-top: 10px; max-width: 46ch; font-size: 16px; line-height: 1.45; color: var(--mute); transition: color .5s var(--ease-w); }
.industries__list button.is-active .name, .industries__list button:hover .name { color: var(--ink); }
.industries__list button.is-active .desc { color: var(--ink-2); }
.industries__list button:focus-visible { outline: 1px solid var(--ink); outline-offset: 6px; }

/* ---------- Contact: large, not the largest ---------- */
.contact { margin-top: clamp(130px, 22vh, 260px); padding-bottom: clamp(90px, 14vh, 170px); }
.contact .eyebrow { margin-bottom: 22px; }
.email { display: inline-flex; align-items: flex-start; gap: .16em; color: var(--ink); line-height: 1; letter-spacing: -.045em; white-space: nowrap; position: relative; padding-bottom: .12em; }
.email__arrow { font-size: .5em; font-weight: 300; margin-top: .08em; transition: transform .6s var(--ease-w); }
.email::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--ink); opacity: .9; transform-origin: left; transition: transform .8s var(--ease-w); }
.email:hover .email__arrow { transform: translate(.08em, -.08em); }

/* ---------- Ending: WEBALIX, edge to edge ---------- */
.end__meta { padding-top: 26px; padding-bottom: clamp(30px, 5vh, 70px); border-top: 1px solid var(--line); }
.end__mark { padding: 0 1.4vw clamp(12px, 1.6vw, 28px); line-height: .78; overflow: hidden; }
.end__fit { display: inline-block; font-weight: 500; letter-spacing: -.035em; white-space: nowrap; color: var(--ink); transform: translateY(calc((1 - var(--r, 1)) * 38%)); opacity: calc(.2 + var(--r, 1) * .8); }

/* ---------- Tablet & mobile ---------- */
@media (max-width: 860px) {
  .what { height: 420vh; }
  .what__grid { grid-template-columns: 1fr; gap: 26px; align-content: center; }
  .what__stage { order: -1; padding: 0 4px; }
  .what__steps { margin-top: 12px; }
  .what__word { font-size: clamp(2rem, 9vw, 3.2rem); }
  .art--css, .art--framer, .art--state { display: none; }
  .art--figma { left: -1cqw; } .art--react { right: -1cqw; } .art--asset { right: -1cqw; } .art--bp { right: 3cqw; } .art--deploy { right: 26cqw; bottom: -2cqw; }
  .phone { right: 1cqw; bottom: -6cqw; width: 23cqw; }

  .problem { height: 420vh; }
  .problem__grid { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 18px; align-items: start; padding-top: 84px; padding-bottom: 24px; }
  .problem__title { font-size: clamp(2rem, 8.6vw, 3rem); }
  .problem__list { margin-top: 16px; }
  .problem__list p { font-size: clamp(1.05rem, 4.4vw, 1.4rem); padding: 9px 0; }
  .fix { margin-top: 12px; }
  .rise--1 { width: 46%; } .rise--2 { width: 52%; } .rise--3 { width: 54%; right: 0; }
  .oldsite { width: 62%; bottom: 4%; }

  .method__head, .industries__head { grid-template-columns: 1fr; gap: 18px; }
  .method__head .eyebrow, .industries__head .eyebrow { padding-top: 0; }
  .method__rail { left: 4px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .method__line { transform: scaleY(var(--m)); transform-origin: top; }
  .method__list { grid-template-columns: 1fr; row-gap: 48px; }
  .method__list li { padding: 0 0 0 34px; }
  .method__dot { left: 0; top: 4px; }
  .method__list h3 { margin: 18px 0 10px; }

  .industries__grid { grid-template-columns: 1fr !important; gap: 22px; }
  .industries__media { top: 64px; z-index: 2; background: var(--ivory); padding-bottom: 10px; }
  .industries__frame { aspect-ratio: 16 / 10; }
  .industries__list .name { font-size: clamp(1.6rem, 7vw, 2.4rem); }
  .industries__list .desc { font-size: 15px; }
  .industries__list button { padding: 20px 0; }

  .philosophy { min-height: 100vh; }
}
@media (max-width: 560px) {
  .end__meta a { display: none; }
  .end__mark { padding-left: 2vw; padding-right: 2vw; }
}
@media (prefers-reduced-motion: reduce) {
  .what, .problem { height: auto; }
  .what__pin, .problem__pin { position: relative; height: auto; min-height: 100vh; padding: 12vh 0; }
  .problem__field { min-height: 80vh; }
  .rise { transform: none !important; }
  .rise--1 { top: 2%; } .rise--2 { top: 16%; } .rise--3 { top: 44%; }
  .site__img::before { animation: none; }
  .end__fit { transform: none; opacity: 1; }
}

/* =====================================================================
   V6.2 desktop fix — compositor-friendly moving layers
   ===================================================================== */
/* Film frame: four paper mats slide in instead of re-clipping the video every frame */
.mat { position: absolute; z-index: 3; background: var(--paper); will-change: transform; pointer-events: none; }
.mat--t, .mat--b { left: 0; right: 0; height: 100%; }
.mat--l, .mat--r { top: 0; bottom: 0; width: 100%; }
.mat--t { top: 0; transform: translate3d(0, calc(-100% + var(--inset-y, 0px)), 0); }
.mat--b { bottom: 0; transform: translate3d(0, calc(100% - var(--inset-y, 0px)), 0); }
.mat--l { left: 0; transform: translate3d(calc(-100% + var(--inset-x, 0px)), 0, 0); }
.mat--r { right: 0; transform: translate3d(calc(100% - var(--inset-x, 0px)), 0, 0); }
.hero__caption { z-index: 4; }
.hero__video, .hero__poster img { will-change: transform; }

.rise, .end__fit, .oldsite__now { will-change: transform; }

/* Industries: the reveal starts immediately and settles softly */
.industries__frame img { transition: clip-path .75s cubic-bezier(.16, 1, .3, 1), transform 1.2s cubic-bezier(.16, 1, .3, 1); }

/* Only what moves gets its own layer, so scroll changes composite instead of repainting the scene */
.art, .phone, .wire, .site, .wire__cursor, .moved, .fix, .oldsite__then, .method__line { will-change: transform, opacity; }
.art { backface-visibility: hidden; }
/* once the film is actually playing, stop rasterising the poster underneath it */
.hero__film.is-playing .hero__poster { visibility: hidden; }

/* ---------- LAUNCH: the finished homepage — full-bleed image, light staggered type ---------- */
.launch { position: absolute; inset: 0; overflow: hidden; color: var(--light); background: #1d1a16; opacity: var(--l, 0); padding: 3.6cqw 5cqw; will-change: opacity; }
.launch__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; filter: brightness(.66); transform: scale(calc(1.06 - var(--l, 0) * .06)); }
.launch__nav { position: relative; display: flex; justify-content: space-between; align-items: center; font-size: max(8px, 1.15cqw); letter-spacing: .16em; font-weight: 500; }
.launch__menu { display: inline-flex; align-items: center; gap: 2cqw; text-transform: uppercase; letter-spacing: .14em; font-weight: 400; }
.launch__menu svg { width: max(9px, 1.4cqw); height: auto; }
.launch__h { position: relative; margin-top: 8cqw; font-weight: 300; font-size: 6.1cqw; line-height: 1.06; letter-spacing: -.01em; }
.launch__h span { display: block; }
.launch__h span:nth-child(2) { padding-left: 22cqw; }
.launch__h span:nth-child(3) { padding-left: 8cqw; }

.phone__screen.launch--phone { position: relative; opacity: 1; padding: 3.2cqw 1.8cqw; border-radius: 2.8cqw; }
.launch--phone .launch__img { object-position: 30% 60%; transform: none; }
.launch--phone .launch__nav { font-size: max(4.5px, .85cqw); letter-spacing: .06em; white-space: nowrap; }
.launch--phone .phone__menu i { background: currentColor; }
.launch--phone .launch__h { margin-top: 9cqw; font-size: 2.15cqw; }
.launch--phone .launch__h span:nth-child(2) { padding-left: 3.6cqw; }
.launch--phone .launch__h span:nth-child(3) { padding-left: 1.8cqw; }
.launch::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(12, 11, 9, .5), rgba(12, 11, 9, 0) 32%), linear-gradient(to right, rgba(12, 11, 9, .35), rgba(12, 11, 9, 0) 60%); }

/* ---------- Your company changed: company vs website, side by side (scroll-driven, reversible) ---------- */
.problem__field { display: flex; align-items: center; }
.cmp { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2.4vw, 40px); width: 100%; }
.cmp__head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 10px; margin-bottom: 14px; border-bottom: 1px solid var(--line); font-size: 12px; line-height: 1.3; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); font-weight: 500; }
.cmp__year { position: relative; overflow: hidden; display: inline-block; width: 4.2ch; height: 1.3em; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: .06em; }
.cmp__year span { position: absolute; right: 0; top: 0; transform: translateY(105%); transition: transform .55s cubic-bezier(.2, .7, 0, 1), color .4s; }
.cmp__year span.is-on { transform: none; }
.cmp__year span.is-past { transform: translateY(-105%); }
.cmp__year.is-stale span.is-on { color: #b4532f; }
.cmp__box { width: 100%; aspect-ratio: 4 / 5; }
.chg__frame { position: relative; margin: 0; overflow: hidden; background: var(--stone); }
.chg__slide { position: absolute; inset: 0; overflow: hidden; transform: translate3d(0, calc((1 - var(--r, 0)) * 101%), 0); will-change: transform; }
.chg__slide img { width: 100%; height: 100%; object-fit: cover; transform: translate3d(0, calc((var(--r, 0) - 1) * 60%), 0) scale(calc(1.14 - var(--r, 0) * .14)); will-change: transform; }
.chg__slide--base, .chg__slide--base img { transform: none; }
.problem .oldsite.cmp__box { position: relative; left: auto; bottom: auto; width: 100%; aspect-ratio: 4 / 5; }
@media (max-width: 860px) {
  .problem__field { align-items: flex-start; }
  .cmp { gap: 10px; }
  .cmp__head { font-size: 9.5px; letter-spacing: .1em; padding-bottom: 6px; margin-bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .chg__slide:not(:last-child) { display: none; }
  .chg__slide, .chg__slide img { transform: none !important; }
}

/* ---------- Method: each step opens onto its image when the line reaches it (reverses on the way up) ---------- */
.method__img { margin: 32px 0 0; aspect-ratio: 4 / 5; overflow: hidden; background: var(--stone); }
.method__img > span { display: block; height: 100%; overflow: hidden; transform: translate3d(0, 101%, 0); transition: transform 1.1s cubic-bezier(.2, .7, 0, 1); }
.method__img img { width: 100%; height: 100%; object-fit: cover; transform: translate3d(0, -60%, 0) scale(1.12); transition: transform 1.3s cubic-bezier(.2, .7, 0, 1); }
.method__list li.is-on .method__img > span, .method__list li.is-on .method__img img { transform: none; }
.method__img { background: transparent; }
@media (max-width: 860px) { .method__img { margin-top: 20px; max-width: 360px; aspect-ratio: 4 / 3; } }
@media (prefers-reduced-motion: reduce) { .method__img > span, .method__img img { transform: none !important; transition: none; } }

/* ---------- Footer: dark, quiet columns, the name as a faded watermark ---------- */
.end { background: #0f0e0c; color: var(--light); overflow: hidden; }
.end__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; padding-top: clamp(90px, 14vh, 160px); padding-bottom: clamp(60px, 10vh, 120px); }
.end__h { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: rgba(246, 242, 234, .5); font-weight: 500; margin-bottom: 22px; }
.end__cols ul { display: grid; gap: 12px; font-size: 15px; }
.end__cols a, .end__cols span { color: rgba(246, 242, 234, .86); transition: color .3s; }
.end__cols a:hover { color: #fff; }
.end__mark { padding: 0 1.4vw; line-height: .8; overflow: hidden; }
.end__fit {
  color: transparent;
  background: linear-gradient(to bottom, rgba(246, 242, 234, .16) 0%, rgba(246, 242, 234, .07) 55%, rgba(246, 242, 234, 0) 100%);
  -webkit-background-clip: text; background-clip: text;
  opacity: 1; transform: translateY(calc((1 - var(--r, 1)) * 30%));
}
.end__copy { padding: clamp(18px, 3vh, 36px) var(--gutter) clamp(28px, 4vh, 48px); text-align: center; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: rgba(246, 242, 234, .5); }
@media (max-width: 860px) {
  .end__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 44px; padding-top: 72px; padding-bottom: 56px; }
  .end__cols ul { font-size: 14px; gap: 10px; }
  .end__copy { font-size: 10px; letter-spacing: .12em; }
}
.method__list li { display: flex; flex-direction: column; }
.method__list li p { margin-bottom: 32px; }
.method__img { margin-top: auto; aspect-ratio: 1 / 1; }
@media (max-width: 860px) { .method__list li p { margin-bottom: 0; } .method__img { margin-top: 20px; aspect-ratio: 4 / 3; } }

/* ---------- Your company changed: type only — the lines light up, the old one is struck out ---------- */
.problem { height: 300vh; }
.problem__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; }
.problem__list { margin-top: 0; }
.problem__list p { font-size: clamp(2rem, 4.1vw, 4.6rem); line-height: 1.04; letter-spacing: -.035em; padding: .3em 0 .32em; border-top: 1px solid var(--line); }
.problem__list .moved { opacity: calc(.14 + var(--t, 0) * .86); transform: translate3d(0, calc((1 - var(--t, 0)) * 14px), 0); }
.problem__list .still { color: var(--mute); }
.still span { position: relative; display: inline-block; }
.still span::after { content: ""; position: absolute; left: -.04em; right: -.04em; top: 54%; height: .055em; background: var(--ink); transform: scaleX(var(--f, 0)); transform-origin: left; will-change: transform; }
.problem__list .fix { margin-top: 0; border-top: 1px solid var(--ink) !important; font-weight: 500; opacity: var(--t, 0); transform: translate3d(0, calc((1 - var(--t, 0)) * 14px), 0); }
@media (max-width: 860px) {
  .problem { height: 300vh; }
  .problem__grid { grid-template-columns: 1fr; align-content: center; gap: 36px; padding-top: 0; padding-bottom: 0; }
  .problem__list p { font-size: clamp(1.7rem, 8.4vw, 2.6rem); }
}
@media (prefers-reduced-motion: reduce) { .still span::after { transform: scaleX(1); } }
@media (max-width: 860px) {
  .problem__grid { grid-template-rows: auto auto; align-items: start; }
  .problem__list p { font-size: clamp(1.3rem, 6.3vw, 2.4rem); }
  .still span { white-space: nowrap; }
}

/* ---------- Method as four image cards: the photo opens when the line arrives, zooms gently on hover ---------- */
.method__list { align-items: stretch; }
.method__list li { position: relative; display: flex; flex-direction: column; justify-content: flex-end; aspect-ratio: 3 / 4.4; padding: 34px clamp(18px, 1.8vw, 30px) clamp(20px, 2vw, 32px); color: var(--light); }
.method__list li > .method__n, .method__list li > h3, .method__list li > p { position: relative; z-index: 1; }
.method__list li p { margin-bottom: 0; color: rgba(246, 242, 234, .82); max-width: 30ch; font-size: 15px; }
.method__list h3 { margin: 14px 0 12px; color: rgba(246, 242, 234, .38); }
.method__list li.is-on h3 { color: var(--light); }
.method__n { color: rgba(246, 242, 234, .5); }
.method__list li.is-on .method__n { color: var(--light); }
.method__img { position: absolute; left: 0; right: 0; top: 34px; bottom: 0; margin: 0 !important; aspect-ratio: auto !important; max-width: none !important; overflow: hidden; background: #1b1916; }
.method__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(12, 11, 9, .82) 0%, rgba(12, 11, 9, .38) 45%, rgba(12, 11, 9, .08) 75%); pointer-events: none; }
.method__img img { transition: transform 1.3s cubic-bezier(.2, .7, 0, 1); }
@media (hover: hover) and (pointer: fine) {
  .method__list li.is-on:hover .method__img img { transform: scale(1.07); transition-duration: 1.6s; }
}
@media (max-width: 860px) {
  .method__list li { aspect-ratio: 4 / 4.2; padding: 24px 22px 22px 56px; }
  .method__img { left: 34px; top: 0; }
  .method__dot { top: 4px; }
}
/* photos always present: dim and monochrome until the line reaches their step */
.method__img > span { transform: none !important; transition: none; }
.method__img img { transform: scale(1.08); filter: grayscale(1) brightness(.55); transition: transform 1.3s cubic-bezier(.2, .7, 0, 1), filter 1s cubic-bezier(.2, .7, 0, 1); }
.method__list li.is-on .method__img img { transform: none; filter: none; }
@media (hover: hover) and (pointer: fine) {
  .method__list li.is-on:hover .method__img img { transform: scale(1.07); transition: transform 1.6s cubic-bezier(.2, .7, 0, 1), filter 1s; }
}
@media (prefers-reduced-motion: reduce) { .method__img img { filter: none; transform: none; } }

/* ---------- Method, full bleed: four photo panels edge to edge, the line runs across them ---------- */
.method { padding-bottom: 0; }
.method__track { margin-top: clamp(56px, 9vh, 110px); margin-left: calc(50% - 50vw); width: 100vw; }
.method__list { gap: 0 !important; }
.method__list li { aspect-ratio: auto; height: min(88vh, 960px); min-height: 520px; padding: 0 clamp(22px, 2.4vw, 40px) clamp(28px, 4vh, 48px); }
.method__img { top: 0 !important; left: 0 !important; }
.method__img::after { background: linear-gradient(to top, rgba(12, 11, 9, .85) 0%, rgba(12, 11, 9, .35) 42%, rgba(12, 11, 9, .05) 70%), linear-gradient(to bottom, rgba(12, 11, 9, .45), rgba(12, 11, 9, 0) 22%); }
.method__rail { z-index: 2; top: clamp(34px, 5vh, 56px); left: 0; right: 0; background: rgba(246, 242, 234, .28); }
.method__line { background: var(--light); }
.method__dot { z-index: 2; top: calc(clamp(34px, 5vh, 56px) - 4.5px); left: clamp(22px, 2.4vw, 40px); background: transparent; border-color: rgba(246, 242, 234, .5); }
.method__list li.is-on .method__dot { background: var(--light); border-color: var(--light); }
.method__list li h3 { font-size: clamp(2rem, 3vw, 3.2rem); }
.method__list li + li { box-shadow: inset 1px 0 0 rgba(246, 242, 234, .12); }
@media (max-width: 860px) {
  .method__track { margin-top: 40px; }
  .method__list li { height: 72svh; min-height: 420px; padding: 0 24px 28px 52px; }
  .method__img { left: 0 !important; }
  .method__rail { top: 0; bottom: 0; left: 26px; right: auto; width: 1px; height: auto; }
  .method__dot { top: 28px; left: 22px; }
  .method__list li + li { box-shadow: none; }
}

/* ---------- Final CTA: the text on the left, a full-height photograph bleeding off the right edge ---------- */
.final { position: relative; }
.final__img { position: absolute; top: 0; right: 0; bottom: 0; width: 44vw; margin: 0; overflow: hidden; background: #2a1d16; }
.final__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; transition: transform 1.6s cubic-bezier(.2, .7, 0, 1); }
@media (hover: hover) and (pointer: fine) { .final__img:hover img { transform: scale(1.04); } }
.final__title { max-width: 12.5ch; }
.final > .wrap, .final > .contact { position: relative; z-index: 1; }
@media (max-width: 860px) {
  .final { padding-top: 0; }
  .final__img { position: relative; width: 100%; height: 62svh; margin-bottom: 72px; }
  .final__title { max-width: 16ch; }
}

/* ---------- Your company changed — cinematic: full-bleed stills, one sentence at a time, then the old site arrives ---------- */
.problem { height: 520vh; background: var(--film); }
.problem__pin { background: var(--film); color: var(--light); }
.pb__bg { position: absolute; inset: 0; overflow: hidden; }
.pb__slide { position: absolute; inset: 0; overflow: hidden; transform: translate3d(0, calc((1 - var(--r, 0)) * 101%), 0); will-change: transform; }
.pb__slide img { width: 100%; height: 100%; object-fit: cover; transform: translate3d(0, calc((var(--r, 0) - 1) * 55%), 0) scale(calc(1.14 - var(--k, 0) * .1)); will-change: transform; }
.pb__shade { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(12, 11, 9, .82) 0%, rgba(12, 11, 9, .3) 45%, rgba(12, 11, 9, .15) 70%, rgba(12, 11, 9, .5) 100%), rgba(12, 11, 9, calc(.12 + var(--d, 0) * .5)); }
.pb__ui { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding-top: clamp(96px, 14vh, 150px); padding-bottom: clamp(40px, 8vh, 96px); pointer-events: none; }
.pb__title { font-size: clamp(1rem, 1.35vw, 1.35rem); font-weight: 500; line-height: 1.3; letter-spacing: -.005em; }
.pb__title span { color: rgba(246, 242, 234, .6); }
.pb__lines { position: relative; height: 1.1em; font-size: clamp(2.6rem, 7.4vw, 8.4rem); line-height: 1; letter-spacing: -.045em; }
.pb__lines p { position: absolute; left: 0; bottom: 0; white-space: nowrap; opacity: calc(var(--in, 0) * (1 - var(--out, 0)));
  transform: translate3d(0, calc((1 - var(--in, 0)) * .5em - var(--out, 0) * .35em), 0); will-change: transform, opacity; }
.pb__lines p:last-child { font-weight: 500; }
.problem .oldsite.pb__site { position: absolute; z-index: 3; left: auto; bottom: auto; right: var(--gutter); top: 50%; width: min(46vw, 720px); aspect-ratio: 16 / 10.5;
  box-shadow: 0 60px 120px -40px rgba(0, 0, 0, .6); opacity: var(--s, 0);
  transform: translate3d(0, calc(-62% + (1 - var(--s, 0)) * 34vh), 0) rotate(calc((1 - var(--s, 0)) * 2deg)); will-change: transform, opacity; }
@media (max-width: 860px) {
  .problem { height: 520vh; }
  .pb__lines { font-size: clamp(2rem, 11vw, 3.4rem); height: 2.1em; }
  .pb__lines p { white-space: normal; max-width: 12ch; }
  .problem .oldsite.pb__site { left: 50%; right: auto; top: 44%; width: 88vw; transform: translate3d(-50%, calc(-50% + (1 - var(--s, 0)) * 34vh), 0); }
  .pb__title { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .pb__slide:not(:last-child) { display: none; }
  .pb__slide, .pb__slide img { transform: none !important; }
  .pb__lines { height: auto; } .pb__lines p { position: static; opacity: 1; transform: none; font-size: .5em; }
}
.problem .oldsite.pb__site { color: var(--ink); }

/* Method title on one line (desktop) */
.method__head { grid-template-columns: 1fr; gap: 22px; }
.method__head .eyebrow { padding-top: 0; }
.method__title { max-width: none !important; white-space: nowrap; font-size: clamp(2rem, 4.5vw, 6rem); }
@media (max-width: 860px) { .method__title { white-space: normal; font-size: clamp(2.2rem, 9vw, 3.4rem); } }


/* =====================================================================
   V7
   ===================================================================== */

/* ---------- Accessibility: focus that belongs to the design ---------- */
:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
.btn:focus-visible { outline-offset: 3px; }
.skip { position: fixed; left: 16px; top: -60px; z-index: 100; padding: 12px 18px; background: var(--ink); color: var(--paper); font-size: 14px; transition: top .2s; }
.skip:focus { top: 16px; }

/* ---------- The principle ---------- */
.system { padding: clamp(130px, 20vh, 240px) 0; background: var(--paper); }
.system__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 120px); }
.system__grid .eyebrow { padding-top: .9em; }
.system__text { margin-top: clamp(28px, 5vh, 48px); max-width: 46ch; font-size: clamp(1.05rem, 1.35vw, 1.3rem); line-height: 1.55; color: var(--ink-2); }

/* ---------- Speed: the clock moves with the scroll ---------- */
.speed { height: 460vh; background: var(--ivory); }
.speed__pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.speed__grid { position: relative; height: 100%; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto 1fr auto auto; column-gap: clamp(40px, 6vw, 120px);
  padding-top: clamp(96px, 14vh, 150px); padding-bottom: clamp(28px, 5vh, 56px); }
.speed__head { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; gap: 24px; }
.speed__title { font-weight: 400; font-size: clamp(1.25rem, 1.9vw, 2rem); letter-spacing: -.02em; }
.speed__clock { position: relative; align-self: center; }
.speed__day { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; font-weight: 500; color: var(--mute); }
.speed__time { margin-top: .12em; font-size: clamp(5rem, 17vw, 17rem); line-height: .86; letter-spacing: -.06em; font-weight: 300; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.speed__events { position: relative; height: 1.2em; margin-top: .45em; font-size: clamp(1.4rem, 2.6vw, 2.8rem); letter-spacing: -.03em; }
.speed__events p { position: absolute; left: 0; top: 0; white-space: nowrap; opacity: var(--on, 0); transform: translate3d(0, calc((1 - var(--on, 0)) * 12px), 0); will-change: transform, opacity; }
.speed__end { position: absolute; left: 0; bottom: 0; font-size: clamp(3rem, 8.4vw, 9.4rem); line-height: .96; letter-spacing: -.05em; opacity: var(--end, 0); transform: translate3d(0, calc((1 - var(--end, 0)) * 30px), 0); pointer-events: none; will-change: transform, opacity; }
.speed__clock > :not(.speed__end) { opacity: calc(1 - var(--fade, 0)); }
.speed__log { align-self: center; border-top: 1px solid var(--line); }
.speed__log li { display: grid; grid-template-columns: 9.5em 1fr; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); font-size: 15px; color: var(--mute); transition: color .5s var(--ease-w); }
.speed__log time { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; letter-spacing: .02em; }
.speed__log li.is-on { color: var(--ink); }
.speed__track { grid-column: 1 / -1; position: relative; height: 1px; margin-top: clamp(26px, 5vh, 56px); background: var(--line); }
.speed__track i { position: absolute; inset: 0; background: var(--ink); transform: scaleX(var(--bar, 0)); transform-origin: left; will-change: transform; }
.speed__track span { position: absolute; top: 12px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.speed__track span:first-of-type { left: 0; } .speed__track span:last-of-type { left: 62%; }
.speed__note { grid-column: 1 / -1; margin-top: 40px; font-size: 12px; letter-spacing: .04em; color: var(--mute); }
@media (max-width: 860px) {
  .speed { height: 440vh; }
  .speed__grid { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto auto auto; padding-top: 88px; }
  .speed__head { flex-direction: column; gap: 10px; }
  .speed__time { font-size: clamp(4.6rem, 28vw, 9rem); }
  .speed__events { font-size: clamp(1.25rem, 5.6vw, 1.8rem); }
  .speed__end { font-size: clamp(2.6rem, 13vw, 4.4rem); }
  .speed__log { margin-top: 28px; }
  .speed__log li { grid-template-columns: 8.4em 1fr; padding: 11px 0; font-size: 13.5px; }
  .speed__note { margin-top: 30px; font-size: 11px; }
}
@media (max-height: 700px) and (min-width: 861px) { .speed__log li { padding: 12px 0; } .speed__time { font-size: clamp(5rem, 14vw, 13rem); } }

/* ---------- Studio ---------- */
.studio { padding: clamp(140px, 22vh, 260px) 0 clamp(110px, 16vh, 190px); background: var(--paper); }
.studio__head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 120px); }
.studio__head .eyebrow { padding-top: .9em; }
.studio__text { margin-top: clamp(28px, 5vh, 48px); max-width: 44ch; font-size: clamp(1.05rem, 1.35vw, 1.3rem); line-height: 1.55; color: var(--ink-2); }
.studio__rules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(80px, 13vh, 150px); border-top: 1px solid var(--ink); }
.studio__rules li { padding: 30px clamp(18px, 2.2vw, 36px) 0 0; }
.studio__rules li + li { padding-left: clamp(18px, 2.2vw, 36px); border-left: 1px solid var(--line); }
.studio__rules h3 { font-weight: 400; font-size: clamp(1.8rem, 3vw, 3.2rem); letter-spacing: -.035em; line-height: 1.04; }
.studio__rules p { margin-top: 16px; max-width: 30ch; color: var(--ink-2); font-size: 16px; }
.studio__id { margin-top: clamp(64px, 10vh, 110px); font-size: 12px; letter-spacing: .04em; color: var(--mute); }
@media (max-width: 860px) {
  .system__grid, .studio__head { grid-template-columns: 1fr; gap: 18px; }
  .system__grid .eyebrow, .studio__head .eyebrow { padding-top: 0; }
  .studio__rules { grid-template-columns: 1fr; margin-top: 64px; }
  .studio__rules li, .studio__rules li + li { padding: 24px 0 26px; border-left: 0; border-bottom: 1px solid var(--line); }
  .studio__id { line-height: 1.7; }
}

/* ---------- Philosophy: the commercial thought, same sparse look ---------- */
.philosophy__line { max-width: 27ch; font-size: clamp(1.45rem, 2.5vw, 2.7rem); line-height: 1.14; }
.philosophy__line span { display: block; margin-top: .5em; color: var(--light); }
.philosophy__line { color: rgba(246, 242, 234, .72); }

/* ---------- Final: show us yours ---------- */
.final__main { display: block; }
.final__title { max-width: 12.5ch; }
.lead { margin-top: clamp(48px, 8vh, 88px); max-width: min(52vw, 760px); }
.lead__intro { font-size: clamp(1.05rem, 1.35vw, 1.3rem); color: var(--ink-2); max-width: 36ch; }
.field { position: relative; }
.field label { display: block; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; color: var(--mute); }
.field label small { font-size: inherit; letter-spacing: inherit; text-transform: none; color: #b0aa9f; margin-left: 6px; }
.field input { display: block; width: 100%; margin-top: 10px; padding: 8px 0 12px; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; background: transparent; color: var(--ink);
  font: 400 18px/1.3 var(--font); letter-spacing: -.01em; -webkit-appearance: none; appearance: none; }
.field input::placeholder { color: #b8b2a7; }
.field input:focus { outline: none; border-bottom-width: 2px; padding-bottom: 11px; }
.field input:focus-visible { outline: none; }
.field--url { margin-top: clamp(34px, 5vh, 52px); }
.field--url input { font-size: clamp(1.9rem, 3.6vw, 3.6rem); letter-spacing: -.035em; padding: 6px 0 14px; }
.field--url input:focus { padding-bottom: 13px; }
.field__err { min-height: 1.4em; margin-top: 8px; font-size: 13px; color: #a8412a; }
.field.is-bad input { border-bottom-color: #a8412a; }
.lead__row { display: grid; grid-template-columns: 1fr 1.25fr 1fr; gap: 28px; margin-top: 22px; }
.lead__hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.lead__foot { display: flex; align-items: center; flex-wrap: wrap; gap: 20px 28px; margin-top: 26px; }
.lead__btn { height: 58px; padding: 0 30px; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; font-weight: 500; }
.lead__btn[disabled] { opacity: .55; cursor: progress; }
.lead__legal { font-size: 13px; color: var(--mute); max-width: 34ch; }
.lead__legal a { text-decoration: underline; text-underline-offset: 3px; }
.lead__status { margin-top: 18px; font-size: 15px; color: var(--ink-2); max-width: 52ch; }
.lead__status:empty { display: none; }
.lead__status a { text-decoration: underline; text-underline-offset: 3px; color: var(--ink); }
.lead__done { margin-top: clamp(48px, 8vh, 88px); max-width: min(50vw, 700px); padding-top: 26px; border-top: 1px solid var(--ink); }
.lead__done:focus { outline: none; }
.lead__done-t { margin-top: 18px; font-size: clamp(2rem, 3.8vw, 3.8rem); letter-spacing: -.04em; line-height: 1.02; }
.lead__done-p { margin-top: 18px; font-size: 17px; color: var(--ink-2); }
.lead__done strong { font-weight: 500; color: var(--ink); word-break: break-all; }
.final .contact { margin-top: clamp(90px, 15vh, 170px); }
@media (max-width: 860px) {
  .lead, .lead__done { max-width: none; }
  .lead__row { grid-template-columns: 1fr; gap: 6px; margin-top: 14px; }
  .field input { font-size: 17px; }
  .field--url input { font-size: clamp(1.6rem, 7.4vw, 2.2rem); }
  .lead__btn { width: 100%; justify-content: center; }
}

/* ---------- Footer: five quiet columns ---------- */
.end__cols { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.end__copy { letter-spacing: .1em; }
@media (max-width: 860px) { .end__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } .end__cols > div:last-child { grid-column: 1 / -1; } .end__copy { line-height: 1.8; } }

/* ---------- Legal pages ---------- */
.page-legal .nav { color: var(--ink); }
.legal { padding: clamp(140px, 20vh, 220px) 0 clamp(110px, 16vh, 180px); background: var(--paper); }
.legal__wrap { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 0 clamp(40px, 6vw, 120px); }
.legal__head { grid-column: 1 / -1; padding-bottom: clamp(48px, 8vh, 90px); margin-bottom: clamp(40px, 6vh, 70px); border-bottom: 1px solid var(--line); }
.legal__title { margin-top: 22px; font-size: clamp(2.4rem, 5.4vw, 5.8rem); max-width: 16ch; }
.legal__meta { margin-top: 28px; font-size: 14px; line-height: 1.7; color: var(--ink-2); }
.legal__lang { margin-top: 10px; font-size: 13px; color: var(--mute); }
.legal__nav { position: sticky; top: 110px; align-self: start; display: grid; gap: 12px; font-size: 15px; }
.legal__nav a { color: var(--mute); transition: color .3s; }
.legal__nav a:hover, .legal__nav a[aria-current] { color: var(--ink); }
.legal__body { max-width: 68ch; font-size: 16.5px; line-height: 1.7; color: var(--ink-2); }
.legal__body h2 { margin: 2.6em 0 .7em; font-weight: 500; font-size: 1.15rem; letter-spacing: -.01em; color: var(--ink); }
.legal__body h2:first-child { margin-top: 0; }
.legal__body p + p { margin-top: .9em; }
.legal__body ul { margin: .9em 0; }
.legal__body li { position: relative; padding-left: 1.3em; }
.legal__body li + li { margin-top: .5em; }
.legal__body li::before { content: ""; position: absolute; left: 0; top: .78em; width: .55em; height: 1px; background: var(--ink); }
.legal__body a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; word-break: break-word; }
.notfound { min-height: 80vh; display: flex; align-items: center; }
.notfound__actions { margin-top: 44px; display: flex; flex-wrap: wrap; align-items: center; gap: 24px; }
@media (max-width: 860px) {
  .legal__wrap { grid-template-columns: 1fr; }
  .legal__nav { position: static; display: flex; flex-wrap: wrap; gap: 10px 20px; margin-bottom: 44px; font-size: 14px; }
  .legal__body { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .speed { height: auto; }
  .speed__pin { position: relative; height: auto; padding: 12vh 0; }
  .speed__clock { display: none; }
  .speed__log li { color: var(--ink); }
  .speed__track i { transform: none; }
}
.speed__events p { transition: opacity .45s var(--ease-w), transform .6s var(--ease-w); }

/* ---------- Languages: EN · FR · DE, quietly beside the call to action ---------- */
.nav__end { justify-self: end; display: flex; align-items: center; gap: clamp(18px, 2.2vw, 34px); }
.nav__lang { display: flex; gap: 12px; font-size: 12px; letter-spacing: .1em; font-weight: 500; }
.nav__lang a { opacity: .5; transition: opacity .3s; }
.nav__lang a:hover, .nav__lang a[aria-current] { opacity: 1; }
.nav__cta { justify-self: auto; white-space: nowrap; }
.nav__cta-s { display: none; }
@media (max-width: 860px) {
  .nav__end { gap: 16px; }
  .nav__lang { gap: 9px; font-size: 11px; }
  .nav__cta-l { display: none; }
  .nav__cta-s { display: inline; }
}
.legal__title { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }

/* =====================================================================
   Landing pages (industries, locations) and FAQ
   ===================================================================== */
.lp-hero { position: relative; min-height: 88vh; min-height: 88svh; display: flex; align-items: flex-end; background: var(--film); color: var(--light); overflow: hidden; }
.lp-hero__img { position: absolute; inset: 0; }
.lp-hero__img img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.5) saturate(.9); }
.lp-hero__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(12, 11, 9, .82) 0%, rgba(12, 11, 9, .2) 55%, rgba(12, 11, 9, .5) 100%); }
.lp-hero__in { position: relative; width: 100%; padding-top: 140px; padding-bottom: clamp(36px, 7vh, 72px); }
.lp-crumbs { font-size: 12px; letter-spacing: .04em; color: rgba(246, 242, 234, .6); margin-bottom: clamp(40px, 8vh, 90px); }
.lp-crumbs a:hover { color: var(--light); }
.lp-crumbs span[aria-hidden] { margin: 0 6px; }
.lp-hero__title { margin-top: 20px; max-width: 16ch; font-weight: 400; font-size: clamp(2.5rem, 5.6vw, 6.2rem); line-height: 1.01; letter-spacing: -.04em; text-wrap: balance; hyphens: auto; -webkit-hyphens: auto; }
.lp-hero__lede { margin-top: 26px; max-width: 46ch; font-size: clamp(1.05rem, 1.35vw, 1.3rem); line-height: 1.5; color: rgba(246, 242, 234, .82); }
.lp-hero__actions { margin-top: 34px; display: flex; flex-wrap: wrap; align-items: center; gap: 18px 26px; }
.lp-timing { margin-top: clamp(40px, 7vh, 70px); display: flex; flex-wrap: wrap; gap: 20px clamp(28px, 5vw, 72px); padding-top: 22px; border-top: 1px solid rgba(246, 242, 234, .25); }
.lp-timing dt { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(246, 242, 234, .6); font-weight: 500; }
.lp-timing dd { margin-top: 6px; font-size: clamp(1.1rem, 1.6vw, 1.5rem); letter-spacing: -.02em; }
.page-lp .nav { color: var(--light); }

.lp-sec { padding: clamp(100px, 16vh, 190px) 0; background: var(--paper); }
.lp-sec--ivory { background: var(--ivory); }
.lp-sec--line { padding: clamp(60px, 10vh, 110px) 0; border-top: 1px solid var(--line); }
.lp-2col { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 120px); align-items: start; }
.lp-2col--even { grid-template-columns: 1fr 1fr; }
.lp-h { font-size: clamp(2rem, 3.8vw, 4rem); max-width: 14ch; text-wrap: balance; }
.lp-h2 { font-weight: 400; font-size: clamp(1.6rem, 2.5vw, 2.6rem); letter-spacing: -.03em; line-height: 1.08; margin-bottom: clamp(26px, 4vh, 44px); max-width: 22ch; text-wrap: balance; }
.lp-2col .lp-h2 { margin-top: 16px; }
.lp-text p { font-size: clamp(1.05rem, 1.35vw, 1.3rem); line-height: 1.55; color: var(--ink-2); max-width: 52ch; }
.lp-text p + p { margin-top: 1em; }
.lp-near { font-size: 14px !important; color: var(--mute) !important; letter-spacing: .01em; }
.lp-p { font-size: 16.5px; line-height: 1.65; color: var(--ink-2); max-width: 54ch; }
.lp-p + .lp-p { margin-top: 1em; }
.lp-p--big { margin-top: 16px; font-size: clamp(1.1rem, 1.5vw, 1.4rem); line-height: 1.5; color: var(--ink); }
.lp-p strong { font-weight: 500; color: var(--ink); }
.lp-intro { max-width: 60ch; margin-bottom: clamp(60px, 10vh, 110px); }
.lp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.lp-grid li { padding: 28px clamp(16px, 2vw, 32px) 34px 0; border-bottom: 1px solid var(--line); }
.lp-grid li:not(:nth-child(3n + 1)) { padding-left: clamp(16px, 2vw, 32px); border-left: 1px solid var(--line); }
.lp-grid h3 { font-weight: 400; font-size: clamp(1.2rem, 1.6vw, 1.55rem); letter-spacing: -.02em; line-height: 1.15; }
.lp-grid p { margin-top: 12px; font-size: 15.5px; line-height: 1.6; color: var(--ink-2); max-width: 36ch; }
.lp-grid--links a { display: block; height: 100%; transition: opacity .3s; }
.lp-grid--links a h3::after { content: " →"; opacity: 0; transition: opacity .3s, transform .3s; }
.lp-grid--links a:hover h3::after, .lp-grid--links a:focus-visible h3::after { opacity: 1; }
.lp-links { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 10px 26px; font-size: 15.5px; }
.lp-links a { color: var(--ink-2); border-bottom: 1px solid var(--line); padding-bottom: 2px; transition: color .3s, border-color .3s; }
.lp-links a:hover { color: var(--ink); border-color: var(--ink); }
.lp-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 48px clamp(28px, 4vw, 64px); }
.lp-group .lp-h2 { margin-bottom: 8px; font-size: clamp(1.3rem, 1.9vw, 1.9rem); }
.lp-group .lp-links { flex-direction: column; gap: 10px; }
.lp-group .lp-links a { border-bottom: 0; }
.lp-cta { padding: clamp(120px, 20vh, 220px) 0; background: var(--ivory); }
.lp-cta .display { max-width: 18ch; }
.lp-cta__btn { margin-top: clamp(36px, 6vh, 56px); height: 58px; padding: 0 30px; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; font-weight: 500; }

.faq { padding: clamp(110px, 18vh, 200px) 0; background: var(--paper); border-top: 1px solid var(--line); }
.faq__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 120px); align-items: start; }
.faq__title { font-size: clamp(2rem, 3.6vw, 3.8rem); max-width: 10ch; }
.faq__list { border-top: 1px solid var(--ink); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 24px 0; cursor: pointer; list-style: none; font-size: clamp(1.1rem, 1.5vw, 1.4rem); letter-spacing: -.02em; line-height: 1.25; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary i { position: relative; flex: none; width: 14px; height: 14px; }
.faq__item summary i::before, .faq__item summary i::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--ink); transition: transform .4s var(--ease-w); }
.faq__item summary i::after { transform: rotate(90deg); }
.faq__item[open] summary i::after { transform: rotate(0); }
.faq__item p { padding: 0 0 26px; max-width: 58ch; font-size: 16.5px; line-height: 1.65; color: var(--ink-2); }
.industries__all { margin-top: clamp(40px, 6vh, 64px); }
@media (max-width: 860px) {
  .lp-hero { min-height: 92svh; }
  .lp-hero__in { padding-top: 110px; }
  .lp-crumbs { margin-bottom: 36px; }
  .lp-2col, .lp-2col--even, .faq__grid { grid-template-columns: 1fr; gap: 28px; }
  .lp-grid { grid-template-columns: 1fr; }
  .lp-grid li, .lp-grid li:not(:nth-child(3n + 1)) { padding: 22px 0 24px; border-left: 0; }
  .lp-grid--links a h3::after { opacity: 1; }
  .lp-links { font-size: 15px; }
}
@media (min-width: 861px) and (max-width: 1100px) { .lp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lp-grid li:nth-child(n) { padding-left: 0; border-left: 0; } .lp-grid li:nth-child(2n) { padding-left: clamp(16px, 2vw, 32px); border-left: 1px solid var(--line); } }