html { background-color: #FFFFFF; color-scheme: light only; }
body { background-color: #FFFFFF; }

@layer tokens, base, layout, nav, hero, about, featured, testimonials, stack, services, footer, pages, motion, utilities;

@layer tokens {
  :root {
    color-scheme: light only;
    --primary: #6670FF;
    --primary-10: rgba(102,112,255,.10);
    --primary-05: rgba(102,112,255,.05);
    --accent: #F94706;
    --ink: #000;
    --body: #4D4D4D;
    --muted: #808080;
    --muted-light: #B3B3B3;
    --hairline: #F2F2F2;
    --surface: #fff;
    --surface-alt: #FAFAFA;
    --mint: #00CC99;
    --mint-light: #66FFD9;

    --sh-nav: 0 5px 20px rgba(0,0,0,.05);
    --sh-card: 0 20px 20px rgba(0,0,0,.1);
    --sh-pill: 0 8px 24px rgba(0,0,0,.08);

    --font-sans: "Public Sans", system-ui, -apple-system, sans-serif;
    --font-serif: "PT Serif", Georgia, serif;

    --col-max: 1200px;
    --col-pad: 24px;
    --ease: cubic-bezier(.22,.61,.36,1);
    --dur: 180ms;
    --dur-slow: 600ms;
  }
}

@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
  body {
    margin: 0; background: var(--surface); color: var(--body);
    font-family: var(--font-sans); font-size: 18px; font-weight: 400; line-height: 1.5;
    overflow-x: hidden; text-wrap: pretty; -webkit-font-smoothing: antialiased;
  }
  img, svg { display: block; max-width: 100%; }
  img { height: auto; }
  a { color: var(--primary); text-decoration: none; transition: color var(--dur) var(--ease), opacity var(--dur) var(--ease); }
  a:hover { color: var(--ink); }
  h1, h2, h3 { color: var(--ink); margin: 0; font-weight: 500; }
  h1 { font-size: 48px; line-height: 1.2; white-space: pre; }
  h2 { font-size: 38px; line-height: 1.2; }
  h3 { font-size: 24px; }
  p { margin: 0; }
  button { font: inherit; color: inherit; }
  :focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; border-radius: 6px; }
}

@layer layout {
  .container { width: 100%; max-width: var(--col-max); margin-inline: auto; padding-inline: var(--col-pad); }
  .skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--ink); color: #fff; padding: 12px 20px; font-size: 16px; }
  .skip-link:focus { left: 0; color: #fff; }
  .section__title { font-size: 38px; font-weight: 500; color: var(--ink); }
  /* clear the fixed nav (24px top + 48px tall) when an anchor is jumped to */
  #stack, #services, #contact { scroll-margin-top: 96px; }
}

/* ------------------------------------------------------------------ nav */
@layer nav {
  .nav {
    position: fixed; top: 24px; left: 50%; transform: translateX(-50%); z-index: 100;
    display: flex; align-items: center; height: 52px; padding: 5px;
    background: rgba(255,255,255,.82); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border: 1px solid rgba(0,0,0,.08); border-radius: 999px; box-shadow: var(--sh-nav);
    max-width: calc(100vw - 32px);
  }
  .nav__list { position: relative; display: flex; align-items: center; gap: 0; list-style: none; margin: 0; padding: 0; }
  .nav__pill {
    position: absolute; top: 5px; bottom: 5px; left: 5px; width: 0;
    border-radius: 96px; background: var(--accent); z-index: 0; opacity: 0;
    transition: left var(--dur-slow) var(--ease), width var(--dur-slow) var(--ease), opacity var(--dur) var(--ease);
  }
  .nav__pill.is-ready { opacity: 1; }
  .nav__link {
    position: relative; z-index: 1; display: flex; align-items: center; height: 42px; padding: 0 18px;
    font-size: 16px; font-weight: 500; color: var(--ink); white-space: nowrap; border-radius: 96px;
    transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
  }
  .nav__link:hover { color: var(--ink); background: var(--hairline); }
  .nav__link--active, .nav__link--active:hover { color: #fff; background: transparent; }
  .lang { display: flex; align-items: center; gap: 2px; padding-left: 6px; margin-left: 4px; border-left: 1px solid var(--hairline); }
  .lang__link { padding: 8px 9px; border-radius: 96px; font-size: 13px; font-weight: 700; color: var(--muted); letter-spacing: .04em; }
  .lang__link:hover { color: var(--ink); }
  .lang__link--current { color: var(--ink); background: var(--hairline); }
  .nav-toggle { display: none; }
  .nav-close { display: none; }
}

/* ------------------------------------------------------------------ hero */
@layer hero {
  .hero { position: relative; height: 170vh; width: 100%; }
  /* travel matches the hero's own height, so the pinned badge + CTA hold until
     About's top edge enters the viewport, then ride up with it */
  .hero__sticky { position: relative; width: 100%; height: 170vh; }
  .hero__logos {
    position: sticky; top: 0; height: 100vh; display: grid; align-content: center;
    z-index: 0; pointer-events: none; overflow: hidden;
  }
  .hero__pin {
    position: sticky; top: 0; height: 100vh; margin-top: -100vh;
    display: grid; place-items: center; z-index: 4; pointer-events: none;
    /* mirrors .hero__stage's padding so the ghost badge + CTA keep the same y
       as the real column they stand in for */
    padding: 104px 24px 24px;
  }
  /* the badge and the CTA are the two pinned elements; everything else in the
     ghost column is invisible and only there to hold their y positions */
  .hero__profile--ghost > *:not(.pill):not(.hero__badge) { opacity: 0; pointer-events: none; }
  .hero__profile--ghost .pill { pointer-events: auto; }
  .hero.has-pin .hero__stage .hero__profile > .pill,
  .hero.has-pin .hero__stage .hero__profile > .hero__badge { opacity: 0; pointer-events: none; }
  .hero__stage {
    position: absolute; top: 0; left: 0; right: 0; height: 100vh;
    display: grid; place-items: center; z-index: 1;
    /* reserve the fixed nav band (top 24 + height 48 + air). When the column is
       taller than the box, grid centring resolves to the start edge — this
       padding is what keeps that edge below the nav instead of under it. */
    padding: 104px 24px 24px;
  }
  /* Logo ring: the camera sits at the CENTRE of the sphere and we look at the
     far wall. The track is unshifted, so the ring surrounds the viewpoint; each
     slot is placed at rotateY(a) translateZ(R) then turned to face inward, so
     only the far half presents its front face and the near half (behind the
     camera) culls away. The wall is furthest at frame centre and swings toward
     the viewer at the sides — a concave curve. The mask fades the horizon. */
  .logo-marquee {
    position: relative; width: 100%; height: 288px; overflow: hidden;
    --ring-r: 1100px; --ring-tilt: 6deg;
    perspective: 900px; perspective-origin: 50% 50%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 27%, rgba(0,0,0,.5) 50%, #000 73%, #000 92%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 27%, rgba(0,0,0,.5) 50%, #000 73%, #000 92%, transparent 100%);
  }
  .hero__logos { min-height: 288px; }
  .logo-marquee__track {
    position: absolute; inset: 0;
    transform-style: preserve-3d;
    transform: rotateX(var(--ring-tilt)) rotateY(0deg);
    animation: ring-spin 64s linear infinite;
  }
  .logo-marquee__item {
    position: absolute; left: 50%; top: 50%;
    width: 270px; height: 200px; margin: -100px 0 0 -135px;
    display: grid; place-items: center;
    /* the trailing 180deg turns the slot to face the centre of the sphere */
    transform: rotateY(var(--a, 0deg)) translateZ(var(--ring-r)) rotateY(180deg);
    backface-visibility: hidden; -webkit-backface-visibility: hidden;
  }
  .logo-marquee__item img {
    max-height: 170px; max-width: 260px; width: auto; object-fit: contain;
    backface-visibility: hidden; -webkit-backface-visibility: hidden;
  }
  /* no-JS / reduced-motion fallback: without per-slot angles the ring collapses
     to one stack, so lay the slots out flat instead */
  .logo-marquee__track:not([data-ring]) { transform: none; animation: none; display: flex; align-items: center; justify-content: center; gap: 34px; }
  .logo-marquee__track:not([data-ring]) .logo-marquee__item { position: static; margin: 0; width: auto; transform: none; }

  .hero__shapes { position: absolute; top: 50%; left: 50%; width: 880px; height: 640px; margin: -320px 0 0 -440px; z-index: 1; pointer-events: none; transform: scale(1.3); }
  .shape { position: absolute; width: 200px; height: 200px; will-change: transform; }
  .shape img { width: 100%; height: auto; }
  .shape--orange-pyramid { left: 60px; top: 0; }
  .shape--purple-sphere  { left: 0; top: 50%; margin-top: -100px; z-index: 2; }
  .shape--blue-cylinder  { left: 70px; bottom: 0; }
  .shape--turquoise-star { right: 60px; top: 0; z-index: 2; }
  .shape--lime-blob      { right: 0; top: 50%; margin-top: -100px; }
  .shape--yellow-cube    { right: 70px; bottom: 0; z-index: 2; }

  .hero__profile {
    position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center;
    gap: 24px; text-decoration: none;
  }
  .hero__title { text-align: center; }
  .serif-italic { font-family: var(--font-serif); font-weight: 700; font-style: italic; }
  .rotator { position: relative; height: 32px; overflow: hidden; width: 100%; }
  .rotator__list { list-style: none; margin: 0; padding: 0; }
  .rotator__item {
    position: absolute; inset: 0; display: grid; place-items: center;
    font-size: 18px; font-weight: 400; color: var(--body); white-space: nowrap;
    opacity: 0; transform: translateY(32px);
    transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
  }
  .rotator__item--active { opacity: 1; transform: none; }

  .hero__photo-wrap { position: relative; width: 330px; height: 330px; cursor: pointer; perspective: 1200px; }
  .hero__photo-inner {
    position: absolute; inset: 0; transform-style: preserve-3d;
    transform: rotateY(15deg);
    transition: transform 620ms var(--ease);
  }
  .hero__photo-wrap.is-hovered .hero__photo-inner { transform: rotateY(195deg); }
  .hero__photo--back {
    background: var(--surface); transform: rotateY(180deg);
    display: grid; place-items: center; color: var(--ink);
    border: 1px solid var(--hairline); box-shadow: 0 12px 30px rgba(0,0,0,.08);
  }

  .hero__photo--back .hero__ring { position: absolute; inset: 0; width: 100%; height: 100%; }
  .hero__ring-arrow {
    display: grid; place-items: center; width: 148px; height: 148px;
    border-radius: 96px; border: 1px solid var(--ink); color: var(--ink);
    font-size: 26px; font-weight: 300;
  }
  .hero__circle { display: none; }
  .hero__ring { position: absolute; top: 50%; left: 50%; width: 380px; height: 380px; max-width: none; margin: -190px 0 0 -190px; pointer-events: none; }
  .hero__ring { max-width: none; pointer-events: none; }
  .hero__ring text { font-family: var(--font-sans); font-size: 4.6px; font-weight: 400; word-spacing: 2.6px; fill: var(--ink); }
  .hero__photo {
    position: absolute; inset: 0; overflow: hidden; border-radius: 40px;
    background: var(--primary); box-shadow: var(--sh-card);
    backface-visibility: hidden; -webkit-backface-visibility: hidden;
  }

  .hero__photo img, .hero__photo picture { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
  .hero__photo img { object-fit: cover; object-position: 50% 6%; }

  .hero__badge { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 14px; font-weight: 500; color: var(--body); }
  .hero__avatars { display: flex; }
  .hero__avatar {
    width: 34px; height: 34px; border-radius: 96px; object-fit: cover;
    border: 2px solid var(--surface); background: var(--surface);
  }
  .hero__avatar + .hero__avatar { margin-left: -10px; }

  .pill {
    display: inline-flex; align-items: center; gap: 12px; padding: 14px 32px; border-radius: 96px;
    background: var(--surface); box-shadow: var(--sh-pill); border: 1px solid var(--hairline);
    font-size: 24px; font-weight: 700; color: var(--ink); cursor: pointer;
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
  }
  .pill:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0,0,0,.14); color: var(--ink); }
  .pill--outline { background: var(--surface); border: 2px solid var(--primary-10); box-shadow: 0 6px 22px rgba(102,112,255,.14); }
  .pill--outline:hover { transform: none; }
  .pill__badge {
    display: grid; place-items: center; width: 0; height: 44px; border-radius: 96px;
    background: var(--ink); color: #fff; overflow: hidden; opacity: 0;
    transition: width 220ms var(--ease), opacity 220ms var(--ease), margin 220ms var(--ease);
  }
  .pill--outline:hover .pill__badge { width: 44px; opacity: 1; margin-right: -14px; }
  .pill__icon { width: 22px; height: 22px; }
  .hero__photo.hero__photo--back {
    background: transparent;
    border: 1px solid rgba(255,255,255,.55);
    display: grid; place-items: center;
  }
  .hero__glass {
    position: absolute; inset: 0; border-radius: inherit; z-index: 0;
    background: linear-gradient(150deg, rgba(255,255,255,.985), rgba(252,252,255,.955));
    backdrop-filter: blur(28px) saturate(160%);
    -webkit-backdrop-filter: blur(28px) saturate(160%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px rgba(102,112,255,.06);
  }
  .hero__photo--back .hero__ring,
  .hero__photo--back .hero__ring-arrow { z-index: 1; }

  /* belt and braces: swap the faces at the midpoint of the 620ms flip, so the
     rest state can never show the back even if backface culling is defeated. */
  .hero__photo--front { visibility: visible; transition: visibility 0s 310ms; }
  .hero__photo--back  { visibility: hidden;  transition: visibility 0s 310ms; }
  .hero__photo-wrap.is-hovered .hero__photo--front { visibility: hidden; }
  .hero__photo-wrap.is-hovered .hero__photo--back  { visibility: visible; }
  .hero__photo--back .hero__ring {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0;
    transform-origin: 50% 50%;
    animation: spin-ring 20s linear infinite;
  }
  .hero__photo--back .hero__ring text { fill: var(--ink); }

}

/* ------------------------------------------------------------------ about */
@layer about {
  .about { position: relative; height: 350vh; width: 100%; }
  .about__sticky { position: sticky; top: 0; height: 100vh; display: grid; align-content: center; overflow: hidden; padding-block: 96px; }
  .about__panel-wrap {
    position: relative; margin-inline: auto;
    width: min(840px, 100% - clamp(0px, 44vw, 494px));
  }
  .about__shape {
    position: absolute; top: 50%; pointer-events: none; z-index: 0;
    width: clamp(208px, 28.6vw, 390px); height: auto;
    --travel: clamp(70px, 9vw, 160px);
    --shape-off: calc(var(--travel) * (1 - var(--shape-p, 1)));
    scale: calc(0.5 + 0.5 * var(--shape-p, 1));
  }
  .about__shape--purple {
    right: calc(100% - clamp(64px, 8.2vw, 105px)); transform-origin: right center;
    transform: translate(calc(-1 * var(--shape-off)), -50%);
  }
  .about__shape--blue {
    left: calc(100% - clamp(64px, 8.2vw, 105px)); transform-origin: left center;
    transform: translate(var(--shape-off), -50%);
  }
  .about__stage { position: relative; z-index: 1; display: flex; flex-direction: column; }
  .about__title { text-align: center; margin-bottom: 40px; }
  .about__cards {
    position: relative; --step: 420px; height: min(300px, 34vh);
    transform: translate3d(0, calc(-1 * var(--i, 0) * var(--step)), 0);
    will-change: transform;
  }
  .about-card {
    position: absolute; left: 0; right: 0; top: calc(var(--n, 0) * var(--step));
    display: flex; flex-direction: column; align-items: center; gap: 32px;
    text-align: center; opacity: 0; z-index: calc(3 + var(--n, 0));
    background: var(--surface); border-radius: 28px; padding: 48px;
    box-shadow: 0 0 0 18px rgba(232,234,255,.55), 0 0 60px 24px rgba(226,229,255,.7), 0 10px 30px rgba(0,0,0,.04);
    pointer-events: none;
  }
  .about-card:nth-child(1) { --n: 0; }
  .about-card:nth-child(2) { --n: 1; }
  .about-card:nth-child(3) { --n: 2; }
  .about-card:first-child { opacity: 1; }
  .about-card p { font-size: 24px; line-height: 1.5; color: var(--body); max-width: 871px; margin: 0; }
  .about__cta {
    align-self: center; margin-top: 32px; overflow: hidden;
    opacity: 0; transform: translateY(12px); pointer-events: none;
    transition: opacity 400ms var(--ease), transform 400ms var(--ease), background var(--dur) var(--ease);
  }
  .about__cta.is-visible { opacity: 1; transform: none; pointer-events: auto; }
  .about__cta-badge {
    display: grid; place-items: center; width: 0; height: 44px; border-radius: 96px;
    background: var(--ink); color: #fff; overflow: hidden; opacity: 0; flex: none;
    transition: width 220ms var(--ease), opacity 220ms var(--ease), margin 220ms var(--ease);
  }
  .about__cta:hover .about__cta-badge { width: 44px; opacity: 1; margin-right: -14px; }
  @media (hover: none) {
    .about__cta-badge, .pill__badge { display: none; }
  }
}

/* ------------------------------------------------------------------ featured */
@layer featured {
  .featured { display: flex; flex-direction: column; align-items: center; gap: 96px; padding: 0 40px 200px; background: #fff; }
  .featured__rows { display: flex; flex-direction: column; align-items: center; gap: 48px; }
  .featured__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(24px, 4.5vw, 56px); }
  .featured__logo { height: 46px; width: auto; max-width: 136px; object-fit: contain; }
  .featured__row--secondary .featured__logo { height: 38px; }
  /* very wide wordmarks need a bigger cap to match the row's optical height */
  .featured__logo--wide { max-width: 210px; }
}

/* ------------------------------------------------------------------ testimonials */
@layer testimonials {
  .testimonials { position: relative; height: 340vh; width: 100%; }
  .testimonials__sticky {
    position: sticky; top: 0; height: 100vh; display: grid; align-content: center;
    overflow: hidden; padding-block: 96px;
  }
  .tst__shape {
    position: absolute; pointer-events: none; z-index: 0; height: auto;
    --w: clamp(180px, 24vw, 330px);
    width: var(--w);
    /* pushed 20% further out from the centre line than the halfway point */
    --inset: calc(20% - var(--w) * 0.2);
    --travel: clamp(34px, 4.4vw, 78px);
    --shape-off: calc(var(--travel) * (1 - var(--shape-p, 1)));
    scale: calc(0.5 + 0.5 * var(--shape-p, 1));
  }
  .tst__shape--cyl {
    left: var(--inset); top: clamp(-28px, 1.4vh, 28px); transform-origin: left top;
    transform: translate(calc(-1 * var(--shape-off)), calc(-1 * var(--shape-off)));
  }
  .tst__shape--sphere {
    right: var(--inset); bottom: clamp(-28px, 1.4vh, 28px); transform-origin: right bottom;
    transform: translate(var(--shape-off), var(--shape-off));
  }
  .testimonials__stage { position: relative; z-index: 1; display: flex; flex-direction: column; }
  .testimonials__title { text-align: center; margin-bottom: 40px; }
  .testimonials__cards {
    position: relative; --step: 520px; height: min(440px, 56vh);
    transform: translate3d(0, calc(-1 * var(--i, 0) * var(--step)), 0);
    will-change: transform;
  }
  .testimonial {
    position: absolute; left: 0; right: 0; top: calc(var(--n, 0) * var(--step));
    display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center;
    margin: 0; padding: 0 24px; opacity: 0; z-index: calc(3 + var(--n, 0));
    background: transparent; pointer-events: none;
  }
  .testimonial:nth-child(1) { --n: 0; }
  .testimonial:nth-child(2) { --n: 1; }
  .testimonial:nth-child(3) { --n: 2; }
  .testimonial:first-child { opacity: 1; }
  .testimonial__photo { width: 96px; height: 96px; border-radius: 96px; object-fit: cover; filter: grayscale(1); }
  .testimonial__meta { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 288px; }
  .testimonial__nameline { display: flex; align-items: center; justify-content: center; gap: 8px; }
  .testimonial__name { font-size: 24px; font-weight: 500; color: var(--ink); }
  .testimonial__role, .testimonial__company { font-size: 14px; line-height: 1.4em; font-weight: 500; color: var(--body); }
  .testimonial__quote { font-size: 18px; line-height: 1.6; color: var(--body); max-width: 720px; margin: 0; }
  .testimonial__linkedin { pointer-events: auto; }
  .testimonial__linkedin img { width: 24px; height: 24px; }
}

/* ------------------------------------------------------------------ stack */
@layer stack {
  .stack { position: relative; display: flex; flex-direction: column; align-items: center; gap: 48px; padding: 120px 0 96px; overflow: hidden; }
  .stack__cube { position: absolute; inset: 0; display: flex; justify-content: center; pointer-events: none; z-index: 0; }
  .stack__cube img { position: sticky; top: 180px; width: 936px; height: 936px; opacity: .22; }
  .stack__grid { position: relative; z-index: 1; display: grid; gap: 24px; grid-template-columns: repeat(3, minmax(200px,1fr)); max-width: 1200px; width: 100%; padding-inline: 24px; }
  /* outer 48 = inner 24 + 24 padding, so the halo ring stays a constant width
     through the corners instead of bulging */
  .stack-card { perspective: 1200px; background: var(--primary-10); border-radius: 48px; padding: 24px; cursor: pointer; border: 0; width: 100%; font: inherit; }
  .stack-card__inner { display: block; position: relative; transform-style: preserve-3d; transition: transform var(--dur-slow) var(--ease); min-height: 280px; }
  .stack-card.is-flipped .stack-card__inner { transform: rotateX(180deg); }
  .stack-card__face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 24px; padding: 24px; display: flex; flex-direction: column; }
  .stack-card__face--front { background: var(--surface); align-items: center; justify-content: center; gap: 16px; text-align: center; }
  .stack-card__face { opacity: 1; transition: opacity 1ms linear 300ms; }
  .stack-card__face--back { opacity: 0; }
  .stack-card.is-flipped .stack-card__face--front { opacity: 0; }
  .stack-card.is-flipped .stack-card__face--back { opacity: 1; }
  .stack-card__face--back {
    transform: perspective(500px) rotateX(180deg);
    backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
    background: var(--primary-05); align-items: center; justify-content: center; overflow: auto;
  }
  .stack-card__logo { max-height: 96px; max-width: 162px; width: auto; object-fit: contain; }
  .stack-card__logo--text { display: grid; place-items: center; height: 72px; padding: 0 20px; border-radius: 16px; background: var(--hairline); color: var(--muted); font-size: 15px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
  .stack-card__name { font-size: 20px; font-weight: 700; color: var(--ink); }
  .stack-tip {
    position: fixed; top: 0; left: 0; z-index: 90; pointer-events: none;
    padding: 6px 14px; border-radius: 96px; background: var(--ink); color: #fff;
    font-size: 13px; font-weight: 600; white-space: nowrap;
    opacity: 0; transform: translate(-50%, -160%) scale(.9);
    transition: opacity 140ms var(--ease), transform 140ms var(--ease);
  }
  .stack-tip.is-visible { opacity: 1; transform: translate(-50%, -160%) scale(1); }
  .stack-card__text { font-size: 15px; line-height: 1.55; color: var(--body); text-align: center; }
}

/* ------------------------------------------------------------------ services */
@layer services {
  .services { position: relative; width: 100%; }
  .services__head { display: flex; justify-content: center; padding: 96px 24px 0; }
  .services__inner { position: relative; display: grid; grid-template-columns: 30% 70%; max-width: 1200px; margin-inline: auto; padding-inline: 24px; }
  .services__rail { position: sticky; top: 0; height: 100vh; display: grid; align-content: start; padding: 24vh 24px 0 0; }
  .services__rail-window { position: relative; min-height: 220px; }
  .service-head {
    position: absolute; inset: 0; display: flex; flex-direction: column; gap: 0;
    opacity: 0; transform: translateY(32px);
    transition: opacity 400ms var(--ease), transform 400ms var(--ease);
  }
  .service-head.is-active { opacity: 1; transform: none; }
  /* line-height .70 seats the cap-top at y=0; height then crops the lower quarter of the digits */
  .service-head__num { display: block; height: 107px; overflow: hidden; font-size: 200px; font-weight: 800; line-height: .70; color: var(--hairline); }
  .service-head__title { font-size: 24px; font-weight: 500; color: var(--ink); }

  /* top padding matches the rail's 24vh anchor, so card 01's body lines up with
     the number/title the moment the section starts */
  .services__list { display: flex; flex-direction: column; gap: 140px; padding: 24vh 0 42vh; }
  .service-card { display: flex; flex-direction: column; align-items: center; gap: 39px; }
  .service-card__body { width: 100%; }
  .service-card__shape { width: 657px; height: 657px; margin-top: 84px; }
  .service-card .service-card__title { display: none; }
  .service-card__title { font-size: 24px; font-weight: 500; }
  .service-card__body { font-size: 24px; color: var(--body); }
}

/* ------------------------------------------------------------------ footer */
@layer footer {
  .footer { position: relative; overflow: hidden; }
  .footer__panel { background: var(--surface-alt); border-radius: 24px 24px 0 0; padding: 120px 0 96px; }
  .footer__columns { display: flex; gap: 24px; max-width: 1200px; margin-inline: auto; padding-inline: 24px; }
  .footer-col { flex: 1; display: flex; flex-direction: column; gap: 24px; }
  .footer-col__head { font-size: 24px; font-weight: 700; color: var(--ink); }
  .footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
  .footer-col__link { font-size: 18px; font-weight: 400; color: var(--body); }
  .footer-col__link:hover { color: var(--ink); }
  .footer__legal { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; max-width: 1200px; margin-inline: auto; padding: 72px 24px 0; font-size: 16px; color: var(--body); }
  .footer__legal p:first-child { margin-bottom: 14px; }
  .footer__sphere { position: absolute; right: 34%; top: 130px; width: 26px; height: 26px; pointer-events: none; }
  .footer__banner { background: var(--surface-alt); height: 8.2vw; overflow: hidden; display: flex; justify-content: center; align-items: flex-start; }
  .footer__wordmark { font-size: 24.8vw; font-weight: 900; line-height: .78; color: var(--ink); letter-spacing: -.02em; user-select: none; white-space: nowrap; }
}

/* ------------------------------------------------------------------ inner pages */
@layer pages {
  .page-top { max-width: 1200px; margin-inline: auto; padding: 32px 24px 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
  .page-top .lang { border-left: 0; margin-left: 0; padding: 4px 6px; background: var(--surface); box-shadow: var(--sh-pill); border-radius: 96px; }
  .back-link { display: inline-flex; align-items: center; gap: 10px; padding: 12px 24px; border-radius: 96px; background: var(--surface); box-shadow: var(--sh-pill); font-size: 16px; font-weight: 700; color: var(--ink); }
  .back-link:hover { color: var(--ink); transform: translateY(-2px); }
  .page-section { max-width: 1200px; margin-inline: auto; padding: 56px 24px 96px; }
  .contact { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 64px; align-items: center; }
  .contact__art { position: relative; justify-self: center; width: min(260px, 62%); aspect-ratio: 1; }
  .contact__card { position: absolute; inset: 0; z-index: 1; overflow: hidden; background: var(--primary); border-radius: 16%; box-shadow: var(--sh-card); }
  .contact__photo { position: absolute; left: -7%; bottom: 0; width: 114%; height: 114%; object-fit: contain; object-position: bottom; }
  .contact__shape { position: absolute; z-index: 2; pointer-events: none; }
  .contact__shape--cylinder { left: -15%; top: -16%; width: 36%; }
  .contact__shape--sphere   { left: 34%;  top: -30%; width: 30%; }
  .contact__shape--pyramid  { left: 85%;  top: -13%; width: 28%; z-index: 0; }
  .contact__shape--cube     { left: -14%; top: 87%;  width: 33%; }
  .contact__shape--blob     { left: 36%;  top: 101%; width: 27%; }
  .contact__shape--star     { left: 84%;  top: 86%;  width: 29%; }
  .contact__panel { max-width: 420px; }
  .contact__title { display: flex; align-items: center; gap: 16px; white-space: normal; font-size: 40px; font-weight: 700; margin-bottom: 24px; }
  .contact__avatar { display: none; flex: none; width: 56px; height: 56px; border-radius: 14px; background: var(--primary); overflow: hidden; }
  .contact__avatar img { width: 100%; height: 100%; object-fit: contain; object-position: bottom center; transform: scale(1.02); transform-origin: bottom center; }
  .contact-form { display: flex; flex-direction: column; gap: 20px; }
  .field { display: flex; flex-direction: column; gap: 8px; }
  .field__label { font-size: 16px; font-weight: 700; color: var(--ink); }
  .field__control { width: 100%; background: var(--hairline); border: 0; border-radius: 10px; padding: 16px 18px; font-family: inherit; font-size: 18px; color: var(--ink); }
  .field__control::placeholder { color: var(--muted-light); }
  .field__control:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
  .field__control[aria-invalid="true"] { box-shadow: inset 0 0 0 2px #b3261e; }
  .field__req { color: var(--primary); margin-left: 3px; }
  textarea.field__control { min-height: 160px; resize: vertical; }
  .consent { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; color: var(--body); }
  .consent input { margin-top: 4px; width: 20px; height: 20px; accent-color: var(--primary); flex: none; }
  .consent input[aria-invalid="true"] { outline: 2px solid #b3261e; outline-offset: 2px; border-radius: 4px; }
  .btn--submit { width: 100%; border: 0; border-radius: 10px; background: var(--primary); color: #fff; font-size: 18px; font-weight: 700; padding: 18px 24px; cursor: pointer; transition: background var(--dur) var(--ease); }
  .btn--submit:hover { background: #545ff2; }
  .btn--submit:disabled { opacity: .6; cursor: default; }
  .form-status { font-size: 16px; min-height: 1.2em; }
  .form-status--ok { color: #0a7a55; }
  .form-status--error { color: #b3261e; }
  .form-noscript { font-size: 16px; color: var(--body); }
  .legal { max-width: 1000px; margin-inline: auto; }
  .legal__title { white-space: normal; font-size: clamp(34px, 3.8vw, 54px); font-weight: 700; margin-bottom: 20px; }
  .legal__date { font-size: 20px; color: var(--body); }
  .legal__section { margin-top: 56px; }
  .legal__heading { display: grid; grid-template-columns: 44px 1fr; align-items: baseline; font-size: 19px; font-weight: 700; color: var(--ink); margin-bottom: 22px; }
  .legal p { font-size: 19px; line-height: 1.5; color: var(--body); margin-bottom: 22px; }
  .legal__sub { font-size: 19px; font-weight: 700; color: var(--ink); margin: 30px 0 14px; }
  .legal__term strong { color: var(--ink); }
  .legal__list { list-style: none; margin: 0 0 22px; padding: 0 0 0 8px; display: flex; flex-direction: column; gap: 10px; }
  .legal__list li { font-size: 19px; line-height: 1.5; color: var(--body); }
  .legal strong { color: var(--ink); }
  .legal a { text-decoration: underline; word-break: break-word; }

  /* 404 */
  .nf { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 146px 24px 124px; }
  .nf__art { --nf-h: clamp(104px, 23vw, 250px); display: flex; align-items: center; justify-content: center; gap: clamp(4px, 1.2vw, 14px); margin: 0; line-height: 0; }
  .nf__digit { height: var(--nf-h); width: auto; }
  .nf__digit--four { height: calc(var(--nf-h) * .93); }
  .nf__text { margin-top: 46px; font-size: 18px; color: var(--body); }
  .nf__cta { margin-top: 26px; padding: 18px 40px; font-size: 18px; font-weight: 700; }

  .nf__heart { width: auto; height: clamp(96px, 13vw, 132px); }
  .nf__head { white-space: normal; font-weight: 700; font-size: clamp(28px, 4.2vw, 40px); margin-top: 50px; }
  .nf__body { max-width: 830px; margin-top: 28px; font-size: 18px; color: var(--body); }
  .nf__head + .nf__body + .nf__cta { margin-top: 40px; }

  @media (max-width: 700px) {
    .nf { padding: 88px 24px 88px; }
    .nf__text { margin-top: 32px; font-size: 17px; }
    .nf__head { margin-top: 36px; }
    .nf__body { margin-top: 20px; font-size: 17px; }
  }
}

/* ------------------------------------------------------------------ motion */
@layer motion {
  @keyframes ring-spin {
  from { transform: rotateX(var(--ring-tilt)) rotateY(0deg); }
  to   { transform: rotateX(var(--ring-tilt)) rotateY(360deg); }
}
@keyframes marquee-x { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
  @keyframes float-y {
    0%,100% { transform: translate3d(0,0,0) rotateY(0deg); }
    50%     { transform: translate3d(0,-10px,0) rotateY(14deg); }
  }
  @keyframes spin-ring { to { transform: rotate(360deg); } }
  @keyframes nf-bob { 0%, 100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(0,-16px,0); } }
  .contact__shape { animation: float-y 7s ease-in-out infinite; }
  .contact__shape--sphere { animation-duration: 9s; animation-delay: -2s; }
  .contact__shape--pyramid { animation-duration: 8s; animation-delay: -4s; }
  .contact__shape--cube { animation-duration: 10s; animation-delay: -1s; }
  .contact__shape--blob { animation-duration: 8.5s; animation-delay: -5s; }
  .contact__shape--star { animation-duration: 9.5s; animation-delay: -3s; }
  .nf__digit, .nf__heart { animation: nf-bob 5.6s ease-in-out infinite; }
  .nf__heart { animation-duration: 6.4s; }
  .nf__digit:nth-of-type(2) { animation-duration: 6.8s; animation-delay: -2.6s; }
  .nf__digit:nth-of-type(3) { animation-duration: 6.2s; animation-delay: -4.4s; }
  .shape img { animation: float-y 7s ease-in-out infinite; }
  .shape:nth-child(2n) img { animation-duration: 9s; animation-delay: -2s; }
  .shape:nth-child(3n) img { animation-duration: 11s; animation-delay: -4s; }
  .shape { transform: translate3d(0, var(--py, 0px), 0); }
  .reveal { opacity: 0; transform: translateY(28px); transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); }
  .reveal.is-revealed { opacity: 1; transform: none; }
}

@layer utilities {
  .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
}

/* ------------------------------------------------------------------ responsive */
@media (max-height: 720px) and (min-width: 810px) {
  .hero__profile { gap: 16px; }
  .hero__shapes { transform: scale(1.066); }
}
@media (max-width: 1439px) {
  .stack__grid { grid-template-columns: repeat(2, minmax(200px,1fr)); max-width: 858px; }
  .stack__cube img { width: 780px; height: 780px; }
  .hero__shapes { transform: scale(1.118); }

}

@media (max-width: 1279px) {
  .featured { padding: 0 40px 80px; }
  .services__inner { grid-template-columns: 1fr; }
  .services__rail { display: none; }
  .services__list { gap: 56px; padding-block: 48px; }
  .service-card { align-items: flex-start; gap: 17px; }
  .service-card .service-card__title { display: flex; flex-direction: column; gap: 4px; }
  .service-card__num { display: block; height: 75px; overflow: hidden; font-size: 140px; font-weight: 800; line-height: .70; color: var(--hairline); }
  .service-card__shape { align-self: center; width: min(790px, 100%); height: auto; aspect-ratio: 1; }
  .service-card { position: relative; }
  .service-card__watermark { display: block; position: absolute; top: 0; left: -8px; font-size: 140px; font-weight: 800; line-height: .73; color: var(--hairline); z-index: 0; pointer-events: none; }
  .service-card > div, .service-card__shape { position: relative; z-index: 1; }
  .hero__shapes { transform: scale(.91); }
}

@media (max-width: 809px) {
  h1 { font-size: 36px; }
  h2, .section__title { font-size: 28px; }
  .about-card p, .service-card__body { font-size: 18px; }
  .pill { font-size: 18px; padding: 12px 24px; }

  .nav { top: 12px; padding: 5px; }
  .nav-toggle { display: grid; place-items: center; width: 42px; height: 42px; border: 0; border-radius: 96px; background: transparent; cursor: pointer; }
  .nav-toggle span { display: block; width: 20px; height: 2px; background: var(--ink); box-shadow: 0 -6px 0 var(--ink), 0 6px 0 var(--ink); }
  /* The closed pill centres itself with a transform and carries a backdrop
     filter. Both make .nav the containing block for position:fixed children,
     which is why the open sheet collapsed to the pill's width. While the menu
     is open we drop both, so the sheet measures against the viewport. */
  .nav.is-menu-open {
    left: 12px; right: 12px; transform: none; max-width: none; height: auto;
    padding: 0; background: transparent; border-color: transparent; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .nav.is-menu-open::before {
    content: ""; position: fixed; inset: 0; z-index: -1;
    background: rgba(20,20,20,.28);
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  }
  .nav.is-menu-open .nav-toggle { visibility: hidden; }
  .nav.is-menu-open .lang { display: none; }
  body.has-menu-open { overflow: hidden; }
  .nav__list {
    position: fixed; top: 12px; left: 12px; right: 12px;
    flex-direction: column; align-items: stretch; gap: 12px;
    max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain;
    background: var(--surface); border-radius: 24px; box-shadow: 0 20px 60px rgba(0,0,0,.12);
    padding: 72px 20px 28px; display: none;
  }
  .nav__list.is-open { display: flex; }
  /* the close button is absolutely placed, so its <li> must not hold a flex slot */
  .nav__list > li:first-child { display: contents; }
  .nav__pill { display: none; }
  .nav__link { justify-content: center; height: 56px; font-size: 20px; border-radius: 96px; }
  .nav__link--active, .nav__link--active:hover { background: var(--accent); color: #fff; }
  .nav-close { position: absolute; top: 16px; right: 16px; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 96px; background: var(--hairline); cursor: pointer; color: var(--ink); font-size: 26px; line-height: 1; }

  /* Mobile drops the pinned CTA and the sticky full-height logo wall. The hero
     column sizes to its content and the client logo ring takes the space left
     over above the fold instead of sitting behind the portrait. */
  .hero { height: auto; min-height: 100vh; min-height: 100svh; }
  .hero__sticky { height: auto; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
  .hero__pin { display: none; }
  .hero.has-pin .hero__stage .hero__profile > .pill,
  .hero.has-pin .hero__stage .hero__profile > .hero__badge { opacity: 1; pointer-events: auto; }
  .hero__stage { position: relative; height: auto; order: 1; flex: 1 1 auto; padding: 92px 0 8px; }
  .hero__logos { position: static; order: 2; height: auto; flex: 0 0 auto; padding-bottom: 16px; }
  .hero__shapes { width: 100%; height: 100%; margin: 0; top: 0; left: 0; transform: none; }
  .shape { width: 182px; height: 182px; }
  .shape--orange-pyramid { left: auto; right: -13px; top: 6%; width: 198px; height: 198px; }
  .shape--purple-sphere { left: 50%; margin-left: -91px; top: 2%; margin-top: 0; }
  .shape--blue-cylinder { left: -16px; top: 22%; bottom: auto; z-index: 2; }
  .shape--turquoise-star { right: -11px; bottom: 6%; top: auto; }
  .shape--lime-blob { left: 50%; margin-left: -91px; right: auto; top: auto; bottom: 2%; margin-top: 0; }
  .shape--yellow-cube { left: -14px; right: auto; bottom: 6%; }
  .hero__profile { gap: 20px; padding-inline: 24px; }
  /* the flip's back face is the scroll-down ring — scale it with the card so it
     reads as a ring of type rather than a blank panel behind the arrow */
  .hero__photo-wrap { width: min(330px, 74vw); height: min(330px, 74vw); }
  .hero__ring-arrow { width: 45%; height: 45%; }
  .hero__ring text { font-size: 4.9px; }

  .featured { gap: 48px; padding: 0 20px 100px; }
  .featured__row { gap: 32px; }
  .featured__logo { height: 34px; }
  .testimonials { gap: 48px; padding: 48px 0; }
  .stack { padding: 64px 0; gap: 32px; }
  .stack__grid { grid-template-columns: 1fr; max-width: 520px; }
  .stack__cube { display: none; }
  .services__head { padding: 48px 24px 0; }
  .about__panel-wrap { width: 100%; }
  .about-card { padding: 32px 24px; }
  .about__shape { width: 156px; }
  .tst__shape { --w: 120px; }
  .tst__shape--cyl { left: -30px; top: -10px; }
  .tst__shape--sphere { right: -30px; bottom: -10px; }
  .testimonials__cards { --step: 620px; height: min(560px, 68vh); }
  .about__shape--purple { right: auto; left: -44px; top: 0; transform-origin: right bottom; transform: translateX(calc(-1 * var(--shape-off))); }
  .about__shape--blue { left: auto; right: -44px; top: auto; bottom: 0; transform-origin: left top; transform: translateX(var(--shape-off)); }
  .contact { grid-template-columns: 1fr; gap: 24px; }
  .contact__art { display: none; }
  .contact__avatar { display: block; }
  .contact__panel { max-width: none; }
  .contact__title { font-size: 28px; gap: 14px; margin-bottom: 20px; }
  .footer__columns { flex-direction: column; gap: 48px; }
  .footer__banner { height: 10.4vw; }
  .footer__wordmark { font-size: 26vw; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  .hero { height: auto; }
  .hero__logos { position: static; height: auto; }
  .hero__pin { display: none; }
  .hero__stage { position: static; height: auto; padding: 140px 0 80px; }
  .about { height: auto; }
  .about__sticky { position: static; height: auto; padding: 80px 0; }
  .testimonials { height: auto; }
  .testimonials__sticky { position: static; height: auto; padding: 80px 0; }
  .testimonials__cards { transform: none; height: auto; display: flex; flex-direction: column; gap: 48px; }
  .testimonial { position: static; opacity: 1; }
  .about__cards { height: auto; transform: none; display: flex; flex-direction: column; gap: 40px; }
  .about-card { position: static; top: auto; opacity: 1; pointer-events: auto; }
  .services__rail { display: none; }
  .services__inner { grid-template-columns: 1fr; }
  .services__list { gap: 80px; padding-block: 48px; }
  .service-card .service-card__title { display: flex; flex-direction: column; }
  .rotator { height: auto; }
  .rotator__item { position: static; opacity: 1; transform: none; }
  .rotator__item + .rotator__item { display: none; }
  .shape { display: none; }
  .hero__circle { display: none; }
  .hero__photo { transform: none !important; }
}

/* Short desktop viewports: recover column height from the gaps only — the H1
   stays 48px and the portrait 330px at every height, per the brief. */
@media (min-width: 810px) and (max-height: 820px) {
  .hero__profile { gap: 12px; }
}

/* Ring scales with the frame so the visible arc always spans it */
@media (max-width: 1279px) {
  .logo-marquee { --ring-r: 880px; perspective: 800px; height: 240px; }
  .logo-marquee__item { width: 210px; margin-left: -105px; }
  .logo-marquee__item img { max-height: 132px; max-width: 200px; }
  .hero__logos { min-height: 240px; }
}
@media (max-width: 809px) {
  .logo-marquee { --ring-r: 560px; --ring-tilt: 4deg; perspective: 620px; height: 180px; }
  .logo-marquee__item { width: 140px; height: 150px; margin: -75px 0 0 -70px; }
  .logo-marquee__item img { max-height: 96px; max-width: 130px; }
  .hero__logos { min-height: 180px; }
}


/* ------------------------------------------------------- language notice */
@layer utilities {
  .lang-note {
    position: fixed; left: 20px; bottom: 20px; z-index: 120;
    display: flex; align-items: center; gap: 14px; max-width: calc(100vw - 40px);
    padding: 13px 14px 13px 22px; background: var(--surface);
    border: 1px solid var(--hairline); border-radius: 96px; box-shadow: var(--sh-pill);
    font-size: 15px; line-height: 1.35; color: var(--body);
    opacity: 0; transform: translateY(10px);
    transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
  }
  .lang-note.is-in { opacity: 1; transform: none; }
  .lang-note__link { flex: none; font-weight: 700; color: var(--primary); text-decoration: none; }
  .lang-note__link:hover { text-decoration: underline; }
  .lang-note__close {
    display: grid; place-items: center; flex: none; width: 34px; height: 34px;
    border: 0; border-radius: 96px; background: var(--hairline);
    color: var(--muted); font-size: 19px; line-height: 1; cursor: pointer;
    transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
  }
  .lang-note__close:hover { color: var(--ink); background: #E8E8E8; }

  @media (max-width: 809px) {
    .lang-note {
      left: 12px; right: 12px; bottom: 12px; max-width: none;
      gap: 8px 12px; flex-wrap: wrap; padding: 16px; border-radius: 20px; font-size: 14px;
    }
    .lang-note__text { flex: 1 1 100%; }
    .lang-note__link { margin-right: auto; }
  }
  @media (prefers-reduced-motion: reduce) {
    .lang-note { opacity: 1; transform: none; }
  }
}