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

/* The 3D stage sits behind everything and never scrolls. */
/* Sized to the LARGE viewport so a phone's collapsing address bar never resizes the drawing buffer mid-scroll. */
/* The stage carries no paint containment and no transform hints: iOS Safari flickers a fixed WebGL canvas that has them, and Chrome can re-tile one. */
#sc-stage { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; height: 100lvh; z-index: 0; background: var(--ink); contain: layout size; }
#sc-stage canvas { display: block; width: 100%; height: 100%; }
.sc-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.sc-page header.nav { position: fixed; left: 0; right: 0; }
/* Nothing over the moving picture blurs what is behind it: a backdrop blur over a WebGL canvas re-samples a frame that is already gone and flickers in some browsers. Panels, tiles and the header are plain translucent ink on these pages. */
body.sc-page header.nav, body.sc-page header.nav.scrolled { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(12, 26, 53, 0.94); }
body.sc-page header.nav:not(.scrolled) { background: transparent; border-bottom-color: transparent;
  backdrop-filter: none; -webkit-backdrop-filter: none; }
body.sc-page footer.foot { position: relative; z-index: 2; background: rgba(12, 26, 53, 0.92); }

/* Order tracker: only shown once the controller is running. */
.sc-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.86);
  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.sc-js .sc-hud { display: block; }
html.sc-js body.sc-plain .sc-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 .sc-hud, body.at-footer .sc-hud, body.sc-plain .sc-hud { opacity: 0; pointer-events: none; transform: translateY(12px); }
.sc-hud .row { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.sc-hud .row strong { color: var(--paper); font-weight: 500; }
.sc-hud .bar { height: 2px; background: var(--rule); position: relative; overflow: hidden; margin: 10px 0 12px; }
.sc-hud .bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0%; background: linear-gradient(90deg, var(--brass-deep), var(--brass-bright)); }
.sc-hud .stages { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; }
.sc-hud .stages span { height: 3px; background: var(--rule); border-radius: 2px; transition: background 0.4s var(--ease-out); }
.sc-hud .stages span.done { background: var(--brass); }
.sc-hud .stages span.live { background: var(--brass-bright); box-shadow: 0 0 10px rgba(214, 176, 116, 0.6); }
.sc-hud .counts { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--rule); }
.sc-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; }
.sc-hud .counts small { font-size: 9.5px; opacity: 0.75; }
.sc-hud .row .accent { color: var(--brass-bright); }
/* On phones and tablets a live blur over a moving canvas costs frames; use a solid panel instead. */
@media (max-width: 760px), (pointer: coarse) {
  .sc-hud, .sc-modules li { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(12, 26, 53, 0.88); }
}
/* On a phone the next card slides up underneath the tracker, so the panel is solid there, and the small
   brass label above each heading gets its own backing because it sits highest on the picture. */
@media (max-width: 760px) {
  .sc-hud { background: rgb(12, 26, 53); }
  .sc-eyebrow { width: fit-content; max-width: 100%; margin-left: -8px; padding: 4px 9px; background: rgba(12, 26, 53, 0.84); border-radius: 2px; text-shadow: none; }
  .sc-closing .sc-eyebrow { margin-left: auto; margin-right: auto; }
}

/* Scroll track: each beat is one viewport tall; the text sits over the 3D. */
.sc-main { position: relative; z-index: 2; font-weight: 300; }
.sc-beat { position: relative; min-height: 100vh; display: flex; align-items: center; padding: 0 var(--gutter); }
/* Each section's scrim is a fixed, full-screen layer that only the current section shows (page.js sets `lit` on one section at a time, so the scrims
   cross-fade; `in`, which shows a card, can be on two sections during a hand-over on wide screens). Nothing scrolls over the canvas but the text, and no layer is masked: a masked or scrolling layer over a WebGL canvas is what Safari
   and Chrome re-rasterise mid-scroll, which showed as flicker. Scrims not in use are hidden, not just transparent, so they hold no layer memory. */
.sc-beat::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1; opacity: 0; visibility: hidden;
  transition: opacity 0.9s var(--ease-out), visibility 0s linear 0.9s;
  background: linear-gradient(90deg, rgba(12, 26, 53, 0.78) 0%, rgba(12, 26, 53, 0.6) 40%, transparent 62%); }
.sc-beat.lit::before { opacity: 1; visibility: visible; transition-delay: 0s; }   /* `lit`: the one section whose scrim is up (page.js) */
.sc-beat.sc-right::before { background: linear-gradient(270deg, rgba(12, 26, 53, 0.78) 0%, rgba(12, 26, 53, 0.6) 40%, transparent 62%); }
.sc-beat.sc-hero::before { background: linear-gradient(90deg, rgba(12, 26, 53, 0.84) 0%, rgba(12, 26, 53, 0.66) 34%, transparent 58%); }
/* 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. */
.sc-beat.sc-closing::before { background: radial-gradient(72% 82% at 50% 47%, rgba(12, 26, 53, 0.8) 0%, rgba(12, 26, 53, 0.56) 50%, rgba(12, 26, 53, 0.2) 100%); }
.sc-beat .sc-card { max-width: 440px; transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); }
html.sc-js .sc-beat .sc-card { opacity: 0; transform: translateY(28px); }
html.sc-js .sc-beat.in .sc-card { opacity: 1; transform: none; }
/* Wide screens only: scrims and cards on their own compositor layers (desktop Safari otherwise repaints a masked, text-shadowed layer on every scroll frame). Phones keep the layer count low: each promoted full-screen layer costs memory and iOS drops WebGL contexts under pressure. */
@media (min-width: 761px) { .sc-beat .sc-card { transform: translateZ(0); } html.sc-js .sc-beat .sc-card { transform: translate3d(0, 28px, 0); } html.sc-js .sc-beat.in .sc-card { transform: translateZ(0); } }
.sc-beat.sc-right { justify-content: flex-end; }
body.sc-plain .sc-beat::before { background: none; }
/* On the plain page (no 3D, or a 3D layer that stopped) the canvas is taken away, so no frozen picture sits under the text. */
body.sc-plain #sc-stage canvas { display: none; }
/* A halo keeps the type legible where a lamp or a pale surface shows through the scrim. */
.sc-card h1, .sc-card h2, .sc-card p, .sc-eyebrow, .sc-facts, .sc-hero .sc-meta {
  text-shadow: 0 1px 2px rgba(12, 26, 53, 0.85), 0 0 16px rgba(12, 26, 53, 0.7); }

.sc-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; }
.sc-eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--brass); }
/* The small brass label sits above the card, often over a lit part of the picture: it carries a denser halo of its own. */
.sc-eyebrow { text-shadow: 0 0 2px rgba(8, 18, 40, 1), 0 1px 3px rgba(8, 18, 40, 0.95), 0 0 9px rgba(8, 18, 40, 0.95), 0 0 16px rgba(8, 18, 40, 0.9), 0 0 26px rgba(8, 18, 40, 0.8); }
.sc-main h1, .sc-main h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.02em; line-height: 1.08; margin: 14px 0 14px; }
.sc-main h1 { font-size: clamp(38px, 5.2vw, 68px); max-width: 720px; }
.sc-main h1 em, .sc-main h2 em { font-style: italic; color: var(--brass-bright); }
.sc-main h2 { font-size: clamp(28px, 3.2vw, 42px); }
.sc-lede, .sc-card p { font-size: 15.5px; color: rgba(245, 241, 234, 0.82); margin: 0; }
.sc-lede { max-width: 520px; font-size: 17px; }
.sc-hero .sc-card { max-width: 760px; }
.sc-hero .sc-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; }
/* The hero's small meta line sits over the lit picture: a backing chip, like the labels above the cards, keeps it legible. */
.sc-hero .sc-meta { width: fit-content; max-width: 100%; margin-left: -10px; padding: 6px 10px; background: rgba(12, 26, 53, 0.8); border-radius: 2px; text-shadow: none; }
.sc-hero .sc-meta span:not(.dot) { white-space: nowrap; }
.sc-hero .sc-meta .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--brass); }
.sc-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(--paper); opacity: 0.85; transition: opacity 0.4s var(--ease-out); text-shadow: 0 0 8px rgba(12, 26, 53, 1), 0 1px 2px rgba(12, 26, 53, 1); }
/* The hint belongs to the opening screen only: it goes as soon as the visitor has started down the page. */
html.sc-js body:not(.at-hero) .sc-scroll-hint { opacity: 0; }
.sc-scroll-hint::after { content: ""; display: block; width: 1px; height: 34px; margin: 10px auto 0; background: linear-gradient(var(--brass-bright), transparent); animation: sc-drip 1.8s var(--ease-out) infinite; }
@keyframes sc-drip { 0% { transform: scaleY(0); transform-origin: top; } 60% { transform: scaleY(1); transform-origin: top; } 100% { transform: scaleY(0); transform-origin: bottom; } }
.sc-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); }
.sc-facts b { display: block; font-family: var(--serif); font-weight: 400; font-size: 22px; letter-spacing: -0.01em; }
.sc-facts small { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(245, 241, 234, 0.86); }

/* 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. */
.sc-closing { min-height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 92px var(--gutter) 44px; }
.sc-closing .sc-card { max-width: 1040px; }
.sc-closing .sc-card > h2, .sc-closing .sc-card > .sc-lede { max-width: 680px; margin-left: auto; margin-right: auto; }
.sc-closing .sc-eyebrow { justify-content: center; }
/* The closing label sits right under the navigation, above the scrim: it gets a backing chip, like the tags below it. */
.sc-closing .sc-card > .sc-eyebrow:first-child { width: fit-content; max-width: 100%; margin-left: auto; margin-right: auto; padding: 4px 10px; background: rgba(12, 26, 53, 0.84); border-radius: 2px; text-shadow: none; }
.sc-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; }
.sc-modules li { border: 1px solid var(--rule); background: rgba(12, 26, 53, 0.82); padding: 12px 14px; border-radius: 4px; }
.sc-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; }
.sc-modules span { display: block; font-size: 12px; line-height: 1.45; color: rgba(245, 241, 234, 0.8); }
.sc-modules-eyebrow { margin-top: 28px; }
.sc-modules.sc-five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.sc-tags { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 18px 0 0; padding: 0; list-style: none; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--paper); }
.sc-card p.sc-note { margin: 16px auto 0; max-width: 560px; font-size: 12px; line-height: 1.5; color: rgba(245, 241, 234, 0.74); }
.sc-tags li { padding: 6px 12px; border: 1px solid var(--rule); border-radius: 999px; background: rgba(12, 26, 53, 0.78); }
.sc-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; }
.sc-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.side-right, set by
   the controller) the tracker sits in the empty bottom-left corner instead. */
@media (min-width: 761px) {
  body.side-right .sc-hud { right: auto; left: var(--gutter); }
}
/* Tablet: tighter cards and tracker, three module tiles across. */
@media (min-width: 761px) and (max-width: 1100px) {
  /* The card takes about half the width here, so the side scrim runs further across. */
  .sc-beat::before { background: linear-gradient(90deg, rgba(12, 26, 53, 0.84) 0%, rgba(12, 26, 53, 0.7) 50%, transparent 84%); }
  .sc-beat.sc-right::before { background: linear-gradient(270deg, rgba(12, 26, 53, 0.84) 0%, rgba(12, 26, 53, 0.7) 50%, transparent 84%); }
  .sc-beat.sc-hero::before { background: linear-gradient(90deg, rgba(12, 26, 53, 0.86) 0%, rgba(12, 26, 53, 0.7) 50%, transparent 84%); }
  .sc-beat.sc-closing::before { background: radial-gradient(72% 82% at 50% 47%, rgba(12, 26, 53, 0.8) 0%, rgba(12, 26, 53, 0.56) 50%, rgba(12, 26, 53, 0.2) 100%); }
}
@media (max-width: 1100px) {
  /* Touch screens: the smallest labels go up a size. */
  .sc-eyebrow { font-size: 12px; letter-spacing: 0.16em; }
  .sc-facts small { font-size: 11px; letter-spacing: 0.1em; }
  .sc-hud .counts small { font-size: 10.5px; opacity: 1; }
  .sc-hud .counts { gap: 14px; }
  .sc-hud .counts b { font-size: 17px; }
  .sc-beat:not(.sc-closing) .sc-card { max-width: 400px; }
  .sc-closing .sc-card { max-width: 100%; }
  .sc-main h1 { font-size: clamp(32px, 5vw, 50px); }
  .sc-hud { width: 290px; padding: 12px 14px; }
  .sc-modules, .sc-modules.sc-five { 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) {
  .sc-modules, .sc-modules.sc-five { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .sc-modules li { padding: 10px 12px; }
  .sc-modules b { font-size: 14px; }
  .sc-modules span { font-size: 11.5px; }
  .sc-closing.sc-beat { align-items: flex-start; padding-top: 96px; padding-bottom: 60px; }
  .sc-hud { right: 16px; left: 16px; bottom: 16px; width: auto; max-width: none; padding: 10px 12px; }
  .sc-hud .counts b { font-size: 16px; }
  .sc-beat { align-items: flex-end; padding-bottom: 212px; } /* the tracker is up to ~180px tall plus its 16px offset */
  body.sc-plain .sc-beat { padding-bottom: 32px; } /* nothing to leave room for */
  .sc-beat.sc-right { justify-content: flex-start; }
  .sc-beat:not(.sc-closing) .sc-card { max-width: none; } /* same specificity as the tablet cap above */
  .sc-beat::before, .sc-beat.sc-right::before { background: linear-gradient(180deg, transparent 12%, rgba(12, 26, 53, 0.68) 36%, rgba(12, 26, 53, 0.93) 100%); }
  .sc-beat.sc-hero::before { background: linear-gradient(180deg, transparent 20%, rgba(12, 26, 53, 0.72) 44%, rgba(12, 26, 53, 0.94) 100%); }
  /* The opening card sits low as well, and the tracker waits for the first stage, so the picture keeps the upper screen. */
  .sc-hero.sc-beat { align-items: flex-end; padding-bottom: 56px; }
  body.at-hero .sc-hud { opacity: 0; pointer-events: none; transform: translateY(12px); }
  .sc-scroll-hint { bottom: 14px; }
}
/* Phones held upright (body.sc-pinned, which page.js sets once per orientation from the browser's size at load, so a phone browser's collapsing toolbar cannot flip the layout
   mid-scroll): the cards are pinned above the tracker and swap at the half-way point of each stage (page.js), so the picture keeps the band above them for the whole scroll and
   the text never slides up over an empty picture. The sections then only give the page its length; the closing section stays in the flow because its card is taller than a screen. */
html.sc-js body.sc-pinned .sc-beat:not(.sc-closing) .sc-card { position: fixed; left: var(--gutter); right: var(--gutter); bottom: 176px; max-width: none; z-index: 3; visibility: hidden;
    transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out), visibility 0s linear 0.9s; }
html.sc-js body.sc-pinned .sc-beat.in:not(.sc-closing) .sc-card { visibility: visible; transition-delay: 0s; }
html.sc-js body.sc-pinned .sc-beat.sc-hero .sc-card { bottom: 56px; }   /* same specificity as the pinned rule above, so it wins by order */
body.sc-pinned .sc-scroll-hint { display: none; }   /* the pinned opening card already sits at the bottom; the hint would overprint it */
/* Everything below the picture is made as short as it can be, so the band for the picture stays at least a third of the screen. */
body.sc-pinned .sc-card p, body.sc-pinned .sc-lede { font-size: 14.5px; line-height: 1.5; }
body.sc-pinned .sc-main h2 { font-size: 26px; margin: 10px 0 10px; }
body.sc-pinned .sc-facts { margin-top: 12px; padding-top: 10px; gap: 8px 16px; }
body.sc-pinned .sc-facts b { font-size: 19px; }
body.sc-pinned .sc-facts small { font-size: 9.5px; line-height: 1.35; display: block; margin-top: 2px; }
body.sc-pinned .sc-hud { padding: 8px 12px 9px; }
body.sc-pinned .sc-hud .row { margin-bottom: 4px; }
body.sc-pinned .sc-hud .bar { margin: 6px 0 7px; }
body.sc-pinned .sc-hud .counts { margin-top: 7px; padding-top: 6px; gap: 8px; }
body.sc-pinned .sc-hud .counts b { font-size: 15px; }
body.sc-pinned .sc-hud .counts small { font-size: 9px; }
html.sc-js body.sc-pinned .sc-beat:not(.sc-closing):not(.sc-hero) .sc-card { bottom: 176px; }
/* Short phones (body.sc-short, from page.js): the tracker is hidden there, so the pinned card sits at the bottom. */
html.sc-js body.sc-pinned.sc-short .sc-beat:not(.sc-closing):not(.sc-hero) .sc-card { bottom: 20px; }
@media (max-width: 420px) {
  .sc-modules, .sc-modules.sc-five { grid-template-columns: minmax(0, 1fr); }
  .sc-hud .counts { gap: 6px; }
}
/* Short viewports (landscape phones, small windows, large text sizes): no room for the tracker; cards hang from the header. */
@media (max-height: 560px) {
  html.sc-js .sc-hud { display: none; }
  .sc-beat, .sc-beat.sc-hero, .sc-beat.sc-right { align-items: flex-start; padding-top: 88px; padding-bottom: 24px; }
  .sc-main h1 { font-size: clamp(26px, 4.5vw, 36px); }
  .sc-main h2 { font-size: 24px; }
  .sc-card p, .sc-lede { font-size: 14px; }
  .sc-scroll-hint { display: none; }
}
html.sc-js body.sc-short .sc-hud { display: none; }
body.sc-short .sc-beat { padding-top: 88px; padding-bottom: 32px; } /* a tall card must still start below the fixed header (short phones, body.sc-short from page.js) */
/* Landscape phones: the cards hang from the header, so the scrim runs top-down to match. */
@media (max-width: 760px) and (max-height: 560px) {
  .sc-beat::before, .sc-beat.sc-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) {
  .sc-scroll-hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html.sc-js .sc-beat .sc-card { transition: none; transform: none; opacity: 1; }
  .sc-scroll-hint::after { animation: none; }
}