/* Relations Group case studies. Colours and type from the RG Brand Guidelines v1.0 (Sept 2026):
   Relations Blue #0F77AE, Yellow #F2ED4D, Green #3DA99C, Roboto. Light only, to match relationsgroup.co.uk. */
:root{color-scheme:light;--ground:#FFFFFF;--surface:#F5F9FC;--sunk:#E4EEF5;--ink:#222222;--body:#3A3A3A;--mute:#6E6E6E;--rule:#D5E3EC;
--blue:#0F77AE;--blue-dark:#0B5E8A;--yellow:#F2ED4D;--green:#3DA99C;--tint:#EEF5FA;
--accent:#0F77AE;--teal:#0F77AE;--teal-soft:#EEF5FA;--bar1:#B9D6E8;--bar2:#0F77AE;--bar3:#3DA99C;--bar4:#0B5E8A}
*{box-sizing:border-box}
html{background:#FFFFFF}
body{margin:0;background:var(--ground);color:var(--body);font:300 17px/1.65 Roboto,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}
b,strong{font-weight:500}
main{max-width:920px;margin:0 auto;padding-inline:16px;padding-block:40px 72px;display:grid;gap:44px}
h1,h2,h3{font-family:Roboto,Arial,sans-serif;color:var(--blue);margin:0;text-wrap:balance}
h1{font-weight:700;font-size:clamp(2rem,5vw,2.8rem);line-height:1.1;letter-spacing:-.01em}
h2{font-weight:500;font-size:1.5rem;line-height:1.2}
h3{font-weight:500;font-size:1.1rem}
p{margin:0;max-width:66ch}
.eyebrow{font:500 12px/1.2 Roboto,Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--green)}
header{display:grid;gap:14px}.lede{font-size:1.15rem;color:var(--ink)}
header::after{content:"";display:block;width:88px;height:5px;background:var(--yellow);border-radius:3px;margin-top:4px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:12px;overflow:hidden}
.stat{background:var(--ground);padding:18px}.stat b{display:block;font:700 1.7rem/1.1 Roboto,Arial,sans-serif;color:var(--blue);font-variant-numeric:tabular-nums}
.stat span{font-size:.85rem;color:var(--mute)}
section{display:grid;gap:16px}
.logos{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0}
.logos li{background:var(--tint);border:0;border-left:4px solid var(--blue);border-radius:6px;padding:10px 14px;display:grid;gap:2px;min-width:0}
.logos b{color:var(--ink);font-weight:500;font-size:.98rem}.logos small{color:var(--mute);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em}
.story{background:var(--surface);border:1px solid var(--rule);border-radius:12px;padding:22px;display:grid;gap:12px}
.story dl{margin:0;display:grid;grid-template-columns:8.5rem 1fr;gap:10px 16px}
.story dt{font:500 12px/1.7 Roboto,Arial,sans-serif;text-transform:uppercase;letter-spacing:.1em;color:var(--blue)}
.story dd{margin:0;color:var(--ink)}
.nums{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:14px;color:var(--mute);border-top:1px solid var(--rule);padding-top:12px;font-variant-numeric:tabular-nums}
.nums b{color:var(--ink)}
.more{color:var(--blue);font-weight:500;text-decoration:none}.more:hover{text-decoration:underline}
a{color:var(--blue)}
.chart{background:var(--surface);border:1px solid var(--rule);border-radius:12px;padding:22px;display:grid;gap:14px}
.row{display:grid;grid-template-columns:10rem 1fr;gap:12px;align-items:center}
.track{height:30px;background:var(--sunk);border-radius:4px;position:relative;overflow:hidden}
.fill{height:100%;border-radius:4px;min-width:3px}
.row .v{font-weight:500;font-size:14px;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.row label{font-size:.92rem;color:var(--ink)}
.roi{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;border-top:1px solid var(--rule);padding-top:12px}
.roi b{font:700 2.3rem/1 Roboto,Arial,sans-serif;color:var(--blue)}
.fine{font-size:.82rem;color:var(--mute)}
/* listen */
.audio{background:var(--blue);color:#FFFFFF;border-radius:14px;padding:22px;display:grid;gap:14px}
.audio .eyebrow{color:var(--yellow)!important}
.clip{display:grid;gap:8px;padding-top:14px;border-top:1px solid rgba(255,255,255,.22)}.audio .eyebrow+.clip{border-top:0;padding-top:0}
.clip>b{font-weight:500;color:#FFFFFF}
.player{display:grid;grid-template-columns:46px 1fr auto;gap:14px;align-items:center}
.play{width:46px;height:46px;border-radius:50%;border:0;background:var(--yellow);cursor:pointer;display:grid;place-items:center;padding:0}
.play::before{content:"";width:0;height:0;border-style:solid;border-width:9px 0 9px 15px;border-color:transparent transparent transparent #111;margin-left:4px}
.play.on::before{width:14px;height:17px;border:0;margin:0;background:linear-gradient(90deg,#111 0 5px,transparent 5px 9px,#111 9px 14px)}
.play:focus-visible{outline:3px solid #FFFFFF;outline-offset:2px}
.wave{display:flex;align-items:center;gap:3px;height:44px;cursor:pointer}
.wave i{flex:1;background:#FFFFFF;opacity:.45;border-radius:2px;transition:opacity .1s,background .1s}
.wave i.on{background:var(--yellow);opacity:1}
.time{font-size:13px;font-variant-numeric:tabular-nums;color:rgba(255,255,255,.85);white-space:nowrap}
.clip video{width:100%;border-radius:8px;background:#000;display:block}
.audio small{opacity:.8}
/* call to action */
.cta{background:var(--tint);border-left:6px solid var(--yellow);border-radius:12px;padding:24px;display:grid;gap:12px;justify-items:start}
.btn{background:var(--yellow);color:#111;padding:12px 26px;border-radius:50px;text-decoration:none;font-weight:500}
.btn:hover{background:#E8E23A}
@media (max-width:560px){.row{grid-template-columns:1fr}.story dl{grid-template-columns:1fr}.story dt{margin-top:6px}.player{grid-template-columns:46px 1fr}.time{grid-column:2}}

/* frame */
.rg-bar{background:var(--blue);color:#FFFFFF}
.rg-bar-in{max-width:920px;margin:0 auto;padding:12px 16px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.rg-bar a{color:#FFFFFF;text-decoration:none;font-weight:400}
.rg-bar nav{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.rg-logo{display:flex;align-items:center;gap:10px;font-weight:500!important;font-size:1.05rem}
.rg-logo img{height:40px;width:auto;display:block}
.rg-book{background:var(--yellow);color:#111!important;padding:9px 20px;border-radius:50px;font-weight:500!important}
.rg-foot{background:var(--blue);color:rgba(255,255,255,.85);font-size:.9rem}
.rg-foot a{color:#FFFFFF}
.rg-search{display:flex;flex-wrap:wrap;gap:10px}
.rg-search input[type=search]{flex:1;min-width:220px;padding:11px 14px;border:1px solid var(--rule);border-radius:50px;background:var(--ground);color:var(--ink);font:inherit}
.rg-search select{padding:11px 14px;border:1px solid var(--rule);border-radius:50px;background:var(--ground);color:var(--ink);font:inherit}
.rg-search button{padding:11px 24px;border:0;border-radius:50px;background:var(--blue);color:#FFFFFF;font:inherit;font-weight:500;cursor:pointer}
.rg-results{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.rg-results .card{display:grid;gap:6px;background:var(--surface);border:1px solid var(--rule);border-top:4px solid var(--blue);border-radius:10px;padding:16px;color:inherit;text-decoration:none}
.rg-results .card:hover{border-top-color:var(--yellow)}
.rg-results .moment{font:500 1.1rem/1.25 Roboto,Arial,sans-serif;color:var(--blue)}
.rg-results .who{font-size:.9rem;color:var(--mute)}