/* =============================================================
   THE GREAT WHITE SHIRT · v2.1 PURE
   Component library — pure B&W, cinematic, responsive
   ============================================================= */

.wrap        { max-width: var(--gws-wrap); margin: 0 auto; padding: 0 var(--gws-7); }
.wrap-tight  { max-width: var(--gws-wrap-tight); margin: 0 auto; padding: 0 var(--gws-7); }
.wrap-narrow { max-width: var(--gws-wrap-narrow); margin: 0 auto; padding: 0 var(--gws-7); }
@media (max-width: 768px) {
  .wrap, .wrap-tight, .wrap-narrow { padding: 0 var(--gws-5); }
}

/* SCROLL PROGRESS RAIL */
.scroll-rail {
  position: fixed; top: 0; left: 0; right: 0;
  height: 2px; z-index: 1000; pointer-events: none;
}
.scroll-rail__bar {
  height: 100%; width: 100%;
  background: var(--gws-ink);
  transform-origin: 0 50%;
  transform: scaleX(0);
  transition: transform 80ms linear;
}

/* SITE HEADER */
.site-header {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  padding: var(--gws-4) 0;
  background: rgba(255, 255, 255, 0);
  border-bottom: 1px solid transparent;
  transition: background var(--gws-dur-base) var(--gws-ease),
              border-color var(--gws-dur-base) var(--gws-ease),
              padding var(--gws-dur-base) var(--gws-ease);
}
.site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--gws-hairline);
  padding: var(--gws-3) 0;
}
.site-header.is-inverted { background: rgba(0, 0, 0, 0); }
.site-header.is-inverted.is-scrolled {
  background: rgba(0, 0, 0, 0.85);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--gws-hairline-inv);
}
.site-header.is-inverted .nav-link,
.site-header.is-inverted .brand,
.site-header.is-inverted .nav-aux a { color: var(--gws-paper-inv); }
.site-header.is-inverted .brand__logo { filter: invert(1); }
.site-header.is-inverted .nav-toggle span { background: var(--gws-paper); }

.site-header__inner {
  max-width: var(--gws-wrap);
  margin: 0 auto;
  padding: 0 var(--gws-7);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--gws-6);
  min-height: 56px;
}
@media (max-width: 768px) {
  .site-header__inner { padding: 0 var(--gws-5); gap: var(--gws-3); }
}

.brand { display: flex; align-items: center; color: var(--gws-ink); }
.brand__logo {
  height: 56px; width: auto; display: block;
  transition: opacity var(--gws-dur-base) var(--gws-ease);
}
.brand:hover .brand__logo { opacity: 0.7; }
@media (max-width: 1024px) { .brand__logo { height: 48px; } }
@media (max-width: 768px)  { .brand__logo { height: 40px; } }
@media (max-width: 480px)  { .brand__logo { height: 36px; } }

/* NAV PRIMARY + DROPDOWN */
.nav-primary {
  display: flex; align-items: center; justify-content: center;
  gap: var(--gws-6);
}
@media (max-width: 1024px) { .nav-primary { display: none; } }

.nav-link {
  font-family: var(--gws-body);
  font-size: var(--gws-text-sm);
  font-weight: 500;
  color: var(--gws-ink);
  letter-spacing: 0.04em;
  text-transform: lowercase;
  position: relative;
  padding: 6px 2px;
  text-decoration: none;
  transition: opacity var(--gws-dur-base) var(--gws-ease);
}
.nav-link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--gws-dur-base) var(--gws-ease);
}
.nav-link:hover::after, .nav-link.is-active::after { transform: scaleX(1); }
.nav-link:hover { opacity: 0.7; }
.nav-link--has-sub { display: inline-flex; align-items: center; gap: 6px; }
.nav-link__caret {
  display: inline-block;
  width: 0; height: 0;
  border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent;
  border-top: 4px solid currentColor;
  transition: transform var(--gws-dur-base) var(--gws-ease);
}
.nav-dropdown { position: relative; }
.nav-dropdown__menu {
  position: absolute;
  top: calc(100% + 18px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 280px;
  background: var(--gws-paper);
  border: 1px solid var(--gws-hairline);
  padding: var(--gws-3) 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--gws-dur-base) var(--gws-ease),
              transform var(--gws-dur-base) var(--gws-ease),
              visibility var(--gws-dur-base) var(--gws-ease);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.25);
}
.nav-dropdown:hover .nav-dropdown__menu,
.nav-dropdown:focus-within .nav-dropdown__menu {
  opacity: 1; visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.nav-dropdown:hover .nav-link__caret { transform: rotate(180deg); }
.nav-dropdown__menu a {
  display: flex; justify-content: space-between; gap: var(--gws-5);
  padding: var(--gws-3) var(--gws-5);
  color: var(--gws-ink);
  text-decoration: none;
  transition: background var(--gws-dur-fast) var(--gws-ease);
}
.nav-dropdown__menu a:hover { background: var(--gws-shade); }
.nav-dropdown__menu .sub-meta {
  font-family: var(--gws-mono);
  font-size: var(--gws-text-xxs);
  letter-spacing: 0.18em;
  color: var(--gws-graphite);
  text-transform: lowercase;
}

.nav-aux { display: flex; align-items: center; gap: var(--gws-5); }
.nav-aux a {
  font-family: var(--gws-body);
  font-size: var(--gws-text-sm);
  color: var(--gws-ink);
  letter-spacing: 0.04em;
  text-transform: lowercase;
  font-weight: 500;
  transition: opacity var(--gws-dur-base) var(--gws-ease);
}
.nav-aux a:hover { opacity: 0.7; }
@media (max-width: 768px) { .gws-mail { display: none; } }

.nav-toggle {
  display: none;
  width: 32px; height: 32px;
  flex-direction: column; justify-content: center; gap: 5px;
  align-items: flex-end;
  background: none; border: none;
}
.nav-toggle span {
  display: block; width: 22px; height: 1px;
  background: var(--gws-ink);
  transition: transform var(--gws-dur-base) var(--gws-ease),
              opacity var(--gws-dur-base) var(--gws-ease);
}
.nav-toggle.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
@media (max-width: 1024px) { .nav-toggle { display: flex; } }

/* MOBILE MENU */
.mobile-menu {
  position: fixed; inset: 0;
  background: var(--gws-paper);
  z-index: 90;
  padding: 100px var(--gws-7) var(--gws-7);
  display: flex; flex-direction: column; gap: var(--gws-3);
  opacity: 0; visibility: hidden;
  transform: translateY(-12px);
  transition: opacity var(--gws-dur-base) var(--gws-ease),
              transform var(--gws-dur-base) var(--gws-ease),
              visibility var(--gws-dur-base) var(--gws-ease);
}
.mobile-menu.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.mobile-menu a {
  font-family: var(--gws-display);
  font-size: 38px;
  font-weight: 500;
  color: var(--gws-ink);
  letter-spacing: -0.02em;
  text-decoration: none;
  text-transform: uppercase;
  padding: var(--gws-2) 0;
  border-bottom: 1px solid var(--gws-hairline);
}
.mobile-menu a.mobile-sub {
  font-size: 20px;
  font-family: var(--gws-italic);
  font-style: italic;
  font-weight: 300;
  color: var(--gws-graphite);
  border-bottom: none;
  padding: 4px 0 4px var(--gws-5);
  text-transform: lowercase;
}
.mobile-menu__foot {
  margin-top: auto;
  padding-top: var(--gws-6);
  display: flex; flex-direction: column; gap: var(--gws-2);
  font-family: var(--gws-mono);
  font-size: var(--gws-text-xxs);
  letter-spacing: 0.18em;
  color: var(--gws-graphite);
  text-transform: lowercase;
}

/* CURSOR FOLLOWER */
.gws-cursor {
  position: fixed; top: 0; left: 0;
  width: 12px; height: 12px;
  margin: -6px 0 0 -6px;
  border: 1px solid var(--gws-ink);
  border-radius: 50%;
  pointer-events: none; z-index: 9999;
  mix-blend-mode: difference;
  background: transparent;
  transition: width var(--gws-dur-base) var(--gws-ease),
              height var(--gws-dur-base) var(--gws-ease),
              margin var(--gws-dur-base) var(--gws-ease),
              border-color var(--gws-dur-base) var(--gws-ease);
  will-change: transform;
}
.gws-cursor.is-link { width: 32px; height: 32px; margin: -16px 0 0 -16px; }
.gws-cursor.is-image { width: 80px; height: 80px; margin: -40px 0 0 -40px; }
.gws-cursor.is-image::before {
  content: 'view';
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--gws-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--gws-paper);
  text-transform: lowercase;
}
@media (hover: none) and (pointer: coarse) { .gws-cursor { display: none; } }

/* HERO */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex; align-items: flex-end;
  background: var(--gws-paper);
  padding: 120px 0 var(--gws-7);
  overflow: hidden; isolation: isolate;
}
.hero__canvas { position: absolute; inset: 0; z-index: 0; }
.hero__inner {
  position: relative; z-index: 2;
  max-width: var(--gws-wrap);
  margin: 0 auto;
  padding: 0 var(--gws-7);
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: var(--gws-7);
}
@media (max-width: 1024px) { .hero__inner { grid-template-columns: 1fr; gap: var(--gws-6); } }
@media (max-width: 768px) {
  .hero__inner { padding: 0 var(--gws-5); }
  .hero { padding: 100px 0 var(--gws-6); }
}

.hero__copy { position: relative; z-index: 2; }

.hero__eyebrow {
  display: flex; align-items: baseline; gap: 14px;
  margin-bottom: var(--gws-5);
  font-family: var(--gws-mono);
  font-size: 11px;
  letter-spacing: 0.32em;
  color: var(--gws-graphite);
  text-transform: lowercase;
}
.hero__eyebrow::before {
  content: ''; width: 32px; height: 1px;
  background: var(--gws-ink);
}

.hero__title {
  font-family: var(--gws-display);
  font-weight: 500;
  font-size: clamp(56px, 11vw, 168px);
  line-height: 0.88;
  letter-spacing: var(--gws-tracking-tightest);
  color: var(--gws-ink);
  margin: 0 0 var(--gws-5);
  text-transform: uppercase;
}
.hero__title em {
  font-family: var(--gws-italic);
  font-style: italic; font-weight: 300;
  text-transform: lowercase;
  letter-spacing: -0.01em;
}
.hero__lede {
  max-width: 46ch;
  font-family: var(--gws-italic);
  font-style: italic; font-weight: 300;
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.55;
  color: var(--gws-ink-soft);
  margin: 0 0 var(--gws-7);
}
.hero__cta-row {
  display: flex; align-items: center; gap: var(--gws-5); flex-wrap: wrap;
}
.hero__meta {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; gap: var(--gws-5);
  align-self: end;
}
@media (max-width: 1024px) { .hero__meta { display: none; } }
.hero__meta-row {
  display: flex; justify-content: space-between; gap: var(--gws-5);
  padding-bottom: var(--gws-3);
  border-bottom: 1px solid var(--gws-hairline);
}
.hero__meta-row:last-child { border-bottom: none; }
.hero__meta-label {
  font-family: var(--gws-mono);
  font-size: 10px;
  letter-spacing: 0.32em;
  color: var(--gws-graphite);
  text-transform: lowercase;
}
.hero__meta-value {
  font-family: var(--gws-italic);
  font-style: italic; font-weight: 300;
  font-size: 18px;
  color: var(--gws-ink);
}

/* BUTTONS */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 16px 28px;
  font-family: var(--gws-body);
  font-size: var(--gws-text-sm);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--gws-dur-base) var(--gws-ease);
  position: relative;
  will-change: transform;
}
.btn .arrow { transition: transform var(--gws-dur-base) var(--gws-ease); }
.btn:hover .arrow { transform: translateX(4px); }
.btn--primary {
  background: var(--gws-ink); color: var(--gws-paper);
  border-color: var(--gws-ink);
}
.btn--primary:hover {
  background: var(--gws-paper); color: var(--gws-ink);
}
.btn--ghost {
  background: transparent; color: var(--gws-ink);
  border-color: var(--gws-ink);
}
.btn--ghost:hover {
  background: var(--gws-ink); color: var(--gws-paper);
}
.btn--inverse {
  background: var(--gws-paper); color: var(--gws-ink);
  border-color: var(--gws-paper);
}
.btn--inverse:hover {
  background: transparent; color: var(--gws-paper);
  border-color: var(--gws-paper);
}
.btn--ghost-inverse {
  background: transparent; color: var(--gws-paper);
  border-color: var(--gws-paper);
}
.btn--ghost-inverse:hover {
  background: var(--gws-paper); color: var(--gws-ink);
}

/* SECTIONS */
.section { padding: var(--gws-9) 0; }
@media (max-width: 768px) { .section { padding: var(--gws-7) 0; } }
.section--alt { background: var(--gws-ink); color: var(--gws-paper-inv); }
.section-head {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: var(--gws-5);
  align-items: start;
  padding: var(--gws-5) 0;
  border-top: 1px solid var(--gws-hairline);
  margin-bottom: var(--gws-7);
}
.section-head__num {
  font-family: var(--gws-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: lowercase;
  color: var(--gws-graphite);
  padding-top: 6px;
}
.section-head__title {
  font-family: var(--gws-display);
  font-weight: 500;
  font-size: clamp(36px, 5.6vw, 80px);
  line-height: 1;
  letter-spacing: var(--gws-tracking-tighter);
  margin: 0 0 var(--gws-4);
  text-transform: uppercase;
}
.section-head__title em {
  font-family: var(--gws-italic);
  font-style: italic; font-weight: 300;
  text-transform: lowercase;
}
.section-head__lede {
  max-width: 60ch;
  font-family: var(--gws-italic);
  font-style: italic; font-weight: 300;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.55;
  color: var(--gws-ink-soft);
  margin: 0;
}
.section--alt .section-head { border-top-color: var(--gws-hairline-inv); }
.section--alt .section-head__num { color: var(--gws-graphite-inv); }
.section--alt .section-head__lede { color: var(--gws-paper-inv); }
@media (max-width: 768px) {
  .section-head { grid-template-columns: 1fr; gap: var(--gws-3); }
  .section-head__num { padding-top: 0; }
}

/* FABRIC PAIR (homepage cotton vs silk) */
.fabric-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--gws-hairline);
  border-bottom: 1px solid var(--gws-hairline);
}
@media (max-width: 768px) { .fabric-pair { grid-template-columns: 1fr; } }
.fabric-card {
  padding: var(--gws-7);
  border-right: 1px solid var(--gws-hairline);
  position: relative;
  transition: background var(--gws-dur-base) var(--gws-ease);
  will-change: transform;
}
.fabric-card:last-child { border-right: none; }
@media (max-width: 768px) {
  .fabric-card {
    border-right: none;
    border-bottom: 1px solid var(--gws-hairline);
    padding: var(--gws-6) var(--gws-5);
  }
  .fabric-card:last-child { border-bottom: none; }
}
.fabric-card:hover { background: var(--gws-shade); }
.fabric-card__num {
  font-family: var(--gws-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: lowercase;
  color: var(--gws-graphite);
  margin-bottom: var(--gws-5);
}
.fabric-card__title {
  font-family: var(--gws-display);
  font-weight: 500;
  font-size: clamp(36px, 4.5vw, 64px);
  line-height: 1;
  letter-spacing: var(--gws-tracking-tighter);
  margin: 0 0 var(--gws-3);
  text-transform: uppercase;
}
.fabric-card__title em {
  font-family: var(--gws-italic);
  font-style: italic; font-weight: 300;
  text-transform: lowercase;
}
.fabric-card__desc {
  font-family: var(--gws-italic);
  font-style: italic; font-weight: 300;
  font-size: 20px;
  line-height: 1.55;
  color: var(--gws-ink-soft);
  margin: 0 0 var(--gws-5);
  max-width: 38ch;
}
.fabric-card__specs {
  display: flex; flex-wrap: wrap;
  gap: var(--gws-3) var(--gws-5);
  margin-top: var(--gws-5);
}
.fabric-card__spec { display: flex; flex-direction: column; gap: 4px; }
.fabric-card__spec-label {
  font-family: var(--gws-mono);
  font-size: 10px;
  letter-spacing: 0.32em;
  color: var(--gws-graphite);
  text-transform: lowercase;
}
.fabric-card__spec-value {
  font-family: var(--gws-display);
  font-weight: 400;
  font-size: 18px;
  color: var(--gws-ink);
}

/* CATALOGUE GRID */
.catalogue {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gws-7) var(--gws-5);
}
@media (max-width: 1024px) { .catalogue { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .catalogue { grid-template-columns: 1fr; gap: var(--gws-6); } }

.product-card {
  display: block; text-decoration: none; color: inherit;
  transition: transform var(--gws-dur-base) var(--gws-ease);
  will-change: transform;
}
.product-card__media {
  aspect-ratio: 3/4;
  background: var(--gws-paper-2);
  margin-bottom: var(--gws-4);
  overflow: hidden; position: relative;
}
.product-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(95%) brightness(0.98) contrast(1.02);
  transition: transform var(--gws-dur-slow) var(--gws-ease);
  will-change: transform;
}
.product-card:hover .product-card__media img { transform: scale(1.04); }
.product-card__num {
  font-family: var(--gws-mono);
  font-size: 10px;
  letter-spacing: 0.32em;
  color: var(--gws-graphite);
  text-transform: lowercase;
  display: flex; justify-content: space-between;
  margin-bottom: 6px;
}
.product-card__title {
  font-family: var(--gws-display);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 4px;
  text-transform: uppercase;
}
.product-card__title em {
  font-family: var(--gws-italic);
  font-style: italic; font-weight: 300;
  text-transform: lowercase;
}
.product-card__meta {
  display: flex; justify-content: space-between;
  font-family: var(--gws-mono);
  font-size: 12px;
  color: var(--gws-graphite);
  text-transform: lowercase;
  letter-spacing: 0.04em;
}

/* CATALOGUE TABS */
.cat-tabs {
  display: flex; flex-wrap: wrap; gap: var(--gws-5);
  margin-bottom: var(--gws-7);
  border-bottom: 1px solid var(--gws-hairline);
  padding-bottom: var(--gws-3);
  align-items: center;
}
.cat-tab {
  font-family: var(--gws-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--gws-graphite);
  text-transform: lowercase;
  text-decoration: none;
  padding: 6px 0;
  position: relative;
  cursor: pointer;
  background: none; border: none;
}
.cat-tab.is-active { color: var(--gws-ink); }
.cat-tab.is-active::after {
  content: ''; position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 1px; background: var(--gws-ink);
}
.cat-tab:hover { color: var(--gws-ink); }
.cat-count {
  font-family: var(--gws-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--gws-graphite);
  margin-left: auto;
  text-transform: lowercase;
}

/* PRODUCT DETAIL PAGE */
.pdp {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--gws-9);
  align-items: start;
  padding-top: 120px;
  padding-bottom: var(--gws-9);
}
@media (max-width: 1024px) {
  .pdp { grid-template-columns: 1fr; gap: var(--gws-7); padding-top: 100px; }
}
.pdp__media { display: flex; flex-direction: column; gap: var(--gws-3); }
.pdp__hero-image {
  aspect-ratio: 3/4;
  background: var(--gws-paper-2);
  overflow: hidden;
}
.pdp__hero-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(95%) brightness(0.98) contrast(1.02);
}
.pdp__thumbs {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--gws-3);
}
.pdp__thumb {
  aspect-ratio: 1;
  background: var(--gws-paper-2);
  overflow: hidden; cursor: pointer;
}
.pdp__thumb img {
  width: 100%; height: 100%;
  object-fit: cover; filter: grayscale(95%) brightness(0.98) contrast(1.02);
}
.pdp__copy {
  position: sticky; top: 100px;
  display: flex; flex-direction: column; gap: var(--gws-5);
}
@media (max-width: 1024px) { .pdp__copy { position: static; top: auto; } }
.pdp__num {
  font-family: var(--gws-mono);
  font-size: 11px;
  letter-spacing: 0.32em;
  color: var(--gws-graphite);
  text-transform: lowercase;
}
.pdp__title {
  font-family: var(--gws-display);
  font-weight: 500;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1;
  letter-spacing: var(--gws-tracking-tighter);
  margin: 0;
  text-transform: uppercase;
}
.pdp__title em {
  font-family: var(--gws-italic);
  font-style: italic; font-weight: 300;
  text-transform: lowercase;
}
.pdp__price {
  font-family: var(--gws-display);
  font-weight: 400; font-size: 28px;
  letter-spacing: -0.01em;
}
.pdp__lede {
  font-family: var(--gws-italic);
  font-style: italic; font-weight: 300;
  font-size: 20px;
  line-height: 1.55;
  color: var(--gws-ink-soft);
  margin: 0;
}
.pdp__group {
  display: flex; flex-direction: column; gap: var(--gws-3);
  padding-top: var(--gws-4);
  border-top: 1px solid var(--gws-hairline);
}
.pdp__group-label {
  font-family: var(--gws-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--gws-graphite);
  text-transform: lowercase;
}
.pdp__sizes {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: var(--gws-2);
}
.size-chip {
  background: transparent;
  border: 1px solid var(--gws-ink);
  padding: 14px 0;
  font-family: var(--gws-body);
  font-size: var(--gws-text-sm);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: all var(--gws-dur-base) var(--gws-ease);
  text-align: center;
}
.size-chip:hover { background: var(--gws-shade); }
.size-chip.is-selected { background: var(--gws-ink); color: var(--gws-paper); }
.pdp__fabric { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gws-2); }
.fabric-pill {
  background: transparent;
  border: 1px solid var(--gws-ink);
  padding: 14px 18px;
  font-family: var(--gws-body);
  font-size: var(--gws-text-sm);
  font-weight: 500;
  text-transform: lowercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  text-align: left;
  transition: all var(--gws-dur-base) var(--gws-ease);
  display: flex; flex-direction: column; gap: 4px;
}
.fabric-pill:hover { background: var(--gws-shade); }
.fabric-pill.is-selected { background: var(--gws-ink); color: var(--gws-paper); }
.fabric-pill__hint {
  font-family: var(--gws-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  opacity: 0.7;
}
.pdp__details { margin-top: var(--gws-5); }
.pdp__detail-row {
  display: flex; justify-content: space-between;
  padding: var(--gws-3) 0;
  border-bottom: 1px solid var(--gws-hairline);
  font-size: var(--gws-text-sm);
}
.pdp__detail-row span:first-child {
  font-family: var(--gws-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--gws-graphite);
  text-transform: lowercase;
}
.pdp__detail-row span:last-child {
  font-family: var(--gws-italic);
  font-style: italic;
  color: var(--gws-ink);
}

/* FABRIC PAGE — split editorial */
.fabric-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  margin-bottom: var(--gws-9);
}
@media (max-width: 1024px) { .fabric-split { grid-template-columns: 1fr; } }
.fabric-split:nth-child(even) .fabric-split__media { order: 2; }
@media (max-width: 1024px) {
  .fabric-split:nth-child(even) .fabric-split__media { order: 0; }
}
.fabric-split__media {
  aspect-ratio: 4/5;
  background: var(--gws-paper-2);
  overflow: hidden;
}
.fabric-split__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(95%) brightness(0.98) contrast(1.02);
  transition: transform var(--gws-dur-slow) var(--gws-ease);
}
.fabric-split:hover .fabric-split__media img { transform: scale(1.03); }
.fabric-split__copy {
  padding: var(--gws-8);
  display: flex; flex-direction: column;
  justify-content: center; gap: var(--gws-4);
}
@media (max-width: 768px) { .fabric-split__copy { padding: var(--gws-6) var(--gws-5); } }
.fabric-split__num {
  font-family: var(--gws-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--gws-graphite);
  text-transform: lowercase;
}
.fabric-split__title {
  font-family: var(--gws-display);
  font-weight: 500;
  font-size: clamp(36px, 4.5vw, 64px);
  line-height: 1;
  letter-spacing: var(--gws-tracking-tighter);
  margin: 0;
  text-transform: uppercase;
}
.fabric-split__title em {
  font-family: var(--gws-italic);
  font-style: italic; font-weight: 300;
  text-transform: lowercase;
}
.fabric-split__body {
  font-family: var(--gws-italic);
  font-style: italic; font-weight: 300;
  font-size: 20px;
  line-height: 1.55;
  color: var(--gws-ink-soft);
  max-width: 42ch;
  margin: 0;
}
.fabric-split__list {
  list-style: none; padding: 0; margin: var(--gws-3) 0 0;
}
.fabric-split__list li {
  display: grid; grid-template-columns: 100px 1fr;
  gap: var(--gws-4);
  padding: var(--gws-3) 0;
  border-bottom: 1px solid var(--gws-hairline);
  font-family: var(--gws-body);
  font-size: var(--gws-text-sm);
}
.fabric-split__list li:last-child { border-bottom: none; }
.fabric-split__list li span:first-child {
  font-family: var(--gws-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--gws-graphite);
  text-transform: lowercase;
}

/* STORY */
.prose { max-width: 60ch; margin: 0 auto; }
.prose p {
  font-family: var(--gws-italic);
  font-style: italic; font-weight: 300;
  font-size: clamp(20px, 1.6vw, 24px);
  line-height: 1.7;
  color: var(--gws-ink-soft);
  margin: 0 0 var(--gws-5);
}
.prose p:first-of-type::first-letter {
  font-family: var(--gws-display);
  font-style: normal;
  font-size: 5em;
  float: left;
  line-height: 0.9;
  margin: 8px 14px 0 0;
  color: var(--gws-ink);
  font-weight: 500;
}

.story-stat-row {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--gws-5);
  border-top: 1px solid var(--gws-hairline);
  border-bottom: 1px solid var(--gws-hairline);
  padding: var(--gws-7) 0;
  margin: var(--gws-9) 0;
}
@media (max-width: 768px) {
  .story-stat-row { grid-template-columns: repeat(2, 1fr); gap: var(--gws-6) var(--gws-5); }
}
.story-stat__num {
  font-family: var(--gws-display);
  font-weight: 500;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--gws-ink);
}
.story-stat__num em {
  font-family: var(--gws-italic);
  font-style: italic; font-weight: 300;
}
.story-stat__label {
  font-family: var(--gws-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--gws-graphite);
  text-transform: lowercase;
  margin-top: var(--gws-2);
}

/* FOOTER */
.site-footer {
  background: var(--gws-ink);
  color: var(--gws-paper-inv);
  padding: var(--gws-9) 0 var(--gws-5);
}
.footer-mark {
  font-family: var(--gws-display);
  font-weight: 500;
  font-size: clamp(48px, 7vw, 96px);
  line-height: 0.9;
  letter-spacing: var(--gws-tracking-tighter);
  margin: 0 0 var(--gws-7);
  color: var(--gws-paper);
  text-transform: uppercase;
}
.footer-mark em {
  font-family: var(--gws-italic);
  font-style: italic; font-weight: 300;
  text-transform: lowercase;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--gws-6);
  padding-top: var(--gws-6);
  border-top: 1px solid var(--gws-hairline-inv);
}
@media (max-width: 1024px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px)  { .footer-grid { grid-template-columns: 1fr; } }
.footer-col h4 {
  font-family: var(--gws-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--gws-paper);
  text-transform: lowercase;
  margin: 0 0 var(--gws-4);
  font-weight: 500;
}
.footer-col ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: var(--gws-2);
}
.footer-col a {
  font-family: var(--gws-body);
  font-size: var(--gws-text-sm);
  color: var(--gws-graphite-inv);
  text-decoration: none;
  text-transform: lowercase;
  transition: color var(--gws-dur-base) var(--gws-ease);
}
.footer-col a:hover { color: var(--gws-paper); }
.footer-bottom {
  display: flex; justify-content: space-between;
  flex-wrap: wrap; gap: var(--gws-3);
  margin-top: var(--gws-7);
  padding-top: var(--gws-5);
  border-top: 1px solid var(--gws-hairline-inv);
  font-family: var(--gws-mono);
  font-size: var(--gws-text-xxs);
  letter-spacing: 0.18em;
  color: var(--gws-graphite-inv);
  text-transform: lowercase;
}

/* 404 */
.four-oh-four {
  padding: var(--gws-9) 0;
  background: var(--gws-paper);
  position: relative;
  min-height: 70vh;
  display: flex; align-items: center;
  overflow: hidden;
}
.four-oh-four::before {
  content: '404';
  position: absolute; top: 50%; right: -2vw;
  transform: translateY(-50%);
  font-family: var(--gws-italic);
  font-style: italic; font-weight: 300;
  font-size: clamp(200px, 38vw, 520px);
  line-height: 0.8;
  letter-spacing: -0.06em;
  color: var(--gws-ink);
  opacity: 0.04;
  pointer-events: none; user-select: none;
  z-index: 0;
}
.four-oh-four__num {
  font-family: var(--gws-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--gws-graphite);
  text-transform: lowercase;
  display: inline-block;
  padding-bottom: var(--gws-3);
  border-bottom: 1px solid var(--gws-hairline);
  position: relative;
  z-index: 1;
  margin-bottom: var(--gws-4);
}
.four-oh-four__title {
  font-family: var(--gws-display);
  font-weight: 500;
  font-size: clamp(56px, 11vw, 156px);
  line-height: 0.9;
  letter-spacing: var(--gws-tracking-tightest);
  margin: 0 0 var(--gws-5);
  position: relative; z-index: 1;
  max-width: 12ch;
  text-transform: uppercase;
}
.four-oh-four__title em {
  font-family: var(--gws-italic);
  font-style: italic; font-weight: 300;
  color: var(--gws-graphite);
  text-transform: lowercase;
}
.four-oh-four__lede {
  font-family: var(--gws-italic);
  font-style: italic; font-weight: 300;
  font-size: 22px;
  line-height: 1.55;
  max-width: 50ch;
  margin: 0 0 var(--gws-7);
  position: relative; z-index: 1;
}
.four-oh-four__rail {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--gws-hairline);
  border-bottom: 1px solid var(--gws-hairline);
  position: relative; z-index: 1;
}
@media (max-width: 768px) { .four-oh-four__rail { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .four-oh-four__rail { grid-template-columns: 1fr; } }
.four-oh-four__chip {
  display: flex; flex-direction: column; gap: var(--gws-2);
  padding: var(--gws-5);
  border-right: 1px solid var(--gws-hairline);
  text-decoration: none; color: var(--gws-ink);
  transition: background var(--gws-dur-base) var(--gws-ease);
}
.four-oh-four__chip:last-child { border-right: none; }
@media (max-width: 768px) {
  .four-oh-four__chip { border-bottom: 1px solid var(--gws-hairline); }
  .four-oh-four__chip:nth-child(2n) { border-right: none; }
  .four-oh-four__chip:nth-child(3),
  .four-oh-four__chip:nth-child(4) { border-bottom: none; }
}
@media (max-width: 480px) { .four-oh-four__chip { border-right: none; } }
.four-oh-four__chip:hover { background: var(--gws-shade); }
.four-oh-four__chip-num {
  font-family: var(--gws-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--gws-graphite);
  text-transform: lowercase;
}
.four-oh-four__chip-label {
  font-family: var(--gws-italic);
  font-style: italic; font-weight: 300;
  font-size: 22px;
  color: var(--gws-ink);
  letter-spacing: -0.01em;
}

/* REVEALS */
.reveal {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition: opacity var(--gws-dur-rise) var(--gws-ease),
              transform var(--gws-dur-rise) var(--gws-ease);
}
.reveal.is-revealed { opacity: 1; transform: none; }
.reveal-stagger > * {
  opacity: 0;
  transform: translate3d(0, 32px, 0);
  transition: opacity var(--gws-dur-rise) var(--gws-ease),
              transform var(--gws-dur-rise) var(--gws-ease);
}
.reveal-stagger.is-revealed > *:nth-child(1) { transition-delay: 0ms; opacity: 1; transform: none; }
.reveal-stagger.is-revealed > *:nth-child(2) { transition-delay: 80ms; opacity: 1; transform: none; }
.reveal-stagger.is-revealed > *:nth-child(3) { transition-delay: 160ms; opacity: 1; transform: none; }
.reveal-stagger.is-revealed > *:nth-child(4) { transition-delay: 240ms; opacity: 1; transform: none; }
.reveal-stagger.is-revealed > *:nth-child(5) { transition-delay: 320ms; opacity: 1; transform: none; }
.reveal-stagger.is-revealed > *:nth-child(6) { transition-delay: 400ms; opacity: 1; transform: none; }

[data-cinematic] {
  opacity: 0;
  transform: translate3d(0, 60px, 0) scale(0.97);
  transition: opacity 1100ms var(--gws-ease), transform 1100ms var(--gws-ease);
}
[data-cinematic].is-cinematic-on { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-stagger > *, [data-cinematic] {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
}

/* ============================================================= 
   v2.3 — IMMERSIVE REVEAL · 3D SLIDER · EXPLODING OBJECT
   ============================================================= */

/* ────────────────────────────────────────────────────────
   1. IMMERSIVE REVEAL — full-bleed manifesto with clip-path mask
   ──────────────────────────────────────────────────────── */
.immersive {
  position: relative;
  min-height: 110vh;
  background: var(--gws-ink);
  color: var(--gws-paper);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gws-9) var(--gws-7);
  overflow: hidden;
  isolation: isolate;
}
@media (max-width: 768px) { .immersive { padding: var(--gws-8) var(--gws-5); min-height: 100vh; } }

/* mask layer that opens as we scroll */
.immersive__mask {
  position: absolute;
  inset: 0;
  background: var(--gws-paper);
  z-index: 2;
  pointer-events: none;
  /* Default state: fully covering. JS animates clip-path inset() open. */
  clip-path: inset(0% 0% 0% 0%);
  transition: clip-path 50ms linear;
  will-change: clip-path;
}

.immersive__inner {
  position: relative;
  z-index: 3;
  max-width: var(--gws-wrap-tight);
  width: 100%;
  text-align: center;
}

.immersive__eyebrow {
  font-family: var(--gws-mono);
  font-size: 11px;
  letter-spacing: 0.32em;
  color: var(--gws-eyebrow-inv);
  text-transform: lowercase;
  margin-bottom: var(--gws-5);
  display: inline-flex;
  align-items: center;
  gap: 14px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 800ms var(--gws-ease) 200ms,
              transform 800ms var(--gws-ease) 200ms;
}
.immersive__eyebrow::before,
.immersive__eyebrow::after {
  content: '';
  width: 32px;
  height: 1px;
  background: rgba(255, 255, 255, 0.35);
}
.immersive.is-open .immersive__eyebrow {
  opacity: 1;
  transform: none;
}

.immersive__title {
  font-family: var(--gws-display);
  font-weight: 500;
  font-size: clamp(56px, 12vw, 200px);
  line-height: 0.88;
  letter-spacing: var(--gws-tracking-tightest);
  margin: 0 0 var(--gws-6);
  text-transform: uppercase;
  color: var(--gws-paper);
  /* per-word reveal */
}
.immersive__title em {
  font-family: var(--gws-italic);
  font-style: italic;
  font-weight: 300;
  text-transform: lowercase;
  color: var(--gws-graphite-inv);
}
.immersive__title .word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}
.immersive__title .word > span {
  display: inline-block;
  transform: translateY(110%) rotate(4deg);
  transition: transform 1100ms var(--gws-ease);
}
.immersive.is-open .immersive__title .word > span {
  transform: none;
}
/* stagger word reveals */
.immersive.is-open .immersive__title .word:nth-child(1) > span { transition-delay: 350ms; }
.immersive.is-open .immersive__title .word:nth-child(2) > span { transition-delay: 450ms; }
.immersive.is-open .immersive__title .word:nth-child(3) > span { transition-delay: 550ms; }
.immersive.is-open .immersive__title .word:nth-child(4) > span { transition-delay: 650ms; }
.immersive.is-open .immersive__title .word:nth-child(5) > span { transition-delay: 750ms; }
.immersive.is-open .immersive__title .word:nth-child(6) > span { transition-delay: 850ms; }

.immersive__lede {
  max-width: 56ch;
  margin: 0 auto var(--gws-7);
  font-family: var(--gws-italic);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.55;
  color: var(--gws-paper-inv);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 900ms var(--gws-ease) 1000ms,
              transform 900ms var(--gws-ease) 1000ms;
}
.immersive.is-open .immersive__lede { opacity: 1; transform: none; }

.immersive__cta {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 900ms var(--gws-ease) 1200ms,
              transform 900ms var(--gws-ease) 1200ms;
}
.immersive.is-open .immersive__cta { opacity: 1; transform: none; }

/* faint vertical rule decoration */
.immersive__rule {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: rgba(255, 255, 255, 0.06);
  z-index: 1;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 1500ms var(--gws-ease) 600ms;
}
.immersive.is-open .immersive__rule { transform: scaleY(1); }

/* ────────────────────────────────────────────────────────
   2. 3D SLIDER — coverflow-style carousel
   ──────────────────────────────────────────────────────── */
.slider-3d {
  position: relative;
  width: 100%;
  perspective: 1800px;
  perspective-origin: 50% 50%;
  padding: var(--gws-7) 0 var(--gws-3);
  overflow: hidden;
}

.slider-3d__viewport {
  position: relative;
  height: 540px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
}
@media (max-width: 1024px) { .slider-3d__viewport { height: 480px; } }
@media (max-width: 768px)  { .slider-3d__viewport { height: 420px; } }
@media (max-width: 480px)  { .slider-3d__viewport { height: 380px; } }

.slider-3d__track {
  position: relative;
  width: 360px;
  height: 100%;
  transform-style: preserve-3d;
}
@media (max-width: 768px) { .slider-3d__track { width: 280px; } }
@media (max-width: 480px) { .slider-3d__track { width: 240px; } }

.slider-3d__slide {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 800ms var(--gws-ease),
              opacity 800ms var(--gws-ease),
              filter 800ms var(--gws-ease);
  will-change: transform, opacity, filter;
  cursor: pointer;
  user-select: none;
}
.slider-3d__slide a {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: inherit;
}
.slider-3d__media {
  width: 100%;
  height: 78%;
  background: var(--gws-paper-2);
  overflow: hidden;
  position: relative;
}
.slider-3d__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(95%) brightness(0.98) contrast(1.02);
  transition: transform var(--gws-dur-slow) var(--gws-ease);
}
.slider-3d__slide:hover .slider-3d__media img { transform: scale(1.04); }

.slider-3d__caption {
  padding: var(--gws-3) 0 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--gws-3);
}
.slider-3d__title {
  font-family: var(--gws-display);
  font-weight: 500;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin: 0;
}
.slider-3d__title em {
  font-family: var(--gws-italic);
  font-style: italic;
  font-weight: 300;
  text-transform: lowercase;
}
.slider-3d__price {
  font-family: var(--gws-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--gws-graphite);
  text-transform: lowercase;
}
.section--alt .slider-3d__caption { color: var(--gws-paper-inv); }
.section--alt .slider-3d__price   { color: var(--gws-graphite-inv); }
.section--alt .slider-3d__media   { background: rgba(255, 255, 255, 0.04); }

/* slider controls */
.slider-3d__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gws-5);
  margin-top: var(--gws-6);
  padding: 0 var(--gws-7);
}
.slider-3d__btn {
  width: 56px;
  height: 56px;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--gws-dur-base) var(--gws-ease),
              color var(--gws-dur-base) var(--gws-ease),
              transform var(--gws-dur-base) var(--gws-ease);
  font-family: var(--gws-display);
  font-size: 22px;
  line-height: 1;
}
.slider-3d__btn:hover {
  background: currentColor;
}
.slider-3d__btn:hover svg { color: var(--gws-ink); }
.section--alt .slider-3d__btn:hover svg { color: var(--gws-paper); }
.slider-3d__btn svg { width: 18px; height: 18px; transition: color var(--gws-dur-base) var(--gws-ease); }
.slider-3d__btn[disabled] { opacity: 0.3; cursor: default; }

.slider-3d__counter {
  font-family: var(--gws-mono);
  font-size: 11px;
  letter-spacing: 0.32em;
  color: var(--gws-graphite);
  text-transform: lowercase;
  min-width: 80px;
  text-align: center;
}
.section--alt .slider-3d__counter { color: var(--gws-graphite-inv); }

.slider-3d__rail {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: var(--gws-4);
}
.slider-3d__dot {
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: 0.25;
  transition: opacity var(--gws-dur-base) var(--gws-ease),
              transform var(--gws-dur-base) var(--gws-ease);
  cursor: pointer;
  border: none;
  padding: 0;
  display: block;
}
.slider-3d__dot.is-active { opacity: 1; transform: scaleY(2); }

/* ────────────────────────────────────────────────────────
   3. EXPLODING OBJECT — canvas particle field with shirt formation
   ──────────────────────────────────────────────────────── */
.explode-section {
  position: relative;
  min-height: 120vh;
  background: var(--gws-paper);
  overflow: hidden;
  isolation: isolate;
}
.explode-section--inverse { background: var(--gws-ink); color: var(--gws-paper); }

.explode-canvas-wrap {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.explode-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.explode-content {
  position: relative;
  z-index: 2;
  max-width: var(--gws-wrap-tight);
  margin: 0 auto;
  padding: 0 var(--gws-7);
  text-align: center;
  pointer-events: none;
}
@media (max-width: 768px) { .explode-content { padding: 0 var(--gws-5); } }

.explode-content > * { pointer-events: auto; }

.explode__eyebrow {
  font-family: var(--gws-mono);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: lowercase;
  color: var(--gws-graphite);
  margin-bottom: var(--gws-5);
  display: inline-block;
}
.explode-section--inverse .explode__eyebrow { color: rgba(255,255,255,0.55); }

.explode__title {
  font-family: var(--gws-display);
  font-weight: 500;
  font-size: clamp(40px, 7vw, 96px);
  line-height: 0.92;
  letter-spacing: var(--gws-tracking-tighter);
  text-transform: uppercase;
  margin: 0 0 var(--gws-5);
}
.explode__title em {
  font-family: var(--gws-italic);
  font-style: italic;
  font-weight: 300;
  text-transform: lowercase;
}
.explode-section--inverse .explode__title em { color: rgba(255,255,255,0.65); }

.explode__lede {
  max-width: 50ch;
  margin: 0 auto var(--gws-6);
  font-family: var(--gws-italic);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.6;
  color: var(--gws-ink-soft);
}
.explode-section--inverse .explode__lede { color: rgba(255,255,255,0.78); }

.explode__phase-rail {
  margin-top: var(--gws-7);
  display: inline-flex;
  gap: var(--gws-5);
  font-family: var(--gws-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: lowercase;
}
.explode__phase {
  opacity: 0.3;
  transition: opacity var(--gws-dur-base) var(--gws-ease);
}
.explode__phase.is-on { opacity: 1; }
.explode__phase span {
  color: var(--gws-graphite);
  margin-right: 8px;
}

.explode-spacer {
  height: 100vh;
}

@media (prefers-reduced-motion: reduce) {
  .explode-section { min-height: 60vh; }
  .explode-canvas-wrap { position: relative; height: auto; padding: var(--gws-7) 0; }
  .explode-spacer { display: none; }
}

/* =============================================================
   v2.4 — Photo placeholder fallback
   Every image container shows the shirt silhouette while Unsplash
   loads, and as a graceful fallback if the photo fails entirely.
   ============================================================= */
.product-card__media,
.pdp__hero-image,
.pdp__thumb,
.fabric-split__media,
.slider-3d__media {
  background: var(--gws-paper-2) url('/assets/shirt-silhouette.svg') center/cover no-repeat;
}

/* Smooth fade when actual photo loads on top of the placeholder */
.product-card__media img,
.pdp__hero-image img,
.fabric-split__media img,
.slider-3d__media img {
  transition: opacity var(--gws-dur-slow) var(--gws-ease),
              transform var(--gws-dur-slow) var(--gws-ease);
}

/* =============================================================
   v2.5 — DIRECTOR'S CUT
   Real photographic moment section + global polish
   Applied skill: creative-director-fashion-web
   ============================================================= */

/* ────────────────────────────────────────────────────────
   THE MOMENT — editorial split: image + still copy
   ──────────────────────────────────────────────────────── */
.moment {
  background: var(--gws-paper);
  padding: var(--gws-9) 0;
  border-top: 1px solid var(--gws-hairline);
  border-bottom: 1px solid var(--gws-hairline);
}
@media (max-width: 768px) {
  .moment { padding: var(--gws-7) 0; }
}

.moment__inner {
  max-width: var(--gws-wrap);
  margin: 0 auto;
  padding: 0 var(--gws-7);
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--gws-9);
  align-items: center;
}
@media (max-width: 1024px) {
  .moment__inner { grid-template-columns: 1fr; gap: var(--gws-6); padding: 0 var(--gws-5); }
}

.moment__figure {
  margin: 0;
  position: relative;
  background: var(--gws-paper-2) url('/assets/shirt-silhouette.svg') center/cover no-repeat;
  overflow: hidden;
}

.moment__image {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: grayscale(100%) contrast(1.05) brightness(0.96);
  transition: filter var(--gws-dur-slow) var(--gws-ease),
              transform 1200ms var(--gws-ease);
}
.moment__figure:hover .moment__image {
  transform: scale(1.02);
}

.moment__copy {
  display: flex;
  flex-direction: column;
  gap: var(--gws-4);
}

.moment__num {
  font-family: var(--gws-mono);
  font-size: var(--gws-text-xs);
  letter-spacing: 0.32em;
  text-transform: lowercase;
  color: var(--gws-graphite);
}

.moment__title {
  font-family: var(--gws-display);
  font-weight: 500;
  font-size: clamp(40px, 6vw, 88px);
  line-height: 0.95;
  letter-spacing: var(--gws-tracking-tightest);
  margin: 0;
  text-transform: uppercase;
  color: var(--gws-ink);
}
.moment__title em {
  font-family: var(--gws-italic);
  font-style: italic;
  font-weight: 300;
  text-transform: lowercase;
  color: var(--gws-ink-soft);
}

.moment__lede {
  font-family: var(--gws-italic);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.6;
  color: var(--gws-graphite);
  margin: 0;
  max-width: 42ch;
}

.moment__credit {
  font-family: var(--gws-mono);
  font-size: var(--gws-text-xxs);
  letter-spacing: 0.32em;
  text-transform: lowercase;
  color: var(--gws-graphite-2);
  margin: var(--gws-4) 0 0;
  padding-top: var(--gws-3);
  border-top: 1px solid var(--gws-hairline);
}

/* ────────────────────────────────────────────────────────
   GLOBAL POLISH — director's notes applied
   ──────────────────────────────────────────────────────── */

/* Bump body font weight slightly — Manrope at 400 reads thin */
body {
  font-weight: 420; /* Variable font supports it; falls back to 400 */
}

/* Editorial italics need optical compensation — bump weight & color */
em, .italic-text {
  font-weight: 400; /* slightly heavier than the surrounding 420 */
}

/* Better focus state: visible ring instead of system default */
*:focus-visible {
  outline: 2px solid var(--gws-ink);
  outline-offset: 3px;
}

/* Hero meta: previously gray, bump to graphite for legibility */
.hero__meta-label {
  color: var(--gws-graphite) !important;
}

/* Eyebrows site-wide: same — these were too pale */
.section-head__num,
.fabric-card__num,
.product-card__num,
.fabric-card__spec-label,
.product-card__meta,
.cat-tab,
.fabric-split__num,
.story-stat__label,
.four-oh-four__num,
.four-oh-four__chip-num,
.pdp__num,
.pdp__group-label,
.pdp__detail-row span:first-child {
  color: var(--gws-graphite) !important;
}

/* Italics in body need bumped contrast */
.hero__lede,
.section-head__lede,
.fabric-card__desc,
.fabric-split__body,
.pdp__lede,
.four-oh-four__lede,
.prose p {
  color: var(--gws-ink-soft);
}
em.hero__title em,
.hero__title em {
  color: var(--gws-ink); /* italic in headlines must read clearly */
}

/* The hero-meta values were italic light — bump weight */
.hero__meta-value {
  color: var(--gws-ink);
  font-weight: 400;
}

/* Better placeholder background for product images using real shirt silhouette  */
.moment__figure,
.product-card__media,
.pdp__hero-image,
.pdp__thumb,
.fabric-split__media,
.slider-3d__media {
  background-color: var(--gws-paper-2);
}

/* Cleaner, deeper grayscale treatment — director's note */
.product-card__media img,
.pdp__hero-image img,
.fabric-split__media img,
.slider-3d__media img,
.pdp__thumb img {
  filter: grayscale(100%) contrast(1.04) brightness(0.97) !important;
}

/* Footer secondary text — was 0.55 alpha (too pale on dark) */
.site-footer p,
.footer-col p {
  color: var(--gws-paper-inv) !important;
}
.footer-col a {
  color: var(--gws-graphite-inv) !important;
}
.footer-col a:hover {
  color: var(--gws-paper-inv) !important;
}
.footer-bottom {
  color: var(--gws-graphite-inv) !important;
}

/* Header on inverted (dark) section — better contrast */
.site-header.is-inverted .nav-link {
  color: var(--gws-paper-inv);
}
.site-header.is-inverted .nav-aux a {
  color: var(--gws-paper-inv);
}
.site-header.is-inverted .gws-mail {
  color: var(--gws-graphite-inv);
}

/* =============================================================
   v2.6 — CINEMATIC HERO MONTAGE
   Real photographs · Ken-burns slow-zoom · cross-fade · parallax depth
   No video file — pure CSS choreography reading like opening titles.
   ============================================================= */

.hero--cinema {
  /* Override hero base — fill viewport, dark backdrop for cinema mood */
  position: relative;
  min-height: 100vh;
  background: #0A0A0A;
  color: var(--gws-paper-inv);
  padding: 120px 0 var(--gws-7);
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
}
@media (max-width: 768px) {
  .hero--cinema { padding: 100px 0 var(--gws-6); }
}

/* CINEMA STAGE — full-bleed photo container */
.cinema-stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.cinema-frame {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1400ms cubic-bezier(0.45, 0, 0.55, 1),
              visibility 1400ms cubic-bezier(0.45, 0, 0.55, 1);
  will-change: opacity;
}
.cinema-frame.is-active {
  opacity: 1;
  visibility: visible;
}

/* Background plate — slow Ken Burns zoom + drift */
.cinema-frame__bg {
  position: absolute;
  inset: -8%;
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
  filter: grayscale(100%) contrast(1.08) brightness(0.62);
  transform: scale(1.0);
  transform-origin: 50% 50%;
}
.cinema-frame.is-active .cinema-frame__bg {
  animation: kenburns-bg 9s cubic-bezier(0.4, 0, 0.6, 1) forwards;
}
@keyframes kenburns-bg {
  0%   { transform: scale(1.0)   translate3d(0, 0, 0); }
  100% { transform: scale(1.12) translate3d(-2%, -1%, 0); }
}

/* Mid layer — slightly faster zoom, more contrast, creates depth illusion */
.cinema-frame__layer--mid {
  position: absolute;
  inset: -4%;
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
  filter: grayscale(100%) contrast(1.18) brightness(0.78);
  mix-blend-mode: lighten;
  opacity: 0.45;
  transform: scale(1.0);
  transform-origin: 50% 50%;
}
.cinema-frame.is-active .cinema-frame__layer--mid {
  animation: kenburns-mid 9s cubic-bezier(0.4, 0, 0.6, 1) forwards;
}
@keyframes kenburns-mid {
  0%   { transform: scale(1.0)   translate3d(0, 0, 0); }
  100% { transform: scale(1.06) translate3d(1%, -2%, 0); }
}

/* Frame caption — appears after 1s, fades with the frame */
.cinema-frame__caption {
  position: absolute;
  bottom: 24%;
  right: var(--gws-7);
  display: flex;
  align-items: baseline;
  gap: 16px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 800ms cubic-bezier(0.2, 0.7, 0.2, 1) 1000ms,
              transform 800ms cubic-bezier(0.2, 0.7, 0.2, 1) 1000ms;
  z-index: 4;
}
.cinema-frame.is-active .cinema-frame__caption {
  opacity: 1;
  transform: none;
}
@media (max-width: 768px) {
  .cinema-frame__caption {
    right: var(--gws-5);
    bottom: 32%;
  }
}
.cinema-frame__num {
  font-family: var(--gws-mono);
  font-size: 11px;
  letter-spacing: 0.32em;
  color: rgba(255, 255, 255, 0.55);
  text-transform: lowercase;
}
.cinema-frame__label {
  font-family: var(--gws-italic);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(15px, 1.3vw, 18px);
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: -0.01em;
}

/* VIGNETTE — soft darkening at edges for film feel */
.cinema-vignette {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 110% 90% at 50% 40%, transparent 35%, rgba(0,0,0,0.5) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.45) 0%, transparent 30%, transparent 60%, rgba(0,0,0,0.65) 100%);
}

/* GRAIN — subtle film grain, animated, very low opacity */
.cinema-grain {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0.12;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1   0 0 0 0 1   0 0 0 0 1   0 0 0 0.6 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
  animation: grain 0.8s steps(6) infinite;
}
@keyframes grain {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-3%, -2%); }
  20% { transform: translate(2%, 3%); }
  30% { transform: translate(-1%, 1%); }
  40% { transform: translate(1%, -2%); }
  50% { transform: translate(-2%, 2%); }
  60% { transform: translate(2%, -3%); }
  70% { transform: translate(-3%, 1%); }
  80% { transform: translate(1%, 2%); }
  90% { transform: translate(-2%, -1%); }
}

/* CINEMA METER — frame indicator dots in corner */
.cinema-meter {
  position: absolute;
  top: 50%;
  right: var(--gws-5);
  transform: translateY(-50%);
  z-index: 6;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
@media (max-width: 768px) {
  .cinema-meter { right: var(--gws-3); gap: 10px; }
}
.cinema-meter__dot {
  width: 1px;
  height: 28px;
  background: rgba(255, 255, 255, 0.25);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 320ms cubic-bezier(0.2, 0.7, 0.2, 1),
              height 320ms cubic-bezier(0.2, 0.7, 0.2, 1),
              width 320ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.cinema-meter__dot.is-active {
  background: rgba(255, 255, 255, 0.95);
  height: 44px;
  width: 2px;
}
.cinema-meter__dot:hover {
  background: rgba(255, 255, 255, 0.6);
}

/* Hero copy on cinema — invert colors */
.hero__inner--cinema {
  position: relative;
  z-index: 5;
  max-width: var(--gws-wrap);
  margin: 0 auto;
  padding: 0 var(--gws-7);
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: var(--gws-7);
}
@media (max-width: 1024px) {
  .hero__inner--cinema { grid-template-columns: 1fr; gap: var(--gws-6); }
}
@media (max-width: 768px) {
  .hero__inner--cinema { padding: 0 var(--gws-5); }
}

.hero--cinema .hero__eyebrow {
  color: rgba(255, 255, 255, 0.72);
}
.hero--cinema .hero__eyebrow::before {
  background: rgba(255, 255, 255, 0.5);
}
.hero--cinema .hero__title {
  color: var(--gws-paper-inv);
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.4);
}
.hero--cinema .hero__title em {
  color: rgba(255, 255, 255, 0.78);
}
.hero--cinema .hero__lede {
  color: rgba(255, 255, 255, 0.85);
}
.hero--cinema .hero__meta-row {
  border-bottom-color: rgba(255, 255, 255, 0.18);
}
.hero--cinema .hero__meta-label {
  color: rgba(255, 255, 255, 0.6) !important;
}
.hero--cinema .hero__meta-value {
  color: rgba(255, 255, 255, 0.95);
}

/* SCROLL INDICATOR */
.cinema-scroll {
  position: absolute;
  left: var(--gws-7);
  bottom: var(--gws-5);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
@media (max-width: 1024px) { .cinema-scroll { display: none; } }
.cinema-scroll__label {
  font-family: var(--gws-mono);
  font-size: 9px;
  letter-spacing: 0.32em;
  color: rgba(255, 255, 255, 0.5);
  text-transform: lowercase;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.cinema-scroll__line {
  width: 1px;
  height: 60px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5) 0%, transparent 100%);
  position: relative;
  overflow: hidden;
}
.cinema-scroll__line::after {
  content: '';
  position: absolute;
  top: -60px;
  left: 0;
  width: 1px;
  height: 60px;
  background: linear-gradient(to bottom, transparent 0%, rgba(255, 255, 255, 0.95) 100%);
  animation: scroll-pulse 2.4s cubic-bezier(0.6, 0, 0.4, 1) infinite;
}
@keyframes scroll-pulse {
  0%   { top: -60px; }
  100% { top: 60px; }
}

/* Reduced-motion: kill ken-burns + grain, leave a static photo */
@media (prefers-reduced-motion: reduce) {
  .cinema-frame.is-active .cinema-frame__bg,
  .cinema-frame.is-active .cinema-frame__layer--mid {
    animation: none !important;
    transform: none !important;
  }
  .cinema-grain { animation: none !important; opacity: 0; }
  .cinema-scroll__line::after { animation: none !important; opacity: 0; }
}

/* On mobile: simpler — keep cross-fade, lighter grain, less vignette */
@media (max-width: 768px) {
  .cinema-grain { opacity: 0.08; }
  .cinema-vignette {
    background:
      radial-gradient(ellipse 130% 100% at 50% 40%, transparent 40%, rgba(0,0,0,0.45) 100%),
      linear-gradient(180deg, rgba(0,0,0,0.35) 0%, transparent 30%, transparent 60%, rgba(0,0,0,0.7) 100%);
  }
  .cinema-frame.is-active .cinema-frame__bg {
    /* milder ken burns on mobile to save battery */
    animation-duration: 11s;
  }
}

/* =============================================================
   v2.7 — REAL VIDEO HERO
   <video> elements replace photo Ken-Burns. Pexels stock loops.
   ============================================================= */

.hero--video .cinema-frame {
  /* Override v2.6 transition to also handle video opacity */
}

/* The actual video element — fills the frame, grayscale + treatment */
.cinema-frame__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%) contrast(1.05) brightness(0.65);
  z-index: 1;
  /* Fallback if video can't load: poster shows */
}

/* Subtle Ken-Burns scale on the video itself for additional cinematic feel
   (the video already has its own captured motion; we just add a slow zoom-in
    so the framing breathes too) */
.cinema-frame.is-active .cinema-frame__video {
  animation: video-breath 14s cubic-bezier(0.4, 0, 0.6, 1) forwards;
}
@keyframes video-breath {
  0%   { transform: scale(1.0); }
  100% { transform: scale(1.06); }
}

/* MUTE INDICATOR — small "silent loop" tag, top-left */
.cinema-mute {
  position: absolute;
  top: var(--gws-5);
  left: var(--gws-7);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--gws-mono);
  font-size: 10px;
  letter-spacing: 0.32em;
  color: rgba(255, 255, 255, 0.55);
  text-transform: lowercase;
  opacity: 0;
  animation: mute-fade-in 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) 1.5s forwards;
}
@media (max-width: 768px) {
  .cinema-mute { left: var(--gws-5); top: var(--gws-4); }
}
.cinema-mute::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  animation: mute-pulse 2s ease-in-out infinite;
}
@keyframes mute-fade-in {
  to { opacity: 1; }
}
@keyframes mute-pulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.3); }
}

/* Reduced motion: stop video breath + mute pulse */
@media (prefers-reduced-motion: reduce) {
  .cinema-frame.is-active .cinema-frame__video {
    animation: none !important;
    transform: none !important;
  }
  .cinema-mute::before { animation: none; }
  /* Pause videos completely — handled in JS */
}

/* Mobile: smaller video breath */
@media (max-width: 768px) {
  .cinema-frame.is-active .cinema-frame__video {
    animation-duration: 18s;
  }
}

/* When a video frame is active, hide the v2.6 photo background layers
   (they shouldn't render anyway since they're not in the markup, but defensive) */
.hero--video .cinema-frame__bg,
.hero--video .cinema-frame__layer {
  display: none;
}

/* Show the poster image until the video starts playing — looks
   identical visually because we set the same grayscale filter on it. */
.cinema-frame__video::-webkit-media-controls { display: none !important; }
.cinema-frame__video::-webkit-media-controls-enclosure { display: none !important; }

/* =============================================================
   v2.7 — FABRIC PAGE INLINE VIDEO CLIPS
   The two fabric-split sections each get a small looping clip
   alongside the static photo for tactile motion.
   ============================================================= */
.fabric-split__media {
  position: relative;
  overflow: hidden;
}
.fabric-split__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%) contrast(1.05) brightness(0.92);
  opacity: 0;
  transition: opacity 1200ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.fabric-split__video.is-loaded {
  opacity: 1;
}
/* On reduced motion: don't show video, keep photo */
@media (prefers-reduced-motion: reduce) {
  .fabric-split__video { display: none; }
}

/* =============================================================
   v2.8 — VIDEO MOMENT SECTION
   The "moment" section now hosts a real <video> instead of <img>.
   ============================================================= */
.moment--video .moment__figure {
  position: relative;
  background: var(--gws-paper-2);
  overflow: hidden;
  aspect-ratio: 4 / 5;
}
.moment__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(100%) contrast(1.04) brightness(0.92);
  transition: transform 1200ms cubic-bezier(0.2, 0.7, 0.2, 1),
              filter var(--gws-dur-slow) var(--gws-ease);
}
.moment--video .moment__figure:hover .moment__video {
  transform: scale(1.02);
}

/* If there's a poster fallback to image, behave the same */
.moment__figure noscript img.moment__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%) contrast(1.05) brightness(0.96);
}

@media (prefers-reduced-motion: reduce) {
  .moment__video { /* paused via JS */ }
  .moment--video .moment__figure:hover .moment__video { transform: none; }
}

/* Mobile: ensure aspect ratio doesn't go too tall */
@media (max-width: 768px) {
  .moment--video .moment__figure { aspect-ratio: 3 / 4; }
}

/* =============================================================
   PAGE HERO — cinematic video block for all subpages (v2.10)
   Full-bleed video + ken burns zoom + edge vignette + film grain
   + mouse parallax + caption badge + title overlay
   ============================================================= */
.page-hero {
  position: relative;
  width: 100%;
  height: 70vh;
  min-height: 560px;
  max-height: 820px;
  overflow: hidden;
  background: #050505;
  display: flex;
  align-items: flex-end;
  isolation: isolate;
  margin-top: -100px; /* lap under header */
  padding-top: 100px;
}
.page-hero--tall { height: 80vh; min-height: 640px; }
.page-hero--short { height: 56vh; min-height: 460px; }

.page-hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
  filter: grayscale(1) brightness(0.78) contrast(1.08);
  animation: gwsKenBurns 22s ease-in-out infinite alternate;
  transform-origin: 50% 50%;
  transition: transform 0.6s ease;
}
@keyframes gwsKenBurns {
  0%   { transform: scale(1.04) translate(0%, 0%); }
  50%  { transform: scale(1.12) translate(-1.2%, -0.8%); }
  100% { transform: scale(1.08) translate(0.8%, 1.0%); }
}
.page-hero[data-parallax] .page-hero__video {
  transform: translate3d(var(--gws-px, 0), var(--gws-py, 0), 0) scale(1.08);
  animation: none;
}

.page-hero__vignette {
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 30%, transparent 0%, transparent 30%, rgba(0,0,0,0.55) 95%),
    linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0.55) 100%);
}

.page-hero__grain {
  position: absolute; inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.14;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 0.5  0 0 0 0 0.5  0 0 0 0 0.5  0 0 0 1 0'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='0.95'/></svg>");
  animation: gwsGrain 1.4s steps(5) infinite;
}
@keyframes gwsGrain {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-4%, 3%); }
  40%  { transform: translate(3%, -2%); }
  60%  { transform: translate(-2%, 4%); }
  80%  { transform: translate(4%, -3%); }
  100% { transform: translate(0, 0); }
}

.page-hero__caption {
  position: absolute; top: 124px; right: var(--gws-5);
  z-index: 4;
  font-family: var(--gws-mono);
  font-size: 11px; font-weight: 400; letter-spacing: 0.18em;
  text-transform: lowercase;
  color: rgba(255,255,255,0.78);
  padding: 7px 14px;
  background: rgba(0,0,0,0.32);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.14);
  animation: gwsFadeUp 1.2s 0.6s ease both;
}
.page-hero__caption::before {
  content: "▸ ";
  color: rgba(255,255,255,0.5);
  margin-right: 4px;
}

.page-hero__inner {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: var(--gws-wrap, 1440px);
  margin: 0 auto;
  padding: 0 var(--gws-5) var(--gws-7);
  color: #fff;
}
.page-hero__num {
  font-family: var(--gws-mono);
  font-size: 12px; font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: lowercase;
  color: rgba(255,255,255,0.72);
  margin-bottom: var(--gws-3);
  padding-bottom: var(--gws-3);
  border-bottom: 1px solid rgba(255,255,255,0.20);
  display: inline-block;
  animation: gwsFadeUp 1s 0.2s ease both;
}
.page-hero__title {
  font-family: var(--gws-display);
  font-weight: 400;
  font-size: clamp(48px, 8vw, 116px);
  line-height: 0.94;
  letter-spacing: -0.025em;
  color: #fff;
  margin: 0 0 var(--gws-4);
  max-width: 14ch;
  animation: gwsFadeUp 1.2s 0.4s ease both;
}
.page-hero__title em {
  font-family: var(--gws-italic);
  font-style: italic;
  font-weight: 400;
  color: rgba(255,255,255,0.96);
}
.page-hero__lede {
  font-family: var(--gws-italic);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.55;
  color: rgba(255,255,255,0.88);
  max-width: 56ch;
  margin: 0;
  animation: gwsFadeUp 1.2s 0.7s ease both;
}

@keyframes gwsFadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Inline product detail video — used between sections */
.detail-video {
  position: relative;
  width: 100%;
  margin: var(--gws-7) 0;
  aspect-ratio: 21/9;
  overflow: hidden;
  background: #050505;
}
.detail-video__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) brightness(0.86) contrast(1.06);
}
.detail-video__caption {
  position: absolute;
  bottom: var(--gws-4); left: var(--gws-5);
  z-index: 2;
  font-family: var(--gws-italic);
  font-style: italic;
  font-size: clamp(20px, 2vw, 30px);
  color: #fff;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 16px rgba(0,0,0,0.5);
  max-width: 26ch;
}
.detail-video__caption::before {
  content: '"'; opacity: 0.6; margin-right: 4px;
}
.detail-video__caption::after {
  content: '"'; opacity: 0.6; margin-left: 4px;
}
.detail-video__grain {
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.12;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='5'/><feColorMatrix values='0 0 0 0 0.5  0 0 0 0 0.5  0 0 0 0 0.5  0 0 0 1 0'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='0.95'/></svg>");
}

@media (max-width: 768px) {
  .page-hero { height: 64vh; min-height: 480px; }
  .page-hero__caption { top: 90px; font-size: 10px; padding: 6px 10px; }
  .page-hero__inner { padding: 0 var(--gws-4) var(--gws-5); }
  .page-hero__title { font-size: clamp(40px, 11vw, 64px); }
  .page-hero__lede  { font-size: 16px; }
  .detail-video { aspect-ratio: 4/3; margin: var(--gws-5) 0; }
  .detail-video__caption { font-size: 16px; bottom: var(--gws-3); left: var(--gws-3); }
}

@media (prefers-reduced-motion: reduce) {
  .page-hero__video { animation: none; transform: scale(1.04); }
  .page-hero__grain { animation: none; }
  .page-hero__num, .page-hero__title, .page-hero__lede, .page-hero__caption { animation: none; }
}

/* End of v2.10 page-hero block */