/* Mobile refinements only: existing copy, actions, colours and desktop stay intact. */
:root { --contact-viewport-height: 100dvh; --contact-viewport-top: 0px; }
html:has(.contact-dialog[open]) { overflow: hidden; }
.contact-dialog { scroll-padding-block: 64px 80px; }
.contact-dialog .dialog-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  column-gap: 12px;
  align-items: start;
  margin-bottom: 12px;
}
.contact-dialog .dialog-header h2 { grid-column: 1; grid-row: 1; margin: 0; }
.contact-dialog .dialog-header .close { grid-column: 2; grid-row: 1; position: static; float: none; margin: 0; }
.phone-country-option { min-height: 44px; }

@media (max-width: 900px) {
  /* Keep the dropdown anchored while the header scrolls with the page. */
  body .site-header { position: relative; top: auto; }
  html:has(.site-header) { scroll-padding-top: 16px; }
  body .site-header, body.case-page .case-header {
    padding-top: max(12px, env(safe-area-inset-top));
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
  }
  body .site-header nav { max-height: calc(var(--contact-viewport-height) - var(--mobile-header-height, 76px) - 24px); overflow-y: auto; overscroll-behavior: contain; }
  #landing-copy-wireframes > section[id] { scroll-margin-top: 0; }
  .site-footer { padding-bottom: max(24px, env(safe-area-inset-bottom)); }
  .phone-field .phone-national.field { scroll-margin-block: 72px; }
  .phone-country-menu .phone-country-search { height: 44px; min-height: 44px; }
  .reading-controls button { touch-action: manipulation; }
  .stages, .case-track { touch-action: auto; overscroll-behavior-inline: contain; }
  .study-page .case-navigation nav { overscroll-behavior-inline: contain; }
}

/* A readable two-column composition at intermediate widths. */
@media (min-width: 701px) and (max-width: 1100px) {
  #architecture .architecture-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  #architecture .architecture-node { padding: 24px; }
  #architecture .architecture-node:not(:last-child)::after { display: none; }
  #architecture .node-lead { min-height: 0; font-size: 15px; }
  #architecture .node-details dt, #architecture .node-details dd { font-size: 14px; }
  #architecture .node-footer { font-size: 13px; }
  #architecture .crm-examples img { width: auto; max-width: 100px; }
}
@media (min-width: 701px) and (max-width: 900px) {
  body .hero.hero--conveyor { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .hero--conveyor .hero-copy { padding: 32px 0 32px 28px; }
  body .hero--conveyor h1 { font-size: clamp(30px, 4vw, 36px); }
  .hero-conveyor-visual { display: flex; align-items: center; aspect-ratio: auto; }
  .hero-conveyor-visual img { height: auto; object-fit: contain; }
  body .hero--conveyor .hero-cta { white-space: normal; text-align: center; }
}

@media (max-width: 700px) {
  #architecture .architecture-intro > h2 { font-size: clamp(28px, 7.5vw, 34px); }
  #architecture .architecture-flow { gap: 24px; }
  #architecture .architecture-node { padding: 22px 20px; column-gap: 10px; }
  #architecture .node-lead, #architecture .channel-list, #architecture .node-details,
  #architecture .crm-examples, #architecture .node-footer { grid-column: 1 / -1; }
  #architecture .node-lead { margin: 4px 0 20px; font-size: 15px; line-height: 1.6; }
  #architecture .node-details dt, #architecture .node-details dd { font-size: 15px; line-height: 1.6; }
  #architecture .node-details { gap: 14px; margin-bottom: 20px; }
  #architecture .channel-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; }
  #architecture .channel-list li { font-size: 14px; }
  #architecture .node-footer { font-size: 13px; line-height: 1.6; }
}

@media (max-width: 650px) {
  body .site-header .header-cta { font-size: 12px; line-height: 1.35; white-space: normal; text-align: center; }
  body.case-page .case-header > .cta { font-size: 12px; line-height: 1.35; white-space: normal; max-width: 144px; padding-inline: 12px; }
  body .hero--conveyor .hero-copy > p:not(.hero-note) { margin-top: 20px; }
  body .hero--conveyor .hero-cta { margin-top: 22px; white-space: normal; }
  body .hero--conveyor .hero-note.cta-guidance { margin-top: 14px; }
  .hero-conveyor-visual { height: clamp(248px, 84vw, 360px); aspect-ratio: auto; }
  .hero-conveyor-visual img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: contain; }
  #landing-copy-wireframes > .results-proof { padding-block: 32px 36px; }
  .proof-metric { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); column-gap: 16px; padding-block: 20px; }
  .proof-value { font-size: clamp(40px, 12vw, 52px); }
  .proof-context { margin-bottom: 12px; }
  #solution .stages { scroll-snap-type: x proximity; margin-bottom: 0; }
  body #solution .stages .stage { min-width: 0; flex-basis: calc(100% - 18px); }
  #solution .reading-controls, #cases .reading-controls { margin: 12px 0 20px; }
  body #solution .closing { margin-top: 16px; padding-top: 0; gap: 14px; }
  body #solution .stages .stage .stage-description { font-size: 16px; line-height: 1.55; margin-bottom: 16px; }
  body #solution .stages .stage .stage-outcome { font-size: 15px; line-height: 1.55; padding-top: 14px; }
  .tools-band { padding-block: 36px; }
  .tools-band .section-inner > p { font-size: 15px; line-height: 1.6; }
  #cases .case-track { gap: 14px; scroll-snap-type: x proximity; }
  body #cases .study-card { flex-basis: calc(100% - 16px); padding: 20px; }
  body #cases .study-card .case-photo { width: calc(100% + 40px); margin: -20px -20px 18px; height: 164px; }
  body #cases .study-card h3 { font-size: 23px; line-height: 1.3; margin-bottom: 18px; }
  #cases .study-card-outcome { padding: 16px; margin-bottom: 16px; }
  body #cases .study-card .case-metric { font-size: 14px; }
  body #cases .study-card .study-card-description { font-size: 15px; line-height: 1.6; margin-bottom: 12px; }
  body #cases .study-card .study-card-secondary { font-size: 14px; margin-bottom: 18px; }
  #cases .study-card-bottom { padding-top: 16px; gap: 12px; }
  body #implementation .process-grid .content-card { padding-bottom: 22px; }
  #consultation .content-card { padding: 20px; }
  #consultation .cta-guidance { margin-bottom: 20px; }
  .thanks-next { padding: 24px 20px; }
  .thanks-steps p { font-size: 15px; line-height: 1.6; }
  .thanks-footer { padding-bottom: max(24px, env(safe-area-inset-bottom)); }
  .thanks-header { padding-top: max(16px, env(safe-area-inset-top)); }
}

/* Dialogs remain scrollable, with the action reachable on short screens. */
@media (max-width: 900px), (max-height: 820px) {
  .contact-dialog {
    --dialog-top-gap: max(12px, env(safe-area-inset-top));
    --dialog-bottom-gap: max(12px, env(safe-area-inset-bottom));
    width: min(540px, calc(100% - 24px));
    max-height: calc(var(--contact-viewport-height, 100dvh) - var(--dialog-top-gap) - var(--dialog-bottom-gap));
    top: calc(var(--contact-viewport-top, 0px) + var(--dialog-top-gap));
    bottom: auto;
    margin-block: 0;
    padding: 20px;
    scroll-padding-bottom: 84px;
    -webkit-overflow-scrolling: touch;
  }
  .contact-dialog .dialog-header { position: sticky; top: 0; z-index: 4; background: #fff; padding-bottom: 12px; margin-bottom: 0; }
  .contact-dialog h2 { font-size: 24px; line-height: 1.2; padding-right: 0; margin-right: 48px; }
  .contact-dialog #dialog-description { margin-bottom: 14px; font-size: 15px; line-height: 1.5; }
  .contact-dialog .channel-link { min-height: 46px; padding-block: 9px; }
  .contact-dialog .contact-divider { margin-top: 14px; }
  .contact-dialog .field-label { margin-top: 10px; }
  .contact-dialog .field { height: 48px; min-height: 48px; margin-top: 6px; padding: 12px; font-size: 16px; }
  .contact-dialog .phone-field { margin-top: 6px; }
  .contact-dialog .phone-field .phone-national.field { height: 48px; margin: 0; }
  .contact-dialog .phone-country-trigger { min-height: 48px; }
  body .contact-dialog .cta-guidance { margin-top: 14px; padding-left: 12px; font-size: 14px; line-height: 1.5; }
  .contact-dialog .cta-guidance strong { margin-bottom: 3px; font-size: 15px; line-height: 1.5; }
  #dialog-form .form-consent { margin-top: 16px; padding-top: 14px; }
  #dialog-form .consent-choice { line-height: 1.55; }
  #dialog-form .consent-ad-note { margin-top: 6px; }
  #dialog-form .dialog-submit {
    position: sticky;
    bottom: 0;
    z-index: 3;
    margin-top: 16px;
    padding-top: 12px;
    background: #fff;
  }
  #dialog-form .dialog-submit > .cta {
    position: static;
    min-height: 50px;
    margin: 0;
    box-shadow: none;
    white-space: normal;
    text-align: center;
  }
  .contact-dialog .feedback:empty { display: none; }
}
@media (max-width: 360px) {
  body .site-header .header-cta { max-width: 108px; font-size: 12px; }
  .proof-metric { grid-template-columns: 106px minmax(0, 1fr); column-gap: 12px; }
  .proof-value { font-size: 38px; }
  .site-header .brand-mark { width: 30px; }
  .contact-dialog { padding: 18px; }
  .contact-dialog h2 { font-size: 23px; }
  .phone-country-trigger { min-width: 88px; padding-inline: 9px; }
}
@media (max-height: 500px) and (max-width: 1000px) {
  body .site-header { min-height: 60px; padding-block: 8px; }
  .study-page .case-navigation { position: static; }
  .contact-dialog { top: calc(var(--contact-viewport-top, 0px) + 8px); max-height: calc(var(--contact-viewport-height, 100dvh) - 16px); }
}

/* Keep the swipe cards readable while fitting image, explanation and result. */
@media (max-width: 650px) {
  body #solution .stages .stage { padding: 14px 14px 18px; }
  body #solution .stage-visual { width: min(100%, 236px); align-self: center; }
  body #solution .stages .stage .number { margin-top: 10px; }
  body #solution .stages .stage h2 { margin: 6px 0 8px; padding-right: 0; font-size: 18px; line-height: 1.35; }
  body #solution .stages .stage .stage-description { margin: 0 0 12px; padding-right: 0; font-size: 15px; line-height: 1.5; }
  body #solution .stages .stage .stage-outcome { padding: 12px 0 0; font-size: 15px; line-height: 1.5; }
  #solution .reading-controls { margin: 10px 0 14px; }
  body #solution .closing { margin-top: 12px; }
}