/* ── 00-tokens.css ── */
/* ─────────────────────────────────────────────────────────────────────
BADAR · LIQUID GLASS — design tokens
Dark blue-violet ink (never flat black), frosted glass, pigment glows,
thin-film iridescence and polished liquid-metal accents.
The --c-* names are the site's semantic API used by every page; they
now resolve to the Liquid Glass palette.
───────────────────────────────────────────────────────────────────── */
:root {
color-scheme: dark;
/* Ink */
--ink-950: #04050A;
--ink-900: #070913;
--ink-850: #0A0D1A;
--ink-800: #0E1222;
--ink-700: #161B2F;
/* Text on ink (all ≥ 4.5:1 on --ink-800) */
--text: #F4F5F9;
--text-2: #C4C8D6;
--text-3: #9BA0B4;
/* Pigments */
--yinmn: #1C34A6; --yinmn-hi: #4A66F0; --yinmn-ink: #A9B8FF;
--candy: #B4121B; --candy-hi: #F04A50; --candy-ink: #FFA3A7;
--gold-ink: #FFD27A;
/* Thin-film iridescence + liquid metal */
--iri: linear-gradient(100deg, #8EEBFF 0%, #A89CFF 26%, #FF9ED8 50%, #FFD89A 74%, #9DFFD0 100%);
--iri-conic: conic-gradient(from var(--iri-a, 0deg), #8EEBFF, #A89CFF, #FF9ED8, #FFD89A, #9DFFD0, #8EEBFF);
--metal: linear-gradient(100deg, #C9CFD8 0%, #FFFFFF 22%, #A7AFBB 44%, #F6F7F9 64%, #B9C0CA 84%, #E9ECF0 100%);
/* Glass */
--glass-tint: rgba(14, 17, 32, .46);
--glass-hi: rgba(255, 255, 255, .085);
--glass-lo: rgba(255, 255, 255, .02);
--glass-line: rgba(255, 255, 255, .13);
--glass-line-hi: rgba(255, 255, 255, .34);
--glass-fill: linear-gradient(145deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .018) 45%, rgba(255, 255, 255, .03)), rgba(14, 17, 32, .55);
--blur: 22px;
/* Radius */
--r-xs: 8px; --r-sm: 12px; --r-md: 18px; --r-lg: 26px; --r-xl: 34px; --r-pill: 999px;
/* Elevation */
--e-1: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 10px 30px -12px rgba(0, 0, 0, .55);
--e-2: 0 1px 0 rgba(255, 255, 255, .16) inset, 0 -1px 0 rgba(255, 255, 255, .04) inset, 0 24px 60px -24px rgba(0, 0, 0, .75);
--e-3: 0 1px 0 rgba(255, 255, 255, .28) inset, 0 0 0 1px rgba(255, 255, 255, .04) inset, 0 40px 100px -30px rgba(0, 0, 0, .9);
/* Type families */
--f-display: "Space Grotesk", "Instrument Sans", system-ui, sans-serif;
--f-sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
--f-serif: var(--f-sans); /* editorial prose is set in the text face in this theme */
--f-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
/* Type scale */
--t-display: clamp(2.6rem, 1.3rem + 4.6vw, 5.4rem);
--t-h1: clamp(2.3rem, 1.25rem + 3.4vw, 4.4rem);
--t-h2-xl: clamp(2.4rem, 1.2rem + 4.2vw, 5.2rem);
--t-h2: clamp(1.9rem, 1.2rem + 2.3vw, 3.3rem);
--t-h2-md: clamp(1.7rem, 1.15rem + 1.8vw, 2.8rem);
--t-h2-sm: clamp(1.5rem, 1.1rem + 1.3vw, 2.3rem);
--t-h3: clamp(1.2rem, 1.05rem + .5vw, 1.5rem);
--t-lead: clamp(1.02rem, .95rem + .3vw, 1.2rem);
/* Space + layout */
--gutter: clamp(16px, 4vw, 48px);
--gutter-header: var(--gutter);
--section-y: clamp(56px, 6.5vw, 96px);
--section-y-sm: clamp(40px, 5vw, 72px);
--page-max: 1360px;
--header-h: 96px;
/* Motion */
--ease: cubic-bezier(.2, .8, .2, 1);
--ease-io: cubic-bezier(.65, 0, .35, 1);
--t-fast: 180ms; --t: 320ms; --t-slow: 700ms;
/* Layers */
--z-header: 100;
--z-drawer: 150;
--z-dialog: 160;
/* ── Semantic API used by page markup (mapped to the palette) ── */
--c-text: var(--text);
--c-text-2: var(--text-2);
--c-muted: #B6BBCB;
--c-faint: var(--text-3);
--c-quiet: #8E94AA;
--c-light: var(--text); /* "light text on a dark surface" */
--c-page: var(--ink-900);
--c-card: rgba(255, 255, 255, .045);
--c-alt: rgba(255, 255, 255, .028);
--c-inverse: var(--ink-800);
--c-inverse-2: rgba(255, 255, 255, .05);
--c-inverse-3: rgba(255, 255, 255, .03);
--c-footer: var(--ink-950);
--c-border: rgba(255, 255, 255, .12);
--c-border-strong: rgba(255, 255, 255, .22);
--c-border-dark: rgba(255, 255, 255, .1);
--c-border-dark-2: rgba(255, 255, 255, .28);
--c-on-dark: #E8EAF2;
--c-on-dark-muted: var(--text-2);
--c-accent: var(--yinmn-ink);
--c-error: #FF8A90;
--c-white: #FFFFFF;
--shadow-menu: var(--e-3);
--scrim: rgba(3, 4, 10, .6);
}
/* ── 10-base.css ── */
/* Base element styles */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--ink-900); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body { margin: 0; background: var(--ink-900); color: var(--text); font-family: var(--f-sans); font-size: 1rem; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; }
a { color: var(--c-accent); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--text); }
h1, h2, h3, h4 { margin: 0; font-family: var(--f-display); font-weight: 500; letter-spacing: -.025em; color: var(--text); }
p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; }
img, svg, canvas { display: block; max-width: 100%; }
table { border-collapse: collapse; }
input, select, textarea, button { font-family: inherit; font-size: 16px; }
button { color: inherit; }
::selection { background: rgba(74, 102, 240, .55); color: #fff; }
:focus-visible { outline: 2px solid #B9C6FF; outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }
main { display: block; position: relative; isolation: isolate; }
main:focus { outline: none; }
.skip-link { position: fixed; left: 16px; top: -60px; z-index: 300; padding: 10px 16px; border-radius: var(--r-pill); background: var(--text); color: var(--ink-900); font-weight: 600; transition: top var(--t) var(--ease); }
.skip-link:focus { top: 16px; color: var(--ink-900); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Icons (inline Lucide sprite) */
.ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; display: inline-block; vertical-align: middle; }
.ic--sm { width: 16px; height: 16px; }
.ic--xs { width: 13px; height: 13px; stroke-width: 2; }
/* Ambient pigment light behind every page: fixed, composited, never repaints on scroll */
.ambient { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
background: radial-gradient(120% 80% at 50% 120%, #0B0F24 0%, transparent 60%), linear-gradient(180deg, var(--ink-900), var(--ink-950)); }
.ambient span { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .5; will-change: transform; }
.ambient__a { width: 60vmax; height: 60vmax; left: -20vmax; top: 10vh; background: radial-gradient(circle, rgba(28, 52, 166, .55), transparent 65%); }
.ambient__b { width: 50vmax; height: 50vmax; right: -18vmax; top: 40vh; background: radial-gradient(circle, rgba(180, 18, 27, .32), transparent 65%); }
.ambient__c { width: 40vmax; height: 40vmax; left: 30vw; bottom: -20vmax; background: radial-gradient(circle, rgba(140, 150, 190, .14), transparent 65%); }
/* Liquid paint backdrop at the top of inner pages (WebGL canvas injected by liquid.js;
the gradient is the static fallback). Masked so it melts into the ink. */
.page-liquid { position: absolute; left: 0; right: 0; top: 0; height: min(760px, 92vh); z-index: -1; pointer-events: none; overflow: hidden;
-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 100%);
background:
radial-gradient(45% 60% at 82% 22%, var(--lq-a-soft, rgba(74, 102, 240, .6)), transparent 62%),
radial-gradient(35% 50% at 96% 70%, var(--lq-b-soft, rgba(180, 18, 27, .6)), transparent 62%),
radial-gradient(30% 30% at 66% 50%, rgba(230, 235, 245, .18), transparent 60%),
var(--ink-950); }
.page-liquid::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4, 5, 10, .78) 0%, rgba(4, 5, 10, .45) 45%, rgba(4, 5, 10, .12) 75%); }
.page-liquid canvas, .liquid-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.4s var(--ease); }
.page-liquid canvas.is-live, .liquid-canvas.is-live { opacity: .9; }
.grain { position: absolute; inset: 0; pointer-events: none; opacity: .08; mix-blend-mode: overlay;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
/* ── 20-layout.css ── */
/* Layout primitives. Grids are intrinsic (auto-fit + minmax). Per-instance tuning uses
CSS custom properties in a style attribute, e.g. style="--min:230px". */
.wrap { max-width: var(--page-max); margin: 0 auto; }
.wrap--prose { max-width: 900px; }
.wrap--narrow { max-width: 1000px; }
.wrap--form { max-width: 1000px; }
/* Page offset for the floating header */
main { padding-top: var(--header-h); }
body.page-home main { padding-top: 0; }
/* Page section: full-bleed band with gutter padding. No hairlines — depth comes from glass and light. */
.section { position: relative; padding: var(--section-y) var(--gutter); }
.section--sm { padding-top: var(--section-y-sm); padding-bottom: var(--section-y-sm); }
.section--md { padding-top: clamp(48px, 5.5vw, 88px); padding-bottom: clamp(48px, 5.5vw, 88px); }
.section--lg { padding-top: clamp(64px, 8vw, 120px); padding-bottom: clamp(64px, 8vw, 120px); }
/* Alt band: a soft pigment glow behind the section */
.section--alt::before, .section--card::before { content: ""; position: absolute; inset: 6% 0; z-index: -1; pointer-events: none;
background: radial-gradient(40% 55% at 12% 40%, rgba(28, 52, 166, .22), transparent 70%), radial-gradient(35% 50% at 88% 70%, rgba(180, 18, 27, .14), transparent 70%); }
.section--card::before { background: radial-gradient(50% 60% at 50% 50%, rgba(140, 150, 200, .1), transparent 70%); }
/* Dark band: deeper ink with a poured-paint glow, framed as a large glass panel */
.section--dark { color: var(--c-on-dark); padding-left: calc(var(--gutter) * 2); padding-right: calc(var(--gutter) * 2); }
.section--dark::before { content: ""; position: absolute; inset: 0 var(--gutter); z-index: -1; pointer-events: none; border-radius: var(--r-xl);
background: radial-gradient(60% 80% at 8% 0%, rgba(28, 52, 166, .38), transparent 60%), radial-gradient(50% 70% at 100% 100%, rgba(180, 18, 27, .3), transparent 60%), rgba(4, 5, 10, .72);
border: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 1px 0 rgba(255, 255, 255, .1) inset, var(--e-2); }
.section--flush { padding-bottom: 0; }
/* Auto-fit grid. --min sets the column minimum, --gap the gap. */
.grid { --min: 250px; --gap: clamp(12px, 1.4vw, 18px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--min), 100%), 1fr)); gap: var(--gap); }
.grid--fill { grid-template-columns: repeat(auto-fill, minmax(min(var(--min), 100%), 1fr)); }
/* The original "hairline" grids become separated glass cards (see 40-components). */
.grid--hair, .grid--hair-dark { list-style: none; padding: 0; }
.grid--hair.grid--open-top, .grid--hair-dark.grid--open-top { margin-top: var(--gap); }
/* Two-up split (text beside panel) */
.split { --min: 320px; --gap: clamp(28px, 5vw, 72px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--min), 100%), 1fr)); gap: var(--gap); }
.split--center { align-items: center; }
.split--start { align-items: start; }
.section-head { --mb: clamp(32px, 4.5vw, 56px); display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 40px; margin-bottom: var(--mb); }
.stack { --gap: 12px; display: flex; flex-direction: column; gap: var(--gap); }
.row { --gap: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap); }
.row--start { align-items: flex-start; }
.row--between { justify-content: space-between; }
.cluster { --gap: 8px; display: flex; flex-wrap: wrap; gap: var(--gap); align-content: flex-start; }
/* Inner-page hero: the text sits on a large glass slab over the liquid paint backdrop. */
.hero { --min: 340px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--min), 100%), 1fr)); gap: clamp(14px, 1.6vw, 20px); padding: clamp(16px, 2.4vw, 28px) var(--gutter) var(--section-y-sm); max-width: calc(var(--page-max) + var(--gutter) * 2); margin: 0 auto; align-items: stretch; }
.hero__main { position: relative; isolation: isolate; padding: clamp(26px, 4vw, 56px); border-radius: var(--r-xl); min-width: 0;
background: linear-gradient(145deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .02) 42%, rgba(255, 255, 255, .035)), rgba(8, 10, 22, .56);
-webkit-backdrop-filter: blur(28px) saturate(170%); backdrop-filter: blur(28px) saturate(170%);
border: 1px solid var(--glass-line); box-shadow: var(--e-3), inset 0 0 60px rgba(120, 140, 255, .05); }
.hero__main--home { max-width: none; }
.hero__aside { position: relative; isolation: isolate; border-radius: var(--r-xl); padding: clamp(24px, 3vw, 44px); min-width: 0;
background: var(--glass-fill); -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%);
border: 1px solid var(--glass-line); box-shadow: var(--e-2); }
.hero__aside--dark { background: linear-gradient(145deg, rgba(74, 102, 240, .16), rgba(180, 18, 27, .12)), rgba(6, 8, 18, .7); }
.hero--single .hero__main { width: 100%; }
/* Article layout: reading column + aside */
.article-layout { --min: 320px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--min), 100%), 1fr)); gap: clamp(14px, 1.6vw, 20px); padding: clamp(16px, 2.4vw, 28px) var(--gutter) var(--section-y-sm); max-width: calc(var(--page-max) + var(--gutter) * 2); margin: 0 auto; }
.article-layout__main { padding: clamp(8px, 2vw, 24px) 0; min-width: 0; }
.article-layout__aside { border-radius: var(--r-lg); background: var(--glass-fill); border: 1px solid var(--glass-line); box-shadow: var(--e-2); padding: clamp(22px, 3vw, 36px); min-width: 0; align-self: start; }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; border-radius: var(--r-md); }
.nowrap { white-space: nowrap; }
.full { width: 100%; }
/* ── 30-type.css ── */
/* Typography. Space Grotesk = display & headings, Instrument Sans = text, JetBrains Mono = labels and data. */
.mono { font-family: var(--f-mono); }
.serif, .sans { font-family: var(--f-sans); }
/* Eyebrow: mono kicker with a glowing pigment dot. */
.eyebrow { display: flex; align-items: center; gap: 10px; font-family: var(--f-mono); font-size: .72rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--text-2); margin-bottom: 18px; line-height: 1.5; }
.eyebrow::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--yinmn-hi); box-shadow: 0 0 0 3px rgba(74, 102, 240, .22), 0 0 14px 2px rgba(74, 102, 240, .8); }
.eyebrow--red::before, .section--dark .eyebrow::before { background: var(--candy-hi); box-shadow: 0 0 0 3px rgba(240, 74, 80, .22), 0 0 14px 2px rgba(240, 74, 80, .8); }
/* Label: small mono caption used on cards, panels and field groups. */
.label { font-family: var(--f-mono); font-size: .68rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); line-height: 1.5; }
.label--sm { font-size: .66rem; }
.label--xs { font-size: .62rem; }
.label--lg { font-size: .74rem; }
.data { font-family: var(--f-mono); font-size: .8rem; line-height: 1.8; color: var(--text-2); }
/* Headings */
.h-display { font-family: var(--f-display); font-weight: 500; font-size: var(--t-display); line-height: .98; letter-spacing: -.045em; text-wrap: balance; }
.h-1 { font-family: var(--f-display); font-weight: 500; font-size: var(--t-h1); line-height: 1.02; letter-spacing: -.04em; text-wrap: balance; }
.h-2 { font-family: var(--f-display); font-weight: 500; font-size: var(--t-h2); line-height: 1.04; letter-spacing: -.035em; text-wrap: balance; }
.h-2-md { font-family: var(--f-display); font-weight: 500; font-size: var(--t-h2-md); line-height: 1.06; letter-spacing: -.03em; text-wrap: balance; }
.h-2-sm { font-family: var(--f-display); font-weight: 500; font-size: var(--t-h2-sm); line-height: 1.1; letter-spacing: -.03em; text-wrap: balance; }
.h-2-xl { font-family: var(--f-display); font-weight: 500; font-size: var(--t-h2-xl); line-height: .98; letter-spacing: -.045em; text-wrap: balance; }
.h-3 { font-family: var(--f-display); font-weight: 500; font-size: var(--t-h3); line-height: 1.15; letter-spacing: -.02em; }
.h-3-lg { font-family: var(--f-display); font-weight: 500; font-size: clamp(1.35rem, 1.1rem + .7vw, 1.7rem); line-height: 1.12; letter-spacing: -.025em; }
.h-3-fluid { font-family: var(--f-display); font-weight: 500; font-size: clamp(1.25rem, 1.05rem + .6vw, 1.6rem); line-height: 1.15; letter-spacing: -.02em; }
.h-4 { font-family: var(--f-display); font-weight: 500; font-size: 1.2rem; line-height: 1.2; letter-spacing: -.015em; }
.h-5 { font-family: var(--f-display); font-weight: 500; font-size: 1.08rem; line-height: 1.25; letter-spacing: -.01em; }
.h-6 { font-family: var(--f-display); font-weight: 500; font-size: .98rem; line-height: 1.3; letter-spacing: -.005em; }
.h-display, .h-1, .h-2, .h-2-md, .h-2-sm, .h-2-xl, .h-3, .h-3-lg, .h-3-fluid, .h-4, .h-5, .h-6 { color: var(--text); }
.strong { font-weight: 600; }
/* Iridescent emphasis inside a heading: … */
.iri-text { background: var(--iri); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: iri-slide 9s linear infinite; }
@keyframes iri-slide { to { background-position: 200% 0; } }
/* Text roles */
.lead { font-family: var(--f-sans); font-size: var(--t-lead); line-height: 1.6; color: var(--text-2); text-wrap: pretty; }
.text-lg { font-family: var(--f-sans); font-size: 1.08rem; line-height: 1.6; color: var(--text-2); }
.text { font-family: var(--f-sans); font-size: 1.02rem; line-height: 1.6; color: var(--text-2); }
.text-md { font-family: var(--f-sans); font-size: .98rem; line-height: 1.6; color: var(--text-2); }
.text-sm { font-family: var(--f-sans); font-size: .93rem; line-height: 1.55; color: var(--c-muted); }
.text-xs { font-family: var(--f-sans); font-size: .88rem; line-height: 1.5; color: var(--c-muted); }
.fineprint { font-family: var(--f-mono); font-size: .68rem; line-height: 1.75; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.fineprint--sm { font-size: .64rem; line-height: 1.7; }
/* Long-form prose (articles, policies) */
.prose { font-family: var(--f-sans); font-size: 1.08rem; line-height: 1.75; color: var(--text-2); max-width: 72ch; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-family: var(--f-display); font-size: clamp(1.5rem, 1.15rem + 1.1vw, 2.1rem); line-height: 1.12; letter-spacing: -.03em; color: var(--text); margin-top: 2em; }
.prose h3 { font-family: var(--f-display); font-size: 1.25rem; line-height: 1.25; color: var(--text); margin-top: 1.6em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: .4em; }
.prose li::marker { color: var(--yinmn-ink); }
.prose a { color: var(--yinmn-ink); background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; }
.prose a:hover { color: var(--text); }
.prose sup a { background: none; font-family: var(--f-mono); font-size: .7em; }
.prose strong { color: var(--text); font-weight: 600; }
/* ── 40-components.css ── */
/* Shared components — Liquid Glass. Status is always carried by the text label, never by colour alone. */
/* ── Glass primitive ─────────────────────────────────────────────── */
.glass, .card, .grid--hair > :not(:has(> .card)), .grid--hair-dark > :not(:has(> .card)), .panel, .note, .identity, .related, .industry-link {
position: relative; isolation: isolate;
background: var(--glass-fill);
border: 1px solid var(--glass-line);
border-radius: var(--r-lg);
box-shadow: var(--e-2);
}
/* Specular top edge + faint chromatic fringe */
.glass::before, .card::before, .panel::before, .grid--hair > :not(:has(> .card))::before, .grid--hair-dark > :not(:has(> .card))::before {
content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; z-index: -1; padding: 1px;
background: linear-gradient(180deg, rgba(255, 255, 255, .38), rgba(255, 255, 255, 0) 26%, rgba(255, 255, 255, 0) 80%, rgba(255, 255, 255, .1)),
linear-gradient(90deg, rgba(255, 110, 150, .3), rgba(255, 255, 255, 0) 18%, rgba(255, 255, 255, 0) 82%, rgba(110, 190, 255, .3));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.glass--blur { -webkit-backdrop-filter: blur(var(--blur)) saturate(170%); backdrop-filter: blur(var(--blur)) saturate(170%); }
/* Iridescent thin-film border */
@property --iri-a { syntax: ""; inherits: true; initial-value: 0deg; }
.iri-border { border-color: transparent; animation: iri-spin 10s linear infinite; }
.iri-border::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; padding: 1.2px; background: var(--iri-conic);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .8; }
@keyframes iri-spin { to { --iri-a: 360deg; } }
/* Cursor-tracked sheen + tilt (motion.js sets --mx/--my/--rx/--ry on [data-tilt]) */
[data-tilt] { --mx: 50%; --my: 0%; --rx: 0deg; --ry: 0deg; --sheen-o: 0; transform: perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .5s var(--ease), box-shadow var(--t) var(--ease), border-color var(--t); }
[data-tilt]:hover { --sheen-o: 1; }
.sheen { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3; opacity: var(--sheen-o, 0); transition: opacity var(--t) var(--ease); mix-blend-mode: screen;
background: radial-gradient(420px circle at var(--mx) var(--my), rgba(255, 255, 255, .14), rgba(255, 255, 255, .04) 30%, transparent 60%); }
/* ── Buttons & links ─────────────────────────────────────────────── */
.btn { --h: 48px; position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
min-height: var(--h); padding: 0 22px; border-radius: var(--r-pill); border: 1px solid transparent; background: none; cursor: pointer; text-align: center;
font-family: var(--f-sans); font-weight: 600; font-size: .95rem; letter-spacing: -.005em; line-height: 1.2; text-transform: none; color: var(--text);
transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), background-color var(--t), border-color var(--t), color var(--t); }
.btn .ic { transition: transform var(--t) var(--ease); }
.btn:hover .ic { transform: translateX(3px); }
.btn:active { transform: scale(.975); }
.btn--sm { --h: 40px; padding: 0 16px; font-size: .86rem; }
.btn--lg { --h: 56px; padding: 0 28px; font-size: 1rem; }
.btn--block { display: flex; width: 100%; }
.btn--split { justify-content: space-between; width: 100%; --h: 60px; padding: 0 26px; }
/* Liquid-metal primary: dark text on polished silver (≈15:1) */
.btn--primary, .btn--light, .btn--metal { color: #070913; background: var(--metal); background-size: 220% 100%; background-position: 0 0; border-color: transparent;
box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 -1px 0 rgba(0, 0, 0, .18) inset, 0 12px 30px -10px rgba(200, 210, 255, .45);
transition: background-position .9s var(--ease), transform var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.btn--primary:hover, .btn--light:hover, .btn--metal:hover { color: #070913; background-position: 100% 0; box-shadow: 0 1px 0 #fff inset, 0 -1px 0 rgba(0, 0, 0, .18) inset, 0 18px 40px -10px rgba(170, 190, 255, .6); }
/* Glass secondary with thin-film edge */
.btn--secondary, .btn--outline-light, .btn--glass, .btn--accent { color: var(--text);
background: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .04)), rgba(12, 14, 28, .4);
box-shadow: 0 1px 0 rgba(255, 255, 255, .28) inset, 0 10px 26px -12px rgba(0, 0, 0, .6); }
.btn--secondary::after, .btn--outline-light::after, .btn--glass::after, .btn--accent::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
background: var(--iri-conic); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
opacity: .55; transition: opacity var(--t); animation: iri-spin 8s linear infinite; }
.btn--secondary:hover, .btn--outline-light:hover, .btn--glass:hover, .btn--accent:hover { color: var(--text); box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 14px 34px -12px rgba(140, 160, 255, .45); }
.btn--secondary:hover::after, .btn--outline-light:hover::after, .btn--glass:hover::after, .btn--accent:hover::after { opacity: 1; }
.btn--accent { color: var(--yinmn-ink); }
/* Ghost / quiet */
.btn--quiet, .btn--outline-dim, .btn--ghost { color: var(--text-2); border-color: rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .02); }
.btn--quiet:hover, .btn--outline-dim:hover, .btn--ghost:hover { color: var(--text); border-color: rgba(255, 255, 255, .34); background: rgba(255, 255, 255, .06); }
.btn--quiet-accent { color: var(--yinmn-ink); border-color: rgba(169, 184, 255, .3); background: rgba(74, 102, 240, .08); }
.btn--quiet-accent:hover { color: var(--text); border-color: rgba(169, 184, 255, .6); background: rgba(74, 102, 240, .18); }
.btn--quiet-accent.is-added { color: #0B2B1C; background: linear-gradient(100deg, #9DFFD0, #8EEBFF); border-color: transparent; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
/* Mono arrow link: "OPEN THE MATERIAL INDEX →" — underline grows on hover */
.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-mono); font-size: .72rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--yinmn-ink); line-height: 1.5;
background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; padding-bottom: 2px; transition: background-size var(--t) var(--ease), color var(--t); }
.link-arrow:hover { color: var(--text); background-size: 100% 1px; }
.link-arrow--light { color: var(--text); }
.link-text { color: var(--text); font-weight: 500; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; padding-bottom: 2px; transition: background-size var(--t) var(--ease); }
.link-text:hover { color: var(--text); background-size: 100% 1px; }
.inline-link { color: var(--yinmn-ink); background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; }
/* ── Chips / options ─────────────────────────────────────────────── */
.chip { display: inline-flex; align-items: center; padding: 8px 14px; border-radius: var(--r-pill); font-family: var(--f-mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); line-height: 1.4;
border: 1px solid var(--glass-line); background: rgba(255, 255, 255, .04); transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast); }
.chip--sm { padding: 7px 12px; font-size: .66rem; }
a.chip:hover { color: var(--text); border-color: var(--glass-line-hi); background: rgba(255, 255, 255, .09); }
.option { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 16px; border-radius: var(--r-pill); cursor: pointer; text-align: left; line-height: 1.3;
font-family: var(--f-mono); font-size: .7rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2);
border: 1px solid var(--glass-line); background: rgba(255, 255, 255, .04); transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast), box-shadow var(--t); }
.option:hover { color: var(--text); border-color: var(--glass-line-hi); background: rgba(255, 255, 255, .08); }
.option[aria-pressed="true"], .option[aria-checked="true"], .option.is-active { color: #070913; background: var(--metal); border-color: transparent; box-shadow: 0 1px 0 #fff inset, 0 8px 22px -10px rgba(200, 210, 255, .55); }
.option--clear { background: transparent; }
/* ── Status (StatusBadge): text pill with a glowing dot ──────────── */
.status { display: inline-flex; align-items: center; gap: 8px; width: fit-content; max-width: 100%; padding: 5px 10px 5px 9px; border-radius: var(--r-pill);
font-family: var(--f-mono); font-size: .64rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; line-height: 1.4; color: var(--text);
background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); }
.status::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--gold-ink); box-shadow: 0 0 10px rgba(255, 210, 122, .8); }
.status--faint { color: var(--text-2); }
.status--faint::before { background: var(--text-3); box-shadow: none; }
.status--error { color: var(--candy-ink); }
.status--error::before { background: var(--candy-hi); box-shadow: 0 0 10px rgba(240, 74, 80, .8); }
button.status { cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast); }
button.status:hover { border-color: var(--glass-line-hi); background: rgba(255, 255, 255, .12); }
/* ── Cards ───────────────────────────────────────────────────────── */
.card { --pad: 28px 26px 30px; display: flex; flex-direction: column; color: var(--text); padding: var(--pad); overflow: hidden; }
.card--page { background: linear-gradient(145deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .015)), rgba(10, 12, 24, .5); }
.card--bordered { border-color: var(--glass-line); }
.card--dark, .card--darker { background: linear-gradient(145deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .015)), rgba(4, 5, 12, .62); color: var(--c-on-dark); }
.card--inverse { background: linear-gradient(145deg, rgba(74, 102, 240, .3), rgba(180, 18, 27, .22)), rgba(12, 12, 32, .6); color: var(--text); border-color: rgba(255, 255, 255, .2); }
.card--flush { padding: 0; }
.card--gap { gap: 12px; }
a.card, a.related, a.industry-link { transition: transform .5s var(--ease), box-shadow var(--t) var(--ease), border-color var(--t), background var(--t); }
a.card:hover, a.related:hover, a.industry-link:hover, .grid--hair > a:hover { color: var(--text); border-color: var(--glass-line-hi); box-shadow: var(--e-3); }
a.card:not([data-tilt]):hover { transform: translateY(-3px); }
.card__body { --pad: 22px; padding: var(--pad); display: flex; flex-direction: column; flex: 1 1 auto; }
.card__grow { flex: 1 1 auto; }
/* A card nested in a card cell (e.g. ) should not double up */
li.card:has(> a.card) { background: none; border: 0; box-shadow: none; padding: 0; }
li.card:has(> a.card)::before { content: none; }
/* Big step index ("01") and figures */
.step-num { font-family: var(--f-display); font-size: 1.9rem; font-weight: 500; letter-spacing: -.03em; line-height: 1; margin-bottom: 18px; background: var(--iri); -webkit-background-clip: text; background-clip: text; color: transparent; width: fit-content; }
.step-num--dark { font-size: 1.7rem; }
.figure { font-family: var(--f-display); font-weight: 500; font-size: clamp(1.7rem, 1.2rem + 1.4vw, 2.5rem); letter-spacing: -.03em; line-height: 1; color: var(--text); margin-bottom: 12px; }
/* ── Swatch: liquid pigment field (colour is content data, set with --sw) ── */
.swatch { --h: 150px; position: relative; overflow: hidden; display: block; height: var(--h); background: var(--sw, var(--ink-700)); flex: 0 0 auto;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -20px 40px rgba(0, 0, 0, .35); }
.card--flush > .swatch:first-child, .card--flush > a.swatch:first-child { margin: 12px 12px 0; border-radius: 16px; }
.swatch::before { content: ""; position: absolute; inset: -40%; pointer-events: none; animation: swirl 18s linear infinite; mix-blend-mode: soft-light;
background: radial-gradient(28% 20% at 30% 35%, rgba(255, 255, 255, .34), transparent 70%), radial-gradient(22% 16% at 70% 60%, rgba(255, 255, 255, .18), transparent 70%), radial-gradient(40% 30% at 60% 25%, rgba(0, 0, 0, .25), transparent 70%); }
.swatch::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(255, 255, 255, .2), transparent 32%); }
@keyframes swirl { to { transform: rotate(360deg); } }
.swatch--sm { --h: 118px; }
.swatch--md { --h: 132px; }
.swatch--lg { --h: 180px; }
.media-slot { position: relative; overflow: hidden; background: var(--sw, linear-gradient(135deg, var(--ink-700), var(--ink-850))); aspect-ratio: var(--ratio, 16 / 9); display: flex; align-items: flex-end; border-radius: var(--r-md); border: 1px solid var(--glass-line); }
.media-slot__caption { font-family: var(--f-mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; line-height: 1.6; color: var(--text); background: rgba(4, 5, 12, .72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); padding: 10px 14px; width: 100%; }
/* ── Facts strip (glass ribbon) ──────────────────────────────────── */
.fact-strip { padding: 0 var(--gutter); }
.fact-strip__inner { max-width: var(--page-max); margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 26px; padding: 16px 26px; border-radius: var(--r-pill);
font-family: var(--f-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-2);
background: var(--glass-fill); border: 1px solid var(--glass-line); box-shadow: var(--e-2); }
.fact-strip__sep { display: none; }
.fact-strip a { color: var(--yinmn-ink); }
/* ── Key/value rows & records ────────────────────────────────────── */
.kv { display: flex; flex-direction: column; }
.kv__row { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid rgba(255, 255, 255, .08); font-size: .95rem; line-height: 1.45; }
.kv__row:last-child { border-bottom: 0; }
.kv--ruled .kv__row:last-child { border-bottom: 1px solid rgba(255, 255, 255, .08); }
.kv__k { color: var(--text); }
.kv__v { font-family: var(--f-mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); text-align: right; flex: 0 0 auto; }
.kv__v--wrap { flex: 0 1 60%; }
.kv__v.is-req { color: var(--candy-ink); }
.kv__v.is-help { color: var(--yinmn-ink); }
.record { display: grid; grid-template-columns: minmax(120px, 34%) 1fr; gap: 0 20px; }
.record dt, .record dd { padding: 13px 0; border-bottom: 1px solid rgba(255, 255, 255, .08); font-size: .95rem; line-height: 1.5; }
.record dt { font-family: var(--f-mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); padding-top: 15px; }
.record dd { color: var(--text); }
/* ── Link lists & related links ──────────────────────────────────── */
.link-list { display: flex; flex-direction: column; gap: 9px; font-size: .95rem; }
.link-list a { color: var(--text-2); }
.link-list a:hover { color: var(--text); }
.related { display: block; padding: 20px 22px; color: var(--text); border-radius: var(--r-md); line-height: 1.4; }
.related__title { display: block; font-family: var(--f-display); font-size: 1.05rem; font-weight: 500; letter-spacing: -.01em; }
.related__meta { display: block; font-family: var(--f-mono); font-size: .64rem; color: var(--text-3); letter-spacing: .12em; text-transform: uppercase; margin-top: 6px; }
/* ── Panels & notes ──────────────────────────────────────────────── */
.panel { --pad: 22px 24px; padding: var(--pad); border-radius: var(--r-md); }
.panel--page { background: linear-gradient(145deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .012)), rgba(10, 12, 24, .5); }
.panel--alt { background: rgba(255, 255, 255, .03); }
.panel--dark { background: linear-gradient(145deg, rgba(74, 102, 240, .18), rgba(180, 18, 27, .12)), rgba(6, 8, 18, .7); color: var(--c-on-dark); }
.panel--accent { border-color: rgba(169, 184, 255, .5); box-shadow: var(--e-2), 0 0 40px -10px rgba(74, 102, 240, .45); }
.panel--error { border-color: rgba(255, 138, 144, .55); }
.panel-stack { display: flex; flex-direction: column; gap: 10px; }
.note { padding: 18px 22px; border-radius: var(--r-md); background: linear-gradient(145deg, rgba(180, 18, 27, .12), rgba(255, 255, 255, .02)), rgba(10, 12, 24, .55); border-color: rgba(255, 138, 144, .28); }
.note__title { font-family: var(--f-mono); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--candy-ink); margin-bottom: 8px; }
.note--info { background: linear-gradient(145deg, rgba(74, 102, 240, .14), rgba(255, 255, 255, .02)), rgba(10, 12, 24, .55); border-color: rgba(169, 184, 255, .3); }
.note--info .note__title { color: var(--yinmn-ink); }
.note p:not(.note__title) { font-size: .98rem; line-height: 1.6; color: var(--text-2); }
.identity { padding: 26px 28px; border-radius: var(--r-md); font-family: var(--f-mono); font-size: .82rem; line-height: 2; color: var(--text); }
/* ── FAQ ─────────────────────────────────────────────────────────── */
.faq { display: grid; gap: 10px; }
.faq__item { padding: 20px 24px; border-radius: var(--r-md); background: var(--glass-fill); border: 1px solid var(--glass-line); box-shadow: var(--e-1); }
.faq__q { font-family: var(--f-display); font-size: 1.15rem; font-weight: 500; letter-spacing: -.015em; line-height: 1.3; margin-bottom: 10px; color: var(--text); }
.faq__a { font-size: 1rem; line-height: 1.65; color: var(--text-2); }
details.faq__item { transition: border-color var(--t), background var(--t); }
details.faq__item[open] { border-color: var(--glass-line-hi); }
details.faq__item > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; font-family: var(--f-display); font-size: 1.15rem; font-weight: 500; letter-spacing: -.015em; line-height: 1.3; color: var(--text); }
details.faq__item > summary::-webkit-details-marker { display: none; }
details.faq__item > summary::after { content: "+"; flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-family: var(--f-mono); font-size: 1rem; color: var(--text); background: rgba(255, 255, 255, .08); border: 1px solid var(--glass-line); transition: transform var(--t) var(--ease); }
details.faq__item[open] > summary::after { transform: rotate(45deg); }
details.faq__item[open] > summary { margin-bottom: 12px; }
/* ── Tables ──────────────────────────────────────────────────────── */
.table { width: 100%; font-size: .95rem; line-height: 1.5; background: var(--glass-fill); border: 1px solid var(--glass-line); border-radius: var(--r-md); border-collapse: separate; border-spacing: 0; overflow: hidden; }
.table th { font-family: var(--f-mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); font-weight: 500; text-align: left; padding: 14px 16px; border-bottom: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .04); vertical-align: bottom; }
.table td { padding: 14px 16px; border-bottom: 1px solid rgba(255, 255, 255, .07); vertical-align: top; color: var(--text-2); }
.table td:first-child { color: var(--text); font-weight: 600; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background var(--t-fast); }
.table tbody tr:hover { background: rgba(255, 255, 255, .03); }
.table--mono td { font-family: var(--f-mono); font-size: .8rem; }
/* ── Documents ───────────────────────────────────────────────────── */
.doc { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 18px; border-radius: var(--r-sm); background: rgba(255, 255, 255, .04); border: 1px solid var(--glass-line); font-family: var(--f-mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text); }
.doc__action { background: none; border: 0; padding: 6px 0; cursor: pointer; font-family: var(--f-mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--yinmn-ink); }
.doc__action:hover { color: var(--text); }
.doc-list { display: flex; flex-direction: column; gap: 8px; }
/* ── References ──────────────────────────────────────────────────── */
.refs { display: flex; flex-direction: column; gap: 14px; font-family: var(--f-mono); font-size: .72rem; line-height: 1.8; letter-spacing: .04em; color: var(--text-2); }
.refs li { list-style: none; }
.refs li:target, .refs li.is-target, .is-target > .refs-item { color: var(--text); background: rgba(74, 102, 240, .14); border-radius: 8px; outline: 1px solid rgba(169, 184, 255, .4); outline-offset: 4px; }
.refs--caveat { color: var(--candy-ink); }
.cite { font-family: var(--f-mono); font-size: .72em; vertical-align: super; line-height: 0; }
/* ── Correction link ─────────────────────────────────────────────── */
.correction { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; text-align: left; padding: 14px 18px; border-radius: var(--r-sm); cursor: pointer;
border: 1px dashed rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .03); font-family: var(--f-mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); transition: border-color var(--t-fast), color var(--t-fast); }
.correction:hover { border-color: var(--glass-line-hi); color: var(--text); }
/* ── Progress (RFQ steps) ────────────────────────────────────────── */
.progress { display: flex; flex-wrap: wrap; gap: 6px; }
.progress__step { flex: 1 1 120px; position: relative; border: 0; background: none; padding: 14px 4px 12px; cursor: pointer; text-align: left; font-family: var(--f-mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.progress__step::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .1); }
.progress__step[aria-current="step"] { color: var(--text); }
.progress__step[aria-current="step"]::after { background: var(--iri); box-shadow: 0 0 14px rgba(169, 184, 255, .6); }
/* ── Mode switch (two large glass buttons) ───────────────────────── */
.modes { display: flex; flex-wrap: wrap; gap: 10px; }
.mode { flex: 1 1 260px; position: relative; cursor: pointer; text-align: left; padding: 22px 24px; border-radius: var(--r-md); color: var(--text); background: var(--glass-fill); border: 1px solid var(--glass-line); box-shadow: var(--e-1); transition: border-color var(--t), box-shadow var(--t); }
.mode:hover { border-color: var(--glass-line-hi); }
.mode[aria-pressed="true"], .mode[aria-selected="true"] { background: linear-gradient(145deg, rgba(74, 102, 240, .32), rgba(180, 18, 27, .2)), rgba(12, 12, 30, .6); border-color: rgba(169, 184, 255, .55); box-shadow: var(--e-2), 0 0 40px -12px rgba(74, 102, 240, .6); }
.mode__title { display: block; font-family: var(--f-mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 8px; }
.mode__desc { display: block; font-size: .95rem; line-height: 1.5; color: var(--text-2); }
/* ── Search result rows ──────────────────────────────────────────── */
.result-row { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 8px 0 10px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.result-row a { color: var(--text); font-size: .95rem; }
.add-btn { border: 1px solid rgba(169, 184, 255, .3); background: rgba(74, 102, 240, .08); cursor: pointer; color: var(--yinmn-ink); padding: 6px 11px; border-radius: var(--r-pill); font-family: var(--f-mono); font-size: .62rem; letter-spacing: .1em; flex: 0 0 auto; }
.add-btn:hover { border-color: rgba(169, 184, 255, .6); color: var(--text); }
.add-btn.is-added { color: #0B2B1C; background: linear-gradient(100deg, #9DFFD0, #8EEBFF); border-color: transparent; }
/* ── Material card (index variant, generated by the build) ───────── */
.mat-card { border-radius: var(--r-lg); }
.mat-card__name { font-family: var(--f-display); font-size: 1.2rem; font-weight: 500; line-height: 1.2; color: var(--text); letter-spacing: -.015em; }
.mat-card__name:hover { color: var(--text); }
.mat-card__meta { border-top: 1px solid rgba(255, 255, 255, .08); padding-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; font-family: var(--f-mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; }
.mat-card__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.mat-card__actions > * { flex: 1 1 110px; --h: 42px; padding: 0 12px; font-size: .82rem; }
.mat-card__actions > button { flex-basis: 130px; }
/* ── 45-forms.css ── */
/* Forms (FormShell) — dark glass fields. Labels always visible; errors use aria-invalid + a described-by message. */
.form { display: grid; gap: 18px; }
.form-grid { --min: 150px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--min), 100%), 1fr)); gap: 18px; }
.field__label { display: block; font-size: .88rem; font-weight: 500; color: var(--text-2); margin-bottom: 8px; line-height: 1.4; }
.field__hint { display: block; font-size: .82rem; color: var(--text-3); margin-top: 6px; line-height: 1.45; }
.input, .select, .textarea { width: 100%; min-height: 50px; padding: 13px 16px; border-radius: var(--r-sm); line-height: normal; color: var(--text);
background-color: rgba(255, 255, 255, .05); border: 1px solid var(--glass-line); box-shadow: 0 1px 0 rgba(255, 255, 255, .05) inset;
transition: border-color var(--t-fast), background-color var(--t-fast), box-shadow var(--t-fast); }
.input--page, .select--page, .textarea--page { background-color: rgba(255, 255, 255, .04); }
.input:hover, .select:hover, .textarea:hover { border-color: rgba(255, 255, 255, .24); }
.textarea { resize: vertical; min-height: 110px; }
.select { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer;
background-image: linear-gradient(45deg, transparent 50%, var(--text-2) 50%), linear-gradient(135deg, var(--text-2) 50%, transparent 50%);
background-position: calc(100% - 20px) 52%, calc(100% - 15px) 52%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.select option { background: var(--ink-800); color: var(--text); }
.input::placeholder, .textarea::placeholder { color: var(--text-3); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { outline: none; border-color: #B9C6FF; background-color: rgba(74, 102, 240, .08); box-shadow: 0 0 0 4px rgba(74, 102, 240, .22); }
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--c-error); box-shadow: 0 0 0 3px rgba(240, 74, 80, .18); }
.field__error { display: flex; gap: 7px; align-items: flex-start; margin-top: 8px; font-size: .86rem; line-height: 1.45; color: var(--c-error); }
.field__error::before { content: "✕"; }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: .9rem; color: var(--text-2); line-height: 1.5; }
.check input { margin-top: 2px; flex: 0 0 auto; width: 18px; height: 18px; accent-color: var(--yinmn-hi); }
.check--muted { color: var(--text-3); }
.form-alert { padding: 16px 20px; border-radius: var(--r-md); background: linear-gradient(145deg, rgba(180, 18, 27, .18), rgba(255, 255, 255, .02)), rgba(10, 12, 24, .6); border: 1px solid rgba(255, 138, 144, .5); }
.form-alert__title { font-family: var(--f-mono); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--candy-ink); margin-bottom: 8px; }
.form-alert__text { font-size: .98rem; line-height: 1.55; color: var(--text-2); }
.form-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.fieldset > legend { padding: 0; margin-bottom: 12px; font-family: var(--f-mono); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); }
.file { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 20px; border-radius: var(--r-md); border: 1px dashed rgba(255, 255, 255, .24); background: rgba(255, 255, 255, .03); }
.file input[type="file"] { font-family: var(--f-mono); font-size: .8rem; color: var(--text-2); max-width: 100%; }
.file input[type="file"]::file-selector-button { margin-right: 12px; padding: 9px 16px; border-radius: var(--r-pill); border: 1px solid var(--glass-line); background: rgba(255, 255, 255, .08); color: var(--text); font-family: var(--f-sans); font-weight: 600; cursor: pointer; }
.confirm { padding: clamp(24px, 3vw, 40px); border-radius: var(--r-lg); background: linear-gradient(145deg, rgba(74, 102, 240, .2), rgba(157, 255, 208, .06)), rgba(10, 12, 24, .6); border: 1px solid rgba(169, 184, 255, .4); box-shadow: var(--e-3); }
/* ── 50-shell.css ── */
/* Site shell — floating glass header, menus, search, drawers, dialogs, breadcrumbs, footer. */
/* ── Header ──────────────────────────────────────────────────────── */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-header); padding: 14px var(--gutter) 0; pointer-events: none; }
.site-header__bar { pointer-events: auto; position: relative; isolation: isolate; max-width: calc(var(--page-max) + 24px); margin: 0 auto; display: flex; align-items: center; gap: 10px;
height: 66px; padding: 0 12px 0 20px; border-radius: 22px;
background: linear-gradient(145deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .02) 42%, rgba(255, 255, 255, .035)), rgba(8, 10, 22, .5);
-webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%);
border: 1px solid var(--glass-line); box-shadow: var(--e-2);
transition: transform var(--t-slow) var(--ease), background-color var(--t); }
.site-header__bar::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; z-index: -1; padding: 1px;
background: linear-gradient(180deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, 0) 40%), linear-gradient(90deg, rgba(255, 110, 150, .35), rgba(255, 255, 255, 0) 18%, rgba(255, 255, 255, 0) 82%, rgba(110, 190, 255, .35));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.site-header.is-scrolled .site-header__bar { background-color: rgba(8, 10, 22, .78); }
.site-header.is-hidden .site-header__bar { transform: translateY(-130%); }
.brand { display: inline-flex; align-items: center; gap: 12px; flex: none; color: var(--text); }
.brand:hover { color: var(--text); }
.brand__name { font-family: var(--f-display); font-weight: 600; font-size: 1.45rem; letter-spacing: .14em; line-height: 1; color: var(--text); }
.brand__rule { width: 1px; height: 26px; background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .5), transparent); }
.brand__sub { font-family: var(--f-mono); font-size: .58rem; letter-spacing: .16em; line-height: 1.5; color: var(--text-3); }
.brand--lg .brand__name { font-size: 2rem; }
.brand--lg .brand__rule { height: 34px; }
.site-nav { display: flex; align-items: center; gap: 1px; margin-inline: auto; }
.site-nav__item { display: inline-flex; align-items: center; gap: 5px; padding: 8px 7px; border: 0; border-radius: var(--r-pill); background: none; cursor: pointer;
font-family: var(--f-sans); font-size: .85rem; font-weight: 500; color: var(--text-2); white-space: nowrap; transition: color var(--t-fast), background var(--t-fast); }
.site-nav__item:hover, .site-nav__item[aria-expanded="true"] { color: var(--text); background: rgba(255, 255, 255, .08); }
.site-nav__item[aria-current="page"] { color: var(--text); background: rgba(255, 255, 255, .1); box-shadow: 0 1px 0 rgba(255, 255, 255, .15) inset; }
.site-nav__caret { transition: transform var(--t) var(--ease); }
.site-nav__item[aria-expanded="true"] .site-nav__caret { transform: rotate(180deg); }
.header-actions { display: flex; align-items: center; gap: 6px; flex: none; }
.icon-btn { width: 42px; height: 42px; border-radius: 50%; display: inline-grid; place-items: center; color: var(--text); cursor: pointer;
background: rgba(255, 255, 255, .06); border: 1px solid var(--glass-line); transition: background var(--t-fast), border-color var(--t-fast); }
.icon-btn:hover { background: rgba(255, 255, 255, .12); border-color: var(--glass-line-hi); color: var(--text); }
.icon-btn[aria-expanded="true"] { background: rgba(255, 255, 255, .16); }
.enq-btn { min-height: 40px; padding: 0 14px; border-radius: var(--r-pill); cursor: pointer; font-family: var(--f-mono); font-size: .66rem; font-weight: 500; letter-spacing: .12em; color: var(--yinmn-ink);
background: rgba(74, 102, 240, .14); border: 1px solid rgba(169, 184, 255, .45); box-shadow: 0 0 22px -6px rgba(74, 102, 240, .7); transition: background var(--t-fast), color var(--t-fast); }
.enq-btn:hover { background: rgba(74, 102, 240, .3); color: var(--text); }
.only-narrow { display: none !important; }
@media (max-width: 1519px) { .header-source { display: none !important; } }
@media (max-width: 1300px) {
.site-nav, .only-wide { display: none !important; }
.only-narrow { display: inline-flex !important; }
.header-actions { margin-left: auto; }
}
@media (max-width: 640px) {
:root { --header-h: 84px; }
.site-header { padding-top: 10px; }
.site-header__bar { height: 58px; padding: 0 8px 0 16px; border-radius: 18px; gap: 8px; }
.brand { gap: 9px; }
.brand__name { font-size: 1.2rem; }
.brand__rule { height: 22px; }
.brand__sub { font-size: .46rem; letter-spacing: .12em; }
.icon-btn { width: 40px; height: 40px; }
.icon-btn--search { display: none; }
.header-actions .btn--sm { --h: 44px; padding: 0 14px; }
}
/* ── Header panels: mega menus + search (non-modal, float under the bar) ── */
.header-panel { pointer-events: auto; position: relative; max-width: calc(var(--page-max) + 24px); margin: 12px auto 0; border-radius: var(--r-md); max-height: calc(100vh - 110px); overflow-y: auto; overscroll-behavior: contain;
/* nested under the header's backdrop-filter, so its own blur cannot sample the page: near-opaque tint */
background: linear-gradient(145deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .015) 45%), #0A0C1A;
border: 1px solid var(--glass-line); box-shadow: var(--e-3), 0 30px 80px -20px rgba(0, 0, 0, .9); }
.header-panel__inner { padding: 28px 30px 30px; }
.mega { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: 28px; }
.mega--industries { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 12px; }
.mega__title { font-family: var(--f-mono); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); margin-bottom: 10px; }
.mega__links { display: grid; gap: 2px; }
.mega__links a { padding: 6px 8px; margin-inline: -8px; border-radius: 8px; font-size: .92rem; color: var(--text-2); transition: color var(--t-fast), background var(--t-fast); }
.mega__links a:hover { color: var(--text); background: rgba(255, 255, 255, .07); }
.mega__cta { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; padding: 22px; border-radius: var(--r-md);
background: radial-gradient(90% 80% at 0% 0%, rgba(74, 102, 240, .45), transparent 60%), radial-gradient(80% 80% at 100% 100%, rgba(180, 18, 27, .4), transparent 60%), rgba(6, 8, 18, .8);
border: 1px solid rgba(255, 255, 255, .14); }
.mega__cta-text { font-family: var(--f-display); font-size: 1.15rem; line-height: 1.35; letter-spacing: -.01em; color: var(--text); }
.industry-link { display: grid; gap: 6px; padding: 18px 20px; border-radius: var(--r-md); color: var(--text); }
.industry-link:hover { color: var(--text); }
.industry-link__name { font-family: var(--f-display); font-size: 1.08rem; font-weight: 500; letter-spacing: -.01em; }
.industry-link__desc { font-size: .88rem; line-height: 1.45; color: var(--text-2); }
.search__label { display: block; font-family: var(--f-mono); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); margin-bottom: 10px; }
.search__row { display: flex; align-items: center; gap: 12px; padding: 0 16px; border-radius: 14px; background: rgba(255, 255, 255, .06); border: 1px solid var(--glass-line); color: var(--text-2); transition: border-color var(--t-fast); }
.search__row:focus-within { border-color: #B9C6FF; box-shadow: 0 0 0 4px rgba(74, 102, 240, .2); }
.search__input { flex: 1; min-width: 0; width: 100%; height: 52px; border: 0; outline: 0; background: none; color: var(--text); font: 500 1.05rem var(--f-sans); -webkit-appearance: none; appearance: none; }
.search__input::placeholder { color: var(--text-3); }
.search__input:focus-visible { outline: none; }
.search__results { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 24px; margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .08); }
.search__group-title { font-family: var(--f-mono); font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); margin-bottom: 10px; }
.search__list { display: flex; flex-direction: column; gap: 4px; list-style: none; }
.search__link { display: block; padding: 8px 0 10px; color: var(--text); font-size: .95rem; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.search__link:hover { color: var(--yinmn-ink); }
.search__empty { margin-top: 20px; padding: 24px; border-radius: var(--r-md); background: linear-gradient(145deg, rgba(74, 102, 240, .16), rgba(255, 255, 255, .02)); border: 1px solid rgba(169, 184, 255, .4); }
.search__shortcuts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
/* ── Overlays ────────────────────────────────────────────────────── */
body.has-overlay { overflow: hidden; }
.overlay { position: fixed; inset: 0; z-index: var(--z-dialog); background: var(--scrim); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); display: flex; }
.overlay--drawer { justify-content: flex-end; padding: 10px; }
.overlay--dialog { align-items: flex-start; justify-content: center; padding: clamp(16px, 6vh, 90px) 16px; overflow-y: auto; }
.overlay--center { align-items: center; justify-content: center; padding: 16px; }
.overlay:not([hidden]) > * { animation: pop-in .5s var(--ease) both; }
@keyframes pop-in { from { opacity: 0; transform: translateY(14px) scale(.985); } }
.close-btn { width: 42px; height: 42px; border-radius: 50%; display: inline-grid; place-items: center; flex: none; cursor: pointer; color: var(--text);
background: rgba(255, 255, 255, .06); border: 1px solid var(--glass-line); transition: background var(--t-fast), border-color var(--t-fast); }
.close-btn:hover { background: rgba(255, 255, 255, .14); border-color: var(--glass-line-hi); }
/* Mobile navigation drawer */
.nav-drawer { position: fixed; inset: 0; z-index: var(--z-drawer); padding: 10px; background: rgba(3, 4, 10, .55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); display: flex; flex-direction: column; }
.nav-drawer::before { content: ""; position: absolute; inset: 10px; border-radius: 24px; z-index: -1;
background: radial-gradient(80% 50% at 100% 0%, rgba(74, 102, 240, .3), transparent 60%), radial-gradient(70% 45% at 0% 100%, rgba(180, 18, 27, .22), transparent 60%), rgba(8, 10, 22, .94);
border: 1px solid var(--glass-line); box-shadow: var(--e-3); }
.nav-drawer:not([hidden])::before, .nav-drawer:not([hidden]) > * { animation: pop-in .45s var(--ease) both; }
.nav-drawer__head { flex: 0 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 18px 14px; }
.nav-drawer__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 2px; padding: 4px 18px 24px; }
.nav-drawer__body .search__input { height: 50px; padding: 0 16px; border-radius: 14px; background: rgba(255, 255, 255, .06); border: 1px solid var(--glass-line); }
.nav-drawer__ctas { display: grid; gap: 10px; margin: 8px 0 6px; }
.nav-drawer__group { font-family: var(--f-mono); font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); margin: 22px 0 4px; }
.nav-drawer__link { color: var(--text); padding: 11px 2px; border-bottom: 1px solid rgba(255, 255, 255, .08); font-family: var(--f-display); font-size: 1.35rem; letter-spacing: -.02em; }
.nav-drawer__link:hover { color: var(--yinmn-ink); }
/* Enquiry list drawer */
.enq-panel { width: min(470px, 100%); height: 100%; display: flex; flex-direction: column; overflow: hidden; padding: 22px clamp(18px, 3vw, 26px) 22px; border-radius: 24px;
background: radial-gradient(80% 40% at 100% 0%, rgba(74, 102, 240, .28), transparent 60%), rgba(8, 10, 22, .94); border: 1px solid var(--glass-line); box-shadow: var(--e-3); }
.enq-panel__head { flex: 0 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-bottom: 16px; margin-bottom: 18px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.enq-panel__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.enq-panel__foot { flex: 0 0 auto; display: flex; flex-direction: column; gap: 10px; padding-top: 16px; margin-top: 4px; border-top: 1px solid rgba(255, 255, 255, .08); }
.enq-line { padding: 18px; border-radius: var(--r-md); background: rgba(255, 255, 255, .045); border: 1px solid var(--glass-line); }
.enq-line + .enq-line { margin-top: 10px; }
.enq-line__top { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; margin-bottom: 12px; }
.enq-line__name { font-family: var(--f-display); font-size: 1.1rem; font-weight: 500; line-height: 1.25; }
.enq-line__mid { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.enq-line__qty { display: flex; gap: 10px; }
.enq-line__qty label { flex: 1 1 auto; }
.enq-line__qty label:last-child { flex: 0 0 124px; }
.enq-line__qty span { display: block; font-family: var(--f-mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); margin-bottom: 6px; }
.enq-line .input, .enq-line .select { min-height: 44px; padding: 10px 12px; }
.enq-line .select { padding-right: 34px; }
.small-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: var(--r-pill); cursor: pointer; font-family: var(--f-mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2);
background: rgba(255, 255, 255, .04); border: 1px solid var(--glass-line); transition: color var(--t-fast), border-color var(--t-fast); }
.small-btn:hover { color: var(--text); border-color: var(--glass-line-hi); }
a.small-btn { color: var(--text); }
/* Dialog primitive */
.dialog { position: relative; width: min(580px, 100%); padding: clamp(22px, 3vw, 34px); border-radius: var(--r-lg);
background: radial-gradient(80% 50% at 100% 0%, rgba(74, 102, 240, .22), transparent 60%), rgba(10, 12, 26, .95); border: 1px solid var(--glass-line); box-shadow: var(--e-3); }
.dialog--sm { width: min(470px, 100%); padding: 28px; }
.dialog__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 16px; }
.dialog__title { font-family: var(--f-display); font-size: 1.35rem; font-weight: 500; letter-spacing: -.02em; }
.dialog:focus { outline: none; }
/* ── Breadcrumbs ─────────────────────────────────────────────────── */
.crumbs { padding: 8px var(--gutter) 0; }
.crumbs__nav { max-width: var(--page-max); margin: 0 auto; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center;
font-family: var(--f-mono); font-size: .66rem; line-height: 1.8; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.crumbs__nav a { color: var(--text-3); }
.crumbs__nav a:hover { color: var(--text); }
.crumbs__nav [aria-current="page"] { color: var(--text); }
/* ── Footer ──────────────────────────────────────────────────────── */
.site-footer { position: relative; overflow: hidden; padding: clamp(72px, 9vw, 120px) var(--gutter) 32px; background: linear-gradient(180deg, transparent, var(--ink-950) 30%); color: var(--text-2); }
.site-footer__grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr)); gap: 40px 28px; }
.site-footer__brand { display: grid; gap: 20px; align-content: start; max-width: 440px; }
.site-footer__intro { font-size: .95rem; line-height: 1.6; color: var(--text-2); }
.site-footer__title { font-family: var(--f-mono); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); margin-bottom: 14px; }
.site-footer__links { display: grid; gap: 9px; list-style: none; }
.site-footer__links a { color: var(--text-2); font-size: .93rem; }
.site-footer__links a:hover { color: var(--text); }
.site-footer__id { margin-top: clamp(48px, 6vw, 72px); padding: 24px 26px; border-radius: var(--r-md); background: var(--glass-fill); border: 1px solid var(--glass-line); box-shadow: var(--e-2); }
.idgrid { display: grid; grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)) 2fr; gap: 18px 24px; }
.idgrid div { display: grid; gap: 4px; }
.idgrid dt { font-family: var(--f-mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.idgrid dd { font-family: var(--f-mono); font-size: .84rem; color: var(--text); letter-spacing: .02em; }
.site-footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; margin-top: 28px; font-family: var(--f-mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.site-footer__word { position: absolute; left: 50%; bottom: -.2em; transform: translateX(-50%); z-index: -1; font-family: var(--f-display); font-weight: 600; font-size: 28vw; letter-spacing: -.02em; line-height: 1;
background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, 0) 70%); -webkit-background-clip: text; background-clip: text; color: transparent; pointer-events: none; user-select: none; }
@media (max-width: 1180px) {
.site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.site-footer__brand { grid-column: 1 / -1; }
.idgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.idgrid__wide { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
.idgrid div:first-child { grid-column: 1 / -1; }
.site-footer__legal { flex-direction: column; }
}
/* ── 55-motion.css ── */
/* Motion states. Content is fully visible until motion.js confirms it will animate (html.motion-ready). */
.motion-ready [data-reveal] { opacity: 0; }
.split-word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.split-word > span { display: inline-block; }
.is-offscreen, .is-offscreen * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
[data-tilt] { transform: none !important; }
.iri-text { background-position: 30% 0; }
}
/* ── 60-articles.css ── */
/* Group F — flagship knowledge articles (rare automotive colours, rare blues) and the company pages
(about, company details, contact, editorial policy). Liquid Glass. */
/* ════════════════════════════ ARTICLES ════════════════════════════ */
/* ── Article header: glass slab over the paint + liquid pigment drops ── */
@media (min-width: 1000px) { .art-hero { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); } }
.art-hero__title { font-family: var(--f-display); font-weight: 500; font-size: clamp(2rem, 1.15rem + 2.5vw, 3.45rem); line-height: 1.04; letter-spacing: -.035em; text-wrap: balance; color: var(--text); margin: 0 0 clamp(20px, 2.4vw, 30px); max-width: 24ch; }
.art-lede { position: relative; padding-left: 22px; max-width: 68ch; }
.art-lede::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, #8EEBFF, #A89CFF 35%, #FF9ED8 70%, #FFD89A); box-shadow: 0 0 14px rgba(168, 156, 255, .6); }
.art-lede p { font-size: var(--t-lead); line-height: 1.65; color: var(--text-2); text-wrap: pretty; }
/* Stage of liquid pigment drops (decorative; colours are content data via --sw / --glow) */
.art-stage { min-height: 340px; overflow: hidden; padding: 0;
background: radial-gradient(70% 60% at 50% 55%, rgba(120, 140, 255, .12), transparent 70%), var(--glass-fill); }
.art-stage::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(180deg, rgba(255, 255, 255, .06), transparent 30%); }
.art-orb { position: absolute; aspect-ratio: 1; background: var(--sw); overflow: hidden; border-radius: 50% 50% 50% 50% / 56% 56% 44% 44%;
box-shadow: inset 0 -18px 34px rgba(0, 0, 0, .5), inset 0 12px 24px rgba(255, 255, 255, .28), 0 0 0 1px rgba(255, 255, 255, .08), 0 30px 70px -16px var(--glow, rgba(120, 140, 255, .5));
animation: art-blob 11s var(--ease-io) infinite alternate, art-float 9s var(--ease-io) infinite alternate; }
.art-orb::before { content: ""; position: absolute; inset: -30%; animation: swirl 22s linear infinite; mix-blend-mode: soft-light; filter: blur(14px);
background: conic-gradient(from 0deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .45), rgba(0, 0, 0, .3), rgba(255, 255, 255, .25), rgba(0, 0, 0, .3), rgba(255, 255, 255, 0)); }
.art-orb::after { content: ""; position: absolute; left: 18%; top: 11%; width: 38%; height: 22%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .75), transparent); filter: blur(3px); }
.art-stage--4 .art-orb:nth-child(1) { width: 46%; left: 7%; top: 9%; z-index: 2; }
.art-stage--4 .art-orb:nth-child(2) { width: 32%; right: 9%; top: 7%; animation-delay: -3s, -2s; }
.art-stage--4 .art-orb:nth-child(3) { width: 40%; right: 12%; bottom: 7%; z-index: 3; animation-delay: -6s, -5s; }
.art-stage--4 .art-orb:nth-child(4) { width: 27%; left: 17%; bottom: 6%; z-index: 1; animation-delay: -8s, -7s; }
.art-stage--3 .art-orb:nth-child(1) { width: 44%; left: 8%; top: 10%; z-index: 2; }
.art-stage--3 .art-orb:nth-child(2) { width: 34%; right: 8%; top: 18%; animation-delay: -4s, -3s; }
.art-stage--3 .art-orb:nth-child(3) { width: 40%; left: 36%; bottom: 6%; z-index: 3; animation-delay: -7s, -6s; }
@keyframes art-blob { 0% { border-radius: 50% 50% 50% 50% / 56% 56% 44% 44%; } 50% { border-radius: 58% 42% 55% 45% / 48% 60% 40% 52%; } 100% { border-radius: 44% 56% 46% 54% / 60% 44% 56% 40%; } }
@keyframes art-float { to { translate: 0 -10px; } }
/* ── Body: sticky glass aside + reading column on ink ────────────── */
.art-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: start;
max-width: calc(var(--page-max) + var(--gutter) * 2); margin: 0 auto; padding: clamp(12px, 2vw, 28px) var(--gutter) var(--section-y); }
@media (min-width: 1080px) {
.art-layout { grid-template-columns: 300px minmax(0, 1fr); }
.art-aside { align-self: stretch; }
.art-aside__sticky { position: sticky; top: 104px; max-height: calc(100vh - 120px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .18) transparent; }
}
.art-aside { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.art-aside__card { display: flex; flex-direction: column; gap: 10px; padding: 24px 22px 22px; border-radius: var(--r-lg); min-width: 0;
background: var(--glass-fill); -webkit-backdrop-filter: blur(var(--blur)) saturate(160%); backdrop-filter: blur(var(--blur)) saturate(160%);
border: 1px solid var(--glass-line); box-shadow: var(--e-2); }
.art-aside__sticky { gap: 18px; }
.art-aside__sticky > .art-aside__label { margin-bottom: -10px; }
.art-aside__label { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-family: var(--f-mono); font-size: .68rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; line-height: 1.5; color: var(--text-3); }
.art-aside__label .ic { color: var(--yinmn-ink); }
.art-aside__label--tight { margin-bottom: 8px; }
.art-facts { display: grid; }
.art-facts > div { display: grid; gap: 2px; padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.art-facts > div:last-child { border-bottom: 0; padding-bottom: 0; }
.art-facts dt { font-family: var(--f-mono); font-size: .62rem; letter-spacing: .14em; color: var(--text-3); }
.art-facts dd { font-size: .95rem; line-height: 1.45; color: var(--text); }
.art-toc { display: grid; gap: 2px; list-style: none; margin: 0 -8px; }
.art-toc a { display: block; padding: 7px 10px; border-radius: 10px; font-size: .92rem; line-height: 1.35; color: var(--text-2); transition: color var(--t-fast), background var(--t-fast); }
.art-toc a:hover { color: var(--text); background: rgba(255, 255, 255, .07); }
.art-editorial { padding: 16px 16px 18px; border-radius: var(--r-sm); background: linear-gradient(145deg, rgba(180, 18, 27, .14), rgba(255, 255, 255, .02)); border: 1px solid rgba(255, 138, 144, .24); }
.art-state { font-family: var(--f-mono); font-size: .66rem; line-height: 1.85; letter-spacing: .08em; color: var(--text-2); margin-bottom: 16px; }
.art-pub .status { white-space: normal; line-height: 1.5; }
.art-aside .correction { margin-top: 0; min-height: 48px; }
.art-body { min-width: 0; }
.art-sec { scroll-margin-top: 120px; }
.art-sec + .art-sec { margin-top: clamp(56px, 6vw, 88px); }
.art-sec > :last-child { margin-bottom: 0; }
.art-h2 { font-family: var(--f-display); font-weight: 500; font-size: clamp(1.6rem, 1.15rem + 1.3vw, 2.35rem); line-height: 1.1; letter-spacing: -.03em; color: var(--text); margin-bottom: 20px; max-width: 34ch; text-wrap: balance; }
.art-p { font-size: 1.08rem; line-height: 1.78; color: var(--text-2); max-width: 70ch; margin-bottom: 1.1em; text-wrap: pretty; }
.art-p strong { color: var(--text); font-weight: 600; }
.art-p a, .art-item a { color: var(--yinmn-ink); background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; }
.art-p a:hover, .art-item a:hover { color: var(--text); }
.art-note { font-family: var(--f-mono); font-size: .68rem; line-height: 1.85; letter-spacing: .08em; color: var(--text-3); max-width: 80ch; }
.art-note--sm { margin-top: 18px; }
.art-note--callout { display: flex; gap: 12px; align-items: flex-start; margin-top: 22px; padding: 16px 18px; border-radius: var(--r-md); color: var(--text-2);
background: linear-gradient(145deg, rgba(74, 102, 240, .14), rgba(255, 255, 255, .02)), rgba(10, 12, 24, .55); border: 1px solid rgba(169, 184, 255, .3); }
.art-note--callout .ic { color: var(--yinmn-ink); margin-top: 2px; }
/* Explainer items as glass cards (technologies / decision rules) */
.art-items { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 14px; list-style: none; margin: 26px 0 20px; }
.art-item { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 24px 24px 26px; border-radius: var(--r-md);
background: var(--glass-fill); border: 1px solid var(--glass-line); box-shadow: var(--e-1); transition: border-color var(--t), box-shadow var(--t); }
.art-item:hover { border-color: var(--glass-line-hi); box-shadow: var(--e-2); }
.art-items--sm { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }
.art-item__drop { width: 44px; height: 44px; margin-bottom: 10px; background: var(--sw); position: relative; overflow: hidden; border-radius: 50% 50% 50% 50% / 56% 56% 44% 44%;
box-shadow: inset 0 -7px 12px rgba(0, 0, 0, .45), inset 0 5px 9px rgba(255, 255, 255, .32), 0 10px 26px -4px var(--glow); animation: art-blob 9s var(--ease-io) infinite alternate; }
.art-item__drop::after { content: ""; position: absolute; left: 18%; top: 12%; width: 36%; height: 22%; border-radius: 50%; background: rgba(255, 255, 255, .7); filter: blur(2px); }
.art-item__drop--matte { box-shadow: inset 0 -7px 12px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .1), 0 10px 26px -4px var(--glow); }
.art-item__drop--matte::after { background: rgba(255, 255, 255, .1); filter: blur(4px); }
.art-item__icon { width: 44px; height: 44px; margin-bottom: 10px; border-radius: 14px; display: grid; place-items: center; color: var(--text);
background: linear-gradient(135deg, rgba(74, 102, 240, .45), rgba(28, 52, 166, .25)); border: 1px solid var(--glass-line); box-shadow: 0 1px 0 rgba(255, 255, 255, .2) inset, 0 10px 24px -8px rgba(74, 102, 240, .6); }
.art-item__title { font-family: var(--f-display); font-size: 1.2rem; font-weight: 500; letter-spacing: -.015em; line-height: 1.25; color: var(--text); }
.art-item__text { font-size: .97rem; line-height: 1.62; color: var(--text-2); }
/* Caveat callout */
.art-caveat { margin: 0 0 22px; padding: 18px 20px; border-radius: var(--r-md); max-width: 80ch;
background: linear-gradient(145deg, rgba(180, 18, 27, .14), rgba(255, 255, 255, .02)), rgba(10, 12, 24, .55); border: 1px solid rgba(255, 138, 144, .3); }
.art-caveat__title { display: flex; align-items: center; gap: 8px; font-family: var(--f-mono); font-size: .66rem; letter-spacing: .14em; line-height: 1.5; color: var(--candy-ink); margin-bottom: 8px; }
.art-caveat p:not(.art-caveat__title) { font-size: .98rem; line-height: 1.62; color: var(--text-2); }
/* Image brief (photograph still to be commissioned) */
.art-brief { margin: 26px 0 0; padding: 20px 22px; border-radius: var(--r-md); border: 1px dashed rgba(255, 255, 255, .24);
background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 10px), rgba(255, 255, 255, .025); }
.art-brief__title { display: flex; align-items: center; gap: 8px; font-family: var(--f-mono); font-size: .66rem; letter-spacing: .16em; color: var(--yinmn-ink); margin-bottom: 10px; line-height: 1.5; }
.art-brief__spec { font-family: var(--f-mono); font-size: .72rem; line-height: 1.95; letter-spacing: .04em; color: var(--text-2); overflow-wrap: anywhere; }
/* ── Diagrams ────────────────────────────────────────────────────── */
.art-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 14px; margin: 26px 0 0; }
.art-fig { position: relative; min-width: 0; padding: 24px 22px 22px; border-radius: var(--r-lg);
background: radial-gradient(90% 60% at 50% 0%, rgba(120, 140, 255, .1), transparent 70%), var(--glass-fill); border: 1px solid var(--glass-line); box-shadow: var(--e-2); }
.art-sec > .art-fig { margin-top: 26px; }
.art-fig__cap { display: flex; align-items: flex-start; gap: 8px; font-family: var(--f-mono); font-size: .64rem; letter-spacing: .14em; line-height: 1.6; color: var(--text-3); margin-bottom: 20px; }
.art-fig__cap .ic { color: var(--yinmn-ink); flex: none; }
.art-fig__note { font-size: .92rem; line-height: 1.55; color: var(--text-2); margin-top: 18px; }
/* Layer stack: luminous glass layers in each pigment colour (--sw), glowing in --glow */
.stack-diagram { display: flex; flex-direction: column; gap: 7px; list-style: none; padding: 14px; border-radius: var(--r-md);
background: radial-gradient(80% 70% at 50% 40%, rgba(255, 255, 255, .04), transparent 70%), rgba(3, 4, 10, .45); border: 1px solid rgba(255, 255, 255, .06); transition: gap .6s var(--ease); }
.art-fig:hover .stack-diagram { gap: 11px; }
.stack-diagram li { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; min-height: var(--h, 44px); padding: 6px 10px; border-radius: 12px; background: var(--sw);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -10px 18px rgba(0, 0, 0, .3), 0 0 0 1px rgba(255, 255, 255, .1), 0 10px 26px -8px var(--glow, transparent);
transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.stack-diagram li::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, 0) 55%); }
.stack-diagram li:hover { transform: translateX(6px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -10px 18px rgba(0, 0, 0, .3), 0 0 0 1px rgba(255, 255, 255, .2), 0 14px 34px -6px var(--glow, transparent); }
.stack-diagram li > span { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: var(--r-pill); font-family: var(--f-mono); font-size: .62rem; letter-spacing: .12em; line-height: 1.4; color: var(--text);
background: rgba(6, 8, 18, .7); border: 1px solid rgba(255, 255, 255, .16); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.stack-diagram .is-clear { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 0 0 1px rgba(255, 255, 255, .3), 0 10px 26px -8px var(--glow, transparent); }
.stack-diagram .is-clear::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--iri); opacity: .8; }
/* Gloss vs matte schematic — strokes recoloured for ink, lit with a soft glow */
.art-rays { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 14px; }
.art-rays__cell { padding: 20px 18px 16px; border-radius: var(--r-md); background: radial-gradient(70% 90% at 45% 100%, rgba(169, 184, 255, .12), transparent 70%), rgba(3, 4, 10, .45); border: 1px solid rgba(255, 255, 255, .06); }
.art-rays svg { width: 100%; height: 110px; display: block; overflow: visible; filter: drop-shadow(0 0 5px rgba(169, 184, 255, .45)); }
.art-rays__label { font-family: var(--f-mono); font-size: .64rem; letter-spacing: .14em; line-height: 1.5; color: var(--text-2); margin-top: 14px; }
/* ── Comparison tables: glass, pigment swatch dots ───────────────── */
.art-table-wrap { margin: 24px 0 20px; background: var(--glass-fill); border: 1px solid var(--glass-line); border-radius: var(--r-md); box-shadow: var(--e-2); }
.art-table { width: 100%; min-width: var(--minw, 680px); border-collapse: separate; border-spacing: 0; font-size: .95rem; line-height: 1.5; }
.art-table thead th { text-align: left; vertical-align: bottom; padding: 15px 16px; font-family: var(--f-mono); font-size: .62rem; font-weight: 500; letter-spacing: .14em; color: var(--text-3); background: rgba(255, 255, 255, .045); border-bottom: 1px solid rgba(255, 255, 255, .1); }
.art-table td, .art-table th[scope="row"] { padding: 15px 16px; vertical-align: top; border-top: 1px solid rgba(255, 255, 255, .07); }
.art-table tbody tr:first-child > * { border-top: 0; }
.art-table td { color: var(--text-2); }
.art-table th[scope="row"] { text-align: left; font-family: var(--f-sans); font-weight: 600; color: var(--text); white-space: nowrap; }
.art-table tbody tr { transition: background var(--t-fast); }
.art-table tbody tr:hover { background: rgba(255, 255, 255, .035); }
.art-table--sm { font-size: .9rem; }
.art-table--sm td, .art-table--sm th[scope="row"] { padding: 14px 14px; }
.art-table .status { white-space: nowrap; }
.art-dot { display: inline-block; width: 13px; height: 13px; margin-right: 10px; vertical-align: -1px; border-radius: 50%; background: var(--sw);
box-shadow: inset 0 1px 1px rgba(255, 255, 255, .55), 0 0 0 1px rgba(255, 255, 255, .12), 0 0 12px var(--glow, transparent); }
/* Related links */
.art-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap: 12px; margin: 26px 0 0; list-style: none; }
.art-links a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 58px; height: 100%; padding: 14px 18px; border-radius: var(--r-md); font-size: .97rem; line-height: 1.35; color: var(--text);
background: var(--glass-fill); border: 1px solid var(--glass-line); box-shadow: var(--e-1); transition: border-color var(--t), box-shadow var(--t), transform var(--t) var(--ease); }
.art-links a .ic { color: var(--text-3); transition: transform var(--t) var(--ease), color var(--t); }
.art-links a:hover { color: var(--text); border-color: var(--glass-line-hi); box-shadow: var(--e-2); transform: translateY(-2px); }
.art-links a:hover .ic { color: var(--text); transform: translate(2px, -2px); }
/* References */
.art-refs { display: grid; gap: 8px; list-style: none; }
.art-refs li { padding: 14px 18px; border-radius: var(--r-sm); background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .08); font-family: var(--f-mono); font-size: .72rem; line-height: 1.85; letter-spacing: .04em; color: var(--text-2); scroll-margin-top: 120px; overflow-wrap: anywhere; }
.art-refs li:target { border-color: rgba(169, 184, 255, .5); background: rgba(74, 102, 240, .12); }
.art-refs__pending { color: var(--candy-ink); }
/* Closing CTA reuses the homepage .lg-cta panel */
.lg-cta.art-cta { margin-top: calc(var(--section-y) * -.4); }
.art-cta .lg-cta__title { max-width: 20ch; }
/* ════════════════════════════ COMPANY PAGES ═══════════════════════ */
.co-hero .hero__main { padding: clamp(26px, 4vw, 56px); }
.co-title { margin: 0 0 clamp(18px, 2vw, 24px); max-width: 20ch; }
.co-lead { max-width: 64ch; }
.co-body { padding-top: clamp(12px, 2vw, 28px); }
.co-split { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(20px, 3.5vw, 56px); align-items: start; }
.co-split--wide { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(16px, 2vw, 28px); }
.co-main, .co-side { display: grid; gap: 16px; min-width: 0; }
@media (min-width: 1000px) { .co-side--sticky { position: sticky; top: 104px; } }
@media (max-width: 999px) { .co-split, .co-split--wide { grid-template-columns: minmax(0, 1fr); } }
/* About: prose on ink */
.co-prose { padding-top: 8px; }
.co-text { font-size: 1.1rem; line-height: 1.78; color: var(--text-2); max-width: 62ch; margin-bottom: 1.2em; text-wrap: pretty; }
.co-text--pull { position: relative; margin: 34px 0 0; padding: 4px 0 4px 24px; font-family: var(--f-display); font-size: clamp(1.3rem, 1.05rem + .8vw, 1.75rem); line-height: 1.3; letter-spacing: -.02em; color: var(--text); }
.co-text--pull::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, #8EEBFF, #A89CFF 35%, #FF9ED8 70%, #FFD89A); box-shadow: 0 0 14px rgba(168, 156, 255, .6); }
/* Registry card: identity data, mono values, icons */
.co-registry { padding: clamp(22px, 3vw, 34px); border-radius: var(--r-lg);
background: radial-gradient(90% 60% at 100% 0%, rgba(74, 102, 240, .2), transparent 60%), radial-gradient(70% 50% at 0% 100%, rgba(180, 18, 27, .1), transparent 60%), var(--glass-fill); }
.co-registry__head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.co-registry__seal { width: 44px; height: 44px; flex: none; border-radius: 50%; display: grid; place-items: center; color: #070913; background: var(--metal); box-shadow: 0 1px 0 #fff inset, 0 8px 22px -8px rgba(200, 210, 255, .6); }
.co-registry__link { margin-top: 20px; }
.co-label { font-family: var(--f-mono); font-size: .68rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; line-height: 1.5; color: var(--text-3); margin: 0; }
.co-ids { display: grid; }
.co-ids > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.co-ids > div:last-child { border-bottom: 0; padding-bottom: 0; }
.co-ids dt { display: flex; align-items: center; gap: 9px; flex: none; font-family: var(--f-mono); font-size: .64rem; letter-spacing: .14em; line-height: 1.5; color: var(--text-3); }
.co-ids dt .ic { color: var(--yinmn-ink); opacity: .85; }
.co-ids dd { font-family: var(--f-mono); font-size: .84rem; line-height: 1.55; letter-spacing: .02em; color: var(--text); text-align: right; overflow-wrap: anywhere; min-width: 0; }
.co-ids--lg dd { font-size: .88rem; }
.co-ids .is-error { color: var(--candy-ink); font-size: .74rem; letter-spacing: .08em; }
.co-pending { display: inline-flex; padding: 3px 11px; border-radius: var(--r-pill); font-family: var(--f-sans); font-size: .84rem; letter-spacing: 0; color: var(--text-2); background: rgba(255, 255, 255, .05); border: 1px solid var(--glass-line); }
.co-registry .art-caveat { margin-bottom: 14px; }
.co-card { padding: clamp(22px, 3vw, 32px); border-radius: var(--r-lg); }
.co-muted-text { color: var(--text-2); max-width: 58ch; margin-bottom: 10px; }
/* "Not claimed" list */
.co-notclaimed { padding: 24px 26px; border-radius: var(--r-lg); background: linear-gradient(145deg, rgba(180, 18, 27, .12), rgba(255, 255, 255, .02)), rgba(10, 12, 24, .55); }
.co-notclaimed .co-label { margin-bottom: 14px; }
.co-list { display: grid; gap: 10px; list-style: none; font-family: var(--f-mono); font-size: .7rem; letter-spacing: .1em; line-height: 1.5; color: var(--text-2); }
.co-list li { display: flex; align-items: flex-start; gap: 10px; }
.co-list .ic { flex: none; margin-top: 2px; width: 16px; height: 16px; padding: 2px; border-radius: 50%; color: var(--candy-ink); background: rgba(240, 74, 80, .14); border: 1px solid rgba(255, 138, 144, .3); }
/* IS / IS NOT boxes and evidence-state examples */
.co-boxes { display: grid; gap: 10px; }
.co-box { padding: 18px 20px; border-radius: var(--r-md); background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .09); }
.co-box--is { background: linear-gradient(145deg, rgba(157, 255, 208, .07), rgba(255, 255, 255, .01)); border-color: rgba(157, 255, 208, .22); }
.co-box--isnot { background: linear-gradient(145deg, rgba(180, 18, 27, .12), rgba(255, 255, 255, .01)); border-color: rgba(255, 138, 144, .26); }
.co-box__k { display: flex; align-items: center; gap: 8px; font-family: var(--f-mono); font-size: .68rem; letter-spacing: .16em; line-height: 1.5; color: #9DFFD0; margin-bottom: 8px; }
.co-box__k--error { color: var(--candy-ink); }
.co-box__v { font-size: .98rem; line-height: 1.62; color: var(--text-2); }
.co-box--card { background: var(--glass-fill); border-color: var(--glass-line); box-shadow: var(--e-1); }
.co-boxes--states { margin-top: 24px; }
.co-boxes--states .co-box { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 10px 22px; align-items: center; }
.co-boxes--states .co-box__k { margin: 0; }
.co-boxes--states .co-box__v { color: var(--text); }
.co-state { display: inline-flex; align-items: center; gap: 8px; padding: 5px 11px 5px 10px; border-radius: var(--r-pill); font-family: var(--f-mono); font-size: .64rem; letter-spacing: .12em; color: var(--text); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); }
.co-state::before { content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none; }
.co-state--verified::before { background: #9DFFD0; box-shadow: 0 0 10px rgba(157, 255, 208, .8); }
.co-state--attributed::before { background: var(--yinmn-hi); box-shadow: 0 0 10px rgba(74, 102, 240, .9); }
.co-state--conditional::before { background: var(--gold-ink); box-shadow: 0 0 10px rgba(255, 210, 122, .8); }
@media (max-width: 640px) { .co-boxes--states .co-box { grid-template-columns: 1fr; } }
/* Engagement steps: a glowing process line */
.co-steps { position: relative; display: grid; gap: 6px; list-style: none; }
.co-steps::before { content: ""; position: absolute; left: 19px; top: 20px; bottom: 20px; width: 2px; border-radius: 2px; background: var(--iri); opacity: .75; box-shadow: 0 0 12px rgba(168, 156, 255, .5); }
.co-steps li { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px; align-items: center; min-height: 48px; }
.co-steps__n { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-family: var(--f-mono); font-size: .7rem; color: var(--text);
background: radial-gradient(circle at 35% 30%, #2A2F48, #0B0E1C); border: 1px solid rgba(255, 255, 255, .2); box-shadow: 0 0 0 5px rgba(10, 12, 26, .9), 0 0 18px rgba(140, 160, 255, .3); }
.co-steps li:first-child .co-steps__n, .co-steps li:last-child .co-steps__n { background: radial-gradient(circle at 35% 30%, #5A74FF, #1C34A6); box-shadow: 0 0 0 5px rgba(10, 12, 26, .9), 0 0 24px rgba(90, 116, 255, .8); }
.co-steps__t { font-family: var(--f-mono); font-size: .7rem; letter-spacing: .1em; line-height: 1.5; color: var(--text-2); }
.co-actions { display: grid; gap: 10px; }
.co-actions .btn { --h: 54px; }
.co-actions--ruled { margin-top: 6px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .08); }
/* ── Contact ─────────────────────────────────────────────────────── */
.co-routes-hero .hero__main { padding: clamp(22px, 3vw, 40px); }
.co-routes-hero .eyebrow { margin-bottom: 22px; }
.co-routes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 12px; list-style: none; }
.co-routes__cell { display: flex; }
.co-route { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 8px; width: 100%; padding: 20px 20px 22px; border-radius: var(--r-md); text-align: left; font: inherit; line-height: 1.4; color: var(--text); cursor: pointer;
background: linear-gradient(145deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02)), rgba(8, 10, 22, .45); border: 1px solid var(--glass-line); box-shadow: var(--e-1); }
a.co-route:hover, button.co-route:hover { color: var(--text); border-color: var(--glass-line-hi); box-shadow: var(--e-3); }
.co-route__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.co-route__icon { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; color: var(--text); background: rgba(255, 255, 255, .07); border: 1px solid var(--glass-line); box-shadow: 0 1px 0 rgba(255, 255, 255, .2) inset; }
.co-routes__cell:first-child .co-route__icon { background: linear-gradient(135deg, rgba(74, 102, 240, .5), rgba(180, 18, 27, .45)); }
.co-route__n { font-family: var(--f-mono); font-size: .64rem; letter-spacing: .16em; color: var(--text-3); }
.co-route__t { font-family: var(--f-display); font-size: 1.15rem; font-weight: 500; letter-spacing: -.015em; line-height: 1.25; }
.co-route__d { flex: 1; font-size: .92rem; line-height: 1.5; color: var(--text-2); }
.co-route__a { display: inline-flex; align-items: center; gap: 7px; margin-top: 8px; font-family: var(--f-mono); font-size: .64rem; letter-spacing: .14em; line-height: 1.5; color: var(--yinmn-ink); }
.co-route:hover .co-route__a .ic { transform: translateX(3px); }
.co-route__a .ic { transition: transform var(--t) var(--ease); }
.co-route--static { cursor: default; background: rgba(255, 255, 255, .02); border-style: dashed; border-color: rgba(255, 255, 255, .22); box-shadow: none; }
.co-route--static .co-route__a { color: var(--text-3); }
.co-ref { font-family: var(--f-mono); font-size: .8rem; color: var(--text); overflow-wrap: anywhere; }
.co-form-slab { padding: clamp(22px, 3.5vw, 40px); border-radius: var(--r-xl);
background: radial-gradient(80% 60% at 0% 0%, rgba(74, 102, 240, .16), transparent 60%), linear-gradient(145deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .018) 45%), rgba(10, 12, 24, .6); box-shadow: var(--e-3); }
.co-req { color: var(--candy-ink); }
.co-form .form-actions { padding-top: 4px; }
.co-info { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.co-info__icon { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--yinmn-ink); background: rgba(74, 102, 240, .12); border: 1px solid rgba(169, 184, 255, .3); }
.co-info .co-label { margin-bottom: 8px; padding-top: 2px; }
.co-addr { font-family: var(--f-mono); font-size: .84rem; line-height: 1.9; letter-spacing: .02em; font-style: normal; color: var(--text); }
.co-registry > .co-actions--ruled { border-top: 0; padding-top: 0; margin-top: 0; }
.co-registry > .co-info:last-of-type { border-bottom: 0; margin-bottom: 8px; }
/* ── Editorial policy ────────────────────────────────────────────── */
.co-policy__col { max-width: 860px; margin: 0 auto; }
.co-correct { margin-top: 26px; padding: clamp(22px, 3vw, 32px); border-radius: var(--r-lg);
background: radial-gradient(90% 70% at 0% 0%, rgba(74, 102, 240, .2), transparent 60%), radial-gradient(70% 60% at 100% 100%, rgba(180, 18, 27, .14), transparent 60%), var(--glass-fill); }
.co-btns { --gap: 10px; }
.co-owner { display: flex; align-items: flex-start; gap: 12px; margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .08); font-family: var(--f-mono); font-size: .66rem; line-height: 1.9; letter-spacing: .1em; color: var(--text-3); }
.co-owner .ic { color: var(--gold-ink); flex: none; margin-top: 3px; }
@media (min-width: 641px) and (max-width: 1079px) {
.art-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
.art-facts > div:nth-last-child(2) { border-bottom: 0; padding-bottom: 0; }
.art-toc { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
}
/* ── Small screens ───────────────────────────────────────────────── */
@media (max-width: 999px) {
.art-stage { min-height: 260px; }
}
@media (max-width: 640px) {
.art-stage { min-height: 210px; }
.art-lede { padding-left: 16px; }
.art-aside__card { padding: 22px 18px 18px; }
.art-item { padding: 20px 20px 22px; }
.art-fig { padding: 20px 16px 18px; }
.stack-diagram { padding: 10px; }
.art-table thead th, .art-table td, .art-table th[scope="row"] { padding: 13px 12px; }
.co-ids > div { flex-direction: column; align-items: flex-start; gap: 4px; }
.co-ids dd { text-align: left; }
.co-btns .btn { width: 100%; }
.co-owner br { display: none; }
.co-form .btn--lg { width: 100%; }
.co-route { padding: 18px; }
}
@media (prefers-reduced-motion: reduce) { .art-orb { translate: none; } }
/* ── 60-catalogue.css ── */
/* Group A — material index (/materials/) and category hubs — Liquid Glass.
Hubs: a glass hero slab beside a "pigment pool" (a liquid orb + drops of the category's materials),
cards that glow in their own pigment, glass tables with liquid drops, closing lg-cta panels.
Index: a hero palette of every material (dimmed by the filter), a floating glass control panel
(sticky on wide screens) and pigment-glowing material cards. */
/* ── Hub hero ────────────────────────────────────────────────────── */
@media (min-width: 1000px) {
.hero--cat { grid-template-columns: minmax(0, 1.55fr) minmax(320px, 1fr); }
}
.h-cat { font-family: var(--f-display); font-weight: 500; font-size: clamp(2.2rem, 1.15rem + 2.9vw, 4rem); line-height: 1.02; letter-spacing: -.04em; color: var(--text); text-wrap: balance; margin: 4px 0 24px; max-width: 18ch; }
.cat-lead { font-family: var(--f-sans); font-size: var(--t-lead); line-height: 1.6; color: var(--text-2); text-wrap: pretty; }
.cat-ctas { --gap: 12px 14px; margin-top: 30px; }
.cat-disclaimer { display: flex; gap: 12px; align-items: flex-start; max-width: 80ch; padding: 14px 16px; border-radius: var(--r-sm); background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .08); }
.cat-disclaimer .ic { color: var(--yinmn-ink); margin-top: 2px; }
.cat-safety { max-width: 72ch; margin-top: 4px; }
.cat-safety .note__title { display: flex; align-items: center; gap: 8px; }
/* Pigment pool: the category's materials as liquid, glowing drops */
.cat-pool { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; min-height: 440px; overflow: hidden; text-align: center;
background: radial-gradient(90% 70% at 50% 100%, rgba(255, 255, 255, .04), transparent 70%), linear-gradient(160deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .01) 50%), rgba(6, 8, 18, .5); }
.cat-pool::before { content: ""; position: absolute; left: 50%; top: 40%; width: 80%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; z-index: -1; pointer-events: none;
background: radial-gradient(closest-side, var(--glow), transparent); opacity: .55; filter: blur(30px); }
.cat-orb { position: relative; isolation: isolate; flex: none; width: min(66%, 270px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--sw);
box-shadow: inset 0 -30px 60px rgba(0, 0, 0, .55), inset 0 20px 40px rgba(255, 255, 255, .2), 0 40px 100px -28px var(--glow), 0 0 0 1px rgba(255, 255, 255, .1);
animation: blob 14s var(--ease-io) infinite alternate; }
.cat-orb::before { content: ""; position: absolute; inset: -30%; animation: swirl 22s linear infinite; mix-blend-mode: soft-light; filter: blur(24px);
background: conic-gradient(from 0deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .45), rgba(0, 0, 0, .35), rgba(255, 255, 255, .25), rgba(0, 0, 0, .3), rgba(255, 255, 255, 0)); }
.cat-orb::after { content: ""; position: absolute; left: 18%; top: 10%; width: 42%; height: 26%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .7), transparent); filter: blur(6px); }
.cat-orb--shift { background-size: 240% 240%; animation: blob 14s var(--ease-io) infinite alternate, cat-travel 9s var(--ease-io) infinite alternate; }
@keyframes cat-travel { from { background-position: 0% 30%; } to { background-position: 100% 70%; } }
.cat-pool--black .cat-orb { box-shadow: inset 0 -30px 60px rgba(0, 0, 0, .7), inset 0 2px 3px rgba(255, 255, 255, .28), 0 0 0 1px rgba(255, 255, 255, .14), 0 40px 100px -28px rgba(150, 160, 200, .35); }
.cat-pool--black .cat-orb::after { background: radial-gradient(closest-side, rgba(255, 255, 255, .16), transparent); }
.cat-pool__cap { max-width: 100%; padding: 7px 14px; border-radius: var(--r-pill); background: rgba(8, 10, 22, .7); border: 1px solid var(--glass-line); color: var(--text-2); }
.cat-drops { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 14px; list-style: none; }
.cat-drop { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 92px; }
.cat-drop__blob { position: relative; width: 52px; height: 52px; border-radius: 50% 50% 50% 50% / 56% 56% 44% 44%; overflow: hidden; background: var(--sw);
box-shadow: inset 0 -8px 14px rgba(0, 0, 0, .45), inset 0 6px 10px rgba(255, 255, 255, .35), 0 10px 30px -4px var(--glow); animation: blob 9s var(--ease-io) infinite alternate; }
.cat-drop:nth-child(2) .cat-drop__blob { animation-delay: -3s; }
.cat-drop:nth-child(3) .cat-drop__blob { animation-delay: -5s; }
.cat-drop:nth-child(4) .cat-drop__blob { animation-delay: -7s; }
.cat-drop__blob::after { content: ""; position: absolute; left: 18%; top: 12%; width: 36%; height: 22%; border-radius: 50%; background: rgba(255, 255, 255, .7); filter: blur(3px); }
.cat-drop__blob--black { box-shadow: inset 0 -8px 14px rgba(0, 0, 0, .6), inset 0 1px 2px rgba(255, 255, 255, .35), 0 0 0 1px rgba(255, 255, 255, .12), 0 10px 30px -4px var(--glow); }
.cat-drop__blob--black::after { background: rgba(255, 255, 255, .14); }
.cat-drop__blob--pearl::after { background: rgba(255, 255, 255, .95); }
.cat-drop__name { font-size: .6rem; line-height: 1.45; color: var(--text-2); }
/* ── Hub material/group cards: glass + a glow in the card's own pigment (--sw on the li) ── */
.cat-grid { --gap: clamp(14px, 1.4vw, 18px); }
.cat-mat { overflow: visible; }
/* Shared `.card > .card` strips the glass from both li.card and its a.card — restore it on the link. */
.cat-mat > a.card { background: var(--glass-fill); border: 1px solid var(--glass-line); box-shadow: var(--e-2); }
.cat-mat > a.card:hover { border-color: var(--glass-line-hi); box-shadow: var(--e-3); }
.cat-mat::after { content: ""; position: absolute; left: 14%; right: 14%; top: 30px; height: 110px; border-radius: 50%; z-index: -1; pointer-events: none;
background: var(--sw); filter: blur(38px) saturate(1.3); opacity: .42; transition: opacity var(--t-slow) var(--ease); }
.cat-mat:hover::after, .cat-mat:focus-within::after { opacity: .75; }
.cat-mat .card__body { padding: 18px 22px 24px; }
.cat-mat .swatch { border-radius: 16px; }
.cat-card__title { font-family: var(--f-display); font-weight: 500; font-size: 1.2rem; line-height: 1.2; letter-spacing: -.015em; color: var(--text); margin-bottom: 8px; }
.cat-mat .text-sm, .cat-mat .text-xs { margin-bottom: 16px; }
.cat-card__status { margin-top: auto; }
/* Section kicker used as a real heading ("TECHNICAL READING FOR THIS CATEGORY") */
.cat-kicker { display: flex; align-items: center; gap: 10px; font-family: var(--f-mono); font-size: .72rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; line-height: 1.5; color: var(--text-2); margin-bottom: 18px; }
.cat-kicker .ic { color: var(--yinmn-ink); }
.cat-kicker--lg { margin-bottom: clamp(22px, 3vw, 32px); }
.cat-kicker--lg::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--yinmn-hi); box-shadow: 0 0 0 3px rgba(74, 102, 240, .22), 0 0 14px 2px rgba(74, 102, 240, .8); }
/* Related reading */
.cat-read { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--min, 240px), 100%), 1fr)); gap: 14px; list-style: none; }
.cat-read .related { position: relative; height: 100%; padding: 22px 52px 24px 22px; }
.cat-read .related__title { line-height: 1.3; margin-bottom: 10px; }
.cat-read .related__meta { margin-top: 0; }
.related__ic { position: absolute; top: 22px; right: 20px; color: var(--text-3); transition: transform var(--t) var(--ease), color var(--t); }
a.related:hover .related__ic { color: var(--text); transform: translate(2px, -2px); }
/* Enquiry-fields panel (automotive) */
.cat-fields { --glass-fill: linear-gradient(145deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02)), rgba(10, 12, 26, .6); }
.auto-fields .kv__v { max-width: 55%; }
/* Glass slab for a short run of prose (rare pigments) */
.cat-slab { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 5vw, 72px); padding: clamp(26px, 4.5vw, 60px); border-radius: var(--r-xl);
--glass-fill: linear-gradient(145deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .02) 45%), rgba(8, 10, 22, .6); }
.cat-slab__head { display: grid; gap: 22px; align-content: start; }
.cat-slab__icon, .cat-spec__icon, .mi-help__icon, .mi-empty__icon { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; flex: none; color: var(--text);
background: linear-gradient(135deg, rgba(74, 102, 240, .45), rgba(180, 18, 27, .35)); border: 1px solid var(--glass-line); box-shadow: 0 1px 0 rgba(255, 255, 255, .2) inset, 0 10px 26px -10px rgba(74, 102, 240, .6); }
.cat-slab__body { max-width: 64ch; }
/* Specification checklist (specialty coatings) */
@media (min-width: 900px) { .cat-sticky { position: sticky; top: calc(var(--header-h) + 24px); } }
.cat-specs { gap: 12px; }
.cat-spec { --pad: 24px 26px; display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 18px; align-items: start; }
/* Glass tables with liquid pigment drops in the first column */
.cat-table-wrap { box-shadow: var(--e-2); }
.cat-table { min-width: var(--tmin, 760px); }
.cat-table th { padding: 16px 18px; color: var(--text-2); background: linear-gradient(90deg, rgba(74, 102, 240, .16), rgba(180, 18, 27, .1)), rgba(255, 255, 255, .03); }
.cat-table td { padding: 16px 18px; vertical-align: middle; }
.cat-mech { display: inline-flex; align-items: center; gap: 12px; }
.cat-mech__drop { position: relative; flex: none; width: 26px; height: 26px; border-radius: 50%; overflow: hidden; background: var(--sw);
box-shadow: inset 0 -4px 8px rgba(0, 0, 0, .45), inset 0 3px 5px rgba(255, 255, 255, .35), 0 0 0 1px rgba(255, 255, 255, .1); }
.cat-mech__drop::after { content: ""; position: absolute; left: 20%; top: 12%; width: 38%; height: 24%; border-radius: 50%; background: rgba(255, 255, 255, .7); filter: blur(2px); }
/* Closing CTA bands (reuse the homepage .lg-cta) tinted per category */
.cat-cta-band--yinmn .lg-cta__paint .b2 { background: radial-gradient(circle, #6E3FA8 0%, rgba(110, 63, 168, .6) 40%, transparent 70%); }
.cat-cta-band--ochre .lg-cta__paint .b1 { background: radial-gradient(circle, #1F2F9E 0%, rgba(31, 47, 158, .6) 40%, transparent 70%); }
.cat-cta-band--ochre .lg-cta__paint .b2 { background: radial-gradient(circle, #B8862E 0%, rgba(154, 110, 39, .6) 40%, transparent 70%); }
.cat-cta-band--violet .lg-cta__paint .b1 { background: radial-gradient(circle, #6E3FA8 0%, rgba(110, 63, 168, .6) 40%, transparent 70%); }
.cat-cta-band .lg-cta__title { font-size: clamp(1.9rem, 1.1rem + 2.4vw, 3.3rem); }
/* ── Rare colour index: family heads with a glowing thin-film rule ── */
.rc-families { display: flex; flex-direction: column; gap: clamp(44px, 6vw, 80px); }
.rc-head { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px 24px; padding-bottom: 18px; margin-bottom: clamp(22px, 3vw, 30px); }
.rc-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, rgba(169, 184, 255, .7), rgba(255, 158, 216, .35) 35%, rgba(255, 255, 255, .06) 75%); box-shadow: 0 0 12px rgba(169, 184, 255, .35); }
.rc-head__note { font-family: var(--f-mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); line-height: 1.5; }
/* ── /materials/ ─────────────────────────────────────────────────── */
/* Hero palette: every material as a liquid drop; filtered-out drops dim (materials.js) */
.mi-palette { display: grid; place-items: center; overflow: hidden;
background: radial-gradient(70% 60% at 50% 50%, rgba(74, 102, 240, .14), transparent 70%), linear-gradient(160deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .01) 50%), rgba(6, 8, 18, .5); }
.mi-palette__drops { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 16px); width: 100%; max-width: 400px; list-style: none; }
.mi-drop { position: relative; aspect-ratio: 1; border-radius: 50% 50% 50% 50% / 56% 56% 44% 44%; overflow: hidden; background: var(--sw);
box-shadow: inset 0 -6px 12px rgba(0, 0, 0, .45), inset 0 5px 8px rgba(255, 255, 255, .3), 0 8px 24px -6px var(--glow);
animation: blob 9s var(--ease-io) infinite alternate; animation-delay: calc(var(--i, 0) * -.73s);
transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease), filter var(--t-slow); }
.mi-drop::after { content: ""; position: absolute; left: 18%; top: 12%; width: 36%; height: 22%; border-radius: 50%; background: rgba(255, 255, 255, .65); filter: blur(2px); }
.mi-drop--black { box-shadow: inset 0 -6px 12px rgba(0, 0, 0, .6), inset 0 1px 2px rgba(255, 255, 255, .35), 0 0 0 1px rgba(255, 255, 255, .12); }
.mi-drop--black::after { background: rgba(255, 255, 255, .14); }
.mi-drop.is-out { opacity: .16; transform: scale(.72); filter: grayscale(.8); }
/* Filter panel + results */
.mi-layout { display: grid; gap: clamp(16px, 2vw, 24px); align-items: start; max-width: calc(var(--page-max) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter) var(--section-y); }
.mi-filters { display: flex; flex-direction: column; gap: 18px; padding: 22px; border-radius: var(--r-lg); min-width: 0;
--glass-fill: linear-gradient(145deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02) 45%), rgba(8, 10, 22, .62); --blur: 26px; box-shadow: var(--e-3); }
.mi-filters__bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; padding-bottom: 16px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.mi-count { font-family: var(--f-mono); font-size: .72rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--text); line-height: 1.5; }
.mi-filters__tools { --gap: 8px; }
.mi-filters__scroll, .mi-filters__groups { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.mi-filter__label { margin-bottom: 10px; }
.mi-filter__opts { --gap: 6px; }
.mi-filters__statuses { padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .08); }
.mi-status { min-height: 36px; padding: 7px 12px 7px 10px; font-size: .6rem; }
.mi-status span { color: var(--text-3); }
.mi-results { min-width: 0; }
.mi-results .grid { --gap: clamp(14px, 1.4vw, 18px); }
@media (min-width: 1100px) {
.mi-layout { grid-template-columns: 340px minmax(0, 1fr); }
.mi-filters { position: sticky; top: calc(var(--header-h) + 8px); max-height: calc(100vh - var(--header-h) - 24px); overflow: hidden; }
.mi-filters__scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin-right: -12px; padding-right: 12px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .22) transparent;
-webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 36px), transparent); padding-bottom: 28px; }
}
@media (min-width: 1100px) and (pointer: fine) {
.mi-filter__opts .option { min-height: 36px; padding: 7px 13px; font-size: .64rem; }
}
/* Material cards: glass, glowing in their own pigment (--glow comes from the build) */
.mi-results .mat-card { box-shadow: var(--e-2), 0 34px 60px -44px var(--glow); transition: box-shadow var(--t-slow) var(--ease), border-color var(--t); }
.mi-results .mat-card::after { content: ""; position: absolute; left: 8%; right: 8%; top: 40px; height: 150px; border-radius: 50%; z-index: -1; pointer-events: none;
background: radial-gradient(closest-side, var(--glow), transparent); filter: blur(22px); opacity: .5; transition: opacity var(--t-slow) var(--ease); }
.mi-results .mat-card:hover { border-color: var(--glass-line-hi); box-shadow: var(--e-3), 0 40px 70px -40px var(--glow); }
.mi-results .mat-card:hover::after { opacity: .85; }
.mi-results .mat-card > .swatch { height: 150px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -20px 40px rgba(0, 0, 0, .35), 0 18px 40px -18px var(--glow); }
.mi-results .mat-card__actions > :last-child { color: var(--yinmn-ink); }
.mi-results .mat-card__actions > * { flex: 1 1 auto; white-space: nowrap; padding: 0 12px; font-size: .8rem; }
.mi-empty { display: grid; justify-items: center; gap: 12px; padding: clamp(32px, 5vw, 56px) clamp(22px, 4vw, 48px); border-radius: var(--r-lg); text-align: center; }
.mi-empty__title { font-family: var(--f-display); font-size: 1.35rem; font-weight: 500; letter-spacing: -.02em; line-height: 1.25; color: var(--text); }
.mi-empty__text { font-size: 1rem; line-height: 1.6; color: var(--text-2); max-width: 52ch; margin-bottom: 8px; }
.mi-help__card { --pad: 28px 26px 30px; gap: 14px; }
.mi-help__card .cat-kicker { margin: 4px 0 0; }
.mi-help__card--cta { justify-content: space-between; gap: 22px; }
.mi-help__card--cta .text { color: var(--text); }
/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 999px) {
.cat-pool { min-height: 0; padding: 34px 22px; }
.cat-orb { width: min(46%, 200px); }
.mi-palette { padding: 26px 22px; }
.mi-palette__drops { grid-template-columns: repeat(12, minmax(0, 1fr)); max-width: 560px; gap: 8px; }
}
@media (max-width: 900px) {
.cat-slab { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
.h-cat { margin-bottom: 18px; }
.cat-ctas { margin-top: 24px; }
.cat-ctas .btn--lg { width: 100%; height: auto; min-height: var(--h); padding-block: 12px; white-space: normal; }
.cat-pool { gap: 16px; padding: 26px 16px 24px; }
.cat-orb { width: 150px; }
.cat-drops { gap: 14px 6px; }
.cat-drop { width: 74px; }
.cat-drop__blob { width: 42px; height: 42px; }
.cat-drop__name { font-size: .56rem; letter-spacing: .1em; }
.cat-spec { grid-template-columns: 1fr; gap: 14px; --pad: 22px 20px; }
.cat-read .related { padding: 20px 48px 20px 20px; }
.mi-palette { display: none; }
.mi-filters { padding: 18px 16px; }
/* Option rows scroll sideways on phones instead of stacking into a very tall panel */
.mi-filter__opts { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding: 2px 16px 4px; scroll-padding-inline: 16px;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 30px), transparent); mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 30px), transparent); }
.mi-filter__opts::-webkit-scrollbar { display: none; }
.mi-filter__opts > * { flex: none; white-space: nowrap; }
.mi-status { min-height: 44px; }
.mi-filters__tools, .mi-filters__tools .btn { width: 100%; }
.mi-filters__tools .btn { --h: 44px; }
}
/* Late tweaks */
.hero--cat .hero__main { display: flex; flex-direction: column; justify-content: center; }
.hero--cat .hero__main > * { flex: none; }
.cat-table .status { white-space: nowrap; }
/* ── 60-editorial.css ── */
/* Group E — colour library, knowledge centre and editorial articles (Liquid Glass). Prefix: .ed-
Signatures: structural blue = thin-film iridescent orb + film text; Vantablack = a light-swallowing void;
hubs = liquid-pigment card grids; buying guide = glowing step line. */
/* ── Heroes: glass slab over the paint ───────────────────────────── */
.ed-hero { --min: 360px; }
@media (max-width: 959px) { .ed-palette { --k: .6%; min-height: 0; height: clamp(180px, 48vw, 360px); } }
.ed-hero--solo { grid-template-columns: minmax(0, 1fr); }
.ed-hero--solo .hero__main { max-width: 1080px; }
@media (min-width: 960px) {
.ed-hero:not(.ed-hero--solo) { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
}
.ed-hero .eyebrow { margin-bottom: 22px; }
.ed-h1 { margin-bottom: 22px; }
.ed-intro { max-width: 64ch; }
.ed-title { font-size: clamp(2.1rem, 1.2rem + 2.7vw, 3.7rem); margin-bottom: 24px; }
.ed-title--guide { max-width: 22ch; }
.ed-lede { max-width: 62ch; }
.ed-standfirst { position: relative; padding-left: 22px; }
.ed-standfirst::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 2px; border-radius: 2px; background: var(--iri); opacity: .75; }
.ed-standfirst p { font-size: var(--t-lead); line-height: 1.6; color: var(--text-2); max-width: 64ch; text-wrap: pretty; }
/* Hub hero aside: a constellation of liquid pigment drops (decorative) */
.ed-palette { --k: 1%; min-height: 260px; overflow: hidden;
background: radial-gradient(60% 60% at 40% 40%, rgba(74, 102, 240, .16), transparent 70%), radial-gradient(50% 50% at 80% 80%, rgba(192, 73, 138, .14), transparent 70%), rgba(6, 8, 18, .55); }
.ed-drop { --s: 30; position: absolute; width: calc(var(--s) * var(--k)); aspect-ratio: 1; border-radius: 50% 50% 50% 50% / 56% 56% 44% 44%; background: var(--sw); overflow: hidden;
box-shadow: inset 0 -10px 18px rgba(0, 0, 0, .45), inset 0 8px 14px rgba(255, 255, 255, .3), 0 16px 44px -6px var(--glow); animation: blob 11s var(--ease-io) infinite alternate; }
.ed-drop::after { content: ""; position: absolute; left: 18%; top: 12%; width: 36%; height: 22%; border-radius: 50%; background: rgba(255, 255, 255, .65); filter: blur(4px); }
.ed-drop--black { box-shadow: inset 0 -10px 18px rgba(0, 0, 0, .7), inset 0 1px 2px rgba(255, 255, 255, .3), 0 0 0 1px rgba(255, 255, 255, .1), 0 16px 44px -6px var(--glow); }
.ed-drop--black::after { background: rgba(255, 255, 255, .12); }
.ed-drop:nth-child(1) { --s: 44; left: 8%; top: 12%; }
.ed-drop:nth-child(2) { --s: 24; left: 62%; top: 8%; animation-delay: -3s; }
.ed-drop:nth-child(3) { --s: 30; left: 60%; top: 42%; animation-delay: -6s; }
.ed-drop:nth-child(4) { --s: 20; left: 16%; top: 68%; animation-delay: -2s; }
.ed-drop:nth-child(5) { --s: 14; left: 42%; top: 76%; animation-delay: -8s; }
.ed-drop:nth-child(6) { --s: 18; left: 84%; top: 76%; animation-delay: -5s; }
.ed-drop:nth-child(7) { --s: 16; left: 44%; top: 48%; animation-delay: -4s; }
/* Article hero stage (orb / void) */
.ed-stage { margin: 0; min-height: 340px; display: grid; place-items: center; overflow: hidden; padding: 24px; }
.ed-stage__caption { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); max-width: calc(100% - 32px); width: max-content; text-align: center; padding: 7px 14px; border-radius: var(--r-pill);
background: rgba(6, 8, 18, .72); border: 1px solid var(--glass-line); color: var(--text-2); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
/* ── Structural blue: thin-film interference orb ─────────────────── */
.ed-film { --film: conic-gradient(from var(--film-a, 0deg) at 50% 50%, rgba(142, 235, 255, .9), rgba(74, 102, 240, .1), rgba(168, 156, 255, .85), rgba(46, 155, 216, .1), rgba(255, 158, 216, .55), rgba(28, 52, 166, .1), rgba(142, 235, 255, .9)); }
.ed-stage.ed-film { background: radial-gradient(42% 42% at 50% 48%, rgba(46, 99, 240, .5), transparent 72%), radial-gradient(55% 55% at 50% 45%, rgba(46, 99, 240, .22), transparent 70%), radial-gradient(40% 40% at 80% 90%, rgba(46, 155, 216, .22), transparent 70%), rgba(4, 7, 22, .72); }
.ed-film__orb { position: relative; display: block; width: min(76%, 330px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--sw); isolation: isolate;
box-shadow: inset 0 -30px 60px rgba(0, 0, 0, .55), inset 0 18px 36px rgba(180, 210, 255, .25), 0 40px 110px -24px rgba(46, 99, 240, .75), 0 0 0 1px rgba(142, 235, 255, .18);
animation: blob 14s var(--ease-io) infinite alternate; -webkit-mask-image: -webkit-radial-gradient(white, black); }
/* the thin film: a rotating interference sheen, strongest at the grazing edge */
.ed-film__orb::before { content: ""; position: absolute; inset: -20%; background: var(--film); mix-blend-mode: color-dodge; opacity: .8; filter: blur(10px);
-webkit-mask-image: radial-gradient(closest-side, transparent 30%, #000 88%); mask-image: radial-gradient(closest-side, transparent 30%, #000 88%); animation: ed-film-spin 16s linear infinite; }
.ed-film__orb::after { content: ""; position: absolute; left: 17%; top: 10%; width: 44%; height: 26%; border-radius: 50%; background: radial-gradient(closest-side, rgba(235, 245, 255, .85), transparent); filter: blur(6px); }
@property --film-a { syntax: ""; inherits: true; initial-value: 0deg; }
@keyframes ed-film-spin { to { transform: rotate(360deg); } }
.ed-film-text { background: linear-gradient(100deg, #8EEBFF 0%, #6F8BFF 22%, #A89CFF 44%, #58C6F0 66%, #C9B8FF 84%, #8EEBFF 100%); background-size: 200% 100%;
-webkit-background-clip: text; background-clip: text; color: transparent; animation: iri-slide 10s linear infinite; }
.ed-film-text * { color: transparent; }
/* ── Vantablack: the light-swallowing void ───────────────────────── */
.ed-hero--void .hero__main { background: linear-gradient(145deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .01) 40%, rgba(255, 255, 255, .02)), rgba(2, 2, 5, .74); }
.ed-void { background: radial-gradient(70% 70% at 50% 50%, rgba(120, 130, 170, .14), transparent 72%), #010103; border-color: rgba(255, 255, 255, .08); }
.ed-void__halo, .ed-void__hole { position: absolute; left: 50%; top: 50%; border-radius: 50%; transform: translate(-50%, -50%); }
.ed-void__halo { width: min(88%, 380px); aspect-ratio: 1;
background: radial-gradient(closest-side, transparent 58%, rgba(170, 180, 220, .22) 70%, rgba(120, 130, 180, .08) 82%, transparent 100%); animation: ed-breathe 7s var(--ease-io) infinite alternate; }
.ed-void__hole { width: min(62%, 270px); aspect-ratio: 1; background: #000;
box-shadow: 0 0 0 1px rgba(255, 255, 255, .035), 0 0 60px 26px #000, inset 0 0 40px #000; }
.ed-void__ray { position: absolute; left: 50%; top: 50%; width: 52%; height: 1.5px; transform-origin: 0 50%; border-radius: 2px;
background: linear-gradient(90deg, transparent 0%, transparent 34%, rgba(169, 184, 255, .0) 36%, rgba(200, 210, 255, .75) 70%, rgba(200, 210, 255, 0) 100%); opacity: .8; animation: ed-ray 5.5s var(--ease-io) infinite; }
.ed-void__ray--1 { transform: rotate(-38deg); }
.ed-void__ray--2 { transform: rotate(-146deg); animation-delay: -1.8s; }
.ed-void__ray--3 { transform: rotate(24deg); animation-delay: -3.6s; }
@keyframes ed-breathe { from { opacity: .55; transform: translate(-50%, -50%) scale(.96); } to { opacity: 1; transform: translate(-50%, -50%) scale(1.04); } }
@keyframes ed-ray { 0% { background-position: 0 0; opacity: 0; } 25% { opacity: .85; } 100% { opacity: 0; } }
.ed-entry--void { position: relative; isolation: isolate; }
.ed-entry--void::before { content: ""; position: absolute; left: 0; right: 0; top: 520px; bottom: -40px; z-index: -1; pointer-events: none;
background: radial-gradient(70% 40% at 60% 10%, rgba(0, 0, 0, .75), transparent 70%), linear-gradient(180deg, transparent, rgba(0, 0, 0, .55) 12%, rgba(0, 0, 0, .55) 88%, transparent); }
/* ── Featured entry: large glass card ────────────────────────────── */
.ed-feature { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 0; padding: 14px; border-radius: var(--r-xl); color: var(--text); margin-bottom: clamp(14px, 1.6vw, 20px); }
.ed-feature:hover { color: var(--text); border-color: var(--glass-line-hi); box-shadow: var(--e-3); }
.ed-feature__field { position: relative; overflow: hidden; min-height: 320px; border-radius: 22px; display: grid; place-items: center;
background: radial-gradient(55% 60% at 50% 50%, rgba(46, 99, 240, .35), transparent 72%), #04071A; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18); }
.ed-feature__field .ed-film__orb { width: min(62%, 250px); }
.ed-feature__field--art { background: radial-gradient(80% 120% at 20% 0%, var(--a1), transparent 70%), radial-gradient(70% 110% at 100% 100%, var(--a2), transparent 70%), #07080F; min-height: 260px; }
.ed-feature__field--art::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 9px); }
.ed-feature__caption { position: absolute; left: 16px; bottom: 16px; z-index: 1; padding: 7px 12px; border-radius: var(--r-pill); background: rgba(6, 8, 18, .72); border: 1px solid var(--glass-line); color: var(--text-2); }
.ed-feature__body { display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: clamp(20px, 3.4vw, 48px); }
.ed-feature__kicker { color: var(--yinmn-ink); }
.ed-feature__more { width: fit-content; margin-top: 6px; background-size: 0 1px; }
.ed-feature:hover .ed-feature__more { color: var(--text); background-size: 100% 1px; }
.ed-feature:hover .ed-feature__more .ic { transform: translateX(3px); }
.ed-feature__more .ic { transition: transform var(--t) var(--ease); }
/* ── Entry / article card grids ──────────────────────────────────── */
.ed-grid { list-style: none; margin: 0; padding: 0; }
ul.ed-grid:not(.grid) { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap: clamp(12px, 1.4vw, 18px); }
.ed-grid.grid { grid-template-columns: repeat(auto-fill, minmax(min(var(--min), 100%), 1fr)); }
.ed-grid > li { display: flex; }
.ed-grid > li > a { flex: 1 1 auto; width: 100%; }
.ed-grid .lg-article { padding-bottom: 26px; }
.ed-grid .lg-article .h-4 { font-size: 1.14rem; line-height: 1.28; }
.lg-article__art.ed-art { height: 150px; background: var(--sw); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), inset 0 -24px 40px rgba(0, 0, 0, .35), 0 18px 40px -18px var(--glow); transition: box-shadow var(--t-slow) var(--ease); }
.lg-article__art.ed-art::after { background: linear-gradient(180deg, rgba(255, 255, 255, .2), transparent 34%); }
.ed-entry-card:hover .lg-article__art.ed-art { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .42), inset 0 -24px 40px rgba(0, 0, 0, .3), 0 26px 60px -14px var(--glow); }
.lg-article__art.ed-art--black { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), inset 0 -24px 50px rgba(0, 0, 0, .8), 0 18px 40px -18px var(--glow); }
.ed-art--black .mcard__liquid { mix-blend-mode: screen; opacity: .2; }
/* Knowledge cards: published vs in preparation */
.ed-post .lg-article__art { height: 110px; }
.ed-post--prep { --glass-fill: linear-gradient(145deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .01)), rgba(10, 12, 24, .4); border-style: dashed; border-color: rgba(255, 255, 255, .18); box-shadow: var(--e-1); }
.ed-post--prep::before { opacity: .4; }
.ed-post--prep .lg-article__art { filter: saturate(.25) brightness(.7); }
.ed-post--prep .h-4 { color: var(--text-2); }
.ed-post__state { margin-bottom: -2px; border-radius: 10px; }
.ed-empty { display: flex; align-items: center; gap: 12px; padding: 22px 24px; border-radius: var(--r-lg); background: var(--glass-fill); border: 1px dashed rgba(255, 255, 255, .2);
font-family: var(--f-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); }
.ed-empty .ic { color: var(--yinmn-ink); }
/* ── Category filter: sticky glass rail of pill chips ───────────── */
.ed-filter { position: sticky; top: calc(var(--header-h) - 4px); z-index: 20; padding: 0 var(--gutter); margin: -6px 0 clamp(18px, 2.4vw, 28px); pointer-events: none; }
.ed-filter__rail { pointer-events: auto; width: fit-content; max-width: min(100%, var(--page-max)); margin: 0 auto 0 0; display: flex; flex-wrap: nowrap; gap: 6px; padding: 6px; border-radius: var(--r-pill);
overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
background: linear-gradient(145deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02)), rgba(8, 10, 22, .72); border: 1px solid var(--glass-line); box-shadow: var(--e-2);
-webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%); }
.ed-filter__rail::-webkit-scrollbar { display: none; }
.ed-filter .option { flex: 0 0 auto; white-space: nowrap; padding: 10px 14px; letter-spacing: .08em; }
.ed-filter__wrap { max-width: var(--page-max); margin: 0 auto; }
@media (max-width: 1399px) {
.ed-filter__rail { -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent); mask-image: linear-gradient(90deg, #000 90%, transparent); }
.ed-filter__rail .option:last-child { margin-right: 36px; }
}
.ed-hub-body { padding-top: clamp(8px, 1.6vw, 20px); }
/* ── Article layout: sticky glass aside + prose column on ink ───── */
.ed-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(30px, 3vw, 44px); align-items: start;
max-width: calc(var(--page-max) + var(--gutter) * 2); margin: 0 auto; padding: clamp(8px, 2vw, 24px) var(--gutter) var(--section-y-sm); }
.ed-aside { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.ed-aside__card { padding: 24px 22px; border-radius: var(--r-lg); }
.ed-aside__label { margin-bottom: 12px; font-weight: 500; }
.ed-aside__card > .ed-aside__label:not(:first-child), .ed-aside__card > nav:not(:first-child) { margin-top: 24px; }
.ed-toc { display: flex; flex-direction: column; gap: 2px; list-style: none; margin: 0 -10px; padding: 0; }
.ed-toc a { display: block; padding: 7px 10px; border-radius: 10px; font-size: .92rem; line-height: 1.35; color: var(--text-2); transition: background var(--t-fast), color var(--t-fast); }
.ed-toc a:hover, .ed-toc a:focus-visible { color: var(--text); background: rgba(255, 255, 255, .07); }
.ed-toc--links a { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--yinmn-ink); }
.ed-toc--links a::after { content: "↗"; font-size: .85em; opacity: .7; }
.ed-facts { margin: 0; }
.ed-facts > div { display: grid; gap: 3px; padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.ed-facts > div:first-child { padding-top: 2px; }
.ed-facts > div:last-child { border-bottom: 0; padding-bottom: 0; }
.ed-facts dt { font-family: var(--f-mono); font-size: .64rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.ed-facts dd { margin: 0; font-size: .95rem; line-height: 1.4; color: var(--text); }
.ed-editorial { position: relative; padding: 11px 14px 11px 32px; border-radius: 12px; background: rgba(255, 210, 122, .06); border: 1px solid rgba(255, 210, 122, .22);
font-family: var(--f-mono); font-size: .66rem; font-weight: 500; letter-spacing: .1em; line-height: 1.7; text-transform: uppercase; color: var(--text); }
.ed-editorial::before { content: ""; position: absolute; left: 14px; top: 17px; width: 7px; height: 7px; border-radius: 50%; background: var(--gold-ink); box-shadow: 0 0 10px rgba(255, 210, 122, .8); }
.ed-editorial p { display: inline; }
.ed-editorial__note { margin-top: 12px; font-family: var(--f-mono); font-size: .62rem; letter-spacing: .1em; line-height: 1.7; text-transform: uppercase; color: var(--text-3); }
@media (min-width: 1024px) {
.ed-layout { grid-template-columns: minmax(250px, 300px) minmax(0, 1fr); }
.ed-aside { align-self: stretch; }
.ed-aside__sticky { position: sticky; top: calc(var(--header-h) + 12px); max-height: calc(100vh - var(--header-h) - 28px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .2) transparent; }
}
/* Prose column */
.ed-article { min-width: 0; max-width: 780px; padding: clamp(4px, 1.4vw, 18px) 0 0; }
.ed-sec { margin-bottom: clamp(44px, 5vw, 64px); scroll-margin-top: calc(var(--header-h) + 24px); }
.ed-sec:last-child { margin-bottom: 0; }
.ed-sec > :last-child { margin-bottom: 0; }
.ed-h2 { font-family: var(--f-display); font-weight: 500; font-size: clamp(1.5rem, 1.15rem + 1.1vw, 2.1rem); line-height: 1.12; letter-spacing: -.03em; color: var(--text); margin-bottom: 18px; text-wrap: balance; }
.ed-p { font-size: 1.08rem; line-height: 1.75; color: var(--text-2); margin-bottom: 1.1em; text-wrap: pretty; }
.ed-p a, .ed-list a { color: var(--yinmn-ink); background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; }
.ed-p a:hover, .ed-list a:hover { color: var(--text); }
.ed-p--sm { font-size: 1rem; color: var(--c-muted); }
.ed-mb-l { margin-bottom: 30px; }
.ed-mb-m { margin-bottom: 22px; }
.ed-list { margin: 0 0 30px; padding-left: 1.3em; font-size: 1.08rem; line-height: 1.7; color: var(--text-2); }
.ed-list li + li { margin-top: 8px; }
.ed-list li::marker { color: var(--yinmn-ink); }
.ed-fine { color: var(--text-3); }
.ed-fine--gap { margin-bottom: 26px; }
.ed-h2[id], .ed-refs li[id] { scroll-margin-top: calc(var(--header-h) + 24px); }
/* Glowing step line (enquiry checklist) */
.ed-steps { list-style: none; padding: 0; position: relative; counter-reset: ed-step; display: grid; gap: 22px; }
.ed-steps::before { content: ""; position: absolute; left: 21px; top: 22px; bottom: 22px; width: 2px; border-radius: 2px; background: var(--iri); opacity: .7; box-shadow: 0 0 12px rgba(169, 184, 255, .5); }
.ed-steps li { position: relative; counter-increment: ed-step; min-height: 44px; padding: 9px 0 0 64px; }
.ed-steps li + li { margin-top: 0; }
.ed-steps li::before { content: counter(ed-step, decimal-leading-zero); position: absolute; left: 0; top: 0; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
font-family: var(--f-mono); font-size: .72rem; font-weight: 500; letter-spacing: .04em; color: var(--text);
background: radial-gradient(circle at 35% 30%, #5A74FF, #1C34A6); border: 1px solid rgba(255, 255, 255, .25); box-shadow: 0 0 0 5px var(--ink-900), 0 0 26px rgba(90, 116, 255, .6); }
/* Boxes inside articles */
.ed-box { position: relative; isolation: isolate; padding: clamp(20px, 2.6vw, 28px); margin-bottom: 34px; border-radius: var(--r-lg); background: var(--glass-fill); border: 1px solid var(--glass-line); box-shadow: var(--e-2); }
.ed-box__label { margin-bottom: 14px; }
.ed-box__text { font-size: 1.08rem; line-height: 1.6; color: var(--text); margin-bottom: 20px; }
.ed-box--film { background: radial-gradient(80% 120% at 0% 0%, rgba(46, 99, 240, .16), transparent 60%), var(--glass-fill); }
.ed-box--film::after { content: ""; position: absolute; left: 24px; right: 24px; top: -1px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #8EEBFF, #6F8BFF, #A89CFF, #58C6F0); opacity: .85; }
.ed-box--next { background: radial-gradient(70% 120% at 0% 0%, rgba(74, 102, 240, .2), transparent 60%), radial-gradient(60% 100% at 100% 100%, rgba(180, 18, 27, .14), transparent 60%), var(--glass-fill); }
.ed-caveat { padding: 20px 22px; margin-bottom: 34px; border-radius: var(--r-md);
background: linear-gradient(145deg, rgba(180, 18, 27, .12), rgba(255, 255, 255, .02)), rgba(10, 12, 24, .55); border: 1px solid rgba(255, 138, 144, .28); }
.ed-caveat .ed-box__label { margin-bottom: 10px; color: var(--candy-ink); }
.ed-caveat p:not(.ed-box__label) { font-size: .98rem; line-height: 1.6; color: var(--text-2); }
.ed-glance { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 12px; margin: 0; }
.ed-glance > div { padding: 16px; border-radius: var(--r-sm); background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); }
.ed-glance dt { font-family: var(--f-display); font-weight: 500; font-size: 1.05rem; letter-spacing: -.01em; margin-bottom: 6px; color: var(--text); }
.ed-glance dd { margin: 0; font-size: .95rem; line-height: 1.5; color: var(--text-2); }
.ed-glance > div:nth-child(2) dt { background: linear-gradient(100deg, #8EEBFF, #8FA2FF 50%, #C9B8FF); -webkit-background-clip: text; background-clip: text; color: transparent; width: fit-content; }
/* Related link pills */
.ed-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); gap: 10px; margin: 0 0 34px; padding: 0; list-style: none; }
.ed-links a { display: flex; align-items: center; height: 100%; min-height: 56px; padding: 14px 18px; border-radius: var(--r-md); color: var(--text); font-weight: 500; font-size: .98rem; line-height: 1.3; text-wrap: pretty;
background: var(--glass-fill); border: 1px solid var(--glass-line); box-shadow: var(--e-1); transition: border-color var(--t), box-shadow var(--t), transform var(--t) var(--ease); }
.ed-links a:hover { color: var(--text); border-color: var(--glass-line-hi); box-shadow: var(--e-2), 0 0 30px -12px rgba(140, 160, 255, .6); transform: translateY(-2px); }
/* Glass data tables */
.ed-table-wrap { margin-bottom: 34px; }
.ed-table { min-width: var(--min, 520px); }
.ed-table thead th { white-space: nowrap; }
.ed-table tbody th { font-family: var(--f-sans); font-size: .95rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text); background: none; vertical-align: top; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.ed-table tbody tr:last-child th { border-bottom: 0; }
.ed-table--compact td, .ed-table--compact th { padding: 13px 15px; }
/* Figure with inline SVG schematic */
.ed-figure { margin: 0 0 34px; padding: clamp(18px, 2.4vw, 24px); border-radius: var(--r-lg); background: var(--glass-fill); border: 1px solid var(--glass-line); box-shadow: var(--e-2); }
.ed-figure__title { margin-bottom: 18px; }
.ed-figure__panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 16px; list-style: none; margin: 0; padding: 0; }
.ed-figure__panels svg { display: block; width: 100%; height: 110px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .1); box-shadow: inset 0 0 30px rgba(0, 0, 0, .6); }
.ed-figure__panels li:last-child svg { box-shadow: 0 0 0 1px rgba(0, 0, 0, .8), 0 18px 40px -16px #000; }
.ed-figure__label { margin-top: 10px; font-family: var(--f-mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; line-height: 1.6; color: var(--text-2); }
.ed-figure__note { margin-top: 16px; font-size: .92rem; line-height: 1.55; color: var(--c-muted); }
/* References */
.ed-refs { display: grid; gap: 8px; list-style: none; margin: 0; padding: 0; }
.ed-refs li { padding: 14px 16px; border-radius: var(--r-sm); background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .08);
font-family: var(--f-mono); font-size: .74rem; line-height: 1.75; letter-spacing: .04em; color: var(--text-2); overflow-wrap: anywhere; }
.ed-refs li:target { color: var(--text); background: rgba(74, 102, 240, .14); border-color: rgba(169, 184, 255, .45); }
.ed-refs__pending { color: var(--candy-ink); }
.ed-endnote { position: relative; margin-top: 18px; padding: 12px 16px 12px 34px; border-radius: 12px; background: rgba(255, 210, 122, .06); border: 1px solid rgba(255, 210, 122, .22);
font-family: var(--f-mono); font-size: .68rem; letter-spacing: .1em; line-height: 1.7; text-transform: uppercase; color: var(--text); }
.ed-endnote::before { content: ""; position: absolute; left: 15px; top: 19px; width: 7px; height: 7px; border-radius: 50%; background: var(--gold-ink); box-shadow: 0 0 10px rgba(255, 210, 122, .8); }
.ed-endnote p { display: inline; }
.ed-sources .ed-fine { padding: 12px 16px; border-radius: 12px; background: rgba(255, 255, 255, .03); border: 1px dashed rgba(255, 255, 255, .16); }
/* ── Closing CTA panels (poured paint under glass) ───────────────── */
.ed-close .lg-cta__panel > div:first-child { display: grid; gap: 18px; }
.ed-close__text { font-size: clamp(1.1rem, 1rem + .5vw, 1.4rem); line-height: 1.5; color: var(--text); max-width: 56ch; }
.ed-close__title { font-size: clamp(1.9rem, 1.2rem + 2.2vw, 3.2rem); }
.ed-close--blue .b2 { background: radial-gradient(circle, #2E9BD8 0%, rgba(46, 155, 216, .55) 40%, transparent 70%); }
.ed-close--blue .b3 { background: radial-gradient(circle, rgba(168, 156, 255, .5), transparent 70%); }
.ed-close--void .b1 { background: radial-gradient(circle, rgba(60, 66, 90, .9) 0%, rgba(40, 44, 60, .5) 40%, transparent 70%); }
.ed-close--void .b2 { background: radial-gradient(circle, rgba(74, 102, 240, .45) 0%, rgba(28, 52, 166, .25) 40%, transparent 70%); }
.ed-close--void .b3 { background: radial-gradient(circle, rgba(200, 205, 225, .18), transparent 70%); }
.ed-close--void .lg-cta__panel { --glass-fill: linear-gradient(145deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .015)), rgba(2, 2, 6, .72); }
/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 1023px) {
.ed-aside__card { padding: 20px 18px; }
.ed-toc a { padding: 11px 10px; }
.ed-article { max-width: none; }
}
@media (max-width: 860px) {
.ed-feature { grid-template-columns: 1fr; padding: 12px; }
.ed-feature__field { min-height: 220px; }
.ed-feature__field .ed-film__orb { width: min(52%, 190px); }
.ed-feature__field--art { min-height: 150px; }
.ed-feature__body { padding: 18px 12px 12px; gap: 12px; }
}
@media (max-width: 640px) {
.ed-stage { min-height: 250px; }
.ed-stage .ed-film__orb { width: min(58%, 220px); }
.ed-void__hole { width: min(52%, 200px); }
.ed-links { grid-template-columns: 1fr; }
.ed-title { font-size: clamp(1.9rem, 1.3rem + 3vw, 2.4rem); }
.ed-grid .lg-article__art.ed-art { height: 120px; }
.ed-post .lg-article__art { height: 76px; }
.ed-close .lg-cta__panel { padding: 26px 20px; }
.ed-steps li { padding-left: 58px; }
}
@media (min-width: 1280px) {
.ed-grid.grid > li:nth-child(7):last-child { grid-column: span 2; }
.ed-grid.grid > li:nth-child(7):last-child .lg-article__art { height: 190px; }
}
/* ── 60-forms.css ── */
/* Group D — conversion forms: /request-a-quote/, /source-a-product/, /source-a-paint-code/ (Liquid Glass).
Shared form-page pieces are prefixed .fx-, page-specific ones .rfq- / .src- / .pc-.
Forms sit on frosted glass slabs; mode switches are glowing glass cards; the RFQ progress is an
iridescent step track; choices are pills (pressed = metal); file inputs are glass drop zones. */
/* ── Bands ──────────────────────────────────────────────────────── */
.fx-band { padding-top: clamp(36px, 4.5vw, 72px); padding-bottom: clamp(36px, 4.5vw, 72px); }
.fx-band--form, .fx-band--steps { padding-top: clamp(8px, 1.5vw, 20px); }
.fx-band--routes { padding-top: clamp(28px, 3.5vw, 52px); padding-bottom: clamp(32px, 4vw, 60px); }
.fx-span { grid-column: 1 / -1; }
/* ── Hero: glass slab + (optionally) the mode cards beside it ───── */
.fx-hero .hero__main { overflow: hidden; }
.fx-hero .lead { max-width: 62ch; }
.fx-hero--wide .lead { max-width: 70ch; }
.fx-hero__side { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
@media (min-width: 1000px) {
.fx-hero:not(.hero--single) { grid-template-columns: minmax(0, 1.4fr) minmax(340px, 1fr); }
}
/* Liquid pigment drop floating in the hero slab (decorative) */
.fx-drop-orb { position: absolute; z-index: -1; right: clamp(24px, 6vw, 110px); top: 50%; width: clamp(150px, 19vw, 280px); aspect-ratio: 1; transform: translateY(-50%); border-radius: 50%; overflow: hidden; pointer-events: none;
background: radial-gradient(120% 95% at 30% 14%, #7BE8CF 0%, #1E7A6A 30%, #1C34A6 64%, #0A1240 100%);
box-shadow: inset 0 -26px 50px rgba(0, 0, 0, .55), inset 0 18px 36px rgba(255, 255, 255, .22), 0 40px 110px -24px rgba(74, 102, 240, .75), 0 0 0 1px rgba(255, 255, 255, .08);
animation: blob 14s var(--ease-io) infinite alternate; }
.fx-drop-orb::before { content: ""; position: absolute; inset: -30%; animation: swirl 22s linear infinite; mix-blend-mode: soft-light; filter: blur(18px);
background: conic-gradient(from 0deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .45), rgba(0, 0, 0, .35), rgba(255, 255, 255, .25), rgba(0, 0, 0, .3), rgba(255, 255, 255, 0)); }
.fx-drop-orb::after { content: ""; position: absolute; left: 18%; top: 11%; width: 40%; height: 24%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .8), transparent); filter: blur(5px); }
@media (max-width: 1100px) { .fx-drop-orb { width: 130px; top: 34px; right: 30px; transform: none; opacity: .9; } .fx-hero--wide .hero__main > .eyebrow, .fx-hero--wide .hero__main > h1 { max-width: calc(100% - 150px); } }
@media (max-width: 640px) { .fx-drop-orb { width: 64px; top: 20px; right: 20px; } .fx-hero--wide .hero__main > .eyebrow, .fx-hero--wide .hero__main > h1 { max-width: calc(100% - 70px); } }
/* ── Mode switch: two glowing glass cards ──────────────────────── */
.fx-modes { flex-direction: column; gap: 12px; }
.fx-modes > .fx-mode { flex: 0 0 auto; }
.fx-modes--row { flex-direction: row; margin-bottom: clamp(18px, 2.2vw, 26px); }
.fx-modes--row > .fx-mode { flex: 1 1 300px; }
.fx-mode { display: grid; grid-template-columns: 48px minmax(0, 1fr) 26px; align-items: center; gap: 16px; padding: 20px; border-radius: var(--r-lg); isolation: isolate; min-height: 88px;
-webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%);
transition: transform var(--t) var(--ease), border-color var(--t), box-shadow var(--t), background var(--t); }
.fx-mode:hover { transform: translateY(-2px); border-color: var(--glass-line-hi); box-shadow: var(--e-2); }
.fx-mode:active { transform: scale(.99); }
.fx-mode::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1.2px; pointer-events: none; background: var(--iri-conic); opacity: 0; transition: opacity var(--t);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: iri-spin 9s linear infinite; }
.fx-mode[aria-pressed="true"] { border-color: transparent; box-shadow: var(--e-2), 0 0 50px -10px rgba(74, 102, 240, .7), 0 0 90px -30px rgba(30, 122, 106, .6);
background: linear-gradient(145deg, rgba(74, 102, 240, .34), rgba(30, 122, 106, .18) 60%, rgba(180, 18, 27, .14)), rgba(12, 14, 32, .62); }
.fx-mode[aria-pressed="true"]::after { opacity: .9; }
.fx-mode__icon, .fx-slab__icon, .fx-info__icon, .src-route__icon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; flex: none; color: var(--text-2);
background: rgba(255, 255, 255, .07); border: 1px solid var(--glass-line); box-shadow: 0 1px 0 rgba(255, 255, 255, .2) inset; transition: background var(--t), color var(--t); }
.fx-mode[aria-pressed="true"] .fx-mode__icon, .fx-slab__icon { color: var(--text); background: linear-gradient(135deg, rgba(74, 102, 240, .6), rgba(30, 122, 106, .45)); border-color: rgba(255, 255, 255, .2); }
.fx-mode__body { display: grid; gap: 6px; min-width: 0; }
.fx-mode .mode__title { margin: 0; color: var(--text-3); transition: color var(--t); }
.fx-mode[aria-pressed="true"] .mode__title { color: var(--yinmn-ink); }
.fx-mode .mode__desc { font-size: .95rem; }
.fx-mode__title { font-family: var(--f-display); font-size: 1.12rem; font-weight: 500; letter-spacing: -.015em; line-height: 1.25; color: var(--text); }
.fx-mode__tick { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: transparent; border: 1.5px solid rgba(255, 255, 255, .25); transition: background var(--t), color var(--t), box-shadow var(--t); }
.fx-mode[aria-pressed="true"] .fx-mode__tick { color: #070913; background: var(--metal); border-color: transparent; box-shadow: 0 0 18px rgba(200, 210, 255, .65); }
/* ── Form slab ─────────────────────────────────────────────────── */
.fx-slab { padding: clamp(22px, 3.8vw, 52px); border-radius: var(--r-xl); box-shadow: var(--e-3), inset 0 0 70px rgba(120, 140, 255, .045);
--glass-fill: linear-gradient(150deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .016) 42%, rgba(255, 255, 255, .03)), rgba(10, 12, 26, .66);
-webkit-backdrop-filter: blur(26px) saturate(160%); backdrop-filter: blur(26px) saturate(160%); }
.fx-slab__head { display: flex; align-items: center; gap: 16px; margin-bottom: clamp(22px, 2.8vw, 32px); }
.fx-form { display: grid; gap: 20px; }
.fx-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--min, 240px), 100%), 1fr)); gap: 20px; }
.fx-form .textarea, .rfq-steps .textarea { min-height: 96px; }
.fx-actions { gap: 12px 14px; margin-top: 6px; }
.fx-submit-row { gap: 16px 26px; margin-top: 8px; }
.fx-caveat { max-width: 54ch; flex: 1 1 280px; }
.fx-warn { color: var(--candy-ink); }
/* Field groups inside a slab: soft inset panels with a glowing legend */
.fx-group, .rfq-panel { padding: clamp(18px, 2.4vw, 28px); border-radius: var(--r-md); background: rgba(255, 255, 255, .028); border: 1px solid rgba(255, 255, 255, .075); }
.fx-legend, .fieldset > legend.rfq-panel__title { float: left; width: 100%; display: flex; align-items: center; gap: 10px; padding: 0; margin: 0 0 20px;
font-family: var(--f-mono); font-size: .68rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--text-2); }
.fx-legend::before, .rfq-panel__title::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--yinmn-hi); box-shadow: 0 0 0 3px rgba(74, 102, 240, .2), 0 0 12px 2px rgba(74, 102, 240, .7); }
.fx-legend + *, .rfq-panel__title + * { clear: both; }
.rfq-panel { margin-bottom: 20px; }
.rfq-panel .rfq-grid { margin-bottom: 0; }
.rfq-panel--accent { border-color: rgba(169, 184, 255, .38); background: linear-gradient(145deg, rgba(74, 102, 240, .14), rgba(30, 122, 106, .06)), rgba(255, 255, 255, .02); box-shadow: 0 0 40px -16px rgba(74, 102, 240, .6); }
.rfq-panel--accent > legend.rfq-panel__title { color: var(--yinmn-ink); }
/* Errors on these pages: candy ink (AA on the slab) */
:is(.page-request-a-quote, .page-source-a-product, .page-source-a-paint-code) main .field__error { color: var(--candy-ink); }
:is(.page-request-a-quote, .page-source-a-product, .page-source-a-paint-code) main :is(.input, .select, .textarea)[aria-invalid="true"] { border-color: rgba(255, 163, 167, .75); box-shadow: 0 0 0 3px rgba(240, 74, 80, .2); }
/* ── File drop zones: the whole box is the (keyboard-operable) file input ── */
.fx-drops { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--min, 220px), 100%), 1fr)); gap: 12px; }
.fx-drop { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 164px; padding: 22px 18px; text-align: center; cursor: pointer;
border-radius: var(--r-md); border: 1px dashed rgba(255, 255, 255, .26);
background: radial-gradient(120% 90% at 50% 0%, rgba(74, 102, 240, .12), transparent 62%), rgba(255, 255, 255, .03);
transition: border-color var(--t), background var(--t), box-shadow var(--t); }
.fx-drop:hover { border-color: rgba(169, 184, 255, .7); background: radial-gradient(120% 90% at 50% 0%, rgba(74, 102, 240, .22), transparent 66%), rgba(255, 255, 255, .045); box-shadow: 0 18px 40px -22px rgba(74, 102, 240, .8); }
.fx-drop:focus-within { border-style: solid; border-color: #B9C6FF; box-shadow: 0 0 0 4px rgba(74, 102, 240, .3); }
.fx-drop.has-files { border-style: solid; border-color: rgba(157, 255, 208, .55); background: radial-gradient(120% 90% at 50% 0%, rgba(157, 255, 208, .12), transparent 62%), rgba(255, 255, 255, .035); }
.fx-drop input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 0; }
.fx-drop__icon { width: 46px; height: 46px; margin-bottom: 8px; border-radius: 50%; display: grid; place-items: center; color: var(--text);
background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .04)), rgba(12, 14, 28, .5); border: 1px solid var(--glass-line-hi);
box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset, 0 10px 24px -10px rgba(74, 102, 240, .7); transition: transform var(--t) var(--ease), background var(--t); }
.fx-drop:hover .fx-drop__icon { transform: translateY(-3px); }
.fx-drop__ok, .fx-drop.has-files .fx-drop__add { display: none; }
.fx-drop.has-files .fx-drop__ok { display: block; }
.fx-drop.has-files .fx-drop__icon { color: #0B2B1C; background: linear-gradient(100deg, #9DFFD0, #8EEBFF); border-color: transparent; }
.fx-drop__title { font-family: var(--f-mono); font-size: .68rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; line-height: 1.5; color: var(--text); }
.fx-drop__hint { font-size: .85rem; color: var(--text-3); line-height: 1.45; }
.fx-drop__status { font-family: var(--f-mono); font-size: .7rem; letter-spacing: .04em; line-height: 1.6; color: #9DFFD0; overflow-wrap: anywhere; }
.fx-drop__status:empty { display: none; }
/* ── Link tiles (browse / related) ──────────────────────────────── */
.fx-tiles { list-style: none; --gap: 14px; }
.fx-tile { display: flex; align-items: center; justify-content: space-between; gap: 14px; height: 100%; min-height: 72px; padding: 20px 22px; }
.fx-tile .ic { color: var(--text-3); transition: transform var(--t) var(--ease), color var(--t); }
.fx-tile:hover .ic { color: var(--text); transform: translate(2px, -2px); }
/* ── Info cards under the RFQ ───────────────────────────────────── */
.fx-info__card { --pad: 26px 26px 28px; }
.fx-info__icon { margin-bottom: 20px; }
.fx-info .label { color: var(--text-2); }
.fx-links { list-style: none; gap: 10px; font-size: .98rem; }
/* ── Request a quote ────────────────────────────────────────────── */
.rfq-h2 { margin: 0; }
.rfq-h2:focus { outline: none; }
.rfq-intro { font-size: 1rem; line-height: 1.6; color: var(--text-2); margin-bottom: 24px; max-width: 62ch; }
.rfq-intro--sm { margin-bottom: 16px; }
.rfq-field { margin-bottom: 26px; }
.rfq-grid { gap: 18px 20px; margin-bottom: 28px; }
.rfq-steps [data-step] > .h-4 { margin-top: 4px; }
/* Iridescent step track */
.rfq-progress { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; margin-bottom: 18px; --p: 0; }
.rfq-track { position: absolute; left: calc(100% / 12); right: calc(100% / 12); top: 21px; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .1); }
.rfq-track__fill { position: absolute; inset: 0; border-radius: inherit; background: var(--iri); transform-origin: 0 50%; transform: scaleX(var(--p)); transition: transform .8s var(--ease); box-shadow: 0 0 14px rgba(169, 184, 255, .7); }
.progress__step.rfq-pstep { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 0 2px 2px; text-align: center; border-radius: var(--r-sm);
font-family: var(--f-sans); font-size: .84rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text-3); transition: color var(--t); }
.progress__step.rfq-pstep::after { content: none; }
.progress__step.rfq-pstep:hover { color: var(--text); }
.rfq-pstep__node { position: relative; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-family: var(--f-mono); font-size: .74rem; letter-spacing: .02em; color: var(--text-2);
background: radial-gradient(circle at 35% 30%, #262B45, #0B0E1C); border: 1px solid rgba(255, 255, 255, .2); box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .8);
transition: background var(--t-slow) var(--ease), box-shadow var(--t-slow) var(--ease), color var(--t), border-color var(--t); }
.rfq-pstep:hover .rfq-pstep__node { border-color: rgba(255, 255, 255, .45); }
.rfq-pstep.is-done { color: var(--text-2); }
.rfq-pstep.is-done .rfq-pstep__node { color: #070913; background: var(--metal); border-color: transparent; box-shadow: 0 1px 0 #fff inset, 0 8px 20px -8px rgba(200, 210, 255, .6); }
.rfq-pstep[aria-current="step"] { color: var(--text); }
.rfq-pstep[aria-current="step"] .rfq-pstep__node { color: #fff; border-color: rgba(169, 184, 255, .7); background: radial-gradient(circle at 35% 30%, #5A74FF, #1C34A6); box-shadow: 0 0 0 5px rgba(74, 102, 240, .18), 0 0 30px rgba(90, 116, 255, .85); }
.rfq-pstep[aria-current="step"] .rfq-pstep__node::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; padding: 1.5px; background: var(--iri-conic); animation: iri-spin 6s linear infinite;
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.rfq-steplabel { margin: 4px 0 clamp(26px, 3.4vw, 40px); text-align: center; }
.rfq-steplabel__n { color: var(--text); }
/* Choice chips: pills, pressed = metal */
.rfq-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.rfq-chips .option { font-family: var(--f-sans); font-size: .92rem; font-weight: 500; letter-spacing: 0; text-transform: none; padding: 10px 18px 10px 14px; gap: 10px; }
.rfq-chips .option::before { content: ""; flex: none; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .38); transition: border-color var(--t-fast), background var(--t-fast); }
.rfq-chips .option[aria-pressed="true"]::before { border-color: #070913; background: radial-gradient(circle, #070913 0 3px, transparent 3.5px); }
/* Enquiry lines carried over */
.rfq-carry { margin-bottom: 26px; }
.rfq-carry__title { color: var(--yinmn-ink); margin-bottom: 12px; }
.rfq-lines { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.rfq-lines li { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--r-sm); background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08);
font-family: var(--f-mono); font-size: .78rem; line-height: 1.5; color: var(--text); overflow-wrap: anywhere; }
.rfq-lines li::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--iri); box-shadow: 0 0 8px rgba(169, 184, 255, .8); }
.rfq-lines--ruled { margin-top: 16px; }
.rfq-edit { margin-top: 14px; }
/* Notes on the files step */
.rfq-note { margin-bottom: 14px; }
.fx-drops + .rfq-note { margin-top: 22px; }
.rfq-note .fineprint { margin-top: 4px; }
/* Review summary */
.rfq-summary { margin-bottom: 24px; padding: clamp(18px, 2.4vw, 26px); border-radius: var(--r-md); background: rgba(255, 255, 255, .035); border: 1px solid var(--glass-line); }
.rfq-sum { display: grid; }
.rfq-sum > div { display: grid; grid-template-columns: minmax(130px, 34%) minmax(0, 1fr); gap: 4px 20px; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.rfq-sum > div:last-child { border-bottom: 0; }
.rfq-sum dt { font-family: var(--f-mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); padding-top: 3px; }
.rfq-sum dd { margin: 0; font-size: .98rem; line-height: 1.5; color: var(--text); }
.rfq-check { font-size: .92rem; }
/* Step navigation */
.rfq-steps .form-actions { justify-content: flex-end; margin-top: 8px; }
.rfq-steps .rfq-nav { justify-content: space-between; }
.ic--back { transform: scaleX(-1); }
.btn:hover .ic--back { transform: scaleX(-1) translateX(3px); }
/* Confirmation state: a celebratory glass panel with an iridescent edge */
.fx-done { isolation: isolate; overflow: hidden; padding-top: clamp(20px, 3vw, 44px); }
.fx-done__paint { opacity: .8; }
.fx-done__wrap { max-width: 1060px; }
.fx-done__panel { padding: clamp(24px, 4.6vw, 64px); border-radius: var(--r-xl); box-shadow: var(--e-3), 0 0 120px -40px rgba(74, 102, 240, .7);
--glass-fill: linear-gradient(145deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .02) 45%, rgba(255, 255, 255, .035)), rgba(8, 10, 22, .64); --blur: 28px; }
.fx-done__top { display: flex; align-items: center; gap: clamp(18px, 2.6vw, 30px); margin-bottom: clamp(24px, 3vw, 34px); }
.fx-done__top .eyebrow { color: var(--yinmn-ink); }
.fx-done__badge { --s: clamp(64px, 7vw, 92px); flex: none; width: var(--s); height: var(--s); border-radius: 50%; display: grid; place-items: center; color: #070913; background: var(--iri-conic); animation: iri-spin 8s linear infinite;
box-shadow: 0 0 0 7px rgba(255, 255, 255, .05), 0 0 60px rgba(169, 184, 255, .6), inset 0 -10px 18px rgba(0, 0, 0, .22), inset 0 8px 14px rgba(255, 255, 255, .55); }
.fx-done__badge .ic { width: 44%; height: 44%; stroke-width: 2.4; }
.fx-done__title { max-width: 22ch; }
.fx-done__title:focus { outline: none; }
.fx-done__ref { padding: 22px 24px; border-radius: var(--r-md); background: rgba(255, 255, 255, .04); border: 1px dashed rgba(255, 255, 255, .22); }
.fx-ref { font-size: clamp(1.15rem, .95rem + .8vw, 1.55rem); letter-spacing: .05em; color: var(--text); margin-bottom: 8px; overflow-wrap: anywhere; }
.fx-next { --g: clamp(16px, 2vw, 26px); position: relative; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--g); padding-top: 8px; }
.fx-next::before { content: ""; position: absolute; left: 22px; right: calc((100% - 3 * var(--g)) / 4 - 22px); top: 29px; height: 2px; border-radius: 2px; background: var(--iri); opacity: .55; box-shadow: 0 0 12px rgba(169, 184, 255, .6); }
.fx-next__step { position: relative; display: grid; gap: 4px; align-content: start; }
.fx-next__node { width: 44px; height: 44px; margin-bottom: 12px; border-radius: 50%; display: grid; place-items: center; color: #fff;
background: radial-gradient(circle at 35% 30%, #5A74FF, #1C34A6); border: 1px solid rgba(169, 184, 255, .6); box-shadow: 0 0 0 5px rgba(8, 10, 22, .9), 0 0 24px rgba(90, 116, 255, .7); }
.fx-num.step-num { font-size: .95rem; margin-bottom: 0; font-family: var(--f-mono); letter-spacing: .08em; }
/* ── Source a product ───────────────────────────────────────────── */
.src-prefill { padding: 0 var(--gutter); margin-top: calc(var(--section-y-sm) * -.55); }
.src-prefill__inner { max-width: var(--page-max); margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; padding: 16px 22px; border-radius: var(--r-lg);
background: linear-gradient(100deg, rgba(74, 102, 240, .24), rgba(30, 122, 106, .14)), rgba(10, 12, 24, .62); border: 1px solid rgba(169, 184, 255, .42);
box-shadow: var(--e-2), 0 0 44px -14px rgba(74, 102, 240, .6); -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%); }
.src-prefill__label { display: inline-flex; align-items: center; gap: 8px; color: var(--yinmn-ink); }
.src-prefill__term { font-family: var(--f-mono); font-size: .9rem; color: var(--text); padding: 8px 14px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .08); border: 1px solid var(--glass-line-hi); overflow-wrap: anywhere; }
.src-prefill__note { color: var(--text-2); }
.src-routes { --gap: 14px; }
.src-route { display: flex; flex-direction: column; gap: 8px; padding: 24px 22px 26px; color: var(--text); cursor: pointer; }
.src-routes > .src-route:hover { border-color: var(--glass-line-hi); box-shadow: var(--e-3); }
.src-routes > .src-route:focus-within { border-color: #B9C6FF; box-shadow: 0 0 0 4px rgba(74, 102, 240, .3), var(--e-2); }
.src-route__icon { margin-bottom: 12px; }
.src-route__btn { display: block; width: 100%; background: none; border: 0; padding: 0; text-align: left; cursor: pointer; color: inherit; font: inherit; }
.src-route__btn:focus-visible { outline: none; }
.src-route__btn::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 1; }
.src-route__num { display: block; font-family: var(--f-mono); font-size: .64rem; letter-spacing: .14em; color: var(--text-3); margin-bottom: 8px; }
.src-route__title { display: block; font-family: var(--f-display); font-size: 1.15rem; font-weight: 500; letter-spacing: -.015em; line-height: 1.25; }
.src-route__desc { font-size: .92rem; line-height: 1.55; color: var(--text-2); }
.src-route__desc a { position: relative; z-index: 2; }
.src-routes > .src-route--feature { border-color: rgba(169, 184, 255, .42); background: linear-gradient(150deg, rgba(74, 102, 240, .32), rgba(30, 122, 106, .2) 65%, rgba(180, 18, 27, .12)), rgba(12, 14, 30, .6); box-shadow: var(--e-2), 0 0 50px -16px rgba(74, 102, 240, .7); }
.src-route--feature .src-route__icon { color: var(--text); background: linear-gradient(135deg, rgba(74, 102, 240, .6), rgba(30, 122, 106, .45)); }
.src-route--feature .src-route__num { color: var(--yinmn-ink); }
/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 900px) {
.fx-next { grid-template-columns: 1fr; gap: 18px; }
.fx-next::before { left: 21px; right: auto; top: 12px; bottom: 12px; width: 2px; height: auto; }
.fx-next__step { grid-template-columns: 44px minmax(0, 1fr); column-gap: 18px; row-gap: 2px; }
.fx-next__node { grid-row: span 3; margin-bottom: 0; }
}
@media (max-width: 700px) {
/* Only the numbered nodes remain; names stay available to assistive tech */
.rfq-pstep__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.rfq-pstep__node { width: 40px; height: 40px; }
.rfq-track { top: 19px; }
.rfq-steplabel { text-align: left; }
}
@media (max-width: 640px) {
.fx-slab { padding: 22px 16px 24px; border-radius: var(--r-lg); }
.fx-group, .rfq-panel { padding: 18px 14px; }
.fx-mode { grid-template-columns: 42px minmax(0, 1fr) 24px; gap: 12px; padding: 16px; }
.fx-mode__icon { width: 42px; height: 42px; border-radius: 12px; }
.fx-actions > .btn, .fx-submit-row > .btn, .rfq-steps .form-actions > .btn { width: 100%; }
.rfq-steps .rfq-nav { flex-direction: column-reverse; align-items: stretch; }
.rfq-sum > div { grid-template-columns: 1fr; }
.fx-done__top { flex-direction: column; align-items: flex-start; }
.fx-drop { display: grid; grid-template-columns: 46px minmax(0, 1fr); column-gap: 14px; row-gap: 2px; justify-items: start; align-content: center; text-align: left; min-height: 0; padding: 16px; }
.fx-drop__icon { grid-row: span 3; margin: 0; align-self: center; }
.src-route { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 16px; row-gap: 6px; padding: 20px 18px; }
.src-route__icon { grid-row: span 2; margin: 0; }
.src-prefill { margin-top: 0; }
}
/* Warning fineprint inside notes keeps its mono size and candy ink */
.note p.fineprint.fx-warn, .fx-done__ref p.fineprint.fx-warn { font-size: .68rem; line-height: 1.75; letter-spacing: .1em; color: var(--candy-ink); }
.rfq-edit { --h: 44px; }
/* ── 60-home.css ── */
/* Homepage — Liquid Glass (ported from the approved concept). Prefix lg- = home-only layout. */
/* Hero: live liquid paint under a frosted slab */
.lg-hero { position: relative; isolation: isolate; min-height: 100svh; padding: 128px var(--gutter) 56px; display: flex; flex-direction: column; justify-content: center; overflow: hidden; background: var(--ink-950); }
.lg-hero__fluid { position: absolute; inset: 0; z-index: -2;
background: radial-gradient(55% 60% at 78% 30%, rgba(74, 102, 240, .75), transparent 60%), radial-gradient(40% 50% at 92% 80%, rgba(180, 18, 27, .8), transparent 62%),
radial-gradient(35% 30% at 62% 62%, rgba(230, 235, 245, .35), transparent 60%), radial-gradient(60% 70% at 30% 90%, rgba(28, 52, 166, .55), transparent 65%), #010102; }
.lg-hero__fluid .liquid-canvas.is-live { opacity: 1; }
.lg-hero > .grain { z-index: -1; opacity: .09; }
.lg-hero::after { content: ""; position: absolute; inset: auto 0 0; height: 22vh; z-index: -1; pointer-events: none; background: linear-gradient(180deg, transparent, var(--ink-900)); }
.lg-hero__inner { width: 100%; max-width: var(--page-max); margin: 0 auto; display: grid; gap: clamp(20px, 3vw, 32px); }
.lg-hero__slab { max-width: 880px; padding: clamp(26px, 4vw, 52px); border-radius: var(--r-xl); --glass-fill: linear-gradient(145deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .02) 42%, rgba(255, 255, 255, .035)), rgba(8, 10, 22, .56); --blur: 28px; box-shadow: var(--e-3), inset 0 0 60px rgba(120, 140, 255, .06); }
.lg-hero__title { margin: 22px 0 26px; }
.lg-line { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.lg-line > span { display: inline-block; }
.lg-hero__ctas { margin-top: 30px; --gap: 12px 14px; }
.lg-hero__tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; list-style: none; }
.lg-hero__hint { position: absolute; right: var(--gutter); bottom: 22px; display: flex; align-items: center; gap: 8px; color: rgba(244, 245, 249, .7); }
.htile { display: grid; grid-template-columns: 58px 1fr; grid-template-rows: 1fr auto; gap: 14px 16px; height: 100%; padding: 18px; border-radius: var(--r-md); color: var(--text); --glass-fill: linear-gradient(145deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02)), rgba(8, 10, 22, .6); }
.htile:hover { color: var(--text); border-color: var(--glass-line-hi); box-shadow: var(--e-3); }
.htile__drop { width: 58px; height: 58px; border-radius: 50% 50% 50% 50% / 56% 56% 44% 44%; background: var(--sw); position: relative; overflow: hidden;
box-shadow: inset 0 -8px 14px rgba(0, 0, 0, .45), inset 0 6px 10px rgba(255, 255, 255, .35), 0 10px 30px -4px var(--glow); animation: blob 9s var(--ease-io) infinite alternate; }
.htile__drop::after { content: ""; position: absolute; left: 18%; top: 12%; width: 36%; height: 22%; border-radius: 50%; background: rgba(255, 255, 255, .7); filter: blur(3px); }
.htile__drop--black { box-shadow: inset 0 -8px 14px rgba(0, 0, 0, .6), inset 0 1px 2px rgba(255, 255, 255, .35), 0 0 0 1px rgba(255, 255, 255, .1), 0 10px 30px -4px var(--glow); }
.htile__drop--black::after { background: rgba(255, 255, 255, .14); }
.htile__drop--metal::after { background: rgba(255, 255, 255, .95); }
@keyframes blob { 0% { border-radius: 50% 50% 50% 50% / 56% 56% 44% 44%; } 50% { border-radius: 58% 42% 55% 45% / 48% 60% 40% 52%; } 100% { border-radius: 44% 56% 46% 54% / 60% 44% 56% 40%; } }
.htile__text { display: grid; gap: 3px; align-content: center; }
.htile__text .label { font-size: .6rem; }
.htile__name { font-family: var(--f-display); font-weight: 500; font-size: 1.2rem; letter-spacing: -.02em; line-height: 1.2; }
.htile__desc { font-size: .84rem; color: var(--text-2); line-height: 1.4; }
.htile__foot { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; color: var(--text-2); }
.htile__foot .ic, .mcard__foot .ic { transition: transform var(--t) var(--ease); }
.htile:hover .htile__foot .ic, .mcard:hover .mcard__foot .ic { color: var(--text); transform: translate(2px, -2px); }
.lg-facts { position: relative; z-index: 2; margin-top: -8px; }
.lg-facts .fact-strip__inner { list-style: none; }
.lg-facts li { display: inline-flex; align-items: center; gap: 8px; }
/* Section bands */
.lg-band--pigment::before { content: ""; position: absolute; inset: 10% 0 auto; height: 70%; z-index: -1; pointer-events: none;
background: radial-gradient(40% 50% at 15% 40%, rgba(28, 52, 166, .35), transparent 70%), radial-gradient(35% 45% at 85% 70%, rgba(180, 18, 27, .22), transparent 70%); }
.lg-band--deep { background: linear-gradient(180deg, transparent, rgba(3, 4, 9, .85) 18%, rgba(3, 4, 9, .85) 82%, transparent); }
.lg-grid-3, .lg-grid-4 { display: grid; gap: clamp(12px, 1.4vw, 18px); list-style: none; }
.lg-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lg-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lg-center { justify-content: center; margin-top: clamp(40px, 6vw, 64px); }
/* Three ways */
.way { display: flex; flex-direction: column; gap: 14px; min-height: 100%; padding: 30px 28px 32px; color: var(--text); }
.way:hover { color: var(--text); border-color: var(--glass-line-hi); box-shadow: var(--e-3); }
.way__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.way__icon { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: rgba(255, 255, 255, .07); border: 1px solid var(--glass-line); color: var(--text); box-shadow: 0 1px 0 rgba(255, 255, 255, .2) inset; }
.way--feature { --glass-fill: linear-gradient(145deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02)), rgba(18, 16, 40, .6); }
.way--feature .way__icon { background: linear-gradient(135deg, rgba(74, 102, 240, .5), rgba(180, 18, 27, .45)); }
.way__cta { margin-top: auto; padding-top: 14px; display: inline-flex; align-items: center; gap: 8px; color: var(--yinmn-ink); }
/* Featured material cards (glass variant from the build) */
.mats > li { display: flex; }
.mcard { display: flex; flex-direction: column; gap: 10px; width: 100%; padding: 14px 14px 18px; color: var(--text); }
.mcard:hover { color: var(--text); border-color: var(--glass-line-hi); box-shadow: var(--e-3); }
.mcard > :not(.mcard__swatch):not(.sheen) { margin-inline: 8px; }
.mcard__swatch { position: relative; overflow: hidden; display: block; aspect-ratio: 4 / 3; border-radius: 16px; margin-bottom: 8px; background: var(--sw);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -20px 40px rgba(0, 0, 0, .35), 0 18px 40px -16px var(--glow); transition: box-shadow var(--t-slow) var(--ease); }
.mcard:hover .mcard__swatch { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -20px 40px rgba(0, 0, 0, .3), 0 26px 60px -12px var(--glow); }
.mcard__swatch--black { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), inset 0 -20px 40px rgba(0, 0, 0, .6), 0 18px 40px -16px var(--glow); }
.mcard__liquid { position: absolute; inset: -40%; display: block; animation: swirl 18s linear infinite; mix-blend-mode: soft-light;
background: radial-gradient(28% 20% at 30% 35%, rgba(255, 255, 255, .34), transparent 70%), radial-gradient(22% 16% at 70% 60%, rgba(255, 255, 255, .18), transparent 70%), radial-gradient(40% 30% at 60% 25%, rgba(0, 0, 0, .25), transparent 70%); }
.mcard__swatch--black .mcard__liquid { mix-blend-mode: screen; opacity: .25; }
.mcard__swatch::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(160px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, .3), transparent 60%), linear-gradient(180deg, rgba(255, 255, 255, .22), transparent 30%); opacity: .6; transition: opacity var(--t); }
.mcard:hover .mcard__swatch::after { opacity: 1; }
.mcard__meta { font-size: .6rem; line-height: 1.5; }
.mcard__text { flex: 1; }
.mcard__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; color: var(--text-2); }
/* Proposition */
.lg-prop-head { display: grid; gap: 22px; max-width: 1040px; margin-bottom: clamp(44px, 6vw, 72px); }
.lg-prop-head .eyebrow { margin-bottom: 0; }
.lg-prop-head .lead { max-width: 70ch; }
.route { display: flex; flex-direction: column; gap: 14px; padding: 30px 28px 32px; }
.route:hover { border-color: var(--glass-line-hi); box-shadow: var(--e-3); }
.route .link-arrow { margin-top: auto; padding-top: 12px; width: fit-content; }
.route__k { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.route__letter { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-family: var(--f-display); font-size: 1rem; letter-spacing: 0; color: #070913; background: var(--metal); box-shadow: 0 1px 0 #fff inset, 0 6px 16px -6px rgba(200, 210, 255, .6); }
.process { position: relative; margin-top: clamp(48px, 7vw, 88px); }
.process__track { position: absolute; left: 0; right: 0; top: 22px; height: 2px; background: rgba(255, 255, 255, .1); border-radius: 2px; overflow: hidden; }
.process__fill { position: absolute; inset: 0; background: var(--iri); transform-origin: 0 50%; transform: scaleX(1); }
.process__steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 32px); position: relative; list-style: none; }
.step { display: grid; gap: 8px; align-content: start; }
.step__node { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 14px; background: radial-gradient(circle at 35% 30%, #2A2F48, #0B0E1C); border: 1px solid rgba(255, 255, 255, .2); color: var(--text);
box-shadow: 0 0 0 6px var(--ink-950), 0 0 24px rgba(140, 160, 255, .35); transition: box-shadow var(--t-slow) var(--ease), background var(--t-slow); }
.step.is-on .step__node { background: radial-gradient(circle at 35% 30%, #5A74FF, #1C34A6); box-shadow: 0 0 0 6px var(--ink-950), 0 0 30px rgba(90, 116, 255, .8); }
/* Colour technology */
.tech { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(28px, 6vw, 96px); align-items: center; }
.tech__stage { position: relative; display: grid; place-items: center; }
.orb { position: relative; width: min(100%, 460px); aspect-ratio: 1; border-radius: 50%; overflow: hidden;
box-shadow: inset 0 -30px 60px rgba(0, 0, 0, .55), inset 0 20px 40px rgba(255, 255, 255, .18), 0 50px 120px -30px rgba(74, 102, 240, .55), 0 0 0 1px rgba(255, 255, 255, .1);
animation: blob 14s var(--ease-io) infinite alternate; transition: box-shadow 1s var(--ease); }
.orb__layer { position: absolute; inset: 0; background: var(--sw); opacity: 0; transition: opacity .9s var(--ease); }
.orb__layer.is-on { opacity: 1; }
.orb__swirl { position: absolute; inset: -30%; animation: swirl 22s linear infinite; mix-blend-mode: soft-light; filter: blur(24px);
background: conic-gradient(from 0deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .45), rgba(0, 0, 0, .35), rgba(255, 255, 255, .25), rgba(0, 0, 0, .3), rgba(255, 255, 255, 0)); }
.orb__spec { position: absolute; left: 18%; top: 10%; width: 42%; height: 26%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .75), transparent); filter: blur(6px); }
.tech__caption { position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); padding: 7px 14px; border-radius: var(--r-pill); background: rgba(8, 10, 22, .7); border: 1px solid var(--glass-line); color: var(--text-2); white-space: nowrap; }
.tech__list { display: grid; border-top: 1px solid rgba(255, 255, 255, .1); list-style: none; }
.techrow { position: relative; display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 16px; padding: 22px 12px; border-bottom: 1px solid rgba(255, 255, 255, .1); color: var(--text); transition: background var(--t) var(--ease); }
.techrow__main { display: grid; gap: 4px; }
.techrow .h-4 { font-size: clamp(1.1rem, .95rem + .6vw, 1.5rem); transition: transform var(--t) var(--ease); }
.techrow .ic { color: var(--text-3); transition: transform var(--t) var(--ease), color var(--t); }
.techrow:hover, .techrow.is-active { color: var(--text); background: linear-gradient(90deg, rgba(255, 255, 255, .06), transparent); }
.techrow:hover .h-4, .techrow.is-active .h-4 { transform: translateX(6px); }
.techrow:hover .ic, .techrow.is-active .ic { color: var(--text); transform: translate(3px, -3px); }
.techrow.is-active .techrow__n { color: var(--text); }
/* Procurement figures */
.proc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.proc__intro { display: grid; gap: 20px; }
.proc__intro .eyebrow { margin-bottom: 0; }
.figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.fig { padding: 24px 22px 26px; border-radius: var(--r-md); display: grid; gap: 10px; }
.fig dt { display: grid; gap: 16px; color: var(--text-3); }
.fig .figure { margin: 0; }
/* Knowledge articles */
.lg-article { display: flex; flex-direction: column; gap: 12px; padding: 14px 14px 24px; color: var(--text); }
.lg-article:hover { color: var(--text); border-color: var(--glass-line-hi); box-shadow: var(--e-3); }
.lg-article > :not(.lg-article__art):not(.sheen) { margin-inline: 8px; }
.lg-article__art { display: block; height: 120px; border-radius: 14px; margin-bottom: 8px; position: relative; overflow: hidden;
background: radial-gradient(80% 120% at 20% 0%, var(--a1), transparent 70%), radial-gradient(70% 110% at 100% 100%, var(--a2), transparent 70%), #07080F; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2); }
.lg-article__art::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 9px); }
.lg-article__cat { display: inline-flex; align-items: center; gap: 8px; color: var(--text-2); }
/* CTA band: poured paint under glass */
.lg-cta { position: relative; isolation: isolate; padding: clamp(64px, 9vw, 130px) var(--gutter); overflow: hidden; }
.lg-cta__paint { position: absolute; inset: 0; z-index: -1; -webkit-mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent); }
.lg-cta__paint span { position: absolute; border-radius: 50%; filter: blur(60px); will-change: transform; }
.lg-cta__paint .b1 { width: 48vw; height: 48vw; left: -6vw; top: 0; background: radial-gradient(circle, #2440C8 0%, rgba(28, 52, 166, .6) 40%, transparent 70%); animation: drift1 22s var(--ease-io) infinite alternate; }
.lg-cta__paint .b2 { width: 42vw; height: 42vw; right: -4vw; bottom: -10vw; background: radial-gradient(circle, #D0202A 0%, rgba(180, 18, 27, .6) 40%, transparent 70%); animation: drift2 26s var(--ease-io) infinite alternate; }
.lg-cta__paint .b3 { width: 26vw; height: 26vw; left: 40vw; top: 10%; background: radial-gradient(circle, rgba(235, 240, 250, .55), transparent 70%); animation: drift3 18s var(--ease-io) infinite alternate; }
.lg-cta__paint .b4 { width: 34vw; height: 34vw; left: 18vw; bottom: -12vw; background: radial-gradient(circle, rgba(0, 0, 0, .95), transparent 70%); animation: drift2 30s var(--ease-io) infinite alternate-reverse; }
@keyframes drift1 { to { transform: translate3d(14vw, 8vw, 0) scale(1.15); } }
@keyframes drift2 { to { transform: translate3d(-12vw, -6vw, 0) scale(.9); } }
@keyframes drift3 { to { transform: translate3d(-18vw, 10vw, 0) scale(1.3); } }
.lg-cta__panel { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; padding: clamp(28px, 5vw, 64px); border-radius: var(--r-xl);
--glass-fill: linear-gradient(145deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .02)), rgba(8, 10, 22, .6); --blur: 28px; }
.lg-cta__panel > div:first-child { display: grid; gap: 20px; }
.lg-cta__panel .eyebrow { margin-bottom: 0; }
.lg-cta__title { font-size: clamp(2rem, 1.2rem + 2.8vw, 3.8rem); line-height: 1.02; letter-spacing: -.04em; }
.lg-cta__actions { display: grid; gap: 12px; }
/* Responsive */
@media (min-width: 1181px) {
.lg-hero__inner { grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); align-items: end; gap: 24px; }
.lg-hero__slab { max-width: none; }
.lg-hero__tiles { grid-template-columns: 1fr; gap: 10px; }
.htile { padding: 14px 16px; gap: 10px 14px; grid-template-columns: 48px 1fr; }
.htile__drop { width: 48px; height: 48px; }
.htile__name { font-size: 1.1rem; }
}
@media (max-width: 1180px) {
.lg-hero__tiles, .lg-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
.lg-grid-3, .tech, .proc, .lg-cta__panel { grid-template-columns: 1fr; }
.tech__stage { max-width: 380px; margin: 0 auto 20px; width: 100%; }
.process__track { left: 22px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
.process__fill { transform-origin: 50% 0; }
.process__steps { grid-template-columns: 1fr; gap: 28px; }
.step { grid-template-columns: 46px 1fr; column-gap: 20px; row-gap: 4px; }
.step__node { grid-row: span 3; margin-bottom: 0; }
.lg-facts .fact-strip__inner { border-radius: var(--r-md); justify-content: flex-start; }
}
@media (max-width: 640px) {
.lg-hero { padding: 96px var(--gutter) 40px; }
.lg-hero__slab { padding: 24px 20px 26px; }
.lg-hero__title { margin: 16px 0 18px; }
.lg-hero__ctas { margin-top: 22px; }
.lg-hero__ctas .btn--lg { width: 100%; }
.lg-hero__tiles { grid-template-columns: 1fr; gap: 10px; }
.htile { grid-template-columns: 48px 1fr; padding: 14px; gap: 12px 14px; }
.htile__drop { width: 48px; height: 48px; }
.lg-hero__hint { display: none; }
.lg-grid-4, .figs { grid-template-columns: 1fr; }
.mcard { display: grid; grid-template-columns: 92px 1fr; column-gap: 14px; row-gap: 6px; padding: 12px 12px 14px; }
.mcard > :not(.mcard__swatch):not(.sheen) { margin-inline: 0; grid-column: 2; }
.mcard__swatch { grid-row: 1 / span 4; aspect-ratio: 1; margin: 0; align-self: start; border-radius: 14px; }
.mcard__foot { grid-column: 1 / -1 !important; }
.lg-facts .fact-strip__inner { padding: 16px 18px; gap: 10px 18px; font-size: .68rem; }
.lg-article__art { height: 76px; }
.lg-cta__panel { padding: 26px 20px; }
.btn--split { white-space: normal; text-align: left; }
}
/* ── 60-material.css ── */
/* Group B — Liquid Glass: material page (YInMn Blue), ultra-black category, industries hub + industry landing. */
/* ═══ Shared bits ═══════════════════════════════════════════════════ */
/* Icon chip (glass square) used on cells, panels and rows */
.mat-ic, .ind-problem__ic, .ind-link__ic { flex: none; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; color: var(--text);
background: rgba(255, 255, 255, .07); border: 1px solid var(--glass-line); box-shadow: 0 1px 0 rgba(255, 255, 255, .2) inset; }
.mat-ic--pigment { background: linear-gradient(135deg, rgba(74, 102, 240, .55), rgba(28, 52, 166, .35)); border-color: rgba(169, 184, 255, .35); box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 8px 22px -8px rgba(74, 102, 240, .7); }
.mat-ic--gold { color: var(--gold-ink); background: linear-gradient(135deg, rgba(255, 210, 122, .2), rgba(255, 210, 122, .05)); border-color: rgba(255, 210, 122, .3); }
/* Long reading text on ink */
.mat-prose, .ub-prose { max-width: 70ch; }
.mat-prose p, .ub-prose p { font-size: 1.08rem; line-height: 1.75; color: var(--text-2); text-wrap: pretty; }
.mat-prose p + p, .ub-prose p + p { margin-top: 1.05em; }
/* Inline citation marker linking to the reference list */
.mat-cite { font-family: var(--f-mono); font-size: .8em; color: var(--yinmn-ink); white-space: nowrap; }
.mat-cite:hover { color: var(--text); text-decoration: underline; }
/* ═══ YInMn Blue — hero ═════════════════════════════════════════════ */
@media (min-width: 1024px) { .mat-hero { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }
/* The stage: a dark glass vitrine holding a live liquid drop of the pigment */
.mat-stage { margin: 0; min-height: clamp(360px, 44vw, 640px); border-radius: var(--r-xl); overflow: hidden; display: grid; place-items: center;
--glass-fill: radial-gradient(70% 60% at 50% 42%, rgba(28, 52, 166, .38), transparent 70%), linear-gradient(160deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .01) 45%), rgba(4, 6, 16, .72);
-webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%); box-shadow: var(--e-3); }
.mat-stage > * { grid-area: 1 / 1; }
.mat-stage__glow { position: absolute; inset: 0; pointer-events: none;
background: radial-gradient(38% 36% at 50% 46%, rgba(74, 102, 240, .55), transparent 70%), radial-gradient(60% 30% at 50% 88%, rgba(59, 87, 216, .28), transparent 70%);
animation: matBreath 7s var(--ease-io) infinite alternate; }
@keyframes matBreath { from { opacity: .7; transform: scale(.96); } to { opacity: 1; transform: scale(1.04); } }
.mat-stage__rings { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.mat-stage__rings span { grid-area: 1 / 1; width: var(--s); aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(169, 184, 255, .12);
-webkit-mask: linear-gradient(160deg, #000, transparent 70%); mask: linear-gradient(160deg, #000, transparent 70%); animation: swirl 40s linear infinite; }
.mat-stage__rings span:nth-child(1) { --s: min(84%, 500px); }
.mat-stage__rings span:nth-child(2) { --s: min(104%, 620px); border-color: rgba(169, 184, 255, .08); animation-duration: 60s; animation-direction: reverse; }
.mat-stage__rings span:nth-child(3) { --s: min(126%, 760px); border-color: rgba(169, 184, 255, .05); animation-duration: 80s; }
.mat-drop { --px: 0; --py: 0; position: relative; z-index: 1; width: min(66%, 400px); aspect-ratio: 1; border-radius: 50% 50% 50% 50% / 56% 56% 44% 44%; overflow: hidden;
box-shadow: 0 60px 120px -30px rgba(74, 102, 240, .8), 0 0 80px -10px rgba(59, 87, 216, .55), 0 0 0 1px rgba(255, 255, 255, .1);
animation: blob 12s var(--ease-io) infinite alternate, matFloat 8s var(--ease-io) infinite alternate;
transform: translate3d(calc(var(--px) * 10px), calc(var(--py) * 10px), 0); transition: transform 1.2s var(--ease); }
@keyframes matFloat { from { translate: 0 -8px; } to { translate: 0 10px; } }
.mat-drop > span { position: absolute; pointer-events: none; }
.mat-drop__body { inset: 0; background: var(--sw); }
.mat-drop__swirl { inset: -30%; animation: swirl 24s linear infinite; mix-blend-mode: soft-light; filter: blur(22px);
background: conic-gradient(from 0deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .5), rgba(0, 0, 0, .4), rgba(255, 255, 255, .28), rgba(0, 0, 0, .35), rgba(255, 255, 255, 0)); }
.mat-drop__caustic { left: 18%; right: 12%; bottom: 4%; height: 38%; border-radius: 50%; filter: blur(18px); mix-blend-mode: screen;
background: radial-gradient(closest-side, rgba(130, 160, 255, .75), rgba(74, 102, 240, .2) 60%, transparent);
transform: translate(calc(var(--px) * -14px), calc(var(--py) * -8px)); transition: transform 1.2s var(--ease); }
.mat-drop__spec { left: 16%; top: 9%; width: 42%; height: 25%; border-radius: 50%; filter: blur(6px);
background: radial-gradient(closest-side, rgba(255, 255, 255, .85), rgba(255, 255, 255, .15) 70%, transparent);
transform: translate(calc(var(--px) * 18px), calc(var(--py) * 12px)) rotate(-18deg); transition: transform 1.2s var(--ease); }
.mat-drop__rim { inset: 0; border-radius: inherit; box-shadow: inset 0 -34px 64px rgba(0, 0, 0, .55), inset 0 22px 44px rgba(255, 255, 255, .16), inset 0 0 0 1px rgba(255, 255, 255, .14); }
.mat-stage__pool { position: relative; align-self: end; width: min(56%, 340px); height: 46px; margin-bottom: clamp(56px, 7vw, 92px); border-radius: 50%; filter: blur(16px); pointer-events: none;
background: radial-gradient(closest-side, rgba(74, 102, 240, .7), rgba(28, 52, 166, .25) 60%, transparent); animation: matBreath 8s var(--ease-io) infinite alternate-reverse; }
.mat-stage__caption { position: relative; z-index: 2; align-self: end; margin-bottom: 18px; display: inline-flex; align-items: center; gap: 8px; max-width: calc(100% - 32px);
padding: 8px 14px; border-radius: var(--r-pill); background: rgba(6, 8, 18, .72); border: 1px solid var(--glass-line); color: var(--text-2); text-align: center;
-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.mat-stage__caption .ic { color: var(--yinmn-ink); }
.mat-hero__main { display: flex; flex-direction: column; justify-content: center; }
.mat-hero__title { font-size: clamp(2.3rem, 1.1rem + 2.7vw, 3.7rem); margin-bottom: 18px; }
.mat-ink { background: linear-gradient(100deg, #D4DCFF 0%, #8FA4FF 42%, #B9C6FF 70%, #7E96FF 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: iri-slide 12s linear infinite; }
.mat-formula { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin-bottom: 22px; }
.mat-formula li { padding: 6px 12px; border-radius: var(--r-pill); font-family: var(--f-mono); font-size: .66rem; letter-spacing: .1em; line-height: 1.5; color: var(--text-2);
background: rgba(255, 255, 255, .05); border: 1px solid var(--glass-line); }
.mat-formula .mat-formula__chem { color: var(--text); letter-spacing: .04em; font-size: .74rem; background: rgba(74, 102, 240, .18); border-color: rgba(169, 184, 255, .35); }
.mat-formula .mat-cite { font-size: 1em; }
.mat-hero__lead { max-width: 60ch; margin-bottom: 16px; }
@media (min-width: 1024px) { .mat-hero__main { padding: clamp(30px, 3.4vw, 48px); } }
.mat-hero__lead em { color: var(--text); }
.mat-hero__note { display: flex; gap: 10px; align-items: flex-start; max-width: 60ch; font-size: .93rem; line-height: 1.55; color: var(--c-muted); margin-bottom: 24px; }
.mat-hero__note .ic { margin-top: 2px; color: var(--yinmn-ink); }
.mat-hero__status { --gap: 10px 14px; margin-bottom: 22px; }
.mat-hero__ctas { --gap: 12px; }
.mat-hero__ask { margin-left: 6px; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.mat-add { min-width: 12.5rem; }
/* ═══ YInMn Blue — body: reading column + record aside ══════════════ */
.mat-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 420px); gap: clamp(28px, 4.5vw, 72px); align-items: start;
max-width: calc(var(--page-max) + var(--gutter) * 2); margin: 0 auto; padding: clamp(24px, 4vw, 56px) var(--gutter) var(--section-y); }
.mat-layout__main, .mat-layout__aside { min-width: 0; }
.mat-sec + .mat-sec { margin-top: clamp(56px, 6.5vw, 96px); }
.mat-h2 { margin-bottom: 22px; max-width: 26ch; }
.mat-intro { max-width: 70ch; margin-bottom: 24px; }
.mat-callout { --pad: 26px 28px; margin-top: 30px; }
.mat-callout__title { display: flex; align-items: center; gap: 10px; color: var(--yinmn-ink); margin-bottom: 12px; }
.mat-list { list-style: none; }
@media (min-width: 641px) { .mat-list.grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mat-cell { --pad: 24px 22px 26px; gap: 10px; }
.mat-cell .mat-ic { margin-bottom: 8px; }
.mat-cell__title { margin: 0; }
.mat-cell__kicker { color: var(--yinmn-ink); margin: 0; }
/* Comparison: three findings on a glowing evidence line */
.mat-compare { --pad: clamp(24px, 3vw, 34px); margin-bottom: 16px; }
.mat-compare__item { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 18px; row-gap: 8px; padding-bottom: 28px; }
.mat-compare__item:last-child { padding-bottom: 0; }
.mat-compare__item:not(:last-child)::after { content: ""; position: absolute; left: 19px; top: 46px; bottom: 6px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, rgba(169, 184, 255, .55), rgba(169, 184, 255, .08)); }
.mat-compare__node { grid-row: span 2; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--text);
background: radial-gradient(circle at 35% 30%, #2A2F48, #0B0E1C); border: 1px solid rgba(255, 255, 255, .2); box-shadow: 0 0 18px rgba(140, 160, 255, .3); }
.mat-compare__item.is-key .mat-compare__node { background: radial-gradient(circle at 35% 30%, #5A74FF, #1C34A6); box-shadow: 0 0 30px rgba(90, 116, 255, .85); }
.mat-compare__title { margin-top: 9px; }
.mat-compare__item.is-key .mat-compare__title { color: #C9D3FF; }
.mat-note { margin-bottom: 20px; }
/* Handling: 2-up glass tiles */
.mat-handling { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: clamp(12px, 1.4vw, 16px); }
.mat-handle { --pad: 24px 24px 26px; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; row-gap: 6px; align-items: start; align-content: start; }
.mat-handle .mat-ic { grid-row: span 2; }
.mat-handle .mat-cell__title { margin-top: 10px; }
/* ── Aside: separate glass panels ───────────────────────────────── */
.mat-layout__aside { display: flex; flex-direction: column; gap: 16px; }
.mat-panel { padding: clamp(22px, 2.4vw, 30px); border-radius: var(--r-lg); }
.mat-panel__head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.mat-panel__title { color: var(--text); margin: 0; }
.mat-panel__title--solo { margin-bottom: 16px; }
.mat-panel__intro { margin-bottom: 18px; }
.mat-panel .fineprint { color: var(--text-3); }
.mat-panel .fineprint.c-error { color: var(--candy-ink); }
/* Records: label/value rows on soft alternating glass bands (no rules) */
.mat-record { display: grid; gap: 2px; }
.mat-record > div { display: grid; grid-template-columns: minmax(96px, 38%) minmax(0, 1fr); column-gap: 14px; row-gap: 4px; padding: 11px 12px; border-radius: 10px; }
.mat-record > div:nth-child(odd) { background: rgba(255, 255, 255, .04); }
.mat-record dt { font-family: var(--f-mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); line-height: 1.5; padding-top: 3px; }
.mat-record dd { font-size: .92rem; line-height: 1.45; color: var(--text); }
.mat-record dd.mat-record__src { grid-column: 2; font-size: .8rem; line-height: 1.45; color: var(--text-3); }
.mat-panel--commercial { --glass-fill: linear-gradient(145deg, rgba(255, 210, 122, .08), rgba(255, 255, 255, .015) 45%), rgba(14, 13, 24, .6); }
.mat-record--commercial dd { color: var(--text-2); }
.mat-record--commercial > .mat-record__status { grid-template-columns: 1fr; background: linear-gradient(100deg, rgba(255, 210, 122, .14), rgba(255, 210, 122, .03)); border: 1px solid rgba(255, 210, 122, .28); margin-bottom: 6px; padding: 12px 14px; }
.mat-record__status dd { display: flex; gap: 10px; align-items: baseline; font-family: var(--f-mono); font-size: .72rem; letter-spacing: .1em; line-height: 1.5; color: var(--gold-ink); }
.mat-record__status dd::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--gold-ink); box-shadow: 0 0 10px rgba(255, 210, 122, .8); transform: translateY(-1px); }
.mat-record--commercial > div:nth-child(odd) { background: none; }
.mat-record--commercial > div:nth-child(even):not(.mat-record__status) { background: rgba(255, 255, 255, .04); }
.mat-disclaimer { margin-top: 16px; padding: 14px 16px; }
.mat-disclaimer p:not(.note__title) { font-size: .88rem; line-height: 1.55; }
/* Documents: glass rows with icons */
.mat-docs { display: grid; gap: 10px; list-style: none; }
.mat-doc { width: 100%; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 12px 14px 12px 12px; border-radius: 16px; cursor: pointer; text-align: left;
font: inherit; color: var(--text); background: rgba(255, 255, 255, .045); border: 1px solid var(--glass-line); box-shadow: 0 1px 0 rgba(255, 255, 255, .08) inset;
transition: border-color var(--t), background var(--t), transform var(--t) var(--ease); }
.mat-doc:hover { border-color: var(--glass-line-hi); background: rgba(255, 255, 255, .08); transform: translateY(-1px); }
.mat-doc__ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: var(--yinmn-ink); background: rgba(74, 102, 240, .14); border: 1px solid rgba(169, 184, 255, .25); }
.mat-doc__name { display: grid; gap: 2px; font-family: var(--f-display); font-weight: 500; font-size: 1rem; letter-spacing: -.01em; line-height: 1.25; }
.mat-doc__act { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: var(--r-pill); font-size: .8rem; font-weight: 600; white-space: nowrap; color: var(--yinmn-ink);
background: rgba(74, 102, 240, .1); border: 1px solid rgba(169, 184, 255, .3); transition: color var(--t), border-color var(--t); }
.mat-doc:hover .mat-doc__act { color: var(--text); border-color: rgba(169, 184, 255, .6); }
/* Link rows */
.mat-links { display: grid; gap: 6px; list-style: none; }
.mat-links a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 10px 14px; border-radius: 12px; color: var(--text-2); background: rgba(255, 255, 255, .03);
transition: background var(--t), color var(--t); }
.mat-links a .ic { color: var(--text-3); transition: transform var(--t) var(--ease), color var(--t); }
.mat-links a:hover { color: var(--text); background: rgba(255, 255, 255, .08); }
.mat-links a:hover .ic { color: var(--text); transform: translate(2px, -2px); }
/* References: readable sentence case, number badge + meta line */
.mat-refs { display: grid; gap: 16px; list-style: none; }
.mat-refs li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; scroll-margin-top: calc(var(--header-h) + 24px); border-radius: 10px; transition: background var(--t); }
.mat-refs li:target { background: rgba(74, 102, 240, .16); outline: 1px solid rgba(169, 184, 255, .45); outline-offset: 6px; }
.mat-refs__n { font-family: var(--f-mono); font-size: .76rem; color: var(--yinmn-ink); line-height: 1.9; }
.mat-refs__body { font-size: .9rem; line-height: 1.6; color: var(--text-2); overflow-wrap: anywhere; }
.mat-refs__body em { color: var(--text); }
.mat-refs__body .label { display: block; margin-top: 4px; }
.mat-correction .correction { min-height: 52px; }
/* Closing availability CTA (reuses the homepage lg-cta), recoloured to the pigment */
.mat-cta .lg-cta__paint .b2 { background: radial-gradient(circle, #4B3BD6 0%, rgba(60, 46, 190, .55) 40%, transparent 70%); }
.mat-cta .lg-cta__paint .b3 { background: radial-gradient(circle, rgba(170, 190, 255, .45), transparent 70%); }
.mat-cta__title { max-width: 20ch; }
.mat-cta .lg-cta__actions { align-self: center; }
/* ═══ Ultra-black ═══════════════════════════════════════════════════ */
@media (min-width: 1024px) { .ub-hero { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); } }
.ub-hero__main { display: flex; flex-direction: column; justify-content: center;
background: linear-gradient(145deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .015) 42%, rgba(255, 255, 255, .02)), rgba(3, 3, 7, .66); }
.ub-eyebrow::before { background: #E6E9F2; box-shadow: 0 0 0 3px rgba(230, 233, 242, .12), 0 0 14px 2px rgba(230, 233, 242, .45); }
.ub-hero__title { margin-bottom: 22px; max-width: 18ch; }
.ub-hero__lead { max-width: 62ch; margin-bottom: 30px; }
.ub-hero__ctas { --gap: 12px; }
.ub-add { min-width: 12.5rem; }
.ub-hero__aside { display: flex; flex-direction: column; gap: 22px; overflow: hidden;
background: radial-gradient(70% 50% at 50% 30%, rgba(0, 0, 0, .9), transparent 75%), linear-gradient(160deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0) 40%), rgba(2, 2, 5, .82); }
/* The void: light streaks fall inward and never come back */
.ub-void { position: relative; width: min(100%, 360px); aspect-ratio: 1; margin: 4px auto 0; flex: none; }
.ub-void > span { position: absolute; pointer-events: none; }
/* faint scattered light around the hole, so the black reads as an absence */
.ub-void::before { content: ""; position: absolute; inset: -18%; border-radius: 50%; pointer-events: none;
background: radial-gradient(circle, transparent 26%, rgba(150, 162, 200, .16) 38%, rgba(120, 130, 170, .07) 52%, transparent 70%); }
.ub-void__rays { inset: -8%; border-radius: 50%;
background: repeating-conic-gradient(from 0deg, rgba(220, 228, 250, 0) 0deg 6deg, rgba(220, 228, 250, .55) 6deg 6.7deg, rgba(220, 228, 250, 0) 6.7deg 12deg);
-webkit-mask: radial-gradient(circle, transparent 29%, #000 34%, rgba(0, 0, 0, .55) 50%, transparent 68%); mask: radial-gradient(circle, transparent 29%, #000 34%, rgba(0, 0, 0, .55) 50%, transparent 68%);
animation: ubInfall 5s cubic-bezier(.55, 0, .9, .5) infinite; }
.ub-void__rays::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; transform: rotate(6deg); animation: ubInfall 5s cubic-bezier(.55, 0, .9, .5) infinite -2.5s; }
@keyframes ubInfall { 0% { transform: scale(1.25) rotate(0deg); opacity: 0; } 30% { opacity: 1; } 100% { transform: scale(.56) rotate(28deg); opacity: 0; } }
/* light bending around the edge of the film */
.ub-void__halo { inset: 17%; border-radius: 50%;
background: radial-gradient(circle, transparent 55%, rgba(210, 218, 245, .42) 61%, rgba(160, 172, 220, .12) 66%, transparent 74%); filter: blur(1.5px);
-webkit-mask: conic-gradient(from 200deg, #000, rgba(0, 0, 0, .25) 30%, #000 55%, rgba(0, 0, 0, .3) 80%, #000); mask: conic-gradient(from 200deg, #000, rgba(0, 0, 0, .25) 30%, #000 55%, rgba(0, 0, 0, .3) 80%, #000);
animation: swirl 14s linear infinite; }
.ub-void__core { inset: 25%; border-radius: 50% 50% 50% 50% / 54% 54% 46% 46%; background: #000; animation: blob 16s var(--ease-io) infinite alternate;
box-shadow: 0 0 0 1px rgba(255, 255, 255, .03), 0 0 30px 12px #000, 0 0 90px 30px rgba(0, 0, 0, .75), inset 0 0 30px #000; }
.ub-void__glint { left: 50%; top: 50%; width: 64%; height: 2px; transform-origin: 0 50%; transform: rotate(-138deg); }
.ub-void__glint::after { content: ""; position: absolute; top: 0; height: 2px; width: 36%; left: 100%; border-radius: 2px;
background: linear-gradient(90deg, #fff, rgba(255, 255, 255, 0)); box-shadow: 0 0 10px rgba(255, 255, 255, .7); animation: ubRay 4.2s cubic-bezier(.5, 0, .9, .6) infinite 1s; }
@keyframes ubRay { 0% { left: 100%; opacity: 0; } 18% { opacity: 1; } 80% { opacity: .9; } 100% { left: 38%; opacity: 0; width: 4%; } }
.ub-clar { padding: 20px 22px; border-radius: var(--r-md); background: rgba(255, 255, 255, .045); border: 1px solid var(--glass-line); box-shadow: 0 1px 0 rgba(255, 255, 255, .08) inset; }
.ub-clar__title { display: flex; align-items: center; gap: 10px; color: var(--text-2); margin-bottom: 10px; }
.ub-clar__text { color: var(--text-2); }
.ub-h2 { margin-bottom: 24px; max-width: 24ch; }
.ub-lit { --pad: 24px 26px; margin: 34px 0 26px; background: linear-gradient(145deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .01)), rgba(3, 3, 8, .66); }
.ub-lit__title { display: flex; align-items: flex-start; gap: 10px; color: var(--text-2); margin-bottom: 12px; }
.ub-lit__title .ic { margin-top: 1px; }
.ub-table-wrap { box-shadow: var(--e-2); }
.ub-table { min-width: 640px; background: linear-gradient(145deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .01)), rgba(3, 3, 8, .7); }
.ub-table td { padding-top: 16px; padding-bottom: 16px; }
.ub-table th:first-child { width: 27%; }
.ub-route { display: inline-flex; align-items: center; gap: 12px; }
/* Three little pools: from a matte film to a near-perfect absorber */
.ub-pool { flex: none; width: 30px; height: 30px; border-radius: 50%; }
.ub-pool--matte { background: radial-gradient(circle at 38% 30%, #34363E, #111216 70%); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .12), 0 0 0 1px rgba(255, 255, 255, .1); }
.ub-pool--struct { background: repeating-linear-gradient(135deg, #1B1C22 0 2px, #07070A 2px 5px); box-shadow: 0 0 0 1px rgba(255, 255, 255, .1); }
.ub-pool--grown { background: #000; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 0 14px 4px rgba(0, 0, 0, .9); }
/* Deep black pool behind the specification band */
.ub-spec::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background: radial-gradient(50% 58% at 50% 55%, rgba(0, 0, 0, .9), rgba(0, 0, 0, .55) 55%, transparent 78%),
radial-gradient(60% 70% at 50% 55%, transparent 56%, rgba(170, 180, 210, .06) 62%, transparent 70%); }
.ub-spec-intro { max-width: 66ch; margin-bottom: 30px; }
.ub-cells { list-style: none; }
.ub-cell { --pad: 26px 24px 28px; gap: 10px; --glass-fill: linear-gradient(160deg, rgba(255, 255, 255, .065), rgba(255, 255, 255, 0) 50%), rgba(2, 2, 5, .72); }
.ub-cell__n { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 10px; color: var(--text-2);
background: radial-gradient(circle at 50% 40%, #000 55%, #16181F); box-shadow: inset 0 0 14px #000, 0 0 0 1px rgba(255, 255, 255, .12), 0 10px 24px -8px #000; }
.ub-cell__title { margin: 0; }
/* ═══ Industries hub + landing ══════════════════════════════════════ */
.ind-hero__main { overflow: hidden; }
.ind-hero__title { margin-bottom: 22px; max-width: 20ch; }
.ind-hero__title--landing { max-width: 22ch; }
.ind-lead { max-width: 64ch; }
/* Hub: six pigment drops, one per sector, floating at the slab's edge */
.ind-hero__main--drops > :not(.ind-drops) { position: relative; z-index: 1; }
.ind-drops { position: absolute; right: clamp(24px, 5vw, 80px); top: 50%; width: clamp(220px, 26vw, 360px); aspect-ratio: 1.25; transform: translateY(-50%); pointer-events: none; }
.ind-drops span { position: absolute; width: var(--d); aspect-ratio: 1; border-radius: 50% 50% 50% 50% / 56% 56% 44% 44%; background: var(--sw); overflow: hidden;
box-shadow: inset 0 -10px 18px rgba(0, 0, 0, .45), inset 0 8px 14px rgba(255, 255, 255, .3), 0 14px 40px -6px var(--glow); animation: blob 10s var(--ease-io) infinite alternate, matFloat 7s var(--ease-io) infinite alternate; }
.ind-drops span::after { content: ""; position: absolute; left: 18%; top: 12%; width: 36%; height: 22%; border-radius: 50%; background: rgba(255, 255, 255, .65); filter: blur(3px); }
.ind-drops span:nth-child(1) { --d: 34%; left: 6%; top: 8%; }
.ind-drops span:nth-child(2) { --d: 22%; left: 46%; top: 0; animation-delay: -2s, -3s; }
.ind-drops span:nth-child(3) { --d: 26%; left: 72%; top: 22%; animation-delay: -4s, -1s; }
.ind-drops span:nth-child(4) { --d: 20%; left: 30%; top: 58%; animation-delay: -6s, -5s; }
.ind-drops span:nth-child(5) { --d: 28%; left: 56%; top: 56%; animation-delay: -1s, -2s; }
.ind-drops span:nth-child(6) { --d: 16%; left: 4%; top: 64%; animation-delay: -3s, -6s; }
@media (min-width: 1024px) { .ind-hero__main--drops { padding-right: clamp(300px, 34vw, 480px); } }
@media (max-width: 1023px) { .ind-drops { display: none; } }
.ind-grid { list-style: none; }
.ind-grid > li { display: flex; }
.ind-card { --pad: 26px 26px 28px; flex: 1 1 auto; gap: 12px; }
.ind-card__top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 8px; }
.ind-card__drop { width: 54px; height: 54px; border-radius: 50% 50% 50% 50% / 56% 56% 44% 44%; display: grid; place-items: center; color: #fff; background: var(--sw);
box-shadow: inset 0 -8px 14px rgba(0, 0, 0, .45), inset 0 6px 10px rgba(255, 255, 255, .3), 0 12px 30px -6px var(--glow); animation: blob 9s var(--ease-io) infinite alternate; }
.ind-card__drop .ic { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6)); }
.ind-card__arrow { color: var(--text-3); transition: transform var(--t) var(--ease), color var(--t); }
.ind-card:hover .ind-card__arrow { color: var(--text); transform: translate(2px, -2px); }
.ind-card__path { overflow-wrap: anywhere; margin: 0; }
.ind-card__title { margin: 0; }
.ind-card__go { margin-top: auto; padding-top: 8px; display: inline-flex; align-items: center; gap: 8px; color: var(--yinmn-ink); }
.ind-card:hover .ind-card__go .ic { transform: translateX(3px); }
.ind-card__go .ic { transition: transform var(--t) var(--ease); }
/* Landing: candy drop in the hero slab */
.ind-hero__main--drop > :not(.ind-hero__drop) { position: relative; z-index: 1; }
.ind-hero__drop { position: absolute; right: clamp(28px, 6vw, 96px); top: 50%; width: clamp(180px, 20vw, 280px); aspect-ratio: 1; transform: translateY(-50%); pointer-events: none; }
.ind-hero__drop::before { content: ""; position: absolute; inset: -30%; border-radius: 50%; background: radial-gradient(closest-side, rgba(240, 74, 80, .4), transparent); filter: blur(10px); }
.ind-hero__drop span { position: absolute; inset: 0; border-radius: 50% 50% 50% 50% / 56% 56% 44% 44%; overflow: hidden;
background: radial-gradient(110% 95% at 34% 10%, #F04A50 0%, #B4121B 44%, #46060A 100%);
box-shadow: inset 0 -26px 50px rgba(0, 0, 0, .5), inset 0 18px 34px rgba(255, 255, 255, .22), 0 40px 90px -20px rgba(226, 58, 64, .7), 0 0 0 1px rgba(255, 255, 255, .1);
animation: blob 12s var(--ease-io) infinite alternate, matFloat 8s var(--ease-io) infinite alternate; }
.ind-hero__drop span::before { content: ""; position: absolute; inset: -30%; animation: swirl 20s linear infinite; mix-blend-mode: soft-light; filter: blur(18px);
background: conic-gradient(from 0deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .5), rgba(0, 0, 0, .35), rgba(255, 255, 255, .25), rgba(0, 0, 0, .3), rgba(255, 255, 255, 0)); }
.ind-hero__drop span::after { content: ""; position: absolute; left: 17%; top: 10%; width: 40%; height: 24%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .85), transparent); filter: blur(5px); transform: rotate(-18deg); }
@media (min-width: 1024px) { .ind-hero__main--drop { padding-right: clamp(260px, 28vw, 420px); } }
@media (max-width: 1023px) {
.ind-hero__drop { position: relative; right: auto; top: auto; transform: none; width: 84px; margin-bottom: 22px; }
.ind-hero__drop::before { inset: -40%; }
}
/* Landing: problems */
@media (min-width: 900px) { .ind-problems__head { position: sticky; top: calc(var(--header-h) + 24px); } }
.ind-problems__head .h-2-md { margin-bottom: 18px; max-width: 16ch; }
.ind-problems__head .text-lg { max-width: 44ch; }
.ind-problem-list { list-style: none; gap: 14px; }
.ind-problem { --pad: 26px 26px 28px; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 18px; align-items: start; }
.ind-problem__ic { width: 48px; height: 48px; color: var(--candy-ink); background: linear-gradient(135deg, rgba(240, 74, 80, .28), rgba(180, 18, 27, .12)); border-color: rgba(255, 163, 167, .3); box-shadow: 0 1px 0 rgba(255, 255, 255, .2) inset, 0 8px 22px -8px rgba(240, 74, 80, .6); }
.ind-problem__kicker { color: var(--candy-ink); margin-bottom: 8px; }
.ind-problem__title { margin-bottom: 8px; }
/* Landing: identification ladder — a glowing line whose nodes dim as reliability falls */
.ind-identify__panel { padding: clamp(26px, 4.5vw, 56px); border-radius: var(--r-xl); }
.ind-identify__title { margin-bottom: 30px; max-width: 24ch; }
.ind-steps { list-style: none; display: grid; }
.ind-steps li { --g: 1; position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 18px; padding-bottom: 22px; }
.ind-steps li:nth-child(2) { --g: .8; }
.ind-steps li:nth-child(3) { --g: .62; }
.ind-steps li:nth-child(4) { --g: .45; }
.ind-steps li:nth-child(5) { --g: .3; }
.ind-steps li:not(:last-child)::before { content: ""; position: absolute; left: 21px; top: 48px; bottom: 4px; width: 2px; border-radius: 2px;
background: linear-gradient(180deg, rgba(240, 74, 80, calc(var(--g) * .8)), rgba(240, 74, 80, calc(var(--g) * .45))); }
.ind-steps__node { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-family: var(--f-mono); font-size: .8rem; color: #fff;
background: radial-gradient(circle at 35% 30%, rgba(255, 120, 126, var(--g)), rgba(180, 18, 27, var(--g))), #1A1D2E; border: 1px solid rgba(255, 255, 255, .2);
box-shadow: 0 0 calc(30px * var(--g)) rgba(240, 74, 80, calc(var(--g) * .85)); }
.ind-steps p { padding-top: 9px; font-size: 1.05rem; line-height: 1.6; color: var(--text-2); }
.ind-steps li:first-child p { color: var(--text); }
.ind-identify__foot { display: flex; gap: 14px; align-items: flex-start; margin-top: 10px; padding: 18px 20px; border-radius: var(--r-md); background: rgba(255, 255, 255, .04); border: 1px solid var(--glass-line); }
.ind-identify__foot .ic { flex: none; margin-top: 3px; color: var(--gold-ink); }
/* Landing: material links */
.ind-links { list-style: none; }
.ind-link { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 14px; height: 100%; padding: 16px 18px 16px 16px; border-radius: var(--r-md); color: var(--text);
font-family: var(--f-display); font-weight: 500; font-size: 1.05rem; letter-spacing: -.01em; line-height: 1.3; position: relative; isolation: isolate;
background: var(--glass-fill); border: 1px solid var(--glass-line); box-shadow: var(--e-1); }
.ind-link:hover { color: var(--text); border-color: var(--glass-line-hi); box-shadow: var(--e-3); }
.ind-link__ic { color: var(--candy-ink); }
.ind-link__go { color: var(--text-3); transition: transform var(--t) var(--ease), color var(--t); }
.ind-link:hover .ind-link__go { color: var(--text); transform: translate(2px, -2px); }
/* ═══ Responsive ════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
.mat-layout { grid-template-columns: minmax(0, 1fr); }
.mat-layout__aside { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); align-items: start; }
.mat-stage { min-height: clamp(340px, 70vw, 520px); }
}
@media (max-width: 640px) {
.mat-stage { min-height: 360px; }
.mat-drop { width: min(62%, 260px); }
.mat-stage__pool { margin-bottom: 64px; }
.mat-stage__caption { font-size: .58rem; padding: 7px 12px; }
.mat-hero__ctas .btn, .ub-hero__ctas .btn { width: 100%; }
.mat-hero__ask { margin-left: 0; }
.mat-callout { --pad: 22px 20px; }
.mat-compare__item { grid-template-columns: 34px minmax(0, 1fr); column-gap: 14px; }
.mat-compare__node { width: 34px; height: 34px; }
.mat-compare__item:not(:last-child)::after { left: 16px; top: 40px; }
.mat-compare__title { margin-top: 6px; }
.mat-handle { grid-template-columns: 1fr; }
.mat-handle .mat-ic { grid-row: auto; }
.mat-handle .mat-cell__title { margin-top: 4px; }
.mat-record > div { grid-template-columns: 1fr; padding: 10px 12px; }
.mat-record dd.mat-record__src { grid-column: 1; }
.mat-doc { grid-template-columns: 40px minmax(0, 1fr); }
.mat-doc__ic { width: 40px; height: 40px; }
.mat-doc__act { grid-column: 2; justify-self: start; }
.ub-void { width: min(100%, 260px); }
.ind-problem { grid-template-columns: 1fr; gap: 14px; }
.ind-steps li { grid-template-columns: 36px minmax(0, 1fr); gap: 14px; }
.ind-steps__node { width: 36px; height: 36px; }
.ind-steps li:not(:last-child)::before { left: 17px; top: 40px; }
.ind-steps p { padding-top: 5px; font-size: 1rem; }
}
/* Industries hub grid: 3-up so six sectors sit in two even rows */
.ind-band--grid { padding-top: clamp(8px, 1.5vw, 20px); }
@media (min-width: 1024px) { .ind-grid.grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 641px) and (max-width: 1023px) { .ind-grid.grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .ub-clar { padding: 16px; } .ub-hero__aside { padding: 20px 16px; } }
@media (max-width: 640px) {
.ind-identify__panel { padding: 24px 18px 22px; }
.ind-identify__foot { flex-direction: column; gap: 10px; padding: 16px; }
}
/* ── 60-planned.css ── */
/* Group G — "in preparation" placeholder pages and the 404 page (Liquid Glass).
Signature: a live liquid drop in the section's own pigments falling into a pool (planned pages);
a liquid-metal "4 · 4" with a spilled-paint drop for the zero (404). */
/* Section pigments — mirrors the backdrop palettes in tools/build.js (PALETTES). */
.planned { --pa: #1C34A6; --pb: #B4121B; }
[data-route^="/automotive-paints/"] .planned { --pa: #B4121B; --pb: #1C34A6; }
[data-route^="/colour-library/"] .planned { --pa: #2A3FC8; --pb: #C0498A; }
[data-route^="/knowledge/"] .planned { --pa: #3B57D8; --pb: #9E93C4; }
[data-route^="/industries/"] .planned { --pa: #1E7A5E; --pb: #2A48C8; }
[data-route^="/rare-pigments/"] .planned { --pa: #2440C8; --pb: #7A48BC; }
[data-route^="/legal/"] .planned { --pa: #3F7CB8; --pb: #7B7FB8; }
.planned { position: relative; width: 100%; max-width: calc(940px + var(--gutter) * 2); margin: 0 auto; padding: clamp(28px, 4vw, 64px) var(--gutter) clamp(72px, 9vw, 128px); display: grid; gap: clamp(26px, 3.4vw, 40px); }
/* ── Glass slab ─────────────────────────────────────────────────── */
.planned__slab { position: relative; isolation: isolate; display: grid; justify-items: center; text-align: center; padding: clamp(30px, 5vw, 64px) clamp(22px, 5vw, 64px) clamp(28px, 4.4vw, 56px); border-radius: var(--r-xl);
background: linear-gradient(145deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .02) 42%, rgba(255, 255, 255, .035)), rgba(8, 10, 22, .58);
-webkit-backdrop-filter: blur(28px) saturate(170%); backdrop-filter: blur(28px) saturate(170%);
border: 1px solid var(--glass-line); box-shadow: var(--e-3), inset 0 0 60px rgba(120, 140, 255, .05); }
/* Specular edge + faint pigment glow pooled under the drop */
.planned__slab::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; z-index: -1; padding: 1px;
background: linear-gradient(180deg, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0) 26%, rgba(255, 255, 255, 0) 80%, rgba(255, 255, 255, .1)),
linear-gradient(90deg, rgba(255, 110, 150, .3), rgba(255, 255, 255, 0) 18%, rgba(255, 255, 255, 0) 82%, rgba(110, 190, 255, .3));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.planned__slab::after { content: ""; position: absolute; left: 50%; top: 0; width: min(520px, 90%); height: 260px; transform: translateX(-50%); z-index: -1; pointer-events: none; border-radius: 50%;
background: radial-gradient(closest-side, color-mix(in srgb, var(--pa) 34%, transparent), transparent); filter: blur(20px); opacity: .8; }
.planned__eyebrow { justify-content: center; width: fit-content; margin: 0 0 20px; padding: 7px 14px 7px 12px; border-radius: var(--r-pill); color: var(--text); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); }
.planned__eyebrow::before { background: var(--gold-ink); box-shadow: 0 0 0 3px rgba(255, 210, 122, .18), 0 0 12px 2px rgba(255, 210, 122, .7); animation: planned-pulse 2.4s var(--ease-io) infinite; }
@keyframes planned-pulse { 50% { box-shadow: 0 0 0 6px rgba(255, 210, 122, 0), 0 0 18px 3px rgba(255, 210, 122, .45); } }
.planned--404 .planned__eyebrow::before { background: var(--candy-hi); box-shadow: 0 0 0 3px rgba(240, 74, 80, .22), 0 0 14px 2px rgba(240, 74, 80, .8); animation: none; }
.planned__title { font-family: var(--f-display); font-weight: 500; font-size: clamp(2rem, 1.2rem + 2.6vw, 3.6rem); line-height: 1.04; letter-spacing: -.04em; color: var(--text); text-wrap: balance; max-width: 22ch; margin-bottom: 18px; }
.planned__lead { font-family: var(--f-sans); font-size: var(--t-lead); line-height: 1.6; color: var(--text-2); text-wrap: pretty; max-width: 60ch; }
/* ── Signature: liquid drop falling into a pool ─────────────────── */
.planned__drop { position: relative; width: 150px; height: 150px; margin: -4px auto 12px; }
.planned__orb { position: absolute; left: 50%; top: 6px; width: 78px; height: 78px; margin-left: -39px; animation: planned-fall 4.8s var(--ease-io) infinite; transform-origin: 50% 100%;
filter: drop-shadow(0 14px 22px color-mix(in srgb, var(--pa) 55%, transparent)) drop-shadow(0 0 30px color-mix(in srgb, var(--pb) 35%, transparent)); }
/* Teardrop: a rotated rounded square with one sharp corner pointing up */
.planned__body { position: absolute; inset: 0; overflow: hidden; isolation: isolate; border-radius: 0 50% 50% 50%; clip-path: inset(0 round 0 50% 50% 50%); transform: rotate(45deg);
background: radial-gradient(70% 70% at 78% 78%, color-mix(in srgb, var(--pa) 65%, #000) 0%, transparent 70%),
radial-gradient(60% 60% at 40% 40%, color-mix(in srgb, var(--pa) 55%, #fff), transparent 70%),
linear-gradient(135deg, color-mix(in srgb, var(--pb) 70%, #fff) 0%, var(--pb) 28%, var(--pa) 62%, color-mix(in srgb, var(--pa) 70%, #000) 100%);
box-shadow: inset -6px -8px 14px rgba(0, 0, 0, .45), inset 5px 5px 10px rgba(255, 255, 255, .3), 0 0 0 1px rgba(255, 255, 255, .12); }
.planned__swirl { position: absolute; inset: -45%; animation: swirl 9s linear infinite; mix-blend-mode: soft-light; filter: blur(6px);
background: conic-gradient(from 0deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .7), rgba(0, 0, 0, .4), rgba(255, 255, 255, .45), rgba(0, 0, 0, .35), rgba(255, 255, 255, 0)); }
.planned__shine { position: absolute; left: 20%; top: 38%; width: 26%; height: 22%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0)); filter: blur(1.5px); }
/* Pool: an elliptical puddle with three ripples that ring out as the drop lands */
.planned__pool { position: absolute; left: 50%; bottom: 10px; width: 120px; height: 24px; margin-left: -60px; border-radius: 50%;
background: radial-gradient(50% 40% at 50% 35%, color-mix(in srgb, var(--pa) 30%, #fff), transparent 100%), radial-gradient(closest-side, color-mix(in srgb, var(--pa) 85%, transparent), color-mix(in srgb, var(--pb) 45%, transparent) 72%, transparent);
box-shadow: 0 0 24px color-mix(in srgb, var(--pa) 55%, transparent), 0 6px 18px color-mix(in srgb, var(--pb) 30%, transparent); animation: planned-pool 4.8s var(--ease-io) infinite; }
.planned__pool span { position: absolute; inset: 0; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--pb) 50%, #fff); opacity: 0; animation: planned-ripple 4.8s var(--ease) infinite; }
.planned__pool span:nth-child(2) { animation-delay: .22s; border-color: color-mix(in srgb, var(--pa) 50%, #fff); }
.planned__pool span:nth-child(3) { animation-delay: .44s; border-color: rgba(255, 255, 255, .5); }
@keyframes planned-fall {
0% { transform: translateY(-4px) scale(.94, 1.02); }
40% { transform: translateY(4px) scale(1, 1); }
58% { transform: translateY(40px) scale(1.08, .88); }
66% { transform: translateY(30px) scale(.96, 1.06); }
78% { transform: translateY(14px) scale(1.02, .98); }
100% { transform: translateY(-4px) scale(.94, 1.02); }
}
@keyframes planned-pool { 0%, 50%, 100% { transform: scale(.85); opacity: .75; } 60% { transform: scale(1.08, 1.12); opacity: 1; } }
@keyframes planned-ripple { 0%, 56% { transform: scale(.4); opacity: 0; } 60% { opacity: .9; } 100% { transform: scale(2.1, 1.7); opacity: 0; } }
/* ── Spec list: URL / section / page type ───────────────────────── */
.planned__spec { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: clamp(26px, 3.4vw, 38px); text-align: left; }
.planned__row { display: grid; align-content: start; gap: 8px; min-width: 0; padding: 16px 18px 18px; border-radius: var(--r-md); background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 1px 0 rgba(255, 255, 255, .08) inset; }
.planned__row dt { display: flex; align-items: center; gap: 8px; font-family: var(--f-mono); font-size: .66rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); line-height: 1.5; }
.planned__row dt .ic { color: color-mix(in srgb, var(--pa) 45%, #fff); }
.planned__row dd { font-family: var(--f-display); font-size: 1.05rem; font-weight: 500; letter-spacing: -.01em; line-height: 1.3; color: var(--text); overflow-wrap: anywhere; }
.planned__row:first-child dd { font-family: var(--f-mono); font-size: .86rem; font-weight: 400; letter-spacing: 0; line-height: 1.5; color: var(--yinmn-ink); }
/* ── "Meanwhile" links: glass cards with an arrow chip ──────────── */
.planned__more { display: grid; gap: 18px; }
.planned__note { font-family: var(--f-sans); font-size: 1rem; line-height: 1.6; color: var(--text-2); text-align: center; text-wrap: balance; }
.planned__links { --gap: 12px; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap); list-style: none; }
.planned__links > li { flex: 0 1 calc((100% - var(--gap) * 2) / 3); min-width: 0; display: flex; }
.planned__link { position: relative; isolation: isolate; display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; min-height: 72px; padding: 14px 14px 14px 22px; border-radius: var(--r-md);
color: var(--text); background: var(--glass-fill); border: 1px solid var(--glass-line); box-shadow: var(--e-2); }
.planned__link:hover { color: var(--text); border-color: var(--glass-line-hi); box-shadow: var(--e-3); }
.planned__link:not([data-tilt]) { transition: transform var(--t) var(--ease), border-color var(--t), box-shadow var(--t); }
.planned__link-text { font-family: var(--f-display); font-weight: 500; font-size: 1.08rem; letter-spacing: -.015em; line-height: 1.25; }
.planned__link-ic { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--text); background: rgba(255, 255, 255, .07); border: 1px solid var(--glass-line); box-shadow: 0 1px 0 rgba(255, 255, 255, .2) inset;
transition: background var(--t) var(--ease), color var(--t), box-shadow var(--t); }
.planned__link-ic .ic { transition: transform var(--t) var(--ease); }
.planned__link:hover .planned__link-ic { color: #070913; background: var(--metal); border-color: transparent; box-shadow: 0 1px 0 #fff inset, 0 8px 20px -8px rgba(200, 210, 255, .6); }
.planned__link:hover .planned__link-ic .ic { transform: translate(2px, -2px); }
.planned__link:focus-visible { outline: 2px solid #B9C6FF; outline-offset: 3px; }
/* ── 404 ────────────────────────────────────────────────────────── */
.planned--404 { max-width: calc(1100px + var(--gutter) * 2); padding-top: clamp(8px, 2vw, 28px); gap: clamp(20px, 2.6vw, 30px); }
.planned--404 .planned__slab { width: 100%; max-width: 980px; justify-self: center; padding-top: clamp(40px, 5vw, 64px); }
.planned--404 .planned__links > li { flex-basis: calc((100% - var(--gap) * 3) / 4); }
/* Liquid-metal "4 · 4" with a drop of spilled paint for the zero */
.nf-art { position: relative; z-index: 2; display: flex; margin-bottom: -.2em; align-items: center; justify-content: center; gap: .02em; font-family: var(--f-display); font-weight: 500; font-size: clamp(8.5rem, 3rem + 22vw, 20rem); line-height: .82; letter-spacing: -.06em; user-select: none; }
.nf-art__digit { position: relative; z-index: 1; padding: 0 .02em .06em;
background: var(--iri), linear-gradient(180deg, #FFFFFF 0%, #E4E8F0 22%, #9AA2B4 44%, #3A4058 50%, #C9CFD8 58%, #F6F7F9 78%, #A7AFBB 100%);
background-size: 220% 100%, 100% 100%; background-blend-mode: soft-light, normal; -webkit-background-clip: text; background-clip: text; color: transparent;
filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .35)) drop-shadow(0 24px 40px rgba(0, 0, 0, .55)) drop-shadow(0 0 40px rgba(140, 160, 255, .25)); animation: iri-slide 12s linear infinite; }
.nf-art__zero { position: relative; z-index: 2; width: .62em; height: .74em; display: grid; place-items: center; margin: 0 .04em; }
.nf-art__drop { position: relative; width: 100%; height: 100%; overflow: hidden; isolation: isolate; border-radius: 50% 50% 50% 50% / 56% 56% 44% 44%; animation: blob 11s var(--ease-io) infinite alternate; background: #10163F;
box-shadow: inset 0 -.07em .14em rgba(0, 0, 0, .6), inset 0 .03em .06em rgba(255, 255, 255, .4), 0 0 0 1px rgba(255, 255, 255, .12), 0 .12em .34em -.08em rgba(74, 102, 240, .7), 0 .04em .5em rgba(180, 18, 27, .35); }
/* Marbled paint: a slow pigment vortex under a soft-light sheen */
.nf-art__swirl { position: absolute; inset: -40%; animation: swirl 24s linear infinite; filter: blur(.09em);
background: radial-gradient(30% 26% at 38% 36%, rgba(232, 236, 248, .8), transparent 70%),
radial-gradient(34% 30% at 66% 64%, #D0202A, transparent 72%),
radial-gradient(30% 34% at 64% 32%, #0A0D24, transparent 72%),
radial-gradient(36% 30% at 34% 70%, #4A66F0, transparent 72%),
conic-gradient(from 20deg, #1C34A6, #3A55E0 20%, #1C34A6 40%, #8E1420 55%, #1C34A6 72%, #2A1450 88%, #1C34A6); }
.nf-art__drop::after { content: ""; position: absolute; inset: -30%; animation: swirl 13s linear infinite reverse; mix-blend-mode: soft-light; filter: blur(16px);
background: conic-gradient(from 0deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .7), rgba(0, 0, 0, .5), rgba(255, 255, 255, .4), rgba(0, 0, 0, .45), rgba(255, 255, 255, 0)); }
.nf-art__drop::before { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; background: radial-gradient(120% 90% at 50% 110%, rgba(0, 0, 0, .55), transparent 55%), radial-gradient(90% 70% at 30% 10%, rgba(255, 255, 255, .22), transparent 60%); }
.nf-art__shine { position: absolute; z-index: 2; left: 16%; top: 9%; width: 40%; height: 22%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .85), transparent); filter: blur(4px); }
/* The spill: paint pooled on the "floor" under the numerals */
.nf-art__spill { position: absolute; left: 50%; bottom: .02em; z-index: 1; width: 1.5em; height: .16em; transform: translateX(-50%); border-radius: 50%; pointer-events: none;
background: radial-gradient(30% 50% at 44% 50%, rgba(120, 140, 255, .95), transparent 70%), radial-gradient(30% 50% at 58% 55%, rgba(240, 74, 80, .8), transparent 70%), radial-gradient(60% 80% at 50% 50%, rgba(28, 52, 166, .5), transparent 75%);
filter: blur(14px); mix-blend-mode: screen; animation: nf-spill 11s var(--ease-io) infinite alternate; }
@keyframes nf-spill { to { transform: translateX(-50%) scale(1.12, 1.25); opacity: .8; } }
.nf-slab .planned__lead { margin-bottom: clamp(24px, 3vw, 32px); }
.nf-search { width: 100%; max-width: 640px; text-align: left; }
.nf-search .search__label { text-align: center; }
.nf-search .search__row { background: rgba(255, 255, 255, .07); min-height: 56px; }
.nf-search .search__results { text-align: left; }
.nf-search .search__empty { text-align: left; }
/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 900px) {
.planned--404 .planned__links > li { flex-basis: calc((100% - var(--gap)) / 2); }
}
@media (max-width: 760px) {
.planned__spec { grid-template-columns: 1fr; gap: 8px; }
.planned__row { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; padding: 14px 16px; }
.planned__row dd { text-align: right; }
.planned__links > li { flex-basis: calc((100% - var(--gap)) / 2); }
}
@media (max-width: 560px) {
.planned { padding-top: 12px; }
.planned__slab { padding: 26px 18px 22px; border-radius: var(--r-lg); }
.planned__drop { transform: scale(.85); margin: -14px auto 4px; }
.planned__eyebrow { font-size: .6rem; letter-spacing: .1em; padding: 7px 12px 7px 10px; gap: 8px; }
.planned__title { font-size: clamp(1.8rem, 1.2rem + 3vw, 2.3rem); }
.planned__row dd { font-size: .98rem; }
.planned__links > li, .planned--404 .planned__links > li { flex-basis: 100%; }
.planned__link { min-height: 60px; padding: 10px 10px 10px 18px; }
.nf-art { font-size: clamp(6.6rem, 1rem + 28vw, 9rem); margin-top: 8px; }
}
@media (prefers-reduced-motion: reduce) {
.planned__orb, .planned__pool, .planned__pool span, .planned__swirl, .planned__eyebrow::before, .nf-art__digit, .nf-art__drop, .nf-art__swirl, .nf-art__spill { animation: none; }
}
/* ── 60-service.css ── */
/* Group C — service / procurement pages (Liquid Glass): /paint-sourcing/, /how-sourcing-works/, /bulk-wholesale/, /technical-compliance/
Reuses the global homepage pieces: .process/.step/.step__node, .way__icon, .htile__drop, .orb, .lg-cta, .lg-band--*. Prefix svc- = these pages only. */
/* ── Hero ─────────────────────────────────────────────────────────── */
.svc-title { font-size: clamp(2.3rem, 1.3rem + 2.7vw, 3.9rem); margin: 0 0 24px; }
.svc-hero__ctas { margin-top: 30px; --gap: 12px 14px; }
@media (min-width: 1001px) {
.svc-hero:has(> .svc-spec) { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
}
@media (min-width: 901px) {
.svc-hero:has(> .svc-art) { grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); }
}
@media (max-width: 1000px) {
.svc-hero:has(> .svc-spec) { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
.svc-hero:has(> .svc-art) { grid-template-columns: minmax(0, 1fr); }
}
/* "What we need from you" — glass spec panel with required / helpful pills */
.svc-spec { display: flex; flex-direction: column; gap: 20px;
background: radial-gradient(90% 60% at 100% 0%, rgba(180, 18, 27, .16), transparent 70%), radial-gradient(80% 60% at 0% 100%, rgba(28, 52, 166, .2), transparent 70%), var(--glass-fill); }
.svc-spec__head { display: flex; align-items: center; gap: 14px; }
.svc-spec__head .label { color: var(--text-2); }
.svc-spec__list { gap: 6px; }
.svc-spec__list .kv__row, .svc-spec__list .kv__row:last-child { align-items: center; padding: 11px 12px 11px 16px; border: 1px solid rgba(255, 255, 255, .07); border-radius: 14px; background: rgba(255, 255, 255, .035); transition: border-color var(--t), background var(--t); }
.svc-spec__list .kv__row:hover { border-color: rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .06); }
.svc-spec__list .kv__row:has(.is-req) { background: linear-gradient(90deg, rgba(240, 74, 80, .1), rgba(255, 255, 255, .03) 70%); border-color: rgba(255, 138, 144, .2); }
.svc-spec__list .kv__v { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px 5px 9px; border-radius: var(--r-pill); font-size: .62rem; line-height: 1.4; color: var(--text-3); background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .12); }
.svc-spec__list .kv__v::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--text-3); }
.svc-spec__list .kv__v.is-req { color: var(--candy-ink); background: rgba(240, 74, 80, .12); border-color: rgba(255, 138, 144, .4); }
.svc-spec__list .kv__v.is-req::before { background: var(--candy-hi); box-shadow: 0 0 10px rgba(240, 74, 80, .9); }
.svc-spec__list .kv__v.is-help { color: var(--yinmn-ink); background: rgba(74, 102, 240, .14); border-color: rgba(169, 184, 255, .36); }
.svc-spec__list .kv__v.is-help::before { background: var(--yinmn-hi); box-shadow: 0 0 10px rgba(74, 102, 240, .9); }
/* Decorative hero art: liquid drops / orb / document sheets inside a glass aside */
.svc-art { position: relative; overflow: hidden; display: grid; place-items: center; min-height: 340px;
background: radial-gradient(60% 55% at 50% 45%, rgba(74, 102, 240, .22), transparent 70%), radial-gradient(40% 40% at 85% 90%, rgba(180, 18, 27, .2), transparent 70%), var(--glass-fill); }
.svc-art::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: 12%; height: 26px; border-radius: 50%; background: radial-gradient(closest-side, rgba(140, 160, 255, .28), transparent); filter: blur(6px); pointer-events: none; }
.svc-art__orb { width: min(72%, 270px); }
.svc-art__drop { position: absolute; }
.svc-art__drop--a { width: 58px; height: 58px; right: 12%; top: 13%; }
.svc-art__drop--b { width: 42px; height: 42px; left: 11%; bottom: 20%; animation-delay: -3s; }
.svc-art__drop--c { width: 30px; height: 30px; right: 17%; bottom: 14%; animation-delay: -6s; }
.svc-art--pour { display: grid; grid-auto-flow: column; place-content: center; align-items: end; gap: clamp(14px, 2vw, 24px); }
.svc-art--pour::after { bottom: calc(50% - 96px); }
.svc-pour { flex: none; }
.svc-pour--s { width: 52px; height: 52px; }
.svc-pour--m { width: 92px; height: 92px; animation-delay: -3s; }
.svc-pour--l { width: 150px; height: 150px; animation-delay: -6s; box-shadow: inset 0 -16px 26px rgba(0, 0, 0, .45), inset 0 10px 18px rgba(255, 255, 255, .3), 0 24px 70px -10px var(--glow); }
.svc-art--docs { perspective: 900px; }
.svc-sheet { position: absolute; left: 50%; top: 50%; width: 190px; height: 240px; margin: -120px 0 0 -95px; border-radius: 18px; border: 1px solid var(--glass-line);
background: linear-gradient(160deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .03)), rgba(12, 14, 30, .72); box-shadow: var(--e-2); }
.svc-sheet--3 { transform: translate(-46px, 12px) rotate(-13deg); background: linear-gradient(160deg, rgba(240, 74, 80, .28), rgba(255, 255, 255, .02)), rgba(12, 14, 30, .7); }
.svc-sheet--2 { transform: translate(-22px, 4px) rotate(-6deg); background: linear-gradient(160deg, rgba(74, 102, 240, .32), rgba(255, 255, 255, .02)), rgba(12, 14, 30, .7); }
.svc-sheet--1 { display: flex; flex-direction: column; gap: 10px; padding: 22px 20px; transform: translate(14px, -6px) rotate(4deg); animation: svc-float 7s var(--ease-io) infinite alternate; box-shadow: var(--e-3), 0 30px 60px -20px rgba(74, 102, 240, .45); }
.svc-sheet__icon { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 6px; color: var(--text); background: rgba(255, 255, 255, .08); border: 1px solid var(--glass-line); }
.svc-sheet__bar { display: block; height: 7px; border-radius: 4px; background: rgba(255, 255, 255, .16); }
.svc-sheet__bar--short { width: 58%; }
.svc-sheet__swatch { display: block; height: 46px; margin: 4px 0; border-radius: 10px; background: radial-gradient(90% 120% at 20% 0%, #4A66F0, transparent 70%), radial-gradient(80% 120% at 100% 100%, #B4121B, transparent 70%), #0B0E1C; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); }
.svc-sheet__seal { position: absolute; right: -14px; bottom: -14px; width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; color: #070913; background: var(--metal); box-shadow: 0 1px 0 #fff inset, 0 10px 26px -6px rgba(200, 210, 255, .6); }
@keyframes svc-float { to { transform: translate(14px, -16px) rotate(2deg); } }
/* ── Glowing process timeline (reuses the homepage .process) ─────── */
.svc-process { margin-top: clamp(40px, 5vw, 64px); view-timeline: --svcp block; }
.svc-process .step__node { background: radial-gradient(circle at 35% 30%, #5A74FF, #1C34A6); box-shadow: 0 0 0 6px var(--ink-950), 0 0 30px rgba(90, 116, 255, .8); }
.svc-process .step .label { color: var(--text-3); }
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
.svc-process .process__fill { animation: svc-fill-x linear both; animation-timeline: --svcp; animation-range: cover 12% cover 48%; }
.svc-process .step__node { animation: svc-node linear both; animation-timeline: --svcp; }
.svc-process .step:nth-child(1) .step__node { animation-range: cover 11% cover 13%; }
.svc-process .step:nth-child(2) .step__node { animation-range: cover 23% cover 25%; }
.svc-process .step:nth-child(3) .step__node { animation-range: cover 35% cover 37%; }
.svc-process .step:nth-child(4) .step__node { animation-range: cover 46% cover 48%; }
}
}
@keyframes svc-fill-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes svc-fill-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes svc-node {
0%, 49% { background: radial-gradient(circle at 35% 30%, #2A2F48, #0B0E1C); box-shadow: 0 0 0 6px var(--ink-950), 0 0 24px rgba(140, 160, 255, .3); }
50%, 100% { background: radial-gradient(circle at 35% 30%, #5A74FF, #1C34A6); box-shadow: 0 0 0 6px var(--ink-950), 0 0 30px rgba(90, 116, 255, .8); }
}
/* ── Cards with an icon badge ────────────────────────────────────── */
.svc-card, .svc-doc { gap: 12px; }
.svc-card__top { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.svc-card > .way__icon { margin-bottom: 8px; }
.svc-card .text-sm { flex: 1 1 auto; }
.svc-send { display: inline-flex; align-items: center; gap: 9px; width: fit-content; max-width: 100%; margin-top: 6px; padding: 8px 12px; border-radius: 12px;
font-family: var(--f-mono); font-size: .64rem; font-weight: 500; letter-spacing: .1em; line-height: 1.5; text-transform: uppercase; color: var(--yinmn-ink);
background: rgba(74, 102, 240, .1); border: 1px solid rgba(169, 184, 255, .22); }
/* Category chips on a glass wall */
.svc-chipwall { padding: clamp(20px, 3vw, 32px); border-radius: var(--r-lg); list-style: none; }
.svc-chipwall .chip { gap: 9px; }
.svc-chipwall .chip::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--yinmn-hi); box-shadow: 0 0 8px rgba(74, 102, 240, .9); }
.svc-chipwall .chip:nth-child(3n+2)::before { background: var(--candy-hi); box-shadow: 0 0 8px rgba(240, 74, 80, .9); }
.svc-chipwall .chip:nth-child(3n)::before { background: #E9ECF0; box-shadow: 0 0 8px rgba(233, 236, 240, .7); }
/* Two-up tiles and icon rows */
.svc-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 14px; }
.svc-tile { --pad: 24px 22px 26px; display: flex; flex-direction: column; gap: 12px; border-radius: var(--r-lg); }
.svc-tile .way__icon, .svc-row .way__icon, .svc-need .way__icon { width: 44px; height: 44px; border-radius: 13px; }
.svc-tile .way__icon { margin-bottom: 6px; }
.svc-row { --pad: 20px 24px 22px 20px; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 18px; align-items: start; }
.svc-row .h-5 { padding-top: 2px; }
@media (min-width: 1001px) {
.svc-sticky { position: sticky; top: calc(var(--header-h) + 32px); align-self: start; }
}
/* Packaging figures: big glass figure tiles */
.svc-intro { display: grid; gap: 14px; margin-bottom: clamp(28px, 4vw, 44px); }
.svc-fig { display: flex; flex-direction: column; gap: 10px; padding: 24px 24px 28px; border-radius: var(--r-lg); }
.svc-fig__top { display: grid; gap: 22px; margin-bottom: 10px; color: var(--text-3); }
.svc-fig__figure { font-family: var(--f-display); font-weight: 500; font-size: clamp(2.3rem, 1.5rem + 2vw, 3.3rem); letter-spacing: -.04em; line-height: 1; color: var(--text); }
.svc-fig--iri { --glass-fill: linear-gradient(145deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02)), rgba(18, 16, 40, .6); }
.svc-fig--iri .svc-fig__figure { background: var(--iri); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: iri-slide 9s linear infinite; width: fit-content; }
.svc-caveat { display: flex; align-items: flex-start; gap: 10px; max-width: 100ch; margin-top: 20px; }
.svc-caveat .ic { margin-top: 3px; color: var(--yinmn-ink); }
/* "What to send" — numbered glass rows inside a glass panel */
.svc-needs { display: grid; gap: 6px; padding: 10px; border-radius: var(--r-lg); list-style: none; }
.svc-need { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; align-items: start; padding: 16px 18px 18px 16px; border-radius: 16px; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .06); transition: border-color var(--t), background var(--t); }
.svc-need:hover { border-color: rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .055); }
.svc-need .h-5 { padding-top: 2px; }
.svc-prose-block { max-width: 900px; }
/* ── Closing CTA ──────────────────────────────────────────────────── */
.svc-cta__title { font-size: clamp(1.9rem, 1.2rem + 2.2vw, 3.2rem); }
.svc-cta .lg-cta__panel > div:first-child { gap: 18px; }
/* ── Technical & compliance ──────────────────────────────────────── */
.svc-doc__foot { margin-top: auto; padding-top: 4px; }
.svc-doc--feature { --glass-fill: linear-gradient(145deg, rgba(74, 102, 240, .2), rgba(180, 18, 27, .12)), rgba(12, 12, 30, .6); }
.svc-doc--feature .way__icon { background: linear-gradient(135deg, rgba(74, 102, 240, .5), rgba(180, 18, 27, .45)); }
.svc-linkbtn { border: 0; background-color: transparent; cursor: pointer; text-align: left; padding: 12px 0; background-position: 0 calc(100% - 10px); }
.svc-records { margin-top: clamp(56px, 7vw, 96px); }
/* Access states as glass rows */
.svc-access { width: 100%; border-collapse: separate; border-spacing: 0 8px; margin-top: -8px; }
.svc-access thead th { padding: 0 22px 2px; text-align: left; font-family: var(--f-mono); font-size: .64rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.svc-access tbody th, .svc-access td { padding: 16px 22px; text-align: left; vertical-align: middle; background: rgba(22, 26, 44, .62); border-top: 1px solid var(--glass-line); border-bottom: 1px solid var(--glass-line); transition: border-color var(--t), background var(--t); }
.svc-access tbody th { width: 32%; font-weight: 400; border-left: 1px solid var(--glass-line); border-radius: 18px 0 0 18px; }
.svc-access td { font-size: .98rem; line-height: 1.5; color: var(--text-2); }
.svc-access td:last-child { width: 30%; border-right: 1px solid var(--glass-line); border-radius: 0 18px 18px 0; }
.svc-access tbody tr:hover > * { border-color: var(--glass-line-hi); background: rgba(34, 39, 62, .7); }
.svc-access__action { color: var(--text); font-weight: 500; }
.svc-state { display: inline-flex; align-items: center; gap: 14px; font-family: var(--f-mono); font-size: .72rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; line-height: 1.4; color: var(--yinmn-ink); }
.svc-state__icon { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: var(--yinmn-ink); background: rgba(74, 102, 240, .16); border: 1px solid rgba(169, 184, 255, .36); box-shadow: 0 0 20px -4px rgba(74, 102, 240, .7); }
.svc-access__row--none .svc-state { color: var(--text-3); }
.svc-access__row--none .svc-state__icon { color: var(--text-3); background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .14); box-shadow: none; }
.svc-access__row--research .svc-state { color: var(--candy-ink); }
.svc-access__row--research .svc-state__icon { color: var(--candy-ink); background: rgba(240, 74, 80, .14); border-color: rgba(255, 138, 144, .4); box-shadow: 0 0 20px -4px rgba(240, 74, 80, .7); }
.svc-note { margin-top: clamp(32px, 4vw, 48px); max-width: 100ch; padding: 22px 26px; }
/* Related links with arrow */
.svc-related { position: relative; height: 100%; padding-right: 52px; }
.svc-related > .ic { position: absolute; top: 20px; right: 20px; color: var(--text-3); transition: transform var(--t) var(--ease), color var(--t); }
.svc-related:hover > .ic { color: var(--text); transform: translate(2px, -2px); }
/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 900px) {
.svc-art { min-height: 230px; }
.svc-art__orb { width: 170px; }
.svc-art--pour::after { bottom: calc(50% - 72px); }
.svc-pour--s { width: 40px; height: 40px; }
.svc-pour--m { width: 70px; height: 70px; }
.svc-pour--l { width: 112px; height: 112px; }
.svc-sheet { transform-origin: 50% 50%; scale: .78; }
.svc-process .process__fill { animation-name: svc-fill-y; }
.svc-process .process__track { top: 23px; bottom: 23px; }
}
@media (max-width: 760px) {
.svc-access, .svc-access tbody { display: block; }
.svc-access { margin-top: 0; }
.svc-access thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.svc-access tbody tr { display: grid; gap: 14px; margin-bottom: 10px; padding: 18px 18px 20px; border-radius: var(--r-md); background: var(--glass-fill); border: 1px solid var(--glass-line); }
.svc-access tbody th, .svc-access td, .svc-access td:last-child { display: block; width: auto; padding: 0; background: none; border: 0; border-radius: 0; }
.svc-access tbody tr:hover > * { background: none; }
.svc-access td::before { content: attr(data-label); display: block; margin-bottom: 4px; font-family: var(--f-mono); font-size: .62rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
}
@media (max-width: 640px) {
.svc-hero__ctas .btn--lg { width: 100%; }
.svc-tiles { grid-template-columns: 1fr; }
.svc-spec__list .kv__row { padding: 10px 10px 10px 14px; gap: 10px; }
.svc-row { --pad: 18px; gap: 14px; grid-template-columns: 40px minmax(0, 1fr); }
.svc-need { gap: 14px; grid-template-columns: 40px minmax(0, 1fr); padding: 14px; }
.svc-row .way__icon, .svc-need .way__icon { width: 40px; height: 40px; }
.svc-needs { padding: 8px; }
}
/* ── 90-utilities.css ── */
/* Utilities load last so they win over component defaults. */
/* Spacing utilities (margin-bottom / margin-top) */
.mb-0 { margin-bottom: 0 !important; }
.mb-2xs { margin-bottom: 6px; }
.mb-xs { margin-bottom: 10px; }
.mb-s { margin-bottom: 14px; }
.mb-m { margin-bottom: 20px; }
.mb-l { margin-bottom: 26px; }
.mb-xl { margin-bottom: 34px; }
.mb-2xl { margin-bottom: 44px; }
.mt-xs { margin-top: 10px; }
.mt-s { margin-top: 14px; }
.mt-m { margin-top: 20px; }
.mt-l { margin-top: 26px; }
.mt-xl { margin-top: 34px; }
.mt-2xl { margin-top: 44px; }
/* Measure (max line length) utilities */
.measure-2xs { max-width: 20ch; }
.measure-xs { max-width: 24ch; }
.measure-s { max-width: 46ch; }
.measure { max-width: 56ch; }
.measure-m { max-width: 62ch; }
.measure-l { max-width: 70ch; }
.measure-xl { max-width: 82ch; }
.measure-2xl { max-width: 90ch; }
/* Fine spacing steps used where the design sits between scale values */
.mb-8 { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }
.mb-18 { margin-bottom: 18px; }
.mb-22 { margin-bottom: 22px; }
.mb-40 { margin-bottom: 40px; }
.mb-52 { margin-bottom: 52px; }
.mt-6 { margin-top: 6px; }
.pt-md { padding-top: clamp(48px, 6vw, 96px); }
.pb-md { padding-bottom: clamp(48px, 6vw, 96px); }
.pt-xl { padding-top: clamp(56px, 7vw, 110px); }
.pb-xl { padding-bottom: clamp(56px, 7vw, 110px); }
.measure-22 { max-width: 22ch; }
.measure-26 { max-width: 26ch; }
.measure-66 { max-width: 66ch; }
/* Colour utilities */
.c-text { color: var(--c-text); }
.c-2 { color: var(--c-text-2); }
.c-muted { color: var(--c-muted); }
.c-faint { color: var(--c-faint); }
.c-quiet { color: var(--c-quiet); }
.c-accent { color: var(--c-accent); }
.c-error { color: var(--c-error); }
.c-light { color: var(--c-light); }
.c-on-dark { color: var(--c-on-dark); }
.c-on-dark-muted { color: var(--c-on-dark-muted); }
.c-dark-rule { color: var(--c-border-dark-2); }
/* Fine type steps */
.fs-10-5 { font-size: 10.5px; }
.fs-16-5 { font-size: 16.5px; }
.fs-17-5 { font-size: 17.5px; }
.fs-18 { font-size: 18px; }
.fs-lead-sm { font-size: clamp(17px, 1.5vw, 20px); }
.fs-h2-sm { font-size: clamp(24px, 2.6vw, 34px); }
.fs-h2-feature { font-size: clamp(26px, 3.2vw, 44px); }
.fs-h2-cta { font-size: clamp(30px, 4vw, 54px); }
.ls-16 { letter-spacing: .16em; }
.ls-26 { letter-spacing: .26em; }
.fw-400 { font-weight: 400; }
.lh-155 { line-height: 1.55; }
.lh-16 { line-height: 1.6; }