@layer blueprint-theme {
  :root {
    --wa-font-family-body: "Archivo", Arial, sans-serif;
    --wa-font-family-heading: "Archivo Black", "Archivo", Arial, sans-serif;
    --wa-font-family-code: "Archivo Narrow", "Arial Narrow", monospace;
    --wa-border-radius-scale: 0.22;
    --wa-space-scale: 1;
    --wa-color-brand-fill-loud: #252a84;
    --wa-color-brand-fill-normal: #3a6bb3;
    --wa-color-brand-fill-quiet: color-mix(in oklab, #3a6bb3 10%, #ffffff);
    --wa-color-brand-border-loud: #151a59;
    --wa-color-brand-border-normal: #3a6bb3;
    --wa-color-brand-border-quiet: color-mix(in oklab, #3a6bb3 24%, #ffffff);
    --wa-color-brand-on-loud: #ffffff;
    --wa-color-brand-on-normal: #ffffff;
    --wa-color-brand-on-quiet: #252a84;
    --wa-color-text-normal: #27272a;
    --wa-color-text-quiet: color-mix(in oklab, #27272a 68%, #ffffff);
    --wa-color-text-link: #252a84;
    --wa-color-surface-default: #ffffff;
    --wa-color-surface-raised: #ffffff;
    --wa-color-surface-lowered: color-mix(in oklab, #252a84 5%, #ffffff);
    --wa-color-surface-border: color-mix(in oklab, #252a84 20%, #ffffff);
  }
}

/* Bespoke CSS is confined to Blueprint's drafting visuals and content dimensions.
   Layout and interaction remain Web Awesome utilities and components. */

.wa-invert {
  --wa-color-text-normal: var(--wa-color-brand-on-loud);
  --wa-color-text-quiet: color-mix(
    in oklab,
    var(--wa-color-brand-on-loud) 72%,
    transparent
  );
  --wa-color-text-link: var(--wa-color-brand-on-loud);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  padding: 0;
  margin: 0;
}

html {
  background: color-mix(
    in oklab,
    var(--wa-color-brand-fill-loud) 56%,
    var(--wa-color-brand-border-loud)
  );
}

html:focus-within {
  scroll-behavior: auto;
}

body {
  min-width: 0;
  overflow-x: clip;
  background: var(--wa-color-surface-default);
  color: var(--wa-color-text-normal);
  font-family: var(--wa-font-family-body);
}

img,
svg {
  display: block;
  max-width: 100%;
}

h1,
h2,
h3,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

h1,
h2,
h3 {
  font-family: var(--wa-font-family-heading);
  font-weight: var(--wa-font-weight-bold);
  letter-spacing: -0.04em;
  line-height: 1;
  text-wrap: balance;
}

p,
li {
  line-height: 1.62;
}

a {
  color: var(--wa-color-text-link);
  text-underline-offset: var(--wa-space-2xs);
}

main {
  padding: 0;
}

section[id] {
  scroll-margin-block-start: calc(var(--wa-space-5xl) * 1.35);
}

wa-page::part(header),
wa-page::part(main-content),
wa-page::part(footer) {
  padding: 0;
}

wa-page::part(header) {
  z-index: 20;
  border-block-end: var(--wa-border-width-s) solid
    color-mix(in oklab, var(--wa-color-brand-on-loud) 22%, transparent);
  background-color: var(--wa-color-brand-fill-loud);
  background-image:
    linear-gradient(
      to right,
      color-mix(in oklab, var(--wa-color-brand-on-loud) 7%, transparent)
        var(--wa-border-width-s),
      transparent var(--wa-border-width-s)
    ),
    linear-gradient(
      to bottom,
      color-mix(in oklab, var(--wa-color-brand-on-loud) 7%, transparent)
        var(--wa-border-width-s),
      transparent var(--wa-border-width-s)
    );
  background-size: var(--wa-space-4xl) var(--wa-space-4xl);
  box-shadow: none;
}

wa-page::part(footer) {
  background: color-mix(
    in oklab,
    var(--wa-color-brand-fill-loud) 58%,
    var(--wa-color-brand-border-loud)
  );
}

wa-page[view='desktop']::part(navigation),
wa-page[view='desktop']::part(navigation-header),
wa-page[view='desktop']::part(navigation-footer) {
  display: none;
}

wa-page[view='mobile'] .header-nav {
  display: none;
}

.shell {
  width: 100%;
  max-width: calc(var(--wa-space-5xl) * 16);
  margin-inline: auto;
}

.section {
  padding: clamp(var(--wa-space-4xl), 7vw, calc(var(--wa-space-5xl) * 1.65))
    clamp(var(--wa-space-l), 4vw, var(--wa-space-3xl));
}

.site-header {
  min-height: calc(var(--wa-space-5xl) + var(--wa-space-s));
  padding: var(--wa-space-s) clamp(var(--wa-space-l), 4vw, var(--wa-space-3xl));
  background: transparent;
}

.brand {
  color: inherit;
  text-decoration: none;
}

.brand--header,
.brand--footer {
  width: calc(var(--wa-space-5xl) * 3.1);
  max-width: 46%;
}

.brand--header img,
.brand--footer img {
  width: 100%;
  height: auto;
}

.header-nav {
  font-family: var(--wa-font-family-code);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.header-nav a {
  color: var(--wa-color-brand-on-loud);
  text-decoration: none;
}

.header-nav a:hover {
  color: color-mix(in oklab, var(--wa-color-brand-on-loud) 68%, transparent);
}

.header-cta::part(base) {
  border-color: var(--wa-color-brand-on-loud);
}

.nav-toggle::part(base) {
  color: var(--wa-color-brand-on-loud);
}

.drawer-brand,
.drawer-footer,
.drawer-nav {
  padding: var(--wa-space-m);
}

.brand--drawer img {
  inline-size: var(--wa-space-2xl);
  block-size: var(--wa-space-2xl);
}

.drawer-nav a {
  padding: var(--wa-space-s) var(--wa-space-m);
  border-inline-start: var(--wa-border-width-l) solid transparent;
  color: var(--wa-color-text-normal);
  text-decoration: none;
}

.drawer-nav a:hover {
  border-inline-start-color: var(--wa-color-brand-fill-loud);
  background: var(--wa-color-brand-fill-quiet);
  color: var(--wa-color-brand-on-quiet);
}

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--wa-color-brand-fill-loud);
}

.hero::before,
.capabilities::before,
.contact-section::before,
.project-visual::before,
.not-found::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image:
    linear-gradient(
      to right,
      color-mix(in oklab, var(--wa-color-brand-on-loud) 12%, transparent)
        var(--wa-border-width-s),
      transparent var(--wa-border-width-s)
    ),
    linear-gradient(
      to bottom,
      color-mix(in oklab, var(--wa-color-brand-on-loud) 12%, transparent)
        var(--wa-border-width-s),
      transparent var(--wa-border-width-s)
    );
  background-size: var(--wa-space-4xl) var(--wa-space-4xl);
  content: '';
}

.hero::before {
  mask-image: linear-gradient(
    to bottom,
    var(--wa-color-neutral-fill-loud) 8%,
    transparent 96%
  );
  opacity: 0.55;
}

.hero-frame {
  position: relative;
  z-index: 1;
  min-height: calc(var(--wa-space-5xl) * 7.1);
  padding: clamp(var(--wa-space-4xl), 7vw, calc(var(--wa-space-5xl) * 1.65))
    clamp(var(--wa-space-l), 4vw, var(--wa-space-3xl))
    calc(var(--wa-space-5xl) * 2);
}

.hero-flow-art {
  position: absolute;
  z-index: 0;
  inset-block: 0;
  inset-inline-end: 0;
  width: min(56%, calc(var(--wa-space-5xl) * 10));
  height: 100%;
  opacity: 0.24;
  pointer-events: none;
}

.project-code,
.capability-number,
.micro-label,
.form-head,
.fact dt,
.partner-years {
  font-family: var(--wa-font-family-code);
  font-weight: var(--wa-font-weight-semibold);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.hero h1 {
  max-width: 13.5ch;
  font-size: clamp(var(--wa-font-size-4xl), 5.4vw, calc(var(--wa-font-size-5xl) * 1.05));
  line-height: 0.96;
}

.accent-word {
  color: color-mix(in oklab, var(--wa-color-brand-on-loud) 68%, var(--wa-color-brand-fill-normal));
}

.hero-lead {
  max-width: 56ch;
  font-size: clamp(var(--wa-font-size-l), 2vw, var(--wa-font-size-xl));
}

.hero-secondary::part(base) {
  border-color: color-mix(in oklab, var(--wa-color-brand-on-loud) 50%, transparent);
  color: var(--wa-color-brand-on-loud);
}

.hero-computer-line {
  fill: none;
  stroke: color-mix(in oklab, var(--wa-color-brand-on-loud) 80%, transparent);
  stroke-dasharray: 2 13;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}

.hero-computer-line--screen {
  opacity: 0.62;
}

.hero-computer-line--prompt {
  stroke-dasharray: 2 11;
  stroke-width: 4;
}

.fact-strip {
  position: relative;
  z-index: 3;
  margin-block-start: calc(var(--wa-space-5xl) * -1);
  padding-inline: clamp(var(--wa-space-l), 4vw, var(--wa-space-3xl));
}

.fact-grid {
  --min-column-size: calc(var(--wa-space-5xl) * 2.7);
  border: var(--wa-border-width-s) solid var(--wa-color-surface-border);
  background: var(--wa-color-surface-raised);
  box-shadow: var(--wa-shadow-l);
}

.fact {
  position: relative;
  min-height: calc(var(--wa-space-5xl) * 1.8);
  padding: var(--wa-space-xl);
  border-inline-end: var(--wa-border-width-s) solid var(--wa-color-surface-border);
}

.fact:last-child {
  border-inline-end: 0;
}

.fact::after {
  position: absolute;
  inset-block-start: var(--wa-space-s);
  inset-inline-end: var(--wa-space-s);
  color: var(--wa-color-text-quiet);
  content: attr(data-code);
  font-family: var(--wa-font-family-code);
  font-size: var(--wa-font-size-2xs);
  letter-spacing: 0.08em;
}

.fact dt {
  margin-block-end: var(--wa-space-s);
  color: var(--wa-color-text-quiet);
  font-size: var(--wa-font-size-2xs);
}

.fact dd {
  margin-block-end: var(--wa-space-xs);
  font-family: var(--wa-font-family-heading);
  font-size: var(--wa-font-size-xl);
  letter-spacing: -0.04em;
  line-height: 1;
}

.fact-detail {
  color: var(--wa-color-text-quiet);
  font-size: var(--wa-font-size-s);
  line-height: 1.62;
}

.studio-head {
  --min-column-size: min(100%, calc(var(--wa-space-5xl) * 4.4));
}

.section h2 {
  max-width: 15ch;
  font-size: clamp(var(--wa-font-size-3xl), 5vw, var(--wa-font-size-5xl));
}

.studio-intro {
  max-width: 54ch;
}

.work-section,
.quote-band,
.studio-section {
  background: var(--wa-color-surface-lowered);
}

.work-section {
  padding-block-start: calc(var(--wa-space-5xl) * 1.9);
}

.work-grid {
  --min-column-size: min(100%, calc(var(--wa-space-5xl) * 5.35));
}

.work-card {
  --spacing: 0;
  min-width: 0;
  height: 100%;
}

.work-card::part(base) {
  height: 100%;
  overflow: hidden;
  border-color: var(--wa-color-surface-border);
  border-radius: 0;
  box-shadow: var(--wa-shadow-s);
}

.project-visual {
  position: relative;
  isolation: isolate;
  min-height: calc(var(--wa-space-5xl) * 3.65);
  overflow: hidden;
  padding: calc(var(--wa-space-5xl) * 0.85) var(--wa-space-xl);
  background: var(--wa-color-brand-fill-loud);
}

.project-visual::before {
  z-index: -1;
  opacity: 0.75;
}

.project-visual::after {
  position: absolute;
  inset: var(--wa-space-m);
  border: var(--wa-border-width-s) solid
    color-mix(in oklab, var(--wa-color-brand-on-loud) 18%, transparent);
  content: '';
  pointer-events: none;
}

.project-code {
  position: absolute;
  z-index: 2;
  inset-block-start: var(--wa-space-l);
  inset-inline-start: var(--wa-space-l);
  color: color-mix(in oklab, var(--wa-color-brand-on-loud) 70%, transparent);
  font-size: var(--wa-font-size-2xs);
}

.logo-plate {
  position: relative;
  z-index: 1;
  width: min(76%, calc(var(--wa-space-5xl) * 4));
  min-height: calc(var(--wa-space-5xl) * 1.7);
  padding: var(--wa-space-xl);
  border: var(--wa-border-width-s) solid var(--wa-color-surface-border);
  background: var(--wa-color-surface-raised);
  box-shadow:
    var(--wa-space-s) var(--wa-space-s) 0
      color-mix(in oklab, var(--wa-color-brand-on-loud) 16%, transparent),
    var(--wa-shadow-m);
  transform: rotate(-1deg);
}

.logo-plate::before,
.logo-plate::after {
  position: absolute;
  inline-size: var(--wa-space-m);
  block-size: var(--wa-space-m);
  border-color: var(--wa-color-brand-fill-normal);
  content: '';
}

.logo-plate::before {
  inset-block-start: var(--wa-space-xs);
  inset-inline-start: var(--wa-space-xs);
  border-block-start: var(--wa-border-width-l) solid;
  border-inline-start: var(--wa-border-width-l) solid;
}

.logo-plate::after {
  inset-block-end: var(--wa-space-xs);
  inset-inline-end: var(--wa-space-xs);
  border-block-end: var(--wa-border-width-l) solid;
  border-inline-end: var(--wa-border-width-l) solid;
}

.logo-plate--dark {
  background: color-mix(
    in oklab,
    var(--wa-color-brand-fill-loud) 42%,
    var(--wa-color-brand-border-loud)
  );
}

.logo-plate--wide {
  width: min(84%, calc(var(--wa-space-5xl) * 6));
}

.logo-plate img {
  max-width: 100%;
  max-height: calc(var(--wa-space-5xl) * 1.15);
  object-fit: contain;
}

.work-card--featured .project-visual {
  min-height: calc(var(--wa-space-5xl) * 4.15);
}

.project-copy {
  padding: clamp(var(--wa-space-l), 4vw, var(--wa-space-2xl));
}

.project-copy h3 {
  font-size: clamp(var(--wa-font-size-2xl), 3vw, var(--wa-font-size-3xl));
}

.project-copy p {
  max-width: 60ch;
}

.project-copy wa-button {
  width: fit-content;
}

.capabilities {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--wa-color-brand-fill-loud);
}

.capabilities::before,
.contact-section::before {
  opacity: 0.65;
}

.capability-matrix {
  --min-column-size: calc(var(--wa-space-5xl) * 3.4);
  border-block-start: var(--wa-border-width-s) solid
    color-mix(in oklab, var(--wa-color-brand-on-loud) 34%, transparent);
  border-inline-start: var(--wa-border-width-s) solid
    color-mix(in oklab, var(--wa-color-brand-on-loud) 34%, transparent);
}

.capability {
  position: relative;
  min-height: calc(var(--wa-space-5xl) * 3.5);
  padding: clamp(var(--wa-space-l), 4vw, var(--wa-space-2xl));
  border-inline-end: var(--wa-border-width-s) solid
    color-mix(in oklab, var(--wa-color-brand-on-loud) 34%, transparent);
  border-block-end: var(--wa-border-width-s) solid
    color-mix(in oklab, var(--wa-color-brand-on-loud) 34%, transparent);
}

.capability-number {
  color: var(--wa-color-text-quiet);
  font-size: var(--wa-font-size-2xs);
}

.capability-icon {
  color: color-mix(in oklab, var(--wa-color-brand-on-loud) 65%, var(--wa-color-brand-fill-normal));
  font-size: var(--wa-font-size-4xl);
}

.capability h3 {
  font-family: var(--wa-font-family-body);
  font-size: var(--wa-font-size-xl);
  font-weight: var(--wa-font-weight-bold);
  letter-spacing: -0.025em;
}

.quote-shell {
  --flank-size: calc(var(--wa-space-5xl) * 4);
  --content-percentage: 64%;
}

.quote-meta {
  min-height: calc(var(--wa-space-5xl) * 3.6);
  padding: clamp(var(--wa-space-xl), 5vw, var(--wa-space-4xl));
  border-inline: var(--wa-border-width-s) solid var(--wa-color-surface-border);
}

.quote-meta strong {
  font-family: var(--wa-font-family-heading);
  font-size: var(--wa-font-size-xl);
  letter-spacing: -0.04em;
}

.quote-meta span {
  color: var(--wa-color-text-quiet);
  font-family: var(--wa-font-family-code);
  font-size: var(--wa-font-size-xs);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.quote-band blockquote {
  min-height: calc(var(--wa-space-5xl) * 3.6);
  padding: clamp(var(--wa-space-xl), 5vw, var(--wa-space-4xl));
  border-inline-end: var(--wa-border-width-s) solid var(--wa-color-surface-border);
}

.quote-band blockquote p {
  max-width: 34ch;
  font-family: var(--wa-font-family-heading);
  font-size: clamp(var(--wa-font-size-xl), 3vw, var(--wa-font-size-3xl));
  letter-spacing: -0.04em;
  line-height: 1.12;
}

.quote-icon {
  color: var(--wa-color-brand-fill-normal);
  font-size: var(--wa-font-size-3xl);
}

.studio-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.studio-section::before {
  position: absolute;
  z-index: -1;
  inset-block-start: calc(var(--wa-space-5xl) * 0.35);
  inset-inline-end: calc(var(--wa-space-5xl) * -0.3);
  color: transparent;
  content: 'STUDIO';
  font-family: var(--wa-font-family-heading);
  font-size: calc(var(--wa-font-size-5xl) * 2.1);
  letter-spacing: -0.08em;
  line-height: 1;
  opacity: 0.55;
  -webkit-text-stroke: var(--wa-border-width-s) var(--wa-color-surface-border);
  white-space: nowrap;
}

.studio-intro strong {
  color: var(--wa-color-text-normal);
}

.partner-grid {
  --min-column-size: min(100%, calc(var(--wa-space-5xl) * 6.1));
}

.partner-card {
  --spacing: 0;
  height: 100%;
}

.partner-card::part(base) {
  height: 100%;
  overflow: hidden;
  border-radius: 0;
}

.partner-layout {
  --min-column-size: calc(var(--wa-space-5xl) * 2.65);
  height: 100%;
}

.partner-photo {
  min-height: calc(var(--wa-space-5xl) * 4.8);
  background: var(--wa-color-brand-fill-quiet);
}

.partner-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.partner-info {
  min-height: calc(var(--wa-space-5xl) * 4.8);
  padding: clamp(var(--wa-space-l), 4vw, var(--wa-space-2xl));
  background: var(--wa-color-surface-raised);
}

.partner-info h3 {
  font-size: var(--wa-font-size-2xl);
}

.micro-label,
.partner-years {
  color: var(--wa-color-brand-fill-normal);
  font-size: var(--wa-font-size-2xs);
}

.partner-years {
  margin-block-start: auto;
  padding-block-start: var(--wa-space-m);
  border-block-start: var(--wa-border-width-s) solid var(--wa-color-surface-border);
}

.contact-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--wa-color-brand-fill-loud);
}

.contact-grid {
  --min-column-size: min(100%, calc(var(--wa-space-5xl) * 5.15));
}

.contact-copy {
  min-width: 0;
}

.contact-copy h2 {
  max-width: 12ch;
}

.contact-lines {
  border-block-start: var(--wa-border-width-s) solid
    color-mix(in oklab, var(--wa-color-brand-on-loud) 28%, transparent);
}

.contact-lines > * {
  padding-block: var(--wa-space-m);
  border-block-end: var(--wa-border-width-s) solid
    color-mix(in oklab, var(--wa-color-brand-on-loud) 28%, transparent);
  text-decoration: none;
}

.contact-icon {
  color: color-mix(in oklab, var(--wa-color-brand-on-loud) 54%, transparent);
  font-size: var(--wa-font-size-l);
}

.form-panel {
  --spacing: clamp(var(--wa-space-l), 4vw, var(--wa-space-2xl));
  min-width: 0;
}

.form-panel::part(base) {
  border: 0;
  border-block-start: var(--wa-space-xs) solid var(--wa-color-brand-fill-normal);
  border-radius: 0;
  box-shadow:
    calc(var(--wa-space-s) * -1) var(--wa-space-s) 0
      color-mix(in oklab, var(--wa-color-brand-on-loud) 12%, transparent),
    var(--wa-shadow-l);
}

.form-head {
  padding-block-end: var(--wa-space-m);
  border-block-end: var(--wa-border-width-s) solid var(--wa-color-surface-border);
  font-size: var(--wa-font-size-2xs);
}

.form-head span {
  color: var(--wa-color-text-quiet);
  font-weight: var(--wa-font-weight-normal);
}

.field-grid {
  --min-column-size: min(100%, calc(var(--wa-space-5xl) * 2.7));
}

.site-footer {
  padding: var(--wa-space-3xl) clamp(var(--wa-space-l), 4vw, var(--wa-space-3xl));
  background: transparent;
}

.footer-meta {
  padding-block-start: var(--wa-space-l);
  border-block-start: var(--wa-border-width-s) solid
    color-mix(in oklab, var(--wa-color-brand-on-loud) 18%, transparent);
}

.not-found {
  position: relative;
  isolation: isolate;
  min-height: calc(100vh - calc(var(--wa-space-5xl) * 2.5));
  overflow: hidden;
  background: var(--wa-color-brand-fill-loud);
}

.not-found-panel {
  --spacing: clamp(var(--wa-space-xl), 6vw, var(--wa-space-4xl));
  width: min(100%, calc(var(--wa-space-5xl) * 8));
}

.not-found-panel::part(base) {
  border: var(--wa-border-width-s) solid
    color-mix(in oklab, var(--wa-color-brand-on-loud) 36%, transparent);
  border-radius: 0;
  background: color-mix(
    in oklab,
    var(--wa-color-brand-fill-loud) 78%,
    var(--wa-color-brand-border-loud)
  );
  box-shadow: var(--wa-shadow-l);
}

.error-code {
  font-family: var(--wa-font-family-heading);
  letter-spacing: -0.07em;
  line-height: 0.8;
}

.not-found-copy {
  max-width: 54ch;
}

wa-page[view='mobile'] .site-header {
  min-height: calc(var(--wa-space-5xl) * 0.85);
  padding-inline: var(--wa-space-m);
}

wa-page[view='mobile'] .brand--header {
  width: calc(var(--wa-space-5xl) * 2.5);
  max-width: 68%;
}

wa-page[view='mobile'] .hero-frame {
  min-height: auto;
  padding-block-start: var(--wa-space-3xl);
  padding-block-end: calc(var(--wa-space-5xl) * 1.45);
}

wa-page[view='mobile'] .hero-flow-art {
  display: none;
}

wa-page[view='mobile'] .hero h1 {
  max-width: 100%;
  font-size: clamp(var(--wa-font-size-3xl), 12vw, var(--wa-font-size-4xl));
  line-height: 0.98;
  overflow-wrap: anywhere;
}

wa-page[view='mobile'] .hero-actions,
wa-page[view='mobile'] .hero-actions wa-button {
  width: 100%;
}

wa-page[view='mobile'] .fact-strip {
  margin-block-start: calc(var(--wa-space-4xl) * -1);
  padding-inline: var(--wa-space-m);
}

wa-page[view='mobile'] .fact {
  border-inline-end: 0;
  border-block-end: var(--wa-border-width-s) solid var(--wa-color-surface-border);
}

wa-page[view='mobile'] .fact:last-child {
  border-block-end: 0;
}

wa-page[view='mobile'] .work-section {
  padding-block-start: calc(var(--wa-space-5xl) * 1.35);
}

wa-page[view='mobile'] .section {
  padding-inline: var(--wa-space-m);
}

wa-page[view='mobile'] .section h2 {
  max-width: 100%;
  font-size: var(--wa-font-size-3xl);
}

wa-page[view='mobile'] .project-visual,
wa-page[view='mobile'] .work-card--featured .project-visual {
  min-height: calc(var(--wa-space-5xl) * 3.2);
}

wa-page[view='mobile'] .logo-plate,
wa-page[view='mobile'] .logo-plate--wide {
  width: 88%;
  padding: var(--wa-space-l);
}

wa-page[view='mobile'] .project-copy wa-button {
  width: 100%;
}

wa-page[view='mobile'] .capability {
  min-height: auto;
}

wa-page[view='mobile'] .quote-shell {
  --flank-size: 100%;
  --content-percentage: 100%;
}

wa-page[view='mobile'] .quote-meta,
wa-page[view='mobile'] .quote-band blockquote {
  min-height: auto;
  border-inline: var(--wa-border-width-s) solid var(--wa-color-surface-border);
}

wa-page[view='mobile'] .partner-photo,
wa-page[view='mobile'] .partner-info {
  min-height: auto;
}

wa-page[view='mobile'] .partner-photo {
  width: 100%;
  aspect-ratio: 4 / 3;
}

wa-page[view='mobile'] .contact-copy h2 {
  max-width: 100%;
}

wa-page[view='mobile'] .site-footer {
  padding-inline: var(--wa-space-m);
}

@media (prefers-reduced-motion: no-preference) {
  html:focus-within {
    scroll-behavior: smooth;
  }

  .hero-computer-line--animated {
    animation: hero-computer-dash calc(var(--wa-transition-slow) * 10) linear infinite;
  }

  .logo-plate {
    transition:
      transform var(--wa-transition-slow),
      box-shadow var(--wa-transition-slow);
  }

  .work-card:hover .logo-plate {
    box-shadow:
      var(--wa-space-m) var(--wa-space-m) 0
        color-mix(in oklab, var(--wa-color-brand-on-loud) 22%, transparent),
      var(--wa-shadow-l);
    transform: rotate(0deg) translateY(calc(var(--wa-space-xs) * -1));
  }
}

@keyframes hero-computer-dash {
  to {
    stroke-dashoffset: -30;
  }
}