/* Final responsive system: loaded last on every Orcia page. */
html,
body {
  max-width: 100%;
  overflow-x: clip;
}

img,
video,
svg {
  max-width: 100%;
}

@media (max-width: 1100px) {
  .shell {
    width: min(100% - 40px, 900px) !important;
  }

  .nav,
  .site-header .nav {
    gap: 20px !important;
  }

  .navlinks,
  .nav-links {
    gap: 18px !important;
  }

  .hero-grid,
  .recovery-hero .hero-grid,
  .recovery-platform-grid,
  .pricing-grid,
  .never-grid,
  .language-grid,
  .record-grid {
    grid-template-columns: 1fr !important;
    gap: 44px !important;
  }

  .hero-grid > :first-child,
  .recovery-hero .hero-grid > :first-child {
    max-width: 720px;
  }

  .product-stage,
  .recovery-stage,
  .partner-stage {
    width: 100%;
    max-width: 820px;
    margin-inline: auto;
  }
}

@media (max-width: 900px) {
  .nav > .button,
  .nav > .actions,
  .nav-cta {
    display: none !important;
  }

  .mobile-menu-toggle,
  .menu-button {
    flex: 0 0 auto;
  }
}

@media (max-width: 760px) {
  :root {
    --mobile-gutter: 18px;
  }

  .shell {
    width: calc(100% - (var(--mobile-gutter) * 2)) !important;
  }

  .nav,
  .site-header .nav {
    height: 64px !important;
  }

  .nav > .button,
  .nav-cta {
    display: none !important;
  }

  .brand {
    flex: 0 0 auto;
    font-size: 19px !important;
  }

  .brand img,
  .nav .brand img,
  .foot .brand img {
    width: 29px !important;
    height: 29px !important;
  }

  .hero,
  .intro,
  .team-hero,
  .legal-hero {
    padding: 48px 0 58px !important;
  }

  .hero-grid,
  .recovery-hero .hero-grid {
    gap: 34px !important;
  }

  .hero-grid > :first-child,
  .recovery-hero .hero-grid > :first-child,
  .intro > .shell,
  .team-hero > .shell {
    max-width: 620px;
    margin-inline: auto;
    text-align: center;
  }

  .hero h1,
  .intro h1,
  .team-hero h1,
  .legal-hero h1,
  .recovery-hero h1 {
    max-width: 16ch !important;
    margin: 17px auto 20px !important;
    font-size: clamp(37px, 10.8vw, 48px) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.055em !important;
    text-wrap: balance;
  }

  .hero p,
  .intro p,
  .team-hero p,
  .legal-hero p,
  .hero-lead {
    max-width: 35ch !important;
    margin-inline: auto !important;
    font-size: 16px !important;
    line-height: 1.55 !important;
    text-wrap: pretty;
  }

  .eyebrow,
  .kicker {
    font-size: 10px !important;
    line-height: 1.45 !important;
    letter-spacing: 0.13em !important;
  }

  .actions,
  .hero-actions {
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    margin-top: 25px !important;
  }

  .actions .button,
  .hero-actions .button,
  .cta .button {
    width: auto !important;
    min-width: 176px;
    max-width: 100%;
    min-height: 48px;
    padding-inline: 22px !important;
  }

  .actions .button.light,
  .hero-actions .outline {
    display: none !important;
  }

  .micro {
    justify-content: center;
    max-width: 34ch !important;
    margin-inline: auto !important;
    text-align: center;
  }

  .section,
  .journey,
  .focus,
  .pharmacy,
  .otc,
  .safety,
  .principles,
  .company-record {
    padding-block: 68px !important;
  }

  .head,
  .section-heading,
  .relationship-head,
  .engine-head {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    margin-bottom: 32px !important;
  }

  .head h2,
  .section-heading h2,
  .section h2,
  .cta h2,
  .company-record h2,
  .recovery-platform h2,
  .pricing-section h2,
  .language-section h2 {
    max-width: 17ch;
    font-size: clamp(32px, 9vw, 40px) !important;
    line-height: 1.06 !important;
    letter-spacing: -0.05em !important;
    text-wrap: balance;
  }

  .head p,
  .section-heading p,
  .section p,
  .cta p {
    max-width: 38ch;
    font-size: 15px !important;
    line-height: 1.6 !important;
  }

  .grid3,
  .value-grid,
  .focus-grid,
  .cards,
  .proof-grid,
  .recovery-steps,
  .relationship-grid,
  .vertical-outcomes,
  .team-grid,
  .outcome {
    grid-template-columns: 1fr !important;
  }

  .card,
  .value,
  .focus-card,
  .recovery-step,
  .outcome-card,
  .founder {
    min-height: 0 !important;
  }

  .product-stage,
  .partner-stage,
  .recovery-stage,
  .photo-stage {
    width: 100% !important;
    max-width: 620px !important;
    margin-inline: auto !important;
    border-radius: 24px !important;
  }

  .product-stage,
  .photo-stage {
    height: min(112vw, 500px) !important;
  }

  .product-stage > img,
  .photo-stage > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .float-card {
    min-width: 0 !important;
    max-width: calc(100% - 28px) !important;
    padding: 14px !important;
  }

  .recovery-stage {
    min-height: 470px !important;
    padding: 22px 16px !important;
  }

  .rx-line {
    left: 18px !important;
    right: 18px !important;
  }

  .rx-card {
    padding: 17px !important;
  }

  .rx-card strong {
    font-size: clamp(18px, 5.5vw, 23px) !important;
  }

  .recovery-step {
    padding: 27px 0 !important;
    border-right: 0 !important;
    border-bottom: 1px solid #dfe1e6 !important;
  }

  .recovery-step h3 {
    margin-top: 28px !important;
  }

  .dashboard-main strong {
    font-size: clamp(54px, 18vw, 72px) !important;
  }

  .metrics {
    grid-template-columns: 1fr 1fr !important;
  }

  .metric:nth-child(3) {
    display: none !important;
  }

  .demo {
    width: calc(100% - 24px) !important;
    margin: 0 auto 68px !important;
    grid-template-columns: 1fr !important;
    border-radius: 24px !important;
    overflow: hidden;
  }

  .story {
    padding: 24px !important;
  }

  .story-copy {
    margin: 26px 0 !important;
  }

  .story-copy h2 {
    font-size: 30px !important;
  }

  .why {
    display: none !important;
  }

  .stage {
    min-height: 580px !important;
    height: auto !important;
    padding: 12px !important;
  }

  .device {
    width: 100% !important;
    height: 550px !important;
    border-radius: 26px !important;
  }

  .screen {
    padding: 20px !important;
  }

  .screen h3 {
    font-size: 23px !important;
  }

  .device .body-map {
    right: 4px !important;
    bottom: 4px !important;
    width: 108px !important;
    height: 245px !important;
    opacity: 0.14 !important;
  }

  .team-grid {
    gap: 14px !important;
  }

  .founder {
    grid-template-columns: 110px 1fr !important;
    gap: 20px !important;
    padding: 20px !important;
  }

  .portrait {
    width: 110px !important;
    height: 138px !important;
  }

  .record-grid {
    gap: 30px !important;
  }

  .cta {
    padding-block: 66px !important;
    text-align: center;
  }

  .cta .shell {
    justify-items: center;
  }

  .legal-content {
    padding-bottom: 72px !important;
  }

  .contact-card {
    width: 100%;
    padding: 20px !important;
    border-radius: 20px !important;
  }

  .footer,
  .site-footer,
  footer {
    padding-top: 50px !important;
  }

  .footer-grid,
  .site-footer-grid,
  .foot {
    grid-template-columns: 1fr 1fr !important;
    gap: 30px 22px !important;
  }

  .footer-brand,
  .site-footer-brand,
  .foot > :first-child {
    grid-column: 1 / -1;
  }

  .footer-bottom,
  .site-footer-bottom {
    display: block !important;
    line-height: 1.8 !important;
  }
}

@media (max-width: 420px) {
  :root {
    --mobile-gutter: 12px;
  }

  .hero,
  .intro,
  .team-hero,
  .legal-hero {
    padding-top: 40px !important;
  }

  .hero h1,
  .intro h1,
  .team-hero h1,
  .legal-hero h1,
  .recovery-hero h1 {
    font-size: clamp(34px, 10.5vw, 42px) !important;
  }

  .product-stage,
  .photo-stage {
    height: min(118vw, 455px) !important;
  }

  .recovery-stage {
    min-height: 440px !important;
  }

  .founder {
    grid-template-columns: 1fr !important;
  }

  .portrait {
    width: 100% !important;
    height: 250px !important;
  }

  .footer-grid,
  .site-footer-grid,
  .foot {
    grid-template-columns: 1fr !important;
  }

  .footer-brand,
  .site-footer-brand,
  .foot > :first-child {
    grid-column: auto;
  }

  .wl-dialog {
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
  }
}

/* Mobile editorial composition: purposeful rhythm, visible motion, no empty cards. */
@media (max-width: 600px) {
  .motion-ribbon {
    display: none !important;
  }

  .hero,
  .intro,
  .team-hero,
  .legal-hero {
    padding-bottom: 46px !important;
  }

  main > .section,
  main > .journey-band,
  main > .human-section,
  main > .medication-section,
  main > .follow-section,
  main > .audience-section,
  main > .evidence-strip {
    padding-block: 56px !important;
  }

  .head,
  .section-heading,
  .care-route-heading,
  .human-heading {
    margin-bottom: 26px !important;
  }

  .hero-grid > :first-child,
  .recovery-hero .hero-grid > :first-child {
    text-align: left;
  }

  .hero-grid > :first-child h1,
  .recovery-hero .hero-grid > :first-child h1,
  .hero-grid > :first-child p,
  .recovery-hero .hero-grid > :first-child p {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .hero-grid > :first-child .actions,
  .recovery-hero .hero-grid > :first-child .actions,
  .hero-grid > :first-child .micro,
  .recovery-hero .hero-grid > :first-child .micro {
    justify-content: flex-start !important;
    margin-left: 0 !important;
    text-align: left;
  }

  .site-header + main .hero-copy,
  .site-header + main .hero-copy p {
    text-align: center;
    margin-inline: auto !important;
  }

  .site-header + main .hero-actions {
    justify-content: center !important;
  }

  .route-experience {
    gap: 16px !important;
    padding: 16px !important;
  }

  .route-input {
    padding: 19px !important;
  }

  .route-input blockquote {
    margin: 28px 0 !important;
    font-size: 23px !important;
  }

  .route-mode-panels,
  .route-mode-panel {
    min-height: 180px !important;
  }

  .route-mode-panels {
    margin: 16px 0 14px !important;
  }

  .route-body-panel img {
    bottom: -101px !important;
    height: 276px !important;
  }

  .route-modes {
    justify-content: flex-start;
  }

  .route-modes button {
    min-height: 38px;
    padding-inline: 13px;
  }

  .route-input-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .route-continue {
    min-height: 44px;
    justify-content: center;
  }

  .route-core {
    grid-template-columns: 54px 1fr;
    justify-content: center;
    gap: 13px;
    width: min(100%, 230px);
    margin-inline: auto;
    padding: 4px 0 !important;
    text-align: left;
  }

  .route-core img {
    width: 54px !important;
    height: 54px !important;
  }

  .route-core small {
    margin: 0 !important;
    line-height: 1.45;
  }

  .route-pulse,
  .route-pulse:before,
  .route-pulse:after {
    width: 76px !important;
    height: 76px !important;
  }

  .route-outcomes {
    padding-top: 18px !important;
  }

  .route-outcome {
    padding: 17px 18px !important;
  }

  .route-outcome h3 {
    margin: 6px 0 4px !important;
    font-size: 19px !important;
  }

  .route-outcome p {
    display: block !important;
    margin: 0 !important;
    font-size: 13px !important;
  }

  .product-proof {
    margin-block: 0 !important;
  }

  .queue-window {
    border-radius: 20px !important;
  }

  .queue-summary {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 20px !important;
  }

  .queue-row {
    grid-template-columns: 1fr auto !important;
    gap: 8px 12px !important;
    padding: 16px 18px !important;
  }

  .queue-row > :nth-child(2),
  .queue-row > :nth-child(3),
  .queue-head {
    display: none !important;
  }

  .journey-notes {
    border-top: 0 !important;
  }

  .journey-note {
    position: relative;
    display: grid !important;
    grid-template-columns: 42px 1fr;
    column-gap: 16px;
    padding: 22px 0 !important;
    border-top: 1px solid #e2e3e7 !important;
  }

  .journey-note .journey-icon {
    grid-column: 1;
    grid-row: 1 / 4;
    margin: 0 !important;
    align-self: start;
  }

  .journey-note small,
  .journey-note h3,
  .journey-note p {
    grid-column: 2;
    max-width: none;
  }

  .journey-note small {
    margin: 1px 0 9px;
  }

  .journey-note h3 {
    margin: 0 0 7px;
  }

  .journey-note p,
  .card p,
  .value p,
  .focus-card p,
  .otc-step p,
  .proof-item span,
  .float-card span {
    display: block !important;
  }

  .journey-note:not(:last-child):after {
    content: "";
    position: absolute;
    left: 20px;
    top: 56px;
    bottom: -10px;
    width: 1px;
    background: linear-gradient(#7650ed55, #27bccd22);
  }

  .grid3,
  .value-grid,
  .focus-grid,
  .cards,
  .proof-grid {
    gap: 0 !important;
  }

  .grid3 .card,
  .value,
  .focus-card,
  .proof-item {
    padding: 24px 0 !important;
    border: 0 !important;
    border-top: 1px solid #e2e4e9 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .grid3 .card h3,
  .value h3,
  .focus-card h3 {
    margin-top: 26px !important;
    font-size: 21px !important;
  }

  .card .visual,
  .focus-visual {
    height: 180px !important;
    margin-bottom: 18px !important;
    border-radius: 18px !important;
  }

  .recovery-step {
    position: relative;
    padding: 24px 0 24px 20px !important;
  }

  .recovery-step:before {
    content: "";
    position: absolute;
    left: 0;
    top: 27px;
    width: 2px;
    height: 34px;
    border-radius: 2px;
    background: linear-gradient(#7650ed, #27bccd);
  }

  .recovery-step h3 {
    margin: 24px 0 9px !important;
  }

  .recovery-stage {
    min-height: 410px !important;
  }

  .rx-connector {
    height: 58px !important;
  }

  .rx-card.rejected,
  .rx-card.resolved {
    margin-inline: 0 !important;
  }

  .photo-stage,
  .product-stage {
    height: auto !important;
    min-height: 360px !important;
    aspect-ratio: 4 / 5;
  }

  .human-section .care-mosaic {
    height: 360px !important;
  }

  .care-shot,
  .care-shot-main {
    min-width: 100% !important;
    height: 100% !important;
  }

  .stage {
    min-height: 0 !important;
    padding: 10px !important;
  }

  .device {
    height: 520px !important;
  }

  .chapters {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }

  .chapters::-webkit-scrollbar {
    display: none;
  }

  .chapter {
    min-width: 76px;
  }

  .modes {
    display: flex !important;
  }

  .signal:nth-child(n + 3),
  .campaign:nth-child(n + 3) {
    display: grid !important;
  }

  .motion-image {
    clip-path: inset(0 0 7% 0 round 20px) !important;
  }

  .motion-image.is-seen {
    clip-path: inset(0 0 0 0 round 20px) !important;
  }

  .motion-sequence.is-seen > * {
    transition-duration: 0.58s !important;
    transition-delay: calc(var(--motion-i, 0) * 45ms) !important;
  }

  .button,
  .nav-cta,
  button,
  [role="button"] {
    cursor: pointer;
    touch-action: manipulation;
  }

  .button:active,
  .nav-cta:active,
  button:active,
  [role="button"]:active {
    transform: translateY(1px) scale(0.99) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}