:root {
      --paper: #F2EBDD;
      --paper-soft: #F8F3E8;
      --ink: #171827;
      --graphite: #8A8478;
      --line: rgba(23,24,39,0.14);
      --line-strong: rgba(23,24,39,0.32);
      --blue: #2D8CFF;
      --blue-soft: rgba(45,140,255,0.12);
      --shadow: rgba(48,38,24,0.16);
      --max: 1180px;
      --gutter: clamp(20px, 4vw, 56px);
      --serif: Georgia, "Times New Roman", serif;
      --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
      --ease: cubic-bezier(.22,1,.36,1);
      --type-display: 56px;
      --type-h1: 40px;
      --type-h2: 28px;
      --type-body-large: 20px;
      --type-body: 16px;
      --type-caption: 12px;
    }

    * { box-sizing: border-box; }

    html {
      scroll-behavior: smooth;
      background: #d8cbb8;
    }

    body {
      margin: 0;
      min-height: 100vh;
      color: var(--ink);
      font-family: var(--sans);
      line-height: 1.55;
      background:
        radial-gradient(circle at 18% 12%, rgba(255,255,255,.42), transparent 22rem),
        radial-gradient(circle at 82% 4%, rgba(45,140,255,.08), transparent 18rem),
        linear-gradient(116deg, #d5c8b4, #eee1cc 48%, #cbbca6);
      overflow-x: hidden;
    }

    body::before,
    body::after {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 0;
    }

    /* Procedural paper grain, fibers, and slight printing noise. */
    body::before {
      opacity: .58;
      background-image:
        radial-gradient(circle at 14% 18%, rgba(23,24,39,.11) 0 1px, transparent 1.7px),
        radial-gradient(circle at 81% 36%, rgba(255,255,255,.78) 0 1px, transparent 1.5px),
        radial-gradient(circle at 48% 82%, rgba(23,24,39,.07) 0 1px, transparent 1.7px),
        linear-gradient(82deg, transparent 0 46%, rgba(23,24,39,.024) 47%, transparent 48%);
      background-size: 31px 31px, 47px 47px, 39px 39px, 13px 100%;
      mix-blend-mode: multiply;
    }

    /* Worn paper edges. */
    body::after {
      box-shadow:
        inset 0 0 120px rgba(72,54,32,.25),
        inset 0 0 18px rgba(72,54,32,.18);
    }

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

    button {
      color: inherit;
      font: inherit;
    }

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

    .page {
      position: relative;
      z-index: 1;
      width: min(100% - 24px, 1440px);
      margin: 12px auto;
      background:
        linear-gradient(to right, rgba(45,140,255,.08) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(45,140,255,.06) 1px, transparent 1px),
        var(--paper);
      background-size: 32px 32px, 32px 32px, auto;
      box-shadow: 0 36px 90px rgba(45,35,20,.24), inset 0 1px 0 rgba(255,255,255,.54);
      isolation: isolate;
      overflow: hidden;
    }

    .page::before {
      content: "";
      position: absolute;
      inset: 14px;
      border: 1px solid rgba(23,24,39,.08);
      pointer-events: none;
      z-index: -1;
    }

    .page::after {
      content: "";
      position: absolute;
      top: -8%;
      right: 8%;
      width: 1px;
      height: 118%;
      background: rgba(45,140,255,.15);
      transform: rotate(.55deg);
      pointer-events: none;
      z-index: -1;
    }

    .skip-link {
      position: absolute;
      top: 18px;
      left: 18px;
      z-index: 20;
      transform: translateY(-160%);
      padding: 8px 12px;
      border: 1px solid var(--line-strong);
      background: var(--paper-soft);
      font-family: var(--mono);
      font-size: var(--type-caption);
    }

    .skip-link:focus { transform: translateY(0); }

    .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;
    }

    .site-nav {
      position: sticky;
      top: 0;
      z-index: 12;
      width: min(100%, var(--max));
      margin: 0 auto;
      min-height: 72px;
      padding: 0 var(--gutter);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      background: rgba(242, 235, 221, 0.88);
      border-bottom: 1px solid rgba(23,24,39,0.10);
      backdrop-filter: blur(8px);
    }

    .site-brand,
    .brand {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      color: var(--ink);
      font-family: var(--serif);
      line-height: 1;
      white-space: nowrap;
    }

    .brand-mark {
      display: grid;
      place-items: center;
      width: 42px;
      height: 42px;
      padding: 6px;
      border: 1px solid rgba(23,24,39,0.28);
      border-radius: 50%;
      background: rgba(242,235,221,0.68);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.44);
      overflow: hidden;
    }

    .brand-logo-img {
      width: 72%;
      height: 72%;
      object-fit: contain;
      display: block;
      filter: contrast(0.95);
    }

    .brand-logo-fallback {
      display: none;
      color: #171827;
      font-family: Georgia, "Times New Roman", serif;
      font-size: 18px;
      line-height: 1;
    }

    .brand-mark.has-error .brand-logo-img {
      display: none;
    }

    .brand-mark.has-error .brand-logo-fallback {
      display: block;
    }

    .brand-name {
      color: #171827;
      font-family: Georgia, "Times New Roman", serif;
      font-size: 18px;
    }

    .site-nav-links {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: clamp(18px, 3vw, 34px);
    }

    .site-nav-links a,
    .case-switcher a {
      position: relative;
      padding: 5px 0 8px;
      color: rgba(23,24,39,.56);
      font-family: var(--mono);
      font-size: var(--type-caption);
      letter-spacing: .12em;
      text-transform: uppercase;
      transition: color 180ms var(--ease);
    }

    .site-nav-links a::after,
    .case-switcher a::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 1px;
      background: currentColor;
      transform: scaleX(0);
      transform-origin: left center;
      transition: transform 200ms var(--ease);
    }

    .site-nav-links a:hover,
    .site-nav-links a:focus-visible,
    .site-nav-links a.is-active,
    .case-switcher a:hover,
    .case-switcher a:focus-visible,
    .case-switcher a.is-active {
      color: var(--ink);
      outline: none;
    }

    .site-nav-links a:hover::after,
    .site-nav-links a:focus-visible::after,
    .site-nav-links a.is-active::after,
    .case-switcher a:hover::after,
    .case-switcher a:focus-visible::after,
    .case-switcher a.is-active::after {
      transform: scaleX(1);
    }

    .nav-toggle {
      display: none;
      width: 44px;
      height: 44px;
      border: 1px solid var(--line);
      background: rgba(248,243,232,.72);
      cursor: pointer;
    }

    .nav-toggle span:not(.sr-only) {
      display: block;
      width: 18px;
      height: 1px;
      margin: 6px auto;
      background: var(--ink);
    }

    .case-switcher {
      display: flex;
      flex-wrap: wrap;
      gap: 12px clamp(18px, 4vw, 44px);
      margin: 0 0 22px;
      padding: 12px 0 18px;
      border-bottom: 1px solid var(--line);
    }

    .paper-section {
      position: relative;
      width: min(100%, var(--max));
      margin: 0 auto;
      padding: clamp(58px, 8vw, 112px) var(--gutter);
      border-top: 1px solid rgba(23,24,39,.1);
    }

    .paper-section::before {
      content: attr(data-section);
      position: absolute;
      top: 28px;
      left: var(--gutter);
      color: rgba(23,24,39,.32);
      font-family: var(--mono);
      font-size: var(--type-caption);
      letter-spacing: .14em;
    }

    .paper-section::after {
      content: "";
      position: absolute;
      top: 24px;
      right: var(--gutter);
      width: 92px;
      height: 1px;
      background: rgba(45,140,255,.45);
    }

    .eyebrow,
    .stamp,
    .meta,
    .toggle-lines,
    .filename-hint {
      font-family: var(--mono);
      font-size: var(--type-caption);
      letter-spacing: .13em;
      text-transform: uppercase;
    }

    .eyebrow {
      margin: 0 0 14px;
      color: var(--graphite);
    }

    h1,
    h2,
    h3,
    blockquote {
      margin: 0;
      color: var(--ink);
      font-family: var(--serif);
      font-weight: 400;
      letter-spacing: 0;
    }

    h1 {
      max-width: 32ch;
      font-size: var(--type-h1);
      line-height: 1.12;
    }

    h2 {
      max-width: 32ch;
      font-size: var(--type-h2);
      line-height: 1.2;
    }

    h3 {
      font-size: var(--type-body-large);
      line-height: 1.28;
    }

    p { margin: 0; }

    .lead {
      max-width: 32ch;
      font-family: var(--serif);
      font-size: var(--type-body-large);
      line-height: 1.45;
    }

    .case-summary {
      display: grid;
      gap: 8px;
      max-width: 34ch;
      margin-top: 24px;
      padding-left: 18px;
      border-left: 1px solid var(--line);
      color: rgba(23,24,39,.78);
      font-size: var(--type-body);
      line-height: 1.5;
    }

    .case-summary strong,
    .proof-line,
    .contact-links a {
      font-family: var(--mono);
      font-size: var(--type-caption);
      letter-spacing: .12em;
      text-transform: uppercase;
    }

    .proof-line {
      max-width: 42ch;
      margin: 26px 0 22px;
      color: var(--graphite);
      font-family: var(--serif);
      font-size: var(--type-body-large);
      letter-spacing: 0;
      line-height: 1.45;
      text-transform: none;
    }

    .copy {
      max-width: 64ch;
      color: rgba(23,24,39,.82);
      font-size: var(--type-body);
      line-height: 1.6;
    }

    .hero {
      width: auto;
      max-width: none;
      min-height: min(840px, calc(100vh - 24px));
      display: grid;
      align-items: center;
      padding: clamp(34px, 5vw, 72px);
      border-top: 0;
      background:
        linear-gradient(to right, rgba(23,24,39,.09) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(23,24,39,.07) 1px, transparent 1px),
        radial-gradient(circle at 78% 22%, rgba(45,140,255,.1), transparent 18rem);
      background-size: 96px 96px, 96px 96px, auto;
    }

    .hero::before {
      content: "";
      position: absolute;
      inset: clamp(18px, 3vw, 42px);
      border: 1px solid rgba(23,24,39,.22);
      box-shadow: inset 0 0 0 8px rgba(255,255,255,.12);
      pointer-events: none;
    }

    .hero::after {
      content: "";
      position: absolute;
      left: 8%;
      right: 9%;
      top: 27%;
      height: 1px;
      background: rgba(23,24,39,.14);
      box-shadow: 0 136px 0 rgba(23,24,39,.09), 0 272px 0 rgba(23,24,39,.07);
      transform: rotate(-.16deg);
    }

    .hero-inner {
      position: relative;
      z-index: 1;
      min-height: 66vh;
      display: grid;
      grid-template-columns: minmax(0,1fr) minmax(230px,.42fr);
      gap: clamp(32px, 8vw, 110px);
      align-items: end;
    }

    .hero-subtitle {
      margin-top: 24px;
      display: grid;
      gap: 6px;
      max-width: 32ch;
      font-size: var(--type-body-large);
      line-height: 1.35;
    }

    .hero-side {
      display: grid;
      justify-items: end;
      gap: 26px;
    }

    .stamp {
      display: inline-grid;
      place-items: center;
      width: clamp(112px, 14vw, 170px);
      aspect-ratio: 1;
      border: 1px solid rgba(23,24,39,.22);
      border-radius: 50%;
      background: rgba(242,235,221,.52);
      color: rgba(23,24,39,.54);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.56), 0 16px 28px rgba(46,37,24,.08);
      font-family: var(--serif);
      font-size: var(--type-h1);
      letter-spacing: -.04em;
      transform: rotate(-5deg);
      text-transform: none;
    }

    .label-stack {
      display: grid;
      gap: 10px;
      justify-items: end;
    }

    .tech-label {
      position: relative;
      padding-left: 22px;
      color: rgba(23,24,39,.56);
      font-family: var(--mono);
      font-size: var(--type-caption);
      letter-spacing: .13em;
      text-transform: uppercase;
    }

    .tech-label::before {
      content: "";
      position: absolute;
      left: 0;
      top: 50%;
      width: 14px;
      height: 1px;
      background: var(--blue);
    }

    .section-head {
      display: grid;
      grid-template-columns: minmax(0,.82fr) minmax(220px,.38fr);
      gap: 28px;
      align-items: end;
      margin-bottom: 34px;
    }

    .section-note {
      padding-left: 18px;
      border-left: 1px solid var(--line);
      color: var(--graphite);
      font-size: var(--type-body);
    }

    .snapshot-grid {
      display: grid;
      grid-template-columns: repeat(6, minmax(0,1fr));
      gap: 12px;
    }

    .editorial-card,
    .insight-card,
    .principle-card,
    .interaction-card,
    .outcome-card {
      position: relative;
      border: 1px solid var(--line);
      background: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,.03)), rgba(248,243,232,.64);
      box-shadow: 0 12px 26px rgba(46,37,24,.07);
    }

    .editorial-card {
      min-height: 145px;
      padding: 20px 18px;
      display: grid;
      align-content: space-between;
    }

    .editorial-card:nth-child(1),
    .editorial-card:nth-child(6) { grid-column: span 2; }

    .editorial-card b {
      display: block;
      font-family: var(--serif);
      font-size: var(--type-body-large);
      font-weight: 400;
      line-height: 1.3;
    }

    .problem-sheet {
      position: relative;
      padding: clamp(30px, 5vw, 64px);
      border: 1px solid rgba(23,24,39,.17);
      background:
        repeating-linear-gradient(to bottom, transparent 0 31px, rgba(23,24,39,.055) 32px),
        rgba(248,243,232,.62);
      box-shadow: 0 18px 38px rgba(46,37,24,.08);
      transform: rotate(-.18deg);
    }

    .problem-sheet::before {
      content: "PROBLEM STATEMENT";
      position: absolute;
      top: -13px;
      left: 28px;
      padding: 4px 10px;
      border: 1px solid var(--line);
      background: var(--paper);
      font-family: var(--mono);
      font-size: var(--type-caption);
      letter-spacing: .13em;
    }

    .problem-sheet h2 {
      max-width: 32ch;
      font-size: var(--type-h1);
      line-height: 1.2;
    }

    .problem-sheet .copy + .copy,
    .lead + .lead {
      margin-top: 18px;
    }

    blockquote {
      max-width: 32ch;
      font-size: var(--type-h1);
      line-height: 1.2;
    }

    .quote-wrap {
      display: grid;
      place-items: center;
      min-height: 500px;
      text-align: center;
    }

    .insight-grid,
    .principles-grid,
    .interaction-grid,
    .outcome-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0,1fr));
      gap: 14px;
    }

    .principles-grid,
    .interaction-grid,
    .outcome-grid {
      grid-template-columns: repeat(4, minmax(0,1fr));
    }

    .insight-card,
    .principle-card,
    .interaction-card,
    .outcome-card {
      min-height: 180px;
      padding: 24px;
    }

    .card-num {
      display: block;
      margin-bottom: 44px;
      color: var(--blue);
      font-family: var(--mono);
      font-size: var(--type-caption);
      letter-spacing: .16em;
    }

    .insight-card h3,
    .principle-card h3,
    .interaction-card h3,
    .outcome-card h3 {
      font-size: var(--type-body-large);
      line-height: 1.35;
    }

    .flow-board {
      position: relative;
      display: grid;
      grid-template-columns: repeat(5, minmax(170px,1fr));
      gap: 0;
      overflow-x: auto;
      border: 1px solid var(--line);
      background:
        linear-gradient(to right, rgba(45,140,255,.08) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(45,140,255,.08) 1px, transparent 1px),
        rgba(248,243,232,.54);
      background-size: 24px 24px;
    }

    .flow-step {
      position: relative;
      min-height: 230px;
      padding: 22px 20px;
      border-right: 1px solid var(--line);
    }

    .flow-step:last-child { border-right: 0; }

    .flow-step::before {
      content: "";
      position: absolute;
      top: 78px;
      left: 20px;
      width: 16px;
      height: 16px;
      border: 1px solid var(--blue);
      border-radius: 50%;
      background: var(--paper);
      z-index: 1;
    }

    .flow-step::after {
      content: "→";
      position: absolute;
      top: 65px;
      right: 18px;
      color: var(--blue);
      font-family: var(--serif);
      font-size: var(--type-h2);
      line-height: 1;
    }

    .flow-step:last-child::after { content: ""; }

    .flow-step h3 {
      margin-top: 86px;
      font-size: var(--type-body-large);
      line-height: 1.25;
    }

    .flow-step .copy {
      margin-top: 12px;
      font-size: var(--type-body);
      line-height: 1.45;
    }

    .screen-toolbar {
      display: flex;
      justify-content: space-between;
      align-items: end;
      gap: 22px;
      margin-bottom: 34px;
    }

    .toggle-lines {
      padding: 11px 14px;
      border: 1px solid var(--line-strong);
      background: rgba(248,243,232,.74);
      box-shadow: 4px 5px 0 rgba(23,24,39,.08);
      cursor: pointer;
    }

    .toggle-lines:hover {
      transform: translate(2px,2px);
      box-shadow: 2px 3px 0 rgba(23,24,39,.1);
    }

    .screens-stack {
      display: grid;
      gap: 26px;
    }

    .screen-board {
      position: relative;
      display: grid;
      grid-template-columns: minmax(0,1fr) minmax(320px,420px);
      gap: clamp(26px, 5vw, 72px);
      align-items: center;
      padding: clamp(24px, 4vw, 48px);
      border: 1px solid var(--line);
      background:
        linear-gradient(to right, rgba(23,24,39,.045) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(23,24,39,.045) 1px, transparent 1px),
        rgba(248,243,232,.56);
      background-size: 16px 16px;
      box-shadow: 0 18px 34px rgba(46,37,24,.08);
    }

    .screen-board::before,
    .screen-board::after {
      content: "";
      position: absolute;
      pointer-events: none;
      transition: opacity 220ms var(--ease);
    }

    .screen-board::before {
      left: 48%;
      top: 0;
      width: 1px;
      height: 100%;
      background: rgba(45,140,255,.16);
    }

    .screen-board::after {
      right: clamp(24px, 4vw, 48px);
      top: clamp(24px, 4vw, 48px);
      width: 172px;
      height: 1px;
      background: rgba(45,140,255,.35);
      box-shadow: 0 54px 0 rgba(45,140,255,.13), 0 108px 0 rgba(45,140,255,.1);
    }

    .hide-annotations .screen-board::before,
    .hide-annotations .screen-board::after {
      opacity: 0;
    }

    .screen-copy {
      max-width: 560px;
    }

    .screen-copy > p:not(.eyebrow) {
      margin-top: 14px;
      color: rgba(23,24,39,.82);
      font-size: var(--type-body);
      line-height: 1.55;
    }

    .annotation-list {
      list-style: none;
      margin: 28px 0 0;
      padding: 0;
      display: grid;
      gap: 12px;
    }

    .annotation-list li {
      position: relative;
      padding: 12px 12px 12px 18px;
      border-left: 1px solid var(--blue);
      background: rgba(242,235,221,.52);
      color: rgba(23,24,39,.78);
      font-size: var(--type-body);
    }

    .annotation-list strong {
      color: var(--ink);
      font-family: var(--mono);
      font-size: var(--type-caption);
      letter-spacing: .12em;
      text-transform: uppercase;
    }

    .phone-frame {
      position: relative;
      width: min(100%, 320px);
      height: 680px;
      justify-self: center;
      padding: 14px;
      border: 1px solid var(--line-strong);
      border-radius: 36px;
      background: #111827;
      box-shadow: 0 22px 36px rgba(46,37,24,.18), inset 0 1px 0 rgba(255,255,255,.14);
      overflow: hidden;
      transition: transform 260ms var(--ease), box-shadow 260ms var(--ease);
    }

    .screen-board:nth-child(even) .phone-frame {
      background: var(--paper-soft);
    }

    .phone-frame:hover {
      transform: translateY(-5px) rotate(-.22deg);
      box-shadow: 0 30px 46px rgba(46,37,24,.22), inset 0 1px 0 rgba(255,255,255,.14);
    }

    .phone-frame::before {
      content: "";
      position: absolute;
      top: 14px;
      left: 50%;
      width: 76px;
      height: 7px;
      border: 1px solid rgba(248,243,232,.34);
      border-radius: 99px;
      background: rgba(248,243,232,.08);
      transform: translateX(-50%);
      z-index: 2;
    }

    .screen-board:nth-child(even) .phone-frame::before {
      border-color: rgba(23,24,39,.25);
      background: rgba(23,24,39,.05);
    }

    .screen-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 24px;
      filter: contrast(.98) saturate(.92);
      background: transparent;
    }

    .screen-img.is-missing {
      display: none;
    }

    .placeholder-fallback {
      position: absolute;
      inset: 14px;
      display: grid;
      place-items: center;
      padding: 28px;
      border: 1px dashed rgba(248,243,232,.38);
      border-radius: 24px;
      color: rgba(248,243,232,.84);
      text-align: center;
      font-family: var(--mono);
      font-size: var(--type-caption);
      letter-spacing: .08em;
      text-transform: uppercase;
      background:
        linear-gradient(to right, rgba(248,243,232,.08) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(248,243,232,.08) 1px, transparent 1px);
      background-size: 22px 22px;
    }

    .screen-board:nth-child(even) .placeholder-fallback {
      border-color: rgba(23,24,39,.24);
      color: rgba(23,24,39,.64);
      background:
        linear-gradient(to right, rgba(23,24,39,.06) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(23,24,39,.06) 1px, transparent 1px);
      background-size: 22px 22px;
    }

    .placeholder-fallback.is-hidden {
      display: none;
    }

    .dashboard-screens {
      display: grid;
      grid-template-columns: repeat(2, minmax(0,1fr));
      gap: 18px;
    }

    .dashboard-screens .screen-board:first-child {
      grid-column: 1 / -1;
    }

    .dashboard-screens .screen-board {
      grid-template-columns: minmax(240px,.38fr) minmax(0,1fr);
      gap: clamp(22px, 4vw, 48px);
      align-items: center;
    }

    .dashboard-screens .screen-board:not(:first-child) {
      grid-template-columns: 1fr;
    }

    .dashboard-screen-frame {
      position: relative;
      width: 100%;
      min-height: clamp(240px, 32vw, 320px);
      aspect-ratio: 16 / 10;
      border: 1px solid rgba(23,24,39,.18);
      border-radius: 14px;
      background: #111827;
      box-shadow: 0 20px 34px rgba(46,37,24,.16), inset 0 1px 0 rgba(255,255,255,.12);
      overflow: hidden;
      transition: transform 260ms var(--ease), box-shadow 260ms var(--ease);
    }

    .dashboard-screens .screen-board:nth-child(even) .dashboard-screen-frame {
      background: var(--paper-soft);
    }

    .dashboard-screen-frame:hover {
      transform: translateY(-4px) rotate(-.12deg);
      box-shadow: 0 26px 42px rgba(46,37,24,.2), inset 0 1px 0 rgba(255,255,255,.12);
    }

    .dashboard-screen-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 13px;
      filter: contrast(.98) saturate(.92);
      background: transparent;
    }

    .dashboard-screen-img.is-missing {
      display: none;
    }

    .dashboard-placeholder-fallback {
      position: absolute;
      inset: 0;
      display: grid;
      grid-template-rows: 30px 1fr;
      color: rgba(248,243,232,.8);
      font-family: var(--mono);
      font-size: var(--type-caption);
      letter-spacing: .08em;
      text-transform: uppercase;
      background:
        linear-gradient(to right, rgba(248,243,232,.06) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(248,243,232,.06) 1px, transparent 1px);
      background-size: 22px 22px;
    }

    .dashboard-screens .screen-board:nth-child(even) .dashboard-placeholder-fallback {
      color: rgba(23,24,39,.62);
      background:
        linear-gradient(to right, rgba(23,24,39,.055) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(23,24,39,.055) 1px, transparent 1px);
      background-size: 22px 22px;
    }

    .dashboard-placeholder-fallback.is-hidden {
      display: none;
    }

    .dashboard-placeholder-chrome {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 0 14px;
      border-bottom: 1px solid rgba(248,243,232,.18);
      background: rgba(248,243,232,.05);
    }

    .dashboard-placeholder-chrome::before,
    .dashboard-placeholder-chrome::after {
      content: "";
      width: 7px;
      height: 7px;
      border: 1px solid currentColor;
      border-radius: 50%;
      opacity: .42;
    }

    .dashboard-screens .screen-board:nth-child(even) .dashboard-placeholder-chrome {
      border-bottom-color: rgba(23,24,39,.14);
      background: rgba(23,24,39,.035);
    }

    .dashboard-placeholder-body {
      display: grid;
      grid-template-columns: 62px 1fr;
      min-height: 0;
    }

    .dashboard-placeholder-sidebar {
      border-right: 1px solid rgba(248,243,232,.16);
      background:
        repeating-linear-gradient(to bottom, transparent 0 22px, rgba(248,243,232,.12) 23px 24px),
        rgba(248,243,232,.04);
    }

    .dashboard-screens .screen-board:nth-child(even) .dashboard-placeholder-sidebar {
      border-right-color: rgba(23,24,39,.14);
      background:
        repeating-linear-gradient(to bottom, transparent 0 22px, rgba(23,24,39,.09) 23px 24px),
        rgba(23,24,39,.03);
    }

    .dashboard-placeholder-content {
      position: relative;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-auto-rows: minmax(42px, 1fr);
      gap: 10px;
      padding: 18px;
    }

    .dashboard-placeholder-content::before {
      content: attr(data-placeholder);
      position: absolute;
      left: 18px;
      right: 18px;
      bottom: 16px;
      z-index: 1;
      text-align: center;
      line-height: 1.5;
      white-space: pre-line;
    }

    .dashboard-placeholder-content span {
      border: 1px solid rgba(248,243,232,.18);
      background: rgba(248,243,232,.05);
    }

    .dashboard-placeholder-content span:nth-child(1) {
      grid-column: span 2;
    }

    .dashboard-placeholder-content span:nth-child(4) {
      grid-column: span 3;
    }

    .dashboard-screens .screen-board:nth-child(even) .dashboard-placeholder-content span {
      border-color: rgba(23,24,39,.14);
      background: rgba(23,24,39,.035);
    }

    .filename-hint {
      display: inline-block;
      margin-top: 20px;
      padding: 7px 9px;
      border: 1px solid var(--line);
      color: var(--graphite);
      text-transform: none;
      letter-spacing: .02em;
    }

    .reflection {
      min-height: 520px;
      display: grid;
      align-items: center;
    }

    .site-footer {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 24px;
      align-items: end;
      width: min(100%, var(--max));
      margin: 0 auto;
      padding: 44px var(--gutter);
      border-top: 1px solid var(--line);
      color: rgba(23,24,39,.75);
    }

    .case-divider {
      width: min(100%, var(--max));
      margin: 0 auto;
      padding: clamp(80px, 10vw, 120px) var(--gutter);
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      text-align: center;
    }

    .case-divider h2 {
      margin: 6px 0 12px;
      max-width: none;
      font-size: var(--type-h1);
      line-height: 1.2;
    }

    .case-divider p:last-child {
      color: var(--graphite);
      font-size: var(--type-body);
      line-height: 1.6;
    }

    .case-context-note {
      max-width: 620px;
      margin-top: 28px;
      padding-left: 18px;
      border-left: 1px solid var(--line);
      color: var(--graphite);
      font-size: var(--type-body);
    }

    .closing-footer {
      min-height: 520px;
      align-items: stretch;
      padding-top: clamp(70px, 9vw, 120px);
      padding-bottom: clamp(42px, 6vw, 72px);
    }

    .closing-statement {
      max-width: 32ch;
      font-family: var(--serif);
      font-size: var(--type-h1);
      line-height: 1.2;
      color: var(--ink);
    }

    .closing-meta {
      align-self: end;
      justify-self: end;
      text-align: right;
    }

    .eldercare-case {
      --accent: #3FAE7C;
      --blue: #3FAE7C;
    }

    .planter-case {
      --accent: #4A6CF7;
      --blue: #4A6CF7;
    }

    .landing-section {
      min-height: min(820px, calc(100vh - 24px));
      display: grid;
      align-content: center;
    }

    .portfolio-intro {
      display: grid;
      grid-template-columns: minmax(0,.9fr) minmax(260px,.38fr);
      gap: clamp(28px, 6vw, 84px);
      align-items: end;
      margin-bottom: 42px;
    }

    .landing-section h1 {
      max-width: 18ch;
      font-size: var(--type-display);
      line-height: 1.05;
    }

    .landing-section .lead {
      margin-top: 24px;
      max-width: 42ch;
    }

    .landing-actions,
    .domain-labels {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 28px;
    }

    .domain-labels span {
      padding: 8px 10px;
      border: 1px solid var(--line);
      color: var(--graphite);
      background: rgba(248,243,232,.58);
      font-family: var(--mono);
      font-size: var(--type-caption);
      letter-spacing: .12em;
      text-transform: uppercase;
      box-shadow: 3px 4px 0 rgba(23,24,39,.045);
    }

    .preview-heading {
      display: grid;
      grid-template-columns: minmax(0,.7fr) minmax(220px,.3fr);
      gap: 24px;
      align-items: end;
      margin: 0 0 22px;
      padding-top: 34px;
      border-top: 1px solid var(--line);
    }

    .case-card-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0,1fr));
      gap: 18px;
    }

    .case-card {
      position: relative;
      min-height: 430px;
      padding: clamp(24px, 4vw, 42px);
      display: grid;
      align-content: space-between;
      border: 1px solid var(--line);
      background:
        linear-gradient(to right, rgba(23,24,39,.045) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(23,24,39,.045) 1px, transparent 1px),
        rgba(248,243,232,.68);
      background-size: 18px 18px;
      box-shadow: 0 18px 34px rgba(46,37,24,.09);
      overflow: hidden;
      transition: transform 220ms ease-out, box-shadow 220ms ease-out;
    }

    .case-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 22px 40px rgba(46,37,24,.13);
    }

    .case-card::before {
      content: "";
      position: absolute;
      inset: 18px;
      border: 1px solid rgba(23,24,39,.08);
      pointer-events: none;
    }

    .case-card h2 {
      font-size: var(--type-h1);
      line-height: 1.12;
    }

    .case-tag {
      display: inline-block;
      width: fit-content;
      margin: 18px 0 24px;
      padding: 7px 10px;
      border: 1px solid var(--line);
      color: var(--graphite);
      font-family: var(--mono);
      font-size: var(--type-caption);
      letter-spacing: .12em;
      text-transform: uppercase;
    }

    .case-details {
      display: grid;
      grid-template-columns: repeat(3, minmax(0,1fr));
      gap: 8px;
      margin: 28px 0;
    }

    .case-details span {
      min-height: 76px;
      padding: 12px;
      border: 1px solid var(--line);
      background: rgba(242,235,221,.52);
      color: rgba(23,24,39,.78);
      font-size: var(--type-caption);
      line-height: 1.45;
    }

    .case-cta {
      display: inline-flex;
      width: fit-content;
      align-items: center;
      justify-content: center;
      gap: 10px;
      min-height: 40px;
      padding: 0 16px;
      border: 1px solid var(--line-strong);
      background: rgba(242,235,221,.78);
      box-shadow: 4px 5px 0 rgba(23,24,39,.08);
      font-family: var(--mono);
      font-size: var(--type-caption);
      letter-spacing: .12em;
      text-transform: uppercase;
      transition: transform 180ms var(--ease), box-shadow 180ms var(--ease);
    }

    .case-cta:hover,
    .case-cta:focus-visible {
      transform: translate(2px,2px);
      box-shadow: 2px 3px 0 rgba(23,24,39,.1);
      outline: none;
    }

    .editorial-card,
    .insight-card,
    .outcome-card,
    .screen-board,
    .flow-step {
      transition: transform 220ms ease-out, box-shadow 220ms ease-out;
    }

    .editorial-card:hover,
    .insight-card:hover,
    .outcome-card:hover,
    .screen-board:hover {
      transform: translateY(-2px);
      box-shadow: 0 18px 34px rgba(46,37,24,.11);
    }

    .case-module .hero {
      min-height: 620px;
    }

    .case-module .hero h1 {
      max-width: 28ch;
      font-size: var(--type-display);
      line-height: 1.05;
    }

    .case-module .paper-section {
      padding-top: clamp(48px, 6vw, 82px);
      padding-bottom: clamp(48px, 6vw, 82px);
    }

    .case-module .paper-section[data-section="06"] > h2 {
      max-width: 32ch;
      font-size: var(--type-h1);
      line-height: 1.2;
    }

    .cover-meta {
      margin-top: 34px;
      grid-template-columns: repeat(3, minmax(0,1fr));
    }

    .compact-screens {
      grid-template-columns: repeat(3, minmax(0,1fr));
      gap: 14px;
    }

    .compact-screens .screen-board:first-child {
      grid-column: 1 / -1;
      grid-template-columns: minmax(260px,.42fr) minmax(0,1fr);
    }

    .compact-screens .screen-board {
      grid-template-columns: 1fr;
      gap: 22px;
      padding: 22px;
      align-content: start;
    }

    .compact-screens .screen-board::before {
      left: 0;
      top: 52%;
      width: 100%;
      height: 1px;
    }

    .compact-screens .screen-board::after {
      width: 110px;
    }

    .compact-screens .phone-frame {
      width: min(100%, 240px);
      height: 500px;
    }

    .compact-screens .annotation-list li {
      font-size: var(--type-caption);
    }

    .paired-board {
      display: grid;
      grid-template-columns: minmax(0,1fr) minmax(0,.9fr);
      gap: 18px;
      align-items: stretch;
    }

    .challenge-card {
      display: grid;
      align-content: center;
      padding: clamp(28px, 4vw, 48px);
      border: 1px solid var(--line);
      background: rgba(248,243,232,.58);
    }

    .challenge-card blockquote {
      font-size: var(--type-h1);
      line-height: 1.2;
    }

    .screen-callout {
      position: absolute;
      z-index: 3;
      max-width: 132px;
      padding-top: 8px;
      color: rgba(248,243,232,.82);
      font-family: var(--mono);
      font-size: var(--type-caption);
      letter-spacing: .08em;
      line-height: 1.35;
      text-transform: uppercase;
    }

    .screen-callout::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 64px;
      height: 1px;
      background: currentColor;
      opacity: .55;
    }

    .screen-callout.one { top: 18%; left: 18px; }
    .screen-callout.two { top: 48%; right: 18px; text-align: right; }
    .screen-callout.two::before { left: auto; right: 0; }
    .screen-callout.three { bottom: 16%; left: 18px; }

    .dashboard-screen-frame .screen-callout {
      color: rgba(248,243,232,.78);
    }

    .screen-board:nth-child(even) .screen-callout {
      color: rgba(23,24,39,.62);
    }

    .contact-block {
      align-self: end;
      display: grid;
      gap: 18px;
    }

    .contact-block .lead {
      max-width: 30ch;
    }

    .contact-links {
      display: flex;
      flex-wrap: wrap;
      gap: 10px 18px;
      padding-top: 18px;
      border-top: 1px solid var(--line);
    }

    .contact-links a {
      color: rgba(23,24,39,.72);
      font-size: var(--type-body);
      text-decoration: underline;
      text-underline-offset: 5px;
      text-decoration-thickness: 1px;
    }

    .contact-links a:hover,
    .contact-links a:focus-visible {
      color: var(--ink);
      outline: none;
    }

    .about-layout {
      display: grid;
      grid-template-columns: 340px minmax(0, .86fr);
      gap: clamp(32px, 6vw, 76px);
      align-items: center;
      min-height: 560px;
    }

    .portrait-frame {
      position: relative;
      width: 300px;
      height: 440px;
      padding: 0;
      border: 1px solid rgba(23,24,39,0.14);
      background: #F8F3E8;
      box-shadow: 0 18px 40px rgba(46,37,24,0.12);
      transform: rotate(-.4deg);
      overflow: hidden;
    }

    .portrait-frame::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 2;
      pointer-events: none;
      background-image:
        radial-gradient(circle at 20% 18%, rgba(23,24,39,.08) 0 1px, transparent 1.6px),
        radial-gradient(circle at 72% 48%, rgba(255,255,255,.42) 0 1px, transparent 1.5px),
        linear-gradient(82deg, transparent 0 46%, rgba(23,24,39,.02) 47%, transparent 48%);
      background-size: 23px 23px, 31px 31px, 11px 100%;
      mix-blend-mode: multiply;
      opacity: .42;
    }

    .portrait-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center top;
      filter: saturate(0.82) contrast(0.96);
      display: block;
    }

    .portrait-fallback {
      display: none;
      place-items: center;
      width: 100%;
      height: 100%;
      color: rgba(23,24,39,.58);
      background:
        linear-gradient(to right, rgba(23,24,39,.055) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(23,24,39,.055) 1px, transparent 1px),
        var(--paper-soft);
      background-size: 22px 22px;
      font-family: var(--serif);
      font-size: var(--type-display);
      line-height: 1;
      text-align: center;
    }

    .portrait-frame.has-error .portrait-img {
      display: none;
    }

    .portrait-frame.has-error .portrait-fallback {
      display: grid;
    }

    .portrait-frame::after {
      content: "PORTRAIT / KAILASH MANJHI";
      position: absolute;
      z-index: 3;
      left: 0;
      right: 0;
      bottom: 0;
      padding: 8px 10px;
      color: var(--graphite);
      background: rgba(248,243,232,.88);
      border-top: 1px solid rgba(23,24,39,.10);
      font-family: var(--mono);
      font-size: var(--type-caption);
      letter-spacing: .12em;
    }

    .about-copy {
      display: grid;
      gap: 18px;
      align-content: center;
    }

    .about-copy h1 {
      max-width: 20ch;
    }

    .about-page .landing-section {
      min-height: auto;
      padding-top: clamp(48px, 6vw, 84px);
      padding-bottom: clamp(48px, 6vw, 84px);
    }

    .about-page .paper-section:not(.landing-section) {
      padding-top: clamp(46px, 6vw, 76px);
      padding-bottom: clamp(46px, 6vw, 76px);
    }

    .about-page .about-layout {
      min-height: 430px;
      gap: clamp(28px, 5vw, 58px);
    }

    .about-page .section-head {
      margin-bottom: 24px;
    }

    .about-page .closing-footer {
      grid-template-columns: minmax(0, 1fr) minmax(220px, auto);
      gap: clamp(24px, 5vw, 72px);
      min-height: auto;
      padding-top: clamp(48px, 6vw, 76px);
      padding-bottom: clamp(36px, 5vw, 58px);
      align-items: end;
    }

    .about-page .contact-block {
      max-width: 680px;
      gap: 16px;
    }

    .about-page .contact-links {
      width: fit-content;
      min-width: min(100%, 320px);
      justify-content: flex-start;
    }

    .about-page .closing-meta {
      display: grid;
      gap: 4px;
      justify-items: end;
      align-self: end;
    }

    .credibility-line {
      color: var(--graphite);
      font-family: var(--mono);
      font-size: var(--type-caption);
      letter-spacing: .1em;
      line-height: 1.5;
      text-transform: uppercase;
    }

    .about-page .landing-actions .case-cta {
      min-height: 38px;
      font-size: 12px;
    }

    .credibility-strip {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
      margin-top: 6px;
    }

    .credibility-strip span {
      min-height: 72px;
      display: flex;
      align-items: center;
      padding: 12px;
      border: 1px solid var(--line);
      background: rgba(248,243,232,.62);
      box-shadow: 3px 4px 0 rgba(23,24,39,.045);
      color: rgba(23,24,39,.78);
      font-family: var(--mono);
      font-size: var(--type-caption);
      letter-spacing: .08em;
      text-transform: uppercase;
      line-height: 1.4;
    }

    .principle-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0,1fr));
      gap: 14px;
      margin-top: 26px;
    }

    .principle-grid .editorial-card {
      grid-column: auto;
      min-height: 150px;
      padding: 18px;
    }

    .about-page .principle-grid {
      margin-top: 18px;
    }

    .footer-name {
      font-family: var(--serif);
      font-size: var(--type-h2);
      line-height: 1.2;
      color: var(--ink);
    }

    .reveal {
      opacity: 0;
      transform: translateY(10px);
      transition: opacity 520ms ease-out, transform 520ms ease-out;
    }

    .reveal :is(h1, h2, h3, .case-card, .editorial-card, .insight-card, .outcome-card, .screen-board) {
      opacity: 0;
      transform: translateY(8px);
      transition: opacity 520ms ease-out, transform 520ms ease-out;
    }

    .reveal.is-visible {
      opacity: 1;
      transform: translateY(0);
    }

    .reveal.is-visible :is(h1, h2, h3, .case-card, .editorial-card, .insight-card, .outcome-card, .screen-board) {
      opacity: 1;
      transform: translateY(0);
    }

    @media (max-width: 1120px) {
      .snapshot-grid,
      .insight-grid,
      .principles-grid,
      .interaction-grid,
      .outcome-grid,
      .compact-screens,
      .dashboard-screens,
      .case-card-grid,
      .cover-meta {
        grid-template-columns: repeat(2, minmax(0,1fr));
      }

      .editorial-card,
      .editorial-card:nth-child(1),
      .editorial-card:nth-child(6) {
        grid-column: span 1;
      }
    }

    @media (max-width: 820px) {
      .page {
        width: min(100% - 12px, 1440px);
        margin: 6px auto;
      }

      .site-nav {
        min-height: 64px;
        padding: 0 18px;
      }

      .brand-mark {
        width: 36px;
        height: 36px;
      }

      .brand-name {
        font-size: 16px;
      }

      .nav-toggle {
        display: block;
      }

      .site-nav-links {
        position: absolute;
        top: 64px;
        left: 18px;
        right: 18px;
        display: none;
        grid-template-columns: 1fr;
        gap: 0;
        padding: 10px 16px 14px;
        border: 1px solid var(--line);
        background:
          linear-gradient(to right, rgba(23,24,39,.045) 1px, transparent 1px),
          linear-gradient(to bottom, rgba(23,24,39,.045) 1px, transparent 1px),
          rgba(242,235,221,.96);
        background-size: 18px 18px;
        box-shadow: 0 18px 34px rgba(46,37,24,.14);
      }

      .site-nav.is-open .site-nav-links {
        display: grid;
      }

      .site-nav-links a {
        min-height: 44px;
        display: flex;
        align-items: center;
        padding: 10px 0;
        border-bottom: 1px solid rgba(23,24,39,.08);
      }

      .site-nav-links a:last-child {
        border-bottom: 0;
      }

      .hero {
        min-height: 740px;
        background-size: 56px 56px, 56px 56px, auto;
      }

      .hero-inner,
      .section-head,
      .screen-board,
      .dashboard-screens .screen-board,
      .screen-toolbar,
      .site-footer,
      .portfolio-intro,
      .preview-heading,
      .about-layout,
      .paired-board {
        grid-template-columns: 1fr;
      }

      .closing-meta {
        justify-self: start;
        text-align: left;
      }

      .hero-side,
      .label-stack {
        justify-items: start;
      }

      .paper-section {
        padding: 64px 22px;
      }

      .snapshot-grid,
      .insight-grid,
      .principles-grid,
      .interaction-grid,
      .outcome-grid,
      .compact-screens,
      .dashboard-screens,
      .case-card-grid,
      .cover-meta,
      .principle-grid,
      .credibility-strip,
      .case-details {
        grid-template-columns: 1fr;
      }

      .about-layout {
        min-height: auto;
      }

      .about-page .closing-meta {
        justify-items: start;
      }

      .about-page .contact-links {
        width: 100%;
      }

      .portrait-frame {
        width: min(300px, 100%);
      }

      .portrait-img,
      .portrait-fallback {
        width: 100%;
      }

      .dashboard-screens .screen-board:first-child {
        grid-column: auto;
      }

      .compact-screens .screen-board:first-child {
        grid-column: auto;
        grid-template-columns: 1fr;
      }

      .flow-board {
        grid-template-columns: repeat(5, minmax(190px,1fr));
      }

      .screen-board {
        padding: 24px;
      }

      .screen-board::before {
        left: 0;
        top: 50%;
        width: 100%;
        height: 1px;
      }

      .phone-frame {
        width: min(100%, 300px);
        height: 638px;
      }
    }

    @media (max-width: 460px) {
      :root {
        --type-display: 48px;
        --type-h1: 34px;
        --type-h2: 26px;
      }

      .phone-frame {
        height: 590px;
      }

      .site-nav-links a,
      .case-switcher a {
        font-size: var(--type-caption);
        padding: 7px 8px;
      }

      .screen-callout {
        display: none;
      }
    }

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