:root{
      --black: #0A0908;
      --panel: #161310;
      --panel-2: #1F1B16;
      --hairline: rgba(237,234,227,.12);
      --hairline-2: rgba(237,234,227,.06);
      --bone: #EDEAE3;
      --bone-mute: #B6B0A4;
      --dust: #6E685D;
      --champagne: #C9A36A;
      --amber: #FF6A2D;
      --sans: "Space Grotesk", "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      --body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      --serif: "Instrument Serif", "Times New Roman", serif;
      --ease: cubic-bezier(.2,.7,.2,1);
      --ease-cinema: cubic-bezier(.7,0,.3,1);
    }
    *{ box-sizing: border-box; margin:0; padding:0; }
    html{ scroll-behavior: smooth; }
    body{
      font-family: var(--body);
      background: var(--black);
      color: var(--bone);
      font-weight: 400;
      font-size: 16px;
      line-height: 1.5;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }
    a{ color: inherit; text-decoration: none; }
    img{ display: block; max-width:100%; }
    ::selection{ background: var(--champagne); color: var(--black); }

    /* Grain */
    body::before{
      content:"";
      position: fixed; inset:0; pointer-events:none; z-index:9990;
      background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 0.95 0 0 0 0 0.88 0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
      opacity:.06;
      mix-blend-mode: screen;
    }

    /* Section progress indicator (right edge) */
    .progress{
      position: fixed; right: 24px; top: 50%;
      transform: translateY(-50%);
      z-index: 90;
      display:flex; flex-direction: column; gap: 14px;
      mix-blend-mode: difference;
    }
    .progress a{
      position: relative;
      width: 24px; height: 1px;
      background: rgba(237,234,227,.35);
      transition: width .3s var(--ease), background .3s var(--ease);
    }
    .progress a:hover, .progress a.active{ width: 40px; background: var(--champagne); }
    .progress a span{
      position: absolute; right: calc(100% + 10px); top: 50%;
      transform: translateY(-50%);
      font-family: var(--sans); font-size: 10px; letter-spacing: .26em; text-transform: uppercase;
      color: var(--bone); opacity: 0; transition: opacity .3s var(--ease);
      white-space: nowrap;
    }
    .progress a:hover span, .progress a.active span{ opacity: 1; }

    /* === NAV === */
    nav.top{
      position: fixed; top:0; left:0; right:0; z-index: 100;
      padding: 18px 32px;
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      column-gap: 40px;
      align-items: center;
      background: rgba(10,9,8,.55);
      backdrop-filter: blur(22px) saturate(1.3);
      -webkit-backdrop-filter: blur(22px) saturate(1.3);
      border-bottom: 1px solid var(--hairline);
      transform: translateY(-100%);
      transition: transform .9s var(--ease-cinema) .8s;
    }
    nav.top.is-loaded{ transform: translateY(0); }
    nav.top .brand{ display: flex; align-items: center; justify-self: center; }
    nav.top .brand img{ width: 110px; height: 110px; filter: invert(1); transition: transform .8s var(--ease); }
    nav.top .brand:hover img{ transform: rotate(-12deg) scale(1.06); }
    nav.top .links{ display: flex; gap: 32px; }
    nav.top .links-l{ justify-self: end; }
    nav.top .links-r{ justify-self: start; }
    nav.top .links a{ font-family: var(--sans); font-size: 13px; letter-spacing: .02em; color: var(--bone); position: relative; padding-bottom: 4px; }
    nav.top .links a::after{ content:""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0; background: var(--champagne); transition: width .5s var(--ease); }
    nav.top .links a:hover::after{ width: 100%; }

    /* === HERO — Cinema Frame === */
    .hero{
      position: relative;
      min-height: 100vh;
      overflow: hidden;
      display: flex; flex-direction: column;
    }
    .hero .bg{
      position: absolute; inset: 0; z-index: -1;
      background-image: url("https://images.unsplash.com/photo-1777703304508-29f9e5e7e592?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&w=2400&q=80");
      background-size: cover; background-position: center;
      transform: scale(1.18);
      animation: heroBgZoom 18s ease-out forwards;
      filter: brightness(.85);
      will-change: transform;
    }
    @keyframes heroBgZoom{ to{ transform: scale(1); } }
    .hero .bg::after{
      content:""; position: absolute; inset: 0;
      background:
        linear-gradient(180deg, rgba(10,9,8,.4) 0%, rgba(10,9,8,0) 25%, rgba(10,9,8,.05) 55%, rgba(10,9,8,.85) 100%),
        radial-gradient(ellipse 60% 50% at 85% 25%, rgba(201,163,106,.18), transparent 70%);
    }

    /* Topbar — eyebrow + meta row at top of frame */
    .hero .spacer{ flex: 1; }

    /* Centered headline + lede + actions, anchored lower-third */
    .hero .bottom{
      width: 100%;
      padding: 0 48px 60px;
      text-align: center;
    }
    .hero h1{
      font-family: var(--sans); font-weight: 500;
      font-size: clamp(48px, 8vw, 160px);
      letter-spacing: -.035em; line-height: .94;
      text-transform: uppercase;
      width: 100%;
      margin: 0;
    }
    .hero h1 em{ font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--champagne); }

    .hero h1 .line{
      display: block;
      white-space: nowrap;
      text-align: center;
      opacity: 0;
      will-change: transform, opacity;
    }
    .hero h1 .line-l{
      transform: translateX(-110vw);
      animation: heroSlideInLeft 1.7s var(--ease-cinema) 1.0s forwards;
    }
    .hero h1 .line-r{
      transform: translateX(110vw);
      animation: heroSlideInRight 1.7s var(--ease-cinema) 1.25s forwards;
    }
    @keyframes heroSlideInLeft{ to{ transform: translateX(0); opacity: 1; } }
    @keyframes heroSlideInRight{ to{ transform: translateX(0); opacity: 1; } }

    .hero .footer-row{
      margin: 56px auto 0;
      padding: 32px 32px 0;
      max-width: 1500px;
      border-top: 1px solid var(--hairline);
      display: flex; flex-direction: column;
      gap: 32px; align-items: center;
      opacity: 0; transform: translateY(28px);
      animation: heroFadeUp 1.2s var(--ease-cinema) 2.7s forwards;
    }
    .hero .lede{
      font-family: var(--body); font-size: 16px; line-height: 1.6;
      color: var(--bone-mute); max-width: 56ch;
      text-align: center;
    }
    .hero .lede b{ color: var(--bone); font-weight: 500; }
    .hero .actions{ display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
    @keyframes heroFadeUp{ to{ opacity: 1; transform: translateY(0); } }

    .magnetic{
      display:inline-flex; align-items: center; gap: 14px;
      padding: 18px 26px;
      background: var(--bone); color: var(--black);
      border-radius: 0;
      font-family: var(--sans); font-size: 13px; letter-spacing: .04em;
      transition: background .3s var(--ease), color .3s var(--ease);
      will-change: transform;
      position: relative; overflow: hidden;
    }
    .magnetic > *{ position: relative; z-index: 2; }
    .magnetic::after{
      content:""; position: absolute; inset: 0;
      background: var(--champagne); transform: translateY(100%);
      transition: transform .55s var(--ease-cinema);
      z-index: 1;
    }
    .magnetic:hover::after{ transform: translateY(0); }
    .magnetic .dot{ width:8px; height:8px; border-radius:50%; background: var(--amber); transition: transform .35s var(--ease); }
    .magnetic:hover .dot{ background: var(--black); transform: scale(1.4); }

    .ghost{
      display:inline-flex; align-items:center; gap: 14px;
      padding: 18px 24px;
      border: 1px solid var(--hairline);
      color: var(--bone);
      font-family: var(--sans); font-size: 13px; letter-spacing: .04em;
      transition: border-color .3s var(--ease), color .3s var(--ease);
      position: relative; overflow: hidden;
      isolation: isolate;
    }
    .ghost::after{
      content:""; position: absolute; inset: 0;
      background: var(--champagne);
      transform: scaleX(0); transform-origin: left;
      transition: transform .55s var(--ease-cinema);
      z-index: -1;
    }
    .ghost > *{ position: relative; z-index: 1; }
    .ghost:hover::after{ transform: scaleX(1); }
    .ghost:hover{ color: var(--black); border-color: var(--champagne); }

    /* === SECTION HEAD === */
    section{ padding: 140px 32px; position: relative; }
    .label-row{
      display:flex; justify-content: space-between; align-items: baseline;
      max-width: 1500px; margin: 0 auto 60px;
      border-top: 1px solid var(--hairline);
      padding-top: 20px;
    }
    .label-row .l{
      font-family: var(--sans); font-size: 11px; font-weight: 500;
      letter-spacing: .32em; text-transform: uppercase; color: var(--bone-mute);
    }
    .label-row .l b{ color: var(--bone); font-weight: 500; }

    .section-title{
      font-family: var(--sans); font-weight: 500;
      font-size: clamp(48px, 7vw, 120px);
      letter-spacing: -.045em; line-height: .94;
      max-width: 1500px; margin: 0 auto;
    }
    .section-title em{ font-family: var(--serif); font-style: italic; color: var(--champagne); font-weight: 400; }

    [data-reveal]{ opacity:0; transform: translateY(60px); transition: opacity 1.1s var(--ease-cinema), transform 1.1s var(--ease-cinema); }
    [data-reveal].visible{ opacity:1; transform: translateY(0); }

    [data-clip]{ clip-path: inset(0 100% 0 0); transition: clip-path 1.4s var(--ease-cinema); }
    [data-clip].visible{ clip-path: inset(0 0 0 0); }

    /* Mask reveal for images */
    .mask-img{ position: relative; overflow: hidden; }
    .mask-img::after{
      content:""; position: absolute; inset: 0;
      background: var(--black);
      transform-origin: right;
      transition: transform 1.4s var(--ease-cinema);
    }
    .mask-img.visible::after{ transform: scaleX(0); }
    .mask-img img{ transform: scale(1.18); transition: transform 1.8s var(--ease-cinema); }
    .mask-img.visible img{ transform: scale(1); }

    /* === ABOUT === */
    .about{
      max-width: 1500px; margin: 0 auto;
      display: grid; grid-template-columns: .8fr 1.2fr; gap: 80px; align-items: start;
    }
    .about .image{
      aspect-ratio: 4/5; overflow:hidden;
      position: relative;
    }
    .about .image img{ width:100%; height:100%; object-fit: cover; filter: grayscale(40%) contrast(1.08) brightness(.95); transition: transform 8s linear; }
    .about .image:hover img{ transform: scale(1.06); }
    .about .image::after{
      content:"— A note from Cierra, founder"; position:absolute; bottom: 20px; left: 20px;
      font-family: var(--sans); font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--bone);
      z-index: 3;
    }
    .about .copy h2{
      font-family: var(--sans); font-weight: 500;
      font-size: clamp(40px, 5vw, 84px); letter-spacing: -.04em; line-height: 1; margin-bottom: 40px;
    }
    .about .copy h2 em{ font-family: var(--serif); font-style: italic; color: var(--champagne); font-weight: 400; }
    .about .copy p{ font-family: var(--body); font-size: 17px; line-height: 1.65; color: var(--bone-mute); max-width: 56ch; margin-bottom: 20px; }
    .about .copy p b{ color: var(--bone); font-weight: 500; }
    .about .copy .signature{ margin-top: 40px; font-family: var(--serif); font-style: italic; font-size: 28px; color: var(--bone); }
    .about .copy .signature small{ display:block; margin-top: 4px; font-family: var(--sans); font-style: normal; font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--dust); }

    /* === SERVICES — 3-up grid with staggered reveal === */
    .services{
      background: var(--panel);
      padding: 140px 32px;
      position: relative;
    }
    .services .head{
      max-width: 1500px; margin: 0 auto 32px;
      display:flex; justify-content: space-between; align-items: baseline;
      border-top: 1px solid var(--hairline);
      padding-top: 20px;
    }
    .services .head .l{
      font-family: var(--sans); font-size: 11px; font-weight: 500;
      letter-spacing: .32em; text-transform: uppercase; color: var(--bone-mute);
    }
    .services .head .l b{ color: var(--bone); font-weight: 500; }
    .services .h-title{
      max-width: 1500px; margin: 0 auto 80px;
      font-family: var(--sans); font-weight: 500;
      font-size: clamp(48px, 7vw, 120px); letter-spacing: -.045em; line-height: .94;
    }
    .services .h-title em{ font-family: var(--serif); font-style: italic; color: var(--champagne); font-weight: 400; }

    /* Pillars — two service categories, each with their own headline + 3-up grid */
    .services .pillar{ margin-top: 120px; }
    .services .pillar:first-of-type{ margin-top: 100px; }
    .services .pillar-head{
      max-width: 1500px; margin: 0 auto 56px;
      padding-top: 32px;
      border-top: 1px solid var(--hairline);
      display: grid;
      grid-template-columns: minmax(140px, .8fr) 1.4fr 1.2fr;
      gap: 48px;
      align-items: end;
    }
    .services .pillar-num{
      font-family: var(--sans); font-size: 11px; font-weight: 500;
      letter-spacing: .32em; text-transform: uppercase; color: var(--champagne);
      display: inline-flex; align-items: center; gap: 12px;
      padding-bottom: 8px;
    }
    .services .pillar-num::before{
      content:""; width: 28px; height: 1px; background: var(--champagne);
    }
    .services .pillar-title{
      font-family: var(--sans); font-weight: 500;
      font-size: clamp(40px, 5vw, 84px);
      letter-spacing: -.04em; line-height: .98;
    }
    .services .pillar-title em{
      font-family: var(--serif); font-style: italic;
      color: var(--champagne); font-weight: 400;
    }
    .services .pillar-lede{
      font-family: var(--body); font-size: 15px; line-height: 1.6;
      color: var(--bone-mute);
      max-width: 38ch;
    }

    .services .grid{
      max-width: 1500px; margin: 0 auto;
      display: grid; grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }
    .scard{
      padding: 36px 32px 32px;
      background: var(--panel-2);
      border: 1px solid var(--hairline);
      display:flex; flex-direction: column;
      position: relative;
      transition: transform .6s var(--ease), border-color .4s var(--ease), background .5s var(--ease), box-shadow .6s var(--ease-cinema);
      perspective: 1000px;
      will-change: transform;
      opacity: 0; transform: translateY(60px);
      box-shadow: 0 0 0 0 rgba(201, 163, 106, 0);
    }
    .scard.visible{ opacity: 1; transform: translateY(0); transition: opacity 1.1s var(--ease-cinema), transform 1.1s var(--ease-cinema); }
    .scard.visible:nth-child(2){ transition-delay: .14s; }
    .scard.visible:nth-child(3){ transition-delay: .28s; }
    .scard::before{
      content:""; position: absolute; inset: 0;
      background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(201,163,106,.14), transparent 70%);
      opacity: 0; pointer-events: none;
      transition: opacity .6s var(--ease);
    }
    .scard:hover{
      border-color: var(--champagne);
      background: var(--black);
      box-shadow: 0 40px 80px -30px rgba(201, 163, 106, .45), 0 0 0 1px rgba(201,163,106,.0);
    }
    .scard:hover::before{ opacity: 1; }
    .services .grid:hover .scard:not(:hover){ opacity: .55; filter: blur(.3px); }

    .scard .img{
      aspect-ratio: 5/4; overflow: hidden; margin-bottom: 24px;
      position: relative;
    }
    .scard .img img{
      width:100%; height:100%; object-fit: cover;
      transition: transform 1.6s var(--ease-cinema), filter 1s var(--ease);
      filter: grayscale(35%) brightness(.9);
    }
    .scard:hover .img img{ transform: scale(1.12); filter: grayscale(0%) brightness(1) saturate(1.08); }
    /* champagne sweep overlay on image */
    .scard .img::after{
      content:""; position: absolute; inset: 0;
      background: linear-gradient(115deg, var(--champagne) 0%, var(--amber) 100%);
      transform: translateY(0); opacity: .35;
      mix-blend-mode: multiply;
      transition: transform 1s var(--ease-cinema), opacity .8s var(--ease);
      pointer-events: none;
    }
    .scard:hover .img::after{ transform: translateY(100%); opacity: 0; }
    /* corner mark on image */
    .scard .img::before{
      content:""; position: absolute; top: 14px; left: 14px;
      width: 18px; height: 18px;
      border-top: 1px solid var(--champagne);
      border-left: 1px solid var(--champagne);
      z-index: 2;
      opacity: 0; transform: translate(8px, 8px);
      transition: opacity .5s var(--ease) .15s, transform .6s var(--ease-cinema) .15s;
    }
    .scard:hover .img::before{ opacity: 1; transform: translate(0, 0); }

    .scard .num{
      font-family: var(--sans); font-size: 11px; font-weight: 500;
      letter-spacing: .3em; text-transform: uppercase; color: var(--champagne);
      margin-bottom: 14px;
      display:flex; justify-content: space-between; align-items: center;
      position: relative;
      padding-bottom: 10px;
    }
    .scard .num::after{
      content:""; position: absolute; left: 0; bottom: 0;
      width: 100%; height: 1px;
      background: var(--champagne);
      transform: scaleX(0); transform-origin: left;
      transition: transform .7s var(--ease-cinema);
    }
    .scard:hover .num::after{ transform: scaleX(1); }
    .scard .num .price{ color: var(--bone-mute); transition: color .4s var(--ease); }
    .scard:hover .num .price{ color: var(--bone); }

    .scard h3{
      font-family: var(--sans); font-weight: 500;
      font-size: 30px; line-height: 1.05; letter-spacing: -.025em;
      margin-bottom: 14px;
      margin-top: 14px;
      transition: transform .5s var(--ease-cinema);
    }
    .scard h3 em{
      font-family: var(--serif); font-style: italic; color: var(--champagne); font-weight: 400;
      display: inline-block;
      transition: transform .55s var(--ease-cinema), letter-spacing .55s var(--ease-cinema);
    }
    .scard:hover h3 em{ transform: translateX(4px); letter-spacing: .005em; }

    .scard p{
      font-family: var(--body); font-size: 14px; line-height: 1.6; color: var(--bone-mute);
      flex: 1; margin-bottom: 20px;
      transition: color .4s var(--ease);
    }
    .scard:hover p{ color: var(--bone); }

    .scard ul{
      list-style: none;
      border-top: 1px solid var(--hairline);
      padding-top: 14px;
      display:flex; flex-direction: column; gap: 8px;
      transition: border-color .4s var(--ease);
    }
    .scard:hover ul{ border-top-color: var(--champagne); }
    .scard ul li{
      font-family: var(--sans); font-size: 12px; letter-spacing: .04em;
      color: var(--bone-mute);
      display:flex; gap: 12px;
      transform: translateX(-6px); opacity: .55;
      transition: transform .5s var(--ease-cinema), opacity .5s var(--ease), color .4s var(--ease);
    }
    .scard ul li::before{ content:"+"; color: var(--champagne); transition: transform .5s var(--ease-cinema); }
    .scard:hover ul li{ transform: translateX(0); opacity: 1; color: var(--bone); }
    .scard:hover ul li:nth-child(1){ transition-delay: .05s; }
    .scard:hover ul li:nth-child(2){ transition-delay: .12s; }
    .scard:hover ul li:nth-child(3){ transition-delay: .19s; }
    .scard:hover ul li::before{ transform: rotate(90deg); }

    .scard .arrow{
      position: absolute; top: 28px; right: 28px;
      width: 40px; height: 40px;
      border-radius: 50%; border: 1px solid var(--champagne);
      background: var(--champagne); color: var(--black);
      display:flex; align-items:center; justify-content: center;
      transition: opacity .5s var(--ease-cinema), transform .6s var(--ease-cinema), box-shadow .5s var(--ease);
      z-index: 3;
      opacity: 0;
      transform: translate(10px, -10px) scale(.7) rotate(0);
      pointer-events: none;
    }
    .scard .arrow i{ width: 16px; height: 16px; transition: transform .5s var(--ease-cinema); }
    .scard:hover .arrow{
      opacity: 1;
      transform: translate(0, 0) scale(1.08) rotate(-20deg);
      box-shadow: 0 12px 30px -8px rgba(201,163,106,.6);
      pointer-events: auto;
    }
    .scard:hover .arrow i{ transform: translate(2px, -2px); }

    /* === STATS BAND === */
    .statband{
      max-width: 1500px; margin: 0 auto;
      display:grid; grid-template-columns: repeat(4, 1fr);
      border-top: 1px solid var(--hairline);
    }
    .statband .s{
      padding: 60px 32px;
      border-right: 1px solid var(--hairline);
      transition: background .4s var(--ease);
    }
    .statband .s:hover{ background: var(--panel); }
    .statband .s:last-child{ border-right: none; }
    .statband .v{
      font-family: var(--sans); font-weight: 500;
      font-size: clamp(56px, 6vw, 96px); letter-spacing: -.045em; line-height: 1;
    }
    .statband .v em{ font-family: var(--serif); font-style: italic; color: var(--champagne); font-weight: 400; }
    .statband .l{
      font-family: var(--sans); font-size: 11px; font-weight: 500;
      letter-spacing: .26em; text-transform: uppercase; color: var(--bone-mute);
      margin-top: 16px;
    }

    /* === PROCESS — SCROLL-PINNED CINEMA === */
    .process-wrapper{
      position: relative;
      background: var(--black);
    }
    .process{
      position: sticky; top: 0;
      height: 100vh;
      overflow: hidden;
      padding: 0;
      display: flex; flex-direction: column;
    }
    .process .head{
      padding: 110px 32px 40px;
      max-width: 1500px; width: 100%; margin: 0 auto;
    }
    .process .head .label-row{
      margin: 0 0 36px;
      max-width: none;
    }
    .process .stage{
      flex: 1;
      position: relative;
      max-width: 1500px; width: 100%; margin: 0 auto;
      padding: 0 32px 60px;
      display: grid;
      grid-template-columns: .9fr 1.1fr;
      gap: 80px;
      align-items: center;
    }
    .process .stage .left{ position: relative; }
    .process .stage .meta{
      display:flex; align-items: baseline; gap: 18px;
      margin-bottom: 28px;
    }
    .process .stage .meta .step-n{
      font-family: var(--sans); font-weight: 500; font-size: 96px; letter-spacing: -.05em; line-height: 1;
      color: var(--bone);
    }
    .process .stage .meta .step-n em{ font-family: var(--serif); font-style: italic; color: var(--champagne); font-weight: 400; }
    .process .stage .meta .of{
      font-family: var(--sans); font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--dust);
    }
    .process .stage h3{
      font-family: var(--sans); font-weight: 500;
      font-size: clamp(48px, 6vw, 96px); letter-spacing: -.045em; line-height: .92;
      margin-bottom: 32px; max-width: 12ch;
    }
    .process .stage h3 em{ font-family: var(--serif); font-style: italic; color: var(--champagne); font-weight: 400; }
    .process .stage p{
      font-family: var(--body); font-size: 17px; line-height: 1.65; color: var(--bone-mute);
      max-width: 38ch;
    }
    .process .stage .img-stack{
      position: relative; aspect-ratio: 4/3;
      overflow: hidden;
    }
    .process .stage .img-stack .slide{
      position: absolute; inset: 0;
      background-size: cover; background-position: center;
      opacity: 0;
      clip-path: inset(0 100% 0 0);
      transition: clip-path 1.1s var(--ease-cinema), opacity .9s var(--ease-cinema);
    }
    .process .stage .img-stack .slide.active{
      opacity: 1; clip-path: inset(0 0 0 0);
    }
    .process .stage .panel-stack{
      position: relative;
    }
    .process .stage .panel{
      position: absolute; top:0; left:0; width: 100%;
      opacity: 0; transform: translateY(20px);
      transition: opacity .7s var(--ease), transform .8s var(--ease);
      pointer-events: none;
    }
    .process .stage .panel.active{ opacity: 1; transform: translateY(0); position: relative; pointer-events: auto; }
    .process .stage .panel .step-img-mobile{ display: none; }
    .process .bottom-rail{
      padding: 0 32px 24px;
      max-width: 1500px; width: 100%; margin: 0 auto;
      display: flex; justify-content: space-between; align-items: center;
      border-top: 1px solid var(--hairline);
      padding-top: 20px;
    }
    .process .rail{ display:flex; gap: 12px; }
    .process .rail .dot{
      width: 80px; height: 1px;
      background: rgba(237,234,227,.18);
      position: relative;
      transition: background .4s var(--ease);
    }
    .process .rail .dot.active{ background: var(--champagne); }
    .process .rail .dot.passed{ background: var(--bone-mute); }
    .process .rail-label{
      font-family: var(--sans); font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--bone-mute);
    }

    /* === PULL QUOTE — word reveal === */
    .pull{
      background: var(--panel);
      padding: 180px 32px;
      text-align: center;
      position: relative; overflow: hidden;
    }
    .pull::before{
      content:""; position: absolute; inset: -10%;
      background-image: url("https://images.unsplash.com/photo-1760978631959-87fa2724d6e9?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&w=2000&q=80");
      background-size: cover; background-position: center;
      opacity: .14; filter: blur(2px);
    }
    .pull blockquote{
      font-family: var(--sans); font-weight: 400;
      font-size: clamp(28px, 4vw, 68px); line-height: 1.1; letter-spacing: -.035em;
      max-width: 22ch; margin: 0 auto;
      color: var(--bone);
      position: relative;
    }
    .pull blockquote em{ font-family: var(--serif); font-style: italic; color: var(--champagne); font-weight: 400; }
    .pull blockquote .word{
      display:inline-block; margin-right: .25em;
      opacity: .15;
      transition: opacity .6s var(--ease);
      transition-delay: calc(var(--i) * 50ms);
    }
    .pull blockquote.visible .word{ opacity: 1; }
    .pull cite{
      display:block; margin-top: 40px; font-style: normal;
      font-family: var(--sans); font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--bone-mute);
      position: relative;
    }

    /* === BIG NUMBER FEATURE — dramatic reveal === */
    .bignum{
      padding: 0; background: var(--black);
      position: relative;
      overflow: hidden;
    }
    .bignum .inner{
      max-width: 1500px; margin: 0 auto;
      display:flex; flex-direction: column;
      padding: 180px 32px 120px;
      gap: 80px;
      position: relative;
    }
    .bignum .header{
      display: grid; grid-template-columns: 1.1fr .9fr;
      gap: 40px 80px;
      align-items: start;
      border-top: 1px solid var(--hairline);
      padding-top: 28px;
    }
    .bignum .header .eyebrow{
      grid-column: 1 / -1;
      font-family: var(--sans); font-size: 11px; font-weight: 500;
      letter-spacing: .32em; text-transform: uppercase; color: var(--bone-mute);
      display: inline-flex; align-items: center; gap: 12px;
      margin-bottom: 8px;
    }
    .bignum .header .eyebrow::before{ content:""; width: 28px; height:1px; background: var(--champagne); }
    .bignum .header .tagline{
      font-family: var(--serif); font-style: italic;
      font-size: clamp(28px, 3.2vw, 48px);
      line-height: 1.1; letter-spacing: -.01em;
      color: var(--bone); max-width: 16ch;
    }
    .bignum .header .body-col{
      display: flex; flex-direction: column; gap: 24px; align-items: flex-start;
    }
    .bignum .header .body-col p{
      font-family: var(--body); font-size: 17px; line-height: 1.65; color: var(--bone-mute);
      max-width: 42ch; margin: 0;
    }
    .bignum .header .body-col p b{ color: var(--bone); font-weight: 500; }
    .bignum .one{
      font-family: var(--sans); font-weight: 400;
      font-size: clamp(180px, 30vw, 520px);
      letter-spacing: -.06em; line-height: .8;
      color: var(--bone);
      display: flex; align-items: end; gap: 0;
      position: relative;
      align-self: flex-start;
    }
    .bignum .one em{ font-family: var(--serif); font-style: italic; color: var(--champagne); font-weight: 400; }
    .bignum .one .digit{ display:inline-block; opacity: 0; transform: translateY(120%); transition: opacity .9s var(--ease-cinema), transform 1.2s var(--ease-cinema); transition-delay: calc(var(--i) * 120ms); }
    .bignum .one.visible .digit{ opacity: 1; transform: translateY(0); }
    .bignum .one .slash{ display:inline-block; transform: rotate(90deg) scale(0); transition: transform 1s var(--ease-cinema) .6s; }
    .bignum .one.visible .slash{ transform: rotate(0) scale(1); }
    .bignum .one .flow{ display:inline-block; overflow: hidden; padding-right: .12em; }
    .bignum .one .flow em{ display: inline-block; transform: translateX(-100%); transition: transform 1.2s var(--ease-cinema) .9s; }
    .bignum .one.visible .flow em{ transform: translateX(0); }
    .bignum .one.visible .flow{ overflow: visible; transition: overflow 0s linear 2.2s; }
    .bignum .one .four{ position: relative; }
    .bignum .one .four::after{
      content:""; position: absolute; left:0; bottom: 24%;
      width: 100%; height: 14px; background: var(--champagne);
      mix-blend-mode: difference;
      transform: scaleX(0); transform-origin: left;
      transition: transform 1s var(--ease-cinema) 1.4s;
    }
    .bignum .one.visible .four::after{ transform: scaleX(1); }
    .bignum .right p{
      font-family: var(--body); font-size: 17px; line-height: 1.65; color: var(--bone-mute);
      max-width: 36ch; margin-bottom: 24px;
    }
    .bignum .right p b{ color: var(--bone); font-weight: 500; }
    .bignum .right .tagline{ font-family: var(--serif); font-style: italic; font-size: 22px; color: var(--bone); }
    .bignum .right small{ display:block; margin-top: 12px; font-family: var(--sans); font-style: normal; font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--dust); }

    .bignum .grid-bg{
      position: absolute; inset: 0; z-index: 0;
      background-image:
        linear-gradient(rgba(237,234,227,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(237,234,227,.05) 1px, transparent 1px);
      background-size: 80px 80px;
      mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black 30%, transparent 80%);
      -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black 30%, transparent 80%);
    }
    .bignum .inner > *{ position: relative; z-index: 1; }
    /* Lift the header (with the "View all case studies" button) above the massive "14/Flow" lockup
       so its glyphs can't block clicks on the button at large widths. */
    .bignum .inner > .header{ z-index: 3; }
    .bignum .inner > .one{ z-index: 1; pointer-events: none; }
    .bignum .inner > .one *{ pointer-events: none; }

    /* === CTA === */
    .cta{
      background: var(--bone); color: var(--black);
      padding: 180px 32px;
      position: relative; overflow: hidden;
    }
    .cta .inner{ max-width: 1500px; margin: 0 auto; position: relative; z-index: 2; }
    .cta .row-top{
      display:flex; justify-content: space-between; align-items: baseline;
      margin-bottom: 60px;
      padding-bottom: 20px;
      border-bottom: 1px solid rgba(10,9,8,.18);
    }
    .cta .row-top .l{ font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: .32em; text-transform: uppercase; color: var(--black); display:inline-flex; align-items:center; gap: 12px; }
    .cta .row-top .l::before{ content:""; width: 28px; height:1px; background: var(--black); }
    .cta .row-top .r{ font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--dust); }
    .cta h2{
      font-family: var(--sans); font-weight: 500;
      font-size: clamp(64px, 11vw, 200px);
      letter-spacing: -.055em; line-height: .88;
    }
    .cta h2 em{ font-family: var(--serif); font-style: italic; color: var(--champagne); font-weight: 400; }
    .cta .form-intro{
      font-family: var(--body); font-size: 17px; line-height: 1.65; color: var(--black);
      max-width: 56ch;
      margin: 48px 0 0;
    }

    /* === FORM === */
    .cta .form{
      margin-top: 56px;
      padding-top: 40px;
      border-top: 1px solid rgba(10,9,8,.18);
      display: flex; flex-direction: column;
      gap: 36px;
      max-width: none;
    }
    .cta .form-row{
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 36px;
    }
    .cta .field{
      display: flex; flex-direction: column;
      gap: 12px;
    }
    .cta .field > span{
      font-family: var(--sans); font-size: 10px; font-weight: 500;
      letter-spacing: .3em; text-transform: uppercase;
      color: rgba(10,9,8,.5);
    }
    .cta .field input,
    .cta .field select,
    .cta .field textarea{
      font-family: var(--body); font-size: 17px; line-height: 1.5;
      color: var(--black);
      background: transparent;
      border: 0;
      border-bottom: 1px solid rgba(10,9,8,.22);
      padding: 10px 0;
      outline: none;
      transition: border-color .4s var(--ease), padding .4s var(--ease);
      width: 100%;
    }
    .cta .field input::placeholder,
    .cta .field textarea::placeholder{ color: rgba(10,9,8,.35); }
    .cta .field input:focus,
    .cta .field select:focus,
    .cta .field textarea:focus{
      border-bottom-color: var(--champagne);
    }
    .cta .field input:focus + .underline{ transform: scaleX(1); }
    .cta .field select{
      appearance: none; -webkit-appearance: none;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path d='M1 1l6 6 6-6' stroke='%230A0908' stroke-width='1.4' fill='none' stroke-linecap='round'/></svg>");
      background-repeat: no-repeat;
      background-position: right 2px center;
      padding-right: 28px;
      cursor: pointer;
    }
    .cta .field textarea{
      resize: vertical;
      min-height: 120px;
    }
    .cta .form-foot{
      display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap;
      margin-top: 8px;
    }
    .cta .form button.magnetic{
      border: 0; cursor: pointer; font: inherit;
      padding: 18px 28px;
    }
    .cta .magnetic{ background: var(--black); color: var(--bone); }
    .cta .magnetic:hover{ color: var(--black); }
    .cta .magnetic::after{ background: var(--champagne); }
    .cta .secondary{ font-family: var(--sans); font-size: 13px; letter-spacing: .12em; color: var(--black); border-bottom: 1px solid var(--black); padding-bottom: 4px; }

    /* === FOOTER === */
    footer{
      background: var(--black);
      padding: 80px 32px 32px;
      border-top: 1px solid var(--hairline);
    }
    footer .grid-f{
      display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr;
      gap: 60px; max-width: 1500px; margin: 0 auto;
    }
    footer .brand{ display:flex; flex-direction: column; gap: 20px; max-width: 32ch; }
    footer .brand .logo{ display:flex; align-items: center; gap: 14px; }
    footer .brand .logo img{ width: 36px; height: 36px; filter: invert(1); }
    footer .brand .logo span{ font-family: var(--sans); font-weight: 600; font-size: 24px; letter-spacing: -.02em; }
    footer .brand p{ font-family: var(--body); font-size: 14px; line-height: 1.6; color: var(--bone-mute); }
    footer h5{ font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--dust); margin-bottom: 20px; }
    footer ul{ list-style: none; display: flex; flex-direction: column; gap: 12px; }
    footer ul a{ font-family: var(--sans); font-size: 14px; color: var(--bone); transition: color .3s var(--ease); }
    footer ul a:hover{ color: var(--champagne); }
    footer ul .sub{
      font-family: var(--sans); font-size: 10px; font-weight: 500;
      letter-spacing: .28em; text-transform: uppercase; color: var(--champagne);
      display: block; margin-top: 8px;
    }
    footer ul li:first-child .sub{ margin-top: 0; }
    footer .bottom{
      max-width: 1500px; margin: 80px auto 0;
      padding-top: 28px;
      border-top: 1px solid var(--hairline);
      display:flex; justify-content: space-between; align-items: center;
      font-family: var(--sans); font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--dust);
    }

    /* === Scramble === */
    .scramble-text{ display: inline-block; }

    @media (max-width: 900px){
      .progress{ display: none; }
      nav.top{ padding: 10px 14px; column-gap: 14px; }
      nav.top .links{ gap: 12px; }
      nav.top .links-l, nav.top .links-r{ justify-self: center; }
      nav.top .links a{ font-size: 10.5px; letter-spacing: .01em; padding-bottom: 3px; white-space: nowrap; }
      nav.top .brand img{ width: 76px; height: 76px; }
      .hero{ padding-top: 100px; }
      .hero .bottom{ padding: 0 20px 48px; }
      .hero h1{
        font-size: clamp(36px, 11vw, 72px);
        letter-spacing: -.025em;
        line-height: 1;
      }
      /* Mobile: allow the marquee lines to wrap instead of overflowing — keep the slide-in,
         but as a wrapped block rather than a single cut-off line. */
      .hero h1 .line{ white-space: normal; }
      .hero h1 .line-l{ transform: translateX(-100vw); }
      .hero h1 .line-r{ transform: translateX(100vw); }
      .hero .footer-row{ gap: 24px; margin: 36px auto 0; padding: 24px 20px 0; }
      section{ padding: 80px 20px; }
      .about{ grid-template-columns: 1fr; gap: 28px; }

      /* services: stack 3-up grid */
      .services{ padding: 80px 20px; }
      .services .head{ flex-direction: column; align-items: flex-start; gap: 12px; }
      .services .h-title{ margin-bottom: 40px; }
      .services .pillar{ margin-top: 64px; }
      .services .pillar:first-of-type{ margin-top: 56px; }
      .services .pillar-head{
        grid-template-columns: 1fr;
        gap: 16px;
        padding-top: 24px;
        margin-bottom: 28px;
      }
      .services .grid{ grid-template-columns: 1fr; gap: 20px; }
      .services .grid:hover .scard:not(:hover){ opacity: 1; }

      /* PROCESS — mobile: kill pin, render as 4 stacked editorial blocks each with their own image */
      .process-wrapper{ height: auto !important; }
      .process{ position: relative; height: auto; min-height: 0; padding-bottom: 32px; }
      .process .head{ padding: 80px 20px 32px; }
      .process .head .section-title{ max-width: 100%; }
      .process .stage{
        grid-template-columns: 1fr;
        gap: 0;
        padding: 0 20px 24px;
        align-items: start;
      }
      .process .stage .left{ width: 100%; }
      /* hide desktop image stack on mobile — each panel has its own inline image instead */
      .process .stage .right{ display: none; }

      .process .stage .panel-stack{ position: static; }
      .process .stage .panel,
      .process .stage .panel.active{
        position: relative;
        opacity: 1; transform: none; pointer-events: auto;
        padding-top: 40px;
        margin-top: 40px;
        border-top: 1px solid var(--hairline);
      }
      .process .stage .panel:first-child{
        margin-top: 0;
        padding-top: 0;
        border-top: none;
      }

      .process .stage .panel .step-img-mobile{
        display: block;
        aspect-ratio: 16/11;
        overflow: hidden;
        margin-bottom: 28px;
        position: relative;
      }
      .process .stage .panel .step-img-mobile img{
        width: 100%; height: 100%; object-fit: cover;
        filter: grayscale(15%) contrast(1.05) brightness(.95);
        transition: transform 8s linear;
      }
      .process .stage .panel:hover .step-img-mobile img{ transform: scale(1.04); }
      .process .stage .panel .step-img-mobile::after{
        content: ""; position: absolute; inset: 0;
        background: linear-gradient(180deg, rgba(10,9,8,0) 55%, rgba(10,9,8,.6));
      }

      .process .stage .meta{
        margin-bottom: 18px; align-items: baseline; gap: 14px;
      }
      .process .stage .meta .step-n{ font-size: 60px; }
      .process .stage .meta .of{ font-size: 10px; letter-spacing: .26em; }
      .process .stage h3{
        font-size: clamp(34px, 9vw, 56px);
        margin-bottom: 18px;
        max-width: 100%;
      }
      .process .stage p{
        font-size: 15px; line-height: 1.6;
        max-width: 100%;
      }

      /* The desktop rail relies on JS-driven active states that mean nothing when all panels are visible */
      .process .bottom-rail{ display: none; }

      .statband{ grid-template-columns: 1fr 1fr; }
      .statband .s{ padding: 36px 20px; border-bottom: 1px solid var(--hairline); }
      .statband .s:nth-child(2n){ border-right: none; }
      .pull{ padding: 100px 20px; }
      .bignum .inner{ padding: 80px 20px 60px; gap: 40px; }
      .bignum .header{ grid-template-columns: 1fr; gap: 24px; }
      .bignum .header .tagline{ max-width: none; }
      .cta{ padding: 100px 20px; }
      .cta .row-top{ flex-direction: column; align-items: flex-start; gap: 12px; }
      .cta .form{ margin-top: 40px; padding-top: 28px; gap: 28px; }
      .cta .form-row{ grid-template-columns: 1fr; gap: 28px; }
      .cta .form-foot{ flex-direction: column; align-items: flex-start; gap: 18px; }
      footer .grid-f{ grid-template-columns: 1fr 1fr; gap: 32px; }
      .ts{ grid-template-columns: 1fr; gap: 6px; padding: 14px 20px; }
      .ts .h1{ font-size: 40px; }
      .ts .h2{ font-size: 24px; }
    }