/* ==========================================================================
   SHANGCAI Clothing — streetwear direction

   Was 东方极简高级成衣 / Oriental Minimal Couture. The couture look traded on
   warm ivory, a CJK serif and soft contrast; streetwear trades on concrete, a
   heavy sans and hard edges. Only the tokens below changed — every structural
   rule further down still resolves through them, so the whole direction is
   reversible by restoring this block.

   All spacing uses logical properties so RTL Arabic needs no overrides.
   ========================================================================== */

:root {
	/* palette — concrete and black, with one hot accent */
	--sc-bg: #E7E4DD;          /* aged concrete */
	--sc-ivory: #F2F0EB;       /* clean off-white, panels only */
	--sc-ink: #111111;         /* hard black */
	--sc-accent: #E4470F;      /* hot orange — the single accent */
	--sc-gray: #79756E;        /* neutral concrete grey */
	--sc-line: rgba(17, 17, 17, .16);
	--sc-line-soft: rgba(17, 17, 17, .08);
	--sc-grad-a: #C9C5BC;      /* concrete pair, replacing pink/purple */
	--sc-grad-b: #8E8A82;

	/*
	 * type — the first family in each stack is self-hosted (assets/fonts/).
	 *
	 * Display now leads with Inter rather than Noto Serif SC. Inter covers
	 * Latin and digits only, so CJK glyphs fall through to the system sans
	 * (PingFang SC on Apple, Microsoft YaHei on Windows) and the self-hosted
	 * CJK serif remains as a last resort. That gives heavy Latin headings from
	 * a face already shipped, with no new subset to generate.
	 */
	--sc-font-display: "Inter", "PingFang SC", "Noto Sans SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Serif SC", Georgia, sans-serif;
	--sc-font-body: "Inter", "Source Han Sans SC", "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
	--sc-font-ar: "Cairo", "Noto Kufi Arabic", "Segoe UI", Tahoma, sans-serif;

	/* Larger and tighter: street display type wants to shout, not breathe. */
	--sc-fs-hero: clamp(2.8rem, 6.6vw, 5.8rem);
	--sc-fs-h2: clamp(1.8rem, 3.4vw, 3rem);
	--sc-fs-h3: clamp(1.2rem, 1.9vw, 1.55rem);
	--sc-fs-body: 1rem;
	--sc-fs-small: .875rem;
	--sc-fs-micro: .78rem;

	--sc-lh-tight: 1.02;
	--sc-lh-body: 1.7;

	--sc-track-display: -.025em;   /* tight display tracking */
	--sc-track-label: .12em;       /* wide micro-label tracking */

	/*
	 * rhythm — still a grid, less white space between things.
	 * Widened from 1280px: the client read the blog as cramped, and the extra
	 * room also gives the wrapping header an easier fit.
	 */
	--sc-wrap: 1400px;
	--sc-gutter: clamp(1.25rem, 4vw, 3.5rem);
	--sc-section-y: clamp(3rem, 5.6vw, 5.5rem);
	--sc-gap: clamp(1rem, 2vw, 1.75rem);

	--sc-radius: 0;                /* hard edges */
	--sc-transition: 180ms cubic-bezier(.2, .7, .3, 1);
}

/* --------------------------------------------------------------- base ---- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* the header is sticky, so anchored sections need to sit clear of it */
	scroll-padding-top: 96px;
}

body {
	margin: 0;
	background: var(--sc-bg);
	color: var(--sc-ink);
	font-family: var(--sc-font-body);
	font-size: var(--sc-fs-body);
	line-height: var(--sc-lh-body);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

html[dir="rtl"] body {
	font-family: var(--sc-font-ar);
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: inherit;
	text-decoration: none;
}

a:hover {
	color: var(--sc-accent);
}

h1, h2, h3, h4 {
	margin: 0;
	font-family: var(--sc-font-display);
	font-weight: 600;
	line-height: var(--sc-lh-tight);
	letter-spacing: .01em;
}

h1 { font-size: var(--sc-fs-hero); }
h2 { font-size: var(--sc-fs-h2); }
h3 { font-size: var(--sc-fs-h3); }

p { margin: 0 0 1.1em; }
p:last-child { margin-block-end: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }

button { font: inherit; color: inherit; }

::selection {
	background: var(--sc-accent-bright);
	color: var(--sc-accent-ink);
}

.sc-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.sc-skip {
	position: absolute;
	inset-block-start: -100px;
	inset-inline-start: 1rem;
	z-index: 999;
	padding: .6rem 1rem;
	background: var(--sc-ink);
	color: var(--sc-ivory);
	transition: inset-block-start var(--sc-transition);
}

.sc-skip:focus {
	inset-block-start: 1rem;
	color: var(--sc-ivory);
}

:focus-visible {
	outline: 2px solid var(--sc-accent);
	outline-offset: 3px;
}

/* ------------------------------------------------------------- layout ---- */

.sc-wrap {
	width: 100%;
	max-width: var(--sc-wrap);
	margin-inline: auto;
	padding-inline: var(--sc-gutter);
}

.sc-main {
	display: block;
	min-height: 40vh;
}

.sc-section {
	padding-block: var(--sc-section-y);
}

.sc-section--ivory { background: var(--sc-ivory); }

.sc-section__head {
	max-width: 46rem;
	margin-block-end: clamp(2rem, 4vw, 3.5rem);
}

.sc-section__eyebrow {
	display: block;
	margin-block-end: .9rem;
	font-family: var(--sc-font-body);
	font-size: var(--sc-fs-micro);
	font-weight: 500;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--sc-gray);
}

.sc-section__title {
	font-size: var(--sc-fs-h2);
}

.sc-section__lead {
	margin-block-start: 1.1rem;
	color: var(--sc-gray);
	max-width: 40rem;
}

.sc-rule {
	height: 1px;
	border: 0;
	margin: 0;
	background: var(--sc-line);
}

.sc-grid {
	display: grid;
	gap: var(--sc-gap);
}

.sc-grid--cards { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

/* ------------------------------------------------------------ buttons ---- */

.sc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: .95rem 1.9rem;
	border: 1px solid var(--sc-ink);
	background: transparent;
	text-align: center;
	font-size: var(--sc-fs-small);
	font-weight: 500;
	letter-spacing: .06em;
	line-height: 1.2;
	cursor: pointer;
	transition: background var(--sc-transition), color var(--sc-transition), border-color var(--sc-transition);
}

.sc-btn--primary {
	background: var(--sc-accent-bright);
	border-color: var(--sc-accent-bright);
	color: var(--sc-accent-ink);
}

.sc-btn--primary:hover {
	background: var(--sc-ink);
	border-color: var(--sc-ink);
	color: var(--sc-ivory);
}

.sc-btn--ghost:hover {
	background: var(--sc-ink);
	color: var(--sc-ivory);
}

.sc-btn--quiet {
	border-color: var(--sc-line);
	padding: .7rem 1.3rem;
}

.sc-btn--quiet:hover {
	border-color: var(--sc-accent);
	color: var(--sc-accent);
}

/* ------------------------------------------------------------- header ---- */

.sc-header {
	position: sticky;
	inset-block-start: 0;
	z-index: 60;
	background: color-mix(in srgb, var(--sc-bg) 88%, transparent);
	/*
	 * Blur dialled back from 10px and the saturate() step dropped: the pair was
	 * expensive enough on the sticky header to stall rendering, and 7px reads
	 * the same behind a translucent bar. The -webkit- prefix is what Safari
	 * actually honours.
	 */
	-webkit-backdrop-filter: blur(7px);
	backdrop-filter: blur(7px);
	border-block-end: 1px solid var(--sc-line-soft);
}

.sc-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(.75rem, 1.1vw, 1rem);
	min-height: 84px;
}

.sc-header__brand { flex: 0 0 auto; }

.sc-brand {
	display: inline-flex;
	align-items: center;
	gap: .8rem;
}

.sc-brand__badge {
	flex: 0 0 auto;
	width: auto;
}

.sc-brand__name {
	font-family: var(--sc-font-display);
	font-size: .95rem;
	font-weight: 600;
	letter-spacing: .06em;
	white-space: nowrap;
}

/*
 * The nav sits between a fixed-width wordmark and a fixed-width control group,
 * so the column it occupies is far narrower than the menu it holds: measured at
 * 1280px the column gets ~630px while nine translated labels need ~950px.
 *
 * With `nowrap` plus `justify-content: center` the surplus spilled out of BOTH
 * sides — the first items painted over the wordmark and the last ones painted
 * over the language switcher and the CTA. Wrapping keeps every label inside its
 * own column in all six languages; the header grows a line when a translation
 * needs it, which is preferable to losing the last menu items behind a button.
 */
.sc-nav { flex: 1 1 auto; min-width: 0; }

.sc-nav__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: clamp(.3rem, .6vw, .7rem);
	row-gap: .35rem;
}

.sc-nav__list a {
	position: relative;
	display: inline-block;
	padding-block: .4rem;
	font-size: .82rem;
	letter-spacing: 0;
	white-space: nowrap;
	color: var(--sc-ink);
}

.sc-nav__list a::after {
	content: "";
	position: absolute;
	inset-block-end: 0;
	inset-inline-start: 0;
	width: 0;
	height: 1px;
	background: var(--sc-accent);
	transition: width var(--sc-transition);
}

.sc-nav__list a:hover::after,
.sc-nav__list .current-menu-item > a::after {
	width: 100%;
}

.sc-header__actions {
	display: flex;
	align-items: center;
	gap: .75rem;
	flex: 0 0 auto;
}

.sc-header__cta { padding: .65rem 1.1rem; white-space: nowrap; }

/* language switcher */
.sc-lang {
	position: relative;
	font-size: var(--sc-fs-micro);
	letter-spacing: .08em;
	text-transform: uppercase;
}

.sc-lang__toggle {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .45rem .6rem;
	border: 1px solid var(--sc-line);
	background: transparent;
	cursor: pointer;
	color: var(--sc-ink);
	transition: border-color var(--sc-transition);
}

.sc-lang__toggle:hover { border-color: var(--sc-accent); }

.sc-lang__chev {
	width: 0;
	height: 0;
	border-inline-start: 4px solid transparent;
	border-inline-end: 4px solid transparent;
	border-block-start: 4px solid currentColor;
}

.sc-lang__list {
	position: absolute;
	inset-block-start: calc(100% + .4rem);
	inset-inline-end: 0;
	z-index: 70;
	min-width: 10rem;
	padding: .4rem 0;
	background: var(--sc-ivory);
	border: 1px solid var(--sc-line);
	box-shadow: 0 18px 36px -28px rgba(26, 26, 26, .6);
	display: none;
}

.sc-lang.is-open .sc-lang__list { display: block; }

.sc-lang__item a {
	display: block;
	padding: .5rem .9rem;
	color: var(--sc-gray);
	white-space: nowrap;
}

.sc-lang__item a:hover { background: var(--sc-bg); color: var(--sc-accent); }

.sc-lang__item.is-current a { color: var(--sc-ink); font-weight: 600; }

/* Arabic runs right-to-left: flip the dropdown anchor */
html[dir="rtl"] .sc-lang__list { inset-inline-end: auto; inset-inline-start: 0; }

/* mobile nav */
.sc-burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--sc-line);
	background: transparent;
	cursor: pointer;
}

.sc-burger__bar {
	display: block;
	width: 18px;
	height: 1px;
	margin-inline: auto;
	background: var(--sc-ink);
}

.sc-nav-mobile {
	border-block-start: 1px solid var(--sc-line-soft);
	background: var(--sc-bg);
}

.sc-nav-mobile__list {
	padding: 1rem var(--sc-gutter) 1.5rem;
}

.sc-nav-mobile__list li { border-block-end: 1px solid var(--sc-line-soft); }

.sc-nav-mobile__list a {
	display: block;
	padding-block: .85rem;
	font-size: var(--sc-fs-small);
}

/* ------------------------------------------------------------ archive ---- */

.sc-archive { padding-block: clamp(3rem, 6vw, 5.5rem); }

.sc-archive__head { margin-block-end: clamp(2rem, 4vw, 3rem); }

.sc-card__media { display: block; margin-block-end: 1.2rem; overflow: hidden; }

.sc-card__media img { transition: transform 520ms cubic-bezier(.22, .61, .36, 1); }

.sc-card:hover .sc-card__media img { transform: scale(1.03); }

.sc-card__title { font-size: var(--sc-fs-h3); }

.sc-card__text { margin-block-start: .7rem; color: var(--sc-gray); font-size: var(--sc-fs-small); }

.sc-empty { color: var(--sc-gray); }

/* ------------------------------------------------------------- footer ---- */

.sc-footer {
	padding-block-start: clamp(3rem, 6vw, 5rem);
	background: var(--sc-ink);
	color: rgba(250, 247, 241, .78);
}

.sc-footer__rule {
	height: 2px;
	margin-block-end: clamp(3rem, 6vw, 5rem);
	background: linear-gradient(90deg, var(--sc-grad-a), var(--sc-grad-b));
	opacity: .5;
}

.sc-footer__grid {
	display: grid;
	grid-template-columns: minmax(240px, 1.4fr) repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--sc-gap);
	padding-block-end: clamp(2.5rem, 5vw, 4rem);
}

.sc-brand--footer .sc-brand__name { color: var(--sc-ivory); }

.sc-footer__blurb {
	margin-block-start: 1.2rem;
	max-width: 30rem;
	font-size: var(--sc-fs-small);
	line-height: 1.9;
	color: rgba(250, 247, 241, .62);
}

.sc-footer__title {
	margin-block-end: 1.1rem;
	font-family: var(--sc-font-body);
	font-size: var(--sc-fs-micro);
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--sc-ivory);
}

.sc-footer__list li { margin-block-end: .6rem; font-size: var(--sc-fs-small); }

.sc-footer__list a { color: rgba(250, 247, 241, .78); }
.sc-footer__list a:hover { color: var(--sc-grad-a); }

.sc-footer__address { white-space: pre-line; }

.sc-footer__certs {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: center;
}

.sc-footer__cert {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .4rem;
	font-size: var(--sc-fs-micro);
	color: rgba(250, 247, 241, .6);
}

.sc-footer__cert img { max-height: 44px; width: auto; }

.sc-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 1.6rem;
	border-block-start: 1px solid rgba(250, 247, 241, .12);
}

.sc-footer__copy {
	margin: 0;
	font-size: var(--sc-fs-micro);
	color: rgba(250, 247, 241, .55);
}

.sc-footer__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 1.2rem;
	font-size: var(--sc-fs-micro);
}

/*
 * Long unbreakable words.
 *
 * The source copy is Chinese, which breaks between any two characters, so the
 * layout was never tested against a word wider than its column. German
 * compounds and French elisions are: measured on /de/ at 390px, one of them
 * pushed the whole document 68px sideways. Wrapping mid-word is the lesser
 * evil, and hyphens only apply where the language allows it.
 */
.sc-hero__title,
.sc-section__title,
.sc-block h2,
.sc-block h3,
.sc-block h4,
.sc-btn,
.sc-card__title,
.sc-nav__list a,
.sc-footer__nav a,
figcaption,
p {
	overflow-wrap: break-word;
	hyphens: auto;
}

/* --------------------------------------------------------- responsive ---- */

@media (max-width: 1180px) {
	.sc-nav { display: none; }
	.sc-burger { display: flex; }
	.sc-header__inner { min-height: 72px; }
	.sc-brand__name { font-size: .98rem; }
}

@media (max-width: 560px) {
	.sc-header__cta { display: none; }
	.sc-footer__grid { grid-template-columns: 1fr; }
	.sc-footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* ------------------------------------------------------------- blocks ---- */

.sc-block { position: relative; }

.sc-block--hero { padding-block: 0; }

.sc-block--interactive_cta { background: var(--sc-ivory); }

.sc-block--founder_quote { background: var(--sc-ivory); }

.sc-grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.sc-grid--4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* --------------------------------------------------------------- hero ---- */

.sc-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: clamp(440px, 58vh, 660px);
	padding-block: clamp(3.5rem, 8vw, 7rem);
	background-color: var(--sc-ivory);
	background-image: var(--sc-hero-image, none);
	background-size: cover;
	/* Anchored to the top on purpose: the box is much wider than the source
	   photograph, so a centred crop beheads the subject. Cropping the lower
	   body instead is the normal editorial hero crop. */
	background-position: center top;
}

.sc-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg,
		rgba(245, 240, 232, .94) 0%,
		rgba(245, 240, 232, .74) 40%,
		rgba(245, 240, 232, .18) 100%);
	pointer-events: none;
}

/* Arabic runs right-to-left: mirror the scrim so it stays behind the copy. */
html[dir="rtl"] .sc-hero::after {
	background: linear-gradient(270deg,
		rgba(245, 240, 232, .94) 0%,
		rgba(245, 240, 232, .74) 40%,
		rgba(245, 240, 232, .18) 100%);
}

.sc-hero__inner {
	position: relative;
	z-index: 1;
	max-width: 62rem;
}

.sc-hero__title {
	max-width: 22ch;
	font-size: var(--sc-fs-hero);
	letter-spacing: -.01em;
}

.sc-hero__subtitle {
	max-width: 44ch;
	margin-block: 1.4rem 2.4rem;
	color: #4a463f;
	font-size: clamp(1rem, 1.4vw, 1.15rem);
}

.sc-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: .9rem;
}

/* ------------------------------------------------------------- entries --- */

.sc-entries { margin-block-start: .5rem; }

.sc-entry {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: .6rem;
	padding: 1.9rem 1.6rem 2.2rem;
	background: var(--sc-ivory);
	border: 1px solid var(--sc-line-soft);
	transition: border-color var(--sc-transition), transform var(--sc-transition);
}

.sc-entry:hover {
	border-color: var(--sc-accent);
	transform: translateY(-3px);
}

.sc-entry__icon img { max-height: 44px; width: auto; }

/* built-in line icons — one stroke weight, one colour */
.sc-icon {
	display: block;
	color: var(--sc-accent);
	overflow: visible;
}

.sc-icon--entry { width: 34px; height: 34px; }
.sc-icon--service { width: 26px; height: 26px; }

.sc-entry:hover .sc-icon,
.sc-service:hover .sc-icon { color: var(--sc-ink); }

.sc-entry__label {
	font-family: var(--sc-font-display);
	font-size: 1.12rem;
	font-weight: 600;
}

.sc-entry__text {
	color: var(--sc-gray);
	font-size: var(--sc-fs-small);
}

.sc-entry__more {
	position: absolute;
	inset-block-end: 1.4rem;
	inset-inline-end: 1.6rem;
	color: var(--sc-accent);
	transition: transform var(--sc-transition);
}

.sc-entry:hover .sc-entry__more { transform: translateX(4px); }

html[dir="rtl"] .sc-entry:hover .sc-entry__more { transform: translateX(-4px); }

/* --------------------------------------------------------------- intro --- */

.sc-intro {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: start;
}

/* When a two-column block has no media yet, the text must not sit beside an
   empty half. */
.sc-intro--no-media,
.sc-materials--no-media,
.sc-founder--no-media {
	grid-template-columns: 1fr;
}

.sc-intro__body { color: #3d3a35; }

.sc-intro__countries {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin-block-start: 1.8rem;
	padding-block-start: 1.4rem;
	border-block-start: 1px solid var(--sc-line);
}

.sc-intro__countries li {
	padding: .3rem .8rem;
	border: 1px solid var(--sc-line);
	font-size: var(--sc-fs-micro);
	letter-spacing: .04em;
	color: var(--sc-gray);
}

.sc-intro__media { position: relative; }

.sc-mini-card {
	margin: 0;
	margin-block-start: -3rem;
	margin-inline-start: clamp(1rem, 4vw, 3.5rem);
	padding: 1.4rem;
	background: var(--sc-ivory);
	border-inline-start: 2px solid var(--sc-accent);
	box-shadow: 0 18px 40px -32px rgba(26, 26, 26, .55);
}

.sc-mini-card img {
	width: 56px;
	height: 56px;
	object-fit: cover;
	border-radius: 50%;
	margin-block-end: .8rem;
}

.sc-mini-card blockquote {
	margin: 0 0 .7rem;
	font-family: var(--sc-font-display);
	font-size: 1rem;
}

.sc-mini-card__name { display: block; font-weight: 600; font-size: var(--sc-fs-small); }
.sc-mini-card__role { display: block; color: var(--sc-gray); font-size: var(--sc-fs-micro); }

/* --------------------------------------------------------------- tiles --- */

.sc-tile__media {
	display: block;
	margin-block-end: 1.1rem;
	overflow: hidden;
}

.sc-tile__media img { transition: transform 620ms cubic-bezier(.22, .61, .36, 1); }

.sc-tile:hover .sc-tile__media img { transform: scale(1.04); }

.sc-tile__title { font-size: var(--sc-fs-h3); }

.sc-tile__text { margin-block-start: .55rem; color: var(--sc-gray); font-size: var(--sc-fs-small); }

/* ------------------------------------------------------------ services --- */

.sc-service {
	padding-block-start: 1.6rem;
	border-block-start: 2px solid var(--sc-ink);
}

.sc-service__icon { display: block; margin-block-end: 1rem; }
.sc-service__icon img { max-height: 40px; width: auto; }

.sc-service__title { font-size: 1.1rem; }

.sc-service__text { margin-block-start: .55rem; color: var(--sc-gray); font-size: var(--sc-fs-small); }

/* --------------------------------------------------------------- icta ---- */

.sc-icta { text-align: center; }

.sc-icta__inner { max-width: 40rem; margin-inline: auto; }

.sc-icta__title { font-size: var(--sc-fs-h2); }

.sc-icta__subtitle { margin-block: 1rem 2rem; color: var(--sc-gray); }

.sc-icta .sc-buttons { justify-content: center; }

.sc-icta__learn {
	display: inline-block;
	margin-block-start: 1.4rem;
	font-size: var(--sc-fs-small);
	color: var(--sc-gray);
	border-block-end: 1px solid var(--sc-line);
}

.sc-icta__learn:hover { color: var(--sc-accent); border-color: var(--sc-accent); }

/* --------------------------------------------------------------- tabs ---- */

.sc-tabs { margin-block-start: 1rem; }

.sc-tabs__nav {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(1rem, 2.5vw, 2.2rem);
	padding-block-end: 1rem;
	border-block-end: 1px solid var(--sc-line);
}

.sc-tabs__tab {
	padding: 0 0 .5rem;
	border: 0;
	border-block-end: 2px solid transparent;
	background: none;
	font-size: var(--sc-fs-small);
	letter-spacing: .04em;
	color: var(--sc-gray);
	cursor: pointer;
	transition: color var(--sc-transition), border-color var(--sc-transition);
}

.sc-tabs__tab[aria-selected="true"] {
	color: var(--sc-ink);
	border-block-end-color: var(--sc-accent);
}

.sc-tabs__panel { padding-block-start: clamp(1.8rem, 3vw, 3rem); }

/* --------------------------------------------------------------- wall ---- */

/* auto-fill rather than auto-fit: a tab holding a single piece must keep the
   same column width as a full row, otherwise the empty track collapses, the
   image renders at its natural 720px, and the section height jumps.
   Two generous columns on desktop suit the editorial brief; min() keeps the
   track from overflowing narrow viewports. */
.sc-wall { grid-template-columns: repeat(auto-fill, minmax(min(440px, 100%), 1fr)); }

.sc-wall__item { margin: 0; }

.sc-wall__item img {
	width: 100%;
	margin-block-end: .8rem;
}

.sc-wall__item figcaption {
	font-family: var(--sc-font-display);
	font-size: var(--sc-fs-small);
}

/* -------------------------------------------------------------- steps ---- */

.sc-steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
	gap: var(--sc-gap);
	counter-reset: sc-step;
}

.sc-step {
	position: relative;
	padding-block-start: 2.4rem;
	border-block-start: 1px solid var(--sc-line);
}

.sc-step::before {
	content: "";
	position: absolute;
	inset-block-start: -3px;
	inset-inline-start: 0;
	width: 5px;
	height: 5px;
	background: var(--sc-accent);
	border-radius: 50%;
}

.sc-step__no {
	display: block;
	font-family: var(--sc-font-display);
	font-size: 1.6rem;
	color: var(--sc-accent);
	line-height: 1;
	margin-block-end: .6rem;
}

.sc-step__label { display: block; font-weight: 600; }

.sc-step__text { display: block; margin-block-start: .4rem; color: var(--sc-gray); font-size: var(--sc-fs-small); }

/* ---------------------------------------------------------- materials ---- */

.sc-materials {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	gap: clamp(1.5rem, 3vw, 3rem);
	align-items: center;
}

.sc-materials__media img { width: 100%; }

.sc-materials__text { color: #3d3a35; }

.sc-tags {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin-block-start: 1.2rem;
}

.sc-tag {
	padding: .3rem .85rem;
	border: 1px solid var(--sc-line);
	font-size: var(--sc-fs-micro);
	color: var(--sc-gray);
}

.sc-hook {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	margin-block-start: clamp(2rem, 4vw, 3.5rem);
	padding: clamp(1.5rem, 3vw, 2.4rem);
	background: var(--sc-ivory);
	border: 1px solid var(--sc-line-soft);
	border-inline-start: 3px solid var(--sc-accent);
}

.sc-hook__title { font-size: 1.15rem; }

.sc-hook__text { margin-block-start: .6rem; max-width: 48ch; color: var(--sc-gray); font-size: var(--sc-fs-small); }

/* ------------------------------------------------------------ rich text -- */

.sc-rich {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}

.sc-rich--text-only {
	grid-template-columns: minmax(0, 1fr);
	max-width: 52rem;
}

/* Image on the left: the media column is declared first in source order, so a
   logical "start" placement needs no markup change. */
.sc-rich--image-start .sc-rich__media { order: -1; }

.sc-rich__body { color: #3d3a35; margin-block-start: 1.1rem; }

.sc-rich__body h3 {
	margin-block: 1.6rem .6rem;
	font-size: 1.15rem;
}

.sc-rich__body ul {
	margin-block-end: 1.1em;
	padding-inline-start: 1.1rem;
	list-style: none;
}

.sc-rich__body li {
	position: relative;
	margin-block-end: .45rem;
	padding-inline-start: 1rem;
}

.sc-rich__body li::before {
	content: "";
	position: absolute;
	inset-block-start: .72em;
	inset-inline-start: 0;
	width: 5px;
	height: 5px;
	background: var(--sc-accent);
	border-radius: 50%;
}

.sc-rich__media img { width: 100%; }

.sc-rich .sc-buttons { margin-block-start: 1.6rem; }

@media (max-width: 900px) {
	.sc-rich { grid-template-columns: 1fr; }
	.sc-rich--image-start .sc-rich__media { order: 0; }
}

/* --------------------------------------------------------- contact form -- */

.sc-contact {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
}

.sc-contact__details {
	margin-block-start: 1.6rem;
	border-block-start: 1px solid var(--sc-line);
}

.sc-contact__details li {
	display: flex;
	flex-wrap: wrap;
	gap: .3rem 1rem;
	padding-block: .8rem;
	border-block-end: 1px solid var(--sc-line-soft);
	font-size: var(--sc-fs-small);
}

.sc-contact__label {
	min-width: 4rem;
	color: var(--sc-gray);
	font-size: var(--sc-fs-micro);
	letter-spacing: .1em;
	text-transform: uppercase;
}

.sc-contact__value { white-space: pre-line; }

.sc-contact__map { margin-block-start: 1.8rem; }
.sc-contact__map iframe { width: 100%; min-height: 260px; border: 0; }

/* form */
.sc-form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.1rem 1.2rem;
	padding: clamp(1.5rem, 3vw, 2.4rem);
	background: var(--sc-ivory);
	border: 1px solid var(--sc-line-soft);
}

.sc-form__row { display: flex; flex-direction: column; gap: .35rem; }

.sc-form__row--wide { grid-column: 1 / -1; }

.sc-form__label {
	font-size: var(--sc-fs-micro);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--sc-gray);
}

.sc-form__req { color: var(--sc-accent); }

.sc-form .sc-input {
	width: 100%;
	padding: .7rem .8rem;
	background: #fff;
	border: 1px solid var(--sc-line);
	border-radius: var(--sc-radius);
	font-family: inherit;
	font-size: var(--sc-fs-small);
	color: var(--sc-ink);
}

.sc-form .sc-input:focus {
	border-color: var(--sc-accent);
	outline: none;
}

.sc-form .sc-input:invalid:not(:placeholder-shown) { border-color: var(--sc-accent); }

.sc-form textarea.sc-input { resize: vertical; min-height: 7rem; }

.sc-form__hint { color: var(--sc-gray); font-size: var(--sc-fs-micro); }

.sc-form__error { color: var(--sc-accent); font-size: var(--sc-fs-micro); }

.sc-form__submit { grid-column: 1 / -1; justify-self: start; }

.sc-form__fine {
	grid-column: 1 / -1;
	margin: 0;
	color: var(--sc-gray);
	font-size: var(--sc-fs-micro);
}

/* honeypot — off-screen, never shown to people */
.sc-hp {
	position: absolute !important;
	inset-inline-start: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* status notice */
.sc-notice {
	grid-column: 1 / -1;
	margin: 0;
	padding: .85rem 1rem;
	border-inline-start: 3px solid;
	font-size: var(--sc-fs-small);
}

.sc-notice--ok { border-color: #1f8a5b; background: rgba(31, 138, 91, .07); }
.sc-notice--err { border-color: var(--sc-accent); background: rgba(192, 57, 43, .06); }

@media (max-width: 900px) {
	.sc-contact { grid-template-columns: 1fr; }
	.sc-form { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------ founder ---- */

.sc-founder {
	display: grid;
	grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr);
	gap: clamp(1.5rem, 4vw, 3.5rem);
	align-items: center;
}

.sc-founder__media img { width: 100%; }

.sc-founder__quote { margin: 0; }

.sc-founder__text {
	margin-block-end: 1.6rem;
	font-family: var(--sc-font-display);
	font-size: clamp(1.4rem, 2.6vw, 2.1rem);
	line-height: 1.5;
}

.sc-founder__meta { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: baseline; }

.sc-founder__name { font-weight: 600; }

.sc-founder__role { color: var(--sc-gray); font-size: var(--sc-fs-small); }

/* --------------------------------------------------------------- page ---- */

.sc-page { padding-block: clamp(3rem, 7vw, 6rem); }

.sc-page__title { margin-block-end: 1.5rem; }

/* ------------------------------------------------------ block responsive -- */

@media (max-width: 900px) {
	.sc-intro,
	.sc-materials,
	.sc-founder {
		grid-template-columns: 1fr;
	}

	.sc-mini-card {
		margin-block-start: 1.5rem;
		margin-inline-start: 0;
	}

	/* Capped, not a bare vh: on a very tall viewport a percentage-only height
	   would stretch the hero into empty space. */
	.sc-hero { min-height: clamp(320px, 52vh, 440px); }

	/* copy spans the full width here, so scrim vertically instead of sideways.
	   Dense behind the headline, opening up below the buttons so the
	   photograph stays legible instead of being washed out entirely. */
	.sc-hero::after,
	html[dir="rtl"] .sc-hero::after {
		background: linear-gradient(180deg,
			rgba(245, 240, 232, .94) 0%,
			rgba(245, 240, 232, .90) 56%,
			rgba(245, 240, 232, .52) 100%);
	}
}

/* --------------------------------------------------------------- a11y ---- */

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

/* ==========================================================================
   Streetwear pass
   --------------------------------------------------------------------------
   Deliberately a separate section so it can be deleted in one block to go back
   to the couture look. Everything below was chosen because it costs nothing at
   runtime: no new font files, no new image requests, no layout rework.

   What it does NOT do is change any copy or any section structure. Those are a
   separate decision — the visual system is the cheap, reversible half.
   ========================================================================== */

/*
 * Concrete grain.
 *
 * Drawn with an inline SVG turbulence filter rather than a tiling bitmap, so it
 * adds no request and no image bytes. Sits above everything and ignores pointer
 * events, which is why a high z-index is safe here. Kept at roughly 3% opacity:
 * enough to give the flat areas tooth, not enough to read as noise.
 */
body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 9998;
	pointer-events: none;
	opacity: .55;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='.05'/%3E%3C/svg%3E");
}

/*
 * Display type.
 *
 * Inter 700 is already self-hosted, so this is weight only — no substitution
 * request. font-synthesis-weight is off so a missing weight degrades to a real
 * face rather than a smeared faux bold.
 */
.sc-hero__title,
.sc-section__title,
.sc-block h1,
.sc-block h2,
.sc-block h3,
.sc-block h4,
.sc-card__title,
.sc-brand__name {
	font-weight: 700;
	letter-spacing: var(--sc-track-display);
	font-synthesis-weight: none;
	text-wrap: balance;
}

/* Micro labels and buttons read as technical marks rather than prose. */
.sc-eyebrow,
.sc-hero__eyebrow,
.sc-section__eyebrow,
.sc-card__meta,
.sc-btn {
	letter-spacing: var(--sc-track-label);
	text-transform: uppercase;
}

/*
 * Photography.
 *
 * A little more contrast and a touch less saturation is what separates a street
 * frame from a catalogue frame. Deliberately mild — a garment factory cannot
 * afford to misrepresent a colour, so this stops well short of a duotone.
 */
.sc-card img,
.sc-wall img,
.sc-hero__media img,
.sc-gallery img,
.sc-figure img {
	filter: contrast(1.04) saturate(.94);
}

/* Panels sit on the concrete rather than floating above it. */
.sc-card,
.sc-panel,
.sc-form__row input,
.sc-form__row textarea {
	box-shadow: none;
	border-color: var(--sc-line);
}

/* ==========================================================================
   Premium black
   --------------------------------------------------------------------------
   A colour layer only. No copy, no section structure, no product data, no
   imagery is touched — delete this block and the light concrete theme returns
   exactly as it was.

   Why this cannot be done by swapping token values alone: the original tokens
   are light-mode specific and carry two meanings each.

     --sc-ink    is both the primary TEXT colour and the fill of the dark
                 chrome (.sc-footer, button hovers, .sc-skip).
     --sc-ivory  is both a LIGHT panel fill (.sc-form, .sc-mini-card,
                 .sc-entry, .sc-hero, .sc-lang__list, .sc-section--ivory) and
                 the text colour used on top of that dark chrome.

   Invert the values and the chrome turns white while its text turns black. So
   the tokens are re-pointed here, and then the handful of rules that used each
   token in its "wrong" role are overridden explicitly, by name.
   ========================================================================== */

:root {
	/*
	 * Layered near-blacks rather than one flat #000 — depth is what reads as
	 * premium; a single black reads as cheap.
	 *
	 * Rewritten to a streetwear register after the client supplied reference
	 * stores (VANRD, Culture Kings, Project X Paris, Rockstar Original and
	 * others) and said the palette read as neither designed nor relevant.
	 *
	 * What those stores actually do, and what this now does:
	 *
	 *   near-black, not charcoal. The previous warm charcoal (#17171B) was a
	 *   compromise made when the client said the first pass was "too black" —
	 *   but the fix for that was more light CONTENT, not a muddier dark. This is
	 *   a crisp #0B0B0B, and the white panels carry the lightness instead.
	 *
	 *   white, not warm off-white. Pure white against near-black is the hard
	 *   streetwear contrast; the creamy #E9E6DF read as beige.
	 *
	 *   ONE loud accent, and it is acid lime. The dusty orange was the site's
	 *   original accent and had already been brightened once; streetwear runs on
	 *   a fluorescent green/yellow. Lime also measures 17:1 on the new base, so
	 *   it clears the 4.5:1 floor both as a fill (with near-black ink) and as
	 *   text on the dark base — the orange managed neither.
	 */
	--sc-bg: #FFFFFF;          /* page base — white, as on all six references */
	--sc-deep: #0B0B0B;        /* chrome: footer, ticker, tape, button hovers */
	--sc-surface: #F4F3F1;     /* panels and cards — a hair off white */
	--sc-surface-2: #EAE8E4;   /* inputs and hover states */

	/*
	 * The light half. White panels are what keeps the page from reading as one
	 * mass of black; ink on them is the same near-black as the base, so the pair
	 * is ~18:1.
	 */
	--sc-panel: #FFFFFF;
	--sc-panel-ink: #0B0B0B;
	--sc-panel-muted: #5F5F5A;

	/* ink is the primary TEXT colour again, so it must be dark */
	--sc-ink: #0B0B0B;
	--sc-ivory: #F2F2EF;       /* kept as the "light" token: text on dark chrome */
	--sc-text: #0B0B0B;
	--sc-text-muted: #5F5F5A;

	/*
	 * The single hot accent, in two values, because it has two jobs and they do
	 * not share a contrast budget.
	 *
	 * --sc-accent is the one to reach for: text, hairline rules, small marks.
	 *   Deepened from the reference orange so it clears 4.5:1 on both light
	 *   surfaces — 5.53:1 on white, 4.96:1 on the panel grey. The reference
	 *   orange #FF6700 measures 3.13:1 on white, so at running-text size it
	 *   would have been a WCAG failure; a colour pair's ratio does not care
	 *   that the hue is right.
	 * --sc-accent-bright is the loud display orange, for large FILLS only —
	 *   ticker, tape, primary button, active filter chip, text selection. It is
	 *   never used as a text colour on a light surface. Whatever sits on it is
	 *   --sc-accent-ink, which measures 6.29:1.
	 */
	--sc-accent: #C33300;
	--sc-accent-bright: #FF5A00;
	--sc-accent-ink: #0B0B0B;  /* anything printed ON a bright accent fill */
	--sc-gray: #5F5F5A;

	--sc-line: rgba(11, 11, 11, .16);
	--sc-line-soft: rgba(11, 11, 11, .07);
	--sc-grad-a: #0B0B0B;
	--sc-grad-b: #3A3A3A;
}

/*
 * The nine rules that used the light ivory as a panel fill.
 * Named individually, because --sc-ivory also has to stay light for the text
 * that sits on the dark chrome.
 *
 * .sc-hook belongs here even though its own rule lives far above; it is the
 * one panel the first pass missed, which left its heading painted in the
 * page's text colour on a light fill — 1:1, invisible.
 */
.sc-section--ivory,
.sc-lang__list,
.sc-block--interactive_cta,
.sc-block--founder_quote,
.sc-entry,
.sc-mini-card,
.sc-hook,
.sc-form {
	background-color: var(--sc-surface);
}

/*
 * The hero is the one surface that stays dark under the light theme, so it is
 * taken out of the light-panel list above.
 *
 * Five of the six reference stores open on a full-bleed photograph with an
 * oversized LIGHT headline over a dark scrim. That only works if the hero owns
 * a dark ground — so it takes the deep value as its loading placeholder, and it
 * keeps the dark scrim it was given for the dark theme. Its type is set light
 * in the reference-alignment block at the end of this file.
 */
.sc-hero {
	background-color: var(--sc-deep);
}

/*
 * The four rules that used ink as a fill; they would otherwise turn white.
 *
 * .sc-skip is the fourth: its background and its text both resolve to a light
 * value once ink is re-pointed, so the two have to move together. It shows on
 * focus only, which is exactly when it has to be readable.
 */
.sc-footer,
.sc-btn--primary:hover,
.sc-btn--ghost:hover,
.sc-skip {
	background-color: var(--sc-deep);
}

/*
 * --sc-ivory, NOT --sc-text. All four of these now sit on the near-black
 * chrome, and --sc-text is dark under this theme — using it would print black
 * on black. This is the same double-meaning trap the block above exists to
 * resolve; the token that carries "text" also carried "light", and only one of
 * those roles survived the flip.
 */
.sc-btn--primary:hover,
.sc-btn--ghost:hover,
.sc-skip {
	color: var(--sc-ivory);
}

/*
 * Hero scrim, inverted.
 *
 * The original ran a wash of the page colour across the photograph so dark
 * text stayed readable. On a dark page that wash must become a darkening, or
 * the now-light headline sinks into a light panel.
 *
 * Two stacked layers instead of one: the sideways gradient matches the desktop
 * layout, and the bottom-up one keeps the copy readable where the narrow
 * layout stacks it across the full width. Doing both here avoids having to
 * match whichever media query the original used.
 */
.sc-hero::after {
	background:
		linear-gradient(90deg, rgba(9, 9, 10, .92) 0%, rgba(9, 9, 10, .72) 42%, rgba(9, 9, 10, .20) 100%),
		linear-gradient(0deg, rgba(9, 9, 10, .58) 0%, rgba(9, 9, 10, 0) 62%);
}

html[dir="rtl"] .sc-hero::after {
	background:
		linear-gradient(270deg, rgba(9, 9, 10, .92) 0%, rgba(9, 9, 10, .72) 42%, rgba(9, 9, 10, .20) 100%),
		linear-gradient(0deg, rgba(9, 9, 10, .58) 0%, rgba(9, 9, 10, 0) 62%);
}

/*
 * Warm greys that were hardcoded as text on light panels.
 *
 * .sc-hero__subtitle has been taken out. The hero keeps a dark scrim, so its
 * subtitle has to be light rather than muted-dark; it is set with the rest of
 * the hero type at the end of this file.
 */
.sc-intro__body,
.sc-materials__text,
.sc-rich__body {
	color: var(--sc-text-muted);
}

/* The one hardcoded white surface — text inputs. */
.sc-form .sc-input {
	background: var(--sc-surface-2);
	color: var(--sc-text);
	border-color: var(--sc-line);
}

.sc-form .sc-input::placeholder {
	color: rgba(11, 11, 11, .42);
}

.sc-form .sc-input:focus {
	border-color: var(--sc-accent);
}

/*
 * That filter existed to stop pale stone glaring against a near-black page.
 * On white the same photographs need the opposite nudge, so the dimming is
 * gone and only a small contrast lift remains.
 */
.sc-card img,
.sc-wall img,
.sc-hero__media img,
.sc-gallery img,
.sc-figure img {
	filter: contrast(1.03) saturate(1.02);
}

/* On white a .9-alpha shadow reads as a smear rather than depth. */
.sc-lang__list,
.sc-mini-card {
	box-shadow: 0 22px 44px -30px rgba(11, 11, 11, .28);
}

/*
 * Fills that carry a label.
 *
 * White on the bright accent measures 3.13:1 — below the 4.5:1 floor for
 * body-sized text, and that does not change with what sits behind it, because
 * a colour pair's ratio is independent of context. So the label is near-black
 * instead, at 6.29:1, while the fill keeps the reference orange untouched.
 *
 * ::selection takes the same pairing. The button's hover state flips to
 * --sc-deep with a light label, so both ends of the interaction clear 4.5:1.
 */
.sc-btn--primary,
::selection {
	color: var(--sc-accent-ink);
}

/*
 * The footer pair.
 *
 * --sc-grad-a was a pale concrete tone, and the footer used it twice: as a
 * hairline rule above the columns, and as the link hover colour. On the dark
 * theme it is a near-black, so the rule disappeared into the background and
 * hovering a footer link dimmed it to 1.4:1 instead of highlighting it. The
 * rule returns as a light hairline, and the hover takes the accent — the same
 * feedback every other link on the site gives.
 */
.sc-footer__rule {
	background: linear-gradient(90deg, rgba(237, 234, 227, .5), rgba(237, 234, 227, .06));
	opacity: 1;
}

/*
 * --sc-accent-bright here, not --sc-accent: the footer is dark chrome, and the
 * accessible (deep) accent only manages 3.56:1 against it — under the 4.5:1
 * floor for body-sized text. The bright orange measures 6.29:1 on the same
 * ground. This is the only place the two accent values need different routing.
 */
.sc-footer__list a:hover {
	color: var(--sc-accent-bright);
}

/* ==========================================================================
   Product dropdown + streetwear style index
   --------------------------------------------------------------------------
   The theme shipped without any second-level menu support. wp_nav_menu() is
   already called with depth 2, so WordPress had been printing the child
   <ul class="sub-menu"> all along — it was simply never styled, and would have
   rendered as an unstyled nested list wedged into the header row.

   The dropdown is deliberately CSS-only:

     :hover         opens the panel for pointer users.
     :focus-within  opens it for keyboard users. Tabbing to the parent <a> puts
                    focus inside its <li>, which reveals the panel, so the next
                    Tab reaches the links. A JS toggle would have to reproduce
                    this with aria-expanded plus click handling — more moving
                    parts for the same result, on a theme that has already been
                    bitten once by a stray brace in an appended script.

   Touch devices never see the flyout: the mobile drawer lists the children in
   full, so a tap on the parent always navigates instead of opening a panel.
   ========================================================================== */

.sc-nav__list .menu-item-has-children { position: relative; }

.sc-nav__list .sub-menu {
	position: absolute;
	inset-block-start: calc(100% + .45rem);
	inset-inline-start: 50%;
	z-index: 80;
	/*
	 * Seventeen entries in two columns of EQUAL width, filled down the first
	 * column then the second. Equal columns matter: with `width: max-content`
	 * the widest label dictated the column width and the longest one
	 * (Distressed Applique Embroidery Hoodie) ran flush into column two.
	 */
	display: grid;
	grid-auto-flow: column;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-rows: repeat(9, auto);
	column-gap: 1.25rem;
	width: min(34rem, calc(100vw - (2 * var(--sc-gutter))));
	padding: .85rem 1.15rem;
	background: var(--sc-deep);
	border: 1px solid var(--sc-line);
	box-shadow: 0 26px 50px -34px rgba(0, 0, 0, .95);
	transform: translateX(-50%) translateY(-6px);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--sc-transition), transform var(--sc-transition), visibility var(--sc-transition);
}

.sc-nav__list .menu-item-has-children:hover > .sub-menu,
.sc-nav__list .menu-item-has-children:focus-within > .sub-menu {
	transform: translateX(-50%) translateY(0);
	opacity: 1;
	visibility: visible;
}

/* Arabic runs right-to-left: the panel opens from the opposite edge. */
html[dir="rtl"] .sc-nav__list .sub-menu { transform: translateX(50%) translateY(-6px); }

html[dir="rtl"] .sc-nav__list .menu-item-has-children:hover > .sub-menu,
html[dir="rtl"] .sc-nav__list .menu-item-has-children:focus-within > .sub-menu {
	transform: translateX(50%) translateY(0);
}

/* let a long label wrap inside its own column instead of spilling sideways */
.sc-nav__list .sub-menu li { min-width: 0; }

.sc-nav__list .sub-menu a {
	display: block;
	padding-block: .42rem;
	padding-inline: .5rem;
	font-size: .8rem;
	white-space: normal;
	overflow-wrap: break-word;
	color: var(--sc-text-muted);
}

.sc-nav__list .sub-menu a:hover { color: var(--sc-accent); }

/* The sliding underline is a top-level affordance; inside the panel it is noise. */
.sc-nav__list .sub-menu a::after { display: none; }

/* --- the same children inside the mobile drawer: closed until tapped --- */

.sc-nav-mobile__list .menu-item-has-children > a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-weight: 600;
}

/* Chevron, drawn in CSS so the branch reads as expandable. */
.sc-nav-mobile__list .menu-item-has-children > a::after {
	content: "";
	flex: 0 0 auto;
	width: .45rem;
	height: .45rem;
	margin-inline-start: .7rem;
	border-inline-end: 1.5px solid currentColor;
	border-block-end: 1.5px solid currentColor;
	transform: rotate(45deg) translate(-1px, -1px);
	transition: transform var(--sc-transition);
}

.sc-nav-mobile__list .menu-item-has-children.is-open > a::after {
	transform: rotate(225deg) translate(-1px, -1px);
}

/*
 * Seventeen children open by default would fill the whole drawer and push the
 * rest of the menu out of reach, so the branch starts closed and opens on tap.
 */
.sc-nav-mobile__list .menu-item-has-children > .sub-menu { display: none; }

.sc-nav-mobile__list .menu-item-has-children.is-open > .sub-menu {
	display: block;
	padding-inline-start: .9rem;
	border-inline-start: 2px solid var(--sc-line-soft);
}

.sc-nav-mobile__list .sub-menu li:last-child { border-block-end: 0; }

.sc-nav-mobile__list .sub-menu a {
	padding-block: .55rem;
	font-size: var(--sc-fs-micro);
	color: var(--sc-text-muted);
}

/* --- style index: filter chips + empty state --- */

.sc-style-filter {
	display: flex;
	flex-wrap: wrap;
	gap: .45rem;
	margin-block-end: clamp(1.25rem, 2.5vw, 2rem);
}

.sc-style-chip {
	display: inline-flex;
	align-items: baseline;
	gap: .35rem;
	padding: .42rem .8rem;
	border: 1px solid var(--sc-line);
	font-size: var(--sc-fs-micro);
	letter-spacing: .02em;
	color: var(--sc-text-muted);
	transition: border-color var(--sc-transition), color var(--sc-transition), background var(--sc-transition);
}

.sc-style-chip:hover {
	border-color: var(--sc-accent);
	color: var(--sc-accent);
}

/*
 * Near-black label on the accent, matching .sc-btn--primary. White on this
 * accent measures 3.1:1, below the 4.5:1 floor for text this size.
 */
/*
 * Keep the active chip's own treatment on hover. Without this the global
 * `a:hover` accent rule won: the label is near-black on the accent, and hovering
 * painted it accent-on-accent — measured 1.00:1, i.e. the text disappeared.
 */
.sc-style-chip.is-active:hover {
	background: var(--sc-accent-bright);
	border-color: var(--sc-accent-bright);
	color: var(--sc-accent-ink);
}

.sc-style-chip.is-active {
	background: var(--sc-accent-bright);
	border-color: var(--sc-accent-bright);
	color: var(--sc-accent-ink);
}

.sc-style-chip__count { opacity: .65; font-variant-numeric: tabular-nums; }

/*
 * Shown when a style has no stock pieces yet. Ten of the seventeen categories
 * are empty at launch, so this is a normal state rather than an edge case —
 * it has to look deliberate and carry the enquiry route.
 */
.sc-style-empty {
	max-width: 42rem;
	margin-block-end: 1.5rem;
	color: var(--sc-text-muted);
}

/* --- single post / blog listing --- */

.sc-article {
	width: 100%;
	max-width: 46rem;
	margin-inline: auto;
}

.sc-article__meta {
	display: block;
	margin-block-end: 1.4rem;
	font-size: var(--sc-fs-micro);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--sc-text-muted);
}

.sc-article__figure { margin: 0 0 clamp(1.5rem, 3vw, 2.4rem); }

.sc-article__body { font-size: 1.05rem; line-height: var(--sc-lh-body); }

.sc-article__body h2 { margin-block: 2rem 1rem; font-size: var(--sc-fs-h3); }

.sc-article__body h3 { margin-block: 1.6rem .8rem; }

.sc-article__body ul,
.sc-article__body ol {
	margin-block: 0 1.3rem;
	padding-inline-start: 1.3rem;
	list-style: disc;
}

.sc-article__body ol { list-style: decimal; }

.sc-article__body li { margin-block-end: .45rem; }

.sc-article__body blockquote {
	margin: 1.6rem 0;
	padding-inline-start: 1.2rem;
	border-inline-start: 3px solid var(--sc-accent);
	color: var(--sc-text-muted);
}

.sc-article__back { margin-block-start: clamp(2rem, 4vw, 3rem); }

/* ==========================================================================
   Social marks — footer row (fixed rail) + about/video block
   ========================================================================== */

.sc-social-row {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	margin: 0;
}

.sc-social__item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border: 1px solid var(--sc-line);
	border-radius: 50%;
	color: var(--sc-text-muted);
	transition: color var(--sc-transition), border-color var(--sc-transition), transform var(--sc-transition);
}

.sc-social__icon { width: 1.05rem; height: 1.05rem; }

/*
 * Brand tints as COLOUR ON DARK rather than the usual solid brand disc with a
 * white glyph. White on WeChat green is about 2:1 and a black TikTok disc
 * disappears against a black footer, both under the 3:1 floor for non-text
 * graphics. Tinting the glyph keeps every mark legible and reads as deliberate
 * against the dark chrome.
 */
/* Monochrome treatment lives at the end of the file (see "Monochrome — which is
   what the client was actually asking for"). The per-brand tints that used to
   sit here were removed: filled brand discs are the template look the client
   rejected. */

.sc-social-row .sc-social__item:hover {
	border-color: currentColor;
	transform: translateY(-2px);
}

/*
 * The rail: same marks, quieter treatment — monochrome until hover — pinned to
 * the middle of the right edge. Hidden below 1200px so it never sits on top of
 * the content on tablets and phones; the drawers carry these links there.
 */
.sc-social-rail {
	position: fixed;
	inset-block-start: 50%;
	inset-inline-end: clamp(.55rem, 1.1vw, 1.1rem);
	z-index: 45;
	display: none;
	transform: translateY(-50%);
}

.sc-social-rail__list {
	display: flex;
	flex-direction: column;
	gap: .3rem;
	margin: 0;
	padding: .45rem .3rem;
	background: color-mix(in srgb, var(--sc-deep) 80%, transparent);
	border: 1px solid var(--sc-line-soft);
	border-radius: 999px;
}

.sc-social-rail__list .sc-social__item {
	width: 2.1rem;
	height: 2.1rem;
	border-color: transparent;
}

/* Per-brand rail hovers removed for the same reason — see the monochrome block
   at the end of the file. */

@media (min-width: 1200px) {
	.sc-social-rail { display: block; }
}

/* On a phone in landscape the rail would eat a third of the width. */
@media (max-height: 620px) {
	.sc-social-rail { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.sc-social__item,
	.sc-social-row .sc-social__item:hover { transition: none; transform: none; }
}

/* --- about + video --- */

.sc-about-video__grid {
	display: grid;
	gap: clamp(1.4rem, 3.2vw, 2.8rem);
	align-items: center;
}

@media (min-width: 900px) {
	.sc-about-video__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); }
	.sc-about-video__grid.is-flipped .sc-about-video__media { order: -1; }
}

.sc-about-video__media {
	position: relative;
	background: var(--sc-surface-2);
	border: 1px solid var(--sc-line);
	overflow: hidden;
}

.sc-about-video__media img,
.sc-about-video__media video {
	display: block;
	width: 100%;
	height: auto;
}

/*
 * Icon-only play control: a worded label would need translating into six
 * languages and this theme has no string layer (no .po/.mo files). The link
 * carries an aria-label instead, so it is still announced.
 */
.sc-about-video__play {
	position: absolute;
	inset-block-end: 1rem;
	inset-inline-start: 1rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.1rem;
	height: 3.1rem;
	background: var(--sc-deep);
	border: 1px solid var(--sc-line);
	border-radius: 50%;
	transition: border-color var(--sc-transition), background var(--sc-transition);
}

.sc-about-video__play::before {
	content: "";
	width: 0;
	height: 0;
	margin-inline-start: .18rem;
	border-style: solid;
	border-width: .38rem 0 .38rem .62rem;
	border-color: transparent transparent transparent var(--sc-accent);
}

.sc-about-video__play:hover {
	background: var(--sc-surface);
	border-color: var(--sc-accent);
}

.sc-about-video__facts {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(1rem, 2.4vw, 2.2rem);
	margin: clamp(1.2rem, 2.4vw, 1.8rem) 0 0;
}

.sc-about-video__facts li {
	display: flex;
	flex-direction: column;
	gap: .2rem;
}

.sc-about-video__fact-value {
	font-size: clamp(1.25rem, 2.1vw, 1.7rem);
	color: var(--sc-text);
}

.sc-about-video__fact-label {
	font-size: var(--sc-fs-micro);
	letter-spacing: .1em;
	color: var(--sc-text-muted);
}

/* ==========================================================================
   Blog / product presentation + "black with white" content panels
   --------------------------------------------------------------------------
   Three separate client complaints land in this block:

   1. Titles too large. The base sheet sets `h1 { font-size: var(--sc-fs-hero) }`
      — up to 5.8rem. Both the blog listing and a single article put their
      heading in a plain <h1>, so they were rendering at hero size. Neither had
      a rule of its own; they do now.
   2. Layout too narrow. `.sc-article` capped at 46rem, which is a good prose
      measure but reads as cramped once a hero-sized title sits in it.
   3. Product images rectangular. The `sc-card` size is 720x900 (4:5), so a 1:1
      upload was cropped portrait before it ever reached the page. Cards now use
      a square size, and the square is also enforced in CSS so an unregenerated
      thumbnail cannot fall back to a rectangle.
   ========================================================================== */

/* --- headings that were inheriting hero size --- */

.sc-archive__title {
	font-size: clamp(1.7rem, 2.8vw, 2.5rem);
	line-height: 1.12;
}

.sc-article__title {
	font-size: clamp(1.75rem, 3vw, 2.6rem);
	line-height: 1.14;
}

.sc-archive__head { max-width: 54rem; }

/* --- a wider, less cramped reading column --- */

.sc-article { max-width: 58rem; }

.sc-article__figure img {
	width: 100%;
	max-width: 40rem;
	height: auto;
}

/* --- listing grid: fewer, wider cards --- */

.sc-grid--cards { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }

/* --- square media, everywhere a product or article is shown as a tile --- */

.sc-card__media img,
.sc-wall__item img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
}

/* --- the "white" in black-with-white: off-white content panels --- */

.sc-card,
.sc-wall__item {
	background: var(--sc-panel);
	color: var(--sc-panel-ink);
	padding: clamp(.9rem, 1.6vw, 1.25rem);
}

.sc-wall__item figcaption {
	color: var(--sc-panel-ink);
	font-size: var(--sc-fs-small);
	letter-spacing: .01em;
}

.sc-card__title a { color: var(--sc-panel-ink); }
/*
 * On a white panel the accent cannot carry text — lime on white is about 1.3:1.
 * Hover feedback on light surfaces is ink plus an underline instead.
 */
.sc-card__title a:hover,
.sc-band--light .sc-service__title a:hover {
	color: var(--sc-panel-ink);
	text-decoration: underline;
	text-underline-offset: .16em;
}

.sc-card__text { color: var(--sc-panel-muted); }

.sc-card__meta { color: var(--sc-panel-muted); }

/*
 * The enquiry band is a light panel too, so it reads as the page's one bright
 * moment before the footer. Ghost buttons were built for dark chrome and would
 * vanish here — they invert on any light surface.
 */
.sc-icta {
	background: var(--sc-panel);
	color: var(--sc-panel-ink);
	padding: clamp(2rem, 4.5vw, 3.4rem) clamp(1.4rem, 3vw, 3rem);
}

.sc-icta__title { color: var(--sc-panel-ink); }

.sc-icta__subtitle { color: var(--sc-panel-muted); }

.sc-icta__learn,
.sc-card .sc-btn--ghost,
.sc-wall__item .sc-btn--ghost {
	border-color: rgba(23, 23, 27, .3);
	color: var(--sc-panel-ink);
}

.sc-icta__learn:hover,
.sc-card .sc-btn--ghost:hover,
.sc-wall__item .sc-btn--ghost:hover {
	background: var(--sc-panel-ink);
	border-color: var(--sc-panel-ink);
	color: var(--sc-panel);
}

/* --- site-wide enquiry band, injected above the footer --- */

.sc-enquiry {
	padding-block: 0 clamp(2.5rem, 5vw, 4rem);
}

/* --- related products under an article --- */

.sc-related {
	margin-block-start: clamp(2.5rem, 5vw, 4rem);
	padding-block-start: clamp(1.6rem, 3vw, 2.4rem);
	border-block-start: 1px solid var(--sc-line);
}

.sc-related__title {
	font-size: clamp(1.1rem, 1.8vw, 1.4rem);
	margin-block-end: clamp(1rem, 2vw, 1.5rem);
}

/* ==========================================================================
   Bold pass — full-bleed light bands, background graphics, product cards
   --------------------------------------------------------------------------
   The client said the black-with-white was still not obvious, and asked for a
   bolder treatment with graphic elements in the background. Two changes carry
   most of that:

   1. Whole sections now switch polarity (`.sc-band--light`), instead of only
      card backgrounds being light. A band that goes white is unmistakable in a
      way that a slightly lighter panel never was.
   2. Background graphics, both drawn in CSS — a four-column editorial grid and
      a halftone dot screen. The dot screen is the print-process cue the
      reference store leans on. No image assets, no extra requests.

   The band needs no full-bleed hack: a section sits directly inside .sc-main,
   which is already viewport width, so `background` spans edge to edge on its
   own. (A `100vw` + negative-margin trick would also drag in the scrollbar
   width and risk horizontal overflow.)
   ========================================================================== */

/* Brighter than the first off-white, which read as grey beside the charcoal. */
/* Panel colours are defined with the rest of the palette in the Premium black
   block; the local override that used to sit here was removed so there is one
   source of truth. */

/* --- background graphics --- */

/*
 * Four faint column rules down the whole page. Fixed, so they read as a
 * stationary frame the content scrolls over rather than as a background image.
 */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image: repeating-linear-gradient(
		90deg,
		var(--sc-line-soft) 0 1px,
		transparent 1px 25%
	);
}

.sc-main {
	position: relative;
	z-index: 1;
}

/* Halftone dot screen fading out of the top-right corner. */
.sc-main::after {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline-end: 0;
	width: min(30rem, 46vw);
	height: 24rem;
	z-index: -1;
	pointer-events: none;
	opacity: .55;
	background-image: radial-gradient(circle, var(--sc-line) 1.2px, transparent 1.3px);
	background-size: 15px 15px;
	-webkit-mask-image: radial-gradient(ellipse at top right, #000 8%, transparent 70%);
	mask-image: radial-gradient(ellipse at top right, #000 8%, transparent 70%);
}

/* --- full-bleed light band --- */

.sc-band--light {
	position: relative;
	z-index: 1;
	background: var(--sc-panel);
	color: var(--sc-panel-ink);
	padding-block: clamp(3rem, 6.5vw, 5.5rem);
}

.sc-band--light .sc-section__title,
.sc-band--light .sc-section__eyebrow {
	color: var(--sc-panel-ink);
}

.sc-band--light .sc-section__lead { color: var(--sc-panel-muted); }

/* --- oversized outlined brand mark, between the content and the footer --- */

.sc-watermark {
	position: relative;
	z-index: 1;
	display: block;
	margin: 0;
	padding-block: clamp(1.5rem, 3vw, 2.5rem) 0;
	font-size: clamp(3rem, 14.5vw, 12.5rem);
	line-height: .8;
	letter-spacing: -.035em;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	user-select: none;
	pointer-events: none;
	color: transparent;
	/* Light stroke was for the dark base; the watermark sits on the page, so
	   under the light theme it has to be dark to be visible at all. */
	-webkit-text-stroke: 1px rgba(11, 11, 11, .5);
	text-stroke: 1px rgba(11, 11, 11, .5);
}

/* --- service cards --- */

.sc-services { align-items: start; }

.sc-service {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: .75rem;
	margin: 0;
}

.sc-service__media {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	background: var(--sc-surface-2);
}

.sc-service__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}

.sc-service:hover .sc-service__media img { transform: scale(1.04); }

/*
 * 01–04. The reference store leads every category with a big index numeral, a
 * device that costs nothing and reads instantly as a system rather than a list.
 */
.sc-service__no {
	position: absolute;
	inset-block-end: .45rem;
	inset-inline-start: .55rem;
	font-size: clamp(1.7rem, 3.1vw, 2.5rem);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -.03em;
	color: #fff;
	text-shadow: 0 2px 14px rgba(0, 0, 0, .6);
}

.sc-band--light .sc-service__title {
	font-size: clamp(1.05rem, 1.5vw, 1.3rem);
	color: var(--sc-panel-ink);
}

.sc-band--light .sc-service__text { color: var(--sc-panel-muted); }

.sc-band--light .sc-service__icon { color: var(--sc-panel-ink); }

/* Service-title hovers are handled with the other light-surface rules, below —
   an accent hover here measured 1.02:1 against the white band. */

@media (prefers-reduced-motion: reduce) {
	.sc-service:hover .sc-service__media img { transition: none; transform: none; }
}

/*
 * The social glyphs must take their colour from the anchor, not from the icon
 * set's own default.
 *
 * `.sc-icon` sets `color: var(--sc-accent)`, and it won: the brand tint was
 * landing on the <a> while the <svg> kept painting itself accent orange, so all
 * sixteen marks (eight in the rail, eight in the footer) rendered identically
 * instead of in their platform colours. The anchor is the colour source here,
 * so the glyph inherits it — which also makes the hover tint work, since the
 * anchor's colour is what the hover rule changes.
 */
.sc-social__item .sc-icon {
	color: inherit;
}

/*
 * Brand tints for the rail, at rest and not only on hover.
 *
 * Two gaps the last check surfaced:
 *
 * 1. The rail only defined colours under :hover, so on load its eight marks
 *    were one identical grey. Eight identical circles read as unfinished
 *    rather than as a deliberate monochrome choice — and the client's reference
 *    shows the marks in their own colours. The rail still differs from the
 *    footer row by being a vertical pill; it does not need to be colourless to
 *    be distinct.
 * 2. LinkedIn had no colour rule at all — icon and platform detection were
 *    added, the tint never was — so it rendered grey in the footer and had no
 *    hover state in the rail.
 *
 * Every value was chosen to clear 3:1 against the dark chrome (the floor for
 * non-text graphics); the darkest, LinkedIn #0a66c2, measures 3.41:1.
 */
/*
 * Monochrome — which is what the client was actually asking for.
 *
 * The per-network brand colours were the thing that read as "no designer feel",
 * and that judgement was right: a row of filled brand-coloured discs is a
 * template look rather than a design decision. Designer-led streetwear labels
 * run the marks in ONE colour and let the shapes carry the recognition. So the
 * whole set is ink-on-dark at rest and takes the single accent on hover.
 *
 * The per-brand rules this replaces were deleted rather than overridden, so
 * there is no contradicting rule left further up the file.
 */
.sc-social-row .sc-social__item,
.sc-social-rail__list .sc-social__item {
	color: var(--sc-text-muted);
	border-color: var(--sc-line);
}

.sc-social-row .sc-social__item:hover,
.sc-social-rail__list .sc-social__item:hover {
	color: var(--sc-accent);
	border-color: var(--sc-accent);
}

/* The rail floats on the page instead of sitting in a footer column, so it
   keeps a transparent ring and only shows the accent on hover. */
.sc-social-rail__list .sc-social__item { border-color: transparent; }

.sc-social-rail__list .sc-social__item:hover {
	background: color-mix(in srgb, var(--sc-accent) 14%, transparent);
}

/* ==========================================================================
   Street-culture banner (hero)
   --------------------------------------------------------------------------
   Rebuilt to the banner language the client supplied. Four devices carry it,
   all of them visible in the reference set:

     1. a hazard-tape rule across the top
     2. an oversized, tight-set, all-caps display title
     3. pill badges instead of plain buttons
     4. a strip of labelled craft thumbnails beneath

   Two constraints shaped the implementation:

   - No invented copy. The tape uses the OEM / ODM service names the navigation
     already carries plus the brand name, and the craft strip is fed by the
     streetwear child terms the site already publishes and filters on.
   - No contrast regression. The reference uses white on red badges, but white
     on this accent measures 3.08:1 — under the 4.5:1 floor. The badges keep the
     near-black label that measures 6.6:1.
   ========================================================================== */

/* --- the tape rule --- */

.sc-tape {
	position: relative;
	z-index: 2;
	background: var(--sc-accent-bright);
	color: var(--sc-accent-ink);
	overflow: hidden;
	border-block-end: 2px solid var(--sc-accent-ink);
}

/*
 * Space-out rather than max-content: the tape should read as a continuous
 * repeated rule filling the width, and the reference clips it at the edges
 * rather than centring a short run. No max-content here — combined with the
 * flex parent that was what collapsed the tape to a 508px stub.
 */
.sc-tape__track {
	display: flex;
	gap: clamp(1rem, 2.4vw, 2.4rem);
	justify-content: space-between;
	padding-block: .34rem;
	overflow: hidden;
}

.sc-tape__item { flex: 0 0 auto; }

.sc-tape__item {
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* --- the banner itself --- */

/*
 * Block, not flex. `.sc-hero` is a flex container with `align-items: center`,
 * so the tape became a shrunk, vertically-centred flex ITEM — measured at
 * 508px wide and sitting mid-left in a 1237px tall banner instead of spanning
 * the top. The tape has to be a normal block child; the vertical centring of
 * the copy moves onto the inner wrapper, which is what actually needs it.
 */
.sc-hero--street {
	display: block;
	isolation: isolate;
	padding-block: 0;
}

.sc-hero--street .sc-hero__inner {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: clamp(400px, 54vh, 620px);
	padding-block: clamp(2.8rem, 6.5vw, 5.5rem);
}

/*
 * Halftone dot screen over the whole banner — the print-process cue the
 * reference banners all share. Sits above the scrim, below the copy.
 */
.sc-hero--street::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	opacity: .72;
	background-image: radial-gradient(circle, rgba(237, 234, 227, .17) 1.1px, transparent 1.2px);
	background-size: 13px 13px;
}

.sc-hero--street .sc-hero__inner { z-index: 2; }

/* Oversized and tight-set, the way every reference banner sets its headline. */
.sc-hero--street .sc-hero__title {
	max-width: 18ch;
	margin: 0;
	font-size: clamp(2.5rem, 8vw, 6.2rem);
	font-weight: 800;
	line-height: .93;
	letter-spacing: -.025em;
	text-transform: uppercase;
}

.sc-hero--street .sc-hero__subtitle {
	max-width: 40ch;
	color: var(--sc-text);
	opacity: .92;
}

/* Badges, not buttons. */
.sc-hero--street .sc-buttons { margin-block-start: clamp(1.2rem, 2.4vw, 1.8rem); }

.sc-hero--street .sc-btn {
	border-radius: 999px;
	padding: .68rem 1.5rem;
	font-weight: 700;
	letter-spacing: .03em;
	border-width: 2px;
}

/* --- craft strip --- */

.sc-craft-strip {
	display: flex;
	gap: clamp(.55rem, 1.2vw, .95rem);
	margin: clamp(1.6rem, 3vw, 2.4rem) 0 0;
	padding-block-end: .35rem;
	overflow-x: auto;
	scrollbar-width: none;
}

.sc-craft-strip::-webkit-scrollbar { display: none; }

.sc-craft-strip__item {
	flex: 0 0 auto;
	width: clamp(5.6rem, 8.5vw, 7.6rem);
}

.sc-craft-strip__link { display: block; }

.sc-craft-strip__media {
	display: block;
	overflow: hidden;
	border: 2px solid rgba(237, 234, 227, .3);
	background: var(--sc-surface);
}

.sc-craft-strip__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	transition: transform .45s cubic-bezier(.2, .7, .2, 1);
}

.sc-craft-strip__link:hover .sc-craft-strip__media img { transform: scale(1.06); }

.sc-craft-strip__label {
	display: block;
	margin-block-start: .45rem;
	font-size: .68rem;
	line-height: 1.3;
	letter-spacing: .04em;
	text-align: center;
	color: var(--sc-text);
}

/* The craft strip sits inside the dark hero, so it takes the bright accent. */
.sc-craft-strip__link:hover .sc-craft-strip__label { color: var(--sc-accent-bright); }

@media (max-width: 640px) {
	.sc-tape__item { font-size: .6rem; letter-spacing: .14em; }
	.sc-hero--street .sc-hero__title { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
	.sc-craft-strip__link:hover .sc-craft-strip__media img { transition: none; transform: none; }
}

/* ==========================================================================
   Light-surface link hovers
   --------------------------------------------------------------------------
   The global `a:hover` sets the accent. That is correct on the dark base and a
   failure on white: the lime measures about 1.02:1 against #FFFFFF, so a
   hovered link on the white cards, the white service band or the white enquiry
   band became unreadable or vanished outright.

   A contrast audit after the palette change caught four such rules — one of
   them, the active filter chip, measured 1.00:1 and lost its label completely
   on hover. On light surfaces the feedback is ink plus an underline instead.
   ========================================================================== */

.sc-card a:hover,
.sc-wall__item a:hover,
.sc-band--light a:hover,
.sc-icta a:hover {
	color: var(--sc-panel-ink);
	text-decoration: underline;
	text-underline-offset: .16em;
}

/* Buttons carry their own treatment — an underline inside a filled pill is
   noise, so they opt out of the rule above and restate their fills. */
.sc-card a.sc-btn:hover,
.sc-wall__item a.sc-btn:hover,
.sc-band--light a.sc-btn:hover,
.sc-icta a.sc-btn:hover { text-decoration: none; }

.sc-card a.sc-btn--primary:hover,
.sc-band--light a.sc-btn--primary:hover,
.sc-icta a.sc-btn--primary:hover {
	background: var(--sc-accent-ink);
	border-color: var(--sc-accent-ink);
	color: var(--sc-accent-bright);
}

.sc-card a.sc-btn--ghost:hover,
.sc-wall__item a.sc-btn--ghost:hover,
.sc-band--light a.sc-btn--ghost:hover,
.sc-icta a.sc-btn--ghost:hover {
	background: var(--sc-panel-ink);
	border-color: var(--sc-panel-ink);
	color: var(--sc-panel);
}

/* The active filter chip keeps its own fill on hover rather than inheriting the
   global accent — accent-on-accent made its label disappear. */
.sc-style-chip.is-active:hover {
	background: var(--sc-accent-bright);
	border-color: var(--sc-accent-bright);
	color: var(--sc-accent-ink);
}

/* ==========================================================================
   Reference alignment — white canvas, black bands, one hot accent
   --------------------------------------------------------------------------
   Built from an inspection of the six stores the client supplied (VANRD,
   Groovecolor, Miu Seven, Rockstar Original, Culture Kings, Project X Paris).
   What those six share, and what this block implements:

     1. a monochrome base — white canvas, black text — with exactly ONE hot
        accent. Six of six. The accent family is orange-to-red on every one of
        them (#FF9501, #FF6700 twice, #D70A2B, #FF4500); none uses blue.
     2. hard 0px corners everywhere. Already true here via --sc-radius.
     3. a full-bleed BLACK band carrying small, wide-tracked, uppercase text.
        Four of six (Culture Kings' shipping ticker, Project X's loyalty bar,
        Rockstar's announcement bar, VANRD's tagline). This is the piece the
        theme was missing, and it is the new `.sc-ticker`.
     4. display type set huge, heavy and tight. The extreme is Project X at
        230px/900 uppercase. Inter ships 400/500/600/700 here and no heavier
        cut, so weight is capped at the real 700 rather than a synthesised 800,
        which muddies a display face — the rest of the impression comes from
        size and tracking, which cost nothing.
     5. a credibility strip of hard numbers. Groovecolor runs "16 Years /
        250+ / 300K+ garments"; Miu Seven leads on "20 years" and "5-7 day
        sampling"; VANRD publishes an MOQ ladder. All three supplier sites do
        it. The component is built as `.sc-stats` — but it is deliberately NOT
        populated, because this site publishes no such figures yet and inventing
        them would be worse than leaving it empty. See the README note.
   ========================================================================== */

/* --- 1. display type: bigger, heavier, tighter --- */

:root {
	/* Raised from 5.8rem. The reference headlines are the loudest thing on the
	   page and this one was competing with the section titles instead. */
	--sc-fs-hero: clamp(3rem, 8.4vw, 8rem);
	--sc-track-display: -.035em;
}

h1,
h2,
h3,
h4 {
	font-weight: 700;
}

/*
 * The hero is the one dark surface on a light page, so its whole text set has
 * to be stated light. Without this the headline inherits --sc-ink and prints
 * near-black on the scrim — the same double-meaning failure the palette block
 * documents, one layer up.
 *
 * Uppercase is a presentational transform only; the underlying copy is
 * untouched. It is a no-op for Chinese and Arabic and is what gives the Latin
 * editions the streetwear register the references have.
 */
.sc-hero__title {
	max-width: 16ch;
	color: var(--sc-ivory);
	font-weight: 700;
	line-height: .95;
	letter-spacing: -.03em;
	text-transform: uppercase;
}

.sc-hero__subtitle {
	color: rgba(242, 242, 239, .86);
}

/* Craft labels live inside the dark hero too. */
.sc-craft-strip__label {
	color: rgba(242, 242, 239, .82);
}

/* Section titles take the weight and tracking, but keep their own case: a page
   of all-caps section headings in German or French reads as shouting rather
   than as design. */
.sc-section__title {
	font-weight: 700;
	letter-spacing: -.025em;
}

/* Buttons are small enough that caps cost nothing in readability. */
.sc-btn {
	text-transform: uppercase;
	letter-spacing: .08em;
	font-weight: 600;
}

/* --- 2. the site-wide black ticker band --- */

/*
 * Fed entirely by page titles that already exist and are already translated
 * (see header.php) — no new strings, and nothing claimed that the site does not
 * already say elsewhere.
 *
 * Two identical runs inside a max-content track, animated to -50%: the second
 * run is the one scrolling into view, so the loop is seamless. It is
 * aria-hidden-free for the first run and aria-hidden for the duplicate, so a
 * screen reader hears the list once.
 */
.sc-ticker {
	position: relative;
	z-index: 2;
	overflow: hidden;
	background: var(--sc-deep);
	color: var(--sc-ivory);
}

.sc-ticker__track {
	display: flex;
	width: max-content;
	animation: sc-ticker-scroll 38s linear infinite;
}

.sc-ticker__run {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sc-ticker__item {
	display: inline-flex;
	align-items: center;
	gap: clamp(1rem, 2.4vw, 2.2rem);
	padding-block: .55rem;
	padding-inline-end: clamp(1rem, 2.4vw, 2.2rem);
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	white-space: nowrap;
	color: rgba(242, 242, 239, .86);
}

/* The separator is a bright accent square — the one place the hot colour
   appears at ticker level, exactly as the reference bars do it. */
.sc-ticker__item::after {
	content: "";
	display: block;
	width: 4px;
	height: 4px;
	background: var(--sc-accent-bright);
}

@keyframes sc-ticker-scroll {
	to { transform: translateX(-50%); }
}

/* Arabic runs right-to-left, so the marquee has to travel the other way or the
   text appears to scroll backwards. */
@keyframes sc-ticker-scroll-rtl {
	to { transform: translateX(50%); }
}

html[dir="rtl"] .sc-ticker__track {
	animation-name: sc-ticker-scroll-rtl;
}

/* --- 3. the credibility strip --- */

/*
 * Full-bleed black, like the reference supplier sites. Renders nothing at all
 * while it has no items, so it is safe to register and leave empty until real
 * figures are supplied.
 */
.sc-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: var(--sc-gap);
	margin: 0;
	padding-block: clamp(1.7rem, 3.2vw, 2.6rem);
	background: var(--sc-deep);
	color: var(--sc-ivory);
}

.sc-stat__value {
	display: block;
	font-family: var(--sc-font-display);
	font-size: clamp(1.8rem, 3.4vw, 2.8rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.03em;
	color: var(--sc-accent-bright);
}

.sc-stat__label {
	display: block;
	margin-block-start: .5rem;
	font-size: var(--sc-fs-micro);
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: rgba(242, 242, 239, .62);
}

/* --- 4. the footer social row sits on the black chrome, not on the page --- */

.sc-social-row .sc-social__item {
	color: rgba(242, 242, 239, .62);
	border-color: rgba(242, 242, 239, .18);
}

.sc-social-row .sc-social__item:hover {
	color: var(--sc-accent-bright);
	border-color: var(--sc-accent-bright);
}

/* --- 5. reduced motion --- */

@media (prefers-reduced-motion: reduce) {
	.sc-ticker__track { animation: none; }
}

@media (max-width: 640px) {
	.sc-ticker__item { font-size: .62rem; letter-spacing: .16em; }
}

/* ==========================================================================
   Dark-surface corrections found by measuring the flip
   --------------------------------------------------------------------------
   A rendered-pixel audit of the white-canvas pass caught five rules that were
   still resolving dark tokens after the flip — all of them on the surfaces that
   deliberately stayed dark. Computed style looked correct in every case; only
   the measurement caught them. Reported ratios are from the live page.
   ========================================================================== */

/*
 * 1. Hero subtitle — measured 1.00:1, i.e. invisible.
 *
 * The hero element carries BOTH classes (`class="sc-hero sc-hero--street"`), so
 * the pre-existing `.sc-hero--street .sc-hero__subtitle` (specificity 0,2,0)
 * outranked the plain `.sc-hero__subtitle` rule set above (0,1,0) and kept
 * --sc-text — which is near-black under the light theme, on a near-black scrim.
 * Both selectors are named here so neither can win by count.
 */
.sc-hero .sc-hero__subtitle,
.sc-hero--street .sc-hero__subtitle {
	color: rgba(242, 242, 239, .86);
}

/*
 * 2. The ghost button inside the hero — also measured 1.00:1.
 *
 * .sc-btn takes its border and its label from --sc-ink, which is now dark, so
 * the outlined "Get a quote" was drawing a near-black outline and a near-black
 * label on the scrim. On the dark hero it has to invert instead.
 */
.sc-hero .sc-btn--ghost {
	border-color: rgba(242, 242, 239, .55);
	color: var(--sc-ivory);
}

.sc-hero .sc-btn--ghost:hover {
	background: var(--sc-ivory);
	border-color: var(--sc-ivory);
	color: var(--sc-deep);
}

/*
 * 3. The fixed social rail — measured 1.72:1.
 *
 * The rail is a dark translucent pill floating over the page. It followed
 * --sc-text-muted, which the flip turned dark, so dark marks landed on a dark
 * pill. The rail is dark chrome regardless of what the page behind it is doing,
 * so it takes a light value explicitly — and the bright accent on hover, since
 * the accessible accent only reaches 3.56:1 on that ground.
 */
.sc-social-rail__list .sc-social__item {
	color: rgba(242, 242, 239, .66);
}

.sc-social-rail__list .sc-social__item:hover {
	color: var(--sc-accent-bright);
	border-color: var(--sc-accent-bright);
}

/*
 * 4. The outlined brand watermark — measured 1.33:1, so effectively absent.
 *
 * It was a light stroke for the dark base; flipping it to ink was the right
 * move, but the first value tried (13%) measured 1.33:1 and the second (30%)
 * still only reached 2.03:1 — both effectively absent on white.
 *
 * 50% ink composites to about #808080 on white, which is 3.95:1. It is
 * decorative (aria-hidden, no pointer events) so no contrast floor actually
 * applies to it; the value is set to 3:1 anyway so that it reads as an
 * intentional graphic rather than as a rendering artefact, and it stays well
 * clear of competing with the content above it.
 */
.sc-watermark {
	-webkit-text-stroke: 1px rgba(11, 11, 11, .5);
	text-stroke: 1px rgba(11, 11, 11, .5);
}

/*
 * 5. The 01–04 service numerals.
 *
 * They sit directly on the card photograph, so their real backdrop is image
 * pixels and no colour pair can be guaranteed — measured "02" on a bright cream
 * photo as unreadable even with the drop shadow it had. Rather than tune a
 * shadow against unknown photographs, the numeral gets its own chip: a
 * guaranteed 6.29:1 on any image, and it reads as the same pill-badge device
 * the banners already use. Decorative, so aria-hidden stays.
 */
.sc-service__no {
	inset-block-end: .55rem;
	inset-inline-start: .55rem;
	padding: .08em .38em .14em;
	background: var(--sc-deep);
	color: var(--sc-accent);
	font-weight: 700;
	text-shadow: none;
}

/* ==========================================================================
   BLACK GOLD — the 黑潮 + 国风 direction
   --------------------------------------------------------------------------
   This layer is appended, not woven in, on purpose. app.css already carries
   three colour layers (the original couture palette, the near-black streetwear
   palette, and the white-canvas pass), each written as a self-contained block
   that redefines the tokens and then names every literal that had to change
   with it. This is the fourth, and it follows the same shape: a later :root
   block wins on the cascade, so nothing above has to be edited or deleted, and
   reverting is a matter of dropping this block.

   Direction, from the client's spec:
     base #0A0A0A, panels #161616 / #1E1E1E, gold #C9A227, China red #C62828
     for key CTAs only.

   Contrast, measured (WCAG, relative luminance):
     gold #C9A227 on base #0A0A0A .............. 8.18:1
     gold on panel #161616 ..................... 7.48:1
     muted #9A9A94 on base ..................... 7.04:1
     muted on panel #161616 .................... 6.43:1
     near-black #0A0A0A printed ON gold ........ 8.18:1
     white on China red #C62828 ................ 5.62:1
     near-black on China red ................... 3.52:1  -> red CTA always takes
                                                          WHITE text

   Note the two-token accent split from the white pass is deliberately gone.
   That split existed only because the reference orange (#FF6700) reached just
   3.13:1 on white and could not legally be body text. Gold clears 4.5:1 on the
   dark base in BOTH roles — as text and as a fill — so --sc-accent-bright is
   kept as an alias rather than a second value, and the earlier call sites that
   reference it stay correct without being touched.
   ========================================================================== */

:root {
	--sc-bg: #0A0A0A;
	--sc-deep: #050505;
	--sc-surface: #161616;
	--sc-surface-2: #1E1E1E;

	--sc-panel: #161616;
	--sc-panel-ink: #F2F2EF;
	--sc-panel-muted: #9A9A94;

	--sc-ink: #F2F2EF;
	--sc-ivory: #F2F2EF;
	--sc-text: #F2F2EF;
	--sc-text-muted: #9A9A94;

	--sc-accent: #C9A227;
	--sc-accent-bright: #C9A227;
	--sc-accent-ink: #0A0A0A;

	--sc-cta: #C62828;
	--sc-cta-ink: #FFFFFF;

	--sc-gray: #9A9A94;
	--sc-line: rgba(242, 242, 239, .14);
	--sc-line-soft: rgba(242, 242, 239, .07);
	--sc-grad-a: #0A0A0A;
	--sc-grad-b: #2A2A2A;
}

/* ---- panels -------------------------------------------------------------
   `.sc-band--light` keeps its class name (renaming it would mean touching the
   templates) but under this direction a "light band" is a tonal step up from
   the base, not a bright one: #161616 on #0A0A0A. */
.sc-section--ivory,
.sc-lang__list,
.sc-block--interactive_cta,
.sc-block--founder_quote,
.sc-entry,
.sc-mini-card,
.sc-hook,
.sc-form {
	background-color: var(--sc-surface);
}

.sc-lang__list,
.sc-mini-card {
	box-shadow: 0 22px 44px -30px rgba(0, 0, 0, .9);
}

/* ---- fills that carry a label ------------------------------------------- */
.sc-btn--primary {
	background: var(--sc-accent);
	border-color: var(--sc-accent);
	color: var(--sc-accent-ink);
}

/* Hover inverts to the deep chrome, so both ends of the interaction clear
   4.5:1: gold/ink at rest, and ivory on #050505 on hover. */
.sc-btn--primary:hover,
.sc-btn--ghost:hover,
.sc-skip {
	background-color: var(--sc-deep);
	color: var(--sc-ivory);
}

.sc-skip {
	color: var(--sc-ivory);
}

::selection {
	background: var(--sc-accent);
	color: var(--sc-accent-ink);
}

.sc-style-chip.is-active,
.sc-style-chip.is-active:hover {
	background: var(--sc-accent);
	border-color: var(--sc-accent);
	color: var(--sc-accent-ink);
}

.sc-tape {
	background: var(--sc-accent);
	color: var(--sc-accent-ink);
}

.sc-card a.sc-btn--primary:hover,
.sc-band--light a.sc-btn--primary:hover,
.sc-icta a.sc-btn--primary:hover {
	background: var(--sc-accent-ink);
	border-color: var(--sc-accent-ink);
	color: var(--sc-accent);
}

/* The one place the spec reserves China red: a key conversion button. It needs
   its own token because near-black on red is only 3.52:1 — the label has to be
   white, and that is a different pairing from the gold button's. */
.sc-btn--hot {
	background: var(--sc-cta);
	border-color: var(--sc-cta);
	color: var(--sc-cta-ink);
}

.sc-btn--hot:hover {
	background: var(--sc-accent-ink);
	border-color: var(--sc-accent-ink);
	color: var(--sc-cta-ink);
}

/* ---- dark-surface restatements ------------------------------------------ */

/* The hero stays a dark ground under a photo with a dark scrim, so its type is
   light — the values from the white pass already point the right way here. */
.sc-hero {
	background-color: var(--sc-deep);
}

/* Stroke goes back to light: the watermark sits on the base, not on white. */
.sc-watermark {
	-webkit-text-stroke: 1px rgba(242, 242, 239, .16);
	text-stroke: 1px rgba(242, 242, 239, .16);
}

/* The rail is a floating pill. Against a near-black page its old rgba(11,11,11)
   ground disappears, so it takes the panel tone plus a restrained gold edge. */
.sc-social-rail__list {
	background: var(--sc-surface);
	border-color: rgba(201, 162, 39, .32);
}

.sc-social-rail__list .sc-social__item {
	color: rgba(242, 242, 239, .7);
	border-color: rgba(242, 242, 239, .16);
}

.sc-social-rail__list .sc-social__item:hover {
	color: var(--sc-accent);
	border-color: var(--sc-accent);
}

/* The footer row sits on the dark chrome; the rail floats over the page. Both
   are dark grounds now, so both want light marks. */
.sc-social-row .sc-social__item {
	color: rgba(242, 242, 239, .62);
	border-color: rgba(242, 242, 239, .18);
}

.sc-social-row .sc-social__item:hover {
	color: var(--sc-accent);
	border-color: var(--sc-accent);
}

.sc-footer__list a:hover {
	color: var(--sc-accent);
}

.sc-form .sc-input::placeholder {
	color: rgba(242, 242, 239, .38);
}

/* Product photography: the spec asks for high-contrast dark studio work, so
   the slight dimming that suited a dark page comes back. */
.sc-card img,
.sc-wall img,
.sc-hero__media img,
.sc-gallery img,
.sc-figure img {
	filter: contrast(1.05) saturate(.92) brightness(.95);
}

/* The ticker needs an edge to separate it from the base now that both are
   near-black. */
.sc-ticker {
	border-block-end: 1px solid rgba(201, 162, 39, .28);
}

/* ==========================================================================
   Two defects the black-gold audit caught
   --------------------------------------------------------------------------
   Both were found by measuring rendered pixels, not by reading the sheet — the
   first looks fine in isolation, the second is a literal that never followed
   the tokens.
   ========================================================================== */

/*
 * 1. The filter-chip count badge.
 *
 * It inherited --sc-text-muted and then had opacity dimmed on top, landing at
 * 3.52:1 against the base — under the 4.5:1 floor for body-sized text. The
 * muted token already clears 7.00:1 on the base on its own, so the fix is to
 * stop dimming it rather than to reach for a new colour.
 */
.sc-style-chip__count {
	color: var(--sc-text-muted);
	opacity: 1;
}

/* Inside an active (gold) chip the badge sits on gold, so it needs the ink
   that goes with that fill rather than the muted grey. */
.sc-style-chip.is-active .sc-style-chip__count {
	color: var(--sc-accent-ink);
	opacity: .72;
}

/*
 * 2. The .sc-icta__learn underline.
 *
 * Left over from the white pass as a literal rgba(23,23,27,.3) — a dark value
 * on what is now a #161616 panel, which measures 1.00:1 and renders as nothing
 * at all. Raised to rgba(242,242,239,.42), which composites to about #727272
 * on the panel and clears the 3:1 floor for a component boundary (3.76:1) while
 * still reading as a restrained rule rather than a second accent.
 */
.sc-icta__learn {
	border-bottom-color: rgba(242, 242, 239, .42);
}

/* ==========================================================================
   Square card grid — the reference home page's main structural block
   --------------------------------------------------------------------------
   Square media is a house rule for this project, so the box is a hard 1:1 and
   the image covers it with object-fit. The files are cropped to 1:1 before
   upload, which is why nothing here needs to compensate for an odd source
   ratio — a wide source would otherwise be re-cropped on every viewport and the
   subject would drift between them.

   The quote link is revealed on hover for pointer devices only. Hiding a CTA
   outright is a discoverability cost, so it is never hidden where hover does
   not exist, and :focus-within keeps it reachable by keyboard.
   ========================================================================== */

.sc-refgrid__head {
	max-width: 62ch;
	margin-block-end: clamp(1.4rem, 3vw, 2.4rem);
}

.sc-refgrid__title {
	margin: .35rem 0 0;
	font-size: clamp(1.5rem, 2.8vw, 2.4rem);
	font-weight: 700;
	letter-spacing: -.025em;
	line-height: 1.08;
	color: var(--sc-ivory);
}

.sc-refgrid__lead {
	margin: .7rem 0 0;
	font-size: .95rem;
	line-height: 1.6;
	color: var(--sc-text-muted);
}

.sc-refgrid__list {
	display: grid;
	gap: clamp(.7rem, 1.5vw, 1.2rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sc-refgrid__cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sc-refgrid__cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sc-refgrid__cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sc-refgrid__cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.sc-refgrid__cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

.sc-refcard {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--sc-surface);
	border: 1px solid var(--sc-line);
}

.sc-refcard__media {
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--sc-surface-2);
}

.sc-refcard__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: transform .5s ease;
}

.sc-refcard:hover .sc-refcard__media img,
.sc-refcard:focus-within .sc-refcard__media img {
	transform: scale(1.04);
}

.sc-refcard__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: .35rem;
	padding: clamp(.7rem, 1.4vw, 1rem);
}

.sc-refcard__title {
	margin: 0;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--sc-ivory);
}

.sc-refcard__text {
	margin: 0;
	font-size: .82rem;
	line-height: 1.55;
	color: var(--sc-text-muted);
}

.sc-refcard__quote {
	align-self: flex-start;
	margin-block-start: auto;
	padding-block-start: .5rem;
	border-block-end: 1px solid transparent;
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--sc-accent);
	text-decoration: none;
}

.sc-refcard__quote:hover {
	border-block-end-color: currentColor;
}

@media (hover: hover) {
	.sc-refcard__quote {
		opacity: 0;
		transform: translateY(4px);
		transition: opacity .25s ease, transform .25s ease;
	}

	.sc-refcard:hover .sc-refcard__quote,
	.sc-refcard:focus-within .sc-refcard__quote {
		opacity: 1;
		transform: none;
	}
}

.sc-refgrid__cta {
	margin-block-start: clamp(1.2rem, 2.5vw, 1.8rem);
	text-align: center;
}

/* Step the grid down before the cards lose their square media to thumbnail
   scale — a 6-up grid at 900px is unreadable whatever the aspect ratio. */
@media (max-width: 1100px) {
	.sc-refgrid__cols-5,
	.sc-refgrid__cols-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
	.sc-refgrid__cols-4,
	.sc-refgrid__cols-5,
	.sc-refgrid__cols-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
	.sc-refgrid__cols-3,
	.sc-refgrid__cols-4,
	.sc-refgrid__cols-5,
	.sc-refgrid__cols-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   PURE BLACK & WHITE on a WHITE PAGE
   --------------------------------------------------------------------------
   Appended layer, same shape as the four colour layers above: a later :root
   block wins on the cascade, so nothing above is edited or deleted, and the
   whole direction reverts by dropping this block.

   Direction, from the client's spec:
     page base      #FFFFFF  (white — the client asked for a white site, with
                              black modules to be added on top later)
     primary text   #0A0A0A
     panels         #F4F3F1 / #EAE8E4  (a hair off white, so panels read as
                                        surfaces rather than coincidence)
     muted text     #5F5F5A
     hairline       rgba(10,10,10,.14)
     chrome / black modules  #0A0A0A — footer, ticker, tape, CTA fills
     CTA            black fill + white label, or white fill + black outline
     NO hue of any kind. The white pass used orange (#C33300 / #FF5A00) and
     the black-gold pass used gold (#C9A227) and China red (#C62828); all three
     are retired here.

   This layer supersedes the earlier "PURE BLACK & WHITE" dark attempt that was
   written against a #0A0A0A base before the client changed the direction.

   ---- why an achromatic accent needs explicit help -------------------------

   --sc-accent was a COLOUR, which is exactly what let it serve two roles at
   once: a mark on a white panel AND a mark on the near-black footer. A
   hue-free accent cannot. Once it is #0A0A0A, every mark that sits on the dark
   chrome goes invisible, so those are restated to white by name below. The
   dark grounds in this theme are:

     .sc-footer           background var(--sc-deep)   (L1475)
     .sc-skip             background var(--sc-deep)   (L1475)
     .sc-btn--primary:hover, .sc-btn--ghost:hover     (L1475)
     .sc-ticker           background var(--sc-deep)   (L2721)
     .sc-tape             background var(--sc-accent-bright) (L2407)
     .sc-hero             background var(--sc-deep)   (L3085) — dark scrim

   Contrast, measured (WCAG 2.x relative luminance, opaque pairs):
     #0A0A0A on #FFFFFF ......... 19.60:1
     #0A0A0A on #F4F3F1 ......... 18.02:1
     #5F5F5A on #FFFFFF .......... 6.39:1
     #5F5F5A on #F4F3F1 .......... 5.81:1
     #5F5F5A on #EAE8E4 .......... 5.31:1
     #FFFFFF on #0A0A0A ......... 19.60:1
   Every text pair clears 4.5:1. The hairline token composites to about #E6E6E6
   on white (1.20:1): it is decorative, and no control relies on it alone to be
   identified — every bordered control also carries a label or a fill.
   ========================================================================== */

:root {
	--sc-bg: #FFFFFF;
	--sc-deep: #0A0A0A;
	--sc-surface: #F4F4F4;
	--sc-surface-2: #EAEAEA;

	--sc-panel: #FFFFFF;
	--sc-panel-ink: #0A0A0A;
	--sc-panel-muted: #5F5F5F;

	--sc-ink: #0A0A0A;
	--sc-ivory: #FFFFFF;
	--sc-text: #0A0A0A;
	--sc-text-muted: #5F5F5F;

	--sc-accent: #0A0A0A;
	--sc-accent-bright: #0A0A0A;
	--sc-accent-ink: #FFFFFF;

	--sc-cta: #0A0A0A;
	--sc-cta-ink: #FFFFFF;

	--sc-gray: #5F5F5F;
	--sc-line: rgba(10, 10, 10, .14);
	--sc-line-soft: rgba(10, 10, 10, .07);
	--sc-grad-a: #0A0A0A;
	--sc-grad-b: #3A3A3A;
}

/* ---- CTAs ---------------------------------------------------------------
   .sc-btn--primary  black fill + white label, via the tokens above.
   .sc-btn--hot      the second CTA. Its rules read --sc-cta / --sc-cta-ink for
                     the ground and --sc-accent-ink for the HOVER ground, so
                     with every accent token now near-black the hover became
                     #0A0A0A on #0A0A0A — 1.00:1, an invisible label. Restated
                     to the same pairing the other buttons hover to. */
.sc-btn--hot {
	background: var(--sc-cta);
	border-color: var(--sc-cta);
	color: var(--sc-cta-ink);
}

.sc-btn--hot:hover {
	background: var(--sc-deep);
	border-color: var(--sc-deep);
	color: var(--sc-ivory);
}

/* ---- marks on the dark chrome ------------------------------------------ */

.sc-footer__list a:hover {
	color: var(--sc-ivory);
}

.sc-social-row .sc-social__item {
	color: rgba(255, 255, 255, .66);
	border-color: rgba(255, 255, 255, .2);
}

.sc-social-row .sc-social__item:hover {
	color: var(--sc-ivory);
	border-color: var(--sc-ivory);
}

/* The ticker separator dot sits on the #0A0A0A ticker strip. */
.sc-ticker__item::after {
	background: rgba(255, 255, 255, .5);
}

.sc-ticker {
	border-block-end: 1px solid rgba(255, 255, 255, .14);
}

/* .sc-tape is an --sc-accent-bright fill, which is now #0A0A0A, so it is
   already the black band the client wants; only its edge needed help. */
.sc-tape {
	background: var(--sc-deep);
	color: var(--sc-ivory);
}

/* ---- marks and fields on the LIGHT grounds ------------------------------ */

/* The floating social rail sits over the white page, not on the footer. */
.sc-social-rail__list {
	border-color: rgba(10, 10, 10, .14);
}

.sc-social-rail__list .sc-social__item {
	color: rgba(10, 10, 10, .62);
	border-color: rgba(10, 10, 10, .14);
}

.sc-social-rail__list .sc-social__item:hover {
	color: var(--sc-ink);
	border-color: var(--sc-ink);
	background: rgba(10, 10, 10, .06);
}

.sc-form .sc-input::placeholder {
	color: rgba(10, 10, 10, .42);
}

/* The watermark is engraved into the white page, so its stroke is dark. */
.sc-watermark {
	-webkit-text-stroke: 1px rgba(10, 10, 10, .14);
	text-stroke: 1px rgba(10, 10, 10, .14);
}

/* .sc-icta__learn sits on a white .sc-icta panel. */
.sc-icta__learn {
	border-bottom-color: rgba(10, 10, 10, .3);
}

.sc-craft-strip__media {
	border-color: rgba(10, 10, 10, .18);
}

/* Field-level validation message. Black like body copy, which is what a
   hue-free palette allows, so weight carries the emphasis instead. */
.sc-form__error {
	color: var(--sc-ink);
	font-weight: 600;
}

/* ---- active filter chip -------------------------------------------------
   The count badge sat on the gold chip and took the ink that went with that
   fill. --sc-text-muted on the near-black chip would be ~2:1, so the badge
   keeps the light ink that belongs to this fill. */
.sc-style-chip.is-active,
.sc-style-chip.is-active:hover {
	background: var(--sc-accent);
	border-color: var(--sc-accent);
	color: var(--sc-accent-ink);
}

.sc-style-chip.is-active .sc-style-chip__count {
	color: var(--sc-accent-ink);
	opacity: .72;
}

/* The unpainted badge. Left un-dimmed on purpose: the earlier style set this
   to --sc-text-muted and then dimmed it with opacity, which landed under the
   4.5:1 floor for body-sized text. Muted on the panel already clears 5.81:1. */
.sc-style-chip__count {
	color: var(--sc-text-muted);
	opacity: 1;
}

/* ---- form notices: colour is gone, so the distinction moves -------------
   These were green (#1f8a5b) and red (rgba(192,57,43)) — the only two hues
   left, and the spec allows none. Removing the colour alone would leave
   success and failure indistinguishable, which is its own accessibility
   failure (WCAG 1.4.1: colour must never be the only means of conveying
   information). The distinction is carried instead by border WEIGHT and
   ground INTENSITY; the message text itself already differs. */
.sc-notice--ok {
	border-color: rgba(10, 10, 10, .35);
	background: rgba(10, 10, 10, .04);
}

.sc-notice--err {
	border-color: var(--sc-ink);
	border-inline-start-width: 5px;
	background: rgba(10, 10, 10, .1);
}

/* ---- monochrome photography --------------------------------------------
   The direction is black-and-white and the borrowed reference imagery is in
   colour, so the filter does the conversion until real photography lands. */
.sc-card img,
.sc-wall img,
.sc-hero__media img,
.sc-gallery img,
.sc-figure img,
.sc-refcard__media img,
.sc-entry img {
	filter: grayscale(1) contrast(1.12) brightness(.98);
}

/* ---- hard edges ----------------------------------------------------------
   --sc-radius has always been 0, but the streetwear pass rounded the CTAs to
   999px. Under a strictly achromatic direction the buttons go back to square. */
.sc-hero--street .sc-btn,
.sc-btn,
.sc-btn--primary,
.sc-btn--ghost,
.sc-btn--hot,
.sc-btn--quiet {
	border-radius: var(--sc-radius);
}


/* ---- warm whites, second pass -------------------------------------------
   The first pass over the inherited warm off-whites was written for the dark
   direction and covered the footer. When the direction moved to a white page
   that block was replaced, and these declarations were missed with it: the
   footer was still printing #FAF7F1 and the footer rule #EDEAE3, so the only
   warm pixels left on the site were in the footer. Verified by measuring the
   rendered page, not by reading the sheet: the footer body text composited to
   #C5C3BE and the rule's gradient base was #EDEAE3.

   Same alphas, hue removed — these are all light-on-dark chrome values, so
   they stay white. */

.sc-footer,
.sc-footer__list a {
	color: rgba(255, 255, 255, .78);
}

.sc-footer__blurb {
	color: rgba(255, 255, 255, .62);
}

.sc-footer__cert {
	color: rgba(255, 255, 255, .6);
}

.sc-footer__copy {
	color: rgba(255, 255, 255, .55);
}

.sc-footer__bottom {
	border-block-start-color: rgba(255, 255, 255, .12);
}

.sc-footer__rule {
	background: linear-gradient(90deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, .06));
}

/* Hero sits on a dark scrim, so its subtitle is a light value too. */
.sc-hero__subtitle,
.sc-hero .sc-hero__subtitle,
.sc-hero--street .sc-hero__subtitle {
	color: rgba(255, 255, 255, .86);
}

/* The halftone dot field on the street hero. */
.sc-hero--street::before {
	background-image: radial-gradient(circle, rgba(255, 255, 255, .17) 1.1px, transparent 1.2px);
}

/* The document element was left transparent, so the page colour came from the
   UA canvas rather than from the site. It renders white today, but a browser in
   dark mode paints that canvas dark, which flashes and can bleed at the
   overscroll edge. Pin it to the palette token. */
html {
	background-color: var(--sc-bg);
}

/* ==========================================================================
   PURE B/W — headings that were left on the dark ground
   --------------------------------------------------------------------------
   The sc-refgrid / sc-refcard component was written while the site had a
   near-black base, so its headings took the light token (--sc-ivory). When the
   palette moved to a white page that token became #FFFFFF, and the headings
   went invisible:

     .sc-refgrid__title   #FFFFFF on #FFFFFF  = 1.00:1   (blank band)
     .sc-refcard__title   #FFFFFF on #F4F4F4  = 1.10:1   (blank cards)

   Both were only caught by measuring the rendered page — the tokens read as
   correct in isolation, and nothing in the cascade looks wrong.

   The third rule below is the same class of defect caught one step earlier:
   it took its ground from one accent token and its label from another, which
   were near-black and white while the two accents differed. Both are near-black
   now, so the label sat at 1.00:1 on hover. It is restated to the light ink
   that belongs on that fill.
   ========================================================================== */

.sc-refgrid__title,
.sc-refcard__title {
	color: var(--sc-ink);
}

.sc-card a.sc-btn--primary:hover,
.sc-band--light a.sc-btn--primary:hover,
.sc-icta a.sc-btn--primary:hover {
	background: var(--sc-accent-ink);
	border-color: var(--sc-accent-ink);
	color: var(--sc-ivory);
}