/* ILN, Illustrated London News: design system for the one-page site and its inner pages.
   Tokens follow --ds-{category}-{name}; components follow .bb-*. Conversion markers are added later by the converter. */

@font-face{font-family:'Noto Serif Display';src:url('/assets/fonts/noto-serif-display-latin-300-normal.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Noto Serif Display';src:url('/assets/fonts/noto-serif-display-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Noto Serif Display';src:url('/assets/fonts/noto-serif-display-latin-400-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Editorial Today';src:local('Editorial Today'),local('EditorialToday-Regular'),local('Editorial Today Regular');font-weight:400;font-style:normal;font-display:swap}

/* Self-hosted fonts (were loaded from Google Fonts in the design). Latin subset, SIL Open Font Licence: see /assets/fonts/ */
@font-face{font-family:'Montserrat';src:url('/assets/fonts/montserrat-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Montserrat';src:url('/assets/fonts/montserrat-latin-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}

:root{
  --ds-color-surface:#FFFFFF;
  --ds-color-surface-2:#F6F5F2;
  --ds-color-surface-3:#ECEAE5;
  --ds-color-ink:#0E2A33;
  --ds-color-ink-deep:#000000;
  --ds-color-accent:#006885;
  --ds-color-accent-deep:#0B5B72;
  --ds-color-text:#14202A;
  --ds-color-text-muted:rgba(20,32,42,0.72);
  --ds-color-text-faint:rgba(20,32,42,0.62);
  --ds-color-line:#E9E7E2;
  --ds-color-line-strong:#D9D6CF;
  --ds-color-on-ink:#FFFFFF;
  --ds-color-on-ink-muted:rgba(255,255,255,0.88);
  --ds-color-on-ink-faint:rgba(255,255,255,0.68);
  --ds-color-on-ink-line:rgba(255,255,255,0.2);
  --ds-color-on-ink-field:rgba(255,255,255,0.4);
  --ds-color-error-on-ink:#FFB4A8;
  --ds-color-cover-red:#8B1A1A;
  --ds-color-cover-gold:#D4AF37;
  --ds-color-cover-cream:#F3E6C0;

  --ds-font-display:'Noto Serif Display',Georgia,serif; /* Izzy's choice, 19 October: Light for headings */
  --ds-weight-display:300;
  --ds-font-body:'Montserrat',system-ui,sans-serif;

  --ds-weight-light:400; /* was 300; thin strokes broke up on some screens (10 October) */
  --ds-weight-regular:400;
  --ds-weight-medium:500;

  --ds-text-xs:13px;
  --ds-text-sm:14px;
  --ds-text-base:16px;
  --ds-text-md:17px;
  --ds-text-lg:18px;
  --ds-text-xl:20px;
  --ds-text-h4:24px;
  --ds-text-h3:clamp(26px,2.4vw,34px);
  --ds-text-h2-sm:clamp(30px,3.4vw,52px);
  --ds-text-h2:clamp(34px,4.4vw,68px);
  --ds-text-h1:clamp(40px,5.2vw,78px);
  --ds-text-display:clamp(44px,6.4vw,104px);

  --ds-line-tight:1.05;
  --ds-line-snug:1.2;
  --ds-line-body:1.7;

  --ds-space-xs:8px;
  --ds-space-sm:16px;
  --ds-space-md:24px;
  --ds-space-lg:40px;
  --ds-space-xl:clamp(48px,6vw,80px);
  --ds-space-section:clamp(96px,11vw,160px);
  --ds-space-gutter:40px;

  --ds-size-container:1440px;
  --ds-size-header:72px;
}
@media (max-width:768px){:root{--ds-space-gutter:24px}}
@media (max-width:480px){:root{--ds-space-gutter:20px}}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--ds-size-header)}
body{margin:0;background-color:var(--ds-color-surface);color:var(--ds-color-text);font-family:var(--ds-font-body);font-weight:var(--ds-weight-light);font-size:var(--ds-text-base);line-height:var(--ds-line-body);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
figure,blockquote,dl,dd{margin:0}
button{font:inherit}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none !important}}

h1,h2,h3,h4{margin:0;font-family:var(--ds-font-display);font-weight:var(--ds-weight-display);color:inherit;text-wrap:balance}
h1{font-size:var(--ds-text-h1);line-height:var(--ds-line-tight);letter-spacing:-0.01em}
h2{font-size:var(--ds-text-h2);line-height:var(--ds-line-tight)}
h3{font-size:var(--ds-text-h3);line-height:var(--ds-line-snug)}
h4{font-size:var(--ds-text-h4);line-height:var(--ds-line-snug)}
p{margin:0;text-wrap:pretty}
a{color:var(--ds-color-accent);transition:color .2s,border-color .2s,background-color .2s,opacity .2s}
a:hover{color:var(--ds-color-accent-deep)}
:focus-visible{outline:2px solid var(--ds-color-accent);outline-offset:3px}

/* Layout */
.bb-container{max-width:var(--ds-size-container);margin:0 auto}
.bb-container--narrow{max-width:1200px}
.bb-container--text{max-width:880px}
.bb-section{padding:var(--ds-space-section) var(--ds-space-gutter);background-color:var(--ds-color-surface)}
.bb-section--surface-2{background-color:var(--ds-color-surface-2)}
.bb-section--ink{background-color:var(--ds-color-ink);color:var(--ds-color-on-ink)}
.bb-section--ink h2,.bb-section--ink h3{color:var(--ds-color-on-ink)}
.bb-stack-lg{display:grid;gap:clamp(40px,5vw,72px)}
.bb-stack-xl{display:grid;gap:clamp(64px,8vw,120px)}
.bb-split{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--ds-space-lg) clamp(48px,6vw,96px);align-items:end}
.bb-split--center{align-items:center}
.bb-split--start{align-items:start}
.bb-trio{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(40px,5vw,72px)}
.bb-ruled{border-top:1px solid var(--ds-color-line-strong);padding-top:var(--ds-space-xl)}
.bb-headrow{display:flex;justify-content:space-between;align-items:end;gap:var(--ds-space-md);flex-wrap:wrap}
.bb-lede{font-size:var(--ds-text-md);line-height:var(--ds-line-body);max-width:52ch}
.bb-lede--lg{font-size:var(--ds-text-xl);line-height:1.6;max-width:54ch}
.bb-prose{display:grid;gap:var(--ds-space-lg)}
.bb-feature{display:grid;gap:18px;align-content:start}
.bb-feature--tight{gap:var(--ds-space-xs)}
.bb-feature h2{font-size:clamp(28px,2.6vw,40px);line-height:1.12}
.bb-feature h3{font-size:var(--ds-text-h3)}
.bb-h2-sm{font-size:var(--ds-text-h2-sm);line-height:1.1}
.bb-feature--tight h3{font-size:var(--ds-text-h4)}

/* Buttons and links */
.bb-actions{display:flex;gap:28px;align-items:center;flex-wrap:wrap}
.bb-btn{display:inline-block;background-color:var(--ds-color-accent);color:var(--ds-color-on-ink);text-decoration:none;font-size:var(--ds-text-sm);font-weight:var(--ds-weight-medium);letter-spacing:0.02em;padding:16px 28px;border:0;cursor:pointer}
.bb-btn:hover{background-color:var(--ds-color-accent-deep);color:var(--ds-color-on-ink)}
.bb-btn--light{background-color:var(--ds-color-on-ink);color:var(--ds-color-text)}
.bb-btn--light:hover{background-color:var(--ds-color-accent);color:var(--ds-color-on-ink)}
.bb-cta-link{display:inline-block;color:var(--ds-color-text);text-decoration:none;font-size:var(--ds-text-sm);font-weight:var(--ds-weight-medium);padding:6px 0;border-bottom:1px solid currentColor}
.bb-cta-link:hover{color:var(--ds-color-accent)}
.bb-section--ink .bb-cta-link,.bb-footer .bb-cta-link{color:var(--ds-color-on-ink);border-color:var(--ds-color-on-ink-field)}
.bb-section--ink .bb-cta-link:hover,.bb-footer .bb-cta-link:hover{color:var(--ds-color-on-ink);border-color:var(--ds-color-on-ink)}

/* Header */
.bb-header{position:fixed;top:0;left:0;right:0;z-index:50;background-color:var(--ds-color-surface);color:var(--ds-color-text);border-bottom:1px solid var(--ds-color-line)}
.bb-header__bar{max-width:var(--ds-size-container);margin:0 auto;height:var(--ds-size-header);padding:14px var(--ds-space-gutter);display:flex;align-items:center;justify-content:space-between;gap:var(--ds-space-md)}
.bb-header__logo img{height:44px;width:auto}
.bb-nav{display:flex;align-items:center;gap:26px}
.bb-nav a{color:var(--ds-color-text);text-decoration:none;font-size:var(--ds-text-sm);font-weight:var(--ds-weight-medium);padding:6px 0;border-bottom:1px solid transparent;white-space:nowrap}
.bb-nav a:hover{color:var(--ds-color-accent)}
.bb-nav a.is-active,.bb-nav a[aria-current="page"]{border-bottom-color:currentColor}
.bb-menu-toggle{display:none;background:transparent;border:0;color:inherit;font-size:var(--ds-text-sm);font-weight:var(--ds-weight-medium);padding:11px 0;cursor:pointer}
@media (max-width:1180px){
  .bb-menu-toggle{display:block}
  .bb-nav{display:none;position:absolute;top:var(--ds-size-header);left:0;right:0;flex-direction:column;align-items:flex-start;gap:14px;padding:16px var(--ds-space-gutter) 24px;background-color:var(--ds-color-surface);border-top:1px solid var(--ds-color-line)}
  .bb-header.is-open .bb-nav{display:flex}
  .bb-nav a{font-size:15px;padding:8px 0}
}

/* Home hero: the film, then the headline */
.bb-hero{padding-top:var(--ds-size-header);background-color:var(--ds-color-surface)}
.bb-film{position:relative;aspect-ratio:16/9;background-color:var(--ds-color-ink-deep);overflow:hidden}
.bb-film__poster{position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;margin:0;background-color:var(--ds-color-ink-deep);cursor:pointer}
.bb-film__poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.bb-film__play{position:absolute;left:50%;bottom:12%;transform:translateX(-50%);display:flex;align-items:center;gap:var(--ds-space-sm);color:var(--ds-color-on-ink);font-size:var(--ds-text-sm);font-weight:var(--ds-weight-medium)}
.bb-film__icon{width:64px;height:64px;border:1px solid var(--ds-color-on-ink-muted);border-radius:50%;display:grid;place-items:center;font-size:16px;padding-left:4px;transition:background-color .2s}
.bb-film__poster:hover .bb-film__icon{background-color:rgba(255,255,255,0.15)}
.bb-film iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.bb-hero__intro{padding:clamp(56px,7vw,104px) var(--ds-space-gutter) clamp(72px,8vw,120px)}
.bb-hero__intro .bb-lede{margin-bottom:32px}

/* Client logos */
.bb-logos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border-top:1px solid var(--ds-color-line-strong);border-left:1px solid var(--ds-color-line-strong)}
.bb-logos__item{aspect-ratio:3/2;display:grid;place-items:center;overflow:hidden;border-right:1px solid var(--ds-color-line-strong);border-bottom:1px solid var(--ds-color-line-strong)}
.bb-logos__mark{height:auto;max-height:62%;object-fit:contain}
.bb-logos__mark--xwide{width:74%}
.bb-logos__mark--wide{width:66%}
.bb-logos__mark--long{width:55%}
.bb-logos__mark--mid{width:45%}
.bb-logos__mark--compact{width:38%}
.bb-logos__mark--square{width:32%}
.bb-logos__mark--tall{width:25%}
.bb-logos__placeholder{display:grid;gap:6px;justify-items:center;text-align:center;padding:0 12px}
.bb-logos__name{font-family:var(--ds-font-display);font-size:19px;line-height:1.15}
.bb-logos__note{font-size:11px;font-weight:var(--ds-weight-medium);color:var(--ds-color-text-faint)}
@media (max-width:1100px){.bb-logos{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.bb-logos{grid-template-columns:repeat(3,minmax(0,1fr))}} /* build: was 2 columns, 9 rows on a phone */

/* Framed archive plate */
.bb-plate{background-color:var(--ds-color-surface);padding:clamp(20px,2.4vw,36px);border:1px solid var(--ds-color-line);box-shadow:0 30px 60px -36px rgba(20,32,42,0.35);display:grid;gap:var(--ds-space-sm)}
.bb-plate img{width:100%;height:auto;filter:grayscale(1) contrast(1.05)}
.bb-plate figcaption{font-size:var(--ds-text-xs);color:var(--ds-color-text-muted)}

/* Case study cards */
.bb-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:48px var(--ds-space-md)}
.bb-card{display:grid;gap:18px;align-content:start;text-decoration:none;color:var(--ds-color-text)}
.bb-card:hover{color:var(--ds-color-text)}
.bb-card__media{position:relative;aspect-ratio:4/5;overflow:hidden;background-color:var(--ds-color-ink)}
.bb-card__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .3s}
.bb-card:hover .bb-card__media img{opacity:0.88}
.bb-card__body{display:grid;gap:6px}
.bb-card__title{font-family:var(--ds-font-display);font-size:26px;line-height:1.15}
.bb-card__meta{font-size:var(--ds-text-sm);font-weight:var(--ds-weight-regular);color:var(--ds-color-text-muted)}
.bb-ph{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:14px;background-color:var(--ds-color-ink)}
.bb-ph img{position:static;width:56px;height:56px;opacity:0.5}
.bb-ph span{font-size:12px;font-weight:var(--ds-weight-medium);color:var(--ds-color-on-ink-faint)}
.bb-ph--light{background-color:var(--ds-color-surface-3)}
.bb-ph--light img{opacity:0.3;filter:grayscale(1)}
.bb-ph--light span{color:var(--ds-color-text-muted)}
@media (max-width:1100px){.bb-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.bb-cards{grid-template-columns:minmax(0,1fr)}}

/* Magazines */
.bb-covers{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,32px);align-items:end;position:sticky;top:96px}
.bb-cover{aspect-ratio:3/4;position:relative;overflow:hidden;box-shadow:0 30px 60px -30px rgba(20,32,42,0.45);container-type:inline-size}
.bb-cover--sphere{background-color:var(--ds-color-ink)}
.bb-cover--sphere img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 20%}
.bb-cover--sphere::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,42,51,0.35) 0%,rgba(14,42,51,0) 40%,rgba(14,42,51,0.7) 100%)}
.bb-cover__mast{position:absolute;z-index:1;top:8%;left:0;right:0;text-align:center;font-family:var(--ds-font-display);font-size:clamp(18px,15cqw,64px);letter-spacing:0.1em;color:var(--ds-color-on-ink);line-height:1}
.bb-cover__strap{position:absolute;z-index:1;bottom:7%;left:0;right:0;text-align:center;font-size:clamp(8px,4.5cqw,12px);letter-spacing:0.12em;text-transform:uppercase;color:var(--ds-color-on-ink-muted)}
.bb-cover--royalty{background-color:var(--ds-color-cover-red);display:grid;place-items:center;padding:12%}
.bb-cover__frame{border:1px solid var(--ds-color-cover-gold);width:100%;height:100%;display:grid;align-content:center;justify-items:center;gap:12px;padding:8%;text-align:center}
.bb-cover__small{font-size:clamp(7px,4cqw,11px);letter-spacing:0.18em;text-transform:uppercase;color:var(--ds-color-cover-gold)}
.bb-cover__title{font-family:var(--ds-font-display);font-size:clamp(16px,11cqw,46px);line-height:1.05;color:var(--ds-color-cover-cream)}
.bb-magazines__copy{display:grid;gap:var(--ds-space-lg)}
.bb-magazines__list{display:grid;gap:28px;border-top:1px solid var(--ds-color-line-strong);padding-top:32px}
.bb-magazines__item{display:grid;gap:10px}
.bb-magazines__item h3{font-size:28px;line-height:1.1}
.bb-magazines__item p{font-size:15px}
@media (max-width:768px){.bb-covers{position:static}}

/* Services */
.bb-services{list-style:none;margin:0;padding:0;display:grid}
.bb-services__item{display:flex;gap:28px;align-items:baseline;padding:20px 0;border-top:1px solid var(--ds-color-line-strong)}
.bb-services__n{font-size:var(--ds-text-xs);font-weight:var(--ds-weight-medium);color:var(--ds-color-accent);flex:none;width:32px}
.bb-services__name{font-family:var(--ds-font-display);font-size:clamp(22px,2.2vw,32px);line-height:var(--ds-line-snug)}

/* Team */
.bb-team{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:56px 32px}
.bb-person{display:grid;gap:18px;align-content:start}
.bb-person__photo{position:relative;aspect-ratio:4/5;overflow:hidden;background-color:var(--ds-color-surface-3)}
.bb-person__photo img{width:100%;height:100%;object-fit:cover;object-position:center top;filter:grayscale(1)}
.bb-person__photo .bb-ph img{width:64px;height:64px}
.bb-person__name{font-family:var(--ds-font-display);font-size:var(--ds-text-h4);line-height:1.15}
.bb-person__role{font-size:var(--ds-text-sm);font-weight:var(--ds-weight-medium);color:var(--ds-color-text-muted)}
a.bb-person__photo{display:block}
a.bb-person__photo img{transition:filter .3s ease}
a.bb-person__photo:hover img{filter:grayscale(0)}
.bb-person__link{display:inline-block;margin-top:6px;font-size:var(--ds-text-sm);font-weight:var(--ds-weight-medium);color:var(--ds-color-text);text-decoration:none;border-bottom:1px solid currentColor;padding:4px 0}
.bb-person__link:hover{opacity:.7}
.bb-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (max-width:760px){.bb-team{grid-template-columns:minmax(0,1fr)}}

/* Insight cards */
.bb-posts{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:40px 32px}
.bb-posts--roomy{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:64px 32px}
.bb-post{display:grid;gap:16px;align-content:start;text-decoration:none;color:var(--ds-color-text)}
.bb-post:hover{color:var(--ds-color-text)}
.bb-post__media{aspect-ratio:3/2;overflow:hidden;background-color:var(--ds-color-ink)}
.bb-post__media img{width:100%;height:100%;object-fit:cover;transition:opacity .3s}
.bb-post:hover .bb-post__media img{opacity:0.88}
.bb-post__date{font-size:var(--ds-text-xs);color:var(--ds-color-text-muted)}
.bb-post__title{font-family:var(--ds-font-display);font-size:26px;line-height:var(--ds-line-snug)}
.bb-post__standfirst{font-size:15px;color:var(--ds-color-text-muted)}
.bb-post--lead{grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:var(--ds-space-lg) clamp(40px,6vw,96px);align-items:center;border-top:1px solid var(--ds-color-text);padding-top:clamp(32px,4vw,56px)}
.bb-post--lead .bb-post__media{aspect-ratio:4/3}
.bb-post--lead .bb-post__body{display:grid;gap:20px}
.bb-post--lead .bb-post__title{font-size:clamp(34px,3.8vw,58px);line-height:1.08}
.bb-post--lead .bb-post__standfirst{font-size:var(--ds-text-md);color:var(--ds-color-text);max-width:48ch}

/* Contact and enquiry form */
.bb-contact__aside{display:grid;gap:32px;align-content:start}
.bb-contact__aside h2{font-size:clamp(40px,5vw,80px);line-height:1.02}
.bb-contact__aside .bb-lede{color:var(--ds-color-on-ink-muted);max-width:42ch}
.bb-contact__details{display:grid;gap:var(--ds-space-md);border-top:1px solid var(--ds-color-on-ink-line);padding-top:var(--ds-space-md)}
.bb-contact__details address{font-style:normal;font-size:15px;line-height:1.8;color:var(--ds-color-on-ink-muted)}
.bb-social{display:flex;gap:28px;flex-wrap:wrap}
.bb-form{display:grid;gap:28px}
.bb-field{display:grid;gap:10px}
.bb-field__label{font-size:var(--ds-text-xs);font-weight:var(--ds-weight-medium);color:var(--ds-color-on-ink-muted)}
.bb-field__input{font-family:var(--ds-font-body);font-size:var(--ds-text-md);font-weight:var(--ds-weight-light);padding:12px 0;border:0;border-bottom:1px solid var(--ds-color-on-ink-field);border-radius:0;background-color:transparent;color:var(--ds-color-on-ink);outline:none;width:100%;transition:border-color .2s}
.bb-field__input:focus{border-bottom-color:var(--ds-color-on-ink)}
textarea.bb-field__input{resize:vertical;min-height:120px}
.bb-field__error{display:none;font-size:var(--ds-text-xs);font-weight:var(--ds-weight-regular);color:var(--ds-color-error-on-ink)}
.bb-field--error .bb-field__input{border-bottom-color:var(--ds-color-error-on-ink)}
.bb-field--error .bb-field__error{display:block}
.bb-form__foot{display:flex;justify-content:space-between;align-items:center;gap:var(--ds-space-sm);flex-wrap:wrap;padding-top:var(--ds-space-xs)}
.bb-form__note{font-size:var(--ds-text-xs);color:var(--ds-color-on-ink-faint)}
.bb-form__success{display:none;border:1px solid var(--ds-color-on-ink-line);padding:clamp(32px,4vw,56px);gap:var(--ds-space-sm);align-content:start;transition:opacity .3s}
.bb-form__success.is-visible{display:grid}
.bb-form__success img{width:48px;height:48px}
.bb-form__success h3{font-size:clamp(28px,2.6vw,38px);line-height:1.1;color:var(--ds-color-on-ink)}
.bb-form__success p{color:var(--ds-color-on-ink-muted)}
.bb-form__again{justify-self:start;background:transparent;color:var(--ds-color-on-ink);border:0;border-bottom:1px solid var(--ds-color-on-ink-field);padding:6px 0;margin-top:var(--ds-space-xs);font-size:var(--ds-text-sm);font-weight:var(--ds-weight-medium);cursor:pointer}
.bb-form.is-hidden{display:none}

/* Footer */
.bb-footer{background-color:var(--ds-color-ink);color:var(--ds-color-on-ink-muted);padding:0 var(--ds-space-gutter) 40px}
.bb-footer__inner{max-width:var(--ds-size-container);margin:0 auto;border-top:1px solid rgba(255,255,255,0.12);padding-top:40px;display:grid;gap:40px}
.bb-footer__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:40px;align-items:start}
.bb-footer__brand{display:grid;gap:20px;align-content:start}
.bb-wordmark{display:flex;align-items:center;gap:14px}
.bb-wordmark img{width:44px;height:44px}
.bb-wordmark span{font-size:var(--ds-text-sm);font-weight:var(--ds-weight-medium);color:var(--ds-color-on-ink)}
.bb-footer__tagline{font-family:var(--ds-font-display);font-size:var(--ds-text-xl);line-height:1.4;color:var(--ds-color-on-ink);max-width:30ch}
.bb-footer__nav{display:grid;gap:12px;align-content:start}
.bb-footer__nav a{color:var(--ds-color-on-ink-muted);text-decoration:none;font-size:var(--ds-text-sm)}
.bb-footer__nav a:hover{color:var(--ds-color-on-ink)}
.bb-footer__contact{display:grid;gap:var(--ds-space-sm);align-content:start;font-size:15px}
.bb-footer__social{display:flex;gap:var(--ds-space-md)}
.bb-footer__social a{color:var(--ds-color-on-ink);text-decoration:none;font-size:var(--ds-text-sm);font-weight:var(--ds-weight-medium)}
.bb-footer__social a:hover{color:var(--ds-color-on-ink);opacity:0.8}
.bb-footer__base{border-top:1px solid rgba(255,255,255,0.12);padding-top:20px;display:flex;justify-content:space-between;gap:var(--ds-space-sm);flex-wrap:wrap;font-size:var(--ds-text-xs);color:var(--ds-color-on-ink-faint)}

/* Inner pages: editorial page head */
.bb-pagehead{padding:calc(var(--ds-size-header) + clamp(48px,6vw,88px)) var(--ds-space-gutter) clamp(40px,5vw,64px)}
.bb-pagehead__inner{display:grid;gap:clamp(24px,3vw,40px)}
.bb-pagehead h1{font-size:var(--ds-text-display);line-height:1}
.bb-back{justify-self:start;color:var(--ds-color-text);text-decoration:none;font-size:var(--ds-text-sm);font-weight:var(--ds-weight-medium);padding:4px 0;border-bottom:1px solid currentColor}
.bb-back:hover{color:var(--ds-color-accent)}
.bb-pagehead .bb-lead-media{padding:0;margin-top:clamp(40px,5vw,64px)}
.bb-pagehead .bb-post--lead{margin-top:clamp(24px,3vw,40px)}
.bb-post--lead .bb-cta-link{justify-self:start}
.bb-pagehead--article{padding-bottom:0}
.bb-pagehead--article h1{font-size:clamp(40px,5.4vw,80px);line-height:1.04}
.bb-pagehead .bb-article__figure{padding:0;margin-top:clamp(40px,5vw,64px)}
.bb-pagehead .bb-article__body{padding-left:0;padding-right:0}

/* Case study detail */
.bb-lead-media{padding:0 var(--ds-space-gutter)}
.bb-lead-media__frame{max-width:var(--ds-size-container);margin:0 auto;aspect-ratio:16/9;position:relative;overflow:hidden;background-color:var(--ds-color-ink)}
.bb-lead-media__frame .bb-ph img{width:72px;height:72px}
.bb-case{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:56px clamp(48px,7vw,120px);align-items:start}
.bb-facts{display:grid;gap:var(--ds-space-md);position:sticky;top:104px}
.bb-facts__row{display:grid;gap:6px;border-top:1px solid var(--ds-color-line);padding-top:14px}
.bb-facts__row:first-child{border-top-color:var(--ds-color-text)}
.bb-facts dt{font-size:var(--ds-text-xs);font-weight:var(--ds-weight-medium);color:var(--ds-color-text-muted)}
.bb-facts dd{font-size:var(--ds-text-base);line-height:1.6}
.bb-facts__client{font-family:var(--ds-font-display);font-size:var(--ds-text-h4) !important;line-height:var(--ds-line-snug) !important}
.bb-case__story{display:grid;gap:clamp(48px,6vw,80px);min-width:0}
.bb-case__part{display:grid;gap:var(--ds-space-sm)}
.bb-case__part + .bb-case__part{border-top:1px solid var(--ds-color-line);padding-top:clamp(40px,5vw,64px)}
.bb-case__part h2{font-size:clamp(30px,3vw,44px);line-height:1.1}
.bb-case__part p{font-size:var(--ds-text-lg);line-height:1.75;max-width:64ch}
.bb-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(max(180px,calc((100% - 64px) / 3)),1fr));gap:32px;margin-top:var(--ds-space-md)}
.bb-stats:has(>:nth-child(4):last-child){grid-template-columns:repeat(auto-fit,minmax(max(180px,calc((100% - 32px) / 2)),1fr))}
.bb-stats__item{display:grid;gap:var(--ds-space-xs);border-top:1px solid var(--ds-color-accent);padding-top:var(--ds-space-sm)}
.bb-stats dt{font-family:var(--ds-font-display);font-size:clamp(40px,4vw,60px);line-height:1}
.bb-stats dd{font-size:var(--ds-text-sm);color:var(--ds-color-text-muted);line-height:1.5}
.bb-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ds-space-md)}
.bb-gallery__item{position:relative;aspect-ratio:4/5}
.bb-gallery__item--wide{grid-column:1 / -1;aspect-ratio:21/9}
.bb-gallery .bb-ph img{width:48px;height:48px}
.bb-next{display:flex;justify-content:space-between;align-items:end;gap:32px;flex-wrap:wrap;text-decoration:none;color:var(--ds-color-text)}
.bb-next:hover{color:var(--ds-color-accent)}
.bb-next__label{display:block;font-size:var(--ds-text-sm);font-weight:var(--ds-weight-medium);color:var(--ds-color-text-muted);margin-bottom:12px}
.bb-next__title{display:block;font-family:var(--ds-font-display);font-size:clamp(36px,4.6vw,72px);line-height:1.02}
.bb-next__arrow{font-size:32px;line-height:1}
@media (max-width:900px){
  .bb-case{grid-template-columns:minmax(0,1fr)}
  .bb-facts{position:static}
}
@media (max-width:640px){
  .bb-gallery{grid-template-columns:minmax(0,1fr)}
  .bb-gallery__item--wide{aspect-ratio:4/3}
}

/* Closing call to action band */
.cta-band{background-color:var(--ds-color-ink);color:var(--ds-color-on-ink);padding:clamp(80px,9vw,128px) var(--ds-space-gutter)}
.cta-band__inner{max-width:var(--ds-size-container);margin:0 auto;display:flex;justify-content:space-between;align-items:end;gap:40px;flex-wrap:wrap}
.cta-band h2{font-size:clamp(36px,4.4vw,68px);line-height:1.04;max-width:16ch;color:var(--ds-color-on-ink)}

/* Insight article */
.bb-article__figure{padding:0 var(--ds-space-gutter)}
.bb-article__figure figure{max-width:1200px;margin:0 auto;display:grid;gap:14px}
.bb-article__figure img{width:100%;aspect-ratio:16/9;object-fit:cover}
.bb-article__figure figcaption{font-size:var(--ds-text-xs);color:var(--ds-color-text-muted)}
.bb-article__byline{font-size:var(--ds-text-sm);color:var(--ds-color-text-muted);border-top:1px solid var(--ds-color-line);padding-top:18px}
.bb-article__body{padding:clamp(56px,7vw,104px) var(--ds-space-gutter)}
.bb-article__text{max-width:680px;margin:0 auto;display:grid;gap:28px;font-size:var(--ds-text-lg);line-height:1.8}
.bb-article__text h2{font-size:clamp(28px,2.6vw,38px);line-height:1.15;margin-top:var(--ds-space-sm)}
.bb-pullquote{margin:var(--ds-space-md) 0;font-family:var(--ds-font-display);font-size:clamp(26px,2.4vw,34px);line-height:1.3;color:var(--ds-color-text)}


/* ------------------------------------------------------------------
   Build additions (October 2026). Not in the Claude Design handover.
   ------------------------------------------------------------------ */

/* Fix 1 from the brief: on phones the play button covered the poster's words.
   Smaller button, sitting on the bottom edge of the frame. */
@media (max-width:640px){
  .bb-film__play{bottom:10px;font-size:var(--ds-text-xs, 13px);gap:10px}
  .bb-film__icon{width:40px;height:40px;font-size:12px;padding-left:3px}
}

/* Imported articles: galleries, videos and captioned images inside post text */
.bb-article__text figure{margin:var(--ds-space-md) 0}
.bb-article__text figure img{display:block;width:100%;height:auto}
.bb-article__text figcaption{margin-top:10px;font-size:var(--ds-text-sm);color:var(--ds-color-text-muted, rgba(20,32,42,0.64))}
.bb-article__text .gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ds-space-sm, 16px);margin:var(--ds-space-md) 0}
.bb-article__text .gallery figure{margin:0}
.bb-article__text .video{position:relative;aspect-ratio:16/9;margin:var(--ds-space-md) 0;background-color:var(--ds-color-ink-deep)}
.bb-article__text .video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media (max-width:480px){.bb-article__text .gallery{grid-template-columns:minmax(0,1fr)}}

/* Insights listing: newer and older pages */
.bb-pager{display:flex;justify-content:space-between;gap:var(--ds-space-md);margin-top:var(--ds-space-lg, 48px)}
.bb-pager__status{color:var(--ds-color-text-muted, rgba(20,32,42,0.64));font-size:var(--ds-text-sm)}

/* Plain text pages (privacy policy) and the 404 page */
.bb-text-page h2{margin-top:var(--ds-space-lg, 48px)}

/* Contact form: the hidden honeypot field, and the "didn't send" message */
.bb-form__trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.bb-form__failed{display:none;margin:0 0 var(--ds-space-md);padding:12px 16px;border-left:2px solid var(--ds-color-on-ink-muted);color:var(--ds-color-on-ink);font-size:var(--ds-text-sm)}
.bb-form__failed.is-visible{display:block}
.bb-form__failed a{color:inherit}
.bb-form{position:relative}

/* The image plugin wraps images in <picture>. Let the <img> behave as if it were the direct child,
   so the design's rules (centring logos, filling frames) apply to it as intended. */
picture{display:contents}

/* Case study gallery: photos fill their frame and crop, never stretch */
.bb-gallery__item{overflow:hidden}
.bb-gallery__item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* Article sub-headings: a step below the page title, and never bold (old posts wrapped them in bold) */
.bb-article__text h2{font-size:clamp(24px,2.1vw,30px)}
.bb-article__text h3{font-size:clamp(20px,1.6vw,24px)}
.bb-article__text :is(h2,h3,h4) :is(strong,b){font-weight:inherit}

/* Links in the footer's base line match its text */
.bb-footer__base a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.bb-footer__base a:hover{color:var(--ds-color-on-ink)}
.bb-contact__details address a,.bb-footer__contact p a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.bb-contact__details address a:hover,.bb-footer__contact p a:hover{color:var(--ds-color-on-ink)}
.bb-form__note a{color:var(--ds-color-on-ink-muted);text-decoration:underline;text-underline-offset:3px}
.bb-form__note a:hover{color:var(--ds-color-on-ink)}
/* 404 page */
.bb-stack{display:grid;gap:var(--ds-space-md);align-content:start}
.bb-notfound__code{margin:0;font-size:var(--ds-text-sm);font-weight:var(--ds-weight-medium);letter-spacing:.16em;color:var(--ds-color-accent)}
.bb-notfound__links{list-style:none;margin:0;padding:0;border-top:1px solid var(--ds-color-line)}
.bb-notfound__links a{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:1px solid var(--ds-color-line);color:var(--ds-color-text);text-decoration:none;font-size:var(--ds-text-sm)}
.bb-notfound__links a::after{content:"\2192";color:var(--ds-color-accent);transition:transform .2s}
.bb-notfound__links a:hover::after,.bb-notfound__links a:focus-visible::after{transform:translateX(4px)}
@media (max-width:760px){.bb-notfound .bb-cards>:nth-child(n+3){display:none}}
/* <picture> wrappers take no part in layout; their <source> lines must not become grid items either */
picture source{display:none}
/* Cookie choice */
.bb-consent{position:fixed;left:var(--ds-space-gutter);bottom:var(--ds-space-gutter);z-index:60;max-width:440px;display:grid;gap:var(--ds-space-md);padding:24px;background:var(--ds-color-ink);color:var(--ds-color-on-ink-muted);box-shadow:0 12px 40px rgba(0,0,0,.25)}
.bb-consent[hidden]{display:none}
.bb-consent__text{margin:0;font-size:var(--ds-text-sm);line-height:1.6}
.bb-consent__text a{color:var(--ds-color-on-ink);text-decoration:underline;text-underline-offset:3px}
.bb-consent__actions{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.bb-consent .bb-btn{padding:12px 20px;text-align:center}
@media (max-width:520px){.bb-consent{left:12px;right:12px;bottom:12px;max-width:none;padding:20px}}
/* Tables in text (the privacy policy's cookie list); scrolls sideways on its own on phones */
.bb-article__text table{display:block;overflow-x:auto;border-collapse:collapse;width:100%;font-size:var(--ds-text-sm);line-height:1.5}
.bb-article__text :is(th,td){text-align:left;vertical-align:top;padding:12px 16px 12px 0;border-bottom:1px solid var(--ds-color-line);min-width:110px}
.bb-article__text th{font-weight:var(--ds-weight-medium);border-bottom-color:var(--ds-color-line-strong)}
.bb-article__text td:nth-child(3){min-width:240px}
/* Long web addresses in text wrap instead of pushing the page wider than a phone */
.bb-article__text{grid-template-columns:minmax(0,1fr);overflow-wrap:break-word}
.bb-article__text a{overflow-wrap:anywhere}
/* Case study lead image fills its 16:9 frame without stretching */
.bb-lead-media__frame>picture>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Small type on the Royalty cover stand-in: a lighter gold so it reads against the red (5.5:1) */
.bb-cover__small{color:#E3C463}
/* Body copy a touch softer than the headings, so the 400 weight doesn't read heavy. It mixes whatever
   colour the text already has (dark on light sections, white on ink) with 14% transparency, so it works
   everywhere in the page content and stays well above contrast minimums (about 10:1 on white). Text with its own colour class wins; the footer keeps its own colours. */
:where(main) :where(p, td, li:not(:has(p))){color:color-mix(in srgb, currentColor 86%, transparent)}
/* Client quotes on case studies: italic, a size that suits a long quote, name on its own line */
.bb-testimonial{margin:var(--ds-space-md) 0;display:grid;gap:16px;max-width:62ch}
.bb-testimonial blockquote{margin:0;font-family:var(--ds-font-display);font-style:italic;font-size:clamp(19px,1.5vw,22px);line-height:1.55;color:var(--ds-color-text)}
.bb-testimonial blockquote::before{content:"\201C"}
.bb-testimonial blockquote::after{content:"\201D"}
.bb-testimonial figcaption{font-size:var(--ds-text-sm);font-weight:var(--ds-weight-medium);color:var(--ds-color-text-muted)}
/* While the film loads, the poster stays on top with its button hidden */
.bb-film__poster{z-index:1}
.bb-film__poster--waiting{cursor:progress}
.bb-film__poster--waiting .bb-film__play{opacity:0;transition:opacity .2s}
/* Real magazine covers (replaced the drawn stand-ins, 12 October) */
/* The frame takes each cover's own shape, so nothing is cropped */
.bb-cover--photo{aspect-ratio:auto}
.bb-cover--photo img{display:block;width:100%;height:auto}
/* Large display text in the Light weight, to match the headings; small display text stays Regular */
:is(.bb-card__title,.bb-post__title,.bb-services__name,.bb-footer__tagline,.bb-stats dt,.bb-next__title,.bb-pullquote){font-weight:var(--ds-weight-display)}