/* Research COPS: logo mark + footer brand column (loaded on every page, new and legacy) */

/* Shield mark: glow, hover tilt and slowly rotating rings, as on the original app */
.rc-chrome .rc-mark{flex:none;overflow:visible;filter:drop-shadow(0 2px 4px rgba(0,0,0,.45)) drop-shadow(0 0 4px rgba(4,203,194,.35));transition:transform .6s cubic-bezier(.34,1.56,.64,1)}
.rc-chrome .logo:hover .rc-mark,.rc-chrome .flogo:hover .rc-mark{transform:scale(1.08) rotate(5deg)}
.rc-chrome .rc-mark .rings{transform-origin:12px 7.2px;transform:rotate(-110deg);animation:rcRingSpin 20s linear infinite}
@keyframes rcRingSpin{from{transform:rotate(-110deg)}to{transform:rotate(250deg)}}
@media (prefers-reduced-motion:reduce){.rc-chrome .rc-mark .rings{animation:none}}

/* Header lock-up */
header.rc-chrome .logo{gap:12px}
header.rc-chrome .logo-word{font-size:22px}

/* Footer brand column */
footer.rc-chrome .flogo{display:inline-flex;align-items:center;gap:14px;margin-bottom:20px}
footer.rc-chrome .flogo .logo-word{display:block;font-size:22px}
footer.rc-chrome .flogo .logo-sub{display:block;font-size:9.5px;letter-spacing:.32em;color:var(--on-dark-muted);font-weight:600;margin-top:6px}
footer.rc-chrome .fdesc{font-size:14px;line-height:1.7;color:var(--on-dark-body);max-width:360px;margin:0}
footer.rc-chrome .fgrid{grid-template-columns:1.7fr repeat(4,1fr);gap:44px;margin-bottom:48px}
footer.rc-chrome .fgrid a{color:var(--on-dark-body)}
footer.rc-chrome .fgrid a:hover{color:var(--accent)}
footer.rc-chrome .fgrid .flogo{color:inherit}

/* Contact row: phone · email · office across the width, social icons on the right */
footer.rc-chrome .fcontact-row{display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center;padding:30px 0;border-top:1px solid var(--line-dark)}
footer.rc-chrome .fcontact{list-style:none;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.1fr) minmax(0,1.3fr);gap:32px;margin:0;padding:0}
footer.rc-chrome .fcontact li{display:grid;grid-template-columns:38px 1fr;gap:14px;align-items:start}
footer.rc-chrome .fi{width:38px;height:38px;border-radius:10px;border:1px solid var(--line-dark);background:rgba(4,203,194,.06);display:grid;place-items:center;color:var(--accent)}
footer.rc-chrome .fcontact small{display:block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-muted);font-weight:600;margin-bottom:3px}
footer.rc-chrome .fcontact a,footer.rc-chrome .fcontact span{font-size:14px;line-height:1.6;color:var(--on-dark);word-break:break-word}
footer.rc-chrome .fcontact a:hover{color:var(--accent)}
footer.rc-chrome .social{margin:0;align-self:center}
@media (max-width:1080px){
  footer.rc-chrome .fgrid{grid-template-columns:1fr 1fr 1fr}
  footer.rc-chrome .fcontact-row{grid-template-columns:1fr;gap:24px}
}
@media (max-width:720px){
  footer.rc-chrome .fgrid{grid-template-columns:1fr 1fr;gap:32px 20px}
  footer.rc-chrome .fcontact{grid-template-columns:1fr;gap:18px}
}

/* Sign in link (header) + hero sign-in line + plan "Everything in X, plus" rows */
.rc-chrome .nav-signin{color:var(--on-dark-body);font-size:14.5px;font-weight:500;padding:8px 4px;margin-right:4px}
.rc-chrome .nav-signin:hover{color:#fff}
@media (max-width:1080px){.rc-chrome .nav-signin{display:none}}
.hero-signin{margin-top:18px;font-size:14px;color:var(--on-dark-muted)}
.hero-signin a{color:var(--accent);font-weight:600}
.plan li.plan-plus{display:block;font-size:12.5px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-top:2px}

/* Headlines: balanced line breaks (no lonely last word) */
h1,h2,h3,.statement p{text-wrap:balance}
.band h2 em.s{color:var(--accent)}

/* Hero sub-line: the research sequence, step by step, ending on the brand idea */
.hero-tag{font-family:var(--display);font-weight:600;font-size:clamp(17px,1.7vw,22px);letter-spacing:.01em;color:var(--accent);margin:-6px 0 22px;display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline}
.hero-tag span{opacity:0;transform:translateY(6px);animation:heroTagIn .5s ease forwards}
.hero-tag span:nth-child(1){animation-delay:.15s}.hero-tag span:nth-child(2){animation-delay:.3s}.hero-tag span:nth-child(3){animation-delay:.45s}.hero-tag span:nth-child(4){animation-delay:.6s}.hero-tag span:nth-child(5){animation-delay:.75s}
.hero-tag b{color:#fff;font-weight:700;padding-left:12px;border-left:2px solid rgba(4,203,194,.5);opacity:0;animation:heroTagIn .5s ease .95s forwards}
@keyframes heroTagIn{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.hero-tag span,.hero-tag b{animation:none;opacity:1;transform:none}}
.hero h1{font-size:clamp(40px,3.9vw,56px)}
@media (max-width:720px){.hero-tag{font-size:16px;gap:4px 10px}.hero-tag b{border-left:0;padding-left:0}}
.hero-tag b{flex-basis:100%;border-left:0;padding-left:0;margin-top:2px}
.hero-tag{gap:4px 10px}
.hero-tag i{font-style:normal;color:rgba(4,203,194,.55);margin-left:6px;font-weight:500}
.hero-tag{font-size:clamp(16px,1.42vw,20px);gap:4px 8px}
.hero-tag i{margin-left:4px}

/* Hero headline animation: words rise in one by one; "Best" gets an underline sweep; "Research" keeps a slow light sweep */
.hero-h1 .w{display:inline-block;opacity:0;transform:translateY(.35em);animation:hwIn .7s cubic-bezier(.2,.8,.2,1) forwards}
.hero-h1 .w:nth-child(1){animation-delay:.05s}.hero-h1 .w:nth-child(2){animation-delay:.18s}.hero-h1 .w:nth-child(3){animation-delay:.31s}.hero-h1 .w:nth-child(4){animation-delay:.44s}.hero-h1 .w:nth-child(5){animation-delay:.57s}.hero-h1 .w:nth-child(6){animation-delay:.7s}
@keyframes hwIn{to{opacity:1;transform:none}}
.hero-h1 .best{position:relative;color:var(--accent)}
.hero-h1 .best::after{content:"";position:absolute;left:0;right:0;bottom:.02em;height:.08em;border-radius:2px;background:linear-gradient(90deg,var(--accent),#7ff3ec);transform:scaleX(0);transform-origin:left;animation:bestLine .8s cubic-bezier(.2,.8,.2,1) 1.05s forwards}
@keyframes bestLine{to{transform:scaleX(1)}}
.hero-h1 .shine{background:linear-gradient(100deg,var(--accent) 0%,var(--accent) 40%,#d9fffc 50%,var(--accent) 60%,var(--accent) 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 4.5s ease-in-out 1.6s infinite;padding-right:.06em}
@keyframes shine{0%{background-position:100% 0}60%,100%{background-position:-30% 0}}
@media (prefers-reduced-motion:reduce){.hero-h1 .w{animation:none;opacity:1;transform:none}.hero-h1 .best::after{animation:none;transform:none}.hero-h1 .shine{animation:none}}
.hero .hero-h1 em.s.shine{color:transparent}

/* Wordmark in Michroma (closest free match to the brand display face): uppercase, wide */
.rc-chrome .logo-word{font-family:'Michroma','Space Grotesk',sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.02em;font-size:16px;line-height:1}
header.rc-chrome .logo-word{font-size:16px}
footer.rc-chrome .flogo .logo-word{font-size:17px}
.rc-chrome .logo-word span{font-weight:400}
.rc-chrome .logo-sub{letter-spacing:.3em;margin-top:7px}
@media (max-width:720px){header.rc-chrome .logo-word{font-size:14px}}
/* Michroma only ships one (light) weight: thicken it so it matches the heavy brand sample */
.rc-chrome .logo-word{-webkit-text-stroke:.055em currentColor;paint-order:stroke fill;letter-spacing:.035em}
.rc-chrome .logo-word span{-webkit-text-stroke-color:var(--accent)}
header.rc-chrome .logo-word{font-size:14.5px}
header.rc-chrome .logo{margin-right:28px;flex:none}
header.rc-chrome .nav-links{gap:26px}
@media (max-width:1200px) and (min-width:1081px){header.rc-chrome .nav-links{gap:18px;font-size:14px}}
.rc-chrome .nav-signin{margin-left:14px}

/* Typing caret after the rotating headline word */
.hero-h1 .caret{display:inline-block;width:.06em;height:.82em;margin-left:.04em;background:var(--accent);vertical-align:-.06em;animation:caretBlink 1s steps(1) infinite}
@keyframes caretBlink{50%{opacity:0}}
.hero-h1 #heroWord{display:inline-block;min-width:.2em}
@media (prefers-reduced-motion:reduce){.hero-h1 .caret{display:none}}
/* Headline: fixed two lines on desktop (break after "System"), natural wrap on phones */
.hero .hero-h1{text-wrap:wrap;font-size:clamp(38px,3.55vw,52px)}
@media (max-width:720px){.hero .hero-h1 br.hb{display:none}.hero .hero-h1{font-size:clamp(34px,9vw,44px)}}

/* Brand display face: Michroma (free, SIL OFL) for the wordmark and the Research Centric OPS name.
   Netron was trialled but is personal-use only; swap in a licensed copy here if one is bought. */
.rc-chrome .logo-word{font-family:'Michroma',sans-serif;letter-spacing:.03em;word-spacing:.12em}
.rc-chrome .logo-sub{font-family:'Michroma',sans-serif;font-weight:400;letter-spacing:.14em;font-size:8.5px}
.flow-bar .bar-brand,.mock-bar .bar-brand{font-family:'Michroma',sans-serif;font-weight:400;letter-spacing:.03em;font-size:10px;text-transform:uppercase}
.rc-chrome .logo-word{-webkit-text-stroke:.05em currentColor;paint-order:stroke fill}
.rc-chrome .logo-word span{-webkit-text-stroke-color:var(--accent)}
header.rc-chrome .logo-word{font-size:16px}

/* Hero choreography v2: sequence steps wait for the headline, then follow the product panel */
.hero-tag span,.hero-tag b{opacity:0;transform:translateY(6px);animation:none}
.hero-tag.go span{animation:heroTagIn .5s ease forwards}
.hero-tag.go span:nth-child(1){animation-delay:0s}.hero-tag.go span:nth-child(2){animation-delay:.1s}.hero-tag.go span:nth-child(3){animation-delay:.2s}.hero-tag.go span:nth-child(4){animation-delay:.3s}.hero-tag.go span:nth-child(5){animation-delay:.4s}
.hero-tag.go b{animation:heroTagIn .5s ease .6s forwards}
.hero-tag span{position:relative;color:rgba(4,203,194,.6);transition:color .5s ease}
.hero-tag span::after{content:"";position:absolute;left:0;right:1.3em;bottom:-5px;height:2px;border-radius:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.hero-tag span:last-of-type::after{right:0}
.hero-tag span.on{color:#fff}
.hero-tag span.on::after{transform:scaleX(1)}
.hero-h1 .caret{transition:opacity .5s ease}
.hero-h1 .caret.done{opacity:0;animation:none}
.hero .hero-h1{font-size:clamp(34px,3.1vw,45px)}
@media (max-width:720px){.hero .hero-h1{font-size:clamp(30px,8.4vw,40px)}}
@media (prefers-reduced-motion:reduce){.hero-tag span,.hero-tag b{opacity:1;transform:none;animation:none}.hero-tag span::after{transition:none}}
.hero-h1 .caret.done{width:0;margin:0}

/* Sequence block hugs its content so "All in One Platform" centres under the steps */
.hero-tag{display:inline-flex;max-width:100%}
.hero-tag b{text-align:center}

/* Header fit with the wider Michroma wordmark: keep every menu item on one line */
header.rc-chrome .logo-word{font-size:13px}
header.rc-chrome .logo-sub{font-size:7.6px}
header.rc-chrome .logo{margin-right:20px}
.rc-chrome .nav-links>a,.rc-chrome .dd-btn,.rc-chrome .nav-cta>a{white-space:nowrap}
header.rc-chrome .nav-links{gap:22px}
header.rc-chrome .nav-cta{gap:10px;flex:none}
@media (max-width:1320px) and (min-width:1081px){header.rc-chrome .nav-links{gap:16px;font-size:14px}.rc-chrome .nav-signin{display:none}}
@media (max-width:720px){header.rc-chrome .logo-word{font-size:13px}}

/* Hero: less empty space at the top so the whole hero fits one screen */
.hero{padding:104px 0 64px}
@media (max-width:720px){.hero{padding:100px 0 56px}}

/* Bold brand lockup for the product name, reused everywhere the name appears as a brand */
.brand-name,.rc-chrome .logo-sub,.flow-bar .bar-brand,.mock-bar .bar-brand{font-family:'Michroma',sans-serif;font-weight:400;text-transform:uppercase;-webkit-text-stroke:.045em currentColor;paint-order:stroke fill}
.brand-name{letter-spacing:.05em;font-size:.86em;color:#fff}
header.rc-chrome .logo-sub{font-size:8.2px;letter-spacing:.12em;color:var(--on-dark-body)}
footer.rc-chrome .flogo .logo-sub{font-size:9px}
.flow-bar .bar-brand,.mock-bar .bar-brand{font-size:10.5px;letter-spacing:.05em;color:#fff}
a.pill .brand-name{margin-right:2px}

/* "One Platform" label glides under the lit step */
.hero-tag b{text-align:left}
.hero-tag b .op-label{display:inline-block;opacity:1;animation:none;color:#fff;transition:transform .7s cubic-bezier(.2,.8,.2,1);white-space:nowrap}
.hero-tag b .op-label::after{display:none}
.hero-tag:not(.go) b .op-label{transition:none}
@media (prefers-reduced-motion:reduce){.hero-tag b .op-label{transition:none}}
.hero-tag b span.op-label,.hero-tag.go b span.op-label{animation:none;opacity:1}

/* Back-to-top arrow (centred, bottom of the screen) */
.to-top{position:fixed;left:50%;bottom:24px;z-index:990;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:#fff;background:rgba(5,38,36,.92);border:1px solid rgba(4,203,194,.45);box-shadow:0 10px 30px rgba(0,0,0,.35),0 0 0 4px rgba(4,203,194,.08);backdrop-filter:blur(8px);opacity:0;pointer-events:none;transform:translate(-50%,16px);transition:opacity .35s,transform .35s cubic-bezier(.2,.8,.2,1),background .2s,border-color .2s}
.to-top.show{opacity:1;pointer-events:auto;transform:translate(-50%,0)}
.to-top:hover{background:#04524e;border-color:#04cbc2}
.to-top:hover svg{animation:toTopNudge .8s ease-in-out infinite}
.to-top:focus-visible{outline:2px solid #04cbc2;outline-offset:3px}
@keyframes toTopNudge{50%{transform:translateY(-3px)}}
@media (max-width:640px){.to-top{bottom:16px;width:36px;height:36px}}
@media (prefers-reduced-motion:reduce){.to-top,.to-top:hover svg{transition:none;animation:none}}

/* Header wordmark: "RESEARCH COPS" stays still; the tagline words drop out of it on load */
header.rc-chrome .logo-word i{font-style:normal}
header.rc-chrome .logo-sub .ls,header.rc-chrome .logo-sub .ls-cap,header.rc-chrome .logo-sub .ls-tail{display:inline-block}

/* NEW pill sits under the hero checklist */
.hero .pill.hero-pill{margin:26px 0 0}
.hero .hero-meta{margin-top:30px}
@media (max-width:640px){.hero .pill.hero-pill{display:block;border-radius:16px;padding:12px 16px;line-height:1.7}.hero .pill.hero-pill b{display:inline-block;margin-right:8px;line-height:1.3}.hero .pill.hero-pill .brand-name{margin-right:4px}}

/* Mobile menu: actions first, collapsible groups */
.mobile-menu .mm-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:6px 0 10px}
.mobile-menu .mm-actions .btn{justify-content:center;border-bottom:0;padding:12px 14px}
.mobile-menu.rc-chrome .mm-actions a{border-bottom:0}
.mobile-menu .mm-d{border-bottom:1px solid var(--line-dark)}
.mobile-menu .mm-d summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:16px 0;font:600 16px var(--display, 'Space Grotesk'),sans-serif;color:#fff}
.mobile-menu .mm-d summary::-webkit-details-marker{display:none}
.mobile-menu .mm-d summary::after{content:"";width:9px;height:9px;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(45deg);transition:transform .2s;margin-right:4px}
.mobile-menu .mm-d[open] summary::after{transform:rotate(-135deg)}
.mobile-menu .mm-d a{display:block;padding:11px 0 11px 14px;font-size:15px}
.mobile-menu .mm-d a:last-child{border-bottom:0;margin-bottom:8px}

/* Footer tagline in the hero's style: accent "Best" with underline, serif "Research Projects" */
footer.rc-chrome .ftag{font:600 22px/1.3 var(--display,'Space Grotesk'),sans-serif;letter-spacing:-.02em;color:#fff;max-width:340px}
footer.rc-chrome .ftag .best{position:relative;color:var(--accent);white-space:nowrap}
footer.rc-chrome .ftag .best::after{content:"";position:absolute;left:0;right:0;bottom:-.04em;height:.09em;border-radius:2px;background:linear-gradient(90deg,var(--accent),#7ff3ec)}
footer.rc-chrome .ftag em.s{font-size:1.12em;color:var(--accent)}
/* Footer alignment: column headings line up with the middle of the logo; room for the back-to-top arrow at the very bottom */
@media (min-width:961px){footer.rc-chrome .fgrid>div:not(:first-child){padding-top:16px}}
footer.rc-chrome .ftag{margin-top:4px}
@media (max-width:768px){footer.rc-chrome{padding-bottom:72px}}
/* Footer step line: a quiet version of the hero sequence, one step lit at a time */
footer.rc-chrome .fsteps{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:4px 7px;margin:18px 0 0;padding-bottom:24px;max-width:360px;font:500 12.5px/1.4 var(--display,'Space Grotesk'),sans-serif;color:rgba(4,203,194,.55)}
footer.rc-chrome .fsteps span{position:relative;transition:color .4s}
footer.rc-chrome .fsteps span.on{color:#fff}
footer.rc-chrome .fsteps span.on::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;border-radius:2px;background:var(--accent)}
footer.rc-chrome .fsteps i{font-style:normal;color:rgba(4,203,194,.4)}
footer.rc-chrome .fsteps .fop{position:absolute;left:0;bottom:0;font:600 12px/1 var(--display,'Space Grotesk'),sans-serif;color:#fff;letter-spacing:.02em;white-space:nowrap;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
footer.rc-chrome .fsteps{font-size:11.5px;gap:4px 5px;letter-spacing:-.005em;flex-wrap:nowrap;white-space:nowrap}
footer.rc-chrome .fsteps .fop{font-size:11.5px}
@media (max-width:360px){footer.rc-chrome .fsteps{font-size:10.4px;gap:3px 4px}footer.rc-chrome .fsteps .fop{font-size:10.4px}}