/* Typography and motion refinement. The selected layout and product assets stay intact. */
@font-face {
  font-family: Manrope;
  src: url("./assets/fonts/manrope-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: "DM Serif Display";
  src: url("./assets/fonts/dm-serif-display-latin-400-normal.woff2")
    format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Serif Display";
  src: url("./assets/fonts/dm-serif-display-latin-400-italic.woff2")
    format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
:root {
  --sans: Manrope, Arial, sans-serif;
  /* Legacy editorial selectors now share the sans-serif system. */
  --serif: var(--sans);
}
body {
  font-family: var(--sans);
  font-weight: 450;
}
.hero-kicker {
  font: 650 12px/1.5 var(--sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 22px;
}
.hero h1 {
  font-family: var(--sans);
  font-size: clamp(66px, 7.2vw, 115px);
  font-weight: 750;
  line-height: 1;
  letter-spacing: -0.065em;
}
.hero-line {
  display: block;
}
.hero-line > span {
  display: inline-block;
}
.hero-line-editorial {
  font: inherit;
  letter-spacing: inherit;
  line-height: 1;
}
.serif-accent {
  font-family: "DM Serif Display", Georgia, serif;
  font-weight: 400;
  font-style: italic;
  font-size: 1.05em;
  letter-spacing: -0.047em;
  margin-left: 0.08em;
}
.hero-description {
  font: 450 clamp(21px, 1.7vw, 27px) / 1.35 var(--sans);
  letter-spacing: -0.035em;
  margin: 24px 0 28px;
}
.eyebrow {
  font-weight: 700;
}
.project h3 {
  font-family: var(--sans);
  font-weight: 750;
  letter-spacing: -0.055em;
}
.project .editorial-title {
  font-family: var(--sans);
  font-weight: 650;
  letter-spacing: -0.045em;
}
.project .project-copy > p.serif-copy,
.studio p:not(.eyebrow) {
  font: 450 20px/1.45 var(--sans);
  letter-spacing: -0.025em;
}
.project-name {
  font-family: var(--sans);
  font-size: 24px;
  font-weight: 650;
  letter-spacing: -0.04em;
}
.project-link {
  font-weight: 650;
}
.work-heading h2,
.studio h2,
.contact h2,
.dialog-content h2 {
  font-family: var(--sans);
  font-weight: 650;
  letter-spacing: -0.045em;
  line-height: 1.08;
}
.copyright {
  font-family: var(--sans);
}
.reading-progress {
  position: fixed;
  inset: 0 0 auto;
  height: 3px;
  z-index: 50;
  background: var(--accent);
  transform: scaleX(var(--read-progress, 0));
  transform-origin: left;
  pointer-events: none;
}

/* Motion has separate layers: layout/parallax on the frame, drift on its image. */
.motion-ready .hero-copy {
  animation: none;
}
.motion-ready .hero-line {
  overflow: clip;
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}
.motion-ready .hero-line > span {
  animation: headline-enter 1.15s 0.08s var(--ease) both;
}
.motion-ready .hero-line-editorial > span {
  animation-delay: 0.23s;
}
.motion-ready .hero-kicker {
  animation: copy-enter 0.85s var(--ease) both;
}
.motion-ready .hero-description {
  animation: copy-enter 1s 0.4s var(--ease) both;
}
.motion-ready .hero-copy > .button {
  animation: copy-enter 1s 0.52s var(--ease) both;
}
.motion-ready .hero-copy > .location {
  animation: copy-enter 1s 0.65s var(--ease) both;
}
.motion-ready .hero-tablet img {
  animation:
    device-enter 1.3s 0.15s var(--ease) both,
    tablet-drift 7.5s 1.45s ease-in-out infinite;
}
.motion-ready .hero-phone img {
  animation:
    device-enter 1.4s 0.35s var(--ease) both,
    phone-drift 6.3s 1.75s ease-in-out infinite;
}
.motion-ready:not(.hero-in-view) .hero-products img,
.page-hidden .hero-products img,
.dialog-open .hero-products img {
  animation-play-state: paused;
}
.motion-ready .project-copy[data-reveal] {
  translate: none;
}
.motion-ready .project-copy.is-visible > * {
  animation: project-copy-enter 0.85s var(--ease) both;
}
.motion-ready .project-copy.is-visible > :nth-child(2) {
  animation-delay: 0.08s;
}
.motion-ready .project-copy.is-visible > :nth-child(3) {
  animation-delay: 0.17s;
}
.motion-ready .project-copy.is-visible > :nth-child(4) {
  animation-delay: 0.25s;
}
.motion-ready .project-copy.is-visible > :nth-child(5) {
  animation-delay: 0.33s;
}
.motion-ready .project-visual[data-reveal],
.motion-ready .bolf-visuals[data-reveal] {
  translate: 0 48px;
  scale: 0.94;
  transition:
    opacity 0.95s var(--ease),
    translate 1.2s var(--ease),
    scale 1.2s var(--ease);
  transition-delay: 0.12s;
}
.motion-ready .project-visual.is-visible,
.motion-ready .bolf-visuals.is-visible {
  translate: 0 0;
  scale: 1;
}
.button .icon {
  transition: transform 0.35s var(--ease);
}
.button:hover .icon,
.button:focus-visible .icon {
  transform: translateX(6px);
}
.project-dialog[open] {
  animation: dialog-enter 0.5s var(--ease) both;
}
.project-dialog[open]::backdrop {
  animation: backdrop-enter 0.35s ease both;
}
@media (hover: hover) and (pointer: fine) {
  .motion-ready .project:hover .project-visual.is-visible {
    translate: 0 -10px;
    scale: 1.015;
    transition-delay: 0s;
  }
}
@keyframes headline-enter {
  from {
    opacity: 0;
    transform: translateY(110%) rotate(2deg);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes tablet-drift {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-10px) rotate(-0.45deg);
  }
}
@keyframes phone-drift {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-14px) rotate(0.6deg);
  }
}
@keyframes project-copy-enter {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes dialog-enter {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.975);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes backdrop-enter {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (min-width: 1181px) {
  .bolf .editorial-title {
    font-size: clamp(40px, 3.3vw, 61px);
  }
}
@media (min-width: 641px) and (max-width: 900px) {
  .hero h1 {
    font-size: 7.15vw;
  }
  .hero-kicker {
    font-size: 10px;
    max-width: 95%;
  }
  .hero-description {
    font-size: 20px;
  }
  .project .project-copy > p.serif-copy {
    font-size: 16px;
  }
  .studio p:not(.eyebrow) {
    font-size: 18px;
  }
  .project-name {
    font-size: 19px;
  }
}
@media (max-width: 640px) {
  .hero-kicker {
    font-size: 10px;
    letter-spacing: 0.06em;
    margin-bottom: 20px;
  }
  .hero h1 {
    font-size: clamp(49px, 14.9vw, 91px);
  }
  .hero-description {
    font-size: 21px;
    line-height: 1.4;
    margin-top: 24px;
  }
  .work-heading h2 {
    font-size: 38px;
  }
  .project .project-copy > p.serif-copy {
    font-size: 19px !important;
    line-height: 1.45;
  }
  .studio p:not(.eyebrow) {
    font-size: 18px;
  }
  .bolf .editorial-title {
    font-size: 35px;
  }
  .bolf .project-name {
    font-size: 22px;
  }
  .motion-ready .project-visual[data-reveal],
  .motion-ready .bolf-visuals[data-reveal] {
    translate: 0 30px;
    scale: 0.97;
  }
  .motion-ready .project-visual.is-visible,
  .motion-ready .bolf-visuals.is-visible {
    translate: 0 0;
    scale: 1;
  }
}
.motion-off .hero-line {
  overflow: visible;
}
.motion-off .hero-line > span,
.motion-off .project-copy > *,
.motion-off .hero-products img {
  transform: none !important;
  opacity: 1 !important;
}
.motion-off .project-visual,
.motion-off .bolf-visuals {
  scale: 1 !important;
}
@media (prefers-reduced-motion: reduce) {
  .hero-line {
    overflow: visible !important;
  }
  .hero-line > span,
  .project-copy > *,
  .hero-products img {
    transform: none !important;
    opacity: 1 !important;
  }
  .project-visual,
  .bolf-visuals {
    scale: 1 !important;
  }
}

/* Real platform coverage, with one restrained serif accent in the hero. */
.work-heading h2 {
  font-size: clamp(32px, 3.7vw, 56px);
}
.studio h2 {
  font-size: clamp(32px, 3.6vw, 54px);
}
.contact h2 {
  font-size: clamp(34px, 3.6vw, 56px);
}
.dialog-content h2 {
  font-size: clamp(32px, 5vw, 60px);
}
.project-copy > .platform-list {
  font: 650 12px/1.6 var(--sans);
  letter-spacing: 0.02em;
  margin-top: 14px;
}
.project .device-pair {
  aspect-ratio: 1.6;
  transform: none;
}
.device-pair .paired-tablet {
  --device-width: 78cqw;
  position: absolute;
  width: 78%;
  left: 0;
  bottom: 0;
  transform: rotate(-3deg);
}
.device-pair .paired-phone {
  --device-width: 25cqw;
  position: absolute;
  width: 25%;
  right: 0;
  bottom: 0;
  transform: rotate(3deg);
}
.producerpad,
.coalpot {
  display: flex;
  flex-direction: column;
}
.coalpot .project-copy > p:not(.eyebrow) {
  max-width: 32ch;
}
.producerpad .producerpad-devices,
.coalpot .coalpot-devices {
  position: relative;
  inset: auto;
  width: 100%;
  max-width: 500px;
  margin: auto auto 0;
  flex-shrink: 0;
}
.producerpad .project-copy,
.coalpot .project-copy {
  margin-bottom: 24px;
}
/* ProducerPad's real captures: a small, visitor-controlled device showcase. */
.device-preview-controls[hidden],
.device-preview-caption[hidden] {
  display: none;
}
.producerpad-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 28px;
}
.producerpad-toolbar .project-link {
  margin: 0;
}
.device-preview-controls {
  display: flex;
}
.device-preview-switch {
  display: inline-flex;
  padding: 4px;
  border: 1px solid #301e1940;
  border-radius: 999px;
  background: #f7f3ea;
}
.device-preview-switch button {
  min-width: 60px;
  min-height: 44px;
  padding: 8px 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--brand);
  font: 700 13px/1.3 var(--sans);
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.device-preview-switch button:hover:not([aria-pressed="true"]) {
  background: #112b5a12;
}
.device-preview-switch button[aria-pressed="true"] {
  background: var(--brand);
  color: var(--ivory);
}
.device-preview-switch button:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 5px;
}
.producerpad[data-preview-ready="true"] .producerpad-devices {
  aspect-ratio: 1.5;
  margin-top: auto;
}
.producerpad[data-preview-ready="true"] .producerpad-devices .screen {
  transform-origin: center bottom;
  transition: transform .65s var(--ease), opacity .35s ease;
}
.producerpad[data-active-device="ipad"] .paired-tablet {
  transform: translateX(14.1%) scale(1.06);
}
.producerpad[data-active-device="ipad"] .paired-phone {
  transform: translateX(45%) rotate(9deg) scale(.9);
  opacity: 0;
  pointer-events: none;
}
.producerpad[data-active-device="iphone"] .paired-tablet {
  transform: translateX(-20%) rotate(-8deg) scale(.9);
  opacity: 0;
  pointer-events: none;
}
.producerpad[data-active-device="iphone"] .paired-phone {
  transform: translateX(-150%) scale(1.18);
}
.device-preview-caption {
  position: relative;
  z-index: 2;
  margin: 20px 0 0;
  min-height: 61px;
  text-align: center;
  color: #301e19;
  font: 650 13px/1.5 var(--sans);
}
.device-preview-caption > span {
  display: block;
}
.device-preview-note {
  margin-top: 5px;
  font: 500 11px/1.5 var(--sans);
}
.motion-off .producerpad-devices .screen,
.motion-off .device-preview-switch button {
  transition: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .producerpad-devices .screen,
  .device-preview-switch button {
    transition: none !important;
  }
}

/* Each BOLF platform has its own space; app captures never cover the website. */
.bolf {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  align-items: center;
  gap: clamp(32px, 4vw, 72px);
  height: auto;
  min-height: 0;
  padding-block: 48px;
}
.bolf .project-copy {
  width: 100%;
}
.bolf-visuals {
  position: relative;
  inset: auto;
  width: 100%;
  height: auto;
  max-width: 640px;
  justify-self: end;
}
.bolf-visuals figure {
  margin: 0;
  min-width: 0;
}
.bolf-visuals .website-capture,
.bolf-visuals .bolf-tablet,
.bolf-visuals .bolf-phone {
  position: static;
  inset: auto;
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  transform: none;
}
.bolf-visuals .website-capture {
  box-shadow: 0 12px 28px -20px #0005;
}
.bolf-visuals figcaption {
  font: 650 10px/1.5 var(--sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 10px;
  text-align: center;
}
.bolf-app-views {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.34fr);
  align-items: end;
  gap: 24px;
  width: 76%;
  max-width: 410px;
  margin: 24px auto 0;
}
.dialog-screens {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 36px 24px;
  overflow: visible;
}
.dialog-screens figure {
  width: 100%;
}
.dialog-screens figure:only-child,
.dialog-screens:has(> figure:nth-child(3):last-child) > figure:first-child {
  grid-column: 1 / -1;
}
.dialog-screens .portrait {
  max-width: 230px;
  justify-self: center;
}
.dialog-screens img {
  max-height: 500px;
  max-width: 100%;
}

/* A clearer studio introduction and an expanded, evidence-led feature. */
.hero-description { max-width: 34ch; font-size: clamp(19px, 1.8vw, 25px); line-height: 1.45; }
.hero-service-link { display: block; width: fit-content; margin-top: 16px; font-size: 14px; text-decoration: underline; text-underline-offset: 5px; }
.hero .location { margin-top: 24px; }
.site-header nav { gap: 24px; }
.site-header .header-motion { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 8px 10px; border: 1px solid #112b5a30; border-radius: 8px; color: var(--brand); background: transparent; font-size: 13px; }
.site-header .header-motion[hidden] { display: none; }
.site-header .header-motion .icon { filter: none; }
.project-index { display: flex; flex-wrap: wrap; gap: 4px 24px; margin-top: 22px; }
.project-index a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 650; text-decoration: underline; text-decoration-color: #112b5a40; text-underline-offset: 6px; }
.project-index a:hover { text-decoration-color: currentColor; }
.first-pair { grid-template-columns: minmax(0, 1fr); gap: 0; }
.first-pair .producerpad {
  display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); gap: 32px 48px;
  height: auto; min-height: 0; padding: 48px var(--page-pad) 32px;
  color: #f7f3ea; background: radial-gradient(ellipse at 80% 18%, #234b8f 0%, #112b5a 55%, #0b1d3d 100%);
  overflow: hidden;
}
.producerpad::before { display: none; }
.producerpad .project-copy { margin: 0; align-self: center; }
.producerpad .project-copy > .eyebrow { color: #bccff1; font-size: 13px; }
.producerpad h3 { color: #f7f3ea; font-size: 24px; letter-spacing: -.025em; margin-bottom: 22px; }
.project.producerpad .project-copy > p.producerpad-headline { max-width: none; margin: 0; color: #fff; font-size: clamp(34px, 4.2vw, 64px); font-weight: 750; line-height: 1.05; letter-spacing: -.05em; }
.project.producerpad .project-copy > p.producerpad-intro { max-width: 40ch; color: #dce6f8; font-size: 17px; line-height: 1.65; margin-top: 24px; }
.producerpad .project-link { color: #f7f3ea; font-size: 15px; }
.producerpad .project-link .icon { filter: invert(1); }
.producerpad-toolbar { justify-content: flex-start; gap: 12px 28px; }
.producerpad-toolbar .project-link:first-child { border-bottom: 1px solid #c9dafa; }
.producerpad-store { opacity: .85; }
.producerpad-showcase { min-width: 0; align-self: center; padding-top: 22px; }
.producerpad .producerpad-devices, .producerpad[data-preview-ready="true"] .producerpad-devices { max-width: 560px; width: 100%; margin: 0 auto; aspect-ratio: 1.5; }
.producerpad .device-preview-caption { min-height: 0; margin: 22px 0 16px; color: #e4ecfa; font-size: 14px; }
.producerpad .device-preview-note { color: #b7c8e3; font-size: 12px; }
.producerpad .device-preview-controls { justify-content: center; }
.device-preview-switch button { font-size: 14px; }
.producerpad .device-preview-switch button:focus-visible { outline: 3px solid #fff; outline-offset: 6px; box-shadow: 0 0 0 3px #112b5a; }
.producerpad-story { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; padding-top: 32px; border-top: 1px solid #d2dffc35; }
.producerpad-story p { font-size: 15px; line-height: 1.65; color: #dce6f8; }
.producerpad-story .story-label { color: #fff; font-size: 14px; font-weight: 750; margin-bottom: 9px; }
.producerpad-demo { grid-column: 1 / -1; border: 1px solid #c9dafa40; border-radius: 14px; background: #06193670; }
.producerpad-demo summary { display: flex; align-items: center; gap: 16px; padding: 20px 24px; cursor: pointer; list-style: none; font-size: 18px; font-weight: 650; }
.producerpad-demo summary::-webkit-details-marker { display: none; }
.producerpad-demo summary:focus-visible { outline: 3px solid #fff; outline-offset: 4px; border-radius: 14px; }
.demo-play-icon { display: grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 50%; background: #f7f3ea; }
.demo-summary-note { display: block; font-size: 13px; color: #b7c8e3; font-weight: 450; margin-top: 4px; }
.demo-open-label { font-size: 14px; margin-left: auto; color: #dce6f8; }
.producerpad-demo[open] .demo-open-label { visibility: hidden; }
.demo-content { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, .8fr); gap: 28px; padding: 8px 24px 24px; }
.demo-content video { display: block; width: 100%; height: auto; max-height: 560px; background: #050710; border-radius: 8px; }
.tour-screen { min-width: 0; align-self: start; aspect-ratio: 4 / 3; background: #050710; border-radius: 8px; overflow: hidden; }
.tour-screen img { width: 100%; height: 100%; object-fit: contain; }
.tour-screen img.tour-enter { animation: tour-enter .45s var(--ease); }
@keyframes tour-enter { from { opacity: .2; transform: scale(.985); } to { opacity: 1; transform: none; } }
.tour-count { font-size: 13px; letter-spacing: .12em; }
.tour-controls[hidden] { display: none; }
.tour-steps { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.tour-steps button, .tour-play { min-height: 44px; padding: 10px 14px; border: 1px solid #c9dafa60; border-radius: 8px; background: transparent; color: #f7f3ea; font: 650 13px/1.4 var(--sans); cursor: pointer; }
.tour-steps button[aria-pressed="true"] { background: #f7f3ea; color: #112b5a; }
.tour-play { margin-top: 16px; background: #f7f3ea; color: #112b5a; }
.tour-play:disabled { opacity: .7; cursor: default; }
.demo-download { display: inline-block; margin-top: 16px; font-size: 13px; line-height: 1.5; text-decoration: underline; text-underline-offset: 4px; }
.motion-off .tour-screen img { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .tour-screen img { animation: none !important; } }
.demo-content h4 { font-size: 22px; line-height: 1.2; margin: 8px 0 16px; }
.demo-content p { color: #dce6f8; font-size: 15px; line-height: 1.65; }
.demo-content .demo-transcript { margin-top: 20px; font-size: 14px; color: #b7c8e3; }
.first-pair .coalpot { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 40px; align-items: center; min-height: 0; padding: 48px var(--page-pad); }
.coalpot .project-copy { margin: 0; }
.coalpot .coalpot-devices { width: 100%; max-width: 480px; margin: 0 auto; }
.studio-services { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; margin-top: 36px; padding-top: 30px; border-top: 1px solid #112b5a30; text-align: left; }
.studio-services h3 { font-size: 23px; letter-spacing: -.035em; }
.studio .studio-services p { max-width: 38ch; font-size: 16px; line-height: 1.65; margin-top: 12px; }
.contact .contact-intro { max-width: 62ch; font-size: 18px; line-height: 1.65; margin-top: 22px; color: #d7e2f6; }
.footer-motion-link { font-size: 13px; text-decoration: underline; text-underline-offset: 4px; }
.dialog-story { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 28px 0; }
.dialog-story:empty { display: none; }
.dialog-story h3 { font-size: 16px; margin-bottom: 10px; }
.dialog-story p { font-size: 15px; line-height: 1.65; }
.bolf-visuals figcaption, .project .eyebrow { font-size: 12px; }
@media (max-width: 900px) {
  .first-pair .producerpad { gap: 32px; }
  .project.producerpad .project-copy > p.producerpad-headline { font-size: 38px; }
  .site-header nav { gap: 14px; }
  .site-header nav > .button { padding-inline: 14px; }
  .studio-services { gap: 24px; }
  .demo-content { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .site-header .header-motion { width: 44px; padding: 10px; justify-content: center; }
  .site-header .header-motion span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .hero-description { font-size: 19px; max-width: 31ch; }
  .hero-service-link { font-size: 14px; }
  .hero .location { margin-top: 20px; }
  .project-index { gap: 0 20px; margin-top: 16px; }
  .project-index a { font-size: 13px; }
  .first-pair .producerpad { grid-template-columns: minmax(0, 1fr); padding: 38px 24px 28px; gap: 28px; }
  .producerpad h3 { font-size: 23px; margin-bottom: 20px; }
  .project.producerpad .project-copy > p.producerpad-headline { font-size: clamp(34px, 10vw, 48px); }
  .project.producerpad .project-copy > p.producerpad-intro { font-size: 16px; margin-top: 20px; }
  .producerpad-showcase { padding-top: 12px; }
  .producerpad-story { grid-template-columns: minmax(0, 1fr); gap: 22px; padding-top: 24px; }
  .producerpad-story p { font-size: 15px; }
  .producerpad-demo summary { padding: 16px; gap: 12px; font-size: 16px; }
  .demo-summary-note { font-size: 12px; }
  .demo-open-label { display: none; }
  .demo-content { padding: 0 16px 20px; gap: 16px; }
  .first-pair .coalpot { grid-template-columns: minmax(0, 1fr); padding: 36px 24px; gap: 24px; }
  .studio-services, .dialog-story { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .studio .studio-services p { font-size: 16px; }
  .contact .contact-intro { font-size: 16px; }
}
@media (min-width: 641px) {
  .first-pair .project {
    height: auto;
    min-height: clamp(470px, 42vw, 620px);
  }
}
@media (max-width: 640px) {
  .producerpad,
  .coalpot {
    height: auto;
    min-height: 0;
    padding-bottom: 36px;
  }
  .producerpad .producerpad-devices,
  .coalpot .coalpot-devices {
    max-width: 440px;
    margin-top: 12px;
  }
  .adventv .adventv-devices {
    width: 95%;
    max-width: 450px;
    margin: 32px auto 0;
  }
  .bolf {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
    padding-block: 36px;
  }
  .bolf-visuals {
    max-width: 520px;
    justify-self: center;
  }
  .bolf-app-views {
    width: 90%;
    gap: 18px;
  }
  .dialog-screens {
    grid-template-columns: minmax(0, 1fr);
    padding: 20px;
  }
}