/* =====================================================================================================
   Brand system layer for tom-riley.co.uk: every old component restyled to the rileymarketing.co.uk system.
   Loaded after the page CSS. Tokens come from tr.css.
   ===================================================================================================== */
body.tr{--r:22px}

/* ---------- 1. labels and eyebrows become mono chips with a blue dot ---------- */
body.tr :is(.v2-label,.v2-cs-label,.sp-tagline,.bp-tag,.tp-tag,.bl-tag,.bl-label,.fam-tag,.v2-funnel-tag,.v2-funnel-stage,
  .v2-process-tag,.sh-kicker,.exp-tag,.sg-label,.fa-toc-title,.li-bestfor-label,.li-why-label){
  display:inline-flex!important;align-items:center;gap:8px;width:fit-content;max-width:100%;
  padding:5px 12px 5px 10px!important;border:1px solid var(--line)!important;border-radius:999px!important;
  background:rgba(245,244,241,.03)!important;font-family:var(--mono)!important;font-size:10.5px!important;font-weight:400!important;
  letter-spacing:.14em!important;text-transform:uppercase!important;color:var(--mute)!important;line-height:1.45!important;text-decoration:none!important}
body.tr :is(.v2-label,.v2-cs-label,.sp-tagline,.bp-tag,.tp-tag,.bl-tag,.bl-label,.fam-tag,.v2-funnel-tag,.v2-funnel-stage,
  .v2-process-tag,.sh-kicker,.exp-tag,.sg-label,.fa-toc-title,.li-bestfor-label,.li-why-label)::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--hot);box-shadow:0 0 10px var(--hot);flex:none}
body.tr :is(.bp-meta,.tp-meta,.bl-card-meta){font-family:var(--mono)!important;letter-spacing:.12em;text-transform:uppercase;font-size:11px!important;color:var(--mute)!important}
body.tr .bp-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
body.tr .bp-back{font-family:var(--mono);letter-spacing:.12em;color:var(--ink-2)!important}

/* ---------- 2. headings: large, tight, weight 500 like the reference ---------- */
body.tr .v2-h2{font-size:clamp(36px,4.4vw,64px)!important;font-weight:500!important;letter-spacing:-.045em!important;line-height:1.04!important}
body.tr .sp-h2{font-size:clamp(30px,3.4vw,48px)!important;font-weight:500!important;letter-spacing:-.04em!important;line-height:1.06!important}
body.tr :is(.bp-title,.tp-title){font-size:clamp(38px,4.6vw,64px)!important;font-weight:600!important;letter-spacing:-.04em!important;line-height:1.03!important}
body.tr :is(.sp-hero h1,.bl-header h1,.sh-header h1,.sm-header h1){font-weight:600!important;letter-spacing:-.04em!important;line-height:1.03!important}
body.tr :is(.bp-cta,.sp-cta,.tp-cta) h2,body.tr .v2-form-h2{font-size:clamp(36px,5vw,72px)!important;font-weight:500!important;letter-spacing:-.05em!important;line-height:1!important}
body.tr :is(.v2-service-title,.proc-h,.v2-cs-client,.sh-card-title,.v2-audit-card-title,.fam-h){letter-spacing:-.025em!important}
body.tr .v2-cs-client{font-size:clamp(30px,3vw,44px)!important;font-weight:500!important;letter-spacing:-.04em!important}

/* homepage: section heads sit left, like the reference (offer and booking sections stay centred) */
body.tr.home :is(.v2-familiar-inner,.v2-process-inner,.v2-section-hdr,.v2-search-header,.v2-industries-section,.v2-testimonials-section .v2-section-hdr){text-align:left!important}
body.tr.home :is(.v2-centered,.v2-familiar-sub,.v2-process-sub,.v2-industries-sub,.v2-section-sub,.v2-search-intro){text-align:left!important;margin-left:0!important;margin-right:auto!important}
body.tr.home :is(.v2-familiar-sub,.v2-process-sub,.v2-industries-sub,.v2-section-sub){font-size:16px!important;color:var(--mute)!important;max-width:620px!important}

body.tr.home .v2-h2:not(.v2-audit-intro .v2-h2){text-align:left!important;margin-left:0!important;margin-right:auto!important}
body.tr.home .v2-faq-inner{max-width:1180px!important;margin-left:auto!important;margin-right:auto!important}
body.tr .v2-services-grid{border:0!important;background:none!important}
body.tr :is(.v2-process-icon,.v2-audit-icon){border-radius:12px!important}

/* ---------- 3. cards: dark rounded panels, faint line, blue glow on hover ---------- */
body.tr :is(.sp-pain-card,.sp-approach-card,.sp-signal-card,.sp-midcta-card,.sh-card,.bl-card,.v2-cs-card,.v2-tcard,.v2-audit-card,
  .v2-aiproof-card,.v2-fam-item,.v2-service-card,.v2-process-card,.tools-card,.fa-toc,.v2-ai-panel,.tool-metric,.fa-stat,.st-hero-cell){
  background:var(--panel)!important;border:1px solid var(--line)!important;border-radius:var(--r)!important;box-shadow:none!important;
  transition:border-color .3s,box-shadow .3s,transform .3s}
body.tr :is(.sp-pain-card,.sp-approach-card,.sp-signal-card,.sh-card,.bl-card,.v2-cs-card,.v2-tcard,.v2-audit-card,.v2-aiproof-card,
  .v2-fam-item,.v2-service-card,.v2-process-card,.tools-card):hover{border-color:rgba(52,120,255,.45)!important;box-shadow:0 30px 80px -40px var(--hot-glow)!important}
body.tr .v2-audit-card-highlight{background:linear-gradient(140deg,rgba(52,120,255,.22),var(--panel) 60%)!important;border-color:rgba(52,120,255,.45)!important}
body.tr :is(.v2-services-grid,.v2-familiar-grid,.v2-audit-grid,.v2-process-grid,.tools-grid,.st-hero){gap:12px!important}
body.tr .st-hero{border:0!important;background:none!important}
body.tr :is(.v2-service-num,.v2-process-tag){font-family:var(--mono)!important}
body.tr .v2-service-num{color:var(--hot-2)!important;font-size:11px!important;letter-spacing:.12em}
body.tr .bl-card-thumb img,body.tr .bl-card img{border-radius:14px}
body.tr .sp-midcta-card{background:linear-gradient(130deg,rgba(52,120,255,.16),var(--panel) 50%)!important;border-color:rgba(52,120,255,.35)!important}

/* ---------- 4. numbers: white-to-grey gradient, tight ---------- */
body.tr :is(.st-hero-num,.fa-stat-num,.v2-process-bignum,.tool-metric-val,.v2-ai-stat,.tool-score-num){
  background:linear-gradient(180deg,#fff 30%,#8E8C93)!important;-webkit-background-clip:text!important;background-clip:text!important;
  color:transparent!important;-webkit-text-fill-color:transparent!important;font-weight:700!important;letter-spacing:-.04em!important}
body.tr .v2-process-bignum{opacity:.35}
body.tr .st-hero-label,body.tr .fa-stat-label,body.tr .tool-metric-label{color:var(--mute)!important}

/* ---------- 5. FAQs: rounded rows, plus/minus circle, blue when open ---------- */
body.tr :is(.v2-faq-item,.sp-faq-item){background:var(--panel)!important;border:1px solid var(--line)!important;border-radius:18px!important;
  margin:0 0 10px!important;padding:0!important;overflow:hidden;transition:border-color .3s,box-shadow .3s}
body.tr :is(.v2-faq-item,.sp-faq-item)[open]{border-color:rgba(52,120,255,.55)!important;box-shadow:0 20px 60px -30px var(--hot-glow)}
body.tr :is(.v2-faq-item,.sp-faq-item)>summary{display:flex!important;align-items:center;justify-content:space-between;gap:20px;
  padding:20px 22px!important;cursor:pointer;list-style:none;font-size:17px;font-weight:500;color:var(--ink)}
body.tr :is(.v2-faq-item,.sp-faq-item)>summary::-webkit-details-marker{display:none}
body.tr :is(.v2-faq-item,.sp-faq-item)>summary::after{content:"+";flex:none;width:30px;height:30px;border-radius:50%;border:1px solid var(--line-2);
  display:grid;place-items:center;font-size:16px;line-height:1;color:var(--ink);transition:background .3s,border-color .3s}
body.tr :is(.v2-faq-item,.sp-faq-item)[open]>summary::after{content:"\2212";background:var(--hot);border-color:var(--hot);box-shadow:0 0 20px var(--hot-glow)}
body.tr :is(.v2-faq-item,.sp-faq-item)>summary .faq-q{margin:0!important;font-size:17px!important;font-weight:500!important;letter-spacing:-.01em!important}
body.tr :is(.v2-faq-item,.sp-faq-item)>:not(summary){padding:0 22px 20px!important;margin:0!important;color:var(--mute)!important;font-size:15.5px;line-height:1.65}
body.tr.home .v2-faq-inner{display:grid!important;grid-template-columns:.8fr 1.2fr;column-gap:70px;align-items:start;text-align:left!important}
body.tr.home .v2-faq-inner>.v2-label{grid-column:1;grid-row:1}
body.tr.home .v2-faq-inner>.v2-h2{grid-column:1;grid-row:2;align-self:start}
body.tr.home .v2-faq-inner>.v2-faq-list{grid-column:2;grid-row:1/span 3;margin-top:0!important}
body.tr .v2-fam-item[open]{border-color:rgba(52,120,255,.55)!important}

/* ---------- 6. call-to-action sections: blue glow, huge heading, like "Your turn" ---------- */
body.tr :is(.bp-cta,.sp-cta,.tp-cta,.v2-form-section,.v2-audit-intro){position:relative;isolation:isolate;
  background:radial-gradient(ellipse 60% 70% at 50% 40%,rgba(52,120,255,.30),rgba(52,120,255,.07) 55%,transparent 78%),var(--bg)!important;
  border-top:1px solid var(--line)!important}
body.tr :is(.bp-cta-inner,.tp-cta-inner){background:transparent!important;border:0!important;box-shadow:none!important}
body.tr :is(.bp-cta,.sp-cta,.tp-cta,.v2-form-section)::before,body.tr :is(.bp-cta,.sp-cta,.tp-cta,.v2-form-section)::after{
  content:"";position:absolute;width:26px;height:26px;border:0 solid rgba(245,244,241,.5);z-index:-1}
body.tr :is(.bp-cta,.sp-cta,.tp-cta,.v2-form-section)::before{top:20px;left:20px;border-top-width:1.5px;border-left-width:1.5px}
body.tr :is(.bp-cta,.sp-cta,.tp-cta,.v2-form-section)::after{bottom:20px;right:20px;border-bottom-width:1.5px;border-right-width:1.5px}
body.tr :is(.bp-cta,.sp-cta,.tp-cta) p,body.tr .v2-form-sub{color:var(--ink-2)!important}
body.tr .v2-sticky-cta{background:rgba(9,9,12,.82)!important;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line)!important}

/* ---------- 7. testimonials ---------- */
body.tr .v2-tcard-quote{color:var(--ink)!important;font-style:normal!important;font-size:16.5px!important;line-height:1.5!important;letter-spacing:-.01em}
body.tr .v2-tcard-stmt{font-weight:600!important;letter-spacing:-.02em}
body.tr .v2-tcard-what{color:var(--mute)!important}

/* ---------- 8. blog articles: type, links, tables, quotes, images ---------- */
body.tr .bp-article{font-size:17px;line-height:1.75;color:var(--ink-2)}
body.tr .bp-article h2{font-size:clamp(28px,2.6vw,36px)!important;font-weight:600!important;letter-spacing:-.035em!important;line-height:1.12!important;color:var(--ink)!important}
body.tr .bp-article h3{color:var(--ink)!important}
body.tr .bp-article strong{color:var(--ink)}
body.tr :is(.bp-article,.sp-section,.tool-about) a:not([class]){color:var(--ink)!important;text-decoration:underline!important;text-decoration-color:var(--hot)!important;text-underline-offset:3px;text-decoration-thickness:1.5px}
body.tr :is(.bp-article,.sp-section) a:not([class]):hover{color:var(--hot-2)!important}
body.tr .bp-article table{border-collapse:separate!important;border-spacing:0;width:100%;border:1px solid var(--line)!important;border-radius:16px;overflow:hidden;background:var(--panel)!important}
body.tr .bp-article :is(th,td){border:0!important;border-top:1px solid var(--line)!important;padding:12px 14px!important;background:transparent!important}
body.tr .bp-article thead th,body.tr .bp-article tr:first-child th{border-top:0!important;background:#16161B!important;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)!important}
body.tr .bp-article blockquote{border-left:3px solid var(--hot)!important;background:var(--panel)!important;border-radius:0 16px 16px 0;padding:16px 20px!important;margin:24px 0!important;color:var(--ink)!important}
body.tr .bp-article img{border-radius:16px}
body.tr .bp-hero img{border:1px solid var(--line)}
body.tr .fa-toc a{color:var(--ink-2)!important}
body.tr .fa-toc a:hover{color:var(--hot-2)!important}

/* ---------- 9. case studies, about and insight pages (old heavy-border style): thin lines, no hard shadows ---------- */
body.tr .border-4{border-width:1px!important}
body.tr .border-2{border-width:1px!important}
body.tr .border-b-4{border-bottom-width:1px!important}
body.tr .border-t-4{border-top-width:1px!important}
body.tr .border-r-4{border-right-width:1px!important}
body.tr .border-l-4{border-left-width:1px!important}
body.tr .border-y-4{border-top-width:1px!important;border-bottom-width:1px!important}
body.tr .border-x-4{border-left-width:1px!important;border-right-width:1px!important}
body.tr :is(.border-black,.border-white){border-color:var(--line-2)!important}
body.tr [class*="shadow-["]{box-shadow:none!important}
body.tr .font-display{font-family:var(--sans)!important;letter-spacing:-.03em}
body.tr :is(.uppercase.tracking-widest,.uppercase.tracking-wider){font-family:var(--mono)!important;letter-spacing:.14em!important;font-weight:400!important}

/* ---------- 10. small bits ---------- */
body.tr .music-desktop{background:rgba(14,14,18,.86)!important;border:1px solid var(--line)!important;border-radius:999px!important;box-shadow:0 20px 50px rgba(0,0,0,.5)!important;backdrop-filter:blur(12px);overflow:hidden}
body.tr .music-desktop :is(button,.music-label){font-family:var(--mono)!important;letter-spacing:.14em;color:var(--ink)!important;background:transparent!important;border-color:var(--line)!important}
body.tr :is(input,select,textarea):not([type=checkbox]):not([type=radio]){border-radius:12px!important;border:1px solid var(--line-2)!important;background:#0B0B0E!important;color:var(--ink)!important;font-family:var(--sans)!important}
body.tr :is(input,select,textarea):focus{outline:0!important;border-color:var(--hot)!important;box-shadow:0 0 0 3px rgba(52,120,255,.25)!important}
body.tr hr{border:0;border-top:1px solid var(--line)}

@media (max-width:900px){
  body.tr.home .v2-faq-inner{grid-template-columns:1fr;row-gap:16px}
  body.tr.home .v2-faq-inner>.v2-faq-list{grid-column:1;grid-row:auto}
}

/* ---------- 11. About page: brand hero, photo, blue blocks restyled ---------- */
.tra-hero{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center;max-width:1240px;margin:0 auto;padding:110px 32px 90px;font-family:var(--sans);color:var(--ink)}
body.tr .tra-hero h1{margin:22px 0 0;font-size:clamp(56px,8vw,120px)!important;line-height:.92!important;font-weight:700!important;letter-spacing:-.05em!important;text-transform:uppercase}
.tra-dot{color:var(--hot);text-shadow:0 0 30px var(--hot-glow)}
.tra-sub{margin:26px 0 0;font-size:19px;line-height:1.55;color:var(--ink-2);max-width:520px}
.tra-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}
.tra-pic{position:relative;aspect-ratio:4/5;border-radius:var(--r);overflow:hidden;border:1px solid var(--line)}
.tra-pic img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.06)}
.tra-pic::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(9,9,12,.25),transparent 30%,transparent 70%,rgba(9,9,12,.55))}
.tra-pic i{position:absolute;z-index:2;width:18px;height:18px;border:0 solid rgba(245,244,241,.65)}
.tra-pic .c1{top:14px;left:14px;border-top-width:1.5px;border-left-width:1.5px}.tra-pic .c2{top:14px;right:14px;border-top-width:1.5px;border-right-width:1.5px}
.tra-pic .c3{bottom:14px;left:14px;border-bottom-width:1.5px;border-left-width:1.5px}.tra-pic .c4{bottom:14px;right:14px;border-bottom-width:1.5px;border-right-width:1.5px}
.tra-pic :is(.lt,.rt){position:absolute;z-index:2;top:18px;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(245,244,241,.8)}
.tra-pic .lt{left:42px;display:flex;gap:7px;align-items:center}.tra-pic .lt::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--hot);box-shadow:0 0 8px var(--hot)}
.tra-pic .rt{right:42px}
body.tr img.tr-bw{filter:grayscale(1) contrast(1.06);border-radius:var(--r)}
body.tr section.bg-primary,body.tr div.bg-primary:is([class*="py-"],[class*="min-h"],[class*="p-8"],[class*="p-10"],[class*="p-12"]){
  background:#000!important;border-color:var(--line)!important;color:var(--ink)!important}
body.tr section.bg-primary :is(.font-black,.text-4xl,.text-5xl,.text-6xl,.text-7xl,.text-8xl){
  background:linear-gradient(180deg,#fff 30%,#8E8C93);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
body.tr section[class*="bg-[#e8449a]"]{background:radial-gradient(ellipse 60% 70% at 50% 40%,rgba(52,120,255,.32),rgba(52,120,255,.07) 55%,transparent 78%),var(--bg)!important;border-top:1px solid var(--line)!important}
@media (max-width:900px){.tra-hero{grid-template-columns:1fr;gap:36px;padding:110px 16px 60px}.tra-pic{max-width:440px}}

/* about page photo: greyscale at rest, full colour with a white glow on hover */
.tra-pic{transition:box-shadow .5s,border-color .5s}
.tra-pic img{transition:filter .6s}
.tra-pic:hover{border-color:rgba(255,255,255,.85);box-shadow:0 0 0 1px rgba(255,255,255,.5),0 0 36px rgba(255,255,255,.4),0 0 110px rgba(255,255,255,.16)}
.tra-pic:hover img{filter:none}
@media (hover:none){.tra-pic img{filter:none}}
/* case study sector badges wrap on phones instead of pushing the page wider */
@media (max-width:640px){body.tr :has(> span.tracking-widest.border-2.shrink-0){flex-wrap:wrap}body.tr span.tracking-widest.border-2.shrink-0{flex-shrink:1;max-width:100%;white-space:normal}}

/* post contents rail: fades out once the article ends, so it never sits over the sections below (guides, related, CTA) */
.fa-toc-rail{transition:opacity .25s}
.fa-toc-rail.tr-gone{opacity:0!important;pointer-events:none}
/* stat-hero grids on phones: cells may shrink, so long numbers never push the page wider than the screen */
@media (max-width:560px){.st-hero{grid-template-columns:1fr 1fr!important}.st-hero-cell{min-width:0;padding:1.2rem 1rem!important}.st-hero-num{font-size:1.55rem!important;overflow-wrap:anywhere}.st-hero-label{overflow-wrap:anywhere}}