:root {
      --ink: #0d0d0b;
      --ink-2: #1a1916;
      --paper: #efece4;
      --paper-dim: #efece4b8;
      --mute: #8a877f;
      --line: #efece429;
      --accent: #ff3d17;
    }
    * { box-sizing: border-box; margin: 0; padding: 0; }
    html, body { background: var(--ink); color: var(--paper); }
    body {
      font-family: Geist, Inter, sans-serif;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }
    a { color: inherit; text-decoration: none; }
    img { display: block; width: 100%; height: 100%; object-fit: cover; }

    .mono {
      font-family: "Geist Mono", ui-monospace, monospace;
      font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
      font-size: 12px; line-height: 1.4;
    }
    .display {
      font-family: "Big Shoulders", Impact, sans-serif;
      font-weight: 900; letter-spacing: -.02em; text-transform: uppercase; line-height: .82;
    }
    .serif {
      font-family: "Instrument Serif", Georgia, serif;
      font-style: italic; font-weight: 400; letter-spacing: -.02em; line-height: .92;
    }

    nav {
      position: fixed; inset: 0 0 auto 0; z-index: 50;
      display: flex; align-items: center; justify-content: space-between;
      height: 88px; padding: 0 28px; pointer-events: none;
    }
    nav > * { pointer-events: auto; }
    .brand-pill {
      background: var(--paper); border-radius: 40px;
      padding: 9px 18px 10px; display: flex; align-items: baseline; gap: 6px;
    }
    .brand-pill b {
      font-family: "Big Shoulders", sans-serif; font-weight: 900;
      font-size: 26px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink);
    }
    .brand-pill i { font-family: "Instrument Serif", serif; font-style: italic; font-size: 18px; color: var(--ink); }
    .nav-pill {
      display: flex; gap: 28px; align-items: center;
      background: #0d0d0b73; backdrop-filter: blur(24px);
      border: 1px solid var(--line); border-radius: 40px; padding: 12px 26px;
    }
    .nav-pill a { font-size: 16px; font-weight: 500; }
    .avail {
      display: flex; align-items: center; gap: 8px;
      background: var(--paper); color: var(--ink); border-radius: 40px; padding: 11px 16px;
      font-family: "Geist Mono", monospace; font-size: 12px; letter-spacing: .04em; text-transform: uppercase;
    }
    .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }

    /* PINNED HERO */
    .hero-pin { height: 420vh; position: relative; }
    .hero {
      position: sticky; top: 0; height: 100vh; min-height: 560px;
      overflow: hidden; background: var(--accent);
    }
    .hero-closed {
      position: absolute; inset: 0; z-index: 4;
      background: var(--accent); color: var(--ink);
      pointer-events: none;
    }
    .wall { position: absolute; inset: 0; display: flex; }
    .vane { position: relative; flex: 1; height: 100%; perspective: 1600px; }
    .prism { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }
    .face { position: absolute; inset: 0; overflow: hidden; backface-visibility: hidden; }
    .face .slice { position: absolute; top: 0; height: 100%; width: var(--wall-w); }
    .card-art { background: var(--accent); color: var(--ink); width: 100%; height: 100%; position: relative; }
    .card-names {
      position: absolute;
      left: 3vw;
      right: 3vw;
      bottom: 14vh;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 0;
    }
    .card-art .name { font-size: clamp(88px, 22vw, 320px); line-height: .82; }
    .card-art .first { font-size: clamp(56px, 10vw, 150px); line-height: .9; margin-bottom: 0; }
    .card-art .meta-l, .card-art .meta-r { position: absolute; top: 44vh; opacity: .85; }
    .card-art .meta-l { left: 48%; }
    .card-art .meta-r { left: 74%; }
    .hero-ui {
      position: absolute; left: 0; right: 0; bottom: 0;
      padding: 80px 40px 32px; display: flex; align-items: center; gap: 28px;
      background: linear-gradient(to bottom, transparent, rgba(13,13,11,.72));
      color: var(--paper); pointer-events: none;
    }
    .hero-ui .who { font-size: clamp(22px, 3vw, 34px); }
    .bars { margin-left: auto; display: flex; gap: 8px; }
    .bars i { width: 54px; height: 2px; background: var(--paper); opacity: .28; }
    .bars i.on { opacity: 1; background: var(--accent); }

    .wrap { padding: 90px 40px 110px; }
    .row { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; flex-wrap: wrap; }
    .kicker { color: #efece499; margin-bottom: 28px; }
    .headline {
      display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px;
      font-size: clamp(46px, 9.2vw, 132px);
    }
    .headline .serif-word {
      color: var(--accent); font-size: clamp(48px, 9.4vw, 136px);
      text-transform: none; position: relative;
    }
    .headline .serif-word::after {
      content: ""; position: absolute; left: 0; right: 0; bottom: .08em;
      height: .06em; background: currentColor;
    }
    .pill { border-radius: 80px; overflow: hidden; flex: none; width: min(210px, 28vw); height: 92px; }
    .pill.sm { width: min(130px, 20vw); }
    .pill.md { width: min(180px, 24vw); }
    .lede { max-width: 420px; margin-top: 28px; font-size: 17px; line-height: 1.5; color: var(--paper-dim); }
    .text-link { display: inline-flex; margin-top: 18px; padding-bottom: 4px; border-bottom: 1px solid #efece480; font-weight: 500; }

    .work { padding: 40px 40px 120px; }
    .work-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 56px; }
    .work-title { font-size: clamp(84px, 16vw, 220px); }
    .work-count { color: var(--accent); font-size: clamp(40px, 6vw, 72px); }
    .btn-light { background: var(--paper); color: var(--ink); border-radius: 40px; padding: 15px 22px 15px 24px; font-weight: 500; }
    .grid { display: grid; grid-template-columns: repeat(2, minmax(200px, 1fr)); gap: 72px 24px; }
    .card .thumb { height: 520px; border-radius: 4px; overflow: hidden; background: #222; }
    .card h3 { font-size: clamp(26px, 2.2vw, 30px); margin: 14px 0 6px; }
    .card .meta { display: flex; gap: 10px; color: #efece499; }

    .zoom-pin { height: 380vh; position: relative; }
    .zoom {
      position: sticky; top: 0; height: 100vh; overflow: hidden; background: #000;
    }
    .zoom-shot {
      position: absolute; inset: 0;
      opacity: 0; transform: scale(1);
      will-change: transform, opacity;
    }
    .zoom-shot img { width: 100%; height: 100%; object-fit: cover; }
    .zoom-ui {
      position: absolute; inset: auto 40px 36px 40px; z-index: 3;
      display: flex; justify-content: space-between; align-items: flex-end;
      pointer-events: none;
    }
    .zoom-ui h2 { font-size: clamp(72px, 14vw, 180px); }

    .services { padding: 40px 40px 80px; }
    .svc {
      display: grid; grid-template-columns: 80px 1fr 1.2fr; gap: 20px;
      padding: 28px 0; border-bottom: 1px solid var(--line); align-items: baseline;
    }
    .svc .n { color: #efece499; }
    .svc h3 { font-size: clamp(28px, 4vw, 48px); font-family: "Big Shoulders", sans-serif; font-weight: 900; text-transform: uppercase; letter-spacing: -.01em; }
    .svc p { color: var(--paper-dim); max-width: 520px; line-height: 1.5; }

    /* PINNED FRAMES CAROUSEL */
    .frames-pin { height: 320vh; position: relative; }
    .frames {
      position: sticky; top: 0; height: 100vh;
      padding: 110px 0 40px; overflow: hidden;
      display: flex; flex-direction: column;
    }
    .frames-head { padding: 0 40px; display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 16px; }
    .frames-track-wrap { flex: 1; display: flex; align-items: center; overflow: hidden; }
    .frames-track {
      display: flex; align-items: center; gap: 40px;
      padding: 24px 40px; will-change: transform;
    }
    .frames-track figure {
      flex: none; overflow: hidden; border-radius: 4px; background: #1a1916;
      box-shadow: 0 18px 40px rgba(0,0,0,.35);
    }
    .frames-track .f-land-a { width: min(58vw, 640px); height: min(38vh, 360px); transform: rotate(-2.4deg); }
    .frames-track .f-port-a { width: min(28vw, 280px); height: min(52vh, 430px); transform: rotate(1.7deg); }
    .frames-track .f-land-b { width: min(48vw, 520px); height: min(34vh, 300px); transform: rotate(2.1deg); }
    .frames-track .f-port-b { width: min(24vw, 250px); height: min(48vh, 400px); transform: rotate(-1.6deg); }
    .frames-track .f-land-c { width: min(42vw, 460px); height: min(42vh, 380px); transform: rotate(1.3deg); }
    .frame-cap {
      position: absolute; left: 40px; bottom: 28px;
      display: flex; gap: 16px; align-items: baseline;
    }

    .clients {
      display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;
      gap: 24px 40px; padding: 70px 40px;
      border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
    }
    .clients span:not(.label) { color: #efece49e; font-size: clamp(22px, 2.4vw, 34px); }
    .c-serif { font-family: "Instrument Serif", serif; font-style: italic; }
    .c-disp { font-family: "Big Shoulders", sans-serif; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
    .c-mono { font-family: "Geist Mono", monospace; letter-spacing: .28em; text-transform: uppercase; font-size: 20px; }

    .cta {
      background: var(--accent); color: var(--ink); padding: 70px 40px 80px;
      background-image: repeating-linear-gradient(90deg, transparent 0 71px, rgba(13,13,11,.12) 71px 72px);
    }
    .cta h2 { font-size: clamp(84px, 15vw, 200px); }
    .cta .next { font-size: clamp(60px, 12vw, 170px); display: block; margin-top: -8px; }
    .cta-actions { display: flex; flex-wrap: wrap; gap: 20px 28px; align-items: center; margin-top: 36px; }
    .btn-dark { background: var(--ink); color: var(--paper); border-radius: 40px; padding: 16px 24px 16px 26px; font-weight: 500; }
    .mail { border-bottom: 2px solid var(--ink); padding-bottom: 4px; font-weight: 500; }

    footer { padding: 60px 40px 32px; }
    .ft-grid { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 36px 20px; }
    .ft-col { width: min(300px, 100%); display: flex; flex-direction: column; gap: 10px; }
    .giant { text-align: center; font-size: clamp(118px, 32vw, 420px); line-height: .8; margin: 40px 0 20px; }
    .ft-bot { display: flex; justify-content: space-between; color: #efece499; }

    @media (max-width: 900px) {
      nav { height: 72px; padding: 0 16px; }
      .nav-pill { gap: 16px; padding: 10px 16px; }
      .avail { display: none; }
      .wrap, .work, .cta, footer, .services { padding-left: 20px; padding-right: 20px; }
      .grid { grid-template-columns: 1fr; gap: 44px; }
      .card .thumb { height: 380px; }
      .zoom-ui { inset: auto 20px 24px 20px; }
      .svc { grid-template-columns: 48px 1fr; }
      .svc p { grid-column: 1 / -1; }
      .hero-ui { padding: 20px 16px 18px; flex-wrap: wrap; gap: 8px 12px; }
      .hero-ui .who { font-size: 22px; }
      .bars { width: 100%; margin-left: 0; }
      .bars i { width: 40px; }
      .card-art .meta-l, .card-art .meta-r { display: none; }
      .card-names {
        left: 18px;
        right: 12px;
        top: auto;
        bottom: 110px;
      }
      .card-art .first { font-size: clamp(64px, 22vw, 92px); line-height: .95; margin-bottom: 0; }
      .card-art .name { font-size: clamp(92px, 34vw, 148px); line-height: .88; letter-spacing: -.04em; }
      .pill { height: 56px; }
      .frames-head, .frames-track { padding-left: 20px; padding-right: 20px; }
      .frames-track { gap: 22px; }
      .frames-track .f-land-a { width: 78vw; height: 28vh; }
      .frames-track .f-port-a { width: 42vw; height: 38vh; }
      .frames-track .f-land-b { width: 70vw; height: 26vh; }
      .frames-track .f-port-b { width: 38vw; height: 36vh; }
      .frames-track .f-land-c { width: 64vw; height: 30vh; }
    }

    @media (max-width: 900px) and (orientation: portrait) {
      .card-names {
        top: auto;
        bottom: 110px;
        left: 16px;
        right: 10px;
      }
      .card-art .first { font-size: 20vw; line-height: 1; margin-bottom: 0; }
      .card-art .name { font-size: 38vw; line-height: .9; max-width: 100%; margin-top: .04em; }
      .hero-ui .mono:nth-of-type(2) { display: none; }
    }

    @media (max-width: 900px) and (orientation: landscape) {
      .hero { min-height: 380px; }
      .card-names { top: 14%; bottom: auto; }
      .hero-ui .mono:nth-of-type(2) { display: none; }
    }