/* Shared mobile experience layer.
   Desktop layouts remain owned by each page; this file standardises touch,
   readability and responsive behaviour across the public site. */

@media (max-width: 900px) {
  html {
    scroll-padding-top: 80px;
    -webkit-text-size-adjust: 100%;
  }

  body {
    overflow-x: clip;
  }

  body.site-menu-open {
    overflow: hidden;
  }

  .container {
    width: 100%;
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
  }

  .nav {
    border-bottom: 1px solid rgba(232, 225, 209, .78);
  }

  .nav-inner {
    height: 68px;
    gap: 12px;
  }

  .logo {
    min-height: 44px;
  }

  .logo-mark {
    width: 27px;
    height: 27px;
  }

  .logo-word {
    font-size: 20px;
  }

  .nav-toggle {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--sand);
    border-radius: 10px;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
  }

  .btn,
  button,
  [role="button"] {
    touch-action: manipulation;
  }

  .btn {
    min-height: 48px;
    justify-content: center;
  }

  input,
  select,
  textarea {
    font-size: 16px !important;
  }

  :where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid var(--brass-gold, #C89845);
    outline-offset: 3px;
  }

  .t-h1 {
    font-size: clamp(38px, 10vw, 52px);
    line-height: 1.08;
    letter-spacing: -.035em;
  }

  .t-h2 {
    font-size: clamp(28px, 7.5vw, 36px);
    line-height: 1.16;
  }

  .eyebrow {
    line-height: 1.55;
  }

  /* Home */
  .hero {
    padding: 42px 0 56px;
  }

  .hero-grid {
    gap: 42px;
  }

  .hero .lede {
    max-width: 34rem;
    margin-bottom: 26px;
  }

  .hero-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .hero-actions .btn {
    width: 100%;
    padding-inline: 16px;
  }

  .visual {
    width: min(620px, 100%);
    min-height: 390px;
    margin-inline: auto;
  }

  .browser {
    left: 4%;
    top: 13%;
    width: 92%;
  }

  .site-links {
    gap: 12px;
  }

  .stat {
    animation: none;
  }

  .trust-grid {
    grid-template-columns: 1fr 1fr;
    gap: 22px 18px;
  }

  .trust-item {
    min-width: 0;
    align-items: flex-start;
  }

  .problem,
  .solution,
  .industries,
  .why,
  .approach,
  .contact-wrap,
  .china-social-section,
  .care-section,
  .services-section {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .problem-grid,
  .solution-grid,
  .a-hero-grid,
  .p-hero-grid,
  .contact {
    gap: 40px;
  }

  .pain-grid {
    grid-template-columns: 1fr 1fr;
    gap: 24px 20px;
  }

  .problem-visual img {
    width: 100%;
    aspect-ratio: 4 / 3;
  }

  .missed {
    padding: 22px;
  }

  .missed .btn,
  .audit-form .btn,
  .cta .btn,
  .bookbar .btn,
  .contact-form .btn {
    width: 100%;
  }

  .audit-wrap {
    padding-bottom: 64px;
  }

  .audit {
    border-radius: 16px;
    overflow: hidden;
  }

  .audit-col {
    padding: 28px 24px;
  }

  .audit-intro h2 {
    font-size: 30px;
  }

  .pill {
    max-width: 100%;
    flex-wrap: wrap;
    border-radius: 14px;
    line-height: 1.5;
  }

  .field input,
  .field select,
  .field textarea {
    min-height: 48px;
  }

  .biz-maps {
    min-height: 44px;
    align-items: center;
  }

  .ring {
    gap: 14px;
  }

  .node {
    min-height: 132px;
    padding: 22px;
  }

  .industries-head .link-arrow {
    min-height: 44px;
  }

  .ind-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }

  .ind-card {
    min-width: 0;
  }

  .cta {
    gap: 24px;
  }

  /* Pricing */
  .p-hero {
    padding: 48px 0 64px;
  }

  .p-hero .lede {
    margin-bottom: 28px;
  }

  .p-hero-img {
    width: min(680px, 100%);
    margin-inline: auto;
  }

  .hero-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
  }

  .pricing-head {
    margin-bottom: 36px;
    text-align: left;
  }

  .packages {
    padding: 52px 0 64px;
  }

  .plan {
    padding: 30px 24px 24px;
  }

  .plan-featured {
    padding-top: 0;
  }

  .plan-flag {
    margin-inline: -24px;
  }

  .plan-list {
    margin-block: 26px;
    gap: 13px;
  }

  .plan-list li,
  .china-service-list li,
  .service-copy {
    font-size: 13px;
    line-height: 1.65;
  }

  .china-social-intro {
    gap: 42px;
  }

  .china-collage {
    width: min(680px, 100%);
  }

  .china-offer {
    margin-top: 52px;
    padding: 30px 24px;
  }

  .service-block + .service-block {
    margin-top: 52px;
  }

  .service-block-head {
    margin-bottom: 20px;
  }

  .support-bar,
  .quote,
  .bookbar {
    align-items: flex-start;
  }

  /* About */
  .a-hero {
    padding: 48px 0 64px;
  }

  .a-hero p {
    max-width: 36rem;
  }

  .a-hero .btn {
    width: 100%;
  }

  .a-hero-img {
    width: min(680px, 100%);
    margin-inline: auto;
  }

  .why-item {
    align-items: flex-start;
  }

  .principles {
    grid-template-columns: 1fr 1fr;
  }

  .principle {
    padding: 30px 24px 24px;
  }

  .contact-form {
    padding: 28px 24px;
  }

  .contact-item {
    min-height: 56px;
  }

  /* Industries */
  .page-head {
    padding: 36px 0 28px;
  }

  .crumbs {
    min-height: 32px;
    margin-bottom: 16px;
  }

  .finder {
    margin: 28px 0 28px;
  }

  .finder-search,
  .finder-select select {
    min-height: 54px;
  }

  .rail {
    margin-inline: -20px;
  }

  .rail ul {
    padding: 0 20px 10px;
    scroll-padding-inline: 20px;
    scroll-snap-type: x proximity;
    overscroll-behavior-inline: contain;
  }

  .rail button {
    min-height: 44px;
    scroll-snap-align: start;
  }

  .cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }

  .icard-name {
    min-height: 52px;
  }

  .notfound {
    align-items: flex-start;
  }

  .bookbar-left,
  .quote-left {
    align-items: flex-start;
  }

  /* Quote builder */
  .q-head {
    padding: 36px 0 26px;
  }

  .q-layout {
    gap: 22px;
    padding-bottom: 64px;
  }

  .summary {
    padding: 24px;
  }

  .step-card {
    padding: 26px 22px;
  }

  .step-head {
    align-items: flex-start;
    margin-bottom: 24px;
  }

  .step-num {
    width: 32px;
    height: 32px;
  }

  .opts-2,
  .opts-3,
  .field-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .opt {
    min-height: 66px;
    padding: 16px;
  }

  .stepper {
    flex-wrap: wrap;
  }

  .stepper button {
    width: 48px;
    height: 48px;
  }

  .stepper input {
    width: 78px;
    min-height: 48px;
  }

  .stepper small {
    flex-basis: 100%;
    line-height: 1.5;
  }

  .sum-lines li {
    min-height: 44px;
    align-items: center;
  }

  .upsell {
    min-height: 48px;
  }

  .done {
    padding: 52px 24px;
  }

  .done-actions .btn {
    min-width: 180px;
  }

  /* Legal pages and footer */
  .legal-hero {
    padding: 48px 0;
  }

  .legal-main {
    padding: 48px 0 64px;
  }

  .legal-grid {
    gap: 32px;
  }

  .legal-toc {
    padding: 20px;
  }

  .legal-toc a {
    display: flex;
    min-height: 44px;
    align-items: center;
    font-size: 13px;
  }

  .legal-intro {
    padding: 24px;
  }

  .legal-section p,
  .legal-section li {
    font-size: 15px;
    line-height: 1.78;
    overflow-wrap: anywhere;
  }

  .footer {
    padding: 56px 0 28px;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 34px 26px;
  }

  .footer-col a {
    display: flex;
    min-height: 40px;
    align-items: center;
  }

  .socials {
    gap: 6px;
  }

  .socials a {
    width: 44px;
    height: 44px;
    justify-content: center;
  }

  .footer-legal-links a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

@media (max-width: 620px) {
  .ind-grid,
  .cards {
    grid-template-columns: 1fr 1fr;
  }

  .principles {
    grid-template-columns: 1fr;
  }

  .service-row {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 20px;
  }

  .service-price {
    white-space: normal;
  }
}

@media (max-width: 560px) {
  .container {
    padding-left: max(18px, env(safe-area-inset-left));
    padding-right: max(18px, env(safe-area-inset-right));
  }

  .t-h1 {
    font-size: clamp(38px, 11.6vw, 48px);
  }

  .hero-actions {
    grid-template-columns: 1fr;
  }

  .visual {
    min-height: 340px;
  }

  .browser {
    left: 0;
    top: 14%;
    width: 100%;
  }

  .site-inner {
    padding: 14px 18px 22px;
  }

  .site-links {
    display: none;
  }

  .s-bookings {
    width: 136px;
    right: -6px;
  }

  .s-reviews {
    width: 148px;
    right: -6px;
    bottom: 0;
  }

  .s-visibility,
  .s-orders {
    display: none;
  }

  .trust-grid,
  .pain-grid,
  .hero-features,
  .china-stats {
    grid-template-columns: 1fr;
  }

  .trust-grid {
    gap: 12px;
    padding: 22px 0;
  }

  .trust-item {
    min-height: 46px;
  }

  .trust-icon {
    width: 34px;
    height: 34px;
  }

  .metric {
    grid-template-columns: 88px minmax(0, 1fr) 28px;
    gap: 8px;
  }

  /* Compact audit workspace: an intro header, a short form, then an on-demand
     result. The example report stays available on desktop but does not make
     the phone page several screens longer before the customer interacts. */
  .audit-wrap {
    padding-bottom: 52px;
  }

  .audit {
    gap: 12px;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .audit-col,
  .audit-col + .audit-col {
    padding: 20px;
    border: 1px solid var(--sand);
    border-radius: 14px;
    background: var(--warm-cream);
  }

  .audit-intro {
    padding: 22px 20px;
    border-color: var(--deep-olive);
    background: var(--deep-olive);
    color: var(--warm-cream);
  }

  .audit-intro .eyebrow {
    color: #dfba78;
  }

  .audit-intro h2 {
    margin: 8px 0 10px;
    color: var(--warm-cream);
    font-size: 25px;
    line-height: 1.18;
  }

  .audit-intro p {
    margin-bottom: 16px;
    color: var(--sage);
    font-size: 12px;
    line-height: 1.65;
  }

  .audit-intro .pill {
    width: 100%;
    padding: 7px 10px 7px 7px;
    border: 1px solid rgba(250,247,242,.13);
    border-radius: 10px;
    background: rgba(250,247,242,.08);
    color: var(--warm-cream);
    font-size: 10.5px;
  }

  .audit-intro .pill i {
    color: rgba(250,247,242,.32);
  }

  .audit-intro .pill-check {
    background: var(--brass-gold);
  }

  .audit-form {
    display: grid;
    grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr);
    gap: 14px 10px;
  }

  .audit-form .field {
    min-width: 0;
    margin: 0;
  }

  .audit-form .field:first-child,
  .audit-form .btn,
  .audit-form .form-msg {
    grid-column: 1 / -1;
  }

  .audit-form .field label {
    margin-bottom: 7px;
    font-size: 9.5px;
    letter-spacing: .9px;
  }

  .audit-form .field input,
  .audit-form .field select {
    min-width: 0;
    padding: 11px 12px;
  }

  .audit-form .btn {
    margin-top: 2px;
  }

  #auditResult[data-state="idle"] {
    display: none;
  }

  #auditResult {
    scroll-margin-top: 82px;
    background: var(--oat);
  }

  #auditResult .mini-cards {
    grid-template-columns: 1fr 1fr;
  }

  .preview-head {
    align-items: flex-start;
  }

  .score b {
    font-size: 38px;
  }

  .mini-cards {
    grid-template-columns: 1fr;
  }

  /* Solution uses the same two-column table rhythm as The Problem. */
  .solution-grid {
    gap: 30px;
  }

  .ring {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    min-height: 0;
    overflow: hidden;
    border: 1px solid var(--sand);
    border-radius: 12px;
    background: var(--warm-cream);
    box-shadow: none;
  }

  .ring .node {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: start;
    gap: 9px;
    width: 100%;
    min-height: 0;
    padding: 14px 12px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .ring .node + .node {
    border-top: 0;
  }

  .ring .node.n2,
  .ring .node.n4,
  .ring .node.n6,
  .ring .node.n8 {
    border-left: 1px solid var(--sand);
  }

  .ring .node.n3,
  .ring .node.n4,
  .ring .node.n5,
  .ring .node.n6,
  .ring .node.n7,
  .ring .node.n8 {
    border-top: 1px solid var(--sand);
  }

  .ring .node-icon {
    width: 30px;
    height: 30px;
    border-radius: 7px;
  }

  .ring .node-icon svg {
    width: 14px;
    height: 14px;
  }

  .ring .node h4 {
    margin-bottom: 3px;
    font-size: 12px;
    line-height: 1.3;
  }

  .ring .node p {
    font-size: 10.5px;
    line-height: 1.4;
  }

  .ind-grid,
  .cards {
    gap: 12px;
  }

  .ind-body {
    padding: 12px;
  }

  .cta,
  .quote,
  .bookbar,
  .support-bar {
    padding: 24px 20px;
  }

  .cta .btn,
  .quote .btn,
  .bookbar .btn {
    width: 100%;
  }

  .p-hero-img,
  .a-hero-img {
    border-radius: 12px;
  }

  .p-hero-img,
  .a-hero-img {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .plan {
    padding: 28px 20px 22px;
  }

  .plan-featured {
    padding-top: 0;
  }

  .plan-flag {
    margin-inline: -20px;
  }

  .china-social-copy h2 {
    font-size: 38px;
  }

  .china-stat {
    min-height: 0;
  }

  .china-collage {
    min-height: 400px;
  }

  .china-post {
    width: 62%;
  }

  .china-offer {
    padding: 26px 20px;
  }

  .china-service-list {
    grid-template-columns: 1fr;
  }

  .sec-head {
    text-align: left;
    margin-bottom: 36px;
  }

  .contact-form {
    padding: 24px 20px;
  }

  .notfound {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 18px;
  }

  .notfound-copy {
    min-width: 0;
  }

  .notfound .btn {
    grid-column: 1 / -1;
    width: 100%;
  }

  .bookbar-left,
  .quote-left {
    gap: 16px;
  }

  .summary,
  .step-card {
    padding: 22px 18px;
    border-radius: 10px;
  }

  .opt-title,
  .sum-lines li {
    align-items: flex-start;
  }

  .sum-lines li span {
    min-width: 0;
  }

  .done-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .done-actions .btn {
    width: 100%;
  }

  .legal-toc ol,
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .legal-intro,
  .contact-card {
    padding: 20px;
  }

  .footer-bottom {
    align-items: flex-start;
    flex-direction: column;
  }

  /* The select already provides the same category filter on phones. Keeping
     a second horizontal chip rail wastes space and makes the page look cut off. */
  .rail {
    display: none;
  }

  .dir-grid {
    gap: 0;
  }
}

/* Compact phone tier — calibrated around the 390px-wide iPhone 12 Pro.
   Touch targets stay large while decorative elements and whitespace scale
   down together, preserving the desktop composition rather than flattening it. */
@media (max-width: 430px) {
  .container {
    padding-left: max(17px, env(safe-area-inset-left));
    padding-right: max(17px, env(safe-area-inset-right));
  }

  .logo-mark {
    width: 24px;
    height: 24px;
  }

  .logo-word {
    font-size: 18.5px;
  }

  .t-h1 {
    font-size: clamp(36px, 10.5vw, 42px);
    line-height: 1.08;
  }

  .t-h2 {
    font-size: clamp(27px, 7.5vw, 32px);
  }

  .problem,
  .solution,
  .industries,
  .why,
  .approach,
  .contact-wrap,
  .china-social-section,
  .care-section,
  .services-section {
    padding-top: 52px;
    padding-bottom: 52px;
  }

  /* Homepage hero mockup */
  .hero {
    padding: 30px 0 34px;
  }

  .hero-grid {
    gap: 20px;
  }

  .hero-actions {
    display: flex;
  }

  .hero-actions .btn {
    width: auto;
    min-width: 164px;
  }

  .hero .lede {
    margin-bottom: 22px;
  }

  .visual {
    min-height: 292px;
  }

  .browser {
    left: 3%;
    top: 6%;
    width: 94%;
  }

  .browser-bar {
    gap: 5px;
    padding: 8px 11px;
  }

  .browser-bar span {
    width: 7px;
    height: 7px;
  }

  .site-inner {
    padding: 12px 15px 17px;
  }

  .site-cta {
    padding: 6px 12px;
    font-size: 10px;
  }

  .stat {
    padding: 9px 10px;
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(58,63,42,.13);
  }

  .stat-label {
    font-size: 9px;
    margin-bottom: 4px;
  }

  .stat-value {
    font-size: 19px;
  }

  .stat-sub {
    font-size: 8.5px;
  }

  .spark {
    height: 24px;
    margin-top: 6px;
  }

  .stars {
    font-size: 10.5px;
    letter-spacing: 1px;
  }

  .mini-avatars {
    margin-top: 7px;
  }

  .mini-avatars img {
    width: 17px;
    height: 17px;
    margin-left: -5px;
  }

  .s-bookings {
    top: 0;
    right: -2px;
    width: 116px;
  }

  .s-reviews {
    right: -2px;
    bottom: 2px;
    width: 128px;
  }

  .trust-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    padding: 0;
  }

  .trust-item {
    min-width: 0;
    min-height: 68px;
    gap: 9px;
    padding: 12px 10px;
    align-items: center;
  }

  .trust-item:nth-child(even) {
    border-left: 1px solid var(--sand);
  }

  .trust-item:nth-child(n+3) {
    border-top: 1px solid var(--sand);
  }

  .trust-icon {
    width: 28px;
    height: 28px;
    border-radius: 7px;
  }

  .trust-icon svg {
    width: 15px;
    height: 15px;
  }

  .trust-item h4 {
    margin-bottom: 1px;
    font-size: 11.5px;
    line-height: 1.25;
  }

  .trust-item p {
    font-size: 10.5px;
    line-height: 1.35;
  }

  /* The Problem follows the same compact table rhythm. */
  .problem {
    padding-top: 46px;
    padding-bottom: 46px;
  }

  .problem-grid {
    gap: 28px;
  }

  .problem h2 {
    margin: 8px 0 14px;
    font-size: 29px;
    line-height: 1.08;
  }

  .problem .intro {
    max-width: none;
    margin-bottom: 22px;
    font-size: 13px;
    line-height: 1.6;
  }

  .pain-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--sand);
    border-radius: 12px;
    background: var(--warm-cream);
  }

  .pain {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    align-items: start;
    gap: 8px;
    min-width: 0;
    padding: 13px 11px;
  }

  .pain:nth-child(even) {
    border-left: 1px solid var(--sand);
  }

  .pain:nth-child(n+3) {
    border-top: 1px solid var(--sand);
  }

  .pain-icon {
    width: 26px;
    height: 26px;
    border-radius: 7px;
  }

  .pain-icon svg {
    width: 13px;
    height: 13px;
  }

  .pain h4 {
    margin-bottom: 3px;
    font-size: 11.5px;
    line-height: 1.3;
  }

  .pain p {
    font-size: 10.5px;
    line-height: 1.4;
  }

  .problem-visual img {
    aspect-ratio: 16 / 10;
    border-radius: 12px;
  }

  .problem-visual {
    padding-bottom: 0;
  }

  .missed {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 10px;
    width: auto;
    margin: 0;
    padding: 13px 14px;
    border-radius: 10px;
    background: rgba(250,247,242,.80);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }

  .missed h3 {
    margin-bottom: 4px;
    font-size: 18px;
    line-height: 1.2;
  }

  .missed h3 br {
    display: none;
  }

  .missed p {
    margin-bottom: 9px;
    font-size: 10.5px;
    line-height: 1.45;
  }

  .missed .btn {
    width: auto;
    min-height: 44px;
    padding: 8px 14px;
    font-size: 12px;
  }

  /* Industries directory */
  .page-head {
    padding: 28px 0 22px;
  }

  .page-head .t-h1 {
    font-size: 36px;
  }

  .page-head p {
    font-size: 14px;
    line-height: 1.65;
  }

  .finder {
    margin: 22px 0 20px;
  }

  .finder-search,
  .finder-select select {
    min-height: 50px;
  }

  .finder-search {
    padding-inline: 16px;
  }

  .finder-select select {
    padding: 13px 42px 13px 16px;
  }

  .directory {
    padding-bottom: 52px;
  }

  .group {
    margin-bottom: 42px;
  }

  .group h2 {
    margin-bottom: 16px;
    font-size: 27px;
  }

  .cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .icard {
    border-radius: 9px;
  }

  .icard-name {
    min-height: 44px;
    padding: 9px 10px;
    font-size: 11.5px;
    line-height: 1.25;
  }

  .notfound {
    padding: 20px;
  }

  .notfound-icon {
    width: 52px;
    height: 52px;
  }

  .bookbar-wrap {
    padding-bottom: 52px;
  }
}

@media (max-width: 380px) {
  .container {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }

  .logo-word {
    font-size: 18px;
  }

  .ind-grid {
    grid-template-columns: 1fr;
  }

  .cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .china-post {
    width: 68%;
  }

  .preview-head {
    flex-direction: column;
  }
}

/* ==============================================================
   FINAL MOBILE DENSITY SYSTEM
   One shared scale across every public page. These rules come last on
   purpose: earlier page-specific responsive rules handle layout; this layer
   gives the whole phone experience one typographic and spatial rhythm.
   ============================================================== */
@media (max-width: 560px) {
  :root {
    --m-display: 40px;
    --m-h1: 36px;
    --m-h2: 28px;
    --m-h3: 18px;
    --m-body: 15px;
    --m-small: 12.5px;
    --m-caption: 11.5px;
    --m-section: 44px;
    --m-card-pad: 18px;
    --m-gap: 12px;
  }

  body {
    font-size: var(--m-body);
    line-height: 1.6;
  }

  .container {
    padding-left: max(18px, env(safe-area-inset-left));
    padding-right: max(18px, env(safe-area-inset-right));
  }

  .t-h1,
  .page-head .t-h1,
  .q-head .t-h1 {
    font-size: var(--m-h1);
    line-height: 1.08;
    letter-spacing: -.03em;
  }

  .hero .t-h1 {
    font-size: var(--m-display);
  }

  .t-h2,
  .problem h2,
  .solution h2,
  .pricing-head h2,
  .sec-head h2,
  .contact-copy h2 {
    font-size: var(--m-h2);
    line-height: 1.14;
    letter-spacing: -.02em;
  }

  .t-h3,
  .step-head h2,
  .plan-head h3 {
    font-size: var(--m-h3);
    line-height: 1.28;
  }

  .t-body-lg,
  .t-body,
  .hero .lede,
  .p-hero .lede,
  .a-hero p,
  .page-head p,
  .q-head p,
  .legal-hero .lede {
    font-size: var(--m-body);
    line-height: 1.6;
  }

  .t-small,
  .pricing-head p,
  .sec-head p,
  .plan-desc,
  .service-copy,
  .contact-copy > p {
    font-size: var(--m-small);
    line-height: 1.6;
  }

  .eyebrow,
  .plan-kicker,
  .option-group-title {
    font-size: 10px;
    line-height: 1.45;
    letter-spacing: 1.35px;
  }

  .btn,
  .t-button {
    min-height: 46px;
    padding: 11px 18px;
    font-size: 14px;
  }

  .hero,
  .p-hero,
  .a-hero {
    padding: 32px 0 42px;
  }

  .hero-grid,
  .p-hero-grid,
  .a-hero-grid,
  .problem-grid,
  .solution-grid,
  .contact {
    gap: 26px;
  }

  .problem,
  .solution,
  .industries,
  .why,
  .approach,
  .contact-wrap,
  .china-social-section,
  .care-section,
  .services-section {
    padding-top: var(--m-section);
    padding-bottom: var(--m-section);
  }

  .pricing-head,
  .sec-head,
  .industries-head {
    margin-bottom: 28px;
  }

  /* Homepage */
  .hero .lede {
    margin-bottom: 20px;
  }

  .hero-pricing {
    width: auto;
    min-height: 46px;
    margin: 0;
    padding: 6px 7px 6px 10px;
  }

  .hero-actions {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
  }

  .hero-actions .btn {
    width: auto;
    min-width: 0;
    flex: 1 1 auto;
    padding-inline: 14px;
  }

  .hero-pricing-label {
    font-size: 7px;
  }

  .hero-pricing-value {
    font-size: 12px;
  }

  .hero-pricing-action {
    width: 28px;
    height: 28px;
    padding: 0;
  }

  .visual {
    min-height: 280px;
  }

  .trust-item h4,
  .pain h4,
  .ring .node h4,
  .ind-body h4 {
    font-size: 12.5px;
    line-height: 1.3;
  }

  .trust-item p,
  .pain p,
  .ring .node p,
  .ind-body p {
    font-size: var(--m-caption);
    line-height: 1.4;
  }

  .trust-item {
    min-height: 66px;
  }

  .problem h2 {
    margin: 7px 0 13px;
  }

  .problem .intro {
    margin-bottom: 20px;
    font-size: 13px;
    line-height: 1.55;
  }

  .pain,
  .ring .node {
    padding: 12px 10px;
  }

  .pain-grid,
  .ring {
    border-radius: 11px;
  }

  .audit-wrap {
    padding-bottom: var(--m-section);
  }

  .audit-col,
  .audit-col + .audit-col {
    padding: var(--m-card-pad);
  }

  .audit-intro {
    padding: 20px 18px;
  }

  .audit-intro h2 {
    font-size: 24px;
  }

  .audit-intro p {
    font-size: 12px;
  }

  .solution-grid {
    gap: 24px;
  }

  .ind-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--m-gap);
  }

  .ind-body {
    padding: 11px;
  }

  .cta-wrap {
    padding-bottom: var(--m-section);
  }

  .cta {
    padding: 20px 18px;
    gap: 18px;
  }

  .cta-copy h2 {
    font-size: 24px;
  }

  .cta-copy p {
    font-size: var(--m-small);
  }

  /* Pricing */
  .p-hero {
    padding: 28px 0 36px;
  }

  .p-hero-grid {
    gap: 22px;
  }

  .p-hero-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 43%;
  }

  .p-hero-img {
    height: clamp(160px, 45vw, 210px);
    aspect-ratio: auto;
  }

  .packages {
    padding: var(--m-section) 0;
  }

  .hero-features {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .feature {
    gap: 9px;
  }

  .feature-icon {
    width: 32px;
    height: 32px;
  }

  .feature h4 {
    font-size: 12px;
  }

  .feature p {
    font-size: var(--m-caption);
  }

  .plans {
    display: flex;
    align-items: flex-start;
    gap: var(--m-gap);
    margin-right: 0;
    padding: 2px 0 16px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-padding-inline: 0;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

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

  .plans-scroll-hint {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
    margin-top: 16px;
    padding: 10px 12px;
    border: 1px solid rgba(200, 152, 69, .55);
    border-radius: 10px;
    background: rgba(200, 152, 69, .12);
    color: var(--deep-olive);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .2px;
    box-shadow: 0 8px 20px rgba(58, 63, 42, .07);
  }

  .plans-scroll-hint span {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--deep-olive);
    color: var(--warm-cream);
    font-size: 17px;
  }

  .plan {
    flex: 0 0 100%;
    width: 100%;
    padding: 18px 15px 16px;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .plan-featured {
    padding-top: 0;
  }

  .plan-flag {
    margin: 0 -15px 16px;
    padding: 8px;
  }

  .plan-head {
    margin-bottom: 8px;
  }

  .plan-desc {
    margin-bottom: 14px;
  }

  .plan-price .amount {
    font-size: 28px;
  }

  .plan-list {
    margin: 16px 0;
    gap: 7px;
  }

  .plan-list li {
    gap: 8px;
    font-size: 11.5px;
    line-height: 1.45;
  }

  .plan-fit,
  .plan-excludes {
    padding: 0 11px;
    margin-bottom: 10px;
    font-size: var(--m-caption);
  }

  .plan-disclosure summary {
    min-height: 44px;
  }

  .plan-disclosure p {
    padding: 0 0 10px;
  }

  .china-social-copy h2 {
    font-size: 34px;
    line-height: 1.08;
  }

  .china-social-lede {
    font-size: 13.5px;
    line-height: 1.65;
  }

  .china-disclosure {
    margin-top: 18px;
  }

  .china-disclosure summary,
  .china-offer-disclosure summary {
    min-height: 46px;
    padding-inline: 14px;
  }

  .china-disclosure-body {
    padding: 0 14px 14px;
  }

  .china-stats {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 22px;
  }

  .china-stat {
    min-height: 0;
    padding: 14px;
  }

  .china-stat b {
    margin-bottom: 8px;
    font-size: 27px;
  }

  .china-stat span {
    font-size: 11px;
  }

  .china-stat small {
    font-size: 10.5px;
  }

  .a-hero-img img {
    aspect-ratio: 16 / 10;
  }

  .china-collage {
    min-height: 310px;
  }

  .china-photo-main {
    right: 0;
    top: 0;
    width: 92%;
    height: 68%;
    border-radius: 14px;
    transform: rotate(1deg);
  }

  .china-photo-detail {
    left: 0;
    bottom: 2px;
    width: 50%;
    height: 38%;
    border-width: 4px;
    border-radius: 14px;
    transform: rotate(-1.5deg);
  }

  .china-post {
    left: auto;
    right: 0;
    top: auto;
    bottom: 3%;
    width: 56%;
    padding: 12px;
    border-radius: 12px;
    transform: rotate(1deg);
  }

  .china-post-top {
    gap: 7px;
    margin-bottom: 8px;
    font-size: 9px;
  }

  .china-post-avatar {
    width: 22px;
    height: 22px;
  }

  .china-post strong {
    margin-bottom: 5px;
    font-size: 14px;
    line-height: 1.25;
  }

  .china-post p {
    font-size: 9.5px;
    line-height: 1.45;
  }

  .china-post-tags {
    margin-top: 8px;
    font-size: 8.5px;
    line-height: 1.45;
  }

  .china-offer {
    gap: 0;
    margin-top: 28px;
    padding: 18px 15px;
  }

  .china-offer h3 {
    margin: 8px 0 12px;
    font-size: 24px;
  }

  .china-price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 30px;
    margin-bottom: 10px;
  }

  .china-price small {
    display: inline;
    margin: 0;
  }

  .china-offer-disclosure {
    margin-bottom: 10px;
  }

  .china-offer .btn {
    margin-top: 4px;
  }

  .china-offer-disclosure .china-service-list {
    grid-template-columns: 1fr;
    padding: 0 14px 14px;
  }

  .service-block + .service-block {
    margin-top: 38px;
  }

  .service-block-head {
    gap: 10px;
    margin-bottom: 16px;
  }

  .service-block-head h2 {
    font-size: 24px;
  }

  .service-row {
    gap: 6px;
    padding: 16px;
  }

  .service-block-head-stacked {
    margin-bottom: 10px;
  }

  .service-block-head-stacked p {
    margin-top: 7px;
    font-size: 12px;
    line-height: 1.6;
  }

  .service-responsibility {
    margin-bottom: 14px;
    padding: 10px 11px;
    font-size: 10.5px;
  }

  .service-detail-intro {
    margin-bottom: 10px;
  }

  .service-includes {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .service-includes li,
  .service-platforms,
  .service-excludes {
    font-size: 11px;
  }

  .service-name {
    font-size: 13px;
  }

  .service-price {
    font-size: 18px;
  }

  .support-bar,
  .quote {
    padding: 20px 18px;
  }

  .quote-wrap {
    padding-bottom: var(--m-section);
  }

  /* About */
  .a-hero .btn {
    margin-top: 14px;
  }

  .why-grid {
    gap: 0;
  }

  .why-item,
  .why-item + .why-item {
    gap: 13px;
    padding-top: 18px;
  }

  .why-item:first-child {
    padding-top: 0;
  }

  .why-num {
    width: 34px;
    height: 34px;
  }

  .why-item p {
    font-size: 13px;
    line-height: 1.65;
  }

  .principles {
    grid-template-columns: 1fr 1fr;
    gap: var(--m-gap);
  }

  .principle {
    min-height: 0;
    padding: 18px 15px 16px;
  }

  .principle-num {
    font-size: 72px;
  }

  .principle-icon {
    width: 34px;
    height: 34px;
    margin-bottom: 12px;
  }

  .principle h4 {
    font-size: 13px;
  }

  .principle p {
    font-size: 11.5px;
    line-height: 1.5;
  }

  .contact-copy h2 {
    margin-bottom: 14px;
  }

  .contact-rule {
    margin: 22px 0;
  }

  .contact-list {
    gap: 12px;
  }

  .contact-item {
    min-height: 48px;
    gap: 12px;
  }

  .contact-item-icon {
    width: 38px;
    height: 38px;
  }

  .contact-form {
    padding: var(--m-card-pad);
  }

  /* Industries */
  .page-head {
    padding: 28px 0 20px;
  }

  .finder {
    margin: 20px 0 18px;
  }

  .finder-search,
  .finder-select select {
    min-height: 50px;
  }

  .directory {
    padding-bottom: var(--m-section);
  }

  .group {
    margin-bottom: 34px;
  }

  .group h2 {
    margin-bottom: 14px;
    font-size: 25px;
  }

  .cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--m-gap);
  }

  .icard-name {
    min-height: 42px;
    padding: 8px 9px;
    font-size: 11.5px;
  }

  .notfound,
  .bookbar {
    padding: var(--m-card-pad);
  }

  .bookbar-wrap {
    padding-bottom: var(--m-section);
  }

  /* Quote builder */
  .q-head {
    padding: 28px 0 20px;
  }

  .q-layout {
    gap: 14px;
    padding-bottom: var(--m-section);
  }

  .summary,
  .step-card {
    padding: var(--m-card-pad);
  }

  .summary .eyebrow {
    margin-bottom: 8px;
  }

  .sum-range {
    font-size: 30px;
  }

  .sum-lines {
    margin: 18px 0;
  }

  .sum-lines li {
    min-height: 40px;
    padding: 7px 0;
    font-size: 12px;
  }

  .step-card {
    margin-bottom: 14px;
  }

  .step-head {
    gap: 10px;
    margin-bottom: 18px;
  }

  .step-num {
    width: 28px;
    height: 28px;
  }

  .step-head p,
  .opt-desc {
    font-size: var(--m-caption);
  }

  .opts,
  .opts-2,
  .opts-3,
  .field-row {
    gap: 10px;
  }

  .opt {
    min-height: 60px;
    padding: 13px 14px;
  }

  .opt-title {
    font-size: 13px;
  }

  .field {
    margin-bottom: 16px;
  }

  .done {
    padding: 42px 20px;
  }

  .done h2 {
    font-size: 24px;
  }

  /* Legal + footer */
  .legal-hero {
    padding: 36px 0;
  }

  .legal-hero h1 {
    font-size: var(--m-h1);
  }

  .legal-main {
    padding: 36px 0 var(--m-section);
  }

  .legal-grid {
    gap: 24px;
  }

  .legal-toc {
    padding: 16px;
  }

  .legal-toc ol {
    grid-template-columns: 1fr 1fr;
    gap: 4px 14px;
  }

  .legal-toc a {
    min-height: 44px;
    font-size: 12px;
  }

  .legal-intro,
  .contact-card {
    padding: var(--m-card-pad);
  }

  .legal-intro {
    margin-bottom: 30px;
    font-size: 14px;
    line-height: 1.65;
  }

  .legal-section {
    padding-bottom: 28px;
    margin-bottom: 28px;
  }

  .legal-section h2 {
    margin-bottom: 16px;
    font-size: 24px;
  }

  .legal-section p,
  .legal-section li {
    font-size: 14px;
    line-height: 1.68;
  }

  .footer {
    padding: var(--m-section) 0 24px;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 24px 18px;
  }

  .footer-grid > :first-child {
    grid-column: 1 / -1;
  }

  .footer-about {
    margin-bottom: 12px;
    font-size: 12px;
  }

  .footer-col h5 {
    margin-bottom: 7px;
  }

  .footer-col p,
  .footer-col a {
    font-size: 11.5px;
    line-height: 1.55;
  }

  .footer-col {
    min-width: 0;
  }

  .footer-col a {
    min-height: 44px;
    overflow-wrap: anywhere;
  }

  .footer-bottom {
    margin-top: 28px;
    padding-top: 18px;
  }
}

@media (max-width: 360px) {
  .container {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }

  .principles,
  .legal-toc ol,
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .footer-grid > :first-child {
    grid-column: auto;
  }

  .hero-pricing-action {
    width: 28px;
    padding: 0;
    justify-content: center;
  }
}

/* Mobile refinements from the annotated handset review. These stay at the end
   of the responsive layer so the desktop compositions remain untouched. */
@keyframes mobile-swipe-nudge {
  0%, 55%, 100% { transform: translateX(0); }
  72% { transform: translateX(4px); }
  86% { transform: translateX(-1px); }
}

@media (max-width: 560px) {
  /* A single, swipeable row gives the short trust points a different rhythm
     from the Problem and Solution tables below it. */
  .trust {
    overflow: hidden;
  }

  .trust-grid {
    display: flex;
    gap: 10px;
    padding-top: 14px;
    padding-bottom: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 18px;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .trust-grid::-webkit-scrollbar {
    display: none;
  }

  .trust-item {
    flex: 0 0 calc(100% - 44px);
    min-height: 72px;
    padding: 13px 14px;
    border: 1px solid var(--sand);
    border-radius: 10px;
    background: var(--warm-cream);
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .trust-item:nth-child(even),
  .trust-item:nth-child(n+3) {
    border: 1px solid var(--sand);
  }

  /* Give the table and restaurant image a visible band of page colour between
     them, instead of letting two large rectangles visually merge. */
  .problem {
    padding-top: 56px;
    padding-bottom: 56px;
  }

  .problem-grid {
    gap: 36px;
  }

  /* The rosemary edge treatment is a desktop decoration and should not look
     like a framed graphic on a phone. */
  .p-hero::before,
  .p-hero::after {
    display: none !important;
  }

  /* The hint is also a real control: tapping it advances one complete card and
     tapping it on the final card returns to the beginning. */
  .plans-scroll-hint {
    width: 100%;
    border: 1px solid rgba(200, 152, 69, .62);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
  }

  .plans-scroll-hint span {
    animation: mobile-swipe-nudge 1.8s ease-in-out infinite;
  }

  .rollover-summary,
  .care-rule {
    display: none;
  }

  /* Keep the About photo as a short scene-setter rather than a full-screen
     image, while retaining the useful desk-and-sketch focal area. */
  .a-hero-img {
    height: clamp(150px, 42vw, 176px);
    border-radius: 12px;
    overflow: hidden;
  }

  .a-hero-img img {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
    object-position: center 63%;
  }

  .why {
    padding-bottom: 72px;
  }

  .why-item,
  .why-item + .why-item {
    padding: 20px 0 22px;
    border-top: 0;
    border-left: 0;
    border-bottom: 1px solid var(--sand);
  }

  .why-item:first-child {
    padding-top: 0;
  }

  .why-item:last-child {
    padding-bottom: 0;
    border-bottom: 0;
  }

  .approach {
    padding-top: 60px;
  }

  /* The underline makes the legal table of contents read as a set of working
     jump links, not passive labels. */
  .legal-toc a {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    color: var(--charcoal);
    text-decoration: underline;
    text-decoration-color: var(--stone);
    text-decoration-thickness: 2px;
    text-underline-offset: 8px;
  }

  .legal-toc a:hover,
  .legal-toc a:focus-visible {
    color: var(--deep-olive);
    text-decoration-color: var(--olive-green);
  }
}

@media (pointer: coarse) {
  .btn:hover svg,
  .link-arrow:hover svg {
    transform: none;
  }

  .plan:hover,
  .principle:hover,
  .icard:hover,
  .ind-card:hover {
    transform: none;
    box-shadow: none;
  }

  a,
  button,
  label,
  select {
    -webkit-tap-highlight-color: rgba(107, 122, 74, .16);
  }
}

/* Compact website-care information control. */
@media (max-width: 900px) {
  .care-title-row {
    justify-content: flex-start;
    align-items: flex-start;
    gap: 8px;
  }

  .care-title-row h2 {
    min-width: 0;
  }

  .care-heading-info {
    margin-top: 5px;
  }

  /* Keep the audit as one complete block on phones: message, fields, action
     and reassurance belong to the same customer task. */
  .audit-wrap {
    padding-bottom: var(--m-section);
  }

  .audit {
    display: block;
    gap: 0;
    overflow: hidden;
    border: 1px solid rgba(250,247,242,.12);
    border-radius: 18px;
    background: var(--deep-olive);
    box-shadow: none;
  }

  .audit-main {
    display: block;
    padding: 28px 20px 22px;
  }

  .audit-intro {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .audit-intro h2 {
    margin: 8px 0 12px;
    color: var(--warm-cream);
    font-size: 34px;
    line-height: 1.08;
  }

  .audit-intro p {
    margin: 0;
    color: var(--sage);
    font-size: 15px;
    line-height: 1.6;
  }

  .audit-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 24px;
  }

  .audit-form .field,
  .audit-form .field:first-child,
  .audit-form .btn,
  .audit-form .form-msg {
    grid-column: 1;
    margin: 0;
  }

  .audit-form .field label {
    margin-bottom: 7px;
    color: var(--warm-cream);
    font-size: 10px;
    letter-spacing: 1px;
  }

  .audit-form .field input,
  .audit-form .field select,
  .audit-form .btn {
    min-height: 52px;
    padding: 13px 14px;
  }

  .audit-assurances {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 8px;
    margin-top: 22px;
    padding-top: 18px;
    font-size: 10px;
  }

  .audit-assurances span {
    gap: 5px;
    white-space: nowrap;
  }

  .audit-assurances span::before {
    width: 17px;
    height: 17px;
    font-size: 10px;
  }

  .audit > #auditResult,
  .audit > #auditResult.audit-col {
    margin: 0;
    padding: 20px;
    border: 0;
    border-top: 1px solid var(--sand);
    border-radius: 0;
    background: var(--oat);
  }
}

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

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}