/* /deep-tech-project/: a walkthrough of how an invention moves from lab to market.
 * Builds on site.css tokens. Every section carries its own device: the route, the
 * loop, the branch, the strata, the anatomy, the form.
 *
 * Motion contract: text is never hidden. Initial states sit behind html.js, which
 * motion-net.js adds and takes away again if the page script has not started
 * within 2.5 s. Each animated group gets .is-in when its animation finishes. */

:root {
  --dots-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Crect width='1.5' height='1.5' fill='%231d1e22' fill-opacity='0.12'/%3E%3C/svg%3E");
  --dots-blue: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Crect width='1.5' height='1.5' fill='%23173dff' fill-opacity='0.2'/%3E%3C/svg%3E");
  --field-line: rgba(29, 30, 34, 0.24);
  --section-gap: clamp(96px, 14vh, 168px);
}

.dtp {
  max-width: 1440px;
  margin: 0 auto;
  padding: 22px var(--gutter) calc(24px + var(--consent-h));
}
.dtp .masthead { align-items: center; }
.dtp .eyebrow { font-size: 12px; }
.crumbs { margin-right: auto; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; font: 500 12px/1.4 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--muted); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--accent); }
.crumbs [aria-current] { color: var(--ink); }

/* ---------- Hero ---------- */

.hero { padding: clamp(40px, 9vh, 112px) 0 0; }
.hero h1 {
  margin: 18px 0 0;
  font-size: clamp(46px, 7.4vw, 120px);
  line-height: 0.9;
  letter-spacing: -0.07em;
  font-weight: 750;
}
.hero h1 .hl { display: block; }
.hero-foot {
  display: grid;
  grid-template-columns: minmax(0, 50ch) auto;
  justify-content: space-between;
  align-items: end;
  gap: 24px 48px;
  margin-top: clamp(24px, 4vh, 40px);
}
.lede { margin: 0; font-size: clamp(17px, 1.3vw, 20px); line-height: 1.5; color: var(--ink-2); }
.button {
  display: inline-block; padding: 15px 22px;
  background: var(--ink); color: var(--paper);
  font-weight: 650; font-size: 15px; text-decoration: none; white-space: nowrap;
  transition: background-color 0.25s var(--ease);
}
.button:hover { background: var(--accent); }

/* The route: lab, the operating layer, market. */
.route { margin: clamp(56px, 9vh, 100px) 0 0; }
.route-row {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(32px, 1fr) minmax(250px, 31%) minmax(32px, 1fr) auto;
  align-items: center;
  padding-bottom: 66px;
}
.route-end { position: relative; display: flex; align-items: center; }
.route-dot { display: block; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--ink); background: var(--paper); }
.route-end--market .route-dot { border-color: var(--accent); background: var(--accent); }
.route-label { position: absolute; top: calc(100% + 16px); left: 0; display: grid; gap: 4px; white-space: nowrap; }
.route-end--market .route-label { left: auto; right: 0; text-align: right; }
.route-label b { font-size: clamp(22px, 2vw, 30px); line-height: 1; letter-spacing: -0.045em; font-weight: 750; }
.route-label span { font: 500 12px/1.3 var(--mono); letter-spacing: 0.04em; color: var(--muted); }
.route-seg { height: 2px; margin: 0 12px; background: var(--ink); transform-origin: left center; }
.route-seg--out { background: var(--accent); }
.route-layer {
  display: grid; gap: 12px;
  padding: 18px 20px 16px;
  border: 1px solid var(--accent-line);
  background: var(--accent-wash) var(--dots-blue);
  background-size: auto, 18px 18px;
}
.route-layer-name { font-weight: 750; font-size: clamp(19px, 1.6vw, 24px); letter-spacing: -0.035em; line-height: 1; }
.route-ticks { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 4px; }
.route-ticks i { display: block; height: 9px; background: var(--accent); transform-origin: center bottom; }
.route-layer-note { font: 500 12px/1.2 var(--mono); letter-spacing: 0.02em; color: var(--accent); }
.route-runner {
  display: none;
  position: absolute; left: 0; top: calc(50% - 33px); z-index: 2;
  width: 10px; height: 10px; margin: -5px 0 0 3px; border-radius: 50%;
  background: var(--accent);
  pointer-events: none;
}
.js .route-runner { display: block; }
.route figcaption { max-width: 60ch; margin: 18px 0 0; font-size: clamp(16px, 1.15vw, 18px); line-height: 1.5; color: var(--ink-2); }

/* What is inside: an index to the walkthrough below. */
.spec {
  list-style: none; margin: clamp(48px, 8vh, 88px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line);
}
.spec li { border-right: 1px solid var(--line); }
.spec li:last-child { border-right: 0; }
.spec a { text-decoration: none; }
.spec a, .spec li:last-child { display: flex; align-items: baseline; gap: 12px; padding: 16px 18px 4px; }
.spec li:first-child a { padding-left: 0; }
.spec-n { font: 500 clamp(28px, 2.6vw, 40px)/1 var(--mono); color: var(--accent); letter-spacing: -0.04em; }
.spec-l { font-size: 15px; font-weight: 600; color: var(--ink-2); }
.spec a:hover .spec-l { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Section heads ---------- */

.sec-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 46ch);
  align-items: end;
  gap: 16px clamp(24px, 4vw, 72px);
}
.sec-head h2, .contact h2 {
  margin: 0;
  font-size: clamp(34px, 4.3vw, 66px);
  line-height: 0.96;
  letter-spacing: -0.045em;
  font-weight: 750;
  text-wrap: balance;
}
.sec-head p, .contact-intro > p { margin: 0; font-size: clamp(16px, 1.15vw, 18px); line-height: 1.5; color: var(--ink-2); }

/* ---------- The loop ---------- */

.loop {
  margin-top: var(--section-gap);
  padding: clamp(24px, 4vw, 56px);
  border: 1px solid var(--accent-line);
  background: var(--accent-wash) var(--dots-blue);
  background-size: auto, 18px 18px;
}
.loop-body {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: clamp(28px, 5vw, 80px);
  margin-top: clamp(32px, 5vh, 56px);
}
.loop-figure { position: relative; width: 100%; max-width: 560px; justify-self: center; }
.loop-svg { display: block; width: 100%; height: auto; overflow: visible; }
.loop-track { fill: none; stroke: rgba(23, 61, 255, 0.24); stroke-width: 2; }
.loop-progress { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; }
.loop-node circle { fill: var(--paper); stroke: var(--accent); stroke-width: 1.5; transition: fill 0.35s var(--ease); }
.loop-node text { font: 500 13px var(--mono); fill: var(--accent); text-anchor: middle; dominant-baseline: central; transition: fill 0.35s var(--ease); }
.loop-node.is-active circle { fill: var(--accent); }
.loop-node.is-active text { fill: var(--paper); }
.loop-marker { transform-box: view-box; transform-origin: 200px 200px; }
.loop-marker circle { fill: var(--ink); }
.loop-now {
  position: absolute; inset: 0; margin: 0; padding: 0 24%;
  display: grid; place-content: center; text-align: center;
  pointer-events: none;
}
.loop-now-no { font: 500 13px/1 var(--mono); letter-spacing: 0.1em; color: var(--accent); }
.loop-now-name { margin-top: 10px; font-weight: 750; font-size: clamp(18px, 1.9vw, 27px); line-height: 1.08; letter-spacing: -0.035em; text-wrap: balance; }

.steps { list-style: none; margin: 0; padding: 0; }
.step {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: baseline;
  padding: 11px 12px;
  border-top: 1px solid rgba(23, 61, 255, 0.18);
  font-size: 17px; font-weight: 600; letter-spacing: -0.015em; color: var(--ink-2);
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease), padding 0.3s var(--ease);
}
.step:last-child { border-bottom: 1px solid rgba(23, 61, 255, 0.18); }
.step-no { font: 500 12px/1 var(--mono); color: var(--accent); }
.step.is-active { background: var(--paper); color: var(--ink); padding-left: 18px; }

/* ---------- Consoles: one record branching to three roles ---------- */

.consoles { margin-top: var(--section-gap); }
.branch { margin-top: clamp(36px, 6vh, 64px); }
.branch-root {
  width: max-content; margin: 0 auto; padding: 12px 18px;
  border: 1.5px solid var(--ink); background: var(--paper);
  font: 500 12px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase;
}
.branch-lines { display: block; width: 100%; height: auto; overflow: visible; }
.branch-lines path { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.leaves { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.leaf { position: relative; padding: 26px clamp(12px, 2vw, 32px) 0; text-align: center; }
.leaf::before {
  content: ""; position: absolute; top: -6px; left: 50%;
  width: 12px; height: 12px; margin-left: -6px; border-radius: 50%;
  background: var(--accent);
}
.leaf-tag { margin: 0 0 10px; font: 500 12px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.leaf h3 { margin: 0 0 12px; font-size: clamp(22px, 2.1vw, 31px); line-height: 1.04; letter-spacing: -0.045em; font-weight: 750; text-wrap: balance; }
.leaf p:last-child { max-width: 30ch; margin: 0 auto; font-size: 16px; line-height: 1.5; color: var(--ink-2); }

/* ---------- Data lakes: strata, denser dots the deeper the lake ---------- */

.lakes { margin-top: var(--section-gap); }
.strata { list-style: none; margin: clamp(36px, 6vh, 56px) 0 0; padding: 0; display: grid; }
.stratum {
  display: grid;
  grid-template-columns: minmax(150px, 0.7fr) minmax(0, 1.6fr) minmax(0, 1fr);
  align-items: baseline;
  gap: 12px clamp(20px, 3vw, 40px);
  padding: clamp(22px, 3vw, 36px) clamp(18px, 2.4vw, 32px);
  border: 1px solid var(--line);
  background: var(--panel) var(--dots-ink);
}
.stratum + .stratum { border-top: 0; }
.stratum--tech { background-size: auto, 18px 18px; margin-right: 8%; }
.stratum--biz { background-size: auto, 12px 12px; margin: 0 4%; }
.stratum--ops { background-size: auto, 8px 8px; margin-left: 8%; }
.stratum h3 { margin: 0; font-size: clamp(26px, 2.7vw, 42px); line-height: 1; letter-spacing: -0.055em; font-weight: 750; }
.stratum-items { margin: 0; font-size: 17px; line-height: 1.5; color: var(--ink); }
.stratum-what { margin: 0; font: 500 13px/1.5 var(--mono); color: var(--accent); }

/* ---------- Catalog: one entry, three callouts ---------- */

.catalog { margin-top: var(--section-gap); }
.anatomy {
  margin: clamp(40px, 7vh, 72px) 0 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr);
  grid-template-areas: "tech entry biz" "ops entry biz";
  align-items: center;
  gap: 36px 0;
}
.anatomy-entry { grid-area: entry; position: relative; padding: 0 14px 14px 0; }
.anatomy-entry::before {
  content: ""; position: absolute; inset: 14px 0 0 14px;
  border: 1px solid var(--line);
  background: var(--panel) var(--dots-ink);
  background-size: auto, 12px 12px;
}
.anatomy-card { position: relative; padding: clamp(28px, 3vw, 44px); border: 1.5px solid var(--ink); background: var(--paper); }
.anatomy-kicker { margin: 0; font: 500 12px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.anatomy-name { margin: 14px 0 0; font-weight: 750; font-size: clamp(26px, 2.8vw, 42px); line-height: 1.02; letter-spacing: -0.045em; text-wrap: balance; }
.callout { position: relative; padding: 0 64px; }
.callout--tech { grid-area: tech; text-align: right; }
.callout--ops { grid-area: ops; text-align: right; }
.callout--biz { grid-area: biz; }
.callout-line { position: absolute; top: 0.62em; width: 52px; height: 2px; background: var(--accent); font-size: 20px; }
.callout--tech .callout-line, .callout--ops .callout-line { right: 0; transform-origin: right center; }
.callout--biz .callout-line { left: 0; transform-origin: left center; }
.callout-line::after { content: ""; position: absolute; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.callout--tech .callout-line::after, .callout--ops .callout-line::after { right: -4px; }
.callout--biz .callout-line::after { left: -4px; }
.callout h3 { margin: 0 0 6px; font-size: 20px; line-height: 1.24; letter-spacing: -0.02em; font-weight: 750; }
.callout p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--ink-2); }

/* ---------- Contact ---------- */

.contact {
  margin-top: var(--section-gap);
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(32px, 5vw, 80px);
  padding: clamp(24px, 4vw, 56px);
  border: 1px solid var(--line);
  background: var(--panel) var(--dots-ink);
  background-size: auto, 18px 18px;
}
.contact:focus { outline: none; }
.contact-intro > p { margin-top: 18px; max-width: 42ch; }
.outcomes { margin-top: clamp(32px, 5vh, 48px); }
.outcomes-label { margin: 0 0 10px; font: 500 12px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.outcomes ul { list-style: none; margin: 0; padding: 0; }
.outcomes li {
  display: flex; align-items: baseline; gap: 12px;
  padding: 12px 0; border-top: 1px solid var(--line);
  font-size: 18px; font-weight: 650; letter-spacing: -0.02em;
}
.outcomes li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); transform: translateY(-1px); }

.contact-form {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px;
  align-content: start;
  padding: clamp(20px, 3vw, 36px);
  border: 1px solid var(--line);
  background: var(--paper);
}
.field { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.field:nth-of-type(n + 3), .roles, .form-actions, .form-note { grid-column: 1 / -1; }
.field > label, .field > legend {
  padding: 0;
  font: 500 12px/1.3 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2);
}
.opt { margin-left: 6px; text-transform: none; letter-spacing: 0.02em; color: var(--muted); }
.field input[type="text"], .field input[type="email"], .field textarea {
  width: 100%; padding: 12px 13px;
  font: 16px/1.4 var(--sans); color: var(--ink);
  background: #fafafc; border: 1px solid var(--field-line); border-radius: 0;
}
.field textarea { resize: vertical; min-height: 112px; }
.field input:focus, .field textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; background: var(--paper); }
.field [aria-invalid="true"] { border-color: #b42318; }
.role-options { display: flex; flex-wrap: wrap; gap: 8px; }
.role { position: relative; }
.role input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.role span {
  display: inline-block; padding: 9px 13px;
  border: 1px solid var(--field-line); background: var(--paper);
  font-size: 14px; font-weight: 600;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.role:hover span { border-color: var(--ink); }
.role input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.role input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 4px; }
.form-actions button {
  padding: 15px 24px; border: 0; cursor: pointer;
  background: var(--ink); color: var(--paper);
  font-weight: 650; font-size: 15px;
  transition: background-color 0.25s var(--ease);
}
.form-actions button:hover { background: var(--accent); }
.form-actions button:disabled { opacity: 0.6; cursor: progress; }
.form-status { margin: 0; min-height: 1.4em; font-size: 14px; color: var(--ink-2); }
.form-status.is-error { color: #b42318; }
.form-status.is-ok { color: #0d6b4f; font-weight: 600; }
.form-note { margin: 0; font-size: 13px; color: var(--muted); }
.form-note a { color: var(--accent); }

.dtp .footer { margin-top: clamp(64px, 10vh, 120px); padding-top: 16px; border-top: 1px solid var(--line); }

/* ---------- Motion initial states (only while html.js is set) ---------- */

.js .hero:not(.is-in) [data-rise] { transform: translateY(18px); }
.js .route:not(.is-in) .route-seg { transform: scaleX(0); }
.js .route:not(.is-in) .route-ticks i { transform: scaleY(0.2); }
.js .route:not(.is-in) .route-end--market .route-dot { transform: scale(0.4); }
.js .branch:not(.is-in) .leaf { transform: translateY(16px); }
.js .strata:not(.is-in) .stratum--tech, .js .strata:not(.is-in) .stratum--ops { transform: translateX(-28px); }
.js .strata:not(.is-in) .stratum--biz { transform: translateX(28px); }
.js .anatomy:not(.is-in) .callout-line { transform: scaleX(0); }
.js .anatomy:not(.is-in) .anatomy-card { transform: translate(-8px, -8px); }

/* ---------- Mid widths ---------- */

@media (max-width: 1099px) {
  .loop-body { grid-template-columns: minmax(0, 1fr); }
  .loop-figure { max-width: 460px; }
  .anatomy { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); grid-template-areas: "entry tech" "entry biz" "entry ops"; gap: 28px 0; }
  .callout--tech, .callout--ops { text-align: left; }
  .callout { padding: 0 0 0 64px; }
  .callout--tech .callout-line, .callout--ops .callout-line { right: auto; left: 0; transform-origin: left center; }
  .callout--tech .callout-line::after, .callout--ops .callout-line::after { right: auto; left: -4px; }
}

/* ---------- Narrow screens ---------- */

@media (max-width: 899px) {
  .dtp .masthead { flex-direction: column; align-items: flex-start; gap: 8px; }
  .crumbs { margin-right: 0; }
  .hero h1 { text-wrap: balance; }
  .hero h1 .hl { display: inline; }
  .hero-foot { grid-template-columns: minmax(0, 1fr); }
  .button { justify-self: start; }
  .sec-head { grid-template-columns: minmax(0, 1fr); }

  /* The route turns vertical. */
  .route-row { grid-template-columns: 16px minmax(0, 1fr); grid-template-rows: auto 40px auto 40px auto; column-gap: 18px; padding-bottom: 0; align-items: start; }
  .route-end { grid-column: 1 / -1; }
  .route-label { position: static; margin-left: 18px; }
  .route-end--market .route-label { text-align: left; }
  .route-seg { grid-column: 1; width: 2px; height: 100%; margin: 6px 0 6px 7px; transform-origin: center top; }
  .route-layer { grid-column: 1 / -1; margin-left: 34px; }
  .route-runner { top: 8px; margin: -5px 0 0 3px; }
  .js .route:not(.is-in) .route-seg { transform: scaleY(0); }

  .spec { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spec li:nth-child(2) { border-right: 0; }
  .spec li:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .spec li:nth-child(3) a { padding-left: 0; }

  .leaves { grid-template-columns: minmax(0, 1fr); margin-left: 6px; border-left: 2px solid var(--ink); }
  .branch-root { margin: 0; }
  .branch-lines { display: none; }
  .leaf { text-align: left; padding: 24px 0 8px 24px; }
  .leaf::before { left: -7px; top: 30px; margin-left: 0; }
  .leaf p:last-child { margin: 0; }

  .stratum { grid-template-columns: minmax(0, 1fr); margin: 0 !important; }
  .js .strata:not(.is-in) .stratum--tech, .js .strata:not(.is-in) .stratum--ops, .js .strata:not(.is-in) .stratum--biz { transform: translateX(-16px); }

  .anatomy { grid-template-columns: minmax(0, 1fr); grid-template-areas: "entry" "tech" "biz" "ops"; gap: 24px; }
  .callout { padding-left: 40px; }
  .callout-line { width: 28px; }

  .contact { grid-template-columns: minmax(0, 1fr); }
  .contact-form { grid-template-columns: minmax(0, 1fr); }
  .field:nth-of-type(n) { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
  .loop-node text { font-size: 15px; }
}

@media (max-width: 480px) {
  .spec { grid-template-columns: minmax(0, 1fr); }
  .spec li { border-right: 0 !important; }
  .spec li + li { border-top: 1px solid var(--line); }
  .spec a, .spec li:last-child { padding-left: 0; }
  .route-layer { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .route-runner { display: none !important; }
}