html { background-color: var(--surface); color-scheme: light only; }
body { background-color: var(--surface); }

@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: var(--surface); padding: 12px 20px; font-size: 16px; }
  .skip-link:focus { left: 0; color: var(--surface); }
  .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: var(--surface); 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, var(--ink) 8%, var(--ink) 27%, rgba(0,0,0,.5) 50%, var(--ink) 73%, var(--ink) 92%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, var(--ink) 8%, var(--ink) 27%, rgba(0,0,0,.5) 50%, var(--ink) 73%, var(--ink) 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: var(--surface); 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: var(--surface); 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: var(--surface); }
  .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); }
  /* the quote precedes the caption in the DOM so <figcaption> stays the figure's
     last child (HTML requires first-or-last); order restores the visual stack */
  .testimonial__quote { order: 1; 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; }

  /* Carousel controls. The track is scroll-driven, so these move the PAGE to the scroll
     offset at which the wanted quote settles — which means they do nothing at all unless
     testimonials-scroll.js is running. Hidden until that module marks them .is-ready, so
     they are absent with JavaScript off and under reduced motion (where the three quotes
     are simply stacked and there is nothing left to page through). */
  .tst-nav { display: none; align-items: center; justify-content: center; gap: 12px; margin-top: 28px; }
  .tst-nav.is-ready { display: flex; }
  .tst-nav__arrow {
    display: grid; place-items: center; width: 44px; height: 44px; flex: none;
    border: 1px solid var(--hairline); border-radius: 96px; background: var(--surface);
    box-shadow: var(--sh-pill); color: var(--ink); cursor: pointer;
    transition: background var(--dur) var(--ease), opacity var(--dur) var(--ease);
  }
  .tst-nav__arrow:hover { background: var(--hairline); }
  .tst-nav__arrow[aria-disabled="true"] { opacity: .35; cursor: default; }
  .tst-nav__dots { display: flex; align-items: center; gap: 4px; }
  /* 24x24 hit area around a 10px dot, so the target stays large enough to hit */
  .tst-nav__dot { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; flex: none; border: 0; background: none; cursor: pointer; }
  .tst-nav__dot::before {
    content: ""; width: 10px; height: 10px; border-radius: 96px; background: var(--muted-light);
    transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
  }
  .tst-nav__dot[aria-current="true"]::before { background: var(--accent); transform: scale(1.4); }
}

/* ------------------------------------------------------------------ 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: var(--surface);
    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__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: var(--surface); 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; }
  /* The no-JS failure surface (#62). :target is the whole mechanism: worker/index.js answers a
     native form post with a 303 to /contact/#form-error, the browser selects the element with
     that id, and this rule reveals it — no script involved, which is the point, because on that
     path none runs. It is a SECOND surface, not a replacement for .form-status above: that one is
     written by contact-form.js and is what a visitor WITH JavaScript sees. Merging them would put
     the no-JS message behind JavaScript. Keep the default display:none — dropping it leaves the
     error permanently on screen, which is how a check proves this rule is load-bearing. */
  .form-error { display: none; font-size: 16px; color: #b3261e; }
  .form-error:target { display: block; }
  .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; }
  .service-card__shape img { animation: float-y 8s ease-in-out infinite; }
  .service-card:nth-child(2n) .service-card__shape img { animation-duration: 9.5s; animation-delay: -2s; }
  .service-card:nth-child(3n) .service-card__shape img { animation-duration: 11s; animation-delay: -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; }
}

/* #36 follow-up (review finding): parallax.js sets --py = -scrollY * data-rate on every .shape
   with no media-query gate (active at every width whenever prefers-reduced-motion is off), so a
   shape drifts upward without bound as the page scrolls. A fixed rest offset alone cannot
   guarantee no overlap "at any scrollY" -- the drift grows forever, so any finite rest buffer is
   eventually consumed. Clamp the upward excursion (in the SAME motion layer as the base .shape
   rule, since @layer order beats specificity: an override inside @layer hero would silently lose
   to @layer motion's .shape rule above) for the four shapes whose rest position sits BELOW the
   type they could drift into: blue-cylinder/purple-sphere close on the rotator, yellow-cube/
   lime-blob close on the badge. orange-pyramid/turquoise-star are untouched -- already above the
   H1, drifting further up only increases their clearance, so they have nothing to clamp against.
   Caps are the measured rest buffer (glyph-Range vs the shape's element box, worst case across
   the three widths) minus a >=15px safety margin: blue-cylinder 34.1px -> 14px cap, purple-sphere
   144.2px -> 90px cap, yellow-cube 36.5px -> 16px cap, lime-blob 36.6px -> 16px cap. Verified by a
   scroll sweep (scrollY 0-1200px in 5px steps) at 375/390/430px: zero overlaps with these caps,
   versus 13 distinct overlap windows uncapped (PR body has the full before/after table). */
@media (max-width: 809px) {
  @layer motion {
    .hero__shapes .shape--blue-cylinder { transform: translate3d(0, max(var(--py, 0px), -14px), 0); }
    .hero__shapes .shape--purple-sphere { transform: translate3d(0, max(var(--py, 0px), -90px), 0); }
    .hero__shapes .shape--yellow-cube    { transform: translate3d(0, max(var(--py, 0px), -16px), 0); }
    .hero__shapes .shape--lime-blob      { transform: translate3d(0, max(var(--py, 0px), -16px), 0); }
  }
}

@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; }
  /* the art renders at its 240px attribute width, so it must be centred inside the box */
  .service-card__shape img { margin-inline: auto; }
  .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; white-space: normal; }
  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: var(--surface); }
  .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; }
  /* Re-composition (#36): shapes shrink and pin to corners/edges. Offsets are derived from a
     live Playwright measurement (Range-rect method, per #51) at the real 375x812/390x844/430x932
     viewports, on top of #48/#51's h1 { white-space: normal } (the PL H1 wraps to 2 lines at
     375/390, stays 1 line at 430 — .hero__stage is a stretch/centered flex+grid item, so the
     worst-case band per direction is taken across all three widths, not derived algebraically).
     Measured worst case: H1 top >= 92px from the stage top; rotator (box) bottom <= 231.375px;
     badge top <= 161.8125px and badge bottom >= 100px above the stage's bottom edge. Top/bottom
     -pinned shapes bleed part of their box off the page edge by design, per the agreed direction. */
  .shape { width: 128px; height: 128px; }
  .shape--orange-pyramid { left: auto; right: -28px; top: -64px; }
  .shape--turquoise-star { left: -28px; right: auto; top: -64px; }
  .shape--blue-cylinder { left: -30px; top: 260px; bottom: auto; z-index: 2; }
  .shape--purple-sphere { left: auto; right: -30px; top: auto; bottom: 185px; margin-top: 0; }
  .shape--yellow-cube { left: -26px; right: auto; bottom: -64px; }
  .shape--lime-blob { left: auto; right: -30px; top: auto; bottom: -64px; margin-top: 0; }
  .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; transition: none; }
  .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; }
}

/* 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; }
  }
}