/* =============================================================================
   USA Book Publishing Company — responsive overrides
   ALL @media breakpoints live here. Desktop-first, max-width queries.
   Type and spacing are fluid (clamp tokens in style.css); these rules only
   restructure layouts. Breakpoints: 1199 / 991 / 767 / 575 / 400
   ========================================================================== */

/* touch devices: no hover to reveal work metrics, so show them */
@media (hover: none) {

  /* iOS/Android ignore or mis-scale fixed backgrounds (blurry zoom on tall sections) */
  .index-wrap-5 {
    background-attachment: scroll;
  }

  .wrap-9-metric {
    transform: none;
  }

  .wrap-10-view {
    cursor: grab;
  }

  .wrap-10-cursor {
    display: none;
  }
}

/* reduced motion: static marquee, settled covers */
@media (prefers-reduced-motion: reduce) {
  .wrap-4-marquee {
    width: auto;
    padding-inline: var(--pad-x);
  }

  .wrap-4-track {
    flex-wrap: wrap;
    animation: none;
  }

  .wrap-4-track[aria-hidden="true"] {
    display: none;
  }

  .wrap-14-marquee {
    width: auto;
  }

  .wrap-14-track {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 24px;
    animation: none;
  }

  .wrap-14-track[aria-hidden="true"] {
    display: none;
  }

  .wrap-4-track li {
    font-size: clamp(1.75rem, 1.2rem + 2.4vw, 3.5rem);
  }

  .wrap-9-shelf .book,
  .wrap-9-metric {
    transition: none;
  }

  .wrap-10-card {
    transform: none;
  }

  .wrap-11-star,
  .wrap-11-deck::after,
  .wrap-11-deck .tilt,
  .wrap-9-phone .ic::after {
    animation: none;
  }

  .wrap-11-title .w,
  .wrap-11-rv {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .wrap-11-title .u path {
    stroke-dashoffset: 0;
    transition: none;
  }

  .is-steps .wrap-13-q.on>*,
  .is-steps .wrap-13-q.on .wrap-13-opt,
  .wrap-13-fl.bad input {
    animation: none;
  }

  /* about page */
  .about-wrap-1-inner>*,
  .about-wrap-1-reel,
  .about-reel-track,
  .about-reel-track .book::before,
  .about-wrap-3-star {
    animation: none;
  }

  .about-row-frame img {
    transform: none;
    transition: filter 1.2s ease;
  }

  .about-row-cover {
    transition: none;
  }

  /* portfolio page */
  .pf-wrap-1-inner>* {
    animation: none;
  }

  /* services menu: appears in place */
  .nav-drop-menu,
  .nav-drop-menu li {
    transition: none;
  }

  .nav-drop-menu li {
    opacity: 1;
    translate: 0 0;
  }

  /* popup: the book is simply open */
  .ubp-modal.active,
  .ubp-modal .modal-card,
  .modal-cover,
  .modal-page form>* {
    animation: none;
  }

  .pf-plate-cover {
    transition: none;
  }

  .pf-plate-card {
    scale: none;
    filter: none;
  }

  /* contact page */
  .contact-letter.in .contact-postmark,
  .contact-postmark-spin,
  .footer-star {
    animation: none;
  }

  /* service pages */
  .svc-wrap-1-inner>*,
  .svc-panels-star,
  .svc-tabs.is-tabs .svc-panel-copy>*,
  .svc-tabs.is-tabs .svc-mock-reader,
  .svc-tabs.is-tabs .svc-mock-book {
    animation: none;
  }

  .svc-pill.is-bad .svc-pill-bar {
    animation: none;
  }

  .is-steps .svc-pill-step,
  .is-steps .svc-pill-step.on {
    transform: none;
    transition: none;
  }

  .svc-tab {
    transition: none;
  }
}

/* nav links collapse into the menu below xl */
@media (max-width: 1441px) {
  .wrap-6-page h3 {
    font-size: 26px;
  }
}

/* nav links collapse into the menu below xl */
@media (max-width: 1199px) {
  .nav-links {
    display: none;
  }

  .nav-toggle {
    display: inline-flex;
  }

  .nav-capsule {
    gap: 16px;
    padding: 6px 6px 6px 20px;
  }

  /* services shelf: slimmer spines, drop the decorative extras */
  .index-wrap-6 {
    --spine: 64px;
  }

  .wrap-6-page {
    padding: 44px 40px;
  }

  .wrap-8-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: var(--space-5);
  }

  .wrap-8-progress {
    display: none;
  }

  .wrap-8-track {
    border-top: 0;
  }

  .wrap-8-step {
    border-top: 2px solid var(--color-neutral-300);
    transition: opacity .6s ease, border-color .6s ease;
  }

  .wrap-8-step.on {
    border-top-color: var(--color-accent);
  }

  /* about: hero covers need the side room; team rail goes 3 + 2 */
  .about-wrap-1-reel {
    display: none;
  }

  .about-wrap-4-roles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .about-role:nth-child(3n + 1) {
    padding-left: 0;
    border-left: 0;
  }

  .about-role:nth-child(n + 4) {
    border-top: var(--hair);
  }

  /* service: narrower tab column */
  .svc-tabs {
    grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
  }

  .svc-tab {
    padding: 0 20px;
    font-size: 1rem;
  }

  .svc-panel {
    grid-template-columns: minmax(0, 1fr);
  }

  .svc-mock {
    min-height: 340px;
    max-width: 460px;
  }
}

@media (max-width: 991px) {
  .sidebar-quote {
    display: none;
  }

  /* portfolio: plates stop sticking (a one-column plate is taller than the screen)
     and put the cover on top */

  .pf-plate {
    position: relative;
    top: auto;
  }

  .pf-plate-card,
  .pf-plate:nth-child(even) .pf-plate-card {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    scale: none;
    filter: none;
  }

  .pf-plate:nth-child(even) .pf-plate-stage {
    order: 0;
  }

  .pf-plate-cover {
    width: min(70%, 280px);
  }

  .pf-plate-title {
    max-width: none;
  }

  /* slide-out is desktop-only */

  /* footer: brand + services, then company + contact */
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sec-top {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .wrap-1-copy {
    padding-right: 0;
  }

  .wrap-1-title {
    max-width: 14ch;
  }

  /* about: stats move into the photo's flow, 2 × 2 */
  .wrap-5-media,
  .wrap-5-media[data-reveal] {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: auto;
    min-height: 620px;
  }

  .wrap-5-stats {
    position: relative;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 28px;
    padding: 0 32px 36px;
  }

  .wrap-5-stat:nth-child(3) {
    padding-left: 0;
    border-left: 0;
  }

  .wrap-5-stat:nth-child(3)::before {
    left: 0;
  }

  /* services shelf becomes an accordion stack */
  .wrap-6-hint {
    display: none;
  }

  .wrap-6-shelf {
    flex-direction: column;
    align-items: stretch;
    height: auto;
    gap: 6px;
  }

  .wrap-6-book {
    flex: none;
    height: auto;
    flex-direction: column;
    border-radius: 6px;
  }

  .wrap-6-book.is-active {
    height: auto;
  }

  .wrap-6-book:not(.is-active):hover {
    transform: none;
  }

  .wrap-6-spine {
    flex: none;
    height: 64px;
    flex-direction: row;
    justify-content: flex-start;
    gap: 16px;
    padding: 0 20px;
    background: linear-gradient(180deg, rgb(255 255 255 / 0.08), transparent), var(--bg);
  }

  .wrap-6-spine::before,
  .wrap-6-spine::after {
    display: none;
  }

  .wrap-6-spine .title {
    writing-mode: horizontal-tb;
    rotate: none;
    font-size: 1rem;
    text-align: left;
    white-space: normal;
  }

  .wrap-6-spine .star {
    margin-left: auto;
    transition: rotate .3s;
  }

  .wrap-6-book.is-active .wrap-6-spine {
    border-right: 0;
  }

  .wrap-6-book.is-active .wrap-6-spine .star {
    rotate: 72deg;
  }

  .wrap-6-page {
    display: none;
    flex: none;
    min-width: 0;
    padding: 8px 20px 28px;
  }

  .wrap-6-book.is-active .wrap-6-page {
    display: flex;
  }

  .wrap-6-page h3 {
    font-size: 2rem;
    margin: 16px 0 14px;
  }

  .wrap-6-cta {
    margin-top: 26px;
  }

  .wrap-6-plank {
    display: none;
  }

  .wrap-7-sticky {
    position: static;
    padding-right: 0;
  }

  .wrap-9-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wrap-9-item:nth-child(3n + 2) {
    margin-top: 0;
    margin-bottom: 0;
  }

  .wrap-9-item:nth-child(even) {
    margin-top: var(--space-8);
    margin-bottom: calc(var(--space-8) * -1);
  }

  .wrap-9-cta {
    margin-top: calc(var(--space-8) + var(--space-5));
  }

  .wrap-10-nav {
    justify-self: start;
  }

  .wrap-10-view {
    cursor: grab;
  }

  .wrap-10-cursor {
    display: none;
  }

  .wrap-10-card {
    flex-basis: 86cqi;
  }


  .wrap-13-panel {
    grid-template-columns: 1fr;
  }

  .wrap-13-rail {
    display: none;
  }

  .wrap-13-stage {
    padding: 48px 28px 32px;
  }

  /* about: rows stack copy-then-photo; stats rail 2 × 2 */
  .about-row-copy,
  .about-row.is-flipped .about-row-copy {
    padding-inline: 0;
  }

  .about-row-media {
    max-width: 640px;
  }

  .about-wrap-3-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 0;
  }

  .about-stat {
    padding: var(--rail-y) var(--rail-x);
  }

  .about-stat:nth-child(3) {
    border-left: 0;
  }

  .about-stat:nth-child(n + 3) {
    border-top: var(--hair);
  }

  .about-stat::before {
    top: 0;
  }

  /* contact: aside over the letter */
  .contact-letter-aside {
    padding-right: 0;
  }

  /* service: form drops under the headline; tabs become a scrolling chip row over the panel */
  /* service intro: copy stacks; each row puts its detail under the title */
  .svc-wrap-2-top {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-4);
  }

  .svc-row,
  .svc-row[data-reveal] {
    grid-template-columns: minmax(0, 1fr) 48px;
    row-gap: var(--space-2);
    align-items: start;
  }

  .svc-row-text {
    grid-column: 1;
    grid-row: 2;
  }

  .svc-row-tick {
    grid-column: 2;
    grid-row: 1;
    width: 48px;
    height: 48px;
  }

  .svc-tabs {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-2);
  }

  .svc-tabs-list {
    flex-direction: row;
    gap: 8px;
    margin-inline: calc(var(--pad-x) * -1);
    padding: 4px var(--pad-x);
    overflow-x: auto;
    scrollbar-width: none;
  }

  .svc-tabs-list::-webkit-scrollbar {
    display: none;
  }

  .svc-tab,
  .svc-tab[aria-selected="true"] {
    flex: none;
    min-height: 50px;
    margin-right: 0;
    border-radius: 999px;
    white-space: nowrap;
  }

  .svc-panels {
    min-height: 0;
    border-radius: 22px;
  }
}

@media (max-width: 767px) {
  .nav-phone {
    display: none;
  }

  /* popup: the book stacks. The cover becomes a short navy header over the page and
     slides down instead of swinging on a spine there is no room for */
  .ubp-modal {
    padding: 12px;
  }

  .ubp-modal .modal-card {
    grid-template-columns: minmax(0, 1fr);
    overflow-y: auto;
    border-radius: 14px;
  }

  .modal-cover {
    animation: modal-drop .6s .15s var(--ease-out) both;
  }

  .modal-cover-out {
    display: none;
  }

  .modal-cover-in {
    padding-top: 30px;
    padding-bottom: 26px;
    border-radius: 14px 14px 0 0;
    box-shadow: none;
  }

  /* room for the close button in the header's corner */
  .modal-cover-in h3 {
    max-width: 16ch;
    padding-right: 48px;
  }

  .modal-cover-in>p,
  .modal-assure {
    display: none;
  }

  .modal-phone {
    font-size: 1.0625rem;
  }

  /* static, so the close button pins to the card's corner, over the navy header */
  .modal-page {
    position: static;
    overflow: visible;
    padding-top: 26px;
    background: #fffcf6;
    border-radius: 0 0 14px 14px;
  }

  /* navy disc so the cross reads on the header */
  .ubp-modal .modal-close {
    top: 10px;
    right: 10px;
    z-index: 3;
    color: #fff;
    background: rgb(19 29 71 / 0.85);
  }

  .ubp-modal .modal-close:hover {
    background: #131d47;
  }

  .modal-page form>.form-control,
  .modal-page form>.btn-block,
  .modal-page form>.modal-note {
    animation-delay: .35s;
  }

  @keyframes modal-drop {
    from {
      opacity: 0;
      translate: 0 -24px;
    }
  }

  .nav-capsule {
    gap: 8px;
    padding: 6px;
  }

  .wrap-1-phone {
    display: inline-flex;
  }

  .wrap-1-form .col-md-6.pe {
    padding-right: 0;
  }

  .wrap-6-list {
    grid-template-columns: 1fr;
  }

  .wrap-7-item {
    grid-template-columns: 1fr;
  }

  .wrap-8-steps {
    grid-template-columns: 1fr;
    row-gap: 0;
  }

  .wrap-8-step {
    padding: var(--space-3) 0 var(--space-3) var(--space-5);
    border-top: 0;
    border-left: 2px solid var(--color-neutral-300);
  }

  .wrap-8-step.on {
    border-left-color: var(--color-accent);
  }

  .wrap-8-step::before {
    top: var(--space-3);
    left: -7px;
  }

  .wrap-8-step .num {
    margin-bottom: 4px;
  }

  .index-wrap-10 {
    --gap: 16px;
  }

  .wrap-10-card {
    min-height: 380px;
    padding: 32px 26px 28px;
  }

  .wrap-12-a {
    padding-right: 0;
  }

  /* about: team rail becomes a single ruled list */
  .about-wrap-4-roles {
    grid-template-columns: 1fr;
  }

  .about-role,
  .about-role+.about-role {
    padding: var(--space-3) 0;
    border-left: 0;
  }

  .about-role+.about-role {
    border-top: var(--hair);
  }

  .about-role .about-role-when {
    padding-top: var(--space-2);
  }

  .wrap-13-panel {
    min-height: 0;
    border-radius: 18px;
  }

  .wrap-13-stage {
    padding: 42px 20px 26px;
  }

  .wrap-13-opts,
  .wrap-13-opts.three,
  .wrap-13-fields {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 575px) {
  .nav-inner {
    min-height: 64px;
  }

  .mobile-panel {
    top: 64px;
    max-height: calc(100dvh - 64px);
  }

  .nav-cta {
    display: none;
  }

  /* use the menu on phones */
  .nav-brand .word {
    font-size: 1.0625rem;
  }

  .index-wrap-1 {
    padding-top: calc(64px + var(--space-5));
  }

  /* portfolio: facts stack, cover a touch smaller */
  .index-shell>.pf-wrap-1 {
    padding-top: 130px;
  }

  .pf-plate-card {
    padding: var(--space-4) var(--space-3);
  }

  .pf-plate-cover {
    width: min(64%, 220px);
  }

  .pf-wrap-1-actions .theme-btn {
    width: 100%;
  }

  .wrap-1-points li {
    align-items: flex-start;
    font-size: var(--fs-small);
  }

  .wrap-1-form {
    padding: var(--space-3) var(--space-2);
  }

  .wrap-5-media,
  .wrap-5-media[data-reveal] {
    min-height: 560px;
    border-radius: 14px;
  }

  .wrap-5-tag {
    top: 20px;
    right: 16px;
    font-size: 0.75rem;
  }

  .wrap-5-stats {
    padding: 0 20px 26px;
  }

  .wrap-5-stat,
  .wrap-5-stat+.wrap-5-stat {
    padding: 22px 12px 0 0;
  }

  .wrap-5-stat:nth-child(even) {
    padding-left: 12px;
  }

  .wrap-5-stat:nth-child(even)::before {
    left: 12px;
  }

  .wrap-5-stat dt {
    font-size: 0.8125rem;
  }


  .wrap-9-grid {
    gap: var(--space-5) var(--space-2);
  }

  .wrap-9-item:nth-child(even) {
    margin-top: var(--space-5);
    margin-bottom: calc(var(--space-5) * -1);
  }

  .wrap-9-cta {
    margin-top: calc(var(--space-5) * 2);
  }

  .wrap-9-shelf {
    border-radius: var(--radius-md);
  }

  .wrap-9-metric {
    position: static;
    margin: var(--space-2) 0 0;
    padding: 0;
    background: none;
    box-shadow: none;
    transform: none;
    font-size: var(--fs-label);
    align-items: flex-start;
  }

  .wrap-9-shelf {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    aspect-ratio: auto;
    padding: 14% 10% 12%;
  }

  .wrap-9-cap h3 {
    font-size: 0.9375rem;
  }

  .index-shell>.about-wrap-1 {
    padding-top: 150px;
  }

  .about-wrap-1-actions {
    flex-direction: column;
  }

  .about-row-frame {
    border-radius: 20px 72px 20px 72px;
  }

  .is-flipped .about-row-frame {
    border-radius: 72px 20px 72px 20px;
  }

  .about-row-cover {
    width: 30%;
  }

  .about-row-call {
    position: relative;
    margin-top: var(--space-2);
  }

  .is-flipped .about-row-media {
    padding: 0;
  }

  .about-wrap-3-star {
    width: 480px;
    height: 480px;
    top: -160px;
    right: -200px;
  }

  .about-stat {
    padding: 22px 16px;
  }

  .about-stat::before {
    left: 16px;
  }

  /* contact: blanks may take a whole line */
  .index-shell>.contact-wrap-2 {
    padding-top: 130px;
  }

  .contact-postmark {
    width: 84px;
  }

  .contact-letter-salute {
    padding-right: 72px;
  }

  .contact-blank.w-name,
  .contact-blank.w-email,
  .contact-blank.w-phone {
    width: min(100%, 14em);
  }

  .contact-letter-send {
    width: 100%;
  }

  /* phones: the form has to start inside the first screen, so the ruled points go */
  .index-shell>.svc-wrap-1 {
    padding-top: 150px;
  }

  .svc-wrap-1-actions {
    flex-direction: column;
  }

  .svc-pill-bar {
    gap: 6px;
    padding: 6px 6px 6px 16px;
  }

  .svc-pill-step input {
    height: 46px;
    padding: 0 6px;
    font-size: 1rem;
  }

  .svc-pill-next {
    min-width: 0;
    padding: 14px 18px;
  }

  .svc-panels {
    padding: 30px 22px;
  }

  .svc-panel-list {
    grid-template-columns: 1fr;
  }

  .svc-panel-actions .theme-btn,
  .svc-panel-chat {
    flex: 1 1 100%;
    justify-content: center;
  }

  .svc-mock {
    min-height: 300px;
  }

  .wrap-11-star {
    width: 560px;
    height: 560px;
    margin: -280px 0 0 -280px;
  }

  .wrap-11-btn {
    width: 100%;
    font-size: 1.0625rem;
    white-space: normal;
  }

  .wrap-11-foot {
    flex-direction: column;
    align-items: flex-start;
  }

  .wrap-14-label {
    letter-spacing: 0.14em;
  }

  .wrap-14-label .line {
    display: none;
  }

  .sticky-actions {
    right: 12px;
    bottom: 12px;
  }

  .sticky-actions a {
    width: 48px;
    height: 48px;
  }

  .modal-cover-in,
  .modal-page {
    padding-inline: 22px;
  }

  .footer-legal {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  .footer-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 400px) {
  .nav-brand .word {
    font-size: 1rem;
  }

  .wrap-9-grid {
    grid-template-columns: 1fr 1fr;
  }
}