/* Release candidate overrides, 10 October 2026.
   Each block names the 09 October review finding it resolves (work/claude-code-review-2026-10-09/review.md). */

/* F07, F02: no status text over the artwork. The control's label carries the state, and on
   phones the single control no longer collides with the AI-generated credit. */
#hero-motion-status{display:none!important}

/* F30: on tablet and desktop, keep the control on screen, at the artwork's top right, 24 px down. */
@media (min-width:701px){
  .art-controls{top:24px;bottom:auto}
}

/* F01: a stronger scrim behind the hero copy where it sits over the artwork (701 to 1023 px).
   Measured on 09 October: support copy and link at 7:1 or better at 701, 768, 820, 900 and 1023 px. */
@media (min-width:701px) and (max-width:1023px){
  .motion-art:after{background:linear-gradient(90deg,#0a0c14f7 0%,#0a0c14ed 50%,#0a0c14b8 66%,#0a0c1400 90%)!important}
}

/* Robin, 12 October: both films in the open, side by side, with plain captions (from the scroll concept).
   Design review, 15 October, item 7: the two films start on the same line (the brand film sat 40 to 80 px lower). */
.rc-films{display:grid;grid-template-columns:minmax(0,7.4fr) minmax(0,4.6fr);gap:20px clamp(24px,4vw,56px);align-items:start;padding:clamp(40px,5vw,72px) 0 clamp(48px,6vw,88px)}
.rc-film{margin:0}
.rc-film video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#000}
.rc-film figcaption{margin-top:16px;color:#B0B8C4;font-size:15px;line-height:1.6;max-width:56ch}
.rc-film figcaption strong{color:#fff;font-weight:500}
.rc-films .cinema-feature{margin:0;border:0}
.rc-films .cinema-feature>summary{display:none}
.rc-films .cinema-layout{display:block}
.rc-films .cinema-context{background:transparent;color:#B0B8C4;padding:16px 0 0}
.rc-films .cinema-context h3{font-size:15px;line-height:1.6;letter-spacing:0;font-weight:500;color:#fff;margin:0}
.rc-films .cinema-context #film-description{font-size:15px;line-height:1.6;color:#B0B8C4;margin:2px 0 8px}
.rc-films #cinema-play{display:none!important}
.rc-films #cinema-status:empty{display:none}
.rc-films .cinema-context a{font-size:14px;color:#B0B8C4}
@media (max-width:800px){.rc-films{grid-template-columns:1fr}.rc-films .cinema-feature{margin-top:24px}}

/* Robin, 12 October: recent work as a ledger at the top of "AI in practice" (from the scroll concept). */
.rc-recent{margin:0 0 clamp(56px,7vw,104px)}
.rc-recent__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:end;margin-bottom:clamp(24px,3vw,40px)}
.rc-recent__head .content-label{color:#4A4E5A}
.rc-recent__head h2{font-size:clamp(44px,5.6vw,84px);line-height:.95;letter-spacing:-.045em;font-weight:500;margin:8px 0 0}
.rc-recent__head>p{color:#4A4E5A;margin:0;max-width:40ch}
.rc-ledger{list-style:none;margin:0;padding:0}
.rc-ledger li{display:grid;grid-template-columns:minmax(0,3.2fr) minmax(0,8fr) minmax(0,2.2fr);gap:clamp(16px,2.4vw,32px);padding:clamp(18px,2.2vw,28px) 0;border-top:1px solid rgba(10,12,20,.18);align-items:baseline}
.rc-ledger li:last-child{border-bottom:1px solid rgba(10,12,20,.18)}
.rc-ledger__who{font-size:15px;color:#4A4E5A}
.rc-ledger__what{font-size:clamp(18px,1.5vw,21px);line-height:1.45;color:#0A0C14}
.rc-ledger__svc{font-size:14px;color:#4A4E5A;text-align:right}
@media (max-width:800px){.rc-recent__head{grid-template-columns:1fr}.rc-ledger li{grid-template-columns:1fr;gap:6px}.rc-ledger__svc{text-align:left}}

/* Robin, 12 October: services were "visually all the same" and hard to digest. One colour per
   service on the top rule, and the single-sentence description as the lead line. */
.services-clarity .hybrid-services article{border-top:6px solid var(--service-colour,#0A0C14)}
.services-clarity #strategy{--service-colour:#FF3B8B}
.services-clarity #skills{--service-colour:#7B61FF}
.services-clarity #communications{--service-colour:#2B6E8F}
.services-clarity .hybrid-services .service-description{font-size:clamp(19px,1.6vw,22px);line-height:1.45;color:#0A0C14;margin-top:14px}
.services-clarity .service-value{margin-top:18px}
.services-clarity .service-value>p:first-child{font-size:14px;color:#484c58;margin:0 0 9px}
.services-clarity .service-value>p+p{font-size:16px;line-height:1.45;color:#0A0C14;margin:0;padding-top:9px;border-top:1px solid #c4c5cb}
/* Side by side, each row lines up across the cards: title, lead, what you get, what changes, link. */
@media (min-width:701px){
  .services-clarity .hybrid-services{grid-template-rows:repeat(5,auto);row-gap:0}
  .services-clarity .hybrid-services>article{display:grid;grid-row:span 5;grid-template-rows:subgrid;align-content:start}
  .services-clarity .hybrid-services .service-outputs{margin-top:0}
  .services-clarity .hybrid-services>article>.text-link{justify-self:start;align-self:start}
}

/* Robin, 12 October: About says why clients need us, as three plain points.
   Design review, 15 October, item 4: the heading sits at the top, level with the list (it sank to the foot of its
   column, a leftover from when that column held one paragraph). The list has no closing line, because the founder
   block's own line follows 38 px below. */
.firm-about-heading{align-items:start}
.firm-about-heading .rc-why{list-style:none;margin:0;padding:0;max-width:46ch;font-size:17px;line-height:1.55;color:var(--slate)}
.firm-about-heading .rc-why li{padding:12px 0;border-top:1px solid rgba(255,255,255,.16)}
@media (max-width:700px){.firm-about-heading .rc-why{font-size:16px}}

/* F29, F32: the form on a white card; field borders 4.73:1 against white (were 2.40:1). */
.enquiry .form-study{background:#fff;padding:clamp(20px,3vw,36px)}
.enquiry input,.enquiry textarea{border-color:#6E7383;background:#fff}

/* Design review, 15 October, item 1: on mouse hover "Send enquiry" turned pale grey on pale grey (the site-wide
   button hover kept the form button's light text). It now turns pink with ink text, the hero button's colours. */
.form-study .button:hover:not(:disabled){background:#FF3B8B;color:#0A0C14}

/* Design review, 15 October, item 2: "Tell us what / you're working on." on two lines at every width (it left
   "on." alone on a third line on most phones, tablets and laptops). 66 px at most, like the About heading. */
#enquiry-title{font-size:clamp(40px,4.6vw,66px)}
@media (max-width:379px){#enquiry-title{font-size:34px}}

/* F34: the AI Brief teaser on lilac, so the brand's pink full stop survives. */
.brief-teaser{background:#DED8F5}
.brief-teaser .brand-dot{color:#FF3B8B}

/* F11: the motion control in the footer, with an action label. */
.footer-motion{margin-left:14px;background:transparent;color:#B0B8C4;border:1px solid #7d7f8b;padding:8px 12px;min-height:44px;font:inherit;font-size:14px;cursor:pointer;vertical-align:middle}
.footer-motion:hover,.footer-motion:focus-visible{color:#fff}

/* F33: one display statement in the AI Brief hero; the second steps down to subtitle scale. */
.brief-subtitle{font-size:clamp(30px,3.3vw,44px);line-height:1.04;font-weight:500;letter-spacing:-.025em;color:#ECECF0;margin:18px 0 0}

/* F10: the editorial approach is visible rather than hidden in a disclosure. */
.rc-editorial{margin-top:26px;padding-top:20px;border-top:1px solid #3f424e}
.rc-editorial h3{font-size:20px;font-weight:500;margin:0 0 8px}

/* F26: one image label on the campaign-concept card. */
.wb-campaign figcaption .rc-image-note{display:block;font-size:14px;margin-top:8px;opacity:.85}

/* F19: at very narrow widths keep the four navigation links on one row (was: "AI Brief" alone on a second line at 320 px). */
@media (max-width:374px){
  body .site-header nav{column-gap:12px}
  body .site-header nav a{padding-right:0}
}

/* The "AI in practice" label sits on the light work background: ink-grey for 7:1, not the slate used on dark bands. */
.selected-work-heading .content-label{color:#4A4E5A}
.selected-work-heading p .text-link{display:block;width:max-content;margin-top:10px}

/* Design review, 15 October, item 6: keyboard focus shows on the coloured bands. The pink ring on the lilac AI Brief
   teaser measured 2.4:1 and the purple ring on the pink AI Communications band 1.25:1; ink measures 14.2:1 and 5.8:1. */
.brief-teaser :focus-visible,.client-newsletter :focus-visible{outline-color:#0A0C14}

/* Visit counts, 15 October 2026: the cookie page's opt-out button, outlined like the footer's motion control. */
.visit-count-choice{background:transparent;color:#fff;border:1px solid #7d7f8b;border-radius:4px;padding:10px 16px;min-height:44px;font:inherit;font-size:16px;cursor:pointer}
.visit-count-choice:hover{border-color:#fff}

/* AI Brief page: the launch films, between the hero and "Inside AI Brief" (Robin, 15 October 2026). The player
   itself uses the homepage's .rc-film rules. A thin rule separates it from the hero, which shares its dark background. */
.brief-film{padding-bottom:clamp(56px,6vw,88px)}
.brief-film>.frame{border-top:1px solid rgba(237,237,237,.16);padding-top:clamp(40px,5vw,72px)}
.brief-film__heading{display:grid;grid-template-columns:1.4fr 1fr;gap:24px 60px;align-items:end;margin-bottom:clamp(28px,3.5vw,44px)}
.brief-film__heading .content-label{margin-bottom:22px}
.brief-film__heading h2{font-size:clamp(38px,4.4vw,64px);line-height:1.07;letter-spacing:-.045em;font-weight:500}
.brief-film__heading>p{font-size:18px;line-height:1.6;max-width:36ch;color:#B0B8C4}
/* Under the player (1A, 26 October 2026): the film's title, details and story in one block 24 px under the film, with
   the coming films beside it. From 1140 px the row shares the heading's three columns, so the title block spans the
   heading and the coming films sit under the intro. The released film's rule and label are pink. */
.film-row{display:grid;grid-template-columns:minmax(0,1fr);row-gap:8px;margin-top:24px}
.film-row__now{border-top:2px solid #FF3B8B;padding-top:14px}
.film-row__title{font-size:var(--em-h3);line-height:1.12;letter-spacing:-.02em;font-weight:500;color:#fff;margin:0}
.film-row__meta{display:flex;flex-wrap:wrap;gap:4px 18px;margin:8px 0 0;font-size:var(--em-small);line-height:1.5;color:#B0B8C4}
.film-row__out{color:#FF3B8B}
.film-row__line{margin:6px 0 0;font-size:var(--em-body);line-height:1.55;color:#B0B8C4;max-width:52ch}
.film-row__next{list-style:none;margin:0;padding:0;container-type:inline-size}
.film-row__next li{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 16px;margin:0;border-top:1px solid #3f424e;padding:14px 0 16px}
.film-row__name{font-size:var(--em-h5);line-height:1.2;letter-spacing:-.02em;font-weight:500;color:#fff}
.film-row__soon{font-size:var(--em-small);color:#B0B8C4;white-space:nowrap}
/* Where the column is too narrow for a name and its label side by side, both rows put the label under the name. */
@container (max-width:344px){.film-row__next li{flex-direction:column;align-items:flex-start;gap:2px}}
/* 2A: on phones the film runs edge to edge and its Play button lines up with the text. */
@media (max-width:650px){
  .brief-film__heading{grid-template-columns:1fr;gap:16px}
  .brief-film__heading h2{font-size:39px}
  .brief-film__heading>p{font-size:16px}
  .film-row{margin-top:20px}
  .brief-film .rc-film{margin-inline:calc(-1 * var(--gutter))}
  .brief-film .film-player .film-player__start{left:var(--gutter)}
}

/* Film player (film-player.js, 16 October 2026): branded play and control buttons for every film on the site.
   The start button sits on the poster; the control bar appears once a film starts and hides while it plays.
   Without JavaScript the browser's own controls stay. */
.film-player{position:relative;container-type:inline-size;background:#000;color:#EDEDED;overflow:hidden;-webkit-tap-highlight-color:transparent}
.film-player video{display:block;cursor:pointer}
.film-player[data-state="playing"][data-controls="hidden"],.film-player[data-state="playing"][data-controls="hidden"] video{cursor:none}
.film-player button{font:inherit;color:inherit;background:none;border:0;margin:0;padding:0;cursor:pointer}
.film-player svg{display:block;width:22px;height:22px;fill:currentColor}
.film-player :focus-visible{outline:2px solid #FF3B8B;outline-offset:2px}
.film-player .film-player__start{position:absolute;left:clamp(12px,3cqw,28px);bottom:clamp(12px,3cqw,28px);display:inline-flex;align-items:center;gap:12px;min-height:48px;padding:0 18px 0 16px;border-radius:4px;background:#FF3B8B;color:#0A0C14;font-size:14px;font-weight:600;line-height:1;box-shadow:0 10px 30px rgba(10,12,20,.35);transition:background-color .2s ease}
.film-player .film-player__start:hover{background:#FF5C9F}
.film-player .film-player__start:focus-visible{outline:3px solid #EDEDED;outline-offset:3px}
.film-player .film-player__start svg{width:15px;height:15px}
.film-player__length{padding-left:12px;border-left:1px solid rgba(10,12,20,.3);font-weight:500;font-variant-numeric:tabular-nums}
.film-player:not([data-state="idle"]) .film-player__start{display:none}
.film-player__bar{position:absolute;left:0;right:0;bottom:0;padding:32px clamp(6px,1.6cqw,16px) clamp(2px,.8cqw,8px);background:linear-gradient(rgba(10,12,20,0),rgba(10,12,20,.6) 45%,rgba(10,12,20,.9));transition:opacity .25s ease}
.film-player[data-state="idle"] .film-player__bar{display:none}
.film-player[data-controls="hidden"] .film-player__bar{opacity:0;pointer-events:none}
.film-player__row{display:flex;align-items:center;gap:2px}
.film-player .film-player__btn{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:4px;color:#EDEDED;transition:color .15s ease}
.film-player .film-player__btn:hover,.film-player .film-player__btn[aria-pressed="true"]{color:#FF3B8B}
.film-player__time{margin-left:6px;font-size:13px;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}
.film-player__time span:last-child{color:#B0B8C4}
.film-player__spacer{flex:1}
.film-player__seek{--progress:0%;display:block;width:calc(100% - 16px);height:20px;min-height:0;margin:0 8px;padding:0;border:0;border-radius:0;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer}
.film-player__seek::-webkit-slider-runnable-track{height:3px;border-radius:2px;background:linear-gradient(to right,#FF3B8B var(--progress),rgba(237,237,237,.3) var(--progress))}
.film-player__seek::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:13px;height:13px;margin-top:-5px;border:0;border-radius:50%;background:#FF3B8B;transition:transform .15s ease}
.film-player__seek:hover::-webkit-slider-thumb,.film-player__seek:focus-visible::-webkit-slider-thumb{transform:scale(1.25)}
.film-player__seek::-moz-range-track{height:3px;border:0;border-radius:2px;background:linear-gradient(to right,#FF3B8B var(--progress),rgba(237,237,237,.3) var(--progress))}
.film-player__seek::-moz-range-thumb{width:13px;height:13px;border:0;border-radius:50%;background:#FF3B8B}
.film-player__captions{position:absolute;left:50%;bottom:clamp(14px,4cqw,40px);width:max-content;max-width:86%;transform:translateX(-50%);text-align:center;pointer-events:none;transition:bottom .25s ease}
.film-player[data-controls="visible"]:not([data-state="idle"]) .film-player__captions{bottom:calc(80px + 1cqw)}
.film-player__captions span{padding:.1em .45em;border-radius:3px;background:rgba(10,12,20,.82);color:#fff;font-size:15px;font-size:clamp(14px,2.8cqw,32px);font-weight:500;line-height:1.55;white-space:pre-line;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.film-player__spinner{display:none;position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border:3px solid rgba(237,237,237,.25);border-top-color:#FF3B8B;border-radius:50%;animation:film-player-spin .8s linear infinite;pointer-events:none}
.film-player[data-loading="true"] .film-player__spinner{display:block}
@keyframes film-player-spin{to{transform:rotate(360deg)}}
.film-player__message{position:absolute;left:12px;right:12px;top:12px;margin:0;padding:10px 14px;border-radius:4px;background:rgba(10,12,20,.92);color:#EDEDED;font-size:14px;line-height:1.5}
.film-player__message:empty{display:none}
.film-player__message a{color:#FF3B8B}
.film-player:fullscreen{display:flex;align-items:center;width:100%;height:100%}
.film-player:fullscreen video{width:100%;height:100%;aspect-ratio:auto;object-fit:contain}
.film-player:-webkit-full-screen{display:flex;align-items:center;width:100%;height:100%}
.film-player:-webkit-full-screen video{width:100%;height:100%;aspect-ratio:auto;object-fit:contain}
@container (max-width:440px){
  .film-player .film-player__btn{width:36px;height:36px}
  .film-player svg{width:20px;height:20px}
  .film-player__time{margin-left:2px;font-size:12px}
  .film-player__bar{padding-top:24px}
  .film-player .film-player__start{min-height:44px;gap:10px;padding:0 14px 0 13px;font-size:13px}
  .film-player .film-player__start svg{width:13px;height:13px}
  .film-player__length{padding-left:10px}
  .film-player[data-controls="visible"]:not([data-state="idle"]) .film-player__captions{bottom:70px}
}
@media (prefers-reduced-motion:reduce){.film-player__spinner{animation-duration:2.4s}.film-player__bar,.film-player__captions{transition:none}}

/* Recent work (17 October 2026): two case cards above the smaller entries, in the service colours.
   The services and Recent work headings drop to the About and enquiry size (66 px at most). */
.rc-cases{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,2.6vw,36px);margin-bottom:clamp(28px,3vw,44px)}
.rc-case{background:#fff;border-top:6px solid var(--service-colour,#0A0C14);padding:clamp(22px,2.6vw,36px)}
.rc-case__svc{font-size:14px;color:#4A4E5A;margin:0}
.rc-case h3{font-size:clamp(26px,2.4vw,34px);line-height:1.1;letter-spacing:-.025em;font-weight:500;color:#0A0C14;margin:10px 0 6px}
.rc-case__who{font-size:15px;color:#4A4E5A;margin:0 0 18px}
.rc-case__lead{font-size:clamp(18px,1.4vw,20px);line-height:1.45;color:#0A0C14;margin:0 0 18px;max-width:46ch}
.rc-case__label{font-size:14px;color:#484c58;margin:0 0 6px}
.rc-case ul{list-style:none;margin:0;padding:0}
.rc-case li{font-size:16px;line-height:1.45;color:#0A0C14;padding:10px 0;border-top:1px solid #c4c5cb}
.rc-case__note{font-size:15px;line-height:1.55;color:#4A4E5A;margin:14px 0 0;padding-top:12px;border-top:1px solid #c4c5cb}
.rc-ledger--support .rc-ledger__what strong{font-weight:500}
.rc-ledger--support .rc-ledger__what{font-size:clamp(16px,1.25vw,18px)}
@media (max-width:800px){.rc-cases{grid-template-columns:1fr}}
#services-title,#recent-title{font-size:clamp(40px,4.6vw,66px)}

/* AI Brief page, signup first (Robin, 17 October 2026): Beehiiv's form sits in the hero with the privacy line,
   the three format notes run across wide screens, and How we edit sits under them beside a second Subscribe button. */
.brief-hero-signup{margin-top:28px;max-width:440px}
.brief-page .brief-hero-signup .brief-signup{margin-top:0}
.brief-page .brief-signup:has(>.brief-signup-note){min-height:0}
.brief-privacy{font-size:16px;line-height:1.6;color:#B0B8C4;margin:14px 0 0}
.brief-privacy a{color:#ff86b7;text-decoration:underline;text-underline-offset:4px}
.brief-page .format-layout{display:block}
.format-notes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(24px,3vw,44px)}
.format-close{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:24px clamp(24px,3vw,44px);margin-top:clamp(20px,2.5vw,32px);padding-top:28px;border-top:1px solid #b3b5be}
.format-method h3{font-size:22px;letter-spacing:-.03em;margin:0 0 10px}
.format-method p{font-size:16px;line-height:1.6;color:#484c58;max-width:62ch;margin:0 0 10px}
.format-method a{color:inherit;text-decoration:underline;text-underline-offset:4px}
.format-cta h3{font-size:26px;line-height:1.15;letter-spacing:-.03em;margin:0 0 16px}
@media (max-width:900px){.format-notes,.format-close{grid-template-columns:1fr}}

/* From the live site (Robin, 17 and 18 October 2026): Assess, Build, Embed sit under the enquiry intro,
   styled like the case card lists. */
.enquiry-steps{list-style:none;margin:26px 0 0;padding:0;max-width:40ch}
.enquiry-steps li{font-size:16px;line-height:1.5;color:#484c58;padding:10px 0;border-top:1px solid #c4c5cb}
.enquiry-steps strong{color:#0A0C14;font-weight:500}

/* Final review, 22 October 2026 (reviews/final-review-2026-10-22.md): Robin's picks, by item number. */
/* 1A: on wide screens the replay control ends on the grid's right edge, not the window's. */
@media (min-width:701px){.art-controls{right:max(var(--gutter),calc((100% - 1392px)/2))}}

/* 2A: "What we do" labels the first section, set like "AI in practice". */
#services .section-heading .content-label{color:#4A4E5A}
#services-title{margin-top:8px}

/* 7A, 8A: each case card ends with its content, and the closing note's rule runs the full card width like the
   list rules, while the note keeps its reading measure. */
.rc-cases{align-items:start}
.rc-case__note{max-width:none;padding-right:max(0px,calc(100% - 65ch))}

/* 9B: the three smaller entries as cards in a row, each topped in its service colour. One column below 1000 px. */
.rc-ledger{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.6vw,36px)}
.rc-ledger li,.rc-ledger li:last-child{display:flex;flex-direction:column;align-items:stretch;gap:10px;background:#fff;border:0;border-top:6px solid var(--service-colour,#0A0C14);padding:clamp(22px,2.6vw,36px)}
.rc-ledger__svc{order:-1;text-align:left}
.rc-ledger__what{max-width:65ch}
@media (max-width:1000px){.rc-ledger{grid-template-columns:1fr}}

/* 11A: the why-us list runs to the grid edge. */
.firm-about-heading .rc-why{max-width:none}

/* 12B, 13A: beside the photo, the bio spans the grid at a 65-character measure, and the photo's top lines up with
   the heading's. */
.work-b-page .firm-founder p{font-size:17px;line-height:1.55;max-width:65ch}
@media (min-width:701px){
  .work-b-page .firm-founder{grid-template-columns:144px minmax(0,1fr);align-items:start}
  .firm-founder h3{margin-top:-4px}
}

/* 14A: from 900 px down the enquiry stacks: heading, intro and steps, then the form card at full width. */
@media (min-width:651px) and (max-width:900px){
  .enquiry-layout{grid-template-columns:1fr;gap:36px}
  .enquiry-copy>p:not(.content-label),.enquiry-steps{max-width:60ch}
}

/* 15A: the AI Brief teaser uses the enquiry's columns, so its description starts on the form card's line. */
.teaser-inner{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:100px}
.teaser-body{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 32px}
@media (max-width:1100px){.teaser-inner{column-gap:60px}}
@media (max-width:650px){.teaser-inner{grid-template-columns:1fr}}

/* 31A: tablets keep the one-row header, logo left with the links and button grouped right, down to 701 px.
   Below 740 px the gaps tighten so the button stays inside the frame. */
@media (min-width:701px) and (max-width:850px){
  .site-header{flex-wrap:nowrap;padding-block:0;gap:25px}
  .site-header nav{order:0;width:auto;margin-left:auto;justify-content:flex-end;gap:20px;flex-wrap:nowrap}
  .site-header .header-enquiry{margin-left:0;padding-inline:13px}
  .brand{width:151px}
}
@media (min-width:701px) and (max-width:739px){
  .site-header{gap:18px}
  .site-header nav{gap:14px}
}

/* 32A: "Turn motion off" is a plain text link after the legal links, and the bottom row lines up on its text. */
.footer-links{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 24px}
.footer-motion{display:inline-flex;align-items:center;min-height:44px;margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;font-size:16px;line-height:1.5;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.footer-motion[hidden]{display:none}
.footer-motion:disabled{text-decoration:none;cursor:default}
.assembly-footer .footer-bottom{align-items:baseline}

/* 33A: on phones the footer's "Start a conversation" sits flush left under the tagline. */
@media (max-width:650px){
  .footer-top{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
  .footer-top>a:last-child{margin-left:0}
}

/* 17A: on the AI Brief page on phones the artwork sits behind the top of the hero, full width, and fades into
   the page, so the title starts on the fade and the signup form follows the intro without an image after it. */
@media (max-width:650px){
  .brief-product-hero{position:relative;isolation:isolate;padding-top:150px}
  .brief-page .brief-product-art{position:absolute;z-index:-1;top:0;left:calc(-1 * var(--gutter));right:calc(-1 * var(--gutter));height:380px;min-height:0;padding:0;background:none}
  .brief-page .brief-product-art>img{object-position:72% 35%}
  .brief-page .brief-product-art:after{background:linear-gradient(180deg,#0A0C14,rgba(10,12,20,0) 14%,rgba(10,12,20,0) 30%,rgba(10,12,20,.7) 62%,#0A0C14 92%),linear-gradient(90deg,rgba(10,12,20,.75),rgba(10,12,20,.55) 45%,rgba(10,12,20,0) 72%)}
  .product-kicker{text-shadow:0 0 10px #0A0C14,0 0 3px #0A0C14}
}

/* 24A: "Get AI Brief every week." starts on the third column, and both closing headings share one size. */
@media (min-width:901px){
  .format-close{grid-template-columns:repeat(3,minmax(0,1fr))}
  .format-method{grid-column:1/3}
}
.format-method h3,.format-cta h3{font-size:26px;line-height:1.15;letter-spacing:-.03em;margin:0 0 12px}

/* 25A: the AI Communications band takes the page's section heading and label sizes. */
.client-newsletter h2{font-size:clamp(38px,4.4vw,64px)}
.client-newsletter .content-label{font-size:14px}
@media (max-width:650px){.client-newsletter h2{font-size:39px}}

/* Site feedback, 23 October 2026 (reviews/site-feedback-2026-10-23.md): Robin's picks of 24 October 2026, by point. */
/* 2B: the labels that head each list read as headings, 17 px ink at weight 500, above the 16 px points under them.
   The service name over each case and card goes to 16 px ink, the client lines to 17 px on the case cards and 16 px
   on the smaller cards, and the homepage section labels to 16 px. */
.services-clarity .service-outputs>p,
.services-clarity .service-value>p:first-child,
.rc-case__label{font-size:17px;font-weight:500;line-height:1.4;color:#0A0C14;margin:0 0 10px}
.rc-case__svc,.rc-ledger__svc{font-size:16px;font-weight:500;color:#0A0C14}
.rc-case__who{font-size:17px;line-height:1.45;color:#4A4E5A}
.rc-ledger__who{font-size:16px;line-height:1.45;color:#4A4E5A}
.two-page-home .content-label{font-size:16px;font-weight:500}
/* 2B: Recent work and the films share one ink band, so the films follow the Recent work cards. About moves onto the
   light background, so the dark run is Recent work and the films only. */
#work{background:#0A0C14;padding-top:0}
.rc-recent{margin-bottom:0;padding-top:clamp(56px,6vw,96px)}
.rc-recent__head .content-label,.rc-recent__head>p{color:#B0B8C4}
.rc-recent__head h2{color:#EDEDED}
#work .selected-creative .rc-films{padding-top:clamp(56px,6vw,88px)}
.firm-about{background:#EDEDED;color:#0A0C14;border-top:0}
.firm-about .content-label{color:#4A4E5A}
.firm-about-heading .rc-why{color:#484c58}
.firm-about-heading .rc-why li{border-top-color:#c4c5cb}
.firm-founder{border-top-color:#c4c5cb}
.work-b-page .firm-founder p{color:#484c58}
.firm-about :focus-visible{outline-color:var(--purple)}

/* 6B: the AI Brief page. From 1140 px the page uses one set of column lines, the format notes' three columns and
   gutter, so both section intros and the AI Communications text start on the third column's line and the right half
   has one text edge. Below 1140 px those paragraphs sit under their headings, as on phones. */
:root{--brief-gap:clamp(24px,3vw,44px)}
@media (min-width:1140px){
  .brief-film__heading,.format-heading{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--brief-gap)}
  .brief-film__heading>div,.format-heading>div{grid-column:1/3}
  .brief-film__heading>p,.format-heading>p{grid-column:3;max-width:none}
  .film-row{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--brief-gap)}
  .film-row__now{grid-column:1/3}
  .film-row__next{grid-column:3}
  .client-newsletter>.frame{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--brief-gap);row-gap:0}
  .client-newsletter h2{grid-column:1/3}
  .client-newsletter>.frame>div{grid-column:3}
  .client-newsletter>.frame>div>p{max-width:none}
}
@media (min-width:651px) and (max-width:1139px){
  .brief-film__heading,.format-heading{grid-template-columns:minmax(0,1fr);row-gap:22px}
  .client-newsletter>.frame{grid-template-columns:minmax(0,1fr)}
  .brief-film__heading>p,.format-heading>p,.client-newsletter>.frame>div>p{max-width:46ch}
}
/* 6B: on tablet and desktop the hero copy starts higher, so Subscribe sits 30 px further up. */
@media (min-width:651px){
  .brief-product-hero{padding-top:32px}
  .product-kicker{margin-bottom:18px}
}
/* 6B: the pink band's label sits 22 px above its heading at every size, as in the other two sections. */
.client-newsletter .content-label{margin-bottom:22px}
@media (max-width:1139px){
  .client-newsletter>.frame{row-gap:0}
  .client-newsletter h2{margin-bottom:20px}
}
/* 6B: short paragraphs and headings wrap to even lines. Browsers without text-wrap: balance wrap as before. */
.product-intro,.brief-privacy,.brief-film__heading>p,.format-heading>p,.format-notes p,.format-method p,
.client-newsletter>.frame>div>p,.client-newsletter h2,.format-notes h3{text-wrap:balance}
/* 6B: on desktop the artwork leaves its box. It runs off the right edge of the window and fades into the page
   behind the copy, as on the homepage, and keeps its own shape, so the fold and the book stay whole. The hero spans
   the window and its side padding keeps the copy on the page's column lines, so nothing scrolls sideways. */
@media (min-width:901px){
  .brief-page .brief-product-hero.frame{width:auto;margin-inline:0;padding-inline:max(var(--gutter),calc((100% - 1392px)/2))}
  .brief-product-hero{position:relative;isolation:isolate;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--brief-gap)}
  .brief-page .brief-product-art{position:absolute;z-index:-1;top:0;right:0;left:auto;bottom:auto;
    width:min(100%,1600px,calc((100% - max(var(--gutter),(100% - 1392px)/2) - 470px) * 1.72));
    aspect-ratio:1672/941;height:auto;max-height:100%;min-height:0;padding:0;background:none;display:block}
  .brief-page .brief-product-art>img{inset:0;width:100%;height:100%;object-fit:cover;object-position:100% 0}
  .brief-page .brief-product-art:after{background:
    linear-gradient(90deg,#0A0C14,rgba(10,12,20,.55) 18%,rgba(10,12,20,0) 40%),
    linear-gradient(180deg,#0A0C14,rgba(10,12,20,0) 14%,rgba(10,12,20,0) 62%,#0A0C14 98%)}
}
/* 6B: from 1200 px the rock at the foot of the artwork reaches the signup form, and Beehiiv draws the form on an
   opaque panel, so a soft layer of the page's black sits behind the form: solid to 30 px past its right edge and
   clear 170 px further on, fading in from above. 100vw appears only in the gradient's stops. */
@media (min-width:1200px){
  .brief-page .brief-product-art:before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(90deg,#0A0C14 calc(100% - 100vw + max(var(--gutter),(100vw - 1392px)/2) + 470px),rgba(10,12,20,0) calc(100% - 100vw + max(var(--gutter),(100vw - 1392px)/2) + 640px));
    -webkit-mask-image:linear-gradient(180deg,transparent 45%,#000 58%);mask-image:linear-gradient(180deg,transparent 45%,#000 58%)}
}
/* 6B: tablets take the phone hero, with the artwork across the top fading into the page. */
@media (min-width:651px) and (max-width:900px){
  .brief-page .brief-product-hero.frame{width:auto;margin-inline:0;padding-inline:var(--gutter)}
  .brief-product-hero{position:relative;isolation:isolate;grid-template-columns:minmax(0,1fr);padding-top:190px}
  .brief-page .brief-product-art{position:absolute;z-index:-1;top:0;left:0;right:0;width:100%;aspect-ratio:1672/941;height:auto;min-height:0;padding:0;background:none;display:block}
  .brief-page .brief-product-art>img{inset:0;width:100%;height:100%;object-fit:cover;object-position:100% 0}
  .brief-page .brief-product-art:after{background:
    linear-gradient(180deg,#0A0C14,rgba(10,12,20,0) 14%,rgba(10,12,20,0) 40%,rgba(10,12,20,.75) 68%,#0A0C14 96%),
    linear-gradient(90deg,rgba(10,12,20,.75),rgba(10,12,20,.5) 30%,rgba(10,12,20,0) 55%)}
  .product-kicker{text-shadow:0 0 10px #0A0C14,0 0 3px #0A0C14}
}
/* 5aA: the artwork's own black is darker than the page's #0A0C14. Over a page-coloured backing, "lighten" shows
   anything darker than the page as the page colour, so no edge of the artwork shows. Phones keep 17A, where the
   artwork already fades into the page. Not in forced colours, where a light contrast theme would turn it white. */
@media (min-width:651px) and (forced-colors:none){
  .brief-page .brief-product-art{background:#0A0C14;isolation:isolate}
  .brief-page .brief-product-art>img{mix-blend-mode:lighten}
}

/* 4A, the motion kit (reviews/site-feedback-2026-10-23-showreel.md). The static CSS is the finished page: animations
   only describe where a move starts, and run only while body.motion-enabled is set (work-b-motion.js on the homepage,
   motion-switch.js on the other pages). With no JavaScript, the device's reduced-motion setting or the footer's
   "Turn motion off", the page is the finished page. Nothing here hides text, moves text people are reading, or
   changes how the page scrolls. */
:root{
  --em-t-1:120ms;   /* hover and focus; one step between items in a row */
  --em-t-2:240ms;   /* a small reveal, such as the proof-link nudge */
  --em-t-3:450ms;   /* a crease or a rule on its own clock (the reel's cuts are cut to this) */
  --em-t-4:900ms;   /* the bolt on a film end card; nothing on the site itself runs this long */
  --em-ease-out:cubic-bezier(.2,.7,.2,1);
  --em-ease-fold:cubic-bezier(.65,0,.35,1);
  --em-crease:24deg;  /* the lean the bolt and the paper fold share: "/" */
  --em-edge:4px;      /* the pink edge on a crease */
}
@media print{*,*::before,*::after{animation:none!important;transition:none!important}}

/* 4A, rule: each service and case card's colour rule draws across as the card arrives. Scroll-linked, so it follows
   the reader and never runs on its own. Only a 6 px bar with no text scales. */
@keyframes em-draw{from{scale:0 1}}
@keyframes em-draw-2of2{0%,50%{scale:0 1}to{scale:1 1}}
@keyframes em-draw-1of3{from{scale:0 1}33.3%,to{scale:1 1}}
@keyframes em-draw-2of3{0%,33.3%{scale:0 1}66.6%,to{scale:1 1}}
@keyframes em-draw-3of3{0%,66.6%{scale:0 1}to{scale:1 1}}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    body.motion-enabled :is(.services-clarity .hybrid-services>article,.rc-cases>.rc-case,.rc-ledger>li){position:relative;border-top-color:rgba(10,12,20,.08)}
    body.motion-enabled :is(.services-clarity .hybrid-services>article,.rc-cases>.rc-case,.rc-ledger>li)::before{content:"";position:absolute;inset:-6px 0 auto;height:6px;background:var(--service-colour);transform-origin:0 50%;pointer-events:none;animation:em-draw var(--em-ease-out);animation-timeline:view();animation-range:entry 0% entry 30vh}
  }
  @media (prefers-reduced-motion:no-preference) and (min-width:701px){
    body.motion-enabled .services-clarity .hybrid-services>article::before{animation-timing-function:linear;animation-range:entry 0% entry 36vh}
    body.motion-enabled .services-clarity .hybrid-services>article:nth-child(1)::before{animation-name:em-draw-1of3}
    body.motion-enabled .services-clarity .hybrid-services>article:nth-child(2)::before{animation-name:em-draw-2of3}
    body.motion-enabled .services-clarity .hybrid-services>article:nth-child(3)::before{animation-name:em-draw-3of3}
  }
  @media (prefers-reduced-motion:no-preference) and (min-width:801px){
    body.motion-enabled .rc-cases>.rc-case:nth-child(2)::before{animation-name:em-draw-2of2;animation-range:entry 0% entry 36vh}
  }
  @media (prefers-reduced-motion:no-preference) and (min-width:1001px){
    body.motion-enabled .rc-ledger>li::before{animation-timing-function:linear;animation-range:entry 0% entry 36vh}
    body.motion-enabled .rc-ledger>li:nth-child(1)::before{animation-name:em-draw-1of3}
    body.motion-enabled .rc-ledger>li:nth-child(2)::before{animation-name:em-draw-2of3}
    body.motion-enabled .rc-ledger>li:nth-child(3)::before{animation-name:em-draw-3of3}
  }
}

/* 4A, crease: on the AI Brief page an ink panel with a pink edge slides off Pirates of the AI along the 24 degree
   fold as the frame comes up the screen. Never covers the caption, and never runs once the film has started, in full
   screen or while anything in the player has keyboard focus. Only translate changes. On the homepage the Reel does
   this job, so its film frames stay still. */
@keyframes em-fold{from{translate:0 0}}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    body.motion-enabled .brief-film .film-player{view-timeline-name:--em-film}
    body.motion-enabled .brief-film .film-player[data-state="idle"]:not(:focus-within):not(:fullscreen)::after{content:"";position:absolute;z-index:4;top:0;bottom:0;left:-30%;width:160%;background:linear-gradient(90deg,#FF3B8B 0 var(--em-edge),#0A0C14 var(--em-edge));transform:skewX(calc(-1 * var(--em-crease)));translate:100% 0;pointer-events:none;animation:em-fold var(--em-ease-fold);animation-timeline:--em-film;animation-range:entry 0% entry 100%}
  }
  @media (prefers-reduced-motion:no-preference) and (min-width:801px){
    body.motion-enabled .brief-film .film-player[data-state="idle"]:not(:focus-within):not(:fullscreen)::after{animation-range:entry 0% entry 45vh}
  }
}

/* 4A, proof links say where they go: a down arrow on the in-page links, which nudges 3 px on hover and keyboard
   focus, and the card's colour rule grows. The arrow is a mask with no text. */
:is(.hero-actions,.services-clarity) .text-link[href^="#"]::after{content:"";flex:none;width:.8em;height:.8em;margin-left:.45em;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.5v12M3 8.5l5 5 5-5' fill='none' stroke='black' stroke-width='1.8'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.5v12M3 8.5l5 5 5-5' fill='none' stroke='black' stroke-width='1.8'/%3E%3C/svg%3E") center/contain no-repeat}
:is(.hero-actions,.services-clarity) .text-link[href^="#"]:is(:hover,:focus-visible){text-decoration-thickness:2px}
.services-clarity .hybrid-services>article{position:relative}
.services-clarity .hybrid-services>article::after{content:"";position:absolute;left:0;right:0;top:-10px;height:4px;background:var(--service-colour);scale:1 0;transform-origin:50% 100%;pointer-events:none}
.services-clarity .hybrid-services>article:has(.text-link:is(:hover,:focus-visible))::after{scale:1 1}
@media (prefers-reduced-motion:no-preference){
  body.motion-enabled :is(.hero-actions,.services-clarity) .text-link[href^="#"]::after{transition:translate var(--em-t-2) var(--em-ease-out)}
  body.motion-enabled :is(.hero-actions,.services-clarity) .text-link[href^="#"]:is(:hover,:focus-visible)::after{translate:0 3px}
  body.motion-enabled .services-clarity .hybrid-services>article::after{transition:scale var(--em-t-2) ease}
}

/* 4A: the hero artwork, on the homepage and the AI Brief page, comes up to 4% closer once the visitor scrolls away,
   from 701 px. Nothing changes at the top of the page, and the headline never moves. */
@keyframes em-zoom-light{to{scale:1.04}}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference) and (min-width:701px){
    body.motion-enabled :is(.motion-hero,.brief-product-hero){view-timeline-name:--em-hero}
    body.motion-enabled :is(.motion-art img,.motion-art>video,.brief-product-art>img){transform-origin:70% 50%;animation:em-zoom-light linear;animation-timeline:--em-hero;animation-range:exit 0% exit 100%}
  }
}

/* 4A, the Reel: twelve silent seconds from three films, cut on the crease, at the head of the homepage films. It
   plays once, muted, when most of it is in view and motion is allowed, and its button pauses, plays and replays it.
   The chapter list is plain links, and each one's rule fills while its part of the reel plays. Without script: the
   poster and the links. It opens the ink band after Recent work, so it takes the films' 2B spacing above it. */
.em-reel{padding:clamp(56px,6vw,88px) 0 0;color:#fff}
.em-reel__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,360px);gap:16px 56px;align-items:end;margin-bottom:clamp(22px,2.6vw,36px)}
.em-reel .content-label{color:#B0B8C4;margin:0 0 14px}
.em-reel h3{margin:0;font-size:clamp(38px,4.4vw,64px);line-height:1.02;letter-spacing:-.045em;font-weight:500;color:#fff}
.em-reel__lede{margin:0;color:#B0B8C4;font-size:16px;line-height:1.5;max-width:34ch}
/* The stage and chapters fit one screen height, so the chapters stay in view while the reel plays. */
.em-reel__player{width:min(100%,calc((100svh - 150px) * 16 / 9))}
.em-reel__stage{position:relative;margin:0;aspect-ratio:16/9;background:#05060a;overflow:hidden}
.em-reel__stage video,.em-reel__poster,.em-reel__poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.em-reel__poster{transition:opacity var(--em-t-1) linear}
/* Without the script the browser would draw its own controls on the video, over the poster: the video shows only
   once reel.js runs. */
.em-reel:not(.is-live) .em-reel__stage video{visibility:hidden}
.em-reel[data-state] .em-reel__poster{opacity:0;pointer-events:none}
.em-reel__toggle{position:absolute;right:14px;bottom:14px;z-index:2;display:inline-flex;align-items:center;gap:10px;min-height:44px;min-width:9em;padding:0 16px 0 14px;border:1px solid rgba(237,237,237,.42);border-radius:4px;background:rgba(10,12,20,.72);color:#fff;font:500 14px/1 General,Arial,sans-serif;cursor:pointer}
.em-reel__toggle:hover{border-color:#fff}
.em-reel__toggle:focus-visible{outline:2px solid #FF3B8B;outline-offset:3px}
.em-reel__toggle i{width:10px;height:12px;background:currentColor;clip-path:polygon(0 0,100% 50%,0 100%)}
.em-reel[data-state="playing"] .em-reel__toggle i{clip-path:none;background:none;box-sizing:border-box;border-inline:3.5px solid currentColor}
.em-reel__chapters{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 28px}
.em-reel__chapters a{--p:0;position:relative;display:grid;grid-template-columns:auto 1fr;gap:4px 14px;padding:16px 0 4px;border-top:1px solid #3f424e;color:#fff;text-decoration:none;min-height:44px}
.em-rule{position:absolute;left:0;top:-1px;width:100%;height:2px;background:#FF3B8B;transform:scaleX(var(--p,1));transform-origin:0 50%;pointer-events:none}
.em-reel__chapters .n{grid-row:span 2;min-width:2.2ch;color:#FF3B8B;font-size:13px;font-weight:600;line-height:1.75;letter-spacing:.02em;font-variant-numeric:tabular-nums}
.em-reel__chapters .t{font-size:21px;line-height:1.25;letter-spacing:-.02em;font-weight:500}
.em-reel__chapters .d{color:#B0B8C4;font-size:14px;line-height:1.4}
.em-reel__chapters a:hover .t,.em-reel__chapters a:focus-visible .t{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.em-reel__chapters a:focus-visible{outline:2px solid #FF3B8B;outline-offset:4px}
.em-reel__chapters .t::after{content:" \2192";color:#B0B8C4;font-weight:400}
#work .selected-creative .em-reel+.rc-films{padding-top:clamp(44px,5vw,72px)}
@media (max-width:700px){
  .em-reel__head{grid-template-columns:1fr;gap:12px}
  .em-reel h3{font-size:39px}
  .em-reel__player{width:auto}
  .em-reel__stage{aspect-ratio:1/1;margin-inline:calc(-1 * var(--gutter))}
  .em-reel__chapters{grid-template-columns:1fr;margin-top:8px}
  .em-reel__chapters a{padding:13px 0 11px}
  .em-reel__chapters .t{font-size:19px}
  .em-reel__toggle{right:12px;bottom:12px}
}
@media (prefers-reduced-motion:reduce){.em-reel__poster{transition:none}}

/* Live-site review, 17 October 2026, item 5: the header stays in reach. Once the header has scrolled
   away, pinned-header.js shows a slim bar at the top with the logo and "Start a conversation", so on a
   long page the enquiry is always a tap away. The logo and button keep the header's own sizes from
   styles/brand.css. In-page links stop below the bar. */
:root{--pinned-header-h:60px}
@media (min-width:701px){:root{--pinned-header-h:64px}}
html{scroll-padding-top:calc(26px + var(--pinned-header-h))}
.pinned-header{position:fixed;top:0;left:0;right:0;z-index:9;background:var(--ink);border-bottom:1px solid rgba(237,237,237,.16);transform:translateY(-100%);visibility:hidden;transition:transform .2s ease-out,visibility 0s linear .2s}
.pinned-header.is-shown{transform:none;visibility:visible;transition:transform .2s ease-out}
.pinned-header>.frame{height:var(--pinned-header-h);display:flex;align-items:center;justify-content:space-between;gap:12px}
@media (prefers-reduced-motion:reduce){.pinned-header,.pinned-header.is-shown{transition:none}}
@media print{.pinned-header{display:none}}