/* ─────────────────────────────────────────────
   CONTACT — Start a Conversation (the intake)
   Builds on styles.css (tokens, header, menu, footer).
   ───────────────────────────────────────────── */
.page-contact {
  --ink: #151112;
  --ink-2: #1c1718;
  --ox: #4A0404;
  --ox-2: #6e1a18;
  --brass: #b98a57;
  --brass-soft: #d4ae7c;
  --brass-dim: rgb(185 138 87 / .32);
  --paper: #E9E3D8;
  --paper-ink: #1d1718;
  --oat-80: rgb(222 216 204 / .86);
  --oat-55: rgb(222 216 204 / .7);
  --oat-15: rgb(222 216 204 / .18);
  --err: #f0937c;
  --header-bg: rgb(21 17 18 / .92);

  background: var(--ink);
  color: var(--oat);
}
.page-contact :focus-visible { outline: 2px solid var(--brass-soft); outline-offset: 3px; }
.page-contact .site-footer { background: #0f0c0c; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.ct { position: relative; overflow: clip; background: linear-gradient(to bottom, #151112, #181314 40%, #141011 80%, #0f0c0c); }
/* faint grid + grain, like the archive but warmer */
.ct::before {
  content: "";
  position: absolute;
  inset: 100vh 0 0 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgb(185 138 87 / .035) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(185 138 87 / .022) 1px, transparent 1px);
  background-size: 96px 96px;
}
.ct::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  opacity: .06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ─────────────── shared ─────────────── */
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.strong { font-weight: 500; color: var(--oat); }

.ct-sec { position: relative; max-width: 1320px; margin: 0 auto; padding: clamp(96px, 14vh, 160px) var(--gutter); }
.ct-tag {
  margin: 0 0 26px;
  display: flex;
  align-items: center;
  gap: 14px;
  font: 400 11px var(--font-mono);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--brass-soft);
}
.ct-tag::before { content: ""; width: 40px; height: 1px; background: var(--brass-dim); }
.ct-h2 {
  margin: 0;
  max-width: 16ch;
  font-size: clamp(2rem, 4.4vw, 4rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.035em;
  text-transform: uppercase;
  text-wrap: balance;
}
.helper { margin: 22px 0 0; max-width: 30rem; font-size: clamp(1.02rem, 1.3vw, 1.15rem); line-height: 1.65; color: var(--oat-80); }

.sys { margin: 0; font: 400 10px/1.8 var(--font-mono); letter-spacing: .26em; text-transform: uppercase; color: rgb(212 174 124 / .7); }
.sys--status { display: inline-flex; align-items: center; gap: 10px; }
.sys--line::before { content: "// "; }
.blink { width: 6px; height: 6px; background: var(--brass); border-radius: 50%; box-shadow: 0 0 10px var(--brass); animation: blink 2.4s infinite; }
@keyframes blink { 0%, 60%, 100% { opacity: 1; } 75% { opacity: .15; } }

.ct-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .8em;
  padding: 16px 24px;
  border: 1px solid var(--brass);
  background: rgb(185 138 87 / .08);
  color: var(--brass-soft);
  font: 700 12px var(--font-mono);
  letter-spacing: .24em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .4s, color .4s, border-color .4s;
}
.ct-btn span { transition: transform .5s var(--ease-out); }
.ct-btn:hover, .ct-btn:focus-visible { background: var(--brass); color: var(--ink); }
.ct-btn:hover span { transform: translateX(4px); }
.ct-btn--quiet { border-color: var(--oat-15); background: none; color: var(--oat-80); }
.ct-btn--quiet:hover, .ct-btn--quiet:focus-visible { background: var(--oat); color: var(--ink); border-color: var(--oat); }
.ct-btn[disabled] { opacity: .45; cursor: default; }

.rv { opacity: 0; transform: translateY(26px); transition: opacity 1.1s var(--ease-out), transform 1.3s var(--ease-out); transition-delay: var(--rd, 0s); }
.rv.is-in { opacity: 1; transform: none; }

/* system feedback toast */
.ct-toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  z-index: 40;
  margin: 0;
  translate: -50% 20px;
  padding: 9px 14px;
  background: #221a1b;
  border: 1px solid var(--brass-dim);
  font: 400 10px var(--font-mono);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--brass-soft);
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s, translate .5s var(--ease-out);
}
.ct-toast::before { content: "■ "; color: var(--brass); }
.ct-toast.is-on { opacity: 1; translate: -50% 0; }

/* render objects: colour JPG + alpha mask */
.masked {
  -webkit-mask-image: var(--mask); mask-image: var(--mask);
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.obj { position: absolute; will-change: transform; }
.obj img { position: absolute; inset: 0; width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; }

/* ─────────────── 01 · THE INTAKE TERMINAL ─────────────── */
.entry { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; overflow: hidden; }
.room {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(120% 70% at 70% 108%, rgb(110 26 24 / .5), transparent 62%),
    radial-gradient(55% 50% at 70% 14%, rgb(222 216 204 / .07), transparent 70%),
    linear-gradient(#110e0f, #191415 55%, #1c1314);
}
.room__haze {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(35% 30% at 30% 70%, rgb(74 4 4 / .32), transparent 70%),
    radial-gradient(30% 25% at 80% 40%, rgb(185 138 87 / .06), transparent 70%);
  animation: haze 38s ease-in-out infinite alternate;
}
@keyframes haze { to { transform: translate3d(6%, -4%, 0) scale(1.08); } }
.room__arches { position: absolute; inset: 0; width: 100%; height: 100%; }
.room__arches path { fill: none; stroke: rgb(185 138 87 / .16); stroke-width: 1; vector-effect: non-scaling-stroke; }
.room__arches path:nth-child(2) { stroke: rgb(185 138 87 / .07); }
.room__floor {
  position: absolute;
  left: 38vw; right: -8vw;
  bottom: -14vh;
  height: 42vh;
  background: radial-gradient(closest-side, rgb(222 216 204 / .11), rgb(222 216 204 / .03) 60%, transparent);
}
.room__beam {
  position: absolute;
  left: 56vw;
  top: -5vh;
  width: 28vw;
  height: 78vh;
  background: linear-gradient(to bottom, rgb(234 220 196 / .16), rgb(234 220 196 / .03) 70%, transparent);
  clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%);
  filter: blur(18px);
  mix-blend-mode: screen;
  animation: beam 9s ease-in-out infinite alternate;
}
@keyframes beam { to { opacity: .7; } }

.obj--terminal { right: 3vw; bottom: -7vh; width: min(52vw, 860px); aspect-ratio: 1402 / 1122; container-type: inline-size; transform-origin: 50% 100%; }
.obj--terminal img { filter: drop-shadow(0 40px 60px rgb(0 0 0 / .55)); }
.obj--dossier { right: 5vw; top: 12vh; width: min(15vw, 240px); aspect-ratio: 1122 / 1402; rotate: 7deg; filter: blur(2.5px) brightness(.5) saturate(.8); opacity: .85; }

/* live text on the terminal's obs */
.screen {
  position: absolute;
  left: 24.2%; top: 9.6%;
  width: 57.4%; height: 30.6%;
  padding: 3.4% 4%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .9cqw;
  overflow: hidden;
  font-family: var(--font-mono);
  color: rgb(234 222 204 / .88);
  text-shadow: 0 0 1.2cqw rgb(212 174 124 / .45);
}
.screen::after {   /* faint scanlines */
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(to bottom, rgb(0 0 0 / .14) 0 1px, transparent 1px 3px);
  pointer-events: none;
}
.screen__line { margin: 0; font-size: 1.35cqw; letter-spacing: .22em; text-transform: uppercase; opacity: .7; }
.screen__line--big { font-size: 2.9cqw; letter-spacing: .1em; opacity: 1; color: var(--brass-soft); }
.screen__cursor span { display: inline-block; width: .6em; height: 1em; vertical-align: -.12em; background: currentColor; animation: caret 1.1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }

.entry__shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgb(17 14 15 / .88) 0%, rgb(17 14 15 / .55) 34%, transparent 58%); }
.entry__txt {
  --out: 0;
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 120px var(--gutter) 80px;
  opacity: calc(1 - var(--out) * 1.4);
  translate: 0 calc(var(--out) * -60px);
}
.entry__h {
  margin: 18px 0 0;
  max-width: 13.5ch;
  font-size: clamp(2.5rem, 5.4vw, 5rem);
  font-weight: 400;
  line-height: .96;
  letter-spacing: -.04em;
  text-transform: uppercase;
  text-wrap: balance;
}
.entry__copy { margin-top: 30px; max-width: 30rem; font-size: clamp(1.02rem, 1.3vw, 1.15rem); line-height: 1.65; color: var(--oat-80); }
.entry__copy p { margin: 0; }
.entry__copy .strong { margin-top: 14px; }
.begin {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 44px;
  font: 700 12px var(--font-mono);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--brass-soft);
}
.begin span { display: inline-block; animation: nudge 2.4s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateY(5px); } }

@media (max-width: 820px) {
  .entry { align-items: flex-start; }
  .obj--terminal { right: auto; left: -8vw; width: 116vw; bottom: -6vh; }
  .obj--dossier { right: -6vw; top: 30vh; width: 30vw; }
  .room__beam { left: 30vw; width: 50vw; top: 30vh; height: 50vh; }
  .room__floor { left: -10vw; right: -10vw; }
  .room__arches { display: none; }
  .entry__shade { background: linear-gradient(to bottom, rgb(17 14 15 / .9) 0%, rgb(17 14 15 / .6) 45%, transparent 70%); }
  .entry__txt { padding-top: 104px; padding-bottom: 90vw; }   /* the terminal rises below the text */
  .entry__h { font-size: clamp(2.2rem, 10vw, 3rem); }
  .begin { margin-top: 32px; }
}

/* ─────────────── 02 · ROUTE ─────────────── */
.routes { margin: 56px 0 0; padding: 0; border: 0; display: grid; gap: 16px; }
@media (min-width: 900px) { .routes { grid-template-columns: repeat(3, 1fr); } }
.rt {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-content: start;
  gap: 12px 16px;
  padding: 26px 24px 28px;
  border: 1px solid var(--oat-15);
  background: linear-gradient(160deg, rgb(222 216 204 / .05), rgb(222 216 204 / .01) 70%);
  cursor: pointer;
  transition: border-color .4s, background .5s, translate .5s var(--ease-out), opacity 1.1s var(--ease-out), transform 1.3s var(--ease-out);
}
.rt input { position: absolute; opacity: 0; pointer-events: none; }
.rt:hover { border-color: var(--brass-dim); translate: 0 -3px; }
.rt:focus-within { outline: 2px solid var(--brass-soft); outline-offset: 3px; }
.rt:has(input:focus:not(:focus-visible)) { outline: none; }
/* a real radio mark: selected is shown by the mark, the border and the word "Selected", not by colour alone */
.rt__check { grid-row: 1; width: 22px; height: 22px; margin-top: 2px; border: 1.5px solid rgb(222 216 204 / .55); border-radius: 50%; display: grid; place-items: center; transition: border-color .3s, background .3s; }
.rt__check::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--ink); transform: scale(0); transition: transform .3s var(--ease-out); }
.rt__name { grid-row: 1; align-self: center; font-size: clamp(1.15rem, 1.7vw, 1.45rem); font-weight: 500; letter-spacing: .2em; text-transform: uppercase; }
.rt--open .rt__name { letter-spacing: .1em; }
.rt__copy { grid-column: 1 / -1; line-height: 1.55; color: var(--oat-80); transition: color .4s; }
.rt__ok { grid-column: 1 / -1; margin-top: 4px; font: 700 11px var(--font-mono); letter-spacing: .24em; text-transform: uppercase; color: var(--brass-soft); opacity: 0; translate: 0 6px; transition: opacity .5s, translate .6s var(--ease-out); }
.rt__ok::before { content: "✓ "; }
.rt.is-on { border-color: var(--brass); border-width: 1px; box-shadow: inset 0 0 0 1px var(--brass); background: linear-gradient(160deg, rgb(110 26 24 / .55), rgb(74 4 4 / .12) 80%); }
.rt.is-on .rt__check { border-color: var(--brass-soft); background: var(--brass-soft); }
.rt.is-on .rt__check::after { transform: scale(1); }
.rt.is-on .rt__ok { opacity: 1; translate: 0 0; }
.routes:has(.is-on) .rt:not(.is-on) { opacity: .7; }

/* ─────────────── next step (end of every step) ─────────────── */
.next {
  margin-top: clamp(48px, 7vh, 80px);
  padding-top: 22px;
  border-top: 1px solid var(--oat-15);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 32px;
}
.next__st { margin: 0; font: 400 11px/1.8 var(--font-mono); letter-spacing: .26em; text-transform: uppercase; color: var(--oat-55); transition: color .4s; }
.next__st::before { content: "// "; }
.next__st.is-on { color: var(--brass-soft); }
.next__btn {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--oat);
  font: 700 12px var(--font-mono);
  letter-spacing: .28em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .4s;
}
.next__arrow {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--brass-dim);
  border-radius: 50%;
  font: 400 17px/1 var(--font-sans);
  letter-spacing: 0;
  color: var(--brass-soft);
  transition: background .4s, color .4s, border-color .4s;
  animation: nudge 2.4s ease-in-out infinite;
}
button.next__btn .next__arrow { animation-name: nudgeX; }
@keyframes nudgeX { 50% { transform: translateX(4px); } }
.next__btn:hover .next__arrow, .next__btn:focus-visible .next__arrow, .next.is-ready .next__arrow { background: var(--brass); border-color: var(--brass); color: var(--ink); }
.next.is-ready .next__btn { color: var(--brass-soft); }
.next__msg { flex-basis: 100%; margin: 0; text-align: right; font-size: 15px; line-height: 1.5; color: var(--err); }

/* ARCDESIGN service (optional, only when that route is chosen) */
.svc { margin-top: 22px; display: grid; gap: 8px; max-width: 26rem; animation: panelIn .5s var(--ease-out); }
.svc__l { font-size: 15px; font-weight: 500; color: var(--oat); }
.svc__l em { font-style: normal; font-weight: 400; color: var(--oat-55); margin-left: 4px; }
.svc__sel {
  appearance: none;
  padding: 12px 40px 12px 14px;
  border: 1px solid var(--brass-dim);
  border-radius: 0;
  background: rgb(110 26 24 / .25) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23d4ae7c' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right 14px center;
  color: var(--oat);
  font: 400 1rem var(--font-sans);
  cursor: pointer;
}
.svc__sel:focus-visible { outline: 2px solid var(--brass-soft); outline-offset: 3px; }
.svc__sel option { background: #1c1718; color: var(--oat); }
.svc__note { margin: 4px 0 0; font: 400 12px/1.5 var(--font-mono); letter-spacing: .04em; color: var(--oat-55); }
.svc__note a { color: var(--oat); border-bottom: 1px solid var(--oat-55); }

/* ─────────────── 03 · WHAT'S GOING ON? — write · draw · upload ─────────────── */
.seeing__head { display: grid; gap: 28px; align-items: end; }
@media (min-width: 980px) { .seeing__head { grid-template-columns: 1fr 1fr; gap: clamp(48px, 6vw, 96px); } }
.seeing__head .helper { margin: 0; }
.helper p { margin: 0 0 10px; }
.helper p:last-child { margin-bottom: 0; }
.helper__dim { color: var(--oat-55); }

.desk { margin-top: clamp(40px, 6vh, 64px); display: grid; gap: 36px; align-items: start; }
@media (min-width: 980px) { .desk { grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(32px, 4vw, 64px); } }

/* the console: one input area, three ways in */
.console { border: 1px solid var(--brass-dim); background: linear-gradient(#1d1718, #171213); box-shadow: 0 40px 90px -50px rgb(0 0 0 / .9); }
.console__tabs { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--brass-dim); }
.ctab {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-content: start;
  gap: 4px 10px;
  min-width: 0;
  min-height: 64px;
  padding: 16px 18px 18px;
  border: 0;
  border-right: 1px solid var(--oat-15);
  background: none;
  color: var(--oat-80);
  text-align: left;
  cursor: pointer;
  transition: color .3s, background .4s;
}
.ctab:last-child { border-right: 0; }
.ctab::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--brass); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease-out); }
.ctab:hover { color: var(--oat); background: rgb(222 216 204 / .03); }
.ctab.is-on { color: var(--oat); background: rgb(110 26 24 / .3); }
.ctab.is-on::after { transform: scaleX(1); }
.ctab:focus-visible { outline-offset: -3px; }
.ctab__name { font: 700 13px var(--font-mono); letter-spacing: .22em; text-transform: uppercase; white-space: nowrap; }
.ctab__desc { grid-column: 1; font-size: 14px; line-height: 1.4; color: var(--oat-55); }
.ctab.is-on .ctab__desc { color: var(--oat-80); }
.ctab__n { grid-column: 2; grid-row: 1; min-width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; font: 700 11px/1 var(--font-mono); color: var(--ink); background: var(--brass-soft); }
.ctab__n:empty { visibility: hidden; }
@media (max-width: 600px) {
  .ctab { padding: 14px 10px; min-height: 72px; }
  .ctab__name { font-size: 12px; letter-spacing: .14em; }
  .ctab__desc { font-size: 12.5px; }
}
.cpanel { padding: clamp(16px, 2.4vw, 28px); animation: panelIn .5s var(--ease-out); }
@keyframes panelIn { from { opacity: 0; transform: translateY(8px); } }
.cpanel__note { margin: 0; font-size: 14px; line-height: 1.5; color: var(--oat-55); }
.cpanel__err { margin: 0 clamp(16px, 2.4vw, 28px) clamp(16px, 2.4vw, 28px); padding: 10px 14px; border-left: 2px solid var(--err); background: rgb(240 147 124 / .08); font-size: 15px; line-height: 1.5; color: var(--err); }

/* write: oxblood glass, like the terminal's screen */
.obs {
  position: relative;
  padding: 22px 24px 16px;
  border: 1px solid rgb(185 138 87 / .6);
  background: linear-gradient(155deg, #3c1618 0%, #2a0e10 45%, #1c0a0b 100%);
  box-shadow: inset 0 0 0 5px rgb(17 14 15 / .55), inset 0 0 0 6px rgb(185 138 87 / .25);
  transition: border-color .4s, box-shadow .6s;
}
.obs::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(118deg, rgb(255 255 255 / .07), transparent 38%); }
.obs:focus-within { border-color: var(--brass-soft); box-shadow: inset 0 0 0 5px rgb(17 14 15 / .55), inset 0 0 0 6px rgb(185 138 87 / .4), 0 0 60px -20px rgb(110 26 24 / .9); }
.obs__label { position: relative; display: block; margin: 4px 4px 6px; font-size: 16px; font-weight: 500; color: var(--oat); }
.obs__help { position: relative; margin: 0 4px 14px; font-size: 14.5px; line-height: 1.55; color: var(--oat-80); }
.obs textarea {
  position: relative;
  display: block;
  width: 100%;
  min-height: 250px;
  padding: 4px;
  border: 0;
  outline: 0;
  resize: vertical;
  background: transparent;
  color: var(--oat);
  font: 400 1.06rem/1.7 var(--font-sans);
  caret-color: var(--brass-soft);
}
.obs textarea::placeholder { color: rgb(222 216 204 / .45); }
.obs:has(textarea:focus-visible) { outline: 2px solid var(--brass-soft); outline-offset: 3px; }
.obs__foot { display: flex; justify-content: flex-end; gap: 12px; margin: 10px 4px 0; padding-top: 10px; border-top: 1px solid rgb(185 138 87 / .2); font: 400 10px var(--font-mono); letter-spacing: .24em; text-transform: uppercase; color: var(--oat-55); }
.obs__foot .is-ready { color: var(--brass-soft); }
.obs__foot .is-ready::before { content: "■ "; }

/* B · draw it */
.pad__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tool {
  min-height: 40px;
  padding: 9px 14px;
  border: 1px solid var(--oat-15);
  background: none;
  color: var(--oat-80);
  font: 400 11px var(--font-mono);
  letter-spacing: .2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .3s, color .3s, background .3s;
}
.tool:hover { border-color: var(--brass-dim); color: var(--oat); }
.tool.is-on { border-color: var(--brass); color: var(--brass-soft); background: rgb(185 138 87 / .08); }
.pad__sep { width: 1px; height: 22px; margin: 0 6px; background: var(--oat-15); }
.pad__w { display: inline-flex; gap: 4px; }
.w { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--oat-15); background: none; cursor: pointer; }
@media (pointer: coarse) {
  .tool { min-height: 44px; }
  .w { width: 44px; height: 44px; }
}
.w i { width: var(--s); height: var(--s); border-radius: 50%; background: var(--oat-80); }
.w.is-on { border-color: var(--brass); }
.w.is-on i { background: var(--brass-soft); }
.pad__sheet {
  position: relative;
  margin-top: 12px;
  aspect-ratio: 16 / 9;
  max-height: 56vh;
  background:
    linear-gradient(to right, rgb(29 23 24 / .05) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(to bottom, rgb(29 23 24 / .05) 1px, transparent 1px) 0 0 / 32px 32px,
    #ECE6DA;
  box-shadow: inset 0 0 60px rgb(120 100 70 / .18);
  cursor: crosshair;
}
.pad__sheet.is-erasing { cursor: cell; }
.pad__canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.pad__sheet { touch-action: none; overscroll-behavior: contain; -webkit-tap-highlight-color: transparent; }
.pad__corner { position: absolute; font: 400 9px var(--font-mono); letter-spacing: .24em; text-transform: uppercase; color: rgb(29 23 24 / .4); pointer-events: none; }
.pad__corner--tl { left: 12px; top: 10px; }
.pad__corner--br { right: 12px; bottom: 10px; }
.pad__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin-top: 16px; }
@media (max-width: 700px) { .pad__sheet { aspect-ratio: 4 / 3.4; } }

/* C · upload it */
.dropzone {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: clamp(44px, 8vh, 80px) 20px;
  border: 1px dashed var(--brass-dim);
  background: radial-gradient(ellipse at 50% 0%, rgb(185 138 87 / .07), transparent 70%);
  text-align: center;
  cursor: pointer;
  transition: border-color .4s, background .4s;
}
.dropzone:hover, .desk.is-drag .dropzone { border-color: var(--brass); background: radial-gradient(ellipse at 50% 0%, rgb(185 138 87 / .16), transparent 75%); }
.cpanel:has(#files:focus-visible) .dropzone { outline: 2px solid var(--brass-soft); outline-offset: 4px; }
.dropzone__icon { width: 44px; height: 44px; fill: none; stroke: var(--brass-soft); stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; margin-bottom: 6px; }
.dropzone__h { font-size: clamp(1.2rem, 2vw, 1.5rem); letter-spacing: -.01em; text-transform: uppercase; }
.dropzone__or { font-size: 14px; color: var(--oat-55); }
.dropzone__or u { color: var(--brass-soft); text-underline-offset: 3px; }
.dropzone__types { margin-top: 8px; font-size: 13px; line-height: 1.5; color: var(--oat-55); }

/* the case file: a (small) evidence tray that fills as you work */
.casefile { min-width: 0; }
@media (min-width: 980px) { .casefile { position: sticky; top: 96px; } }
.casefile__h { margin: 0; display: flex; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--oat-15); font: 400 10px var(--font-mono); letter-spacing: .26em; text-transform: uppercase; color: var(--oat-55); }
.casefile__h span:first-child { color: var(--brass-soft); }
.casefile__h .is-full { color: var(--oat); }
.casefile__empty { margin: 4px 0 0; font-size: 14px; line-height: 1.5; text-align: center; color: var(--oat-55); }

.tray { position: relative; max-width: 320px; margin: 0 auto; }
@media (max-width: 979px) { .tray { max-width: 280px; } }
.tray__obj { position: relative; width: 100%; aspect-ratio: 1; }
.tray__obj > img { position: absolute; inset: 0; width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; filter: drop-shadow(0 26px 34px rgb(0 0 0 / .6)); }
.tray::before {   /* pool of light the tray sits in */
  content: "";
  position: absolute;
  left: 4%; right: 4%;
  top: 30%; bottom: 0;
  background: radial-gradient(closest-side, rgb(222 216 204 / .08), transparent);
  pointer-events: none;
}
/* a plane that lies on the tray's floor: dropped items sit on it */
.tray__floor {
  position: absolute;
  left: 25%; top: 42%;
  width: 52%; height: 30%;
  transform: perspective(1400px) rotateX(52deg) rotateZ(-14deg);
  transform-style: preserve-3d;
}
.tray__items { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.ev {
  position: absolute;
  left: var(--x); top: var(--y);
  width: 44%;
  translate: -50% -50%;
  rotate: var(--r);
  padding: 4px 4px 13px;
  background: #F1ECE3;
  color: var(--paper-ink);
  box-shadow: 0 1px 0 rgb(0 0 0 / .2), 5px 10px 12px -5px rgb(0 0 0 / .55);
  animation: land .9s var(--ease-out) both;
}
@keyframes land {
  0% { opacity: 0; transform: translate3d(0, -60%, 120px) rotate(-8deg); }
  60% { opacity: 1; }
  100% { opacity: 1; transform: none; }
}
.ev.is-leaving { animation: leave .45s ease-in both; }
@keyframes leave { to { opacity: 0; transform: translate3d(0, -40%, 80px); } }
.ev__thumb { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: #E3DDD2; }
.ev__doc { display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 3; background: #E3DDD2; font: 700 11px var(--font-mono); letter-spacing: .1em; color: var(--ox); }
.ev__lines { display: block; width: 100%; aspect-ratio: 4 / 3; padding: 6%; overflow: hidden; background: #EDE7DB; font: 400 5px/1.45 var(--font-mono); color: rgb(29 23 24 / .75); word-break: break-word; }
.ev__name { position: absolute; left: 4px; right: 4px; bottom: 3px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 400 6px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: rgb(29 23 24 / .6); }
.ev--sketch { background: #EDE7DB; }
.ev--sketch::after { content: ""; position: absolute; left: 42%; top: -5px; width: 16%; height: 9px; background: rgb(185 138 87 / .55); }   /* a strip of brass tape */
.ev--text { background: #F4EFE6; }

.tray__list { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.tray__list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px 8px 12px; border: 1px solid var(--oat-15); font: 400 10px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--oat-80); animation: panelIn .5s var(--ease-out); }
.tray__list li span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tray__list li em { font-style: normal; color: var(--brass-soft); margin-right: 10px; }
.tray__x { flex: none; min-width: 36px; min-height: 36px; padding: 2px 8px; border: 0; background: none; color: var(--oat-80); font: 400 18px/1 var(--font-sans); cursor: pointer; }
.tray__x--edit { font: 400 10px var(--font-mono); letter-spacing: .16em; text-transform: uppercase; }
.tray__x:hover { color: var(--oat); }
.desk.is-drag .tray__obj::after {
  content: "";
  position: absolute;
  inset: 8%;
  border: 1px dashed var(--brass);
  border-radius: 6px;
  background: radial-gradient(closest-side, rgb(185 138 87 / .12), transparent);
  pointer-events: none;
}
.tray.is-flash .tray__obj { animation: settle .6s var(--ease-out); }
@keyframes settle { 30% { translate: 0 5px; } }

/* ─────────────── 04 · WHO ARE YOU? ─────────────── */
.who__grid { display: grid; gap: 48px; align-items: start; }
@media (min-width: 980px) { .who__grid { grid-template-columns: 1fr 1.3fr; gap: clamp(48px, 6vw, 96px); } }
.fields { display: grid; gap: 26px; }
.fld { display: grid; gap: 8px; }
.fld__l { font-size: 15px; font-weight: 500; color: var(--oat); }
.fld__l em { font-style: normal; font-weight: 400; color: var(--oat-55); margin-left: 4px; }
.fld input {
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  border: 1px solid rgb(222 216 204 / .3);
  border-radius: 0;
  outline: 0;
  background: rgb(222 216 204 / .04);
  color: var(--oat);
  font: 400 1.1rem/1.5 var(--font-sans);
  caret-color: var(--brass-soft);
  transition: border-color .3s, box-shadow .3s;
}
.fld input:hover { border-color: rgb(222 216 204 / .5); }
.fld input:focus { border-color: var(--brass-soft); box-shadow: 0 0 0 1px var(--brass-soft); }
.fld.is-invalid input { border-color: var(--err); box-shadow: 0 0 0 1px var(--err); }
.fld__err { margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--err); }
.fld__err::before { content: "! "; font-weight: 700; }

/* ─────────────── 05 · CASE INPUT ─────────────── */
.case__grid { display: grid; gap: 48px; align-items: center; }
@media (min-width: 980px) { .case__grid { grid-template-columns: .8fr 1.2fr; gap: clamp(48px, 6vw, 96px); } }
/* the intake system: quietly working in the background, lighting up as input arrives */
.sysmon {
  position: relative;
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  padding: 18px 18px 16px;
  overflow: hidden;
  border: 1px solid rgb(185 138 87 / .22);
  background:
    linear-gradient(to right, rgb(185 138 87 / .045) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(to bottom, rgb(185 138 87 / .03) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(160deg, #1b1516, #141011);
}
.sysmon::before {   /* a slow scan line passing over the panel */
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 0;
  height: 30%;
  background: linear-gradient(to bottom, transparent, rgb(185 138 87 / .05), transparent);
  animation: scan 7s linear infinite;
  pointer-events: none;
}
@keyframes scan { from { transform: translateY(-100%); } to { transform: translateY(340%); } }
@media (max-width: 979px) { .sysmon { order: 2; } }   /* on phones the case sheet (and its submit) comes first */
.sysmon__head { margin: 0 0 6px; display: flex; justify-content: space-between; gap: 12px; font: 400 10px var(--font-mono); letter-spacing: .24em; text-transform: uppercase; color: var(--oat-55); }
.sysmon__st { color: var(--brass-soft); }
.sysmon__st::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; vertical-align: 1px; animation: blink 2.4s infinite; }
.sysmon[data-mode="ready"] .sysmon__st { color: var(--oat); }

.sysmon__map { display: block; width: 100%; height: auto; overflow: visible; }
.lane__path { fill: none; stroke: rgb(222 216 204 / .12); stroke-width: 1; stroke-dasharray: 3 5; transition: stroke .6s; }
.lane__dot { fill: #151112; stroke: rgb(222 216 204 / .3); stroke-width: 1; transition: fill .5s, stroke .5s; }
.lane__txt { font: 400 9px var(--font-mono); letter-spacing: .18em; fill: rgb(222 216 204 / .4); transition: fill .5s; }
.pkt { fill: var(--brass-soft); opacity: 0; transition: opacity .6s; }
.lane.is-on .lane__path { stroke: rgb(185 138 87 / .55); stroke-dasharray: none; }
.lane.is-on .lane__dot { fill: var(--brass); stroke: var(--brass-soft); }
.lane.is-on .lane__txt { fill: var(--oat); }
.lane.is-on .pkt { opacity: .9; }
.lane.is-new .lane__dot { animation: ping 1s var(--ease-out); }
@keyframes ping { 0% { r: 4.5; } 30% { r: 9; } 100% { r: 4.5; } }

.core__ring, .core__sweep { fill: none; transform-box: fill-box; transform-origin: center; }
.core__ring--out { stroke: rgb(185 138 87 / .28); stroke-width: 1; stroke-dasharray: 2 6; animation: spin 40s linear infinite; }
.core__ring--mid { stroke: rgb(185 138 87 / .4); stroke-width: 1.2; stroke-dasharray: 60 18 8 18; animation: spin 18s linear infinite reverse; }
.core__sweep { stroke: rgb(212 174 124 / .14); stroke-width: 14; stroke-dasharray: 44 290; animation: spin 5s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.core__disc { fill: url(#coreGlow); stroke: rgb(185 138 87 / calc(.25 + var(--k, 0) * .6)); stroke-width: 1; filter: drop-shadow(0 0 calc(4px + var(--k, 0) * 18px) rgb(110 26 24 / .95)); animation: breathe 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes breathe { 50% { transform: scale(1.06); } }
.core__n { font: 700 13px var(--font-mono); letter-spacing: .08em; fill: var(--oat); text-anchor: middle; }
.core__lbl { font: 400 7px var(--font-mono); letter-spacing: .2em; text-transform: uppercase; fill: rgb(222 216 204 / .45); text-anchor: middle; }

.sysmon__log {
  margin: 6px 0 0;
  padding: 10px 0 0;
  height: 9.6em;
  overflow: hidden;
  list-style: none;
  border-top: 1px solid rgb(222 216 204 / .08);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  font: 400 10px/1.6 var(--font-mono);
  letter-spacing: .06em;
  color: rgb(222 216 204 / .38);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 45%);
  mask-image: linear-gradient(to bottom, transparent, #000 45%);
}
.sysmon__log li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; animation: logIn .5s var(--ease-out); }
.sysmon__log li time { color: rgb(222 216 204 / .25); margin-right: 10px; }
.sysmon__log li.is-event { color: var(--brass-soft); }
.sysmon__log li:last-child::after { content: ""; display: inline-block; width: .55em; height: 1em; margin-left: 4px; vertical-align: -.15em; background: currentColor; animation: caret 1.1s steps(1) infinite; }
@keyframes logIn { from { opacity: 0; transform: translateY(6px); } }
.sysmon__bar { display: flex; align-items: center; gap: 12px; margin-top: 12px; font: 400 9px var(--font-mono); letter-spacing: .22em; text-transform: uppercase; color: var(--oat-55); }
.sysmon__bar i { position: relative; flex: 1; height: 3px; background: rgb(222 216 204 / .1); overflow: hidden; }
.sysmon__bar i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--ox-2), var(--brass-soft)); transform-origin: left; transform: scaleX(var(--k, 0)); transition: transform .8s var(--ease-out); }
.sysmon__bar b { min-width: 3.2em; text-align: right; font-weight: 700; color: var(--brass-soft); }
.sheet {
  position: relative;
  padding: clamp(24px, 3vw, 40px);
  background: linear-gradient(170deg, #EEE8DD, var(--paper) 60%, #E2DBCE);
  color: var(--paper-ink);
  box-shadow: 0 50px 90px -40px rgb(0 0 0 / .9);
}
.sheet::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--ox); }
.sheet__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px 24px; padding-bottom: 16px; border-bottom: 1px solid rgb(29 23 24 / .2); }
.sheet__h { margin: 0; font: 400 12px var(--font-mono); letter-spacing: .3em; text-transform: uppercase; color: var(--ox); }
.sheet__state { margin: 0; font: 700 11px var(--font-mono); letter-spacing: .24em; text-transform: uppercase; color: rgb(29 23 24 / .62); transition: color .4s; }
.sheet__state.is-ready { color: #8a6232; }
.sheet__state.is-assembled { color: var(--ox); }
.sheet__state.is-ready::before, .sheet__state.is-assembled::before { content: "■ "; }
.sheet__rows { margin: 0; }
.row { display: grid; grid-template-columns: 9.5rem 1fr auto; align-items: baseline; gap: 16px; padding: 15px 0; border-bottom: 1px dashed rgb(29 23 24 / .18); }
.row dt { font: 400 11px var(--font-mono); letter-spacing: .2em; text-transform: uppercase; color: rgb(29 23 24 / .72); }
.row dd { margin: 0; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 15px; }
.row__st { font: 400 10px var(--font-mono); letter-spacing: .18em; text-transform: uppercase; color: rgb(29 23 24 / .6); }
.row.is-ok .row__st { color: var(--ox); }
.row.is-ok .row__st::before { content: "■ "; }
.row.is-in { animation: rowIn .8s var(--ease-out); }
@keyframes rowIn { 0% { background: rgb(185 138 87 / .25); } 100% { background: transparent; } }
@media (max-width: 560px) {
  .row { grid-template-columns: 1fr auto; gap: 4px 12px; }
  .row dd { grid-column: 1 / -1; grid-row: 2; }
}
.sheet__missing { margin: 18px 0 0; padding: 10px 14px; border-left: 3px solid #8b2a1c; background: rgb(139 42 28 / .07); font-size: 15px; line-height: 1.5; color: #7a2418; }
.sheet .ct-btn--big { width: 100%; margin-top: 26px; padding: 20px 28px; background: var(--ox); border-color: var(--ox); color: var(--paper); }
.sheet .ct-btn--big:hover, .sheet .ct-btn--big:focus-visible { background: var(--charcoal); border-color: var(--charcoal); color: var(--paper); }
.sheet .ct-btn--big.is-sending { pointer-events: none; opacity: .7; }
.sheet__privacy { margin: 14px 0 0; font-size: 13.5px; line-height: 1.5; color: rgb(29 23 24 / .75); }
.sheet :focus-visible { outline-color: var(--ox); }
.sheet__privacy a { color: var(--ox); text-decoration: underline; text-underline-offset: 3px; }

/* ─────────────── 07 · RECEIVED ─────────────── */
.received {
  position: relative;
  max-width: 1320px;
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100svh;
  padding: 120px var(--gutter) 80px;
  display: grid;
  gap: 40px;
  align-items: center;
  outline: 0;
}
@media (min-width: 980px) { .received { grid-template-columns: 1.1fr 1fr; gap: clamp(48px, 6vw, 96px); } }
.received__obj { position: relative; width: 100%; max-width: 680px; aspect-ratio: 1402 / 1122; animation: rise 1.4s var(--ease-out) both; }
.obj--small { position: absolute; inset: 0; right: auto; bottom: auto; width: 100%; }
.received__txt { animation: rise 1.4s .25s var(--ease-out) both; }
@keyframes rise { from { opacity: 0; transform: translateY(30px); } }
.received__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; }

/* ─────────────── 08 · DIRECT CONTACT ─────────────── */
.direct { padding-top: 40px; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 28px 64px; border-top: 1px solid var(--oat-15); margin-top: 40px; }
.direct__h { margin: 0; font: 400 12px var(--font-mono); letter-spacing: .3em; text-transform: uppercase; color: var(--oat-55); }
.direct__list { display: flex; flex-wrap: wrap; gap: 20px 56px; }
.direct__list li { display: grid; gap: 6px; }
.direct__list span { font: 400 10px var(--font-mono); letter-spacing: .26em; text-transform: uppercase; color: var(--brass-soft); }
.direct__list a { font-size: 1.02rem; color: var(--oat-80); transition: color .3s; }
.direct__list a:hover { color: var(--oat); text-decoration: underline; text-underline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
  .room__haze, .room__beam, .begin span, .blink, .screen__cursor span, .next__arrow, .cpanel, .tray__list li { animation: none; }
  .sysmon::before, .sysmon__st::before, .core__ring, .core__sweep, .core__disc, .sysmon__log li, .sysmon__log li::after, .lane__dot { animation: none !important; }
  .ev, .received__obj, .received__txt { animation: none; }
}