/* Shared 8-point spacing and type scale. Thin rules and focus rings stay optical. */
:root {
  --colours--dark: #cccccb;
  --colours--light: #131313;
  --colours--grey: #616161;
  --colours--dark-grey: #969695;
  --colours--accent: var(--colours--light);
  --variation-overlay: #b9b9b8;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-8: 64px;
  --space-10: 80px;
  --space-12: 96px;
  --space-16: 128px;
  --space-20: 160px;
  --page-gutter: var(--space-6);
  --section-space: var(--space-12);
  --page-top: var(--space-20);
  --section-rule: #13131355;
  --type-body: 16px;
  --type-lead: 24px;
  --type-heading: 64px;
  --type-hero: 128px;
  --type-service: 80px;
  --type-projects: 112px;
  --type-platform-intro: 40px;
  --type-panel: 40px;
  --type-personal: 48px;
  --type-project-cta: 72px;
  --type-wordmark: 240px;
  --type-marquee: 216px;
}
html { font-size: 16px; }
h1 { font-size: 64px; }
h2 { font-size: 48px; }
h3 { font-size: 24px; }
h4, h5, h6 { font-size: 16px; }
body.site-blue { background: var(--colours--dark); color: var(--colours--light); font-size: var(--type-body); }
.site-blue :where(p) { font-size: var(--type-body); }
.site-blue :is(.text-color-grey, .is-grey, .eyebrow) { color: var(--colours--grey); font-size: var(--type-body); }
.site-blue .skip-link { padding: var(--space-2); background: var(--colours--light); color: var(--colours--dark); }
.site-blue .nav {
  top: 0;
  left: 0;
  translate: none;
  width: 100%;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--colours--light);
  box-shadow: none;
  font-size: var(--type-body);
  font-weight: 400;
}
.site-blue .nav__row { padding-inline: var(--page-gutter); }
.site-blue .nav-logo_link { text-transform: none; letter-spacing: 0; }
.site-blue .nav-logo_link span { font-size: var(--type-body); }
.site-blue :is(.navbar-link, .menu-trigger, .nav-dropdown-btn) { padding-block: var(--space-3); min-height: var(--space-8); }
.site-blue .menu-text_wrapper { height: 1em; }
.site-blue[data-scrolling-started="true"] .nav,
.site-blue[data-nav-status="open"] .nav { background: var(--colours--dark); }
.site-blue[data-scrolling-started="true"][data-scrolling-direction="down"]:not([data-nav-status="open"]) .nav { transform: translateY(-100%); }
.site-blue[data-nav-status="open"] .nav { transform: translateY(0); }
.site-blue .menu { color: var(--colours--light); }
.site-blue .menu :is(.main, .case-studies_overlay, .dropdown_menu-btn) { background: var(--colours--dark); color: var(--colours--light); }
.site-blue .menu .dropdown-background { background: #000000b3; }
.site-blue .menu .dropdown_menu-btn { padding-block: var(--space-2); }
.site-blue .menu .main-title__list:hover .dropdown_menu-btn { color: var(--colours--light); opacity: .5; }
.site-blue .menu .main-title__item:is(:hover, :focus-within) .dropdown_menu-btn { opacity: 1; }
.site-blue .menu :is(.main-title, .view-link, .view-link-mobile) { font-size: var(--type-body); }
.site-blue .menu__all-projects { gap: var(--space-3); padding-block: var(--space-2); margin-top: 0; min-height: var(--space-8); border-top: 0; font-size: var(--type-body); font-weight: 400; }
@media (min-width: 992px) {
  .site-blue .nav__row .wf-flex.is-menu { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: center; gap: 0; }
  .site-blue #nav-logo-cell { grid-area: 1 / 1 / 2 / 3; margin: 0; }
  .site-blue #projects { grid-area: 1 / 4 / 2 / 5; padding-inline: 0; }
  .site-blue #nav-desktop-links { grid-area: 1 / 5 / 2 / 7; justify-content: space-between; gap: var(--space-4); }
  .site-blue .navbar-link { margin: 0; }
  .site-blue .menu .case-studies_overlay { width: 100%; margin: 0; border-radius: 0; overflow: hidden; inset: auto; flex: none; }
  .site-blue .menu .main { padding: var(--space-12) var(--page-gutter) var(--space-6); }
  .site-blue .menu .wf-flex.is-content { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; }
  .site-blue .menu #menu-image-list { grid-area: 1 / 1 / 2 / 3; width: min(100%, 384px); margin: 0; padding: 0; }
  .site-blue .menu #menu-mobile-wrapper { grid-area: 1 / 4 / 2 / 7; }
  .site-blue .menu #menu-mobile-wrapper > .cms_projects { padding-inline: 0; }
  .site-blue .menu .main-title { font-size: var(--type-lead); }
  .site-blue .menu .main-title__item { min-height: var(--space-8); }
}
/* Original homepage, About, case studies and Privacy share the same gutters. */
.site-blue :is(.home-hero, .about-hero, .hero-section, .section, .footer-section) { padding-inline: var(--page-gutter); }
.site-blue :is(.section__pad, .industry) { padding-block: var(--section-space); }
.site-blue .section__header { padding-block: var(--space-6) var(--space-4); }
.site-blue :is(.work-grid, .section__row, .industry__row, .section-head, .cs-grid, .c-col-2, .wf-flex, .footer_center, .footer_bottom, .footer_item-2x) { gap: var(--space-4); }
.site-blue .about-hero__grid { margin-top: var(--page-top); padding-block: 0 var(--space-8); gap: var(--space-12) var(--space-4); }
.site-blue .about-hero__body { gap: var(--space-12) var(--space-4); }
.site-blue .about-overview { gap: var(--space-5); }
.site-blue .about-text, .site-blue .about-text__lead { gap: var(--space-3); }
.site-blue .underline-link.is-large { font-size: var(--type-lead); }
.site-blue .about-hero__eyebrow { font-size: var(--type-body); margin-bottom: var(--space-3); }
.site-blue :is(.about-hero__title, .section-head__title, .heading-style-h1) { font-size: var(--type-heading); }
.site-blue :is(.about-overview__t, .faq__item h3, .text-size-small, .footer-text, .footer-text p, .text, .case-study-section-heading, .more-case-study-heading) { font-size: var(--type-body); }
.site-blue :is(.intro__heading, .about-text__lead, .about-text__lead p, .heading-style-h4, .card__title, .industry__label, .industry__num) { font-size: var(--type-lead); }
.site-blue .intro__body p { font-size: var(--type-body); }
.site-blue .marquee { margin: var(--page-top) calc(-1 * var(--page-gutter)) 0; padding-bottom: var(--space-6); }
.site-blue .marquee__heading { font-size: var(--type-marquee); }
.site-blue .marquee__item { font-size: var(--type-marquee); margin-right: var(--space-6); }
.site-blue .hero__content { padding-block: 0 var(--space-4); }
.site-blue .card { margin-bottom: var(--space-6); }
.site-blue .card__content { padding-top: var(--space-2); gap: var(--space-1); }
.site-blue .card__services { margin-top: var(--space-1); gap: var(--space-1); }
.site-blue .card__service { font-size: var(--type-body); padding: var(--space-1) var(--space-2); background: #dededd; color: #505050; }
.site-blue .card__subtitle { font-size: var(--type-body); margin-bottom: var(--space-1); }
.site-blue .card__hover { bottom: var(--space-2); right: var(--space-2); padding: var(--space-2) var(--space-3); background: #fff; color: var(--colours--light); font-size: var(--type-body); }
.site-blue .card__overlay-text { color: var(--colours--light); font-size: var(--type-body); }
.site-blue .cs-hero-header { padding-block: var(--page-top) var(--space-6); gap: var(--space-6) var(--space-4); }
.site-blue .top-content { padding-block: 0 var(--space-4); gap: var(--space-3) var(--space-4); }
.site-blue .content-w.gap-small, .site-blue .service-list { gap: var(--space-1); }
.site-blue .cs-media-list { padding-bottom: var(--section-space); }
.site-blue .container-cs { padding-block: 0 var(--space-4); }
.site-blue .c-wrapper { gap: var(--space-8); }
.site-blue .case-readmore { margin-top: var(--space-2); }
.site-blue .case-readmore__body, .site-blue .case-readmore__body p + p { margin-top: var(--space-3); }
.site-blue .case-readmore summary { gap: var(--space-1); }
.site-blue .faq__item summary { padding: var(--space-3) var(--space-1) var(--space-3) 0; gap: var(--space-2); }
.site-blue .faq__icon { font-size: 32px; }
.site-blue .faq__answer { padding-block: var(--space-3); }
.site-blue .faq:has([open]) .faq__item:not([open]) summary { color: var(--colours--grey); }
.site-blue .footer-section::before { left: var(--page-gutter); right: var(--page-gutter); }
.site-blue .footer_top { gap: var(--space-4); padding-block: var(--space-6) var(--space-8); }
.site-blue .footer-header { font-size: 48px; line-height: 1.15; }
.site-blue .footer_center { padding-bottom: var(--space-8); }
.site-blue .footer_item-block { padding-top: var(--space-3); gap: var(--space-3); }
.site-blue .center-item_content, .site-blue .div-block-10 { gap: var(--space-1); }
.site-blue .footer_bottom { padding-bottom: var(--space-3); }
.site-blue .footer_bottom > .footer_item-block.is-wrapped { flex-direction: row; }
.site-blue .footer_item-grid { gap: var(--space-3); flex-wrap: wrap; }
.site-blue .footer-image { width: 240px; margin-bottom: var(--space-1); }
.site-blue .industry__list { gap: var(--space-1); }
.site-blue .industry__num { width: var(--space-6); margin-right: var(--space-2); }
.site-blue .grey-card { background: var(--variation-overlay); padding: var(--space-3); gap: var(--space-8); }
.site-blue .variation-footer__columns nav > div { margin-top: var(--space-3); }
.site-blue .variation-footer { padding: 0; }
.site-blue .footer-section--project-cta { padding-inline: 0; }
.site-blue .footer-section--project-cta > .wf-container { padding: var(--space-6) var(--page-gutter) 0; }
/* Each section owns one end gap; the next divider starts without a second gap. */
.section-divider { display: block; width: 100%; height: 1px; flex: none; border: 0; margin: 0 0 var(--space-4); background: var(--section-rule); }
.site-blue .section--divided .section__pad { padding-top: 0; }
.site-blue .section--divided .section__header { padding-top: 0; }
.site-blue .cms { padding-bottom: var(--section-space); }
.site-blue .industry { padding-top: 0; }
.site-blue .industry__keyline { padding-top: var(--space-4); border-top-color: var(--section-rule); }
.site-blue .about-hero__grid { padding-bottom: var(--section-space); }
.site-blue .variation-work { padding-bottom: var(--section-space); }
.site-blue .variation-work > .section-divider { width: calc(100% - var(--page-gutter) * 2); margin-inline: var(--page-gutter); }
.site-blue .variation-platforms,
.site-blue .variation-services__content,
.site-blue .variation-cta-personal,
.site-blue .project-cta { padding-top: 0; }
.site-blue .variation-cta-personal > .section-divider { background: var(--section-rule); }
.site-blue .variation-footer__base { padding-top: 0; }
.site-blue .footer-section--divided::before { display: none; }
.site-blue .footer-section--divided .footer_top { padding-top: 0; padding-bottom: var(--section-space); }
.site-blue .footer-section--divided .footer_center .footer_item-block { border-top: 0; padding-top: 0; }
.site-blue .footer-section--project-cta > .wf-container { padding-top: 0; }
@media (min-width: 1440px) { :root { --type-hero: 144px; --type-service: 96px; --type-projects: 128px; --type-heading: 80px; --type-wordmark: 264px; --type-marquee: 240px; } }
@media (min-width: 1920px) { :root { --type-hero: 160px; --type-wordmark: 352px; --type-marquee: 312px; } }
@media (max-width: 1199px) { :root { --type-hero: 104px; --type-service: 64px; --type-projects: 96px; --type-wordmark: 184px; --type-marquee: 184px; } }
@media (max-width: 991px) {
  :root { --page-gutter: var(--space-4); --section-space: var(--space-8); --type-heading: 56px; --type-hero: 72px; --type-service: 48px; --type-projects: 72px; --type-personal: 40px; --type-wordmark: 144px; --type-marquee: 152px; }
  .site-blue .menu { padding: var(--space-12) var(--page-gutter) calc(var(--space-4) + env(safe-area-inset-bottom)); }
  .site-blue .menu .main { padding: 0; }
  .site-blue .menu .dropdown-background { background: var(--colours--dark); }
  .site-blue .menu .main-title__list:hover .dropdown_menu-btn { opacity: 1; }
  .site-blue .menu .main-title { font-size: var(--type-lead); white-space: normal; }
  .site-blue .menu .main-title__item.is-content-heading { margin-top: var(--space-4); }
  .site-blue .menu .main-title__item { min-height: var(--space-8); }
  .site-blue .menu :is(.view-link-mobile, .text-size-small) { font-size: var(--type-body); }
  .site-blue .menu .button_arrow { gap: var(--space-1); }
  .site-blue .readme-content.max-width { margin-bottom: var(--space-4); }
  .site-blue .footer_top { padding-top: var(--space-6); }
  .site-blue .footer-header.tablet-spacer-large { padding-top: 0; font-size: 40px; }
  .site-blue .footer_item-2x { flex-direction: row; }
}
@media (max-width: 767px) {
  :root { --page-gutter: var(--space-3); --section-space: var(--space-6); --page-top: var(--space-16); --type-heading: 40px; --type-hero: 56px; --type-service: 40px; --type-projects: 64px; --type-platform-intro: 32px; --type-panel: 32px; --type-personal: 32px; --type-project-cta: 48px; --type-wordmark: 88px; --type-marquee: 112px; }
  .site-blue .nav__row { padding-inline: var(--page-gutter); }
  .site-blue .about-hero__grid, .site-blue .about-hero__body { row-gap: var(--space-6); }
  .site-blue .about-overview { gap: var(--space-3); padding-block: var(--space-3); }
  .site-blue .footer_top { gap: var(--space-4); padding-bottom: var(--space-6); }
  .site-blue .footer-header { font-size: 32px; }
  .site-blue .footer_item-2x { flex-direction: column; }
  .site-blue .footer-image { width: 200px; }
  .site-blue .cs-grid, .site-blue .c-col-2 { gap: var(--space-2); }
}
@media (max-width: 479px) { :root { --type-hero: 40px; --type-service: 24px; --type-projects: 48px; --type-project-cta: 40px; --type-wordmark: 64px; --type-marquee: 64px; } }
@media (max-width: 359px) { :root { --type-wordmark: 56px; } .site-blue .nav-logo_link { font-size: 16px; } }