@font-face {
      font-family: "Glydev Display";
      src: url("assets/fonts/barlow-condensed-light-italic.ttf") format("truetype");
      font-style: italic;
      font-weight: 300;
      font-display: swap;
    }

    :root {
      --paper: #efebe4;
      --paper-bright: #f8f5ef;
      --ink: #272829;
      --block: #3d3d3d;
      --gold: #f4bd34;
      --gold-deep: #744c00;
      --shadow-blue: #7c848e;
      --shadow-dark: #46515f;
      --light-text: #ded9d0;
      --rule: rgba(39, 40, 41, 0.28);
      --rule-light: rgba(239, 235, 228, 0.24);
      --paper-texture: url("assets/limewash-paper.png");
      --charcoal-texture: url("assets/charcoal-poche.png");
      --display: "Barlow Condensed", "Arial Narrow", sans-serif;
      --display-inclined: "Glydev Display", "Barlow Condensed", "Arial Narrow", sans-serif;
      --mono: "Fragment Mono", ui-monospace, monospace;
      --ease: cubic-bezier(.16, 1, .3, 1);
      --max: 1480px;
    }

    *, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; background: var(--ink); }
    body {
      margin: 0;
      min-width: 320px;
      overflow-x: hidden;
      color: var(--ink);
      background-color: var(--paper);
      background-image: var(--paper-texture);
      background-size: 720px 720px;
      font-family: var(--mono);
      font-size: 15px;
      line-height: 1.65;
      -webkit-font-smoothing: antialiased;
    }

    ::selection { color: var(--ink); background: var(--gold); }
    ::-webkit-scrollbar { width: 12px; }
    ::-webkit-scrollbar-track { background: var(--ink); }
    ::-webkit-scrollbar-thumb { background: var(--gold); border: 3px solid var(--ink); }
    :focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 4px; }
    a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.24em; }
    button, input, textarea { font: inherit; }
    button, a { -webkit-tap-highlight-color: transparent; }
    img, svg { display: block; max-width: 100%; }

    .skip-link {
      position: fixed;
      top: 12px;
      left: 12px;
      z-index: 200;
      padding: 10px 14px;
      color: var(--paper);
      background: var(--ink);
      transform: translateY(-180%);
      transition: transform 180ms ease;
    }
    .skip-link:focus { transform: translateY(0); }

    .scroll-progress {
      position: fixed;
      inset: 0 auto auto 0;
      z-index: 110;
      width: 0;
      height: 3px;
      background: var(--gold);
    }

    .shell { width: min(100% - 64px, var(--max)); margin-inline: auto; }

    .site-header {
      position: sticky;
      top: 0;
      z-index: 100;
      color: var(--ink);
      background: rgba(239, 235, 228, 0.96);
      border-bottom: 1px solid var(--rule);
    }
    .site-header::after {
      content: "";
      position: absolute;
      inset: auto 0 -5px;
      height: 5px;
      background: var(--paper-texture);
      background-size: 720px 720px;
      opacity: .62;
      pointer-events: none;
    }
    .nav-row {
      min-height: 74px;
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      gap: 40px;
    }
    .logo {
      font-family: var(--display);
      font-size: clamp(2rem, 3vw, 3rem);
      font-weight: 400;
      line-height: 1;
      letter-spacing: .08em;
      text-decoration: none;
      text-transform: uppercase;
    }
    .brand-lockup { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; }
    .brand-mark {
      width: 40px;
      height: 40px;
      flex: 0 0 40px;
    }
    .brand-lockup:hover .brand-mark { filter: brightness(.9); }
    .nav-links {
      justify-self: center;
      display: flex;
      align-items: center;
      gap: clamp(22px, 3vw, 48px);
    }
    .nav-links a {
      position: relative;
      font-size: 12px;
      letter-spacing: .12em;
      text-decoration: none;
      text-transform: uppercase;
      white-space: nowrap;
    }
    .nav-links a::after {
      content: "";
      position: absolute;
      right: 0;
      bottom: -7px;
      left: 0;
      height: 1px;
      background: var(--ink);
      transform: scaleX(0);
      transform-origin: right;
      transition: transform 260ms var(--ease);
    }
    .nav-links a:hover::after { transform: scaleX(1); transform-origin: left; }

    .clip-action {
      display: inline-flex;
      min-height: 48px;
      align-items: center;
      justify-content: center;
      gap: 18px;
      padding: 11px 30px 11px 24px;
      color: var(--ink);
      background: var(--gold);
      border: 1px solid var(--gold-deep);
      clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 13px 100%, 0 calc(100% - 13px));
      font-size: 12px;
      letter-spacing: .08em;
      text-decoration: none;
      text-transform: uppercase;
      transition: color 240ms ease, background 240ms ease, transform 240ms var(--ease);
    }
    .clip-action:hover { color: var(--paper); background: var(--ink); transform: translateY(-2px); }
    .clip-action svg { width: 18px; height: 18px; }

    .menu-button {
      display: none;
      width: 46px;
      height: 42px;
      color: var(--ink);
      background: transparent;
      border: 1px solid var(--rule);
    }
    .menu-button svg { width: 22px; margin: auto; }
    .menu-button .menu-close { display: none; }
    .menu-button[aria-expanded="true"] .menu-open { display: none; }
    .menu-button[aria-expanded="true"] .menu-close { display: block; }
    .drawer-contact { display: none; }

    /* ---------------------------------------------------------------- hero */

    .hero {
      position: relative;
      padding: clamp(30px, 2.8vw, 46px) 0 clamp(56px, 5vw, 84px);
      overflow: hidden;
    }
    .hero::before, .hero::after {
      content: "";
      position: absolute;
      pointer-events: none;
    }
    .hero::before {
      top: 38px;
      bottom: 18px;
      left: max(20px, calc((100vw - var(--max)) / 2));
      width: 1px;
      background: var(--rule);
    }
    .hero::after {
      top: 52px;
      left: max(14px, calc((100vw - var(--max)) / 2 - 6px));
      width: 13px;
      height: 13px;
      border-top: 1px solid var(--rule);
      border-bottom: 1px solid var(--rule);
    }
    .hero-head {
      display: grid;
      grid-template-columns: minmax(0, 1.06fr) minmax(300px, .94fr);
      align-items: end;
      gap: clamp(40px, 7vw, 118px);
      padding-inline: 54px 22px;
    }
    h1, h2, h3, p { margin-top: 0; }
    h1 {
      max-width: none;
      margin-bottom: 0;
      font-family: var(--display-inclined);
      font-size: clamp(4.4rem, 6.3vw, 6.6rem);
      font-weight: 300;
      font-style: italic;
      line-height: .78;
      letter-spacing: .015em;
      text-transform: uppercase;
    }
    h1 span { display: block; width: 125%; transform: scaleX(.8); transform-origin: left center; }
    .hero-copy {
      max-width: 52ch;
      margin: 0 0 10px;
      font-size: clamp(.88rem, 1.15vw, 1rem);
    }
    .hero-copy p { margin-bottom: 0; }
    .hero-action { margin-top: 30px; }

    /* the drafting sheet: one gold rail that draws five build stations */

    .sheet {
      --draw: 1;
      position: relative;
      height: 540px;
      display: flex;
      flex-direction: column;
      margin-top: clamp(20px, 2.2vw, 34px);
      isolation: isolate;
    }
    .sheet-field {
      --inset: 8%;
      --gap: calc((100% - var(--inset) * 2) * .2);
      --p0: calc(var(--inset) + (100% - var(--inset) * 2) * .1);
      position: relative;
      flex: 1 1 auto;
      min-height: 0;
    }
    .dims {
      position: absolute;
      top: calc(50% + 30px);
      right: 0;
      left: 0;
      height: 1px;
    }
    .dim {
      position: absolute;
      top: 0;
      left: calc(var(--p0) + var(--gap) * var(--i));
      width: var(--gap);
      height: 1px;
      background: rgba(39, 40, 41, .17);
    }
    .dim::before, .dim::after {
      content: "";
      position: absolute;
      top: -4px;
      width: 1px;
      height: 9px;
      background: rgba(39, 40, 41, .25);
    }
    .dim::before { left: 0; }
    .dim::after { right: 0; }
    .sheet-strip {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      flex: 0 0 auto;
      padding: 11px 20px 11px calc(2% + 30px);
      border-top: 1px solid var(--rule);
    }
    .sheet::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      border-top: 1px solid var(--rule);
      border-bottom: 1px solid var(--rule);
    }
    .sheet::after {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      left: 2%;
      z-index: -1;
      width: 13px;
      border-left: 1px solid var(--rule);
      border-top: 1px solid var(--rule);
      border-bottom: 1px solid var(--rule);
    }
    .sheet-title {
      display: flex;
      align-items: baseline;
      gap: 18px;
      font-size: 11px;
      letter-spacing: .08em;
      text-align: right;
      text-transform: uppercase;
    }
    .sheet-title output {
      min-width: 21ch;
      color: var(--gold-deep);
      font-size: 9px;
      font-variant-numeric: tabular-nums;
      letter-spacing: .1em;
      text-align: right;
      white-space: pre;
    }
    .sheet-hint {
      margin: 0;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      color: var(--gold-deep);
      font-size: 10px;
      letter-spacing: .1em;
      text-transform: uppercase;
      white-space: nowrap;
    }
    .sheet-hint svg { width: 38px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.3; }
    .motion-ready .sheet-hint { opacity: var(--hint-opacity, 1); transform: translateX(var(--hint-shift, 0px)); }

    .rail {
      position: absolute;
      top: 50%;
      right: 8%;
      left: 8%;
      height: 2px;
    }
    .rail-track {
      position: absolute;
      inset: 0;
      background: rgba(39, 40, 41, .26);
    }
    .rail-track::before {
      content: "";
      position: absolute;
      top: -7px;
      right: 0;
      left: 0;
      height: 16px;
      background: repeating-linear-gradient(to right, rgba(39, 40, 41, .34) 0 1px, transparent 1px 14px);
      opacity: .7;
    }
    .rail-fill {
      position: absolute;
      inset: -1px 0 auto;
      height: 4px;
      background: var(--gold);
      transform: scaleX(var(--draw));
      transform-origin: left;
      will-change: transform;
    }
    .rail-fill::after {
      content: "";
      position: absolute;
      top: 50%;
      right: -1px;
      width: 16px;
      height: 16px;
      background: var(--paper-bright);
      border: 4px solid var(--gold);
      border-radius: 50%;
      transform: translate(50%, -50%);
      box-shadow: 0 2px 7px rgba(39, 40, 41, .24);
    }

    .stations {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: stretch;
      margin: 0;
      padding-inline: 8%;
      list-style: none;
    }
    .station {
      --reveal: 1;
      --current: 0;
      position: relative;
      flex: 1 1 0;
      min-width: 0;
      height: 50%;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 13px;
    }
    .station[data-side="up"] { align-self: flex-start; justify-content: flex-end; padding-bottom: 40px; }
    .station[data-side="down"] { align-self: flex-end; justify-content: flex-start; padding-top: 40px; }
    .station[data-side="down"] .station-text { order: -1; }
    .station-stem {
      position: absolute;
      left: 50%;
      width: 1px;
      height: 40px;
      background: var(--rule);
      transform: scaleY(var(--reveal));
    }
    .station[data-side="up"] .station-stem { bottom: 0; transform-origin: bottom; }
    .station[data-side="down"] .station-stem { top: 0; transform-origin: top; }
    .station-pin {
      position: absolute;
      left: 50%;
      width: 11px;
      height: 11px;
      background: var(--paper-bright);
      border: 2px solid var(--ink);
      border-radius: 50%;
      transform: translate(-50%, 50%);
      transition: background-color 260ms ease, border-color 260ms ease;
    }
    /* the rail hits the pin and a ring goes out of it */
    .station-pin::after {
      content: "";
      position: absolute;
      inset: -3px;
      border: 1px solid var(--gold);
      border-radius: 50%;
      opacity: var(--current);
      transform: scale(calc(1 + var(--current) * .9));
      transition: opacity 300ms var(--ease), transform 300ms var(--ease);
    }
    .station[data-side="up"] .station-pin { bottom: 0; }
    .station[data-side="down"] .station-pin { top: 0; transform: translate(-50%, -50%); }
    .station.is-live .station-pin { background: var(--gold); border-color: var(--gold-deep); }

    .station-plate {
      width: min(100%, 208px);
      padding: 14px 16px;
      background-color: rgba(248, 245, 239, .58);
      border: 1px solid var(--rule);
      clip-path: polygon(0 11px, 11px 0, calc(100% - 11px) 0, 100% 11px, 100% calc(100% - 11px), calc(100% - 11px) 100%, 11px 100%, 0 calc(100% - 11px));
    }
    .wire { width: 100%; height: auto; fill: none; stroke: var(--ink); stroke-width: 1.7; stroke-linecap: square; }
    .station-text { width: min(100%, 208px); }
    .station-name {
      display: block;
      font-family: var(--display);
      font-size: 1.42rem;
      line-height: 1.05;
      letter-spacing: .03em;
      text-transform: uppercase;
    }
    .station-note {
      display: block;
      margin-top: 3px;
      color: var(--shadow-dark);
      font-size: 10px;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    /* scroll geometry - the whole sheet exists in pencil at rest, so the first viewport is
       a complete drawing. The rail then inks each station as it reaches it: line weight
       thickens, the vellum plate fills, and labels come to full contrast. Scroll
       resolves the drawing; it never creates it. */
    /* the station the rail is currently on holds the gold until the rail reaches the
       next one. Only the discrete mark is transitioned; stroke-width and the plate
       fill stay bound to --reveal so the scrub itself never lags behind the scroll. */
    .station.is-current { --current: 1; }
    .motion-ready .station-plate {
      background-color: rgba(248, 245, 239, calc(var(--reveal) * .58));
      border-color: color-mix(in srgb, rgba(39, 40, 41, calc(.13 + var(--reveal) * .15)), var(--gold) calc(var(--current) * 100%));
      transform: scale(calc(1 + var(--current) * .022));
      transition: border-color 300ms var(--ease), transform 300ms var(--ease);
    }
    .motion-ready .wire path {
      stroke: color-mix(in srgb, var(--ink), var(--gold) calc(var(--current) * 100%));
      stroke-width: calc(1.05px + var(--reveal) * .65px);
      opacity: calc(.38 + var(--reveal) * .62);
      transition: stroke 300ms var(--ease);
    }
    /* the stem keeps it: a reached station stays wired to the rail in gold */
    .motion-ready .station-stem { background: color-mix(in srgb, rgba(39, 40, 41, calc(.14 + var(--reveal) * .14)), var(--gold) calc(var(--reveal) * 100%)); }


    /* ------------------------------------------------- the sheet is drafted

       The entrance, run once on a first arrival at the top of the page. The hero
       assembles in the order a draftsman works a sheet: the margin rule is squared
       down, each line of the thesis is lettered between a guide rule that sweeps
       ahead of the words, the annotations are added, and the gold construction line
       finally runs out to its resting station and inks the first build. That last
       phase is the same --draw pipeline scroll uses, so the entrance hands the
       mechanism straight over to the rail instead of playing a separate show.
       Any scroll, key, or pointer ends the sequence immediately: a visitor who has
       started reading outranks it. Script adds the class and removes it once the
       sequence is spent, so the hero renders complete without it and no filled
       animation is left holding a hover or focus state hostage. */

    .hero.is-drafting::before {
      transform-origin: top;
      animation: rule-square 560ms cubic-bezier(.16, 1, .3, 1) both;
    }
    .hero.is-drafting::after { animation: mark-in 320ms ease-out 420ms both; }

    /* the words are wiped in behind the leading edge of their own guide rule */
    .hero.is-drafting h1 span {
      position: relative;
      -webkit-mask-image: linear-gradient(to right, var(--ink) 0 44%, transparent 52%);
      mask-image: linear-gradient(to right, var(--ink) 0 44%, transparent 52%);
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      -webkit-mask-size: 250% 100%;
      mask-size: 250% 100%;
      animation: letter-wipe 620ms cubic-bezier(.22, 1, .36, 1) calc(140ms + var(--line) * 150ms) both;
    }
    .hero.is-drafting h1 span::after {
      content: "";
      position: absolute;
      right: 0;
      bottom: 0;
      left: 0;
      height: 1px;
      background: var(--rule);
      transform-origin: left;
      animation: guide-sweep 780ms cubic-bezier(.16, 1, .3, 1) calc(120ms + var(--line) * 150ms) both;
    }

    .hero.is-drafting .hero-copy p { animation: note-in 560ms cubic-bezier(.16, 1, .3, 1) 760ms both; }
    .hero.is-drafting .hero-action { animation: note-in 480ms cubic-bezier(.16, 1, .3, 1) 880ms both; }
    .hero.is-drafting .sheet::before,
    .hero.is-drafting .sheet::after,
    .hero.is-drafting .rail-track,
    .hero.is-drafting .dims { animation: frame-in 520ms ease-out 820ms both; }
    .hero.is-drafting .sheet-strip { animation: note-in 520ms cubic-bezier(.16, 1, .3, 1) 1080ms both; }

    @keyframes rule-square { from { transform: scaleY(0); } to { transform: scaleY(1); } }
    @keyframes mark-in { from { opacity: 0; } to { opacity: 1; } }
    @keyframes frame-in { from { opacity: 0; } to { opacity: 1; } }
    @keyframes note-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
    @keyframes letter-wipe {
      from { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
      to { -webkit-mask-position: 0% 0; mask-position: 0% 0; }
    }
    @keyframes guide-sweep {
      0% { opacity: 0; transform: scaleX(0); }
      14% { opacity: 1; }
      60% { opacity: 1; transform: scaleX(1); }
      100% { opacity: 0; transform: scaleX(1); }
    }
    /* -------------------------------------------------------------- sections */

    .section {
      position: relative;
      padding: clamp(96px, 10vw, 160px) 0;
    }
    .section::before {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      height: 1px;
      background: var(--rule);
    }
    .section-head {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(280px, .65fr);
      align-items: end;
      gap: 64px;
      margin-bottom: 76px;
    }
    h2 {
      max-width: 13ch;
      margin-bottom: 0;
      font-family: var(--display);
      font-size: clamp(3.4rem, 6.2vw, 5.6rem);
      font-weight: 300;
      line-height: .92;
      letter-spacing: -.02em;
      text-transform: uppercase;
      text-wrap: balance;
    }
    .section-head p { max-width: 64ch; margin-bottom: 6px; }

    /* ------------------------------------------------------ what we build */

    .services {
      color: var(--paper);
      background-color: var(--ink);
      background-image: var(--charcoal-texture);
      background-size: 720px 720px;
    }
    .services::before { background: var(--rule-light); }
    .services h2 { color: var(--paper); }
    .services .section-head p { color: var(--light-text); }

    .build-grid {
      display: grid;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      margin: 0;
      padding: 0;
      list-style: none;
      border-top: 1px solid var(--rule-light);
      border-left: 1px solid var(--rule-light);
    }
    .build-cell {
      --enter: 1;
      grid-column: span var(--span);
      display: flex;
      flex-direction: column;
      min-height: 300px;
      padding: clamp(26px, 2.4vw, 38px);
      border-right: 1px solid var(--rule-light);
      border-bottom: 1px solid var(--rule-light);
    }
    .build-cell svg {
      width: 40px;
      height: 40px;
      margin-bottom: auto;
      fill: none;
      stroke: var(--gold);
      stroke-width: 1.25;
    }
    .build-cell h3 {
      margin: 34px 0 14px;
      font-family: var(--display);
      font-size: clamp(1.7rem, 2.2vw, 2.3rem);
      font-weight: 400;
      line-height: 1;
      letter-spacing: .03em;
      text-transform: uppercase;
    }
    .build-cell p {
      max-width: 46ch;
      margin-bottom: 0;
      color: var(--light-text);
      font-size: 13px;
      line-height: 1.7;
    }

    /* scroll geometry - a diagonal wipe crosses each bay */
    .motion-ready .build-cell {
      clip-path: polygon(0 0, calc(var(--enter) * 168%) 0, calc(var(--enter) * 168% - 46%) 100%, 0 100%);
    }
    .motion-ready .build-cell svg path,
    .motion-ready .build-cell svg circle {
      stroke-dasharray: 220;
      stroke-dashoffset: calc(220 - 220 * var(--enter));
    }

    /* ---------------------------------------------- four parts of a system */

    .parts-table {
      position: relative;
      padding-left: 58px;
      border-top: 1px solid var(--rule);
    }
    .parts-plumb {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 20px;
      width: 1px;
      background: var(--rule);
    }
    .parts-plumb-fill {
      position: absolute;
      inset: 0 -1px auto;
      height: 100%;
      background: var(--gold);
      transform: scaleY(var(--plumb, 1));
      transform-origin: top;
    }
    .parts-plumb-fill::after {
      content: "";
      position: absolute;
      right: -5px;
      bottom: -1px;
      left: -5px;
      height: 3px;
      background: var(--gold-deep);
    }
    .part-row {
      --pass: 1;
      position: relative;
      display: grid;
      grid-template-columns: 52px minmax(170px, .8fr) minmax(260px, 1.2fr) auto;
      align-items: center;
      gap: 30px;
      width: 100%;
      min-height: 124px;
      padding: 22px 18px;
      color: var(--ink);
      background: transparent;
      border: 0;
      border-bottom: 1px solid var(--rule);
      text-align: left;
      cursor: pointer;
      transition: color 220ms ease, background 220ms ease;
    }
    .part-row:hover, .part-row[aria-pressed="true"] { color: var(--paper); background: var(--ink); }
    .part-glyph { display: block; }
    .part-glyph svg {
      width: 32px;
      height: 32px;
      fill: none;
      stroke: var(--gold-deep);
      stroke-width: 1.6;
      stroke-linecap: square;
    }
    .part-row:hover .part-glyph svg, .part-row[aria-pressed="true"] .part-glyph svg { stroke: var(--gold); }
    .part-name { font-family: var(--display); font-size: clamp(2rem, 3.8vw, 3.5rem); font-weight: 300; line-height: 1; text-transform: uppercase; }
    .part-description { max-width: 56ch; margin: 0; font-size: 13px; }
    .part-arrow { width: 54px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.5; }

    /* scroll geometry - the plumb line drops and opens each row left to right.
       Negative insets keep the keyboard focus ring outside the clip. */
    .motion-ready .part-row { clip-path: inset(-6px calc((1 - var(--pass)) * 100% - 6px) -6px -6px); }
    .motion-ready .part-glyph svg path {
      stroke-dasharray: 100;
      stroke-dashoffset: calc(100 - 100 * var(--pass));
    }

    .flow-detail {
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      gap: 24px;
      margin-top: 38px;
      padding: 20px 0;
      border-top: 1px solid var(--rule);
      border-bottom: 1px solid var(--rule);
      color: var(--shadow-dark);
      font-size: 12px;
      letter-spacing: .04em;
    }
    .flow-detail strong { color: var(--ink); font-weight: 400; text-transform: uppercase; }
    .flow-detail output { color: var(--gold-deep); text-transform: uppercase; }

    /* ------------------------------------------------------------ comparison */

    .comparison {
      color: var(--paper);
      background-color: var(--ink);
      background-image: var(--charcoal-texture);
      background-size: 720px 720px;
    }
    .comparison::before { background: var(--rule-light); }
    .comparison h2 { color: var(--paper); }
    .comparison .section-head p { color: var(--light-text); }
    .week-instrument {
      --split: 50%;
      position: relative;
      display: grid;
      grid-template-columns: var(--split) calc(100% - var(--split));
      min-height: 560px;
      overflow: hidden;
      border: 1px solid var(--rule-light);
      background: var(--shadow-dark);
    }
    .week-pane {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 34px;
      padding: clamp(32px, 5vw, 72px);
    }
    .week-before { grid-column: 1; color: var(--paper); background: rgba(70, 81, 95, .9); }
    .week-after {
      grid-column: 2;
      color: var(--ink);
      background-color: var(--paper);
      background-image: var(--paper-texture);
      background-size: 620px;
    }
    .week-copy h3 { max-width: 9ch; margin-bottom: 24px; font-family: var(--display); font-size: clamp(3rem, 5vw, 5rem); font-weight: 300; line-height: .92; text-transform: uppercase; }
    .week-copy p { max-width: 38ch; margin-bottom: 0; font-size: 13px; }
    .week-list { width: 100%; margin-top: auto; border-top: 1px solid currentColor; }
    .week-line {
      display: grid;
      grid-template-columns: 88px 1fr auto;
      align-items: center;
      gap: 18px;
      min-height: 76px;
      border-bottom: 1px solid currentColor;
      font-size: 12px;
    }
    .week-line b { font-weight: 400; text-transform: uppercase; }
    .week-line span:last-child { opacity: .76; }
    .week-tag {
      font-size: 9px;
      letter-spacing: .12em;
      text-transform: uppercase;
      opacity: .66;
    }
    .week-after .week-tag { color: var(--gold-deep); opacity: 1; }
    .split-line {
      position: absolute;
      top: 0;
      bottom: 0;
      left: var(--split);
      z-index: 4;
      width: 2px;
      background: var(--gold);
      transform: translateX(-1px);
      pointer-events: none;
    }
    .split-line::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      width: 58px;
      height: 58px;
      display: grid;
      place-items: center;
      color: var(--ink);
      background: var(--gold);
      border: 7px double var(--ink);
      clip-path: polygon(0 12px, 12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px));
      transform: translate(-50%, -50%);
    }
    .split-line::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      z-index: 1;
      width: 24px;
      height: 12px;
      background: var(--ink);
      clip-path: polygon(0 50%, 6px 0, 6px 4px, 18px 4px, 18px 0, 100% 50%, 18px 100%, 18px 8px, 6px 8px, 6px 100%);
      transform: translate(-50%, -50%);
    }
    .split-control {
      position: absolute;
      inset: 0;
      z-index: 5;
      width: 100%;
      height: 100%;
      opacity: 0;
      cursor: ew-resize;
    }
    .split-labels {
      display: flex;
      justify-content: space-between;
      margin-top: 16px;
      color: var(--light-text);
      font-size: 11px;
      letter-spacing: .1em;
      text-transform: uppercase;
    }

    /* --------------------------------------------------------------- approach */

    .process-list {
      position: relative;
      margin: 0;
      padding: 0 0 0 52px;
      list-style: none;
      border-top: 1px solid var(--rule);
    }
    .process-list::before {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      left: 4px;
      width: 1px;
      background: var(--rule);
    }
    .process-item {
      position: relative;
      display: grid;
      grid-template-columns: 100px minmax(190px, .6fr) 1fr;
      gap: 34px;
      padding: 38px 16px;
      border-bottom: 1px solid var(--rule);
    }
    .process-item .num { color: var(--gold-deep); font-family: var(--display); font-size: 2.8rem; line-height: 1; font-variant-numeric: tabular-nums; }
    .process-item h3 { margin-bottom: 0; font-family: var(--display); font-size: 2rem; font-weight: 400; line-height: 1; text-transform: uppercase; }
    .process-item p { max-width: 62ch; margin-bottom: 0; }

    /* scroll geometry - one measuring bracket travels down to the step being read */
    .process-item::before {
      content: "";
      position: absolute;
      top: 26px;
      bottom: 26px;
      left: -32px;
      width: 17px;
      border: 2px solid var(--gold-deep);
      border-right: 0;
      opacity: 0;
      transform: translateX(-9px);
      transition: opacity 320ms ease, transform 460ms var(--ease);
    }
    .motion-ready .process-item.is-reading::before { opacity: 1; transform: translateX(0); }
    .motion-ready .process-item .num,
    .motion-ready .process-item h3 { transition: color 260ms ease, transform 360ms var(--ease); }
    .motion-ready .process-item.is-reading h3 { transform: translateX(8px); }

    /* ---------------------------------------------------------------- contact */

    .contact {
      color: var(--paper);
      background-color: var(--ink);
      background-image: var(--charcoal-texture);
      background-size: 720px 720px;
    }
    .contact::before { background: var(--rule-light); }
    .contact-grid {
      display: grid;
      grid-template-columns: .78fr 1.22fr;
      gap: clamp(70px, 10vw, 160px);
    }
    .contact-copy h2 { color: var(--paper); }
    .contact-copy p { max-width: 46ch; margin: 34px 0 44px; color: var(--light-text); }
    .chips { display: flex; flex-wrap: wrap; gap: 10px; }
    .chip {
      padding: 10px 14px;
      color: var(--paper);
      background: transparent;
      border: 1px solid var(--rule-light);
      clip-path: polygon(0 7px, 7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%);
      font-size: 10px;
      letter-spacing: .06em;
      text-transform: uppercase;
      cursor: pointer;
    }
    .chip:hover, .chip[aria-pressed="true"] { color: var(--ink); background: var(--gold); border-color: var(--gold); }
    .contact-form { display: grid; gap: 28px; }
    .field { position: relative; }
    .field label { display: block; margin-bottom: 10px; color: var(--light-text); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
    .field input, .field textarea {
      width: 100%;
      color: var(--paper);
      caret-color: var(--gold);
      background: transparent;
      border: 0;
      border-bottom: 1px solid var(--rule-light);
      border-radius: 0;
      padding: 12px 0 16px;
      font-size: 15px;
      outline: none;
      transition: border-color 200ms ease;
    }
    .field textarea { min-height: 140px; resize: vertical; }
    .field input::placeholder, .field textarea::placeholder { color: #bdb8af; opacity: 1; }
    .field input:focus, .field textarea:focus { border-color: var(--gold); }
    .field input.invalid, .field textarea.invalid { border-color: #ff846c; }
    .send-row { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
    .send-button { border: 1px solid var(--gold-deep); cursor: pointer; }
    .send-button:disabled { cursor: wait; opacity: .6; transform: none; }
    .form-note { min-height: 1.6em; margin: 0; color: #ffb09f; font-size: 12px; }
    .form-note.success { color: var(--gold); }

    /* scroll geometry - the form draws itself left to right as the section arrives.
       Negative insets keep the keyboard focus ring outside the clip. */
    .motion-ready .contact-form .field {
      clip-path: inset(-8px 100% -8px -8px);
      transition: clip-path 700ms var(--ease);
    }
    .motion-ready .contact-form.is-arrived .field { clip-path: inset(-8px -8px -8px -8px); }
    .motion-ready .contact-form.is-arrived .field:nth-child(3) { transition-delay: 110ms; }
    .motion-ready .contact-form.is-arrived .field:nth-child(4) { transition-delay: 220ms; }

    .footer {
      color: var(--paper);
      background: var(--ink);
      border-top: 1px solid var(--rule-light);
    }
    .footer-row {
      min-height: 108px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 32px;
      font-size: 11px;
      letter-spacing: .06em;
      text-transform: uppercase;
    }
    .footer .logo { font-size: 2.1rem; }

    /* ------------------------------------------------------------ responsive */

    @media (max-width: 1220px) {
      .sheet { height: 496px; }
      .station-name { font-size: 1.24rem; }
      .build-cell { min-height: 268px; }
    }

    @media (max-width: 900px) {
      .station-note { display: none; }
    }

    @media (max-width: 1050px) {
      .shell { width: min(100% - 40px, var(--max)); }
      .nav-row { grid-template-columns: 1fr auto; gap: 18px; }
      .nav-row > .clip-action { display: none; }
      .menu-button { display: block; cursor: pointer; }
      .menu-button:hover, .menu-button[aria-expanded="true"] { color: var(--paper); background: var(--ink); border-color: var(--ink); }
      .nav-links {
        position: absolute;
        top: 100%;
        right: 20px;
        left: auto;
        z-index: 20;
        width: min(430px, 100vw);
        align-items: stretch;
        flex-direction: column;
        gap: 0;
        padding: 14px 24px 24px;
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
        background-color: var(--paper);
        background-image: var(--paper-texture);
        background-size: 720px 720px;
        border-left: 1px solid var(--rule);
        border-bottom: 1px solid var(--rule);
        transform: translateY(-8px);
        transition: opacity 220ms ease, transform 260ms var(--ease), visibility 0s linear 260ms;
      }
      .nav-links.open {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
        transition-delay: 0s;
      }
      .nav-links a { min-height: 48px; display: flex; align-items: center; padding: 15px 4px; border-bottom: 1px solid var(--rule); }
      .nav-links a::after { bottom: 8px; }
      .nav-links .drawer-contact {
        display: flex;
        min-height: 52px;
        justify-content: space-between;
        gap: 24px;
        margin-top: 18px;
        padding: 14px 18px;
        color: var(--ink);
        background: var(--gold);
        border: 1px solid var(--gold-deep);
        clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 13px 100%, 0 calc(100% - 13px));
      }
      .nav-links .drawer-contact::after { display: none; }
      .nav-links .drawer-contact:hover, .nav-links .drawer-contact:focus-visible { color: var(--paper); background: var(--ink); }
      .drawer-contact svg { width: 18px; height: 18px; flex: 0 0 auto; }
      .hero-head { grid-template-columns: 1fr .8fr; gap: 40px; padding-inline: 34px 10px; }
      .sheet { height: 472px; }
      .stations { padding-inline: 7%; }
      .rail { right: 7%; left: 7%; }
      .sheet-field { --inset: 7%; }
      .station-plate { padding: 10px 11px; }
      .station-name { font-size: 1.06rem; }
      .build-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
      .build-cell { grid-column: span 3; min-height: 250px; }
      .build-cell:last-child { grid-column: span 6; }
      .part-row { grid-template-columns: 46px minmax(150px, .8fr) minmax(200px, 1.1fr) auto; gap: 20px; }
    }

    @media (min-width: 761px) {
      .motion-ready .hero {
        min-height: 250vh;
        padding-bottom: 0;
        overflow: visible;
      }
      .motion-ready .hero > .shell {
        min-height: calc(250vh - 88px);
        display: flex;
        flex-direction: column;
      }
      /* while pinned, the sheet sits centred in the space the header leaves */
      .motion-ready .sheet { position: sticky; top: max(98px, calc((100vh - 540px) / 2)); }
    }

    @media (min-width: 761px) and (max-width: 1220px) {
      .nav-row { gap: 18px; }
      .nav-links { gap: 18px; }
      .nav-row > .clip-action { padding-inline: 18px 22px; }
    }

    @media (max-width: 760px) {
      .shell { width: min(100% - 28px, var(--max)); }
      .site-header { position: relative; }
      .nav-row { min-height: 66px; }
      .brand-lockup { gap: 10px; }
      .brand-mark { width: 36px; height: 36px; flex-basis: 36px; }
      .nav-links { right: 0; left: 0; width: 100vw; padding-inline: 18px; border-left: 0; }
      .hero { padding-top: 64px; }
      .hero::before { left: 14px; }
      .hero::after { left: 8px; }
      .hero-head { grid-template-columns: 1fr; gap: 32px; padding-inline: 20px 4px; }
      h1 { max-width: none; font-size: clamp(3rem, 12.6vw, 4.4rem); line-height: .86; }
      h1 span { width: auto; transform: none; }
      .hero-copy { max-width: none; padding-left: 2px; }
      .hero-action { width: 100%; max-width: 320px; }

      /* the sheet rotates: the rail becomes a vertical spine, stations stack */
      .sheet { height: auto; margin-top: 42px; }
      .sheet::after { left: 0; width: 11px; }
      .sheet-field { padding: 22px 0 26px; }
      .sheet-strip { flex-wrap: wrap; gap: 8px 16px; padding: 10px 0 10px 26px; }
      .sheet-hint { font-size: 9px; }
      .sheet-title { flex-wrap: wrap; gap: 4px 14px; font-size: 10px; }
      .sheet-title output { min-width: 0; }
      .rail { top: 22px; right: auto; bottom: 26px; left: 26px; width: 2px; height: auto; }
      .rail-track::before { top: 0; right: -7px; bottom: 0; left: -7px; width: 16px; height: auto; background: repeating-linear-gradient(to bottom, rgba(39, 40, 41, .34) 0 1px, transparent 1px 14px); }
      .rail-fill { inset: 0 auto 0 -1px; width: 4px; height: 100%; transform: scaleY(var(--draw)); transform-origin: top; }
      .rail-fill::after { top: auto; right: 50%; bottom: -1px; transform: translate(50%, 50%); }
      .stations {
        position: static;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 24px;
        padding: 0 0 0 54px;
      }
      .station,
      .station[data-side="up"],
      .station[data-side="down"] {
        position: relative;
        flex: 0 0 auto;
        align-self: stretch;
        height: auto;
        display: grid;
        grid-template-columns: 96px 1fr;
        align-items: center;
        justify-content: start;
        gap: 18px;
        padding: 0;
      }
      .station[data-side="down"] .station-text { order: 0; }
      .station-plate, .station-text { width: auto; }
      .station-stem {
        top: 50%;
        bottom: auto;
        left: -27px;
        width: 27px;
        height: 1px;
      }
      .station-pin,
      .station[data-side="down"] .station-pin {
        top: 50%;
        bottom: auto;
        left: -27px;
        transform: translate(-50%, -50%);
      }
      .station-plate { padding: 9px 10px; }
      .station-name { font-size: 1.32rem; }
      .station-note { display: block; font-size: 9px; }
      .dims { display: none; }

      .section-head { grid-template-columns: 1fr; gap: 32px; margin-bottom: 52px; }
      h2 { font-size: clamp(3rem, 15vw, 4.4rem); }
      .build-grid { grid-template-columns: 1fr; }
      .build-cell, .build-cell:last-child { grid-column: 1; min-height: 0; padding: 30px 22px; }
      .build-cell svg { margin-bottom: 0; }
      .build-cell h3 { margin-top: 22px; }
      .motion-ready .build-cell { clip-path: polygon(0 0, calc(var(--enter) * 200%) 0, calc(var(--enter) * 200% - 60%) 100%, 0 100%); }
      .parts-table { padding-left: 34px; }
      .parts-plumb { left: 8px; }
      .part-row { grid-template-columns: 34px 1fr auto; gap: 14px; padding-inline: 12px; }
      .part-glyph svg { width: 26px; height: 26px; }
      .part-description { display: none; }
      .part-name { font-size: 2.2rem; }
      .part-arrow { width: 38px; }
      .flow-detail { grid-template-columns: 1fr; }
      /* the comparison rotates with the rest of the page: the divider becomes a
         horizontal rule dragged up and down. 780px lets either pane be revealed in
         full at the ends of the range, since a pane needs about 510px to read. */
      .week-instrument {
        grid-template-columns: 1fr;
        grid-template-rows: var(--split) calc(100% - var(--split));
        height: 780px;
        min-height: 0;
      }
      .week-pane { grid-column: 1; gap: 26px; padding: 38px 26px; overflow: hidden; }
      .week-before { grid-row: 1; }
      .week-after { grid-row: 2; }
      .split-line {
        top: var(--split);
        right: 0;
        bottom: auto;
        left: 0;
        width: auto;
        height: 2px;
        cursor: ns-resize;
        pointer-events: auto;
        touch-action: none;
        transform: translateY(-1px);
      }
      .split-line::before { transform: translate(-50%, -50%) rotate(90deg); }
      /* the handle is the grab target here; a full-surface one would swallow the
         page scroll on a touch screen. The range input stays for the keyboard. */
      .split-control {
        top: calc(var(--split) - 30px);
        right: auto;
        bottom: auto;
        left: 50%;
        width: 60px;
        height: 60px;
        margin-left: -30px;
        cursor: ns-resize;
        pointer-events: none;
      }
      .week-copy h3 { font-size: 3.2rem; }
      .week-line { min-height: 68px; grid-template-columns: 74px 1fr; gap: 10px; }
      .week-line span:last-child { grid-column: 2; }
      .split-labels { display: none; }
      .process-list { padding-left: 26px; }
      .process-list::before { left: 2px; }
      .process-item { grid-template-columns: 56px 1fr; gap: 20px; padding-inline: 10px; }
      .process-item p { grid-column: 2; }
      .process-item::before { top: 18px; bottom: 18px; left: -20px; width: 11px; }
      .contact-grid { grid-template-columns: 1fr; gap: 64px; }
      .footer-row { align-items: flex-start; flex-direction: column; justify-content: center; }
    }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      .motion-ready .build-cell,
      .motion-ready .part-row,
      .motion-ready .contact-form .field { clip-path: none; }
      .motion-ready .wire path,
      .motion-ready .build-cell svg path,
      .motion-ready .build-cell svg circle,
      .motion-ready .part-glyph svg path { stroke-dasharray: none; stroke-dashoffset: 0; }
      .motion-ready .process-item.is-reading h3 { transform: none; }
      .motion-ready .contact-form .field::after { transition: none; }
      * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
    }