/* Digital Twin route — page sections.
   .twin-static carries the existing .usp-band class, so its dark-band rules in
   site-20260716b.css apply unchanged. This file styles what is specific to the
   /digital-twin route: the intro band's display headline, the programme
   handoff, and the updates grid. Tokens only; no new hex, no new fonts.

   The interactive experience is no longer here — it lives in the structural
   lab (ice-lab.css + src/scripts/lab/), which owns its own band. Everything
   that styled the old scroll-driven canvas stage was removed with it. */

#twin.twin {
  position: relative;
  background: var(--ice-palette-navy-900, #08112d);
}

/* This was the page's h1 and carried a 5.5rem display size to match. The lab
   opens the page now, so this is a section heading following one — still the
   largest thing in its own band, but no longer competing with the headline
   above it. */
.page-digital-twin .twin-static h2 {
  max-width: 16ch;
  margin: 0;
  color: #fff;
  font-family: var(--display);
  font-size: clamp(2rem, 3.6vw, 3.1rem);
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1.02;
}

/* Immersive room: a user-controlled documentary moment between the interactive
   lab and the Digital Twin workflow. The source is genuine 16:9 footage, so
   the player keeps that ratio at every viewport instead of cropping it. */
.page-digital-twin .twin-room {
  scroll-margin-top: 88px;
  padding: clamp(4rem, 9vw, 7rem) 0;
  background: var(--ice-palette-navy-900, #08112d);
  color: var(--ice-palette-navy-50, #f7f8fc);
}

.page-digital-twin .twin-room__intro {
  display: grid;
  gap: 1rem;
  max-width: 52rem;
}

.page-digital-twin .twin-room__intro h2 {
  max-width: 15ch;
  margin: 0;
  color: inherit;
}

.page-digital-twin .twin-room__intro p {
  max-width: 62ch;
  margin: 0;
  color: rgb(247 248 252 / .74);
  font-size: clamp(1rem, 1.4vw, 1.16rem);
  line-height: 1.65;
}

.page-digital-twin .twin-room__media {
  width: min(100%, 60rem);
  margin: clamp(2rem, 5vw, 3.5rem) auto 0;
}

.page-digital-twin .twin-room__media video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid rgb(247 248 252 / .16);
  border-radius: 8px;
  background: var(--ice-palette-navy-950, #040817);
  box-shadow: 0 24px 70px rgb(0 0 0 / .28);
}

.page-digital-twin .twin-room__media figcaption {
  max-width: 60ch;
  margin-top: .85rem;
  color: rgb(247 248 252 / .6);
  font-size: .88rem;
  line-height: 1.55;
}


/* Dedicated-route handoff. The homepage never loads this stylesheet or the WebGL mount. */
.page-digital-twin .twin-page-next {
  padding: clamp(4rem, 9vw, 7rem) 0;
  background: var(--ice-palette-navy-900, #08112d);
  color: var(--ice-palette-navy-50, #f7f8fc);
}

.page-digital-twin .twin-page-next h2 {
  max-width: 18ch;
  margin: 0;
  color: inherit;
}

.page-digital-twin .twin-page-next p {
  max-width: 56ch;
  margin: 1rem 0 0;
  color: rgb(247 248 252 / 0.72);
}

.page-digital-twin .twin-page-next > .wrap > .label {
  margin: 0 0 1rem;
  color: var(--ice-palette-terracotta-400, #e8915a);
}

.page-digital-twin .twin-page-next .twin-page-next__intro {
  max-width: 50ch;
}

.twin-programs {
  display: grid;
  gap: 1px;
  margin-top: clamp(2rem, 5vw, 3.5rem);
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .16);
}

.twin-program {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .45rem 1rem;
  min-height: 112px;
  padding: 1.25rem;
  background: var(--ice-palette-navy-900, #08112d);
  color: #fff;
  text-decoration: none;
}

.twin-program span {
  color: var(--program-accent, #e8915a);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.twin-program strong {
  grid-column: 1;
  max-width: 28ch;
  font-family: var(--display);
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  font-weight: 500;
  line-height: 1.2;
}

.twin-program i {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
  color: var(--program-accent, #e8915a);
  font-size: 1.4rem;
  font-style: normal;
}

.twin-program--civil { --program-accent: #e8915a; }
.twin-program--electronics { --program-accent: #c7e85a; }
.twin-program--computer { --program-accent: #5fa8e8; }

.twin-program:hover {
  background: rgba(255, 255, 255, .055);
}

.page-digital-twin .twin-page-next .twin-page-next__admissions {
  margin-top: clamp(2rem, 5vw, 3rem);
}

.page-digital-twin .twin-page-next .cta-row {
  margin-top: 1.75rem;
}

/* .btn-ghost's site-wide colors assume a light canvas; this band is navy. */
.page-digital-twin .twin-page-next .btn-ghost {
  border-color: rgba(255, 255, 255, .32);
  color: #fff;
}

.page-digital-twin .twin-page-next .btn-ghost:hover {
  background: rgba(255, 255, 255, .08);
  color: #fff;
}

@media (min-width: 800px) {
  .twin-programs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1023px) {
  .page-digital-twin .twin-static {
    padding-top: clamp(7.5rem, 22vw, 10rem);
    padding-bottom: clamp(4rem, 12vw, 6rem);
  }

  .page-digital-twin .twin-static .usp-band__head {
    max-width: 42rem;
  }

  .page-digital-twin .twin-static h1 {
    font-size: clamp(2.65rem, 10.8vw, 4.5rem);
  }

  .page-digital-twin .twin-static .usp-band__head > p:last-child {
    max-width: 34rem;
    margin-top: 1.5rem;
    color: #c4cede;
    font-size: clamp(1.05rem, 4.5vw, 1.25rem);
  }

  .page-digital-twin .usp-flow {
    margin-top: 2.5rem;
  }

  .page-digital-twin .usp-step {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    column-gap: 1rem;
    padding: 1.2rem 1.15rem 1.25rem;
  }

  .page-digital-twin .usp-step__n {
    grid-row: 1 / 3;
    margin: 0;
  }

  .page-digital-twin .usp-step b {
    align-self: end;
    font-size: 1.35rem;
  }

  .page-digital-twin .usp-step small {
    margin-top: .3rem;
    font-size: .96rem;
  }

  .page-digital-twin .twin-why {
    display: grid;
    gap: 1rem;
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, .18);
  }

  .page-digital-twin .twin-why .label {
    margin: 0;
    color: var(--ice-palette-terracotta-400, #e8915a);
  }

  .page-digital-twin .twin-why ul {
    display: grid;
    gap: .75rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .page-digital-twin .twin-why li {
    position: relative;
    padding-left: 1.15rem;
    color: #d8deea;
    line-height: 1.5;
  }

  .page-digital-twin .twin-why li::before {
    content: "";
    position: absolute;
    top: .62em;
    left: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--ice-palette-terracotta-400, #e8915a);
  }
}

@media (min-width: 1024px) {
  .page-digital-twin .twin-why {
    max-width: 56rem;
    margin-top: 2rem;
  }

  .page-digital-twin .twin-why ul {
    display: flex;
    gap: 2rem;
    padding-left: 1.25rem;
  }
}

@media (max-width: 719px) {
  body.page-digital-twin {
    padding-bottom: 0;
  }

  body.page-digital-twin .sticky-cta {
    display: none;
  }

  .page-digital-twin .twin-page-next {
    padding: 4rem 0 4.5rem;
  }

  .page-digital-twin .twin-page-next .cta-row {
    display: grid;
  }

  .page-digital-twin .twin-page-next .btn {
    width: 100%;
  }
}

/* ---- Updates section ---- */
/* Scoped like .twin-page-next so it beats the generic `.band { background:
   var(--band-bg) }` (equal specificity, but site CSS loads after this file via
   the <slot name="head"/>). Without this the band tint flips to a light
   surface in light mode while the card text stays white — the section becomes
   invisible. This is a permanently-dark showcase band in both themes. */
.page-digital-twin .twin-updates {
  background: var(--ice-palette-navy-900, #08112d);
  color: var(--ice-palette-navy-50, #f7f8fc);
}

/* Headings otherwise inherit the theme's dark ink (--ink is dark in light
   mode), which is invisible on this always-dark band. Pin them to the light
   display colour in both themes, like .twin-page-next. */
.page-digital-twin .twin-updates .sec-head h2,
.page-digital-twin .twin-updates .update-card h3 {
  color: var(--ice-palette-navy-50, #f7f8fc);
}

/* Same reason as the headings: `.sec-head .label` resolves to
   --ice-color-text-accent, which is a DARK terracotta in light mode and fails
   contrast on this permanently-navy band. The on-brand accent is the pair the
   design system defines for exactly this surface. */
.page-digital-twin .twin-updates .sec-head .label {
  color: var(--ice-color-text-accent-on-brand);
}

.updates-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin-top: 2.5rem;
}

.update-card {
  padding: 1.75rem;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: all 0.3s ease;
}

.update-card:hover {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .12);
  transform: translateY(-4px);
}

.update-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

.update-card h3 {
  margin: 0;
  color: #fff;
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.2;
}

.update-date {
  flex-shrink: 0;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, .55);
  font-weight: 500;
}

.update-card p {
  margin: 0;
  color: rgba(255, 255, 255, .74);
  font-size: 0.95rem;
  line-height: 1.55;
}

.update-status {
  display: inline-block;
  padding: 0.35rem 0.75rem;
  background: var(--ice-palette-terracotta-400, #e8915a);
  color: var(--ice-palette-navy-900);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 4px;
  align-self: flex-start;
}

@media (min-width: 768px) {
  .updates-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem;
  }
}

@media (min-width: 1024px) {
  .updates-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
  }
}

/* ── "What is a digital twin?" ────────────────────────────────────────
   Added 2026-08-21. The page carried 1,209 words across eight sections and
   not one self-contained block: everything was a step in a workflow, so
   nothing on it answered the page's own title on its own. Two paragraphs,
   set at reading width, directly under the lab. */
.twin-definition__body {
  max-width: 72ch;
}

.twin-definition__body p {
  margin: 0 0 1rem;
  font-size: 1.02rem;
  line-height: 1.7;
  /* --ice-color-text-muted measured 4.74:1 against this band's own surface,
     which clears AA but is the tightest ratio on the page. This is the block
     the page exists to be quoted from, so it gets the body colour. */
  color: var(--ice-color-text);
}

.twin-definition__body p:last-child { margin-bottom: 0; }