/* ============================================================
   Rose IT Ltd — RMG Industry page (rmg-industry.html)
   Loaded after styles.css. The site header, footer, nav toggle and
   scroll hairline come from styles.css; everything here is prefixed
   rmg- so it cannot collide with the shared sheet. Hidden initial
   states are gated on html.rmg-js (set by rmg/industry.js), so the
   copy renders fully if that script never runs.
   ============================================================ */

/* The 3D stage sits behind everything and never scrolls. */
#rmg-stage { position: fixed; inset: 0; z-index: 0; background: var(--ink); }
#rmg-stage canvas { display: block; width: 100%; height: 100%; }
.rmg-vignette { position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(12, 26, 53, 0.55) 100%); }

/* Site header over the scene: fixed (not sticky) so the scroll track starts
   at the top of the document, and transparent until the page has scrolled. */
body.rmg-page header.nav { position: fixed; left: 0; right: 0; }
body.rmg-page header.nav:not(.scrolled) { background: transparent; border-bottom-color: transparent;
  backdrop-filter: none; -webkit-backdrop-filter: none; }
body.rmg-page footer.foot { position: relative; z-index: 2; background: rgba(12, 26, 53, 0.92); }

/* Order tracker: only shown once the controller is running. */
.rmg-hud { display: none; position: fixed; right: var(--gutter); bottom: 28px; z-index: 5; width: 300px; max-width: calc(100vw - 2 * var(--gutter));
  border: 1px solid var(--rule); background: rgba(12, 26, 53, 0.62); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  padding: 14px 16px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--steel-bright);
  font-weight: 400; transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out); }
html.rmg-js .rmg-hud { display: block; }
html.rmg-js body.rmg-no3d .rmg-hud { display: none; }
/* Hidden once the order is complete (closing beat), at the footer, and when there is no 3D layer to track. */
body.at-closing .rmg-hud, body.at-footer .rmg-hud, body.rmg-no3d .rmg-hud { opacity: 0; pointer-events: none; transform: translateY(12px); }
.rmg-hud .row { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.rmg-hud .row strong { color: var(--paper); font-weight: 500; }
.rmg-hud .bar { height: 2px; background: var(--rule); position: relative; overflow: hidden; margin: 10px 0 12px; }
.rmg-hud .bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0%; background: linear-gradient(90deg, var(--brass-deep), var(--brass-bright)); }
.rmg-hud .stages { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.rmg-hud .stages span { height: 3px; background: var(--rule); border-radius: 2px; transition: background 0.4s var(--ease-out); }
.rmg-hud .stages span.done { background: var(--brass); }
.rmg-hud .stages span.live { background: var(--brass-bright); box-shadow: 0 0 10px rgba(214, 176, 116, 0.6); }
.rmg-hud .counts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--rule); }
.rmg-hud .counts b { display: block; font-family: var(--serif); font-size: 20px; font-weight: 400; letter-spacing: 0; color: var(--paper); text-transform: none; line-height: 1.1; }
.rmg-hud .counts small { font-size: 9.5px; opacity: 0.75; }

/* Scroll track: each beat is one viewport tall; the text sits over the 3D. */
.rmg-main { position: relative; z-index: 2; font-weight: 300; }
.rmg-beat { position: relative; min-height: 100vh; display: flex; align-items: center; padding: 0 var(--gutter); }
.rmg-beat::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1;
  background: linear-gradient(90deg, rgba(12, 26, 53, 0.78) 0%, rgba(12, 26, 53, 0.6) 40%, transparent 62%); }
.rmg-beat.rmg-right::before { background: linear-gradient(270deg, rgba(12, 26, 53, 0.78) 0%, rgba(12, 26, 53, 0.6) 40%, transparent 62%); }
.rmg-beat.rmg-hero::before { background: radial-gradient(60% 70% at 38% 50%, rgba(12, 26, 53, 0.72), transparent 70%); }
/* The closing view is the brightest (the lit roof fills the frame), and its card is the widest, so the scrim covers the whole card. */
.rmg-beat.rmg-closing::before { background: radial-gradient(72% 82% at 50% 47%, rgba(12, 26, 53, 0.9) 0%, rgba(12, 26, 53, 0.7) 50%, rgba(12, 26, 53, 0.3) 100%); }
.rmg-beat .rmg-card { max-width: 440px; transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); }
html.rmg-js .rmg-beat .rmg-card { opacity: 0; transform: translateY(28px); }
html.rmg-js .rmg-beat.in .rmg-card { opacity: 1; transform: none; }
.rmg-beat.rmg-right { justify-content: flex-end; }
body.rmg-no3d .rmg-beat::before { background: none; }
/* A halo keeps the type legible where a lamp or a pale surface shows through the scrim. */
.rmg-card h1, .rmg-card h2, .rmg-card p, .rmg-eyebrow, .rmg-facts, .rmg-hero .rmg-meta {
  text-shadow: 0 1px 2px rgba(12, 26, 53, 0.85), 0 0 16px rgba(12, 26, 53, 0.7); }

.rmg-eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--brass-bright); display: flex; align-items: center; gap: 12px; }
.rmg-eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--brass); }
.rmg-main h1, .rmg-main h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.02em; line-height: 1.08; margin: 14px 0 14px; }
.rmg-main h1 { font-size: clamp(38px, 5.2vw, 68px); max-width: 720px; }
.rmg-main h1 em, .rmg-main h2 em { font-style: italic; color: var(--brass-bright); }
.rmg-main h2 { font-size: clamp(28px, 3.2vw, 42px); }
.rmg-lede, .rmg-card p { font-size: 15.5px; color: rgba(245, 241, 234, 0.82); margin: 0; }
.rmg-lede { max-width: 520px; font-size: 17px; }
.rmg-hero .rmg-card { max-width: 760px; }
.rmg-hero .rmg-meta { margin-top: 26px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--steel-bright); display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; }
.rmg-hero .rmg-meta span:not(.dot) { white-space: nowrap; }
.rmg-hero .rmg-meta .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--brass); }
.rmg-scroll-hint { position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%); font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--steel-bright); opacity: 0.8; }
.rmg-scroll-hint::after { content: ""; display: block; width: 1px; height: 34px; margin: 10px auto 0; background: linear-gradient(var(--brass-bright), transparent); animation: rmg-drip 1.8s var(--ease-out) infinite; }
@keyframes rmg-drip { 0% { transform: scaleY(0); transform-origin: top; } 60% { transform: scaleY(1); transform-origin: top; } 100% { transform: scaleY(0); transform-origin: bottom; } }
.rmg-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--rule); }
.rmg-facts b { display: block; font-family: var(--serif); font-weight: 400; font-size: 22px; letter-spacing: -0.01em; }
.rmg-facts small { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--steel-bright); }

/* Closing beat: what the ERP covers, one module per tile, four across on desktop.
   Top padding clears the fixed nav on short landscape screens, where the grid nearly fills the viewport. */
.rmg-closing { min-height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 92px var(--gutter) 44px; }
.rmg-closing .rmg-card { max-width: 1040px; }
.rmg-closing .rmg-card > h2, .rmg-closing .rmg-card > .rmg-lede { max-width: 680px; margin-left: auto; margin-right: auto; }
.rmg-closing .rmg-eyebrow { justify-content: center; }
.rmg-modules { list-style: none; margin: 26px auto 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; text-align: left; }
.rmg-modules li { border: 1px solid var(--rule); background: rgba(12, 26, 53, 0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); padding: 12px 14px; border-radius: 4px; }
.rmg-modules b { display: block; font-family: var(--serif); font-weight: 400; font-size: 15.5px; letter-spacing: -0.01em; color: var(--paper); margin-bottom: 3px; }
.rmg-modules span { display: block; font-size: 12px; line-height: 1.45; color: rgba(245, 241, 234, 0.8); }
.rmg-modules-eyebrow { margin-top: 28px; }
.rmg-btn { display: inline-block; margin-top: 22px; padding: 12px 22px; border-radius: 999px; background: var(--brass); color: var(--ink); text-decoration: none; font-weight: 500; font-size: 14px; letter-spacing: 0.01em; }
.rmg-btn:hover { background: var(--brass-bright); }

/* A right-hand card would share the tracker's corner as it scrolls in, so while a
   right-hand stage occupies the bottom of the viewport (body.rmg-side-right, set by
   the controller) the tracker sits in the empty bottom-left corner instead. */
@media (min-width: 761px) {
  body.rmg-side-right .rmg-hud { right: auto; left: var(--gutter); }
}
/* Tablet: tighter cards and tracker, three module tiles across. */
@media (max-width: 1100px) {
  .rmg-beat:not(.rmg-closing) .rmg-card { max-width: 400px; }
  .rmg-closing .rmg-card { max-width: 100%; }
  .rmg-main h1 { font-size: clamp(32px, 5vw, 50px); }
  .rmg-hud { width: 264px; padding: 12px 14px; }
  .rmg-modules { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Phone: cards sit low in the frame above the tracker, the scrim runs bottom-up to match, two module tiles across. */
@media (max-width: 760px) {
  .rmg-modules { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .rmg-modules li { padding: 10px 12px; }
  .rmg-modules b { font-size: 14px; }
  .rmg-modules span { font-size: 11.5px; }
  .rmg-closing.rmg-beat { align-items: flex-start; padding-top: 96px; padding-bottom: 60px; }
  .rmg-hud { right: 16px; left: 16px; bottom: 16px; width: auto; max-width: none; padding: 10px 12px; }
  .rmg-hud .counts b { font-size: 16px; }
  .rmg-beat { align-items: flex-end; padding-bottom: 184px; } /* the tracker is ~150px tall plus its 16px offset */
  body.rmg-no3d .rmg-beat { padding-bottom: 32px; } /* nothing to leave room for */
  .rmg-beat.rmg-right { justify-content: flex-start; }
  .rmg-beat:not(.rmg-closing) .rmg-card { max-width: none; } /* same specificity as the tablet cap above */
  .rmg-beat::before, .rmg-beat.rmg-right::before { background: linear-gradient(180deg, transparent 18%, rgba(12, 26, 53, 0.55) 42%, rgba(12, 26, 53, 0.88) 100%); }
  .rmg-beat.rmg-hero::before { background: rgba(12, 26, 53, 0.55); }
  .rmg-hero.rmg-beat { align-items: center; padding-bottom: 0; }
  .rmg-scroll-hint { bottom: 196px; }
}
@media (max-width: 420px) {
  .rmg-modules { grid-template-columns: minmax(0, 1fr); }
}
/* Short viewports (landscape phones, small windows, large text sizes): no room for the tracker; cards hang from the header. */
@media (max-height: 560px) {
  html.rmg-js .rmg-hud { display: none; }
  .rmg-beat, .rmg-beat.rmg-hero, .rmg-beat.rmg-right { align-items: flex-start; padding-top: 88px; padding-bottom: 24px; }
  .rmg-main h1 { font-size: clamp(26px, 4.5vw, 36px); }
  .rmg-main h2 { font-size: 24px; }
  .rmg-card p, .rmg-lede { font-size: 14px; }
  .rmg-scroll-hint { display: none; }
}
@media (max-width: 760px) and (max-height: 700px) {
  html.rmg-js .rmg-hud { display: none; }
  .rmg-beat { padding-top: 88px; padding-bottom: 32px; } /* a tall card must still start below the fixed header */
}
/* Landscape phones: the cards hang from the header, so the scrim runs top-down to match. */
@media (max-width: 760px) and (max-height: 560px) {
  .rmg-beat::before, .rmg-beat.rmg-right::before { background: linear-gradient(0deg, transparent 18%, rgba(12, 26, 53, 0.55) 42%, rgba(12, 26, 53, 0.88) 100%); }
}
/* The scroll hint is decorative and cannot fit between a centred hero card and the tracker on shorter phones. */
@media (max-width: 760px) and (max-height: 870px) {
  .rmg-scroll-hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html.rmg-js .rmg-beat .rmg-card { transition: none; transform: none; opacity: 1; }
  .rmg-scroll-hint::after { animation: none; }
}