/* Shared mobile reading hierarchy. Embedded interface artwork keeps its scale. */
@media (max-width: 850px) {
  body
    .page
    :is(
      .hero-description,
      .offering-copy > p,
      .audience-challenge,
      .audience-help > p,
      .closing-lead,
      .stage-copy > p,
      .fold-copy > p,
      .fold-fit > p,
      .faq-answer,
      .journal-article-deck,
      .journal-article-intro,
      .journal-reading p,
      .journal-reading li,
      .business-context p,
      .studio-page-intro > p,
      .studio-mission > p,
      .studio-audiences > header > p,
      .studio-belief p
    ) {
    font-size: 16px !important;
    line-height: 1.75 !important;
  }
  body
    .page
    :is(
      .experience-intro > p,
      .experience-caption p,
      .principle > p,
      .feature-copy > p,
      .journal-card > p,
      .journal-library-heading > p,
      .featured-story-copy > p,
      .archive-hero > p,
      .archive-project-copy > p,
      .directory-top > p,
      .directory-hero > p,
      .directory-service p,
      .directory-business p,
      .package-section-heading > p,
      .business-offer-card > p,
      .business-offer-detail-body p,
      .business-faq p,
      .sx-section-heading > p,
      .delivery-heading > p,
      .delivery-output > p,
      .delivery-comparison p,
      .package-scope-note,
      .delivery-profile-note,
      .delivery-timing,
      .sx-demo-caption,
      .startup-demo-note,
      .canvas-caption p
    ) {
    font-size: 14px !important;
    line-height: 1.75 !important;
  }
  body
    .page
    :is(
      .service-text small,
      .journal-card .journal-category,
      .journal-demo-label,
      .archive-project-type,
      .archive-project-origin,
      .article-author small,
      .article-author > div > span,
      .article-breadcrumbs,
      .article-meta,
      .work-reading-meta,
      .footer-capabilities,
      .studio-footer-bottom
    ) {
    font-size: 12px !important;
    line-height: 1.6 !important;
  }
  body
    .page
    :is(
      .journal-reading p,
      .journal-reading li,
      .offering-copy > p,
      .journal-article-deck,
      .business-context p
    ) {
    color: #50565c;
  }
  body
    .page
    :is(
      .business-offer-deliverables li,
      .fold-deliverables li,
      .delivery-output li,
      .audience-points li,
      .directory-service h3,
      .footer-column a,
      .footer-studio > p,
      .footer-conversation,
      .article-toc a,
      .article-toc summary,
      .article-reading-time,
      .case-study-link
    ) {
    font-size: 14px !important;
    line-height: 1.6 !important;
  }
  body
    .page
    :is(
      .archive-filters button,
      .journal-filters a,
      .service-type-tabs button,
      .sole-showcase-tab
    ) {
    min-height: 44px;
    font-size: 13px;
  }
  body .hero-content {
    padding-bottom: 20px;
  }
}
@media (max-width: 1000px) {
  /* All primary destinations remain above the independently scrollable options. */
  body .site-header .mobile-menu {
    display: none;
    overflow: hidden;
    max-height: calc(100dvh - 105px);
    padding: 12px;
    gap: 0;
  }
  body .site-header .mobile-menu.open {
    display: flex;
    flex-direction: column;
  }
  body .mobile-menu > .mobile-primary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    flex: none;
    padding-bottom: 10px;
    border-bottom: 1px solid #e8e9e8;
  }
  body .mobile-menu .mobile-primary > :is(a, button) {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 44px;
    padding: 10px 12px;
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
    background: none;
    border: 0;
    text-align: left;
    color: #15191d;
    border-radius: 8px;
  }
  body .mobile-menu .mobile-primary > [aria-expanded="true"] {
    background: #fff3eb;
    color: #b64100;
  }
  body .mobile-menu > .mobile-submenu {
    overflow: auto;
    overscroll-behavior: contain;
    min-height: 0;
    padding: 10px 2px 0;
  }
  body .mobile-menu > .mobile-submenu[hidden] {
    display: none;
  }
  body .mobile-menu .menu-heading {
    padding: 8px 8px 12px;
  }
  body .mobile-menu .menu-heading :is(h2, p) {
    display: none;
  }
  body .mobile-menu .menu-kicker {
    font-size: 12px;
    font-weight: 600;
    color: #b64100;
  }
  body .mobile-menu .menu-destinations {
    gap: 2px;
  }
  body .mobile-menu .menu-destination {
    min-height: 48px;
    padding: 8px;
    gap: 12px;
  }
  body .mobile-menu .menu-item-copy strong {
    font-size: 14px;
    line-height: 1.5;
  }
  body .mobile-menu .menu-item-copy small {
    display: none;
  }
  body .mobile-menu .menu-company-link {
    min-height: 44px;
    font-size: 14px;
    padding: 8px;
  }
  body .mobile-menu .menu-company-size-links {
    gap: 0;
  }
  body .mobile-menu .menu-bottom {
    padding: 8px;
    margin-top: 10px;
  }
  body .mobile-menu .menu-browse {
    min-height: 44px;
    font-size: 14px;
  }
  body .mobile-menu .mobile-primary .nav-roll-label {
    white-space: normal;
  }
}
@media (max-width: 700px) {
  body .hero-description {
    max-width: 35ch;
  }
  body .hero-visual {
    margin-top: 28px;
  }
  body .project-inquiry-dialog {
    position: fixed;
    inset: calc(var(--inquiry-visible-top, 0px) + 12px) 12px auto;
    margin: 0;
    width: calc(100vw - 24px);
    max-height: calc(var(--inquiry-visible-height, 100dvh) - 24px);
    overflow: hidden;
    border-radius: 18px;
  }
  body .project-inquiry-dialog .modal-body {
    display: flex;
    flex-direction: column;
    max-height: calc(var(--inquiry-visible-height, 100dvh) - 24px);
    padding: 20px;
    box-sizing: border-box;
    overflow: hidden;
  }
  body .project-inquiry-dialog .modal-top {
    flex: none;
  }
  body .project-inquiry-dialog .modal-top h2 {
    font-size: 27px;
    margin-top: 10px;
  }
  body .project-inquiry-dialog .modal-copy {
    font-size: 14px;
    line-height: 1.6;
    margin-top: 12px;
    flex: none;
  }
  body .project-inquiry-dialog .project-form {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1;
    overflow: hidden;
    margin-top: 18px;
  }
  body .project-inquiry-dialog .inquiry-progress {
    flex: none;
    margin-bottom: 15px;
  }
  body .project-inquiry-dialog .inquiry-progress > div:first-child {
    font-size: 12px;
  }
  body .project-inquiry-dialog .inquiry-fields {
    overflow: auto;
    overscroll-behavior: contain;
    min-height: 0;
    flex: 1;
    padding: 0 4px 2px 0;
    scroll-padding: 20px;
  }
  body .project-inquiry-dialog .inquiry-step {
    overflow: visible;
    min-height: 0;
    min-width: 0;
  }
  body .project-inquiry-dialog .field {
    margin-bottom: 16px;
  }
  body .project-inquiry-dialog .field label {
    font-size: 13px !important;
    line-height: 1.5;
    color: #454b52;
  }
  body .project-inquiry-dialog :is(input, textarea, .admin-select-button) {
    font-size: 16px;
    min-height: 48px;
  }
  body .project-inquiry-dialog .inquiry-actions {
    margin-top: 10px;
    flex: none;
    gap: 16px;
    background: #fff;
    padding-top: 10px;
    border-top: 1px solid #e8e9e8;
  }
  body .project-inquiry-dialog .inquiry-submit {
    font-size: 14px;
    min-height: 48px;
  }
  body .project-inquiry-dialog .inquiry-back {
    font-size: 13px;
    min-height: 44px;
  }
  body .project-inquiry-dialog :is(.form-note, .inquiry-budget-note, .optional, .inquiry-currency) {
    font-size: 12px;
    line-height: 1.5;
    color: #565e66;
  }
  body .project-inquiry-dialog .form-note {
    margin-top: 9px;
    flex: none;
  }
  body .project-inquiry-dialog #request-status {
    margin-top: 5px;
    flex: none;
    font-size: 13px;
  }
  body .project-inquiry-dialog .brief-result {
    overflow: auto;
    min-height: 0;
  }
  body .project-inquiry-dialog .admin-select-option {
    font-size: 15px;
    min-height: 44px;
  }
  body .project-inquiry-dialog.inquiry-keyboard-open .modal-copy,
  body .project-inquiry-dialog.inquiry-keyboard-open .modal-top .eyebrow {
    display: none;
  }
  body .project-inquiry-dialog.inquiry-keyboard-open .modal-top h2 {
    font-size: 22px;
    margin: 0;
  }
  body .project-inquiry-dialog.inquiry-keyboard-open .project-form {
    margin-top: 12px;
  }
  body .project-inquiry-dialog.inquiry-keyboard-open .inquiry-progress {
    margin-bottom: 10px;
  }
}
@media (max-width: 850px) {
  body .page :is(.btn, .text-link, .footer-back-top) {
    font-size: 14px;
    min-height: 44px;
  }
  body .site-header .btn {
    font-size: 13px;
    min-height: 44px;
  }
  body .page .faq-filters > button {
    font-size: 13px;
    min-height: 44px;
  }
  body .page .experience-preview-badge {
    font-size: 12px;
  }
  body .featured-experiences .carousel-dot {
    width: 44px;
    height: 44px;
  }
  body .featured-experiences :is(.carousel-arrows > button, .carousel-pause) {
    width: 44px;
    height: 44px;
  }
  body .viewer-eyebrow {
    font-size: 12px;
  }
  body .viewer-close {
    font-size: 13px;
    min-height: 44px;
  }
  body .viewer-navigation button {
    width: 44px;
    height: 44px;
  }
  body .viewer-navigation > span,
  body .viewer-footer {
    font-size: 12px;
  }
}
@media (max-width: 1000px) {
  body .mobile-menu .mobile-primary > [data-open] {
    display: none;
  }
}
@media (max-width: 850px) {
  body
    .page
    :is(
      .journal-meta,
      .featured-story-category,
      .featured-byline,
      .article-breadcrumb,
      .archive-project-meta,
      .archive-featured-label,
      .archive-filter-status,
      .newsletter-note,
      .newsletter-status,
      .business-other-sizes,
      .package-audience-link,
      .package-service-link,
      .business-offer-service,
      .package-inclusions > span,
      .scroll-cue,
      .band-label
    ) {
    font-size: 12px !important;
    line-height: 1.6 !important;
  }
  body
    .page
    :is(
      .featured-read,
      .archive-case-link,
      .archive-preview,
      .business-text-link,
      .journal-category-heading > a,
      .journal-related > header > a
    ) {
    font-size: 14px !important;
    min-height: 44px;
  }
  body
    .page
    :is(
      .journal-category-heading p,
      .article-promotion p,
      .business-offer-card li,
      .package-inclusions li
    ) {
    font-size: 14px !important;
    line-height: 1.7 !important;
  }
  body .page :is(.service-text strong, .service-link strong) {
    font-size: 16px !important;
    line-height: 1.5 !important;
  }
}
@media (max-width: 850px) {
  body
    .page
    :is(
      .delivery-stage-details p,
      .delivery-responsibilities p,
      .delivery-step-copy > span,
      .delivery-incodio li,
      .delivery-alternatives p,
      .audience-needs li,
      .audience-services a,
      .audience-tab strong
    ) {
    font-size: 14px !important;
    line-height: 1.6 !important;
  }
  body
    .page
    :is(
      .delivery-snapshot span,
      .delivery-stage-details .delivery-output > span,
      .delivery-responsibilities > div > span,
      .audience-phase,
      .audience-help > span,
      .audience-tab small
    ) {
    font-size: 12px !important;
    line-height: 1.6 !important;
  }
  body .page :is(.business-faq p, .audience-intro > p) {
    font-size: 16px !important;
    line-height: 1.75 !important;
  }
  body .page .audience-services a {
    min-height: 44px;
  }
}

/* Distinct menu and enquiry actions, including narrow phones. */
@media (max-width: 1000px) {
  body .site-header {
    grid-template-columns: minmax(0, 1fr) 44px auto;
    column-gap: 12px;
    align-items: start;
  }
  body .site-header > .brand {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    max-width: 100%;
    align-self: center;
  }
  body .site-header > .mobile-toggle {
    position: static;
    grid-column: 2;
    grid-row: 1;
    width: 44px;
    height: 44px;
    margin: 0;
    align-self: start;
  }
  body .site-header > .header-cta {
    grid-column: 3;
    grid-row: 1;
    min-width: 0;
    min-height: 44px;
    height: 44px;
    padding: 0 8px 0 12px;
    gap: 8px;
    font-size: 12px;
    line-height: 1;
    white-space: nowrap;
    align-self: start;
  }
  body .site-header > .header-cta > .arrow {
    width: 26px;
    height: 26px;
    padding: 6px;
    flex: none;
  }
}
@media (max-width: 360px) {
  body .site-header {
    column-gap: 8px;
  }
  body .site-header > .brand {
    font-size: 26px;
  }
}

@media (max-width: 1000px) {
  body .site-header > .brand .site-brand-logo {
    max-width: 100%;
    max-height: 36px;
    object-fit: contain;
  }
}