:root {
      --bg: #050505;
      --bg-soft: #0b0b0b;
      --text: #ffffff;
      --text-soft: rgba(255,255,255,.74);
      --text-dark: #050505;
      --text-dark-soft: rgba(5,5,5,.60);
      --line: rgba(255,255,255,.12);
      --line-dark: rgba(5,5,5,.12);
      --panel: rgba(255,255,255,.06);
      --panel-strong: rgba(255,255,255,.10);
      --white: #ffffff;
      --surface: #ffffff;
      --radius-xl: 34px;
      --radius-lg: 28px;
      --radius-md: 22px;
      --shadow-xl: 0 48px 140px rgba(0,0,0,.45);
      --shadow-lg: 0 32px 88px rgba(0,0,0,.22);
      --ease: cubic-bezier(.22,.61,.36,1);
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background: var(--bg);
      color: var(--text);
      overflow-x: hidden;
    }

    a { color: inherit; text-decoration: none; }
    img { max-width: 100%; display: block; }

    .header {
      position: fixed;
      inset: 0 0 auto 0;
      height: 78px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 28px;
      z-index: 200;
      background: rgba(5,5,5,0);
      border-bottom: 1px solid rgba(255,255,255,0);
      backdrop-filter: blur(0px);
      transition: background .35s var(--ease), border-color .35s var(--ease), backdrop-filter .35s var(--ease);
    }

    .header.is-scrolled {
      background: rgba(5,5,5,.88);
      border-bottom-color: rgba(255,255,255,.08);
      backdrop-filter: blur(18px);
    }
.nav {
      display: flex;
      align-items: center;
      gap: 22px;
      color: rgba(255,255,255,.78);
      font-size: .94rem;
    }

    .nav__pill {
      min-height: 40px;
      padding: 0 18px;
      display: inline-flex;
      align-items: center;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.06);
      backdrop-filter: blur(14px);
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      min-height: 34px;
      padding: 8px 14px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.055);
      backdrop-filter: blur(14px);
      color: rgba(255,255,255,.78);
      font-size: .73rem;
      font-weight: 700;
      letter-spacing: .18em;
      text-transform: uppercase;
      width: max-content;
      max-width: 100%;
    }

    .eyebrow::before {
      content: "";
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #fff;
      box-shadow: 0 0 0 8px rgba(255,255,255,.10);
    }

    .eyebrow--dark {
      color: var(--text-dark);
      background: rgba(5,5,5,.04);
      border-color: rgba(5,5,5,.12);
    }

    .eyebrow--dark::before {
      background: var(--bg);
      box-shadow: 0 0 0 8px rgba(5,5,5,.08);
    }

    .btn {
      min-height: 52px;
      padding: 0 22px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.08);
      color: #fff;
      font-weight: 700;
      letter-spacing: -.01em;
      backdrop-filter: blur(14px);
      transition: transform .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease);
    }

    .btn:hover { transform: translateY(-2px); background: rgba(255,255,255,.14); }
    .btn--white { background: #fff; border-color: #fff; color: #050505; }
    .btn--black { background: #050505; border-color: #050505; color: #fff; }

    .hero {
      position: relative;
      height: 255svh;
      background: var(--bg);
      isolation: isolate;
    }

    .hero__sticky {
      position: sticky;
      top: 0;
      height: 100svh;
      overflow: hidden;
      display: grid;
      place-items: center;
      padding: 0 24px;
    }

    .hero__bg {
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 50% 16%, rgba(255,255,255,.12), transparent 34%),
        radial-gradient(circle at 14% 76%, rgba(255,255,255,.06), transparent 26%),
        linear-gradient(180deg, rgba(255,255,255,.04), transparent 44%);
      z-index: -3;
    }

    .hero__grid {
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,.034) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.034) 1px, transparent 1px);
      background-size: 44px 44px;
      mask-image: radial-gradient(circle at center, black 0%, transparent 78%);
      opacity: .16;
      pointer-events: none;
      z-index: -2;
    }

    .hero__visual {
      position: absolute;
      left: 50%;
      top: 50%;
      width: min(1020px, calc(100vw - 48px));
      height: min(68svh, 640px);
      border-radius: var(--radius-xl);
      overflow: hidden;
      transform: translate3d(-50%, -44%, 0) scale(.84);
      box-shadow: var(--shadow-xl);
      background: #111;
      z-index: 0;
      will-change: transform, border-radius;
    }

    .hero__visual::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.28) 48%, rgba(0,0,0,.72)),
        url('https://images.unsplash.com/photo-1558655146-9f40138edfeb?auto=format&fit=crop&w=1800&q=85') center/cover no-repeat;
      transform: scale(var(--hero-image-scale, 1.08));
    }

    .hero__copy {
      position: relative;
      z-index: 4;
      width: min(1140px, 100%);
      min-height: 100svh;
      display: grid;
      place-items: center;
      text-align: center;
      padding-top: 0;
      will-change: transform, opacity;
      pointer-events: none;
    }

    .hero h1 {
      margin: 0;
      max-width: 1040px;
      font-size: clamp(3.2rem, 7.8vw, 8.8rem);
      line-height: .88;
      letter-spacing: -.078em;
      font-weight: 300;
      text-wrap: balance;
      text-shadow: 0 28px 90px rgba(0,0,0,.52);
    }

    .section {
      position: relative;
      isolation: isolate;
    }

    .section__content {
      width: min(1180px, calc(100vw - 48px));
      margin: 0 auto;
    }

    .method {
      height: 320svh;
      background: var(--bg);
      overflow: clip;
    }

    .method__sticky {
      position: sticky;
      top: 0;
      height: 100svh;
      overflow: hidden;
      display: grid;
      align-items: center;
      padding: 96px 0 38px;
    }

    .method__bg {
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 70% 42%, rgba(255,255,255,.10), transparent 24%),
        radial-gradient(circle at 82% 18%, rgba(255,255,255,.06), transparent 18%),
        linear-gradient(180deg, rgba(255,255,255,.03), transparent 48%);
      pointer-events: none;
    }

    .method__layout {
      position: relative;
      z-index: 2;
      width: min(1180px, calc(100vw - 48px));
      margin: 0 auto;
      display: grid;
      grid-template-columns: .9fr 1.1fr;
      gap: clamp(36px, 7vw, 100px);
      align-items: center;
    }

    .method__text {
      max-width: 560px;
    }

    .method__text h2 {
      max-width: 10ch;
    }

    .method-line {
      opacity: 0;
      transform: translate3d(-82px, 24px, 0);
      will-change: transform, opacity;
    }

    .method-line--block {
      display: block;
    }

    .method-line--eyebrow {
      display: inline-flex;
    }

    .method__text p.method-line {
      max-width: 620px;
    }

    .method__visual {
      position: relative;
      min-height: min(72svh, 680px);
      height: min(72svh, 680px);
    }

    .method__visual::after {
      content: "";
      position: absolute;
      right: 12%;
      top: 14%;
      width: min(280px, 30vw);
      aspect-ratio: 1;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(255,255,255,.14), rgba(255,255,255,.04) 42%, transparent 70%);
      filter: blur(8px);
      pointer-events: none;
    }

    .method-float-card {
      position: absolute;
      border-radius: 28px;
      overflow: hidden;
      background: #111;
      color: #fff;
      box-shadow: 0 30px 90px rgba(0,0,0,.24);
      border: 1px solid rgba(255,255,255,.10);
      opacity: 0;
      will-change: transform, opacity, filter;
    }

    .method-float-card--1 {
      left: 4%;
      top: 16%;
      width: min(320px, 28vw);
      height: min(230px, 28svh);
    }

    .method-float-card--2 {
      right: 2%;
      top: 8%;
      width: min(270px, 24vw);
      height: min(200px, 24svh);
    }

    .method-float-card--3 {
      left: 12%;
      bottom: 6%;
      width: min(260px, 23vw);
      height: min(220px, 25svh);
    }

    .method-float-card--4 {
      right: 2.2%;
      bottom: 1%;
      width: min(360px, 32vw);
      height: min(260px, 30svh);
    }

    .method-float-card__inner {
      position: relative;
      width: 100%;
      height: 100%;
      animation: none;transform-origin: center;
    }
.method-float-card__media {
      position: absolute;
      inset: 0;
    }

    .method-float-card__media::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.82)),
        var(--image, linear-gradient(135deg, #202020, #050505));
      background-size: cover;
      background-position: center;
      transform: scale(1.06);
    }

    .method-float-card__content {
      position: absolute;
      inset: auto 0 0 0;
      padding: 20px 20px 18px;
      z-index: 2;
    }

    .method-float-card__content b {
      display: inline-flex;
      margin-bottom: 10px;
      color: rgba(255,255,255,.70);
      font-size: .7rem;
      letter-spacing: .18em;
      text-transform: uppercase;
      font-weight: 700;
    }

    .method-float-card__content strong {
      display: block;
      font-size: clamp(1.15rem, 1.9vw, 1.9rem);
      line-height: .98;
      letter-spacing: -.04em;
      font-weight: 380;
    }

    .method-float-card__content span {
      display: block;
      margin-top: 10px;
      color: rgba(255,255,255,.74);
      line-height: 1.55;
      font-size: .92rem;
      max-width: 32ch;
    }

    .method-float-card,
    .method-float-card__inner,
    .method-float-card__content,
    .method-float-card__content b,
    .method-float-card__content strong,
    .method-float-card__content span {
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      transform-style: preserve-3d;
      -webkit-font-smoothing: antialiased;
    }


    @keyframes methodFloat {
      0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
      25% { transform: translate3d(0, -8px, 0) rotate(.6deg); }
      50% { transform: translate3d(0, 6px, 0) rotate(-.7deg); }
      75% { transform: translate3d(0, -4px, 0) rotate(.45deg); }
    }

    .method h2,
    .stack h2,
    .reveal-scene h2,
    .horizontal h2,
    .precision h2,
    .final h2 {
      margin: 18px 0 0;
      font-size: clamp(2.5rem, 5.3vw, 6.7rem);
      line-height: .92;
      letter-spacing: -.068em;
      font-weight: 300;
      text-wrap: balance;
    }

    .method__text p,
    .stack__text p,
    .reveal-scene__copy p,
    .horizontal__head p,
    .precision__head p,
    .final p {
      margin: 22px 0 0;
      max-width: 620px;
      color: var(--text-soft);
      font-size: clamp(1rem, 1.18vw, 1.13rem);
      line-height: 1.75;
    }

    .step-list {
      display: grid;
      gap: 16px;
    }

    .step-card {
      position: relative;
      padding: 22px 22px 22px 74px;
      border-radius: 24px;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.045);
      backdrop-filter: blur(16px);
      opacity: .42;
      transform: translateX(32px);
      transition: opacity .35s var(--ease), transform .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease);
    }

    .step-card.is-active {
      opacity: 1;
      transform: translateX(0);
      background: rgba(255,255,255,.10);
      border-color: rgba(255,255,255,.18);
    }

    .step-card__num {
      position: absolute;
      left: 20px;
      top: 20px;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.12);
      font-size: .82rem;
      color: rgba(255,255,255,.84);
    }

    .step-card strong {
      display: block;
      margin-bottom: 8px;
      font-size: clamp(1.15rem, 1.7vw, 1.72rem);
      font-weight: 320;
      letter-spacing: -.03em;
    }

    .step-card span {
      display: block;
      color: rgba(255,255,255,.62);
      line-height: 1.62;
      font-size: .98rem;
    }

    .stack {
      height: 420svh;
      background: var(--surface);
      color: var(--text-dark);
    }

    .stack__sticky {
      position: sticky;
      top: 0;
      min-height: 100svh;
      overflow: hidden;
      display: grid;
      align-items: center;
      padding: 100px 0 44px;
    }

    .stack__layout {
      width: min(1180px, calc(100vw - 48px));
      margin: 0 auto;
      display: grid;
      grid-template-columns: .92fr 1.08fr;
      gap: clamp(34px, 7vw, 100px);
      align-items: center;
    }

    .stack__text p,
    .precision__head p,
    .final p { color: var(--text-dark-soft); }

    .stack-stage {
      position: relative;
      height: min(72svh, 680px);
      perspective: 1900px;
      perspective-origin: 50% 78%;
    }

    .stack-card {
      position: absolute;
      left: 50%;
      top: 50%;
      width: min(390px, 29vw);
      height: min(54svh, 490px);
      overflow: hidden;
      border-radius: 30px;
      background: #111;
      color: #fff;
      box-shadow: var(--shadow-lg);
      transform-origin: center 92%;
      will-change: transform, opacity;
    }

    .stack-card::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.74)),
        var(--image, linear-gradient(135deg, #202020, #050505));
      background-size: cover;
      background-position: center;
      transform: scale(1.05);
    }

    .stack-card__body {
      position: absolute;
      inset: auto 0 0 0;
      padding: clamp(26px, 4vw, 46px);
    }

    .stack-card b,
    .h-card b {
      display: inline-flex;
      margin-bottom: 16px;
      color: rgba(255,255,255,.68);
      font-size: .72rem;
      letter-spacing: .18em;
      text-transform: uppercase;
      font-weight: 700;
    }

    .stack-card h3,
    .h-card h3,
    .precision-card h3 {
      margin: 0;
      max-width: 10ch;
      font-size: clamp(2rem, 4vw, 4.8rem);
      line-height: .96;
      letter-spacing: -.058em;
      font-weight: 320;
    }

    .stack-card p,
    .h-card p,
    .precision-card p {
      margin: 16px 0 0;
      max-width: 46ch;
      color: rgba(255,255,255,.72);
      line-height: 1.7;
      font-size: clamp(.96rem, 1.08vw, 1.05rem);
    }

    .reveal-scene {
      height: 920svh;
      background: var(--bg);
    }

    .reveal-scene__sticky {
      position: sticky;
      top: 0;
      height: 100svh;
      overflow: hidden;
      display: grid;
      place-items: center;
      padding: 24px;
    }

    .reveal-scene__media {
      position: absolute;
      left: 50%;
      top: 50%;
      width: min(1060px, calc(100vw - 48px));
      height: min(72svh, 650px);
      border-radius: var(--radius-xl);
      overflow: hidden;
      transform: translate(-50%, -50%);
      box-shadow: var(--shadow-xl);
      background: #121212;
      will-change: width, height, border-radius;
    }

    .reveal-scene__cover {
      position: absolute;
      inset: 0;
      z-index: 4;
      background:
        linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.78)),
        url('https://images.unsplash.com/photo-1518005020951-eccb494ad742?auto=format&fit=crop&w=1800&q=85') center/cover no-repeat;
      transform: scale(var(--reveal-image-scale, 1.04));
      will-change: opacity, transform;
    }

    .reveal-scene__web {
      position: absolute;
      inset: 0;
      z-index: 1;
      background: #ffffff;
      color: #050505;
      opacity: 0;
      overflow: hidden;
      will-change: opacity;
    }

    .reveal-webpage {
      width: 100%;
      min-height: 185%;
      padding: clamp(26px, 4vw, 58px);
      will-change: transform;
    }

    .reveal-webpage__nav {
      height: 58px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid rgba(5,5,5,.12);
      font-size: .82rem;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: rgba(5,5,5,.62);
    }

    .reveal-webpage__brand {
      color: #050505;
      font-weight: 720;
      letter-spacing: -.04em;
      font-size: 1rem;
      text-transform: none;
    }

    .reveal-webpage__hero {
      min-height: 58svh;
      display: grid;
      align-items: end;
      padding: clamp(42px, 8vw, 110px) 0 clamp(28px, 5vw, 70px);
      border-bottom: 1px solid rgba(5,5,5,.12);
    }

    .reveal-webpage__hero h3 {
      margin: 0;
      max-width: 930px;
      font-size: clamp(3.2rem, 8vw, 9rem);
      line-height: .86;
      letter-spacing: -.08em;
      font-weight: 300;
    }

    .reveal-webpage__hero p {
      margin: 26px 0 0;
      max-width: 610px;
      color: rgba(5,5,5,.62);
      line-height: 1.75;
      font-size: clamp(1rem, 1.18vw, 1.15rem);
    }

    .reveal-webpage__chapter {
      padding: clamp(58px, 6vw, 92px) 0 clamp(64px, 8vw, 108px);
      display: grid;
      gap: clamp(22px, 3vh, 34px);
      min-height: calc(100svh - 58px);
      align-content: start;
    }

    .reveal-chapter__head {
      display: grid;
      gap: 14px;
      max-width: 740px;
    }

    .reveal-chapter__head small {
      display: inline-flex;
      width: max-content;
      color: rgba(5,5,5,.52);
      font-size: .74rem;
      font-weight: 700;
      letter-spacing: .18em;
      text-transform: uppercase;
    }

    .reveal-chapter__head h4 {
      margin: 0;
      max-width: 12ch;
      font-size: clamp(2.3rem, 4.8vw, 5.6rem);
      line-height: .90;
      letter-spacing: -.07em;
      font-weight: 300;
      color: #050505;
    }

    .reveal-chapter__head p {
      margin: 0;
      max-width: 670px;
      color: rgba(5,5,5,.62);
      line-height: 1.75;
      font-size: clamp(1rem, 1.08vw, 1.12rem);
    }

    .reveal-chapter-card {
      position: relative;
      min-height: clamp(300px, 42svh, 366px);
      border-radius: 30px;
      overflow: hidden;
      background: #111;
      color: #fff;
      box-shadow: 0 28px 80px rgba(0,0,0,.14);
      isolation: isolate;
    }

    .reveal-chapter-card::before {
      content: none;
    }

    .reveal-chapter-card__scroller {
      position: absolute;
      inset: 0;
      z-index: 0;
      display: flex;
      flex-direction: column;
      height: calc(var(--reveal-slide-count, 5) * 100%);
      overflow: visible;
      transform: translate3d(0, 0, 0);
      will-change: transform;
    }

    .reveal-chapter-card__slide {
      position: relative;
      inset: auto;
      flex: 0 0 calc(100% / var(--reveal-slide-count, 5));
      min-height: 0;
      overflow: hidden;
      opacity: 1;
      background:
        linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.18)),
        var(--image, linear-gradient(135deg, #202020, #050505));
      background-size: cover;
      background-position: center;
      transform: scale(var(--chapter-slide-scale, 1.035));
      transform-origin: center;
      will-change: transform;
    }

    .reveal-chapter-card__slide:nth-child(2) { background-position: center 42%; }
    .reveal-chapter-card__slide:nth-child(3) { background-position: center 58%; }
    .reveal-chapter-card__slide:nth-child(4) { background-position: center 48%; }
    .reveal-chapter-card__slide:nth-child(5) { background-position: center 55%; }

    .reveal-chapter-card__slide::after {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 55% 22%, rgba(255,255,255,.10), transparent 36%),
        linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.18));
      pointer-events: none;
    }

    .reveal-chapter-card::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      background:
        linear-gradient(90deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.50) 34%, rgba(0,0,0,.08) 70%, rgba(0,0,0,.28) 100%),
        linear-gradient(180deg, rgba(0,0,0,.46) 0%, rgba(0,0,0,.04) 18%, rgba(0,0,0,.08) 58%, rgba(0,0,0,.84) 100%);
    }

    .reveal-chapter-card__body {
      position: absolute;
      inset: auto 0 0 0;
      padding: clamp(28px, 4vw, 42px);
      z-index: 2;
      max-width: 620px;
    }

    .reveal-chapter-card__body b {
      display: inline-flex;
      margin-bottom: 12px;
      color: rgba(255,255,255,.70);
      font-size: .74rem;
      letter-spacing: .18em;
      text-transform: uppercase;
      font-weight: 700;
    }

    .reveal-chapter-card__body strong {
      display: block;
      font-size: clamp(2.2rem, 4vw, 4.7rem);
      line-height: .92;
      letter-spacing: -.06em;
      font-weight: 320;
    }

    .reveal-chapter-card__body p {
      margin: 16px 0 0;
      max-width: 42ch;
      color: rgba(255,255,255,.74);
      line-height: 1.72;
      font-size: clamp(.98rem, 1.06vw, 1.06rem);
    }

    .reveal-webpage__footer {
      min-height: 44svh;
      display: grid;
      align-items: center;
      border-top: 1px solid rgba(5,5,5,.12);
    }

    .reveal-webpage__footer h3 {
      margin: 0;
      max-width: 780px;
      font-size: clamp(2.8rem, 6vw, 7rem);
      line-height: .88;
      letter-spacing: -.07em;
      font-weight: 300;
    }

    .reveal-webpage__footer--conversion {
      align-items: center;
    }

    .reveal-conversion {
      max-width: 940px;
      display: grid;
      gap: 22px;
    }

    .reveal-conversion__label {
      display: inline-flex;
      width: max-content;
      color: rgba(5,5,5,.52);
      font-size: .74rem;
      font-weight: 750;
      letter-spacing: .18em;
      text-transform: uppercase;
    }

    .reveal-conversion h3 {
      max-width: 920px;
    }

    .reveal-conversion p {
      margin: 0;
      max-width: 680px;
      color: rgba(5,5,5,.62);
      font-size: clamp(1rem, 1.12vw, 1.14rem);
      line-height: 1.72;
    }

    .reveal-conversion__actions {
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
      margin-top: 8px;
    }

    .reveal-conversion__btn {
      min-height: 48px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0 20px;
      border-radius: 999px;
      font-size: .95rem;
      font-weight: 650;
      letter-spacing: -.01em;
      transition: transform .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
    }

    .reveal-conversion__btn:hover {
      transform: translateY(-2px);
    }

    .reveal-conversion__btn--dark {
      background: #050505;
      border: 1px solid #050505;
      color: #fff;
    }

    .reveal-conversion__btn--light {
      background: transparent;
      border: 1px solid rgba(5,5,5,.16);
      color: #050505;
    }

    .reveal-conversion__btn--light:hover {
      background: rgba(5,5,5,.045);
      border-color: rgba(5,5,5,.26);
    }

    .reveal-split {
      position: absolute;
      inset: 0;
      z-index: 3;
      pointer-events: none;
      opacity: 0;
      will-change: opacity;
    }

    .reveal-split__pane {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 50.2%;
      overflow: hidden;
      background: #121212;
      will-change: transform, opacity;
      box-shadow: 0 0 80px rgba(0,0,0,.24);
    }

    .reveal-split__pane--left {
      left: 0;
      transform-origin: left center;
    }

    .reveal-split__pane--right {
      right: 0;
      transform-origin: right center;
    }

    .reveal-split__pane::before {
      content: "";
      position: absolute;
      inset: 0;
      width: 200%;
      background:
        linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.78)),
        url('https://images.unsplash.com/photo-1518005020951-eccb494ad742?auto=format&fit=crop&w=1800&q=85') center/cover no-repeat;
      transform: scale(var(--reveal-image-scale, 1.04));
      will-change: transform;
    }

    .reveal-split__pane--left::before {
      left: 0;
      background-position: center;
    }

    .reveal-split__pane--right::before {
      right: 0;
      background-position: center;
    }

    .reveal-scene__copy,
    .reveal-scene__result {
      position: relative;
      z-index: 5;
      width: min(980px, calc(100vw - 48px));
      text-align: center;
      will-change: transform, opacity;
      pointer-events: none;
    }

    .reveal-scene__copy p,
    .reveal-scene__result p {
      margin-left: auto;
      margin-right: auto;
    }

    .reveal-scene__result {
      opacity: 0;
      transform: translateY(40px);
      padding: clamp(24px, 4vw, 44px);
      border-radius: 30px;
      background: rgba(5,5,5,.58);
      border: 1px solid rgba(255,255,255,.10);
      backdrop-filter: blur(18px);
    }

    .horizontal {
      height: 410svh;
      background: var(--bg);
    }

    .horizontal__sticky {
      position: sticky;
      top: 0;
      height: 100svh;
      overflow: hidden;
      display: flex;
      align-items: center;
    }

    .horizontal__head {
      position: absolute;
      left: clamp(26px, 4vw, 58px);
      top: clamp(108px, 15.1vh, 152px);
      z-index: 4;
      width: min(560px, calc(100vw - 48px));
    }

    .horizontal__track {
      display: flex;
      gap: 24px;
      padding: 0 clamp(26px, 4vw, 58px);
      will-change: transform;
    }

    .h-card {
      position: relative;
      flex: 0 0 min(72vw, 780px);
      height: min(62svh, 580px);
      overflow: hidden;
      border-radius: 30px;
      background: #111;
      box-shadow: 0 34px 84px rgba(0,0,0,.34);
    }

    .h-card::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.74)),
        var(--image, linear-gradient(135deg, #202020, #050505));
      background-size: cover;
      background-position: center;
      transform: scale(1.04);
    }

    .h-card__body {
      position: absolute;
      inset: auto 0 0 0;
      padding: clamp(28px, 4vw, 48px);
    }

    .precision {
      background: var(--surface);
      color: var(--text-dark);
      padding: 120px 0 140px;
      overflow: hidden;
    }

    .precision__head {
      width: min(1060px, calc(100vw - 48px));
      margin: 0 auto;
      text-align: center;
    }

    .precision__head p {
      margin-left: auto;
      margin-right: auto;
    }

    .precision-carousel-wrap {
      width: min(1180px, calc(100vw - 48px));
      margin: 68px auto 0;
      position: relative;
      perspective: 1800px;
    }

    .precision-carousel {
      position: relative;
      height: min(61svh, 594px);
      min-height: 468px;
      transform-style: preserve-3d;
    }

    .precision-slide {
      position: absolute;
      left: 50%;
      top: 50%;
      width: min(378px, 31vw);
      min-width: 234px;
      height: min(50svh, 468px);
      transform-style: preserve-3d;
      border-radius: 30px;
      overflow: hidden;
      background: #111;
      color: #fff;
      box-shadow: 0 34px 90px rgba(0,0,0,.18);
      will-change: transform, opacity, filter;
      transition:
        transform .8s var(--ease),
        opacity .8s var(--ease),
        filter .8s var(--ease),
        box-shadow .8s var(--ease);
      cursor: pointer;
    }

    .precision-slide::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.80)),
        var(--image, linear-gradient(135deg, #202020, #050505));
      background-size: cover;
      background-position: center;
      transform: scale(1.05);
    }

    .precision-slide__body {
      position: absolute;
      inset: auto 0 0 0;
      padding: 30px;
      z-index: 2;
    }

    .precision-slide b {
      display: inline-flex;
      margin-bottom: 14px;
      color: rgba(255,255,255,.68);
      font-size: .72rem;
      letter-spacing: .18em;
      text-transform: uppercase;
      font-weight: 700;
    }

    .precision-slide p {
      margin-top: 14px;
      color: rgba(255,255,255,.74);
      line-height: 1.7;
      max-width: 34ch;
    }

    .precision-controls {
      margin-top: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      flex-wrap: wrap;
    }

    .precision-btn {
      width: 52px;
      height: 52px;
      border-radius: 999px;
      border: 1px solid rgba(5,5,5,.12);
      background: rgba(255,255,255,.74);
      color: #050505;
      display: inline-grid;
      place-items: center;
      font-size: 1rem;
      cursor: pointer;
      backdrop-filter: blur(12px);
      box-shadow: 0 14px 40px rgba(0,0,0,.08);
      transition: transform .25s var(--ease), background .25s var(--ease);
    }

    .precision-btn:hover {
      transform: translateY(-2px);
      background: #fff;
    }

    .precision-dots {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .precision-dot {
      width: 10px;
      height: 10px;
      border-radius: 999px;
      border: 0;
      padding: 0;
      background: rgba(5,5,5,.18);
      cursor: pointer;
      transition: transform .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
    }

    .precision-dot.is-active {
      background: #050505;
      transform: scale(1.15);
      box-shadow: 0 0 0 8px rgba(5,5,5,.08);
    }

    .final {
      min-height: 100svh;
      display: grid;
      place-items: center;
      padding: 120px 24px;
      background: #ffffff;
      color: var(--text-dark);
      text-align: center;
    }

    .final__panel {
      width: min(1040px, 100%);
      padding: clamp(30px, 5vw, 58px);
      border-radius: 34px;
      background: #ffffff;
      border: 1px solid rgba(5,5,5,.10);
      box-shadow: 0 36px 120px rgba(0,0,0,.08);
      backdrop-filter: blur(14px);
    }

    .final h2 {
      margin-left: auto;
      margin-right: auto;
      max-width: 900px;
      font-size: clamp(3rem, 7vw, 8.4rem);
      line-height: .88;
      letter-spacing: -.078em;
    }

    .title-hover-effect {
      position: relative;
      cursor: default;
      user-select: none;
    }

    .title-hover-effect .title-hover__line {
      display: block;
    }

    .title-hover-effect .title-hover__char {
      display: inline-block;
      transform-origin: 50% 78%;
      will-change: transform, filter, opacity;
      transition: opacity .22s ease;
      backface-visibility: hidden;
      -webkit-font-smoothing: antialiased;
    }

    .title-hover-effect .title-hover__space {
      display: inline;
      white-space: pre;
    }

    .final p {
      margin-left: auto;
      margin-right: auto;
      max-width: 660px;
    }

    .final__actions {
      margin-top: 34px;
      display: flex;
      justify-content: center;
      gap: 12px;
      flex-wrap: wrap;
    }

    @media (max-width: 980px) {
      .method__layout,
      .stack__layout,
      .precision__grid { grid-template-columns: 1fr; }
      .precision__grid { gap: 18px; }
      .precision-card { min-height: 380px; }
    }

    @media (max-width: 900px) {
      .nav a:not(.nav__pill) { display: none; }

      .method,
      .stack,
      .horizontal { height: auto; }

      .method__sticky,
      .stack__sticky,
      .horizontal__sticky {
        position: relative;
        height: auto;
        min-height: auto;
        overflow: visible;
      }

      .method__sticky,
      .stack__sticky { padding: 110px 0 70px; }

      .method__visual {
        min-height: 470px;
        height: 470px;
        margin-top: 14px;
      }

      .stack-stage {
        height: auto;
        display: grid;
        gap: 18px;
        perspective: none;
      }

      .stack-card {
        position: relative;
        left: auto;
        top: auto;
        width: 100%;
        min-height: 430px;
        transform: none !important;
        opacity: 1 !important;
      }

      .horizontal__sticky {
        overflow-x: auto;
        padding: 190px 0 70px;
      }

      .horizontal__track { transform: none !important; }
      .h-card { flex-basis: min(86vw, 560px); }
      .reveal-scene { height: 680svh; }

      .reveal-chapter-card {
        min-height: 300px;
      }

      .reveal-chapter__head h4 {
        max-width: 100%;
      }

      .precision-carousel-wrap {
        perspective: none;
      }

      .method-float-card--1 {
        left: 2%;
        width: min(270px, 58vw);
        height: 190px;
      }

      .method-float-card--2 {
        right: 1%;
        width: min(220px, 48vw);
        height: 170px;
      }

      .method-float-card--3 {
        left: 10%;
        width: min(220px, 48vw);
        height: 180px;
      }

      .method-float-card--4 {
        right: 4%;
        width: min(300px, 64vw);
        height: 220px;
      }

      .precision-carousel {
        min-height: 396px;
        height: 396px;
      }

      .precision-slide {
        width: min(288px, 67vw);
        min-width: 216px;
        height: 360px;
      }
    }

    @media (max-width: 640px) {
      .header { padding: 0 18px; }
      .nav__pill { display: none; }
      .hero__visual,
      .reveal-scene__media { width: calc(100vw - 24px); border-radius: 22px; }
      .h-card,
      .stack-card,
      .precision-slide,
      .final__panel { border-radius: 22px; }
      .hero h1 {
        font-size: clamp(3rem, 15vw, 5.8rem);
        letter-spacing: -.075em;
      }
    }

    @media (max-width: 640px) {
      .reveal-conversion {
        gap: 18px;
      }

      .reveal-conversion__actions {
        align-items: stretch;
      }

      .reveal-conversion__btn {
        width: 100%;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      * { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
    }


    /* Harmonisation typo page avec l'index PIX|WEB */
    .sur-mesure-page .hero h1 {
      max-width: 1060px;
      font-size: clamp(2.8rem, 5.2vw, 6.2rem);
      line-height: 1.02;
      letter-spacing: -.045em;
      font-weight: 300;
    }

    .sur-mesure-page .method h2,
    .sur-mesure-page .stack h2,
    .sur-mesure-page .reveal-scene h2,
    .sur-mesure-page .horizontal h2,
    .sur-mesure-page .precision h2,
    .sur-mesure-page .final h2,
    .sur-mesure-page .reveal-webpage__hero h3,
    .sur-mesure-page .reveal-webpage__footer h3,
    .sur-mesure-page .reveal-chapter__head h4 {
      font-size: clamp(2.4rem, 4.2vw, 4.8rem);
      line-height: 1.08;
      letter-spacing: -.04em;
      font-weight: 300;
    }

    .sur-mesure-page .method__text p,
    .sur-mesure-page .stack__text p,
    .sur-mesure-page .reveal-scene__copy p,
    .sur-mesure-page .horizontal__head p,
    .sur-mesure-page .precision__head p,
    .sur-mesure-page .final p,
    .sur-mesure-page .reveal-webpage__hero p,
    .sur-mesure-page .reveal-chapter__head p {
      font-size: clamp(.98rem, 1.25vw, 1.14rem);
      line-height: 1.7;
      letter-spacing: 0;
    }

    .sur-mesure-page .eyebrow,
    .sur-mesure-page .eyebrow--dark {
      font-size: clamp(.68rem, .78vw, .78rem);
      font-weight: 700;
      letter-spacing: .22em;
    }

    .sur-mesure-page .stack-card h3,
    .sur-mesure-page .h-card h3,
    .sur-mesure-page .precision-slide h3,
    .sur-mesure-page .reveal-chapter-card__body strong {
      font-size: clamp(2.15rem, 3.05vw, 3.55rem);
      line-height: 1.06;
      letter-spacing: -.04em;
      font-weight: 300;
    }


    /* ─────────────────────────────────────────────
       Finition premium semi-carrée : moins d'arrondis, plus éditorial
    ───────────────────────────────────────────── */
    :root {
      --radius-xl: 18px;
      --radius-lg: 16px;
      --radius-md: 12px;
    }

    .hero__visual,
    .reveal-scene__media,
    .final__panel {
      border-radius: 18px !important;
    }

    .method-float-card,
    .stack-card,
    .reveal-chapter-card,
    .h-card,
    .precision-slide,
    .menu-panel {
      border-radius: 16px !important;
    }

    .eyebrow,
    .eyebrow--dark,
    .btn,
    .reveal-conversion__btn,
    .precision-btn,
    .login-link {
      border-radius: 12px !important;
    }

    .mega__img-wrap,
    .mega__carousel,
    .mega__carousel-slide,
    .burger__lines span {
      border-radius: 2px !important;
    }

    .precision-dot,
    .eyebrow::before,
    .eyebrow--dark::before,
    .step-card__num {
      border-radius: 50% !important;
    }

    @media (max-width: 640px) {
      .hero__visual,
      .reveal-scene__media,
      .final__panel {
        border-radius: 14px !important;
      }

      .method-float-card,
      .stack-card,
      .reveal-chapter-card,
      .h-card,
      .precision-slide,
        .menu-panel {
        border-radius: 14px !important;
      }
    }

  
    /* ─────────────────────────────────────────────
       Harmonisation boutons avec l'index PIX|WEB
       mêmes proportions, mêmes arrondis, mêmes transitions
    ───────────────────────────────────────────── */
    .sur-mesure-page .btn,
    .sur-mesure-page .reveal-conversion__btn {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      min-height: 54px !important;
      padding: 0 24px !important;
      border-radius: 999px !important;
      border: 1px solid transparent !important;
      font-weight: 600 !important;
      letter-spacing: .01em !important;
      font-size: inherit;
      line-height: 1;
      backdrop-filter: none !important;
      transition:
        transform .3s var(--ease),
        background-color .3s var(--ease),
        border-color .3s var(--ease),
        box-shadow .3s var(--ease) !important;
    }

    .sur-mesure-page .btn:hover,
    .sur-mesure-page .reveal-conversion__btn:hover {
      transform: translateY(-1px) !important;
    }

    .sur-mesure-page .btn--white {
      background: #ffffff !important;
      color: #111111 !important;
      border-color: transparent !important;
      box-shadow: 0 18px 34px rgba(255,255,255,.10) !important;
    }

    .sur-mesure-page .btn--white:hover {
      background: #ffffff !important;
      color: #111111 !important;
    }

    .sur-mesure-page .btn--black,
    .sur-mesure-page .reveal-conversion__btn--dark {
      background: #050505 !important;
      color: #ffffff !important;
      border-color: #050505 !important;
      box-shadow: none !important;
    }

    .sur-mesure-page .btn--black:hover,
    .sur-mesure-page .reveal-conversion__btn--dark:hover {
      background: #050505 !important;
      color: #ffffff !important;
      border-color: #050505 !important;
    }

    .sur-mesure-page .reveal-conversion__btn--light {
      background: transparent !important;
      color: #050505 !important;
      border-color: rgba(5,5,5,.14) !important;
      box-shadow: none !important;
    }

    .sur-mesure-page .reveal-conversion__btn--light:hover {
      background: rgba(5,5,5,.04) !important;
      color: #050505 !important;
      border-color: rgba(5,5,5,.22) !important;
    }

    .sur-mesure-page .precision-btn {
      width: 38px !important;
      height: 38px !important;
      min-width: 38px !important;
      min-height: 38px !important;
      padding: 0 !important;
      border-radius: 50% !important;
      border: 1px solid #ddd !important;
      background: transparent !important;
      color: #111 !important;
      box-shadow: none !important;
      backdrop-filter: none !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      transition: background .2s, border-color .2s, color .2s !important;
    }

    .sur-mesure-page .precision-btn:hover {
      background: #111 !important;
      color: #fff !important;
      border-color: #111 !important;
      transform: none !important;
    }

    .sur-mesure-page .precision-dot {
      width: 8px !important;
      height: 8px !important;
      border-radius: 999px !important;
      background: #ccc !important;
      box-shadow: none !important;
      transform: none !important;
      transition: background .3s, width .3s !important;
    }

    .sur-mesure-page .precision-dot.is-active {
      width: 24px !important;
      background: #050505 !important;
      box-shadow: none !important;
      transform: none !important;
    }
/* ─────────────────────────────────────────────
       Ajustement final : boutons alignés sur index.html
       Tailles + couleurs reprises des boutons de l'index PIX|WEB
    ───────────────────────────────────────────── */

    .sur-mesure-page .btn,
    .sur-mesure-page .reveal-conversion__btn {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      min-height: 46px !important;
      padding: 0 22px !important;
      border-radius: 999px !important;
      font-size: clamp(.9rem, 1vw, 1rem) !important;
      font-weight: 700 !important;
      letter-spacing: -.015em !important;
      transition: transform .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease) !important;
      pointer-events: auto !important;
      backdrop-filter: none !important;
    }

    .sur-mesure-page .btn:hover,
    .sur-mesure-page .reveal-conversion__btn:hover {
      transform: translateY(-1px) !important;
    }

    .sur-mesure-page .btn--black,
    .sur-mesure-page .reveal-conversion__btn--dark {
      background: #0071e3 !important;
      color: #ffffff !important;
      border: 1px solid rgba(255, 255, 255, .16) !important;
      box-shadow: 0 18px 38px rgba(0, 113, 227, .30) !important;
    }

    .sur-mesure-page .btn--black:hover,
    .sur-mesure-page .reveal-conversion__btn--dark:hover {
      background: #147ce5 !important;
      color: #ffffff !important;
      border-color: rgba(255, 255, 255, .16) !important;
      box-shadow: 0 22px 44px rgba(0, 113, 227, .36) !important;
    }

    .sur-mesure-page .reveal-conversion__btn--light,
    .sur-mesure-page .btn--secondary-index {
      background: transparent !important;
      color: #050505 !important;
      border: 1px solid rgba(5, 5, 5, .16) !important;
      box-shadow: none !important;
    }

    .sur-mesure-page .reveal-conversion__btn--light:hover,
    .sur-mesure-page .btn--secondary-index:hover {
      background: rgba(5, 5, 5, .045) !important;
      color: #050505 !important;
      border-color: rgba(5, 5, 5, .26) !important;
      box-shadow: none !important;
    }

    .sur-mesure-page .precision-btn {
      width: 38px !important;
      height: 38px !important;
      min-width: 38px !important;
      min-height: 38px !important;
      padding: 0 !important;
      border-radius: 50% !important;
      border: 1px solid rgba(0, 0, 0, .16) !important;
      background: rgba(255, 255, 255, .72) !important;
      color: #111111 !important;
      font-size: 1.1rem !important;
      cursor: pointer !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      box-shadow: none !important;
      backdrop-filter: none !important;
      transition: background .2s, border-color .2s, color .2s !important;
    }

    .sur-mesure-page .precision-btn:hover {
      background: #050505 !important;
      color: #ffffff !important;
      border-color: #050505 !important;
      transform: none !important;
    }

  

/* ===== Garde-fou intégration PIX|WEB centralisée ===== */
.sur-mesure-page .site-header .brand {
  font-size: initial !important;
  font-weight: initial !important;
  letter-spacing: 0 !important;
}

.sur-mesure-page .site-header .brand__logo {
  display: block !important;
  width: clamp(146px, 14vw, 200px) !important;
  max-width: clamp(146px, 14vw, 200px) !important;
  height: auto !important;
  object-fit: contain !important;
}

@media (max-width: 860px) {
  .sur-mesure-page .site-header .brand__logo {
    width: clamp(138px, 38vw, 176px) !important;
    max-width: clamp(138px, 38vw, 176px) !important;
  }
}

/* ===== FIX SUR MESURE — hero isolé du hero global index ===== */
.sur-mesure-page .hero {
  --hero-cards-h: initial !important;
  --hero-card-center-h: initial !important;
  --hero-cards-black-offset: 0px !important;
  position: relative !important;
  height: 255svh !important;
  min-height: 0 !important;
  display: block !important;
  align-items: initial !important;
  justify-content: initial !important;
  padding: 0 !important;
  padding-bottom: 0 !important;
  overflow: visible !important;
  isolation: isolate !important;
  background: var(--bg) !important;
}

.sur-mesure-page .hero__sticky {
  position: sticky !important;
  top: 0 !important;
  height: 100svh !important;
  min-height: 0 !important;
  overflow: hidden !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 24px !important;
}

.sur-mesure-page .hero__bg {
  position: absolute !important;
  inset: 0 !important;
  z-index: -3 !important;
  overflow: visible !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 50% 16%, rgba(255,255,255,.12), transparent 34%),
    radial-gradient(circle at 14% 76%, rgba(255,255,255,.06), transparent 26%),
    linear-gradient(180deg, rgba(255,255,255,.04), transparent 44%) !important;
}

.sur-mesure-page .hero__bg::after,
.sur-mesure-page .hero__bg::before {
  content: none !important;
  display: none !important;
}

.sur-mesure-page .hero__copy {
  position: relative !important;
  inset: auto !important;
  z-index: 4 !important;
  width: min(1140px, 100%) !important;
  min-height: 100svh !important;
  display: grid !important;
  place-items: center !important;
  text-align: center !important;
  padding: 0 !important;
  margin: 0 auto !important;
  pointer-events: none !important;
}

.sur-mesure-page .hero__copy::before,
.sur-mesure-page .hero__copy::after {
  content: none !important;
  display: none !important;
}

.sur-mesure-page .hero__visual {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: min(1020px, calc(100vw - 48px)) !important;
  height: min(68svh, 640px) !important;
  min-height: 0 !important;
  border-radius: var(--radius-xl) !important;
  overflow: hidden !important;
  transform: translate3d(-50%, -44%, 0) scale(.84);
  box-shadow: var(--shadow-xl) !important;
  background: #111 !important;
  z-index: 0 !important;
  will-change: transform, border-radius !important;
}

.sur-mesure-page .hero h1 {
  margin: 0 !important;
  max-width: 1040px !important;
  font-size: clamp(3.2rem, 7.8vw, 8.8rem) !important;
  line-height: .88 !important;
  letter-spacing: -.078em !important;
  font-weight: 300 !important;
  text-wrap: balance !important;
  white-space: normal !important;
  text-align: center !important;
  color: #ffffff !important;
  text-shadow: 0 28px 90px rgba(0,0,0,.52) !important;
}

@media (max-width: 640px) {
  .sur-mesure-page .hero__sticky { padding: 0 12px !important; }
  .sur-mesure-page .hero__visual {
    width: calc(100vw - 24px) !important;
    border-radius: 22px !important;
  }
  .sur-mesure-page .hero h1 {
    font-size: clamp(3rem, 15vw, 5.8rem) !important;
    letter-spacing: -.075em !important;
  }
}

/* === PIXWEB TYPOGRAPHY PAGE LOCK START === */
.sur-mesure-page {
  font-family: var(--pix-font-main) !important;
}

.sur-mesure-page .hero h1 {
  font-family: var(--pix-font-main) !important;
  font-size: var(--pix-type-hero-size) !important;
  line-height: var(--pix-type-hero-line) !important;
  letter-spacing: var(--pix-type-hero-tracking) !important;
  font-weight: var(--pix-type-hero-weight) !important;
  white-space: normal !important;
}

.sur-mesure-page .method h2,
.sur-mesure-page .stack h2,
.sur-mesure-page .reveal-scene h2,
.sur-mesure-page .horizontal h2,
.sur-mesure-page .precision h2,
.sur-mesure-page .final h2,
.sur-mesure-page .reveal-webpage__hero h3,
.sur-mesure-page .reveal-webpage__footer h3,
.sur-mesure-page .reveal-chapter__head h4,
.sur-mesure-page .reveal-conversion h3 {
  font-family: var(--pix-font-main) !important;
  font-size: var(--pix-type-section-size) !important;
  line-height: var(--pix-type-section-line) !important;
  letter-spacing: var(--pix-type-section-tracking) !important;
  font-weight: var(--pix-type-section-weight) !important;
}

.sur-mesure-page .stack-card h3,
.sur-mesure-page .h-card h3,
.sur-mesure-page .precision-slide h3,
.sur-mesure-page .precision-card h3,
.sur-mesure-page .reveal-chapter-card__body strong,
.sur-mesure-page .method-float-card__content strong,
.sur-mesure-page .step-card strong {
  font-family: var(--pix-font-main) !important;
  font-size: var(--pix-type-card-title-size) !important;
  line-height: var(--pix-type-card-title-line) !important;
  letter-spacing: var(--pix-type-card-title-tracking) !important;
  font-weight: var(--pix-type-card-title-weight) !important;
}

.sur-mesure-page .faq-toggle,
.sur-mesure-page .pw-faq-title {
  font-family: var(--pix-font-main) !important;
  font-size: var(--pix-type-faq-title-size) !important;
  line-height: var(--pix-type-faq-title-line) !important;
  letter-spacing: var(--pix-type-faq-title-tracking) !important;
  font-weight: var(--pix-type-faq-title-weight) !important;
}

.sur-mesure-page .method__text p,
.sur-mesure-page .stack__text p,
.sur-mesure-page .reveal-scene__copy p,
.sur-mesure-page .horizontal__head p,
.sur-mesure-page .precision__head p,
.sur-mesure-page .final p,
.sur-mesure-page .reveal-webpage__hero p,
.sur-mesure-page .reveal-chapter__head p,
.sur-mesure-page .reveal-conversion p,
.sur-mesure-page .stack-card p,
.sur-mesure-page .h-card p,
.sur-mesure-page .precision-slide p {
  font-size: var(--pix-type-lead-size) !important;
  line-height: var(--pix-type-lead-line) !important;
  font-weight: var(--pix-type-lead-weight) !important;
  letter-spacing: 0 !important;
}

@media (max-width: 640px) {
  .sur-mesure-page .hero h1 {
    font-size: clamp(2.1rem, 11vw, 3rem) !important;
    line-height: 1.05 !important;
    letter-spacing: -.03em !important;
  }
}
/* === PIXWEB TYPOGRAPHY PAGE LOCK END === */