/* Single public-site type system. Loaded last so legacy component sizes cannot
   drift apart. Text inside project illustrations belongs to the artwork. */
:root {
  --font: Manrope, Arial, sans-serif;
  --type-display: clamp(2.5rem, 1.5rem + 3.5vw, 4.5rem);
  --type-section: clamp(1.75rem, 1.25rem + 2vw, 2.5rem);
  --type-card: clamp(1.375rem, 1.25rem + .5vw, 1.5rem);
  --type-lead: 1.25rem;
  --type-body: 1rem;
  --type-small: .875rem;
  --weight-body: 400;
  --weight-label: 600;
  --weight-display: 700;
  --leading-body: 1.65;
  --leading-title: 1.18;
  --text-body: #526078;
  --text-muted: #526078;
}
body {
  font-family: var(--font);
  font-size: var(--type-body);
  font-weight: var(--weight-body);
  line-height: var(--leading-body);
  letter-spacing: normal;
}
button, input, select, textarea { font-family: var(--font); }

/* The same hierarchy on the homepage, service, audit, project and legal pages. */
#main :is(h1, h2, h3, h4):not(:where(.device-scene *, .showcase-art *)) {
  font-family: var(--font);
  font-style: normal;
  font-weight: var(--weight-label);
  line-height: var(--leading-title);
  letter-spacing: -.03em;
  overflow-wrap: break-word;
  text-wrap: balance;
}
#main h1:not(:where(.device-scene *, .showcase-art *)) {
  font-size: var(--type-display);
  font-weight: var(--weight-display);
  line-height: 1.1;
  letter-spacing: -.04em;
}
#main h2:not(:where(.device-scene *, .showcase-art *)),
#main .cinema-caption h3,
#main .partnership-promise { font-size: var(--type-section); }
#main :is(h3, h4):not(:where(.device-scene *, .showcase-art *, .cinema-caption h3, .partnership-promise)) {
  font-size: var(--type-card);
}

/* Explanations keep one size, weight, colour and line-height at every breakpoint. */
#main p:not(:where(.device-scene *, .showcase-art *)),
#main .body-copy,
#main .deliverables li,
#main .contact-steps li,
#main .partnership-card li,
#main .legal-document li {
  font-family: var(--font);
  font-size: var(--type-body);
  font-weight: var(--weight-body);
  font-style: normal;
  line-height: var(--leading-body);
  letter-spacing: normal;
  color: var(--text-body);
}
#main p:is(.page-intro, .premium-lead, .audit-lead, .intro-statement) {
  font-size: var(--type-lead);
  line-height: var(--leading-body);
}
#main :is(.cinema, .audit-output) {
  --text-body: #b8c4d8;
  --text-muted: #b8c4d8;
}

/* Labels and supplementary notes share one readable small-text style. */
#main :is(.eyebrow, .premium-kicker, .chapter-index, .partnership-label, .insight-index),
.site-footer .footer-title {
  font-family: var(--font);
  font-size: var(--type-small);
  font-weight: var(--weight-label);
  line-height: 1.5;
  letter-spacing: .02em;
  text-transform: none;
}
#main :is(.premium-fine, .partnership-note, .form-help, .confidential-note,
  .banner-note, .breadcrumbs, .work-category, .case-facts div, .case-facts small,
  .kicker, .audit-route, .audit-output-note, .cinema-rail, .form-status) {
  font-family: var(--font);
  font-size: var(--type-small);
  font-weight: var(--weight-body);
  line-height: 1.5;
  letter-spacing: normal;
  color: var(--text-muted);
}
#main .case-facts small { text-transform: none; }
#main .audit-actions p { font-size: var(--type-small); line-height: 1.5; }
#main :is(.cinema .premium-kicker, .cinema .chapter-index, .audit-output .eyebrow) {
  color: #9ebeff;
}
#main .faq-section summary {
  font-size: var(--type-body);
  font-weight: var(--weight-label);
  line-height: 1.5;
  letter-spacing: normal;
}
#main .field label { font-size: var(--type-small); font-weight: var(--weight-label); }
#main .field :is(input, select, textarea) {
  font-size: var(--type-body);
  font-weight: var(--weight-body);
  line-height: 1.5;
}
.contact-form .contact-optional { grid-column: 1 / -1; border-top: 1px solid #dce1e9; padding-top: 16px; }
.contact-form .contact-optional summary {
  cursor: pointer;
  color: var(--text-body);
  font-size: var(--type-small);
  font-weight: var(--weight-label);
  line-height: 1.5;
}
.contact-form .contact-optional summary span { font-weight: var(--weight-body); }
.contact-form .contact-optional > .form-grid { margin-top: 18px; }
.contact-form .contact-optional summary:focus-visible { outline: 2px solid #2463eb; outline-offset: 5px; }

/* Shared navigation, links and controls; icon glyphs retain their own geometry. */
:is(.site-header, #main) :is(.button, .text-link, .premium-link, .filter-button,
  .showcase-tabs button, .solution-more, .spotlight-link, .menu-toggle),
.site-header :is(.desktop-nav, .mobile-nav) {
  font-family: var(--font);
  font-size: var(--type-small);
  font-weight: var(--weight-label);
  line-height: 1.5;
  letter-spacing: normal;
}
.site-header .desktop-nav { gap: 26px; }
.site-header .mobile-nav > a:not(.button) { font-size: var(--type-lead); }
.site-footer :is(.footer-brand-copy, .footer-links, .footer-bottom, .footer-legal) {
  font-size: var(--type-small);
  font-weight: var(--weight-body);
  line-height: 1.5;
  letter-spacing: normal;
  color: var(--text-muted);
}

/* Consent is part of the same interface, without altering its behaviour. */
#oc-consent {
  font-family: var(--font);
  font-size: var(--type-body);
  line-height: var(--leading-body);
}
#oc-consent :is(.oc-banner h2, .oc-dialog h2) {
  font-size: var(--type-card);
  font-weight: var(--weight-label);
  line-height: var(--leading-title);
  letter-spacing: -.03em;
}
#oc-consent :is(.oc-banner p, .oc-necessary p, .oc-option p) {
  font-size: var(--type-body);
  font-weight: var(--weight-body);
  line-height: var(--leading-body);
  letter-spacing: normal;
}
#oc-consent :is(.oc-necessary h3, .oc-option label) {
  font-size: var(--type-body);
  font-weight: var(--weight-label);
  letter-spacing: normal;
}
#oc-consent :is(.oc-button, .oc-links, .oc-always, .oc-eyebrow, .oc-notice) {
  font-size: var(--type-small);
  line-height: 1.5;
  letter-spacing: normal;
}
#oc-consent .oc-eyebrow { text-transform: none; font-weight: var(--weight-label); }

/* Fit readable captions rather than shrinking their text to 13px. */
.cinema-motion #main .cinema--methodology .cinema-captions { height: 190px; }
.cinema-motion #main .cinema--methodology .cinema-copy > p:last-child { max-width: 740px; }
.cinema-motion #main .cinema--methodology .cinema-rail { width: min(640px, 88vw); gap: 12px; }
#main .premium-lead { max-width: 800px; }
@media (max-width: 800px) {
  #main .article-section { gap: 24px; }
  #main .work-meta { display: block; }
  #main .work-category { display: block; text-align: left; margin-top: 8px; }
  .cinema-motion #main .cinema--methodology .cinema-captions { height: 240px; }
}
@media (max-width: 540px) {
  :root { --type-lead: 1.125rem; }
  #main .cinema-copy br { display: none; }
  #main .spotlight-caption { padding: 24px; }
  #main .solution { display: flex; }
  #main .solution-icon { margin-bottom: 22px; }
  .cinema-motion #main .cinema--methodology .cinema-rail { gap: 6px; flex-wrap: wrap; }
}
/* A short viewport must still leave room for both caption and film. */
@media (max-height: 650px) and (min-width: 801px) {
  .cinema-motion #main .cinema--methodology .cinema-captions { height: 175px; }
}