/* Copyright (c) 2026 Nomad Designz.
   Copyright (c) 2026 Jonathan Allen Zehner. Created by Jonathan Allen Zehner.
   Phone-first website reflow. Approved identity files and product engines stay intact.
   Loaded after the existing page styles; printing retains its existing stylesheet. */
@media screen {
  :root {
    --gutter: clamp(16px, 5vw, 24px);
    --header: 76px;
    --nav-header-height: var(--header);
  }
  html { scroll-padding-top: calc(var(--nav-header-height) + 20px); }
  .wrap { width: min(calc(100% - var(--gutter) * 2), var(--page)); }
  .wrap, .wrap > *, .section-heading > *, .contact-aside > *,
  .footer-top > *, .dialog-bar > *, .dialog-bottom > *, .art-top > *,
  .art-row > *, .demo-row > *, .catalog-meta > *, .card-bottom > * { min-width: 0; }
  h1, h2, h3, h4, p, li, dd, .tag, .store-price { overflow-wrap: break-word; }
  .field input, .field select, .field textarea,
  .partner-form input:not([type=checkbox]), .partner-form select, .partner-form textarea,
  .catalog-controls input, .catalog-controls select, .search-field input,
  .board-actions input, .board-card select { font-size: 16px; min-height: 48px; }
  input, textarea, select { scroll-margin-block: calc(var(--nav-header-height) + 16px) 24px; }
  .button { max-width: 100%; white-space: normal; }
  .button svg, .text-link svg, .motion-toggle svg { flex-shrink: 0; }
  .text-link, .application-draft-link, .footer-email { overflow-wrap: anywhere; }
  .motion-toggle, .filter, .catalog-filters button, .text-button,
  .demo-tabs button, .detail-jump a, .partner-anchor-nav a,
  .footer-links a, .footer-bottom a, .review-brief summary { min-height: 44px; }
  .detail-jump a, .footer-links a, .review-brief summary { display: inline-flex; align-items: center; }
  .check-row, .form-consent { min-height: 44px; }
  .choice input, .partner-form .check-row input, .form-consent input { flex: 0 0 auto; }
  .site-header { padding-top: env(safe-area-inset-top, 0px); }
  .header-inner { gap: 12px; }
  .brand { min-width: 0; flex: 0 1 auto; }
  .brand img { width: 207px; max-width: 100%; height: auto; }
  .menu-toggle { display: inline-flex; flex-shrink: 0; min-width: 44px; min-height: 44px; }
  .menu-toggle .menu-label { display: none; }
  .site-nav {
    position: absolute;
    top: calc(100% - 1px);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 3px;
    background: var(--fog);
    border-bottom: 1px solid var(--line);
    padding: 16px max(var(--gutter), env(safe-area-inset-right, 0px))
      max(24px, env(safe-area-inset-bottom, 0px)) max(var(--gutter), env(safe-area-inset-left, 0px));
    max-height: calc(100vh - var(--nav-header-height));
    max-height: calc(100dvh - var(--nav-header-height));
    overflow-y: auto;
    overscroll-behavior-y: contain;
  }
  .js .site-nav:not(.is-open) { display: none; }
  .site-nav > a { padding: 12px; font-size: 16px; min-height: 48px; }
  .site-nav > a:after { display: none; }
  .site-nav > .button { align-self: start; margin-top: 12px; padding: 14px 24px; color: var(--paper); }
  .site-nav .partner-nav { border-left: 0; border-top: 1px solid var(--line); padding: 15px 12px; margin-top: 8px; }
  .no-js .site-header { position: relative; }
  .no-js .header-inner { flex-wrap: wrap; }
  .no-js .site-nav {
    position: static;
    flex: 1 1 100%;
    border: 0;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 0 0 16px;
    max-height: none;
  }
  .hero {
    /* Content determines height at text enlargement and in phone landscape. */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    height: auto;
    min-height: min(640px, calc(100svh - var(--header)));
    max-height: none;
    padding-top: 52px;
  }
  .hero-body { padding-top: 0; padding-bottom: 32px; }
  .hero h1 { font-size: clamp(42px, 11.5vw, 77px); }
  .hero-description { font-size: 17px; max-width: 36ch; }
  .hero-foot {
    position: relative;
    bottom: auto;
    left: auto;
    right: auto;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: auto;
    padding-block: 12px max(24px, env(safe-area-inset-bottom, 0px));
  }
  .hero-note { display: none; }
  .hero-route { gap: 12px; }
  .hero-route .scroll-copy { display: none; }
  .hero-route .route-line { width: 22px; }
  .hero-foot .motion-toggle { min-height: 44px; }
  .section { padding-block: clamp(48px, 9vw, 72px); }
  .section-heading { display: block; margin-bottom: 32px; }
  .section-heading > p { margin-top: 20px; max-width: 60ch; }
  .section-heading > .text-link { margin-top: 20px; }
  .split, .original-spotlight, .product-feature, .product-detail-top,
  .catalog-layout, .contact-grid, .application-layout, .partner-split,
  .detail-columns, .work-grid, .process-grid, .principles, .fit-grid,
  .responsibilities, .catalog-grid, .form-row, .partner-form .field-row,
  .choice-grid, .product-information { grid-template-columns: minmax(0, 1fr); }
  .split, .original-spotlight, .product-feature, .product-detail-top,
  .contact-grid, .application-layout, .partner-split, .detail-columns { gap: 32px; }
  .form-row, .partner-form .field-row { gap: 0; }
  .process-grid, .principles, .fit-grid, .responsibilities { gap: 28px; }
  .contact-aside { display: block; position: static; }
  .contact-aside .expectation { margin-top: 25px; }
  .application-aside { position: static; }
  .collection-note { display: block; }
  .service-detail { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .service-detail .deliverable-column { grid-column: auto; margin-top: 24px; }
  .service-detail .number { font-size: 14px; margin-bottom: 18px; }
  .services-grid { grid-template-columns: minmax(0, 1fr); }
  .service-card p { max-width: 60ch; }
  .project-caption { flex-wrap: wrap; gap: 8px 16px; }
  .project-caption .kicker { display: inline; white-space: normal; }
  .gallery-controls { display: block; }
  .search-field { margin-top: 22px; width: 100%; }
  .search-field input { width: 100%; min-width: 0; }
  .filter-group, .catalog-filters, .demo-tabs { gap: 8px; flex-wrap: wrap; }
  .catalog-controls { align-items: stretch; }
  .catalog-search, .catalog-sort { flex: 1 1 100%; }
  .catalog-meta, .store-card .card-bottom, .demo-row, .art-row, .art-stats { flex-wrap: wrap; }
  .store-card-body, .tracker-art, .board-shell { padding: 20px; }
  .brief-form, .partner-form { padding: 24px 16px; }
  .form-actions .button, .application-actions .button { width: 100%; }
  .brief-meter { flex-wrap: wrap; }
  .form-status, .form-notice { overflow-wrap: anywhere; }
  .demo-board { grid-template-columns: minmax(0, 1fr); }
  .board-actions > div { flex: 1 1 100%; }
  .board-actions input { width: 100%; }
  .review-steps li { grid-template-columns: 30px minmax(0, 1fr); gap: 8px 18px; }
  .review-steps li:before { grid-row: 1 / 3; }
  .review-steps li p { grid-column: 2; }
  .cta-band .wrap { display: block; }
  .cta-band .button { margin-top: 24px; }
  .footer-top { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .footer-top > div { grid-column: auto; }
  .footer-top > div:last-child { display: block; }
  .footer-bottom { flex-direction: column; align-items: start; gap: 16px; }
  .footer-bottom .footer-legal { justify-content: start; gap: 12px 20px; }
  .footer-brand { max-width: 100%; height: auto; }
  .site-footer { padding-bottom: max(25px, env(safe-area-inset-bottom, 0px)); }
  .dialog {
    width: min(1100px, calc(100vw - 24px));
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-padding-top: 104px;
  }
  .dialog-inner { padding: 16px; }
  .dialog-bar {
    position: sticky;
    top: -16px;
    z-index: 2;
    background: var(--fog);
    padding-block: 16px 12px;
    margin-top: -16px;
    align-items: start;
  }
  .dialog-bar .icon-button { flex-shrink: 0; }
  .dialog-bar h2 { font-size: clamp(24px, 5vw, 32px); }
  .dialog-image img { max-height: 62svh; width: auto; }
  .dialog-bottom { display: block; }
  .dialog-nav { margin-top: 20px; justify-content: end; }
  .icon-button { min-width: 44px; min-height: 44px; }
}
@media screen and (min-width: 600px) {
  :root { --gutter: clamp(24px, 4vw, 40px); --header: 82px; }
  .brand img { width: 235px; }
  .menu-toggle .menu-label { display: inline; }
  .hero { padding-top: 64px; }
  .hero h1 { font-size: clamp(60px, 8vw, 80px); }
  .hero-description { max-width: 45ch; font-size: 18px; }
  .work-grid, .process-grid, .catalog-grid, .product-information,
  .form-row, .partner-form .field-row, .choice-grid, .responsibilities {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-top > div:first-child, .footer-top > div:last-child { grid-column: 1 / -1; }
  .gallery-controls { display: flex; }
  .search-field { width: auto; margin-top: 0; }
  .search-field input { width: 220px; }
  .catalog-search { flex: 1 1 240px; }
  .catalog-sort { flex: 0 1 190px; }
  .demo-board { grid-template-columns: repeat(auto-fit, minmax(min(205px, 100%), 1fr)); }
  .board-actions > div { flex: 0 1 auto; }
  .board-actions input { width: 210px; }
  .form-actions .button, .application-actions .button { width: auto; }
  .dialog-inner { padding: 24px; }
  .dialog-bar { top: -24px; margin-top: -24px; padding-top: 24px; }
}
@media screen and (min-width: 900px) {
  .section { padding-block: clamp(72px, 8vw, 120px); }
  .section-heading { display: flex; gap: 40px; align-items: end; margin-bottom: 48px; }
  .section-heading > p { max-width: 340px; margin: 0; }
  .section-heading > .text-link { margin-top: 0; }
  .split, .product-feature, .original-spotlight, .product-detail-top,
  .partner-split, .detail-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
  .principles, .fit-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-card { display: flex; }
  .service-card .card-top, .service-card .service-arrow { grid-column: auto; grid-row: auto; }
  .service-card .service-arrow { margin-top: auto; }
  .contact-aside { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
  .contact-aside .eyebrow { grid-column: 1 / -1; }
  .contact-aside .expectation { margin-top: 0; }
  .review-steps li { grid-template-columns: 36px minmax(0, .9fr) minmax(0, 1.1fr); gap: 20px; }
  .review-steps li:before { grid-row: auto; }
  .review-steps li p { grid-column: auto; }
  .cta-band .wrap { display: flex; }
  .cta-band .button { margin-top: 0; }
  .footer-top { grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); }
  .footer-top > div:first-child { grid-column: auto; }
  .footer-bottom { flex-direction: row; align-items: center; justify-content: space-between; }
  .dialog-bottom { display: flex; }
  .dialog-nav { margin-top: 0; flex-shrink: 0; }
}
@media screen and (min-width: 1131px) {
  :root { --gutter: clamp(40px, 5.5vw, 88px); --header: 94px; }
  .brand img { width: 245px; }
  .menu-toggle { display: none; }
  .site-nav, .js .site-nav:not(.is-open) {
    position: static;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding: 0;
    border: 0;
    max-height: none;
    overflow: visible;
  }
  .site-nav > a { font-size: 12px; padding: 12px 0; min-height: 44px; }
  .site-nav > a:after { display: block; }
  .site-nav > .button { align-self: center; margin-top: 0; padding: 11px 17px; }
  .site-nav .partner-nav { border-top: 0; border-left: 1px solid var(--line); margin-top: 0; padding: 12px 0 12px 14px; }
  .hero { min-height: 640px; padding-top: 64px; }
  .hero h1 { font-size: clamp(72px, 6.6vw, 96px); }
  .hero-note { display: block; }
  .hero-route { gap: 30px; }
  .hero-route .route-line { width: 65px; }
  .hero-route .scroll-copy { display: inline; }
  .contact-grid { grid-template-columns: minmax(0, .73fr) minmax(0, 1.27fr); gap: 60px; }
  .contact-aside { display: block; position: sticky; top: calc(var(--nav-header-height) + 24px); }
  .contact-aside .expectation { margin-top: 30px; }
  .application-layout { grid-template-columns: minmax(0, 1fr) 300px; gap: 36px; }
  .application-aside { position: sticky; top: calc(var(--nav-header-height) + 24px); }
  .catalog-layout { grid-template-columns: minmax(0, 1fr) 280px; gap: 32px; }
  .process-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .service-detail { grid-template-columns: 48px minmax(0, 1fr) minmax(0, 1fr); gap: 36px; }
  .service-detail .number { font-size: 24px; }
  .service-detail .deliverable-column { grid-column: auto; margin-top: 0; }
  .brief-form, .partner-form { padding: 34px; }
}
@media screen and (min-width: 1280px) {
  .brand img { width: 290px; }
  .site-nav { gap: 24px; }
  .split, .product-feature, .original-spotlight, .product-detail-top,
  .partner-split, .detail-columns { gap: clamp(40px, 5vw, 70px); }
  .services-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .footer-top { grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 40px; }
  .footer-top > div:last-child { grid-column: auto; }
}
@media screen and (hover: none) {
  .button:hover, .store-card:hover { transform: none; }
  .project-art:hover img { transform: none; }
}
@media screen and (prefers-reduced-motion: reduce) {
  .hero-landscape { will-change: auto; }
}