/* Pillar pages. Builds on home.css (stage, story panels, posters). */

/* ---------- Hero ---------- */
.phero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding-top: calc(var(--header-h) + var(--sp-6)); padding-bottom: var(--sp-8); }
.phero__inner { display: grid; gap: var(--sp-4); }
.phero__inner > * { max-width: 560px; }
.phero__lockup { --w: clamp(260px, 26vw, 400px); width: var(--w); height: auto; margin: calc(var(--w) * -0.1) 0 calc(var(--w) * -0.1) calc(var(--w) * -0.12); }
.phero__title { font-size: clamp(2.4rem, 1.7rem + 3vw, 4.25rem); }
.phero .lead { margin-top: var(--sp-2); color: var(--navy-text-muted); }
.phero .breadcrumb { margin-bottom: var(--sp-2); }
.phero .breadcrumb a { color: var(--sky); }
.phero .breadcrumb [aria-current] { color: var(--white); }
.pstage .story__title { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem); color: var(--white); letter-spacing: -0.015em; line-height: 1.1; }
.pstage .story__card .eyebrow { color: var(--sky); }

/* Pillar posters are rendered on the exact page navy, so they need no edge fade. */
.pstage .stage__poster { -webkit-mask-image: none; mask-image: none; }

/* The scene UI: hint, Train, Enter VR. */
.scene-ui { position: absolute; right: var(--margin); bottom: var(--sp-6); display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: var(--sp-3); pointer-events: auto; z-index: 3; }
.scene-hint { margin: 0; padding: 6px 14px; border-radius: var(--radius-capsule); background: var(--scrim); border: 1px solid var(--navy-line); color: var(--navy-text-muted); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.04em; }
.vr-button { position: static !important; }
@media (pointer: coarse) { .scene-hint { display: none; } }

/* Hero-only scenes (Labs, Studio): the canvas takes pointer input. */
.pstage--hero.stage--3d .stage__sticky { pointer-events: none; }
.pstage--hero.stage--3d .stage__viz { pointer-events: auto; }
.pstage--hero.stage--3d .stage__content { pointer-events: none; }
.pstage--hero.stage--3d .phero__inner > * { pointer-events: auto; }
.pstage--hero.stage--3d .phero__inner > .phero__lockup, .pstage--hero.stage--3d .phero__inner > .eyebrow, .pstage--hero.stage--3d .phero__inner > h1, .pstage--hero.stage--3d .phero__inner > .lead { pointer-events: none; }

/* Story scenes on phones: the shape sits in the top half. */
@media (max-width: 899.98px) {
  .pstage--hero .stage__viz { opacity: 0.4; }
  .scene-ui { left: var(--margin); justify-content: flex-start; }
}
@media (min-width: 900px) {
  /* The scene starts where the copy column ends and below the header, so it never runs under
     the headline, the story cards or the navigation; each scene re-frames itself to fit. */
  .pstage { --copy-w: min(540px, 46vw); }
  .pstage .phero__inner > * { max-width: var(--copy-w); }
  .pstage .stage__viz { top: var(--header-h-solid); left: calc(var(--margin) + var(--copy-w) + var(--sp-5)); width: auto; }
  /* Fade the canvas into the navy where it meets the copy, so it never reads as a box. */
  .pstage .stage__viz canvas {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%);
    mask-image: linear-gradient(90deg, transparent 0, #000 16%);
  }
}

/* ---------- Systems hotspots ---------- */
.scene-hotspots { position: absolute; inset: 0; pointer-events: none; }
.stage__viz:not(.is-live) .scene-hotspots { display: none; }
.hotspot {
  position: absolute; left: -18px; top: -18px; width: 36px; height: 36px; padding: 0; border: 0; background: transparent;
  pointer-events: auto; cursor: pointer; opacity: 0.55; transition: opacity var(--dur) var(--ease);
}
.hotspot span { position: absolute; inset: 9px; transform: rotate(45deg); background: var(--sky); box-shadow: 0 0 0 3px var(--navy-line); transition: inset var(--dur) var(--ease), background-color var(--dur) var(--ease); }
.hotspot::after { content: ""; position: absolute; inset: 4px; transform: rotate(45deg); border: 1.5px solid var(--sky); opacity: 0; animation: pulse 2.2s var(--ease) infinite; }
.hotspot.is-current, .hotspot:hover, .hotspot:focus-visible, .hotspot[aria-expanded="true"] { opacity: 1; }
.hotspot.is-current span, .hotspot[aria-expanded="true"] span { inset: 7px; background: var(--white); }
.hotspot.is-current::after { opacity: 1; }
@keyframes pulse { 0% { transform: rotate(45deg) scale(0.6); opacity: 0.9; } 100% { transform: rotate(45deg) scale(1.6); opacity: 0; } }
.hotspot-card {
  position: absolute; left: var(--sp-5); bottom: var(--sp-8); z-index: 4; width: min(340px, calc(100% - 2 * var(--sp-5)));
  display: grid; gap: var(--sp-2); padding: var(--sp-5); border-radius: var(--radius); pointer-events: auto;
  background: var(--white); color: var(--text); box-shadow: -10px 10px 0 0 var(--sky);
}
.hotspot-card h3 { font-size: 1.125rem; color: var(--navy); }
.hotspot-card p:not(.eyebrow) { font-size: var(--fs-small); color: var(--steel); }
.hotspot-card .eyebrow { color: var(--blue); }
.hotspot-card .link-arrow { color: var(--blue); }
.hotspot-card__close { position: absolute; top: 8px; right: 8px; width: 40px; height: 40px; display: grid; place-items: center; border: 0; background: transparent; color: var(--navy); border-radius: 50%; }
.hotspot-card__close:hover { background: var(--cloud); }

/* ---------- Overview ---------- */
.ov { display: grid; gap: var(--sp-7); align-items: start; }
@media (min-width: 960px) { .ov { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.glance { padding: var(--sp-6); border-radius: var(--radius); background: var(--cloud); box-shadow: -10px 10px 0 0 var(--sky); }
.glance h3 { font-size: 1.125rem; margin-bottom: var(--sp-4); }
.glance dl { margin: 0; display: grid; gap: var(--sp-4); }
.glance dt { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--blue); }
.glance dd { margin: 2px 0 0; font-size: var(--fs-small); color: var(--graphite); }
.sub-head { font-family: var(--font-display); font-weight: 800; font-size: 1.375rem; color: var(--heading); margin: var(--sp-8) 0 var(--sp-5); }
.beliefs { display: grid; gap: var(--gutter); grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.beliefs li { display: grid; gap: var(--sp-2); align-content: start; padding-top: var(--sp-4); border-top: 3px solid var(--navy); }
.beliefs__num { font-family: var(--font-display); font-weight: 800; color: var(--blue); font-size: var(--fs-small); }
.beliefs h4 { font-size: 1.125rem; color: var(--navy); }
.beliefs p { color: var(--text-muted); font-size: var(--fs-small); }
.sectors .sub-head { margin-top: var(--sp-7); }

/* ---------- Services + highlight ---------- */
.highlight--wide { margin-top: var(--sp-7); }
.highlight__body { font-family: var(--font-display); font-weight: 700; font-size: clamp(1rem, 0.95rem + 0.4vw, 1.1875rem); line-height: 1.45; flex: 1 1 320px; }

/* ---------- Solutions ---------- */
.solutions { display: grid; gap: var(--sp-6) var(--gutter); grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.solutions li { display: grid; gap: var(--sp-2); align-content: start; padding-top: var(--sp-4); border-top: 2px solid var(--navy); }
.solutions h3 { font-size: 1.1875rem; }
.solutions p { color: var(--text-muted); font-size: var(--fs-small); }

/* ---------- Method ---------- */
.method-steps { margin-bottom: var(--sp-7); }

/* Extra 3D panels (Labs: the vision demo under Solutions, the five stations under How we deliver). */
.lab-scene { height: clamp(300px, 22vw + 150px, 520px); margin-bottom: var(--sp-7); border-radius: var(--radius-lg); background: var(--deep); }
.lab-scene .scene-box__poster { object-fit: cover; }
/* The step the 3D is showing. */
.method-steps .step::before { transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); }
.method-steps .step.is-current::before { background: var(--sky); color: var(--navy); box-shadow: -4px 4px 0 0 var(--navy); transform: scale(1.1); }
.method-steps .step.is-reached::after { background: var(--blue); }
@media (min-width: 1100px) {
  .method-steps[data-steps="5"] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .method-steps[data-steps="6"] { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
.method-grid { display: grid; gap: var(--gutter); align-items: start; margin-bottom: var(--sp-6); }
@media (min-width: 960px) {
  .method-grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, 1.2fr); }
  .method-grid--2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.cards--3 { --card-min: 240px; }
@media (min-width: 960px) { .cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pillar-card--light { min-height: 240px; }
.method-grid .sub-head { margin: 0 0 var(--sp-4); font-size: 1.1875rem; }
.method-stat { display: grid; gap: var(--sp-3); align-content: center; padding: var(--sp-6); border-radius: var(--radius); background: var(--navy); color: var(--navy-text-muted); font-size: var(--fs-small); }
.method-stat__value { font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 1.6rem + 1.5vw, 2.75rem); color: var(--white); line-height: 1; }
.method-receive, .method-tech { padding: var(--sp-6); border-radius: var(--radius); background: var(--white); }
.method-receive .diamond-list { font-size: var(--fs-small); gap: var(--sp-2); }
.commitments { background: var(--white); }

/* ---------- Why ---------- */
.why-list { display: grid; gap: var(--sp-5) var(--gutter); grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.why-list li { display: flex; gap: var(--sp-5); align-items: flex-start; padding: var(--sp-5) 0; border-top: 1px solid var(--line); }
.why-list__num { flex: none; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: var(--cloud); font-family: var(--font-display); font-weight: 800; color: var(--blue); }
.why-list h3 { font-size: 1.1875rem; margin-bottom: var(--sp-1); }
.why-list p { color: var(--text-muted); font-size: var(--fs-small); }

/* ---------- AR ---------- */
.ar-block__inner { display: grid; gap: var(--sp-7); align-items: center; }
@media (min-width: 960px) { .ar-block__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.ar-note { font-size: var(--fs-small); color: var(--navy-text-muted); max-width: 52ch; }
.ar-stage { position: relative; aspect-ratio: 1 / 1; max-height: 620px; width: 100%; border-radius: var(--radius-lg); background: var(--deep); border: 1px solid var(--navy-line); overflow: hidden; display: grid; place-items: center; }
.ar-stage__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ar-stage__open { position: relative; z-index: 1; margin-top: auto; margin-bottom: var(--sp-6); align-self: end; }
.ar-stage model-viewer { width: 100%; height: 100%; --poster-color: transparent; background: var(--deep); }
.ar-stage__ar { position: absolute; left: 50%; bottom: var(--sp-5); transform: translateX(-50%); }

/* ---------- Engage on navy ---------- */
.section--navy .engage-card .link-arrow { margin-top: var(--sp-2); }

.pillars-link { margin-top: var(--sp-6); }