/* Televerse modern treatment. Loaded AFTER style.css and revamp.css.
   Copy unchanged; this file carries type, surface, motion and imagery only. */

@font-face{font-family:Grotesk;src:url(../fonts/spacegrotesk.woff2) format('woff2');font-weight:400 700;font-display:swap}
@font-face{font-family:Plex;src:url(../fonts/plexmono.woff2) format('woff2');font-weight:400 500;font-display:swap}

:root{
  --mg:Grotesk,system-ui,sans-serif;
  --mm:Plex,ui-monospace,Menlo,monospace;
  --mbg:#07090c; --ms1:#0e1218; --ms2:#131922;
  --mhair:rgba(255,255,255,.075); --mhair2:rgba(255,255,255,.16);
  --mink:#eef2f7; --mink2:#98a3b2; --mink3:#69737f; --mblue:#4f9bea;
}

body{background:var(--mbg);color:var(--mink)}
::selection{background:rgba(79,155,234,.28)}
:focus-visible{outline:2px solid var(--mblue);outline-offset:3px}
::-webkit-scrollbar{width:11px}
::-webkit-scrollbar-track{background:var(--mbg)}
::-webkit-scrollbar-thumb{background:#1d242e;border:3px solid var(--mbg);border-radius:6px}
::-webkit-scrollbar-thumb:hover{background:#2a333f}

/* ---- chrome ---- */
.site-header{position:sticky;top:0;z-index:60;background:rgba(7,9,12,.74);
  backdrop-filter:saturate(150%) blur(14px);border-bottom:1px solid var(--mhair)}
.topbar{background:rgba(10,13,17,.9);border-bottom:1px solid var(--mhair)}
.site-footer{position:relative;z-index:1;background:rgba(14,18,24,.72);border-top:1px solid var(--mhair)}

/* ---- display type: Grotesk, tight, light-weight ---- */
.rv-hero h1{font-family:var(--mg);font-size:clamp(2.5rem,5.2vw,4.3rem);font-weight:700;
  line-height:1;letter-spacing:-.05em}
.rv-hero h1 .lo{color:var(--mblue)}
.rv-hero .lede{color:var(--mink2);font-size:1.12rem;line-height:1.55}
.rv-head h2,.cta-strip h2{font-family:var(--mg);font-weight:700;letter-spacing:-.04em;line-height:1.08}
.rv-head h2{font-size:clamp(1.8rem,3.2vw,2.6rem)}
.rv-head p{color:var(--mink2)}
.rv-cell h3,.rv-three h3{font-family:var(--mg);font-weight:600;letter-spacing:-.02em}
.rv-cell.is-lead h3{font-size:1.5rem}
.pill{font-family:var(--mm);font-size:.7rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--mblue);background:rgba(79,155,234,.1);border:1px solid rgba(79,155,234,.26);
  border-radius:5px;padding:6px 12px}

/* ---- surfaces: ladder + hairline + top edge, no heavy shadow ---- */
.rv-cell,.rv-index{background:var(--ms1);border:1px solid var(--mhair);border-radius:12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  transition:border-color .28s ease,transform .28s cubic-bezier(.2,.8,.2,1)}
.rv-cell.is-lead{background:var(--ms2)}
.rv-cell:hover{border-color:var(--mhair2);transform:translateY(-3px)}
.rv-index{box-shadow:0 30px 80px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.06)}
.rv-index a+a{border-top:1px solid var(--mhair)}
.rv-strip{background:var(--ms1);border-color:var(--mhair)}
.rv-chip{font-family:var(--mm);font-size:.78rem;border-color:var(--mhair);color:var(--mink2)}
.rv-chip b{color:var(--mblue)}
.rv-three>div{border-top:1px solid var(--mhair)}
.rv-cell p,.rv-three p,.rv-cell ul li{color:var(--mink2)}
.rv-more{font-family:var(--mm);font-size:.82rem}

/* ---- generated plate: the corpus of hardware and documentation, on parallax ---- */
.plated{position:relative;isolation:isolate}
.plated::before{content:'';position:absolute;inset:0;z-index:-1;
  background:url(../img/strata.jpg) center/cover no-repeat;
  opacity:.18;transform:translateY(var(--par,0px)) scale(1.08);will-change:transform;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 20%,#000 80%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0%,#000 20%,#000 80%,transparent 100%)}

/* ---- CTA gets the spectrum plate, scrimmed for legibility ---- */
.cta-strip{position:relative;overflow:hidden;isolation:isolate;padding:132px 0;
  background:transparent;border-top:1px solid var(--mhair);border-bottom:1px solid var(--mhair)}
.cta-strip::before{content:'';position:absolute;inset:0;z-index:-2;
  background:url(../img/spectrum.jpg) center/cover no-repeat;opacity:.8;transform:scale(1.06);
  transition:transform 1.8s cubic-bezier(.16,1,.3,1)}
.cta-strip.in::before{transform:scale(1)}
.cta-strip::after{content:'';position:absolute;inset:0;z-index:-1;
  background:radial-gradient(58% 70% at 50% 50%,rgba(6,8,11,.94) 0%,rgba(6,8,11,.72) 48%,rgba(6,8,11,.18) 82%,transparent 100%),
    linear-gradient(180deg,var(--mbg) 0%,transparent 18%,transparent 82%,var(--mbg) 100%)}
.cta-strip p{color:var(--mink2)}

@media (prefers-reduced-motion:reduce){
  .plated::before{transform:none!important}
  .cta-strip::before{transform:none!important}
}

/* full-width section heads are centred; the left-aligned max-width block was
   inherited from the earlier two-column layout and reads as an indent here */
.rv-head{max-width:52ch;margin-left:auto;margin-right:auto;text-align:center}
.rv-head p{margin-left:auto;margin-right:auto;max-width:48ch}
/* the hero head is NOT a section head: it stays left, paired with the service index */
.rv-hero .rv-head{max-width:none;margin-left:0;margin-right:0;text-align:left}

/* ---- inner pages: same material language as the homepage ---- */
.section-head{max-width:52ch;margin-left:auto;margin-right:auto;text-align:center}
.section-head h2{font-family:var(--mg);font-weight:700;letter-spacing:-.04em;line-height:1.08;
  font-size:clamp(1.8rem,3.2vw,2.5rem)}
.section-head p{color:var(--mink2);margin-left:auto;margin-right:auto;max-width:48ch}
.card{background:var(--ms1);border:1px solid var(--mhair);border-radius:12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  transition:border-color .28s ease,transform .28s cubic-bezier(.2,.8,.2,1)}
.card:hover{border-color:var(--mhair2);transform:translateY(-3px)}
.card h3{font-family:var(--mg);font-weight:600;letter-spacing:-.02em}
.card p,.card li,.list li{color:var(--mink2)}
.section.alt{background:var(--ms1)}
.banner h1{font-family:var(--mg);font-weight:700;letter-spacing:-.045em;line-height:1.04}
.banner{position:relative;isolation:isolate}
.banner::after{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(7,9,12,.55),rgba(7,9,12,.88))}