:root {
      --bg: #000000;
      --panel: #0B0B0B;
      --panel-2: #151515;
      --text: #FFFFFF;
      --muted: #ababab;
      --line: rgba(238, 238, 238, .14);
      --line-strong: rgba(238, 238, 238, .28);
      --red: #FF0000;
      --red-hi: #FF4242;
      --red-glow: rgba(255, 0, 0, .34);
      --white-glow: rgba(255, 255, 255, .4);
      --on-red: #FFFFFF;
      --head-bg: rgba(0, 0, 0, .75);
      --ph-a: #141414;
      --ph-b: #0A0A0A;
      --ph-hatch: rgba(238, 238, 238, .04);
      --ph-chip: rgba(0, 0, 0, .6);
      --stack-mid: #0B0B0B;
      --grain-o: .45;
      --plexus-grey: 90, 90, 90;
      --plexus-red: 255, 0, 0;
      --display: 'Poppins', sans-serif;
      --body: "Inter", sans-serif;
      --mono: "IBM Plex Mono", sans-serif;
    }

    [data-theme="light"] {
      --bg: #EEEEEE;
      --panel: #FFFFFF;
      --panel-2: #F6F6F6;
      --text: #000000;
      --muted: #5C5C5C;
      --line: rgba(0, 0, 0, .14);
      --line-strong: rgba(0, 0, 0, .28);
      --red: #FF0000;
      --red-hi: #D40000;
      --red-glow: rgba(255, 0, 0, .22);
      --head-bg: rgba(238, 238, 238, .82);
      --ph-a: #E4E4E4;
      --ph-b: #D8D8D8;
      --ph-hatch: rgba(0, 0, 0, .05);
      --ph-chip: rgba(255, 255, 255, .8);
      --stack-mid: #E7E7E7;
      --grain-o: .3;
      --plexus-grey: 150, 150, 150;
      --plexus-red: 214, 0, 0;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box
    }

    html {
      scroll-behavior: smooth
    }

    @media (prefers-reduced-motion:reduce) {
      html {
        scroll-behavior: auto
      }

      *,
      *::before,
      *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important
      }
    }

    body {
      font-family: var(--body);
      background: var(--bg);
      color: var(--text);
      font-size: 17px;
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }

    body,
    .site-head,
    .stack-cell,
    .case-media,
    .principle {
      transition: background-color .35s ease, color .35s ease, border-color .35s ease
    }

    ::selection {
      background: var(--red);
      color: #fff
    }

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

    a:focus-visible,
    button:focus-visible {
      outline: 2px solid var(--red-hi);
      outline-offset: 3px;
      border-radius: 2px
    }

    img {
      max-width: 100%;
      display: block
    }

    .grain {
      position: fixed;
      inset: 0;
      z-index: 90;
      pointer-events: none;
      opacity: var(--grain-o);
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
    }

    [data-theme="light"] .grain {
      filter: invert(1);
      opacity: .28
    }

    /* ---------- header ---------- */
    .site-head {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 70;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      padding: 18px clamp(20px, 4vw, 48px);
      border-bottom: 1px solid var(--line);
      background: var(--head-bg);
      backdrop-filter: blur(12px);
    }

    .brand {
      font: 700 15px/1 var(--display);
      letter-spacing: .02em;
      display: flex;
      align-items: center;
      gap: 10px
    }

    .brand-mark {
      width: 26px;
      height: 26px;
      background: var(--red);
      color: var(--on-red);
      display: grid;
      place-items: center;
      font: 700 11px var(--mono);
      border-radius: 5px;
    }

    .site-nav {
      display: flex;
      gap: 26px;
      align-items: center;
      margin-left: auto
    }

    .site-nav a {
      font: 500 13px var(--body);
      color: var(--muted);
      transition: color .2s
    }

    .site-nav a:hover {
      color: var(--text)
    }

    .theme-toggle {
      display: flex;
      align-items: center;
      gap: 2px;
      border: 1px solid var(--line-strong);
      border-radius: 100px;
      padding: 3px;
      background: transparent;
      cursor: pointer;
    }

    .theme-toggle span {
      font: 600 11px var(--mono);
      letter-spacing: .08em;
      text-transform: uppercase;
      padding: 6px 13px;
      border-radius: 100px;
      color: var(--muted);
      transition: color .25s, background .25s;
    }

    .theme-toggle span.on {
      background: var(--red);
      color: var(--on-red)
    }

    @media (max-width:900px) {
      .site-nav {
        display: none
      }
    }

    /* ---------- layout ---------- */
    .wrap {
      max-width: 1180px;
      margin: 0 auto;
      padding: 0 clamp(20px, 4vw, 48px);
      position: relative;
      z-index: 2
    }

    section {
      border-bottom: 1px solid var(--line)
    }

    .eyebrow {
      display: flex;
      align-items: center;
      gap: 14px;
      font: 500 12px var(--mono);
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: clamp(28px, 4vw, 48px);
    }

    .eyebrow .tc {
      color: var(--red-hi)
    }

    .eyebrow::after {
      content: "";
      flex: 1;
      height: 1px;
      background: var(--line)
    }

    /* ---------- hero ---------- */
    .hero {
      min-height: 100svh;
      display: flex;
      flex-direction: column;
      position: relative;
      overflow: hidden;
      perspective: 1400px;
    }

    .hero-scene {
      position: absolute;
      inset: 0;
      transform-style: preserve-3d;
      will-change: transform;
    }

    .hero-plane {
      position: absolute;
      inset: 0;
      transform-style: preserve-3d;
    }

    .hero-plane--back {
      transform: translateZ(-200px);
      z-index: 0;
    }

    .hero-plane--mid {
      transform: translateZ(-70px);
      z-index: 1;
    }

    .hero-plane--front {
      position: relative;
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      z-index: 2;
    }

    .hero-watermark {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding-inline-end: clamp(0px, 2vw, 40px);
      font: 700 clamp(220px, 34vw, 560px)/1 var(--display);
      letter-spacing: -.04em;
      color: var(--text);
      opacity: .05;
      white-space: nowrap;
      pointer-events: none;
      user-select: none;
    }

    .hero .wrap {
      width: 100%;
      padding-bottom: clamp(40px, 6vh, 72px)
    }

    .glow {
      position: absolute;
      border-radius: 50%;
      filter: blur(100px);
      pointer-events: none;
      z-index: 0
    }

    .glow-a {
      width: 60vw;
      height: 60vw;
      max-width: 860px;
      max-height: 860px;
      top: -24%;
      right: -16%;
      background: radial-gradient(circle, var(--red-glow), transparent 66%);
      animation: drift 18s ease-in-out infinite alternate;
    }

    .glow-b {
      width: 40vw;
      height: 40vw;
      max-width: 560px;
      max-height: 560px;
      bottom: -16%;
      left: -12%;
      background: radial-gradient(circle, var(--red-glow), transparent 68%);
      opacity: .6;
      animation: drift 24s ease-in-out infinite alternate-reverse;
    }

    @keyframes drift {
      from {
        transform: translate(0, 0) scale(1)
      }

      to {
        transform: translate(-6%, 5%) scale(1.12)
      }
    }

    .hero-grid-bg {
      position: absolute;
      inset: 0;
      pointer-events: none;
      opacity: .7;
      z-index: 1;
      background:
        linear-gradient(var(--line) 1px, transparent 1px) 0 0/100% 25%,
        linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0/25% 100%;
      mask-image: radial-gradient(120% 90% at 70% 10%, #000 30%, transparent 78%);
    }

    .hero-grid-fx {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 2;
      mask-image: radial-gradient(120% 90% at 70% 10%, #000 30%, transparent 78%);
    }


    .hero h1 {
      font: 300 clamp(42px, 7.2vw, 104px)/1.03 var(--display);
      letter-spacing: -.03em;
      max-width: 15ch
    }

    .hero h1 .line {
      display: block;
      overflow: hidden
    }

    .hero h1 .line>span {
      display: inline-block
    }

    .hero h1 .line.hero-title-name {
      margin-bottom: clamp(6px, 1vh, 12px);
    }

    .hero h1 .line.hero-title-name>span {
      font: 500 12px var(--mono);
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--muted);
    }

    .hero h1 .line.hero-title-name .tc {
      color: var(--red-hi);
    }

    .hero h1 em {
      font-style: normal;
      font-weight: 700;
      color: var(--red)
    }

    .hero-sub {
      max-width: 56ch;
      color: var(--muted);
      margin-top: clamp(22px, 3vh, 34px);
      font-size: clamp(16px, 1.4vw, 19px)
    }

    .hero-cta {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      margin-top: clamp(26px, 4vh, 42px)
    }

    .btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font: 600 14px var(--body);
      padding: 14px 26px;
      border-radius: 100px;
      border: 1px solid var(--line-strong);
      background: transparent;
      color: var(--text);
      cursor: pointer;
      transition: box-shadow .25s, border-color .25s, color .25s, background .25s;
    }

    .btn-solid {
      background: var(--red);
      color: var(--on-red);
      border-color: var(--red);
      box-shadow: 0 4px 22px var(--red-glow)
    }

    .btn-solid:hover {
      box-shadow: 0px 0px 34px var(--white-glow);
      border-color: var(--white);
    }


    .hero-meta {
      display: flex;
      gap: clamp(22px, 4vw, 60px);
      flex-wrap: wrap;
      margin-top: clamp(34px, 6vh, 60px);
      padding-top: 24px;
      border-top: 1px solid var(--line)
    }

    .hero-meta div {
      font: 500 12px var(--mono);
      letter-spacing: .06em;
      color: var(--muted)
    }

    .hero-meta strong {
      display: block;
      font: 600 15px var(--body);
      color: var(--text);
      letter-spacing: 0;
      margin-bottom: 4px
    }

    @media (max-width:600px) {
      .hero-meta {
        flex-direction: column;
        align-items: center;
        text-align: center;
      }
    }

    /* ---------- clients marquee ---------- */
    .marquee {
      overflow: hidden;
      padding: 15px 0;
      background: var(--red);
      color: var(--on-red);
      border-block: 1px solid var(--red)
    }

    .marquee-track {
      display: flex;
      width: max-content;
      animation: slide 34s linear infinite
    }

    .marquee span {
      font: 600 13px var(--mono);
      letter-spacing: .16em;
      text-transform: uppercase;
      padding: 0 26px;
      white-space: nowrap;
      display: flex;
      align-items: center;
      gap: 26px
    }

    .marquee span::after {
      content: "◆";
      font-size: 9px;
      opacity: .65
    }

    @keyframes slide {
      to {
        transform: translateX(-50%)
      }
    }

    @media (prefers-reduced-motion:reduce) {
      .marquee-track {
        animation: none
      }
    }

    /* ---------- work ---------- */
    .work {
      padding: clamp(70px, 10vh, 130px) 0
    }

    .work-group {
      margin-bottom: clamp(52px, 8vh, 92px)
    }

    .work-group:last-child {
      margin-bottom: 0
    }

    .group-head {
      display: flex;
      align-items: center;
      gap: 18px;
      flex-wrap: wrap;
      margin-bottom: clamp(26px, 4vh, 40px)
    }

    .group-head h3 {
      font: 600 clamp(22px, 2.6vw, 32px)/1.1 var(--display);
      letter-spacing: -.02em
    }

    .group-head .tag {
      font: 500 11px var(--mono);
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--red-hi);
      border: 1px solid currentColor;
      border-radius: 100px;
      padding: 5px 12px
    }

    .case {
      display: grid;
      grid-template-columns: 1.15fr .85fr;
      gap: clamp(24px, 4vw, 54px);
      padding: clamp(26px, 4vh, 42px) 0;
      border-top: 1px solid var(--line);
      align-items: start
    }

    .case:nth-child(even) {
      grid-template-columns: .85fr 1.15fr
    }

    .case:nth-child(even) .case-media {
      order: 2
    }

    .work .case-media {
      position: sticky;
      top: 24vh
    }

    .case-media {
      position: relative;
      border-radius: 12px;
      overflow: hidden;
      border: 1px solid var(--line);
      aspect-ratio: 16/10;
      background: var(--panel);
      transition: border-color .3s, box-shadow .3s
    }

    .case-media:hover {
      border-color: var(--red);
      box-shadow: 0 0 36px var(--red-glow)
    }

    .ph {
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      background: repeating-linear-gradient(45deg, transparent 0 14px, var(--ph-hatch) 14px 15px), linear-gradient(160deg, var(--ph-a), var(--ph-b));
      transition: transform .6s cubic-bezier(.2, .8, .2, 1)
    }

    .case-media:hover .ph {
      transform: scale(1.035)
    }

    .case-media .ph {
      top: 0%;
      height: 100%
    }

    .case-pp {
      position: relative;
      aspect-ratio: 1/1;
      border-radius: 12px;
      overflow: hidden;
    }

    .case-pp img {
      border: 1px solid var(--line);
    }

    .case-media .case-video {
      top: -7%;
      height: 114%
    }

    .case-video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform .6s cubic-bezier(.2, .8, .2, 1)
    }

    .case-media:hover .case-video {
      transform: scale(1.035)
    }

    .case-media .case-video+.ph {
      opacity: 0;
      pointer-events: none
    }

    .ph b {
      font: 500 11px var(--mono);
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--muted);
      border: 1px dashed var(--line-strong);
      padding: 10px 18px;
      border-radius: 6px;
      background: var(--ph-chip)
    }

    .case-num {
      font: 500 12px var(--mono);
      letter-spacing: .08em;
      color: var(--red-hi);
      margin-bottom: 12px
    }

    .case-body h4 {
      font: 600 clamp(21px, 2.2vw, 29px)/1.15 var(--display);

      margin-bottom: 14px;
      max-width: 22ch
    }

    .case-body>p {
      color: var(--muted);
      max-width: 52ch;
      margin-bottom: 22px
    }

    .case-facts {
      border-top: 1px solid var(--line)
    }

    .case-facts div {
      display: grid;
      grid-template-columns: 92px 1fr;
      gap: 16px;
      padding: 12px 0;
      border-bottom: 1px solid var(--line);
      font-size: 14.5px
    }

    .case-facts dt {
      font: 500 11px var(--mono);
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--muted);
      padding-top: 3px
    }

    .case-link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-top: 20px;
      font: 600 14px var(--body);
      color: var(--red-hi)
    }

    .case-link svg {
      transition: transform .25s
    }

    .case-link:hover svg {
      transform: translate(3px, -3px)
    }

    @media (max-width:840px) {

      .case,
      .case:nth-child(even) {
        grid-template-columns: 1fr
      }

      .case:nth-child(even) .case-media {
        order: 0
      }

      .work .case-media {
        position: relative;
        top: auto
      }
    }

    /* ---------- stack ---------- */
    .stack {
      position: relative;
      padding: clamp(70px, 10vh, 130px) 0;
      background: var(--bg);
      overflow: hidden;
      isolation: isolate;
    }

    .plexus-canvas {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
      display: block;
    }

    .stack .wrap {
      position: relative;
      z-index: 1;
    }

    .stack-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 30px;
      overflow: hidden;
      will-change: auto !important;
    }

    .stack-cell {
      background: rgba(18, 18, 18, .3);
      backdrop-filter: blur(3px) saturate(160%) brightness(1.6);
      -webkit-backdrop-filter: blur(3px) saturate(160%) brightness(1.6);
      padding: clamp(22px, 2.4vw, 32px);
      border: 1px solid var(--line);
      border-radius: 12px;
    }

    .stack-cell:hover {
      background: rgba(28, 28, 28, .35)
    }

    [data-theme="light"] .stack-cell {
      background: rgba(255, 255, 255, .4);
      backdrop-filter: blur(3px) saturate(130%);
      -webkit-backdrop-filter: blur(3px) saturate(130%);
    }

    [data-theme="light"] .stack-cell:hover {
      background: rgba(255, 255, 255, .55)
    }

    .stack-cell h4 {
      font: 500 12px var(--mono);
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--red-hi);
      margin-bottom: 18px;
      display: flex;
      align-items: center;
      gap: 10px
    }

    .stack-cell h4::before {
      content: "";
      width: 8px;
      height: 8px;
      background: var(--red);
      border-radius: 1px
    }

    .stack-cell ul {
      list-style: none
    }

    .stack-cell li {
      padding: 9px 0;
      border-bottom: 1px dashed var(--line);
      font-size: 15px;
      display: flex;
      justify-content: space-between;
      gap: 12px
    }

    .stack-cell li:last-child {
      border: none
    }

    .stack-cell li small {
      font: 400 11px var(--mono);
      color: var(--muted);
      white-space: nowrap;
      padding-top: 3px
    }

    @media (max-width:1000px) {
      .stack-grid {
        grid-template-columns: repeat(2, 1fr)
      }
    }

    @media (max-width:560px) {
      .stack-grid {
        grid-template-columns: 1fr
      }
    }

    /* ---------- how I work ---------- */
    .approach {
      padding: clamp(70px, 10vh, 130px) 0
    }

    .approach-grid {
      display: flex;
      flex-direction: column;
      border: 1px solid var(--line);
      border-radius: 12px;
      overflow: hidden;
      background: var(--panel);
    }

    .principle {
      position: relative;
      border-bottom: 1px solid var(--line-strong);
      padding: clamp(20px, 2.4vw, 30px);
      cursor: pointer;
      transition: background .3s, border-color .3s;
    }

    .principle:last-child {
      border-bottom: none;
    }

    .principle:focus-visible {
      outline: 2px solid var(--red);
      outline-offset: -2px;
    }

    .principle.is-active {
      background: var(--panel-2);
      border-color: var(--red);
      cursor: default;
    }

    .principle .pn {
      display: block;
      font: 500 12px var(--mono);
      letter-spacing: .08em;
      color: var(--red-hi);
      margin-bottom: 10px;
    }

    .ptoggle {
      position: absolute;
      top: clamp(20px, 2.4vw, 30px);
      right: clamp(20px, 2.4vw, 30px);
      font: 500 11px var(--mono);
      letter-spacing: .08em;
    }

    .ptoggle-open {
      display: none;
      color: var(--red-hi);
    }

    .ptoggle-closed {
      display: inline;
      color: var(--muted);
    }

    .principle.is-active .ptoggle-open {
      display: inline;
    }

    .principle.is-active .ptoggle-closed {
      display: none;
    }

    .principle h4 {
      font: 600 20px/1.25 var(--display);
      letter-spacing: -.01em;
      color: var(--muted);
      transition: color .3s;
      padding-right: 70px;
    }

    .principle.is-active h4 {
      color: var(--text);
    }

    .principle p {
      color: var(--muted);
      font-size: 15px;
      margin: 0
    }

    .principle p.text-white {
      color: var(--text);
    }

    .principle-collapse {
      display: grid;
      grid-template-rows: 0fr;
      transition: grid-template-rows .45s cubic-bezier(.19, 1, .22, 1);
    }

    .principle.is-active .principle-collapse {
      grid-template-rows: 1fr;
    }

    .principle-body {
      min-height: 0;
      overflow: hidden;
      opacity: 0;
      display: grid;
      grid-template-columns: 1fr;
      gap: 28px;
      transition: opacity .3s ease;
    }

    .principle.is-active .principle-body {
      opacity: 1;
      padding-top: 16px;
      transition: opacity .35s ease .15s;
    }

    @media (min-width:761px) {
      .principle-body {
        grid-template-columns: 1.5fr 1fr;
        gap: 56px;
        align-items: start;
      }
    }

    /* ---- demo panel shell ---- */
    .demo {
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 20px;
      background: rgba(128, 128, 128, .04);
    }

    /* -- 01: architecture / flow diagram -- */
    .demo-flow {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 14px;
    }

    .flow-svg {
      width: 100%;
      height: auto;
      overflow: visible;
    }

    .flow-line {
      stroke: var(--line-strong);
      stroke-width: 2;
      fill: none;
    }

    .flow-node {
      fill: var(--panel-2);
      stroke: var(--red-hi);
      stroke-width: 2;
    }

    .flow-node-glow {
      fill: var(--red);
      stroke: var(--red);
      stroke-width: 2;
      transform-box: fill-box;
      transform-origin: center;
      filter: drop-shadow(0 0 8px var(--red));
      opacity: 0;
      pointer-events: none;
      animation: nodeGlow 4.2s ease-in-out infinite;
    }

    .flow-node-glow-1 {
      animation-delay: 0s;
    }

    .flow-node-glow-2 {
      animation-delay: 1.512s;
    }

    .flow-node-glow-3 {
      animation-delay: 3.024s;
    }

    @keyframes nodeGlow {

      0%,
      15% {
        opacity: 1;
        transform: scale(1.15);
      }

      28%,
      100% {
        opacity: 0;
        transform: scale(1);
      }
    }

    .flow-pulse {
      fill: var(--red);
      filter: drop-shadow(0 0 6px var(--red));
    }

    .flow-labels {
      position: relative;
      height: 14px;
      font: 500 11px var(--mono);
      letter-spacing: .05em;
      text-transform: uppercase;
      color: var(--muted);
    }

    .flow-labels span {
      position: absolute;
      top: 0;
      transform: translateX(-50%);
      white-space: nowrap;
    }

    .flow-labels span:nth-child(1) {
      left: 11.54%;
    }

    .flow-labels span:nth-child(2) {
      left: 50%;
    }

    .flow-labels span:nth-child(3) {
      left: 88.46%;
    }

    /* -- 02: lighthouse-style score gauge -- */
    .demo-gauge {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 18px;
    }

    .gauge-ring-wrap {
      position: relative;
      width: 108px;
      height: 108px;
    }

    .gauge-ring {
      width: 100%;
      height: 100%;
      transform: rotate(-90deg);
    }

    .gauge-ring circle {
      fill: none;
      stroke-width: 9;
    }

    .gauge-track {
      stroke: var(--line-strong);
    }

    .gauge-fill {
      stroke: #22c55e;
      stroke-linecap: round;
      stroke-dasharray: 314;
      stroke-dashoffset: 314;
      filter: drop-shadow(0 0 6px rgba(34, 197, 94, .55));
      transition: stroke-dashoffset 1.1s cubic-bezier(.19, 1, .22, 1);
    }

    .principle.is-active .gauge-fill {
      stroke-dashoffset: 4;
    }

    .gauge-score {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font: 700 28px var(--display);
      color: var(--text);
    }

    .gauge-metrics {
      display: flex;
      gap: 18px;
      font: 500 11px var(--mono);
      color: var(--muted);
      text-align: center;
    }

    .gauge-metrics dt {
      text-transform: uppercase;
      letter-spacing: .06em;
      margin-bottom: 4px;
    }

    .gauge-metrics dd {
      color: var(--text);
      font-weight: 600;
      font-size: 13px;
    }

    /* -- 03: good design / bad design toggle -- */
    .demo-design {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 16px;
    }

    .design-toggle {
      display: flex;
      gap: 2px;
      border: 1px solid var(--line-strong);
      border-radius: 100px;
      padding: 3px;
    }

    .design-btn {
      flex: 1;
      border: none;
      background: transparent;
      color: var(--muted);
      font: 600 12px var(--mono);
      letter-spacing: .04em;
      text-transform: uppercase;
      padding: 10px 14px;
      border-radius: 100px;
      cursor: pointer;
      transition: background .25s, color .25s;
    }

    .design-btn[aria-pressed="true"] {
      background: var(--red);
      color: var(--on-red);
    }

    .design-hint {
      font-size: 13px;
      color: var(--muted);
      margin: 0;
    }

    html.kablammo-mode,
    html.kablammo-mode body,
    html.kablammo-mode * {
      font-family: 'Crafty Girls', cursive !important;
    }

    html.kablammo-mode h1,
    html.kablammo-mode h2,
    html.kablammo-mode h3,
    html.kablammo-mode h4,
    html.kablammo-mode h5,
    html.kablammo-mode h6 {
      font-family: 'Kablammo', cursive !important;
    }

    /* -- 04: "enhance vs. distract" motion stress-test -- */
    .demo-stress {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .stress-frame {
      position: relative;
      height: 120px;
    }

    .stress-target-wrap {
      position: absolute;
      inset: 0;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--bg);
      overflow: hidden;
    }

    .stress-target {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      pointer-events: none;
    }

    .stress-target-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      padding: 14px 22px;
      border: 1px solid var(--line-strong);
      border-radius: 10px;
      background: var(--panel-2);
      animation-name: stressSpring;
      animation-timing-function: ease-in-out;
      animation-iteration-count: infinite;
      animation-duration: calc(1.8s - var(--intensity, 0) * .25s);
    }

    @keyframes stressSpring {

      0%,
      100% {
        transform: translateY(0) rotate(0deg) scale(calc(1 + var(--intensity, 0) * .03));
      }

      50% {
        transform: translateY(calc(var(--intensity, 0) * -7px)) rotate(calc(var(--intensity, 0) * 2.5deg)) scale(calc(1 + var(--intensity, 0) * .1));
      }
    }

    .stress-target-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--red);
    }

    .stress-target-label {
      font: 500 11px var(--mono);
      letter-spacing: .06em;
      text-transform: uppercase;
      color: var(--muted);
    }

    .stress-flare {
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .95), rgba(255, 50, 50, .55) 25%, transparent 62%);
      opacity: 0;
      mix-blend-mode: screen;
    }

    .stress-warning {
      position: absolute;
      left: 50%;
      bottom: 10px;
      transform: translate(-50%, 8px);
      background: var(--red);
      color: var(--on-red);
      font: 700 10px var(--mono);
      letter-spacing: .04em;
      padding: 6px 10px;
      border-radius: 6px;
      white-space: nowrap;
      opacity: 0;
      transition: opacity .2s ease, transform .2s ease;
    }

    .stress-frame.overdrive .stress-target-wrap {
      animation: stressDistort .25s steps(2) infinite;
    }

    .stress-frame.overdrive .stress-target-card {
      animation-name: stressShake;
      animation-duration: .32s;
    }

    .stress-frame.overdrive .stress-flare {
      animation: stressFlare .6s ease-in-out infinite;
    }

    .stress-frame.overdrive .stress-warning {
      opacity: 1;
      transform: translate(-50%, 0);
    }

    @keyframes stressShake {
      0% {
        transform: translate(0, 0) rotate(0deg);
      }

      10% {
        transform: translate(-6px, 3px) rotate(-4deg);
      }

      20% {
        transform: translate(5px, -4px) rotate(3deg);
      }

      30% {
        transform: translate(-4px, 5px) rotate(-3deg);
      }

      40% {
        transform: translate(6px, -3px) rotate(4deg);
      }

      50% {
        transform: translate(-5px, -5px) rotate(-2deg);
      }

      60% {
        transform: translate(4px, 4px) rotate(3deg);
      }

      70% {
        transform: translate(-6px, 2px) rotate(-4deg);
      }

      80% {
        transform: translate(5px, -3px) rotate(2deg);
      }

      90% {
        transform: translate(-3px, 4px) rotate(-3deg);
      }

      100% {
        transform: translate(0, 0) rotate(0deg);
      }
    }

    .stress-frame.escaping .stress-target-card {
      position: relative;
      z-index: 2;
      animation-name: stressShakeExtreme;
      animation-duration: .28s;
    }

    @keyframes stressShakeExtreme {
      0% {
        transform: translate(0, 0) rotate(0deg);
      }

      10% {
        transform: translate(-38px, 26px) rotate(-16deg);
      }

      20% {
        transform: translate(34px, -42px) rotate(15deg);
      }

      30% {
        transform: translate(-46px, 44px) rotate(-18deg);
      }

      40% {
        transform: translate(42px, -28px) rotate(17deg);
      }

      50% {
        transform: translate(-36px, -46px) rotate(-14deg);
      }

      60% {
        transform: translate(40px, 40px) rotate(16deg);
      }

      70% {
        transform: translate(-46px, 22px) rotate(-17deg);
      }

      80% {
        transform: translate(36px, -34px) rotate(14deg);
      }

      90% {
        transform: translate(-32px, 38px) rotate(-15deg);
      }

      100% {
        transform: translate(0, 0) rotate(0deg);
      }
    }

    @keyframes stressFlare {

      0%,
      100% {
        opacity: 0;
        transform: scale(.8);
      }

      50% {
        opacity: .9;
        transform: scale(1.3);
      }
    }

    @keyframes stressDistort {
      0% {
        filter: blur(0) saturate(1) hue-rotate(0deg);
      }

      50% {
        filter: blur(1.5px) saturate(1.8) hue-rotate(15deg) contrast(1.3);
      }

      100% {
        filter: blur(.5px) saturate(1.3) hue-rotate(-10deg);
      }
    }

    .stress-control {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .stress-label {
      font: 500 11px var(--mono);
      letter-spacing: .06em;
      text-transform: uppercase;
      color: var(--muted);
    }

    .stress-value {
      color: var(--red-hi);
    }

    .stress-slider {
      width: 100%;
      accent-color: var(--red);
    }

    .stress-ticks {
      display: flex;
      justify-content: space-between;
      font: 500 10px var(--mono);
      color: var(--muted);
    }

    @media (prefers-reduced-motion: reduce) {

      .stress-target-card,
      .stress-flare,
      .stress-target-wrap {
        animation: none !important;
      }
    }

    /* ---------- about ---------- */
    .about {
      padding: clamp(70px, 10vh, 130px) 0
    }

    .about-grid {
      display: grid;
      grid-template-columns: .9fr 1.1fr;
      gap: clamp(30px, 5vw, 68px);
      align-items: start
    }

    .about-media {
      position: sticky;
      top: 104px
    }

    .about-media .case-media {
      aspect-ratio: 1/1
    }

    .about-copy h3 {
      font: 600 clamp(25px, 3vw, 38px)/1.15 var(--display);

      margin-bottom: 20px;
      max-width: 20ch
    }

    .about-copy p {
      color: var(--muted);
      max-width: 58ch;
      margin-bottom: 16px
    }

    .timeline {
      margin-top: clamp(30px, 4vh, 44px);
      border-left: 2px solid var(--line-strong);
      padding-left: 25px
    }

    .tl-item {
      position: relative;
      padding-bottom: 26px
    }

    .tl-item:last-child {
      padding-bottom: 0
    }

    .tl-item::before {
      content: "";
      position: absolute;
      left: -33px;
      top: 6px;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: var(--bg);
      border: 2px solid var(--line-strong)
    }

    .tl-item.now::before {
      background: var(--red);
      border-color: var(--red);
      box-shadow: 0 0 12px var(--red-glow)
    }

    .tl-item time {
      font: 500 11px var(--mono);
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--muted)
    }

    .tl-item h5 {
      font: 600 18px/1.3 var(--display);
      margin: 4px 0 6px
    }

    .tl-item h5 span {
      color: var(--muted);
      font-weight: 400
    }

    .tl-item p {
      font-size: 15px;
      margin: 0;
      max-width: 52ch;
      color: var(--muted)
    }

    .edu {
      margin-top: 28px;
      padding-top: 22px;
      border-top: 1px solid var(--line);
      display: flex;
      gap: clamp(22px, 4vw, 52px);
      flex-wrap: wrap
    }

    .edu div {
      font: 500 12px var(--mono);
      letter-spacing: .05em;
      color: var(--muted)
    }

    .edu strong {
      display: block;
      font: 600 15px var(--body);
      color: var(--text);
      letter-spacing: 0;
      margin-bottom: 4px
    }

    .about-cta {
      margin-top: clamp(26px, 4vh, 38px);
      display: flex;
      gap: 14px;
      flex-wrap: wrap
    }

    @media (max-width:840px) {
      .about-grid {
        grid-template-columns: 1fr
      }

      .about-media {
        position: static;
        max-width: 400px
      }
    }

    /* ---------- footer ---------- */
    .footer {
      padding: clamp(70px, 12vh, 140px) 0 0;
      background: var(--bg);
      color: var(--text);
      position: relative;
      overflow: hidden;
      border-top: 1px solid var(--line)
    }

    .footer::before {
      content: "";
      position: absolute;
      top: -28%;
      left: 50%;
      transform: translateX(-50%);
      width: 90vw;
      height: 70vh;
      max-width: 1050px;
      background: radial-gradient(ellipse at center, var(--red-glow), transparent 68%);
      filter: blur(60px);
      pointer-events: none
    }

    .footer .wrap {
      position: relative;
      z-index: 2
    }

    .footer-title {
      font: 300 clamp(36px, 6vw, 80px)/1.05 var(--display);
      letter-spacing: -.03em;
      max-width: 16ch
    }

    .footer-title em {
      font-style: normal;
      font-weight: 700;
      color: var(--red)
    }

    .contact-list {
      display: flex;
      flex-wrap: wrap;
      gap: clamp(20px, 4vw, 56px);
      margin-top: clamp(28px, 4vh, 44px)
    }

    .contact-list a,
    .contact-list span {
      font: 500 clamp(15px, 1.5vw, 19px) var(--mono);
      letter-spacing: -.01em;
      color: var(--text);
      border-bottom: 2px solid var(--red);
      padding-bottom: 5px;
      transition: color .25s, border-color .25s
    }

    .contact-list a:hover {
      color: var(--red-hi);
      border-color: var(--red-hi)
    }

    .contact-list span {
      border-color: transparent;
      color: var(--muted)
    }

    .contact-form {
      max-width: 640px;
      margin-top: clamp(28px, 4vh, 44px);
    }

    .contact-form-hp {
      position: absolute;
      left: -9999px;
    }

    .contact-form-row {
      display: grid;
      grid-template-columns: 1fr;
      gap: 22px;
    }

    @media (min-width:600px) {
      .contact-form-row {
        grid-template-columns: 1fr 1fr;
      }
    }

    .contact-form-field {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-top: 22px;
    }

    .contact-form-row .contact-form-field {
      margin-top: 0;
    }

    .contact-form-field span {
      font: 500 11px var(--mono);
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--muted);
    }

    .contact-form-field input,
    .contact-form-field textarea {
      font: 500 16px var(--mono);
      color: var(--text);
      background: transparent;
      border: none;
      border-bottom: 2px solid var(--line-strong);
      padding-bottom: 8px;
      resize: vertical;
      transition: border-color .25s;
    }

    .contact-form-field input:focus,
    .contact-form-field textarea:focus {
      outline: none;
      border-color: var(--red);
    }

    .contact-form-foot {
      display: flex;
      align-items: center;
      gap: 20px;
      margin-top: 30px;
    }

    .contact-form-status {
      font: 500 13px var(--mono);
      color: var(--muted);
    }

    .contact-form.is-sent .contact-form-status {
      color: var(--red-hi);
    }

    .contact-form.is-error .contact-form-status {
      color: var(--red);
    }

    .footer-base {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 16px;
      margin-top: clamp(52px, 8vh, 90px);
      padding: 22px 0;
      border-top: 1px solid var(--line);
      font: 400 12.5px var(--mono);
      letter-spacing: .05em;
      color: var(--muted)
    }

    .footer-base nav {
      display: flex;
      gap: 22px
    }

    .footer-base a:hover {
      color: var(--text)
    }

    .to-reveal {
      will-change: transform, opacity
    }

    /* ---------- utilities ---------- */

    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    .d-flex {
      display: flex;
    }

    .flex-column {
      flex-direction: column;
    }

    .flex-wrap {
      flex-wrap: wrap;
    }

    .align-center {
      align-items: center;
    }

    .align-start {
      align-items: start;
    }

    .align-baseline {
      align-items: baseline;
    }

    .justify-between {
      justify-content: space-between;
    }

    .justify-end {
      justify-content: flex-end;
    }

    .gap-xs {
      gap: 8px;
    }

    .gap-sm {
      gap: 14px;
    }

    .gap-md {
      gap: 22px;
    }

    .gap-lg {
      gap: clamp(24px, 4vw, 56px);
    }

    /* ---------- work rail ---------- */
    .rail {
      position: relative;
    }

    .rail-stage {
      position: relative;
      height: 100vh;
      overflow: hidden;
      display: flex;
      align-items: center;
    }

    .rail-eyebrow {
      position: absolute;
      top: clamp(76px, 10vh, 110px);
      left: clamp(20px, 5vw, 64px);
      z-index: 6;
    }

    .rail-rays {
      position: absolute;
      inset: -12%;
      z-index: 0;
      pointer-events: none;
      will-change: transform, opacity;
      transform: translateZ(0);
    }

    .rail-rays line {
      stroke: var(--line);
      stroke-width: 1.5;
    }

    .rail-rays .axis {
      stroke: var(--line-strong);
    }

    .rail-rays .rings rect {
      fill: none;
      stroke: var(--line);
      stroke-width: 1.5;
    }

    .rail-rays .rings rect:nth-child(1) {
      stroke-opacity: .9;
    }

    .rail-rays .rings rect:nth-child(2) {
      stroke-opacity: .65;
    }

    .rail-rays .rings rect:nth-child(3) {
      stroke-opacity: .45;
    }

    .rail-rays .rings rect:nth-child(4) {
      stroke-opacity: .28;
    }

    .rail-eras {
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      contain: layout paint;
    }

    .era {
      position: absolute;
      top: 50%;
      left: 0;
      font-family: var(--display);
      font-weight: 700;
      font-size: clamp(64px, 7.5vw, 132px);
      line-height: .82;
      letter-spacing: -.045em;
      text-transform: uppercase;
      white-space: nowrap;
      color: var(--text);
      opacity: 0;
      will-change: transform, opacity;
      transform: translateZ(0);
    }

    .rail-track {
      position: relative;
      z-index: 2;
      display: flex;
      align-items: center;
      gap: var(--rail-gap);
      padding-inline-start: calc(50vw - (var(--rail-card-w) / 2) - var(--rail-ticks-w) - var(--rail-gap));
      padding-inline-end: calc(50vw - (var(--rail-card-w) / 2));
      will-change: transform;
    }

    :root {
      --rail-card-w: clamp(340px, 52vw, 790px);
      --rail-card-h: min(80vh, 780px);
      --rail-gap: clamp(40px, 5vw, 84px);
      --rail-ticks-w: 17px;
    }

    .rail-ticks {
      flex: none;
      display: flex;
      gap: 7px;
      align-items: center;
      height: 72px;
    }

    .rail-ticks span {
      display: block;
      width: 1px;
      height: 100%;
      background: var(--line);
    }

    .rail-ticks span:nth-child(2) {
      height: 55%;
    }

    .rail-ticks span:nth-child(3) {
      height: 30%;
    }

    .rail-card {
      flex: none;
      width: var(--rail-card-w);
      height: var(--rail-card-h);
      position: relative;
      display: flex;
      flex-direction: column;
      padding: clamp(18px, 2vw, 26px);
      border-radius: 18px;
      background: color-mix(in srgb, var(--panel) 95%, transparent);
      border: 1px solid var(--line);
      transform-origin: 50% 50%;
      will-change: transform, opacity;
      backface-visibility: hidden;
      contain: layout paint;
    }

    .rail-card::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      border: 1px solid var(--red);
      opacity: 0;
      transition: opacity .35s ease;
      pointer-events: none;
    }

    .rail-card.is-focus::after {
      opacity: .45;
    }

    .rail-card .rc-head {
      margin-bottom: 12px;
    }

    .rc-date {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--muted);
      display: flex;
      gap: 10px;
      align-items: center;
    }

    .rc-date .num {
      color: var(--red);
    }

    .rc-title {
      font-family: var(--display);
      font-weight: 600;
      font-size: clamp(19px, 1.6vw, 26px);
      line-height: 1.12;

      margin-top: 6px;
    }

    .rc-media {
      position: relative;
      border-radius: 12px;
      overflow: hidden;
      background: linear-gradient(145deg, var(--ph-a), var(--ph-b));
      border: 1px solid var(--line);
      height: clamp(130px, 24vh, 300px);
      flex: none;
      display: grid;
      place-items: center;
    }

    .rc-media video,
    .rc-media img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .rc-media .ph {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--muted);
    }

    .rc-body {
      margin-top: 12px;
      flex: 1;
      min-height: 0;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .rc-desc {
      font-size: 14px;
      line-height: 1.5;
      color: var(--muted);
    }

    .rc-facts {
      display: grid;
      gap: 8px;
      border-top: 1px solid var(--line);
      padding-top: 10px;
      opacity: 0;
      transition: opacity .4s ease;
    }

    .rail-card.is-focus .rc-facts {
      opacity: 1;
    }

    .rc-facts>div {
      display: grid;
      grid-template-columns: 70px 1fr;
      gap: 12px;
    }

    .rc-facts dt {
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: .05em;
      text-transform: uppercase;
      color: var(--red);
      padding-top: 2px;
      font-weight: 800;
    }

    .rc-facts dd {
      font-size: 13px;
      line-height: 1.45;
      color: var(--text);
    }

    @media (max-height: 880px) {
      .rc-desc {
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
    }

    @media (max-height: 760px) {
      .rc-media {
        height: clamp(110px, 18vh, 170px);
      }

      .rc-facts dd {
        font-size: 12.5px;
      }
    }

    .rc-foot {
      margin-top: auto;
      padding-top: 10px;
      display: flex;
      align-items: center;
      justify-content: end;
      gap: 12px;
    }

    .rc-metric {
      font-family: var(--mono);
      font-size: 12px;
      letter-spacing: .06em;
      color: var(--muted);
      display: flex;
      align-items: center;
      gap: 7px;
    }

    .rc-metric b {
      color: var(--text);
      font-weight: 500;
    }

    .rc-link {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: .1em;
      text-transform: uppercase;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border: 1px solid var(--line-strong);
      border-radius: 999px;
      padding: 7px 13px;
      transition: border-color .25s ease, color .25s ease;
      pointer-events: none;
      white-space: nowrap;
    }

    .rail-card.is-focus .rc-link {
      pointer-events: auto;
    }

    .rc-link:hover {
      border-color: var(--white);
      color: var(--red-hi);
    }

    .rail-vignette {
      position: absolute;
      inset: 0;
      z-index: 4;
      pointer-events: none;
      background: linear-gradient(90deg, var(--bg) 0%, transparent 18%, transparent 82%, var(--bg) 100%);
    }

    .rail-hud {
      position: absolute;
      z-index: 6;
      left: clamp(20px, 5vw, 64px);
      right: clamp(20px, 5vw, 64px);
      bottom: clamp(22px, 4vh, 44px);
      display: flex;
      align-items: center;
      gap: 18px;
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--muted);
    }

    .rail-bar {
      flex: 1;
      height: 1px;
      background: var(--line);
      position: relative;
    }

    .rail-bar i {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      width: 100%;
      background: var(--red);
      transform: scaleX(0);
      transform-origin: 0 50%;
      will-change: transform;
    }

    .rail-count b {
      color: var(--text);
      font-weight: 500;
    }

    @media (max-width: 860px),
    (prefers-reduced-motion: reduce) {
      .rail-stage {
        display: none;
      }
    }

    html.has-smoother {
      scroll-behavior: auto;
    }

    @media (min-width:841px) {

      html.has-smoother .about-media,
      html.has-smoother .work .case-media {
        position: relative;
        top: auto;
      }
    }

    html.has-smoother .about-media .case-pp,
    html.has-smoother .work .case-media {
      will-change: transform;
    }

    /* ---------- magnetic buttons + fill-from-centre hover ---------- */
    .btn,
    .rc-link {
      position: relative;
      z-index: 0;
      overflow: hidden;
    }

    .btn {
      will-change: transform;
    }

    .btn::before,
    .rc-link::before {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      width: 140%;
      aspect-ratio: 1;
      border-radius: 50%;
      transform: translate(-50%, -50%) scale(0);
      transition: transform .5s cubic-bezier(.19, 1, .22, 1);
      z-index: -1;
      pointer-events: none;
    }

    .btn:hover::before,
    .btn:focus-visible::before,
    .rc-link:hover::before,
    .rc-link:focus-visible::before {
      transform: translate(-50%, -50%) scale(1);
    }

    .btn-ghost::before,
    .rc-link::before {
      background: var(--red);
    }

    .btn-ghost:hover,
    .btn-ghost:focus-visible {
      color: var(--on-red);
      border-color: var(--red);
    }

    .rc-link:hover,
    .rc-link:focus-visible {
      color: var(--on-white);
    }

    .btn-solid::before {
      background: var(--text);
    }

    .btn-solid:hover,
    .btn-solid:focus-visible {
      color: var(--bg);
    }

    @media (prefers-reduced-motion: reduce) {

      .btn::before,
      .rc-link::before {
        transition: none;
      }
    }