:root {
  --ink: #0b0b0b;
  --paper: #f3f3ef;
  --white: #ffffff;
  --line: rgba(11, 11, 11, .16);
  --acid: #c9ff24;
  --muted: #777873;
  --pad: clamp(20px, 4vw, 64px);
  --display: "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --body: Inter, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); font-size: 16px; line-height: 1.5; }
a { color: inherit; text-decoration: none; }
img { display: block; width: 100%; }
button { font: inherit; }

.site-header {
  position: fixed; z-index: 50; inset: 0 0 auto 0; height: 76px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--pad); color: var(--white); mix-blend-mode: difference;
}
.brand { font: 900 1.15rem/1 var(--display); letter-spacing: -.05em; display: flex; gap: 12px; align-items: center; }
.brand-mark { border: 2px solid currentColor; padding: 5px 7px 4px; transform: skew(-5deg); letter-spacing: -.08em; }
.nav { display: flex; gap: clamp(18px, 2.5vw, 40px); align-items: center; text-transform: uppercase; font-size: .74rem; font-weight: 700; letter-spacing: .09em; }
.nav a { position: relative; padding: 10px 0; }
.nav a::after { content: ""; position: absolute; left: 0; bottom: 5px; width: 0; height: 1px; background: currentColor; transition: width .25s; }
.nav a:hover::after, .nav a[aria-current="page"]::after { width: 100%; }
.menu-button { display: none; border: 0; background: none; color: inherit; padding: 10px 0; text-transform: uppercase; font-weight: 800; letter-spacing: .08em; }

.hero { min-height: 100svh; background: var(--ink); color: var(--white); display: grid; grid-template-columns: 42% 58%; overflow: hidden; }
.hero-copy { display: flex; flex-direction: column; justify-content: flex-end; padding: 120px var(--pad) 64px; position: relative; }
.eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 20px; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .16em; }
.eyebrow::before { content: ""; width: 22px; height: 3px; background: var(--acid); }
.hero h1, .display-title { margin: 0; font: 900 clamp(4rem, 8vw, 9rem)/.82 var(--display); text-transform: uppercase; letter-spacing: -.075em; }
.hero h1 span { display: block; color: var(--acid); }
.hero-sub { max-width: 34rem; margin: 30px 0 0; color: #b9b9b5; font-size: clamp(1rem, 1.2vw, 1.25rem); }
.hero-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 54px; padding-top: 18px; border-top: 1px solid #353535; font-size: .68rem; text-transform: uppercase; color: #a4a49e; letter-spacing: .08em; }
.hero-meta strong { display: block; margin-bottom: 4px; color: var(--white); font-size: 1rem; letter-spacing: -.03em; }
.hero-visual { position: relative; min-height: 100svh; background: #e8e8e5; }
.hero-visual img { height: 100%; object-fit: cover; object-position: center; filter: saturate(.9) contrast(1.02); }
.hero-stamp { position: absolute; right: var(--pad); bottom: 48px; width: 120px; height: 120px; border-radius: 50%; background: var(--acid); color: var(--ink); display: grid; place-items: center; text-align: center; font-size: .68rem; line-height: 1.2; font-weight: 900; text-transform: uppercase; letter-spacing: .1em; transform: rotate(8deg); }

.ticker { overflow: hidden; background: var(--acid); border-block: 1px solid var(--ink); padding: 12px 0; white-space: nowrap; }
.ticker-track { display: inline-flex; gap: 32px; min-width: max-content; font-size: .72rem; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; animation: marquee 22s linear infinite; }
.ticker-track span::after { content: "✦"; margin-left: 32px; }
@keyframes marquee { to { transform: translateX(-50%); } }

.section { padding: clamp(80px, 10vw, 150px) var(--pad); }
.section-dark { background: var(--ink); color: var(--white); }
.section-head { display: grid; grid-template-columns: 1fr 2fr; gap: 30px; align-items: end; margin-bottom: 56px; }
.section-kicker { text-transform: uppercase; font-size: .67rem; letter-spacing: .16em; font-weight: 800; }
.section-head h2 { margin: 0; font: 900 clamp(2.4rem, 5.3vw, 5.6rem)/.88 var(--display); text-transform: uppercase; letter-spacing: -.065em; max-width: 1000px; }
.section-intro { max-width: 600px; color: var(--muted); font-size: 1.05rem; }
.section-dark .section-intro { color: #a6a6a0; }

.product-grid { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--line); }
.product-card { min-height: 560px; position: relative; overflow: hidden; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #e8e8e5; }
.product-card:nth-child(2n) { border-right: 0; }
.product-card img { height: 100%; min-height: 560px; object-fit: cover; transition: transform .7s cubic-bezier(.2,.7,.2,1), filter .7s; }
.product-card:hover img { transform: scale(1.035); filter: contrast(1.04); }
.graphic-tee-card { background: #edf0f2; }
.graphic-tee-card img { object-fit: contain; }
.clean-category-card { background: #edf0f2; }
.clean-category-card img { object-fit: contain; padding: 24px 24px 100px; }
.clean-product-hero .page-hero-art { background: #edf0f2; opacity: 1; }
.clean-product-hero .page-hero-art img { object-fit: contain; padding: 30px; }
.clean-product-hero .page-hero-art::after { display: none; }
.clean-product-hero h1 { max-width: 40%; font-size: clamp(3rem, 6vw, 6.5rem); }
.clean-product-hero p { max-width: 35%; }
.category-craft { padding: clamp(24px, 5vw, 72px) var(--pad); background: #f3f4f5; }
.category-craft .craft-gallery { max-width: 1040px; margin: 0 auto; }
@media (max-width: 900px) {
  .clean-product-hero { padding-top: 110px; min-height: auto; }
  .clean-product-hero .page-no { order: 1; }
  .clean-product-hero h1 { order: 2; max-width: 100%; }
  .clean-product-hero p { order: 3; max-width: 100%; }
  .clean-product-hero .page-hero-art { position: relative; inset: auto; order: 4; height: 45svh; margin-top: 24px; }
}
.product-label { position: absolute; inset: auto 0 0; padding: 25px 28px; display: flex; justify-content: space-between; align-items: end; background: linear-gradient(transparent, rgba(0,0,0,.8)); color: #fff; }
.product-label small { display: block; color: var(--acid); text-transform: uppercase; font-weight: 800; letter-spacing: .12em; }
.product-label h3 { margin: 5px 0 0; font: 900 clamp(1.65rem, 2.65vw, 3rem)/.95 var(--display); text-transform: uppercase; letter-spacing: -.05em; }
.round-arrow { width: 48px; height: 48px; border: 1px solid rgba(255,255,255,.65); border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; transition: .25s; }
.product-card:hover .round-arrow { background: var(--acid); color: var(--ink); border-color: var(--acid); transform: rotate(-35deg); }

.brand-wall { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid #333; border-left: 1px solid #333; }
.brand-cell { min-height: 150px; display: grid; place-items: center; padding: 24px; border-right: 1px solid #333; border-bottom: 1px solid #333; font: 900 clamp(1.1rem,2vw,2rem)/1 var(--display); text-transform: uppercase; text-align: center; transition: .25s; }
.brand-cell:hover { background: var(--acid); color: var(--ink); }
.brand-note { margin: 18px 0 0; color: #757570; font-size: .72rem; }

.cap-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.cap-item { min-height: 320px; padding: 28px 22px; border-right: 1px solid var(--line); position: relative; }
.cap-item:last-child { border-right: 0; }
.cap-no { display: block; font-weight: 900; color: #8b8c86; }
.cap-item h3 { margin: 100px 0 12px; font: 900 1.2rem/1.05 var(--display); text-transform: uppercase; letter-spacing: -.03em; }
.cap-item p { margin: 0; color: var(--muted); font-size: .92rem; }

.split-cta { display: grid; grid-template-columns: 1.1fr .9fr; min-height: 650px; }
.split-image img { height: 100%; object-fit: cover; }
.split-color { background: #233547; }
.split-copy { background: var(--acid); padding: var(--pad); display: flex; flex-direction: column; justify-content: space-between; }
.split-copy h2 { margin: 0; font: 900 clamp(2.65rem,5.3vw,6.15rem)/.86 var(--display); text-transform: uppercase; letter-spacing: -.07em; }
.text-link { display: inline-flex; align-items: center; justify-content: space-between; gap: 50px; border-top: 2px solid; padding-top: 14px; font-size: .78rem; font-weight: 900; text-transform: uppercase; letter-spacing: .13em; }

.page-hero { min-height: 78svh; padding: 160px var(--pad) 60px; display: flex; flex-direction: column; justify-content: flex-end; background: var(--ink); color: white; position: relative; overflow: hidden; }
.page-hero.media { display: grid; grid-template-columns: .8fr 1.2fr; align-items: end; gap: 40px; }
.page-hero h1 { margin: 0; font: 900 clamp(4.4rem, 11vw, 11rem)/.8 var(--display); text-transform: uppercase; letter-spacing: -.08em; position: relative; z-index: 2; }
.page-hero p { max-width: 470px; color: #aaa; font-size: 1.05rem; position: relative; z-index: 2; }
.page-no { color: var(--acid); font-size: .8rem; font-weight: 900; letter-spacing: .15em; }
.page-hero-art { position: absolute; inset: 76px 0 0 42%; overflow: hidden; opacity: .9; }
.page-hero-art img { height: 100%; object-fit: cover; }
.page-hero-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--ink), transparent 45%), linear-gradient(0deg, var(--ink), transparent 40%); }

.catalog-strip { background: var(--white); padding: var(--pad); }
.catalog-strip img { aspect-ratio: 16/8.5; object-fit: cover; }
.detail-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 8vw; }
.detail-grid h2 { margin: 0; font: 900 clamp(2.4rem,4.4vw,4.85rem)/.9 var(--display); text-transform: uppercase; letter-spacing: -.06em; }
.detail-copy { max-width: 700px; }
.detail-copy p { color: var(--muted); font-size: 1.05rem; }
.spec-list { margin-top: 40px; border-top: 1px solid var(--line); }
.spec-row { display: grid; grid-template-columns: 180px 1fr; gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.spec-row strong { text-transform: uppercase; font-size: .73rem; letter-spacing: .1em; }
.spec-row span { color: #4f504c; }
.dark-cta { background: var(--ink); color: white; padding: clamp(70px, 9vw, 130px) var(--pad); display: grid; grid-template-columns: 1.4fr .6fr; align-items: end; gap: 40px; }
.dark-cta h2 { margin: 0; font: 900 clamp(2.65rem,6.15vw,6.6rem)/.84 var(--display); text-transform: uppercase; letter-spacing: -.07em; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 24px; background: var(--acid); color: var(--ink); text-transform: uppercase; letter-spacing: .1em; font-size: .75rem; font-weight: 900; border: 1px solid var(--acid); transition: .2s; }
.button:hover { background: transparent; color: var(--acid); }

.process { counter-reset: step; border-top: 1px solid var(--line); }
.process-row { counter-increment: step; display: grid; grid-template-columns: 90px 1fr 1fr; gap: 30px; padding: 28px 0; border-bottom: 1px solid var(--line); align-items: start; }
.process-row::before { content: "0" counter(step); font-weight: 900; color: #858680; }
.process-row h3 { margin: 0; font: 900 1.4rem/1 var(--display); text-transform: uppercase; }
.process-row p { margin: 0; color: var(--muted); }
.photo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.photo-grid figure { margin: 0; position: relative; background: #ddd; }
.photo-grid img { aspect-ratio: 1.65; object-fit: cover; }
.photo-grid figcaption { position: absolute; left: 14px; bottom: 14px; background: var(--ink); color: white; padding: 8px 10px; font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; }

.about-lead { max-width: 1200px; font: 800 clamp(2rem,4vw,4.4rem)/1.03 var(--display); letter-spacing: -.045em; text-transform: uppercase; }
.fact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); margin-top: 70px; }
.fact { background: var(--paper); padding: 35px 28px; min-height: 230px; }
.fact strong { font: 900 clamp(3rem,6vw,6rem)/1 var(--display); letter-spacing: -.07em; }
.fact span { display: block; margin-top: 80px; text-transform: uppercase; font-size: .73rem; letter-spacing: .12em; }

.contact-wrap { min-height: 100svh; background: var(--ink); color: white; padding: 150px var(--pad) 80px; display: grid; grid-template-columns: 1fr 1fr; gap: 8vw; }
.contact-wrap h1 { margin: 0; font: 900 clamp(4.5rem,9vw,9rem)/.82 var(--display); text-transform: uppercase; letter-spacing: -.075em; }
.contact-wrap h1 span { color: var(--acid); }
.contact-card { align-self: end; border-top: 1px solid #414141; }
.contact-line { padding: 24px 0; border-bottom: 1px solid #414141; }
.contact-line small { display: block; color: var(--acid); text-transform: uppercase; letter-spacing: .14em; font-weight: 800; margin-bottom: 8px; }
.contact-line a, .contact-line p { margin: 0; font-size: clamp(1.1rem, 2vw, 1.7rem); }

.site-footer { background: var(--ink); color: white; padding: 70px var(--pad) 30px; }
.footer-main { display: grid; grid-template-columns: 1.5fr .5fr .5fr; gap: 60px; padding-bottom: 70px; }
.footer-title { font: 900 clamp(3rem,7vw,7rem)/.85 var(--display); letter-spacing: -.07em; text-transform: uppercase; }
.footer-col small { display: block; color: var(--acid); margin-bottom: 14px; text-transform: uppercase; font-size: .68rem; letter-spacing: .14em; }
.footer-col a { display: block; color: #b8b8b2; margin: 7px 0; }
.footer-bottom { border-top: 1px solid #333; padding-top: 20px; display: flex; justify-content: space-between; color: #71716d; font-size: .7rem; text-transform: uppercase; letter-spacing: .09em; }

.reveal { opacity: 0; transform: translateY(20px); transition: opacity .75s, transform .75s; }
.reveal.visible { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .site-header { height: 64px; }
  .menu-button { display: block; }
  .nav { display: none; position: fixed; inset: 64px 0 auto; background: #0b0b0b; color: white; mix-blend-mode: normal; padding: 25px var(--pad) 35px; flex-direction: column; align-items: flex-start; gap: 8px; }
  .nav.open { display: flex; }
  .hero { grid-template-columns: 1fr; min-height: auto; }
  .hero-copy { min-height: 68svh; padding-top: 110px; }
  .hero-visual { min-height: 50svh; }
  .hero-meta { grid-template-columns: repeat(3,1fr); }
  .section-head, .detail-grid, .page-hero.media, .dark-cta, .contact-wrap { grid-template-columns: 1fr; }
  .section-head { gap: 16px; }
  .product-card, .product-card img { min-height: 420px; }
  .brand-wall { grid-template-columns: repeat(2,1fr); }
  .cap-grid { grid-template-columns: repeat(2,1fr); }
  .cap-item:nth-child(2) { border-right: 0; }
  .split-cta { grid-template-columns: 1fr; }
  .split-image { min-height: 420px; }
  .page-hero-art { inset: 64px 0 0 20%; opacity: .6; }
  .process-row { grid-template-columns: 50px 1fr; }
  .process-row p { grid-column: 2; }
  .contact-wrap { padding-top: 130px; }
  .footer-main { grid-template-columns: 1fr 1fr; }
  .footer-title { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
  .hero-copy { min-height: 72svh; }
  .hero h1, .display-title { font-size: clamp(3.6rem, 18vw, 6rem); }
  .hero-meta { font-size: .58rem; }
  .hero-meta strong { font-size: .85rem; }
  .product-grid, .photo-grid { grid-template-columns: 1fr; }
  .product-card { border-right: 0; }
  .product-card, .product-card img { min-height: 360px; }
  .brand-cell { min-height: 110px; }
  .cap-grid { grid-template-columns: 1fr; }
  .cap-item { min-height: 240px; border-right: 0; border-bottom: 1px solid var(--line); }
  .cap-item h3 { margin-top: 60px; }
  .page-hero { min-height: 70svh; }
  .catalog-strip { padding: 0; }
  .catalog-strip img { aspect-ratio: 1.2; }
  .spec-row { grid-template-columns: 1fr; gap: 4px; }
  .fact-grid { grid-template-columns: 1fr; }
  .fact { min-height: 180px; }
  .fact span { margin-top: 40px; }
  .footer-main { grid-template-columns: 1fr; }
  .footer-title { grid-column: auto; }
  .footer-bottom { flex-direction: column; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Editorial home */
.home-page { background: #fff; }
.home-page main { overflow: hidden; }
.home-page.is-intro { overflow: hidden; }

.intro-screen {
  position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; justify-content: center; align-items: center;
  background: #0a0a0a; color: #fff;
  transition: transform .85s cubic-bezier(.76,0,.24,1), visibility .85s;
}
.intro-lockup { position: relative; isolation: isolate; max-width: 90vw; white-space: nowrap; font: italic 900 clamp(3.6rem, 10vw, 9rem)/.78 var(--display); letter-spacing: -.085em; transform: rotate(-2deg) skewX(-8deg); }
.intro-lockup::before { content: ""; position: absolute; z-index: -1; left: -12%; top: 49%; width: 124%; height: 2px; background: linear-gradient(90deg, rgba(255,255,255,.12), rgba(255,255,255,.72) 20%, var(--acid) 82%, rgba(201,255,36,.18)); transform: rotate(-4deg) scaleX(0); transform-origin: left center; animation: introSlash 1.15s .42s cubic-bezier(.18,.75,.18,1) both; }
.intro-letter { position: relative; display: inline-block; overflow: visible; transform-origin: center 60%; animation: introLetter .68s var(--delay) cubic-bezier(.16,.82,.22,1) both; }
.intro-letter::after { content: attr(data-letter); position: absolute; inset: 0; z-index: -1; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.28); transform: translate(.065em, .055em); }
.intro-letter.accent { color: var(--acid); }
.intro-letter.accent::after { -webkit-text-stroke-color: rgba(201,255,36,.35); transform: translate(-.055em, .065em); }
.intro-meteor { position: absolute; z-index: 3; left: -12%; top: 49%; width: 124%; height: 2px; transform: rotate(-4deg); pointer-events: none; }
.intro-meteor::before { content: ""; position: absolute; left: -4%; top: 50%; width: 9px; height: 9px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px #fff, 0 0 20px var(--acid), 0 0 42px rgba(201,255,36,.7); transform: translate(-50%,-50%); animation: meteorCore 1.15s .42s cubic-bezier(.18,.75,.18,1) both; }
.intro-meteor::after { content: ""; position: absolute; left: -4%; top: 50%; width: clamp(70px, 11vw, 160px); height: 3px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), #fff 78%, var(--acid)); filter: blur(.3px); transform: translate(-100%,-50%); animation: meteorTail 1.15s .42s cubic-bezier(.18,.75,.18,1) both; }
.intro-tagline { max-width: 90vw; margin: clamp(34px, 5vh, 54px) 0 0; text-align: center; white-space: normal; font: 700 clamp(.75rem, 1.1vw, .875rem)/1.45 var(--body); letter-spacing: .18em; text-transform: uppercase; color: #a9aaa5; animation: introTag .7s 1.82s cubic-bezier(.2,.8,.2,1) both; }
.intro-complete .intro-screen { transform: translateY(-100%); visibility: hidden; }
@keyframes introLetter { 0% { opacity: 0; transform: translate(-.22em,.7em) rotate(-15deg) scale(.62); filter: blur(5px); } 68% { opacity: 1; transform: translate(.035em,-.055em) rotate(2deg) scale(1.06); filter: blur(0); } 100% { opacity: 1; transform: none; filter: blur(0); } }
@keyframes introTag { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes introSlash { from { opacity: 0; transform: rotate(-4deg) scaleX(0); } 10% { opacity: 1; } to { opacity: 1; transform: rotate(-4deg) scaleX(1); } }
@keyframes meteorCore { 0% { left: -4%; opacity: 0; transform: translate(-50%,-50%) scale(.45); } 8%, 84% { opacity: 1; } 100% { left: 104%; opacity: 0; transform: translate(-50%,-50%) scale(1.5); } }
@keyframes meteorTail { 0% { left: -4%; opacity: 0; } 12%, 78% { opacity: 1; } 100% { left: 104%; opacity: 0; } }

.home-hero { position: relative; min-height: 100svh; background: #101010; color: #fff; overflow: hidden; }
.home-hero-color { position: absolute; inset: 0 56% 0 0; background: #101010; }
.home-hero-collage { position: absolute; inset: 0 0 0 44%; display: block; background: #e8eaec; }
.home-hero-collage img { width: 100%; height: 100%; min-height: 0; object-fit: contain; object-position: center; filter: none; transform: scale(1.025); transition: transform 1.6s cubic-bezier(.2,.7,.2,1); }
.home-hero-collage .collage-main { display: block; }
.home-hero-collage img:nth-child(2) { object-position: center 31%; }
.home-hero-collage img:nth-child(3) { object-position: center 47%; }
.home-hero-collage img:nth-child(4) { object-position: center 42%; }
.intro-complete .home-hero-collage img { transform: scale(1); }
.home-hero-shade { display: none; }
.home-hero-copy { position: absolute; left: var(--pad); bottom: clamp(70px, 10vh, 120px); z-index: 2; transition: opacity .8s .15s, transform .8s .15s; }
.is-intro .home-hero-copy { opacity: 0; transform: translateY(24px); }
.home-hero-copy p, .craft-heading p { margin: 0 0 20px; font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.home-hero h1 { margin: 0; max-width: 900px; font: 800 clamp(4.2rem, 10vw, 9.5rem)/.8 var(--display); letter-spacing: -.075em; text-transform: uppercase; }
.home-arrow-link, .home-project-link, .craft-heading a, .home-end a { display: inline-flex; gap: 26px; align-items: center; border-bottom: 1px solid currentColor; padding: 17px 0 9px; font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.home-project-link { position: absolute; z-index: 2; right: var(--pad); bottom: clamp(72px, 10vh, 120px); }
.home-arrow-link span, .home-project-link span, .craft-heading a span, .home-end a span { transition: transform .25s; }
.home-arrow-link:hover span, .home-project-link:hover span, .craft-heading a:hover span, .home-end a:hover span { transform: translate(4px,-4px); }
.home-scroll { position: absolute; z-index: 2; right: var(--pad); top: 50%; font-size: .65rem; text-transform: uppercase; letter-spacing: .18em; transform: rotate(90deg) translateX(50%); transform-origin: right center; }

.logo-section, .home-collections { padding: clamp(72px, 9vw, 138px) var(--pad); background: #fff; }
.home-section-line { display: flex; justify-content: space-between; gap: 30px; align-items: baseline; padding-bottom: 18px; border-bottom: 1px solid #bbb; margin-bottom: clamp(38px, 5vw, 72px); }
.home-section-line p, .home-section-line span, .home-section-line a { margin: 0; font-size: .65rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.home-section-line span { color: #777; }
.logo-grid { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid #ddd; border-left: 1px solid #ddd; }
.logo-tile { aspect-ratio: 1.65; display: grid; place-items: center; padding: clamp(18px, 2.5vw, 38px); border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; background: #fff; overflow: hidden; }
.logo-tile img { width: 100%; height: 100%; max-width: 155px; max-height: 78px; object-fit: contain; filter: grayscale(1); transition: filter .3s, transform .3s, opacity .3s; }
.logo-tile:hover img { filter: grayscale(0); transform: scale(1.045); }
.logo-note { margin: 16px 0 0; color: #888; font-size: .68rem; }

.home-collections { background: #fff; }
.collection-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(12px, 1.7vw, 26px); }
.collection-card { position: relative; min-height: 0; aspect-ratio: 1.2; overflow: hidden; background: #edf0f2; }
.collection-card img { position: absolute; inset: 0 0 88px; width: 100%; height: calc(100% - 88px); object-fit: contain; transition: transform .8s cubic-bezier(.2,.7,.2,1), filter .8s; }
.collection-card::after { display: none; }
.collection-card:hover img { transform: scale(1.025); filter: contrast(1.03); }
.collection-card > span { position: absolute; z-index: 2; left: clamp(20px, 2.5vw, 38px); bottom: 28px; color: #111; font: 800 clamp(1.4rem, 2.45vw, 2.65rem)/.95 var(--display); letter-spacing: -.055em; text-transform: uppercase; }
.collection-card > b { position: absolute; z-index: 2; right: clamp(20px, 2.5vw, 38px); bottom: clamp(20px, 2.5vw, 34px); color: #fff; font-size: 1.4rem; font-weight: 400; }

.craft-section { display: grid; grid-template-columns: .74fr 1.26fr; min-height: 85svh; background: #0b0b0b; color: #fff; }
.craft-heading { padding: clamp(80px, 8vw, 130px) var(--pad); display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; }
.craft-heading h2 { margin: auto 0; font: 800 clamp(3.15rem, 6.15vw, 6.6rem)/.82 var(--display); letter-spacing: -.07em; text-transform: uppercase; }
.craft-gallery { position: relative; min-width: 0; display: flex; flex-direction: column; background: #eef0f2; color: #0a0a0a; }
.craft-gallery-viewport { min-width: 0; flex: 1; display: flex; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
.craft-gallery-viewport::-webkit-scrollbar { display: none; }
.craft-slide { position: relative; flex: 0 0 100%; min-width: 0; min-height: 720px; margin: 0; padding: 28px 84px 62px; display: grid; place-items: center; scroll-snap-align: start; scroll-snap-stop: always; overflow: hidden; background: #f6f7f8; }
.craft-slide:nth-child(even) { background: #eceff1; }
.craft-slide img { width: 100%; height: 100%; max-height: 78svh; object-fit: contain; filter: none; }
.craft-slide figcaption { position: absolute; left: 0; bottom: 0; padding: 17px 22px; background: #0a0a0a; color: #fff; font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.craft-gallery-nav { position: absolute; top: calc(50% - 17px); transform: translateY(-50%); z-index: 2; display: grid; place-items: center; width: 64px; height: 76px; padding: 0; border: 1px solid #111; background: #111; color: #fff; cursor: pointer; transition: background .2s,color .2s; }
.craft-gallery-prev { left: 10px; }
.craft-gallery-next { right: 10px; }
.craft-gallery-nav svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 2; }
.craft-gallery-nav:hover { background: #fff; color: #111; }
.craft-gallery-nav:focus-visible { outline: 3px solid var(--acid); outline-offset: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.home-end { min-height: 52svh; padding: var(--pad); display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; background: var(--acid); color: #0a0a0a; }
.home-end p { margin: 0; max-width: 1000px; font: 800 clamp(3.5rem, 8.5vw, 9rem)/.82 var(--display); letter-spacing: -.075em; text-transform: uppercase; }
.home-end a { flex: 0 0 auto; }

@media (max-width: 900px) {
  .home-hero { min-height: 92svh; }
  .home-hero-color { inset: 0 48% 0 0; }
  .home-hero-collage { left: 50%; grid-template-columns: 1fr 1fr; grid-template-rows: 58% 42%; }
  .home-hero-collage .collage-main { grid-column: 1 / 3; grid-row: 1; }
  .home-hero-collage img:nth-child(4) { display: none; }
  .home-hero-shade { background: linear-gradient(90deg, rgba(16,16,16,1) 0%, rgba(16,16,16,.92) 44%, rgba(16,16,16,.35) 55%, transparent 72%); }
  .home-project-link { top: 90px; right: var(--pad); bottom: auto; }
  .home-scroll { display: none; }
  .logo-grid { grid-template-columns: repeat(3, 1fr); }
  .craft-section { grid-template-columns: 1fr; }
  .craft-heading { min-height: 55svh; }
  .craft-slide { min-height: 760px; }
  .home-end { min-height: 58svh; flex-direction: column; align-items: flex-start; justify-content: flex-end; }
}

@media (max-width: 620px) {
  .home-hero { min-height: 88svh; }
  .home-hero-color { inset: 0 0 48% 0; }
  .home-hero-collage { inset: 46% 0 0; grid-template-columns: 1.18fr .82fr; grid-template-rows: 1fr 1fr; }
  .home-hero-collage .collage-main { grid-column: 1; grid-row: 1 / 3; }
  .home-hero-collage img:nth-child(4) { display: block; }
  .home-hero-collage img:nth-child(3) { display: none; }
  .home-hero-shade { background: linear-gradient(0deg, rgba(16,16,16,.52), transparent 58%), linear-gradient(180deg, #101010 0%, #101010 43%, rgba(16,16,16,.35) 57%, transparent 72%); }
  .home-hero-copy { top: 105px; right: var(--pad); bottom: auto; }
  .home-hero h1 { font-size: clamp(3.2rem, 17vw, 5.3rem); }
  .home-project-link { display: none; }
  .home-section-line { align-items: flex-start; flex-direction: column; gap: 8px; }
  .home-section-line span { line-height: 1.45; }
  .logo-grid { grid-template-columns: repeat(2, 1fr); }
  .logo-tile { aspect-ratio: 1.45; padding: 20px; }
  .collection-grid { grid-template-columns: 1fr; }
  .collection-card { min-height: 0; aspect-ratio: 1; }
  .collection-card > span { font-size: 1.55rem; }
  .craft-heading { min-height: 48svh; }
  .craft-slide { min-height: 620px; padding: 16px 54px 62px; }
  .craft-gallery-nav { width: 44px; height: 60px; }
  .craft-gallery-prev { left: 4px; }
  .craft-gallery-next { right: 4px; }
  .craft-gallery-nav svg { width: 27px; height: 27px; }
  .craft-slide img { max-height: none; }
  .home-end p { font-size: clamp(3.2rem, 17vw, 5rem); }
}

@media (prefers-reduced-motion: reduce) {
  .intro-screen { display: none; }
  .home-page.is-intro { overflow: auto; }
  .is-intro .home-hero-copy { opacity: 1; transform: none; }
}

/* Monochrome navigation blocks */
.arrow-block,
.round-arrow.arrow-block,
.collection-card > .arrow-block {
  position: relative;
  width: 44px;
  height: 44px;
  min-width: 44px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 1px solid #0a0a0a;
  border-radius: 0;
  background: #0a0a0a;
  color: #fff;
  font: 500 1.05rem/1 Arial, sans-serif;
  letter-spacing: 0;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

.arrow-block::before,
.arrow-block::after {
  content: "";
  position: absolute;
  display: block;
}

.arrow-block::before {
  width: 13px;
  height: 13px;
  top: 13px;
  right: 13px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
}

.arrow-block::after {
  width: 19px;
  height: 2px;
  top: 22px;
  left: 12px;
  background: currentColor;
  transform: rotate(-45deg);
  transform-origin: center;
}

.home-hero .arrow-block,
.craft-section .arrow-block,
.contact-wrap .arrow-block,
.product-card .arrow-block,
.collection-card > .arrow-block {
  border-color: #fff;
  background: #fff;
  color: #0a0a0a;
}

a:hover > .arrow-block,
.product-card:hover .arrow-block {
  border-color: #0a0a0a;
  background: #fff;
  color: #0a0a0a;
  transform: none;
}

.home-hero a:hover > .arrow-block,
.craft-section a:hover > .arrow-block,
.contact-wrap a:hover > .arrow-block,
.product-card:hover .arrow-block,
.collection-card:hover > .arrow-block {
  border-color: #fff;
  background: #0a0a0a;
  color: #fff;
  transform: none;
}

.home-section-line a,
.contact-line a {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.collection-card > .arrow-block {
  position: absolute;
  z-index: 2;
  right: clamp(20px, 2.5vw, 38px);
  bottom: clamp(20px, 2.5vw, 34px);
}

@media (max-width: 620px) {
  .arrow-block,
  .round-arrow.arrow-block,
  .collection-card > .arrow-block {
    width: 40px;
    height: 40px;
    min-width: 40px;
  }

  .arrow-block::before {
    top: 11px;
    right: 11px;
  }

  .arrow-block::after {
    top: 20px;
    left: 10px;
  }
}

/* Route color identities */
.page-products {
  --page-hero: #26211d;
  --page-surface: #ede8df;
  background: var(--page-surface);
}

.page-capabilities {
  --page-hero: #152229;
  --page-surface: #dfe5e6;
  background: var(--page-surface);
}

.page-about {
  --page-hero: #292824;
  --page-surface: #e7e3da;
  background: var(--page-surface);
}

.page-contact {
  --page-hero: #101419;
  background: var(--page-hero);
}

.product-outerwear { --page-hero: #1a2421; --page-surface: #e3e8e3; }
.product-graphic-tees { --page-hero: #291b20; --page-surface: #eee3e5; }
.product-sets-bottoms { --page-hero: #1b202b; --page-surface: #e2e5eb; }
.product-custom-programs { --page-hero: #29251c; --page-surface: #ebe7dd; }

.page-products .page-hero,
.page-capabilities .page-hero,
.page-about .page-hero,
.page-contact .contact-wrap {
  background: var(--page-hero);
}

.page-products .page-hero-art::after,
.page-about .page-hero-art::after {
  background: linear-gradient(90deg, var(--page-hero), transparent 45%), linear-gradient(0deg, var(--page-hero), transparent 40%);
}

.page-products .section:not(.section-dark),
.page-capabilities .section:not(.section-dark),
.page-about .section:not(.section-dark) {
  background: var(--page-surface);
}

.page-products .catalog-strip {
  background: #f7f4ee;
}

.page-capabilities .section:nth-of-type(4) {
  background: #eef1f1;
}

.page-about .fact {
  background: #f5f2ec;
}

/* Keep the office signage in frame on the About hero. */
.page-about .page-hero-art {
  left: 34%;
}

.page-about .page-hero-art img {
  object-position: 78% center;
}

@media (max-width: 900px) {
  .page-about .page-hero-art {
    left: 8%;
  }

  .page-about .page-hero-art img {
    object-position: 82% center;
  }
}

/* Full office overview, separate from the About cover. */
.office-intro { max-width: 540px; margin: 0 0 32px; color: var(--muted, #666); line-height: 1.6; }
.office-image { margin: 0; width: 100%; background: #fff; }
.office-image img { display: block; width: 100%; height: auto; object-fit: contain; }
@media (max-width: 620px) { .office-intro { margin-bottom: 24px; font-size: .88rem; } }

/* About work section: one complete surface, no empty decorative panel. */
.page-about .about-work { grid-template-columns: 1fr; min-height: 0; }
.page-about .about-work .split-copy { background: #233547; color: #fff; padding: clamp(56px, 7vw, 100px) var(--pad); gap: 36px; align-items: flex-start; }
.page-about .about-work .text-link { max-width: 520px; width: 100%; }
@media (max-width: 620px) { .page-about .about-work .split-copy { gap: 28px; } }

/* Narrow phone typography and safe link spacing on About. */
@media (max-width: 620px) {
  .page-about .page-hero { padding-top: 116px; padding-bottom: 48px; }
  .page-about .page-hero h1 { font-size: clamp(2.8rem, 13vw, 5rem); }
  .page-about .about-work .split-copy h2 { font-size: clamp(2rem, 10.5vw, 3.8rem); }
  .page-about .about-work .text-link { gap: 16px; font-size: .68rem; }
  .page-about .about-work .text-link > span:first-child { min-width: 0; }
  .page-about .about-work .arrow-block { flex-shrink: 0; }
  .page-about .office-section h2 { font-size: clamp(2rem, 9vw, 3.4rem); }
}

/* Mobile hero uses document flow so copy never overlaps the apparel image. */
@media (max-width: 900px) {
  .home-page .site-header { background: #101010; color: #fff; mix-blend-mode: normal; }
  .home-page .home-hero { display: flex; flex-direction: column; min-height: 0; overflow: visible; }
  .home-page .home-hero-color, .home-page .home-hero-shade { display: none; }
  .home-page .home-hero-copy { position: relative; inset: auto; order: 0; width: 100%; padding: 112px var(--pad) 40px; background: #101010; }
  .home-page .home-hero-copy p { max-width: 100%; margin-bottom: 24px; font-size: .75rem; line-height: 1.6; letter-spacing: .1em; }
  .home-page .home-hero h1 { font-size: clamp(3rem, 10vw, 5.5rem); line-height: .94; letter-spacing: -.055em; }
  .home-page .home-hero h1 span { white-space: nowrap; }
  .home-page .home-arrow-link { margin-top: 24px; padding: 0 0 12px; gap: 24px; font-size: .875rem; line-height: 1.4; }
  .home-page .home-arrow-link .arrow-block { flex-shrink: 0; }
  .home-page .home-hero-collage { position: relative; inset: auto; order: 1; width: 100%; display: block; background: #e8eaec; }
  .home-page .home-hero-collage img { width: 100%; height: auto; object-fit: contain; transform: none; }
  .home-page .home-project-link, .home-page .home-scroll { display: none; }
}
@media (max-width: 620px) {
  .home-page .brand { font-size: 1rem; gap: 10px; }
  .home-page .menu-button { font-size: .875rem; min-height: 44px; }
  .home-page .home-hero h1 { font-size: clamp(2.3rem, 12.2vw, 4.7rem); }
  .home-page .home-hero-copy { padding-top: 104px; padding-bottom: 36px; }
  .home-page .home-hero-copy p { font-size: .75rem; letter-spacing: .07em; }
  .home-page .logo-section, .home-page .home-collections { padding-top: 48px; padding-bottom: 48px; }
  .home-page .craft-heading { min-height: 0; padding-top: 56px; padding-bottom: 56px; gap: 28px; }
  .home-page .craft-heading h2 { margin: 0; line-height: .94; font-size: clamp(2.6rem, 11vw, 4rem); }
  .home-page .home-end { min-height: 0; padding-top: 56px; padding-bottom: 56px; gap: 32px; }
  .home-page .home-end p { font-size: clamp(2.5rem, 12vw, 4rem); line-height: .96; }
}

/* Opaque mobile navigation on every page; prevent blending with page content. */
@media (max-width: 900px) {
  .site-header, .home-page .site-header { background: #000; color: #fff; mix-blend-mode: normal; }
  .site-header .nav { inset: 64px 0 0; background: #000; color: #fff; opacity: 1; mix-blend-mode: normal; backdrop-filter: none; overflow-y: auto; overscroll-behavior: contain; padding: 28px var(--pad) max(32px, env(safe-area-inset-bottom)); align-items: stretch; gap: 8px; }
  .site-header .nav a { display: flex; align-items: center; min-height: 56px; padding: 14px 0; font-size: 1.125rem; line-height: 1.4; color: #fff; border-bottom: 1px solid #292929; }
  .site-header .nav a::after { display: none; }
  .site-header .nav a[aria-current="page"] { color: var(--acid); }
}

/* Paired apparel portfolio: crop the presentation board in the viewport, not the garment file. */
.catalog-visual { position: relative; width: 100%; aspect-ratio: 1.3; overflow: hidden; background: #fff; }
.catalog-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 52%; }
.category-grid, .catalog-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
.category-tile { display: block; min-width: 0; background: #fff; }
.category-tile h3 { margin: 0; padding: 20px 24px 24px; font: 800 clamp(1.25rem,2vw,1.9rem)/1.12 var(--display); text-transform: uppercase; letter-spacing: -.035em; }
.category-tile .catalog-visual img { transition: transform .5s; }
.category-tile:hover .catalog-visual img { transform: scale(1.025); }
.catalog-item { background: #fff; min-width: 0; }
.catalog-caption { padding: 18px 22px 22px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.catalog-caption h3 { margin: 0; font-size: .9375rem; font-weight: 700; line-height: 1.35; }
.detail-button { padding: 12px 20px; border: 1px solid #111; background: #111; color: white; font: 700 .875rem/1 var(--body); cursor: pointer; min-height: 44px; flex-shrink: 0; }
.detail-button:hover { background: white; color: #111; }
.detail-button:focus-visible, .category-tile:focus-visible { outline: 3px solid #7a9700; outline-offset: 4px; }
.catalog-hero { background: #172329; color: #fff; padding: 124px var(--pad) 64px; display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px; align-items: center; }
.catalog-hero h1, .embroidery-hero h1 { margin: 0 0 24px; font: 900 clamp(3rem,5.5vw,6rem)/.95 var(--display); text-transform: uppercase; letter-spacing: -.045em; }
.catalog-hero-copy > p:not(.section-kicker) { max-width: 420px; color: #c3cbd0; font-size: 1rem; }
.catalog-back { display: inline-block; margin-top: 24px; font-size: .875rem; border-bottom: 1px solid; padding-bottom: 8px; }
.catalog-section-head { margin-bottom: 36px; }
.catalog-section-head h2 { margin: 0; font: 800 clamp(2rem,3.5vw,3.5rem)/1.05 var(--display); letter-spacing: -.035em; }
.catalog-section-head p { font-size: 1rem; color: #61686b; }
.category-links, .catalog-services { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 48px; }
.category-links a, .catalog-services a { border: 1px solid #a9afb1; padding: 12px 16px; font-size: .875rem; background: #fff; }
.catalog-custom-hero .page-hero-art img { object-fit: cover; object-position: center 52%; padding: 0; }
.paired-slide { min-height: 0; padding: 54px 84px 90px; }
.paired-slide .catalog-visual { align-self: center; aspect-ratio: 1.05; }
.paired-slide figcaption { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: .875rem; letter-spacing: 0; text-transform: none; }
.paired-slide figcaption .detail-button { border-color: #fff; background: #fff; color: #111; }
.product-dialog { border: 0; padding: 0; width: min(1120px, calc(100vw - 48px)); max-width: none; height: min(92svh, 1100px); max-height: 92svh; background: #fff; color: #111; }
.product-dialog::backdrop { background: rgba(0,0,0,.8); }
.product-dialog[open] { display: flex; flex-direction: column; }
.viewer-bar { padding: 18px 24px; display: flex; justify-content: space-between; gap: 20px; align-items: center; border-bottom: 1px solid #ddd; }
.viewer-bar h2 { font-size: 1rem; line-height: 1.3; margin: 0; }
.viewer-close, .viewer-controls button { border: 1px solid #111; background: #fff; color: #111; font: 700 .875rem/1 var(--body); padding: 12px 16px; min-height: 44px; cursor: pointer; }
.viewer-controls { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 24px; border-bottom: 1px solid #ddd; }
.viewer-controls button[aria-pressed="true"] { background: #111; color: white; }
.viewer-image { flex: 1; min-height: 0; overflow: auto; background: #eef0f2; display: flex; justify-content: center; align-items: flex-start; }
.viewer-image img { width: auto; max-width: 100%; height: 100%; object-fit: contain; }
.viewer-image.zoomed { display: block; }
.viewer-image.zoomed img { width: max(100%, 1200px); max-width: none; height: auto; }
.viewer-note { margin: 0; padding: 12px 24px; font-size: .75rem; color: #5b6063; line-height: 1.45; }
body.is-detail { overflow: hidden; }
.embroidery-hero { background: #152329; color: white; padding: 130px var(--pad) 64px; display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 48px; }
.embroidery-hero p { max-width: 440px; }
.embroidery-hero .button { margin-top: 20px; }
.embroidery-hero figure { margin: 0; }
.embroidery-hero img { width: 100%; height: auto; }
.embroidery-hero figcaption { margin-top: 12px; font-size: .875rem; color: #c1c8cb; }
.embroidery-intro > p { max-width: 640px; margin-bottom: 36px; }
.embroidery-intro .photo-grid { max-width: 1100px; }
.embroidery-intro .photo-grid img { object-fit: contain; background: #dfe5e6; }
.embroidery-techniques { display: grid; grid-template-columns: repeat(3,1fr); gap: 32px; }
.embroidery-techniques h3 { font-size: 1.5rem; margin: 0 0 16px; }
.embroidery-techniques p { color: #b8c1c6; }
.patch-service { background: #e2e8e9; }
.patch-service h2 { font: 900 clamp(2.7rem,6vw,6rem)/.95 var(--display); text-transform: uppercase; letter-spacing: -.05em; margin: 0 0 28px; }
.patch-service p:not(.section-kicker) { max-width: 650px; margin-bottom: 32px; }
.embroidery-steps { padding: 28px var(--pad); background: #111; color: white; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.embroidery-steps p { margin: 0; font-size: .875rem; }
@media (min-width: 901px) and (max-width: 1200px) { .nav { gap: 14px; font-size: .68rem; } }
@media (max-width: 900px) {
  .catalog-hero, .embroidery-hero { grid-template-columns: 1fr; padding-top: 116px; gap: 36px; }
  .catalog-hero h1, .embroidery-hero h1 { font-size: clamp(2.7rem,8vw,4.8rem); }
  .embroidery-hero figure { max-width: 640px; }
  .embroidery-techniques { grid-template-columns: 1fr; gap: 24px; }
  /* Half-height opaque menu; short screens scroll within the panel. */
  .site-header .nav { inset: 64px 0 auto; height: calc(50svh - 64px); min-height: 240px; max-height: calc(100svh - 64px); padding: 16px var(--pad); gap: 0; background: #000; }
  .site-header .nav a { min-height: 44px; padding: 10px 0; font-size: 1rem; flex-shrink: 0; }
}
@media (max-width: 620px) {
  .catalog-grid, .category-grid { grid-template-columns: 1fr; gap: 24px; }
  .catalog-hero, .embroidery-hero { padding-bottom: 40px; }
  .catalog-caption { padding: 16px; gap: 12px; }
  .catalog-caption h3 { font-size: .875rem; }
  .category-tile h3 { padding: 18px; font-size: 1.25rem; }
  .catalog-section { padding-top: 48px; padding-bottom: 48px; }
  .paired-slide { padding: 28px 50px 98px; min-height: 400px; }
  .paired-slide figcaption { padding: 16px; font-size: .8125rem; }
  .paired-slide .catalog-visual { aspect-ratio: 1.15; }
  .paired-slide .catalog-visual img { object-fit: cover; }
  .product-dialog { width: 100vw; height: 100svh; max-height: 100svh; margin: 0; }
  .viewer-bar { padding: 14px 16px; gap: 12px; }
  .viewer-controls { padding: 12px 16px; gap: 6px; }
  .viewer-controls button { padding: 12px; }
  .viewer-note { padding: 12px 16px max(16px,env(safe-area-inset-bottom)); }
}

/* Real workshop photography and sample video. */
.workshop-photo-grid, .embroidery-sample-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 32px 24px; }
.workshop-photo-grid figure, .embroidery-sample-grid figure { margin: 0; min-width: 0; }
.workshop-photo-grid img { width: 100%; height: auto; }
.workshop-photo-grid figcaption, .embroidery-sample-grid figcaption { padding-top: 14px; font-size: .875rem; line-height: 1.45; }
.embroidery-samples { background: #e4e9eb; }
.sample-photo { aspect-ratio: 1; background: #dce2e4; overflow: hidden; display: grid; place-items: center; }
.sample-photo img { width: 100%; height: 100%; object-fit: contain; }
.photo-turn img { transform: rotate(90deg); }
.embroidery-film { background: #101010; color: #fff; }
.embroidery-film video { display: block; width: 100%; max-width: 1100px; height: auto; aspect-ratio: 910 / 512; margin: 0 auto; background: #000; }
@media (max-width: 620px) {
  .workshop-photo-grid, .embroidery-sample-grid { grid-template-columns: 1fr; gap: 28px; }
  .embroidery-samples, .embroidery-film { padding-top: 48px; padding-bottom: 48px; }
  .embroidery-samples h2, .embroidery-film h2 { font-size: clamp(2.4rem, 11vw, 3.6rem); line-height: 1; }
}

/* Separate real facilities from the embroidery portfolio. */
.facility-photo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 24px}.facility-photo-grid figure{margin:0;min-width:0}.facility-photo-grid figure:last-child:nth-child(odd){grid-column:1/-1}.facility-photo-grid img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}.facility-photo-grid figure:last-child:nth-child(odd) img{aspect-ratio:16/9}.facility-photo-grid figcaption{padding-top:14px;font-size:.875rem}.facility-cutting{background:#e7e9e7}.facility-packing{background:#d9dfe2}.facility-embroidery-link p{max-width:40rem}.embroidery-environment{background:#e6e8e5}.embroidery-intro .workshop-photo-grid img{aspect-ratio:4/5;object-fit:cover}.refined-sample{aspect-ratio:4/5;background:#eef0f1}.sample-caption{display:flex;justify-content:space-between;align-items:center;gap:16px}.embroidery-sample-grid{align-items:start}.embroidery-sample-grid figure{background:transparent}.embroidery-samples .sample-photo{padding:0}.embroidery-environment .workshop-photo-grid img{aspect-ratio:4/3;object-fit:cover}
@media(max-width:620px){.facility-photo-grid{grid-template-columns:1fr;gap:28px}.facility-photo-grid figure:last-child:nth-child(odd){grid-column:auto}.facility-photo-grid figure:last-child:nth-child(odd) img{aspect-ratio:4/3}.sample-caption{font-size:.8rem}.facility-section .section-head h2{font-size:clamp(2.4rem,11vw,3.6rem);line-height:1}}

.embroidery-intro .machine-landscape img{aspect-ratio:4/3;object-fit:contain;background:#e7e9e7}.embroidery-intro .machine-landscape:last-child{grid-column:1/-1}.embroidery-intro .machine-landscape:last-child img{aspect-ratio:16/9}.viewer-image:not(.zoomed) img.rotated-sample{max-width:min(65vh,80vw);max-height:min(65vh,80vw)}@media(max-width:620px){.embroidery-intro .machine-landscape:last-child{grid-column:auto}.embroidery-intro .machine-landscape:last-child img{aspect-ratio:4/3}}

/* Clean isolated garments and a consistent category navigator. */
.catalog-visual.product-cutout{background:#eef0f2}.catalog-visual.product-cutout img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;padding:5%;box-sizing:border-box}.paired-slide .catalog-visual.product-cutout{background:transparent;aspect-ratio:1.3}.category-links{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;margin-top:48px;border-top:1px solid #bfc1c1;border-left:1px solid #bfc1c1}.category-links a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0;min-height:76px;margin:0;padding:18px 20px;border:0;border-right:1px solid #bfc1c1;border-bottom:1px solid #bfc1c1;background:transparent;color:#151515;font-size:.8rem;line-height:1.4;font-weight:600;transition:background .2s,color .2s}.category-links a::after{content:'↗';font-size:17px;flex-shrink:0}.category-links a:hover,.category-links a[aria-current="page"]{background:#111;color:#fff}.category-links a:focus-visible{outline:3px solid #789900;outline-offset:-3px}.detail-button{min-height:44px;padding:12px 18px;font-size:.8rem}.viewer-controls{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0}.viewer-controls button{min-width:0;padding:12px 8px}.viewer-controls button+button{border-left:0}
@media(max-width:1000px){.category-links{grid-template-columns:repeat(2,minmax(0,1fr))}.category-links a{min-height:64px;padding:16px;font-size:.8rem}}
@media(max-width:620px){.category-links{margin-top:32px}.category-links a{min-height:64px;padding:14px 12px;font-size:.75rem}.paired-slide .catalog-visual.product-cutout{aspect-ratio:1.15}.catalog-caption{gap:12px}.catalog-caption h3{font-size:.875rem}.detail-button{padding:12px 16px}.viewer-controls{padding:12px}.viewer-controls button{font-size:.7rem;padding:12px 4px}.craft-gallery-nav{width:40px;height:48px}.craft-gallery-nav svg{width:22px;height:22px}}

/* A slight radius softens controls without changing the black-and-white system. */
.button,.detail-button,.craft-gallery-nav,.viewer-close,.viewer-controls button,
.catalog-services a,.home-arrow-link .arrow-block,.home-project-link .arrow-block,
.home-section-line a .arrow-block { border-radius: 5px; }
.category-links { border-radius: 5px; overflow: hidden; }
.sample-photo { border-radius: 4px; background: #e9edee; }
.sample-photo img { transition: filter .3s ease; filter: contrast(1.035) saturate(1.04); }
.sample-analysis { margin: 8px 0 0; max-width: 35em; color: #4a5355; font-size: .82rem; line-height: 1.5; }
/* The older office montage contains several small frames: never stretch it edge to edge. */
.office-image { max-width: 1160px; margin-inline: auto; }
.office-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; max-width: 1160px; margin-inline: auto; }
.office-panel { min-width: 0; margin: 0; }
.office-frame { position: relative; aspect-ratio: 1.45; overflow: hidden; background: #dce0e1; }
.office-frame img { position: absolute; display: block; width: 240%; max-width: none; height: auto; left: -88.6%; }
.office-panel.reception img { top: 0; }
.office-panel.workspace img { bottom: 0; }
.office-panel figcaption { margin-top: 12px; font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
@media (max-width: 620px) { .office-grid { grid-template-columns: 1fr; gap: 28px; } }

/* Product category navigation: quiet, centered labels with a clear tap target. */
.category-links {
  border: 0;
  overflow: visible;
  gap: 10px;
  border-radius: 0;
}
.category-links a {
  justify-content: center;
  text-align: center;
  min-height: 62px;
  padding: 12px 16px;
  border: 1px solid #b8bdc0;
  border-radius: 6px;
  background: #f8f8f7;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .015em;
  line-height: 1.3;
}
.category-links a::after { content: none; }
.catalog-visual.accurate-display img { object-fit: contain; object-position: center; }
.embroidery-hero .embroidery-patch-note { margin-top: 12px; font-size: .85rem; line-height: 1.5; font-weight: 700; }
.embroidery-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.embroidery-hero-actions .button { margin: 0; }
.patch-hero-button { background: transparent; border: 1px solid currentColor; }
.patch-order-brief { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; margin: 32px 0; }
.patch-order-brief h3 { font-size: .95rem; margin-bottom: 8px; }
.patch-order-brief p { font-size: .85rem; line-height: 1.6; }
@media (max-width: 620px) {
  .embroidery-hero-actions { flex-direction: column; align-items: stretch; }
  .embroidery-hero-actions .button { justify-content: center; text-align: center; }
  .patch-order-brief { grid-template-columns: 1fr; gap: 20px; }
}
.category-links a:hover,
.category-links a[aria-current="page"] { background: #111; border-color: #111; color: #fff; }
@media (max-width: 620px) {
  .category-links { gap: 8px; }
  .category-links a { min-height: 58px; padding: 11px 10px; font-size: .73rem; }
}

/* Reserve a separate navigation band above the homepage artwork. */
.home-page { --home-header-height: 76px; }
.home-page .site-header {
  height: var(--home-header-height);
  background: #101010;
  color: #fff;
  mix-blend-mode: normal;
  border-bottom: 1px solid #292929;
}
.home-page main { padding-top: var(--home-header-height); }
@media (min-width: 901px) {
  .home-page .home-hero { min-height: calc(100svh - var(--home-header-height)); }
}
@media (max-width: 900px) {
  .home-page { --home-header-height: 64px; }
  .home-page .home-hero-copy { padding-top: 40px; }
}

/* Preserve the supplied reverse Cookies mark within the monochrome brand wall. */
.logo-tile img.logo-inverse, .logo-tile:hover img.logo-inverse { filter: grayscale(1) invert(1); mix-blend-mode: multiply; }

/* Render each raster mark within its native 2x density; retain vectors at any size. */
.logo-tile img[src$="brand-cookies-hd.png"] { max-width: 128px; }

/* Full garment presentation on clean white, including narrow/mobile cards. */
.catalog-visual:has(img[src$="/s009-display.webp"]),
.catalog-visual:has(img[src$="/s013-display.webp"]),
.catalog-visual:has(img[src$="/s036-display.webp"]) { background: #fff; }
.catalog-visual img[src$="/s009-display.webp"],
.catalog-visual img[src$="/s013-display.webp"],
.catalog-visual img[src$="/s036-display.webp"] { object-fit: contain; object-position: center; }

/* Repaired trousers: display full waistbands and hems at every card size. */
.catalog-visual img[src$="/s017-display-repaired.webp"],
.catalog-visual img[src$="/s030-display-repaired.webp"] { object-fit: contain; object-position: center; }

/* Audited complete garment views and neutral backgrounds. */
.catalog-visual:has(img[src$="/s047-cutout.webp"]),
.catalog-visual:has(img[src$="/s055-cutout.webp"]) { background: #fff; }
.catalog-visual img[src$="/s014-display.webp"] { object-fit: contain; object-position: center; }

/* Complete apparel images: white canvas, centered fitting, no edge cropping. */
.catalog-visual.complete-product { background: #fff; }
.catalog-visual.complete-product img,
.paired-slide .catalog-visual.complete-product img {
  object-fit: contain;
  object-position: center;
  padding: 2%;
  box-sizing: border-box;
}
.catalog-visual.complete-outfit,
.paired-slide .catalog-visual.complete-outfit { aspect-ratio: 4 / 5; }
.viewer-image { background: #fff; align-items: center; }
.viewer-image:not(.zoomed) img {
  width: 100%; height: 100%; max-width: 100%; max-height: 100%;
  object-fit: contain; object-position: center; flex: none;
}