/* ============================================================
   EVOTEQ subpage overrides — force the traq / our-projects pages to use the
   SAME pills, titles, subtitles and buttons as the homepage.
   High-specificity (html body.evoteq …) so they beat the pages' own !important rules,
   which live in <style> blocks later in the document.
   ============================================================ */

/* ---- eyebrow pills → homepage .ev-eyebrow ---- */
html body.evoteq [class*="__pill"],
html body.evoteq [class*="__kicker"],
html body.evoteq [class*="__eyebrow"]{
  font-family:var(--fh)!important; font-weight:700!important; font-size:16px!important;
  letter-spacing:.01em!important; text-transform:capitalize!important;
  padding:11px 24px!important; border-width:1px!important; border-style:solid!important;
  border-radius:999px!important; line-height:1!important;
  /* many subpage pills are plain inline <span>s — as inline boxes their vertical
     border/padding don't reserve space, so the top border gets clipped/overlapped.
     inline-block makes the pill a full, intact rounded outline. */
  display:inline-block!important; vertical-align:middle!important;
}

/* Every subpage pill carries data-tq-fade directly, and that rule sets
   `will-change:opacity,transform` and never releases it — not on .tq-in, and not in the
   reduced-motion block either. A permanently promoted layer rasterizes on its own pixel
   grid, and when its bounds round inward the top row of a rounded stroke is shaved off:
   the pill loses its lid. It is device-dependent (display scaling, GPU, and above all the
   OS "reduce motion" setting), which is why one machine shows it and another doesn't.
   Release the hint in every state, not just the settled one. */
html body.evoteq [data-tq-fade],
html body.evoteq [class*="__pill"],
html body.evoteq [class*="__kicker"],
html body.evoteq [class*="__eyebrow"]{ will-change:auto!important; }

/* ---- section + hero titles → homepage sizes ---- */
html body.evoteq [class$="__title"]{
  font-family:var(--fh)!important; font-weight:600!important;
  font-size:clamp(28px,3.4vw,46px)!important; line-height:1.08!important; letter-spacing:-.01em!important;
}
html body.evoteq [class*="s1__title"]{ font-size:clamp(30px,4.4vw,56px)!important; }  /* hero a touch larger */
html body.evoteq .ev-newscard .ev-newscard__title{ font-size:clamp(17px,1.4vw,22px)!important; line-height:1.25!important; letter-spacing:normal!important; }  /* newsroom cards = homepage size (the [class$=__title] rule was enlarging them) */

/* ---- subtitles / leads → homepage lead ---- */
html body.evoteq [class$="__sub"],
html body.evoteq [class$="__lead"],
html body.evoteq [class$="__intro"]{ font-size:clamp(16px,1.3vw,19px)!important; line-height:1.65!important; }

/* ---- buttons: no gap + icon box the SAME height as the text box ---- */
html body.evoteq [class*="__cta"]{ gap:0!important; }
html body.evoteq [class*="__ctatext"]{ height:56px!important; display:inline-flex!important; align-items:center!important; padding:0 30px!important; }
html body.evoteq [class*="__ctaicon"]{ width:56px!important; height:56px!important; }

/* ---- section patterns: more visible + fixed (parallax) — every page prefix
   (tq/tg/tl/tf/ta/op); the "-s" guard skips the header's .ev-mega__topo panel ---- */
html body.evoteq [class*="-s"][class*="__topo"]{ opacity:.5!important; mix-blend-mode:screen!important; background-attachment:fixed!important; }

/* ---- CTA sections (…-s8 on traq pages, op-s6 on our-projects): keep each section's OWN colour,
   show the topo pattern a bit stronger over it, and remove the decorative circles/rings ---- */
html body.evoteq [class*="-s8"][class*="__topo"],
html body.evoteq [class*="op-s6"][class*="__topo"]{ opacity:.6!important; mix-blend-mode:screen!important; background-attachment:fixed!important; }
html body.evoteq [class$="-s8"]::before, html body.evoteq [class$="-s8"]::after,
html body.evoteq [class$="op-s6"]::before, html body.evoteq [class$="op-s6"]::after{ display:none!important; background:none!important; }

/* ---- traqpharma ONLY (body.tq-pharma): scroll text-reveal in TURQUOISE, not pink.
   Words start light aqua (#85cec5) and light up to each section's own ink
   (white on the dark teal sections, dark teal #1a574f on the white sections). ---- */
html body.evoteq.tq-pharma .ev-word{ color:#85cec5; }
html body.evoteq.tq-pharma .ev-word.is-lit{ color:inherit; }
/* CTA (s8): the decorative topo overlay is a burgundy image — hue-shift it to turquoise */
html body.evoteq.tq-pharma [class*="-s8"][class*="__topo"]{ filter:hue-rotate(182deg) saturate(1.25); }