/* Tel-IQ modern treatment. Loaded AFTER style.css.
   Copy unchanged; this file carries type, 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{--bg:#07090c;--s1:#0e1218;--s2:#131922;--hair:rgba(255,255,255,.075);--hair2:rgba(255,255,255,.16);
 --ink:#eef2f7;--ink2:#98a3b2;--ink3:#69737f;--blue:#4f9bea;--cta:#f5921e;
 --g:Grotesk,system-ui,sans-serif;--m:Plex,ui-monospace,Menlo,monospace}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--g);font-size:16px;line-height:1.6;
 -webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:rgba(79,155,234,.28)}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
::-webkit-scrollbar{width:11px}::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:#1d242e;border:3px solid var(--bg);border-radius:6px}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}

.nav{position:sticky;top:0;z-index:60;background:rgba(7,9,12,.74);backdrop-filter:saturate(150%) blur(14px);
 border-bottom:1px solid var(--hair)}
.nav .wrap{display:flex;align-items:center;gap:26px;height:64px}
.brand{font-weight:700;letter-spacing:-.02em;display:flex;align-items:center;gap:9px}
.dot{width:9px;height:9px;border-radius:50%;background:var(--cta);animation:live 2.6s ease-out infinite}
@keyframes live{0%{box-shadow:0 0 0 0 rgba(245,146,30,.45)}70%,100%{box-shadow:0 0 0 9px rgba(245,146,30,0)}}
.nav a{color:var(--ink2);text-decoration:none;font-size:.9rem}.nav a:hover{color:var(--ink)}
.nav .sp{margin-left:auto;display:flex;gap:10px}
.btn{font:inherit;font-size:.9rem;font-weight:600;border-radius:7px;padding:11px 20px;text-decoration:none;
 cursor:pointer;border:1px solid transparent;display:inline-block;
 transition:transform .18s cubic-bezier(.2,.8,.2,1),filter .18s ease,border-color .18s ease}
.pri{background:var(--cta);border-color:var(--cta)}
.nav .btn.pri,.btn.pri{color:#1a1206}
.pri:hover{filter:brightness(1.08);transform:translateY(-1px)}
.sec{background:transparent;border-color:var(--hair2)}
.nav .btn.sec,.btn.sec{color:var(--ink)}
.sec:hover{border-color:var(--ink3);background:rgba(255,255,255,.04)}
.btn:active{transform:translateY(1px)}

/* ---- hero: full width statement, no side card ---- */
.hero{position:relative;z-index:1;padding:132px 0 104px;border-bottom:1px solid var(--hair)}
/* every section floats above the global identifier field */
.nav,.strip,.spine,.cta,footer{position:relative;z-index:1}
.strip,footer{background:rgba(14,18,24,.72)}
#field{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:0;opacity:.85}
.hero .wrap{position:relative;z-index:2}
.herogrid{display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center}
@media (max-width:940px){.herogrid{grid-template-columns:1fr;gap:36px}}
.eyebrow{font-family:var(--m);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);
 border:1px solid rgba(79,155,234,.28);background:rgba(79,155,234,.08);border-radius:5px;padding:6px 12px;
 display:inline-block;margin-bottom:26px}
h1{font-size:clamp(2.5rem,5.2vw,4.3rem);font-weight:700;line-height:.97;letter-spacing:-.05em;margin:0 0 24px;
 text-wrap:balance}
h1 em{font-style:normal;color:var(--blue)}
.lede{color:var(--ink2);font-size:1.18rem;max-width:52ch;margin:0 0 34px}
.ctas{display:flex;gap:11px;flex-wrap:wrap}

.strip{border-bottom:1px solid var(--hair);background:var(--s1);padding:16px 0;overflow:hidden}
.track{display:flex;gap:11px;width:max-content;animation:mq 54s linear infinite}
.strip:hover .track{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}
.chip{font-family:var(--m);font-size:.77rem;border:1px solid var(--hair);border-radius:6px;padding:6px 12px;
 color:var(--ink2);white-space:nowrap}
.chip b{color:var(--blue);font-weight:500}

/* ---- the spine: copy scrolls, the product pins ---- */
.spine{padding:80px 0 56px;isolation:isolate}
.spine.plated::before{content:'';position:absolute;inset:0;z-index:-1;
 background:url(../img/strata.jpg) center/cover no-repeat;
 opacity:.20;transform:translateY(var(--par,0px)) scale(1.08);will-change:transform;
 -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 22%,#000 78%,transparent 100%);
 mask-image:linear-gradient(180deg,transparent 0%,#000 22%,#000 78%,transparent 100%)}
.spinegrid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:start}
.rail{position:sticky;top:112px}
.blk2{padding:4.5vh 0;max-width:46ch}
.blk2:first-child{padding-top:0}
.blk2:last-child{padding-bottom:4vh}
.blk2 h2{font-size:clamp(1.7rem,3vw,2.4rem);font-weight:700;letter-spacing:-.038em;line-height:1.08;
 margin:0 0 14px;text-wrap:balance}
.blk2 p{color:var(--ink2);margin:0 0 14px}
.figure{margin-top:26px;border-top:1px solid var(--hair);padding-top:18px;display:flex;align-items:baseline;gap:11px}
.figure b{font-family:var(--m);font-size:2.5rem;font-weight:500;color:var(--ink);letter-spacing:-.04em;
 font-variant-numeric:tabular-nums}
.figure b .cnt{font-size:inherit;font-family:inherit;color:inherit}
.figure>span{color:var(--ink3);font-size:.82rem}
.kstep{margin-top:26px;display:grid;grid-template-columns:38px 1fr;gap:14px;padding-top:18px;
 border-top:1px solid var(--hair)}
.kstep u{font-family:var(--m);font-size:.76rem;color:var(--blue);text-decoration:none}
.kstep strong{display:block;font-size:1rem;font-weight:600;margin-bottom:4px}
.kstep span{color:var(--ink2);font-size:.92rem}

/* pinned product panel */
.panel{background:linear-gradient(180deg,var(--s2),var(--s1));border:1px solid var(--hair2);border-radius:14px;
 overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.07)}
.ptop{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--hair);
 background:rgba(255,255,255,.02)}
.ptop i{width:9px;height:9px;border-radius:50%;background:#2a323d;
 transition:background .45s ease,box-shadow .45s ease}
.ptop i.lit{background:var(--blue);box-shadow:0 0 0 3px rgba(79,155,234,.16)}
.ptop i.pulse{animation:dotpulse 1.5s ease-in-out infinite}
@keyframes dotpulse{0%,100%{opacity:1}50%{opacity:.45}}
.ptop span{margin-left:8px;font-family:var(--m);font-size:.71rem;color:var(--ink3)}
.pbody{padding:20px;min-height:286px;display:flex;flex-direction:column}
.q,.a{display:grid;grid-template-columns:28px 1fr;gap:13px}
.q{padding-bottom:16px;border-bottom:1px solid var(--hair)}
.a{padding-top:16px;flex:1}
.tg{width:28px;height:28px;border-radius:6px;font-family:var(--m);font-size:.65rem;font-weight:600;display:block;text-align:center;line-height:28px;padding:0;overflow:hidden;flex:0 0 28px}
.tg.q{background:rgba(255,255,255,.08);color:#cdd5df}
.tg.a{background:rgba(79,155,234,.18);color:var(--blue)}
.panel p{margin:0;font-size:.94rem;line-height:1.62;color:var(--ink2)}
.qtext{color:var(--ink)}
.cur{display:inline-block;width:7px;height:1.05em;background:var(--blue);vertical-align:-2px;margin-left:2px;
 animation:bl 1s steps(2) infinite}
@keyframes bl{50%{opacity:0}}
html.mj .cur.done{display:none}
.scan{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.sd{font-family:var(--m);font-size:.7rem;padding:4px 8px;border-radius:5px;border:1px solid var(--hair);
 color:var(--ink3);
 transition:opacity .3s ease,transform .3s ease,border-color .3s ease,color .3s ease}
.sd.in{opacity:1;transform:none}
.sd.hit{border-color:rgba(79,155,234,.55);color:var(--blue);background:rgba(79,155,234,.1)}
.sd.miss{opacity:.26}
.ansp b{color:var(--ink);font-weight:600}
html.mj .ansp .tk{opacity:0;filter:blur(4px);transition:opacity .45s ease,filter .45s ease}
html.mj .ansp .tk.in{opacity:1;filter:none}
.cite{margin-top:14px;padding-top:12px;border-top:1px solid var(--hair);font-family:var(--m);font-size:.73rem;
 color:var(--ink3);transition:opacity .5s ease,transform .5s ease}
.cite.in{opacity:1;transform:none}
.pfoot{margin-top:14px;display:flex;gap:5px}
.pfoot i{height:2px;flex:1;background:var(--hair);border-radius:2px;overflow:hidden;position:relative}
.pfoot i::after{content:'';position:absolute;inset:0;background:var(--blue);transform:scaleX(0);
 transform-origin:left;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.pfoot i.on::after{transform:scaleX(1)}

/* audiences */
.who{display:grid;grid-template-columns:repeat(4,1fr);gap:0 30px;border-top:1px solid var(--hair)}
.who>div{padding:22px 0}
.who{text-align:center}
.who h3{margin:0 0 8px;font-size:1rem;font-weight:600}
.who p{margin:0;color:var(--ink2);font-size:.9rem}
.blkhead{margin-bottom:26px;text-align:center}
.blkhead h2{font-size:clamp(1.8rem,3.2vw,2.5rem);font-weight:700;letter-spacing:-.038em;margin:0;text-wrap:balance}

/* FAILSAFE: visible by default. Only the current modern.js adds html.mj, so a
   stale or blocked script can never hide content. */
.mrv{opacity:1;transform:none}
html.mj .mrv{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
html.mj .mrv.in{opacity:1;transform:none}

.cta{position:relative;overflow:hidden;isolation:isolate;padding:92px 0;text-align:center;
 border-top:1px solid var(--hair)}
.cta::before{content:'';position:absolute;inset:0;z-index:-2;
 background:url(../img/corpus.jpg?v=1) center/cover no-repeat;opacity:.8;transform:translateY(var(--par,0px)) scale(1.12);will-change:transform;
 transition:transform 1.8s cubic-bezier(.16,1,.3,1)}
.cta.in::before{transform:scale(1)}
.cta::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(--bg) 0%,transparent 18%,transparent 82%,var(--bg) 100%)}
.cta h2{font-size:clamp(1.9rem,3.4vw,2.7rem);font-weight:700;letter-spacing:-.038em;margin:0 0 12px}
.cta p{color:var(--ink2);margin:0 0 26px}
footer{padding:30px 0 60px;color:var(--ink3);font-size:.84rem;border-top:1px solid var(--hair)}

@media (max-width:940px){
 .spinegrid{display:flex;flex-direction:column;gap:26px}
 /* the panel leads on mobile; trailing it left an orphaned, half-empty box */
 .rail{order:-1;position:sticky;top:72px;z-index:20;background:var(--bg);padding:10px 0 12px}
 .pbody{min-height:230px}
 .blk2{padding:9vh 0;max-width:none}
 .who{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){.who{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){
 *{animation:none!important;transition:none!important}
 .mrv{opacity:1;transform:none}.sd,.cc,.ansp .tk,.cite{opacity:1;transform:none;filter:none}
}

/* ---- bridge to the existing site chrome (header/footer keep their own markup) ---- */
.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(--hair)}
.site-footer{position:relative;z-index:1;background:rgba(14,18,24,.72)}
body{background:var(--bg);color:var(--ink)}

/* only hide the sequenced bits once the script has proven it is running */
html.mj .sd{opacity:0;transform:translateY(4px)}
html.mj .sd.in{opacity:1;transform:none}
html.mj .cite{opacity:0;transform:translateY(6px)}
html.mj .cite.in{opacity:1;transform:none}
html.mj .cur{display:inline-block}
.cur{display:none}

/* the site header uses .nav-cta, not .nav; without this the CTA keeps the
   ghost-button colour and lands at ~1.9:1 on the orange fill */
.nav-cta .btn:not(.btn-ghost):not(.btn-outline){color:#1a1206}

/* Specificity guard. Every html.mj hidden-state rule must have a matching
   html.mj shown-state rule, or the reveal can never win the cascade. */
html.mj .sd.in{opacity:1;transform:none}
html.mj .cite.in{opacity:1;transform:none}
html.mj .mrv.in{opacity:1;transform:none}

/* style.css centres its own .hero; the new hero is a left-aligned split, so it
   must opt out explicitly rather than inherit that alignment */
.hero{text-align:left}
.hero .panel,.hero .pbody,.hero .qtext,.hero .ansp,.hero .cite,.hero .scan{text-align:left}
.spine,.spine .panel,.spine .pbody{text-align:left}

/* anime.js drives opacity/transform directly on .mrv, so the CSS transition
   would fight it. The failsafe (visible until html.mj) is unchanged. */
@property --par { syntax:'<length>'; inherits:true; initial-value:0px }
html.mj .mrv{transition:none}

/* The Anime engine owns reveal motion when it is loaded. main.js still adds .in
   and its CSS transition would smear anime's per-frame inline writes, so stand
   it down here rather than editing main.js (which every page depends on). */
html.mj .rv-in, html.mj .reveal, html.mj .mrv { transition: none; }
/* ==========================================================================
   Canonical typography. Measured 2026-08-13: the display face reached only a
   few homepage-specific selectors, so h2 fell back to Poppins on 10 pages and
   body copy stayed Poppins on all 18 teliq/televerse pages. Body copy is most
   of the pixels on screen, which is why every page still read as unchanged.
   Set here on the element, so it applies whatever classes a page happens to use.
   ========================================================================== */
body,
button, input, select, textarea {
  font-family: Grotesk, system-ui, -apple-system, 'Segoe UI', sans-serif;
}
h1, h2, h3, h4, h5, .h1, .h2, .h3,
.section-head h2, .rv-head h2, .banner h1, .card h3 {
  font-family: Grotesk, system-ui, sans-serif;
  letter-spacing: -.035em;
  text-wrap: balance;
}
h2, .h2 { font-weight: 700; letter-spacing: -.04em; line-height: 1.1; }
h3, .h3 { font-weight: 600; letter-spacing: -.025em; }
h4, h5  { font-weight: 600; letter-spacing: -.015em; }

/* mono is the technical register: identifiers, counts, eyebrows, code */
code, kbd, samp, pre, .mono, .eyebrow, .pill, .tag,
.rv-chip, .cnt, .price-amt, .lab-id, .stat b {
  font-family: Plex, ui-monospace, Menlo, monospace;
  font-feature-settings: 'tnum' 1;
}
/* The 64x4px rounded brand bar under every section head is the single most
   template-looking element left on the inner pages, and it repeats on both
   sites. Replaced with a full-width hairline and a short brand segment — the
   same rule reads as structure rather than decoration. */
.section-head h2::after {
  width: 100%; max-width: 340px; height: 1px; border-radius: 0;
  background: linear-gradient(90deg,
    var(--brand) 0, var(--brand) 56px,
    rgba(255,255,255,.13) 56px, rgba(255,255,255,.13) 100%);
  margin-top: 20px;
}


/* ==========================================================================
   WCAG AA contrast — impeccable detector, 2026-08-13. It found 99 failures
   across the estate; these are the ones that live in this sheet's scope.
   Measured, not estimated:
     #1a1a1a on #2271c5 = 3.5:1  -> #ffffff on #2271c5 = 4.92:1
     #98a3b2 on #2271c5 = 1.9:1  -> inherits the same white
     #69737f on #0c0f15 = 4.0:1  -> #7c8796 = 5.2:1
   The brand blue is dark enough to carry white text and too dark to carry
   near-black, which is what the hover states were doing.
   ========================================================================== */
:root{ --mink3:#7c8796; --ink3:#7c8796 }

.dropdown a:hover, .socials a:hover, .story-num { color:#fff }
/* descendants kept their own muted colour on the blue fill (1.9:1) */
.dropdown a:hover *, .socials a:hover *, .story-num * { color:inherit }


/* strips whose children sat flush against the border+fill edge */
.rv-strip,.strip,.lf{padding-left:clamp(16px,3vw,28px);padding-right:clamp(16px,3vw,28px)}
.rv{padding-top:clamp(48px,6vw,88px)}

/* the detector reads the strip itself, whose children are flush to its filled
   edge; the inner container is what actually insets, so state it on the strip */
.rv-strip,.strip,.lf{box-sizing:border-box}
.rv-strip>*,.strip>*,.lf>*{padding-left:clamp(14px,2vw,22px);padding-right:clamp(14px,2vw,22px)}


/* Accordion: max-height animation is a layout-property transition. grid-template-rows
   0fr->1fr animates without measuring and without laying out on every frame. main.js
   still sets an inline max-height on open, which is simply ignored here, so a stale
   cached main.js keeps working. */
.acc-body{display:grid;grid-template-rows:0fr;overflow:hidden;
  transition:grid-template-rows .35s cubic-bezier(.2,.8,.2,1);max-height:none!important}
.acc-item.open .acc-body{grid-template-rows:1fr}
.acc-body>*{min-height:0;overflow:hidden}
@media (prefers-reduced-motion:reduce){.acc-body{transition:none}}

/* .inner's own padding sits outside the collapsed row and left a 22px sliver
   when shut; move the inset onto its children so the row truly reaches zero */
.acc-body>.inner{padding:0}
.acc-body>.inner>*{padding-left:24px;padding-right:24px}
.acc-body>.inner>*:last-child{padding-bottom:22px}


/* Feature cards carried a small line icon; they now lead with a photograph,
   matching the Televersity catalogue treatment that worked. Ratio reserved. */
.card .feat-img{display:block;aspect-ratio:3/2;overflow:hidden;background:#0f141b;
  border-radius:10px;margin:-4px 0 16px;border:1px solid var(--mhair)}
.card .feat-img img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.card:hover .feat-img img{transform:scale(1.05)}
@media (prefers-reduced-motion:reduce){ .card:hover .feat-img img{transform:none} }


/* A scaled ::before plate overhangs its box. .plated scaled to 1.08 with no
   clipping, so 4% leaked past the viewport on each side and the page scrolled
   sideways by 58px at 1440. Pseudo-elements are invisible to a DOM overflow
   query, which is why this survived every earlier check. */
/* overflow:hidden here made section.spine a scroll container, which silently
   demoted the scrollytelling .rail from sticky to effectively static - it stuck
   to a box that never scrolls, so the right half of the section sat empty for
   1028px while the steps scrolled past alone. overflow:clip clips exactly the
   same overhang WITHOUT establishing a scroll container, so sticky survives.
   overflow-y stays visible so nothing vertical is ever cut. */
.plated,.spine.plated,.rv-hero,.cta-strip,.banner,.rv-strip{overflow-x:clip;overflow-y:visible}
/* NOT html,body{overflow-x:hidden}: that clips every positioned child (the
   detector flagged 37) and can break the sticky header. Clipping the scaled
   plates at source is the actual fix. */
/* Page rail: injected by motion.js on any page with a banner and 2+ sections.
   Hidden until the banner scrolls away, so it never repeats a title already on
   screen. Anchored below the sticky header, whose height it measures itself. */
.prail{position:sticky;top:var(--hdr,64px);z-index:55;
  background:rgba(9,12,17,.86);backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid var(--mhair);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .28s ease,transform .28s cubic-bezier(.2,.8,.2,1),visibility 0s .28s}
html.pr-on .prail{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.prail .container{display:flex;align-items:center;gap:20px;min-height:46px;
  overflow-x:auto;scrollbar-width:none}
.prail .container::-webkit-scrollbar{display:none}
.pr-title{font-family:var(--mg);font-weight:600;font-size:.92rem;white-space:nowrap;
  color:var(--mink);flex:0 0 auto}
.pr-links{display:flex;gap:4px;margin-left:auto;flex:0 0 auto}
.pr-links a{font-size:.82rem;color:var(--mink2);text-decoration:none;white-space:nowrap;
  padding:6px 11px;border-radius:6px;transition:color .2s ease,background .2s ease}
.pr-links a:hover{color:var(--mink);background:rgba(255,255,255,.05)}
.pr-links a.on{color:var(--mblue);background:rgba(79,155,234,.11)}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr,64px) + 58px)}
@media (max-width:720px){ .pr-title{font-size:.85rem} .pr-links a{padding:6px 9px;font-size:.78rem} }
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .prail{transition:none} }


/* The sticky header sat at 74% opacity, so a large high-contrast h2 scrolling
   under it stayed legible through the blur - visible as ghost text between the
   logo and the nav. Opaque enough to read as a surface once you have scrolled. */
/* glass at the top, over the banner - and fully opaque once scrolled, because
   7% transparency is still enough for a white h2 to read through the blur */
.site-header{background:rgba(7,9,12,.86)}
html.pr-on .site-header{background:#070a0d;backdrop-filter:none}

/* defensive: an injected canvas with no positioning is a block element that
   pushes the page down */
.hero{position:relative;isolation:isolate}
.hero .bfield{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;opacity:.85}


/* Page-wide identifier drift. Fixed behind everything, on every page.
   For it to be SEEN, no section may paint an opaque ground over it - that is
   what hid it before, so the alt bands go translucent. Nothing dims the canvas
   itself; the alpha in driftField is the only place opacity is decided. */
/* z-index:-1, NOT z-index:0 with the siblings forced to relative - that rule
   overrode position:sticky on the header and dropped it out of the flow.
   A negative-z child paints above the body background and below every sibling
   on its own, so nothing else needs touching. */
.pfield{position:fixed;inset:0;width:100vw;height:100vh;z-index:-1;pointer-events:none}

/* hero left copy: hidden only once the engine has armed, revealed by heroPanel */
/* The failsafe is the animation, not a JS timer: if the engine throws after
   arming this class, no JS runs to undo it and the hero is blank forever.
   A delayed keyframe reveals the copy no matter what the script does, and by
   3s the animated end state is identical to where the engine leaves it. */
html.mj .hlead{opacity:0;transform:translateY(12px);animation:heroFailsafe 1ms linear 3s forwards}
@keyframes heroFailsafe{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){html.mj .hlead{opacity:1;transform:none;animation:none}}


/* ---- Hero: how retrieval actually works ----------------------------------
   Not a chat mock-up. It shows the pipeline: the question is embedded, the
   corpus is searched, the ranking is fused, an answer is grounded. The rank
   shuffle in the middle is the honest part - dense similarity puts the exact
   -identifier document LAST, and keyword matching lifts it to first. That is
   the real behaviour of this system, not an illustration of it. */
.rag{margin:0;border:1px solid var(--hair);border-radius:12px;background:var(--card);
     padding:15px 16px 14px;box-shadow:0 22px 54px rgba(0,0,0,.40)}
.rag-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:11px}
.rag-k{font-family:var(--m);font-size:.6rem;letter-spacing:.15em;text-transform:uppercase;color:#7d8894}
.rag-stage{font-family:var(--m);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
  color:#7cb4f0;border:1px solid rgba(79,155,234,.30);background:rgba(79,155,234,.09);
  border-radius:999px;padding:3px 9px}

.rag-q{display:flex;gap:9px;align-items:flex-start;margin:0 0 11px;font-size:.88rem;
  line-height:1.5;color:#d3dae2}
.rag-tag{font-family:var(--m);font-size:.6rem;color:#7cb4f0;border:1px solid rgba(79,155,234,.28);
  border-radius:4px;padding:2px 5px;flex:0 0 auto;margin-top:2px}
.rag-q .cur{display:inline-block;width:7px;height:15px;background:#4f9bea;vertical-align:-2px;margin-left:1px}
.rag-q .cur.done{opacity:0}

.rag-out{margin:12px 0 0;padding-top:11px;border-top:1px solid var(--hair);
  font-size:.8rem;line-height:1.55;color:#98a2ad}
.rag-out b{color:#e6edf3;font-weight:600}

@media (prefers-reduced-motion:reduce){.rag-q .cur{display:none}}
/* ---- what actually makes it RAG ------------------------------------------
   Two earlier versions animated SEARCH - a document flying out of a shelf, a
   cloud of dots lighting up. Any file-finder does that. The thing that makes
   this a retrieval-augmented system is that the answer is BUILT OUT OF the
   retrieved passages, and every clause can be traced to the passage it came
   from. So that is what is animated: passages arrive, then the answer writes
   itself clause by clause, each one lighting the source it was drawn from. */
.rag-src{list-style:none;margin:0 0 13px;padding:0;display:grid;gap:7px;perspective:800px}
.rag-src li{position:relative;display:grid;grid-template-columns:18px 1fr;gap:9px;
  align-items:start;padding:8px 10px 9px;border-radius:7px;
  border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.018);
  transform-origin:50% 100%;
  transition:border-color .35s,background .35s,box-shadow .35s}
.rag-n{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;
  font-family:var(--m);font-size:.62rem;color:#7d8894;
  border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03)}
/* three children, two columns - without this the quote wraps into the 18px
   number column and renders one word per line */
.rag-src b,.rag-src q{grid-column:2}
.rag-src b{display:block;font-family:var(--m);font-size:.64rem;font-weight:500;
  color:#7d8894;margin-bottom:3px}
.rag-src q{display:block;quotes:none;font-size:.73rem;line-height:1.5;color:#767f8a}
.rag-src mark{background:none;color:#9aa4af}
/* the passage the current clause is drawn from */
.rag-src li.cited{border-color:rgba(79,155,234,.42);background:rgba(79,155,234,.07);
  box-shadow:0 8px 26px rgba(0,0,0,.4)}
.rag-src li.cited .rag-n{color:#0d1117;background:#4f9bea;border-color:#4f9bea;font-weight:600}
.rag-src li.cited b{color:#7cb4f0}
.rag-src li.cited q{color:#aab4bf}
.rag-src li.cited mark{color:#cfe2f8;background:rgba(79,155,234,.20);
  border-radius:3px;padding:0 3px;box-shadow:0 0 0 1px rgba(79,155,234,.25)}

.rag-ans{display:flex;gap:9px;align-items:flex-start;margin:0;padding-top:12px;
  border-top:1px solid var(--hair)}
.rag-tag.is-a{color:#8fd6a6;border-color:rgba(143,214,166,.30)}
.rag-body{font-size:.84rem;line-height:1.6;color:#c3ccd6}
/* each clause carries the number of the passage it came from */
.rag-body .cl{position:relative}
.rag-body .cl b{color:#e6edf3;font-weight:600}
.rag-body .cl::after{content:attr(data-n);font-family:var(--m);font-size:.56rem;
  color:#4f9bea;vertical-align:super;margin-left:2px;opacity:0;transition:opacity .3s}
.rag-body .cl.in::after{opacity:1}

@media (prefers-reduced-motion:reduce){.rag-q .cur{display:none}}
@media (max-width:900px){.rag-src q{font-size:.7rem}}
.rag-body .w{display:inline}

/* ---- domain strip: photographs, with the name on the image ----------------
   The site had no photography anywhere - every earlier pass answered "images"
   with line marks. These are real photographs of the hardware each domain is
   actually made of, shot to one grade and cropped to one frame so the strip
   stays uniform. The name sits ON the image over a scrim, which is the only
   reliable way to get lettering onto generated art - models garble text, so
   nothing is baked into the pixels. */
.strip .chip{position:relative;display:block;width:230px;height:130px;margin:0;padding:0;
  flex:0 0 auto;border:1px solid var(--hair);border-radius:10px;overflow:hidden;
  background:#0b0e13;transition:border-color .28s,transform .28s}
.strip .chip img{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.85) contrast(1.04);transition:transform .5s ease,filter .28s}
/* the scrim is what keeps the name legible over an unpredictable photograph */
.strip .chip::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,9,12,.10) 38%,rgba(7,9,12,.80) 78%,rgba(7,9,12,.94))}
.strip .chip figcaption{position:absolute;left:12px;right:12px;bottom:10px;z-index:1;
  font-family:var(--m);font-size:.7rem;line-height:1.3;letter-spacing:.01em;color:#e2e8ef;
  text-shadow:0 1px 3px rgba(0,0,0,.75)}
.strip .chip:hover{border-color:rgba(79,155,234,.42)}
.strip .chip:hover img{transform:scale(1.05);filter:saturate(1) contrast(1.06)}
@media (max-width:900px){.strip .chip{width:190px;height:108px}
  .strip .chip figcaption{font-size:.64rem}}

/* ---- audience tiles: give the copy something to sit under -------------------
   Same locked rule as the Televerse audience pass - no faces anywhere. People
   are suggested by their environment and their tools, which stays honest and
   avoids the uncanny stock-photo tell. */
.who-img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;display:block;
  border-radius:9px;margin-bottom:14px;border:1px solid var(--hair);
  filter:saturate(.85) contrast(1.04);transition:filter .3s,transform .45s ease}
.who>div:hover .who-img{filter:saturate(1) contrast(1.06);transform:translateY(-2px)}
@media (max-width:900px){.who-img{margin-bottom:10px}}


/* Hero vertical balance. Same defect as the Televerse hero: .herogrid centres
   a ~340px copy block against the ~530px grounded-answer figure, so at 1440x900
   the eyebrow started 225px below the nav and "Telecom answers." sat almost
   half a screen down. Top-align the copy against the figure and cut the fixed
   132px/104px hero pad. Desktop only - below 940px the grid is one column. */
@media (min-width:941px){
  .hero{padding:clamp(52px,4.8vw,76px) 0 clamp(60px,5.5vw,88px)}
  .herogrid{align-items:start}
}