/* ============================================================
BRIGHT IDEAS — Design System v0.1
Minimal monochrome × warm filament accent
Reference: Alto India (discipline) + Tisva (editorial gravitas)
============================================================ */
:root {
/* ─── Color ─── */
--bi-ink: #0A0A0A;
/* primary black */
--bi-graphite: #2B2B2B;
/* body / strong text */
--bi-mist: #6B6B6B;
/* meta / muted text */
--bi-line: #E8E6E1;
/* hairlines, warm */
--bi-paper: #FAFAF7;
/* off-white background */
--bi-pure: #FFFFFF;
--bi-glow: #F4B860;
/* warm filament accent */
--bi-glow-soft: rgba(244, 184, 96, 0.14);
/* ─── Type ─── */
--font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
--font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
/* ─── Layout ─── */
--container: 1320px;
--gutter: clamp(20px, 4vw, 56px);
--section-y: clamp(56px, 7vw, 100px);
/* ─── Motion ─── */
--ease: cubic-bezier(0.22, 1, 0.36, 1);
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}
/* ============================================================
RESET & BASE
============================================================ */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
overflow-x: clip;
}
body {
font-family: var(--font-body);
font-size: 17px;
line-height: 1.65;
color: var(--bi-graphite);
background: var(--bi-paper);
overflow-x: clip;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
/* Responsive image safety — any unmanaged ![]()
can't bust its container */
img {
max-width: 100%;
}
img,
svg {
display: block;
max-width: 100%;
height: auto;
}
a {
color: inherit;
text-decoration: none;
}
button {
font: inherit;
background: none;
border: 0;
cursor: pointer;
color: inherit;
}
ul,
ol {
list-style: none;
}
sup {
font-size: 0.55em;
vertical-align: super;
line-height: 0;
}
::selection {
background: var(--bi-glow);
color: var(--bi-ink);
}
.skip-link {
position: absolute;
left: -9999px;
top: 8px;
padding: 10px 16px;
background: var(--bi-ink);
color: var(--bi-paper);
z-index: 999;
}
.skip-link:focus {
left: 8px;
}
/* ============================================================
PRELOADER — first-visit light-beam reveal (~1.7s)
Layered: dark ink ground + drafting grid + vertical beam + halo +
wordmark + tagline. Auto-hides via animation; JS adds is-loading
to so the body waits for the beam to crest before showing.
============================================================ */
.is-loading {
overflow: hidden;
}
.is-loading body {
overflow: hidden;
}
/* ─────────────────────────────────────────────────────────────
Preloader — six spotlights converging on a focal point.
Six fixtures sit at the vertices of a hexagonal arrangement and
each shines a triangular beam at the centre. They light up turn
by turn (cascade via --idx 0..5 × 0.15s delay), each with a brief
warm-up flicker before settling to a steady ~32% opacity. Where
the six beams overlap at the centre, additive opacity blends to
a near-opaque hotspot — the visual signature of lighting design.
Wordmark and tagline fade up beneath the convergence at the end.
───────────────────────────────────────────────────────────── */
.preloader {
position: fixed;
inset: 0;
z-index: 9999;
background:
radial-gradient(circle at 50% 48%,
rgba(244, 184, 96, 0.06) 0%,
transparent 55%),
var(--bi-ink);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 20px;
overflow: hidden;
pointer-events: none;
animation: preloader-out 0.55s ease 2.15s forwards;
will-change: opacity, visibility;
}
@keyframes preloader-out {
to {
opacity: 0;
visibility: hidden;
}
}
/* SVG canvas — oversized viewBox so drop-shadow glow doesn't clip
at the edges of the rendered element. */
.preloader-converge {
width: 280px;
height: 280px;
max-width: 72vw;
max-height: 72vw;
overflow: visible;
}
/* The 6 triangular beams.
Each fades in with a warm-up flicker (idx-staggered delay) then
settles to ~32% opacity. Overlap at centre additively blends to a
bright hotspot. After the cascade, a slow pulse keeps them alive. */
.preloader-beam {
fill: var(--bi-glow, #f4b860);
opacity: 0;
transform-origin: center center;
transform-box: fill-box;
/* Soft outer edge so the beam reads as a light cone, not a sharp
triangle. drop-shadow gives the glow halo around each beam. */
filter:
blur(0.5px) drop-shadow(0 0 4px rgba(244, 184, 96, 0.45));
animation:
preloader-beam-on 0.55s cubic-bezier(.25, .8, .35, 1) calc(var(--idx) * 0.15s) forwards,
preloader-beam-pulse 2.8s ease-in-out calc(1.5s + var(--idx) * 0.06s) infinite;
}
/* Warm-up tick → steady fill. 0-65% of timeline is the flicker, then
it settles to 0.32 opacity for the steady state. */
@keyframes preloader-beam-on {
0% {
opacity: 0;
}
20% {
opacity: 0.55;
}
32% {
opacity: 0.08;
}
48% {
opacity: 0.60;
}
62% {
opacity: 0.15;
}
100% {
opacity: 0.32;
}
}
/* Slow steady-state pulse — each beam breathes between 0.28 and 0.42,
slightly out of phase via the idx-based delay so the convergence
shimmers organically rather than pulsing uniformly. */
@keyframes preloader-beam-pulse {
0%,
100% {
opacity: 0.32;
}
50% {
opacity: 0.45;
}
}
/* The 6 fixture lamp heads at the outer points.
Dim before activation, brighten with a halo when their beam lights up. */
.preloader-fixture {
fill: var(--bi-glow, #f4b860);
opacity: 0.18;
filter: drop-shadow(0 0 0 transparent);
animation: preloader-fixture-on 0.55s ease calc(var(--idx) * 0.15s) forwards;
}
@keyframes preloader-fixture-on {
0% {
opacity: 0.18;
filter: drop-shadow(0 0 0 transparent);
}
20% {
opacity: 1;
filter: drop-shadow(0 0 6px rgba(244, 184, 96, 0.9));
}
35% {
opacity: 0.45;
}
50% {
opacity: 1;
}
65% {
opacity: 0.55;
}
100% {
opacity: 1;
filter:
drop-shadow(0 0 6px rgba(244, 184, 96, 0.95)) drop-shadow(0 0 14px rgba(244, 184, 96, 0.55));
}
}
/* Central focal hotspot — a small bright disc that fades in around the
midpoint of the cascade, then settles to ~70% opacity. Sits behind the
beams in the markup so the converging overlap stays visible. */
.preloader-focal {
fill: var(--bi-paper, #f6f5ee);
opacity: 0;
filter:
drop-shadow(0 0 6px rgba(244, 184, 96, 0.8)) drop-shadow(0 0 18px rgba(244, 184, 96, 0.45));
animation: preloader-focal-on 1.0s ease 0.6s forwards;
}
@keyframes preloader-focal-on {
0% {
opacity: 0;
}
100% {
opacity: 0.72;
}
}
/* Wordmark — fades in after the cascade completes (~1.45s) */
.preloader-wordmark {
position: relative;
z-index: 2;
font-family: var(--font-display, "Fraunces", serif);
font-weight: 400;
font-size: 26px;
letter-spacing: -0.01em;
color: var(--bi-paper, #f6f5ee);
opacity: 0;
transform: translateY(8px);
animation: preloader-fade-up 0.6s ease 1.45s forwards;
margin-top: 4px;
}
.preloader-tagline {
position: relative;
z-index: 2;
font-family: var(--font-body, "Inter", sans-serif);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--bi-glow, #f4b860);
opacity: 0;
transform: translateY(6px);
animation: preloader-fade-up 0.6s ease 1.65s forwards;
}
@keyframes preloader-fade-up {
to {
opacity: 1;
transform: translateY(0);
}
}
/* Compact treatment for narrow viewports */
@media (max-width: 600px) {
.preloader {
gap: 16px;
}
.preloader-converge {
width: 230px;
height: 230px;
}
.preloader-wordmark {
font-size: 22px;
}
}
/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
.preloader,
.preloader-beam,
.preloader-fixture,
.preloader-focal,
.preloader-wordmark,
.preloader-tagline {
animation: none;
}
.preloader {
opacity: 0;
visibility: hidden;
}
}
/* ============================================================
UTILITIES
============================================================ */
.eyebrow {
display: inline-flex;
align-items: center;
gap: 14px;
font-family: var(--font-body);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--bi-mist);
}
.eyebrow::before {
content: '';
width: 28px;
height: 1px;
background: var(--bi-glow);
}
.eyebrow--light {
color: rgba(250, 250, 247, 0.75);
}
.eyebrow--light::before {
background: var(--bi-glow);
}
/* ============================================================
BUTTONS
============================================================ */
.btn {
--btn-py: 16px;
--btn-px: 28px;
display: inline-flex;
align-items: center;
gap: 10px;
padding: var(--btn-py) var(--btn-px);
font-family: var(--font-body);
font-size: 14px;
font-weight: 500;
letter-spacing: 0.02em;
border: 1px solid transparent;
border-radius: 0;
white-space: nowrap;
line-height: 1;
transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
will-change: transform;
}
.btn--sm {
--btn-py: 11px;
--btn-px: 18px;
font-size: 13px;
}
.btn--primary {
background: var(--bi-glow);
color: var(--bi-ink);
}
.btn--primary:hover,
.btn--primary:focus-visible {
background: var(--bi-glow);
color: var(--bi-ink);
transform: translateY(-2px);
box-shadow: 0 10px 24px -10px rgba(244, 184, 96, 0.55);
}
.btn--primary svg {
transition: transform .35s var(--ease);
}
.btn--primary:hover svg {
transform: translateX(4px);
}
.btn--ghost {
border-color: currentColor;
background: transparent;
}
.btn--ghost:hover {
background: var(--bi-glow);
color: var(--bi-ink);
border-color: var(--bi-glow);
}
.btn--text {
padding: var(--btn-py) 0;
color: inherit;
position: relative;
}
.btn--text::after {
content: '';
position: absolute;
bottom: calc(var(--btn-py) - 4px);
left: 0;
right: 0;
height: 1px;
background: currentColor;
transform: scaleX(1);
transform-origin: right;
transition: transform .5s var(--ease);
}
.btn--text:hover::after {
transform: scaleX(0);
transform-origin: left;
}
/* ============================================================
HEADER / NAV
============================================================ */
.site-header {
position: fixed;
inset: 0 0 auto 0;
z-index: 100;
transition: background .4s var(--ease), border-color .4s var(--ease);
border-bottom: 1px solid transparent;
}
.site-header.is-scrolled {
background: rgba(250, 250, 247, 0.88);
-webkit-backdrop-filter: saturate(180%) blur(16px);
backdrop-filter: saturate(180%) blur(16px);
border-bottom-color: var(--bi-line);
box-shadow: 0 6px 24px -16px rgba(10, 10, 10, 0.18);
}
.nav-container {
max-width: var(--container);
margin: 0 auto;
padding: 0 var(--gutter);
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
}
.nav-logo {
display: inline-flex;
align-items: center;
line-height: 0;
position: relative;
flex-shrink: 0;
}
.nav-logo-img {
height: clamp(34px, 3.6vw, 44px);
width: auto;
display: block;
transition: opacity .4s var(--ease);
}
.nav-logo-img--dark {
position: absolute;
inset: 0;
opacity: 0;
}
.site-header.is-scrolled .nav-logo-img--light {
opacity: 0;
}
.site-header.is-scrolled .nav-logo-img--dark {
opacity: 1;
}
.nav-primary {
font-size: 14px;
font-weight: 400;
color: var(--bi-paper);
transition: color .4s var(--ease);
}
.nav-list {
display: flex;
align-items: center;
gap: clamp(14px, 1.6vw, 24px);
}
.nav-item {
position: relative;
}
.nav-item>a,
.nav-parent {
position: relative;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 22px 0;
color: inherit;
cursor: pointer;
white-space: nowrap;
}
.nav-item>a::after,
.nav-parent::after {
content: '';
position: absolute;
left: 0;
bottom: 18px;
width: 100%;
height: 1px;
background: var(--bi-glow);
transform: scaleX(0);
transform-origin: left;
transition: transform .45s var(--ease);
}
.nav-item>a:hover::after,
.nav-item>a:focus-visible::after,
.nav-item--dropdown:hover .nav-parent::after,
.nav-parent:focus-visible::after,
.nav-item>a[aria-current="page"]::after {
transform: scaleX(1);
}
.nav-item>a[aria-current="page"] {
color: var(--bi-glow);
}
.site-header.is-scrolled .nav-item>a[aria-current="page"] {
color: var(--bi-ink);
}
.nav-chevron {
transition: transform .35s var(--ease);
transform-origin: center;
}
.nav-item--dropdown:hover .nav-chevron {
transform: rotate(180deg);
}
/* ─── Dropdown panel ─── */
.nav-dropdown {
position: absolute;
top: 100%;
left: -24px;
min-width: 260px;
background: var(--bi-paper);
border: 1px solid var(--bi-line);
border-top: 2px solid var(--bi-glow);
padding: 12px 0;
opacity: 0;
visibility: hidden;
transform: translateY(-8px);
transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s var(--ease);
z-index: 110;
box-shadow: 0 24px 48px -24px rgba(10, 10, 10, 0.18);
}
.nav-item--dropdown:hover .nav-dropdown,
.nav-item--dropdown:focus-within .nav-dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.nav-dropdown ul {
display: flex;
flex-direction: column;
}
.nav-dropdown li a {
display: block;
padding: 10px 24px;
font-size: 14px;
line-height: 1.4;
color: var(--bi-graphite);
transition: background .25s var(--ease), color .25s var(--ease), padding .35s var(--ease);
}
.nav-dropdown li a:hover,
.nav-dropdown li a:focus-visible {
background: rgba(244, 184, 96, 0.08);
color: var(--bi-ink);
padding-left: 30px;
}
.nav-dropdown-head {
border-bottom: 1px solid var(--bi-line);
margin-bottom: 6px;
padding-bottom: 6px;
}
.nav-dropdown-all {
display: inline-flex !important;
align-items: center;
gap: 8px;
font-size: 11px !important;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--bi-glow) !important;
padding: 8px 24px !important;
}
.nav-dropdown-all:hover {
background: transparent !important;
color: var(--bi-ink) !important;
padding-left: 30px !important;
}
/* ============================================================
MEGA MENU — full-width Catalogue dropdown
Left rail of category tabs · right panel with sub-category cards
============================================================ */
.nav-item--mega {
position: static;
}
.mega {
position: absolute;
top: 100%;
left: 0;
right: 0;
width: 100%;
background: var(--bi-paper);
border-top: 2px solid var(--bi-glow);
border-bottom: 1px solid var(--bi-line);
box-shadow: 0 24px 48px -24px rgba(10, 10, 10, 0.18);
opacity: 0;
visibility: hidden;
transform: translateY(-8px);
transition: opacity .35s var(--ease), transform .35s var(--ease), visibility .35s var(--ease);
z-index: 110;
}
.nav-item--mega:hover .mega,
.nav-item--mega:focus-within .mega {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.nav-item--mega:hover .nav-chevron {
transform: rotate(180deg);
}
.nav-item--mega:hover .nav-parent::after {
transform: scaleX(1);
}
.mega-inner {
max-width: var(--container);
margin: 0 auto;
padding: 36px var(--gutter);
display: grid;
grid-template-columns: 280px 1fr;
gap: 48px;
align-items: stretch;
}
/* ─── Left rail: category tabs ─── */
.mega-rail {
display: flex;
flex-direction: column;
gap: 4px;
border-right: 1px solid var(--bi-line);
padding-right: 28px;
}
.mega-rail-eyebrow {
font-family: var(--font-body);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--bi-mist);
margin-bottom: 14px;
padding-left: 18px;
}
.mega-tab {
display: grid;
grid-template-columns: 22px 1fr 14px;
align-items: center;
gap: 14px;
padding: 14px 16px;
background: transparent;
border: 0;
text-align: left;
cursor: pointer;
transition: background .3s var(--ease), color .3s var(--ease);
font-family: var(--font-display);
font-weight: 400;
font-size: 17px;
letter-spacing: -0.01em;
color: var(--bi-graphite);
line-height: 1.2;
}
.mega-tab i {
font-size: 17px;
color: var(--bi-mist);
transition: color .3s var(--ease);
}
.mega-tab-arrow {
opacity: 0;
transform: translateX(-4px);
transition: opacity .3s var(--ease), transform .3s var(--ease);
color: currentColor;
}
.mega-tab:hover,
.mega-tab.is-active {
background: var(--bi-ink);
color: var(--bi-paper);
}
.mega-tab:hover i,
.mega-tab.is-active i {
color: var(--bi-glow);
}
.mega-tab.is-active .mega-tab-arrow {
opacity: 1;
transform: translateX(0);
color: var(--bi-glow);
}
/* ─── Right panel: panes + cards ─── */
.mega-panel {
position: relative;
min-height: 320px;
}
.mega-pane {
display: none;
flex-direction: column;
gap: 22px;
animation: megaPaneIn .4s var(--ease) forwards;
}
.mega-pane.is-active {
display: flex;
}
@keyframes megaPaneIn {
from {
opacity: 0;
transform: translateX(12px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.mega-pane-head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 24px;
flex-wrap: wrap;
}
.mega-pane-head-text {
display: flex;
flex-direction: column;
gap: 6px;
}
.mega-pane-eyebrow {
font-family: var(--font-body);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--bi-glow);
}
.mega-pane-headline {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(18px, 1.6vw, 22px);
line-height: 1.2;
letter-spacing: -0.018em;
color: var(--bi-ink);
max-width: 44ch;
}
/* ─── Cards: 4-up grid that becomes a horizontal pager when >4 cards.
Both modes use CSS Grid — grid-auto-columns gives unambiguous, identical
column widths regardless of how many total children exist (a flex-basis
calc inside an overflow-scrolling flex container resolved differently
for the 16-card outdoor pane vs the 5-card controls pane, which is the
bug this rewrite fixes). ─── */
.mega-cards-wrap {
position: relative;
}
/* Default grid: 4 fixed columns. Decorative pane (3 cards) leaves the 4th
column empty; that's fine. */
.mega-cards {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
/* Slider mode: switch to an IMPLICIT grid with horizontally-flowing columns
each calc(25% - gap). `grid-template-columns: unset` is critical — without
it the 4-column template still applies and items wrap. With auto-flow:column
they line up in one row that overflows horizontally. */
.mega-cards-wrap.has-slider .mega-cards {
grid-template-columns: unset;
grid-auto-flow: column;
grid-auto-columns: calc((100% - 42px) / 4);
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scrollbar-width: none;
-ms-overflow-style: none;
padding-bottom: 4px;
}
.mega-cards-wrap.has-slider .mega-cards::-webkit-scrollbar {
display: none;
}
.mega-cards-wrap.has-slider .mega-card {
scroll-snap-align: start;
}
.mega-card {
display: flex;
flex-direction: column;
background: var(--bi-pure);
border: 1px solid var(--bi-line);
padding: 0;
text-align: center;
color: var(--bi-ink);
transition: border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
position: relative;
overflow: hidden;
/* Height = image height (1:1 of card width via .mega-card-img) + 52px
title strip. No aspect-ratio on the card itself — the image cell
drives it, which is more reliable. */
}
.mega-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 1px;
background: var(--bi-glow);
transform: scaleX(0);
transform-origin: left;
transition: transform .4s var(--ease);
z-index: 2;
}
.mega-card:hover {
border-color: var(--bi-glow);
transform: translateY(-3px);
box-shadow: 0 12px 28px -16px rgba(244, 184, 96, 0.35);
}
.mega-card:hover::before {
transform: scaleX(1);
}
.mega-card-img {
aspect-ratio: 1 / 1;
display: flex;
align-items: center;
justify-content: center;
background: var(--bi-paper);
overflow: hidden;
border-bottom: 1px solid var(--bi-line);
/* In a grid item, aspect-ratio 1:1 on a child whose width = card width
gives a deterministic square image cell across every pane. */
}
.mega-card-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .4s var(--ease);
}
.mega-card:hover .mega-card-img img {
transform: scale(1.06);
}
/* ─── Icon-fallback cards (sub-cats with no product image yet) ───
Stronger visual presence so they don't look like "image missing" —
bigger icon, soft gradient background, subtle ring tying it to the
amber accent. The card still feels intentional even without a photo. */
.mega-card-img:has(> i),
.mega-card-img.mega-card-img--icon {
background:
radial-gradient(circle at 50% 45%, rgba(244, 184, 96, 0.10), transparent 65%),
linear-gradient(180deg, var(--bi-paper) 0%, #efeee7 100%);
}
.mega-card-img i {
font-size: 48px;
color: var(--bi-glow);
opacity: 0.85;
transition: transform .4s var(--ease), opacity .25s var(--ease);
}
.mega-card:hover .mega-card-img i {
transform: scale(1.08);
opacity: 1;
}
.mega-card-name {
font-family: var(--font-display);
font-weight: 400;
font-size: 13px;
line-height: 1.25;
letter-spacing: -0.005em;
color: var(--bi-ink);
padding: 10px 10px;
/* Long sub-cat names ("Underwater Concealed", "Tri-Proof Batten",
"Surface Wall Lights") can otherwise wrap to 3 lines and break
card heights inside the 4-up grid. Cap at 2 lines + ellipsis.
Fixed height (not min-height) keeps every card identical whether
its name fits on 1 line or 2. */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
height: 52px;
/* line-height(13*1.25=16.25) × 2 lines = 32.5px + 20px padding = 52.5px.
Fixed height keeps every card title strip identical (1-line names get
empty space below the text; 2-line names fill the box). */
box-sizing: border-box;
text-align: center;
}
/* ─── Slider arrows — visible only when .has-slider is on the wrap ───
Positioned at the image area's vertical centre, NOT the card's centre.
Cards are roughly: image square (1:1) + title strip (~42px). So image
centre = half the card width minus half the title strip. Using the
custom property --mega-card-img-mid keeps this calc adjustable later. */
.mega-cards-wrap {
--mega-card-title-h: 52px;
/* Match the fixed height on .mega-card-name. Used by the slider arrow
absolute positioning to centre arrows on the image area only,
NOT the title strip. */
}
.mega-slider-arrow {
position: absolute;
top: calc((100% - var(--mega-card-title-h)) / 2);
transform: translateY(-50%);
width: 38px;
height: 38px;
display: none;
align-items: center;
justify-content: center;
background: var(--bi-pure);
border: 1px solid var(--bi-line);
border-radius: 50%;
color: var(--bi-ink);
font-size: 18px;
line-height: 1;
cursor: pointer;
transition: background .25s var(--ease), border-color .25s var(--ease), opacity .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
box-shadow: 0 8px 20px -10px rgba(10, 10, 10, 0.28);
z-index: 3;
}
.mega-slider-arrow:hover:not([disabled]) {
transform: translateY(-50%) scale(1.06);
box-shadow: 0 10px 22px -8px rgba(244, 184, 96, 0.55);
}
.mega-cards-wrap.has-slider .mega-slider-arrow {
display: flex;
}
.mega-slider-arrow:hover:not([disabled]) {
background: var(--bi-glow);
border-color: var(--bi-glow);
color: var(--bi-ink);
}
.mega-slider-arrow[disabled] {
opacity: 0.3;
cursor: default;
pointer-events: none;
}
/* Arrows sit OUTSIDE the cards-wrap (38px button + 6px gap = -44px).
The mega layout has a 48px gap between the left rail and the right
panel, so the prev arrow lands in that empty channel. The next arrow
sits in the right gutter zone — both fully clear of the card content. */
.mega-slider-arrow--prev {
left: -44px;
}
.mega-slider-arrow--next {
right: -44px;
}
.mega-slider-arrow svg {
width: 14px;
height: 14px;
}
/* "View all" featured mega card — light theme to match the other cards in the
pane. The differentiator is the amber accent text ("All N categories →")
instead of a different background. Hover inherits from the generic
.bi-v2 .mega-card:hover rule below (border + soft-amber bg + lift), so the
visual feedback matches every other card in the grid. */
.mega-card--view-all .mega-card-name {
color: var(--bi-glow);
font-weight: 500;
}
/* ─── "Know more about …" — top-right of the pane head ─── */
.mega-more {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
background: var(--bi-ink);
color: var(--bi-paper);
font-family: var(--font-body);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.04em;
white-space: nowrap;
flex-shrink: 0;
transition: background .3s var(--ease), color .3s var(--ease);
}
.mega-more:hover {
background: var(--bi-glow);
color: var(--bi-ink);
}
.mega-more svg {
transition: transform .3s var(--ease);
}
.mega-more:hover svg {
transform: translateX(3px);
}
/* ─── Scrolled-state contrast (mega lives on glass header too) ─── */
.site-header.is-scrolled .mega {
border-top-color: var(--bi-glow);
}
/* ─── Hide entirely on mobile — drawer handles categories there ─── */
@media (max-width: 960px) {
.nav-item--mega .mega {
display: none;
}
}
.nav-actions {
display: flex;
align-items: center;
gap: 16px;
}
.nav-actions .btn--ghost {
color: var(--bi-paper);
}
.site-header.is-scrolled .nav-primary,
.site-header.is-scrolled .nav-actions .btn--ghost {
color: var(--bi-ink);
}
.site-header.is-scrolled .nav-actions .btn--ghost:hover {
color: var(--bi-ink);
}
.nav-toggle {
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 6px;
width: 44px;
height: 44px;
padding: 0;
border: 0;
background: transparent;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
position: relative;
z-index: 2;
}
.nav-toggle span {
display: block;
width: 26px;
height: 2px;
background: var(--bi-paper);
border-radius: 2px;
transition: background .4s var(--ease), transform .4s var(--ease), opacity .3s var(--ease);
}
.site-header.is-scrolled .nav-toggle span {
background: var(--bi-ink);
}
@media (max-width: 960px) {
.nav-primary {
display: none;
}
/* Hide the "Book Consultation" CTA on mobile so the hamburger has room
to render. The `.bi-v2` prefix wins specificity against the unscoped
`.bi-v2 .nav-cta { display: inline-flex }` rule further down in the
file (~line 3121) — without it that rule overrides display:none and
the CTA stays visible, pushing the hamburger off the right edge. */
.bi-v2 .nav-actions .nav-cta,
.nav-actions .nav-cta,
.nav-actions .btn--ghost {
display: none !important;
}
.nav-toggle {
display: flex !important;
}
.nav-container {
padding: 14px var(--gutter);
min-height: 70px;
}
.nav-logo-img {
height: 40px;
}
}
/* ============================================================
HERO
============================================================ */
.hero {
position: relative;
min-height: 100vh;
min-height: 100svh;
display: flex;
flex-direction: column;
justify-content: center;
padding: 140px var(--gutter) 64px;
background: var(--bi-ink);
color: var(--bi-paper);
overflow: hidden;
}
.hero-bg {
position: absolute;
inset: 0;
z-index: 0;
}
.hero-bg img {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.55;
filter: grayscale(0.35) contrast(1.05);
animation: heroDrift 28s ease-in-out infinite alternate;
}
.hero-overlay {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 60% 50% at 78% 18%, rgba(244, 184, 96, 0.16) 0%, transparent 70%),
linear-gradient(180deg, rgba(10, 10, 10, 0.45) 0%, rgba(10, 10, 10, 0.55) 45%, rgba(10, 10, 10, 0.88) 100%);
}
@keyframes heroDrift {
0% {
transform: scale(1.04) translate(0, 0);
}
100% {
transform: scale(1.12) translate(-2%, -1.5%);
}
}
.hero-inner {
position: relative;
z-index: 2;
max-width: var(--container);
width: 100%;
margin: 0 auto;
}
.hero-inner .eyebrow {
margin-bottom: 32px;
}
.hero-title {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(32px, 6.5vw, 104px);
line-height: 1.02;
letter-spacing: -0.03em;
margin-bottom: 32px;
max-width: 16ch;
overflow-wrap: break-word;
word-break: normal;
}
.hero-title em {
font-style: italic;
font-weight: 300;
color: var(--bi-glow);
}
.hero-sub {
font-size: clamp(16px, 1.3vw, 19px);
line-height: 1.6;
max-width: 58ch;
color: rgba(250, 250, 247, 0.78);
margin-bottom: 48px;
}
.hero-cta {
display: flex;
flex-wrap: wrap;
gap: 28px;
align-items: center;
}
.hero-stats {
position: relative;
z-index: 2;
max-width: var(--container);
width: 100%;
margin: clamp(64px, 10vw, 112px) auto 0;
padding-top: 36px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 32px;
border-top: 1px solid rgba(250, 250, 247, 0.18);
}
.hero-stats li {
display: flex;
flex-direction: column;
gap: 6px;
}
.hero-stats strong {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(28px, 3.6vw, 52px);
line-height: 1;
letter-spacing: -0.025em;
color: var(--bi-paper);
}
.hero-stats span {
font-size: 12px;
font-weight: 400;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(250, 250, 247, 0.6);
}
@media (max-width: 760px) {
.hero-stats {
grid-template-columns: repeat(2, 1fr);
gap: 36px 16px;
}
}
.hero-scroll {
position: absolute;
bottom: 28px;
left: 50%;
transform: translateX(-50%);
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
.hero-scroll-line {
position: relative;
width: 1px;
height: 56px;
background: rgba(250, 250, 247, 0.22);
overflow: hidden;
}
.hero-scroll-line::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 30%;
background: var(--bi-glow);
animation: scrollHint 2.4s var(--ease) infinite;
}
@keyframes scrollHint {
0% {
transform: translateY(-100%);
}
60% {
transform: translateY(330%);
}
61% {
transform: translateY(-100%);
}
100% {
transform: translateY(-100%);
}
}
.hero-scroll-label {
font-size: 10px;
letter-spacing: 0.3em;
text-transform: uppercase;
color: rgba(250, 250, 247, 0.5);
}
@media (max-width: 600px) {
.hero-scroll {
display: none;
}
}
/* ============================================================
SECTION: CATEGORIES
============================================================ */
.categories {
padding: var(--section-y) var(--gutter);
background: var(--bi-paper);
}
.section-head {
max-width: var(--container);
margin: 0 auto clamp(40px, 5vw, 64px);
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 48px;
align-items: center;
}
.section-head>div .eyebrow {
margin-bottom: 24px;
}
.section-title {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(30px, 5.2vw, 72px);
line-height: 1.04;
letter-spacing: -0.028em;
color: var(--bi-ink);
max-width: 700px;
overflow-wrap: break-word;
}
.section-title em {
font-style: italic;
font-weight: 300;
color: var(--bi-graphite);
}
.section-lede {
font-size: 16px;
line-height: 1.65;
color: var(--bi-mist);
max-width: 700px;
}
@media (max-width: 800px) {
.section-head {
grid-template-columns: 1fr;
gap: 24px;
align-items: start;
}
}
/* ─── Bento grid ─── */
.bento {
max-width: var(--container);
margin: 0 auto;
display: grid;
grid-template-columns: 1.3fr 1fr;
grid-template-rows: repeat(3, 1fr);
gap: 14px;
min-height: clamp(560px, 70vw, 880px);
}
.bento-tile {
position: relative;
display: flex;
overflow: hidden;
background: var(--bi-ink);
color: var(--bi-paper);
isolation: isolate;
transition: transform .6s var(--ease);
}
.bento-tile:nth-child(1) {
grid-column: 1;
grid-row: 1 / span 3;
}
.bento-tile:nth-child(2) {
grid-column: 2;
grid-row: 1;
}
.bento-tile:nth-child(3) {
grid-column: 2;
grid-row: 2;
}
.bento-tile:nth-child(4) {
grid-column: 2;
grid-row: 3;
}
.tile-img {
position: absolute;
inset: 0;
z-index: 0;
}
.tile-img img {
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(0.5) brightness(0.78) contrast(1.05);
transition: transform 1.1s var(--ease), filter .7s var(--ease);
}
.bento-tile::before {
content: '';
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(180deg, rgba(10, 10, 10, 0.15) 0%, rgba(10, 10, 10, 0.7) 70%, rgba(10, 10, 10, 0.60) 100%);
transition: background .6s var(--ease);
}
/* cursor-following gold glow (innovation touch) */
.bento-tile::after {
content: '';
position: absolute;
inset: 0;
z-index: 1;
background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%),
rgba(244, 184, 96, 0.22),
transparent 60%);
opacity: 0;
transition: opacity .35s var(--ease);
pointer-events: none;
}
.bento-tile:hover .tile-img img {
transform: scale(1.05);
filter: grayscale(0.2) brightness(0.85) contrast(1.05);
}
.bento-tile:hover::after {
opacity: 1;
}
.tile-body {
position: relative;
z-index: 2;
margin-top: auto;
padding: clamp(24px, 3vw, 40px);
display: flex;
flex-direction: column;
gap: 14px;
width: 100%;
}
.tile-eyebrow {
font-size: 11px;
font-weight: 500;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--bi-glow);
}
.tile-title {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(26px, 3vw, 42px);
line-height: 1.05;
letter-spacing: -0.02em;
color: var(--bi-paper);
}
.bento-tile--lg .tile-title {
font-size: clamp(34px, 4.2vw, 56px);
}
.tile-list {
font-size: 14px;
line-height: 1.6;
color: rgba(250, 250, 247, 0.72);
max-width: 46ch;
}
.tile-link {
display: inline-flex;
align-items: center;
gap: 10px;
margin-top: 8px;
font-size: 13px;
font-weight: 500;
letter-spacing: 0.04em;
color: var(--bi-paper);
position: relative;
padding-bottom: 6px;
}
.tile-link::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 48px;
height: 1px;
background: var(--bi-glow);
transition: width .5s var(--ease);
}
.bento-tile:hover .tile-link::after {
width: 100%;
}
.tile-link svg {
transition: transform .4s var(--ease);
}
.bento-tile:hover .tile-link svg {
transform: translateX(5px);
}
@media (max-width: 900px) {
.bento {
grid-template-columns: 1fr;
grid-template-rows: repeat(4, minmax(360px, 1fr));
min-height: 0;
}
.bento-tile,
.bento-tile:nth-child(1),
.bento-tile:nth-child(2),
.bento-tile:nth-child(3),
.bento-tile:nth-child(4) {
grid-column: 1;
grid-row: auto;
}
}
/* ============================================================
SHARED: section-head variants & text-dark button
============================================================ */
.section-head--centered {
grid-template-columns: 1fr;
text-align: center;
justify-items: center;
}
.section-head--centered .eyebrow {
margin: 0 auto 24px;
}
.section-head--centered .section-title {
margin: 0 auto;
}
.section-aside {
display: flex;
flex-direction: column;
gap: 20px;
align-items: flex-start;
}
.section-title--light {
color: var(--bi-paper);
}
.section-title--light em {
color: var(--bi-glow);
font-style: italic;
font-weight: 300;
}
.section-lede--centered {
margin: 24px auto 0;
text-align: center;
}
.section-lede--light {
color: rgba(250, 250, 247, 0.72);
}
.btn--text-dark {
color: var(--bi-ink);
}
/* "View all" links sitting directly in a section-head grid cell must hug their
text — otherwise the link stretches to fill the column and the .btn--text
underline runs the full page width. */
.section-head>.btn {
justify-self: start;
align-self: center;
}
/* ============================================================
SECTION: PROJECTS
============================================================ */
.projects {
padding: var(--section-y) var(--gutter);
background: var(--bi-paper);
border-top: 1px solid var(--bi-line);
}
.projects-grid {
max-width: var(--container);
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
}
.project-card {
position: relative;
}
.project-link {
display: block;
color: inherit;
}
.project-img {
position: relative;
overflow: hidden;
aspect-ratio: 4 / 5;
background: var(--bi-line);
margin-bottom: 22px;
}
.project-img img {
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(0.15) contrast(1.02);
transition: transform 1.1s var(--ease), filter .7s var(--ease);
}
.project-link:hover .project-img img {
transform: scale(1.04);
filter: grayscale(0) contrast(1.05);
}
.project-tag {
position: absolute;
top: 16px;
left: 16px;
padding: 6px 12px;
background: var(--bi-paper);
color: var(--bi-ink);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
}
/* "View the full gallery" tile in the homepage projects-grid — replaces a real
project card with a typographic plate pointing at /project-gallery. */
.project-img--more {
background:
linear-gradient(to right, rgba(10, 10, 10, 0.05) 1px, transparent 1px),
linear-gradient(to bottom, rgba(10, 10, 10, 0.05) 1px, transparent 1px),
var(--bi-paper, #f6f5ee);
background-size: 26px 26px, 26px 26px, auto;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(10, 10, 10, 0.10);
}
.project-img-more-inner {
text-align: center;
padding: 24px;
transition: transform .5s var(--ease);
}
.project-link:hover .project-img-more-inner {
transform: translateY(-4px);
}
.project-img-more-inner i {
display: block;
font-size: 32px;
color: var(--bi-glow, #c89a3c);
margin-bottom: 18px;
}
.project-img-more-inner p {
font-family: var(--font-display);
font-size: 20px;
line-height: 1.25;
color: var(--bi-ink);
margin: 0 0 10px;
letter-spacing: -0.015em;
}
.project-img-more-inner span {
display: block;
font-size: 12.5px;
line-height: 1.5;
color: var(--bi-mist);
letter-spacing: 0.03em;
}
.project-body {
padding: 0 4px;
}
.project-meta {
font-size: 12px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--bi-mist);
margin-bottom: 10px;
}
.project-title {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(22px, 2.2vw, 30px);
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--bi-ink);
margin-bottom: 10px;
transition: color .3s var(--ease);
}
.project-link:hover .project-title {
color: var(--bi-graphite);
}
.project-spec {
font-size: 15px;
color: var(--bi-graphite);
line-height: 1.55;
margin-bottom: 8px;
}
.project-credit {
font-size: 13px;
color: var(--bi-mist);
}
.project-credit em {
font-style: italic;
color: var(--bi-graphite);
}
/* Projects grid — 3-col desktop → 2-col tablet → 1-col phone.
The intermediate 2-col step kept the previous 3→1 jump from feeling like
a stack of full-height project hero cards on tablet portrait. */
@media (max-width: 900px) {
.projects-grid {
grid-template-columns: repeat(2, 1fr);
gap: 32px;
}
}
@media (max-width: 600px) {
.projects-grid {
grid-template-columns: 1fr;
gap: 48px;
}
}
/* ============================================================
SECTION: BRANDS
============================================================ */
.brands {
padding: var(--section-y) var(--gutter);
background: var(--bi-paper);
border-top: 1px solid var(--bi-line);
}
.brand-grid {
max-width: var(--container);
margin: 0 auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1px;
background: var(--bi-line);
border: 1px solid var(--bi-line);
}
.brand-card {
background: var(--bi-paper);
padding: clamp(28px, 3vw, 36px) clamp(24px, 3vw, 32px);
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
gap: 18px;
min-height: 240px;
text-align: center;
text-decoration: none;
color: inherit;
transition: background .35s var(--ease), color .35s var(--ease);
position: relative;
overflow: hidden;
}
.brand-card::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 1px;
background: var(--bi-glow);
transform: scaleX(0);
transform-origin: left;
transition: transform .5s var(--ease);
}
.brand-card:hover::after {
transform: scaleX(1);
}
.brand-card:hover {
background: var(--bi-pure);
}
.brand-card--featured {
grid-column: 1 / span 2;
grid-row: span 2;
background: var(--bi-ink);
color: var(--bi-paper);
align-items: flex-start;
justify-content: flex-end;
text-align: left;
min-height: 0;
gap: 20px;
}
.brand-card--featured::after {
background: var(--bi-glow);
}
.brand-card--featured:hover {
background: var(--bi-ink);
}
/* ─── Brand logo display ─── */
.brand-logo-wrap {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 80px;
padding: 12px 0;
}
.brand-logo {
max-width: 82%;
max-height: 72px;
width: auto;
height: auto;
object-fit: contain;
filter: grayscale(1) brightness(0.92);
opacity: 0.6;
transition: filter .45s var(--ease), opacity .45s var(--ease), transform .45s var(--ease);
}
.brand-card:hover .brand-logo {
filter: grayscale(0) brightness(1);
opacity: 1;
transform: scale(1.04);
}
.brand-logo-fallback {
font-family: var(--font-display);
font-weight: 400;
font-style: italic;
font-size: clamp(28px, 2.4vw, 36px);
color: var(--bi-ink);
letter-spacing: -0.02em;
opacity: 0.7;
transition: opacity .35s var(--ease);
}
.brand-card:hover .brand-logo-fallback {
opacity: 1;
}
/* ─── Placeholder card — "more brands joining" ─── */
.brand-card--placeholder {
background: var(--bi-paper);
/* Spans 2 cells on desktop and tablet. Hybec featured spans a 2×2 block,
leaving 7 single cells for the 6 regular brands; this placeholder
takes the remaining 2 cells so row 3 is filled flush. */
grid-column: span 2;
}
.brand-card--placeholder .brand-logo-wrap i {
font-size: 32px;
color: var(--bi-glow);
opacity: 0.7;
transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.brand-card--placeholder:hover .brand-logo-wrap i {
opacity: 1;
transform: rotate(90deg);
}
.brand-placeholder-cta {
display: inline;
margin: 4px 0 0;
padding: 0;
border: 0;
background: transparent;
font: inherit;
color: var(--bi-ink);
border-bottom: 1px solid var(--bi-glow);
cursor: pointer;
transition: color .3s var(--ease);
}
.brand-placeholder-cta:hover {
color: var(--bi-glow);
}
/* ─── Featured Hybec logo ─── */
.brand-logo-wrap--featured {
flex: 0 1 auto;
justify-content: flex-start;
min-height: 0;
padding: 8px 0 4px;
}
.brand-logo--featured {
max-width: min(280px, 100%);
max-height: 72px;
filter: brightness(1.05);
opacity: 1;
}
.brand-card--featured:hover .brand-logo--featured {
transform: scale(1.02);
filter: brightness(1.1);
}
.brand-tag {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--bi-glow);
margin-bottom: 8px;
}
.brand-tag::before {
content: '';
width: 20px;
height: 1px;
background: currentColor;
}
.brand-desc {
font-size: 13px;
line-height: 1.55;
color: var(--bi-mist);
max-width: 30ch;
text-align: center;
}
.brand-card--featured .brand-desc {
font-size: 16px;
line-height: 1.6;
color: rgba(250, 250, 247, 0.75);
max-width: 50ch;
text-align: left;
margin-bottom: 24px;
}
.brand-link {
display: inline-flex;
align-self: flex-start;
margin-top: 16px;
font-size: 13px;
font-weight: 500;
letter-spacing: 0.04em;
color: var(--bi-glow);
border-bottom: 1px solid currentColor;
padding-bottom: 4px;
transition: gap .3s var(--ease);
}
@media (max-width: 1000px) {
.brand-grid {
grid-template-columns: repeat(2, 1fr);
}
.brand-card--featured {
grid-column: 1 / span 2;
grid-row: auto;
min-height: 320px;
}
}
@media (max-width: 600px) {
.brand-grid {
grid-template-columns: 1fr;
}
.brand-card--featured {
grid-column: 1;
}
.brand-card {
min-height: 180px;
}
}
/* ============================================================
SECTION: WHY BRIGHT IDEAS (dark)
============================================================ */
.why {
background: var(--bi-ink);
color: var(--bi-paper);
padding: var(--section-y) var(--gutter);
position: relative;
overflow: hidden;
}
.why::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse 50% 40% at 85% 15%, rgba(244, 184, 96, 0.10) 0%, transparent 70%);
pointer-events: none;
}
.why-inner {
position: relative;
max-width: var(--container);
margin: 0 auto;
}
.why .section-head {
grid-template-columns: 1.4fr 1fr;
align-items: center;
}
.why-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
margin-top: clamp(48px, 6vw, 80px);
border-top: 1px solid rgba(250, 250, 247, 0.12);
}
.why-card {
padding: 30px 12px 12px 12px;
border-right: 1px solid rgba(250, 250, 247, 0.12);
display: flex;
flex-direction: column;
gap: 16px;
position: relative;
transition: background .35s var(--ease);
}
.why-card:nth-child(4) {
border-right: 0;
}
.why-card::before {
content: '';
position: absolute;
top: -1px;
left: 0;
width: 60px;
height: 1px;
background: var(--bi-glow);
transform: scaleX(0);
transform-origin: left;
transition: transform .5s var(--ease);
}
.why-card:hover::before {
transform: scaleX(1);
}
.why-icon {
font-size: 32px;
color: var(--bi-glow);
line-height: 1;
margin-bottom: 4px;
transition: transform .5s var(--ease);
}
.why-card:hover .why-icon {
transform: translateY(-3px);
}
.why-num {
font-family: var(--font-display);
font-weight: 300;
font-style: italic;
font-size: 22px;
color: rgba(250, 250, 247, 0.45);
letter-spacing: -0.02em;
}
.why-title {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(20px, 1.8vw, 24px);
line-height: 1.2;
letter-spacing: -0.015em;
color: var(--bi-paper);
}
.why-desc {
font-size: 14px;
line-height: 1.6;
color: rgba(250, 250, 247, 0.65);
max-width: 36ch;
}
@media (max-width: 1000px) {
.why-grid {
grid-template-columns: repeat(2, 1fr);
}
.why-card {
padding: 32px 24px 32px 0;
}
.why-card:nth-child(2) {
border-right: 0;
}
.why-card:nth-child(3),
.why-card:nth-child(4) {
border-top: 1px solid rgba(250, 250, 247, 0.12);
}
}
@media (max-width: 600px) {
.why-grid {
grid-template-columns: 1fr;
}
.why-card {
border-right: 0 !important;
border-top: 1px solid rgba(250, 250, 247, 0.12);
padding: 28px 0;
}
.why .section-head {
grid-template-columns: 1fr;
}
}
/* ============================================================
SECTION: CTA BAND (consultancy)
============================================================ */
.cta-band {
background: var(--bi-ink);
color: var(--bi-paper);
padding: clamp(64px, 9vw, 120px) var(--gutter);
position: relative;
overflow: hidden;
border-top: 1px solid rgba(244, 184, 96, 0.18);
}
.cta-band::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(circle 800px at 80% 50%, rgba(244, 184, 96, 0.14), transparent 65%),
radial-gradient(circle 600px at 10% 100%, rgba(244, 184, 96, 0.05), transparent 60%);
pointer-events: none;
}
.cta-inner {
position: relative;
max-width: 900px;
margin: 0 auto;
text-align: center;
}
.cta-inner .eyebrow {
margin: 0 auto 32px;
justify-content: center;
}
.cta-inner .eyebrow::before {
background: var(--bi-glow);
}
.cta-title {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(32px, 5.8vw, 84px);
line-height: 1.04;
letter-spacing: -0.028em;
color: var(--bi-paper);
margin-bottom: 28px;
overflow-wrap: break-word;
}
.cta-title em {
font-style: italic;
font-weight: 300;
color: var(--bi-glow);
}
.cta-sub {
font-size: clamp(15px, 1.2vw, 18px);
line-height: 1.6;
color: rgba(250, 250, 247, 0.74);
max-width: 58ch;
margin: 0 auto 40px;
}
.cta-actions {
display: flex;
gap: 28px;
justify-content: center;
flex-wrap: wrap;
align-items: center;
}
.cta-actions .btn--text {
color: rgba(250, 250, 247, 0.85);
}
.cta-deliverables {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 28px;
margin-top: 56px;
padding-top: 32px;
border-top: 1px solid rgba(250, 250, 247, 0.12);
font-size: 13px;
color: rgba(250, 250, 247, 0.65);
letter-spacing: 0.02em;
}
.cta-deliverables li {
display: inline-flex;
align-items: center;
gap: 8px;
}
.cta-deliverables span {
color: var(--bi-glow);
}
.cta-deliverables li i {
color: var(--bi-glow);
font-size: 11px;
width: 14px;
height: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(244, 184, 96, 0.45);
border-radius: 50%;
}
@media (max-width: 700px) {
.cta-deliverables {
gap: 16px;
font-size: 12px;
}
.cta-actions {
gap: 16px;
}
}
/* ============================================================
SECTION: TESTIMONIALS
============================================================ */
.testimonials {
padding: var(--section-y) var(--gutter);
background: var(--bi-paper);
border-top: 1px solid var(--bi-line);
}
/* ─── Testimonial slider ─── */
.testimonial-slider {
position: relative;
max-width: 920px;
margin: 0 auto;
padding: 0 clamp(0px, 6vw, 56px);
}
.testimonial-track {
position: relative;
overflow: hidden;
}
.testimonial {
background: var(--bi-pure);
border: 1px solid var(--bi-line);
padding: clamp(32px, 5vw, 64px);
display: flex;
flex-direction: column;
gap: 28px;
min-height: 320px;
position: absolute;
inset: 0;
opacity: 0;
visibility: hidden;
transform: translateX(40px);
transition: opacity .6s var(--ease), transform .6s var(--ease), visibility .6s var(--ease);
}
.testimonial.is-active {
position: relative;
opacity: 1;
visibility: visible;
transform: translateX(0);
}
.testimonial.is-leaving {
transform: translateX(-40px);
}
.quote-mark {
color: var(--bi-glow);
width: 44px;
height: 34px;
opacity: 0.9;
}
.testimonial blockquote p {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(19px, 1.8vw, 26px);
line-height: 1.45;
letter-spacing: -0.014em;
color: var(--bi-graphite);
font-style: italic;
}
.testimonial figcaption {
display: flex;
flex-direction: column;
gap: 4px;
margin-top: auto;
padding-top: 20px;
border-top: 1px solid var(--bi-line);
}
.testimonial figcaption strong {
font-family: var(--font-body);
font-weight: 500;
font-size: 15px;
letter-spacing: -0.005em;
color: var(--bi-ink);
}
.testimonial figcaption span {
font-size: 12px;
letter-spacing: 0.06em;
color: var(--bi-mist);
}
/* ─── Slider arrows ─── */
.slider-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 3;
width: 48px;
height: 48px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--bi-pure);
border: 1px solid var(--bi-line);
color: var(--bi-ink);
cursor: pointer;
transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.slider-arrow:hover,
.slider-arrow:focus-visible {
background: var(--bi-glow);
color: var(--bi-ink);
border-color: var(--bi-glow);
}
.slider-arrow--prev {
left: 0;
}
.slider-arrow--next {
right: 0;
}
.slider-arrow:hover svg {
transform: translateX(0);
}
.slider-arrow--prev:hover {
transform: translateY(-50%) translateX(-2px);
}
.slider-arrow--next:hover {
transform: translateY(-50%) translateX(2px);
}
/* ─── Pagination dots ─── */
.slider-dots {
display: flex;
justify-content: center;
gap: 12px;
margin-top: 32px;
}
.slider-dot {
width: 28px;
height: 4px;
border-radius: 0;
border: 0;
background: var(--bi-line);
cursor: pointer;
padding: 0;
transition: background .35s var(--ease), width .35s var(--ease);
}
.slider-dot:hover {
background: var(--bi-mist);
}
.slider-dot.is-active {
background: var(--bi-glow);
width: 44px;
}
@media (max-width: 700px) {
.testimonial-slider {
padding: 0;
}
.slider-arrow {
position: relative;
top: auto;
transform: none;
width: 44px;
height: 44px;
}
.slider-arrow--prev,
.slider-arrow--next {
left: auto;
right: auto;
}
.slider-arrow:hover {
transform: none;
}
/* Move arrows to flank the dots */
.testimonial-slider {
display: grid;
grid-template-columns: auto 1fr auto;
grid-template-areas:
"track track track"
"prev dots next";
gap: 24px 12px;
}
.testimonial-track {
grid-area: track;
}
.slider-arrow--prev {
grid-area: prev;
}
.slider-arrow--next {
grid-area: next;
}
.slider-dots {
grid-area: dots;
margin-top: 0;
align-self: center;
}
.testimonial {
min-height: 0;
padding: 28px 24px;
gap: 20px;
}
}
/* ============================================================
SECTION: INSIGHTS — unified card system used on both the homepage
(section.insights) and the /insights listing page. Single source of
truth for card visuals + grid; only the homepage section wrapper
gets its own background/padding rules.
============================================================ */
/* Homepage-only section wrapper — paper background + top border + section padding. */
.insights {
padding: var(--section-y) var(--gutter);
background: var(--bi-paper);
border-top: 1px solid var(--bi-line);
}
/* Homepage variant of the grid adds max-width + auto-margin because there's
no outer .page-section-inner wrapper. The actual grid columns + gap come
from the unified .insights-grid rule further down. */
.insights .insights-grid {
max-width: var(--container);
margin: 0 auto;
}
/* Card link — flex column, no underline, fills card height. */
.insight-link {
display: flex;
flex-direction: column;
color: inherit;
text-decoration: none;
height: 100%;
}
/* Image hero — full-bleed cover image with subtle border. */
.insight-img {
position: relative;
aspect-ratio: 16 / 9;
margin: 0 0 20px;
background: var(--bi-paper);
border: 1px solid var(--bi-line);
border-radius: 6px;
overflow: hidden;
transition: border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
}
.insight-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .8s var(--ease);
}
.insight-link:hover .insight-img,
.insight-link:focus-visible .insight-img {
border-color: var(--bi-glow);
transform: translateY(-3px);
box-shadow: 0 14px 32px -20px rgba(244, 184, 96, 0.45);
}
.insight-link:hover .insight-img img {
transform: scale(1.04);
}
/* Card body — flex column so foot can stick to the bottom of the card. */
.insight-body {
display: flex;
flex-direction: column;
flex: 1;
padding: 0 2px;
}
/* Amber accent bar above the title; grows on hover to signal interactivity. */
.insight-title {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(20px, 1.8vw, 24px);
line-height: 1.25;
letter-spacing: -0.018em;
color: var(--bi-ink);
margin: 0 0 14px;
padding-top: 16px;
position: relative;
transition: color .3s var(--ease);
}
.insight-title::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 28px;
height: 2px;
background: var(--bi-glow);
transition: width .35s var(--ease);
}
.insight-link:hover .insight-title {
color: var(--bi-graphite);
}
.insight-link:hover .insight-title::before {
width: 56px;
}
.insight-excerpt {
font-family: var(--font-body);
font-size: 14.5px;
line-height: 1.6;
color: var(--bi-mist);
margin: 0 0 22px;
max-width: 42ch;
}
.insight-foot {
display: flex;
align-items: center;
justify-content: flex-end;
margin-top: auto;
padding-top: 14px;
border-top: 1px solid var(--bi-line);
}
.insight-cta {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-body);
font-size: 13px;
font-weight: 500;
color: var(--bi-ink);
transition: color .3s var(--ease), gap .3s var(--ease);
}
.insight-cta svg {
transition: transform .3s var(--ease);
}
.insight-link:hover .insight-cta {
color: var(--bi-glow);
gap: 12px;
}
.insight-link:hover .insight-cta svg {
transform: translateX(2px);
}
@media (max-width: 600px) {
.insight-img {
aspect-ratio: 16 / 9;
}
}
/* ============================================================
SECTION: SHOWROOM
============================================================ */
.showroom {
padding: var(--section-y) var(--gutter);
background: var(--bi-paper);
border-top: 1px solid var(--bi-line);
}
.showroom-grid {
max-width: var(--container);
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(32px, 5vw, 80px);
align-items: stretch;
}
.showroom-body {
display: flex;
flex-direction: column;
}
.showroom-body .eyebrow {
margin-bottom: 24px;
}
.showroom-body .section-title {
margin-bottom: 24px;
}
.showroom-lede {
font-size: 16px;
line-height: 1.65;
color: var(--bi-mist);
max-width: 46ch;
margin-bottom: 40px;
}
.showroom-meta {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 28px 32px;
margin-bottom: 40px;
padding: 28px 0;
border-top: 1px solid var(--bi-line);
border-bottom: 1px solid var(--bi-line);
}
.showroom-meta dt {
font-size: 11px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--bi-glow);
margin-bottom: 10px;
display: inline-flex;
align-items: center;
gap: 10px;
}
.showroom-meta dt i {
font-size: 13px;
width: 22px;
height: 22px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--bi-line);
color: var(--bi-glow);
flex-shrink: 0;
}
.showroom-meta dd {
font-size: 15px;
line-height: 1.55;
color: var(--bi-graphite);
}
.showroom-meta dd a {
border-bottom: 1px solid var(--bi-line);
transition: border-color .3s var(--ease);
}
.showroom-meta dd a:hover {
border-bottom-color: var(--bi-glow);
}
.showroom-cta {
display: flex;
flex-wrap: wrap;
gap: 24px;
align-items: center;
margin-top: auto;
}
.showroom-map {
position: relative;
overflow: hidden;
background: var(--bi-ink);
aspect-ratio: 4 / 5;
min-height: 500px;
width: 100%;
}
.showroom-map iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
filter: grayscale(0.4) contrast(1.05);
}
@media (max-width: 900px) {
.showroom-grid {
grid-template-columns: 1fr;
}
.showroom-map {
aspect-ratio: 16 / 12;
min-height: 360px;
}
.showroom-meta {
grid-template-columns: 1fr;
gap: 24px;
}
}
/* ============================================================
.bi-btn — canonical button system (sitewide)
Pill shape, mono uppercase, gold border, arrow that widens its gap
on hover — the "EXPLORE INDOOR" pill from the catalogue mega menu.
API:
Label default ghost pill
... solid gold pill
... transparent + gold border
... no pill, just label + arrow
... shift palette for dark bg
... sizes (default = sm)
... no gap-grow on hover
Combinable. The three earlier pill components (.mega-more / .bi-footer-
cat-more / .bi-footer-info-directions) are also matched by the
selectors below so existing markup gets the same canonical render.
============================================================ */
.bi-btn,
.bi-v2 .mega-more,
.bi-footer-info-directions {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 16px;
border-radius: 4px;
background: rgba(244, 184, 96, 0.15);
border: 1px solid rgba(244, 184, 96, 0.55);
color: var(--bi-ink);
font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
line-height: 1;
text-decoration: none;
cursor: pointer;
white-space: nowrap;
transition:
background .25s var(--ease),
border-color .25s var(--ease),
color .25s var(--ease),
gap .2s var(--ease),
transform .25s var(--ease),
box-shadow .25s var(--ease);
}
.bi-btn svg,
.bi-v2 .mega-more svg,
.bi-footer-info-directions svg {
width: 11px;
height: 11px;
flex: none;
transition: transform .25s var(--ease);
}
.bi-btn:hover,
.bi-v2 .mega-more:hover,
.bi-footer-info-directions:hover {
background: var(--bi-glow);
border-color: var(--bi-glow);
color: var(--bi-ink);
gap: 12px;
}
/* ── Style variants ───────────────────────────────────────── */
/* Solid — solid gold pill from the start. For the primary action. */
.bi-btn--solid {
background: var(--bi-glow);
border-color: var(--bi-glow);
color: var(--bi-ink);
}
.bi-btn--solid:hover {
background: var(--bi-glow);
border-color: var(--bi-glow);
transform: translateY(-1px);
box-shadow: 0 10px 24px -12px rgba(244, 184, 96, 0.55);
}
/* Outline — transparent bg, gold border. Subtler than the default. */
.bi-btn--outline {
background: transparent;
border-color: rgba(244, 184, 96, 0.55);
color: var(--bi-ink);
}
.bi-btn--outline:hover {
background: rgba(244, 184, 96, 0.10);
border-color: var(--bi-glow);
color: var(--bi-ink);
}
/* Text — no pill, just label + gold underline + arrow. Inline CTA. */
.bi-btn--text,
.bi-footer-cat-more {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 2px 0 4px;
background: transparent;
border: 0;
border-bottom: 1px solid var(--bi-glow);
border-radius: 0;
color: var(--bi-ink);
font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
transition: color .25s var(--ease), gap .2s var(--ease), border-color .25s var(--ease);
}
.bi-btn--text:hover,
.bi-footer-cat-more:hover {
color: var(--bi-glow);
border-color: var(--bi-glow);
gap: 10px;
background: transparent;
}
/* ── On-dark theme — for dark backgrounds (footer, hero overlay) ── */
/* Default ghost on dark — paper text, same gold pill */
.bi-btn--on-dark {
color: var(--bi-paper);
background: rgba(244, 184, 96, 0.10);
border-color: rgba(244, 184, 96, 0.45);
}
.bi-btn--on-dark:hover {
background: var(--bi-glow);
border-color: var(--bi-glow);
color: var(--bi-ink);
}
/* Solid on dark — solid gold pill on dark bg */
.bi-btn--solid.bi-btn--on-dark {
background: var(--bi-glow);
border-color: var(--bi-glow);
color: var(--bi-ink);
}
.bi-btn--solid.bi-btn--on-dark:hover {
background: var(--bi-glow);
color: var(--bi-ink);
}
/* Outline on dark — paper text + gold border */
.bi-btn--outline.bi-btn--on-dark {
background: transparent;
border-color: rgba(244, 184, 96, 0.55);
color: var(--bi-paper);
}
.bi-btn--outline.bi-btn--on-dark:hover {
background: rgba(244, 184, 96, 0.12);
border-color: var(--bi-glow);
color: var(--bi-paper);
}
/* Text on dark — gold text only, underlines on hover */
.bi-btn--text.bi-btn--on-dark {
color: var(--bi-paper);
border-bottom-color: var(--bi-glow);
}
.bi-btn--text.bi-btn--on-dark:hover {
color: var(--bi-glow);
}
/* ── Sizes ───────────────────────────────────────────────── */
.bi-btn--xs {
padding: 6px 12px;
font-size: 10px;
letter-spacing: 0.10em;
}
.bi-btn--xs svg {
width: 10px;
height: 10px;
}
.bi-btn--md {
padding: 12px 22px;
font-size: 12px;
letter-spacing: 0.14em;
gap: 10px;
}
.bi-btn--md svg {
width: 12px;
height: 12px;
}
.bi-btn--md:hover {
gap: 14px;
}
.bi-btn--lg {
padding: 16px 28px;
font-size: 13px;
letter-spacing: 0.16em;
gap: 12px;
}
.bi-btn--lg svg {
width: 13px;
height: 13px;
}
.bi-btn--lg:hover {
gap: 16px;
}
/* Text variant sizes — adjust just the typography, no padding */
.bi-btn--text.bi-btn--xs {
padding: 1px 0 3px;
font-size: 10px;
letter-spacing: 0.10em;
}
.bi-btn--text.bi-btn--md {
padding: 3px 0 5px;
font-size: 12px;
letter-spacing: 0.14em;
}
.bi-btn--text.bi-btn--lg {
padding: 4px 0 6px;
font-size: 13px;
letter-spacing: 0.16em;
}
/* ── Modifiers ───────────────────────────────────────────── */
/* No-arrow — disables the gap-widen on hover so labels without an
svg arrow don't visually wiggle. */
.bi-btn--noarrow:hover {
gap: 8px;
}
/* Disabled state */
.bi-btn[disabled],
.bi-btn[aria-disabled="true"] {
opacity: 0.45;
cursor: not-allowed;
pointer-events: none;
}
/* ============================================================
HEADER v2 — components/new-header.php (proposal)
All rules are gated by the .bi-v2 modifier on the , the
mobile drawer root and the scrim. JS-essential class names like
.mega / .drawer-sublist / .is-active are preserved on the markup;
these rules only refine the *look*. Lifts the UI vocabulary used
in the new footer — mono uppercase eyebrows with leading gold
hairlines, gold-bordered uppercase "Explore →" pills, polished
"Book Consultation" CTA.
============================================================ */
/* Mega rail eyebrow — leading 22px gold hairline + mono uppercase */
.bi-v2 .mega-rail-eyebrow {
display: inline-flex;
align-items: center;
gap: 12px;
font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--bi-glow);
padding-left: 0;
margin-bottom: 22px;
}
.bi-v2 .mega-rail-eyebrow::before {
content: '';
width: 22px;
height: 1px;
background: var(--bi-glow);
}
/* Mega pane eyebrow — same treatment, on the right panel */
.bi-v2 .mega-pane-eyebrow {
display: inline-flex;
align-items: center;
gap: 12px;
font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--bi-glow);
}
.bi-v2 .mega-pane-eyebrow::before {
content: '';
width: 22px;
height: 1px;
background: var(--bi-glow);
}
/* "Explore X →" CTA in the mega menu — rendered by the canonical .bi-btn
rule at the top of the file (the .bi-v2 .mega-more selector is grouped
in there, so it inherits the same pill, ink text, and hover treatment). */
/* Mega tabs — refined active/hover state.
The existing rule paints active as dark-ink bg + paper text. The v2
look uses a light gold pill with ink text (high contrast on the
paper-light mega rail). Plus a leading gold left-bar accent. */
.bi-v2 .mega-tab {
position: relative;
border-radius: 4px;
transition: background .2s var(--ease), color .2s var(--ease);
}
.bi-v2 .mega-tab::before {
content: '';
position: absolute;
left: 0;
top: 20%;
bottom: 20%;
width: 2px;
background: var(--bi-glow);
border-radius: 1px;
opacity: 0;
transition: opacity .25s var(--ease);
}
.bi-v2 .mega-tab.is-active::before,
.bi-v2 .mega-tab:hover::before {
opacity: 1;
}
/* Override the existing combined .mega-tab:hover, .mega-tab.is-active
rule so the bg is a light gold tint with INK text (visible) instead
of dark ink + paper text. */
.bi-v2 .mega-tab:hover,
.bi-v2 .mega-tab.is-active {
background: rgba(244, 184, 96, 0.15);
color: var(--bi-ink);
}
.bi-v2 .mega-tab:hover i,
.bi-v2 .mega-tab.is-active i {
color: var(--bi-glow);
}
.bi-v2 .mega-tab.is-active .mega-tab-arrow,
.bi-v2 .mega-tab:hover .mega-tab-arrow {
color: var(--bi-glow);
}
/* Mega cards — softer hover with a gold accent border */
.bi-v2 .mega-card {
transition: border-color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease);
}
.bi-v2 .mega-card:hover {
border-color: rgba(244, 184, 96, 0.55);
background: rgba(244, 184, 96, 0.06);
transform: translateY(-1px);
}
/* Top nav items — cleaner gold underline that grows from the left */
.bi-v2 .nav-list>.nav-item>a,
.bi-v2 .nav-list>.nav-item>.nav-parent {
position: relative;
}
.bi-v2 .nav-list>.nav-item>a::after,
.bi-v2 .nav-list>.nav-item>.nav-parent::after {
content: '';
position: absolute;
left: 0;
/* Sits at the link's bottom edge so it stays inside the header
container — previously -4px which spilled below the header. */
bottom: 0;
height: 1.5px;
width: 0;
background: var(--bi-glow);
transition: width .25s var(--ease);
}
.bi-v2 .nav-list>.nav-item>a:hover::after,
.bi-v2 .nav-list>.nav-item>.nav-parent:hover::after,
.bi-v2 .nav-list>.nav-item--dropdown:hover>.nav-parent::after,
.bi-v2 .nav-list>.nav-item--mega:hover>.nav-parent::after {
width: 100%;
}
/* Book Consultation CTA — polish: tighter typography, animated arrow */
.bi-v2 .nav-cta {
display: inline-flex;
align-items: center;
gap: 8px;
letter-spacing: 0.02em;
transition: gap .25s var(--ease), transform .25s var(--ease);
}
.bi-v2 .nav-cta:hover {
gap: 12px;
}
.bi-v2 .nav-cta svg {
transition: transform .25s var(--ease);
}
.bi-v2 .nav-cta:hover svg {
transform: translateX(2px);
}
/* ── Mobile drawer refinements (gated by .bi-v2 on the drawer root) ─── */
/* Drawer link — warm gold hover that nudges right */
.bi-v2.mobile-drawer .drawer-link {
transition: color .25s var(--ease), padding-left .25s var(--ease);
}
.bi-v2.mobile-drawer .drawer-link:hover,
.bi-v2.mobile-drawer .drawer-link--expand[aria-expanded="true"] {
color: var(--bi-glow);
}
.bi-v2.mobile-drawer .drawer-link:hover {
padding-left: 6px;
}
/* Drawer number — mono with gold tint when active */
.bi-v2.mobile-drawer .drawer-num {
font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
transition: color .25s var(--ease);
}
.bi-v2.mobile-drawer .drawer-link:hover .drawer-num,
.bi-v2.mobile-drawer .drawer-link--expand[aria-expanded="true"] .drawer-num {
color: var(--bi-glow);
}
/* Drawer sublist items — gold accent on hover */
.bi-v2.mobile-drawer .drawer-sublist a {
transition: color .25s var(--ease), padding-left .25s var(--ease);
}
.bi-v2.mobile-drawer .drawer-sublist a:hover {
color: var(--bi-glow);
padding-left: 4px;
}
/* Drawer "Book Free Consultation" footer CTA — match desktop polish */
.bi-v2.mobile-drawer .drawer-foot .btn--primary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
transition: gap .25s var(--ease);
}
.bi-v2.mobile-drawer .drawer-foot .btn--primary:hover {
gap: 12px;
}
/* Drawer contact rows — icons in gold */
.bi-v2.mobile-drawer .drawer-contact a,
.bi-v2.mobile-drawer .drawer-contact span {
display: inline-flex;
align-items: center;
gap: 8px;
}
.bi-v2.mobile-drawer .drawer-contact i {
color: var(--bi-glow);
font-size: 12px;
}
/* ============================================================
FOOTER (multi-column)
============================================================ */
.site-footer {
background: var(--bi-ink);
color: rgba(250, 250, 247, 0.7);
padding: clamp(64px, 9vw, 112px) var(--gutter) 32px;
border-top: 1px solid rgba(244, 184, 96, 0.22);
}
.footer-container {
max-width: var(--container);
margin: 0 auto;
}
.footer-grid {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
gap: clamp(32px, 4vw, 64px);
padding-bottom: clamp(48px, 6vw, 72px);
border-bottom: 1px solid rgba(250, 250, 247, 0.1);
}
.footer-logo {
display: inline-block;
line-height: 0;
margin-bottom: 28px;
}
.footer-logo img {
height: 52px;
width: auto;
display: block;
}
.footer-tagline {
font-family: var(--font-display);
font-weight: 400;
font-style: italic;
font-size: clamp(18px, 1.6vw, 22px);
line-height: 1.3;
color: rgba(250, 250, 247, 0.85);
margin-bottom: 28px;
max-width: 24ch;
}
.footer-trust {
display: flex;
gap: 20px;
flex-wrap: wrap;
}
.footer-trust span {
display: flex;
flex-direction: column;
gap: 2px;
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(250, 250, 247, 0.55);
}
.footer-trust strong {
font-family: var(--font-display);
font-weight: 400;
font-style: normal;
font-size: 22px;
letter-spacing: -0.02em;
color: var(--bi-paper);
text-transform: none;
}
.footer-heading {
font-family: var(--font-body);
font-weight: 500;
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--bi-glow);
margin-bottom: 22px;
}
.footer-links {
display: flex;
flex-direction: column;
gap: 12px;
}
.footer-links a {
font-size: 14px;
color: rgba(250, 250, 247, 0.78);
transition: color .3s var(--ease);
display: inline-block;
position: relative;
}
.footer-links a::after {
content: '';
position: absolute;
left: 0;
bottom: -2px;
width: 100%;
height: 1px;
background: var(--bi-glow);
transform: scaleX(0);
transform-origin: left;
transition: transform .4s var(--ease);
}
.footer-links a:hover {
color: var(--bi-paper);
}
.footer-links a:hover::after {
transform: scaleX(1);
}
.footer-address {
font-style: normal;
font-size: 14px;
line-height: 1.6;
color: rgba(250, 250, 247, 0.78);
margin-bottom: 20px;
}
.footer-links--contact {
margin-bottom: 24px;
}
.footer-social {
display: flex;
gap: 8px;
}
.footer-social a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border: 1px solid rgba(250, 250, 247, 0.2);
font-size: 15px;
color: rgba(250, 250, 247, 0.8);
transition: all .35s var(--ease);
}
.footer-social a:hover {
background: var(--bi-glow);
color: var(--bi-ink);
border-color: var(--bi-glow);
}
.footer-brands {
padding: clamp(36px, 5vw, 56px) 0;
border-bottom: 1px solid rgba(250, 250, 247, 0.1);
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
gap: clamp(20px, 3vw, 40px);
}
.footer-brands-label {
font-family: var(--font-body);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.22em;
line-height: 1.45;
text-transform: uppercase;
color: rgba(250, 250, 247, 0.55);
flex-shrink: 0;
border-left: 1px solid rgba(244, 184, 96, 0.45);
padding-left: 16px;
}
/* ─── Marquee track ─── */
.brands-marquee {
overflow: hidden;
width: 100%;
/* Soft gradient fade at both ends */
-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.brands-track {
display: flex;
align-items: center;
gap: clamp(40px, 5vw, 72px);
width: max-content;
animation: brandScroll 42s linear infinite;
}
.brands-marquee:hover .brands-track {
animation-play-state: paused;
}
.brands-track-item {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
height: 56px;
}
.brands-track-item img {
height: 100%;
max-height: 44px;
width: auto;
max-width: 160px;
object-fit: contain;
filter: grayscale(1) brightness(1.3);
opacity: 0.5;
transition: filter .35s var(--ease), opacity .35s var(--ease);
}
.brands-track-item:hover img,
.brands-track-item:focus-within img {
filter: grayscale(0) brightness(1);
opacity: 1;
}
@keyframes brandScroll {
from {
transform: translateX(0);
}
to {
transform: translateX(-50%);
}
}
.footer-bottom {
padding-top: 28px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 24px;
flex-wrap: wrap;
}
.footer-copy {
font-size: 12px;
letter-spacing: 0.04em;
color: rgba(250, 250, 247, 0.45);
}
.footer-credit {
font-size: 12px;
letter-spacing: 0.04em;
color: rgba(250, 250, 247, 0.45);
}
.footer-credit a {
color: var(--bi-glow);
border-bottom: 1px solid transparent;
transition: border-color .3s var(--ease);
}
.footer-credit a:hover {
border-bottom-color: var(--bi-glow);
}
.footer-legal {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 6px 20px;
}
.footer-legal li {
font-size: 12px;
letter-spacing: 0.04em;
}
.footer-legal a {
color: rgba(250, 250, 247, 0.55);
transition: color .3s var(--ease);
}
.footer-legal a:hover {
color: var(--bi-glow);
}
/* ============================================================
FOOTER v2 — components/new-footer.php (proposal)
All classes prefixed .bi-footer-* so this can be wheeled in
for review without disturbing the existing .site-footer styles.
Reuses .brands-marquee / .brands-track / .footer-brands for the
auto-scrolling brand strip so the marquee renders identically.
============================================================ */
.bi-footer {
background: var(--bi-ink);
color: rgba(250, 250, 247, 0.7);
padding: 0 var(--gutter);
border-top: 1px solid rgba(244, 184, 96, 0.22);
}
.bi-footer-inner {
max-width: var(--container);
margin: 0 auto;
}
.bi-footer-eyebrow {
display: inline-flex;
align-items: center;
gap: 12px;
font-family: var(--font-body);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--bi-glow);
margin: 0 0 14px;
}
.bi-footer-eyebrow::before {
content: '';
width: 22px;
height: 1px;
background: var(--bi-glow);
}
/* ── 1. CTA band ──────────────────────────────────────────── */
.bi-footer-cta {
display: grid;
grid-template-columns: 1.6fr 1fr;
gap: clamp(28px, 4vw, 64px);
align-items: center;
padding: clamp(48px, 7vw, 80px) 0;
border-bottom: 1px solid rgba(250, 250, 247, 0.08);
}
.bi-footer-cta-title {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(28px, 3.4vw, 44px);
line-height: 1.15;
letter-spacing: -0.018em;
color: var(--bi-paper);
margin: 0 0 14px;
}
.bi-footer-cta-title em {
font-style: italic;
font-weight: 300;
color: var(--bi-glow);
}
.bi-footer-cta-sub {
font-size: 15px;
line-height: 1.65;
color: rgba(250, 250, 247, 0.65);
margin: 0;
max-width: 56ch;
}
.bi-footer-cta-actions {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
}
.bi-footer-cta-call {
display: inline-flex;
align-items: center;
gap: 10px;
color: rgba(250, 250, 247, 0.75);
font-size: 14px;
letter-spacing: 0.01em;
transition: color .25s var(--ease);
}
.bi-footer-cta-call:hover {
color: var(--bi-glow);
}
.bi-footer-cta-call i {
color: var(--bi-glow);
font-size: 13px;
}
.bi-footer-cta-call strong {
color: var(--bi-paper);
font-weight: 500;
letter-spacing: 0.02em;
}
/* ── 2. Mega catalogue grid ────────────────────────────────── */
.bi-footer-catalogue {
padding: clamp(48px, 6vw, 72px) 0;
border-bottom: 1px solid rgba(250, 250, 247, 0.08);
}
.bi-footer-catalogue-eyebrow {
margin-bottom: 32px;
}
.bi-footer-catalogue-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: clamp(28px, 3.5vw, 48px);
}
.bi-footer-cat-title {
font-family: var(--font-display);
font-weight: 400;
font-size: 19px;
line-height: 1.2;
color: var(--bi-paper);
margin: 0 0 18px;
padding-bottom: 12px;
border-bottom: 1px solid rgba(244, 184, 96, 0.22);
letter-spacing: -0.012em;
}
.bi-footer-cat-title a {
color: inherit;
transition: color .25s var(--ease);
}
.bi-footer-cat-title a:hover {
color: var(--bi-glow);
}
.bi-footer-cat-list {
list-style: none;
margin: 0 0 18px;
padding: 0;
}
.bi-footer-cat-list li {
margin-bottom: 9px;
font-size: 13.5px;
line-height: 1.4;
}
.bi-footer-cat-list a {
color: rgba(250, 250, 247, 0.65);
transition: color .2s var(--ease), padding-left .2s var(--ease);
}
.bi-footer-cat-list a:hover {
color: var(--bi-glow);
padding-left: 4px;
}
.bi-footer-cat-soon {
color: rgba(250, 250, 247, 0.35);
cursor: default;
}
.bi-footer-cat-soon em {
font-style: normal;
font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
font-size: 10.5px;
letter-spacing: 0.08em;
color: rgba(244, 184, 96, 0.55);
text-transform: uppercase;
}
/* .bi-footer-cat-more — uses the .bi-btn--text canonical rule (grouped
selector at the top of the file). On the dark footer it inherits the
gold underline + ink-paper text + arrow widen-on-hover. */
/* ── 3. Brand chips row ───────────────────────────────────── */
.bi-footer-brandrow {
padding: clamp(36px, 4vw, 56px) 0;
border-bottom: 1px solid rgba(250, 250, 247, 0.08);
}
.bi-footer-brandchips {
list-style: none;
margin: 0 0 16px;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 10px 12px;
}
.bi-footer-brandchips li a {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 16px;
background: rgba(250, 250, 247, 0.04);
border: 1px solid rgba(250, 250, 247, 0.12);
border-radius: 999px;
font-size: 13px;
color: var(--bi-paper);
letter-spacing: 0.01em;
transition: border-color .25s var(--ease), background .25s var(--ease);
}
.bi-footer-brandchips li a:hover {
background: rgba(244, 184, 96, 0.10);
border-color: rgba(244, 184, 96, 0.50);
color: var(--bi-paper);
}
.bi-footer-brandchip-tag {
padding-left: 8px;
margin-left: 2px;
border-left: 1px solid rgba(244, 184, 96, 0.35);
font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
font-size: 10px;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--bi-glow);
}
.bi-footer-brand-extra {
margin: 0;
font-size: 13px;
line-height: 1.6;
color: rgba(250, 250, 247, 0.55);
}
.bi-footer-brand-extra strong {
color: var(--bi-paper);
font-weight: 500;
}
/* ── 4. Studio · Showroom · Reach Us ──────────────────────── */
.bi-footer-info {
display: grid;
grid-template-columns: 1.4fr 1fr 1.1fr 1fr;
gap: clamp(28px, 3.5vw, 56px);
padding: clamp(48px, 6vw, 72px) 0;
border-bottom: 1px solid rgba(250, 250, 247, 0.08);
}
.bi-footer-logo {
display: inline-block;
margin-bottom: 18px;
}
.bi-footer-logo img {
height: 38px;
width: auto;
display: block;
}
.bi-footer-info-tagline {
font-family: var(--font-display);
font-size: 17px;
line-height: 1.35;
color: var(--bi-paper);
margin: 0 0 12px;
letter-spacing: -0.01em;
}
.bi-footer-info-blurb {
font-size: 13px;
line-height: 1.7;
color: rgba(250, 250, 247, 0.55);
margin: 0;
max-width: 32ch;
}
.bi-footer-info-heading {
font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(250, 250, 247, 0.45);
margin: 0 0 18px;
}
.bi-footer-info-list {
list-style: none;
margin: 0;
padding: 0;
}
.bi-footer-info-list li {
margin-bottom: 9px;
font-size: 13.5px;
}
.bi-footer-info-list a {
color: rgba(250, 250, 247, 0.65);
transition: color .2s var(--ease), padding-left .2s var(--ease);
}
.bi-footer-info-list a:hover {
color: var(--bi-glow);
padding-left: 4px;
}
.bi-footer-info-address,
.bi-footer-info-hours {
display: flex;
align-items: flex-start;
gap: 10px;
font-style: normal;
font-size: 13px;
line-height: 1.65;
color: rgba(250, 250, 247, 0.65);
margin: 0 0 14px;
}
.bi-footer-info-address i,
.bi-footer-info-hours i {
color: var(--bi-glow);
font-size: 14px;
margin-top: 3px;
flex: none;
}
/* .bi-footer-info-directions — uses the canonical .bi-btn rule (grouped
selector at the top of the file). Adds just the layout offset here. */
.bi-footer-info-directions {
margin-top: 6px;
}
/* On the dark footer the text-style pill ("Explore X →") needs paper text
instead of the .bi-btn--text default ink, otherwise it disappears. */
.bi-footer .bi-footer-cat-more,
.bi-footer .bi-btn--text {
color: var(--bi-paper);
}
.bi-footer .bi-footer-cat-more:hover,
.bi-footer .bi-btn--text:hover {
color: var(--bi-glow);
}
.bi-footer-info-contact {
list-style: none;
margin: 0 0 22px;
padding: 0;
}
.bi-footer-info-contact li {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 12px;
font-size: 13.5px;
}
.bi-footer-info-contact li i {
color: var(--bi-glow);
font-size: 14px;
width: 16px;
text-align: center;
}
.bi-footer-info-contact a {
color: var(--bi-paper);
transition: color .25s var(--ease);
}
.bi-footer-info-contact a:hover {
color: var(--bi-glow);
}
.bi-footer-info-social {
list-style: none;
margin: 0;
padding: 0;
display: flex;
gap: 8px;
}
.bi-footer-info-social a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
background: rgba(250, 250, 247, 0.04);
border: 1px solid rgba(250, 250, 247, 0.12);
border-radius: 50%;
color: rgba(250, 250, 247, 0.7);
font-size: 13px;
transition: border-color .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
}
.bi-footer-info-social a:hover {
background: rgba(244, 184, 96, 0.15);
border-color: var(--bi-glow);
color: var(--bi-glow);
}
/* ── 5. Trust strip (MSME / IIID / IIMM / BNI) ────────────── */
.bi-footer-trust {
padding: clamp(28px, 3.5vw, 44px) 0;
border-bottom: 1px solid rgba(250, 250, 247, 0.08);
}
.bi-footer-trust-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 12px;
justify-content: center;
}
.bi-footer-trust-list li {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 16px;
background: rgba(250, 250, 247, 0.03);
border: 1px solid rgba(250, 250, 247, 0.10);
border-radius: 999px;
font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
font-size: 11px;
letter-spacing: 0.06em;
color: rgba(250, 250, 247, 0.65);
}
.bi-footer-trust-list li i {
color: var(--bi-glow);
font-size: 13px;
}
.bi-footer-trust-list li strong {
font-weight: 600;
color: var(--bi-paper);
margin-right: 4px;
padding-right: 10px;
border-right: 1px solid rgba(250, 250, 247, 0.18);
}
/* ── 7. Bottom legal bar ──────────────────────────────────── */
.bi-footer-bottom {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 18px 28px;
padding: 28px 0;
border-top: 1px solid rgba(250, 250, 247, 0.06);
}
.bi-footer-copy,
.bi-footer-credit {
font-size: 12px;
letter-spacing: 0.04em;
color: rgba(250, 250, 247, 0.45);
margin: 0;
}
.bi-footer-credit a {
color: var(--bi-glow);
border-bottom: 1px solid transparent;
transition: border-color .3s var(--ease);
}
.bi-footer-credit a:hover {
border-bottom-color: var(--bi-glow);
}
.bi-footer-legal {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 6px 20px;
}
.bi-footer-legal li {
font-size: 12px;
letter-spacing: 0.04em;
}
.bi-footer-legal a {
color: rgba(250, 250, 247, 0.55);
transition: color .3s var(--ease);
}
.bi-footer-legal a:hover {
color: var(--bi-glow);
}
/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1100px) {
.bi-footer-catalogue-grid {
grid-template-columns: repeat(2, 1fr);
gap: 36px 28px;
}
.bi-footer-info {
grid-template-columns: 1.4fr 1fr 1fr;
gap: 36px;
}
.bi-footer-info-brand {
grid-column: 1 / -1;
max-width: 480px;
}
}
@media (max-width: 760px) {
.bi-footer-cta {
grid-template-columns: 1fr;
}
.bi-footer-cta-actions {
align-items: stretch;
}
.bi-footer-cta-actions .btn {
justify-content: center;
}
.bi-footer-info {
grid-template-columns: 1fr 1fr;
gap: 32px 24px;
}
}
@media (max-width: 560px) {
.bi-footer-catalogue-grid,
.bi-footer-info {
grid-template-columns: 1fr;
}
.bi-footer-info-brand {
max-width: none;
}
.bi-footer-trust-list {
justify-content: flex-start;
}
.bi-footer-bottom {
flex-direction: column;
align-items: flex-start;
}
}
@media (max-width: 1000px) {
.footer-grid {
grid-template-columns: 1fr 1fr;
gap: 40px 32px;
}
.footer-brand {
grid-column: 1 / span 2;
}
}
@media (max-width: 600px) {
.footer-grid {
grid-template-columns: 1fr;
}
.footer-brand {
grid-column: 1;
}
.footer-bottom {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
}
/* ============================================================
MOBILE DRAWER
============================================================ */
.drawer-scrim {
position: fixed;
inset: 0;
background: rgba(10, 10, 10, 0.55);
opacity: 0;
visibility: hidden;
transition: opacity .4s var(--ease), visibility .4s var(--ease);
z-index: 200;
}
.drawer-scrim.is-open {
opacity: 1;
visibility: visible;
}
.mobile-drawer {
position: fixed;
top: 0;
right: 0;
width: min(440px, 100%);
height: 100vh;
height: 100svh;
background: var(--bi-ink);
color: var(--bi-paper);
transform: translateX(100%);
transition: transform .55s var(--ease);
z-index: 201;
overflow-y: auto;
}
.mobile-drawer.is-open {
transform: translateX(0);
}
.drawer-header {
position: sticky;
top: 0;
z-index: 5;
background: var(--bi-ink);
padding: 16px clamp(20px, 5vw, 32px);
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
border-bottom: 1px solid rgba(250, 250, 247, 0.08);
}
.drawer-logo {
display: inline-flex;
align-items: center;
line-height: 0;
}
.drawer-logo img {
height: 34px;
width: auto;
display: block;
}
.drawer-close {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 14px;
background: transparent;
color: var(--bi-paper);
font-family: var(--font-body);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.2em;
text-transform: uppercase;
border: 1px solid rgba(250, 250, 247, 0.22);
cursor: pointer;
transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.drawer-close:hover,
.drawer-close:focus-visible {
background: var(--bi-glow);
color: var(--bi-ink);
border-color: var(--bi-glow);
}
.drawer-close svg {
transition: transform .35s var(--ease);
}
.drawer-close:hover svg {
transform: rotate(90deg);
}
.drawer-inner {
padding: 32px clamp(24px, 5vw, 40px) 40px;
display: flex;
flex-direction: column;
min-height: calc(100% - 67px);
gap: 36px;
}
.drawer-nav {
display: flex;
flex-direction: column;
}
.drawer-link {
display: flex;
align-items: center;
gap: 18px;
width: 100%;
padding: 18px 0;
border: 0;
border-bottom: 1px solid rgba(250, 250, 247, 0.1);
background: transparent;
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(24px, 4.4vw, 32px);
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--bi-paper);
text-align: left;
cursor: pointer;
transition: color .3s var(--ease), padding-left .35s var(--ease);
}
.drawer-link:hover,
.drawer-link:focus-visible {
color: var(--bi-glow);
padding-left: 6px;
}
.drawer-link--expand .drawer-label {
flex: 1;
}
.drawer-chevron {
transition: transform .35s var(--ease);
color: var(--bi-glow);
flex-shrink: 0;
}
.drawer-link--expand[aria-expanded="true"] .drawer-chevron {
transform: rotate(180deg);
}
.drawer-link--expand[aria-expanded="true"] {
color: var(--bi-glow);
}
.drawer-num {
font-family: var(--font-body);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.22em;
color: var(--bi-glow);
min-width: 30px;
flex-shrink: 0;
}
.drawer-group {
display: flex;
flex-direction: column;
}
.drawer-sublist {
display: flex;
flex-direction: column;
overflow: hidden;
padding: 0;
max-height: 0;
opacity: 0;
transition: max-height .45s var(--ease), opacity .35s var(--ease), padding .45s var(--ease);
border-bottom: 1px solid rgba(250, 250, 247, 0.1);
}
.drawer-sublist[hidden] {
display: flex;
}
/* override default hidden so transition works */
.drawer-sublist.is-expanded {
max-height: 600px;
opacity: 1;
padding: 4px 0 16px 48px;
}
.drawer-sublist li a {
display: block;
padding: 10px 0;
font-family: var(--font-body);
font-size: 15px;
color: rgba(250, 250, 247, 0.78);
transition: color .3s var(--ease), padding-left .3s var(--ease);
}
.drawer-sublist li a:hover {
color: var(--bi-glow);
padding-left: 6px;
}
.drawer-sub-all {
color: var(--bi-glow) !important;
font-size: 12px !important;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
padding-bottom: 14px !important;
border-bottom: 1px solid rgba(250, 250, 247, 0.08);
margin-bottom: 6px;
}
.drawer-foot {
margin-top: auto;
display: flex;
flex-direction: column;
gap: 24px;
}
.drawer-foot .btn--primary {
justify-content: center;
}
.drawer-contact {
display: flex;
flex-direction: column;
gap: 6px;
font-size: 14px;
color: rgba(250, 250, 247, 0.7);
line-height: 1.55;
}
.drawer-contact a {
color: var(--bi-paper);
border-bottom: 1px solid var(--bi-glow);
padding-bottom: 2px;
align-self: flex-start;
}
/* Nav toggle becomes 'X' when open */
.nav-toggle[aria-expanded="true"] span:nth-child(1) {
transform: translateY(6.5px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] span:nth-child(2) {
opacity: 0;
}
.nav-toggle[aria-expanded="true"] span:nth-child(3) {
transform: translateY(-6.5px) rotate(-45deg);
}
/* When drawer open, lock body scroll */
body.drawer-open {
overflow: hidden;
}
/* ============================================================
SCROLL REVEAL (JS adds .reveal and toggles .is-revealed)
============================================================ */
.reveal {
opacity: 0;
transform: translateY(28px);
transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
will-change: opacity, transform;
}
.reveal.is-revealed {
opacity: 1;
transform: translateY(0);
}
/* Stagger inside grids */
.brand-grid .reveal:nth-child(2) {
transition-delay: .06s;
}
.brand-grid .reveal:nth-child(3) {
transition-delay: .12s;
}
.brand-grid .reveal:nth-child(4) {
transition-delay: .18s;
}
.brand-grid .reveal:nth-child(5) {
transition-delay: .24s;
}
.brand-grid .reveal:nth-child(6) {
transition-delay: .30s;
}
.brand-grid .reveal:nth-child(7) {
transition-delay: .36s;
}
.brand-grid .reveal:nth-child(8) {
transition-delay: .42s;
}
.brand-grid .reveal:nth-child(9) {
transition-delay: .48s;
}
.projects-grid .reveal:nth-child(2),
.insights-grid .reveal:nth-child(2) {
transition-delay: .12s;
}
.projects-grid .reveal:nth-child(3),
.insights-grid .reveal:nth-child(3) {
transition-delay: .24s;
}
.why-grid .reveal:nth-child(2) {
transition-delay: .1s;
}
.why-grid .reveal:nth-child(3) {
transition-delay: .2s;
}
.why-grid .reveal:nth-child(4) {
transition-delay: .3s;
}
/* ============================================================
MOBILE RESPONSIVE — refinements
============================================================ */
/* Section heads: tighter, left-aligned on mobile */
@media (max-width: 800px) {
.section-head {
margin-bottom: clamp(32px, 5vw, 48px);
}
.section-aside {
gap: 16px;
}
.section-lede--centered {
margin-top: 16px;
}
.section-head--centered {
text-align: left;
justify-items: start;
}
.section-head--centered .eyebrow,
.section-head--centered .section-title,
.section-head--centered .section-lede {
margin-left: 0;
margin-right: 0;
text-align: left;
}
}
/* Hero stats: tighter at very small */
@media (max-width: 480px) {
.hero-stats {
padding-top: 24px;
margin-top: clamp(40px, 8vw, 64px);
gap: 24px 16px;
}
.hero-stats strong {
font-size: 26px;
}
.hero-stats span {
font-size: 11px;
letter-spacing: 0.14em;
}
}
/* Footer mobile improvements */
@media (max-width: 1000px) {
.footer-trust {
gap: 14px;
}
.footer-trust strong {
font-size: 20px;
}
}
@media (max-width: 600px) {
.footer-grid {
padding-bottom: clamp(36px, 7vw, 48px);
gap: 32px;
}
.footer-logo img {
height: 44px;
}
.footer-tagline {
font-size: 18px;
margin-bottom: 22px;
max-width: 28ch;
}
.footer-heading {
margin-bottom: 16px;
}
.footer-links {
gap: 10px;
}
.footer-brands {
padding: 32px 0;
gap: 16px;
grid-template-columns: 1fr;
}
.footer-brands-label {
border-left: 0;
padding-left: 0;
border-top: 1px solid rgba(244, 184, 96, 0.4);
padding-top: 12px;
}
.brands-track {
gap: 36px;
animation-duration: 32s;
}
.brands-track-item {
height: 44px;
}
.brands-track-item img {
max-height: 36px;
max-width: 120px;
}
.footer-bottom {
padding-top: 22px;
gap: 8px;
}
}
/* Brands grid — featured card at narrowest */
@media (max-width: 600px) {
.brand-card--featured {
min-height: 280px;
padding: 28px;
}
.brand-card--featured .brand-name {
font-size: 42px;
}
}
/* CTA band — tighter on mobile */
@media (max-width: 700px) {
.cta-band {
padding: clamp(56px, 12vw, 80px) var(--gutter);
}
.cta-title {
font-size: clamp(28px, 7vw, 40px);
}
.cta-sub {
font-size: 15px;
margin-bottom: 32px;
}
}
/* Showroom contact links — ensure tappable */
@media (max-width: 700px) {
.showroom-meta {
padding: 20px 0;
gap: 20px;
}
.showroom-meta dd {
font-size: 14px;
}
.showroom-cta {
gap: 16px;
}
}
/* Categories bento — slightly tighter min heights on mobile */
@media (max-width: 600px) {
.bento {
grid-template-rows: repeat(4, minmax(300px, 1fr));
}
.tile-body {
padding: 24px;
gap: 10px;
}
}
/* Projects + insights — tighter cards on mobile */
@media (max-width: 900px) {
.projects-grid {
gap: 36px;
}
.insights-grid {
gap: 36px;
}
}
/* Why grid — single column with reduced padding */
@media (max-width: 600px) {
.why-card {
padding: 22px 0;
gap: 14px;
}
.why-card .why-title {
font-size: 19px;
}
}
/* Testimonial type sizing on mobile (700px override in slider block handles padding) */
@media (max-width: 600px) {
.testimonial blockquote p {
font-size: 17px;
}
.quote-mark {
width: 36px;
height: 28px;
}
}
/* Header tightening at medium-narrow */
@media (max-width: 1280px) {
.nav-list {
gap: 16px;
}
.nav-item>a,
.nav-parent {
font-size: 13px;
}
.nav-cta {
padding: 10px 16px;
font-size: 12px;
}
}
@media (max-width: 1080px) and (min-width: 961px) {
.nav-list {
gap: 12px;
}
.nav-item>a,
.nav-parent {
font-size: 12.5px;
padding: 28px 0;
}
}
/* Tighter mobile drawer fonts (per screenshot — was too large) */
@media (max-width: 960px) {
.drawer-link {
font-size: clamp(18px, 4.2vw, 22px);
padding: 14px 0;
gap: 14px;
}
.drawer-num {
font-size: 10px;
min-width: 24px;
}
.drawer-sublist.is-expanded {
padding: 2px 0 12px 38px;
}
.drawer-sublist li a {
font-size: 13.5px;
padding: 8px 0;
}
.drawer-inner {
padding: 32px clamp(20px, 5vw, 32px) 32px;
gap: 32px;
}
.drawer-close {
padding: 8px 12px;
font-size: 10px;
}
.drawer-header {
padding: 14px 20px;
}
.drawer-logo img {
height: 30px;
}
.drawer-foot .btn--primary {
padding: 14px 20px;
font-size: 13px;
}
.drawer-contact {
font-size: 13px;
}
}
/* Hero eyebrow — keep single line on mobile by tightening */
.hero-eyebrow {
font-size: 11px;
letter-spacing: 0.18em;
flex-wrap: wrap;
}
@media (max-width: 480px) {
.hero-eyebrow {
font-size: 10.5px;
letter-spacing: 0.16em;
gap: 10px;
}
.hero-eyebrow::before {
width: 20px;
}
.hero-cta {
gap: 16px;
}
.hero-title {
font-size: clamp(26px, 7.5vw, 36px);
}
.section-title {
font-size: clamp(26px, 7.5vw, 36px);
}
.cta-title {
font-size: clamp(26px, 7vw, 36px);
}
.modal-title {
font-size: clamp(24px, 6.5vw, 32px);
}
.faq-q {
font-size: clamp(17px, 4.2vw, 21px);
}
}
/* ============================================================
COUNTERS strip
============================================================ */
.counters {
padding: clamp(48px, 7vw, 88px) var(--gutter);
background: var(--bi-ink);
color: var(--bi-paper);
position: relative;
overflow: hidden;
border-top: 1px solid rgba(244, 184, 96, 0.18);
border-bottom: 1px solid rgba(244, 184, 96, 0.18);
}
.counters::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse 40% 60% at 50% 50%, rgba(244, 184, 96, 0.08) 0%, transparent 70%);
pointer-events: none;
}
.counters-inner {
position: relative;
max-width: var(--container);
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: clamp(28px, 4vw, 48px);
}
.counters-eyebrow {
font-family: var(--font-body);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.26em;
text-transform: uppercase;
color: var(--bi-glow);
}
.counters-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: clamp(24px, 4vw, 56px);
width: 100%;
}
.counter {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
position: relative;
}
.counter:not(:last-child)::after {
content: '';
position: absolute;
top: 22%;
right: calc(clamp(24px, 4vw, 56px) / -2);
width: 1px;
height: 56%;
background: rgba(250, 250, 247, 0.12);
}
.counter-num {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(40px, 6vw, 80px);
line-height: 1;
letter-spacing: -0.03em;
color: var(--bi-paper);
display: inline-flex;
align-items: baseline;
}
.counter-num em {
font-style: italic;
color: var(--bi-glow);
font-weight: 300;
font-size: 0.6em;
margin-left: 2px;
}
.counter-label {
font-family: var(--font-body);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(250, 250, 247, 0.65);
max-width: 22ch;
line-height: 1.5;
}
@media (max-width: 900px) {
.counters-grid {
grid-template-columns: repeat(2, 1fr);
gap: 40px 24px;
}
.counter:not(:last-child)::after {
display: none;
}
.counter:nth-child(odd)::after {
content: '';
display: block;
position: absolute;
top: 22%;
right: -12px;
width: 1px;
height: 56%;
background: rgba(250, 250, 247, 0.12);
}
}
@media (max-width: 500px) {
.counters-grid {
gap: 32px 16px;
}
.counter-label {
font-size: 11px;
letter-spacing: 0.12em;
}
}
/* Below 400px (narrow phones — iPhone SE, smaller Androids) the 2-col
counters layout cramps the "1500+ / 12+ / 250+ / 8" numbers. Stack to 1-col
so each number gets full width and reads cleanly. */
@media (max-width: 400px) {
.counters-grid {
grid-template-columns: 1fr;
gap: 28px;
}
}
/* ============================================================
FAQ
============================================================ */
.faq {
padding: var(--section-y) var(--gutter);
background: var(--bi-paper);
border-top: 1px solid var(--bi-line);
}
.faq .section-head {
grid-template-columns: 1.2fr 1fr;
margin-bottom: clamp(40px, 5vw, 64px);
}
.faq-inline-cta {
display: inline;
padding: 0;
border: 0;
background: transparent;
color: var(--bi-ink);
border-bottom: 1px solid var(--bi-glow);
cursor: pointer;
font-weight: 500;
transition: color .3s var(--ease), background .3s var(--ease);
}
.faq-inline-cta:hover {
color: var(--bi-glow);
}
.faq-list {
max-width: var(--container);
margin: 0 auto;
border-top: 1px solid var(--bi-line);
}
.faq-item {
border-bottom: 1px solid var(--bi-line);
transition: background .35s var(--ease);
}
.faq-item summary {
list-style: none;
cursor: pointer;
padding: 28px 12px 28px 4px;
display: flex;
align-items: center;
gap: 24px;
justify-content: space-between;
transition: padding-left .35s var(--ease), color .35s var(--ease);
}
.faq-item summary::-webkit-details-marker {
display: none;
}
.faq-item summary:hover {
padding-left: 10px;
color: var(--bi-ink);
}
.faq-item[open] summary {
color: var(--bi-ink);
}
.faq-q {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(20px, 2.2vw, 28px);
line-height: 1.2;
letter-spacing: -0.018em;
color: var(--bi-graphite);
transition: color .35s var(--ease);
flex: 1;
}
.faq-item[open] .faq-q {
color: var(--bi-ink);
}
.faq-icon {
position: relative;
width: 36px;
height: 36px;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--bi-line);
color: var(--bi-glow);
transition: transform .4s var(--ease), border-color .4s var(--ease), background .4s var(--ease), color .4s var(--ease);
}
.faq-icon i {
font-size: 14px;
transition: transform .45s var(--ease);
line-height: 1;
}
.faq-item:hover .faq-icon {
border-color: var(--bi-glow);
}
.faq-item[open] .faq-icon {
background: var(--bi-glow);
color: var(--bi-ink);
border-color: var(--bi-glow);
}
.faq-item[open] .faq-icon i {
transform: rotate(45deg);
}
.faq-a {
overflow: hidden;
max-height: 0;
opacity: 0;
transition: max-height .5s var(--ease), opacity .35s var(--ease), padding .5s var(--ease);
padding: 0 12px 0 4px;
}
.faq-item[open] .faq-a {
max-height: 600px;
opacity: 1;
padding: 0 12px 28px 4px;
}
.faq-a p {
font-size: clamp(15px, 1.15vw, 17px);
line-height: 1.7;
color: var(--bi-graphite);
max-width: 78ch;
}
@media (max-width: 800px) {
.faq .section-head {
grid-template-columns: 1fr;
}
.faq-item summary {
padding: 22px 6px 22px 2px;
gap: 16px;
}
.faq-item[open] .faq-a {
padding: 0 6px 22px 2px;
}
}
/* ============================================================
FOOTER blurb (replaces removed footer-trust)
============================================================ */
.footer-blurb {
font-size: 14px;
line-height: 1.65;
color: rgba(250, 250, 247, 0.6);
max-width: 34ch;
}
/* ============================================================
CONSULTATION MODAL
============================================================ */
.modal {
position: fixed;
inset: 0;
/* Sits above the floating quick-connect FAB stack (z-index: 9998 from
components/quick-connect.php) so its scrim covers the WhatsApp/Call
buttons cleanly when the modal opens. */
z-index: 10001;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
visibility: hidden;
opacity: 0;
transition: opacity .35s var(--ease), visibility .35s var(--ease);
padding: clamp(16px, 3vw, 40px);
}
.modal.is-open {
pointer-events: auto;
visibility: visible;
opacity: 1;
}
.modal-scrim {
position: absolute;
inset: 0;
background: rgba(10, 10, 10, 0.72);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
cursor: pointer;
}
.modal-panel {
position: relative;
background: var(--bi-paper);
color: var(--bi-graphite);
width: 100%;
max-width: 1080px;
max-height: 92vh;
max-height: 92svh;
overflow: hidden;
transform: translateY(16px) scale(0.985);
transition: transform .45s var(--ease);
display: flex;
flex-direction: column;
}
.modal.is-open .modal-panel {
transform: translateY(0) scale(1);
}
.modal-close {
position: absolute;
top: 16px;
right: 16px;
z-index: 5;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0;
width: 36px;
height: 36px;
padding: 0;
background: rgba(10, 10, 10, 0.06);
color: var(--bi-ink);
border: 1px solid rgba(10, 10, 10, 0.10);
border-radius: 50%;
cursor: pointer;
transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
/* Drop the "CLOSE" label — the X icon alone reads as close, and the smaller
circular button stops competing with the eyebrow at the top of the modal. */
.modal-close span {
display: none;
}
.modal-close svg {
width: 16px;
height: 16px;
transition: transform .35s var(--ease);
}
.modal-close:hover,
.modal-close:focus-visible {
background: var(--bi-ink);
color: var(--bi-paper);
border-color: var(--bi-ink);
transform: rotate(90deg);
}
.modal-close svg {
transition: transform .35s var(--ease);
}
.modal-close:hover svg {
transform: rotate(90deg);
}
.modal-grid {
display: grid;
grid-template-columns: 1fr 1.25fr;
min-height: 0;
overflow: hidden;
}
.modal-aside {
background: var(--bi-ink);
color: var(--bi-paper);
padding: clamp(32px, 4vw, 56px);
display: flex;
flex-direction: column;
gap: 22px;
position: relative;
overflow: hidden;
}
.modal-aside::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse 70% 50% at 30% 100%, rgba(244, 184, 96, 0.16) 0%, transparent 70%);
pointer-events: none;
}
.modal-aside>* {
position: relative;
}
.modal-aside .eyebrow {
margin-bottom: 4px;
}
.modal-title {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(28px, 3.4vw, 44px);
line-height: 1.05;
letter-spacing: -0.025em;
color: var(--bi-paper);
}
.modal-title em {
font-style: italic;
font-weight: 300;
color: var(--bi-glow);
}
.modal-sub {
font-size: 14px;
line-height: 1.6;
color: rgba(250, 250, 247, 0.78);
max-width: 38ch;
}
.modal-deliverables {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 8px;
padding-top: 20px;
border-top: 1px solid rgba(250, 250, 247, 0.14);
}
.modal-deliverables li {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 13px;
line-height: 1.5;
color: rgba(250, 250, 247, 0.8);
}
.modal-deliverables li i {
flex-shrink: 0;
color: var(--bi-glow);
font-size: 11px;
width: 16px;
height: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(244, 184, 96, 0.5);
border-radius: 50%;
margin-top: 3px;
}
.modal-trust {
margin-top: auto;
padding-top: 20px;
border-top: 1px solid rgba(250, 250, 247, 0.14);
font-size: 12px;
line-height: 1.55;
color: rgba(250, 250, 247, 0.65);
}
.modal-trust strong {
color: var(--bi-paper);
font-weight: 500;
}
.modal-direct {
margin-top: 10px;
font-size: 12px;
}
.modal-direct a {
color: var(--bi-glow);
font-weight: 500;
font-size: 14px;
letter-spacing: 0.02em;
border-bottom: 1px solid currentColor;
padding-bottom: 1px;
}
/* Form side */
.modal-form {
padding: clamp(32px, 4vw, 56px);
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 18px;
}
/* Modal head — the two-mode left rail title block. The default mode is
the generic consultation pitch; the product mode swaps in when the modal
is opened from a product page's "Add to project enquiry" button. */
.modal-head[hidden] {
display: none;
}
/* Mono uppercase eyebrow with leading 22px gold hairline — matches the
sitewide eyebrow vocabulary (about page, footer catalogue, mega menu). */
.modal-eyebrow {
display: inline-flex;
align-items: center;
gap: 12px;
margin: 0 0 14px;
font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--bi-glow);
}
.modal-eyebrow::before {
content: '';
width: 22px;
height: 1px;
background: var(--bi-glow);
}
/* Product context bar — visible when the modal is opened from a product
page. Row layout: icon · name (with mono "Enquiring about" label above) ·
"Pre-filled" tag on the right. Sits above the form fields. */
.modal-product-context {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 18px;
background: linear-gradient(135deg,
rgba(244, 184, 96, 0.14) 0%,
rgba(244, 184, 96, 0.04) 100%);
border: 1px solid rgba(244, 184, 96, 0.40);
border-left: 3px solid var(--bi-glow, #f4b860);
border-radius: 4px;
margin-bottom: 18px;
}
.modal-product-context[hidden] {
display: none;
}
.modal-product-context-icon {
flex: none;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: var(--bi-glow, #f4b860);
color: var(--bi-ink);
border-radius: 50%;
font-size: 16px;
}
.modal-product-context-text {
flex: 1;
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.modal-product-context-label {
font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
font-size: 10.5px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(10, 10, 10, 0.55);
line-height: 1;
}
.modal-product-context-name {
font-family: var(--font-display, "Fraunces", serif);
font-weight: 500;
font-size: 16px;
line-height: 1.25;
color: var(--bi-ink);
letter-spacing: -0.005em;
/* Allow wrap at word boundaries so multi-word product labels flow cleanly,
but DON'T split mid-word/hyphen — keeps model codes like "HLR-2283"
atomic instead of leaving a "2283)" orphan on its own line. */
word-break: keep-all;
overflow-wrap: break-word;
hyphens: manual;
}
@media (max-width: 600px) {
.modal-product-context {
flex-wrap: wrap;
gap: 10px 14px;
}
}
.form-row {
display: contents;
}
.form-row--double {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
}
.field {
display: flex;
flex-direction: column;
gap: 8px;
}
.field-label {
font-family: var(--font-body);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--bi-mist);
}
.field-label em {
color: var(--bi-glow);
font-style: normal;
font-weight: 500;
}
.field input,
.field select,
.field textarea {
font-family: var(--font-body);
font-size: 15px;
color: var(--bi-ink);
background: var(--bi-pure);
border: 1px solid var(--bi-line);
padding: 14px 16px;
width: 100%;
border-radius: 0;
transition: border-color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
line-height: 1.4;
font-weight: 400;
}
.field textarea {
resize: vertical;
min-height: 110px;
font-family: var(--font-body);
}
.field select {
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 16px center;
background-size: 10px 6px;
padding-right: 36px;
cursor: pointer;
}
.field input::placeholder,
.field textarea::placeholder {
color: var(--bi-mist);
opacity: 0.7;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
outline: none;
border-color: var(--bi-ink);
background: var(--bi-pure);
box-shadow: 0 0 0 3px rgba(244, 184, 96, 0.22);
}
.field input:invalid:not(:placeholder-shown),
.field select:invalid:not(:focus) {
border-color: var(--bi-line);
}
.field-note {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 12px;
line-height: 1.55;
color: var(--bi-mist);
margin-top: 4px;
}
/* Inline form error banner — surfaced when a handler bounces back with
?status=error. Sits above the form fields. */
.form-error {
background: #FCEBEB;
border: 1px solid #E8B4B4;
border-left: 3px solid #C0392B;
color: #6B2622;
padding: 14px 16px;
border-radius: 4px;
font-family: var(--font-body);
font-size: 14px;
line-height: 1.55;
margin-bottom: 18px;
}
.form-error a {
color: #6B2622;
text-decoration: underline;
font-weight: 500;
}
.field-note i {
color: var(--bi-glow);
font-size: 13px;
margin-top: 2px;
flex: none;
}
.form-actions {
display: flex;
align-items: center;
gap: 18px;
flex-wrap: wrap;
margin-top: 8px;
}
/* Cancel — quieter than the canonical .bi-btn--text. No pill, no underline,
just a subtle text link that grows gold on hover. Sits next to the primary
submit button. */
.modal-cancel {
background: transparent;
border: 0;
padding: 4px 8px;
font-family: var(--font-body);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.02em;
color: var(--bi-mist);
cursor: pointer;
transition: color .25s var(--ease);
}
.modal-cancel:hover {
color: var(--bi-ink);
}
.form-success {
background: var(--bi-ink);
color: var(--bi-paper);
padding: 28px 26px;
margin-top: 4px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 10px;
border-left: 3px solid var(--bi-glow);
border-radius: 4px;
}
.form-success-icon {
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--bi-glow);
color: var(--bi-ink);
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
margin-bottom: 6px;
box-shadow: 0 0 0 6px rgba(244, 184, 96, 0.18);
}
.form-success strong {
font-family: var(--font-display);
font-size: 22px;
font-weight: 400;
letter-spacing: -0.015em;
}
.form-success span {
font-size: 14px;
line-height: 1.55;
color: rgba(250, 250, 247, 0.8);
}
.form-success a {
color: var(--bi-glow);
border-bottom: 1px solid currentColor;
}
.form-success a {
color: var(--bi-glow);
border-bottom: 1px solid currentColor;
}
body.modal-open {
overflow: hidden;
}
/* Modal responsive — on mobile the dark left rail is hidden entirely.
The form takes the full panel; product context bar (when in product mode)
still shows above the fields to anchor the enquiry to its SKU. */
@media (max-width: 900px) {
.modal-grid {
grid-template-columns: 1fr;
}
/* Hide the entire left rail (eyebrow, headline, lede, deliverables, trust).
The form alone fills the modal on small screens — gives the user a clear
single column of fields without horizontal/vertical pressure. */
.modal-aside {
display: none;
}
/* Form gets top padding to clear the close button (no aside pushing it down). */
.modal-form {
padding: 64px 24px 28px;
}
/* Close button on the cream form background — solid dark circle for strong
contrast + better tap visibility (the previous transparent-grey variant
disappeared against the dark aside that used to sit at the top). */
.modal-close {
background: var(--bi-ink);
color: var(--bi-paper);
border-color: var(--bi-ink);
}
.modal-close:hover,
.modal-close:focus-visible {
background: var(--bi-glow);
color: var(--bi-ink);
border-color: var(--bi-glow);
}
.form-row--double {
grid-template-columns: 1fr;
gap: 14px;
}
.modal-panel {
max-height: 96svh;
}
}
/* Dead @media (max-width: 500px) block for .modal-close removed —
the new responsive-fixes block at the end of this file replaces it with
a proper 44px touch-target rule. */
/* ============================================================
INNER PAGES — shared patterns
============================================================ */
/* ─── Page breadcrumb section (dark, minimal — just the trail + page-name H1) ─── */
.page-breadcrumb {
background: var(--bi-ink);
color: var(--bi-paper);
padding: clamp(110px, 10vw, 140px) var(--gutter) clamp(36px, 4.5vw, 56px);
position: relative;
overflow: hidden;
}
.page-breadcrumb::before {
/* Subtle gold radial — more visible on the dark bg */
content: '';
position: absolute;
top: 0;
right: 0;
width: 60%;
height: 100%;
background: radial-gradient(ellipse 60% 70% at 80% 25%, rgba(244, 184, 96, 0.14) 0%, transparent 70%);
pointer-events: none;
}
.page-breadcrumb-inner {
position: relative;
max-width: var(--container);
margin: 0 auto;
}
.breadcrumb-trail {
margin-bottom: 22px;
}
.breadcrumb-trail ol {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
font-family: var(--font-body);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(250, 250, 247, 0.55);
}
.breadcrumb-trail li {
display: inline-flex;
align-items: center;
gap: 12px;
}
.breadcrumb-trail li+li::before {
content: '';
width: 18px;
height: 1px;
background: var(--bi-glow);
}
.breadcrumb-trail a {
color: rgba(250, 250, 247, 0.55);
transition: color .3s var(--ease);
padding-bottom: 2px;
border-bottom: 1px solid transparent;
}
.breadcrumb-trail a:hover {
color: var(--bi-paper);
border-bottom-color: var(--bi-glow);
}
.breadcrumb-trail [aria-current="page"] {
color: var(--bi-paper);
}
.page-breadcrumb-title {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(28px, 3.6vw, 44px);
line-height: 1.05;
letter-spacing: -0.028em;
color: var(--bi-paper);
margin: 0;
}
.page-breadcrumb-title em {
font-style: italic;
font-weight: 300;
color: var(--bi-glow);
}
/* ─── Blog post body hero image ───
Sits at the top of .post-body-content, right above the lede paragraph
(below the AEO block + post-meta strip). Constrained to the article's
reading column so it lines up with the surrounding copy. */
.post-body-hero {
aspect-ratio: 16 / 9;
margin: 0 0 32px;
overflow: hidden;
border-radius: 8px;
background: var(--bi-paper);
border: 1px solid var(--bi-line);
}
.post-body-hero img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
@media (max-width: 600px) {
.post-body-hero {
border-radius: 6px;
margin-bottom: 24px;
}
}
/* ─── AEO block — Direct answer + Quick-Facts table ───
Sits between the page breadcrumb and the hero on category pages.
Two-column on desktop (answer left, facts right), stacks on mobile.
Designed to be the AI-extractable surface a crawler can quote
verbatim into AI Overviews / ChatGPT / Perplexity citations. */
.page-aeo {
background: var(--bi-paper);
padding: clamp(36px, 5vw, 56px) var(--gutter);
border-bottom: 1px solid var(--bi-line);
}
.page-aeo-inner {
max-width: var(--container);
margin: 0 auto;
display: grid;
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
gap: clamp(28px, 4vw, 56px);
align-items: start;
}
.page-aeo-answer .eyebrow {
margin-bottom: 10px;
}
.page-aeo-direct {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(17px, 1.5vw, 21px);
line-height: 1.55;
color: var(--bi-ink);
letter-spacing: -0.005em;
margin: 0;
}
.page-aeo-facts {
width: 100%;
border-collapse: collapse;
background: var(--bi-pure);
border: 1px solid var(--bi-line);
border-radius: 6px;
overflow: hidden;
font-size: 13px;
line-height: 1.5;
}
.page-aeo-facts caption {
text-align: left;
font-family: var(--font-body);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--bi-mist);
padding: 14px 18px 10px;
border-bottom: 1px solid var(--bi-line);
background: var(--bi-paper);
caption-side: top;
}
.page-aeo-facts tbody tr {
border-bottom: 1px solid var(--bi-line);
}
.page-aeo-facts tbody tr:last-child {
border-bottom: 0;
}
.page-aeo-facts th,
.page-aeo-facts td {
padding: 10px 18px;
text-align: left;
vertical-align: top;
}
.page-aeo-facts th {
font-weight: 500;
color: var(--bi-mist);
font-size: 12px;
letter-spacing: 0.01em;
white-space: nowrap;
width: 1%;
padding-right: 24px;
}
.page-aeo-facts td {
color: var(--bi-ink);
font-weight: 400;
}
/* Below 900px the AEO 2-col layout collapses + the Quick-Facts table flips
to block-style key/value pairs. Bumped from 840 → 900px because at
841-900px the th column with `white-space: nowrap` + long labels like
"Architectural CRI" / "Dimming protocols" forced horizontal overflow. */
@media (max-width: 900px) {
.page-aeo-inner {
grid-template-columns: 1fr;
gap: 28px;
}
.page-aeo-facts th {
white-space: normal;
width: auto;
display: block;
padding: 12px 18px 4px;
font-size: 11px;
}
.page-aeo-facts td {
display: block;
padding: 0 18px 12px;
}
.page-aeo-facts tbody tr {
padding: 4px 0;
}
}
/* ─── Blog post — meta strip, body typography, comparison table, byline ─── */
.post-meta {
padding: 24px var(--gutter) 0;
}
.post-meta-inner {
max-width: 1100px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
font-family: var(--font-body);
font-size: 12px;
letter-spacing: 0.04em;
color: var(--bi-mist);
}
.post-meta-cat {
text-transform: uppercase;
letter-spacing: 0.18em;
font-size: 10px;
font-weight: 600;
color: var(--bi-ink);
background: var(--bi-paper);
border: 1px solid var(--bi-line);
padding: 4px 10px;
border-radius: 999px;
}
.post-meta-dot {
opacity: 0.4;
}
/* Article body — 2-column grid: sticky TOC sidebar + readable column.
Stacks on mobile (TOC moves above content). */
.post-body {
padding: clamp(40px, 6vw, 72px) var(--gutter);
}
.post-body-inner {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 220px minmax(0, 1fr);
gap: clamp(36px, 5vw, 72px);
align-items: start;
}
/* Sidebar TOC — sits inside a soft paper card, sticky on desktop.
Active section uses --bi-glow accent (matches mega-menu "view all" + chips). */
.post-toc {
position: sticky;
top: 96px;
align-self: flex-start;
font-family: var(--font-body);
background: var(--bi-paper);
border: 1px solid var(--bi-line);
border-radius: 8px;
padding: 22px 22px 18px;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
}
.post-toc-label {
display: flex;
align-items: center;
gap: 8px;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--bi-ink);
margin: 0 0 14px;
padding-bottom: 12px;
border-bottom: 1px solid var(--bi-line);
}
.post-toc-label::before {
content: "";
display: inline-block;
width: 18px;
height: 1px;
background: var(--bi-glow);
}
.post-toc-list {
list-style: none;
padding: 0;
margin: 0;
counter-reset: toc;
}
.post-toc-list li {
margin: 0;
counter-increment: toc;
}
.post-toc-list a {
display: grid;
grid-template-columns: 22px 1fr;
gap: 10px;
align-items: baseline;
padding: 8px 0;
font-size: 13px;
line-height: 1.45;
color: var(--bi-mist);
text-decoration: none;
letter-spacing: -0.002em;
transition: color 140ms ease;
}
.post-toc-list a::before {
content: counter(toc, decimal-leading-zero);
font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.06em;
color: var(--bi-line);
transition: color 140ms ease;
}
.post-toc-list a:hover {
color: var(--bi-ink);
}
.post-toc-list a:hover::before {
color: var(--bi-mist);
}
.post-toc-list a.is-active {
color: var(--bi-ink);
font-weight: 500;
}
.post-toc-list a.is-active::before {
color: var(--bi-glow);
}
/* Hide the entire aside if JS didn't find any h2[id] to populate the list. */
.post-toc-list:empty {
display: none;
}
.post-toc:has(.post-toc-list:empty) {
display: none;
}
.post-lede {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(19px, 1.6vw, 22px);
line-height: 1.55;
color: var(--bi-ink);
letter-spacing: -0.005em;
margin: 0 0 36px;
padding-bottom: 28px;
border-bottom: 1px solid var(--bi-line);
}
.post-body-inner h2 {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(24px, 2.4vw, 32px);
line-height: 1.2;
letter-spacing: -0.018em;
color: var(--bi-ink);
margin: 48px 0 16px;
scroll-margin-top: 80px;
}
.post-body-inner h3 {
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(18px, 1.6vw, 21px);
line-height: 1.3;
letter-spacing: -0.008em;
color: var(--bi-ink);
margin: 32px 0 12px;
}
.post-body-inner p {
font-family: var(--font-body);
font-size: 16px;
line-height: 1.72;
color: var(--bi-graphite);
margin: 0 0 18px;
}
.post-body-inner strong {
color: var(--bi-ink);
font-weight: 600;
}
.post-body-inner a {
color: var(--bi-ink);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
text-decoration-color: rgba(10, 10, 10, 0.35);
transition: text-decoration-color 160ms ease;
}
.post-body-inner a:hover {
text-decoration-color: var(--bi-ink);
}
/* Article body list */
.post-list {
list-style: none;
padding: 0;
margin: 0 0 24px;
}
.post-list li {
font-family: var(--font-body);
font-size: 16px;
line-height: 1.65;
color: var(--bi-graphite);
padding: 14px 0 14px 22px;
border-bottom: 1px solid var(--bi-line);
position: relative;
}
.post-list li:last-child {
border-bottom: 0;
}
.post-list li::before {
content: "→";
position: absolute;
left: 0;
top: 14px;
color: var(--bi-mist);
font-weight: 600;
}
/* Comparison table — reads as a content asset, not a spec grid */
.post-table-wrap {
margin: 28px 0 36px;
overflow-x: auto;
border: 1px solid var(--bi-line);
border-radius: 6px;
background: var(--bi-pure);
}
.post-comparison {
width: 100%;
min-width: 560px;
border-collapse: collapse;
font-size: 14px;
font-family: var(--font-body);
}
.post-comparison thead th {
text-align: left;
background: var(--bi-paper);
color: var(--bi-ink);
font-weight: 600;
font-size: 12px;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 14px 18px;
border-bottom: 1px solid var(--bi-line);
}
.post-comparison tbody th {
text-align: left;
font-weight: 500;
color: var(--bi-mist);
font-size: 12px;
padding: 14px 18px;
border-bottom: 1px solid var(--bi-line);
background: var(--bi-paper);
width: 1%;
white-space: nowrap;
}
.post-comparison tbody td {
padding: 14px 18px;
color: var(--bi-ink);
border-bottom: 1px solid var(--bi-line);
vertical-align: top;
line-height: 1.5;
}
.post-comparison tbody tr:last-child th,
.post-comparison tbody tr:last-child td {
border-bottom: 0;
}
/* Author byline */
.post-byline {
max-width: 760px;
margin: 0 auto;
display: grid;
grid-template-columns: 64px 1fr;
gap: 20px;
align-items: start;
padding: 28px 0;
border-top: 1px solid var(--bi-line);
border-bottom: 1px solid var(--bi-line);
}
.post-byline-avatar {
width: 64px;
height: 64px;
border-radius: 50%;
background: var(--bi-paper);
border: 1px solid var(--bi-line);
display: flex;
align-items: center;
justify-content: center;
color: var(--bi-ink);
font-size: 22px;
}
.post-byline-text .eyebrow {
margin-bottom: 6px;
}
.post-byline-name {
font-family: var(--font-display);
font-weight: 500;
font-size: 20px;
line-height: 1.2;
color: var(--bi-ink);
margin: 0 0 10px;
letter-spacing: -0.005em;
}
.post-byline-bio {
font-family: var(--font-body);
font-size: 14.5px;
line-height: 1.65;
color: var(--bi-graphite);
margin: 0;
}
.post-byline-bio a {
color: var(--bi-ink);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 2px;
}
/* Next-steps CTA grid (Lighting Consultancy / Indoor / Outdoor cards) */
.post-cta-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-top: 28px;
}
.post-cta-card {
display: flex;
flex-direction: column;
gap: 8px;
background: var(--bi-pure);
border: 1px solid var(--bi-line);
border-radius: 6px;
padding: 24px;
color: inherit;
text-decoration: none;
transition: border-color 160ms ease, transform 160ms ease;
}
.post-cta-card:hover {
border-color: var(--bi-ink);
transform: translateY(-2px);
}
.post-cta-card .eyebrow {
margin: 0 0 4px;
}
.post-cta-card h3 {
font-family: var(--font-display);
font-weight: 500;
font-size: 19px;
line-height: 1.25;
color: var(--bi-ink);
margin: 0 0 4px;
letter-spacing: -0.008em;
}
.post-cta-card p {
font-family: var(--font-body);
font-size: 14px;
line-height: 1.55;
color: var(--bi-graphite);
margin: 0;
}
.post-cta-link {
margin-top: auto;
padding-top: 14px;
font-family: var(--font-body);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.04em;
color: var(--bi-ink);
}
/* Tablet + mobile (≤920px) — TOC hidden entirely, article body becomes
a single full-width column. CTA grid drops to 2-col. */
@media (max-width: 920px) {
.post-body-inner {
display: block;
max-width: 100%;
}
/* Hide the TOC sidebar; the JS still scans the H2s but no UI emits. */
.post-toc {
display: none;
}
.post-body-content {
max-width: 100%;
min-width: 0;
}
.post-cta-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 760px) {
.post-byline {
grid-template-columns: 1fr;
gap: 14px;
}
.post-cta-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 600px) {
/* Article body — tighter rhythm on phones */
.post-body-inner h2 {
font-size: clamp(22px, 6.2vw, 26px);
margin: 32px 0 12px;
}
.post-body-inner h3 {
font-size: clamp(17px, 4.8vw, 19px);
margin: 24px 0 10px;
}
.post-lede {
font-size: clamp(17px, 4.6vw, 19px);
margin: 0 0 24px;
padding-bottom: 20px;
}
.post-body-inner p,
.post-list li {
font-size: 15.5px;
line-height: 1.65;
}
/* Hide the · dots when the meta strip wraps onto multiple lines —
gap already separates the chips visually, dots become orphan punctuation. */
.post-meta-dot {
display: none;
}
.post-meta-inner {
gap: 12px;
}
/* Author byline avatar smaller on phones */
.post-byline {
padding: 22px 0;
}
.post-byline-avatar {
width: 52px;
height: 52px;
font-size: 18px;
}
.post-byline-name {
font-size: 18px;
}
/* CTA card — tighter padding, tighter typography */
.post-cta-card {
padding: 20px;
}
.post-cta-card h3 {
font-size: 17px;
}
}
/* ─── Insights landing — unified grid + note ─── */
/* Single grid rule shared by homepage (.insights .insights-grid adds
max-width + margin on top of this) and /insights listing. */
.insights-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(24px, 2.4vw, 32px);
}
@media (max-width: 900px) {
.insights-grid {
grid-template-columns: repeat(2, 1fr);
gap: 32px;
}
}
@media (max-width: 600px) {
.insights-grid {
grid-template-columns: 1fr;
gap: 36px;
}
}
.insights-note {
margin-top: 36px;
padding-top: 24px;
border-top: 1px solid var(--bi-line);
font-family: var(--font-body);
font-size: 14px;
line-height: 1.65;
color: var(--bi-mist);
text-align: center;
}
.insights-note strong {
color: var(--bi-ink);
}
.insights-note a {
color: var(--bi-ink);
text-decoration: underline;
text-underline-offset: 2px;
}
/* Insights landing — phone tweaks */
@media (max-width: 600px) {
.insights-grid {
gap: 16px;
}
.insight-title {
font-size: 18px;
}
.insight-excerpt {
font-size: 14px;
}
.insights-note {
margin-top: 28px;
padding-top: 20px;
font-size: 13.5px;
}
}
/* ─── 2-column form section (aside + form) ─── */
.form-section-grid {
display: grid;
grid-template-columns: 1fr 1.3fr;
gap: clamp(40px, 5vw, 72px);
align-items: start;
}
.form-section-aside {
display: flex;
flex-direction: column;
gap: 22px;
}
.form-section-aside .eyebrow {
margin-bottom: 0;
}
.form-section-aside .section-title {
max-width: 16ch;
margin: 0;
}
.form-section-aside p {
font-size: 16px;
line-height: 1.65;
color: var(--bi-graphite);
max-width: 42ch;
}
.form-section-info {
display: flex;
flex-direction: column;
gap: 18px;
padding: 24px 0;
border-top: 1px solid var(--bi-line);
border-bottom: 1px solid var(--bi-line);
}
.form-section-info-row {
display: flex;
gap: 14px;
align-items: flex-start;
}
.form-section-info-icon {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--bi-line);
color: var(--bi-glow);
font-size: 14px;
flex-shrink: 0;
}
.form-section-info-body {
display: flex;
flex-direction: column;
gap: 4px;
padding-top: 2px;
}
.form-section-info-label {
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--bi-mist);
}
.form-section-info-value {
font-size: 15px;
color: var(--bi-ink);
line-height: 1.4;
}
.form-section-info-value a {
color: inherit;
border-bottom: 1px solid var(--bi-line);
padding-bottom: 1px;
transition: border-color .3s var(--ease);
}
.form-section-info-value a:hover {
border-bottom-color: var(--bi-glow);
}
.form-section-grid .inline-form {
max-width: none;
width: 100%;
}
@media (max-width: 900px) {
.form-section-grid {
grid-template-columns: 1fr;
}
}
/* ─── Page banner (legacy — homepage hero only now) ─── */
.page-banner {
background: var(--bi-ink);
color: var(--bi-paper);
padding: clamp(140px, 18vw, 220px) var(--gutter) clamp(72px, 10vw, 120px);
position: relative;
overflow: hidden;
min-height: 40vh;
}
.page-banner-bg {
position: absolute;
inset: 0;
z-index: 0;
}
.page-banner-bg img {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.4;
filter: grayscale(0.3) contrast(1.05);
}
.page-banner-overlay {
position: absolute;
inset: 0;
z-index: 1;
background:
radial-gradient(ellipse at 80% 18%, rgba(244, 184, 96, 0.16) 0%, transparent 60%),
linear-gradient(180deg, rgba(10, 10, 10, 0.35) 0%, rgba(10, 10, 10, 0.55) 45%, rgba(10, 10, 10, 0.88) 100%);
}
.page-banner-inner {
position: relative;
z-index: 2;
max-width: var(--container);
margin: 0 auto;
}
.page-banner-inner .eyebrow {
margin-bottom: 28px;
}
.page-banner-title {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(38px, 6.4vw, 88px);
line-height: 1.02;
letter-spacing: -0.03em;
color: var(--bi-paper);
margin-bottom: 24px;
max-width: 20ch;
}
.page-banner-title em {
font-style: italic;
font-weight: 300;
color: var(--bi-glow);
}
.page-banner-sub {
font-size: clamp(16px, 1.3vw, 19px);
line-height: 1.6;
color: rgba(250, 250, 247, 0.78);
max-width: 60ch;
}
@media (max-width: 480px) {
.page-banner {
padding: 110px var(--gutter) 56px;
}
.page-banner-title {
font-size: clamp(30px, 9vw, 42px);
}
}
/* ─── Generic content section on inner pages (light bg) ─── */
.page-section {
padding: var(--section-y) var(--gutter);
background: var(--bi-paper);
}
.page-section--ink {
background: var(--bi-ink);
color: var(--bi-paper);
position: relative;
overflow: hidden;
}
.page-section--ink::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse 40% 50% at 85% 20%, rgba(244, 184, 96, 0.1) 0%, transparent 70%);
pointer-events: none;
}
.page-section--alt {
background: var(--bi-pure);
border-top: 1px solid var(--bi-line);
}
.page-section-inner {
position: relative;
max-width: var(--container);
margin: 0 auto;
}
/* ─── Story block: two-column text + image ─── */
.story-block {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(40px, 6vw, 80px);
align-items: center;
}
.story-block--reverse .story-block-img {
order: 2;
}
.story-block-body {
display: flex;
flex-direction: column;
gap: 18px;
}
.story-block-body .eyebrow {
margin-bottom: 8px;
}
.story-block-body h2,
.story-block-body .h2 {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(28px, 3.6vw, 48px);
line-height: 1.08;
letter-spacing: -0.025em;
color: var(--bi-ink);
margin-bottom: 8px;
max-width: 18ch;
}
.story-block-body h2 em,
.story-block-body .h2 em {
font-style: italic;
font-weight: 300;
color: var(--bi-graphite);
}
.story-block-body p {
font-size: clamp(15px, 1.2vw, 17px);
line-height: 1.65;
color: var(--bi-graphite);
max-width: 56ch;
}
.story-block-img {
aspect-ratio: 4 / 5;
overflow: hidden;
background: var(--bi-line);
}
.story-block-img img {
width: 100%;
height: 100%;
object-position: right;
object-fit: cover;
filter: grayscale(0.1) contrast(1.02);
}
/* ============================================================
Editorial dark section — used for CTA strips on outdoor sub-cat
+ outdoor product pages (~544 pages). Pulls in the gallery's
moody catalog mood as a punctuation at the end of the page,
while everything above stays on paper.
============================================================ */
.page-section--dark {
background: #111111;
color: #ebe6db;
position: relative;
overflow: hidden;
}
/* Drafted hairline rail along the top edge — same architectural cue */
.page-section--dark::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(244, 184, 96, 0.45) 20%, rgba(244, 184, 96, 0.45) 80%, transparent);
}
/* Subtle radial vignette — pools of warm light at the corners */
.page-section--dark::after {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at 12% 0%, rgba(244, 184, 96, 0.06), transparent 50%),
radial-gradient(ellipse at 88% 100%, rgba(244, 184, 96, 0.05), transparent 55%);
pointer-events: none;
}
.page-section--dark>* {
position: relative;
z-index: 1;
}
.page-section--dark .eyebrow {
color: var(--bi-glow);
letter-spacing: 0.18em;
}
.page-section--dark .eyebrow::before {
background: var(--bi-glow);
opacity: 0.9;
}
.page-section--dark .story-block-body h2,
.page-section--dark .story-block-body h3,
.page-section--dark .story-block-body .h2 {
color: #f5f0e6;
font-family: var(--font-display);
font-weight: 300;
letter-spacing: -0.028em;
}
.page-section--dark .story-block-body h2 em,
.page-section--dark .story-block-body h3 em,
.page-section--dark .story-block-body .h2 em {
color: var(--bi-glow);
font-weight: 200;
}
.page-section--dark .story-block-body p {
color: rgba(235, 230, 219, 0.78);
}
/* Image plate — framed with a hairline, faint brass glow on the rim */
.page-section--dark .story-block-img {
background: #0a0a0a;
border: 1px solid rgba(244, 184, 96, 0.25);
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.02),
0 24px 60px -28px rgba(0, 0, 0, 0.9);
position: relative;
}
.page-section--dark .story-block-img::before,
.page-section--dark .story-block-img::after {
content: "";
position: absolute;
width: 14px;
height: 14px;
border-color: var(--bi-glow);
border-style: solid;
border-width: 0;
z-index: 2;
}
.page-section--dark .story-block-img::before {
top: -1px;
left: -1px;
border-top-width: 1px;
border-left-width: 1px;
}
.page-section--dark .story-block-img::after {
bottom: -1px;
right: -1px;
border-bottom-width: 1px;
border-right-width: 1px;
}
.page-section--dark .story-block-img img {
filter: grayscale(0.05) contrast(1.05) brightness(0.95);
}
/* Buttons reweighted for dark ground */
.page-section--dark .btn--primary {
background: var(--bi-glow);
color: #111111;
border-color: var(--bi-glow);
}
.page-section--dark .btn--primary:hover {
background: #f5cb87;
border-color: #f5cb87;
}
.page-section--dark .btn--text-dark {
color: rgba(235, 230, 219, 0.85);
}
.page-section--dark .btn--text-dark:hover {
color: var(--bi-glow);
}
@media (max-width: 900px) {
.story-block {
grid-template-columns: 1fr;
}
.story-block--reverse .story-block-img {
order: 0;
}
.story-block-img {
aspect-ratio: 4 / 3;
}
}
/* ─── Process strip: numbered steps ─── */
.process-strip {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
margin-top: clamp(40px, 6vw, 72px);
border-top: 1px solid var(--bi-line);
}
.page-section--ink .process-strip {
border-top-color: rgba(250, 250, 247, 0.12);
}
.process-step {
padding: 36px 28px 24px 0;
border-right: 1px solid var(--bi-line);
position: relative;
}
.page-section--ink .process-step {
border-right-color: rgba(250, 250, 247, 0.12);
}
.process-step:last-child {
border-right: 0;
}
.process-step::before {
content: '';
position: absolute;
top: -1px;
left: 0;
width: 56px;
height: 1px;
background: var(--bi-glow);
}
.process-num {
font-family: var(--font-display);
font-weight: 300;
font-style: italic;
font-size: 26px;
color: var(--bi-glow);
letter-spacing: -0.02em;
display: block;
margin-bottom: 14px;
}
.process-title {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(18px, 1.6vw, 22px);
line-height: 1.2;
letter-spacing: -0.015em;
color: var(--bi-ink);
margin-bottom: 10px;
}
.page-section--ink .process-title {
color: var(--bi-paper);
}
.process-desc {
font-size: 14px;
line-height: 1.6;
color: var(--bi-mist);
max-width: 32ch;
}
.page-section--ink .process-desc {
color: rgba(250, 250, 247, 0.65);
}
@media (max-width: 900px) {
.process-strip {
grid-template-columns: repeat(2, 1fr);
}
.process-step:nth-child(2) {
border-right: 0;
}
.process-step:nth-child(3),
.process-step:nth-child(4) {
border-top: 1px solid var(--bi-line);
}
.page-section--ink .process-step:nth-child(3),
.page-section--ink .process-step:nth-child(4) {
border-top-color: rgba(250, 250, 247, 0.12);
}
}
@media (max-width: 540px) {
.process-strip {
grid-template-columns: 1fr;
}
.process-step {
border-right: 0 !important;
padding: 28px 0;
}
.process-step:not(:first-child) {
border-top: 1px solid var(--bi-line);
}
.page-section--ink .process-step:not(:first-child) {
border-top-color: rgba(250, 250, 247, 0.12);
}
}
/* ─── Deliverables grid (consultancy "what you get") ─── */
.deliverables-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 16px;
margin-top: clamp(32px, 4vw, 48px);
}
.deliverable {
background: var(--bi-pure);
border: 1px solid var(--bi-line);
padding: 28px 22px;
display: flex;
flex-direction: column;
gap: 14px;
position: relative;
transition: border-color .35s var(--ease), transform .35s var(--ease);
}
.deliverable:hover {
border-color: var(--bi-glow);
transform: translateY(-3px);
}
.deliverable-icon {
font-size: 28px;
color: var(--bi-glow);
line-height: 1;
}
.deliverable-title {
font-family: var(--font-display);
font-weight: 400;
font-size: 19px;
line-height: 1.2;
color: var(--bi-ink);
letter-spacing: -0.015em;
}
.deliverable-desc {
font-size: 14px;
line-height: 1.6;
color: var(--bi-mist);
}
/* ─── Contact cards (Call / Email / Visit) ─── */
.contact-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 16px;
margin-top: clamp(32px, 4vw, 48px);
}
.contact-card {
background: var(--bi-pure);
border: 1px solid var(--bi-line);
padding: 32px 24px;
display: flex;
flex-direction: column;
gap: 14px;
color: inherit;
transition: border-color .35s var(--ease), transform .35s var(--ease);
position: relative;
overflow: hidden;
}
.contact-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0;
height: 2px;
background: var(--bi-glow);
transition: width .5s var(--ease);
}
.contact-card:hover {
border-color: var(--bi-glow);
transform: translateY(-3px);
}
.contact-card:hover::before {
width: 100%;
}
.contact-card-icon {
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--bi-line);
color: var(--bi-glow);
font-size: 18px;
margin-bottom: 6px;
}
.contact-card-label {
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--bi-mist);
}
.contact-card-value {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(22px, 2.2vw, 28px);
line-height: 1.2;
letter-spacing: -0.02em;
color: var(--bi-ink);
}
.contact-card-meta {
font-size: 13.5px;
line-height: 1.55;
color: var(--bi-mist);
margin-top: auto;
padding-top: 14px;
border-top: 1px solid var(--bi-line);
}
@media (max-width: 900px) {
.contact-cards {
grid-template-columns: 1fr;
}
}
/* ─── Inline form sections (contact + consultancy pages) ─── */
.inline-form {
background: var(--bi-pure);
border: 1px solid var(--bi-line);
padding: clamp(28px, 4vw, 48px);
display: flex;
flex-direction: column;
gap: 18px;
max-width: 760px;
}
.inline-form .field input,
.inline-form .field select,
.inline-form .field textarea {
background: var(--bi-paper);
color: var(--bi-ink);
border: 1px solid var(--bi-line);
}
.inline-form .field input::placeholder,
.inline-form .field textarea::placeholder {
color: var(--bi-mist);
opacity: 0.7;
}
.inline-form .field-label {
color: var(--bi-mist);
}
.inline-form .field input:focus,
.inline-form .field select:focus,
.inline-form .field textarea:focus {
background: var(--bi-pure);
border-color: var(--bi-ink);
box-shadow: 0 0 0 3px rgba(244, 184, 96, 0.22);
}
/* ─── Contact-form tabs ─── */
.form-tabs {
display: flex;
gap: 0;
border-bottom: 1px solid var(--bi-line);
margin-bottom: 8px;
flex-wrap: wrap;
}
.form-tab {
background: transparent;
border: 0;
padding: 14px 18px;
font-family: var(--font-body);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.04em;
color: var(--bi-mist);
cursor: pointer;
position: relative;
transition: color .3s var(--ease);
}
.form-tab::after {
content: '';
position: absolute;
left: 0;
bottom: -1px;
width: 100%;
height: 2px;
background: var(--bi-glow);
transform: scaleX(0);
transform-origin: left;
transition: transform .35s var(--ease);
}
.form-tab.is-active {
color: var(--bi-ink);
}
.form-tab.is-active::after {
transform: scaleX(1);
}
.form-tab:hover:not(.is-active) {
color: var(--bi-graphite);
}
.form-pane {
display: none;
flex-direction: column;
gap: 18px;
}
.form-pane.is-active {
display: flex;
}
/* ─── Showroom strip (about page) ─── */
.showroom-strip {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 0;
background: var(--bi-ink);
color: var(--bi-paper);
overflow: hidden;
max-width: var(--container);
margin: 0 auto;
min-height: 460px;
}
.showroom-strip-img {
overflow: hidden;
}
.showroom-strip-img img {
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(0.15);
}
.showroom-strip-body {
padding: clamp(36px, 5vw, 64px);
display: flex;
flex-direction: column;
gap: 18px;
justify-content: center;
}
.showroom-strip-body .eyebrow {
color: var(--bi-glow);
margin-bottom: 4px;
}
.showroom-strip-body h2 {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(28px, 3.4vw, 44px);
line-height: 1.05;
letter-spacing: -0.025em;
color: var(--bi-paper);
margin-bottom: 12px;
}
.showroom-strip-body h2 em {
font-style: italic;
font-weight: 300;
color: var(--bi-glow);
}
.showroom-strip-body p {
font-size: 15px;
line-height: 1.65;
color: rgba(250, 250, 247, 0.78);
max-width: 42ch;
}
.showroom-strip-meta {
display: flex;
flex-direction: column;
gap: 8px;
font-size: 14px;
color: rgba(250, 250, 247, 0.85);
padding: 18px 0;
border-top: 1px solid rgba(250, 250, 247, 0.14);
border-bottom: 1px solid rgba(250, 250, 247, 0.14);
}
.showroom-strip-meta strong {
color: var(--bi-glow);
font-weight: 500;
letter-spacing: 0.04em;
font-size: 11px;
text-transform: uppercase;
}
.showroom-strip-cta {
display: flex;
gap: 18px;
flex-wrap: wrap;
align-items: center;
}
@media (max-width: 900px) {
.showroom-strip {
grid-template-columns: 1fr;
}
.showroom-strip-img {
aspect-ratio: 16 / 10;
}
}
/* ─── Bottom CTA block ─── */
.bottom-cta {
padding: clamp(72px, 10vw, 120px) var(--gutter);
background: var(--bi-paper);
text-align: center;
border-top: 1px solid var(--bi-line);
}
.bottom-cta-inner {
max-width: 720px;
margin: 0 auto;
}
.bottom-cta .eyebrow {
margin: 0 auto 24px;
justify-content: center;
}
.bottom-cta .eyebrow::before {
background: var(--bi-glow);
}
.bottom-cta h2 {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(32px, 5vw, 64px);
line-height: 1.04;
letter-spacing: -0.028em;
color: var(--bi-ink);
margin-bottom: 28px;
}
.bottom-cta h2 em {
font-style: italic;
font-weight: 300;
color: var(--bi-glow);
}
.bottom-cta-actions {
display: flex;
gap: 24px;
justify-content: center;
flex-wrap: wrap;
align-items: center;
}
/* ─── Map block (contact + about) ─── */
.map-block {
width: 100%;
aspect-ratio: 16 / 7;
background: var(--bi-ink);
overflow: hidden;
margin-top: clamp(40px, 6vw, 64px);
}
.map-block iframe {
width: 100%;
height: 100%;
border: 0;
filter: grayscale(0.35) contrast(1.05);
}
/* ─── Trust pill (used on consultancy page) ─── */
.trust-pill {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 12px 22px;
background: var(--bi-pure);
border: 1px solid var(--bi-glow);
color: var(--bi-graphite);
font-size: 14px;
line-height: 1.5;
}
.trust-pill strong {
font-family: var(--font-display);
font-weight: 500;
color: var(--bi-ink);
}
/* ============================================================
ACCESSIBILITY: reduced motion
============================================================ */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.hero-bg img {
animation: none;
}
.hero-scroll-line::after {
animation: none;
}
}
/* ============================================================
Project Gallery (filter chips + image/video cards)
============================================================ */
.gallery-filter {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: clamp(28px, 3vw, 40px);
}
.gallery-chip {
appearance: none;
border: 1px solid var(--bi-line);
background: var(--bi-pure);
color: var(--bi-ink);
font-family: var(--font-body);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.01em;
padding: 10px 18px;
cursor: pointer;
transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.gallery-chip:hover {
border-color: var(--bi-ink);
}
.gallery-chip.is-active {
background: var(--bi-ink);
color: var(--bi-paper);
border-color: var(--bi-ink);
}
.gallery-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(18px, 2.2vw, 28px);
}
.gallery-card {
background: var(--bi-pure);
border: 1px solid var(--bi-line);
display: flex;
flex-direction: column;
transition: border-color .35s var(--ease), transform .35s var(--ease);
}
.gallery-card.is-hidden {
display: none;
}
.gallery-card:hover {
border-color: var(--bi-ink);
transform: translateY(-3px);
}
.gallery-card-media {
position: relative;
aspect-ratio: 4 / 3;
overflow: hidden;
margin: 0;
background: var(--bi-mist-bg, #ececec);
}
.gallery-card-media img,
.gallery-card-media iframe,
.gallery-card-media video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border: 0;
transition: transform .6s var(--ease);
}
.gallery-card:hover .gallery-card-media img {
transform: scale(1.04);
}
.gallery-card-play {
position: absolute;
inset: 0;
margin: auto;
width: 64px;
height: 64px;
border: 0;
background: rgba(10, 10, 10, 0.75);
color: var(--bi-paper);
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
cursor: pointer;
transition: background .25s var(--ease), transform .25s var(--ease);
}
.gallery-card-play:hover {
background: var(--bi-glow);
color: var(--bi-ink);
transform: scale(1.05);
}
.gallery-card-play i {
margin-left: 3px;
}
.gallery-card-badge {
position: absolute;
top: 14px;
left: 14px;
background: rgba(10, 10, 10, 0.85);
color: var(--bi-paper);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 6px 10px;
display: inline-flex;
align-items: center;
gap: 6px;
}
/* Second badge — when a project also has a walkthrough video. Sits in the
top-right opposite the photo-count badge in the top-left. Gold-tinted so
it reads as the "more" indicator. */
.gallery-card-badge--video {
left: auto;
right: 14px;
background: var(--bi-glow, #c89a3c);
color: var(--bi-ink);
}
.gallery-card-badge--video i {
font-size: 9px;
}
.gallery-card-body {
padding: 22px 22px 26px;
display: flex;
flex-direction: column;
gap: 8px;
}
.gallery-card-meta {
font-size: 11.5px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--bi-mist);
}
.gallery-card-title {
font-family: var(--font-display);
font-weight: 400;
font-size: 22px;
line-height: 1.2;
color: var(--bi-ink);
letter-spacing: -0.018em;
margin: 0;
}
.gallery-card-desc {
font-size: 14px;
line-height: 1.6;
color: var(--bi-mist);
margin: 4px 0 0;
}
.gallery-empty {
text-align: center;
font-size: 14.5px;
color: var(--bi-mist);
padding: 48px 16px;
}
.gallery-empty a {
color: var(--bi-ink);
text-decoration: underline;
text-underline-offset: 3px;
}
/* Card-wide link wrapper (for image-only cards that link to a project page) */
.gallery-card-link {
display: flex;
flex-direction: column;
height: 100%;
color: inherit;
text-decoration: none;
}
/* Footnote below the gallery grid (for the "Showing X of many" copy) */
.gallery-footnote {
margin-top: 32px;
text-align: center;
font-size: 14px;
line-height: 1.7;
color: var(--bi-mist);
}
.gallery-footnote-link {
color: var(--bi-ink);
border-bottom: 1px solid var(--bi-glow, #c89a3c);
padding-bottom: 2px;
margin-left: 4px;
text-decoration: none;
white-space: nowrap;
}
.gallery-footnote-link:hover {
color: var(--bi-glow, #c89a3c);
}
@media (max-width: 1000px) {
.gallery-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
.gallery-grid {
grid-template-columns: 1fr;
}
.gallery-card-play {
width: 56px;
height: 56px;
font-size: 18px;
}
.gallery-chip {
padding: 8px 14px;
font-size: 12.5px;
}
}
/* ============================================================
Project detail page — hero split + masonry + lightbox.
Used by project-mera-money.php / project-gls-university.php
via components/project-detail.php.
============================================================ */
.project-hero {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 40px;
align-items: start;
}
.project-hero-img {
position: relative;
margin: 0;
aspect-ratio: 4 / 3;
overflow: hidden;
background: var(--bi-mist-bg, #ececec);
cursor: zoom-in;
border: 1px solid var(--bi-line);
}
.project-hero-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .6s var(--ease);
}
.project-hero-img:hover img {
transform: scale(1.03);
}
.project-hero-img-zoom {
position: absolute;
right: 18px;
bottom: 18px;
width: 44px;
height: 44px;
background: rgba(10, 10, 10, 0.78);
color: var(--bi-paper);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
transition: background .25s var(--ease), transform .25s var(--ease);
}
.project-hero-img:hover .project-hero-img-zoom {
background: var(--bi-glow, #c89a3c);
color: var(--bi-ink);
transform: scale(1.06);
}
/* Video hero — used when the project folder contains an .mp4/.webm/.mov.
Shows the cover image as the poster + a centered gold play button overlay
until the user clicks. After play the overlay hides and native controls
appear. */
.project-hero-img--video {
cursor: pointer;
}
.project-hero-img--video video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
background: var(--bi-mist-bg, #ececec);
}
.project-hero-video-play {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background: linear-gradient(180deg, rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0.45));
border: 0;
color: var(--bi-paper);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
cursor: pointer;
transition: background .25s var(--ease);
}
.project-hero-img--video:hover .project-hero-video-play {
background: linear-gradient(180deg, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.55));
}
.project-hero-video-play-icon {
width: 80px;
height: 80px;
border-radius: 50%;
background: var(--bi-glow, #c89a3c);
color: var(--bi-ink);
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
box-shadow:
0 0 0 6px rgba(244, 184, 96, 0.22),
0 8px 24px -10px rgba(0, 0, 0, 0.40);
transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.project-hero-video-play-icon i {
margin-left: 4px;
/* visually centre the play triangle */
}
.project-hero-img--video:hover .project-hero-video-play-icon {
transform: scale(1.06);
box-shadow:
0 0 0 10px rgba(244, 184, 96, 0.26),
0 12px 28px -10px rgba(0, 0, 0, 0.50);
}
.project-hero-video-play-label {
font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--bi-paper);
}
/* After the user hits play, hide the overlay and let native controls drive. */
.project-hero-img--video.is-playing .project-hero-video-play {
display: none;
}
.project-hero-img--video.is-playing {
cursor: default;
}
/* Walkthrough indicator in the meta sidebar: "n photos · walkthrough video" */
.project-hero-count {
flex-wrap: wrap;
}
.project-hero-count-sep {
color: rgba(10, 10, 10, 0.30);
padding: 0 2px;
}
.project-hero-count .fa-circle-play {
color: var(--bi-glow, #c89a3c);
font-size: 14px;
}
@media (max-width: 600px) {
.project-hero-video-play-icon {
width: 64px;
height: 64px;
font-size: 20px;
}
.project-hero-video-play-label {
font-size: 10px;
letter-spacing: 0.20em;
}
}
.project-hero-meta {
padding-top: 6px;
}
.project-hero-meta .eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
}
.project-hero-title {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(28px, 3vw, 38px);
line-height: 1.15;
letter-spacing: -0.02em;
color: var(--bi-ink);
margin: 12px 0 18px;
}
.project-hero-brief {
font-size: 15.5px;
line-height: 1.75;
color: var(--bi-mist);
margin: 0 0 28px;
}
.project-hero-fixtures {
padding: 22px;
background: var(--bi-paper, #f6f5ee);
border: 1px solid var(--bi-line);
margin-bottom: 22px;
}
.project-hero-fixtures-label {
font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
font-size: 11px;
letter-spacing: 0.10em;
text-transform: uppercase;
color: rgba(10, 10, 10, 0.55);
margin: 0 0 12px;
}
.project-hero-fixtures ul {
list-style: none;
margin: 0;
padding: 0;
}
.project-hero-fixtures li {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 6px 0;
font-size: 14px;
line-height: 1.5;
color: var(--bi-ink);
}
.project-hero-fixtures li i {
color: var(--bi-glow, #c89a3c);
font-size: 14px;
margin-top: 3px;
flex: none;
}
.project-hero-count {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0;
font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
font-size: 12px;
letter-spacing: 0.08em;
color: rgba(10, 10, 10, 0.55);
}
.project-hero-count i {
color: var(--bi-glow, #c89a3c);
font-size: 14px;
}
@media (max-width: 900px) {
.project-hero {
grid-template-columns: 1fr;
gap: 24px;
}
}
/* Masonry grid for the project's full image set */
.project-masonry {
column-count: 3;
column-gap: 18px;
margin-top: 40px;
}
.project-masonry-item {
break-inside: avoid;
position: relative;
margin: 0 0 18px;
cursor: zoom-in;
overflow: hidden;
background: var(--bi-mist-bg, #ececec);
border: 1px solid var(--bi-line);
transition: border-color .25s var(--ease);
}
.project-masonry-item:hover {
border-color: var(--bi-ink);
}
.project-masonry-item img {
display: block;
width: 100%;
height: auto;
transition: transform .6s var(--ease);
}
.project-masonry-item:hover img {
transform: scale(1.03);
}
.project-masonry-num {
position: absolute;
top: 12px;
left: 12px;
background: rgba(10, 10, 10, 0.82);
color: var(--bi-paper);
font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
font-size: 10.5px;
letter-spacing: 0.10em;
padding: 5px 9px;
}
@media (max-width: 900px) {
.project-masonry {
column-count: 2;
column-gap: 14px;
}
.project-masonry-item {
margin-bottom: 14px;
}
}
@media (max-width: 560px) {
.project-masonry {
column-count: 1;
}
}
/* Fullscreen lightbox viewer (vanilla JS — see component) */
.project-lightbox {
position: fixed;
inset: 0;
z-index: 9999;
background: rgba(10, 10, 10, 0.96);
display: flex;
align-items: center;
justify-content: center;
padding: 56px 80px;
}
.project-lightbox[hidden] {
display: none;
}
.project-lightbox-stage {
position: relative;
max-width: 100%;
max-height: 100%;
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
}
.project-lightbox-stage img {
max-width: 100%;
max-height: calc(100vh - 140px);
height: auto;
width: auto;
object-fit: contain;
display: block;
box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.6);
}
.project-lightbox-caption {
font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
font-size: 12px;
letter-spacing: 0.10em;
color: rgba(246, 245, 238, 0.7);
text-align: center;
}
.project-lightbox-close,
.project-lightbox-arrow {
position: absolute;
background: transparent;
border: 1px solid rgba(246, 245, 238, 0.25);
color: rgba(246, 245, 238, 0.85);
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
cursor: pointer;
transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.project-lightbox-close {
top: 22px;
right: 22px;
}
.project-lightbox-arrow--prev {
left: 22px;
top: 50%;
transform: translateY(-50%);
}
.project-lightbox-arrow--next {
right: 22px;
top: 50%;
transform: translateY(-50%);
}
.project-lightbox-close:hover,
.project-lightbox-arrow:hover {
background: var(--bi-glow, #c89a3c);
color: var(--bi-ink);
border-color: var(--bi-glow, #c89a3c);
}
.project-lightbox-arrow--prev:hover {
transform: translateY(-50%) translateX(-2px);
}
.project-lightbox-arrow--next:hover {
transform: translateY(-50%) translateX(2px);
}
@media (max-width: 600px) {
.project-lightbox {
padding: 64px 12px 80px;
}
.project-lightbox-stage img {
max-height: calc(100vh - 180px);
}
.project-lightbox-arrow--prev {
left: 12px;
}
.project-lightbox-arrow--next {
right: 12px;
}
.project-lightbox-close {
top: 12px;
right: 12px;
}
}
/* ============================================================
Brand index (Brands page) + Brand detail hero
============================================================ */
.brand-index {
list-style: none;
margin: clamp(36px, 4vw, 56px) 0 0;
padding: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(20px, 2.4vw, 32px);
}
.brand-index-card {
background: var(--bi-pure);
border: 1px solid var(--bi-line);
display: flex;
flex-direction: column;
transition: border-color .35s var(--ease), transform .35s var(--ease);
}
.brand-index-card:hover {
border-color: var(--bi-ink);
transform: translateY(-3px);
}
.brand-index-link-wrap {
display: flex;
flex-direction: column;
height: 100%;
color: inherit;
}
.brand-index-image {
position: relative;
aspect-ratio: 16 / 10;
overflow: hidden;
margin: 0;
background: var(--bi-paper);
}
.brand-index-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .6s var(--ease);
}
.brand-index-card:hover .brand-index-image img {
transform: scale(1.04);
}
.brand-index-badge {
position: absolute;
top: 14px;
left: 14px;
background: rgba(10, 10, 10, 0.85);
color: var(--bi-paper);
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 6px 10px;
}
.brand-index-badge--flagship {
background: var(--bi-glow);
color: var(--bi-ink);
}
.brand-index-body {
padding: 24px 24px 26px;
display: flex;
flex-direction: column;
gap: 10px;
flex: 1;
}
.brand-index-logo {
height: 42px;
display: flex;
align-items: center;
justify-content: flex-start;
margin-bottom: 2px;
}
.brand-index-logo img {
max-height: 100%;
max-width: 140px;
width: auto;
height: auto;
object-fit: contain;
}
.brand-index-name {
font-family: var(--font-display);
font-weight: 400;
font-size: 24px;
line-height: 1.15;
color: var(--bi-ink);
letter-spacing: -0.02em;
margin: 0;
}
.brand-index-desc {
font-size: 14px;
line-height: 1.6;
color: var(--bi-mist);
margin: 0;
}
.brand-index-tags {
list-style: none;
margin: 6px 0 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.brand-index-tags li {
font-size: 11px;
font-weight: 500;
letter-spacing: 0.04em;
color: var(--bi-ink);
padding: 5px 10px;
border: 1px solid var(--bi-line);
background: var(--bi-paper);
}
.brand-index-cta {
margin-top: auto;
padding-top: 16px;
font-size: 13px;
font-weight: 500;
letter-spacing: 0.04em;
color: var(--bi-ink);
border-top: 1px solid var(--bi-line);
transition: color .25s var(--ease);
}
.brand-index-card:hover .brand-index-cta {
color: var(--bi-glow);
}
/* Brand detail hero */
.brand-hero {
padding: clamp(60px, 7vw, 96px) var(--gutter);
background: var(--bi-paper);
border-bottom: 1px solid var(--bi-line);
}
.brand-hero-inner {
max-width: var(--wrap);
margin: 0 auto;
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: clamp(40px, 5vw, 80px);
align-items: center;
}
.brand-hero-body {
display: flex;
flex-direction: column;
gap: 20px;
}
.brand-hero-logo {
height: 80px;
display: flex;
align-items: center;
justify-content: flex-start;
}
.brand-hero-logo img {
max-height: 100%;
max-width: 240px;
height: auto;
width: auto;
object-fit: contain;
}
.brand-hero-badge {
font-size: 11px;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--bi-glow);
align-self: flex-start;
padding: 6px 12px;
border: 1px solid var(--bi-glow);
}
.brand-hero-title {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(32px, 4.2vw, 52px);
line-height: 1.05;
color: var(--bi-ink);
letter-spacing: -0.028em;
margin: 0;
}
.brand-hero-title em {
font-style: italic;
font-weight: 300;
color: var(--bi-glow);
}
.brand-hero-lede {
font-size: 17px;
line-height: 1.65;
color: var(--bi-mist);
max-width: 56ch;
margin: 0;
}
.brand-hero-actions {
display: flex;
gap: 14px;
flex-wrap: wrap;
margin-top: 8px;
}
.brand-hero-img {
aspect-ratio: 4 / 5;
overflow: hidden;
margin: 0;
}
.brand-hero-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
@media (max-width: 1000px) {
.brand-index {
grid-template-columns: repeat(2, 1fr);
}
.brand-hero-inner {
grid-template-columns: 1fr;
}
.brand-hero-img {
order: -1;
aspect-ratio: 16 / 10;
}
}
@media (max-width: 560px) {
.brand-index {
grid-template-columns: 1fr;
}
}
/* ============================================================
Cert cards + Standards grid (Certifications page)
============================================================ */
.cert-grid {
list-style: none;
margin: clamp(36px, 4vw, 56px) 0 0;
padding: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(18px, 2.2vw, 28px);
}
.cert-card {
background: var(--bi-pure);
border: 1px solid var(--bi-line);
padding: 28px 24px 30px;
display: flex;
flex-direction: column;
gap: 14px;
transition: border-color .35s var(--ease), transform .35s var(--ease);
}
.cert-card:hover {
border-color: var(--bi-ink);
transform: translateY(-3px);
}
.cert-card--featured {
grid-column: span 3;
background: var(--bi-paper);
border-color: var(--bi-ink);
flex-direction: row;
align-items: center;
gap: 32px;
padding: 32px 36px;
}
.cert-card-logo {
height: 56px;
display: flex;
align-items: center;
justify-content: flex-start;
}
.cert-card-logo img {
max-height: 100%;
max-width: 160px;
width: auto;
height: auto;
object-fit: contain;
}
.cert-card--featured .cert-card-logo {
flex: 0 0 200px;
height: 80px;
}
.cert-card--featured .cert-card-logo img {
max-width: 200px;
max-height: 80px;
}
.cert-card-status {
font-size: 11px;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--bi-glow);
align-self: flex-start;
padding: 5px 10px;
border: 1px solid var(--bi-glow);
}
.cert-card-title {
font-family: var(--font-display);
font-weight: 400;
font-size: 20px;
line-height: 1.2;
color: var(--bi-ink);
letter-spacing: -0.018em;
margin: 0;
}
.cert-card-meta {
font-size: 14px;
line-height: 1.6;
color: var(--bi-mist);
margin: 0;
}
.cert-card--featured .cert-card-title {
font-size: 26px;
}
.cert-card--featured .cert-card-meta {
font-size: 15px;
}
.standards-grid {
list-style: none;
margin: clamp(36px, 4vw, 56px) 0 0;
padding: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(16px, 2vw, 24px);
}
.standard {
background: var(--bi-pure);
border: 1px solid var(--bi-line);
padding: 26px 22px 28px;
display: flex;
flex-direction: column;
gap: 12px;
transition: border-color .35s var(--ease);
}
.standard:hover {
border-color: var(--bi-ink);
}
.standard-icon {
font-size: 28px;
color: var(--bi-glow);
line-height: 1;
}
.standard-title {
font-family: var(--font-display);
font-weight: 400;
font-size: 18px;
line-height: 1.2;
color: var(--bi-ink);
letter-spacing: -0.015em;
margin: 0;
}
.standard-desc {
font-size: 13.5px;
line-height: 1.6;
color: var(--bi-mist);
margin: 0;
}
@media (max-width: 900px) {
.cert-grid,
.standards-grid {
grid-template-columns: repeat(2, 1fr);
}
.cert-card--featured {
grid-column: span 2;
flex-direction: column;
align-items: flex-start;
gap: 16px;
padding: 28px 26px;
}
.cert-card--featured .cert-card-logo {
flex: none;
height: 60px;
}
}
@media (max-width: 560px) {
.cert-grid,
.standards-grid {
grid-template-columns: 1fr;
}
.cert-card--featured {
grid-column: 1;
}
}
/* ============================================================
Trust strip (About page intro — MSME / IIID / IIMM / BNI chips)
============================================================ */
.trust-strip {
list-style: none;
margin: 28px 0 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.trust-strip li {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
border: 1px solid rgba(10, 10, 10, 0.10);
border-radius: 999px;
background: rgba(246, 245, 238, 0.7);
font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
font-size: 0.78rem;
letter-spacing: 0.04em;
color: var(--bi-ink);
}
.trust-strip li i {
color: var(--bi-glow, #c89a3c);
font-size: 0.95rem;
}
.trust-strip li strong {
font-weight: 600;
color: var(--bi-ink);
margin-right: 2px;
padding-right: 10px;
border-right: 1px solid rgba(10, 10, 10, 0.12);
}
/* ============================================================
Approach (USP) — 4-step grid on the About page
============================================================ */
.approach-grid {
list-style: none;
margin: 40px 0 0;
padding: 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 22px;
counter-reset: approach;
}
.approach-step {
position: relative;
padding: 32px 24px 28px;
background: var(--bi-paper, #f6f5ee);
border: 1px solid rgba(10, 10, 10, 0.08);
border-radius: 8px;
overflow: hidden;
}
.approach-step::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 3px;
background: linear-gradient(90deg, var(--bi-glow, #c89a3c), transparent);
}
.approach-num {
display: block;
font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
font-size: 0.78rem;
letter-spacing: 0.10em;
color: rgba(10, 10, 10, 0.45);
margin-bottom: 18px;
}
.approach-icon {
display: block;
font-size: 1.6rem;
color: var(--bi-ink);
margin-bottom: 14px;
}
.approach-title {
font-family: "Fraunces", serif;
font-weight: 500;
font-size: 1.15rem;
margin: 0 0 8px;
color: var(--bi-ink);
}
.approach-desc {
margin: 0;
font-size: 0.92rem;
line-height: 1.55;
color: rgba(10, 10, 10, 0.72);
}
@media (max-width: 960px) {
.approach-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 560px) {
.approach-grid {
grid-template-columns: 1fr;
}
}
/* ============================================================
Segments grid (About page — 9 segments served)
============================================================ */
.segment-grid {
list-style: none;
margin: 40px 0 0;
padding: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
.segment-card {
padding: 26px 22px;
background: #fff;
border: 1px solid rgba(10, 10, 10, 0.08);
border-radius: 6px;
transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.segment-card:hover {
border-color: rgba(200, 154, 60, 0.45);
transform: translateY(-2px);
}
.segment-icon {
display: block;
font-size: 1.5rem;
color: var(--bi-glow, #c89a3c);
margin-bottom: 14px;
}
.segment-card h4 {
font-family: "Fraunces", serif;
font-weight: 500;
font-size: 1.1rem;
margin: 0 0 6px;
color: var(--bi-ink);
}
.segment-card p {
margin: 0;
font-size: 0.88rem;
line-height: 1.5;
color: rgba(10, 10, 10, 0.7);
}
@media (max-width: 960px) {
.segment-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 560px) {
.segment-grid {
grid-template-columns: 1fr;
}
}
/* ============================================================
Notable clients — sector groups (About + Project Gallery)
============================================================ */
.clients-sectors {
margin-top: 40px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px 36px;
}
.clients-sector {
padding-top: 18px;
border-top: 1px solid rgba(10, 10, 10, 0.12);
}
.clients-sector-label {
display: flex;
align-items: center;
gap: 10px;
font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
font-size: 0.72rem;
letter-spacing: 0.10em;
text-transform: uppercase;
color: rgba(10, 10, 10, 0.55);
margin: 0 0 14px;
}
.clients-sector-label i {
color: var(--bi-glow, #c89a3c);
font-size: 0.95rem;
}
.clients-list {
list-style: none;
margin: 0;
padding: 0;
}
.clients-list li {
font-family: "Fraunces", serif;
font-weight: 400;
font-size: 1.05rem;
color: var(--bi-ink);
padding: 6px 0;
border-bottom: 1px dotted rgba(10, 10, 10, 0.10);
}
.clients-list li:last-child {
border-bottom: 0;
}
@media (max-width: 960px) {
.clients-sectors {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 560px) {
.clients-sectors {
grid-template-columns: 1fr;
}
}
.clients-slider-band {
padding: 100px 0;
overflow: hidden;
}
.clients-slider-band--bare {
padding: 0;
background: transparent;
}
.clients-slider-band--bare .clients-slider-inner {
padding: 0;
}
.clients-slider-band--bare .clients-slider {
margin-top: 32px;
}
.clients-slider-band--paper {
/* background:
linear-gradient(to right, rgba(10, 10, 10, 0.04) 1px, transparent 1px),
linear-gradient(to bottom, rgba(10, 10, 10, 0.04) 1px, transparent 1px),
var(--bi-paper, #f6f5ee);
background-size: 32px 32px, 32px 32px, auto; */
}
.clients-slider-band--white {
background: #fff;
}
.clients-slider-band--dark {
background: var(--bi-ink, #0a0a0a);
color: var(--bi-paper, #f6f5ee);
}
.clients-slider-band--dark .section-title,
.clients-slider-band--dark .eyebrow,
.clients-slider-band--dark .section-lede {
color: var(--bi-paper, #f6f5ee);
}
.clients-slider-inner {
max-width: 1240px;
margin: 0 auto;
padding: 0 32px;
}
.clients-slider {
margin: 48px -32px 0;
padding: 4px 0;
overflow: hidden;
-webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}
.clients-slider-track {
display: flex;
align-items: center;
gap: 56px;
width: max-content;
animation: clients-marquee 50s linear infinite;
will-change: transform;
}
.clients-slider:hover .clients-slider-track,
.clients-slider:focus-within .clients-slider-track {
animation-play-state: paused;
}
@keyframes clients-marquee {
from {
transform: translateX(0);
}
to {
transform: translateX(-50%);
}
}
@media (prefers-reduced-motion: reduce) {
.clients-slider-track {
animation: none;
flex-wrap: wrap;
justify-content: center;
width: auto;
gap: 16px 22px;
}
.clients-slider {
-webkit-mask-image: none;
mask-image: none;
margin: 48px 0 0;
}
}
.clients-slider-item {
flex: none;
height: 72px;
min-width: 120px;
display: flex;
align-items: center;
justify-content: center;
padding: 0 8px;
}
.clients-slider-logo {
max-height: 64px;
max-width: 180px;
width: auto;
height: auto;
object-fit: contain;
filter: grayscale(0.55) opacity(0.85);
transition: filter .35s var(--ease), transform .35s var(--ease);
}
.clients-slider:hover .clients-slider-logo {
filter: grayscale(0) opacity(1);
}
/* Text fallback chip — shown when a logo is not yet in /clients/ */
.clients-slider-name {
display: inline-flex;
align-items: center;
padding: 14px 22px;
background: #fff;
border: 1px solid rgba(10, 10, 10, 0.10);
border-radius: 999px;
font-family: "Fraunces", serif;
font-size: 1rem;
line-height: 1;
color: var(--bi-ink);
white-space: nowrap;
box-shadow: 0 4px 14px -10px rgba(10, 10, 10, 0.18);
}
.clients-slider-band--dark .clients-slider-name {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(255, 255, 255, 0.15);
color: var(--bi-paper, #f6f5ee);
}
.clients-slider-foot {
margin: 40px auto 0;
max-width: 720px;
text-align: center;
font-size: 0.95rem;
color: rgba(10, 10, 10, 0.7);
line-height: 1.6;
}
.clients-slider-band--dark .clients-slider-foot {
color: rgba(255, 255, 255, 0.7);
}
.clients-slider-foot-link {
color: inherit;
border-bottom: 1px solid var(--bi-glow, #c89a3c);
padding-bottom: 2px;
margin-left: 6px;
text-decoration: none;
white-space: nowrap;
}
.clients-slider-foot-link:hover {
color: var(--bi-glow, #c89a3c);
}
@media (max-width: 720px) {
.clients-slider-band {
padding: 72px 0;
}
.clients-slider-track {
gap: 36px;
animation-duration: 38s;
}
.clients-slider-item {
height: 56px;
min-width: 100px;
}
.clients-slider-logo {
max-height: 48px;
max-width: 140px;
}
.clients-slider-name {
padding: 10px 16px;
font-size: 0.9rem;
}
}
/* ============================================================
Memberships grid (About + Certifications pages)
============================================================ */
.membership-grid {
list-style: none;
margin: 40px 0 0;
padding: 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
.membership-card {
padding: 28px 24px;
background: #fff;
border: 1px solid rgba(10, 10, 10, 0.10);
border-radius: 8px;
text-align: left;
transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.membership-card:hover {
border-color: rgba(200, 154, 60, 0.45);
transform: translateY(-2px);
box-shadow: 0 12px 28px -18px rgba(10, 10, 10, 0.22);
}
.membership-logo-wrap {
display: flex;
align-items: center;
justify-content: flex-start;
height: 60px;
margin-bottom: 18px;
}
.membership-logo {
max-height: 100%;
max-width: 140px;
width: auto;
height: auto;
object-fit: contain;
object-position: left center;
}
.membership-card h4 {
font-family: "Fraunces", serif;
font-weight: 500;
font-size: 1.05rem;
margin: 0 0 8px;
color: var(--bi-ink);
line-height: 1.3;
}
.membership-card p {
margin: 0;
font-size: 0.88rem;
line-height: 1.55;
color: rgba(10, 10, 10, 0.7);
}
@media (max-width: 960px) {
.membership-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 560px) {
.membership-grid {
grid-template-columns: 1fr;
}
}
/* ============================================================
Additional brand partners (brands.php — Cerco + Esylux block)
============================================================ */
.additional-brands {
list-style: none;
margin: 40px 0 0;
padding: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 22px;
}
.additional-brand {
padding: 28px 26px;
background: var(--bi-paper, #f6f5ee);
border: 1px solid rgba(10, 10, 10, 0.08);
border-radius: 8px;
}
.additional-brand-head {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 14px;
}
.additional-brand-head h4 {
font-family: "Fraunces", serif;
font-weight: 500;
font-size: 1.4rem;
margin: 0;
color: var(--bi-ink);
}
.additional-brand-tag {
padding: 4px 10px;
font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
font-size: 0.72rem;
letter-spacing: 0.08em;
color: var(--bi-ink);
background: rgba(200, 154, 60, 0.18);
border-radius: 4px;
}
.additional-brand p {
margin: 0;
font-size: 0.94rem;
line-height: 1.6;
color: rgba(10, 10, 10, 0.72);
}
@media (max-width: 720px) {
.additional-brands {
grid-template-columns: 1fr;
}
}
/* ============================================================
Team grid (Our Team page)
============================================================ */
.team-grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(20px, 2.4vw, 32px);
}
.team-card {
background: var(--bi-pure);
border: 1px solid var(--bi-line);
display: flex;
flex-direction: column;
transition: border-color .35s var(--ease), transform .35s var(--ease);
}
.team-card:hover {
border-color: var(--bi-ink);
transform: translateY(-3px);
}
.team-card-photo {
position: relative;
aspect-ratio: 4 / 5;
overflow: hidden;
margin: 0;
background: linear-gradient(135deg, #ebebe6 0%, #d9d9d3 100%);
}
.team-card-photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .6s var(--ease);
}
.team-card:hover .team-card-photo img {
transform: scale(1.04);
}
.team-card-photo--empty::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at 50% 38%, rgba(10, 10, 10, 0.18) 0 22%, transparent 23%),
radial-gradient(ellipse at 50% 78%, rgba(10, 10, 10, 0.18) 0 32%, transparent 33%);
}
.team-card-body {
padding: 22px 22px 26px;
display: flex;
flex-direction: column;
gap: 6px;
}
.team-card-role {
font-size: 11.5px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--bi-mist);
margin: 0;
}
.team-card-name {
font-family: var(--font-display);
font-weight: 400;
font-size: 22px;
line-height: 1.2;
color: var(--bi-ink);
letter-spacing: -0.018em;
margin: 2px 0 6px;
}
.team-card-bio {
font-size: 14px;
line-height: 1.6;
color: var(--bi-mist);
margin: 0;
}
@media (max-width: 900px) {
.team-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 560px) {
.team-grid {
grid-template-columns: 1fr;
}
}
/* ============================================================
Catalogue — filter toolbar, product grid + cards
============================================================ */
.catalog-toolbar {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
flex-wrap: wrap;
margin-bottom: clamp(24px, 3vw, 36px);
}
.catalog-filter {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.catalog-chip {
appearance: none;
border: 1px solid var(--bi-line);
background: var(--bi-pure);
color: var(--bi-ink);
font-family: var(--font-body);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.01em;
padding: 9px 16px;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 7px;
transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.catalog-chip span {
font-size: 11px;
opacity: 0.6;
}
.catalog-chip:hover {
border-color: var(--bi-ink);
}
.catalog-chip.is-active {
background: var(--bi-ink);
color: var(--bi-paper);
border-color: var(--bi-ink);
}
.catalog-count {
font-size: 13px;
color: var(--bi-mist);
letter-spacing: 0.02em;
}
.product-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: clamp(16px, 2vw, 24px);
}
.product-card {
background: var(--bi-pure);
border: 1px solid var(--bi-line);
transition: border-color .35s var(--ease), transform .35s var(--ease);
}
.product-card.is-hidden {
display: none;
}
.product-card:hover {
border-color: var(--bi-ink);
transform: translateY(-3px);
}
.product-card-link {
display: flex;
flex-direction: column;
height: 100%;
color: inherit;
}
.product-card-media {
position: relative;
aspect-ratio: 1 / 1;
overflow: hidden;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
}
.product-card-media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .6s var(--ease);
}
.product-card:hover .product-card-media img {
transform: scale(1.05);
}
.product-card-media--empty::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(circle at 50% 42%, rgba(244, 184, 96, 0.28) 0 16%, transparent 17%),
radial-gradient(circle at 50% 42%, rgba(10, 10, 10, 0.10) 17% 30%, transparent 31%);
}
.product-card-model {
position: absolute;
bottom: 12px;
left: 12px;
background: rgba(10, 10, 10, 0.85);
color: var(--bi-paper);
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.06em;
padding: 5px 9px;
}
.product-card-brand {
position: absolute;
top: 10px;
right: 10px;
background: rgba(255, 255, 255, 0.96);
border: 1px solid var(--bi-line);
height: 26px;
padding: 0 8px;
display: flex;
align-items: center;
justify-content: center;
}
.product-card-brand img {
max-height: 13px;
max-width: 62px;
width: auto;
height: auto;
object-fit: contain;
display: block;
}
.product-card-body {
padding: 18px 18px 20px;
display: flex;
flex-direction: column;
gap: 9px;
flex: 1;
}
.product-card-series {
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--bi-mist);
}
.product-card-name {
font-family: var(--font-display);
font-weight: 400;
font-size: 18px;
line-height: 1.2;
color: var(--bi-ink);
letter-spacing: -0.015em;
margin: 0;
}
.product-card-specs {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 6px 14px;
}
.product-card-specs li {
font-size: 12px;
color: var(--bi-mist);
display: inline-flex;
align-items: center;
gap: 5px;
}
.product-card-specs i {
color: var(--bi-glow);
font-size: 12px;
}
.product-card-foot {
margin-top: auto;
padding-top: 14px;
border-top: 1px solid var(--bi-line);
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 10px;
}
.product-card-price {
font-family: var(--font-display);
font-size: 18px;
color: var(--bi-ink);
display: flex;
flex-direction: column;
line-height: 1.1;
}
.product-card-price small {
font-family: var(--font-body);
font-size: 10px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--bi-mist);
margin-top: 3px;
}
.product-card-cta {
font-size: 12.5px;
font-weight: 500;
letter-spacing: 0.04em;
color: var(--bi-ink);
display: inline-flex;
align-items: center;
gap: 6px;
transition: gap .25s var(--ease);
}
.product-card:hover .product-card-cta {
gap: 10px;
}
.product-card-cta svg {
color: var(--bi-glow);
}
.catalog-empty {
text-align: center;
font-size: 14.5px;
color: var(--bi-mist);
padding: 48px 16px;
}
@media (max-width: 1040px) {
.product-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 760px) {
.product-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 420px) {
.product-grid {
grid-template-columns: 1fr;
}
}
/* Jump-nav + segregated groups (magnetic track category) */
.catalog-jump {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: clamp(32px, 4vw, 52px);
padding-bottom: clamp(20px, 2.5vw, 28px);
border-bottom: 1px solid var(--bi-line);
}
.catalog-jump-chip {
border: 1px solid var(--bi-line);
background: var(--bi-pure);
color: var(--bi-ink);
font-size: 12.5px;
font-weight: 500;
letter-spacing: 0.01em;
padding: 8px 14px;
display: inline-flex;
align-items: center;
gap: 7px;
transition: border-color .25s var(--ease), background .25s var(--ease);
}
.catalog-jump-chip span {
font-size: 11px;
color: var(--bi-mist);
}
.catalog-jump-chip:hover {
border-color: var(--bi-ink);
}
.catalog-group {
margin-bottom: clamp(40px, 5vw, 64px);
scroll-margin-top: 100px;
}
.catalog-group:last-child {
margin-bottom: 0;
}
.catalog-group-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
margin-bottom: clamp(18px, 2vw, 26px);
padding-bottom: 12px;
border-bottom: 1px solid var(--bi-line);
}
.catalog-group-head.is-hidden,
.product-grid.is-hidden {
display: none;
}
.catalog-group-title {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(22px, 2.4vw, 30px);
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--bi-ink);
margin: 0;
}
.catalog-group-count {
font-size: 12.5px;
letter-spacing: 0.04em;
color: var(--bi-mist);
white-space: nowrap;
}
/* Sub-cat info sections (applications, selection guide, standards, FAQs) */
.info-bullet-grid,
.info-feature-grid {
list-style: none;
margin: clamp(28px, 3.5vw, 44px) 0 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 0 28px;
}
.info-bullet-grid li,
.info-feature-grid li {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 14px 0;
border-bottom: 1px solid var(--bi-line);
font-size: 15px;
line-height: 1.55;
color: var(--bi-ink);
}
.info-bullet-grid i,
.info-feature-grid i {
color: var(--bi-glow);
font-size: 15px;
margin-top: 3px;
flex: 0 0 auto;
}
.info-numbered-grid {
list-style: none;
margin: clamp(28px, 3.5vw, 44px) 0 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 18px;
}
.info-numbered-grid li {
background: var(--bi-pure);
border: 1px solid var(--bi-line);
padding: 22px 22px 24px;
display: flex;
gap: 18px;
align-items: flex-start;
transition: border-color .25s var(--ease);
}
.info-numbered-grid li:hover {
border-color: var(--bi-ink);
}
.info-numbered-grid .info-num {
font-family: var(--font-display);
font-size: 26px;
color: var(--bi-glow);
line-height: 1;
letter-spacing: -0.02em;
flex: 0 0 auto;
}
.info-numbered-grid .info-text {
font-size: 14.5px;
line-height: 1.6;
color: var(--bi-ink);
}
/* FAQ accordion (sub-cat pages) */
.info-faq-list {
margin: clamp(28px, 3.5vw, 44px) 0 0;
border-top: 1px solid var(--bi-line);
}
.info-faq {
border-bottom: 1px solid var(--bi-line);
}
.info-faq summary {
list-style: none;
padding: 22px 8px 22px 0;
cursor: pointer;
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(17px, 1.8vw, 21px);
line-height: 1.3;
color: var(--bi-ink);
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
letter-spacing: -0.012em;
}
.info-faq summary::-webkit-details-marker {
display: none;
}
.info-faq-chev {
font-family: var(--font-body);
font-weight: 400;
font-size: 24px;
line-height: 1;
color: var(--bi-glow);
flex: 0 0 auto;
transition: transform .3s var(--ease);
}
/* Wider tap area on phones — gives the +/× chevron more breathing room
inside the FAQ summary so thumbs don't miss-tap on narrow screens. */
@media (max-width: 480px) {
.info-faq summary {
padding: 20px 12px 20px 4px;
}
.info-faq-chev {
font-size: 26px;
padding: 0 4px;
}
}
.info-faq[open] .info-faq-chev {
transform: rotate(45deg);
}
.info-faq p {
padding: 0 8px 24px 0;
margin: 0;
font-size: 15.5px;
line-height: 1.7;
color: var(--bi-graphite, #2c2c2c);
max-width: 72ch;
}
/* Outdoor model grid — compact tiles inside sub-category pages */
.outdoor-model-grid {
list-style: none;
margin: clamp(28px, 3.5vw, 44px) 0 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 14px;
}
.outdoor-model-card {
position: relative;
aspect-ratio: 1 / 1;
background: linear-gradient(150deg, #f3f3ef 0%, #e6e6e0 100%);
border: 1px solid var(--bi-line);
overflow: hidden;
display: flex;
align-items: flex-end;
transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.outdoor-model-card:hover {
border-color: var(--bi-ink);
transform: translateY(-2px);
}
.outdoor-model-card img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.outdoor-model-card--empty::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(circle at 50% 42%, rgba(244, 184, 96, 0.22) 0 18%, transparent 19%),
radial-gradient(circle at 50% 42%, rgba(10, 10, 10, 0.08) 18% 32%, transparent 33%);
}
.outdoor-model-card-link {
position: absolute;
inset: 0;
z-index: 2;
display: flex;
align-items: flex-end;
color: inherit;
text-decoration: none;
cursor: pointer;
}
.outdoor-model-card-link:focus-visible {
outline: 2px solid var(--bi-glow);
outline-offset: -2px;
}
.outdoor-model-code {
position: relative;
z-index: 1;
width: 100%;
padding: 10px 12px;
background: rgba(10, 10, 10, 0.85);
color: var(--bi-paper);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.06em;
text-align: center;
}
/* COB wattage / control chips (product detail) */
.cob-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.cob-chip {
font-size: 13px;
font-weight: 500;
letter-spacing: 0.01em;
color: var(--bi-ink);
background: var(--bi-paper);
border: 1px solid var(--bi-line);
padding: 7px 13px;
}
.cob-chip--ctrl {
background: var(--bi-pure);
color: var(--bi-mist);
font-weight: 400;
}
/* Aronix text fallback when logo image is absent */
.product-card-brand-text,
.product-gallery-brand-text {
font-family: var(--font-body);
font-weight: 700;
letter-spacing: 0.08em;
color: var(--bi-ink);
font-size: 11px;
}
.product-gallery-brand-text {
font-size: 13px;
}
/* ============================================================
Product detail page
============================================================ */
.product-detail {
padding: clamp(40px, 5vw, 72px) var(--gutter);
background: var(--bi-paper);
}
.product-detail-inner {
max-width: var(--wrap);
margin: 0 auto;
}
.product-detail-grid {
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: clamp(32px, 4vw, 64px);
align-items: start;
}
/* Gallery */
.product-gallery {
position: sticky;
top: 110px;
}
.product-gallery-main {
position: relative;
aspect-ratio: 1 / 1;
margin: 0;
overflow: hidden;
border: 1px solid var(--bi-line);
display: flex;
align-items: center;
justify-content: center;
}
.product-gallery-main img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.product-gallery-main--empty::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(circle at 50% 44%, rgba(244, 184, 96, 0.30) 0 14%, transparent 15%),
radial-gradient(circle at 50% 44%, rgba(10, 10, 10, 0.10) 15% 26%, transparent 27%);
}
.product-gallery-tag {
position: absolute;
top: 14px;
left: 14px;
background: var(--bi-ink);
color: var(--bi-paper);
font-size: 11px;
letter-spacing: 0.06em;
padding: 6px 11px;
}
.product-gallery-brand {
position: absolute;
top: 14px;
right: 14px;
background: rgba(255, 255, 255, 0.96);
border: 1px solid var(--bi-line);
height: 32px;
padding: 0 11px;
display: flex;
align-items: center;
justify-content: center;
}
.product-gallery-brand img {
max-height: 16px;
max-width: 84px;
width: auto;
height: auto;
object-fit: contain;
display: block;
}
/* Info column */
.product-info-series {
font-size: 12px;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--bi-glow);
margin: 0 0 8px;
}
.product-info-model {
font-size: 14px;
color: var(--bi-mist);
margin: 0 0 18px;
}
.product-info-model strong {
color: var(--bi-ink);
font-weight: 600;
}
.product-info-price {
display: flex;
align-items: baseline;
gap: 12px;
flex-wrap: wrap;
padding-bottom: 20px;
margin-bottom: 20px;
border-bottom: 1px solid var(--bi-line);
}
.product-info-price-amt {
font-family: var(--font-display);
font-size: 34px;
line-height: 1;
color: var(--bi-ink);
}
.product-info-price-note {
font-size: 12.5px;
letter-spacing: 0.04em;
color: var(--bi-mist);
}
.product-info-h2 {
font-family: var(--bi-serif, "Fraunces", Georgia, serif);
font-size: clamp(20px, 1.9vw, 24px);
line-height: 1.25;
font-weight: 500;
color: var(--bi-ink);
letter-spacing: -0.005em;
margin: 0 0 14px;
}
.product-info-desc {
font-size: 15.5px;
line-height: 1.65;
color: var(--bi-graphite, #2c2c2c);
margin: 0 0 24px;
}
.product-info-highlights {
list-style: none;
margin: 0 0 28px;
padding: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1px;
background: var(--bi-line);
border: 1px solid var(--bi-line);
}
.product-info-highlights li {
background: var(--bi-pure);
padding: 14px 16px;
display: flex;
flex-direction: column;
gap: 3px;
}
.pi-h-label {
font-size: 11px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--bi-mist);
}
.pi-h-val {
font-size: 15px;
color: var(--bi-ink);
font-weight: 500;
}
/* Variants */
.product-variants {
margin-bottom: 26px;
}
.product-variants-label {
font-size: 12px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--bi-mist);
margin: 0 0 12px;
}
.product-variants-options {
display: flex;
flex-direction: column;
gap: 10px;
}
.product-variant {
appearance: none;
background: var(--bi-pure);
border: 1px solid var(--bi-line);
padding: 14px 18px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
font-family: var(--font-body);
transition: border-color .25s var(--ease), background .25s var(--ease);
}
.product-variant:hover {
border-color: var(--bi-ink);
}
.product-variant.is-active {
border-color: var(--bi-ink);
box-shadow: inset 0 0 0 1px var(--bi-ink);
}
.pv-name {
font-size: 14px;
color: var(--bi-ink);
font-weight: 500;
}
.pv-price {
font-family: var(--font-display);
font-size: 18px;
color: var(--bi-ink);
}
/* Actions */
.product-actions {
display: flex;
gap: 14px;
flex-wrap: wrap;
margin-bottom: 24px;
}
.product-actions-wa i {
color: #25D366;
font-size: 16px;
}
/* Trust row */
.product-trust {
list-style: none;
margin: 0;
padding: 20px 0 0;
border-top: 1px solid var(--bi-line);
display: flex;
flex-wrap: wrap;
gap: 10px 22px;
}
.product-trust li {
font-size: 12.5px;
color: var(--bi-mist);
display: inline-flex;
align-items: center;
gap: 8px;
}
.product-trust i {
color: var(--bi-glow);
font-size: 14px;
}
/* Spec table */
.spec-table {
width: 100%;
border-collapse: collapse;
margin-top: clamp(28px, 3.5vw, 44px);
background: var(--bi-pure);
border: 1px solid var(--bi-line);
}
.spec-table th,
.spec-table td {
text-align: left;
padding: 14px 20px;
font-size: 14.5px;
border-bottom: 1px solid var(--bi-line);
vertical-align: top;
/* Allow long unbroken strings (model numbers, ZEN-ANALOG-DIMMER, URLs)
to wrap inside the cell instead of forcing horizontal overflow. */
word-break: break-word;
overflow-wrap: anywhere;
}
.spec-table tr:last-child th,
.spec-table tr:last-child td {
border-bottom: 0;
}
.spec-table th {
width: 32%;
color: var(--bi-mist);
font-weight: 500;
letter-spacing: 0.02em;
background: var(--bi-paper);
}
.spec-table td {
color: var(--bi-ink);
}
.spec-note {
margin-top: 16px;
font-size: 12.5px;
line-height: 1.6;
color: var(--bi-mist);
max-width: 70ch;
}
@media (max-width: 860px) {
.product-detail-grid {
grid-template-columns: 1fr;
}
.product-gallery {
position: static;
}
.product-gallery-main {
max-width: 460px;
}
}
@media (max-width: 480px) {
.product-info-highlights {
grid-template-columns: 1fr;
}
.spec-table th {
width: 42%;
}
/* Tighter padding + smaller type below 480px so long spec values
(controller compatibility text, model lists) have room to breathe
in the 58% value column. */
.spec-table th,
.spec-table td {
padding: 12px 14px;
font-size: 13.5px;
}
}
/* ============================================================
Coming Soon block (Insights placeholder)
============================================================ */
.coming-soon {
max-width: 720px;
margin: 0 auto;
padding: clamp(48px, 6vw, 88px) 24px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 22px;
}
.coming-soon-badge {
font-size: 11px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--bi-glow);
padding: 7px 14px;
border: 1px solid var(--bi-glow);
}
.coming-soon-title {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(32px, 4.2vw, 52px);
line-height: 1.05;
color: var(--bi-ink);
letter-spacing: -0.028em;
margin: 0;
}
.coming-soon-title em {
font-style: italic;
font-weight: 300;
color: var(--bi-glow);
}
.coming-soon-lede {
font-size: 17px;
line-height: 1.65;
color: var(--bi-mist);
max-width: 56ch;
margin: 0;
}
.coming-soon-topics {
list-style: none;
margin: 8px 0 0;
padding: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px;
width: 100%;
max-width: 560px;
}
.coming-soon-topics li {
display: flex;
align-items: center;
gap: 12px;
text-align: left;
padding: 14px 18px;
border: 1px solid var(--bi-line);
background: var(--bi-pure);
font-size: 14px;
color: var(--bi-ink);
}
.coming-soon-topics i {
font-size: 18px;
color: var(--bi-glow);
flex: 0 0 auto;
}
.coming-soon-actions {
margin-top: 12px;
display: flex;
gap: 14px;
flex-wrap: wrap;
justify-content: center;
}
@media (max-width: 560px) {
.coming-soon-topics {
grid-template-columns: 1fr;
}
}
/* ============================================================
Legal content (Privacy, Terms) — long-form prose styling
============================================================ */
.legal-content {
max-width: 72ch;
margin-top: clamp(40px, 5vw, 64px);
color: var(--bi-ink);
font-size: 15.5px;
line-height: 1.75;
}
.legal-content h3 {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(20px, 2vw, 24px);
line-height: 1.2;
letter-spacing: -0.018em;
color: var(--bi-ink);
margin: clamp(36px, 4vw, 48px) 0 14px;
padding-top: clamp(24px, 3vw, 36px);
border-top: 1px solid var(--bi-line);
}
.legal-content h3:first-child {
margin-top: 0;
padding-top: 0;
border-top: 0;
}
.legal-content p {
margin: 0 0 16px;
color: var(--bi-graphite, #2c2c2c);
}
.legal-content p:last-child {
margin-bottom: 0;
}
.legal-content a {
color: var(--bi-ink);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
transition: color .25s var(--ease);
}
.legal-content a:hover {
color: var(--bi-glow);
}
.legal-content ul {
margin: 0 0 18px;
padding-left: 22px;
list-style: disc;
}
.legal-content ul li {
margin-bottom: 8px;
color: var(--bi-graphite, #2c2c2c);
}
.legal-content ul li::marker {
color: var(--bi-glow);
}
.legal-content strong {
color: var(--bi-ink);
font-weight: 600;
}
@media (max-width: 640px) {
.legal-content {
font-size: 15px;
}
.legal-content h3 {
font-size: 19px;
}
}
/* ============================================================
CARD AESTHETICS — gold beam, light sweep, blueprint coming-soon
============================================================ */
/* Numbered cards (Selection Guide) — top gold beam on hover + bottom-left light cone behind the number */
.info-numbered-grid li {
position: relative;
overflow: hidden;
}
.info-numbered-grid li::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, transparent 0%, var(--bi-glow) 30%, var(--bi-glow) 70%, transparent 100%);
opacity: 0;
transform: scaleX(0.4);
transform-origin: center;
transition: opacity .35s var(--ease), transform .5s var(--ease);
pointer-events: none;
}
.info-numbered-grid li:hover::before {
opacity: 1;
transform: scaleX(1);
}
/* Subtle radial backdrop behind the number — reads as a light cone */
.info-numbered-grid .info-num {
position: relative;
}
.info-numbered-grid .info-num::before {
content: "";
position: absolute;
left: -10px;
top: -8px;
width: 50px;
height: 50px;
background: radial-gradient(circle at 40% 60%, rgba(244, 184, 96, 0.18) 0%, rgba(244, 184, 96, 0.06) 35%, transparent 65%);
z-index: -1;
transition: opacity .4s var(--ease);
opacity: 0.85;
}
.info-numbered-grid li:hover .info-num::before {
opacity: 1;
}
/* Feature/bullet rows — left accent that brightens on hover */
.info-feature-grid li i,
.info-bullet-grid li i {
transition: color .25s var(--ease), transform .25s var(--ease);
}
.info-feature-grid li:hover i,
.info-bullet-grid li:hover i {
color: var(--bi-glow);
transform: scale(1.15);
}
/* ============================================================
"What's standard across the range" — specifier-grade cards.
Vertical stack: icon → drafted hairline → text. Drafted top-right
corner mark. Gold beam wipes the bottom on hover. CSS-only —
ships to indoor/outdoor/decorative/controls landings + outdoor
sub-cats + outdoor product pages (≈548 pages).
============================================================ */
.info-feature-grid {
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 20px;
}
.info-feature-grid li {
background: var(--bi-pure);
border: 1px solid var(--bi-line);
border-bottom: 1px solid var(--bi-line);
padding: 30px 26px 28px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 18px;
position: relative;
overflow: hidden;
isolation: isolate;
min-height: 180px;
transition: border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
}
/* Drafted top-right corner mark — architectural notation cue */
.info-feature-grid li::before {
content: "";
position: absolute;
top: 14px;
right: 14px;
width: 16px;
height: 16px;
border-top: 1px solid var(--bi-line);
border-right: 1px solid var(--bi-line);
transition: top .35s var(--ease), right .35s var(--ease), border-color .35s var(--ease), width .35s var(--ease), height .35s var(--ease);
}
/* Bottom gold beam — wipes in from left on hover */
.info-feature-grid li::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, var(--bi-glow) 0%, rgba(244, 184, 96, 0.4) 60%, transparent 100%);
transform: scaleX(0);
transform-origin: left;
transition: transform .5s var(--ease);
}
.info-feature-grid li:hover {
border-color: var(--bi-ink);
transform: translateY(-4px);
box-shadow: 0 18px 40px -20px rgba(10, 10, 10, 0.22);
}
.info-feature-grid li:hover::before {
top: 10px;
right: 10px;
width: 22px;
height: 22px;
border-color: var(--bi-glow);
}
.info-feature-grid li:hover::after {
transform: scaleX(1);
}
/* Icon — sits at top of card. Explicit mask-size pushes past the
viewBox padding so the visible glyph fills more of the 44px box. */
.info-feature-grid li i {
position: static;
transform: none;
width: 44px;
height: 44px;
flex: 0 0 44px;
margin: 0;
color: var(--bi-glow);
background-color: var(--bi-glow);
font-size: 44px;
-webkit-mask-size: 110% 110%;
mask-size: 110% 110%;
-webkit-mask-position: center;
mask-position: center;
}
.info-feature-grid li:hover i {
transform: scale(1.08);
}
/* Text — separated from icon by a hairline rule */
.info-feature-grid li span {
font-size: 15px;
line-height: 1.55;
color: var(--bi-ink);
font-weight: 400;
width: 100%;
padding-top: 18px;
border-top: 1px solid var(--bi-line);
transition: border-top-color .35s var(--ease);
}
.info-feature-grid li:hover span {
border-top-color: var(--bi-glow);
}
/* Product cards — light-sweep on hover */
.product-card .product-card-link {
position: relative;
overflow: hidden;
}
.product-card .product-card-link::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(115deg,
transparent 38%,
rgba(244, 184, 96, 0.07) 50%,
transparent 62%);
opacity: 0;
transform: translateX(-30%);
transition: opacity .35s var(--ease), transform .8s var(--ease);
pointer-events: none;
z-index: 3;
}
.product-card:hover .product-card-link::after {
opacity: 1;
transform: translateX(30%);
}
/* Coming-soon cards — distinct blueprint-paper feel */
.product-card--coming-soon {
background:
repeating-linear-gradient(135deg,
transparent,
transparent 12px,
rgba(10, 10, 10, 0.025) 12px,
rgba(10, 10, 10, 0.025) 13px),
var(--bi-paper);
border-style: dashed;
}
.product-card--coming-soon:hover {
border-color: var(--bi-line);
transform: none;
}
.product-card--coming-soon .product-card-link {
cursor: default;
}
.product-card--coming-soon .product-card-link::after {
display: none;
}
.product-card--coming-soon .product-card-name {
color: var(--bi-graphite);
}
.product-card--coming-soon .product-card-media--empty::before {
background:
radial-gradient(circle at 50% 42%, rgba(10, 10, 10, 0.18) 0 14%, transparent 15%),
radial-gradient(circle at 50% 42%, rgba(10, 10, 10, 0.07) 15% 24%, transparent 25%);
}
.product-card--coming-soon .product-card-model {
background: transparent;
color: var(--bi-mist);
border: 1px dashed var(--bi-line);
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
}
/* Coming-soon corner ribbon — a small drafted clock badge */
.product-card--coming-soon::before {
content: "";
position: absolute;
top: 14px;
right: 14px;
width: 28px;
height: 28px;
background: var(--bi-paper);
border: 1px dashed var(--bi-mist);
border-radius: 50%;
z-index: 2;
}
.product-card--coming-soon::after {
content: "";
position: absolute;
top: 25px;
right: 26px;
width: 1.5px;
height: 6px;
background: var(--bi-mist);
transform-origin: bottom center;
transform: rotate(45deg);
z-index: 3;
box-shadow: -3px 1px 0 -0.5px var(--bi-mist);
}
/* ============================================================
ARCHITECTURAL DESIGN LANGUAGE — sitewide brand motifs
- Drafted dimension-line eyebrow accent
- Subtle drafting-grid watermark on dark sections
- Downlight glow overlay on key imagery
- Beam-rule horizontal divider utility
============================================================ */
/* Eyebrow accent: drafted dimension marker (|———|) replacing the plain dash */
.eyebrow::before {
width: 28px;
height: 8px;
background: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: left center;
}
.eyebrow--light::before {
opacity: 0.9;
}
.eyebrow--centered::before,
.section-head--centered .eyebrow::before {
background-position: center;
}
/* Drafting-grid watermark on dark sections — barely perceptible blueprint feel */
.page-breadcrumb,
.bottom-cta,
.page-section--ink,
.site-footer {
background-image:
linear-gradient(rgba(244, 184, 96, 0.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(244, 184, 96, 0.045) 1px, transparent 1px);
background-size: 56px 56px;
}
/* .why already has a ::before glow; layer the grid via ::after */
.why {
isolation: isolate;
}
.why::after {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(244, 184, 96, 0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(244, 184, 96, 0.05) 1px, transparent 1px);
background-size: 56px 56px;
pointer-events: none;
z-index: 0;
}
.why-inner {
position: relative;
z-index: 1;
}
/* Downlight glow overlay on key imagery — a soft gold halo across the top edge */
.story-block-img,
.brand-hero-img {
position: relative;
isolation: isolate;
}
.story-block-img::after,
.brand-hero-img::after {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 70% 35% at 50% 0%, rgba(244, 184, 96, 0.18) 0%, transparent 60%),
radial-gradient(ellipse 100% 40% at 50% 100%, rgba(10, 10, 10, 0.18) 0%, transparent 60%);
pointer-events: none;
mix-blend-mode: multiply;
opacity: 0.6;
z-index: 1;
}
/* Reusable beam-rule horizontal divider — drop
anywhere */
hr.arch-beam {
border: 0;
height: 1px;
background: linear-gradient(90deg, transparent 0%, var(--bi-glow) 50%, transparent 100%);
margin: clamp(36px, 5vw, 60px) auto;
max-width: var(--wrap);
position: relative;
overflow: visible;
}
hr.arch-beam::before,
hr.arch-beam::after {
content: "";
position: absolute;
top: -4px;
width: 1px;
height: 9px;
background: var(--bi-glow);
}
hr.arch-beam::before {
left: 50%;
transform: translateX(-90px);
}
hr.arch-beam::after {
left: 50%;
transform: translateX(89px);
}
/* Subtle corner light-cone accent — opt-in via .arch-cone on a section/container */
.arch-cone {
position: relative;
overflow: hidden;
isolation: isolate;
}
.arch-cone::before {
content: "";
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 70%;
background: radial-gradient(ellipse 100% 80% at 90% 10%, rgba(244, 184, 96, 0.10) 0%, transparent 60%);
pointer-events: none;
z-index: -1;
}
/* Tone the downlight glow back on prefers-reduced-motion / busy backgrounds */
@media (prefers-reduced-motion: reduce) {
.story-block-img::after,
.brand-hero-img::after {
opacity: 0;
}
}
/* ============================================================
DRAFTED SVG ICONS — CSS-mask replacements for the FontAwesome
icons used inside cards. Hides the FA glyph and draws a
custom architectural silhouette in currentColor.
Scoped to card / info contexts so other FA icons on the site
(brand, social, header) keep their original FontAwesome glyph.
============================================================ */
:root {
--arch-icon-check: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='square'%3E%3Cpath d='M2 8.5L6 12.5L14 3.5'/%3E%3Cline x1='1.5' y1='6' x2='1.5' y2='11'/%3E%3C/svg%3E");
--arch-icon-shield: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M8 1.5L2.5 3.2V8C2.5 11.5 5.5 13.5 8 14.5C10.5 13.5 13.5 11.5 13.5 8V3.2L8 1.5Z'/%3E%3Cpath d='M5 8L7.3 10.3L11 6.2'/%3E%3C/svg%3E");
--arch-icon-bolt: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black' stroke='black' stroke-width='0.6' stroke-linejoin='miter'%3E%3Cpath d='M9.4 1L4 9H7L6 15L12.2 6.5H8.8L10.2 1Z'/%3E%3C/svg%3E");
--arch-icon-droplet: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.3' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M8 1.5C8 1.5 3 6 3 10A5 5 0 0 0 13 10C13 6 8 1.5 8 1.5Z'/%3E%3Cpath d='M6.5 10.5C6.5 11.5 7.2 12.2 8 12.2' stroke-width='1'/%3E%3C/svg%3E");
--arch-icon-layers: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M2 5L8 2L14 5L8 8Z'/%3E%3Cpath d='M2 8L8 11L14 8'/%3E%3Cpath d='M2 11L8 14L14 11'/%3E%3C/svg%3E");
--arch-icon-angle: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M3 14L13 14M3 14L8 3.5L13 14Z'/%3E%3Cpath d='M5.5 14A2.5 2.5 0 0 1 8 11.5' stroke-width='1'/%3E%3C/svg%3E");
--arch-icon-temperature: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Ccircle cx='7' cy='12' r='2.4'/%3E%3Cpath d='M7 9.5V3.2A1.5 1.5 0 0 1 8.5 1.7A1.5 1.5 0 0 1 10 3.2V9.5'/%3E%3Cline x1='10.5' y1='4.5' x2='12' y2='4.5'/%3E%3Cline x1='10.5' y1='6.5' x2='12' y2='6.5'/%3E%3Cline x1='10.5' y1='8.5' x2='12' y2='8.5'/%3E%3C/svg%3E");
--arch-icon-ruler: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Crect x='1.5' y='5' width='13' height='6'/%3E%3Cline x1='4' y1='5' x2='4' y2='8'/%3E%3Cline x1='8' y1='5' x2='8' y2='8.5'/%3E%3Cline x1='12' y1='5' x2='12' y2='8'/%3E%3C/svg%3E");
--arch-icon-puzzle: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M3 3H7V5A1.2 1.2 0 0 0 8.2 6.2A1.2 1.2 0 0 0 9.4 5V3H13V7A1.2 1.2 0 0 0 11.8 8.2A1.2 1.2 0 0 0 13 9.4V13H9A1.2 1.2 0 0 0 7.8 11.8A1.2 1.2 0 0 0 6.6 13H3Z'/%3E%3C/svg%3E");
--arch-icon-clock: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.3' stroke-linecap='square' stroke-linejoin='miter'%3E%3Ccircle cx='8' cy='8' r='6.5'/%3E%3Cpath d='M8 4.2V8L10.8 9.8'/%3E%3Cline x1='8' y1='1.5' x2='8' y2='2.5'/%3E%3Cline x1='14.5' y1='8' x2='13.5' y2='8'/%3E%3Cline x1='8' y1='14.5' x2='8' y2='13.5'/%3E%3Cline x1='1.5' y1='8' x2='2.5' y2='8'/%3E%3C/svg%3E");
--arch-icon-circle-dot: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.2' stroke-linecap='square'%3E%3Ccircle cx='8' cy='8' r='6.3'/%3E%3Ccircle cx='8' cy='8' r='2.2' fill='black'/%3E%3Cpath d='M8 0.5V2.2M8 13.8V15.5M0.5 8H2.2M13.8 8H15.5'/%3E%3C/svg%3E");
--arch-icon-bullseye: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.2' stroke-linecap='square'%3E%3Ccircle cx='8' cy='8' r='6.3'/%3E%3Ccircle cx='8' cy='8' r='3.4'/%3E%3Ccircle cx='8' cy='8' r='1' fill='black'/%3E%3C/svg%3E");
--arch-icon-file: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M3 1.5H10L13 4.5V14.5H3Z'/%3E%3Cpath d='M10 1.5V4.5H13'/%3E%3Cline x1='5' y1='7.5' x2='11' y2='7.5'/%3E%3Cline x1='5' y1='10' x2='11' y2='10'/%3E%3Cline x1='5' y1='12.5' x2='9' y2='12.5'/%3E%3C/svg%3E");
--arch-icon-cube: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M8 1.5L14 4.5V11.5L8 14.5L2 11.5V4.5Z'/%3E%3Cpath d='M2 4.5L8 7.5L14 4.5'/%3E%3Cpath d='M8 7.5V14.5'/%3E%3C/svg%3E");
--arch-icon-microchip: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Crect x='4' y='4' width='8' height='8'/%3E%3Crect x='6.5' y='6.5' width='3' height='3'/%3E%3Cline x1='6' y1='1.5' x2='6' y2='4'/%3E%3Cline x1='8' y1='1.5' x2='8' y2='4'/%3E%3Cline x1='10' y1='1.5' x2='10' y2='4'/%3E%3Cline x1='6' y1='12' x2='6' y2='14.5'/%3E%3Cline x1='8' y1='12' x2='8' y2='14.5'/%3E%3Cline x1='10' y1='12' x2='10' y2='14.5'/%3E%3Cline x1='1.5' y1='6' x2='4' y2='6'/%3E%3Cline x1='1.5' y1='8' x2='4' y2='8'/%3E%3Cline x1='1.5' y1='10' x2='4' y2='10'/%3E%3Cline x1='12' y1='6' x2='14.5' y2='6'/%3E%3Cline x1='12' y1='8' x2='14.5' y2='8'/%3E%3Cline x1='12' y1='10' x2='14.5' y2='10'/%3E%3C/svg%3E");
--arch-icon-sliders: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cline x1='1.5' y1='3.5' x2='14.5' y2='3.5'/%3E%3Crect x='10' y='2' width='3' height='3' fill='black'/%3E%3Cline x1='1.5' y1='8' x2='14.5' y2='8'/%3E%3Crect x='5' y='6.5' width='3' height='3' fill='black'/%3E%3Cline x1='1.5' y1='12.5' x2='14.5' y2='12.5'/%3E%3Crect x='8' y='11' width='3' height='3' fill='black'/%3E%3C/svg%3E");
--arch-icon-palette: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M8 1.5C4 1.5 1.5 4 1.5 7C1.5 9.5 3 11 5 11.2C6 11.3 6.5 11.8 6.5 12.5C6.5 13.5 7 14.5 8 14.5C11.5 14.5 14.5 11.5 14.5 8C14.5 4.5 12 1.5 8 1.5Z'/%3E%3Ccircle cx='5' cy='6' r='0.9' fill='black' stroke='none'/%3E%3Ccircle cx='9' cy='4.5' r='0.9' fill='black' stroke='none'/%3E%3Ccircle cx='11.5' cy='8' r='0.9' fill='black' stroke='none'/%3E%3C/svg%3E");
--arch-icon-wifi: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.2' stroke-linecap='square'%3E%3Cpath d='M1.5 7A7 7 0 0 1 14.5 7'/%3E%3Cpath d='M3.5 9.5A4.5 4.5 0 0 1 12.5 9.5'/%3E%3Cpath d='M6 12A2 2 0 0 1 10 12'/%3E%3Ccircle cx='8' cy='13.5' r='0.8' fill='black' stroke='none'/%3E%3C/svg%3E");
--arch-icon-gauge: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M2 11A6 6 0 0 1 14 11'/%3E%3Cline x1='8' y1='11' x2='12' y2='5.5'/%3E%3Ccircle cx='8' cy='11' r='1' fill='black' stroke='none'/%3E%3Cline x1='3' y1='12' x2='4' y2='10.5'/%3E%3Cline x1='13' y1='12' x2='12' y2='10.5'/%3E%3Cline x1='8' y1='4.5' x2='8' y2='5.5'/%3E%3C/svg%3E");
--arch-icon-lightbulb: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M8 1.5A4.5 4.5 0 0 0 5 9.5L5 11L11 11L11 9.5A4.5 4.5 0 0 0 8 1.5Z'/%3E%3Cline x1='5.5' y1='12.5' x2='10.5' y2='12.5'/%3E%3Cline x1='6' y1='14.2' x2='10' y2='14.2'/%3E%3C/svg%3E");
--arch-icon-house: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M2 14V7L8 2L14 7V14Z'/%3E%3Crect x='6.5' y='10' width='3' height='4'/%3E%3C/svg%3E");
--arch-icon-building: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Crect x='3' y='2' width='10' height='13'/%3E%3Crect x='5' y='4' width='1.5' height='1.5' fill='black'/%3E%3Crect x='9.5' y='4' width='1.5' height='1.5' fill='black'/%3E%3Crect x='5' y='6.5' width='1.5' height='1.5' fill='black'/%3E%3Crect x='9.5' y='6.5' width='1.5' height='1.5' fill='black'/%3E%3Crect x='5' y='9' width='1.5' height='1.5' fill='black'/%3E%3Crect x='9.5' y='9' width='1.5' height='1.5' fill='black'/%3E%3Crect x='6.5' y='12' width='3' height='3'/%3E%3C/svg%3E");
--arch-icon-hotel: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Crect x='3' y='5' width='10' height='10'/%3E%3Cpath d='M2 5L14 5L13 3L3 3Z'/%3E%3Crect x='6.5' y='10' width='3' height='5'/%3E%3Crect x='4.7' y='6.5' width='1.5' height='1.5' fill='black'/%3E%3Crect x='9.8' y='6.5' width='1.5' height='1.5' fill='black'/%3E%3C/svg%3E");
--arch-icon-tree: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M8 1.5L4 7L6 7L3 11L6 11L4.5 13.5L11.5 13.5L10 11L13 11L10 7L12 7Z'/%3E%3Cline x1='8' y1='13.5' x2='8' y2='15.5' stroke-width='1.6'/%3E%3C/svg%3E");
--arch-icon-water: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 4Q4 2 8 4T15 4'/%3E%3Cpath d='M1 8Q4 6 8 8T15 8'/%3E%3Cpath d='M1 12Q4 10 8 12T15 12'/%3E%3C/svg%3E");
--arch-icon-stairs: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M2 14L2 11L5 11L5 8L8 8L8 5L11 5L11 2L14 2'/%3E%3Cline x1='2' y1='14' x2='14' y2='14'/%3E%3C/svg%3E");
--arch-icon-archway: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M2 14V7A6 6 0 0 1 14 7V14'/%3E%3Cline x1='1.5' y1='14' x2='14.5' y2='14'/%3E%3Cpath d='M5 14V9A3 3 0 0 1 11 9V14'/%3E%3C/svg%3E");
--arch-icon-store: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M2 6L3 2H13L14 6Z'/%3E%3Cpath d='M2.5 6V14H13.5V6'/%3E%3Crect x='6.5' y='9' width='3' height='5'/%3E%3Cline x1='4' y1='6' x2='4' y2='8'/%3E%3Cline x1='8' y1='6' x2='8' y2='8'/%3E%3Cline x1='12' y1='6' x2='12' y2='8'/%3E%3C/svg%3E");
--arch-icon-car: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M2 11L3 7L5 5H11L13 7L14 11V13H12.5L12 14H10L9.5 13H6.5L6 14H4L3.5 13H2Z'/%3E%3Cline x1='3.5' y1='8' x2='12.5' y2='8'/%3E%3Ccircle cx='5' cy='12' r='1' fill='black' stroke='none'/%3E%3Ccircle cx='11' cy='12' r='1' fill='black' stroke='none'/%3E%3C/svg%3E");
--arch-icon-fence: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M3 4L4 2L5 4V14H3Z'/%3E%3Cpath d='M7 4L8 2L9 4V14H7Z'/%3E%3Cpath d='M11 4L12 2L13 4V14H11Z'/%3E%3Cline x1='2' y1='7' x2='14' y2='7'/%3E%3Cline x1='2' y1='11' x2='14' y2='11'/%3E%3C/svg%3E");
}
/* Base — replace FA glyph with our SVG mask. Scoped to card / info contexts. */
.product-card-specs i,
.info-bullet-grid li i,
.info-feature-grid li i,
.product-card--coming-soon .product-card-specs i {
display: inline-block;
width: 1em;
height: 1em;
background-color: currentColor;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
font-size: 13px;
vertical-align: middle;
}
.product-card-specs i::before,
.info-bullet-grid li i::before,
.info-feature-grid li i::before {
content: "" !important;
display: none;
}
/* Per-icon masks (scoped) */
.info-bullet-grid li i.fa-check {
-webkit-mask-image: var(--arch-icon-check);
mask-image: var(--arch-icon-check);
}
.info-feature-grid li i.fa-shield-check {
-webkit-mask-image: var(--arch-icon-shield);
mask-image: var(--arch-icon-shield);
}
.product-card-specs i.fa-bolt,
.product-card-specs i.fa-bolt-lightning {
-webkit-mask-image: var(--arch-icon-bolt);
mask-image: var(--arch-icon-bolt);
}
.product-card-specs i.fa-droplet {
-webkit-mask-image: var(--arch-icon-droplet);
mask-image: var(--arch-icon-droplet);
}
.product-card-specs i.fa-layer-group {
-webkit-mask-image: var(--arch-icon-layers);
mask-image: var(--arch-icon-layers);
}
.product-card-specs i.fa-angle-down {
-webkit-mask-image: var(--arch-icon-angle);
mask-image: var(--arch-icon-angle);
}
.product-card-specs i.fa-temperature-half {
-webkit-mask-image: var(--arch-icon-temperature);
mask-image: var(--arch-icon-temperature);
}
.product-card-specs i.fa-ruler {
-webkit-mask-image: var(--arch-icon-ruler);
mask-image: var(--arch-icon-ruler);
}
.product-card-specs i.fa-puzzle-piece {
-webkit-mask-image: var(--arch-icon-puzzle);
mask-image: var(--arch-icon-puzzle);
}
.product-card-specs i.fa-clock {
-webkit-mask-image: var(--arch-icon-clock);
mask-image: var(--arch-icon-clock);
}
.product-card-specs i.fa-circle-dot {
-webkit-mask-image: var(--arch-icon-circle-dot);
mask-image: var(--arch-icon-circle-dot);
}
.product-card-specs i.fa-bullseye {
-webkit-mask-image: var(--arch-icon-bullseye);
mask-image: var(--arch-icon-bullseye);
}
/* Per-icon masks scoped to .info-feature-grid — one drafted SVG per feature
bullet, picked by keyword via bi_feature_icon() in PHP. */
.info-feature-grid li i.fa-shield-check {
-webkit-mask-image: var(--arch-icon-shield);
mask-image: var(--arch-icon-shield);
}
.info-feature-grid li i.fa-cube {
-webkit-mask-image: var(--arch-icon-cube);
mask-image: var(--arch-icon-cube);
}
.info-feature-grid li i.fa-microchip {
-webkit-mask-image: var(--arch-icon-microchip);
mask-image: var(--arch-icon-microchip);
}
.info-feature-grid li i.fa-sliders {
-webkit-mask-image: var(--arch-icon-sliders);
mask-image: var(--arch-icon-sliders);
}
.info-feature-grid li i.fa-palette {
-webkit-mask-image: var(--arch-icon-palette);
mask-image: var(--arch-icon-palette);
}
.info-feature-grid li i.fa-wifi {
-webkit-mask-image: var(--arch-icon-wifi);
mask-image: var(--arch-icon-wifi);
}
.info-feature-grid li i.fa-gauge-high {
-webkit-mask-image: var(--arch-icon-gauge);
mask-image: var(--arch-icon-gauge);
}
.info-feature-grid li i.fa-lightbulb {
-webkit-mask-image: var(--arch-icon-lightbulb);
mask-image: var(--arch-icon-lightbulb);
}
.info-feature-grid li i.fa-temperature-half {
-webkit-mask-image: var(--arch-icon-temperature);
mask-image: var(--arch-icon-temperature);
}
.info-feature-grid li i.fa-droplet {
-webkit-mask-image: var(--arch-icon-droplet);
mask-image: var(--arch-icon-droplet);
}
.info-feature-grid li i.fa-ruler {
-webkit-mask-image: var(--arch-icon-ruler);
mask-image: var(--arch-icon-ruler);
}
.info-feature-grid li i.fa-puzzle-piece {
-webkit-mask-image: var(--arch-icon-puzzle);
mask-image: var(--arch-icon-puzzle);
}
.info-feature-grid li i.fa-circle-dot {
-webkit-mask-image: var(--arch-icon-circle-dot);
mask-image: var(--arch-icon-circle-dot);
}
.info-feature-grid li i.fa-bullseye {
-webkit-mask-image: var(--arch-icon-bullseye);
mask-image: var(--arch-icon-bullseye);
}
.info-feature-grid li i.fa-layer-group {
-webkit-mask-image: var(--arch-icon-layers);
mask-image: var(--arch-icon-layers);
}
.info-feature-grid li i.fa-file,
.info-feature-grid li i.fa-file-lines {
-webkit-mask-image: var(--arch-icon-file);
mask-image: var(--arch-icon-file);
}
/* Per-icon masks scoped to .info-bullet-grid — one drafted SVG per application
bullet, picked by keyword via bi_application_icon() in PHP. */
.info-bullet-grid li i.fa-house {
-webkit-mask-image: var(--arch-icon-house);
mask-image: var(--arch-icon-house);
}
.info-bullet-grid li i.fa-building {
-webkit-mask-image: var(--arch-icon-building);
mask-image: var(--arch-icon-building);
}
.info-bullet-grid li i.fa-hotel {
-webkit-mask-image: var(--arch-icon-hotel);
mask-image: var(--arch-icon-hotel);
}
.info-bullet-grid li i.fa-tree {
-webkit-mask-image: var(--arch-icon-tree);
mask-image: var(--arch-icon-tree);
}
.info-bullet-grid li i.fa-water {
-webkit-mask-image: var(--arch-icon-water);
mask-image: var(--arch-icon-water);
}
.info-bullet-grid li i.fa-stairs {
-webkit-mask-image: var(--arch-icon-stairs);
mask-image: var(--arch-icon-stairs);
}
.info-bullet-grid li i.fa-archway {
-webkit-mask-image: var(--arch-icon-archway);
mask-image: var(--arch-icon-archway);
}
.info-bullet-grid li i.fa-store {
-webkit-mask-image: var(--arch-icon-store);
mask-image: var(--arch-icon-store);
}
.info-bullet-grid li i.fa-car {
-webkit-mask-image: var(--arch-icon-car);
mask-image: var(--arch-icon-car);
}
.info-bullet-grid li i.fa-fence {
-webkit-mask-image: var(--arch-icon-fence);
mask-image: var(--arch-icon-fence);
}
.info-bullet-grid li i.fa-cube {
-webkit-mask-image: var(--arch-icon-cube);
mask-image: var(--arch-icon-cube);
}
.info-bullet-grid li i.fa-ruler {
-webkit-mask-image: var(--arch-icon-ruler);
mask-image: var(--arch-icon-ruler);
}
.info-bullet-grid li i.fa-bullseye {
-webkit-mask-image: var(--arch-icon-bullseye);
mask-image: var(--arch-icon-bullseye);
}
.info-bullet-grid li i.fa-layer-group {
-webkit-mask-image: var(--arch-icon-layers);
mask-image: var(--arch-icon-layers);
}
.info-bullet-grid li i.fa-wifi {
-webkit-mask-image: var(--arch-icon-wifi);
mask-image: var(--arch-icon-wifi);
}
.info-bullet-grid li i.fa-puzzle-piece {
-webkit-mask-image: var(--arch-icon-puzzle);
mask-image: var(--arch-icon-puzzle);
}
.info-bullet-grid li i.fa-lightbulb {
-webkit-mask-image: var(--arch-icon-lightbulb);
mask-image: var(--arch-icon-lightbulb);
}
.info-bullet-grid li i.fa-sliders {
-webkit-mask-image: var(--arch-icon-sliders);
mask-image: var(--arch-icon-sliders);
}
.info-bullet-grid li i.fa-check {
-webkit-mask-image: var(--arch-icon-check);
mask-image: var(--arch-icon-check);
}
/* ============================================================
"Applications & typical installations" — refined row layout.
Stays as rows (not cards) but bumps the icon, centers vertically,
adds a hover-revealed gold left edge and a hairline that brightens.
============================================================ */
.info-bullet-grid {
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 0 36px;
}
.info-bullet-grid li {
align-items: center;
gap: 18px;
padding: 20px 0 20px 4px;
border-bottom: 1px solid var(--bi-line);
position: relative;
transition: border-bottom-color .35s var(--ease), padding-left .35s var(--ease);
}
/* Gold left-edge that wipes in on hover */
.info-bullet-grid li::before {
content: "";
position: absolute;
left: 0;
top: 50%;
width: 2px;
height: 0;
background: var(--bi-glow);
transform: translateY(-50%);
transition: height .35s var(--ease);
}
.info-bullet-grid li:hover {
border-bottom-color: var(--bi-glow);
padding-left: 14px;
}
.info-bullet-grid li:hover::before {
height: 60%;
}
.info-bullet-grid li i {
width: 32px;
height: 32px;
flex: 0 0 32px;
font-size: 32px;
margin: 0;
color: var(--bi-glow);
background-color: var(--bi-glow);
-webkit-mask-size: 108% 108%;
mask-size: 108% 108%;
-webkit-mask-position: center;
mask-position: center;
transition: transform .3s var(--ease);
}
.info-bullet-grid li:hover i {
transform: scale(1.1);
}
.info-bullet-grid li span {
font-size: 15px;
line-height: 1.5;
color: var(--bi-ink);
}
/* ============================================================
Project archive — CSS-columns masonry that respects each
image's native aspect ratio. Used on project-gallery.php.
============================================================ */
.moodboard {
column-count: 4;
column-gap: 18px;
margin-top: clamp(32px, 4vw, 56px);
}
@media (max-width: 1180px) {
.moodboard {
column-count: 3;
}
}
@media (max-width: 760px) {
.moodboard {
column-count: 2;
column-gap: 12px;
}
}
@media (max-width: 460px) {
.moodboard {
column-count: 1;
}
}
.moodboard-item {
break-inside: avoid;
margin: 0 0 18px;
position: relative;
overflow: hidden;
background: var(--bi-pure);
}
.moodboard-item a {
display: block;
position: relative;
line-height: 0;
}
.moodboard-item img {
display: block;
width: 100%;
height: auto;
transition: transform .6s var(--ease);
}
/* Soft dark overlay revealed on hover — signals click affordance without distracting */
.moodboard-item a::after {
content: "";
position: absolute;
inset: 0;
background: rgba(10, 10, 10, 0.12);
opacity: 0;
transition: opacity .3s var(--ease);
pointer-events: none;
}
.moodboard-item:hover img {
transform: scale(1.03);
}
.moodboard-item:hover a::after {
opacity: 1;
}
.moodboard-item a:focus-visible {
outline: 2px solid var(--bi-glow);
outline-offset: -2px;
}
/* ============================================================
Category cards (outdoor sub-cat grid on outdoor-lighting.php).
Each card uses a distinct drafted SVG icon at the top of the
plate to telegraph the sub-cat type — no product images needed.
============================================================ */
/* 16 drafted icons, one per outdoor sub-cat — each shows the fixture in ink
plus a faint gold light-beam accent so it reads as a lighting fixture, not
just a shape. Pairs that previously looked alike (surface-wall vs linear
wall washer, foot/step vs recessed, tri-proof vs ip-profile) have been
redrawn to have distinctly different silhouettes. */
:root {
--cat-icon-bollard-wall-lights: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M5 14V6A3 3 0 0 1 11 6V14Z' stroke='%232a2a2a' stroke-width='1.2'/%3E%3Cline x1='2' y1='14.5' x2='14' y2='14.5' stroke='%232a2a2a' stroke-width='1.2'/%3E%3Cline x1='5' y1='8' x2='11' y2='8' stroke='%232a2a2a' stroke-width='0.7' opacity='0.5'/%3E%3Cline x1='8' y1='2' x2='8' y2='4' stroke='%23c89a3c' stroke-width='1' stroke-linecap='round'/%3E%3Cline x1='5' y1='3' x2='5.8' y2='4.2' stroke='%23c89a3c' stroke-width='1' stroke-linecap='round'/%3E%3Cline x1='11' y1='3' x2='10.2' y2='4.2' stroke='%23c89a3c' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E");
--cat-icon-surface-ceiling-lights: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cline x1='1' y1='3' x2='15' y2='3' stroke='%232a2a2a' stroke-width='1.2' stroke-linecap='square'/%3E%3Crect x='6.5' y='3' width='3' height='2.5' stroke='%232a2a2a' stroke-width='1.2' stroke-linejoin='miter'/%3E%3Cpath d='M6.5 5.5L4 14L12 14L9.5 5.5Z' fill='%23c89a3c' fill-opacity='0.18' stroke='%23c89a3c' stroke-width='0.8' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
--cat-icon-surface-wall-lights: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke-linecap='square'%3E%3Cline x1='3' y1='1' x2='3' y2='15' stroke='%232a2a2a' stroke-width='1.2'/%3E%3Cpath d='M3 5L9 7L9 10L3 12Z' stroke='%232a2a2a' stroke-width='1.2' stroke-linejoin='miter'/%3E%3Cpath d='M9 7L15 5L15 12L9 10Z' fill='%23c89a3c' fill-opacity='0.18' stroke='%23c89a3c' stroke-width='0.8' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
--cat-icon-surface-foot-step-lights: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke-linecap='square'%3E%3Cpath d='M1 14L7 14L7 9L11 9' stroke='%232a2a2a' stroke-width='1.2'/%3E%3Crect x='7.5' y='6.5' width='2' height='2.5' stroke='%232a2a2a' stroke-width='1.2' stroke-linejoin='miter'/%3E%3Cpath d='M9.5 7L15 6L15 9.5L9.5 8.5Z' fill='%23c89a3c' fill-opacity='0.18' stroke='%23c89a3c' stroke-width='0.8' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
--cat-icon-garden-spike-lights: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke-linecap='square'%3E%3Cline x1='8' y1='15' x2='8' y2='8.5' stroke='%232a2a2a' stroke-width='1.2'/%3E%3Cpath d='M6 15L8 13L10 15' stroke='%232a2a2a' stroke-width='1.2' stroke-linejoin='miter'/%3E%3Ccircle cx='8' cy='7' r='2' stroke='%232a2a2a' stroke-width='1.2'/%3E%3Cpath d='M8 5L4 1L12 1L8 5Z' fill='%23c89a3c' fill-opacity='0.18' stroke='%23c89a3c' stroke-width='0.8' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
--cat-icon-recessed-foot-step-lights: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke-linecap='square'%3E%3Cpath d='M1 14L7 14L7 9L13 9' stroke='%232a2a2a' stroke-width='1.2'/%3E%3Ccircle cx='10' cy='9' r='1' stroke='%232a2a2a' stroke-width='1' fill='%23c89a3c' fill-opacity='0.4'/%3E%3Cpath d='M10 10L8 14L12 14L10 10Z' fill='%23c89a3c' fill-opacity='0.18' stroke='%23c89a3c' stroke-width='0.8' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
--cat-icon-underwater-concealed-lights: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='1,4 4,3 8,4 11,3 15,4' stroke='%232a2a2a' stroke-width='1.2'/%3E%3Cpolyline points='1,7 4,6 8,7 11,6 15,7' stroke='%232a2a2a' stroke-width='1.2' opacity='0.45'/%3E%3Ccircle cx='8' cy='13' r='1.5' fill='%232a2a2a'/%3E%3Cpath d='M8 11.5L4 7.5L12 7.5L8 11.5Z' fill='%23c89a3c' fill-opacity='0.18' stroke='%23c89a3c' stroke-width='0.8'/%3E%3C/svg%3E");
--cat-icon-underwater-surface-lights: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5.5' y='1.5' width='5' height='3' stroke='%232a2a2a' stroke-width='1.2' stroke-linejoin='miter'/%3E%3Cpath d='M5.5 4.5L2 10L14 10L10.5 4.5Z' fill='%23c89a3c' fill-opacity='0.18' stroke='%23c89a3c' stroke-width='0.8'/%3E%3Cpolyline points='1,12 4,11 8,12 11,11 15,12' stroke='%232a2a2a' stroke-width='1.2'/%3E%3Cpolyline points='1,14 4,13 8,14 11,13 15,14' stroke='%232a2a2a' stroke-width='1.2' opacity='0.45'/%3E%3C/svg%3E");
--cat-icon-canopy-lights: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M1 4L8 1.5L15 4L15 5.5L1 5.5Z' stroke='%232a2a2a' stroke-width='1.2'/%3E%3Ccircle cx='4.5' cy='6.8' r='0.5' fill='%232a2a2a'/%3E%3Ccircle cx='8' cy='6.8' r='0.5' fill='%232a2a2a'/%3E%3Ccircle cx='11.5' cy='6.8' r='0.5' fill='%232a2a2a'/%3E%3Cpath d='M4 7.5L3 14L6 14L5 7.5Z' fill='%23c89a3c' fill-opacity='0.15' stroke='%23c89a3c' stroke-width='0.7' stroke-linejoin='round'/%3E%3Cpath d='M7.5 7.5L6.5 14L9.5 14L8.5 7.5Z' fill='%23c89a3c' fill-opacity='0.15' stroke='%23c89a3c' stroke-width='0.7' stroke-linejoin='round'/%3E%3Cpath d='M11 7.5L10 14L13 14L12 7.5Z' fill='%23c89a3c' fill-opacity='0.15' stroke='%23c89a3c' stroke-width='0.7' stroke-linejoin='round'/%3E%3C/svg%3E");
--cat-icon-landscape-path-lights: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 13L6 11L8 8L12 5L14 3' stroke='%232a2a2a' stroke-width='1.2' stroke-dasharray='1.5 2'/%3E%3Ccircle cx='3' cy='12.5' r='1.4' fill='%23c89a3c' fill-opacity='0.22' stroke='%23c89a3c' stroke-width='0.7'/%3E%3Ccircle cx='8' cy='8' r='1.4' fill='%23c89a3c' fill-opacity='0.22' stroke='%23c89a3c' stroke-width='0.7'/%3E%3Ccircle cx='13' cy='3.5' r='1.4' fill='%23c89a3c' fill-opacity='0.22' stroke='%23c89a3c' stroke-width='0.7'/%3E%3C/svg%3E");
--cat-icon-linear-wall-washers: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cline x1='3' y1='1' x2='3' y2='15' stroke='%232a2a2a' stroke-width='1.2'/%3E%3Crect x='3.5' y='12.5' width='10' height='1.5' stroke='%232a2a2a' stroke-width='1.2'/%3E%3Cpath d='M3.5 12L3.5 2.5L13.5 2.5L13.5 12Z' fill='%23c89a3c' fill-opacity='0.10' stroke='%23c89a3c' stroke-width='0.7' stroke-dasharray='2 1.5' stroke-linecap='round'/%3E%3C/svg%3E");
--cat-icon-bulkhead-lights: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cellipse cx='8' cy='8' rx='6.5' ry='3.7' stroke='%232a2a2a' stroke-width='1.2'/%3E%3Cellipse cx='8' cy='8' rx='3.5' ry='1.8' fill='%23c89a3c' fill-opacity='0.32' stroke='%23c89a3c' stroke-width='1'/%3E%3C/svg%3E");
--cat-icon-tri-proof-batten-lights: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke-linecap='round' stroke-linejoin='miter'%3E%3Crect x='1' y='5.5' width='14' height='5' rx='2.5' stroke='%232a2a2a' stroke-width='1.2'/%3E%3Cellipse cx='1' cy='8' rx='1' ry='2.5' stroke='%232a2a2a' stroke-width='0.7' opacity='0.5'/%3E%3Cellipse cx='15' cy='8' rx='1' ry='2.5' stroke='%232a2a2a' stroke-width='0.7' opacity='0.5'/%3E%3Cline x1='2.5' y1='8' x2='13.5' y2='8' stroke='%23c89a3c' stroke-width='2' stroke-linecap='round' opacity='0.42'/%3E%3C/svg%3E");
--cat-icon-street-lights: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cline x1='4' y1='15' x2='4' y2='3' stroke='%232a2a2a' stroke-width='1.2'/%3E%3Cpath d='M4 3L11.5 3' stroke='%232a2a2a' stroke-width='1.2'/%3E%3Crect x='9' y='3' width='4' height='2.5' stroke='%232a2a2a' stroke-width='1.2'/%3E%3Cline x1='2' y1='15' x2='6' y2='15' stroke='%232a2a2a' stroke-width='1.2'/%3E%3Cpath d='M9 5.5L7 13L15 13L13 5.5Z' fill='%23c89a3c' fill-opacity='0.18' stroke='%23c89a3c' stroke-width='0.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
--cat-icon-ip-profile-lights: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke-linecap='square' stroke-linejoin='miter'%3E%3Crect x='1.5' y='6' width='13' height='4' stroke='%232a2a2a' stroke-width='1.2'/%3E%3Cline x1='5' y1='6' x2='5' y2='10' stroke='%232a2a2a' stroke-width='0.7' opacity='0.5'/%3E%3Cline x1='8' y1='6' x2='8' y2='10' stroke='%232a2a2a' stroke-width='0.7' opacity='0.5'/%3E%3Cline x1='11' y1='6' x2='11' y2='10' stroke='%232a2a2a' stroke-width='0.7' opacity='0.5'/%3E%3Cline x1='2.5' y1='8' x2='13.5' y2='8' stroke='%23c89a3c' stroke-width='1.6' stroke-linecap='round' opacity='0.55'/%3E%3C/svg%3E");
--cat-icon-flood-lights: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke-linecap='square' stroke-linejoin='miter'%3E%3Crect x='1.5' y='2.5' width='5' height='5' stroke='%232a2a2a' stroke-width='1.2'/%3E%3Cline x1='4' y1='7.5' x2='4' y2='9.5' stroke='%232a2a2a' stroke-width='1'/%3E%3Cline x1='2' y1='9.5' x2='6' y2='9.5' stroke='%232a2a2a' stroke-width='1'/%3E%3Cpath d='M6.5 3.5L15 1L15 9L6.5 6.5Z' fill='%23c89a3c' fill-opacity='0.18' stroke='%23c89a3c' stroke-width='0.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
/* Indoor (6) */
--cat-icon-recessed-downlights: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cline x1='1' y1='3.5' x2='5.5' y2='3.5' stroke='%232a2a2a' stroke-width='1.2'/%3E%3Cline x1='10.5' y1='3.5' x2='15' y2='3.5' stroke='%232a2a2a' stroke-width='1.2'/%3E%3Cpath d='M5.5 3.5L6 4.5L10 4.5L10.5 3.5' stroke='%232a2a2a' stroke-width='1.2'/%3E%3Cline x1='6.5' y1='4.5' x2='9.5' y2='4.5' stroke='%23c89a3c' stroke-width='1.5' stroke-linecap='round' opacity='0.65'/%3E%3Cpath d='M6 4.5L3 14L13 14L10 4.5Z' fill='%23c89a3c' fill-opacity='0.18' stroke='%23c89a3c' stroke-width='0.8' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
--cat-icon-magnetic-track-lights: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke-linecap='square' stroke-linejoin='miter'%3E%3Crect x='1' y='3' width='14' height='1.5' stroke='%232a2a2a' stroke-width='1.2'/%3E%3Crect x='3' y='4.5' width='1.6' height='4' stroke='%232a2a2a' stroke-width='1'/%3E%3Crect x='7.2' y='4.5' width='1.6' height='4' stroke='%232a2a2a' stroke-width='1'/%3E%3Crect x='11.4' y='4.5' width='1.6' height='4' stroke='%232a2a2a' stroke-width='1'/%3E%3Cpath d='M3 8.5L2 14L5.6 14L4.6 8.5Z' fill='%23c89a3c' fill-opacity='0.18' stroke='%23c89a3c' stroke-width='0.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M7.2 8.5L6.2 14L9.8 14L8.8 8.5Z' fill='%23c89a3c' fill-opacity='0.18' stroke='%23c89a3c' stroke-width='0.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M11.4 8.5L10.4 14L14 14L13 8.5Z' fill='%23c89a3c' fill-opacity='0.18' stroke='%23c89a3c' stroke-width='0.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
--cat-icon-cob-lights: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke-linecap='square'%3E%3Ccircle cx='8' cy='4' r='2.6' stroke='%232a2a2a' stroke-width='1.2'/%3E%3Ccircle cx='8' cy='4' r='1.1' fill='%23c89a3c' fill-opacity='0.55' stroke='%23c89a3c' stroke-width='1'/%3E%3Cpath d='M6 6.3L5.5 14L10.5 14L10 6.3Z' fill='%23c89a3c' fill-opacity='0.20' stroke='%23c89a3c' stroke-width='0.8' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
--cat-icon-linear-profile: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke-linecap='square' stroke-linejoin='miter'%3E%3Crect x='1' y='6' width='14' height='3' stroke='%232a2a2a' stroke-width='1.2'/%3E%3Cline x1='3' y1='5.5' x2='3' y2='4.5' stroke='%232a2a2a' stroke-width='0.8'/%3E%3Cline x1='8' y1='5.5' x2='8' y2='4.5' stroke='%232a2a2a' stroke-width='0.8'/%3E%3Cline x1='13' y1='5.5' x2='13' y2='4.5' stroke='%232a2a2a' stroke-width='0.8'/%3E%3Cline x1='1.6' y1='7.5' x2='14.4' y2='7.5' stroke='%23c89a3c' stroke-width='1.6' stroke-linecap='round' opacity='0.55'/%3E%3Cpath d='M1 9L3 13.5L13 13.5L15 9Z' fill='%23c89a3c' fill-opacity='0.12' stroke='%23c89a3c' stroke-width='0.6' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
--cat-icon-track-lights: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke-linecap='square' stroke-linejoin='miter'%3E%3Crect x='1' y='2' width='14' height='1.5' stroke='%232a2a2a' stroke-width='1.2'/%3E%3Cline x1='4.5' y1='3.5' x2='5.5' y2='5.5' stroke='%232a2a2a' stroke-width='1.2'/%3E%3Ccircle cx='5.5' cy='6.7' r='1.6' stroke='%232a2a2a' stroke-width='1.2'/%3E%3Cline x1='11.5' y1='3.5' x2='10.5' y2='5.5' stroke='%232a2a2a' stroke-width='1.2'/%3E%3Ccircle cx='10.5' cy='6.7' r='1.6' stroke='%232a2a2a' stroke-width='1.2'/%3E%3Cpath d='M4.5 8.2L3 14L8 14L6.5 8.2Z' fill='%23c89a3c' fill-opacity='0.16' stroke='%23c89a3c' stroke-width='0.7' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath d='M9.5 8.2L8 14L13 14L11.5 8.2Z' fill='%23c89a3c' fill-opacity='0.16' stroke='%23c89a3c' stroke-width='0.7' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
--cat-icon-cove-lighting: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M1 4L1 1L15 1L15 4' stroke='%232a2a2a' stroke-width='1.2'/%3E%3Cpath d='M1 4L5 4L5 7L11 7L11 4L15 4' stroke='%232a2a2a' stroke-width='1.2'/%3E%3Cline x1='5.5' y1='5.5' x2='10.5' y2='5.5' stroke='%23c89a3c' stroke-width='1.6' stroke-linecap='round' opacity='0.7'/%3E%3Cpath d='M5 4L3 1L13 1L11 4Z' fill='%23c89a3c' fill-opacity='0.14' stroke='%23c89a3c' stroke-width='0.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
/* Decorative (3) */
--cat-icon-chandeliers: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cline x1='8' y1='1' x2='8' y2='5' stroke='%232a2a2a' stroke-width='1.2'/%3E%3Cpath d='M3 6L13 6L11 9L5 9Z' stroke='%232a2a2a' stroke-width='1.2'/%3E%3Cline x1='4.5' y1='9' x2='4.5' y2='11' stroke='%232a2a2a' stroke-width='1'/%3E%3Cline x1='8' y1='9' x2='8' y2='11' stroke='%232a2a2a' stroke-width='1'/%3E%3Cline x1='11.5' y1='9' x2='11.5' y2='11' stroke='%232a2a2a' stroke-width='1'/%3E%3Ccircle cx='4.5' cy='12.2' r='1.1' fill='%23c89a3c' fill-opacity='0.40' stroke='%23c89a3c' stroke-width='0.7'/%3E%3Ccircle cx='8' cy='12.2' r='1.1' fill='%23c89a3c' fill-opacity='0.40' stroke='%23c89a3c' stroke-width='0.7'/%3E%3Ccircle cx='11.5' cy='12.2' r='1.1' fill='%23c89a3c' fill-opacity='0.40' stroke='%23c89a3c' stroke-width='0.7'/%3E%3C/svg%3E");
--cat-icon-decorative-wall-lights: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cline x1='3' y1='1' x2='3' y2='15' stroke='%232a2a2a' stroke-width='1.2'/%3E%3Cline x1='3' y1='5' x2='5' y2='5' stroke='%232a2a2a' stroke-width='1.2'/%3E%3Cpath d='M5 5L6 7L13 7L14 5' stroke='%232a2a2a' stroke-width='1.2'/%3E%3Cpath d='M6 7L7.2 10.5L11.8 10.5L13 7' stroke='%232a2a2a' stroke-width='1.2'/%3E%3Cpath d='M7.2 10.5L9 14L10 14L11.8 10.5Z' fill='%23c89a3c' fill-opacity='0.22' stroke='%23c89a3c' stroke-width='0.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
--cat-icon-floor-table-lamps: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M4 7L6 2L10 2L12 7Z' stroke='%232a2a2a' stroke-width='1.2'/%3E%3Cline x1='8' y1='7' x2='8' y2='13' stroke='%232a2a2a' stroke-width='1.2'/%3E%3Cpath d='M5 13L8 11L11 13L11 14L5 14Z' stroke='%232a2a2a' stroke-width='1.2'/%3E%3Cpath d='M4 7L3 11L13 11L12 7Z' fill='%23c89a3c' fill-opacity='0.20' stroke='%23c89a3c' stroke-width='0.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
/* Lighting controls (5) */
--cat-icon-motion-sensors: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke-linecap='round'%3E%3Cline x1='1' y1='2.5' x2='15' y2='2.5' stroke='%232a2a2a' stroke-width='1.2' stroke-linecap='square'/%3E%3Ccircle cx='8' cy='5.5' r='2.4' stroke='%232a2a2a' stroke-width='1.2'/%3E%3Ccircle cx='8' cy='5.5' r='0.8' fill='%232a2a2a'/%3E%3Cpath d='M5.5 9.5Q8 11 10.5 9.5' stroke='%23c89a3c' stroke-width='1' fill='none' opacity='0.7'/%3E%3Cpath d='M4 11.5Q8 14 12 11.5' stroke='%23c89a3c' stroke-width='1' fill='none' opacity='0.55'/%3E%3Cpath d='M2.5 13.5Q8 16.5 13.5 13.5' stroke='%23c89a3c' stroke-width='1' fill='none' opacity='0.4'/%3E%3C/svg%3E");
--cat-icon-touch-panels: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke-linecap='square' stroke-linejoin='miter'%3E%3Crect x='3' y='2' width='10' height='12' stroke='%232a2a2a' stroke-width='1.2'/%3E%3Cline x1='4' y1='4' x2='12' y2='4' stroke='%232a2a2a' stroke-width='0.7' opacity='0.5'/%3E%3Cline x1='4' y1='12.5' x2='12' y2='12.5' stroke='%232a2a2a' stroke-width='0.7' opacity='0.5'/%3E%3Ccircle cx='5.7' cy='6.7' r='1.1' fill='%23c89a3c' fill-opacity='0.40' stroke='%23c89a3c' stroke-width='0.8'/%3E%3Ccircle cx='10.3' cy='6.7' r='1.1' fill='%23c89a3c' fill-opacity='0.40' stroke='%23c89a3c' stroke-width='0.8'/%3E%3Ccircle cx='5.7' cy='10.3' r='1.1' fill='%23c89a3c' fill-opacity='0.40' stroke='%23c89a3c' stroke-width='0.8'/%3E%3Ccircle cx='10.3' cy='10.3' r='1.1' fill='%23c89a3c' fill-opacity='0.40' stroke='%23c89a3c' stroke-width='0.8'/%3E%3C/svg%3E");
--cat-icon-wireless-switches: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke-linecap='round' stroke-linejoin='miter'%3E%3Crect x='3' y='8.5' width='10' height='6' stroke='%232a2a2a' stroke-width='1.2' stroke-linecap='square'/%3E%3Crect x='4.5' y='10.5' width='3' height='2.5' fill='%23c89a3c' fill-opacity='0.42' stroke='%232a2a2a' stroke-width='1' stroke-linecap='square'/%3E%3Crect x='8.5' y='10.5' width='3' height='2.5' stroke='%232a2a2a' stroke-width='1' opacity='0.5' stroke-linecap='square'/%3E%3Cpath d='M5 5.5Q8 2.5 11 5.5' stroke='%23c89a3c' stroke-width='0.9' fill='none' opacity='0.7'/%3E%3Cpath d='M3.5 7Q8 1.5 12.5 7' stroke='%23c89a3c' stroke-width='0.9' fill='none' opacity='0.45'/%3E%3C/svg%3E");
--cat-icon-wifi-controllers: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke-linecap='round' stroke-linejoin='miter'%3E%3Crect x='2' y='9' width='12' height='5' stroke='%232a2a2a' stroke-width='1.2' stroke-linecap='square'/%3E%3Ccircle cx='4' cy='11.5' r='0.65' fill='%232a2a2a'/%3E%3Ccircle cx='6.2' cy='11.5' r='0.65' fill='%232a2a2a'/%3E%3Cline x1='9' y1='11.5' x2='12.5' y2='11.5' stroke='%232a2a2a' stroke-width='0.9' stroke-linecap='square'/%3E%3Cpath d='M5 6.5Q8 3.5 11 6.5' stroke='%23c89a3c' stroke-width='1' fill='none' opacity='0.6'/%3E%3Cpath d='M3.5 5Q8 -0.5 12.5 5' stroke='%23c89a3c' stroke-width='1' fill='none' opacity='0.35'/%3E%3Ccircle cx='8' cy='7.8' r='0.8' fill='%23c89a3c' fill-opacity='0.7'/%3E%3C/svg%3E");
--cat-icon-smart-drivers: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke-linecap='square' stroke-linejoin='miter'%3E%3Crect x='1.5' y='4.5' width='13' height='6' stroke='%232a2a2a' stroke-width='1.2'/%3E%3Cline x1='3' y1='6.5' x2='5.5' y2='6.5' stroke='%232a2a2a' stroke-width='0.8'/%3E%3Cline x1='3' y1='8.5' x2='5.5' y2='8.5' stroke='%232a2a2a' stroke-width='0.8'/%3E%3Crect x='7' y='6' width='3' height='3' stroke='%232a2a2a' stroke-width='0.8'/%3E%3Ccircle cx='12' cy='7' r='0.6' fill='%23c89a3c'/%3E%3Ccircle cx='12' cy='9' r='0.6' fill='%23c89a3c'/%3E%3Cline x1='8' y1='4' x2='8' y2='2.5' stroke='%232a2a2a' stroke-width='0.8'/%3E%3Cline x1='8' y1='11' x2='8' y2='12.5' stroke='%23c89a3c' stroke-width='1.1' opacity='0.6'/%3E%3Cpath d='M6 12.5L7 14.5L9 14.5L10 12.5Z' fill='%23c89a3c' fill-opacity='0.20' stroke='%23c89a3c' stroke-width='0.7' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
}
.category-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: clamp(18px, 1.6vw, 24px);
margin-top: clamp(32px, 4vw, 56px);
}
.category-card {
display: flex;
flex-direction: column;
text-decoration: none;
color: inherit;
background: var(--bi-pure);
border: 1px solid var(--bi-line);
overflow: hidden;
position: relative;
transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
/* The "plate" — drafted icon + title hero area replacing the old product image */
.category-card-plate {
position: relative;
background: linear-gradient(160deg, #f6f5ee 0%, #ecebdf 100%);
color: var(--bi-ink);
padding: 22px 24px 22px;
aspect-ratio: 4 / 3;
display: grid;
grid-template-rows: auto 1fr auto;
align-items: start;
overflow: hidden;
isolation: isolate;
border-bottom: 1px solid var(--bi-line);
}
/* Top gold dimension rail */
.category-card-plate::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, var(--bi-glow), rgba(244, 184, 96, 0.4) 50%, transparent);
z-index: 2;
}
/* Hairline graph paper grid — same on every card, very subtle */
.category-card-plate::after {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(to right, rgba(10, 10, 10, 0.045) 1px, transparent 1px),
linear-gradient(to bottom, rgba(10, 10, 10, 0.045) 1px, transparent 1px);
background-size: 28px 28px;
z-index: 0;
pointer-events: none;
}
/* Drafted icon — the category differentiator. Renders the 2-colour SVG
(ink fixture lines + faint gold beam) via background-image so both
colours show. The icon is set per-card by the data-cat selector below. */
.category-card-icon {
display: block;
width: 80px;
height: 80px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
position: relative;
z-index: 2;
justify-self: end;
margin-bottom: 6px;
transition: transform .35s var(--ease), filter .35s var(--ease);
}
/* Per-sub-cat icon mapping */
.category-card[data-cat="bollard-wall-lights"] .category-card-icon {
background-image: var(--cat-icon-bollard-wall-lights);
}
.category-card[data-cat="surface-ceiling-lights"] .category-card-icon {
background-image: var(--cat-icon-surface-ceiling-lights);
}
.category-card[data-cat="surface-wall-lights"] .category-card-icon {
background-image: var(--cat-icon-surface-wall-lights);
}
.category-card[data-cat="surface-foot-step-lights"] .category-card-icon {
background-image: var(--cat-icon-surface-foot-step-lights);
}
.category-card[data-cat="garden-spike-lights"] .category-card-icon {
background-image: var(--cat-icon-garden-spike-lights);
}
.category-card[data-cat="recessed-foot-step-lights"] .category-card-icon {
background-image: var(--cat-icon-recessed-foot-step-lights);
}
.category-card[data-cat="underwater-concealed-lights"] .category-card-icon {
background-image: var(--cat-icon-underwater-concealed-lights);
}
.category-card[data-cat="underwater-surface-lights"] .category-card-icon {
background-image: var(--cat-icon-underwater-surface-lights);
}
.category-card[data-cat="canopy-lights"] .category-card-icon {
background-image: var(--cat-icon-canopy-lights);
}
.category-card[data-cat="landscape-path-lights"] .category-card-icon {
background-image: var(--cat-icon-landscape-path-lights);
}
.category-card[data-cat="linear-wall-washers"] .category-card-icon {
background-image: var(--cat-icon-linear-wall-washers);
}
.category-card[data-cat="bulkhead-lights"] .category-card-icon {
background-image: var(--cat-icon-bulkhead-lights);
}
.category-card[data-cat="tri-proof-batten-lights"] .category-card-icon {
background-image: var(--cat-icon-tri-proof-batten-lights);
}
.category-card[data-cat="street-lights"] .category-card-icon {
background-image: var(--cat-icon-street-lights);
}
.category-card[data-cat="ip-profile-lights"] .category-card-icon {
background-image: var(--cat-icon-ip-profile-lights);
}
.category-card[data-cat="flood-lights"] .category-card-icon {
background-image: var(--cat-icon-flood-lights);
}
/* Indoor */
.category-card[data-cat="recessed-downlights"] .category-card-icon {
background-image: var(--cat-icon-recessed-downlights);
}
.category-card[data-cat="magnetic-track-lights"] .category-card-icon {
background-image: var(--cat-icon-magnetic-track-lights);
}
.category-card[data-cat="cob-lights"] .category-card-icon {
background-image: var(--cat-icon-cob-lights);
}
.category-card[data-cat="linear-profile"] .category-card-icon {
background-image: var(--cat-icon-linear-profile);
}
.category-card[data-cat="track-lights"] .category-card-icon {
background-image: var(--cat-icon-track-lights);
}
.category-card[data-cat="cove-lighting"] .category-card-icon {
background-image: var(--cat-icon-cove-lighting);
}
/* Decorative */
.category-card[data-cat="chandeliers"] .category-card-icon {
background-image: var(--cat-icon-chandeliers);
}
.category-card[data-cat="decorative-wall-lights"] .category-card-icon {
background-image: var(--cat-icon-decorative-wall-lights);
}
.category-card[data-cat="floor-table-lamps"] .category-card-icon {
background-image: var(--cat-icon-floor-table-lamps);
}
/* Lighting controls */
.category-card[data-cat="motion-sensors"] .category-card-icon {
background-image: var(--cat-icon-motion-sensors);
}
.category-card[data-cat="touch-panels"] .category-card-icon {
background-image: var(--cat-icon-touch-panels);
}
.category-card[data-cat="wireless-switches"] .category-card-icon {
background-image: var(--cat-icon-wireless-switches);
}
.category-card[data-cat="wifi-controllers"] .category-card-icon {
background-image: var(--cat-icon-wifi-controllers);
}
.category-card[data-cat="smart-drivers"] .category-card-icon {
background-image: var(--cat-icon-smart-drivers);
}
/* Coming-soon variant — used on landing pages where the sub-cat catalogue
is still in build. Same shell, no link, dimmed icon, "Coming soon" CTA. */
.category-card.category-card--coming-soon {
cursor: default;
pointer-events: none;
}
.category-card.category-card--coming-soon .category-card-icon {
opacity: 0.42;
filter: saturate(0.5);
}
.category-card.category-card--coming-soon .category-card-cta {
color: var(--bi-ink-soft, #6a6a6a);
opacity: 0.7;
}
.category-card-eyebrow {
position: relative;
z-index: 2;
font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--bi-graphite, #2c2c2c);
align-self: end;
grid-row: 1;
}
.category-card-title {
position: relative;
z-index: 2;
font-family: var(--font-display, "Cormorant Garamond", serif);
font-weight: 400;
font-size: clamp(24px, 2.4vw, 32px);
line-height: 1.05;
letter-spacing: -0.02em;
color: var(--bi-ink);
margin: 0;
max-width: 11ch;
grid-row: 3;
}
.category-card-title::after {
content: ".";
color: var(--bi-glow);
margin-left: 1px;
}
/* Body — paper background with chips + CTA */
.category-card-body {
background: var(--bi-pure);
padding: 18px 22px 20px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
flex-wrap: wrap;
}
.category-card-specs {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 6px 12px;
}
.category-card-specs li {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
color: var(--bi-graphite, #2c2c2c);
letter-spacing: 0.01em;
}
.category-card-specs li i {
color: var(--bi-glow);
}
.category-card-cta {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 13.5px;
font-weight: 500;
color: var(--bi-ink);
letter-spacing: 0.01em;
white-space: nowrap;
transition: gap .25s var(--ease), color .25s var(--ease);
}
.category-card-cta svg {
transition: transform .25s var(--ease);
}
/* Hover */
.category-card:hover {
border-color: var(--bi-ink);
transform: translateY(-3px);
box-shadow: 0 18px 40px -22px rgba(10, 10, 10, 0.22);
}
.category-card:hover .category-card-icon {
filter: saturate(1.25) brightness(1.05);
transform: scale(1.05);
}
.category-card:hover .category-card-cta {
color: var(--bi-glow);
gap: 12px;
}
.category-card:hover .category-card-cta svg {
transform: translateX(2px);
}
.category-card:focus-visible {
outline: 2px solid var(--bi-glow);
outline-offset: -2px;
}
/* ============================================================
Image lightbox — overlay viewer for gallery archive clicks.
Built by main.js. Stays out of layout until activated.
============================================================ */
.lightbox {
position: fixed;
inset: 0;
z-index: 9999;
background: rgba(10, 10, 10, 0.94);
display: none;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity .25s ease;
}
.lightbox.is-open {
display: flex;
opacity: 1;
}
body.lightbox-open {
overflow: hidden;
}
.lightbox-stage {
position: relative;
max-width: min(92vw, 1600px);
max-height: 86vh;
display: flex;
align-items: center;
justify-content: center;
}
.lightbox-img {
max-width: 92vw;
max-height: 86vh;
width: auto;
height: auto;
display: block;
object-fit: contain;
opacity: 0;
transition: opacity .3s ease;
}
.lightbox-img.is-loaded {
opacity: 1;
}
.lightbox-spinner {
position: absolute;
width: 40px;
height: 40px;
border: 2px solid rgba(244, 184, 96, 0.25);
border-top-color: var(--bi-glow);
border-radius: 50%;
animation: lightbox-spin .8s linear infinite;
opacity: 0;
transition: opacity .2s ease;
pointer-events: none;
}
.lightbox-spinner.is-visible {
opacity: 1;
}
@keyframes lightbox-spin {
to {
transform: rotate(360deg);
}
}
.lightbox-close,
.lightbox-prev,
.lightbox-next {
position: absolute;
background: rgba(20, 20, 20, 0.72);
border: 1px solid rgba(255, 255, 255, 0.15);
color: #f5f5f0;
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background .2s ease, border-color .2s ease, color .2s ease;
z-index: 2;
padding: 0;
font: inherit;
}
.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover {
background: rgba(40, 40, 40, 0.95);
border-color: var(--bi-glow);
color: var(--bi-glow);
}
.lightbox-close:focus-visible,
.lightbox-prev:focus-visible,
.lightbox-next:focus-visible {
outline: 2px solid var(--bi-glow);
outline-offset: 2px;
}
.lightbox-close {
top: 24px;
right: 24px;
}
.lightbox-prev {
left: 24px;
top: 50%;
transform: translateY(-50%);
}
.lightbox-next {
right: 24px;
top: 50%;
transform: translateY(-50%);
}
.lightbox-counter {
position: absolute;
bottom: 24px;
left: 50%;
transform: translateX(-50%);
color: rgba(245, 245, 240, 0.85);
font-size: 13px;
letter-spacing: 0.06em;
background: rgba(20, 20, 20, 0.72);
padding: 8px 16px;
border: 1px solid rgba(255, 255, 255, 0.12);
z-index: 2;
}
@media (max-width: 640px) {
.lightbox-close {
top: 14px;
right: 14px;
width: 40px;
height: 40px;
}
.lightbox-prev {
left: 8px;
width: 40px;
height: 40px;
}
.lightbox-next {
right: 8px;
width: 40px;
height: 40px;
}
.lightbox-counter {
bottom: 14px;
font-size: 12px;
padding: 6px 12px;
}
}
/* Feature-card icon size — placed AFTER the base mask rule so width / height /
mask-size win on source order. Box is 44×44; mask-size 110% crops past the
16-unit viewBox padding so the visible glyph fills more of the box. */
.info-feature-grid li i {
width: 44px;
height: 44px;
flex: 0 0 44px;
font-size: 44px;
-webkit-mask-size: 110% 110%;
mask-size: 110% 110%;
-webkit-mask-position: center;
mask-position: center;
}
/* Gold-glow accent on featured spec icons (visible without hover) */
.product-card-specs i {
color: var(--bi-glow);
transition: color .25s var(--ease), transform .25s var(--ease);
}
.product-card:hover .product-card-specs i {
transform: translateY(-1px);
}
/* ============================================================
RESPONSIVE FIXES — sitewide audit refinements
Synthesized from a 4-surface responsive QA pass (header, footer,
homepage/landing, modals/buttons/products/gallery). Grouped by
problem class so future tweaks land in the right block.
============================================================ */
/* ── 1 · Touch targets (WCAG 2.5.5 / Apple HIG 44px) ──────── */
/* iOS Safari auto-zooms inputs below 16px on focus, killing the modal flow. */
@media (max-width: 600px) {
.field input,
.field select,
.field textarea {
font-size: 16px;
}
}
/* Modal close X — 36 to 44px on mobile (replaces dead 500px rule below). */
@media (max-width: 600px) {
.modal-close {
width: 44px;
height: 44px;
top: 12px;
right: 12px;
}
.modal-close svg {
width: 18px;
height: 18px;
}
}
/* Drawer sublist links (category sub-pages on mobile) — was ~30px tall. */
@media (max-width: 960px) {
.drawer-sublist li a {
min-height: 44px;
display: flex;
align-items: center;
padding: 6px 0;
}
}
/* Footer social icons — was 36px (below touch floor), bump to 40px + gap. */
@media (max-width: 600px) {
.bi-footer-info-social {
gap: 12px;
}
.bi-footer-info-social a {
width: 40px;
height: 40px;
}
}
/* Footer Privacy / Terms / Sitemap links — give them a 44px tap zone. */
@media (max-width: 600px) {
.bi-footer-legal a {
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 6px 0;
}
}
/* .bi-btn--xs (tiny inline CTAs) is only 24px tall on a mouse, too small
for a thumb. Bump on touch pointers regardless of viewport. */
@media (pointer: coarse) {
.bi-btn--xs {
padding: 10px 14px;
min-height: 40px;
}
}
/* ── 2 · Layout bugs ───────────────────────────────────────── */
/* Quick-connect mobile FAB row pushed the footer down via .site-footer,
but the active footer is .bi-footer. Without this, the FAB overlays the
bottom legal links on phones. */
@media (max-width: 480px) {
.bi-footer {
padding-bottom: 80px;
}
}
/* Footer info row at 760-560px was 1fr 1fr with the brand spanning both
columns + 3 info cols → orphan. Force a clean 3-col info row with the
brand on its own line above. */
@media (max-width: 1100px) and (min-width: 561px) {
.bi-footer-info {
grid-template-columns: repeat(3, 1fr);
gap: 32px 28px;
}
.bi-footer-info-brand {
grid-column: 1 / -1;
max-width: 640px;
}
}
/* Hero CTAs left stranded next to a 400px-wide hero title on mobile.
Stretch the column so each pill spans full width. */
@media (max-width: 600px) {
.hero-cta {
flex-direction: column;
align-items: stretch;
}
.hero-cta .bi-btn,
.hero-cta .btn {
justify-content: center;
}
/* Hero scroll-cue is hidden on mobile already; trim now-wasted
bottom padding so the hero does not feel bottom-heavy. */
.hero {
padding-bottom: clamp(36px, 8vw, 64px);
}
}
/* Hero title clamp discontinuity at the 480px breakpoint — the outer
clamp(32,6.5vw,104) bottomed at 32 while the inner clamp(26,7.5vw,36)
peaked at 36, so the title GREW as the viewport shrank across it. Align. */
@media (max-width: 600px) {
.hero-title {
font-size: clamp(28px, 7.5vw, 40px);
}
}
/* Brand grid was 1-col on mobile = 9 stacked cards ~1620px of scroll.
Switch to 2-col with the featured Hybec card spanning both. */
@media (max-width: 600px) {
.brand-grid {
grid-template-columns: 1fr 1fr;
gap: 1px;
}
.brand-card {
min-height: 160px;
padding: 22px 14px;
}
.brand-card--featured {
grid-column: 1 / -1;
min-height: 240px;
padding: 32px 24px;
}
.brand-desc {
font-size: 12.5px;
}
}
/* Featured Hybec card shrunk to content height (min-height:0 inheritance),
leaving a tall empty band under it on desktop. Stretch it. */
@media (min-width: 1001px) {
.brand-card--featured {
min-height: 100%;
}
}
/* Clients-slider section was using hardcoded padding: 0 32px while every
other section uses var(--gutter). Content edges drifted across the page.
Re-anchor to the gutter system. */
.clients-slider-band {
padding-left: clamp(20px, 4vw, 56px);
padding-right: clamp(20px, 4vw, 56px);
}
.clients-slider-inner {
padding-left: 0;
padding-right: 0;
}
.clients-slider {
margin-left: calc(-1 * clamp(20px, 4vw, 56px));
margin-right: calc(-1 * clamp(20px, 4vw, 56px));
}
/* Mega menu cards never collapsed before the 960px hard-hide. Add an
intermediate 4-col state for tablet-landscape / small laptop. */
@media (min-width: 961px) and (max-width: 1200px) {
.mega-cards {
grid-template-columns: repeat(4, 1fr);
}
}
/* Drawer footer Book Free Consultation was converted to .bi-btn--md, but
the legacy override that centered .btn--primary in the drawer foot is
now orphaned. Re-apply alignment to the canonical class. */
.drawer-foot .bi-btn--solid {
align-self: stretch;
justify-content: center;
}
/* Bento went straight from desktop 2-col / 4-row to a single column at
900px — ~1500px of vertical scroll on tablet for just the bento.
Insert a 2x2 intermediate state. */
@media (max-width: 1100px) and (min-width: 700px) {
.bento {
grid-template-columns: 1fr 1fr;
grid-auto-rows: minmax(280px, auto);
}
.bento-tile {
min-height: 280px;
}
.bento-tile--lg {
grid-column: 1 / -1;
min-height: 360px;
}
}
/* Brand marquee was running FASTER on mobile (32s vs 42s desktop) where
small-screen legibility is already worst. Slow it down. */
@media (max-width: 600px) {
.brands-track {
animation-duration: 50s;
}
}
/* ── 3 · Forms & modals ────────────────────────────────────── */
/* Form actions — primary + cancel on the same line creates ambiguous
hierarchy on mobile. Stack as column with primary on top. */
@media (max-width: 600px) {
.form-actions {
flex-direction: column;
align-items: stretch;
gap: 8px;
}
.form-actions .bi-btn {
justify-content: center;
}
.modal-cancel {
order: 2;
text-align: center;
padding: 12px;
}
}
/* Modal product context bar — at 320-360px the 40px icon + label + tag
eat too much horizontal space. Shrink the icon. */
@media (max-width: 480px) {
.modal-product-context {
padding: 12px 14px;
gap: 10px;
}
.modal-product-context-icon {
width: 32px;
height: 32px;
font-size: 13px;
}
.modal-product-context-name {
font-size: 15px;
}
}
/* Safety net: if a product label arrives as a single unbreakable token
(model code with no spaces), let it break-anywhere rather than overflow. */
.modal-product-context-name {
overflow-wrap: anywhere;
}
/* ── 4 · Footer bottom + chrome ─────────────────────────────── */
/* Bottom legal bar was wrapping mid-600s with copy/credit/legal links
landing in awkward overlapping positions. Stack vertically earlier. */
@media (max-width: 760px) {
.bi-footer-bottom {
flex-direction: column;
align-items: flex-start;
gap: 14px;
}
}
/* Quick-connect FAB stack — fully hide whenever a full-screen overlay is open
(consultation modal OR the mobile nav drawer). On mobile the FAB row sits
at the viewport bottom (12px from each edge) and would otherwise overlap
the drawer's address / Book Consultation CTA at the foot, and bleed
through the modal scrim's lower edge. */
body.modal-open .cn-cb-fab-stack,
body.drawer-open .cn-cb-fab-stack {
display: none !important;
}
/* ============================================================
Coming-soon category pages — shared layout for track-lights,
cove-lighting, chandeliers, wall-lights, floor-table-lamps,
smart-drivers. Template lives at components/coming-soon-page.php.
============================================================ */
.coming-soon-hero {
background: var(--bi-paper);
border-bottom: 1px solid var(--bi-line);
}
.coming-soon-hero-inner {
max-width: var(--container);
margin: 0 auto;
padding: clamp(40px, 6vw, 80px) var(--gutter);
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: clamp(28px, 4vw, 56px);
align-items: center;
}
.coming-soon-hero-body { max-width: 56ch; }
.coming-soon-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
background: rgba(244, 184, 96, 0.14);
color: var(--bi-glow);
border: 1px solid rgba(244, 184, 96, 0.35);
border-radius: 999px;
font-family: var(--font-body);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
}
.coming-soon-title {
margin: 18px 0 14px;
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(28px, 4vw, 44px);
line-height: 1.15;
letter-spacing: -0.02em;
color: var(--bi-ink);
}
.coming-soon-title em {
font-style: normal;
color: var(--bi-glow);
}
.coming-soon-lede {
margin: 0 0 28px;
font-family: var(--font-body);
font-size: clamp(15px, 1.4vw, 17px);
line-height: 1.65;
color: var(--bi-mist);
}
.coming-soon-actions {
display: flex;
align-items: center;
gap: 18px;
flex-wrap: wrap;
}
.coming-soon-hero-img {
margin: 0;
aspect-ratio: 1 / 1;
overflow: hidden;
border: 1px solid var(--bi-line);
background: var(--bi-pure);
}
.coming-soon-hero-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Related-categories grid on coming-soon pages */
.cs-related-grid {
list-style: none;
margin: 36px 0 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 14px;
}
.cs-related-card a {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 18px 20px;
background: var(--bi-pure);
border: 1px solid var(--bi-line);
color: var(--bi-ink);
text-decoration: none;
font-family: var(--font-display);
font-weight: 400;
font-size: 15.5px;
line-height: 1.25;
transition: border-color .2s var(--ease), transform .2s var(--ease), background .2s var(--ease);
}
.cs-related-card a:hover {
border-color: var(--bi-glow);
background: rgba(244, 184, 96, 0.06);
transform: translateY(-1px);
}
.cs-related-arrow {
color: var(--bi-glow);
font-size: 16px;
flex: 0 0 auto;
transition: transform .2s var(--ease);
}
.cs-related-card a:hover .cs-related-arrow {
transform: translateX(2px);
}
/* Final CTA box on coming-soon pages */
.cs-cta-box {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: clamp(20px, 3vw, 40px);
padding: clamp(28px, 4vw, 48px);
background: var(--bi-ink);
color: var(--bi-paper);
border: 1px solid var(--bi-ink);
}
.cs-cta-text { flex: 1 1 360px; }
.cs-cta-title {
margin: 0 0 8px;
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(22px, 2.6vw, 28px);
line-height: 1.2;
letter-spacing: -0.015em;
color: var(--bi-paper);
}
.cs-cta-title em {
font-style: normal;
color: var(--bi-glow);
}
.cs-cta-desc {
margin: 0;
font-family: var(--font-body);
font-size: 14.5px;
line-height: 1.6;
color: rgba(246, 245, 238, 0.8);
max-width: 56ch;
}
/* Mobile collapse for coming-soon hero — image moves below the text */
@media (max-width: 760px) {
.coming-soon-hero-inner {
grid-template-columns: 1fr;
}
.coming-soon-hero-img {
max-width: 380px;
margin: 0 auto;
}
}
/* ============================================================
Our-team page — "team profiles coming soon" card. Sits where
the live team-grid will eventually live. Reuses .coming-soon-badge
from the coming-soon page template.
============================================================ */
.team-soon-card {
max-width: 820px;
margin: 0 auto;
padding: clamp(36px, 5vw, 64px) clamp(28px, 4vw, 56px);
background: var(--bi-pure);
border: 1px solid var(--bi-line);
text-align: center;
}
.team-soon-title {
margin: 18px 0 14px;
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(24px, 3.4vw, 36px);
line-height: 1.2;
letter-spacing: -0.018em;
color: var(--bi-ink);
}
.team-soon-title em {
font-style: normal;
color: var(--bi-glow);
}
.team-soon-lede {
max-width: 60ch;
margin: 0 auto 32px;
font-family: var(--font-body);
font-size: clamp(14.5px, 1.3vw, 16px);
line-height: 1.65;
color: var(--bi-mist);
}
.team-soon-roles {
list-style: none;
margin: 0 0 36px;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 12px;
text-align: left;
}
.team-soon-roles li {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
background: var(--bi-paper);
border: 1px solid var(--bi-line);
font-family: var(--font-body);
font-size: 14px;
line-height: 1.3;
color: var(--bi-ink);
}
.team-soon-roles li i {
color: var(--bi-glow);
font-size: 18px;
flex: 0 0 auto;
}
.team-soon-actions {
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
flex-wrap: wrap;
}