/* ForgeInt — subpage layer: parked world, page head, service blocks,
   work expanders, process stations. Loaded AFTER site.css. */

/* ---------- the persistent world, quieter ---------- */
body.subpage #poster {
  width: 38vh; height: 32vh; right: -4vh; top: -3vh;
  opacity: 0.55; filter: blur(3.5px);
}
body.subpage #terrain-poster { display: block; opacity: 0.75; }
body.subpage #current2d { opacity: 0.55; }
/* GL tier: once the live ambient brain loads, drop the static poster stack so
   they never double up (mirrors the homepage's .glq behaviour). */
body.subpage.glq #poster, body.subpage.glq #terrain-poster { display: none; }

/* ---------- reveal motion (homepage language, brought to the subpages) ---------- */
.rev { opacity: 0; transition: opacity 720ms cubic-bezier(0.44,0,0.56,1); will-change: opacity, transform; }
.rev.rin { opacity: 1; }
.svc-page-block.rev, .work-case.rev, .st-block.rev, .spec-line.rev, .faq-item.rev, .page-cta.rev {
  transform: translateY(16px);
  transition: opacity 720ms cubic-bezier(0.44,0,0.56,1), transform 720ms cubic-bezier(0.44,0,0.56,1);
}
.svc-page-block.rev.rin, .work-case.rev.rin, .st-block.rev.rin, .spec-line.rev.rin, .faq-item.rev.rin, .page-cta.rev.rin { transform: none; }
/* mockup panels assemble in with a touch of scale + clip */
.svc-vis.rev {
  transform: translateY(20px) scale(0.985); clip-path: inset(0 0 3% 0 round 12px);
  transition: opacity 820ms cubic-bezier(0.34,0,0.2,1), transform 820ms cubic-bezier(0.34,0,0.2,1), clip-path 900ms cubic-bezier(0.34,0,0.2,1);
}
.svc-vis.rev.rin { transform: none; clip-path: inset(0 0 0 0 round 12px); }
@media (prefers-reduced-motion: reduce) { .rev, .svc-vis.rev { transition: none; } }

/* ---------- page head ---------- */
.page-head { padding: calc(env(safe-area-inset-top, 0px) + 168px) clamp(24px, 4vw, 56px) 96px; }
.page-head .zone-inner { max-width: 1240px; margin: 0 auto; }
.crumb { font: 400 11px/1 var(--font-mono); letter-spacing: 0.06em; color: rgba(244,241,236,0.45); text-transform: lowercase; margin-bottom: 30px; }
.crumb b { color: var(--molten); font-weight: 400; }
.page-title {
  margin: 0; font: 520 clamp(48px, 6.2vw, 92px)/1.08 var(--font-display);
  letter-spacing: -0.01em; color: var(--ink);
  hanging-punctuation: first allow-end last; font-kerning: normal;
}
.page-sub { margin: 26px 0 0; font: 400 17px/1.7 var(--font-sans); color: #B9BEC7; max-width: 460px; }

/* ---------- services blocks ---------- */
.svc-page-block {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 88px);
  align-items: start; padding: 84px 0; border-top: 1px solid rgba(255,255,255,0.09);
  scroll-margin-top: 110px;
}
.svc-page-block:first-of-type { border-top: none; padding-top: 0; }
.svc-k { font: 400 11px/1 var(--font-mono); letter-spacing: 0.08em; color: rgba(244,241,236,0.45); text-transform: lowercase; display: flex; gap: 14px; }
.svc-k b { color: var(--molten); font-weight: 400; }
.svc-h { margin: 22px 0 0; font: 500 clamp(30px, 3vw, 46px)/1.12 var(--font-display); letter-spacing: -0.008em; color: var(--ink); }
.svc-m { margin: 20px 0 0; font: 400 17px/1.7 var(--font-sans); color: #B9BEC7; max-width: 520px; }
.svc-list { margin: 30px 0 0; padding: 0; list-style: none; display: grid; gap: 0; max-width: 520px; }
.svc-list li {
  display: flex; align-items: baseline; gap: 12px; padding: 12px 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  font: 300 14.5px/1.5 var(--font-sans); color: rgba(244,241,236,0.82);
}
.svc-list li::before { content: "▪"; font-size: 8px; color: var(--molten); flex: none; }
.svc-list-h { font: 400 10px/1 var(--font-mono); letter-spacing: 0.1em; color: rgba(244,241,236,0.42); text-transform: lowercase; margin-top: 34px; }
.svc-ctas { display: flex; align-items: center; gap: 14px; margin-top: 34px; flex-wrap: wrap; }

/* live mini-visual: same physical language as the app window */
.svc-vis {
  position: sticky; top: 120px;
  background: var(--elev); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 26px 56px -20px rgba(0,0,0,0.6);
  overflow: hidden;
  background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 20px 20px;
}
.svc-vis-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid rgba(255,255,255,0.08); background: var(--bg-panel); }
.svc-vis-bar .wf-dots span { width: 7px; height: 7px; }
.svc-vis-bar em { font: 400 9.5px/1 var(--font-mono); letter-spacing: 0.14em; color: rgba(244,241,236,0.5); font-style: normal; text-transform: uppercase; }
.svc-vis-bar i { margin-left: auto; width: 5px; height: 5px; border-radius: 999px; background: var(--ink); animation: wfblink 2.4s infinite; }
.svc-vis canvas { display: block; width: 100%; height: 300px; }

/* ---------- work (white editorial) ---------- */
.work-band { background: #F7F5F1; color: #060606; position: relative; z-index: 12; padding: 0 clamp(24px, 4vw, 56px) 14vh; }
.work-band .zone-inner { max-width: 1240px; margin: 0 auto; }
.page-head.inv-head { background: #F7F5F1; position: relative; z-index: 12; padding-bottom: 72px; }
.page-head.inv-head .crumb { color: rgba(6,6,6,0.45); }
.page-head.inv-head .page-title { color: #060606; }
.page-head.inv-head .page-sub { color: rgba(6,6,6,0.6); }
.work-case { border-top: 1px solid rgba(6,6,6,0.14); }
.work-case:last-of-type { border-bottom: 1px solid rgba(6,6,6,0.14); }
.work-row {
  display: grid; grid-template-columns: 200px 64px 1fr 40px; gap: 32px; align-items: baseline;
  width: 100%; padding: 34px 0; background: none; border: none; text-align: left; cursor: pointer;
  transition: padding-left 320ms cubic-bezier(0.44,0,0.56,1);
}
.work-row:hover { padding-left: 18px; }
.work-row:hover .tog { color: var(--molten); }
.work-row:hover .case-title { color: #000; }
.work-row:focus-visible { outline: 2px solid var(--molten); outline-offset: -2px; }
.work-row .case-logo, .work-row .case-year, .work-row .case-title { pointer-events: none; }
.work-row .tog { font: 300 22px/1 var(--font-mono); color: rgba(6,6,6,0.4); justify-self: end; transition: transform 320ms cubic-bezier(0.44,0,0.56,1), color 200ms; }
.work-case.open .tog { transform: rotate(45deg); color: var(--molten); }
.work-detail { max-height: 0; overflow: hidden; transition: max-height 600ms cubic-bezier(0.44,0,0.56,1); }
.work-detail-in { opacity: 0; transform: translateY(10px); transition: opacity 500ms cubic-bezier(0.44,0,0.56,1) 140ms, transform 500ms cubic-bezier(0.44,0,0.56,1) 140ms; }
.work-case.open .work-detail-in { opacity: 1; transform: none; }
.work-detail-in { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 72px); padding: 8px 0 52px; }
.wd-k { font: 400 10px/1 var(--font-mono); letter-spacing: 0.1em; color: rgba(6,6,6,0.42); text-transform: lowercase; margin: 26px 0 8px; }
.wd-k:first-child { margin-top: 0; }
.wd-p { margin: 0; font: 400 15.5px/1.7 var(--font-sans); color: rgba(6,6,6,0.78); max-width: 560px; }
.wd-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 8px; }
.wd-metric .n { font: 500 clamp(30px, 2.8vw, 44px)/1 var(--font-display); letter-spacing: -0.01em; color: #060606; font-variant-numeric: tabular-nums; }
.wd-metric .n sub { font-size: 0.42em; vertical-align: baseline; color: rgba(6,6,6,0.55); }
.wd-metric .c { font: 400 9.5px/1.5 var(--font-mono); letter-spacing: 0.12em; color: rgba(6,6,6,0.5); text-transform: uppercase; margin-top: 8px; }
/* mini workflow snippet — dark chip on the white band */
.wd-flow {
  background: var(--elev); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 26px 56px -24px rgba(0,0,0,0.45);
  padding: 18px; display: flex; flex-direction: column; gap: 12px; align-self: start;
  background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px); background-size: 18px 18px;
}
.wd-node { background: #101010; border: 1px solid rgba(255,255,255,0.14); border-radius: 6px; padding: 10px 13px; position: relative; }
.wd-node + .wd-node::before { content: ""; position: absolute; top: -13px; left: 50%; height: 13px; border-left: 1px dashed rgba(255,255,255,0.3); }
.wd-node .k { font: 400 9.5px/1 var(--font-mono); letter-spacing: 0.14em; color: rgba(244,241,236,0.45); text-transform: uppercase; }
.wd-node .t { font: 400 13.5px/1.35 var(--font-sans); color: var(--ink); margin-top: 5px; }

/* ---------- process stations ---------- */
.st-block {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 88px);
  padding: 84px 0; border-top: 1px solid rgba(255,255,255,0.09); scroll-margin-top: 110px;
}
.st-block::before {
  content: attr(data-num); position: absolute; top: 44px; right: -0.02em; z-index: -1;
  font: 300 clamp(90px, 11vw, 170px)/0.8 var(--font-display); letter-spacing: -0.04em;
  color: rgba(244,241,236,0.045); pointer-events: none;
}
.st-block:first-of-type::before { top: -24px; }
.st-block:first-of-type { border-top: none; padding-top: 0; }
.st-k { font: 400 11px/1 var(--font-mono); letter-spacing: 0.08em; color: rgba(244,241,236,0.5); text-transform: lowercase; }
.st-k::first-letter { color: #FF8A4C; }
.st-h { margin: 20px 0 0; font: 500 clamp(30px, 3vw, 46px)/1.12 var(--font-display); letter-spacing: -0.008em; color: var(--ink); }
.st-p { margin: 20px 0 0; font: 400 17px/1.7 var(--font-sans); color: #B9BEC7; max-width: 520px; }
.st-meta { display: grid; gap: 0; align-self: start; border-top: 1px solid rgba(255,255,255,0.09); }
.st-meta > div { display: grid; grid-template-columns: 130px 1fr; gap: 18px; padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,0.09); }
.st-meta .k { font: 400 10px/1.6 var(--font-mono); letter-spacing: 0.16em; color: rgba(244,241,236,0.42); text-transform: uppercase; }
.st-meta .v { font: 300 14.5px/1.6 var(--font-sans); color: rgba(244,241,236,0.85); margin: 0; }

/* ---------- shared page scaffolding ---------- */
.page-zone { padding: 0 clamp(24px, 4vw, 56px) 15vh; }
.page-zone .zone-inner { max-width: 1240px; margin: 0 auto; }
.subpage .final-cta { min-height: auto; padding-top: 6vh; }

/* ---------- mobile parity ---------- */
@media (max-width: 900px) {
  .svc-page-block, .st-block, .work-detail-in { grid-template-columns: 1fr; gap: 32px; }
  .svc-vis { position: static; }
}
@media (max-width: 720px) {
  .page-head { padding: calc(env(safe-area-inset-top, 0px) + 128px) 20px 56px; }
  .page-zone { padding: 0 20px 88px; }
  .page-head.inv-head { padding-bottom: 48px; }
  .work-band { padding: 0 20px 88px; }
  .svc-page-block, .st-block { padding: 56px 0; }
  .work-row { grid-template-columns: 1fr 32px; gap: 8px; }
  .work-row .case-year { display: none; }
  .work-row .case-main { grid-column: 1; }
  .work-row .tog { grid-row: 1; grid-column: 2; }
  .wd-metrics { grid-template-columns: 1fr 1fr; }
  .svc-vis canvas { height: 240px; }
  body.subpage #poster { width: 30vh; height: 24vh; right: -8vh; top: -2vh; }
}
@media (prefers-reduced-motion: reduce) {
  .work-detail { transition: none; }
  .work-detail-in { opacity: 1; transform: none; transition: none; }
}

/* ============ FUSION PASS 3 — glass on subpage panels ============ */
.svc-vis {
  border-radius: 20px;
  background-color: rgba(12,12,15,0.66);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 26px 56px -20px rgba(0,0,0,0.6), 0 30px 80px -30px rgba(255,90,30,0.1);
}
.wd-flow { border-radius: 20px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 26px 56px -24px rgba(0,0,0,0.4), 0 26px 70px -30px rgba(255,90,30,0.08); }
.wd-node { border-radius: 10px; background: rgba(18,18,21,0.9); }
@media (max-width: 720px) {
  .svc-vis { backdrop-filter: none; -webkit-backdrop-filter: none; background-color: #0B0B0D; }
}