/**
 * Hèmèra theme — front-end styles.
 * Source of truth = /ref/*.jpg mock-ups. Aesthetic: light, airy, monochrome,
 * Open Sans, small type (client baseline ~11px).
 */

:root {
	--c-text: #1a1a1a;
	--c-muted: #767676;
	--c-line: #e3e3e3;
	--c-bg: #ffffff;
	--c-bg-alt: #f4f4f3;
	--c-dark: #111111;
	--c-accent: #c5a253;
	--fs-base: 11px;
	--maxw: 1800px;     /* design is near full-bleed (~92% width), not narrow */
	--label-w: 17%;     /* left heading column on home bands */
	--gap: 24px;
}

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

/* Form controls don't inherit font-family by default — force Open Sans everywhere. */
button, input, select, textarea { font-family: inherit; font-size: inherit; }

body {
	margin: 0;
	font-family: "Open Sans", -apple-system, Arial, sans-serif;
	font-size: var(--fs-base);
	line-height: 1.6;
	color: var(--c-text);
	background: var(--c-bg);
	-webkit-font-smoothing: antialiased;
	/* sticky footer so short pages (e.g. search) still fill the viewport */
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	/* clip (not hidden) lets full-bleed 100vw sections sit edge-to-edge without a
	   horizontal scrollbar, and doesn't break the sticky header. */
	overflow-x: clip;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { font-weight: 600; line-height: 1.2; margin: 0 0 .6em; }
h1 { font-size: 2.6rem; font-weight: 300; }
h2 { font-size: 2rem; font-weight: 300; }

.site-main { flex: 1 0 auto; }
.site-footer { flex-shrink: 0; }
.section-head { max-width: var(--maxw); margin: 0 auto; padding: 32px 24px 16px; border-top: 1px solid var(--c-line); }
.section-head h1, .section-head h2 { color: #333; font-weight: 300; }
/* Bold page titles — keep Projects archive, News index and About consistent. */
.post-type-archive-project .section-head h1,
.blog .section-head h1,
.page-id-18 .section-head h1 { font-weight: 700; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; background: var(--c-bg); z-index: 100; border-bottom: 1px solid transparent; }
.site-header.is-stuck { border-bottom-color: var(--c-line); box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.site-header__inner {
	max-width: var(--maxw); margin: 0 auto; padding: 30px 24px;
	display: flex; align-items: center; gap: 48px;
}
.site-logo { font-weight: 700; letter-spacing: .12em; font-size: 1.5rem; margin-left: -8px; display: flex; align-items: center; flex-shrink: 0; }
.site-logo img { height: 1.25rem; max-height: none; width: auto; display: block; }
.primary-nav { flex: 1; }
.primary-nav__list { list-style: none; display: flex; gap: 42px; margin: 0; padding: 0; font-size: 1.15rem; }
.primary-nav__list a { color: #222; }
/* Search + language block inside the burger dropdown — mobile only (see ≤700px). */
.primary-nav__extra { display: none; }
.site-header__tools { display: flex; align-items: center; gap: 20px; }
.search-toggle, .lang-switcher__toggle { background: none; border: 0; cursor: pointer; color: #333; padding: 4px; line-height: 0; }

/* Burger toggle — hidden on desktop, shown under 700px (see responsive section) */
.nav-toggle { display: none; align-items: center; justify-content: center; width: 34px; height: 34px; background: none; border: 0; cursor: pointer; padding: 0; }
.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; display: block; width: 22px; height: 2px; background: #222; transition: transform .25s ease, opacity .2s ease; }
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before { position: absolute; left: 0; top: -7px; }
.nav-toggle__bars::after { position: absolute; left: 0; top: 7px; }
.site-header.nav-open .nav-toggle__bars { background: transparent; }
.site-header.nav-open .nav-toggle__bars::before { transform: translateY(7px) rotate(45deg); }
.site-header.nav-open .nav-toggle__bars::after { transform: translateY(-7px) rotate(-45deg); }

/* Language switcher: globe trigger + dropdown */
.lang-switcher { position: relative; }
.lang-switcher__toggle { display: inline-flex; align-items: center; gap: 6px; }
.lang-switcher__current { font-size: 1rem; line-height: 1; letter-spacing: .04em; }
.lang-switcher__menu {
	list-style: none; margin: 0; padding: 6px 0;
	position: absolute; right: 0; top: calc(100% + 10px); min-width: 72px;
	background: #fff; border: 1px solid var(--c-line);
	box-shadow: 0 6px 22px rgba(0,0,0,.10);
	opacity: 0; visibility: hidden; transform: translateY(-4px);
	transition: opacity .15s ease, transform .15s ease, visibility .15s;
	z-index: 60; text-transform: uppercase;
}
.lang-switcher.is-open .lang-switcher__menu { opacity: 1; visibility: visible; transform: translateY(0); }
.lang-switcher__item a { display: block; padding: 7px 16px; color: #333; letter-spacing: .04em; }
.lang-switcher__item a:hover { background: #f4f4f4; }
.lang-switcher__item.is-current a { font-weight: 600; color: #111; }

/* ---------- Mega menu ---------- */
.mega-menu {
	position: absolute; left: 0; right: 0; top: 100%;
	background: #fff; border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line);
	box-shadow: 0 12px 24px rgba(0,0,0,.06);
	opacity: 0; visibility: hidden; transform: translateY(-6px);
	transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.menu-item-products:hover ~ .mega-menu,
.primary-nav__list li:hover + .mega-menu,
.site-header:hover .mega-menu.is-open,
.mega-menu:hover,
.mega-menu.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.mega-menu__inner { max-width: var(--maxw); margin: 0 auto; padding: 28px 24px; display: grid; grid-template-columns: 160px 160px 1fr; gap: 32px; }
.mega-menu__col h4 { font-size: 1rem; margin-bottom: 12px; }
.mega-menu__col ul { list-style: none; margin: 0; padding: 0; }
.mega-menu__col li { margin-bottom: 6px; }
.mega-menu__col a { color: var(--c-muted); }
.mega-menu__col a:hover { color: var(--c-text); }
.mega-menu__families { columns: 4; column-gap: 24px; }

/* ---------- Search panel ---------- */
.search-panel {
	position: absolute; left: 0; right: 0; top: 100%; background: #fff;
	border-bottom: 1px solid var(--c-line); padding: 20px 24px;
	opacity: 0; visibility: hidden; transform: translateY(-6px);
	transition: opacity .18s, transform .18s, visibility .18s; z-index: 110;
}
.search-panel.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.search-panel__inner { max-width: var(--maxw); margin: 0 auto; }
.search-panel__form { display: flex; gap: 12px; }
.search-panel__input { flex: 1; border: 0; border-bottom: 1px solid var(--c-text); padding: 10px 0; font-size: 1.4rem; outline: none; background: none; }
.search-panel__submit { border: 0; background: var(--c-dark); color: #fff; padding: 0 22px; cursor: pointer; }
.search-panel__results { margin-top: 14px; }
.search-suggestion { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--c-line); }
.search-suggestion img { width: 40px; height: 40px; object-fit: cover; }
.search-suggestion__group { color: var(--c-muted); margin-left: auto; text-transform: uppercase; letter-spacing: .08em; }

/* ---------- Hero (full-bleed, edge to edge) ---------- */
.hero { position: relative; width: 100%; }
/* Full viewport width, responsive height capped at 640px. (Using aspect-ratio +
   max-height made the browser derive width from the capped height — leaving a gap.) */
.hero__media { position: relative; width: 100%; height: clamp(380px, 42vw, 640px); overflow: hidden; background: #ddd; }
.hero__video, .hero__img { width: 100%; height: 100%; object-fit: cover; }
.hero__video { cursor: pointer; }
/* Overlay lets clicks pass through to the video; only the headline box is opaque.
   padding-left:0 so the black box touches the left edge; the headline keeps its
   text in the same place via a matching left padding. */
.hero__overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding-left: 0; pointer-events: none; }
.hero__headline { background: #000; color: #fff; font-size: 2.3rem; font-weight: 700; line-height: 1.14; padding: 26px 40px 26px clamp(58px, calc(4vw + 34px), 118px); display: inline-block; transition: opacity .3s ease; }
/* When the hero video is playing, fade the headline so the video is visible. */
.hero.is-playing .hero__headline { opacity: 0; }
.hero__play { position: absolute; inset: 0; margin: auto; width: 90px; height: 90px; background: none; border: 0; cursor: pointer; padding: 0; transition: opacity .2s ease; }
.hero__play svg { width: 100%; height: 100%; display: block; }

/* ---------- Home bands: left label + right content (ref: Index Alt) ---------- */
.band {
	max-width: var(--maxw); margin: 0 auto; padding: 36px 24px 40px;
	display: grid; grid-template-columns: var(--label-w) 1fr; gap: 36px;
	align-items: start; border-top: 1px solid #cfcfcf;
}
.band__label h2 { font-weight: 300; color: #333; font-size: 2.7rem; margin: 0; }
.band__body { position: relative; min-width: 0; }
.band--products { --cap: 58px; margin-top: 44px; }  /* caption height + breathing room between hero and the separator */
.band--projects { --cap: 128px; margin-top: 44px; border-top: 1px solid #838282; } /* taller caption + separator above (spacing from the Craftsmanship section) */

/* ---------- Carousel ---------- */
.home-section { max-width: var(--maxw); margin: 0 auto 16px; padding: 0 24px 24px; }
.carousel { position: relative; }
.carousel__track { display: flex; gap: var(--gap); overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x mandatory; scrollbar-width: none; }
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__slide { flex: 0 0 calc((100% - var(--gap) * 3) / 4); scroll-snap-align: start; } /* default 4-up (inspiration) */
.carousel--3 .carousel__slide { flex-basis: calc((100% - var(--gap) * 2) / 3); }
.carousel--2 .carousel__slide { flex-basis: calc((100% - var(--gap)) / 2); }
.carousel__nav {
	/* vertically centered on the card IMAGE (excludes the caption height --cap) */
	position: absolute; top: calc((100% - var(--cap, 60px)) / 2); transform: translateY(-50%); z-index: 2;
	width: 46px; height: 46px; border: 0; cursor: pointer; padding: 0;
	background: var(--c-dark); color: #fff; font-size: 1.6rem; line-height: 1;
	display: flex; align-items: center; justify-content: center;
}
.carousel__nav svg { width: 18px; height: 18px; display: block; }
/* arrows straddle the carousel edge: 50% outside, 50% inside (button is 46px wide) */
.carousel__nav--prev { left: -23px; }
.carousel__nav--next { right: -23px; }
.carousel__nav[disabled] { opacity: 0; pointer-events: none; }

/* ---------- Cards ---------- */
.card__media { position: relative; display: block; overflow: hidden; background: var(--c-bg-alt); aspect-ratio: 1/1; }
.card--project .card__media { aspect-ratio: 4/3; }
.card--project-carousel .card__media { aspect-ratio: 16/10; }
.card__img { width: 100%; height: 100%; object-fit: cover; transition: opacity .35s ease; }
.card__img--hover { position: absolute; inset: 0; opacity: 0; }
.card--product .card__media:hover .card__img--hover { opacity: 1; }
.card__meta { display: flex; justify-content: space-between; align-items: flex-start; padding: 8px 0; gap: 12px; }
.card__title { font-size: 1rem; font-weight: 700; margin: 0; }
.card__sub { color: var(--c-muted); display: block; }
.card__aside { text-align: right; }
.card__code { color: var(--c-muted); display: block; margin-bottom: 4px; }

/* finish swatches */
.finish-swatches { display: inline-flex; gap: 5px; }
.finish-swatch { width: 11px; height: 11px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); display: inline-block; flex: 0 0 11px; }

/* project card overlay (grid) */
.card--project .card__overlay {
	position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end;
	padding: 18px; color: #fff; background: linear-gradient(transparent 40%, rgba(0,0,0,.55));
	opacity: 0; transition: opacity .25s ease;
}
.card--project-grid .card__media:hover .card__overlay { opacity: 1; }
/* Touch devices have no hover — keep the name + location always visible there. */
@media (hover: none) {
	.card--project-grid .card__overlay { opacity: 1; }
}
.card--project .card__overlay .card__title { color: #fff; font-weight: 700; font-size: 1.2rem; }
/* City matches the title colour + size on hover, thin (light) weight */
.card--project .card__overlay .card__sub { color: #fff; font-weight: 300; font-size: 1.2rem; }
.card--project-carousel .card__overlay { display: none; }
.card__body { padding: 10px 0; }
.card__head { display: flex; justify-content: space-between; }
.card__date { color: var(--c-muted); }
.card__excerpt { color: #444; margin: 6px 0; }
.card__more { text-decoration: underline; }

/* ---------- Random section (full-bleed grey: title | text | media) ---------- */
.random { background: var(--c-bg-alt); }
.random__inner {
	max-width: var(--maxw); margin: 0 auto; padding: 56px 24px;
	display: grid; grid-template-columns: minmax(380px, 0.9fr) 1.4fr 1.5fr; gap: 28px; align-items: center;
}
.random__title { min-width: 0; }
.random__title h2 { font-weight: 300; font-size: 2.6rem; margin: 0; color: #333; overflow-wrap: break-word; }
.random__text p { color: #444; margin: 0; max-width: none; }
.random__media { position: relative; }
.random__media img, .random__media video { width: 100%; height: auto; max-height: 360px; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.random__video { cursor: pointer; }
.random__play { position: absolute; inset: 0; margin: auto; width: 90px; height: 90px; background: none; border: 0; cursor: pointer; padding: 0; transition: opacity .2s ease; }
.random__play svg { width: 100%; height: 100%; display: block; }

/* ---------- Products archive ---------- */
.products-layout { max-width: var(--maxw); margin: 24px auto; padding: 0 24px; display: grid; grid-template-columns: 220px 1fr; gap: 40px; }
.filters__title { font-weight: 300; font-size: 2rem; }
.filter-group { border-bottom: 1px solid var(--c-line); padding: 8px 0; }
.filter-group__head { width: 100%; text-align: left; background: none; border: 0; cursor: pointer; font-weight: 700; padding: 8px 0; display: flex; justify-content: space-between; }
.filter-group__toggle::after { content: "\2013"; } /* – en-dash as escape */
.filter-group.is-collapsed .filter-group__toggle::after { content: "+"; }
.filter-group.is-collapsed .filter-group__list { display: none; }
.filter-group__list { list-style: none; margin: 0 0 8px; padding: 0; }
.filter-group__list label { display: flex; align-items: flex-start; gap: 7px; padding: 3px 0; cursor: pointer; color: #444; }
.filter-group__list label input { flex: 0 0 auto; margin-top: 2px; }
.filter-group__list .finish-swatch { margin-top: 3px; }
.products-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.products-loadmore, .projects-loadmore, .pagination { text-align: center; padding: 32px; }
.btn-loadmore { background: none; border: 1px solid var(--c-line); padding: 10px 26px; cursor: pointer; }
.btn-loadmore--chevron { border-radius: 50%; width: 44px; height: 44px; }
/* Down-arrow load-more (same black box as the carousel nav, chevron rotated down) */
.loadmore-arrow {
	display: inline-flex; align-items: center; justify-content: center;
	width: 46px; height: 46px; padding: 0; border: 0; cursor: pointer;
	background: var(--c-dark); color: #fff; font-size: 1.6rem; line-height: 1;
}
.loadmore-arrow__icon { display: block; line-height: 0; }
.loadmore-arrow svg { width: 18px; height: 18px; display: block; }

/* ---------- Single product ---------- */
.product-single { max-width: var(--maxw); margin: 24px auto; padding: 0 24px; }
.product-top { display: grid; grid-template-columns: 1.45fr 1.1fr 1.2fr; gap: 34px; align-items: start; }

/* Gallery: one large image + up to two stacked side images (ref mock). */
.product-gallery { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; align-items: stretch; }
.product-gallery--single { grid-template-columns: 1fr; }
.product-gallery__main { background: var(--c-bg-alt); }
.product-gallery__main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-gallery__side { display: grid; grid-template-rows: 1fr 1fr; gap: 12px; }
.product-gallery__side-item { background: var(--c-bg-alt); }
.product-gallery__side-item img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Info column */
.product-info__title { font-weight: 700; font-size: 2.6rem; line-height: 1.05; margin: 0 0 2px; }
.product-info__mount { font-size: 1.7rem; font-weight: 300; color: #333; margin: 0 0 14px; }
.product-info__code { font-weight: 700; font-size: 1rem; letter-spacing: .05em; margin: 0 0 8px; }
.product-info__swatches { margin-bottom: 18px; }
.product-info__desc { margin-bottom: 14px; }
.product-info__features-title { font-weight: 700; font-size: 1.05rem; margin: 12px 0 6px; }
.product-info__features { padding-left: 1.1em; margin: 6px 0; }
.product-info__features li { margin-bottom: 2px; }
.product-info__footnotes { color: var(--c-muted); }

/* Right column: spec line-drawings (left) + dropdowns (right), set a bit lower. */
.product-docs { display: grid; grid-template-columns: 1fr 0.8fr; gap: 18px; align-items: start; margin-top: 0; }
.product-docs__drawings { display: grid; gap: 12px; }
.product-docs__drawing { border: 1px solid var(--c-line); background: #fff; padding: 8px; }
.product-docs__drawing img { width: 100%; height: auto; display: block; }
/* Dropdown rows: horizontal dividers only — no left/right borders. */
.product-docs__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--c-line); }
.product-docs__item a, .product-docs__item > span { display: flex; justify-content: space-between; align-items: center; gap: 10px; border-bottom: 1px solid var(--c-line); padding: 9px 2px; color: #333; font-size: 1rem; }
.product-docs__item .is-empty { color: #b3b3b3; }
.product-docs__caret::after { content: "\25BE"; font-size: .85em; opacity: .65; } /* ▾ as escape — avoids encoding mojibake */

/* Feature band ("Versatility"): full-bleed grey, image right (≤60%, full height),
   black text box overlapping the image's left edge. */
.product-band { position: relative; width: 100vw; margin: 52px 0; margin-left: calc(50% - 50vw); background: var(--c-bg-alt); }
/* image hangs to the right (~3px) with only 5px top/bottom padding */
.product-band__inner { position: relative; padding: 18px 28px 18px 0; display: flex; justify-content: flex-end; }
.product-band__media { width: 58%; }
.product-band__media img { width: 100%; height: auto; display: block; } /* full height, no crop */
/* black box hangs off the left corner, taller than the image so it rises above it */
.product-band__text { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 44%; background: #000; color: #fff; padding: 30px 42px; z-index: 2; }
.product-band__text h2 { font-weight: 700; font-size: 1.7rem; margin: 0 0 10px; color: #fff; }
.product-band__text p { margin: 0; font-size: 1.05rem; line-height: 1.6; font-weight: 300; }

/* Darker, well-spaced separator before "Inspiration & Similar products". */
.inspiration { margin-top: 56px; }
.inspiration .section-head { border-top: 2px solid #333; padding-top: 38px; }
/* Rendered INSIDE .product-single, which already supplies the 24px page gutter.
   Drop the block's own horizontal padding so the separator line, heading and
   mosaic hang flush with the logo's visual left edge (the site content gutter)
   instead of being indented a second 24px. */
.product-single .inspiration.home-section { padding-left: 0; padding-right: 0; }
.product-single .inspiration .section-head { padding-left: 0; padding-right: 0; }

/* Mosaic carousel: varying-size image tiles (tall single + stacked pairs). */
/* --cap MUST carry a unit: a bare 0 makes the nav's `calc((100% - var(--cap))/2)`
   invalid, which drops the arrows to the bottom instead of centering them. */
.inspiration-mosaic { --cap: 0px; }
.inspiration-mosaic__track { display: flex; gap: 12px; overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: none; scrollbar-width: none; }
.inspiration-mosaic__track::-webkit-scrollbar { display: none; }
.inspiration-col { flex: 0 0 auto; display: flex; flex-direction: column; gap: 12px; height: 340px; }
.inspiration-col--tall { width: 300px; }
.inspiration-col--stack { width: 210px; }
.inspiration-tile { position: relative; display: block; overflow: hidden; background: var(--c-bg-alt); }
.inspiration-col--tall .inspiration-tile { height: 100%; }
.inspiration-col--stack .inspiration-tile { height: calc((100% - 12px) / 2); }
.inspiration-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s ease; }
.inspiration-tile:hover img { transform: scale(1.05); }
.inspiration-tile__label { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 16px; color: #fff; font-weight: 600; background: linear-gradient(transparent, rgba(0,0,0,.6)); opacity: 0; transition: opacity .25s ease; }
.inspiration-tile:hover .inspiration-tile__label { opacity: 1; }
/* No hover on touch devices — always show the tile label (placed after the base
   rule so it wins on source order). */
@media (hover: none) { .inspiration-tile__label { opacity: 1; } }

/* ---------- Single project ---------- */
/* The article is full-width; only the head + body sit in the centred container,
   so the hero image spans the whole viewport (truly full width). */
.project-single { margin: 24px 0 0; padding: 0; }
.project-single__head,
.project-single__body { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.project-single__head { margin-bottom: 18px; }
.project-single__title { font-weight: 700; font-size: 2.4rem; margin: 0; }
.project-single__crumb { font-weight: 300; color: var(--c-muted); }

/* Full-bleed architectural hero band */
.project-single__hero { width: 100%; margin: 0 0 36px; aspect-ratio: 16 / 6; overflow: hidden; background: var(--c-bg-alt); }
.project-single__hero img { width: 100%; height: 100%; object-fit: cover; }

/* Two columns: story text left, image mosaic right */
.project-single__body { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; padding-bottom: 24px; }

/* Project / Location / Architect / Photo — plain label, bold value. Only the
   link-like rows (Project, Architect) keep an underline. */
/* One shared grid so the label column auto-sizes to the widest label (works in
   any language — e.g. FR "Emplacement" is wider than EN "Location") and values
   stay aligned. Rows use display:contents so dt/dd become items of this grid. */
.project-facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; align-items: baseline; margin: 0 0 20px; font-size: 1rem; }
.project-facts__row { display: contents; }
.project-facts dt { font-weight: 400; color: var(--c-text); }
.project-facts dd { margin: 0; font-weight: 700; text-decoration: none; }
.project-facts__row--link dd { text-decoration: underline; text-underline-offset: 2px; }
.project-single__desc { color: #333; font-size: 1.05rem; line-height: 1.55; }
.project-single__desc p { margin: 0 0 .9em; text-align: justify; }

/* Featured product cards (image + name / type / SKU) */
.featured-products { margin-top: 30px; }
.featured-products__head { font-size: 1rem; font-weight: 700; margin: 0 0 12px; }
.featured-product { display: flex; align-items: center; gap: 18px; border: 1px solid var(--c-line); padding: 14px 18px; margin-bottom: 12px; color: inherit; transition: border-color .2s ease; }
.featured-product:hover { border-color: #b8b8b8; text-decoration: none; }
.featured-product__img { flex: 0 0 64px; width: 64px; height: 64px; background: var(--c-bg-alt); display: flex; align-items: center; justify-content: center; }
.featured-product__img img { width: 100%; height: 100%; object-fit: contain; }
.featured-product__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.featured-product__title { font-weight: 700; font-size: 1.05rem; }
.featured-product__type { color: var(--c-muted); }
.featured-product__sku { color: #555; letter-spacing: .02em; margin-top: 4px; }
.featured-product__note { color: var(--c-muted); font-style: italic; }

/* Image mosaic — architectural 2-1-2 rhythm: images run in pairs, and every 3rd
   image spans the full width as a band (pair, band, pair, band …). A lone image
   goes full width. */
.project-single__gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.project-single__gallery-item { margin: 0; overflow: hidden; aspect-ratio: 4 / 3; }
.project-single__gallery-img { width: 100%; height: 100%; object-fit: cover; }
.project-single__gallery-item:nth-child(3n+3) { grid-column: 1 / -1; aspect-ratio: 16 / 8; }
.project-single__gallery[data-count="1"] { grid-template-columns: 1fr; }
.project-single__gallery[data-count="1"] .project-single__gallery-item { aspect-ratio: 16 / 9; }

/* ---------- Projects archive grid ---------- */
.projects-archive { max-width: var(--maxw); margin: 0 auto 24px; padding: 0 24px; }
.projects-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }

/* ---------- Contact ---------- */
.page-title { max-width: var(--maxw); margin: 24px auto 8px; padding: 0 24px; font-weight: 700; }
.page-title__crumb { font-weight: 300; color: var(--c-muted); }
.contact-finder { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.contact-finder__intro { margin: 12px 0; }
.contact-finder__intro p { font-weight: 700; font-size: 1.2rem; margin: 0; }
.zip-search span { display: block; color: var(--c-muted); }
.zip-search input { border: 1px solid var(--c-text); padding: 8px 10px; width: 260px; }
.contact-finder__layout { display: grid; grid-template-columns: 1fr 1.6fr; gap: 28px; margin-top: 16px; }
/* Horizontal padding so the highlighted rep's outline (offset 4px) isn't clipped
   by the scroll container on the left/right. */
.rep-list { max-height: 520px; overflow-y: auto; padding: 4px 10px; }
.rep-list__region { font-style: italic; font-weight: 400; color: #333; margin: 18px 0 4px; }
.rep { margin-bottom: 14px; }
.rep__name { font-weight: 700; margin: 0; }
.rep__address, .rep__phone, .rep__fax, .rep__website { margin: 0; color: #444; }
.rep.is-near { background: #fffbe9; outline: 2px solid var(--c-accent); outline-offset: 4px; }
/* Own stacking context (z-index:0) so Leaflet's high-z panes/controls stay
   contained and never paint over the sticky header (z-index:100). */
.rep-map { min-height: 520px; background: var(--c-bg-alt); position: relative; z-index: 0; isolation: isolate; }
/* Force the basemap fully monochrome (black on white). */
.rep-map .leaflet-tile-pane { filter: grayscale(1) contrast(1.05); }
/* Dark dot markers instead of the default blue pins. */
.rep-pin { background: none; border: 0; }
.rep-pin__dot { display: block; width: 14px; height: 14px; border-radius: 50%; background: #111; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.45); }
.contact-us { max-width: var(--maxw); margin: 48px auto; padding: 0 24px; border-top: 1px solid var(--c-line); padding-top: 32px; }
.contact-us > h2 { font-size: 2.6rem; font-weight: 700; } /* match the "Sales Representative" page title */
.contact-us__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.contact-us__col h4 { font-weight: 700; font-size: 1.2rem; margin-bottom: 8px; }
/* Decorative image: full width, full natural height (no crop, no text overlay). */
.contact-word { width: 100%; }
.contact-word__img { width: 100%; height: auto; display: block; }

/* ---------- Footer ---------- */
.site-footer { background: var(--c-dark); color: #cfcfcf; margin-top: 40px; }
/* Columns grouped left-of-center; trailing 1fr leaves the right side empty (ref mock). */
.site-footer__inner { max-width: var(--maxw); margin: 0 auto; padding: 44px 24px; display: grid; grid-template-columns: 280px auto auto auto 220px 1fr; gap: 96px; }
.site-footer__spacer { display: block; }
.site-footer__logo { font-weight: 700; letter-spacing: .12em; color: #fff; font-size: 1.3rem; display: block; margin-bottom: 10px; }
.site-footer__logo img { height: 22px; width: auto; display: block; filter: brightness(0) invert(1); } /* black wordmark → white on dark footer */
.site-footer h4 { color: #fff; font-size: 1rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 5px; }
.site-footer a:hover { color: #fff; }
.newsletter-form { display: flex; border-bottom: 1px solid #555; }
.newsletter-form input { flex: 1; background: none; border: 0; color: #fff; padding: 6px 0; outline: none; }
.newsletter-form button { background: none; border: 0; color: #fff; cursor: pointer; }
.site-footer__bottom { max-width: var(--maxw); margin: 0 auto; padding: 16px 24px; border-top: 1px solid #2a2a2a; color: #8a8a8a; }

/* ---------- Library / resources ---------- */
.library__section { margin: 40px 0; }
.library__section > h2 { font-size: 1.7rem; font-weight: 300; color: #333; border-top: 1px solid var(--c-line); padding-top: 24px; }
.library__intro { color: var(--c-muted); max-width: 60ch; }
.library__table-wrap { overflow-x: auto; }
.library__table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.library__table th, .library__table td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--c-line); white-space: nowrap; }
.library__table thead th { font-weight: 600; color: #333; text-transform: uppercase; letter-spacing: .06em; font-size: .85rem; }
.library__table tbody tr:hover { background: var(--c-bg-alt); }
.library__mount { display: block; color: var(--c-muted); font-size: .85rem; }
.library__code { color: var(--c-muted); letter-spacing: .04em; }
.library__dl { display: inline-block; border: 1px solid var(--c-line); padding: 3px 12px; letter-spacing: .04em; }
.library__dl:hover { background: var(--c-dark); color: #fff; border-color: var(--c-dark); text-decoration: none; }
.library__none { color: var(--c-line); }

/* ---------- Blog / search ---------- */
.news-archive, .search-results, .page-content { max-width: var(--maxw); margin: 0 auto; padding: 0 24px 24px; }

/* ---------- About page (editable Gutenberg blocks, architectural editorial) ---------- */
.about-page { max-width: 1180px; margin: 0 auto; padding: 8px 0 8px; counter-reset: about; }
.about-lead { max-width: 920px; margin: 4px 0 8px; }
.about-eyebrow { text-transform: uppercase; letter-spacing: .2em; font-size: .95rem; color: var(--c-muted); margin: 0 0 20px; }
.about-lead__statement { font-size: clamp(1.5rem, 2.4vw, 2.3rem); font-weight: 300; line-height: 1.34; color: #222; margin: 0; }
/* Section rows: hairline-separated label column + reading column. */
.about-page .about-row { border-top: 1px solid var(--c-line); margin: 48px 0 0; padding: 44px 0 4px; gap: 48px; align-items: flex-start; }
.about-row__label { counter-increment: about; }
.about-row__label h2 { font-size: 1.7rem; font-weight: 700; color: #222; margin: 0; }
.about-row__label h2::before { display: block; content: counter(about, decimal-leading-zero); font-size: .9rem; letter-spacing: .15em; color: var(--c-muted); margin-bottom: 16px; }
.about-row__body { max-width: 760px; }
.about-row__body p { font-size: 1.12rem; line-height: 1.8; color: #333; margin: 0 0 1.1em; }
.about-row__body p:last-child { margin-bottom: 0; }

@media (max-width: 781px) {
	.about-lead__statement { font-size: 1.45rem; }
	.about-page .about-row { gap: 6px; padding-top: 34px; margin-top: 34px; }
	.about-row__label h2::before { margin-bottom: 8px; }
	.about-row__body p { font-size: 1.05rem; line-height: 1.75; }
}

/* ---------- Single News article ---------- */
/* Editorial layout: title at the top, the (vertical) image on the left, the
   article text in the centre column beside it. Centred, narrower than full
   width because it's an article. */
.news-single { max-width: 1180px; margin: 28px auto 0; padding: 0 24px; }
.news-single__head { margin-bottom: 30px; }
.news-single__crumb { text-transform: uppercase; letter-spacing: .12em; font-size: .9rem; color: var(--c-muted); margin: 0 0 12px; }
.news-single__crumb a { color: inherit; }
.news-single__crumb a:hover { color: var(--c-text); text-decoration: none; }
.news-single__title { font-weight: 700; font-size: 2.6rem; line-height: 1.15; margin: 0; color: var(--c-text); }
.news-single__date { display: block; margin-top: 12px; color: var(--c-muted); text-transform: uppercase; letter-spacing: .08em; font-size: .9rem; }

/* Image (left) + article (centre) */
.news-single__layout { display: grid; grid-template-columns: 400px 1fr; gap: 52px; align-items: start; }
.news-single__layout--noimg { grid-template-columns: minmax(0, 760px); justify-content: center; }
.news-single__media { margin: 0; position: sticky; top: 100px; }
.news-single__media img { width: 100%; height: auto; display: block; background: var(--c-bg-alt); }

/* Reading column */
.news-single__body { max-width: 720px; font-size: 1.12rem; line-height: 1.75; color: #2a2a2a; }
.news-single__body > :first-child { margin-top: 0; }
.news-single__body p { margin: 0 0 1.3em; }
.news-single__body h2 { font-size: 1.7rem; font-weight: 700; line-height: 1.25; margin: 1.6em 0 .5em; color: var(--c-text); }
.news-single__body h3 { font-size: 1.35rem; font-weight: 700; margin: 1.5em 0 .4em; color: var(--c-text); }
.news-single__body ul, .news-single__body ol { margin: 0 0 1.3em; padding-left: 1.4em; }
.news-single__body li { margin-bottom: .5em; }
.news-single__body a { text-decoration: underline; text-underline-offset: 2px; }
.news-single__body img { margin: 1.5em 0; }
.news-single__body figure { margin: 1.8em 0; }
.news-single__body figcaption { color: var(--c-muted); font-size: .95rem; margin-top: 8px; }
.news-single__body blockquote { margin: 1.6em 0; padding: 4px 0 4px 24px; border-left: 3px solid var(--c-accent); font-size: 1.3rem; font-style: italic; color: #444; }

.news-single__foot { margin: 44px 0 0; padding: 22px 0 0; border-top: 1px solid var(--c-line); }
.news-single__back { color: var(--c-muted); letter-spacing: .04em; }
.news-single__back:hover { color: var(--c-text); text-decoration: none; }

@media (max-width: 860px) {
	.news-single__layout { grid-template-columns: 1fr; gap: 28px; }
	.news-single__media { position: static; max-width: 420px; }
}

/* News index: same image grid as Projects, but each item keeps its date + headline
   visible below the image so it reads as an article (not a hover-only tile). */
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.news-card { display: flex; flex-direction: column; }
.news-card__media { position: relative; display: block; overflow: hidden; background: var(--c-bg-alt); aspect-ratio: 4/3; }
.news-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.news-card__media:hover .news-card__img { transform: scale(1.04); }
.news-card__overlay { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 18px; background: linear-gradient(transparent 45%, rgba(0,0,0,.55)); opacity: 0; transition: opacity .25s ease; }
.news-card__media:hover .news-card__overlay { opacity: 1; }
.news-card__more { color: #fff; font-weight: 600; letter-spacing: .04em; }
.news-card__caption { display: block; padding: 12px 0 4px; color: inherit; }
.news-card__caption:hover { text-decoration: none; }
.news-card__date { display: block; color: var(--c-muted); text-transform: uppercase; letter-spacing: .08em; font-size: .85rem; margin-bottom: 5px; }
.news-card__title { font-size: 1.2rem; font-weight: 600; line-height: 1.3; margin: 0; }
.news-card__caption:hover .news-card__title { text-decoration: underline; }
.search-results__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.search-result a { display: block; color: inherit; }
.search-result img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: var(--c-bg-alt); margin-bottom: 8px; }
.search-result__type { display: block; color: var(--c-muted); text-transform: uppercase; letter-spacing: .08em; }
.search-result__title { display: block; font-weight: 700; font-size: 1.1rem; }

/* ---------- Video lightbox ---------- */
.video-lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.85); display: flex; align-items: center; justify-content: center; z-index: 9999; padding: 24px; }
.video-lightbox video, .video-lightbox iframe { width: min(90vw, 1100px); aspect-ratio: 16/9; }
.video-lightbox__close { position: absolute; top: 20px; right: 24px; background: none; border: 0; color: #fff; font-size: 2rem; cursor: pointer; }

/* ---------- Product image lightbox ---------- */
/* On-page product images (gallery mosaic + drawings) just open the lightbox —
   a plain button-style pointer, not a zoom cursor. The zoom (magnifier) cursor
   only appears once inside the lightbox. */
.product-single [data-lightbox-index] { cursor: pointer; }

.product-lightbox { position: fixed; inset: 0; z-index: 10000; display: none; align-items: center; justify-content: center; background: rgba(15,15,15,.94); padding: 4vh 96px; }
.product-lightbox.is-open { display: flex; }
body.has-lightbox { overflow: hidden; }

.product-lightbox__stage { margin: 0; max-width: 100%; max-height: 92vh; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.product-lightbox__img { max-width: min(88vw, 1400px); max-height: 92vh; object-fit: contain; display: block; transition: transform .18s ease; will-change: transform; }
.product-lightbox.is-zoomable .product-lightbox__img { cursor: zoom-in; }
.product-lightbox.is-zoomable .product-lightbox__img.is-zoomed { transform: scale(2.4); cursor: zoom-out; }

/* Arrows: same dark square treatment as the home-page carousel nav. */
.product-lightbox__nav {
	position: absolute; top: 50%; transform: translateY(-50%);
	width: 52px; height: 52px; border: 0; padding: 0; cursor: pointer;
	background: var(--c-dark); color: #fff;
	display: flex; align-items: center; justify-content: center;
}
.product-lightbox__nav svg { width: 20px; height: 20px; display: block; }
.product-lightbox__nav--prev { left: 24px; }
.product-lightbox__nav--next { right: 24px; }
.product-lightbox__nav:hover { background: #000; }

.product-lightbox__close { position: absolute; top: 20px; right: 24px; width: 44px; height: 44px; background: none; border: 0; color: #fff; font-size: 2.2rem; line-height: 1; cursor: pointer; }
.product-lightbox__counter { position: absolute; bottom: 22px; left: 0; right: 0; text-align: center; color: rgba(255,255,255,.75); font-size: .85rem; letter-spacing: .04em; }

@media (max-width: 700px) {
	.product-lightbox { padding: 8vh 8px; }
	.product-lightbox__nav { width: 42px; height: 42px; }
	.product-lightbox__nav--prev { left: 6px; }
	.product-lightbox__nav--next { right: 6px; }
	.product-lightbox__img { max-width: 94vw; }
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
	.carousel__slide,
	.carousel--3 .carousel__slide,
	.carousel--2 .carousel__slide { flex-basis: calc((100% - var(--gap)) / 2); }
	.band { grid-template-columns: 1fr; gap: 12px; }
	.random__inner { grid-template-columns: 1fr; gap: 20px; }
	.products-layout { grid-template-columns: 1fr; }
	.product-top { grid-template-columns: 1fr; }
	.project-single__body { grid-template-columns: 1fr; }
	/* Stacked: show the image mosaic right after the hero, before the story text. */
	.project-single__gallery { order: -1; margin-bottom: 28px; }
	.project-single__meta { order: 0; }
	.contact-finder__layout { grid-template-columns: 1fr; }
	/* Keep the rep list to ~half the page on the left (stays readable on phones). */
	.rep-list { max-width: max(50%, 320px); }
	.products-grid, .projects-grid, .news-grid, .search-results__list { grid-template-columns: repeat(2, 1fr); }
	.site-footer__inner { grid-template-columns: 1fr 1fr; gap: 28px; }
	.site-footer__spacer { display: none; }
	.contact-us__cols { grid-template-columns: 1fr 1fr; }
}

/* Cramped zone (just above the burger breakpoint): tighten the header gaps and
   nav so the inline nav fits beside a full-size logo instead of squashing it. */
@media (max-width: 900px) and (min-width: 701px) {
	.site-header__inner { gap: 22px; }
	.primary-nav__list { gap: 22px; font-size: 1rem; }
}

/* Burger menu: below this width the inline nav collapses behind a toggle. iPad
   (820) keeps the inline nav (so tap-to-open Products works there). */
@media (max-width: 700px) {
	.nav-toggle { display: flex; }
	/* Only the burger remains in the top bar — hung all the way to the right. */
	.site-header__tools { margin-left: auto; gap: 0; }
	.site-header__tools .search-toggle,
	.site-header__tools .lang-switcher { display: none; }

	.primary-nav {
		position: absolute; top: 100%; left: 0; right: 0; display: none;
		background: #fff; border-bottom: 1px solid var(--c-line); box-shadow: 0 14px 24px rgba(0,0,0,.08);
	}
	.site-header.nav-open .primary-nav { display: block; }
	.primary-nav__list { flex-direction: column; gap: 0; padding: 6px 0; font-size: 1.3rem; }
	.primary-nav__list li { width: 100%; }
	.primary-nav__list a { display: block; padding: 13px 24px; }
	.primary-nav__list a:hover { background: var(--c-bg-alt); text-decoration: none; }
	/* The hover mega-menu is replaced by a normal link tap on mobile. */
	.mega-menu { display: none; }

	/* Search + language, moved into the dropdown. */
	.primary-nav__extra { display: block; border-top: 1px solid var(--c-line); padding: 16px 24px 20px; }
	.primary-nav__search { display: flex; align-items: center; gap: 8px; border: 1px solid var(--c-line); border-radius: 2px; padding: 4px 6px 4px 12px; }
	.primary-nav__search-input { flex: 1; border: 0; background: none; outline: none; font-size: 1.05rem; padding: 8px 0; }
	.primary-nav__search-submit { background: none; border: 0; cursor: pointer; color: #333; line-height: 0; padding: 6px; }
	.primary-nav__langs { list-style: none; display: flex; gap: 10px; margin: 16px 0 0; padding: 0; }
	.primary-nav__lang a { display: block; padding: 8px 16px; border: 1px solid var(--c-line); font-size: 1rem; letter-spacing: .04em; color: #444; }
	.primary-nav__lang.is-current a { background: var(--c-dark); color: #fff; border-color: var(--c-dark); }
	.primary-nav__lang a:hover { text-decoration: none; border-color: #999; }
}

@media (max-width: 600px) {
	.mega-menu__inner { grid-template-columns: 1fr; }
	.mega-menu__families { columns: 2; }
	.carousel__slide,
	.carousel--3 .carousel__slide,
	.carousel--2 .carousel__slide { flex-basis: 82%; }
	.site-footer__inner { grid-template-columns: 1fr; }
	.products-grid, .projects-grid, .news-grid, .search-results__list { grid-template-columns: 1fr; }

	/* Hero headline: much smaller so it doesn't swamp the video. */
	.hero__headline { font-size: 1.5rem; line-height: 1.18; padding: 14px 18px; }

	/* Play buttons: smaller, and the hero one drops below the headline so they
	   don't overlap on a narrow screen. */
	.hero__play { width: 56px; height: 56px; top: auto; bottom: 20px; }
	.random__play { width: 56px; height: 56px; }

	/* Feature band ("Versatility"): stack image over a full-width text block. */
	.product-band__inner { flex-direction: column; padding: 0; }
	.product-band__media { width: 100%; }
	.product-band__text { position: static; transform: none; width: 100%; padding: 22px 24px; }
}