/* Hublit public website — Marigold edition 2.0 brand system.
   Brand rules (Hublit_Brand_Guidelines.md): Marigold is a field or a marker, never text on a light
   background; Graphite text; no gradients, glows, shadows or beam-like decoration; straight rules,
   rectangles and whitespace. Plain CSS, no build step. */

@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/Inter-Regular.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/Inter-Medium.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/Inter-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/Inter-Bold.woff2") format("woff2"); }

:root {
	--marigold: #F2A900;
	--graphite: #18181B;
	--chalk: #FAFAFA;
	--cream: #FFF0CF;
	--steel: #52525B;
	--rule: #D4D4D8;
	--white: #FFFFFF;
	--pale: #F4F4F5; /* Light Lab spill light: a flat pale neutral */

	--font: "Inter", Arial, sans-serif;
	--fs-display: clamp(2.25rem, 3.43vw + 1.414rem, 4.5rem);
	--fs-h1: clamp(2rem, 1.52vw + 1.629rem, 3rem);
	--fs-h2: clamp(1.5rem, 0.76vw + 1.314rem, 2rem);
	--fs-h3: 1.25rem;
	--fs-lead: clamp(1.125rem, 0.4vw + 1rem, 1.3125rem);
	--fs-body: 1rem;
	--fs-small: 0.875rem;

	--s1: 4px; --s2: 8px; --s3: 16px; --s4: 24px; --s5: 32px; --s6: 48px; --s7: 72px; --s8: 112px;
	--gutter: clamp(16px, 4vw, 48px);
	--max: 1320px;
	--header-h: 72px;
	--ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
	margin: 0;
	background: var(--chalk);
	color: var(--graphite);
	font: 400 var(--fs-body)/1.5 var(--font);
	font-feature-settings: "cv11", "ss01";
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.02em; text-wrap: balance; }
p { margin: 0 0 1em; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
table { border-collapse: collapse; }
figure { margin: 0; }

a { color: inherit; text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--graphite); outline-offset: 3px; }
.on-dark :focus-visible, .site-footer :focus-visible, .band-dark :focus-visible { outline-color: var(--white); }

.skip { position: absolute; left: var(--s3); top: -100px; z-index: 100; background: var(--graphite); color: var(--white); padding: var(--s2) var(--s3); }
.skip:focus { top: var(--s3); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.measure { max-width: 68ch; }
.lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--graphite); }
.muted { color: var(--steel); }
.small { font-size: var(--fs-small); line-height: 1.43; }
.num { font-variant-numeric: tabular-nums; }

.h-display { font-size: var(--fs-display); line-height: 1; letter-spacing: -0.045em; font-weight: 600; }
.h1 { font-size: var(--fs-h1); line-height: 1.08; letter-spacing: -0.035em; }
.h2 { font-size: var(--fs-h2); line-height: 1.16; letter-spacing: -0.03em; }
.h3 { font-size: var(--fs-h3); line-height: 1.35; letter-spacing: -0.015em; }

/* ------------------------------------------------------------------ buttons */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
	min-height: 48px; padding: 0 var(--s4);
	border: 1px solid var(--graphite); border-radius: 0;
	font-weight: 500; font-size: 1rem; line-height: 1.2; text-decoration: none; cursor: pointer;
	transition: background-color .18s var(--ease), color .18s var(--ease);
}
.btn-primary { background: var(--marigold); color: var(--graphite); }
.btn-primary:hover { background: var(--graphite); color: var(--marigold); }
.btn-secondary { background: transparent; color: var(--graphite); }
.btn-secondary:hover { background: var(--graphite); color: var(--white); }
.band-dark .btn-secondary, .site-footer .btn-secondary { border-color: var(--white); color: var(--white); }
.band-dark .btn-secondary:hover { background: var(--white); color: var(--graphite); }
.btn[disabled] { opacity: .55; cursor: progress; }
.btn svg { width: 20px; height: 20px; flex: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s3); }

/* ------------------------------------------------------------------ header */
.site-header {
	position: sticky; top: 0; z-index: 50;
	background: var(--chalk); border-bottom: 1px solid var(--rule);
}
.site-header .wrap { display: flex; align-items: center; gap: var(--s5); min-height: var(--header-h); }
.brand { display: inline-flex; align-items: center; padding: var(--s2) 0; }
.brand img { width: 112px; height: auto; }
.nav { margin-left: auto; }
.nav ul { list-style: none; display: flex; gap: clamp(12px, 1.6vw, 28px); align-items: center; }
.nav a { display: inline-block; padding: var(--s3) 0; font-weight: 500; font-size: .9375rem; text-decoration: none; position: relative; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 3px; background: var(--marigold); transform: scaleX(0); transform-origin: left; transition: transform .22s var(--ease); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.header-cta { margin-left: var(--s2); }
.menu-toggle { display: none; margin-left: auto; min-height: 44px; padding: 0 var(--s3); background: none; border: 1px solid var(--graphite); font-weight: 500; cursor: pointer; }

@media (max-width: 1080px) {
	.menu-toggle { display: inline-flex; align-items: center; gap: var(--s2); }
	.header-cta { display: none; }
	.nav { position: fixed; inset: var(--header-h) 0 0 0; background: var(--chalk); padding: var(--s5) var(--gutter); overflow-y: auto; display: none; margin: 0; }
	.nav[data-open="true"] { display: block; }
	.nav ul { flex-direction: column; align-items: stretch; gap: 0; }
	.nav li { border-bottom: 1px solid var(--rule); }
	.nav a { display: block; padding: var(--s4) 0; font-size: 1.5rem; letter-spacing: -0.02em; }
	.nav a::after { bottom: 14px; width: 48px; right: auto; }
	.nav .nav-cta { border: 0; padding-top: var(--s5); }
	.nav .nav-cta a { display: inline-flex; font-size: 1rem; padding: 0 var(--s4); }
	.nav .nav-cta a::after { display: none; }
	body[data-menu-open="true"] { overflow: hidden; }
}
@media (min-width: 1081px) { .nav .nav-cta { display: none; } }

/* ------------------------------------------------------------------ sections */
.section { padding-block: clamp(56px, 8vw, 112px); }
.section-tight { padding-block: clamp(40px, 5vw, 72px); }
.band-cream { background: var(--cream); }
.band-white { background: var(--white); }
.band-dark { background: var(--graphite); color: var(--white); }
.band-dark .muted { color: #D4D4D8; }
.rule-top { border-top: 1px solid var(--rule); }
.section-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s5); align-items: end; margin-bottom: clamp(32px, 4vw, 56px); }
.section-head p { margin: 0; }
@media (max-width: 820px) { .section-head { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ home hero: Marigold field + measured luminaire */
.hero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); min-height: min(88vh, 860px); border-bottom: 1px solid var(--graphite); }
.hero-field { background: var(--marigold); color: var(--graphite); padding: clamp(40px, 6vw, 96px) var(--gutter) clamp(40px, 5vw, 72px) max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); display: flex; flex-direction: column; justify-content: space-between; gap: var(--s6); }
.hero-field .h-display { max-width: 11ch; }
.hero-field .lead { max-width: 34ch; margin-bottom: var(--s5); }
.hero-kicker { font-weight: 500; margin-bottom: var(--s4); }
/* On the Marigold field a Marigold button would vanish: the primary action inverts to Graphite. */
.hero-field .btn-primary { background: var(--graphite); color: var(--white); border-color: var(--graphite); }
.hero-field .btn-primary:hover { background: var(--white); color: var(--graphite); }
.hero-field .btn-secondary:hover { background: var(--graphite); color: var(--white); }
.hero-object { background: var(--white); position: relative; display: grid; place-items: center; padding: clamp(32px, 5vw, 72px); border-left: 1px solid var(--graphite); }
.measured { position: relative; width: min(100%, 420px); }
.measured img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; }
.measured svg.dims { position: absolute; inset: -40px -64px -56px -40px; width: calc(100% + 104px); height: calc(100% + 96px); overflow: visible; pointer-events: none; }
.dims line, .dims path { stroke: var(--graphite); stroke-width: 1; fill: none; vector-effect: non-scaling-stroke; }
.dims text { font: 500 13px/1 var(--font); fill: var(--graphite); font-variant-numeric: tabular-nums; }
.dims .draw { stroke-dasharray: 600; stroke-dashoffset: 600; animation: draw 1.1s var(--ease) forwards; }
.dims .d2 { animation-delay: .35s; } .dims .d3 { animation-delay: .7s; }
.dims text { opacity: 0; animation: appear .5s var(--ease) forwards; animation-delay: 1.05s; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes appear { to { opacity: 1; } }
.object-caption { position: absolute; left: clamp(24px, 3vw, 40px); right: clamp(24px, 3vw, 40px); bottom: clamp(20px, 3vw, 32px); display: flex; justify-content: space-between; gap: var(--s3); font-size: var(--fs-small); color: var(--steel); border-top: 1px solid var(--rule); padding-top: var(--s2); }
.object-caption a { color: var(--graphite); }
@media (max-width: 960px) {
	.hero { grid-template-columns: 1fr; min-height: 0; }
	.hero-field { padding: var(--s6) var(--gutter); }
	.hero-object { border-left: 0; border-top: 1px solid var(--graphite); padding: 72px var(--gutter) var(--s5); display: flex; flex-direction: column; align-items: center; }
	.measured { width: min(64%, 300px); margin-bottom: 72px; }
	.object-caption { position: static; width: 100%; }
}

/* ------------------------------------------------------------------ process (a real sequence → numbered) */
.process { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--graphite); counter-reset: step; }
.process li { padding: var(--s4) var(--s4) 0 0; counter-increment: step; }
.process li + li { padding-left: var(--s4); border-left: 1px solid var(--rule); }
.process li::before { content: counter(step); display: block; font-size: 2.25rem; font-weight: 600; letter-spacing: -0.04em; line-height: 1; margin-bottom: var(--s4); font-variant-numeric: tabular-nums; }
.process h3 { font-size: 1.125rem; margin-bottom: var(--s2); }
.process p { color: var(--steel); margin: 0; }
@media (max-width: 900px) { .process { grid-template-columns: 1fr 1fr; row-gap: var(--s5); } .process li:nth-child(3) { border-left: 0; padding-left: 0; } }
@media (max-width: 560px) { .process { grid-template-columns: 1fr; } .process li + li { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule); } }

.capabilities { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--graphite); }
.capabilities li { padding: var(--s4) var(--s4) var(--s4) 0; border-bottom: 1px solid var(--rule); }
.capabilities li:not(:nth-child(3n + 1)) { padding-left: var(--s4); border-left: 1px solid var(--rule); }
.capabilities h3 { font-size: 1.0625rem; margin-bottom: var(--s1); }
.capabilities p { margin: 0; color: var(--steel); }
@media (max-width: 820px) { .capabilities { grid-template-columns: 1fr; } .capabilities li:not(:nth-child(3n + 1)) { padding-left: 0; border-left: 0; } }
.scope-note { margin-top: var(--s4); color: var(--steel); font-size: var(--fs-small); }

/* ------------------------------------------------------------------ luminaire families */
.family-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s4); }
.family-card { grid-column: span 4; display: flex; flex-direction: column; text-decoration: none; border-top: 1px solid var(--graphite); padding-top: var(--s3); }
.family-card.is-lead { grid-column: span 6; grid-row: span 2; }
.family-card .shot { background: var(--white); aspect-ratio: 4 / 3; display: grid; place-items: center; overflow: hidden; margin-bottom: var(--s3); border: 1px solid var(--rule); }
.family-card.is-lead .shot { aspect-ratio: 1 / 1; }
.family-card .shot img { width: 78%; height: 78%; object-fit: contain; transition: transform .5s var(--ease); }
.family-card .shot img.fit-cover { width: 100%; height: 100%; object-fit: cover; }
.family-card:hover .shot img { transform: scale(1.03); }
.family-card h3 { font-size: 1.1875rem; letter-spacing: -0.02em; }
.family-card:hover h3 { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .18em; }
.family-card .tag { color: var(--steel); margin: var(--s1) 0 0; }
.family-card .facts { margin-top: var(--s2); font-size: var(--fs-small); color: var(--graphite); font-variant-numeric: tabular-nums; }
.family-grid.even .family-card { grid-column: span 4; grid-row: auto; }
.family-grid.even .family-card .shot { aspect-ratio: 4 / 3; }
@media (max-width: 960px) { .family-card, .family-card.is-lead, .family-grid.even .family-card { grid-column: span 6; grid-row: auto; } }
@media (max-width: 600px) { .family-card, .family-card.is-lead, .family-grid.even .family-card { grid-column: 1 / -1; } }

.filter-bar { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s5); }
.filter-bar button { min-height: 44px; padding: 0 var(--s3); background: transparent; border: 1px solid var(--graphite); font-weight: 500; cursor: pointer; }
.filter-bar button[aria-pressed="true"] { background: var(--graphite); color: var(--white); }
.filter-bar button[aria-pressed="true"]::before { content: "✓ "; }
.family-card[hidden] { display: none; }
.filter-status { min-height: 1.5em; color: var(--steel); margin-bottom: var(--s3); }

/* ------------------------------------------------------------------ family page */
.crumbs { font-size: var(--fs-small); color: var(--steel); padding-block: var(--s3); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s2); }
.crumbs li + li::before { content: "/"; margin-right: var(--s2); color: var(--rule); }
.crumbs a { color: var(--steel); }
.family-hero { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(24px, 4vw, 64px); align-items: start; padding-bottom: clamp(48px, 6vw, 88px); }
.family-hero .stage { background: var(--white); border: 1px solid var(--rule); aspect-ratio: 1 / 1; display: grid; place-items: center; position: sticky; top: calc(var(--header-h) + 24px); }
.family-hero .stage img { width: 80%; height: 80%; object-fit: contain; }
.family-hero .stage img.fit-cover { width: 100%; height: 100%; object-fit: cover; }
.family-hero .series { color: var(--steel); font-weight: 500; margin-bottom: var(--s2); }
.family-hero .h1 { margin-bottom: var(--s3); }
.family-hero .tagline { font-size: var(--fs-lead); margin-bottom: var(--s4); }
.apps-tags { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s4) 0; }
.apps-tags a { display: inline-block; padding: 6px 12px; border: 1px solid var(--graphite); text-decoration: none; font-size: var(--fs-small); font-weight: 500; }
.apps-tags a:hover { background: var(--graphite); color: var(--white); }
@media (max-width: 900px) { .family-hero { grid-template-columns: 1fr; } .family-hero .stage { position: static; } }

.configurator { border-top: 1px solid var(--graphite); padding-top: var(--s4); margin-top: var(--s5); }
.configurator fieldset { border: 0; padding: 0; margin: 0 0 var(--s4); }
.configurator legend { font-weight: 600; margin-bottom: var(--s2); }
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--s3); border: 1px solid var(--steel); font-size: .9375rem; font-variant-numeric: tabular-nums; background: var(--white); }
.chip input:checked + span { background: var(--graphite); color: var(--white); border-color: var(--graphite); }
.chip input:checked + span::before { content: "✓"; margin-right: 6px; }
.chip input:focus-visible + span { outline: 2px solid var(--graphite); outline-offset: 2px; }
.config-summary { background: var(--cream); padding: var(--s3) var(--s4); margin: var(--s4) 0; border-left: 6px solid var(--marigold); }
.config-summary p { margin: 0; }

.spec-table { width: 100%; font-variant-numeric: tabular-nums; }
.spec-table th, .spec-table td { text-align: left; padding: 14px var(--s3) 14px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.spec-table thead th { font-weight: 600; border-bottom: 1px solid var(--graphite); font-size: var(--fs-small); }
.spec-table td:first-child { font-weight: 500; white-space: nowrap; }
.table-scroll { overflow-x: auto; }
.source-note { margin-top: var(--s3); font-size: var(--fs-small); color: var(--steel); }

.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
.gallery figure { background: var(--white); border: 1px solid var(--rule); }
.gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.gallery figcaption { padding: var(--s2) var(--s3); font-size: var(--fs-small); color: var(--steel); }
@media (max-width: 760px) { .gallery { grid-template-columns: 1fr 1fr; } }

/* ------------------------------------------------------------------ application pages */
.app-hero { padding-block: clamp(40px, 6vw, 96px) clamp(32px, 4vw, 56px); }
.app-hero .h-display { max-width: 12ch; margin-bottom: var(--s4); }
.app-figure { border-block: 1px solid var(--graphite); background: var(--white); }
.app-figure img { width: 100%; max-height: 72vh; object-fit: cover; }
.narrative { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--graphite); }
.narrative section { padding: var(--s4) var(--s4) 0 0; }
.narrative section + section { padding-left: var(--s4); border-left: 1px solid var(--rule); }
.narrative h2 { font-size: 1.0625rem; margin-bottom: var(--s2); }
@media (max-width: 860px) { .narrative { grid-template-columns: 1fr; } .narrative section + section { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule); margin-top: var(--s4); } }

/* ------------------------------------------------------------------ clients */
.logo-wall { list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); }
.logo-wall li { border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); background: var(--white); aspect-ratio: 3 / 2; display: grid; place-items: center; padding: var(--s2); }
/* The logo files are square tiles with their own white margin: let them use the whole cell. */
.logo-wall img { width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 960px) { .logo-wall { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 560px) { .logo-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.client-group + .client-group { margin-top: var(--s7); }
.client-group h2 { margin-bottom: var(--s2); }
.client-group > p { color: var(--steel); margin-bottom: var(--s4); }
.endorse-note { margin-top: var(--s6); font-size: var(--fs-small); color: var(--steel); }

/* ------------------------------------------------------------------ light lab */
.lab { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.lab-controls label { display: block; font-weight: 600; margin: var(--s4) 0 var(--s2); }
.lab-controls output { font-variant-numeric: tabular-nums; font-weight: 500; }
.lab-controls input[type="range"] { width: 100%; accent-color: var(--graphite); height: 32px; }
.lab-result { margin-top: var(--s5); padding: var(--s4); background: var(--cream); border-left: 6px solid var(--marigold); font-size: var(--fs-lead); }
.lab-result strong { font-variant-numeric: tabular-nums; }
.beam-figure { background: var(--white); border: 1px solid var(--graphite); }
.beam-figure svg { width: 100%; height: auto; }
.beam-figure line, .beam-figure path, .beam-figure rect { vector-effect: non-scaling-stroke; }
.beam-figure .cone { fill: var(--cream); stroke: var(--graphite); stroke-width: 1.5; }
.beam-figure .datum { stroke: var(--graphite); stroke-width: 1.5; }
.beam-figure .dim { stroke: var(--graphite); stroke-width: 1; }
.beam-figure .fixture { fill: var(--graphite); }
.beam-figure text { font: 500 15px var(--font); fill: var(--graphite); font-variant-numeric: tabular-nums; }
.beam-figure figcaption { padding: var(--s2) var(--s3); border-top: 1px solid var(--rule); font-size: var(--fs-small); color: var(--steel); }
.cct-scale { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 2px solid var(--graphite); margin-top: var(--s4); }
.cct-scale li { padding: var(--s3) var(--s3) 0 0; position: relative; }
.cct-scale li::before { content: ""; position: absolute; top: -10px; left: 0; width: 2px; height: 18px; background: var(--graphite); }
.cct-scale .k { font-size: 1.375rem; font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.cct-scale .k-label { font-weight: 500; margin: var(--s1) 0; }
.cct-scale p { color: var(--steel); font-size: var(--fs-small); }
@media (max-width: 900px) { .lab { grid-template-columns: 1fr; } .cct-scale { grid-template-columns: 1fr 1fr; row-gap: var(--s5); } }

/* ------------------------------------------------------------------ forms */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) var(--s4); }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
.field label { display: block; font-weight: 500; margin-bottom: 6px; }
.field .hint { display: block; font-size: var(--fs-small); color: var(--steel); margin-top: 6px; }
.field input, .field select, .field textarea {
	width: 100%; min-height: 48px; padding: 10px 14px;
	background: var(--white); border: 1px solid var(--steel); border-radius: 0;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input[type="file"] { padding: 10px 14px; min-height: 48px; cursor: pointer; }
.field input[type="file"]::file-selector-button { font: inherit; font-weight: 500; margin-right: var(--s3); padding: 6px 14px; background: var(--white); border: 1px solid var(--graphite); border-radius: 0; cursor: pointer; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--graphite); outline-offset: 1px; border-color: var(--graphite); }
.field [aria-invalid="true"] { border: 2px solid var(--graphite); }
.field .error { display: block; margin-top: 6px; font-weight: 500; }
.field .error:not(:empty)::before { content: "Check this: "; font-weight: 600; }
.check { display: flex; gap: var(--s2); align-items: flex-start; }
.check input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--graphite); flex: none; }
.req { font-weight: 400; color: var(--steel); }
.form-status { margin-top: var(--s4); }
.form-status:empty { display: none; }
.form-status.is-error { padding: var(--s3) var(--s4); border: 2px solid var(--graphite); background: var(--white); font-weight: 500; }
.form-success { padding: var(--s5); background: var(--cream); border-left: 6px solid var(--marigold); }
.form-success h2 { margin-bottom: var(--s2); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-card { background: var(--white); border: 1px solid var(--graphite); padding: clamp(20px, 3vw, 40px); }
.job-meta { margin-top: var(--s2); }
.job-hiring { margin-top: var(--s5); font-weight: 500; }

.contact-split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
@media (max-width: 900px) { .contact-split { grid-template-columns: 1fr; } }
.contact-lines { list-style: none; border-top: 1px solid var(--graphite); }
.contact-lines li { border-bottom: 1px solid var(--rule); padding: var(--s3) 0; }
.contact-lines .label { display: block; font-size: var(--fs-small); color: var(--steel); }
.contact-lines .value { font-size: 1.25rem; font-weight: 500; letter-spacing: -0.01em; }

/* ------------------------------------------------------------------ catalogues, news, generic cards */
.cat-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); }
.cat-item { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: var(--s4); align-items: start; border-top: 1px solid var(--graphite); padding-top: var(--s4); }
.cat-item img { width: 160px; aspect-ratio: 3 / 4; object-fit: cover; border: 1px solid var(--rule); background: var(--white); }
@media (max-width: 760px) { .cat-list { grid-template-columns: 1fr; } .cat-item { grid-template-columns: 110px minmax(0, 1fr); } .cat-item img { width: 110px; } }

.post-list { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5) var(--s4); }
.post-list a { text-decoration: none; display: block; border-top: 1px solid var(--graphite); padding-top: var(--s3); }
.post-list img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; margin-bottom: var(--s3); background: var(--white); }
.post-list h3 { font-size: 1.125rem; margin: var(--s1) 0 var(--s2); }
.post-list a:hover h3 { text-decoration: underline; text-underline-offset: .18em; }
.post-meta { font-size: var(--fs-small); color: var(--steel); }
@media (max-width: 900px) { .post-list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .post-list { grid-template-columns: 1fr; } }

.article { max-width: 70ch; margin-inline: auto; }
.article-head { padding-block: clamp(32px, 5vw, 72px) var(--s5); }
.article-head .h1 { margin: var(--s2) 0 var(--s3); }
.article-cover { margin-bottom: var(--s6); border-block: 1px solid var(--graphite); background: var(--white); }
.article-cover img { width: 100%; max-height: 70vh; object-fit: cover; }
.prose { font-size: 1.125rem; line-height: 1.7; }
.prose h2 { font-size: 1.375rem; margin: 1.8em 0 .5em; letter-spacing: -0.02em; }
.prose h3 { font-size: 1.125rem; margin: 1.6em 0 .4em; }
.prose ul, .prose ol { padding-left: 1.2em; margin: 0 0 1em; }
.prose li { margin-bottom: .4em; }
.prose img { margin: var(--s4) 0; }
.source-line { margin-top: var(--s6); padding-top: var(--s3); border-top: 1px solid var(--rule); color: var(--steel); font-size: var(--fs-small); }

.empty { padding: var(--s6) 0; max-width: 60ch; }
.empty .h2 { margin-bottom: var(--s3); }

.page-head { padding-block: clamp(40px, 6vw, 96px) clamp(24px, 3vw, 48px); }
.page-head .h1 { max-width: 16ch; margin-bottom: var(--s3); }
.page-head .lead { max-width: 58ch; }

.stack > * + * { margin-top: var(--s4); }
.two-col { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 64px); }
@media (max-width: 860px) { .two-col { grid-template-columns: 1fr; } }
.value-list { list-style: none; border-top: 1px solid var(--graphite); }
.value-list li { padding: var(--s3) 0; border-bottom: 1px solid var(--rule); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s4); }
.value-list h3 { font-size: 1.0625rem; }
.value-list p { margin: 0; color: var(--steel); }
@media (max-width: 640px) { .value-list li { grid-template-columns: 1fr; gap: var(--s1); } }

/* ------------------------------------------------------------------ enquiry band */
.enquiry-band { border-top: 1px solid var(--graphite); }
.enquiry-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(24px, 4vw, 64px); align-items: end; }
.routes { list-style: none; display: grid; gap: 0; border-top: 1px solid var(--graphite); }
.routes a { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); padding: var(--s4) 0; border-bottom: 1px solid var(--rule); text-decoration: none; font-size: 1.25rem; font-weight: 500; }
.routes a:hover .route-name { text-decoration: underline; text-underline-offset: .18em; }
.routes .route-detail { color: var(--steel); font-size: 1rem; font-weight: 400; font-variant-numeric: tabular-nums; }
@media (max-width: 860px) { .enquiry-grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ footer */
.site-footer { background: var(--graphite); color: var(--white); padding-block: clamp(48px, 6vw, 88px) var(--s5); }
.site-footer a { color: var(--white); }
.footer-top { display: grid; grid-template-columns: minmax(0, 5fr) repeat(3, minmax(0, 2fr)); gap: var(--s5); padding-bottom: var(--s6); border-bottom: 1px solid #3F3F46; }
.footer-top img.lockup { width: 220px; }
.footer-top h2 { font-size: var(--fs-small); font-weight: 600; margin-bottom: var(--s3); color: #D4D4D8; letter-spacing: 0; }
.footer-top ul { list-style: none; }
.footer-top li { margin-bottom: var(--s2); }
.footer-blurb { color: #D4D4D8; max-width: 40ch; margin-top: var(--s4); }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s3); padding-top: var(--s4); font-size: var(--fs-small); color: #D4D4D8; }
@media (max-width: 900px) { .footer-top { grid-template-columns: 1fr 1fr; } .footer-top > :first-child { grid-column: 1 / -1; } }

/* WhatsApp: a quiet rectangle, not a floating glow bubble */
.wa-link { position: fixed; right: var(--s3); bottom: var(--s3); z-index: 40; display: inline-flex; align-items: center; gap: var(--s2); min-height: 48px; padding: 0 var(--s3); background: var(--graphite); color: var(--white); border: 1px solid var(--white); font-weight: 500; text-decoration: none; }
.wa-link:hover { background: var(--white); color: var(--graphite); border-color: var(--graphite); }
.wa-link svg { width: 20px; height: 20px; }
@media (max-width: 600px) { .wa-link .wa-text { display: none; } .wa-link { padding: 0 14px; } }
/* A page with a form: the button must never cover a field (at 390 px the fields run edge to edge, so a floating button always would at some
   scroll position). It stays in the page instead, at the bottom right, with room for it under the footer's last line. */
body:has(.hw-form) { position: relative; }
body:has(.hw-form) .wa-link { position: absolute; bottom: var(--s3); }
body:has(.hw-form) .site-footer { padding-bottom: calc(var(--s5) + 48px + var(--s3)); }

/* ------------------------------------------------------------------ reveal (one orchestrated entrance per page) */
/* Pure CSS (no JavaScript dependency): content is never left hidden if a script fails to load. */
@media (prefers-reduced-motion: no-preference) {
	@view-transition { navigation: auto; }
	[data-reveal] { animation: rise .7s var(--ease) both; }
	[data-reveal]:nth-child(2), .hero-field > div + div[data-reveal] { animation-delay: .12s; }
	.hero-field > div + div[data-reveal] { animation-delay: .24s; }
	@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; }
	.dims .draw { stroke-dashoffset: 0; }
	.dims text { opacity: 1; }
}

@media print {
	.site-header, .site-footer, .wa-link, .btn { display: none !important; }
	body { background: #fff; }
}

/* Application pages v2: outcomes, spaces, grouped index cards */
.app-intro { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--s6); align-items: start; }
.app-intro.single { grid-template-columns: minmax(0, 1fr); }
.app-intro.single .prose { max-width: 68ch; }
.outcomes { list-style: none; border-top: 1px solid var(--graphite); }
.outcomes li { padding: var(--s3) 0; border-bottom: 1px solid var(--rule); }
.outcomes h3 { font-size: 1.0625rem; margin-bottom: var(--s1); }
.outcomes p { margin: 0; color: var(--steel); }
@media (max-width: 860px) { .app-intro { grid-template-columns: 1fr; gap: var(--s5); } }
.space-grid { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5) var(--s4); margin-top: var(--s5); }
.space-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.space-grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin-bottom: var(--s3); background: var(--white); }
.space-grid h3 { font-size: 1.125rem; margin-bottom: var(--s2); }
.space-grid p { margin: 0; color: var(--steel); }
.space-grid a { display: block; text-decoration: none; }
.space-grid a:hover h3, .space-grid a:focus-visible h3 { text-decoration: underline; text-underline-offset: .18em; }
@media (max-width: 960px) { .space-grid, .space-grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .space-grid, .space-grid.four { grid-template-columns: 1fr; } }
/* More than three spaces (Facade 7, Rail & metro 5; the list carries its size as n5 / n7). No lonely tile: on a wide
   screen the rows run on a 12-column grid and the last row's tiles grow to fill it, and where the grid is two columns
   an odd last tile spans both and lies photo-beside-text. Every tile keeps the same card style. */
@media (min-width: 961px) {
	.space-grid.n5, .space-grid.n7 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
	.space-grid.n5 > li, .space-grid.n7 > li { grid-column: span 4; }
	.space-grid.n5 > li:nth-child(n+4) { grid-column: span 6; }                      /* 3 + 2 */
	.space-grid.n5 > li:nth-child(n+4) img { aspect-ratio: 3 / 2; }
	.space-grid.n7 > li:nth-child(-n+4) { grid-column: span 6; }                     /* 2 + 2 + 3 */
}
@media (min-width: 1280px) {
	.space-grid.n7 > li:nth-child(-n+4) { grid-column: span 3; }                     /* 4 + 3 */
}
@media (min-width: 601px) and (max-width: 960px) {
	.space-grid:not(.four) > li:last-child:nth-child(odd) {
		grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 1fr auto auto 1fr; column-gap: var(--s4);
	}
	.space-grid:not(.four) > li:last-child:nth-child(odd) > img { grid-column: 1; grid-row: 1 / -1; margin-bottom: 0; }
	.space-grid:not(.four) > li:last-child:nth-child(odd) > h3 { grid-column: 2; grid-row: 2; }
	.space-grid:not(.four) > li:last-child:nth-child(odd) > p { grid-column: 2; grid-row: 3; }
}
.group-head { margin-bottom: var(--s4); }
.app-cards { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5) var(--s4); }
.app-cards a { display: block; text-decoration: none; border-top: 1px solid var(--graphite); padding-top: var(--s3); }
.app-cards img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; margin-bottom: var(--s3); background: var(--white); }
.app-cards .app-name { display: block; font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; margin-bottom: var(--s1); }
.app-cards .app-line { display: block; color: var(--steel); }
.app-cards a:hover .app-name, .app-cards a:focus-visible .app-name { text-decoration: underline; text-underline-offset: .18em; }
@media (max-width: 960px) { .app-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .app-cards { grid-template-columns: 1fr; } }

/* Page photos (website v2 Phase B): a people photo under a section heading (About, Partners) */
.page-photo { margin-top: var(--s5); }
.page-photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--white); }
.page-photo figcaption { margin-top: var(--s2); font-size: var(--fs-small); color: var(--steel); }

/* Partners FAQ (website v2 Phase B): native disclosure widgets, no JavaScript; a plain plus or minus as the marker */
.faq { border-top: 1px solid var(--graphite); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { display: flex; justify-content: space-between; gap: var(--s4); padding: var(--s4) 0; font-size: 1.0625rem; font-weight: 600; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
/* the second content line (after the slash) is the alt text: empty, so a screen reader does not say "plus" or "minus"
   after every question (the open/closed state is announced natively); browsers without it keep the first line */
.faq summary::after { content: "+"; content: "+" / ""; flex: none; font-weight: 500; }
.faq details[open] summary::after { content: "\2212"; content: "\2212" / ""; }
.faq details p { max-width: 68ch; margin: 0 0 var(--s4); color: var(--steel); }

/* Home hero trial (website v2 Phase B): a people photo fills the right-hand pane instead of the measured product. Its
   backdrop is a little darker than brand Marigold (ledger R17), so the pane keeps its Graphite rule and white ground and
   is never blended into the Marigold field. */
.hero-object.is-photo { display: block; padding: 0; overflow: hidden; }
.hero-object.is-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 960px) { .hero-object.is-photo { aspect-ratio: 4 / 5; max-height: 80vh; } }
/* Home applications grid: the second group heading needs room above it */
.app-cards + .group-head { margin-top: var(--s6); }

/* Light Lab v2: jump-nav, beam and spill, room estimate, light levels, colour rendering, colour temperature photos.
   Flat tints only (brand): no gradients, glows or shadows. Nothing here animates. */
.beam-figure .spill { fill: var(--pale); stroke: var(--steel); stroke-width: 1.5; stroke-dasharray: 6 4; }
.beam-figure .axis { stroke: var(--steel); stroke-width: 1; stroke-dasharray: 2 4; }
.beam-figure .dim-f { stroke-dasharray: 6 4; }
.beam-legend { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); padding: var(--s2) var(--s3); border-top: 1px solid var(--rule); font-size: var(--fs-small); }
.beam-legend li { display: inline-flex; align-items: center; gap: var(--s2); }
.swatch { display: inline-block; width: 28px; height: 14px; border: 1.5px solid var(--graphite); background: var(--cream); }
.swatch.spill { background: var(--pale); border: 1.5px dashed var(--steel); }
.lab-defs { margin: var(--s4) 0 0; border-top: 1px solid var(--rule); }
.lab-defs div { padding: var(--s2) 0; border-bottom: 1px solid var(--rule); }
.lab-defs dt { font-weight: 600; }
.lab-defs dd { margin: 0; color: var(--steel); }

.levels-group + .levels-group { margin-top: var(--s6); }
.levels-group h3 { margin-bottom: var(--s3); }
.levels-table td { overflow-wrap: break-word; }
.levels-table tbody th { font-weight: 500; white-space: normal; overflow-wrap: break-word; }
.level-note { display: block; margin-top: var(--s1); font-size: var(--fs-small); font-weight: 400; color: var(--steel); }
.levels-sources-title { margin-top: var(--s6); margin-bottom: var(--s3); }
.levels-sources { padding-left: 1.4em; font-size: var(--fs-small); color: var(--steel); }
.levels-sources li { margin-bottom: var(--s2); }
.levels-sources li:target { background: var(--cream); }
.page-lab [hidden] { display: none !important; } /* img and .filter-bar set display, which would override [hidden] */
.room-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3) var(--s4); margin-top: var(--s4); }
.room-fields .full { grid-column: 1 / -1; }
.lab-controls .room-fields label { margin: 0 0 6px; }
.room-fields input, .room-fields select { width: 100%; min-height: 48px; padding: 10px 14px; background: var(--white); border: 1px solid var(--steel); border-radius: 0; font-variant-numeric: tabular-nums; }
.room-fields [aria-invalid="true"] { border: 2px solid var(--graphite); }
.lab-result p { margin: 0; }
.lab-result p + p { margin-top: var(--s2); font-size: var(--fs-body); }
.plan-figure { background: var(--white); border: 1px solid var(--graphite); }
.plan-figure svg { width: 100%; height: auto; }
.plan-figure .room { fill: var(--cream); stroke: var(--graphite); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.plan-figure .lum { fill: var(--graphite); }
.plan-figure text { font: 500 15px var(--font); fill: var(--graphite); font-variant-numeric: tabular-nums; }
.plan-figure figcaption { padding: var(--s2) var(--s3); border-top: 1px solid var(--rule); font-size: var(--fs-small); color: var(--steel); }
.lab-assumptions { margin-top: var(--s5); }
.lab-assumptions h3 { font-size: 1.0625rem; margin-bottom: var(--s2); }
.lab-assumptions ul { padding-left: 1.2em; color: var(--steel); }
.lab-assumptions li + li { margin-top: var(--s1); }
@media (max-width: 700px) { .room-fields { grid-template-columns: 1fr; } }

.cri-compare { max-width: 960px; }
.cri-labels { display: flex; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s2); font-weight: 600; }
.cri-stage { position: relative; border: 1px solid var(--graphite); background: var(--white); --split: 50%; }
.cri-stage img, .cri-stage canvas { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.cri-stage canvas { position: absolute; inset: 0; height: 100%; clip-path: inset(0 0 0 var(--split)); }
.cri-divider { position: absolute; top: 0; bottom: 0; left: var(--split); width: 4px; margin-left: -2px; background: var(--graphite); border-inline: 1px solid var(--white); pointer-events: none; }
.cri-controls { margin-top: var(--s3); }
.cri-controls label { display: block; font-weight: 600; margin-bottom: var(--s2); }
.cri-controls input[type="range"] { width: 100%; height: 32px; accent-color: var(--graphite); }
.cri-note { margin-top: var(--s3); }

.lab-nav { border-top: 1px solid var(--rule); }
.lab-nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); padding-block: var(--s3); }
.lab-nav a { font-weight: 500; }

@media (min-width: 901px) and (max-width: 1150px) {
	/* beam figure and room plan */
	.beam-figure text { font-size: 20px; }
	.plan-figure text { font-size: 20px; }
}

@media (max-width: 600px) {
	/* beam figure */
	.beam-figure text { font-size: 24px; }
	.beam-figure .spill-text { display: none; }
	/* room plan */
	.plan-figure text { font-size: 24px; }
}

/* Colour temperature on application photos ("See it in a space"): flat, nothing animates. */
.cct-space { margin-top: var(--s7); padding-top: var(--s5); border-top: 2px solid var(--graphite); }
.cct-pick-label { margin: var(--s4) 0 var(--s2); font-weight: 600; }
.cct-picker { margin: 0 0 var(--s3); }
.cct-stage { border: 1px solid var(--graphite); background: var(--white); }
.cct-stage img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
.cct-label { margin-top: var(--s3); }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
@media (max-width: 700px) { .cct-stage img { aspect-ratio: 3 / 2; } }
.cct-space.is-live .cct-stage img { filter: url(#cct-filter); }
.cct-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s3) var(--s5); align-items: end; margin-top: var(--s4); }
.cct-controls label { display: block; font-weight: 600; margin-bottom: var(--s2); }
.cct-controls output { font-variant-numeric: tabular-nums; font-weight: 500; }
.cct-controls input[type="range"] { width: 100%; height: 32px; accent-color: var(--graphite); }
.cct-quick { margin: 0; }
@media (max-width: 700px) { .cct-controls { grid-template-columns: 1fr; } }