/* Brand uplift (reviews/brand-uplift-2026-10-24): Robin's picks of 24 and 25 October 2026, points 1 to 4.
   Loaded last on every page, so these rules settle the type, colour, buttons and links over the older layers.
   !important marks only the declarations that older, more specific rules would otherwise override.
   The values come from the Epic Motion brand guide: one type scale, one job for each accent colour, square corners
   and one link style. The enquiry form keeps its own styles until it is next changed. */
:root{
  --em-ink:#0A0C14;--em-paper:#EDEDED;--em-white:#FFFFFF;
  --em-pink:#FF3B8B;--em-pink-deep:#A62460;--em-pink-light:#FF86B7;
  --em-purple:#7B61FF;--em-purple-deep:#5B44D9;
  --em-teal:#2B6E8F;--em-teal-light:#5FA8C9;
  --em-lilac:#DED8F5;--em-graphite:#484C58;--em-slate:#B0B8C4;
  /* 1A: one scale below the headline: small 15, body 17 and lead 21 px; item headings 24 and 34, section
     headings 62 px on wide screens. */
  --em-small:15px;--em-body:17px;--em-lead:clamp(19px,1.5vw,21px);
  --em-h5:clamp(21px,1.7vw,24px);--em-h3:clamp(26px,2.4vw,34px);--em-h2:clamp(40px,4.4vw,62px);
}
@media (max-width:700px){:root{--em-lead:18px;--em-h3:26px;--em-h2:clamp(34px,9vw,40px)}}

/* 1A, type: letter spacing eases as the size drops (-0.03em for the headline and page titles, -0.025em for
   section headings, -0.02em below), and each kind of text has one size on every page. */
body{font-kerning:normal;font-variant-numeric:proportional-nums;-webkit-font-smoothing:antialiased}
h1,h2,h3{text-wrap:balance}
main p,main li{text-wrap:pretty}
.motion-hero h1,.motion-hero h1 *,.brief-product-copy h1,.brief-product-copy h1 *,.legal-heading h1{letter-spacing:-.03em}
.motion-hero h1{line-height:.92}
.services-clarity h2,.selected-work h2,.firm-about h2,.enquiry h2,.brief-teaser h2,.teaser-inner h2,.brief-film h2,.brief-format h2,.client-newsletter h2,.em-reel__head h3{font-size:var(--em-h2)!important;letter-spacing:-.025em!important;line-height:1.04!important;font-weight:500}
.services-clarity .hybrid-services h3,.rc-case h3,.brief-format h3,.format-notes h3,.format-close h3{font-size:var(--em-h3);letter-spacing:-.02em;line-height:1.12;font-weight:500}
.firm-founder h3,.rc-ledger__title,.legal-body h3{font-size:var(--em-h5);letter-spacing:-.02em;line-height:1.2;font-weight:500}
.legal-body h2{letter-spacing:-.02em}
.services-clarity .hybrid-services .service-description,.rc-case__lead,.motion-hero-copy p,.product-intro,.enquiry-copy>p:not(.content-label),.legal-intro{font-size:var(--em-lead)!important;line-height:1.45!important;letter-spacing:-.005em!important}
.service-outputs li,.service-value>p+p,.rc-case li,.rc-ledger__what,.rc-why li,.firm-founder p,.enquiry-steps li,.teaser-body p,.format-notes p,.format-method p,.client-newsletter p:not(.content-label),.em-reel__lede,.brief-film__heading>p,.format-heading>p{font-size:var(--em-body)!important;line-height:1.55!important}
/* The client lines keep the sizes picked in 2B on 24 October 2026 (17 px on the case cards, 16 px below them). */
.rc-case__note,.rc-film figcaption,.rc-films .cinema-context #film-description{font-size:var(--em-small);line-height:1.55}
.footer-top>p,.footer-top>a:last-child{font-size:var(--em-small)!important}
.content-label,.legal-heading .content-label,.client-newsletter .content-label{font-size:16px;font-weight:500}
.site-header nav a,.header-enquiry{font-weight:500}
@media (min-width:701px){.site-header nav a,.header-enquiry{font-size:15px}}
@media (max-width:700px){.services-clarity .hybrid-services h3,.rc-case h3,.brief-format h3,.format-notes h3,.format-close h3{letter-spacing:-.01em}}

/* 3A: the three smaller cases read in the same order as the two large ones: service, title, client, story. */
.rc-ledger__title{color:var(--em-ink);margin:0}
.rc-ledger>li>.rc-ledger__who{margin-bottom:8px}

/* 2A, colour: every accent has one job. Each case names its service in that service's colour, in the shade that
   reads on white (deep pink 6.9:1, deep purple 6.4:1, teal 5.6:1); the rule above it keeps the full colour. */
[data-service=strategy]{--service-colour:var(--em-pink);--service-text:var(--em-pink-deep)}
[data-service=skills]{--service-colour:var(--em-purple);--service-text:var(--em-purple-deep)}
[data-service=communications]{--service-colour:var(--em-teal);--service-text:var(--em-teal)}
.rc-case__svc,.rc-ledger__svc,.rc-ledger__svc [data-service]{color:var(--service-text,var(--em-ink))}
/* The AI Communications band on the AI Brief page takes its service's teal, so pink on that page means AI Brief and
   its Subscribe button. White text on teal is 5.6:1, and the band keeps its ink focus ring (3.5:1). */
.client-newsletter{background:var(--em-teal);color:var(--em-white)}
.client-newsletter h2,.client-newsletter p,.client-newsletter .content-label{color:var(--em-white)}
.client-newsletter .button{background:var(--em-ink);color:var(--em-paper);border-color:var(--em-ink)}
/* Keyboard focus is purple on ink, paper and white; the homepage header, hero, footer, films and Reel used pink. Rings on
   lilac, teal and pink stay ink, the film's Play button keeps its paper ring over the picture, and the enquiry form keeps
   its own. */
:focus-visible,[data-hero-mode="settle"] #hero-motion-control:focus-visible,.film-player :focus-visible,.em-reel__toggle:focus-visible,.em-reel__chapters a:focus-visible{outline-color:var(--em-purple)}
/* The enquiry section sits on ink, so it no longer runs on from About on the same paper and the homepage alternates
   ink and paper from the hero down. Only the left column changes: slate label and steps, paper heading and intro, and
   the dark rule between the steps. The form card and everything in it keep their own colours. */
.enquiry{background:var(--em-ink)}
.enquiry-copy{color:var(--em-paper)}
.enquiry-copy .content-label,.enquiry-steps li{color:var(--em-slate)}
#enquiry-title,.enquiry-copy>p:not(.content-label),.enquiry-steps strong{color:var(--em-paper)}
.enquiry-steps li{border-top-color:#3f424e}

/* 4A, buttons and links: square corners throughout, one size for the main buttons, and one link style with a thin
   underline set clear of the letters that thickens on hover and keyboard focus. On phones the header button is 44 px
   tall, like the links beside it. */
.header-enquiry,.button:not(form .button),.em-reel__toggle,.film-player__start,.film-player__btn,.film-player__message,.visit-count-choice{border-radius:0!important}
.button:not(form .button){min-height:52px;padding-inline:24px;font-size:16px;font-weight:600;letter-spacing:0}
.header-enquiry{border:1px solid rgba(255,255,255,.7);white-space:nowrap}
.header-enquiry:hover{border-color:var(--em-white)}
@media (min-width:701px){.header-enquiry{padding:10px 18px!important}}
@media (max-width:700px){.header-enquiry{min-height:44px}}
main a:not(.button):not(.header-enquiry),.site-footer a{text-decoration-thickness:1px!important;text-underline-offset:.22em!important}
main a:not(.button):is(:hover,:focus-visible),.site-footer a:is(:hover,:focus-visible){text-decoration-thickness:2px!important}
.text-link{font-size:16px;font-weight:500}

/* 1A, the logo: the new lockup is 6.6 to 1 (the old one was 4.3 to 1), so it runs a little narrower for the same size
   of lettering. These widths follow the header's own breakpoints and replace the older sizes in image-led.css,
   council.css and release.css. */
.brand{width:160px}
.brand img,.footer-top img{height:auto}
.footer-top img{width:152px}
@media (max-width:1100px){.brand{width:138px}}
@media (max-width:700px){.brand{width:132px}}
@media (max-width:650px){.footer-top img{width:130px}}
@media (max-width:360px){.brand{width:120px}}
/* 6A, AI Brief: the full stop is a pink square, as in the AI Brief mark. The markup stays AI Brief<span>.</span>, so
   screen readers and copy and paste still get a full stop. */
#product-title span,.brief-teaser .brand-dot{display:inline-block;width:.135em;height:.135em;margin-left:.04em;background:var(--em-pink);color:transparent;overflow:hidden;vertical-align:baseline;line-height:0}