/* Customer review 01: preserve the existing YSD design and extend its components. */
html { scroll-padding-top: 100px; }
[id] { scroll-margin-top: 100px; }
.nav-toggle { border: 0; background: transparent; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--primary); outline-offset: 5px; }
.service-card-icon svg { width: 36px; height: 36px; }
.service-detail-content .feature-list { margin: 24px 0; }
.service-tags { flex-wrap: wrap; }
.service-tag { white-space: normal; }
.service-detail-image img[src$="baseball-cap.png"] { object-position: center; }
.lab-testing { margin-top: 26px; padding: 24px; border: 1px solid rgba(255,255,255,.25); border-radius: 4px; }
.lab-testing h3 { color: #fff; font-size: 1.05rem; margin: 0 0 14px; }
.lab-testing ul { margin: 0; padding-left: 20px; color: #fff; }
.lab-testing li { padding: 5px 0; line-height: 1.65; }
.certificates-intro { margin-bottom: 36px; }
.certificate-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 16px; }
.certificate-name { display: flex; align-items: center; justify-content: center; min-height: 112px; padding: 20px; text-align: center; color: var(--dark); background: #fff; border: 1px solid var(--gray-200); border-top: 3px solid var(--primary); font-size: 1.15rem; font-weight: 700; line-height: 1.45; }
.additional-services { background: var(--gray-100); }
.additional-services-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
.additional-service { background: #fff; border: 1px solid var(--gray-200); padding: 36px; display: flex; flex-direction: column; align-items: flex-start; }
.additional-service-top { width: 100%; display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.additional-service-number { font-size: 2.5rem; font-weight: 800; color: var(--gray-300); line-height: 1; }
.additional-service-top svg { width: 50px; height: 50px; color: var(--primary); }
.additional-service h2 { font-size: 1.6rem; line-height: 1.3; margin-bottom: 16px; }
.additional-service p { color: var(--gray-600); line-height: 1.8; margin-bottom: 24px; }
.additional-service .service-card-link { margin-top: auto; padding-top: 24px; }
.additional-service .service-tags { margin-bottom: 20px; }
.stt-brand { border-left: 3px solid var(--primary); padding-left: 18px; margin-bottom: 20px; }
.stt-brand strong { color: var(--primary); font-size: 2.2rem; letter-spacing: .08em; line-height: 1.25; display: block; }
.stt-brand span, .stt-brand small { display: block; margin-top: 4px; }
.stt-brand small { color: var(--gray-600); }
.office-location-card { border: 1px solid var(--gray-200); background: var(--gray-100); padding: 36px; margin-bottom: 24px; }
.office-location-card h3 { font-size: 1.6rem; margin-bottom: 18px; }
.office-location-card p:not(.section-label) { color: var(--gray-600); line-height: 1.85; margin-bottom: 26px; }
.contact-email-list { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.contact-email-list a { padding: 10px 0; min-height: 44px; color: var(--primary); font-weight: 600; overflow-wrap: anywhere; line-height: 1.5; }
.contact-info-card .contact-email-list a { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.footer-contact-strip { display: grid; grid-template-columns: 1.25fr 1fr; gap: 48px; padding-bottom: 36px; margin-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,.14); }
.footer-contact-label { display: block; font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #fff; margin-bottom: 14px; }
.footer-contact-strip p { max-width: 460px; color: #ccc; line-height: 1.8; }
.footer-contact-strip .contact-email-list { gap: 0; }
.footer-contact-strip .contact-email-list a { color: #ddd; font-size: .85rem; font-weight: 400; }

/* A locally rendered geographic overview; text lists remain usable without JS. */
.network-section { background: #f3f7f7; }
.network-intro { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 48px; margin-bottom: 36px; }
.network-intro > p { color: #536568; line-height: 1.8; max-width: 460px; margin-bottom: 8px; }
.network-panel { background: #fff; border: 1px solid #dbe5e5; border-radius: 8px; overflow: hidden; }
.network-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px; padding: 24px 28px; }
.network-legend { display: flex; flex-wrap: wrap; gap: 12px 24px; font-size: .85rem; color: #344c50; }
.network-legend > span { display: inline-flex; align-items: center; gap: 10px; }
.network-key { display: inline-block; width: 10px; height: 10px; flex: 0 0 10px; border-radius: 50%; background: #008694; }
.network-key.customer { background: #a66518; border-radius: 1px; transform: rotate(45deg); }
.network-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.network-filters button { min-height: 44px; padding: 10px 16px; font: inherit; font-size: .85rem; font-weight: 600; color: #536568; background: #fff; border: 1px solid #d5e1e1; border-radius: 4px; cursor: pointer; }
.network-filters button[aria-pressed="true"] { background: #006d79; color: #fff; border-color: #006d79; }
.network-map { padding: 0 20px; }
.network-svg { width: 100%; height: auto; display: block; }
.map-ocean { fill: #f3f8f8; }
.map-grid { fill: none; stroke: #e1ebeb; stroke-width: .7; }
.map-land { fill: #d0dede; stroke: #b4c7c7; stroke-width: .55; fill-rule: evenodd; }
.map-point { fill: #008694; }
.map-point[data-group="customer"] { fill: #a66518; }
.map-dot { stroke: #fff; stroke-width: 1.6; }
.map-selection-ring { fill: none; stroke: currentColor; stroke-width: 3; opacity: 0; }
.map-point.is-selected { color: #004b55; }
.map-point[data-group="customer"].is-selected { color: #73410c; }
.map-point.is-selected .map-selection-ring { opacity: 1; }
.network-panel[data-filter="factory"] .map-point[data-group="customer"], .network-panel[data-filter="customer"] .map-point[data-group="factory"] { display: none; }
.network-readout { min-height: 56px; padding: 16px 28px; font-size: .9rem; color: #344c50; background: #edf4f4; border-bottom: 1px solid #dbe5e5; }
.network-regions { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; padding: 28px; }
.network-region-group[hidden] { display: none; }
.network-region-group h3 { display: flex; align-items: center; gap: 12px; font-size: 1rem; margin-bottom: 18px; }
.network-count { margin-left: auto; font-size: .85rem; color: #536568; background: #edf4f4; padding: 4px 10px; border-radius: 20px; }
.region-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.region-button { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 48px; padding: 10px 12px; background: #fff; border: 1px solid #dbe5e5; border-radius: 4px; text-align: left; font: inherit; font-size: .85rem; line-height: 1.4; color: #344c50; cursor: pointer; }
.region-button:hover { background: #f0f7f7; border-color: #008694; }
.region-button[aria-pressed="true"] { background: #e4f2f2; border-color: #008694; box-shadow: inset 0 0 0 1px #008694; }
.region-button[data-group="customer"][aria-pressed="true"] { background: #fbf0e2; border-color: #a66518; box-shadow: inset 0 0 0 1px #a66518; }
.region-code { font-size: .7rem; color: #006d79; font-weight: 700; min-width: 22px; }
.region-button[data-group="customer"] .region-code { color: #895014; }
.network-note { margin: 0; padding: 0 28px 24px; color: #637679; font-size: .75rem; line-height: 1.6; }
@media (max-width: 1024px) {
    .additional-services-grid { gap: 16px; }
    .additional-service { padding: 24px; }
    .certificate-list { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .network-toolbar { align-items: flex-start; }
    .region-list { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .nav-menu { visibility: hidden; }
    .nav-menu.active { visibility: visible; }
    html { scroll-padding-top: 84px; }
    [id] { scroll-margin-top: 84px; }
    .additional-services-grid, .network-intro, .footer-contact-strip { grid-template-columns: 1fr; }
    .additional-service { padding: 32px 24px; }
    .network-intro { gap: 12px; margin-bottom: 24px; }
    .network-toolbar { padding: 20px 16px; gap: 18px; }
    .network-map { padding: 0 8px; }
    .network-regions { grid-template-columns: 1fr; padding: 24px 16px; gap: 28px; }
    .region-list { grid-template-columns: 1fr 1fr; }
    .region-button { padding: 10px; font-size: .8rem; }
    .network-readout { padding: 16px; }
    .network-note { padding: 0 16px 20px; }
    .certificate-list { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
    .certificate-name { min-height: 96px; font-size: 1rem; padding: 18px 12px; }
    .certificate-name:last-child { grid-column: 1 / -1; }
    .footer-contact-strip { gap: 26px; }
    .office-location-card { padding: 28px 24px; }
    .lab-testing { padding: 20px; }
    .hero { padding-bottom: 150px; padding-top: 130px; }
    .hero-carousel-controls { align-items: flex-end; padding: 0 24px 28px; }
    .carousel-dots { bottom: 41px; }
    .hero-scroll { bottom: 91px; }
    .carousel-btn { background: rgba(0,0,0,.28); }
    .page-header:has(.page-header-subtitle) { height: auto; min-height: 360px; padding-top: 128px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}

/* Revision 02: preserve the supplied brand artwork and its original colors. */
.header .logo { width: 180px; max-width: 180px; max-height: none; }
.logo img { display: block; width: 100%; height: auto; }
.footer-brand .logo { width: 180px; max-width: 100%; max-height: none; padding: 6px 12px; background: #fff; border-radius: 4px; }
.stt-logo { display: block; width: 240px; max-width: 100%; height: auto; filter: none; }
.service-card-brand { min-height: 80px; display: flex; align-items: center; margin-bottom: 24px; }
.service-card-brand .stt-logo { width: 200px; }
.stt-brand { width: 100%; }
.stt-brand .stt-logo { margin: 0 0 12px; }
#tapes { scroll-margin-top: 120px; }
@media (max-width: 480px) { .header .logo { width: 150px; max-width: 150px; } }

/* Revision 03: customer-supplied photography, with product colors preserved. */
img.customer-photo { filter: none; }
.split-image img[src$="print-inspection.webp"] { object-position: 27% center; }
.printing-finishes { background: #fff; }
.finishes-intro { max-width: 760px; margin-bottom: 40px; }
.finishes-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 28px; }
.finish-card { margin: 0; background: #f3f4f4; overflow: hidden; border: 1px solid var(--gray-200); }
.finish-card img { width: 100%; aspect-ratio: 6 / 5; object-fit: cover; }
.finish-card figcaption { padding: 18px 20px; font-size: 1rem; font-weight: 600; color: var(--dark); background: #fff; }
@media (max-width: 768px) {
    .finishes-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
    .finish-card figcaption { padding: 14px 12px; font-size: .9rem; }
    .fullwidth-section { height: auto; min-height: 400px; padding: 64px 0; }
    .stats-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .stat-item { min-width: 0; }
    .stat-num { font-size: clamp(1.75rem,8vw,3rem); }
    .stat-label { overflow-wrap: anywhere; }
}
@media (max-width: 380px) { .finishes-grid { gap: 10px; } }

/* Revision 04: select originals for their display size; fill each media frame.
   Long specifications sit below the service introduction instead of forcing
   a landscape product photograph into a narrow, tall crop. */
.hero-overlay { background: linear-gradient(90deg,rgba(12,28,34,.78),rgba(12,28,34,.48) 55%,rgba(12,28,34,.18)); }
.hero-slide:first-child img { object-position: 64% 48%; }
.hero-slide:nth-child(2) img { object-position: 50% 55%; }
.hero-slide:nth-child(3) img { object-position: 50% 60%; }
.editorial-cards .cap-card { height: auto; display: flex; flex-direction: column; background: #f2f4f4; cursor: default; }
.editorial-cards .cap-card img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; padding: 0; flex-shrink: 0; }
.editorial-cards .cap-card:hover img { transform: none; }
.editorial-cards .cap-card-overlay { position: static; flex: 1; justify-content: flex-start; background: #253036; padding: 24px; }
.editorial-cards .cap-card-desc { opacity: 1; transform: none; color: #e0e5e7; }
.catalog-photo { object-position: 50% 50%; }
img[src$="packaging-headers.webp"] { object-position: 50% 64%; }
.split-image img { position: absolute; inset: 0; }
.split-image img[src$="packaging-studio.webp"] { object-position: 63% center; }
.service-detail-row { min-height: 0; grid-template-columns: repeat(2,minmax(0,1fr)); }
.service-detail-image { min-height: min(37.5vw,720px); background: #f1f2f2; }
.service-detail-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; padding: 0; }
.service-detail-content { min-width: 0; padding: 48px clamp(32px,4.4vw,84px); }
.service-detail-desc { margin-bottom: 0; }
.service-detail-details { grid-column: 1 / -1; padding: 32px clamp(32px,4.4vw,84px) 40px; border-bottom: 1px solid #e1e5e5; background: #fff; }
.service-detail-row.alt .service-detail-details { background: var(--gray-100); }
.service-detail-details .feature-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px 36px; margin: 0 0 24px; }
.service-detail-details .feature-item { align-items: flex-start; }
.service-detail-details .feature-item::before { margin-top: 3px; }
.service-detail-details .service-tags { margin-top: 0; }
.additional-service-top { min-height: 56px; }
.additional-service .stt-brand { border: 0; padding: 0; }
.additional-service .stt-brand .stt-logo { width: 190px; }
.additional-service .service-card-link { padding-top: 20px; }
.page-header-bg[src$="packaging-team-wide.webp"] { object-position: 50% 43%; }
@media (max-width: 1100px) {
    .service-detail-row, .service-detail-row.alt { grid-template-columns: 1fr; direction: ltr; }
    .service-detail-image { height: auto; min-height: 0; aspect-ratio: 4 / 3; }
    .service-detail-content { padding: 40px 32px 24px; }
    .service-detail-details { padding: 8px 32px 40px; }
    .service-detail-details .feature-list { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px 24px; }
}

/* Revision 05: customer-marked photography with source-aware framing. */
.hero-carousel { height: min(100vh,880px); min-height: min(100svh,880px); }
.hero-carousel .hero-overlay { background: linear-gradient(90deg,rgba(9,27,33,.8),rgba(9,27,33,.66) 68%,rgba(9,27,33,.35)); }
.hero-carousel .hero-title em { color: #72d8de; }
.hero-carousel .hero-label { color: #72d8de; }
.hero-factory-layout .hero-press { width: 58%; object-position: 50% 50%; filter: grayscale(1); }
.hero-factory-layout .hero-collage { inset: 0 0 0 auto; width: 42%; object-position: 50% 54%; }
.hero-factory-layout::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg,rgba(10,35,42,.12),rgba(32,94,104,.18)); pointer-events: none; }
.highlights-cards .cap-card img { aspect-ratio: 5 / 2; }
img.curated-tone { filter: saturate(.78) contrast(1.025); }
img[src$="packaging-range.webp"] { object-position: left center; }
#packaging .service-detail-image { grid-column: 1 / -1; min-height: 0; aspect-ratio: 5 / 2; }
#packaging .service-detail-content { grid-column: 1 / -1; padding-bottom: 28px; }
#packaging .service-detail-desc { max-width: 900px; }
.about-img-badge { background: #246b77; box-shadow: 0 8px 24px rgba(0,20,28,.35); border: 1px solid rgba(255,255,255,.32); }
.contact-review-header { background: #182b32; }
.contact-review-header .contact-review-banner { inset: 0 0 0 auto; width: 70%; object-position: 50% 42%; }
.contact-review-header .page-header-overlay { background: linear-gradient(90deg,#182b32 30%,rgba(24,43,50,.8) 46%,rgba(24,43,50,.55) 63%,rgba(24,43,50,.28)); }
.contact-sewing-photo { object-position: 50% 50%; }
.equipment-cards { grid-template-columns: repeat(6,minmax(0,1fr)); }
.equipment-cards .cap-card { grid-column: span 2; }
.equipment-cards .cap-card:nth-child(n+4) { grid-column: span 3; }
.equipment-cards .cap-card img { aspect-ratio: 3 / 2; }
.footer-brand .logo { width: 210px; padding: 0; background: transparent; border-radius: 0; }
.footer-brand .logo img { filter: brightness(1.7) drop-shadow(0 -1px 0 rgba(255,255,255,.32)) drop-shadow(0 3px 1px rgba(0,0,0,.7)); }
@media (max-width: 1100px) {
    #packaging .service-detail-image { aspect-ratio: 5 / 2; }
}
@media (max-width: 768px) {
    .hero-factory-layout .hero-press { width: 100%; }
    .hero-factory-layout .hero-collage { width: 100%; object-position: center; }
    .contact-review-header .contact-review-banner { width: 100%; }
    .contact-review-header .page-header-overlay { background: linear-gradient(90deg,rgba(24,43,50,.85),rgba(24,43,50,.5)); }
    .equipment-cards { grid-template-columns: 1fr; }
    .equipment-cards .cap-card, .equipment-cards .cap-card:nth-child(n+4) { grid-column: auto; }
}
@media (max-width: 768px) {
    .hero-slide:first-child img { object-position: 63% 50%; }
    .hero-slide:nth-child(2) img { object-position: 57% 50%; }
    .hero-slide:nth-child(3) img { object-position: 45% 50%; }
    .hero-overlay { background: linear-gradient(90deg,rgba(12,28,34,.74),rgba(12,28,34,.4)); }
    .service-detail-content { padding: 32px 24px 20px; }
    .service-detail-details { padding: 8px 24px 32px; }
    .service-detail-details .feature-list { grid-template-columns: 1fr; gap: 12px; }
    .service-detail-image { height: auto; min-height: 0; }
    .additional-service { padding: 28px 24px; }
}

/* Client feedback, 27 October 2026. Real supplied photos, responsive compositions. */
#labeling .service-detail-image { aspect-ratio: 1 / 1; min-height: 0; }
#pop-displays .product-pair { display:grid; grid-template-columns:1fr 1fr; aspect-ratio:2/1; min-height:0; grid-column:1/-1; background:#f5f5f5; }
#pop-displays .product-pair img { position:static; width:100%; height:100%; object-fit:cover; }
#pop-displays .service-detail-content { grid-column:1/-1; }
.additional-service.photo-service { padding:0; overflow:hidden; }
.service-photo { width:100%; aspect-ratio:4/3; overflow:hidden; display:grid; }
.service-photo img { width:100%;height:100%;object-fit:cover;min-width:0;min-height:0; }
.service-photo.tape-pair { grid-template-columns: 2fr 1fr; }
.tape-pair img:first-child { object-position:44% center; }
.photo-service-body { padding:32px; display:flex;flex-direction:column;align-items:flex-start;flex:1; width:100%; }
.office-lab-slide { display:grid;grid-template-columns:45% 55%; }
.hero-slide.office-lab-slide img { position:static;min-width:0;height:100%;width:100%;object-fit:cover; }
.office-lab-slide img:first-child { object-position:50% 48%; }
.office-lab-slide img:last-child { object-position:48% 50%; }
@media(max-width:768px) {
 .photo-service-body {padding:28px 24px;}
 .office-lab-slide {grid-template-columns:1fr 1fr;}
 #pop-displays .product-pair {aspect-ratio:1/1;}
 #pop-displays .product-pair img {object-fit:cover;object-position:center;}
}