/* Inner pages. Shares every token and component with base.css. */

/* ---------- page hero ---------- */
.phero { padding: clamp(40px, 6vw, 84px) 0 clamp(32px, 4vw, 56px); border-bottom: 1px solid var(--rule); }
.phero__inner { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 72px); align-items: end; }
.phero h1 { max-width: 16ch; }
.phero__copy { display: flex; flex-direction: column; gap: 18px; }
.phero__aside { display: flex; flex-direction: column; gap: 14px; padding-bottom: 4px; }
.phero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }

/* Breadcrumb: the only place a mono label leads, because it is navigation, not decoration. */
.crumb { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; }
.crumb a { color: var(--ink-3); transition: color 0.3s; }
.crumb a:hover { color: var(--ink); }
.crumb span { color: var(--ink-3); }

/* ---------- generic two-column section ---------- */
.split { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.5fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.split__head { display: flex; flex-direction: column; gap: 14px; position: sticky; top: calc(var(--nav-total) + 24px); }
.split__head h2 { max-width: 16ch; }
.split__body { display: flex; flex-direction: column; gap: clamp(20px, 3vw, 32px); }

/* ---------- numbered stages (used on service pages) ---------- */
.stages { display: flex; flex-direction: column; border-top: 1px solid var(--rule); }
.stage { display: grid; grid-template-columns: minmax(96px, 0.5fr) 2.4fr; gap: clamp(16px, 3vw, 40px); padding: clamp(20px, 2.6vw, 30px) 0; border-bottom: 1px solid var(--rule); }
.stage__n { font-family: var(--display); font-size: 1.5rem; color: var(--ink-3); line-height: 1; }
.stage__v { display: flex; flex-direction: column; gap: 6px; }
.stage__v p { color: var(--ink-2); font-size: 0.9375rem; max-width: 62ch; }

/* ---------- feature list with a rule per item ---------- */
.feats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 56px); }
.feat { padding: clamp(18px, 2.4vw, 26px) 0; border-top: 1px solid var(--rule); display: flex; flex-direction: column; gap: 6px; }
.feat p { color: var(--ink-2); font-size: 0.9375rem; }

/* ---------- viewer (InfraTwin page) ---------- */
.viewer { border: 1px solid var(--rule); background: var(--surface); }
.viewer__tabs { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--rule); }
.viewer__tabs button {
  display: inline-flex; align-items: center; gap: 9px; padding: 14px clamp(14px, 2vw, 24px);
  font-size: 0.875rem; font-weight: 500; color: var(--ink-3); transition: color 0.3s; white-space: nowrap;
}
.viewer__tabs button i { width: 7px; height: 7px; border-radius: 50%; border: 1px solid currentColor; transition: background-color 0.35s, border-color 0.35s, transform 0.45s var(--spring); }
.viewer__tabs button[aria-pressed="true"] { color: var(--ink); }
.viewer__tabs button[aria-pressed="true"] i { background: var(--action); border-color: var(--action); transform: scale(1.2); }
.viewer__tabs button:hover { color: var(--ink); }
.viewer__hint { margin-left: auto; align-self: center; padding: 14px clamp(14px, 2vw, 24px); }
.viewer__stage { position: relative; aspect-ratio: 16 / 9; }
.twin-canvas { width: 100%; height: 100%; cursor: grab; }
.twin-canvas:active { cursor: grabbing; }

/* ---------- team ---------- */
.team { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 36px) clamp(20px, 3vw, 40px); }
.member { display: flex; flex-direction: column; gap: 12px; }
.member__photo {
  width: 100%; aspect-ratio: 1; background: var(--wash); border: 1px solid var(--rule);
  position: relative; overflow: hidden; display: grid; place-items: center;
}
.member__photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: filter 0.5s var(--ease), transform 0.7s var(--ease); }
.member:hover .member__photo img { filter: grayscale(0); transform: scale(1.03); }
.member__photo::before { content: attr(data-initials); font-family: var(--display); font-size: 1.6rem; color: var(--ink-3); }
.member__photo img { position: absolute; inset: 0; }
.member__name { font-family: var(--display); font-size: 1.15rem; letter-spacing: -0.025em; }
.member__role { font-size: 0.9375rem; color: var(--ink-2); }
.member__aff { font-size: 0.875rem; color: var(--ink-3); }
.member__link { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8125rem; font-weight: 500; color: var(--ink-3); margin-top: 2px; transition: color 0.3s; width: fit-content; }
.member__link:hover { color: var(--action); }
.member__link svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.7; transition: transform 0.4s var(--spring); }
.member__link:hover svg { transform: translateX(3px); }

/* ---------- form ---------- */
.form { display: flex; flex-direction: column; gap: 20px; max-width: 560px; }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field > label { font-size: 0.875rem; font-weight: 500; color: var(--ink-2); }
.field > label em { font-style: normal; color: var(--ink-3); font-weight: 400; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: 12px 14px; font: inherit; font-size: 0.9375rem;
  color: var(--ink); background: var(--surface); border: 1px solid var(--rule-2); border-radius: 0;
  outline: none; appearance: none; -webkit-appearance: none;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.field textarea { min-height: 128px; resize: vertical; line-height: 1.5; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--ink); box-shadow: inset 0 -2px 0 var(--ink); }
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-color: var(--action); box-shadow: inset 0 -2px 0 var(--action); }
.field__err { display: none; font-size: 0.8125rem; color: var(--action); }
.field.is-invalid .field__err { display: block; }
.field__sel { position: relative; }
.field__sel::after { content: ""; position: absolute; right: 16px; top: 50%; width: 7px; height: 7px; border-right: 1px solid var(--ink-2); border-bottom: 1px solid var(--ink-2); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.form__note { font-size: 0.875rem; color: var(--ink-3); }
.form__ok { padding: 16px 18px; border-left: 2px solid var(--action); background: var(--wash); }
.form__ok[hidden] { display: none; }

/* ---------- contact details ---------- */
.detail { display: flex; flex-direction: column; gap: 4px; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.detail:first-child { border-top: 1px solid var(--rule); }
.detail a { font-family: var(--display); font-size: 1.15rem; letter-spacing: -0.025em; transition: color 0.3s; width: fit-content; }
.detail a:hover { color: var(--action); }
.detail span:not(.label) { font-family: var(--display); font-size: 1.15rem; letter-spacing: -0.025em; }

/* ---------- responsive ---------- */
@media (max-width: 1020px) {
  .phero__inner { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .phero h1 { max-width: 20ch; }
  .split { grid-template-columns: minmax(0, 1fr); }
  .split__head { position: static; }
  .team { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .feats { grid-template-columns: minmax(0, 1fr); }
  .stage { grid-template-columns: 1fr; gap: 6px; }
  .form__row { grid-template-columns: minmax(0, 1fr); }
  .team { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; }
}

/* The twin only zooms with a modifier held, so a plain scroll over it says why once. */
.viewer__zoomhint {
  position: absolute; inset: auto 0 0 0;
  display: flex; align-items: center; justify-content: center; gap: 0.5ch;
  padding: 13px; margin: 0; max-width: none;
  font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--white); background: color-mix(in srgb, var(--ink) 80%, transparent);
  backdrop-filter: blur(6px);
  opacity: 0; transform: translateY(100%);
  transition: opacity 0.35s var(--ease), transform 0.45s var(--ease);
  pointer-events: none;
}
.viewer__zoomhint b { font-weight: 500; border: 1px solid currentColor; border-radius: 3px; padding: 1px 6px; margin: 0 0.15ch; }
.viewer__zoomhint.is-on { opacity: 1; transform: none; }