/* Phone layouts only. Public content, desktop styling and business pages stay independent. */
@media screen and (max-width:700px) {
  html {scroll-padding-top:78px}
  .wrap {width:calc(100% - 40px)}
  p {line-height:1.85}
  p+p {margin-top:12px}
  h1,h2,h3 {text-wrap:balance}
  .header {height:60px;padding-inline:20px;gap:16px}
  .header .brand {width:130px}
  .header nav {top:59px;padding:12px 20px 18px;max-height:calc(100dvh - 60px)}
  .header nav.is-open {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:22px}
  .header nav>a {min-height:48px;padding:12px 0;font-size:14px}
  .header nav>a[aria-current=page] {color:#765c46;font-weight:600}
  .header nav .client-link {grid-column:1/-1;margin-top:8px;padding:12px 0!important}
  .menu-toggle {padding:10px}
  .menu-toggle[aria-expanded=true] span:first-child {transform:translateY(3.5px) rotate(45deg)}
  .menu-toggle[aria-expanded=true] span:last-child {transform:translateY(-3.5px) rotate(-45deg)}
  .section {padding-block:38px}
  .section+.section {padding-top:20px}
  .section-head {margin-bottom:24px;padding-top:14px;gap:12px;line-height:1.6}
  .section-title {gap:14px;margin-bottom:24px}
  h2,.section-title h2 {font-size:26px;line-height:1.5}
  .eyebrow {font-size:10px;letter-spacing:.09em}
  .page-intro {padding:30px 0 26px}
  .page-intro h1 {font-size:clamp(26px,7.2vw,32px);margin:15px 0 16px;line-height:1.5}
  .page-intro p,.lead {font-size:14px;line-height:1.85}
  .lead {margin:18px 0 24px}
  .actions {gap:10px;margin-top:22px}
  .actions .dark-button,.actions .outline-link {min-height:46px;padding:10px 16px;gap:12px;justify-content:center}
  .text-link {white-space:normal;gap:20px;min-height:44px}
  .outline-link,.dark-button {padding:10px 18px;min-height:46px}

  /* Let the first screen show the studio, the actions and the beginning of the photos. */
  .hero {padding-top:18px}
  .hero-marker {margin-bottom:16px;font-size:10px;letter-spacing:.03em}
  .hero-marker>span:first-child,.hero-copy>.eyebrow {display:none}
  .hero-copy {padding-top:0}
  .hero-copy h1 {font-size:32px;line-height:1.45}
  .hero-description {font-size:16px;margin-top:14px}
  .hero-copy .hero-service {font-size:14px;margin-top:14px;line-height:1.85}
  .hero-copy .actions {display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}
  .hero-copy .actions>a:nth-child(n+3) {min-height:44px;background:transparent;border:0;border-bottom:1px solid var(--line);padding:5px 0;font-size:12px;white-space:nowrap}
  .hero-copy .hero-note {margin-top:12px;padding-top:0;border:0;gap:3px;font-size:10px;line-height:1.8}
  .hero-visual {margin-top:20px}
  .hero-visual>img {height:clamp(235px,65vw,330px);aspect-ratio:auto;object-fit:cover;object-position:center 52%;background:#e9e6df}
  .hero-caption {padding:6px 0;gap:0;align-items:center}
  .hero-caption>a {font-size:10px}
  .hero-caption .slide-control {gap:0}
  .hero-caption .slide-control span {min-width:44px}
  .hero-caption .slide-control button {padding:0;min-width:36px;min-height:44px}
  .hero-caption .slide-control #hero-pause {min-width:44px}
  .scroll-hint {margin-top:18px}

  /* Compact reading rows keep all service and process descriptions visible. */
  .service-grid {gap:22px}
  .service-grid>article {padding-top:18px}
  .service-grid h3 {font-size:20px;margin:10px 0}
  .service-grid p {font-size:14px;line-height:1.85}
  [data-page=index] .service-grid>article {display:grid;grid-template-columns:24px minmax(0,1fr);column-gap:14px}
  [data-page=index] .service-grid>article>span {grid-row:1/3;padding-top:3px}
  [data-page=index] .service-grid h3 {grid-column:2;margin:0 0 8px;font-size:19px}
  [data-page=index] .service-grid p {grid-column:2}
  .process-grid,.process-grid.six {grid-template-columns:1fr;gap:0;margin-top:24px}
  .process-grid article {display:grid;grid-template-columns:26px minmax(0,1fr);column-gap:14px;padding:18px 0}
  .process-grid article>span {grid-column:1;grid-row:1/5;padding-top:3px}
  .process-grid h3 {grid-column:2;font-size:18px;margin:0 0 8px}
  .process-grid p {grid-column:2;font-size:14px;line-height:1.8}
  .process-grid .confirm-line {margin-top:10px;padding-left:10px;font-size:13px}
  .values-grid {gap:22px}
  .values-grid article {padding-bottom:20px}
  .values-grid h3 {margin:8px 0 10px}
  .values-grid p {font-size:14px}
  .editorial,.editorial.reverse {gap:24px;padding-block:32px}
  .editorial h2 {font-size:26px;margin:10px 0 16px}
  .editorial>div p {font-size:14px;margin-top:14px}
  .storage-band {padding-block:36px}
  .storage-feature {gap:24px}
  .storage-feature h2,.detail-feature h2 {font-size:26px;margin-bottom:16px}
  .storage-image img {max-height:300px;aspect-ratio:auto;object-fit:contain}
  .storage-feature p,.detail-feature p {font-size:14px}
  .inline-list {gap:8px;margin:16px 0 20px}
  .detail-feature {gap:22px}
  .detail-feature figure img {max-height:340px;object-fit:contain}

  /* Home: one case and a glimpse of the next. Case index: concise image/text rows. */
  [data-page=index] .case-grid {display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:86%;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:#b2a898 transparent;margin-top:22px;padding-bottom:12px}
  [data-page=index] .case-card {scroll-snap-align:start;min-width:0}
  [data-page=index] .case-card img {height:290px;aspect-ratio:auto;object-fit:contain}
  .case-meta {padding:14px 0}
  .case-card h3 {font-size:21px;margin:8px 0}
  .case-meta p {font-size:13px;line-height:1.8}
  .case-meta p+p {margin-top:4px}
  .case-meta .text-link {margin-top:10px}
  [data-page=cases] .case-grid {gap:0;margin-top:24px}
  [data-page=cases] .case-card>a {display:grid;grid-template-columns:34% minmax(0,1fr);gap:16px;padding:20px 0;border-bottom:1px solid var(--line);align-items:start}
  [data-page=cases] .case-card img {aspect-ratio:auto;height:170px;object-fit:contain;background:#e9e6df}
  [data-page=cases] .case-meta {padding:0;border:0;min-width:0}
  [data-page=cases] .case-card h3 {font-size:20px;line-height:1.5;margin:6px 0 8px}
  [data-page=cases] .case-meta .eyebrow {font-size:10px;letter-spacing:0}
  [data-page=cases] .case-meta .text-link {font-size:12px;margin-top:6px}
  .tabs {gap:20px;padding-bottom:12px;line-height:1.7}
  .tabs a {display:flex;align-items:center;min-height:44px}
  .case-facts {gap:14px;margin-bottom:26px;padding:22px 0}
  .case-facts>div {display:grid;grid-template-columns:68px minmax(0,1fr);gap:14px}
  .case-facts span {margin:0}
  .story-grid {padding:32px 0;gap:24px}
  .story-grid article {padding-top:18px}
  .story-grid h2 {font-size:23px;margin-bottom:12px}
  .case-gallery {gap:24px}
  .case-gallery img {max-height:440px;object-fit:contain}

  /* Portraits stay complete, but no longer occupy a full screen for each person. */
  .team-grid {grid-template-columns:1fr;gap:24px}
  .team-grid article {display:grid;grid-template-columns:96px minmax(0,1fr);column-gap:18px;align-content:start;border-top:1px solid var(--line);padding-top:20px}
  .team-grid figure {grid-column:1;grid-row:1/5}
  .team-grid img {height:132px;aspect-ratio:auto;object-fit:contain}
  .team-grid figcaption {font-size:9px;line-height:1.7;padding-top:6px;margin:0}
  .team-grid .eyebrow {grid-column:2;margin:0}
  .team-grid h3 {grid-column:2;font-size:22px;margin:5px 0 9px}
  .team-grid p {grid-column:2;font-size:14px;line-height:1.85}
  [data-page=products] .service-grid>article {display:grid;grid-template-columns:34% minmax(0,1fr);gap:0 16px}
  [data-page=products] .service-grid figure {grid-row:1/3}
  [data-page=products] .service-grid figure img {height:180px;object-fit:contain;background:#e9e6df}
  [data-page=products] .service-grid figcaption {font-size:10px;line-height:1.7;padding-top:8px}
  [data-page=products] .service-grid h3 {grid-column:2;margin:0 0 10px}
  [data-page=products] .service-grid p {grid-column:2}
  .materials-grid {gap:20px}
  .materials-grid article {padding:20px}
  .materials-grid h3 {font-size:22px;margin:8px 0 12px}
  .materials-grid p {font-size:14px}
  .config-grid {gap:12px}
  .config-grid article {padding:20px}
  .config-grid h3 {margin-bottom:10px}
  .config-grid p {font-size:14px}
  .subheading {font-size:23px;margin:30px 0 18px}
  .info-card {padding:20px}
  .info-card h2 {font-size:24px}
  .faq-list details {padding:14px 0}
  .faq-list summary {font-size:16px;line-height:1.7}
  .faq-list details>p {margin-top:12px}
  .status-strip {margin:22px 0;padding:18px}

  /* Contact details and the QR share one clear block; form fields retain 16px text. */
  .contact-cards {gap:20px}
  .contact-cards article {padding:20px 0}
  .contact-cards h2 {font-size:25px;margin:12px 0}
  .contact-cards p {font-size:14px}
  .contact-cards .outline-link {margin:14px 0}
  .wechat-layout {grid-template-columns:140px minmax(0,1fr);gap:16px;align-items:start}
  .qr-image {width:140px;max-width:100%}
  .wechat-layout p {font-size:13px}
  .wechat-layout .outline-link {padding:8px 12px}
  .contact-cards dl {grid-template-columns:74px minmax(0,1fr);gap:14px 12px;margin:20px 0}
  .contact-cards dd {margin:0;font-size:14px}
  .contact-layout {padding:32px 0 38px;gap:26px}
  .contact-layout h2 {font-size:26px;margin:14px 0 18px}
  .contact-layout>div>p {font-size:14px}
  .contact-note {margin:24px 0 12px;padding-top:18px}
  .contact-layout form {padding-top:24px}
  .contact-layout label {margin-top:18px}
  .contact-layout .form-row {grid-template-columns:1fr 1fr;gap:16px}
  .privacy-block {padding:30px 0 38px}
  .privacy-block h2 {font-size:24px;margin:14px 0}
  .client-intro {padding:32px 0 38px;gap:24px}

  /* Installation: preserve complete photographs, four-second playback and controls. */
  .install-intro {padding-top:22px;padding-bottom:26px}
  .install-crumb {margin-bottom:24px}
  .install-hero {gap:22px}
  .install-hero h1 {font-size:30px;margin:16px 0;line-height:1.5}
  .install-hero .install-lead {font-size:17px}
  .install-hero .text-link {margin-top:16px}
  .install-hero>.install-photo img {max-height:290px;object-fit:contain}
  .install-chapters {padding:6px 0;margin-bottom:0}
  .install-chapters a {min-height:44px;padding:10px 4px;gap:12px}
  .install-section {padding-block:36px}
  .install-heading {grid-template-columns:23px minmax(0,1fr);gap:13px;margin-bottom:22px}
  .install-heading h2 {font-size:25px;line-height:1.5}
  .install-heading .eyebrow {font-size:9px;margin-bottom:10px}
  .install-heading p {margin-top:12px}
  .install-feature {gap:22px}
  .install-copy .install-statement {font-size:23px;margin-bottom:16px}
  .install-notes {margin-top:20px}
  .install-notes li {padding-block:11px}
  .install-carousel,.install-carousel-wide {--frame-height:clamp(290px,92vw,380px)}
  .install-carousel .install-slide figcaption {min-height:56px;padding-top:10px;font-size:11px}
  .install-carousel-controls {padding-top:6px}
  .install-fittings {gap:22px;padding-block:26px}
  .install-fittings .install-photo img {max-height:270px;object-fit:contain}
  .install-comparison {gap:28px}
  .install-comparison h3 {font-size:22px}
  .install-closing {margin-top:28px;padding-top:28px}
  .installation-entry {gap:22px}
  .installation-entry h2 {font-size:26px}

  .related {gap:14px;margin-bottom:38px}
  .related>a {padding:20px}
  .related h3 {font-size:19px;margin:10px 0 14px}
  .cta {padding:38px 0 44px}
  .cta h2 {font-size:26px}
  .cta .eyebrow {margin-bottom:18px;font-size:9px}
  .cta p {margin-top:16px;font-size:13px}
  .cta .actions {margin-top:22px;display:grid;grid-template-columns:1fr 1fr}
  .footer {padding:34px 20px 18px}
  .footer-grid {gap:26px;margin-bottom:26px}
  .footer-logo {width:144px}
  .footer-tag {display:none}
  .footer-grid>div:first-child>p:not(.footer-tag) {margin-top:10px;font-size:12px}
  .foot-label {padding-bottom:10px;margin-bottom:14px;letter-spacing:.07em}
  .footer p {font-size:13px}
  .footer p+p {margin-top:10px}
  .foot-phone {display:flex;align-items:center;min-height:44px;margin-top:4px;font-size:18px}
  .footer-grid>div:last-child {display:grid;grid-template-columns:1fr 1fr;column-gap:18px}
  .footer-grid>div:last-child>.foot-label {grid-column:1/-1}
  .footer-grid>div:last-child>a {display:flex;align-items:center;min-height:44px;padding:6px 0;font-size:13px}
  .footer-bottom {gap:4px;padding-top:16px}
  .footer-copyright {font-size:11px}
  .footer-top-link {display:flex;align-items:center;min-height:44px}
}
@media screen and (max-width:359px) {
  .wrap {width:calc(100% - 32px)}
  .header,.footer {padding-inline:16px}
  .hero-copy h1 {font-size:30px}
  .page-intro h1 br {display:none}
  .wechat-layout {grid-template-columns:118px minmax(0,1fr);gap:12px}
  .qr-image {width:118px}
  .team-grid article {grid-template-columns:82px minmax(0,1fr);column-gap:14px}
  .hero-caption {flex-direction:column;align-items:stretch}
  .hero-caption .slide-control {justify-content:space-between}
  .contact-layout .form-row {grid-template-columns:1fr;gap:0}
}
@media screen and (max-width:700px) {
  .journal-reading {padding:28px 20px;max-width:100%}
  .journal-reading h1 {font-size:clamp(26px,7.2vw,32px);line-height:1.5}
  .journal-reading h2 {font-size:23px;margin-top:28px}
  .journal-reading p {font-size:16px;line-height:1.9}
  .journal-lead {margin:18px 0 28px}
  .journal-reading article section {margin-bottom:24px}
  .journal-crumb {font-size:12px;margin-bottom:22px}
  .journal-question-grid {grid-template-columns:1fr;gap:24px}
  .journal-question-grid article {padding-top:18px}
  .journal-question-grid h2 {font-size:23px}
}
@media screen and (max-width:700px) {
  [data-page=products] .service-grid>article {grid-template-rows:auto 1fr;align-items:start}
}