/* Phone/tablet composition: the same paper, pencil lettering and quiet player,
   in a reading flow. Desktop positioning remains in its existing stylesheets. */
@media (max-width: 920px) {
  :root { --header-h: 126px; }
  body { background: #e5e4dd; }
  .small-screen-notice { display: none; }
  .site-shell { display: block; min-height: 100svh; padding-top: 0; }
  .site-shell::after { display: none; }
  .site-shell::before {
    position: absolute; top: var(--header-h);
    z-index: 0;
    background: rgba(239, 237, 229, .86);
    transition: background-color var(--fade-in) ease;
  }
  .site-background { position: absolute; top: var(--header-h); background-position: center !important; }
  .site-shell:has(.section-home)::before { background: rgba(239, 237, 229, .40); }
  .site-header {
    position: relative;
    height: auto;
    min-height: var(--header-h);
    grid-template-columns: 44px minmax(0, 1fr);
    grid-template-rows: 76px 50px;
    gap: 0 16px;
    align-items: center;
    padding: env(safe-area-inset-top, 0px) 20px 0;
    background: #242f46 url('/static/9fe62d3be2d73019/assets/images/rjg-header-cool-paper-v2.webp') center / cover;
    border: 0;
    color: #e7e5df;
  }
  .site-header .identity {
    grid-column: 1; grid-row: 1;
    width: 44px; height: 72px; min-height: 44px; padding: 0;
  }
  .identity-mark { position: absolute; top: 3px; left: -12px; width: 54px; height: 81px; }
  .identity-mark::before, .identity-mark::after { content: none; }
  .site-header .identity-cat {
    inset: 0; width: 100%; height: 100%; opacity: 1;
    filter: brightness(0) saturate(100%) invert(83%) sepia(12%) saturate(360%) hue-rotate(177deg) brightness(94%) contrast(88%);
  }
  .site-header .header-contact { grid-column: 2; grid-row: 1; margin: 0; gap: 4px; }
  .site-header .header-email, .site-header .header-phone {
    font-size: 15px; font-weight: 400; line-height: 1.5;
    text-shadow: none; color: #ccd6e6; text-decoration: none;
  }
  .header-phone { cursor: pointer; transition: color 450ms ease; }
  .header-phone:hover { color: #e7e5df; }
  .site-header .primary-nav {
    grid-column: 1 / -1; grid-row: 2;
    width: 100%; justify-content: space-between; gap: 0; padding: 0;
  }
  .site-header .primary-nav a {
    font-size: 14px; font-weight: 500; letter-spacing: 0;
    padding: 4px 7px; min-height: 44px; color: #e7e5df;
  }
  .site-header .primary-nav a::before { inset: 4px 0; border-radius: 3px; background: rgba(200,196,174,.17); }
  .site-header .primary-nav a::after { content: none; }
  .site-header .primary-nav a[aria-current="page"] { color: #ccd6e6; }
  .content-stage { z-index: 1; height: auto; min-height: calc(100svh - var(--header-h)); }
  .site-shell .section[data-section] {
    display: flex; flex-direction: column;
    height: auto; min-height: calc(100svh - var(--header-h));
    width: 100%; max-width: 640px; margin: 0 auto;
    padding: 36px 24px 64px; gap: 0;
  }
  .site-shell .section[data-section] .copy-block {
    display: contents; position: static; width: auto; max-width: none;
    margin: 0; text-align: left;
  }
  .site-shell .section[data-section] .eyebrow {
    order: 0; margin: 0 0 20px; font-size: 14px; line-height: 1.5;
    letter-spacing: .14em; color: #3b4860;
  }
  .site-shell .section[data-section] [id$="-label"] { order: 1; width: 100%; padding: 0; }
  .site-shell .section[data-section] .section-title {
    font-size: 44px; margin: 0; max-width: 100%;
  }
  .site-shell .section[data-section="consulting"] .section-title { font-size: 38px; }
  .site-shell .section[data-section] .body-copy,
  .site-shell .section[data-section] .body-copy + .body-copy {
    order: 4; max-width: none; margin: 22px 0 0;
    font-size: 18px; line-height: 1.6; color: #34445d;
  }
  .site-shell .section[data-section] .afterword { order: 5; max-width: none; }
  .site-shell .section[data-section] .media-region.local-video-preview {
    display: block; position: relative; order: 3;
    top: auto; left: auto; right: auto;
    width: 100%; max-width: none; flex: none; align-self: stretch;
    aspect-ratio: 5 / 3; margin: 28px 0 4px;
  }
  .section-interpreting .service-lists {
    order: 4; grid-template-columns: 1fr; gap: 28px;
    max-width: none; margin: 28px 0 0;
  }
  .section-interpreting .service-list h2 { margin-bottom: 16px; }
  .section-interpreting .service-list li { font-size: 18px; line-height: 1.5; margin-bottom: 13px; }
  .section-contact #form-position { order: 4; width: 100%; }
  #contact-form { width: 100%; grid-template-columns: 1fr; gap: 20px; margin-top: 28px; }
  #contact-form .contact-message-row { grid-template-columns: minmax(0,1fr) 94px; column-gap: 14px; margin-top: 0; }
  #contact-form button { width: 94px; }
  #contact-form .form-field input, #contact-form .form-field textarea { font-size: 18px; }
  #contact-form .form-status { margin-top: 40px; }
  .site-shell .section-home[data-section] { padding-top: 42px; }
  .site-shell .section-home[data-section] .eyebrow { text-align: center; max-width: 290px; align-self: center; font-size: 14px; }
  .section-home .hero-title { font-size: 36px; width: 100%; height: 1.08em; margin: 0; justify-content: center; }
  .section-home .hero-title > .letter-cell, .section-home .hero-title > .space-cell { display: none; }
  .section-home .hero-title::after { width: 100%; height: 100%; }
  .section-home .pawprint-overlay {
    display: flex; order: 2; position: relative; width: 100%; height: 78px;
    justify-content: space-evenly; align-items: center;
    margin: 20px 0 0; pointer-events: none;
  }
  .section-home .pawprint-overlay img {
    position: static; width: 44px; height: 44px; opacity: var(--paw-opacity);
    transform: rotate(90deg) scale(var(--paw-ink-scale, 1)) translate(var(--paw-ink-x, 0%), var(--paw-ink-y, 0%)); flex: none;
  }
  .section-home .pawprint-overlay img:nth-child(even) { align-self: flex-start; }
  .site-shell .section-home[data-section] .media-region.local-video-preview { margin-top: 16px; }
  .navigation-status { top: 12px; }
}
@media (max-width: 374px) {
  :root { --header-h: 164px; }
  .site-header { padding-inline: 20px; grid-template-rows: 76px 88px; }
  .site-header .primary-nav { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .site-header .primary-nav a { padding-inline: 4px; }
  .site-shell .section[data-section] { padding-inline: 20px; }
  .site-shell .section[data-section] .section-title { font-size: 40px; }
  .site-shell .section[data-section="consulting"] .section-title { font-size: 32px; }
  .section-home .hero-title { font-size: 32px; }
}