/* Mobile composition only. Desktop styles remain owned by the existing files.
 * References: Shopify Dawn's image-first catalog; Baymard mobile navigation.
 */
@media (max-width:760px) {
  :root { --pad:1rem; --section:2rem; --heading-gap:1.25rem; }
  html { scroll-padding-top:6rem; }
  body { min-width:0; padding-bottom:calc(78px + env(safe-area-inset-bottom)); }
  .site-header { top:calc(.5rem + env(safe-area-inset-top)); }
  .header-shell { min-height:60px; border-radius:14px; box-shadow:0 6px 24px #10271f12; }
  .brand-logo { width:7.2rem; }
  .site-nav .mobile-nav-card a { min-height:44px; }
  .btn, .text-link { min-height:44px; }
  .text-link { display:inline-flex; align-items:center; }
  a, button { touch-action:manipulation; }
  .eyebrow { font-size:.65rem; letter-spacing:.12em; margin-bottom:.75rem; }
  .page-hero, .inquiry-hero { padding-top:6.5rem; }
  .page-hero__grid { gap:1rem; }
  .page-title { font-size:clamp(2.4rem,10vw,3.6rem); line-height:1.05; letter-spacing:-.04em; }
  .page-hero__aside p { margin:0 0 .75rem; font-size:.95rem; }
  .section-heading h2, .capability-copy h2, .final-cta h2, .sl-heading h2 {
    font-size:clamp(2rem,8.5vw,2.7rem); line-height:1.08; letter-spacing:-.035em;
  }
  .section-heading p, .capability-copy p, .sl-heading > p { font-size:.95rem; line-height:1.65; }
  .v2-split, .capability-grid { gap:1.5rem; }
  .breadcrumbs { gap:.5rem; margin-bottom:1rem; font-size:.75rem; }
  .breadcrumbs a { display:inline-flex; align-items:center; min-height:44px; }

  /* The sample sits directly under the headline; actions stay next to it. */
  .hero-grid { padding-top:6.5rem; padding-bottom:1.5rem; gap:1rem; }
  .hero-copy { display:contents; }
  .hero-eyebrow { order:0; margin:0; }
  .hero-title { order:1; font-size:clamp(2.4rem,10vw,3.6rem); line-height:1.06; letter-spacing:-.04em; }
  .hero-media { order:2; width:100%; aspect-ratio:1.65; border-radius:12px; }
  .hero-lede { order:3; margin:0; font-size:.93rem; line-height:1.6; }
  .hero-actions { order:4; flex-direction:row; flex-wrap:wrap; gap:.5rem 1.25rem; margin:0; }
  .hero-actions .btn { width:auto; flex:1; padding:.85rem 1rem; }
  .hero-actions .text-link { font-size:.85rem; }
  .hero-proof { flex-direction:row; order:5; gap:.5rem .85rem; margin:.25rem 0 0; font-size:.58rem; letter-spacing:.04em; }
  .hero-proof span:not(:last-child)::after { margin-left:.85rem; }
  .hero-media .image-badge { font-size:.55rem; padding:.4rem .6rem; bottom:.5rem; left:.5rem; }

  /* One compact try-on workspace: garment immediately above the controls. */
  .page-home .lab-section { gap:.7rem; }
  .page-home .lab-copy { display:contents; }
  .page-home .lab-copy > .eyebrow { order:0; margin:0; }
  .page-home .lab-copy h2 { order:1; font-size:2.2rem; margin:0; }
  .page-home .lab-copy > p:not([class]) { order:2; margin:0 0 .3rem; font-size:.9rem; line-height:1.6; }
  .page-home .lab-visual { order:3; position:relative; }
  .page-home .lab-stage { max-width:400px; margin:auto; }
  .page-home .lab-counter { position:absolute; right:.8rem; bottom:.6rem; font-size:.65rem; margin:0; }
  .page-home .lab-stamp { bottom:6%; font-size:1rem; }
  .page-home .lab-current { order:4; min-height:1.5em; margin:.4rem 0 0; font-size:.9rem; }
  .page-home .lab-strip { order:5; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; margin:.2rem 0; max-width:none; padding:4px; }
  .page-home .lab-strip button { min-height:44px; min-width:44px; background:var(--surface); }
  .page-home .lab-copy [data-lab-quote] { order:6; justify-self:start; }
  .page-home .lab-copy [data-patch-detail] { order:7; justify-self:start; font-size:.85rem; }
  .page-home .lab-note { order:8; margin:0; font-size:.7rem; }

  /* Material studies read like sample sheets instead of oversized sections. */
  .sl-home .sl-chapter { padding:0; gap:0; margin:0 0 1.5rem; background:var(--surface); border:1px solid var(--line); border-radius:14px; overflow:hidden; }
  .sl-home .sl-chapter-photo img { aspect-ratio:1.5; object-fit:contain; background:white; }
  .sl-home .sl-chapter-copy { padding:1.1rem; }
  .sl-home .sl-chapter h3 { font-size:1.8rem; margin:.6rem 0; }
  .sl-home .sl-chapter-copy > p { font-size:.9rem; line-height:1.6; }
  .sl-home .sl-detail { font-size:.78rem; padding-block:.75rem; }
  .sl-home .sl-rule { width:2rem; }
  .sl-home .sl-links { margin-top:.5rem; }
  .sl-home .sl-links a { min-height:44px; display:inline-flex; align-items:center; }

  .v2-product-grid { gap:.85rem; }
  .v2-product-card .product-card-link, .v2-product-card:last-child:nth-child(odd) .product-card-link {
    display:grid; grid-template-columns:40% minmax(0,1fr); align-items:stretch;
  }
  .product-photo { min-height:160px; }
  .product-photo img { height:100%; aspect-ratio:auto; padding:.5rem; }
  .product-photo > span { top:.5rem; left:.5rem; font-size:.6rem; padding:.2rem .4rem; }
  .v2-card-copy { padding:1rem .85rem; align-self:center; }
  .v2-card-copy .eyebrow { display:none; }
  .v2-card-copy h3 { font-size:1.2rem; line-height:1.25; margin:0 0 .5rem; }
  .v2-card-copy h3 a { display:block; min-height:44px; }
  .v2-card-copy p:last-child { font-size:.8rem; line-height:1.5; }
  .media-grid, .media-grid--two { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem; }
  .media-copy { padding:.8rem; }
  .media-copy h3 { font-size:.85rem; line-height:1.4; }
  /* Repeated sample notes remain available in the enlarged image caption. */
  .media-card--products .media-copy > p:not(.eyebrow),
  .media-card--applications .media-copy > p:not(.eyebrow) { display:none; }
  .media-copy .eyebrow { font-size:.55rem; }
  .media-copy > p:not(.eyebrow) { font-size:.75rem; line-height:1.5; }
  .media-copy .text-link { font-size:.75rem; line-height:1.4; }
  .media-image-link img { aspect-ratio:1; padding:.35rem; }
  .production-section .media-grid, .documents-section .media-grid { grid-template-columns:1fr; }
  .collection-filters { flex-wrap:nowrap; overflow-x:auto; gap:.5rem; padding:.75rem 0; }
  .collection-filters a { flex-shrink:0; border-radius:99px; padding:.65rem .9rem; }
  .collection-status { margin:1.25rem 0; }
  .capability-cards { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem; }
  .capability-cards article { min-height:0; padding:1rem; }
  .capability-cards h3 { font-size:1.05rem; margin:1rem 0 .5rem; }
  .capability-cards p { font-size:.8rem; line-height:1.55; }
  .v2-steps { grid-template-columns:1fr; gap:0; }
  .v2-steps article { display:grid; grid-template-columns:2rem 1fr; gap:.2rem .75rem; padding:1rem 0; }
  .v2-steps article > span { grid-row:1/3; margin:.2rem 0 0; }
  .v2-steps h3 { margin:0; font-size:1.15rem; }
  .v2-steps p { grid-column:2; margin:.2rem 0 0; font-size:.9rem; }

  .inquiry-hero__grid { gap:1.25rem; }
  .inquiry-intro > p:not(.eyebrow):not(.demo-warning) { margin:1rem 0 0; font-size:.9rem; }
  .inquiry-checklist { grid-template-columns:1fr 1fr; margin-top:1rem; column-gap:1rem; }
  .inquiry-checklist span { grid-template-columns:1.4rem 1fr; font-size:.72rem; }
  .demo-warning { margin:1rem 0 0; padding:.75rem; font-size:.75rem; }
  .inquiry-contacts { margin-top:.75rem; }
  .inquiry-form-wrap { padding:1.15rem; border-radius:16px; }
  .form-row { grid-template-columns:1fr; }
  .inquiry-form input, .inquiry-form select, .inquiry-form textarea { font-size:16px; border-radius:8px; }
  .inquiry-form label > span { font-size:.8rem; }
  .form-heading span { font-size:1.55rem; }
  .page-inquiry .mobile-contact { display:none; }
  .page-inquiry { padding-bottom:0; }
  .final-cta__panel { border-radius:16px; padding:1.5rem; gap:1rem; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:1.5rem; }
  .footer-grid > div:first-child, .footer-grid > div:last-child { grid-column:1/-1; }
  .footer-grid a { min-height:44px; display:flex; align-items:center; font-size:.8rem; }
  .site-footer { padding-bottom:1.5rem; }
  /* Mobile action bar: pinned shortcuts plus the conversion entry.
     Bright glass rather than a solid slab: a translucent white surface lets the
     content behind blur through, which is what makes it read as floating UI
     instead of a strip bolted to the page. Rounded top corners, a hairline top
     highlight for the lit edge, and one shadow to ground it.
     Hierarchy on white glass: forest text leads, the primary action is the only
     filled element, and the current shortcut gets a quiet forest tint. */
  .mobile-contact {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:.5rem;
    padding:.5rem .75rem calc(.5rem + env(safe-area-inset-bottom));
    background:#ffffff;                          /* fallback for engines without alpha */
    background:rgba(255,255,255,.86);
    color:var(--forest);
    border-top:1px solid rgba(16,39,31,.08);
    border-radius:1.15rem 1.15rem 0 0;
    box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 -12px 30px rgba(6,20,15,.14);
  }
  @supports (backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px)) {
    .mobile-contact {
      -webkit-backdrop-filter:blur(18px) saturate(180%);
      backdrop-filter:blur(18px) saturate(180%);
    }
  }
  .mobile-contact a,
  .mobile-contact a:hover { text-decoration:none; }
  .mobile-contact > a:not(.mobile-quote) {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:.2rem;
    min-height:44px;
    padding:0 .6rem;
    color:var(--muted);
    font-size:.8rem;
    font-weight:500;
    border-radius:10px;
    white-space:nowrap;
  }
  /* The two pinned shortcuts carry the site's diagonal out-arrow, the same mark
     the quote action uses; it is drawn here so the markup stays untouched and
     the "Get a quote ↗" action is never given a second one. */
  .mobile-contact > a:not(.mobile-quote)::after { content:'↗'; font-size:.85em; opacity:.65; }
  /* Current page: a quiet forest tint so it reads as selected on white glass. */
  .mobile-contact > a[aria-current] { color:var(--forest); font-weight:650; background:rgba(16,39,31,.06); }
  .mobile-contact .mobile-quote {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:.3rem;
    flex:0 1 auto;
    min-width:0;
    max-width:11rem;
    min-height:44px;
    margin-left:auto;
    padding:0 .95rem;
    background:var(--forest);
    color:var(--white);
    font-size:.83rem;
    font-weight:600;
    letter-spacing:.01em;
    border-radius:999px;
    box-shadow:0 8px 20px rgba(6,20,15,.2);
  }
  .mobile-contact .mobile-quote:hover,
  .mobile-contact .mobile-quote:focus-visible { background:var(--forest-2); }
}
@media(max-width:420px) {
  /* The primary action must never be squeezed to an unreadable width, so the
     optional contact chip steps aside first; the pinned shortcuts stay. */
  .mobile-contact > a:not(.mobile-quote):not([aria-current]) { display:none; }
  .mobile-contact { gap:.45rem; padding-inline:.7rem; }
  .mobile-contact > a:not(.mobile-quote) { padding-inline:.55rem; font-size:.79rem; }
  .mobile-contact .mobile-quote { max-width:9.5rem; padding-inline:.8rem; }
}
@media(max-width:360px) {
  .page-home .lab-strip { grid-template-columns:repeat(5,minmax(0,1fr)); }
  .mobile-contact { gap:.4rem; padding-inline:.6rem; }
  .mobile-contact > a:not(.mobile-quote) { padding-inline:.5rem; font-size:.76rem; }
  .mobile-contact .mobile-quote { max-width:8.5rem; padding-inline:.7rem; font-size:.78rem; }
  .capability-cards { grid-template-columns:1fr; }
}