/* X&X JAPAN — request to production / 2026-09 */
.brand-home { --brand-paper:#f1f0e9; --brand-ink:#171b19; --brand-accent:#a9c7b7; background:var(--brand-paper); color:var(--brand-ink); }
.brand-home .site-header { border-radius:5px; box-shadow:none; max-width:1320px; background:#171b19f5; }
.brand-home .header-cta { border-radius:3px; background:var(--brand-accent); }
.brand-hero,.brand-services,.brand-requests,.brand-process,.brand-final { width:min(1224px,calc(100% - 64px)); margin-inline:auto; }
.brand-hero { padding-top:34px; }
.hero-meta,.hero-baseline { display:flex; justify-content:space-between; align-items:center; gap:24px; font:11px/1.6 ui-monospace,monospace; letter-spacing:.09em; }
.hero-meta { padding-bottom:18px; border-bottom:1px solid #c8cdc5; color:#5b665f; }
.brand-hero-grid { display:grid; grid-template-columns:1.5fr 1fr; gap:65px; padding:62px 0 66px; align-items:center; }
.brand-home .eyebrow { color:#586a60; font-size:11px; letter-spacing:.16em; font-weight:700; }
.brand-hero h1 { font-size:clamp(30px,3.9vw,56px); font-weight:800; letter-spacing:-.055em; line-height:1.52; margin:22px 0 25px; text-wrap:initial; }
.brand-hero h1 em { font-style:normal; text-decoration:underline; text-decoration-color:#a9c7b7; text-decoration-thickness:9px; text-underline-offset:8px; }
.brand-intro { font-size:17px; line-height:1.9; color:#4e5952; }
.brand-text-link { display:inline-flex; gap:25px; align-items:center; margin-top:28px; padding-block:10px; border-bottom:1px solid #879a8e; font-size:13px; font-weight:700; }
.brand-text-link span { font-size:24px; }
.request-sheet { position:relative; padding:26px 30px 20px; background:#fafbf6; border:1px solid #cdd4cb; box-shadow:10px 10px 0 #dce1d8; transform:rotate(2deg); }
.sheet-top { display:flex; justify-content:space-between; font:10px/1.5 ui-monospace,monospace; letter-spacing:.08em; border-bottom:1px solid #d6dcd1; padding-bottom:14px; }
.status-dot { color:#4d6e5b; }.status-dot::before { content:'● '; }
.sheet-quote { font-size:clamp(24px,2.6vw,36px); line-height:1.6; font-weight:750; margin:22px 0 0; letter-spacing:-.04em; }
.sheet-sketch { width:100%; height:156px; color:#678475; }.sheet-sketch svg { width:100%; height:100%; }
.sheet-fields { display:grid; gap:0; }.sheet-fields>span { display:flex; justify-content:space-between; gap:15px; border-top:1px solid #d6dcd1; padding:10px 0; font-size:10px; color:#677469; }.sheet-fields strong { color:#34483b; font-size:11px; font-weight:500; }
.sheet-note { margin:8px 0 0; font-size:10px; text-align:right; color:#6c756e; }
.hero-baseline { padding:21px 0; border-top:1px solid #c8cdc5; border-bottom:1px solid #c8cdc5; }.hero-baseline p { font-family:inherit; text-align:center; margin:0; font-size:12px; letter-spacing:0; }.mobile-only { display:none; }
.brand-services { padding:90px 0; }.brand-section-head { margin-bottom:36px; }.brand-home h2 { font-size:clamp(26px,3.2vw,42px); letter-spacing:-.04em; line-height:1.55; margin:15px 0; }.brand-section-head>p:last-child { color:#5d695f; font-size:14px; line-height:1.9; }
.service-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }.service-card { min-width:0; background:#f9f9f4; border:1px solid #cbd1c8; }.service-label { display:flex; justify-content:space-between; padding:19px 24px; gap:16px; font-size:10px; letter-spacing:.04em; font-weight:700; border-bottom:1px solid #cbd1c8; }.service-label>span:last-child { font-weight:400; }
.wear-picture { display:block; height:260px; background:#080808; overflow:hidden; }.wear-picture img { width:100%; height:100%; object-fit:contain; display:block; transition:transform .4s; }.wear-picture:hover img { transform:scale(1.025); }
.service-content { padding:30px; }.service-content h3 { font-size:30px; line-height:1.55; margin:0 0 18px; letter-spacing:-.045em; }.service-content>p { font-size:14px; color:#5b655d; min-height:56px; }.service-tags { display:flex; gap:7px; flex-wrap:wrap; margin:24px 0; }.service-tags span { border:1px solid #cbd1c8; padding:4px 7px; font-size:10px; }.service-link { display:flex; align-items:center; justify-content:space-between; border-top:1px solid #a9b3a6; padding:20px 0 7px; font-size:14px; font-weight:800; }.service-link span { font-size:23px; }.service-secondary { display:inline-block; margin-top:14px; color:#58685b; font-size:12px; border-bottom:1px solid #bdc6b8; padding-bottom:3px; }
.sourcing-diagram { height:260px; background:#dce5da; position:relative; display:flex; align-items:center; justify-content:space-around; gap:18px; padding:30px; background-image:linear-gradient(#c4d1c350 1px,transparent 1px),linear-gradient(90deg,#c4d1c350 1px,transparent 1px); background-size:24px 24px; }.diagram-note { font-size:27px; line-height:1.7; letter-spacing:-.04em; }.diagram-grid { display:grid; grid-template-columns:1fr 1fr; transform:rotate(-6deg); gap:6px; }.diagram-grid span { width:65px; height:65px; display:grid; place-items:center; background:#f5f7f1; border:1px solid #aabca8; font:13px ui-monospace,monospace; }.diagram-grid span:last-child { background:#253c2d; color:#d6e8d1; }.diagram-caption { position:absolute; bottom:14px; left:30px; font:9px ui-monospace,monospace; letter-spacing:.06em; color:#586f5b; }
.brand-requests { border-block:1px solid #bdc6b8; padding-block:60px; }.request-examples { display:grid; grid-template-columns:repeat(3,1fr); margin:35px 0; gap:20px; }.request-examples p { border-left:2px solid #96ae9d; padding:5px 0 5px 20px; font-size:20px; letter-spacing:-.03em; line-height:1.9; }.example-note { color:#6c756b; font-size:11px; }
.brand-process { padding:90px 0; display:grid; grid-template-columns:1fr 1.25fr; gap:80px; }.process-list { list-style:none; padding:0; margin:0; }.process-list li { display:flex; gap:26px; padding:22px 0; border-bottom:1px solid #c3cbbd; }.process-list li:first-child { padding-top:0; }.process-list li>span { font:13px/2 ui-monospace,monospace; color:#64816c; }.process-list h3 { font-size:18px; margin:0 0 10px; }.process-list p { font-size:13px; color:#5d6a5f; margin:0; line-height:1.9; }
.brand-final { background:#1b251f; color:#f3f3ec; padding:62px 40px; margin-bottom:70px; text-align:center; }.brand-final .eyebrow { color:#afc8b5; }.brand-final h2 { margin-bottom:30px; }.brand-final>div { display:flex; justify-content:center; gap:12px; flex-wrap:wrap; }.brand-final .btn { border-radius:3px; font-size:13px; }.brand-final .btn-primary { color:#19281e; background:#bed3bf; }.brand-final .btn-secondary { color:#f1f4eb; background:transparent; border:1px solid #607665; }.brand-final>p:last-child { color:#b9c9bd; font-size:11px; margin:23px 0 0; }.brand-home .site-footer { max-width:1224px; }
@media(max-width:1080px) { .brand-hero-grid { gap:36px; }.brand-home .nav { gap:14px; font-size:11px; }.brand-home .brand-main { font-size:19px; }.brand-home .brand-sub { font-size:8px; }.service-label { flex-wrap:wrap; gap:5px; }.brand-process { gap:36px; }.sourcing-diagram { padding:22px; }.diagram-note { font-size:23px; } }
@media(max-width:760px) { .brand-home .site-header { width:calc(100% - 24px); }.brand-hero,.brand-services,.brand-requests,.brand-process,.brand-final { width:calc(100% - 36px); }.brand-hero { padding-top:22px; }.hero-meta { font-size:8px; gap:6px; }.brand-hero-grid { grid-template-columns:1fr; padding:35px 0; gap:36px; }.brand-hero h1 { font-size:clamp(26px,7.3vw,47px); line-height:1.6; margin-top:18px; }.brand-hero h1 em { text-decoration-thickness:6px; text-underline-offset:6px; }.brand-intro { font-size:15px; }.brand-text-link { font-size:12px; margin-top:10px; gap:12px; }.request-sheet { margin:0 10px 15px 2px; padding:20px 24px; transform:rotate(1deg); }.sheet-quote { font-size:29px; }.sheet-sketch { height:145px; }.hero-baseline { display:block; text-align:center; }.hero-baseline>span { display:none; }.hero-baseline p { font-size:12px; line-height:1.9; }.mobile-only { display:initial; }.brand-services { padding:55px 0; }.service-grid { grid-template-columns:1fr; gap:24px; }.service-label { padding:15px 20px; }.wear-picture,.sourcing-diagram { height:220px; }.service-content { padding:24px; }.service-content h3 { font-size:27px; }.service-content>p { min-height:0; }.brand-requests { padding-block:45px; }.request-examples { grid-template-columns:1fr; gap:10px; margin:25px 0; }.request-examples p { margin:8px 0; font-size:19px; }.brand-process { padding:55px 0; grid-template-columns:1fr; gap:14px; }.brand-final { padding:38px 18px; margin-bottom:35px; }.brand-final .btn { width:100%; min-height:50px; }.brand-home .header-cta { padding-inline:10px; font-size:10px; }.brand-home .brand-icon { width:30px; height:30px; } }
@media(prefers-reduced-motion:reduce) { .wear-picture img { transition:none; } }

.hero-entry-links { display:flex; gap:14px; margin-top:30px; }.hero-entry-links a { display:block; min-width:170px; padding:13px 18px; border:1px solid #a6b4a7; font-size:14px; font-weight:700; }.hero-entry-links small { display:block; font:9px/1.8 ui-monospace,monospace; letter-spacing:.05em; color:#46564a; }.hero-entry-links span { float:right; margin-left:16px; }.hero-entry-links a:last-child { background:#dce5da; }.hero-entry-links a:hover { border-color:#394c3e; }
@media(max-width:760px) { .hero-entry-links { gap:10px; margin-top:25px; }.hero-entry-links a { flex:1; min-width:0; padding:12px; font-size:13px; }.hero-entry-links span { margin-left:6px; } }

/* The supplied brand artwork is preserved in full, alongside the service story. */
.brand-signature { width:min(1224px,calc(100% - 64px)); margin:0 auto 90px; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:80px; }
.signature-art { background:white; border:1px solid #d7dcd4; padding:30px; }.signature-art img { display:block; width:100%; height:auto; }.signature-copy h2 { font-size:clamp(34px,4.4vw,60px); line-height:1.55; margin:20px 0; letter-spacing:.02em; }.signature-copy em { color:#52745d; font-style:normal; }.signature-copy>p:not(.eyebrow) { color:#59675d; line-height:2; font-size:15px; }.signature-route { display:flex; align-items:center; gap:14px; margin-top:34px; font:10px ui-monospace,monospace; color:#597161; letter-spacing:.1em; }.signature-route i { position:relative; flex:1; height:1px; background:#c3d1c2; }.signature-route i::after { content:''; display:block; width:100%; height:2px; background:#6e8e76; transform-origin:left; }
@media(max-width:760px) { .brand-signature { width:calc(100% - 36px); margin-bottom:50px; grid-template-columns:1fr; gap:32px; }.signature-art { padding:12px; }.signature-copy h2 { font-size:34px; }.signature-copy h2 br { display:none; }.signature-copy>p:not(.eyebrow) { font-size:14px; } }
/* Works teaser: real (anonymised) orders, following the hypothetical request examples above. */
.brand-works { width:min(calc(100% - 48px), 1320px); margin:0 auto 90px; padding-top:70px; border-top:1px solid #d7dcd4; }
.works-chips { display:flex; flex-wrap:wrap; gap:10px; margin:34px 0 30px; padding:0; list-style:none; }
.works-chips a { display:inline-block; padding:10px 16px; border:1px solid #c3d1c2; border-radius:999px; background:#fff; color:#172721; font-size:14px; font-weight:700; transition:background 180ms ease, border-color 180ms ease; }
.works-chips a:hover { border-color:#172721; background:#b8d5c2; }
@media(max-width:760px) { .brand-works { width:calc(100% - 36px); margin-bottom:60px; padding-top:50px; }.works-chips { gap:8px; }.works-chips a { padding:8px 12px; font-size:13px; } }