/* =========================================================
   QUOREAL / V39 MOBILE POLISH
   2026-10-01
   Mobile-only overrides. Desktop 821px+ intentionally untouched.
   ========================================================= */

@media (max-width: 820px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip !important;
  }

  html { scroll-padding-top: 68px !important; }

  :root {
    --header-height: 56px;
  }

  /* -------------------------------------------------------
     TOP HEADER / CHILD HEADER
     ------------------------------------------------------- */
  #site-header.header,
  #site-header.header.scrolled,
  .qp-header,
  .qp-header.qp-header--toplike {
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
    background: rgba(255,255,255,.985) !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(8,8,8,.06) !important;
    box-shadow: none !important;
  }

  #site-header.header > .header-inner,
  #site-header.header.scrolled > .header-inner,
  .qp-header__inner {
    width: 100% !important;
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
    margin: 0 !important;
    padding: 0 10px 0 12px !important;
    display: grid !important;
    grid-template-columns: 34px minmax(0,1fr) auto 34px !important;
    align-items: center !important;
    gap: 7px !important;
  }

  #site-header.header > .header-inner > a.logo.logo--symbol,
  #site-header.header.scrolled > .header-inner > a.logo.logo--symbol,
  .qp-logo,
  .qp-logo--symbol {
    grid-column: 1 !important;
    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    margin: 0 !important;
    display: grid !important;
    place-items: center !important;
    transform: none !important;
  }

  #site-header.header > .header-inner > a.logo.logo--symbol > img,
  #site-header.header.scrolled > .header-inner > a.logo.logo--symbol > img,
  .qp-logo--symbol img {
    width: 29px !important;
    min-width: 29px !important;
    max-width: 29px !important;
    height: 29px !important;
    min-height: 29px !important;
    max-height: 29px !important;
    object-fit: contain !important;
  }

  #site-header.header > .header-inner > a.header-button,
  #site-header.header.scrolled > .header-inner > a.header-button,
  .qp-contact-link,
  .qp-contact-link--button {
    grid-column: 3 !important;
    justify-self: end !important;
    width: 118px !important;
    min-width: 118px !important;
    max-width: 118px !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    margin: 0 !important;
    padding: 0 6px 0 11px !important;
    gap: 5px !important;
    font-size: 10.5px !important;
    line-height: 1 !important;
  }

  #site-header.header > .header-inner > a.header-button .header-button-text,
  #site-header.header.scrolled > .header-inner > a.header-button .header-button-text,
  .qp-contact-link--button > span {
    font-size: 10.5px !important;
    white-space: nowrap !important;
  }

  #site-header.header > .header-inner > a.header-button .header-button-icon,
  #site-header.header.scrolled > .header-inner > a.header-button .header-button-icon,
  .qp-contact-link--button i {
    width: 25px !important;
    min-width: 25px !important;
    height: 25px !important;
    min-height: 25px !important;
    font-size: 11px !important;
  }

  #site-header.header > .header-inner > .menu-toggle,
  #site-header.header.scrolled > .header-inner > .menu-toggle,
  .qp-menu-button {
    grid-column: 4 !important;
    justify-self: end !important;
    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #site-header.header .menu-toggle span {
    left: 5px !important;
    width: 24px !important;
  }
  #site-header.header .menu-toggle span:nth-child(1) { top: 9px !important; }
  #site-header.header .menu-toggle span:nth-child(2) { top: 17px !important; }
  #site-header.header .menu-toggle span:nth-child(3) { top: 25px !important; }
  #site-header.header .menu-toggle.active span:nth-child(1),
  #site-header.header .menu-toggle.active span:nth-child(3) { top: 17px !important; }

  .qp-menu-button::before,
  .qp-menu-button::after {
    left: 5px !important;
    width: 24px !important;
  }
  .qp-menu-button::before { top: 10px !important; box-shadow: 0 7px 0 #111 !important; }
  .qp-menu-button::after { top: 24px !important; }
  .qp-menu-button[aria-expanded="true"]::before,
  .qp-menu-button[aria-expanded="true"]::after { top: 17px !important; }

  .mobile-menu,
  .qp-nav {
    top: 56px !important;
  }

  /* -------------------------------------------------------
     OPENING / WORDMARK
     ------------------------------------------------------- */
  #opening {
    height: 100svh !important;
    min-height: 100svh !important;
  }

  #opening .opening-logo,
  #opening.logo .opening-logo,
  #opening[data-state="ready"] .opening-logo {
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    inset: 0 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    transform: none !important;
  }

  #opening .opening-logo img,
  #opening.logo .opening-logo img,
  #opening[data-state="ready"] .opening-logo img {
    display: block !important;
    width: min(76vw, 300px) !important;
    max-width: 300px !important;
    height: auto !important;
    margin: 0 auto !important;
    transform-origin: center center !important;
  }

  #opening .opening-scroll {
    left: 50% !important;
    bottom: max(28px, env(safe-area-inset-bottom)) !important;
    transform: translateX(-50%) !important;
  }

  /* -------------------------------------------------------
     TOP HERO
     ------------------------------------------------------- */
  .hero {
    min-height: 0 !important;
    padding: 108px 0 54px !important;
  }

  .hero-container,
  .container {
    width: calc(100% - 28px) !important;
    max-width: none !important;
    margin-inline: auto !important;
  }

  .hero-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .hero-label {
    margin-bottom: 14px !important;
    font-size: 8px !important;
    line-height: 1.4 !important;
    letter-spacing: .18em !important;
  }

  .hero-message {
    max-width: 100% !important;
    font-size: clamp(36px, 9.7vw, 44px) !important;
    line-height: 1.14 !important;
    letter-spacing: -.05em !important;
  }

  .hero-line,
  .hero-line-bottom {
    width: 100% !important;
    white-space: normal !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
  }

  .hero-copy {
    margin-top: 22px !important;
  }

  .hero-copy p {
    font-size: 12.5px !important;
    line-height: 1.82 !important;
  }

  .hero-buttons {
    margin-top: 24px !important;
    gap: 9px !important;
  }

  .hero-buttons .btn {
    min-height: 52px !important;
  }

  .hero-right {
    width: 100% !important;
    max-width: none !important;
    margin: 6px 0 0 !important;
    padding: 0 !important;
  }

  .hero-slider,
  .hero-slider--single {
    width: 100% !important;
    height: 218px !important;
    min-height: 218px !important;
    max-height: 218px !important;
    margin: 0 !important;
    padding: 0 !important;
    aspect-ratio: auto !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .hero-slider::before,
  .hero-slider::after {
    display: none !important;
    content: none !important;
  }

  .hero-slide,
  .hero-slide.is-active,
  .hero-slides {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .hero-slide img,
  .hero-image,
  .hero-image-01 {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    transform: none !important;
    border: 0 !important;
  }

  .hero-slider-ui,
  .hero-data-card {
    display: none !important;
  }

  /* -------------------------------------------------------
     MOBILE SECTION RHYTHM
     ------------------------------------------------------- */
  .about,
  .service,
  .case,
  .flow,
  .faq,
  .contact {
    padding-top: 44px !important;
    padding-bottom: 48px !important;
  }

  .q-section-stage,
  .q-section-stage--white,
  .q-section-stage--gray,
  .q-section-stage--black,
  .q-section-stage--contact,
  .company-reference__hero.q-section-stage {
    min-height: 0 !important;
  }

  /* -------------------------------------------------------
     ABOUT / CORE APPROACH
     ------------------------------------------------------- */
  .about-intro {
    margin-bottom: 18px !important;
  }

  .about-grid {
    gap: 22px !important;
  }

  .sales-loop {
    width: min(100%, 316px) !important;
    height: 316px !important;
  }

  .about-content {
    min-height: 0 !important;
    padding: 20px 0 0 14px !important;
  }

  .about-content .about-core-title {
    max-width: 11.5em !important;
    margin-bottom: 16px !important;
    font-size: clamp(27px, 7.2vw, 32px) !important;
    line-height: 1.28 !important;
    word-break: keep-all !important;
  }

  .about-content > p:not(.content-index) {
    margin-bottom: 10px !important;
    font-size: 12px !important;
    line-height: 1.78 !important;
  }

  .about-content::after {
    right: -2px !important;
    bottom: -2px !important;
    font-size: 48px !important;
    opacity: .48 !important;
  }

  /* -------------------------------------------------------
     TOP SERVICE / COMPACT MOBILE CARDS
     ------------------------------------------------------- */
  .service {
    padding-top: 38px !important;
    padding-bottom: 42px !important;
  }

  .service .section-header {
    margin-bottom: 10px !important;
  }

  .service .service-list,
  .service-list {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border-top: 1px solid rgba(255,255,255,.14) !important;
    border-bottom: 0 !important;
  }

  .service .service-list::before {
    display: none !important;
    content: none !important;
  }

  .service .service-card,
  .service .service-card:nth-child(even),
  .service .service-card.service-card--quiet,
  .service-card,
  .service-card:nth-child(even) {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(0,1fr) 92px !important;
    grid-template-areas: "copy media" !important;
    align-items: center !important;
    gap: 14px !important;
    width: 100% !important;
    height: auto !important;
    min-height: 168px !important;
    margin: 0 !important;
    padding: 18px 14px 18px 0 !important;
    overflow: hidden !important;
    background: #0b0b0b !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.14) !important;
    box-shadow: none !important;
  }

  .service .service-card::before,
  .service .service-card::after {
    display: none !important;
    content: none !important;
  }

  .service .service-card__content {
    grid-area: copy !important;
    position: relative !important;
    z-index: 2 !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 0 0 2px !important;
    display: block !important;
  }

  .service .service-top {
    display: flex !important;
    align-items: center !important;
    min-height: 0 !important;
    margin: 0 0 8px !important;
    gap: 8px !important;
  }

  .service .service-number {
    display: none !important;
  }

  .service .service-en {
    font-size: 7.5px !important;
    line-height: 1.2 !important;
    letter-spacing: .17em !important;
    color: rgba(255,255,255,.55) !important;
  }

  .service .service-card h3,
  .service .service-card:nth-child(even) h3,
  .service .service-card.service-card--quiet h3 {
    max-width: 100% !important;
    margin: 0 !important;
    font-size: clamp(20px, 5.7vw, 24px) !important;
    line-height: 1.24 !important;
    letter-spacing: -.03em !important;
    white-space: normal !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    text-wrap: balance !important;
  }

  .service .service-card__content > p,
  .service .service-card:nth-child(even) .service-card__content > p,
  .service .service-card.service-card--quiet .service-card__content > p {
    display: block !important;
    max-width: 100% !important;
    margin: 10px 0 0 !important;
    color: rgba(255,255,255,.64) !important;
    font-size: 10.8px !important;
    line-height: 1.62 !important;
  }

  .service .service-media,
  .service .service-card:nth-child(even) .service-media,
  .service .service-card:nth-child(1) .service-media,
  .service .service-card:nth-child(2) .service-media,
  .service .service-card:nth-child(3) .service-media,
  .service .service-card:nth-child(4) .service-media {
    grid-area: media !important;
    position: relative !important;
    inset: auto !important;
    justify-self: end !important;
    align-self: center !important;
    width: 92px !important;
    height: 76px !important;
    min-height: 76px !important;
    margin: 0 !important;
    clip-path: polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%) !important;
    background: #111 !important;
    border: 0 !important;
    box-shadow: none !important;
    transform: none !important;
  }

  .service .service-media img,
  .service .service-card:nth-child(even) .service-media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    filter: grayscale(1) contrast(1.08) !important;
    opacity: .9 !important;
    transform: none !important;
  }

  .service .service-arrow {
    display: none !important;
  }

  /* -------------------------------------------------------
     CLIENTS
     ------------------------------------------------------- */
  .clients__header-field {
    min-height: 118px !important;
    height: auto !important;
  }

  .clients .clients-stage-v34.q-section-stage {
    display: grid !important;
    grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr) !important;
    grid-template-areas: "jp en" !important;
    align-items: center !important;
    min-height: 118px !important;
    height: auto !important;
    padding: 14px 0 !important;
    gap: 10px !important;
    overflow: visible !important;
  }

  .clients .clients-stage-v34 .q-section-stage__jp {
    grid-area: jp !important;
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .clients .clients-stage-v34 .q-section-stage__jp::before {
    width: 28px !important;
    margin: 0 0 8px !important;
  }

  .clients .clients-stage-v34 .q-section-stage__jp > span {
    margin: 0 0 5px !important;
    font-size: 7.5px !important;
    letter-spacing: .20em !important;
  }

  .clients .clients-stage-v34 .q-section-stage__jp h2 {
    font-size: 22px !important;
    line-height: 1.18 !important;
  }

  .clients .clients-stage-v34 .q-section-stage__en {
    grid-area: en !important;
    position: relative !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: .04em 0 !important;
    overflow: visible !important;
    text-align: right !important;
    font-size: clamp(34px, 10vw, 44px) !important;
    line-height: .9 !important;
    letter-spacing: -.045em !important;
    white-space: nowrap !important;
    transform: none !important;
  }

  .clients__logo-area {
    padding-top: 10px !important;
    padding-bottom: 34px !important;
  }

  .clients-logo-grid {
    max-width: 245px !important;
    gap: 14px !important;
  }

  .clients-logo-item {
    padding: 3px 0 !important;
  }

  .clients-logo-item--timee img {
    width: min(100%, 192px) !important;
    max-width: 192px !important;
  }

  .clients-logo-item--wiroad img {
    width: min(100%, 188px) !important;
    max-width: 188px !important;
  }

  .clients .clients__meta {
    margin-top: 18px !important;
    font-size: 10.5px !important;
    line-height: 1.72 !important;
  }

  /* -------------------------------------------------------
     WHY QUOREAL
     ------------------------------------------------------- */
  .strength {
    padding: 0 0 44px !important;
    overflow: hidden !important;
  }

  .strength::before {
    display: block !important;
    height: 210px !important;
    clip-path: polygon(0 0,100% 0,100% 76%,0 100%) !important;
  }

  .strength > .container {
    width: 100% !important;
  }

  .strength .why-head.q-section-stage {
    position: relative !important;
    display: block !important;
    min-height: 210px !important;
    height: 210px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  .strength .why-head .q-section-stage__jp {
    position: absolute !important;
    z-index: 3 !important;
    left: 18px !important;
    top: 24px !important;
    bottom: auto !important;
    width: calc(100% - 36px) !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .strength .why-head .q-section-stage__jp::before {
    width: 28px !important;
    margin: 0 0 8px !important;
  }

  .strength .why-head .q-section-stage__jp > span {
    margin: 0 0 6px !important;
    font-size: 7.5px !important;
    letter-spacing: .20em !important;
    color: rgba(255,255,255,.72) !important;
  }

  .strength .why-head .q-section-stage__jp h2 {
    max-width: none !important;
    margin: 0 !important;
    font-size: 24px !important;
    line-height: 1.15 !important;
    color: #fff !important;
  }

  .strength .why-head .q-section-stage__en {
    position: absolute !important;
    z-index: 2 !important;
    left: 18px !important;
    right: 18px !important;
    top: 102px !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    font-size: clamp(40px, 11.8vw, 52px) !important;
    line-height: .86 !important;
    letter-spacing: -.052em !important;
    white-space: nowrap !important;
    transform: none !important;
    text-align: left !important;
  }

  .strength .why-layout-v10 {
    margin: 0 !important;
    padding: 20px 16px 0 !important;
  }

  .strength .why-teaser {
    grid-template-columns: 36px minmax(0,1fr) 32px !important;
    gap: 5px 10px !important;
    padding: 18px 0 !important;
  }

  .strength .why-teaser strong {
    max-width: 100% !important;
    font-size: clamp(19px, 5.4vw, 23px) !important;
    line-height: 1.24 !important;
    white-space: normal !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    text-wrap: balance !important;
  }

  .strength .why-teaser__en {
    font-size: 7px !important;
    letter-spacing: .14em !important;
  }

  .strength .why-teaser__arrow {
    width: 30px !important;
    height: 30px !important;
  }

  /* -------------------------------------------------------
     WORKS / CASE
     ------------------------------------------------------- */
  .case {
    padding-top: 42px !important;
    padding-bottom: 44px !important;
  }

  .case .case-description {
    margin-bottom: 20px !important;
    font-size: 12px !important;
    line-height: 1.72 !important;
  }

  .case .case-teaser,
  .case .case-teaser:nth-child(1),
  .case .case-teaser:nth-child(2),
  .case .case-teaser:nth-child(3) {
    width: 100% !important;
    margin: 0 0 24px !important;
    padding: 170px 0 0 !important;
  }

  .case .case-teaser::after,
  .case .case-teaser:nth-child(1)::after,
  .case .case-teaser:nth-child(2)::after,
  .case .case-teaser:nth-child(3)::after {
    width: 100% !important;
    height: 150px !important;
    clip-path: polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,0 100%) !important;
  }

  .case .case-teaser strong {
    max-width: 100% !important;
    font-size: clamp(21px, 5.8vw, 25px) !important;
    line-height: 1.25 !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
  }

  .case .case-teaser p {
    margin-top: 7px !important;
    font-size: 11.5px !important;
    line-height: 1.65 !important;
  }

  /* -------------------------------------------------------
     PROCESS / COMPACT
     ------------------------------------------------------- */
  .flow {
    padding-top: 38px !important;
    padding-bottom: 42px !important;
  }

  .flow .flow-head.q-section-stage {
    margin-bottom: 18px !important;
  }

  .flow-experience {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
  }

  .flow-stage-wrap {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 0 12px !important;
  }

  .flow-stage {
    position: relative !important;
    width: 100% !important;
    height: 236px !important;
    min-height: 236px !important;
    max-height: 236px !important;
    margin: 0 !important;
    padding: 18px 18px 92px !important;
    overflow: hidden !important;
  }

  .flow-stage__kicker {
    font-size: 7.5px !important;
    letter-spacing: .18em !important;
  }

  .flow-stage__count {
    margin-top: 14px !important;
  }

  .flow-stage__count strong {
    font-size: 60px !important;
    line-height: .86 !important;
  }

  .flow-stage__count span {
    font-size: 10px !important;
  }

  .flow-stage__en {
    margin-top: 11px !important;
    font-size: 7.5px !important;
    letter-spacing: .18em !important;
  }

  .flow-stage h3 {
    margin-top: 5px !important;
    font-size: 22px !important;
    line-height: 1.2 !important;
    word-break: keep-all !important;
  }

  .flow-stage__photo {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 78px !important;
    margin: 0 !important;
    clip-path: none !important;
  }

  .flow-stage__photo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    filter: grayscale(1) saturate(0) contrast(1.08) brightness(.94) !important;
  }

  .flow-stage__progress {
    left: 18px !important;
    right: 18px !important;
    bottom: 14px !important;
    z-index: 5 !important;
  }

  .flow-track {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    display: block !important;
    margin: 0 !important;
  }

  .flow-step,
  .flow-step:nth-child(even) {
    display: grid !important;
    grid-template-columns: 38px minmax(0,1fr) !important;
    gap: 10px !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 14px 12px !important;
  }

  .flow-node {
    width: 34px !important;
    height: 34px !important;
    font-size: 9px !important;
  }

  .flow-step__body {
    grid-column: 2 !important;
    min-width: 0 !important;
  }

  .flow-step__en {
    font-size: 7px !important;
    line-height: 1.3 !important;
    letter-spacing: .16em !important;
  }

  .flow-step h3 {
    margin-top: 4px !important;
    font-size: 18px !important;
    line-height: 1.25 !important;
    word-break: keep-all !important;
  }

  .flow-step p {
    margin-top: 6px !important;
    font-size: 10.5px !important;
    line-height: 1.58 !important;
  }

  .flow-step:not(.is-active) p {
    display: none !important;
  }

  /* -------------------------------------------------------
     CONTACT FORM / NO DISAPPEARING CONTENT OR DEAD SPACE
     ------------------------------------------------------- */
  .contact {
    padding-top: 40px !important;
    padding-bottom: 28px !important;
    overflow: visible !important;
  }

  .contact .q-bg-motion,
  .contact-grid-motion,
  .contact-orbit,
  .contact-ribbon,
  .contact-particles {
    display: none !important;
  }

  .contact-box,
  .contact-actions,
  .contact-form,
  .contact-form__grid,
  .contact-form__field,
  .contact-form__consent,
  .contact-form__consent-row,
  .contact-form__submit-area,
  .contact-form__submit {
    position: relative !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    filter: none !important;
  }

  .contact-box h2 {
    margin: 8px 0 14px !important;
    font-size: clamp(31px, 8.6vw, 38px) !important;
    line-height: 1.22 !important;
  }

  .contact-copy,
  .contact-box > p {
    margin-bottom: 22px !important;
    font-size: 12px !important;
    line-height: 1.78 !important;
  }

  .contact-actions,
  .contact .contact-actions {
    width: 100% !important;
    margin: 22px 0 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  .contact-form {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 20px 16px 22px !important;
    overflow: visible !important;
    border-radius: 0 !important;
  }

  .contact-form__grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    height: auto !important;
    min-height: 0 !important;
    padding-bottom: 22px !important;
    overflow: visible !important;
  }

  .contact-form__field {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .contact-form input {
    min-height: 50px !important;
    height: 50px !important;
    font-size: 16px !important;
  }

  .contact-form textarea,
  #contact-message {
    display: block !important;
    height: 176px !important;
    min-height: 176px !important;
    max-height: 240px !important;
    padding: 13px 14px !important;
    overflow-y: auto !important;
    resize: vertical !important;
    font-size: 16px !important;
  }

  .contact-form__consent {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  .contact-form__consent-row {
    display: grid !important;
    grid-template-columns: 22px minmax(0,1fr) auto !important;
    align-items: start !important;
    justify-content: stretch !important;
    width: 100% !important;
    gap: 10px !important;
  }

  .contact-form__consent-copy {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
    min-width: 0 !important;
  }

  .contact-form__consent-copy label {
    font-size: 11.5px !important;
    line-height: 1.55 !important;
  }

  .contact-form__consent-copy a {
    font-size: 11px !important;
  }

  .contact-form__submit-area {
    width: 100% !important;
    height: auto !important;
    margin: 18px 0 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  .contact-form__submit {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 52px !important;
    height: 52px !important;
    margin: 0 !important;
  }

  /* -------------------------------------------------------
     CHILD PAGES / COMPACT AND CLEAN
     ------------------------------------------------------- */
  .qp-page {
    overflow-x: clip !important;
  }

  .qp-hero,
  .qp-v31-hero {
    min-height: 0 !important;
    padding-top: 56px !important;
  }

  .qp-hero::before,
  .qp-v31-hero::before {
    inset: 56px 0 0 !important;
  }

  .qp-hero__inner {
    width: calc(100% - 28px) !important;
    min-height: 0 !important;
    margin-inline: auto !important;
    padding: 24px 0 30px !important;
    row-gap: 16px !important;
  }

  .qp-eyebrow {
    font-size: 7.5px !important;
    letter-spacing: .15em !important;
  }

  .qp-title,
  .qp-title--medium,
  .qp-v31-hero .qp-title,
  .qp-v31-hero .qp-title--medium {
    max-width: 100% !important;
    font-size: clamp(32px, 9vw, 42px) !important;
    line-height: 1.04 !important;
    letter-spacing: -.045em !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    text-wrap: balance !important;
  }

  .qp-title-line,
  .qp-v31-hero .qp-title-line {
    max-width: 100% !important;
    white-space: normal !important;
  }

  .qp-hero-visual,
  .qp-hero-visual--single,
  .qp-hero-visual--service-grid {
    width: 100% !important;
    height: 190px !important;
    min-height: 190px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .qp-hero-visual img,
  .qp-hero-visual--single img,
  .qp-hero-visual--service-grid img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .qp-hero__lead {
    font-size: 12px !important;
    line-height: 1.7 !important;
  }

  .qp-v31-shell,
  .qp-shell,
  .works-page-shell {
    width: calc(100% - 28px) !important;
    max-width: none !important;
  }

  .qp-v31-section {
    padding: 36px 0 !important;
    overflow: hidden !important;
  }

  .qp-v31-heading {
    gap: 8px !important;
    padding-top: 10px !important;
  }

  .qp-v31-kicker {
    font-size: 7.5px !important;
    line-height: 1.4 !important;
    letter-spacing: .16em !important;
  }

  .qp-v31-heading h2,
  .qp-section__title,
  .qp-approved__body h2,
  .works-page-copy h2,
  .works-page-status__head h2 {
    max-width: 100% !important;
    margin-left: 0 !important;
    font-size: clamp(24px, 6.8vw, 30px) !important;
    line-height: 1.2 !important;
    letter-spacing: -.03em !important;
    text-align: left !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    text-wrap: balance !important;
  }

  .qp-v31-split,
  .qp-v31-works-hero__grid,
  .works-page-hero__grid,
  .works-page-method__grid,
  .works-page-policy__grid,
  .qp-approved__body,
  .qp-copy-grid,
  .qp-section--media-split .qp-shell,
  .qp-section--media-side .qp-shell {
    gap: 18px !important;
  }

  .qp-v31-copy,
  .qp-copy-grid p,
  .qp-approved__body p,
  .works-page-copy p {
    font-size: 12px !important;
    line-height: 1.72 !important;
  }

  .qp-v31-media,
  .qp-v31-works-visual,
  .qp-editorial-photo--split,
  .qp-section--media-side .qp-editorial-photo--side,
  .qp-section--media-wide .qp-editorial-photo--wide,
  .works-page-photo--large,
  .works-page-photo--medium,
  .works-page-hero__visual {
    width: 100% !important;
    height: 190px !important;
    min-height: 190px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  .qp-v31-media img,
  .qp-v31-works-visual img,
  .works-page-photo--large img,
  .works-page-photo--medium img,
  .works-page-hero__visual img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .qp-v31-flow {
    margin-top: 18px !important;
  }

  .qp-v31-flow__item,
  .qp-v31-tile,
  .qp-v31-fit-grid > div {
    padding: 16px 0 !important;
  }

  .qp-v31-flow__item h3,
  .qp-v31-tile h3,
  .qp-v31-fit-grid h3,
  .qp-v31-service-card h3 {
    font-size: 19px !important;
    line-height: 1.25 !important;
    word-break: keep-all !important;
  }

  .qp-v31-flow__item p,
  .qp-v31-tile p,
  .qp-v31-fit-grid p,
  .qp-v31-service-card p {
    font-size: 11.5px !important;
    line-height: 1.62 !important;
  }

  .qp-v31-diagram,
  .qp-v31-diagram--loop,
  .qp-v31-diagram--rail,
  .qp-v31-diagram--handoff,
  .qp-v31-diagram--funnel {
    min-height: 196px !important;
  }

  .qp-v31-diagram--loop {
    grid-template-columns: repeat(2, 72px) !important;
    grid-template-rows: repeat(2, 72px) !important;
    gap: 16px 22px !important;
  }

  .qp-v31-diagram__node,
  .qp-v31-diagram--rail .qp-v31-diagram__node,
  .qp-v31-diagram--handoff .qp-v31-diagram__node,
  .qp-v31-diagram--funnel .qp-v31-diagram__node {
    width: 72px !important;
    height: 72px !important;
  }

  .qp-list-item,
  .qp-process__row {
    grid-template-columns: 24px minmax(72px,.34fr) minmax(0,1fr) !important;
    gap: 7px !important;
    padding: 10px 0 !important;
  }

  .qp-list-item__jp,
  .qp-process__row h3,
  .qp-process__row p {
    font-size: 11.5px !important;
    line-height: 1.5 !important;
  }

  .qp-v31-service-card {
    grid-template-rows: 150px auto !important;
    padding: 0 16px 18px !important;
  }

  .qp-v31-service-card figure {
    height: 150px !important;
    margin: 0 -16px 16px !important;
  }

  .qp-v31-works-hero,
  .works-page-hero {
    padding: 32px 0 !important;
  }

  .qp-v31-works-hero h1,
  .works-page-hero h1 {
    max-width: 100% !important;
    font-size: clamp(34px, 9.5vw, 42px) !important;
    line-height: 1.05 !important;
    word-break: keep-all !important;
  }

  .qp-v31-works-visual > span,
  .works-page-hero__word {
    font-size: 44px !important;
    line-height: .9 !important;
    overflow: hidden !important;
  }

  .qp-next,
  .qp-v31-next,
  .works-page-next {
    padding: 30px 0 !important;
  }

  .qp-next__title,
  .qp-v31-next .qp-next__title,
  .works-page-next h2 {
    font-size: clamp(25px, 7vw, 31px) !important;
    line-height: 1.18 !important;
    word-break: keep-all !important;
  }

  /* PRIVACY remains structurally identical; only mobile scale is tightened. */
  .legal-header { min-height: 56px !important; }
  .legal-hero { padding: 92px 0 38px !important; }
  .legal-content { padding: 38px 0 !important; }
}

@media (max-width: 390px) {
  #site-header.header > .header-inner,
  #site-header.header.scrolled > .header-inner,
  .qp-header__inner {
    padding-left: 9px !important;
    padding-right: 7px !important;
    grid-template-columns: 32px minmax(0,1fr) auto 32px !important;
    gap: 5px !important;
  }

  #site-header.header > .header-inner > a.header-button,
  #site-header.header.scrolled > .header-inner > a.header-button,
  .qp-contact-link,
  .qp-contact-link--button {
    width: 112px !important;
    min-width: 112px !important;
    max-width: 112px !important;
    padding-left: 9px !important;
  }

  .hero-message {
    font-size: clamp(34px, 9.2vw, 40px) !important;
  }

  .clients .clients-stage-v34 .q-section-stage__en {
    font-size: clamp(32px, 9.6vw, 40px) !important;
  }

  .strength .why-head .q-section-stage__en {
    font-size: clamp(37px, 11vw, 46px) !important;
  }

  .service .service-card,
  .service .service-card:nth-child(even),
  .service .service-card.service-card--quiet {
    grid-template-columns: minmax(0,1fr) 82px !important;
    min-height: 160px !important;
    gap: 10px !important;
  }

  .service .service-media,
  .service .service-card:nth-child(even) .service-media,
  .service .service-card:nth-child(1) .service-media,
  .service .service-card:nth-child(2) .service-media,
  .service .service-card:nth-child(3) .service-media,
  .service .service-card:nth-child(4) .service-media {
    width: 82px !important;
    height: 70px !important;
    min-height: 70px !important;
  }
}