/* Demo v2 extends the established palette, typography and components. */
:root { --section: clamp(2rem, 3.5vw, 3rem); --heading-gap: clamp(1.5rem, 2.5vw, 2.25rem); }
/* Adjacent sections share the breathing room; headings belong to their content. */
.section-heading { margin-bottom:var(--heading-gap); }
.v2-split > .section-heading { margin-bottom:0; }
.section-heading--split { gap:clamp(1.5rem,3vw,3rem); }
.section-heading h2, .capability-copy h2, .final-cta h2 { font-size:clamp(2.4rem,4.5vw,4.4rem); line-height:1.06; }
.capability-section, .dark-band, .process-section, .applications-section, .production-section, .documents-section, .feedback-feature { padding-block:clamp(2.5rem,4.5vw,4rem); }
.final-cta__panel { padding:clamp(1.5rem,3vw,3rem); gap:clamp(1.5rem,3vw,3rem); }
.site-footer { padding-top:3rem; }
.footer-bottom { margin-top:2.5rem; }
.inquiry-hero { padding-top:9rem; }
@media(max-width:760px) {
 .section-heading--split { gap:1.25rem; }
 .inquiry-hero { padding-top:8rem; }
}
figure { margin: 0; }
.brand-logo { width: 9rem; height: auto; display:block; border-radius: 3px; }
.hero-grid { min-height:0; padding-top: 9rem; padding-bottom: 2rem; }
.hero-copy { padding-block:1rem; }
.hero-proof { margin-top:2rem; }
.hero { min-height: auto; }
.hero-title { font-size: clamp(3.2rem, 5.5vw, 5.4rem); line-height: 1.05; }
.hero-title em { color: var(--accent-soft); }
.hero-media { height: auto; min-height: 0; aspect-ratio: 1.2; }
.hero-media > img { height: 100%; object-fit: cover; }
.hero-media .image-badge { left: 1rem; right: 1rem; bottom: 1rem; top: auto; width: fit-content; max-width: calc(100% - 2rem); font-size: .65rem; background: var(--surface); color: var(--ink); }
.hero-index { padding-bottom: 2rem; }
.hero-backdrop::before { display: none; }
.page-title { overflow-wrap: anywhere; }
.page-hero { padding-top: 9rem; padding-bottom: 2rem; }
.v2-tight-top { padding-top: 1rem; }
.v2-split { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: center; gap: clamp(2rem,6vw,5rem); }
.v2-image { width: 100%; height: auto; border-radius: var(--radius); }
.preview-caption { display: block; margin: 1rem 0 0; color: var(--muted); font-size: .78rem; line-height: 1.6; }
.final-cta .preview-caption { color: #d5ddd7; }
.v2-product-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 2rem; }
.v2-product-card { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.product-card-link { display: block; color: inherit; text-decoration: none; height: 100%; }
.v2-card-copy { padding: 1.7rem; }
.v2-card-copy h3 { display:flex; justify-content:space-between; gap:1rem; font-size:1.6rem; }
.v2-card-copy p:last-child { color: var(--muted); margin-bottom: 0; }
.material-swatch { min-height: 12rem; padding: 1.7rem; display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between; color:var(--cream); background:var(--forest-2); }
.material-swatch > span { font-size:.8rem; letter-spacing:.15em; }
.material-swatch > strong { font: italic 3rem var(--font-display); font-weight:400; }
.material-swatch > small { font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; }
.material-swatch--pvc-patches { background:#a94e2d; color:#fff5e9; }
.material-swatch--woven-labels { background:#ddd9cb; color:var(--ink); }
.material-swatch--chenille-patches { background:#3e5148; }
.product-card-link:hover h3, .product-card-link:focus-visible h3 { text-decoration:underline; text-underline-offset:.2em; }
.v2-steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:2rem; }
.v2-steps article { border-top:1px solid var(--line); padding-top:1.5rem; }
.v2-steps article > span { display:block; font-size:.75rem; color:var(--muted); margin-bottom:1rem; }
.v2-steps h3 { font-size:1.4rem; }
.v2-steps p { color:var(--muted); font-size:.95rem; }
.dark-band .v2-steps p, .dark-band .v2-steps article > span { color:#d0d9d3; }
.dark-band .v2-steps article { border-color:var(--line-light); }
.faq-list { width:100%; }
.faq-list details { border-bottom:1px solid var(--line); padding:1.2rem 0; }
.faq-list summary { cursor:pointer; font-weight:600; padding:.4rem 1rem .4rem 0; }
.faq-list details p { color:var(--muted); margin:1rem 0 .3rem; }
.faq-page .faq-layout {
  display:grid;
  grid-template-columns:minmax(13rem,15.5rem) minmax(0,1fr);
  gap:clamp(2rem,5vw,4.5rem);
  align-items:start;
}
.faq-page .faq-toc {
  position:sticky;
  top:6.75rem;
  z-index:2;
  align-self:start;
  max-height:calc(100vh - 8rem);
  overflow:auto;
  padding:1.25rem 0 1.5rem;
  border-top:1px solid var(--line);
  background:var(--paper);
}
.faq-toc__label { margin:0; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.faq-toc__count { margin:.35rem 0 1rem; font-size:.85rem; color:var(--muted); }
.faq-toc__list {
  margin:0;
  padding:0;
  list-style:none;
  counter-reset:faq-toc;
  display:grid;
  gap:.7rem;
}
.faq-toc__list li { counter-increment:faq-toc; }
.faq-toc__list a {
  display:grid;
  grid-template-columns:1.6rem minmax(0,1fr);
  gap:.55rem;
  color:var(--ink);
  text-decoration:none;
  font-size:.92rem;
  line-height:1.35;
}
.faq-toc__list a::before {
  content:counter(faq-toc);
  color:var(--muted);
  font-size:.8rem;
  font-variant-numeric:tabular-nums;
  line-height:1.5;
}
.faq-toc__list a:hover,
.faq-toc__list a[aria-current="true"] { color:var(--forest); }
.faq-section { scroll-margin-top:6.75rem; padding-bottom:2.5rem; }
.faq-section__title { margin:0 0 .5rem; font-family:var(--font-display); font-size:clamp(1.6rem,3vw,2.2rem); font-weight:500; line-height:1.15; }
.faq-section + .faq-section { border-top:1px solid var(--line); padding-top:2.5rem; }
.spec-list { margin-top:2rem; }
.spec-list dt { border-top:1px solid var(--line); padding-top:1rem; font-size:.8rem; font-weight:600; }
.spec-list dd { margin:.45rem 0 1rem; color:var(--muted); }
.breadcrumbs { display:flex; flex-wrap:wrap; gap:.7rem; margin-bottom:2rem; font-size:.8rem; color:var(--muted); }
.breadcrumbs a { color:inherit; }
.related-links { display:flex; flex-wrap:wrap; gap:1.5rem; margin-top:2rem; }
.related-links a { color:var(--ink); padding:.8rem 0; }
.study-row { border-top:1px solid var(--line); padding:2rem 0; }
.study-row h2 { font-size:2rem; }
.study-row p { color:var(--muted); }
.gallery-filters { display:flex; flex-wrap:wrap; gap:.7rem; margin:2.5rem 0; }
.gallery-filters button { min-height:44px; padding:.7rem 1rem; border:1px solid var(--line); border-radius:.3rem; background:transparent; color:var(--ink); cursor:pointer; }
.gallery-filters .is-active { color:var(--cream); background:var(--forest); }
.image-open { display:block; position:relative; width:100%; border:0; padding:0; background:none; cursor:zoom-in; }
.gallery-main-image { max-height:38rem; object-fit:cover; }
.image-open > span { position:absolute; bottom:1rem; right:1rem; padding:.7rem 1rem; background:var(--forest); color:white; border-radius:.3rem; }
.image-dialog { width:min(95vw,80rem); max-height:92vh; padding:1rem; border:0; border-radius:.5rem; background:var(--paper); color:var(--ink); }
.image-dialog::backdrop { background:rgba(5,20,15,.85); }
.image-dialog img { width:100%; max-height:75vh; object-fit:contain; }
.dialog-close { display:block; margin-left:auto; padding:.8rem; border:0; background:var(--forest); color:white; cursor:pointer; }
.v2-brand-panel { background:white; padding:2rem; border-radius:var(--radius); text-align:center; }
.v2-brand-panel p { font-size:.8rem; color:var(--muted); }
.legal-copy { max-width:50rem; }
.legal-copy h2 { font-size:2rem; margin-top:2.5rem; }
.legal-copy p { color:var(--muted); }
.inquiry-form fieldset { display:grid; gap:1.1rem; border:0; padding:0; margin:0; min-width:0; }
.inquiry-contacts { margin-top:1.5rem; display:grid; gap:1rem; }
.inquiry-contacts a { color:var(--cream); }
.inquiry-contacts .contact-pending { color:#ccd6cf; font-size:.85rem; }
.consent-field a { color:inherit; text-underline-offset:.2em; }
.form-status.is-error { color:#912f22; }
.contact-pending { font-size:.8rem; line-height:1.6; }
.mobile-contact { display:none; }
/* Critical content never depends on the animation bundle to become visible. */
.js [data-hero-animate] { opacity:1; }
@media (max-width:1000px) { .v2-steps { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:760px) {
 .brand-logo { width:7.5rem; }
 .hero-grid { padding-top:7.5rem; }
 .hero-title { font-size:clamp(2.8rem,11vw,4rem); }
 .hero-media { aspect-ratio:1.3; height:auto; }
 .v2-split, .v2-product-grid { grid-template-columns:1fr; }
 .page-hero { padding-top:8rem; padding-bottom:1.5rem; }
 .faq-page .faq-layout { grid-template-columns:1fr; }
 .faq-page .faq-toc { position:static; top:auto; max-height:none; overflow:visible; padding-top:0; margin-bottom:.5rem; }
 .material-swatch { min-height:10rem; }
 .v2-card-copy { padding:1.3rem; }
 .site-footer { padding-bottom:6rem; }
 .mobile-contact { position:fixed; bottom:0; left:0; right:0; z-index:30; display:flex; gap:1rem; justify-content:center; padding:.75rem 1rem calc(.75rem + env(safe-area-inset-bottom)); background:var(--forest); border-top:1px solid var(--line-light); }
 .mobile-contact a { color:white; padding:.5rem; font-size:.9rem; text-decoration:none; }
 .image-open > span { font-size:.8rem; }
 .footer-grid { overflow-wrap:anywhere; }
}
@media (max-width:420px) { .v2-steps { grid-template-columns:1fr; } .header-cta { font-size:.66rem; padding:.75rem; } }
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
}

/* Material crops reference the same clearly labelled concept asset. */
.material-swatch { aspect-ratio:3/2; min-height:0; position:relative; background-image:url('../images/patch-materials-concept.webp'); background-size:200% 200%; color:white; }
.material-swatch::before { content:''; position:absolute; inset:0; background:linear-gradient(0deg,rgba(10,28,21,.85),transparent 65%); }
.material-swatch > * { position:relative; }
.material-swatch > span { background:var(--forest); padding:.3rem .5rem; }
.material-swatch > strong { margin-top:auto; font-size:2.5rem; }
.material-swatch--embroidered-patches { background-position:0 0; }
.material-swatch--pvc-patches { background-position:100% 0; }
.material-swatch--woven-labels { background-position:0 100%; }
.material-swatch--chenille-patches { background-position:100% 100%; }

.page-title:not(.page-title--light) em { color:#a94e2d; }

@media(max-width:760px) {
 html:not(.nav-ready) .nav-toggle { display:none; }
 html:not(.nav-ready) .header-shell { display:flex; flex-wrap:wrap; }
 html:not(.nav-ready) .site-nav { display:flex; flex-wrap:wrap; width:100%; }
}