/* width/height attributes on <img> are presentational hints that set BOTH
   dimensions. Any rule setting only `width` would otherwise let the height
   attribute through and squash the image — which is exactly what happened to
   the footer logo (rendered 133x96 instead of 133x58). Class-level rules that
   genuinely need a fixed height, like `.project-card img { height: 100% }`,
   out-specify this and are unaffected. */
img {
  height: auto;
}

/* Registering the fluid units makes them *compute* to real lengths. That is
   what lets hero-section.js read --u instead of carrying a second copy of the
   formula: an unregistered custom property comes back from getComputedStyle as
   its unevaluated token string ("min(100vw / 1512, ...)"), not a length.
   The initial-value is the neutral 1px, which is also the fallback the JS uses
   if a browser does not support @property. */
@property --u {
  syntax: "<length>";
  inherits: true;
  initial-value: 1px;
}

@property --uc {
  syntax: "<length>";
  inherits: true;
  initial-value: 1px;
}

@property --m {
  syntax: "<length>";
  inherits: true;
  initial-value: 1px;
}

/* The hero composition unit. Registered for the same reason as --u: the orbit
   trigonometry in hero-section.js reads the computed value, and an unregistered
   property computes to its token string rather than a length. */
@property --uh {
  syntax: "<length>";
  inherits: true;
  initial-value: 1px;
}

/* Header chrome unit. Registered for consistency; only CSS reads it. */
@property --un {
  syntax: "<length>";
  inherits: true;
  initial-value: 1px;
}

      :root {
        --bg: #07100d;
        --bg-green: #0b1712;
        --ivory: #edd0bd;
        --ivory-soft: rgba(237, 208, 189, 0.74);
        --glass: rgba(42, 31, 25, 0.48);
        --glass-border: rgba(255, 245, 238, 0.12);
        --cta: #943310;

        /* Fluid units. These replace --desktop-scale and --mobile-ui-scale,
           which JavaScript used to compute and write back onto :root.
           `min(100vw / 1512, 100svh / 982, 1.12px)` is numerically identical to
           the `Math.min(innerWidth / 1512, innerHeight / 982, 1.12)` it
           replaces — verified at 59.523px against 59.52px — but being CSS it
           tracks resize and orientation with no listener, no first-paint flash
           and no chance of going stale between events. The old value was
           written once at parse time and again only on resize, so a rotation
           that fired no resize left the whole page scaled for the old
           orientation.

           These are lengths, not numbers, so the multiplication reads
           `calc(26 * var(--u))` rather than `calc(26px * var(--scale))`.

           hero-section.js reads --u instead of recomputing the formula, so the
           orbit trigonometry and the CSS composition cannot drift apart.

           The nav tracks this directly, with no floor of its own. A floor was
           tried and reverted: because the height term is what usually binds, a
           0.9 minimum inflated the bar by 16% in a 1440x760 browser window and
           33% at 1024x768, since a real window is a good deal shorter than the
           screen it sits on. Landscape phones, the case a floor was meant to
           rescue, are handled in their own media query below instead. */
        --u: min(100vw / 1512, 100svh / 982, 1.12px);

        /* The hero headline and standfirst are prose, not composition. They sit
           inside the layout, so their *position* follows --u, but their type
           floors here: at 721x900 the scale is 0.48 and the standfirst rendered
           at 9.5px. This binds only below 1058px wide or 687px tall, so it does
           not touch the sizes the nav revert was about. */
        --uc: max(0.7px, var(--uh));

        /* The header is chrome, not composition. Below 1400px the composition
           unit drags nav labels to 7.5px and the wordmark to 27x12, so the
           chrome gets its own unit with a floor. It tracks --u everywhere else,
           so the >=1440 composition the parity harness pixel-locks is
           untouched. */
        --un: var(--u);

        /* Composition unit for the hero. Tracks --u so the >=1440 reference
           frame is untouched; in the 721-1400 band below it switches from
           contain to cover, because a contained composition finished at 499px
           in a 1024px-tall viewport and left 525px of dead space above the
           metrics. */
        --uh: var(--u);

        /* The mobile composition is authored at 390px wide. */
        --m: min(100vw / 390, 1px);

        --mobile-copy-top: calc(466 * var(--m));
        --mobile-glow-top: calc(716 * var(--m));
      }

      * {
        box-sizing: border-box;
      }

      html,
      body {
        margin: 0;
        min-height: 100%;
      }

      body {
        overflow-x: hidden;
        overflow-y: auto;
        background: #070e0b;
        color: var(--ivory);
        font-family: var(--font-sans, "Schibsted Grotesk", "Inter", sans-serif);
      }

      a {
        color: inherit;
        text-decoration: none;
      }

      /* picture is only a format-negotiation wrapper. display: contents keeps
         the inner img a direct layout child of the card, so the existing
         `.project-card img { height: 100% }`-style rules still resolve. */
      picture {
        display: contents;
      }

      .hero-screen {
        position: relative;
        /* The composition is authored against a 982px-tall canvas and scaled by
           --u, so its real height is 982 * --u. Pinning the section to 100svh
           instead meant that whenever --u was width-bound — any narrow, tall
           window — the canvas finished well above the fold and left dead space
           before the metrics: 601px of it at 903x1114.

           Sizing to the canvas cannot overflow the viewport, because --u is
           itself capped at 100svh/982, so 982 * --u <= 100svh by construction.
           On a normal desktop the height term is what binds and this still
           resolves to exactly 100svh — 982px at 1512x982, 1080px at 1920x1080. */
        height: calc(982 * var(--uh));
        overflow: hidden;
        isolation: isolate;
      }

      .hero-screen::before,
      .hero-screen::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
      }

      .hero-screen::before {
        background:
          radial-gradient(circle at 50% 58%, transparent 0%, transparent 25%, rgba(0, 0, 0, 0.12) 48%, rgba(0, 0, 0, 0.48) 100%),
          radial-gradient(circle at 0% 50%, rgba(0, 0, 0, 0.54), transparent 28%),
          radial-gradient(circle at 100% 50%, rgba(0, 0, 0, 0.54), transparent 28%);
        z-index: 0;
      }

      .hero-screen::after {
        background: radial-gradient(circle at 50% 50%, rgba(18, 32, 25, 0.18), transparent 40%);
        z-index: 0;
      }

      .hero-nav-wrap {
        position: fixed;
        top: calc(26 * var(--un));
        left: 50%;
        z-index: 100;
        width: min(92vw, calc(640 * var(--un)));
        transform: translateX(-50%);
      }

      .hero-nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: calc(18 * var(--un));
        padding:
          calc(12 * var(--un))
          calc(14 * var(--un))
          calc(12 * var(--un))
          calc(20 * var(--un));
        border: 1px solid var(--glass-border);
        border-radius: calc(16 * var(--un));
        background: rgba(48, 36, 29, 0.56);
        box-shadow: inset 0 1px 0 rgba(255, 244, 235, 0.08);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
      }

      .hero-logo {
        display: inline-flex;
        align-items: center;
        flex: 0 0 auto;
      }

      .hero-logo img {
        display: block;
        width: calc(54 * var(--un));
        height: auto;
      }

      .hero-nav-links {
        display: flex;
        align-items: center;
        gap: calc(16 * var(--un));
        margin-left: auto;
        margin-right: 2px;
        color: rgba(237, 208, 189, 0.86);
        font-size: calc(14.72 * var(--un));
      }

      .hero-nav-links a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: calc(34 * var(--un));
        padding: 0 calc(12 * var(--un));
        border: 1px solid transparent;
        border-radius: calc(12 * var(--un));
        transition: opacity 180ms ease, border-color 180ms ease, color 180ms ease, background 180ms ease;
      }

      .hero-nav-links a:hover {
        opacity: 1;
        border-color: rgba(237, 208, 189, 0.16);
      }

      .hero-nav-links a.is-active {
        color: var(--ivory);
        opacity: 1;
        border-color: rgba(237, 208, 189, 0.34);
        background: rgba(255, 245, 238, 0.04);
      }

      .hero-nav-cta {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: calc(42 * var(--un));
        padding: 0 calc(17 * var(--un));
        border-radius: calc(12 * var(--un));
        background: var(--cta);
        color: #f7dfd0;
        font-size: calc(14.72 * var(--un));
        font-weight: 600;
        box-shadow: 0 10px 24px rgba(81, 34, 16, 0.24);
        cursor: pointer;
        transition:
          background-color 240ms ease-out,
          transform 240ms ease-out;
      }

      .hero-nav-cta:hover {
        background: #7f2b0d;
        transform: scale(1.02);
      }

      .hero-nav-cta:active {
        background: #6d240b;
        transform: scale(0.98);
      }

      .hero-nav-cta:focus-visible {
        outline: 2px solid rgba(237, 208, 189, 0.85);
        outline-offset: 2px;
      }

      .hero-menu-button {
        display: none;
        width: 44px;
        height: 44px;
        padding: 0;
        border: 0;
        background: transparent;
        color: var(--ivory);
        align-items: center;
        justify-content: center;
      }

      .hero-menu-icon {
        display: inline-flex;
        flex-direction: column;
        gap: 4px;
      }

      .hero-menu-icon span {
        display: block;
        width: 18px;
        height: 1.5px;
        border-radius: 999px;
        background: rgba(237, 208, 189, 0.92);
      }

      .home-mobile-menu {
        display: none;
      }

      .hero-orbit {
        position: absolute;
        inset: 0;
        z-index: 6;
        pointer-events: none;
      }

      .orbit-item {
        position: absolute;
        left: 0;
        top: 0;
        transform: translate(-50%, -50%);
        will-change: transform;
      }

      /* No opacity transition here on purpose: positionDesktopOrbit() writes
         opacity every frame from a continuous function of arc position, so a
         transition would only lag behind it and stop the card ever reaching
         0 at the wrap point — making the loop visibly pop. */

      .orbit-card {
        overflow: hidden;
        width: var(--card-width);
        height: var(--card-height);
        border-radius: 26px;
        border: 1px solid rgba(255, 245, 238, 0.08);
        box-shadow: 0 22px 44px rgba(0, 0, 0, 0.36);
        transform: translate3d(0, 0, 0) rotate(var(--tilt));
      }

      .orbit-card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }

      .orbit-card.grayscale img {
        filter: grayscale(1);
      }

      .hero-glow {
        position: absolute;
        left: 50%;
        top: calc(633.39 * var(--uh));
        z-index: 4;
        width: min(74vw, calc(930 * var(--uh)));
        height: min(40vw, calc(500 * var(--uh)));
        transform: translate(-50%, -50%);
        border-radius: 50%;
        background:
          radial-gradient(circle, rgba(160, 72, 31, 0.5) 0%, rgba(124, 52, 22, 0.31) 28%, rgba(66, 29, 13, 0.14) 56%, rgba(7, 16, 13, 0) 82%);
        filter: blur(84px);
        pointer-events: none;
      }

      .hero-copy {
        position: absolute;
        left: 50%;
        top: calc(742.77 * var(--uh));
        z-index: 10;
        width: min(90vw, calc(980 * var(--uh)));
        transform: translate(-50%, -50%);
        text-align: center;
      }

      .hero-title {
        margin: 0;
        font-size: calc(54 * var(--uc));
        line-height: 0.95;
        letter-spacing: -0.04em;
        font-weight: 600;
        color: var(--ivory);
      }

      .hero-title span,
      .hero-subtitle span {
        display: block;
      }

      .hero-subtitle {
        margin: calc(20 * var(--uc)) auto 0;
        max-width: calc(780 * var(--uc));
        font-size: calc(20 * var(--uc));
        line-height: 1.28;
        font-weight: 400;
        letter-spacing: -0.045em;
        color: var(--ivory-soft);
      }

      .metrics-section {
        position: relative;
        z-index: 1;
        width: 100%;
        padding: 50px 44px;
      }

      .metrics-inner {
        width: 100%;
        margin: 0 auto;
      }

      .metrics-row {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap: clamp(1.5rem, 4vw, 3rem);
        margin: 0 auto;
        width: 100%;
      }

      .metric-item {
        display: flex;
        align-items: baseline;
        justify-content: center;
        gap: clamp(0.55rem, 1.4vw, 1rem);
        text-align: center;
      }

      .metric-value {
        display: inline-flex;
        align-items: baseline;
        gap: 0.12em;
        line-height: 0.9;
        letter-spacing: -0.04em;
        color: var(--ivory);
      }

      .metric-main {
        font-size: 54px;
        line-height: 0.9;
        font-weight: 600;
      }

      .metric-affix {
        font-size: 54px;
        line-height: 0.9;
        font-weight: 600;
      }

      .metric-affix.metric-percent {
        font-size: 36px;
        align-self: baseline;
        vertical-align: baseline;
      }

      .metric-label {
        font-size: 32px;
        line-height: 1;
        letter-spacing: -0.05em;
        font-weight: 400;
        color: rgba(237, 208, 189, 0.94);
      }

      .metric-item--mobile-duplicate {
        display: none;
      }

      @keyframes metrics-mobile-marquee {
        from {
          transform: translateX(0);
        }
        to {
          transform: translateX(calc(-50% - 7px));
        }
      }

      .contact-section {
        position: relative;
        width: 100%;
        min-height: 548px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 44px;
        background: #070e0b;
        transition: background-color 420ms cubic-bezier(0.22, 1, 0.36, 1);
      }

      .contact-section:hover,
      .contact-section:focus-within {
        background: #943310;
      }

      .contact-section-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 34px;
        text-decoration: none;
        color: inherit;
      }

      .contact-section-link:focus-visible {
        outline: 2px solid var(--ivory);
        outline-offset: 6px;
        border-radius: 12px;
      }

      .contact-section-title {
        margin: 0;
        font-size: clamp(4.5rem, 8vw, 9rem);
        line-height: 0.88;
        letter-spacing: -0.08em;
        font-weight: 600;
        color: #f0d0b7;
      }

      .contact-section-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: clamp(88px, 8vw, 126px);
        height: clamp(88px, 8vw, 126px);
        background: center / contain no-repeat url("./assets/icons/export.svg");
        font-size: 0;
        transform: translateY(2px);
      }
      .identity-section {
        position: relative;
        width: 100%;
        background: #943310;
        min-height: 100vh;
        min-height: 100svh;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 44px;
      }

      .identity-section::before {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(7, 14, 11, 0.04);
        opacity: 0;
        pointer-events: none;
        transition: opacity 360ms cubic-bezier(0.22, 1, 0.36, 1);
      }

      .identity-inner {
        width: min(100%, 1280px);
        margin: 0 auto;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: clamp(2rem, 7vw, 6rem);
        transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
      }

      .identity-copy {
        display: grid;
        gap: clamp(0.35rem, 1vw, 0.7rem);
        width: fit-content;
        max-width: 100%;
        justify-self: start;
        flex: 0 0 auto;
      }

      .identity-composition {
        display: grid;
        gap: clamp(0.35rem, 1vw, 0.7rem);
        width: fit-content;
        max-width: 100%;
      }

      .identity-line {
        display: flex;
        align-items: baseline;
        gap: 0.16em;
        font-size: clamp(5.2rem, 8.4vw, 9.9rem);
        line-height: 0.86;
        letter-spacing: -0.07em;
        font-weight: 500;
        color: var(--ivory);
      }

      .identity-line--brand {
        width: fit-content;
      }

      .identity-line--split {
        justify-content: space-between;
        width: 100%;
      }

      .identity-reveal {
        display: inline-flex;
        align-items: baseline;
        opacity: 0;
        transform: translateY(32px);
        transition:
          opacity 760ms cubic-bezier(0.22, 1, 0.36, 1),
          transform 760ms cubic-bezier(0.22, 1, 0.36, 1);
      }

      .identity-brand {
        width: clamp(9.6rem, 13.6vw, 12.75rem);
        display: inline-flex;
        align-items: baseline;
        align-self: baseline;
        transform: translateY(32px);
        opacity: 0;
        transition:
          opacity 760ms cubic-bezier(0.22, 1, 0.36, 1),
          transform 760ms cubic-bezier(0.22, 1, 0.36, 1);
      }

      .identity-brand img {
        display: block;
        width: 100%;
        height: auto;
      }

      .identity-stack {
        display: grid;
        gap: clamp(1.5rem, 2.4vw, 2.2rem);
        padding-top: clamp(0.35rem, 0.8vw, 0.8rem);
        justify-items: stretch;
        justify-self: end;
        width: clamp(28rem, 40vw, 56rem);
        margin: 0;
        text-align: left;
        flex: 0 0 auto;
      }

      .identity-card {
        width: 100%;
        margin-left: auto;
        margin-right: 0;
        opacity: 0;
        transform: translateY(28px);
        transition:
          opacity 760ms cubic-bezier(0.22, 1, 0.36, 1),
          transform 760ms cubic-bezier(0.22, 1, 0.36, 1);
      }

      .identity-card p {
        margin: 0;
        font-size: 24px;
        line-height: 1.16;
        letter-spacing: -0.04em;
        font-weight: 400;
        color: rgba(237, 208, 189, 0.94);
        text-wrap: balance;
        text-align: left;
      }

      .identity-section:hover::before,
      .identity-section:focus-within::before {
        opacity: 1;
      }

      .identity-section:hover .identity-inner,
      .identity-section:focus-within .identity-inner {
        transform: translateY(-8px);
      }

      .identity-section.is-visible .identity-reveal,
      .identity-section.is-visible .identity-brand,
      .identity-section.is-visible .identity-card {
        opacity: 1;
        transform: translateY(0);
      }

      .identity-section.is-visible .identity-composition .identity-line:nth-child(1) .identity-reveal,
      .identity-section.is-visible .identity-composition .identity-line:nth-child(1) .identity-brand {
        transition-delay: 0ms;
      }

      .identity-section.is-visible .identity-composition .identity-line:nth-child(2) .identity-reveal {
        transition-delay: 130ms;
      }

      .identity-section.is-visible .identity-copy > .identity-line:nth-child(2) .identity-reveal {
        transition-delay: 260ms;
      }

      .identity-section.is-visible .identity-card:nth-child(1) {
        transition-delay: 700ms;
      }

      .identity-section.is-visible .identity-card:nth-child(2) {
        transition-delay: 860ms;
      }

      .identity-section.is-visible .identity-card:nth-child(3) {
        transition-delay: 1020ms;
      }

      .services-cta-section {
        width: 100%;
        background: #070e0b;
      }

      .services-cta-list {
        width: 100%;
      }

      .services-cta-row {
        position: relative;
        display: grid;
        grid-template-columns: minmax(520px, 640px) 755px;
        justify-content: center;
        align-items: center;
        gap: clamp(2rem, 6vw, 6rem);
        height: 162px;
        padding: 0 44px;
        border-top: 1px solid rgba(237, 208, 189, 0.14);
        color: var(--ivory);
        background: #070e0b;
        transition:
          background-color 280ms ease,
          border-color 280ms ease;
      }

      .services-cta-row:last-child {
        border-bottom: 1px solid rgba(237, 208, 189, 0.14);
      }

      .services-cta-row:hover,
      .services-cta-row:focus-within {
        background: #943310;
        border-color: rgba(237, 208, 189, 0.08);
      }

      .services-cta-main {
        position: relative;
        display: flex;
        align-items: center;
        width: 100%;
        height: 100%;
      }

      .services-cta-hover-group {
        position: relative;
        display: inline-flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        width: fit-content;
        transform: translateY(0);
        transition: transform 240ms ease;
      }

      .services-cta-title {
        margin: 0;
        font-size: 48px;
        line-height: 0.95;
        letter-spacing: -0.055em;
        font-weight: 600;
        color: var(--ivory);
      }

      .services-cta-button {
        display: inline-flex;
        align-items: center;
        gap: 0.55rem;
        position: absolute;
        left: 0;
        top: calc(100% + 14px);
        padding: 0;
        color: rgba(237, 208, 189, 0.92);
        font-size: 20px;
        line-height: 1;
        font-weight: 500;
        letter-spacing: -0.03em;
        opacity: 0;
        transform: translateY(14px);
        pointer-events: none;
        transition:
          opacity 240ms ease,
          transform 240ms ease;
      }

      .services-cta-row:hover .services-cta-button,
      .services-cta-row:focus-within .services-cta-button {
        opacity: 1;
        transform: translateY(0);
      }

      .services-cta-row:hover .services-cta-hover-group,
      .services-cta-row:focus-within .services-cta-hover-group {
        transform: translateY(-17px);
      }

      .services-cta-arrow {
        font-size: 1.15em;
        line-height: 1;
      }

      .services-cta-copy {
        margin: 0;
        width: 755px;
        max-width: 100%;
        font-size: 24px;
        line-height: 1.18;
        letter-spacing: -0.04em;
        font-weight: 400;
        color: #af9a87;
        justify-self: start;
        transition: color 240ms ease-out;
      }

      .services-cta-row:hover .services-cta-copy,
      .services-cta-row:focus-within .services-cta-copy {
        color: #eeddd1;
      }

      .offer-section {
        width: 100%;
        background: #070e0b;
      }

      .offer-inner {
        display: grid;
        grid-template-columns: minmax(0, 731px) minmax(0, 1fr);
        gap: 88px;
        align-items: center;
        padding: 60px 44px 60px 45px;
      }

      .offer-video-trigger {
        position: relative;
        display: block;
        width: 100%;
        padding: 0;
        border: 0;
        border-radius: 24px;
        overflow: hidden;
        background: transparent;
      }

      .offer-poster {
        /* aspect-ratio replaces what the deleted .offer-video-preview carried.
           Without it the portrait source renders at its natural height (~1023px
           in a 731px column) instead of the 644px the layout expects. */
        aspect-ratio: 731 / 644;
        margin: 0;
        overflow: hidden;
        border-radius: 28px;
      }

      .offer-poster img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .offer-copy {
        padding-right: 44px;
      }

      .offer-kicker {
        margin: 0 0 18px;
        font-size: 24px;
        line-height: 1.1;
        letter-spacing: -0.04em;
        font-weight: 400;
        color: #f0d0b7;
      }

      .offer-title {
        margin: 0 0 28px;
        font-size: 48px;
        line-height: 0.95;
        letter-spacing: -0.055em;
        font-weight: 600;
        color: #f0d0b7;
      }

      .offer-description {
        margin: 0;
        max-width: 755px;
        font-size: 24px;
        line-height: 1.22;
        letter-spacing: -0.035em;
        font-weight: 400;
        color: #af9a87;
      }

      .offer-description strong {
        color: var(--ivory);
        font-weight: 600;
      }

      .offer-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 20px 18px;
        margin-top: 54px;
      }

      .offer-tag {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 46px;
        padding: 0 28px;
        border-radius: 8px;
        background: rgba(48, 44, 33, 0.9);
        color: rgba(237, 208, 189, 0.96);
        font-size: 20px;
        line-height: 1;
        letter-spacing: -0.03em;
        font-weight: 500;
      }

      .process-section {
        position: relative;
        width: 100%;
        background: #f3e5da;
        overflow: hidden;
        min-height: 100vh;
        min-height: 100svh;
        display: flex;
        align-items: center;
      }

      .process-inner {
        max-width: 1600px;
        margin: 0 auto;
        padding: 92px 44px 96px;
        width: 100%;
      }

      .process-hero {
        position: relative;
        max-width: 760px;
        margin: 0 auto;
        text-align: center;
        overflow: visible;
      }

      .process-title {
        position: relative;
        z-index: 1;
        margin: 0;
        font-size: 54px;
        line-height: 0.92;
        letter-spacing: -0.055em;
        font-weight: 600;
        color: #07100d;
      }

      .process-subtitle {
        position: relative;
        z-index: 1;
        margin: 24px auto 0;
        width: 462px;
        max-width: 100%;
        font-size: 20px;
        line-height: 1.22;
        letter-spacing: -0.03em;
        font-weight: 400;
        color: rgba(7, 16, 13, 0.84);
      }

      .process-tags {
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 2;
      }

      .process-tag {
        position: absolute;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 42px;
        padding: 0 24px;
        border-radius: 12px;
        background: rgba(255, 245, 238, 0.22);
        border: 1px solid rgba(255, 244, 235, 0.18);
        box-shadow: inset 0 1px 0 rgba(255, 244, 235, 0.12);
        color: rgba(7, 16, 13, 0.88);
        font-size: 20px;
        line-height: 1;
        letter-spacing: -0.03em;
        font-weight: 500;
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        animation: process-tag-drift 10.5s ease-in-out infinite;
      }

      .process-tag--smm {
        top: 22px;
        left: -7px;
        --drift-x: -18px;
        --drift-y: -24px;
        animation-delay: -3.1s;
      }

      .process-tag--design {
        top: -28px;
        right: 228px;
        --drift-x: 16px;
        --drift-y: -24px;
        animation-delay: -1.4s;
      }

      .process-tag--events {
        right: -4px;
        top: 28px;
        --drift-x: 24px;
        --drift-y: -18px;
        animation-delay: -5.2s;
      }

      @keyframes process-tag-drift {
        0%,
        100% {
          transform: translate3d(0, 0, 0);
        }
        50% {
          transform: translate3d(var(--drift-x, 10px), var(--drift-y, -12px), 0);
        }
      }

      .process-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 24px;
        margin-top: 96px;
      }

      .process-card {
        position: relative;
        min-height: 212px;
        border-radius: 24px;
        background: rgba(240, 208, 183, 0.35);
        overflow: hidden;
        transition: background-color 280ms ease, color 280ms ease;
      }

      .process-card::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(7, 16, 13, 0) 0%, rgba(7, 16, 13, 0) 58%, rgba(7, 16, 13, 0.08) 100%);
        opacity: 0;
        transition: opacity 320ms ease-in-out;
      }

      .process-card::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
          180deg,
          rgba(64, 147, 117, 0.54) 0%,
          rgba(64, 147, 117, 0.34) 18%,
          rgba(64, 147, 117, 0.16) 36%,
          rgba(240, 208, 183, 0.06) 54%,
          rgba(240, 208, 183, 0) 74%
        );
        opacity: 1;
        transition: opacity 360ms ease-in-out;
      }

      .process-card:hover,
      .process-card:focus-within {
        background: #0f241d;
      }

      .process-card:hover::before,
      .process-card:focus-within::before {
        opacity: 1;
      }

      .process-card:hover::after,
      .process-card:focus-within::after {
        opacity: 0;
      }

      .process-card-inner {
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        height: 100%;
      }

      .process-card-body {
        position: absolute;
        top: 156px;
        right: 32px;
        bottom: 32px;
        left: 32px;
        display: grid;
        gap: 30px;
        align-content: start;
        transition:
          top 280ms ease,
          left 280ms ease,
          right 280ms ease,
          bottom 280ms ease;
      }

      .process-card-header {
        display: flex;
        align-items: center;
        gap: 12px;
      }

      .process-card-icon {
        width: 22px;
        height: 22px;
        border-radius: 999px;
        background: #102018;
        flex: 0 0 auto;
        transition: background-color 280ms ease;
      }

      .process-card-title {
        /* The localized homepages carry longer compounds than the English
           source; without this a word wider than the card is silently clipped
           by .process-card's overflow:hidden rather than wrapping. */
        overflow-wrap: break-word;
        margin: 0;
        font-size: 32px;
        line-height: 1;
        letter-spacing: -0.04em;
        font-weight: 600;
        color: #102018;
        transition: color 280ms ease;
      }

      .process-card:hover .process-card-body,
      .process-card:focus-within .process-card-body {
        top: 32px;
        right: 32px;
        bottom: 32px;
        left: 32px;
      }

      .process-card:hover .process-card-title,
      .process-card:focus-within .process-card-title {
        color: #f0d0b7;
      }

      .process-card:hover .process-card-icon,
      .process-card:focus-within .process-card-icon {
        background: #f0d0b7;
      }

      .process-card-description {
        margin: 0;
        font-size: 18px;
        line-height: 1.24;
        letter-spacing: -0.02em;
        font-weight: 400;
        color: rgba(240, 208, 183, 0.86);
        opacity: 0;
        transform: translateY(14px);
        transition:
          opacity 280ms ease,
          transform 280ms ease;
      }

      .process-card:hover .process-card-description,
      .process-card:focus-within .process-card-description {
        opacity: 1;
        transform: translateY(0);
      }

      .projects-section {
        width: 100%;
        height: 100vh;
        height: 100svh;
        background: #070e0b;
        display: flex;
        align-items: center;
      }

      .projects-inner {
        width: 100%;
        max-width: 1720px;
        margin: 0 auto;
        padding: 44px;
        display: grid;
        /* The 741px track was fixed, giving this grid a 1205px floor that grid
           will not shrink below. Capped instead, so the marquee column follows
           the container once there is less than 741px of room for it. */
        grid-template-columns: minmax(0, 1fr) minmax(0, 741px);
        gap: 56px;
        align-items: stretch;
        height: 100%;
      }

      .projects-copy {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        max-width: 700px;
        justify-self: center;
        text-align: left;
      }

      .projects-title {
        margin: 0;
        font-size: 54px;
        line-height: 0.92;
        letter-spacing: -0.06em;
        font-weight: 600;
        color: #f0d0b7;
      }

      .projects-description {
        margin: 28px 0 0;
        max-width: 690px;
        font-size: 24px;
        line-height: 1.22;
        letter-spacing: -0.035em;
        font-weight: 400;
        color: #af9a87;
      }

      .projects-marquee {
        position: relative;
        overflow: hidden;
        /* Capped, not pinned: at 741px and above this is the original fixed
           width, below it the marquee follows its column instead of spilling. */
        width: min(100%, 741px);
        height: 100%;
        min-height: 0;
        justify-self: end;
      }

      .projects-marquee::before,
      .projects-marquee::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        height: 160px;
        z-index: 2;
        pointer-events: none;
      }

      .projects-marquee::before {
        top: 0;
        background: linear-gradient(180deg, rgba(7, 14, 11, 1) 0%, rgba(7, 14, 11, 0.82) 26%, rgba(7, 14, 11, 0.36) 62%, rgba(7, 14, 11, 0) 100%);
      }

      .projects-marquee::after {
        bottom: 0;
        background: linear-gradient(0deg, rgba(7, 14, 11, 1) 0%, rgba(7, 14, 11, 0.82) 26%, rgba(7, 14, 11, 0.36) 62%, rgba(7, 14, 11, 0) 100%);
      }

      .projects-marquee-track {
        display: grid;
        gap: 24px;
        will-change: transform;
      }

      .project-card {
        position: relative;
        display: block;
        margin: 0;
        /* aspect-ratio rather than a fixed height, so the card keeps its
           proportions as the column narrows. The marquee measures cycle length
           from offsetTop, which stays correct either way. */
        width: 100%;
        aspect-ratio: 741 / 505;
        border-radius: 16px;
        overflow: hidden;
        background: #111;
        color: #f0d0b7;
      }

      .project-card::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.72) 100%);
        z-index: 1;
        transition: opacity 240ms ease;
      }

      .project-card::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: calc(44% + 52px);
        z-index: 2;
        pointer-events: none;
        background: linear-gradient(
          180deg,
          rgba(0, 0, 0, 0) 0%,
          rgba(0, 0, 0, 0.14) 14%,
          rgba(0, 0, 0, 0.46) 44%,
          rgba(0, 0, 0, 0.82) 100%
        );
      }

      .project-card img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: grayscale(1);
      }

      .project-card-content {
        position: absolute;
        inset: auto 0 0 0;
        z-index: 3;
        padding: 24px 28px 28px;
        width: min(66.666%, 520px);
      }

      .project-card-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 18px;
      }

      .project-card-tag {
        display: inline-flex;
        align-items: center;
        min-height: 28px;
        padding: 0 13px;
        border-radius: 8px;
        background: rgba(240, 208, 183, 0.18);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        color: rgba(240, 208, 183, 0.94);
        font-size: 16px;
        line-height: 1;
        letter-spacing: -0.03em;
        font-weight: 500;
      }

      .project-card-title {
        margin: 0;
        font-size: 32px;
        line-height: 1;
        letter-spacing: -0.04em;
        font-weight: 600;
      }

      .project-card-description {
        margin: 14px 0 0;
        width: 100%;
        max-width: none;
        font-size: 18px;
        line-height: 1.22;
        letter-spacing: -0.02em;
        font-weight: 400;
        color: rgba(240, 208, 183, 0.9);
      }

      .reachout-section {
        width: 100%;
        background: #070e0b;
        padding: 60px 44px;
      }

      .reachout-banner {
        position: relative;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.34fr);
        align-items: center;
        gap: 56px;
        width: 100%;
        max-width: 1720px;
        height: 308px;
        margin: 0 auto;
        padding: 34px 36px 34px 44px;
        border-radius: 24px;
        overflow: hidden;
        background: #f3e5da;
        color: #070e0b;
        transition: background-color 320ms cubic-bezier(0.22, 1, 0.36, 1);
      }

      .reachout-banner:hover,
      .reachout-banner:focus-visible {
        background: #943310;
      }

      .reachout-content {
        position: relative;
        z-index: 2;
        max-width: 660px;
        transition:
          opacity 240ms ease,
          transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
      }

      .reachout-copy {
        margin: 0;
        font-size: 26px;
        line-height: 1.22;
        letter-spacing: -0.04em;
        font-weight: 400;
        color: #070e0b;
      }

      .reachout-copy strong {
        display: block;
        margin-top: 40px;
        font-size: inherit;
        line-height: inherit;
        letter-spacing: inherit;
        font-weight: 600;
        color: #070e0b;
      }

      .reachout-visual {
        position: relative;
        z-index: 2;
        width: calc(100% - 40px);
        height: 100%;
        justify-self: end;
        border-radius: 24px;
        overflow: hidden;
        transition:
          opacity 240ms ease,
          transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
      }

      .reachout-visual img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .reachout-hover {
        position: absolute;
        inset: 0;
        z-index: 3;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 28px;
        opacity: 0;
        pointer-events: none;
        transform: translateY(10px);
        transition:
          opacity 260ms ease,
          transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
      }

      .reachout-hover-text {
        margin: 0;
        font-size: clamp(4rem, 7vw, 7.4rem);
        line-height: 0.9;
        letter-spacing: -0.07em;
        font-weight: 600;
        color: #f0d0b7;
      }

      .reachout-hover-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 106px;
        height: 106px;
        background: center / contain no-repeat url("./assets/icons/export.svg");
        font-size: 0;
        transform: translateY(2px);
      }

      .reachout-banner:hover .reachout-content,
      .reachout-banner:focus-visible .reachout-content,
      .reachout-banner:hover .reachout-visual,
      .reachout-banner:focus-visible .reachout-visual {
        opacity: 0;
        transform: scale(0.985);
      }

      .reachout-banner:hover .reachout-hover,
      .reachout-banner:focus-visible .reachout-hover {
        opacity: 1;
        transform: translateY(0);
      }

      .founders-showcase {
        width: 100%;
        background: #070e0b;
        padding: 60px 44px 60px;
        min-height: 100vh;
        min-height: 100svh;
        display: flex;
        align-items: center;
      }

      .founders-showcase-inner {
        width: 100%;
        max-width: 1720px;
        margin: 0 auto;
        transform: translateY(40px);
      }

      .founders-showcase-copy {
        max-width: 980px;
        margin: 0 auto 56px;
        text-align: center;
      }

      .founders-showcase-title {
        margin: 0;
        font-size: 54px;
        line-height: 0.92;
        letter-spacing: -0.07em;
        font-weight: 600;
        color: #f0d0b7;
      }

      .founders-showcase-description {
        margin: 30px 0 0;
        max-width: 960px;
        font-size: 20px;
        line-height: 1.22;
        letter-spacing: -0.04em;
        font-weight: 400;
        color: #d8c1b1;
      }

      .founders-showcase-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 32px;
        max-width: 1160px;
        margin: 0 auto;
      }

      .founder-card {
        position: relative;
        display: block;
        height: 450px;
        border-radius: 24px;
        overflow: hidden;
        background: #111;
      }

      .founder-card--no-image {
        background:
          radial-gradient(circle at 50% 22%, rgba(255, 255, 255, 0.12), transparent 34%),
          linear-gradient(180deg, #263238 0%, #0f1416 100%);
      }

      .founder-card::after {
        content: "";
        position: absolute;
        inset: auto 0 0 0;
        height: 44%;
        z-index: 1;
        pointer-events: none;
        background: linear-gradient(
          180deg,
          rgba(0, 0, 0, 0) 0%,
          rgba(0, 0, 0, 0.14) 18%,
          rgba(0, 0, 0, 0.42) 54%,
          rgba(0, 0, 0, 0.82) 100%
        );
      }

      .founder-card img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center calc(50% + 60px);
        transition:
          filter 340ms cubic-bezier(0.22, 1, 0.36, 1),
          transform 340ms cubic-bezier(0.22, 1, 0.36, 1);
      }

      .founder-card::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        background: linear-gradient(
          180deg,
          rgba(0, 0, 0, 0) 0%,
          rgba(0, 0, 0, 0.08) 34%,
          rgba(0, 0, 0, 0.28) 64%,
          rgba(0, 0, 0, 0.64) 100%
        );
        opacity: 0;
        transition: opacity 320ms cubic-bezier(0.22, 1, 0.36, 1);
      }

      .founder-card:hover::before,
      .founder-card:focus-visible::before {
        opacity: 1;
      }

      .founder-card:hover img,
      .founder-card:focus-visible img {
        filter: grayscale(1);
        transform: scale(1.01);
      }

      .founder-card-content {
        position: absolute;
        inset: auto 0 0 0;
        z-index: 2;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 28px 30px 24px;
      }

      .founder-card-text {
        width: 100%;
        transform: translateY(42px);
        transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
      }

      .founder-card-name {
        margin: 0;
        font-size: 28px;
        line-height: 1;
        letter-spacing: -0.045em;
        font-weight: 600;
        color: #f0d0b7;
        transition: color 280ms ease;
      }

      .founder-card-role {
        margin: 14px 0 0;
        font-size: 24px;
        line-height: 1.08;
        letter-spacing: -0.04em;
        font-weight: 400;
        color: rgba(216, 193, 177, 0.9);
        transition: color 280ms ease;
      }

      .founder-card:hover .founder-card-name,
      .founder-card:focus-visible .founder-card-name {
        color: #f0d0b7;
      }

      .founder-card:hover .founder-card-role,
      .founder-card:focus-visible .founder-card-role {
        color: rgba(216, 193, 177, 0.9);
      }

      .founder-card:hover .founder-card-text,
      .founder-card:focus-visible .founder-card-text {
        transform: translateY(-10px);
      }

      .founder-card-link {
        display: inline-flex;
        align-items: center;
        gap: 14px;
        min-height: 40px;
        margin-top: 16px;
        padding: 0 16px;
        border-radius: 10px;
        background: rgba(148, 51, 16, 1);
        opacity: 0;
        transition:
          opacity 300ms cubic-bezier(0.22, 1, 0.36, 1),
          background-color 300ms cubic-bezier(0.22, 1, 0.36, 1);
      }

      .founder-card:hover .founder-card-link,
      .founder-card:focus-visible .founder-card-link {
        opacity: 1;
      }

      .founder-card-link-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 18px;
        height: 18px;
        border-radius: 4px;
        background: #f0d0b7;
        color: #943310;
        font-size: 11px;
        letter-spacing: -0.04em;
        font-weight: 600;
        line-height: 1;
        flex: 0 0 auto;
      }

      .founder-card-link-text {
        font-size: 16px;
        line-height: 1;
        letter-spacing: -0.03em;
        font-weight: 600;
        color: #f0d0b7;
        white-space: nowrap;
        order: 1;
      }

      .founder-card-link-icon {
        order: 2;
      }

      .questions-section {
        width: 100%;
        background: #f3e5da;
        padding: 72px 44px;
      }

      .questions-inner {
        width: 100%;
        max-width: 1720px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
        gap: 56px;
        align-items: start;
      }

      .questions-copy {
        max-width: 420px;
      }

      .questions-title {
        margin: 0;
        font-size: 54px;
        line-height: 0.9;
        letter-spacing: -0.075em;
        font-weight: 600;
        color: #07100d;
      }

      .questions-list {
        display: grid;
        gap: 22px;
      }

      .question-item {
        border-radius: 24px;
        background: rgba(240, 219, 201, 0.76);
        transition: background-color 220ms ease;
        overflow: hidden;
      }

      .question-item:hover,
      .question-item:focus-within {
        background: rgba(229, 205, 186, 0.96);
      }

      .question-toggle {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        padding: 30px 28px 30px 44px;
        border: 0;
        background: transparent;
        color: #07100d;
        text-align: left;
        cursor: pointer;
      }

      .question-label {
        font-size: 24px;
        line-height: 1.12;
        letter-spacing: -0.035em;
        font-weight: 600;
      }

      .question-icon {
        position: relative;
        width: 16px;
        height: 12px;
        flex: 0 0 auto;
        transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
        background: center / contain no-repeat
          url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M2 2.25 8 9.75 14 2.25Z' fill='%2307100d' stroke='%2307100d' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E");
      }

      .question-item.is-open .question-icon {
        transform: rotate(180deg);
      }

      .question-panel {
        height: 0;
        overflow: hidden;
        transition: height 420ms cubic-bezier(0.22, 1, 0.36, 1);
      }

      .question-answer {
        padding: 0 80px 32px 44px;
        font-size: 20px;
        line-height: 1.35;
        letter-spacing: -0.03em;
        font-weight: 400;
        color: rgba(7, 16, 13, 0.78);
      }

      @media (max-width: 1360px) and (min-width: 721px) {
        .identity-inner {
          width: min(100%, 1120px);
          margin: 0 auto;
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          gap: clamp(1.5rem, 3vw, 3rem);
        }

        .identity-line {
          font-size: clamp(4.4rem, 6.8vw, 7.6rem);
        }

        .identity-brand {
          width: clamp(8.4rem, 11.8vw, 10.8rem);
        }

        .identity-stack {
          width: clamp(24rem, 38vw, 42rem);
          margin: 0;
          text-align: left;
        }

        .identity-card,
        .identity-card p {
          text-align: left;
        }

        .services-cta-row {
          grid-template-columns: minmax(380px, 520px) minmax(0, 755px);
          gap: clamp(1.5rem, 3vw, 2.75rem);
        }
      }

      @media (min-width: 1800px) {
        .offer-inner {
          max-width: 1662px;
          margin-left: auto;
          margin-right: auto;
        }
      }

      /* ---------------------------------------------------------------------
         Responsive ladder.

         Fluid sizing covers the continuum; these steps exist only where content
         has to restack, which no amount of fluid sizing can do. Every step sits
         below the 1512px reference, so the pixel-locked desktop composition is
         untouched.

         The band these fill — 721px to 1543px — previously had two rules in
         total, covering .identity-* and .services-cta-row. Everything else kept
         its desktop widths, which is why a 900px window clipped 600px of
         content.
         --------------------------------------------------------------------- */

      /* The offer's poster is 731px. Below roughly 1180 there is no longer room
         for it beside a readable column of copy: at 900px the 1fr text track was
         being squeezed to zero and the copy spilled out of it. */
      @media (max-width: 1180px) {
        .offer-inner {
          grid-template-columns: minmax(0, 1fr);
          gap: clamp(28px, 4vw, 48px);
          padding: clamp(40px, 5vw, 60px) clamp(20px, 3.4vw, 45px);
        }

        .offer-poster {
          width: 100%;
          max-width: 731px;
        }

        .offer-copy {
          padding-right: 0;
        }
      }

      /* The row above needs 520 + 755 + gap + 88px of padding, so it stops
         fitting at roughly 1452px. Below 1361 the tablet block further down
         already reshapes it; this covers only the sliver in between, and stays
         clear of 1512 so the reference composition is untouched. */
      @media (min-width: 1361px) and (max-width: 1460px) {
        .services-cta-row {
          grid-template-columns: minmax(0, 640px) minmax(0, 755px);
        }
      }

      /* Four process cards leave 216px each at 1024px wide. That is cramped in
         English and overflows in Russian, where "Определение" alone is 204px at
         the card's 32px type. Two columns from here down. */
      @media (max-width: 1150px) {
        .process-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }

      @media (max-width: 1023px) {
        .process-inner {
          padding: clamp(56px, 8vw, 92px) clamp(20px, 3.4vw, 44px) clamp(60px, 8vw, 96px);
        }

        .process-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
          margin-top: clamp(48px, 8vw, 96px);
        }

        .services-cta-row {
          height: auto;
          grid-template-columns: minmax(0, 1fr);
          gap: 20px;
          padding: 32px clamp(20px, 3.4vw, 44px);
        }

        .projects-marquee {
          justify-self: center;
        }
      }

      /* Two-column bands that stop working once each column drops below roughly
         320px, which is where they were previously floored. Stacking beats
         squeezing here: the marquee, the reach-out banner and the FAQ all pair a
         block of copy with a large visual. */
      @media (max-width: 1023px) {
        /* .projects-inner drops to `height: auto` just below, which leaves the
           marquee's `height: 100%` with no definite parent to resolve against.
           It then collapsed to `auto` and grew to the full duplicated track —
           `overflow: hidden` clipped nothing and the cards spilled over every
           section beneath. The section has to give up its fixed 100vh too, or
           the stacked copy + marquee overflow it. */
        .projects-section {
          height: auto;
        }

        .projects-inner {
          grid-template-columns: minmax(0, 1fr);
          gap: clamp(24px, 4vw, 56px);
          height: auto;
          padding: clamp(28px, 4vw, 44px);
        }

        .reachout-banner,
        .questions-inner {
          grid-template-columns: minmax(0, 1fr);
          gap: clamp(24px, 4vw, 56px);
        }

        /* Two rows cannot share the 308px that was sized for one: the copy took
           what it needed and left the photo a 32px sliver. */
        .reachout-banner {
          height: auto;
          padding: clamp(28px, 4vw, 34px);
        }

        .projects-marquee {
          width: 100%;
          max-width: 741px;
          justify-self: start;
          /* A definite window for the loop to run inside. Capped at one card
             (741x505 at full width) so a whole card is always in frame, and
             floored so short landscape viewports keep a usable slot. */
          height: clamp(240px, 58vh, 505px);
        }

        /* 160px of fade at each end eats most of a window this short. */
        .projects-marquee::before,
        .projects-marquee::after {
          height: 84px;
        }

        /* The chips are decorative and deliberately bleed a few px past their
           container, then drift another 24px outward on the animation. At these
           widths the container is already flush with the viewport padding, so
           that travel takes them off-screen. Pull them in and shorten the drift;
           the effect reads the same. */
        .process-tag--events {
          right: 0;
          --drift-x: 12px;
        }

        .process-tag--smm {
          left: 0;
          --drift-x: -12px;
        }
      }

      /* Scoped to the stacked tablet band only — the phone block further down
         gives the visual its own treatment and must keep it. Now that the
         banner is `height: auto`, the visual's `height: 100%` has no definite
         parent left to resolve against, so it needs a band of its own. */
      @media (min-width: 721px) and (max-width: 1023px) {
        .reachout-visual {
          width: 100%;
          height: clamp(200px, 26vw, 264px);
          justify-self: stretch;
        }
      }

      /* The identity block is a flex row of a wordmark beside a text stack. Its
         stack has a 24rem floor, which stops fitting beside the wordmark here. */
      @media (max-width: 900px) {
        .founders-showcase-grid {
          grid-template-columns: minmax(0, 1fr);
        }

        .identity-inner {
          flex-direction: column;
          gap: clamp(1.25rem, 4vw, 2rem);
        }

        .identity-stack {
          width: 100%;
          justify-self: stretch;
        }

        .metrics-row {
          grid-template-columns: repeat(2, minmax(0, 1fr));
          row-gap: clamp(1.25rem, 4vw, 2rem);
        }
      }

      /* One column. Below this the process cards and metrics stop being
         readable side by side. */
      @media (max-width: 640px) {
        .process-grid {
          grid-template-columns: minmax(0, 1fr);
        }

        .metrics-row {
          grid-template-columns: minmax(0, 1fr);
        }
      }

      /* Landscape phones. These took the desktop path because the old isMobile
         test looked at width only, and an 844x390 phone is 844 wide. The height
         term of the shared scale then collapsed everything to 0.4 — nav links
         rendered at 5.8px, the logo at 21x9.

         A 390px-tall viewport genuinely cannot show a composition authored
         against 982px, and shrinking it until it fits is what made it
         illegible. So drop the height term, size from width alone, and let the
         hero run past the fold: scrolling a landscape phone is normal, reading
         6px type is not. */
      @media (orientation: landscape) and (max-height: 560px) and (min-width: 721px) {
        :root {
          --u: clamp(0.72px, 100vw / 1512, 1.12px);
          /* Width alone here too: a 390px-tall viewport cannot cover a canvas
             authored against 982px without shrinking the type to nothing. */
          --uh: clamp(0.72px, 100vw / 1512, 1.12px);
        }

        .hero-screen {
          height: auto;
          min-height: calc(940 * var(--uh));
        }
      }

      /* Touch targets on the nav. Scoped to coarse pointers so the desktop
         composition, which is pixel-locked by the parity harness, is untouched. */
      @media (pointer: coarse) {
        .hero-nav-links a,
        .hero-nav-cta {
          min-height: 44px;
        }

        /* The wordmark is 43px wide, one pixel under the minimum. */
        .hero-logo {
          min-height: 44px;
          min-width: 44px;
          justify-content: center;
        }

        .hero-menu-button,
        .home-mobile-menu-close {
          min-width: 44px;
          min-height: 44px;
        }
      }

      @keyframes mobile-glow-breathe {
        0%,
        100% {
          opacity: 0.18;
          transform: translate(-50%, -50%) scale(0.98);
        }
        50% {
          opacity: 0.46;
          transform: translate(-50%, -50%) scale(1.03);
        }
      }

      /* Chrome floor for the 721-1400 band: tablets, small laptops and
         landscape phones, where --u is height-bound and the header would
         otherwise render at 7.5-11.5px. 0.86 keeps nav labels at 12.7px and
         the wordmark at 46px. Above 1400 the header stays on --u so desktop
         parity is unaffected. */
      @media (min-width: 721px) and (max-width: 1400px) {
        :root {
          --un: max(0.86px, var(--u));

          /* Cover, not contain. 1.6 caps the blow-up on portrait tablets, where
             the height term alone would ask for 1.39 at 1024x1366. */
          --uh: min(max(100vw / 1512, 100svh / 982), 1.6px);
        }

        /* The headline and standfirst are prose here, not a fixed two-line
           composition: at 691px of copy width the authored line breaks fall in
           the wrong places, so let them flow. */
        .hero-title span,
        .hero-subtitle span {
          display: inline;
        }

        .hero-subtitle {
          max-width: min(88vw, calc(680 * var(--uc)));
        }

        /* Cover means the canvas can now be taller than the window — at 1280x720
           it wants 831px. Crop it instead of pushing the fold down, and clamp the
           copy so it cannot ride below the fold with it: where the canvas
           overshoots, 76svh reproduces the contained position almost exactly
           (547px against the 544px it had before); where it fits, the canvas
           position wins and the composition stays intact. */
        .hero-screen {
          height: min(calc(982 * var(--uh)), 100svh);
        }

        .hero-copy {
          top: min(calc(742.77 * var(--uh)), 76svh);
        }
      }

      /* Tall desktop shapes (4:3 monitors, portrait-ish windows) above the band
         letterboxed the same way: 161px of dead space at 1600x1200. Cover them
         too, but only at aspect ratios the reference shapes never take — 16:9,
         16:10 and the 1512x982 reference are all wider than 5:4, so parity is
         untouched. */
      @media (min-width: 1401px) and (max-aspect-ratio: 5 / 4) {
        :root {
          --uh: min(max(100vw / 1512, 100svh / 982), 1.6px);
        }

        .hero-screen {
          height: min(calc(982 * var(--uh)), 100svh);
        }

        .hero-copy {
          top: min(calc(742.77 * var(--uh)), 76svh);
        }
      }

      @media (max-width: 720px) {
        :root {
          /* The old JS set --desktop-scale to exactly 1 on phones, so the
             handful of desktop-scaled rules that survive into the mobile
             layout render at their authored size. Reproduced here: without it
             --u would evaluate to 0.26 on a 390px screen and shrink them.
             --m keeps its :root definition and carries the mobile scaling. */
          --u: 1px;
          --uc: 1px;
        }

        body {
          overflow-x: hidden;
        }

        .contact-section {
          min-height: auto;
          padding: 0;
          background: #943310;
        }

        .contact-section-link {
          width: 100%;
          justify-content: space-between;
          gap: 14px;
          padding: 28px 12px;
        }

        .contact-section-title {
          font-size: clamp(3.3rem, 14vw, 4.1rem);
          line-height: 0.9;
        }

        .contact-section-icon {
          width: 48px;
          height: 48px;
          flex: 0 0 48px;
        }

        /* Same rule as the desktop canvas above: size to the composition, which
           on mobile is authored against 844px and scaled by --m.

           An earlier attempt used max(100svh, canvas) so a tall phone would get
           a hero reaching the fold instead of stopping short of it. That was
           the same mistake as pinning the desktop hero to 100svh — it buys a
           full-height section by padding it with nothing, leaving 502px of dead
           space between the standfirst and the metrics on a 1114px-tall
           viewport. A section that ends where its content ends is right; the
           next section showing above the fold is a scroll affordance, not a
           defect. */
        .hero-screen {
          height: calc(844 * var(--m));
        }

        .hero-nav-wrap {
          top: 14px;
          width: calc(100vw - 24px);
          max-width: 366px;
        }

        .hero-nav {
          min-height: 44px;
          padding: 7px 10px 7px 12px;
          border-radius: 14px;
          background: rgba(67, 54, 44, 0.84);
          backdrop-filter: blur(14px);
          -webkit-backdrop-filter: blur(14px);
        }

        .hero-logo img {
          width: 43px;
        }

        .hero-nav-links {
          display: none;
        }

        .hero-nav-cta {
          display: none;
        }

        .hero-menu-button {
          display: inline-flex;
          width: 44px;
          height: 44px;
          border-radius: 8px;
        }

        .hero-menu-icon span {
          width: 14px;
          height: 1.5px;
        }

        .home-mobile-menu {
          position: fixed;
          inset: 0;
          z-index: 200;
          display: flex;
          flex-direction: column;
          padding: 20px 24px 32px;
          background: #070e0b;
          transform: translateY(-100%);
          visibility: hidden;
          transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1), visibility 420ms;
        }

        body.home-mobile-menu-open .home-mobile-menu {
          transform: translateY(0);
          visibility: visible;
        }

        body.home-mobile-menu-open {
          overflow: hidden;
        }

        .home-mobile-menu-inner {
          display: flex;
          flex: 1;
          flex-direction: column;
        }

        .home-mobile-menu-topbar {
          display: flex;
          align-items: center;
          justify-content: space-between;
        }

        .home-mobile-menu-close {
          width: 44px;
          height: 44px;
          padding: 0;
          border: 0;
          background: transparent;
          color: var(--ivory);
          font-size: 28px;
          line-height: 1;
        }

        .home-mobile-menu-nav {
          display: flex;
          flex: 1;
          flex-direction: column;
          justify-content: center;
          gap: 8px;
        }

        .home-mobile-menu-link {
          padding: 14px 0;
          border-bottom: 1px solid var(--glass-border);
          color: var(--ivory);
          font-size: 30px;
          letter-spacing: -0.04em;
        }

        .home-mobile-menu-cta {
          display: flex;
          align-items: center;
          justify-content: center;
          min-height: 56px;
          border-radius: 14px;
          background: var(--cta);
          color: #fff5ee;
          font-size: 17px;
        }

        .hero-copy {
          left: 24px;
          top: var(--mobile-copy-top);
          width: calc(100vw - 48px);
          transform: none;
          text-align: left;
        }

        .hero-title {
          font-size: 37px;
          line-height: 0.92;
          max-width: 268px;
          font-weight: 600;
          letter-spacing: -0.07em;
        }

        .hero-title span {
          display: inline;
        }

        .hero-subtitle {
          margin-top: 12px;
          margin-left: 0;
          margin-right: 0;
          max-width: 308px;
          font-size: 14px;
          line-height: 1.32;
          letter-spacing: -0.025em;
          color: rgba(237, 208, 189, 0.76);
        }

        .hero-subtitle span {
          display: inline;
        }

        .hero-glow {
          left: 52%;
          top: var(--mobile-glow-top);
          width: min(82vw, 300px);
          height: min(64vw, 224px);
          filter: blur(62px);
          animation: mobile-glow-breathe 10s ease-in-out infinite;
        }

        .orbit-card {
          border-radius: 16px;
          box-shadow: 0 16px 30px rgba(0, 0, 0, 0.28);
          animation: none;
        }

        .metrics-section {
          padding: 34px 0;
          overflow: hidden;
        }

        .metrics-inner {
          width: 100%;
          overflow: hidden;
        }

        .metrics-row {
          display: flex;
          align-items: flex-end;
          gap: 44px;
          width: max-content;
          margin: 0;
          animation: metrics-mobile-marquee 30s linear infinite;
          will-change: transform;
        }

        .metric-item,
        .metric-item--mobile-duplicate {
          flex: 0 0 auto;
          justify-content: flex-start;
          align-items: flex-end;
          min-height: 0;
          gap: 16px;
          text-align: left;
          white-space: nowrap;
        }

        .metric-item--mobile-duplicate {
          display: flex;
        }

        .metric-value {
          gap: 4px;
        }

        .metric-main,
        .metric-affix {
          font-size: 52px;
          line-height: 0.96;
          letter-spacing: -0.04em;
        }

        .metric-affix.metric-percent {
          font-size: 32px;
          line-height: 0.96;
        }

        .metric-label {
          font-size: 32px;
          line-height: 0.96;
          letter-spacing: -0.04em;
        }

        .identity-section {
          min-height: auto;
          padding: 54px 0;
        }

        .identity-inner {
          width: 100%;
          display: block;
          gap: 0;
          transform: none;
        }

        .identity-composition {
          width: 100%;
          gap: 0;
        }

        .identity-copy {
          gap: 0;
          width: 100%;
          padding: 0 24px;
        }

        .identity-line {
          display: block;
          font-size: clamp(3.05rem, 12vw, 4rem);
          line-height: 0.9;
          letter-spacing: -0.08em;
        }

        .identity-line--split {
          width: auto;
        }

        .identity-brand {
          display: inline-flex;
          width: 82px;
          margin: 6px 0 2px;
          transform: none;
          opacity: 1;
        }

        .identity-stack {
          width: 100%;
          gap: 16px;
          padding: 34px 24px 0;
        }

        .identity-card,
        .identity-reveal {
          opacity: 1;
          transform: none;
        }

        .identity-card p {
          font-size: 18px;
          line-height: 1.2;
          font-weight: 400;
          color: rgba(237, 208, 189, 0.84);
          width: 100%;
          max-width: none;
          text-wrap: wrap;
        }

        .identity-section:hover::before,
        .identity-section:focus-within::before {
          opacity: 0;
        }

        .identity-section:hover .identity-inner,
        .identity-section:focus-within .identity-inner {
          transform: none;
        }

        .services-cta-row {
          grid-template-columns: 1fr;
          gap: 8px;
          height: auto;
          padding: 24px;
        }

        .services-cta-main {
          position: relative;
          display: block;
          height: auto;
        }

        .services-cta-hover-group {
          display: block;
          transform: none;
          width: 100%;
        }

        .services-cta-title {
          max-width: calc(100% - 44px);
          font-size: 24px;
          line-height: 1.234375;
          letter-spacing: -0.04em;
          font-weight: 700;
        }

        .services-cta-button {
          position: absolute;
          top: 0;
          left: auto;
          right: 0;
          z-index: 2;
          opacity: 1;
          transform: none;
          pointer-events: auto;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          width: 24px;
          height: 24px;
          min-height: 24px;
          min-width: 24px;
          flex: 0 0 24px;
          padding: 0;
          font-size: 0;
          line-height: 0;
          color: #943310;
          gap: 0;
          border-radius: 12px;
          background: transparent;
          overflow: hidden;
          transition:
            background-color 220ms ease,
            color 220ms ease,
            padding 220ms ease,
            gap 220ms ease;
        }

        .services-cta-button::before {
          content: "";
          display: block;
          width: 24px;
          height: 24px;
          flex: 0 0 24px;
          background:
            center / contain no-repeat
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' fill='none'%3E%3Cpath d='M49.7031 8.2832C26.8393 8.2832 8.2832 26.8393 8.2832 49.7031C8.2832 72.5669 26.8393 91.1231 49.7031 91.1231C72.5669 91.1231 91.1231 72.5669 91.1231 49.7031C91.1231 26.8393 72.5669 8.2832 49.7031 8.2832ZM71.4486 51.07C71.4486 52.7682 70.0403 54.1765 68.3421 54.1765C66.6439 54.1765 65.2356 52.7682 65.2356 51.07V38.5612L33.2594 70.5374C32.6381 71.1587 31.8511 71.4486 31.0642 71.4486C30.2772 71.4486 29.4902 71.1587 28.8689 70.5374C27.6677 69.3362 27.6677 67.348 28.8689 66.1469L60.8451 34.1707H48.3363C46.6381 34.1707 45.2298 32.7624 45.2298 31.0642C45.2298 29.366 46.6381 27.9577 48.3363 27.9577H68.3421C70.0403 27.9577 71.4486 29.366 71.4486 31.0642V51.07Z' fill='%23943310'/%3E%3C/svg%3E");
        }

        .services-cta-arrow {
          display: none;
        }

        .services-cta-copy {
          max-width: none;
          width: 100%;
          padding-top: 0;
          padding-bottom: 0;
          font-size: 16px;
          line-height: 1.234375;
          letter-spacing: -0.02em;
          text-align: justify;
          color: #af9a87;
        }

        .services-cta-row:hover .services-cta-hover-group,
        .services-cta-row:focus-within .services-cta-hover-group {
          transform: none;
        }

        .services-cta-row:hover .services-cta-button,
        .services-cta-row:focus-visible .services-cta-button,
        .services-cta-row:focus-within .services-cta-button {
          background: transparent;
        }

        .services-cta-row:active .services-cta-button,
        .services-cta-row:focus-visible .services-cta-button,
        .services-cta-row:focus-within .services-cta-button {
          min-width: 24px;
          padding: 0;
          font-size: 0;
          line-height: 0;
          gap: 0;
          color: #f0d0b7;
          background: transparent;
        }

        .services-cta-row:active .services-cta-button::before,
        .services-cta-row:focus-visible .services-cta-button::before,
        .services-cta-row:focus-within .services-cta-button::before,
        .services-cta-row:hover .services-cta-button::before {
          background-color: #f0d0b7;
        }

        .offer-inner {
          grid-template-columns: 1fr;
          gap: 16px;
          padding: 26px 12px 34px;
        }

        .offer-copy {
          order: 1;
          padding-right: 0;
        }

        .offer-video-trigger {
          order: 2;
          border-radius: 18px;
        }

        .offer-poster {
          aspect-ratio: 366 / 294;
        }

        .offer-kicker {
          font-size: 12px;
          margin-bottom: 10px;
          color: rgba(240, 208, 183, 0.72);
        }

        .offer-title {
          font-size: clamp(2.3rem, 10vw, 3rem);
          margin-bottom: 12px;
          max-width: 260px;
        }

        .offer-description {
          max-width: none;
          font-size: 13px;
          line-height: 1.4;
          color: #af9a87;
        }

        .offer-tags {
          display: none;
        }

        .process-inner {
          padding: 34px 12px 40px;
        }

        .process-hero {
          max-width: none;
          text-align: left;
          padding-top: 10px;
        }

        .process-title {
          font-size: clamp(2.55rem, 11vw, 3.2rem);
          max-width: 280px;
        }

        .process-subtitle {
          /* The base rule's max-width:100% is what kept this inside its column;
             a bare 320px here replaced that guard, so on a 320px screen the
             paragraph was wider than the padded container and got clipped. */
          max-width: min(320px, 100%);
          margin: 12px 0 0;
          font-size: 12px;
          line-height: 1.36;
        }

        .process-tags {
          position: absolute;
          inset: 0;
          display: block;
          margin-bottom: 0;
          pointer-events: none;
        }

        .process-tag {
          position: absolute;
          animation: none;
          min-height: 24px;
          padding: 0 9px;
          border-radius: 999px;
          /* 10px here, and on .project-card-tag below. These are prose the
             reader is meant to read, not glyphs, so they floor at 12px. */
          font-size: 12px;
          background: rgba(255, 245, 238, 0.76);
          color: rgba(7, 16, 13, 0.88);
        }

        .process-tag--smm {
          left: 0;
          top: 74px;
        }

        .process-tag--design {
          top: -2px;
          right: 34px;
        }

        .process-tag--events {
          top: 76px;
          right: 0;
        }

        .process-grid {
          grid-template-columns: 1fr;
          gap: 10px;
          margin-top: 24px;
        }

        .process-card {
          min-height: auto;
          background: #102018;
          border-radius: 14px;
        }

        .process-card::before,
        .process-card::after {
          display: none;
        }

        .process-card-inner {
          padding: 0;
          height: auto;
        }

        .process-card-body {
          position: relative;
          top: auto;
          right: auto;
          bottom: auto;
          left: auto;
          padding: 18px 18px 16px;
          gap: 10px;
        }

        .process-card-title {
          font-size: 18px;
          color: #f0d0b7;
        }

        .process-card-icon {
          width: 10px;
          height: 10px;
          background: #f0d0b7;
        }

        .process-card:hover .process-card-body,
        .process-card:focus-within .process-card-body {
          top: auto;
          right: auto;
          bottom: auto;
          left: auto;
        }

        .process-card:hover .process-card-title,
        .process-card:focus-within .process-card-title {
          color: #f0d0b7;
        }

        .process-card:hover .process-card-icon,
        .process-card:focus-within .process-card-icon {
          background: #f0d0b7;
        }

        .process-card-description {
          font-size: 12px;
          line-height: 1.36;
          color: rgba(240, 208, 183, 0.82);
          opacity: 1;
          transform: none;
        }

        .projects-section {
          height: auto;
          min-height: auto;
          display: block;
        }

        .projects-inner {
          grid-template-columns: 1fr;
          gap: 18px;
          padding: 34px 0 40px 12px;
          height: auto;
        }

        .projects-title {
          font-size: clamp(2.2rem, 10vw, 3rem);
        }

        .projects-description {
          margin-top: 12px;
          max-width: 320px;
          font-size: 12px;
          line-height: 1.36;
        }

        .projects-copy {
          max-width: none;
          padding-right: 12px;
        }

        .projects-marquee {
          width: 100%;
          min-height: auto;
          overflow-x: auto;
          overflow-y: hidden;
          padding-right: 12px;
        }

        .projects-marquee::before,
        .projects-marquee::after {
          display: none;
        }

        .projects-marquee-track {
          display: flex;
          gap: 12px;
          width: max-content;
          will-change: auto;
          transform: none !important;
        }

        .project-card {
          width: 282px;
          min-height: 0;
          height: 244px;
          flex: 0 0 282px;
        }

        .project-card[aria-hidden="true"] {
          display: none;
        }

        .project-card-content {
          width: auto;
          padding: 14px 16px 16px;
          transform: none;
        }

        .project-card-title {
          font-size: 22px;
        }

        .project-card-description {
          margin-top: 8px;
          font-size: 12px;
          line-height: 1.3;
        }

        .project-card-tags {
          margin-bottom: 10px;
          gap: 6px;
        }

        .project-card-tag {
          min-height: 22px;
          padding: 0 9px;
          border-radius: 6px;
          font-size: 12px;
        }

        .reachout-section {
          padding: 0 12px 0;
          background: #f3e5da;
        }

        .reachout-banner {
          grid-template-columns: 1fr;
          gap: 12px;
          height: auto;
          min-height: auto;
          padding: 22px 0 26px;
          border-radius: 0;
          background: transparent;
        }

        .reachout-copy {
          font-size: 13px;
          line-height: 1.42;
        }

        .reachout-copy strong {
          margin-top: 14px;
          font-size: 14px;
          line-height: 1.42;
        }

        .reachout-visual {
          width: 100%;
          min-height: 0;
          border-radius: 14px;
        }

        .reachout-hover {
          position: static;
          inset: auto;
          justify-content: center;
          gap: 0;
          min-height: 28px;
          padding: 0 16px;
          border-radius: 8px;
          background: #943310;
          opacity: 1;
          pointer-events: none;
          transform: none;
        }

        .reachout-hover-text {
          font-size: 12px;
          line-height: 1;
          letter-spacing: -0.03em;
        }

        .reachout-hover-icon {
          display: none;
        }

        .founders-showcase {
          /* Bottom padding must clear .founders-showcase-inner's
             translateY(40px). A transform shifts the cards visually but
             reserves no layout space, so with `0` here the second card landed
             exactly 40px outside the black section and overlapped the
             questions section below it. The desktop rule's 60px absorbed it,
             which is why this only showed on phones. */
          padding: 32px 12px 56px;
          min-height: auto;
          display: block;
        }

        .founders-showcase-copy {
          margin-bottom: 18px;
          text-align: left;
        }

        .founders-showcase-title {
          font-size: clamp(2.2rem, 10vw, 3rem);
        }

        .founders-showcase-description {
          margin-top: 12px;
          max-width: 320px;
          font-size: 12px;
          line-height: 1.36;
          color: rgba(216, 193, 177, 0.8);
        }

        .founders-showcase-grid {
          grid-template-columns: 1fr;
          gap: 12px;
        }

        .founder-card {
          min-height: 360px;
          height: 360px;
          border-radius: 14px;
        }

        .founder-card-content {
          padding: 18px 18px 16px;
          gap: 10px;
        }

        .founder-card-text {
          transform: none;
        }

        .founder-card-name {
          font-size: 16px;
        }

        .founder-card-role {
          margin-top: 6px;
          font-size: 12px;
        }

        .founder-card-link {
          opacity: 1;
          min-height: 30px;
          margin-top: 10px;
          padding: 0 10px;
          border-radius: 8px;
        }

        .founder-card-link-icon {
          width: 16px;
          height: 16px;
          font-size: 12px;
        }

        .founder-card-link-text {
          font-size: 12px;
        }

        .questions-section {
          padding: 38px 12px 30px;
        }

        .questions-inner {
          grid-template-columns: 1fr;
          gap: 18px;
        }

        .questions-copy {
          max-width: none;
        }

        .questions-title {
          max-width: 310px;
          font-size: clamp(3rem, 13vw, 4rem);
        }

        .questions-list {
          gap: 10px;
        }

        .question-toggle {
          padding: 18px 18px 18px 20px;
          gap: 14px;
        }

        .question-label {
          font-size: 16px;
          line-height: 1.22;
        }

        .question-item {
          border-radius: 14px;
        }

        .question-answer {
          padding: 0 20px 18px;
          font-size: 13px;
          line-height: 1.4;
        }      }

      @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
          animation-duration: 0.01ms !important;
          animation-iteration-count: 1 !important;
          transition-duration: 0.01ms !important;
          scroll-behavior: auto !important;
        }
      }