/* =============================================================================
   ITDC Systems — the home page ("Drawn by hand, built to run")
   Loaded by /index.html only, after tokens.css and styles.css.

   Everything hand-drawn on the page is inline SVG generated by
   tools/build_ink_art.py, written in the vocabulary ink.css holds (.ink / .wash /
   .ann / .sk / .dash — shared with the inner pages that place a sheet). This
   sheet owns the page's own sections and the motion. Buttons, type roles, the header and the footer are the site's
   (styles.css) — nothing here redefines a class that sheet owns, which is why
   every home-only class is prefixed hm-.
   Animated elements never carry a displacement filter, so ambient motion stays
   a transform/opacity cost only.
   ============================================================================= */

.home { overflow-x: hidden; }
.hm-xp-art .occ, .hm-desk-art .occ { fill: var(--color-canvas-soft); }        /* those two sheets lie on flat paper-2 */

.drift { animation: hm-drift 9s ease-in-out infinite alternate; }
@keyframes hm-drift { to { transform: translate(7px, -3px); } }
.speck { animation: hm-speck 11s ease-in-out infinite alternate; }
.speck:nth-child(odd) { animation-duration: 15s; animation-direction: alternate-reverse; }
@keyframes hm-speck { to { transform: translate(-9px, 14px); } }
.bar { transform-box: fill-box; transform-origin: bottom center; animation: hm-bar 5s ease-in-out infinite alternate; }
.bar:nth-child(2) { animation-delay: -1.3s; } .bar:nth-child(3) { animation-delay: -2.4s; } .bar:nth-child(4) { animation-delay: -3.6s; } .bar:nth-child(5) { animation-delay: -4.5s; }
@keyframes hm-bar { to { transform: scaleY(.72); } }
/* The jeepney drives down the street, so it shrinks toward the vanishing
   point: --jx/--jy/--js are where and how small it ends (build_ink_art.py). */
.jeep { animation: hm-jeep 30s linear infinite; will-change: transform; }
@keyframes hm-jeep { 0% { transform: translate(-200px, 0) scale(1); opacity: 0; } 5% { opacity: 1; } 86% { opacity: 1; } 100% { transform: translate(var(--jx, 880px), var(--jy, 0)) scale(var(--js, 1)); opacity: 0; } }
/* The hero draws on page-ready (ink.css draws the other sheets as they scroll in). */
.js.ready .hm-hero-art .sk { stroke-dashoffset: 0; }
.hm-hero-art .bar { transition: opacity 1.3s ease calc(var(--d, 1.3s) + .4s); }
.js:not(.ready) .hm-hero-art :is(.wc, .bar, .late, .occ), .js :is(.hm-proj-art, .hm-close-art, .hm-desk-art):not(.in) :is(.wc, .late, .occ) { opacity: 0; }
/* The one hand-typed drawn line left: the timeline's rule (home.js measures it). */
.draw { transition: stroke-dashoffset 1.5s var(--ease-out); }

/* --- Entry: the mark draws itself, a wash blooms, the page is revealed --------
   The overlay exists only when scripts run at all (.js), and a CSS-only
   animation retires it after four seconds whether or not home.js arrived — it
   must never be able to leave the page as a blank sheet. */
.hm-loader { display: none; }
.js .hm-loader { position: fixed; inset: 0; z-index: 1100; display: grid; place-items: center; background: var(--color-canvas); transition: opacity .5s var(--ease-out), visibility .5s; animation: hm-failsafe .01s linear 4s forwards; }
.js .hm-loader.is-done { opacity: 0; visibility: hidden; }
@keyframes hm-failsafe { to { opacity: 0; visibility: hidden; } }
.hm-loader__wash { position: absolute; width: 180px; height: 180px; border-radius: 46% 54% 52% 48%; background: var(--wash-blue); filter: blur(16px); opacity: 0; transform: scale(.5); }
.hm-loader__mark { position: relative; width: 88px; overflow: visible; }
/* pathLength="1" on both contours, so one dash is the whole line. */
.hm-loader__ink { fill: var(--color-brand-navy); fill-opacity: 0; stroke: var(--color-brand-navy); stroke-width: 10; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.hm-loader.is-drawing .hm-loader__ink { animation: hm-drawmark 1.05s cubic-bezier(.5, .1, .3, 1) forwards, hm-inkfill .4s ease .95s forwards; }
.hm-loader.is-drawing #lm-dot { animation-duration: .45s, .4s; animation-delay: .5s, .95s; }
.hm-loader.is-drawing .hm-loader__wash { animation: hm-bloom .7s var(--ease-out) .7s forwards; }
@keyframes hm-drawmark { to { stroke-dashoffset: 0; } }
@keyframes hm-inkfill { to { fill-opacity: 1; } }
@keyframes hm-bloom { to { opacity: .9; transform: scale(1); } }

/* --- Shared pieces of the page ------------------------------------------------ */
/* The kicker is two-tone here: a quiet note with its number in the accent ink. */
.home main .eyebrow { color: var(--color-mute); }
.home main .eyebrow b { color: var(--color-brand-navy); font-weight: var(--fw-medium); white-space: nowrap; }
/* Buttons that draw a ring round themselves on hover. The ring comes in through
   <use>; document selectors cannot reach the use shadow tree, but fill and the
   stroke-* properties inherit, so the svg element carries them. */
.home main .btn { position: relative; }
.btn .hm-ring { position: absolute; inset: -9px -12px; width: calc(100% + 24px); height: calc(100% + 18px); max-width: none; pointer-events: none; overflow: visible; fill: none; stroke: var(--color-brand-navy); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 0 1; opacity: 0; transition: opacity .2s; transform: none; }
.btn:hover .hm-ring, .btn:focus-visible .hm-ring { opacity: 1; transform: none; animation: hm-ring .6s var(--ease-out) forwards; }
@keyframes hm-ring { from { stroke-dasharray: 0 1; } to { stroke-dasharray: 1 0; } }
.hm-sec { position: relative; padding-block: clamp(80px, 10vw, 150px); }
.hm-head { max-width: 720px; margin-bottom: clamp(40px, 5vw, 72px); }
.hm-head .eyebrow { margin-bottom: 22px; }
.hm-head .lead { margin-top: 18px; }
.hm-sec .display-lg, .hm-close .display-xl { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.6rem); line-height: 1.04; }
/* Scroll reveal for the page's own blocks. */
.js .hm-io { opacity: 0; transform: translateY(16px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.js .hm-io.in { opacity: 1; transform: none; }
.hm-io[data-d="1"] { transition-delay: .1s; } .hm-io[data-d="2"] { transition-delay: .2s; }

/* --- Hero -----------------------------------------------------------------------
   The drawing is a tall sheet (1600 x 1132): the town along the bottom, the
   cloud and analytics high on the right, the rack, database and phone standing
   at the end of the street. The copy takes the sheet's empty top-left — so the
   headline runs wide, in two lines, and the first screen is filled corner to
   corner. */
.hm-hero { --art-w: min(100vw, var(--container-max)); position: relative; z-index: 2; padding-top: clamp(10px, 1.6vw, 28px); }
.hm-hero__copy { position: relative; z-index: 3; padding-top: 8px; max-width: min(800px, 60%); }
.hm-hero__copy .eyebrow { margin-bottom: clamp(18px, 2.2vw, 28px); }
.hm-hero__copy .lead { margin-top: clamp(22px, 3vw, 32px); max-width: 44ch; }
.hm-hero__copy .btn-row { margin-top: clamp(26px, 3vw, 36px); gap: 14px; }
.hm-hero__copy .btn { min-height: 52px; padding-inline: 26px; }
.hm-hero__foot { margin-top: clamp(28px, 3.4vw, 44px); font-family: var(--font-mono); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--color-mute); display: flex; flex-wrap: wrap; gap: 8px 22px; }
.hm-hero__foot b { color: var(--color-ink); font-weight: var(--fw-medium); }
.hm-hero__copy > * { opacity: 0; transform: translateY(14px); }
.ready .hm-hero__copy > * { animation: hm-rise .8s var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 110ms + 60ms); }
@keyframes hm-rise { to { opacity: 1; transform: none; } }
html:not(.js) .hm-hero__copy > * { opacity: 1; transform: none; }
/* The sheet is lifted until the town's highest point (the tower finial, at
   y=699 of 1600 wide: 43.7% of the sheet's width) sits just under the copy's
   last line — whatever the copy's height. The bottom hangs over the next
   section. */
.hm-stage { position: relative; z-index: 1; margin-top: calc(var(--art-w) * -.437 + 22px); margin-inline: calc(-1 * var(--gutter)); margin-bottom: -150px; pointer-events: none; }
.hm-hero-art { display: block; width: 100%; height: auto; overflow: visible; }
.hm-hero-art [data-depth] { will-change: transform; }
/* Sky-to-ground data lines are drawn twice: for the tall sheet, and for the
   narrow layouts where the sky group drops down beside the rack. */
.links-compact { display: none; }

/* --- 01 · Explorer: capability names left, one system map right ------------------ */
.hm-xp-sec { padding-top: clamp(140px, 16vw, 220px); background: linear-gradient(180deg, transparent 0, var(--color-canvas-soft) 220px, var(--color-canvas-soft) 100%); }
.hm-xp { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.hm-xp__list { display: flex; flex-direction: column; border-top: 1px solid var(--color-hairline); }
.hm-xp__btn { position: relative; display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; align-items: center; gap: 14px; width: 100%; padding: 20px 4px; border-bottom: 1px solid var(--color-hairline); text-align: left; font-family: var(--font-display); font-variation-settings: var(--display-axes); font-weight: var(--fw-medium); font-size: clamp(1.4rem, 1.1rem + 1.3vw, 2.1rem); letter-spacing: -.02em; line-height: 1.1; color: var(--color-mute); transition: color .3s, padding-left .35s var(--ease-out); }
.hm-xp__btn .n { font-family: var(--font-mono); font-size: .75rem; letter-spacing: .12em; color: var(--color-mute); transition: color .3s; }
.hm-xp__btn .arrow { width: 22px; height: 22px; opacity: 0; transform: translateX(-6px); transition: opacity .3s, transform .35s var(--ease-out); color: var(--color-brand-navy); }
.hm-xp__btn:hover, .hm-xp__btn:focus-visible { color: var(--color-ink); }
.hm-xp__btn[aria-pressed="true"] { color: var(--color-ink); padding-left: 12px; }
.hm-xp__btn[aria-pressed="true"] .n { color: var(--color-brand-navy); }
.hm-xp__btn[aria-pressed="true"] .arrow { opacity: 1; transform: none; }
.hm-xp__stage { position: relative; scroll-margin-top: calc(var(--header-h) + 20px); }
.hm-xp-art { display: block; width: 100%; height: auto; overflow: visible; }
.hm-xp-art [data-cap] { transition: opacity .5s var(--ease-out); opacity: .26; }
.hm-xp-art [data-cap] .wc { transition: opacity .6s var(--ease-out); opacity: 0; }
.hm-xp-art [data-cap] .label { opacity: 0; transition: opacity .4s var(--ease-out) .15s; }
.hm-xp[data-active="gov"] [data-cap="gov"], .hm-xp[data-active="app"] [data-cap="app"], .hm-xp[data-active="infra"] [data-cap="infra"], .hm-xp[data-active="sap"] [data-cap="sap"] { opacity: 1; }
.hm-xp[data-active="gov"] [data-cap="gov"] .wc, .hm-xp[data-active="app"] [data-cap="app"] .wc, .hm-xp[data-active="infra"] [data-cap="infra"] .wc, .hm-xp[data-active="sap"] [data-cap="sap"] .wc { opacity: 1; }
.hm-xp[data-active="gov"] [data-cap="gov"] .label, .hm-xp[data-active="app"] [data-cap="app"] .label, .hm-xp[data-active="infra"] [data-cap="infra"] .label, .hm-xp[data-active="sap"] [data-cap="sap"] .label { opacity: 1; }
.hm-xp-art .link { transition: opacity .5s; opacity: .35; }
.hm-xp[data-active="gov"] .link-gov, .hm-xp[data-active="app"] .link-app, .hm-xp[data-active="infra"] .link-infra, .hm-xp[data-active="sap"] .link-sap { opacity: 1; }
.hm-xp__descs { position: relative; margin-top: 18px; min-height: 7.5rem; }
.hm-xp__desc { position: absolute; inset: 0; opacity: 0; transform: translateY(8px); transition: opacity .4s var(--ease-out), transform .4s var(--ease-out); pointer-events: none; }
.hm-xp__desc.is-on { opacity: 1; transform: none; pointer-events: auto; position: relative; }
.hm-xp__desc p { color: var(--color-body); max-width: 58ch; text-wrap: pretty; }
.hm-links { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 14px; }
.hm-links .btn--arrow { font-size: .9375rem; }
/* Without scripts every capability is described, one after another. */
html:not(.js) .hm-xp__desc { position: relative; opacity: 1; transform: none; pointer-events: auto; margin-top: 18px; }
html:not(.js) .hm-xp-art [data-cap], html:not(.js) .hm-xp-art [data-cap] .wc, html:not(.js) .hm-xp-art [data-cap] .label { opacity: 1; }

/* --- 02 · Drafting desk ------------------------------------------------------------- */
.hm-desk { background: var(--color-canvas-soft); }
.hm-desk__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.hm-desk__copy .lead { margin-top: 18px; }
.hm-stack { margin-top: 28px; border-top: 1px solid var(--color-hairline); }
.hm-stack li { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--color-hairline-soft); font-size: .9375rem; color: var(--color-body); }
.hm-stack b { font-family: var(--font-mono); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--color-brand-navy); font-weight: var(--fw-medium); padding-top: 3px; }
.hm-desk-art { display: block; width: 100%; height: auto; overflow: visible; }
.hm-desk-art .fade { opacity: 0; transition: opacity .8s ease 1s; }
.hm-desk-art.in .fade, html:not(.js) .hm-desk-art .fade { opacity: 1; }

/* --- 03 · Projects: staggered editorial panels ----------------------------------------- */
.hm-projs { display: flex; flex-direction: column; gap: clamp(56px, 8vw, 120px); margin-top: clamp(40px, 5vw, 64px); }
.hm-proj { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(28px, 4vw, 72px); align-items: center; }
.hm-proj:nth-child(even) .hm-proj-art { order: 2; }
.hm-proj:nth-child(even) .hm-proj__body { order: 1; }
.hm-proj-art { position: relative; }
.hm-proj-art svg { display: block; width: 100%; height: auto; overflow: visible; }
.hm-proj:nth-child(odd) .hm-proj-art { margin-left: calc(-1 * var(--gutter) / 2); }
.hm-proj:nth-child(even) .hm-proj-art { margin-right: calc(-1 * var(--gutter) / 2); }
.hm-proj__n { display: block; font-family: var(--font-display); font-weight: 300; font-size: clamp(3rem, 2rem + 4vw, 6rem); line-height: .85; letter-spacing: -.04em; color: var(--color-mute-soft); font-variant-numeric: lining-nums tabular-nums; font-variation-settings: "SOFT" 80, "WONK" 0; }
.hm-proj__body .eyebrow { margin: 18px 0 14px; }
.hm-proj__body h3 { font-size: clamp(1.45rem, 1.2rem + 1vw, 1.9rem); line-height: 1.15; letter-spacing: -.015em; margin-bottom: 6px; }
.hm-proj__dl { display: grid; gap: 14px; border-top: 1px solid var(--color-hairline); padding-top: 18px; margin-top: 16px; }
.hm-proj__dl div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 16px; }
.hm-proj__dl dt { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--color-mute); padding-top: 4px; }
.hm-proj__dl dd { margin: 0; font-size: .9375rem; line-height: 1.6; color: var(--color-body); text-wrap: pretty; }
.hm-proj__dl dd b { display: block; font-weight: var(--fw-medium); color: var(--color-ink); }
.hm-proj__dl dd small { display: block; margin-top: 3px; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--color-brand-navy); }
.hm-proj__body > .btn--arrow { margin-top: 22px; }
.hm-more { display: flex; justify-content: center; margin-top: clamp(48px, 6vw, 80px); }

/* --- 04 · Trust: sketchbook timeline, verified figures, the roster ------------------------ */
.hm-trust { background: var(--color-canvas-soft); overflow: hidden; }
.hm-tl { position: relative; margin-top: clamp(40px, 5vw, 64px); }
.hm-tl__line { position: absolute; left: 0; right: 0; top: 11px; width: 100%; height: 40px; max-width: none; overflow: visible; pointer-events: none; }
.js .hm-tl__line .draw { stroke-dasharray: var(--len, 0); stroke-dashoffset: var(--len, 0); }
.js .hm-tl.in .hm-tl__line .draw { stroke-dashoffset: 0; }
.hm-tl__list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }
.hm-tl__list li { position: relative; padding-top: 44px; }
.hm-tl__list li::before { content: ""; position: absolute; left: 0; top: 4px; width: 15px; height: 15px; border-radius: 48% 52% 50% 50%; border: 1.6px solid var(--color-ink); background: var(--color-canvas-soft); transition: transform .4s var(--ease-out), background .4s; }
.hm-tl.in .hm-tl__list li::before, html:not(.js) .hm-tl__list li::before { background: var(--color-brand-navy); border-color: var(--color-brand-navy); }
.hm-tl__yr { font-family: var(--font-display); font-variation-settings: var(--display-axes); font-weight: var(--fw-medium); font-size: 1.75rem; letter-spacing: -.02em; color: var(--color-ink); font-variant-numeric: lining-nums; }
.hm-tl__list h3 { font-size: 1rem; font-weight: var(--fw-medium); margin-top: 8px; color: var(--color-ink); }
.hm-tl__list p { font-size: .875rem; color: var(--color-body-mid); margin-top: 6px; line-height: 1.55; }
.hm-figs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: clamp(56px, 8vw, 96px); border-top: 1px solid var(--color-ink); padding-top: 28px; }
.hm-fig strong { display: block; font-family: var(--font-display); font-variation-settings: var(--display-axes); font-weight: var(--fw-medium); font-size: clamp(2.6rem, 2rem + 2vw, 4rem); line-height: 1; letter-spacing: -.03em; color: var(--color-ink); font-variant-numeric: lining-nums tabular-nums; }
.hm-fig span { display: block; margin-top: 10px; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--color-mute); }
.hm-fig small { display: block; margin-top: 8px; font-size: .875rem; color: var(--color-body-mid); line-height: 1.5; }
/* The eighteen, by name: the figure above is only worth printing if the names
   are under it. A ruled list, as a sketchbook would index them. */
.hm-roster { margin-top: clamp(40px, 5vw, 64px); }
.hm-roster__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px 28px; margin-bottom: 14px; }
.hm-roster__head .eyebrow { margin-bottom: 0; }
.hm-roster__key { display: flex; flex-wrap: wrap; gap: 6px 22px; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--color-mute); }
.hm-roster__key span { display: inline-flex; align-items: center; gap: 8px; }
.hm-roster__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; border-top: 1px solid var(--color-hairline); }
.hm-roster__item { display: flex; align-items: center; gap: 11px; padding: 11px 0; border-bottom: 1px solid var(--color-hairline); font-size: .9375rem; color: var(--color-ink-strong); }
.hm-roster i { width: 8px; height: 8px; border-radius: 48% 52% 50% 50%; flex: none; background: var(--color-brand-navy); }
.hm-roster__item--ent i, .hm-roster__key .ent i { background: var(--pillar-inf); }
.hm-cred { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; margin-top: 36px; font-size: .9375rem; color: var(--color-body); }
.hm-cred span { display: inline-flex; align-items: center; gap: 9px; }
.hm-cred i { width: 8px; height: 8px; border-radius: 48% 52% 50% 50%; background: var(--color-brand-navy); }

/* --- 05 · Closing ------------------------------------------------------------------------------ */
.hm-close { position: relative; padding-block: clamp(96px, 12vw, 180px); overflow: hidden; }
.hm-close__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.hm-close .display-xl { font-size: clamp(2.4rem, 1.6rem + 3.4vw, 4.8rem); line-height: 1; letter-spacing: -.03em; max-width: 12ch; margin-top: 22px; }
.hm-close .lead { margin-top: 22px; max-width: 42ch; }
.hm-close .btn-row { margin-top: 36px; gap: 14px; }
.hm-close .btn { min-height: 52px; padding-inline: 26px; }
.hm-close__contacts { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: .9375rem; color: var(--color-body); }
.hm-close__contacts a { border-bottom: 1px solid var(--color-hairline); }
.hm-close__contacts a:hover { color: var(--color-brand-navy); border-color: var(--color-brand-navy); }
.hm-close-art svg { display: block; width: 100%; height: auto; overflow: visible; }

/* --- Cursor label (desktop, fine pointer only) --------------------------------------------------- */
.hm-cursor { position: fixed; left: 0; top: 0; z-index: 1000; pointer-events: none; display: none; width: 68px; height: 68px; margin: -34px 0 0 -34px; border-radius: 50%; background: var(--color-brand-navy); color: var(--color-on-primary); font-family: var(--font-mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; place-items: center; opacity: 0; transform: scale(.6); transition: opacity .25s, transform .3s var(--ease-out); will-change: transform; }
.hm-cursor.is-on { opacity: 1; transform: scale(1); }
@media (hover: hover) and (pointer: fine) { .js .hm-cursor { display: grid; } }

/* =============================================================================
   Responsive
   ============================================================================= */
@media (max-width: 1100px) {
  .hm-hero__copy { max-width: 640px; }
  /* Below the copy, not beside it: the sky group drops 450 units to sit over
     the rack (the compact data lines are drawn for exactly that), and the
     stage shows only the sheet's lower band, y 500-1100. Pure CSS: the svg
     keeps its full size and is slid up inside a clipping stage. */
  .hm-stage { margin-top: 8px; margin-bottom: -80px; overflow: hidden; aspect-ratio: 1600 / 600; }
  .hm-hero-art { margin-top: -31.25%; }
  .hm-hero-art .sky { transform: translateY(450px); }
  .links-wide { display: none; }
  .links-compact { display: inline; }
}
@media (max-width: 1023px) {
  .hm-xp { grid-template-columns: 1fr; gap: 28px; }
  .hm-xp__stage { order: 1; }
  .hm-xp__list { order: 2; }
  .hm-desk__grid { grid-template-columns: 1fr; }
  .hm-proj, .hm-proj:nth-child(even) { grid-template-columns: 1fr; gap: 20px; }
  .hm-proj:nth-child(even) .hm-proj-art { order: 1; }
  .hm-proj:nth-child(even) .hm-proj__body { order: 2; }
  .hm-proj .hm-proj-art, .hm-proj:nth-child(even) .hm-proj-art { margin: 0 auto; width: 100%; max-width: 520px; }
  .hm-tl__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
  .hm-tl__line { display: none; }
  .hm-tl__list li { padding-top: 0; padding-left: 28px; }
  .hm-tl__list li::before { left: 0; top: 10px; }
  .hm-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
  .hm-roster__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-close__grid { grid-template-columns: 1fr; }
  .hm-close-art { max-width: 460px; }
}
@media (max-width: 767px) {
  .hm-hero { padding-top: 20px; }
  .home main .eyebrow { display: block; line-height: 1.5; text-wrap: balance; }                /* run on as text, not squeezed beside the tag */
  .home main .eyebrow::before { display: inline-block; vertical-align: middle; margin-right: 12px; }
  .home main .eyebrow b { margin-right: 6px; }
  .home main .eyebrow span { white-space: nowrap; }
  .hm-hero__copy .btn-row .btn { width: 100%; }
  .hm-stage { margin-bottom: -40px; margin-top: 24px; }
  .hm-xp-sec { padding-top: 96px; }
  .hm-xp__btn { grid-template-columns: 2.4rem minmax(0, 1fr) auto; padding: 16px 2px; }
  .hm-xp__descs { min-height: 0; }
  .hm-stack li { grid-template-columns: 6rem minmax(0, 1fr); }
  .hm-proj__dl div { grid-template-columns: 1fr; gap: 4px; }
  .hm-tl__list { grid-template-columns: 1fr; }
  .hm-figs { grid-template-columns: 1fr 1fr; }
  .hm-fig strong { font-size: 2.4rem; }
  .hm-roster__list { grid-template-columns: 1fr; }
  .hm-close .btn-row .btn { width: 100%; }
}
/* Phones get the transformation zone — the last house, the pole where the
   wires turn into data, rack, database, cloud — instead of the whole scene
   squeezed into 390px: the sheet is enlarged so x 700-1360, y 510-1090 fills
   the stage. */
@media (max-width: 600px) {
  .hm-stage { aspect-ratio: 660 / 580; }
  .hm-hero-art { width: calc(1600 / 660 * 100%); max-width: none; margin-left: calc(-700 / 660 * 100%); margin-top: calc(-510 / 660 * 100%); }
}

/* --- Reduced motion: everything lands finished ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .js .hm-loader { display: none; }
  .hm-hero__copy > * { opacity: 1 !important; transform: none !important; animation: none !important; }
  .js .hm-io, .js .hm-io.in { opacity: 1; transform: none; transition: none; }
  .js .draw { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; transition: none !important; }
  .hm-hero-art .bar, .hm-desk-art .fade { transition: none !important; }
  .drift, .speck, .bar, .jeep { animation: none !important; }
  .jeep { transform: translate(calc(var(--jx) * .6), calc(var(--jy) * .6)) scale(calc(1 - (1 - var(--js)) * .6)); }   /* parked outside the first house, not on the plaza's edge */
  .hm-xp-art [data-cap], .hm-xp__desc, .hm-xp__btn { transition: none !important; }
  .hm-cursor { display: none !important; }
}
/* Print: the drawings stay, the theatre goes. */
@media print {
  .hm-loader, .hm-cursor { display: none !important; }
  .hm-hero__copy > *, .js .hm-io { opacity: 1 !important; transform: none !important; }
  .js .draw { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
  .js:not(.ready) .hm-hero-art :is(.wc, .bar, .late, .occ), .js :is(.hm-proj-art, .hm-close-art, .hm-desk-art):not(.in) :is(.wc, .late, .occ) { opacity: 1; }
}