/* Mobile is a composed reading sequence, with full-size source and result states.
   Header, hero and campaign builder have their own responsive treatments. */
@media (max-width: 999px) {
  .possibilities, .approach, .beyond, .faq, .contact { min-width: 0; }
  .intro-head > p { font-size: 18px; line-height: 1.65; }
  .service:not(.marketing-section) .service-copy > p,
  .beyond-list p, .approach-grid p, .faq details p,
  .contact-copy > p { font-size: 17px; line-height: 1.65; }
  .service:not(.marketing-section) .steps li { font-size: 13px; line-height: 1.5; }
  .service:not(.marketing-section) .steps span { font-size: 11px; }
  .service:not(.marketing-section) .demo-caption { font-size: 10px; line-height: 1.5; }
  .service:not(.marketing-section) .demo-wrap { min-width: 0; }
  .service:not(.marketing-section) .window-bar { height: 40px; font-size: 10px; padding-inline: 16px; }
  .service:not(.marketing-section) .window-dots { font-size: 8px; }
  .service:not(.marketing-section) .badge { font-size: 11px; line-height: 1.4; white-space: normal; }
  .service:not(.marketing-section) .text-link { font-size: 14px; }

  /* The sales request and the documents have separate physical space. */
  .sales-demo { height: auto; display: grid; gap: 20px; }
  .sales-demo .app-window { position: relative; inset: auto; }
  .sales-demo .crm { height: auto; min-height: 355px; grid-template-columns: 105px minmax(0, 1fr); }
  .sales-demo .crm aside { font-size: 12px; gap: 19px; }
  .sales-demo .crm aside b { font-size: 12px; }
  .sales-demo .crm-main { padding: 24px; }
  .sales-demo .crm-title h3 { font-size: 30px; line-height: 1.15; }
  .sales-demo .crm-title small { font-size: 10px; }
  .sales-demo .crm-title .badge { font-size: 11px; }
  .sales-demo .crm-facts { padding-block: 21px; flex-wrap: wrap; row-gap: 16px; }
  .sales-demo .crm-facts small { font-size: 10px; }
  .sales-demo .crm-facts b { font-size: 13px; line-height: 1.5; }
  .sales-demo .activity { font-size: 13px; }
  .sales-demo .activity p { font-size: 12px; line-height: 1.5; }
  .sales-demo .command { margin-top: 22px; padding: 14px; gap: 12px; }
  .sales-demo .command p { font-size: 13px; line-height: 1.6; }
  .sales-demo .command-key { font-size: 10px; }
  .sales-demo .enter { flex: none; }
  .sales-demo .prepared { display: none; }
  .sales-results { position: relative; inset: auto; grid-template-columns: 1fr 1fr; align-items: start; gap: 16px; }
  .sales-results .mini-doc { padding: 22px; transform: none; min-width: 0; }
  .sales-results .mini-doc small { font-size: 11px; }
  .sales-results .mini-doc h3 { font-size: 25px; line-height: 1.12; margin: 18px 0; }
  .sales-results .mini-doc > img { height: 110px; border-radius: 3px; }
  .sales-results .mini-doc > div { font-size: 12px; line-height: 1.5; gap: 12px; }
  .sales-results .invoice { margin: 0; }
  .sales-results .invoice .invoice-row { padding-block: 10px; font-size: 12px; }
  .sales-results .invoice .badge { font-size: 11px; margin-top: 18px; }

  /* Source notes and the final book share a stable canvas during the morph.
     Both stay in the DOM; JS crossfades them in this same grid cell. */
  .itinerary-demo { height: auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 24px; }
  .raw-note, .itinerary-book { position: relative; inset: auto; grid-area: 1 / 1; align-self: start; min-width: 0; }
  .raw-note { display: block; z-index: 1; transform: none; }
  .raw-note h3 { font-size: 26px; margin: 24px; }
  .raw-note > p { font-size: 13px; line-height: 2; margin: 0 24px; overflow-wrap: break-word; }
  .file-tag { font-size: 12px; margin: 24px; }
  .itinerary-book { z-index: 2; transform: none; min-height: 420px; }
  .book-cover > small { font-size: 11px; top: 22px; left: 22px; }
  .book-cover > div { left: 22px; right: 20px; bottom: 24px; }
  .book-cover div > span { font-size: 10px; }
  .book-cover h3 { font-size: 36px; line-height: 1.08; margin-block: 16px; }
  .book-cover p { font-size: 13px; line-height: 1.5; }
  .book-page { padding: 25px 23px; }
  .book-page > small { font-size: 10px; }
  .book-page > h3 { font-size: 30px; margin: 20px 0; }
  .day { font-size: 13px; line-height: 1.4; gap: 12px; padding-block: 14px; }
  .day > b { font-size: 11px; padding-top: 2px; }
  .day p { font-size: 12px; line-height: 1.5; }
  .book-footer { font-size: 10px; line-height: 1.5; gap: 14px; margin-top: 15px; }
  .format-chip { position: relative; inset: auto; transform: none; grid-row: 2; justify-self: center; max-width: 100%; white-space: normal; font-size: 12px; line-height: 1.5; padding: 11px 14px; gap: 12px; }
  .format-colours { flex: none; }

  /* The travel page hands its information to a readable CRM record below. */
  .website-demo { height: auto; display: grid; gap: 20px; }
  .travel-browser { position: relative; inset: auto; }
  .travel-home { height: auto; min-height: 390px; }
  .travel-home > nav { height: 62px; padding: 20px; font-size: 12px; }
  .travel-home nav b { font-size: 16px; }
  .travel-home nav span { font-size: 11px; }
  .travel-copy { padding: 27px 24px 35px; width: 59%; }
  .travel-copy small { font-size: 10px; }
  .travel-copy h3 { font-size: 39px; line-height: 1.05; margin-block: 20px; }
  .travel-copy p { font-size: 13px; line-height: 1.6; }
  .travel-cta { font-size: 11px; padding: 13px 15px; margin-top: 24px; }
  .enquiry-card { position: relative; inset: auto; width: auto; transform: none; padding: 24px; }
  .enquiry-card h3 { font-size: 29px; line-height: 1.12; margin: 19px 0; }
  .enquiry-card > div { font-size: 13px; line-height: 1.5; gap: 16px; padding-block: 12px; }
  .enquiry-card > div b { text-align: right; }
  .enquiry-card > p { font-size: 12px; line-height: 1.5; }

  .signal-top > p { font-size: 17px; line-height: 1.65; }
  .signal-bottom { font-size: 11px; line-height: 1.6; }
  .contact-note { font-size: 11px; }
  .form-top { font-size: 11px; }
  .form-step label { font-size: 14px; }
  .preview-disclosure, .prototype-note, .copy-status { font-size: 13px; line-height: 1.6; }
  .footer > p { font-size: 11px; line-height: 1.6; }
}

@media (max-width: 640px) {
  .service:not(.marketing-section) .service-copy h2 { max-width: 12ch; font-size: clamp(34px, 9vw, 45px); line-height: 1.08; letter-spacing: -.045em; }
  .service:not(.marketing-section) .service-copy h2 br { display: initial; }
  .service:not(.marketing-section) .service-copy > p { margin: 20px 0; max-width: 35ch; }
  .service:not(.marketing-section) .service-layout { gap: 32px; }
  .sales-demo .crm { display: block; min-height: 0; }
  .sales-demo .crm aside { display: none; }
  .sales-demo .crm-main { padding: 20px; }
  .sales-demo .crm-title { flex-wrap: wrap; row-gap: 14px; }
  .sales-demo .crm-title h3 { font-size: 28px; }
  .sales-demo .crm-title .badge { font-size: 11px; }
  .sales-demo .crm-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
  .sales-demo .crm-facts > div:last-child { grid-column: 1 / -1; }
  .sales-demo .command { align-items: flex-start; }
  .sales-demo .command-key { margin-top: 3px; }
  .sales-demo .enter { display: none; }
  .sales-results { grid-template-columns: 1fr; gap: 14px; }
  .sales-results .mini-doc { padding: 20px; }
  .sales-results .mini-doc:not(.invoice) { display: grid; grid-template-columns: minmax(0, 1fr) 100px; column-gap: 18px; row-gap: 12px; align-items: start; }
  .sales-results .mini-doc:not(.invoice) > small { grid-column: 1; }
  .sales-results .mini-doc:not(.invoice) h3 { grid-column: 1; margin: 0; font-size: 24px; }
  .sales-results .mini-doc:not(.invoice) > img { grid-column: 2; grid-row: 1 / 3; width: 100%; height: 133px; }
  .sales-results .mini-doc:not(.invoice) > div { grid-column: 1 / -1; margin-top: 0; }
  .sales-results .invoice h3 { margin: 14px 0; font-size: 24px; }
  .sales-results .invoice h3 br { display: initial; }

  .itinerary-demo { padding: 16px; gap: 16px; }
  .raw-note h3 { font-size: 24px; margin: 22px 18px; }
  .raw-note > p { margin-inline: 18px; font-size: 12px; line-height: 2; }
  .file-tag { margin: 22px 18px; font-size: 11px; }
  .itinerary-book { display: grid; grid-template-columns: 1fr; min-height: 0; }
  .book-cover { min-height: 245px; }
  .book-cover > small { font-size: 10px; left: 20px; top: 19px; }
  .book-cover > div { left: 20px; right: 20px; bottom: 22px; }
  .book-cover div > span { font-size: 10px; }
  .book-cover h3 { font-size: 37px; margin: 12px 0; }
  .book-cover p { font-size: 12px; }
  .book-page { padding: 22px 20px; background: linear-gradient(#17252208, transparent 20px); }
  .book-page > small { font-size: 10px; }
  .book-page > h3 { font-size: 29px; margin: 15px 0 18px; }
  .book-page > h3 br { display: initial; }
  .day { font-size: 13px; padding-block: 13px; }
  .day p { font-size: 12px; }
  .book-page .day:nth-of-type(n + 3) { display: none; }
  .book-footer { font-size: 10px; margin-top: 13px; }
  .format-chip { width: 100%; font-size: 11px; padding: 10px 12px; }

  .travel-home { display: flex; flex-direction: column; min-height: 0; }
  .travel-home > nav { height: auto; padding: 18px 20px; gap: 12px; }
  .travel-home nav b { font-size: 16px; }
  .travel-home nav span { font-size: 10px; max-width: none; padding: 0; }
  .travel-copy { padding: 23px 20px 28px; width: 100%; }
  .travel-copy small { font-size: 10px; }
  .travel-copy h3 { font-size: 40px; margin: 18px 0; }
  .travel-copy p { font-size: 13px; }
  .travel-cta { font-size: 11px; margin-top: 21px; }
  .travel-home > img { position: relative; inset: auto; width: 100%; height: 155px; object-position: center 54%; }
  .enquiry-card { padding: 21px; }
  .enquiry-card h3 { font-size: 28px; }
  .enquiry-card > div { font-size: 12px; gap: 12px; }
  .enquiry-card > p { font-size: 12px; }

  .service-index a { font-size: 14px; line-height: 1.45; min-height: 65px; }
  .service-index span { font-size: 10px; }
  .section-rail { font-size: 11px; }
  .beyond-list article { gap: 15px; }
  .beyond-list h3 { font-size: 26px; line-height: 1.15; }
  .signal-top > p { font-size: 16px; }
  .signal-bottom { flex-wrap: wrap; gap: 12px; }
  .signal-bottom > span:first-child { max-width: 100%; }
  .signal-state { max-width: none; text-align: left; }
  .faq summary { font-size: 16px; line-height: 1.5; gap: 16px; }
  .faq summary span { flex: none; }
  .faq details p { font-size: 16px; }
  .contact-form-wrap { padding: 24px 21px; }
  .form-step legend, .form-review h3 { font-size: 26px; line-height: 1.2; }
  .form-row { gap: 15px; align-items: center; }
  .form-row .button { min-width: 0; gap: 12px; }
  .form-step .button { font-size: 14px; }
  .form-review p { overflow-wrap: anywhere; }
  .footer > div { font-size: 13px; }
}

@media (max-width: 340px) {
  .service:not(.marketing-section) .window-bar { padding-inline: 12px; font-size: 10px; }
  .sales-demo .crm-main { padding: 17px; }
  .sales-demo .crm-title h3 { font-size: 26px; }
  .sales-demo .crm-title .badge { font-size: 10px; }
  .sales-demo .crm-facts b { font-size: 12px; }
  .sales-demo .command { padding: 12px; gap: 9px; }
  .sales-demo .command p { font-size: 12px; }
  .sales-demo .command-key { font-size: 10px; padding: 5px; }
  .sales-results .mini-doc { padding: 17px; }
  .sales-results .mini-doc:not(.invoice) { grid-template-columns: minmax(0, 1fr) 76px; column-gap: 12px; }
  .sales-results .mini-doc:not(.invoice) h3 { font-size: 21px; }
  .sales-results .mini-doc:not(.invoice) > img { height: 127px; }
  .sales-results .mini-doc small { font-size: 10px; }
  .sales-results .mini-doc > div, .sales-results .invoice .invoice-row { font-size: 11px; }
  .sales-results .invoice .badge { font-size: 11px; }
  .itinerary-demo { padding: 12px; }
  .raw-note .window-bar { gap: 8px; font-size: 10px; }
  .raw-note .window-bar span:last-child { display: none; }
  .book-cover { min-height: 240px; }
  .book-cover h3 { font-size: 32px; }
  .book-cover > small, .book-cover > div { left: 16px; }
  .book-page { padding: 20px 16px; }
  .book-page > h3 { font-size: 27px; }
  .day { gap: 9px; font-size: 12px; }
  .day p { font-size: 11px; }
  .format-chip { gap: 10px; font-size: 11px; }
  .book-footer { font-size: 10px; }
  .travel-home > nav { padding: 16px; }
  .travel-home nav span { display: none; }
  .travel-copy { padding: 20px 16px 25px; }
  .travel-copy h3 { font-size: 35px; }
  .enquiry-card { padding: 18px; }
  .enquiry-card h3 { font-size: 26px; }
  .enquiry-card > div { font-size: 11px; }
  .service-index a { font-size: 12px; gap: 7px; }
  .contact-form-wrap { padding: 22px 17px; }
  .form-top { font-size: 10px; }
  .form-row { flex-wrap: wrap; gap: 0; }
  .form-row .button { margin-top: 10px; }
}

@media (prefers-reduced-motion: reduce) and (max-width: 999px) {
  .itinerary-demo .raw-note { visibility: hidden; }
  .itinerary-book, .sales-results, .enquiry-card { transform: none !important; }
}