/* ============================================================
   Visiolite — Basalte-inspired concept
   ============================================================ */

:root{
  --bg: #ffffff;
  --ink: #17181a;
  --ink-soft: #55585c;
  --black: #060606;
  --black-2: #0d0d0d;
  --panel: #f3f1ec;
  --panel-2: #ece9e2;
  --line: rgba(255,255,255,0.14);
  --line-dark: rgba(0,0,0,0.1);
  --gold: #a6915a;
  --gold-soft: #c7b689;
  --white: #ffffff;

  --font: 'Jost', 'Segoe UI', Helvetica, Arial, sans-serif;

  --container: 1240px;
  --pad: clamp(24px, 5vw, 72px);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  font-weight: 400;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family:inherit; }

h1,h2,h3,h4{
  font-weight: 300;
  line-height: 1.15;
  margin: 0 0 18px;
  letter-spacing: 0.2px;
}
h1{ font-size: clamp(38px, 6vw, 68px); }
h2{ font-size: clamp(30px, 4.2vw, 46px); }
h3{ font-size: clamp(20px, 2.4vw, 26px); font-weight:400; }
p{ margin:0 0 16px; line-height:1.75; color: inherit; font-weight:400; }

.eyebrow{
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 12px;
  color: var(--gold);
  font-weight: 500;
  margin-bottom: 14px;
  display:inline-block;
}

.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--pad);
}

.link-arrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color: var(--gold);
  font-size: 15px;
  letter-spacing: 0.5px;
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, gap .25s ease;
}
.link-arrow:hover{ border-color: var(--gold); gap:14px; }
.link-arrow svg{ width:16px; height:16px; flex:none; }

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 16px 34px;
  border: 1px solid currentColor;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.btn-light{ color:#fff; }
.btn-light:hover{ background:#fff; color:#000; }
.btn-dark{ color:#000; }
.btn-dark:hover{ background:#000; color:#fff; }
.btn-gold{ background: var(--gold); border-color: var(--gold); color:#080604; }
.btn-gold:hover{ background: transparent; color: var(--gold); }

.cta-row{ display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap; }

/* ---------------- Nav ---------------- */
.nav{
  position: fixed;
  top:0; left:0; right:0;
  z-index: 500;
  display:flex;
  align-items:center;
  padding: 26px var(--pad);
  transition: background .35s ease, padding .35s ease, box-shadow .35s ease;
}
.nav.is-solid{
  background: rgba(6,6,6,0.92);
  backdrop-filter: blur(6px);
  padding-top: 16px;
  padding-bottom: 16px;
  box-shadow: 0 1px 0 var(--line);
}
.nav .brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-size: 24px;
  color:#fff;
  letter-spacing: normal;
  margin-right: auto;
}
.nav .brand .icon{
  width:22px;height:22px;
  flex: none;
  object-fit: contain;
}
.nav .brand small{
  display:block;
  font-size: 10px;
  letter-spacing: 2px;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
  font-weight: 300;
  margin-top: 2px;
}
.nav-links{
  display:flex;
  gap: 40px;
}
.nav-links a{
  color: rgba(255,255,255,0.85);
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, color .25s ease;
}
.nav-links a:hover, .nav-links a.active{ color:#fff; border-color: var(--gold); }

.nav-toggle{
  width: 34px; height: 22px;
  position: relative;
  cursor:pointer;
  background:none; border:none; padding:0;
  display:none;
}
.nav-toggle span{
  position:absolute; left:0; right:0; height:1px; background:#fff;
  transition: transform .3s ease, opacity .3s ease, top .3s ease;
}
.nav-toggle span:nth-child(1){ top:0; }
.nav-toggle span:nth-child(2){ top:10px; }
.nav-toggle span:nth-child(3){ top:20px; }

@media (max-width: 860px){
  .nav-links{ display:none; }
  .nav-toggle{ display:block; }
}

/* Mobile / overlay menu */
.overlay-menu{
  position: fixed; inset:0;
  background: rgba(6,6,6,0.98);
  z-index: 600;
  display:flex;
  flex-direction: column;
  justify-content:flex-start;
  padding: var(--pad);
  padding-top: max(var(--pad), 90px);
  overflow-y: auto;
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform .45s ease, visibility 0s linear .45s;
}
.overlay-menu.is-open{
  transform: translateY(0);
  visibility: visible;
  transition: transform .45s ease, visibility 0s linear 0s;
}
.overlay-menu .close-btn{
  position:absolute; top:26px; right:var(--pad);
  background:none; border:none; color:#fff; font-size:28px; cursor:pointer;
  line-height:1;
}
.overlay-menu ul{ display:flex; flex-direction:column; gap:6px; }
.overlay-menu a{
  font-size: clamp(28px, 6vw, 48px);
  color:#fff;
  font-weight:300;
  padding: 10px 0;
  display:inline-block;
  border-bottom: 1px solid var(--line);
}
.overlay-menu a:hover{ color: var(--gold); }
.overlay-menu .om-sub{ margin-top: 46px; display:flex; gap:60px; flex-wrap:wrap; }
.overlay-menu .om-sub h4{ color: var(--gold); font-size:12px; letter-spacing:2px; text-transform:uppercase; margin-bottom:14px; }
.overlay-menu .om-sub a{ font-size:16px; border:none; padding:6px 0; color: rgba(255,255,255,0.75); }

/* ---------------- Hero ---------------- */
.hero{
  position: relative;
  height: 100vh;
  min-height: 560px;
  display:flex;
  align-items:flex-end;
  color:#fff;
  overflow:hidden;
}
.hero img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit: cover;
  z-index:0;
}
.hero::after{
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.15) 40%, rgba(0,0,0,0.75) 100%);
  z-index:1;
}
.hero-content{
  position:relative; z-index:2;
  width:100%;
  padding: 0 var(--pad) 90px;
}
.hero-content *{ text-shadow: 0 2px 20px rgba(0,0,0,0.5); }
.hero h1{ max-width: 760px; margin-bottom: 22px; }
.hero p{ max-width: 480px; color: rgba(255,255,255,0.82); font-size:17px; }
.hero .scroll-cue{
  position:absolute; right: var(--pad); bottom: 40px; z-index:2;
  color: rgba(255,255,255,0.7); font-size:12px; letter-spacing:2px; text-transform:uppercase;
  display:flex; align-items:center; gap:10px;
}
.hero .scroll-cue::after{
  content:''; width:1px; height:40px; background: rgba(255,255,255,0.5);
  animation: pulseline 2s infinite;
}
@keyframes pulseline{ 0%{opacity:.2;} 50%{opacity:1;} 100%{opacity:.2;} }

/* ---------------- Sections ---------------- */
section{ position: relative; }
.section-dark{ background: var(--black); color:#fff; }
.section-dark2{ background: var(--black-2); color:#fff; }
.section-panel{ background: var(--panel); color: var(--ink); }
.section-pad{ padding: clamp(70px, 10vw, 140px) 0; }

/* Split (image + text) */
.split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  min-height: 640px;
}
.split-text{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding: 60px var(--pad);
}
/* Light-safe by default — a section must be explicitly dark to earn light text.
   This is the inverse of the old (buggy) design where every light section had
   to remember to opt out of a light-text default; forgetting one caused
   invisible white-on-white text in three separate places. */
.split-text p{ max-width: 460px; color: var(--ink-soft); }
.section-dark .split-text p,
.section-dark2 .split-text p,
.product-hero-split .split-text p{ color: rgba(255,255,255,0.72); }
.split-media{ position:relative; min-height: 340px; }
.split-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.split.reverse{ direction: rtl; }
.split.reverse > *{ direction: ltr; }

@media (max-width: 900px){
  .split{ grid-template-columns: 1fr; min-height:auto; }
  .split-media{ min-height: 340px; order:-1; }
  .split-text{ padding: 56px var(--pad); }
}

/* Section heading block, centered */
.section-head{
  text-align:center;
  max-width: 640px;
  margin: 0 auto 64px;
}
.section-head p{ color: var(--ink-soft); }
.section-dark .section-head p,
.section-dark2 .section-head p{ color: rgba(255,255,255,0.65); }

/* Category row — 4 per row (wrapping to a centered second row of 3 for
   our 7 categories) rather than cramming all 7 into one row, so each tile
   reads bigger on desktop. */
.category-row{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap: 18px;
}
.category-tile{
  position:relative;
  flex: 0 1 calc(25% - 13.5px);
  aspect-ratio: 3/4;
  overflow:hidden;
  background:#000;
  border: 1px solid var(--line);
}
.category-tile img{
  width:100%; height:100%; object-fit:cover;
  filter: grayscale(15%) brightness(0.82);
  transition: transform .6s ease, filter .6s ease;
}
.category-tile:hover img{ transform: scale(1.06); filter: grayscale(0%) brightness(0.95); }
.category-tile .label{
  position:absolute; left:0; right:0; bottom:0;
  padding: 16px 14px;
  background: linear-gradient(0deg, rgba(0,0,0,0.85), rgba(0,0,0,0));
  font-size: 12.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color:#fff;
}
.category-tile .count{
  display:block;
  color: var(--gold-soft);
  font-size:11px;
  letter-spacing: 1px;
  margin-top:4px;
  text-transform: none;
}
@media (max-width: 620px){
  .category-tile{ flex-basis: calc(50% - 9px); }
}

/* Feature / installation grid */
.feature-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.feature-card{
  position:relative;
  aspect-ratio: 4/5;
  overflow:hidden;
  background:#000;
}
.feature-card img{
  width:100%; height:100%; object-fit:cover;
  transition: transform .7s ease;
}
.feature-card:hover img{ transform: scale(1.05); }
.feature-card .overlay{
  position:absolute; left:0; right:0; bottom:0;
  padding: 26px 24px;
  background: linear-gradient(0deg, rgba(0,0,0,0.88) 10%, rgba(0,0,0,0.1) 90%);
}
.feature-card .overlay h3{ color:#fff; margin-bottom:6px; }
.feature-card .overlay span{ color: rgba(255,255,255,0.65); font-size: 13px; letter-spacing:.5px; }
@media (max-width: 900px){
  .feature-grid{ grid-template-columns: 1fr; }
}

/* Static showcase row — real architectural project photography, sized to
   match the feature-grid above it but with no link/overlay, since these
   are illustrative rather than a path to a category page. */
.showcase-row{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 18px;
}
.showcase-tile{
  position:relative;
  aspect-ratio: 4/5;
  overflow:hidden;
  background:#000;
}
.showcase-tile img{ width:100%; height:100%; object-fit:cover; }
@media (max-width: 900px){
  .showcase-row{ grid-template-columns: 1fr; }
}

/* Cinematic full bleed */
.cinematic{
  position: relative;
  min-height: 76vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#fff;
  overflow:hidden;
}
.cinematic img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.cinematic::after{
  content:''; position:absolute; inset:0; z-index:1;
  background: radial-gradient(ellipse 640px 420px at center, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.55) 55%, rgba(0,0,0,0.38) 100%);
}
.cinematic .inner{ position:relative; z-index:2; max-width: 620px; padding: 0 24px; }
.cinematic .inner *{ text-shadow: 0 2px 24px rgba(0,0,0,0.65); }
.cinematic p{ color: rgba(255,255,255,0.85); }

/* Scroll reveal */
.reveal{ opacity:0; transform: translateY(24px); transition: opacity .8s ease, transform .8s ease; }
.reveal.is-visible{ opacity:1; transform:none; }

/* ---------------- Footer ---------------- */
.footer{
  background: var(--black);
  color: rgba(255,255,255,0.75);
  padding: 90px 0 30px;
}
.footer-top{
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 60px;
  border-bottom: 1px solid var(--line);
}
.footer-brand .brand{ color:#fff; font-size:24px; margin-bottom:16px; display:flex; align-items:center; gap:10px;}
.footer-brand .icon{ width:22px;height:22px; object-fit:contain; }
.footer-brand p{ max-width: 280px; color: rgba(255,255,255,0.55); font-size: 14px; }
.footer h4{
  color: var(--gold);
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 20px;
  font-weight:500;
}
.footer ul li{ margin-bottom: 12px; }
.footer a{ font-size: 14px; color: rgba(255,255,255,0.7); transition: color .2s ease; }
.footer a:hover{ color: var(--gold); }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center;
  padding-top: 26px;
  font-size: 12.5px;
  color: rgba(255,255,255,0.4);
  flex-wrap:wrap;
  gap: 14px;
}
.footer-social{ display:flex; gap:16px; align-items:center; }
.footer-social a{ display:flex; color: rgba(255,255,255,0.7); transition: color .2s ease; }
.footer-social a:hover{ color: var(--gold); }
.footer-social svg{ width:18px; height:18px; }

@media (max-width: 860px){
  .footer-top{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px){
  .footer-top{ grid-template-columns: 1fr; }
}

/* ---------------- Product detail page ---------------- */
.breadcrumb{
  display:flex; align-items:center; gap:8px;
  font-size:12.5px; letter-spacing:.5px; text-transform:uppercase;
  color: rgba(255,255,255,0.55);
  margin-bottom: 20px;
}
.breadcrumb a{ color: rgba(255,255,255,0.75); }
.breadcrumb a:hover{ color: var(--gold); }

.product-hero-split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  min-height: 78vh;
  background: var(--black);
  color: #fff;
}
.product-hero-split .split-media{ min-height: 360px; }
.product-hero-split .split-text{ padding: 100px var(--pad) 60px; }
.product-hero-split .split-text .badges{ display:flex; flex-wrap:wrap; gap:8px; margin: 8px 0 24px; }
.product-hero-split .split-text .badges span{
  font-size: 11px; letter-spacing: .5px; text-transform: uppercase;
  color: var(--gold-soft);
  border: 1px solid rgba(255,255,255,0.2);
  padding: 5px 12px;
}
@media (max-width: 900px){
  .product-hero-split{ grid-template-columns: 1fr; min-height:auto; }
  .product-hero-split .split-text{ padding: 60px var(--pad); }
  /* .split-media picks up order:-1 from the generic .split mobile rule
     (meant for image-then-text content sections), which here pushed the
     product photo flush under the fixed nav with no breathing room, ahead
     of the breadcrumb/heading. Put it back in its natural DOM order —
     text first, photo after. */
  .product-hero-split .split-media{ order: 0; }
}

/* Exclusive-product detail pages */
.product-hero-split.pd-hero-light{
  background: var(--panel);
  color: var(--ink);
}
.product-hero-split.pd-hero-light .split-text p{ color: var(--ink-soft); }
.product-hero-split.pd-hero-light .breadcrumb{ color: var(--ink-soft); }
.product-hero-split.pd-hero-light .breadcrumb a{ color: var(--ink-soft); }
.product-hero-split.pd-hero-light .breadcrumb a:hover{ color: var(--gold); }

/* Nav bar over a light hero (pages that open on .pd-hero-light): keep
   the same dark solid bar + white text that .is-solid applies on scroll,
   permanently, so it's never washed out against the light hero at the top. */
.nav.on-light{
  background: rgba(6,6,6,0.92);
  backdrop-filter: blur(6px);
  padding-top: 16px;
  padding-bottom: 16px;
  box-shadow: 0 1px 0 var(--line);
}

.pd-section-head{ margin-bottom:36px; }
.pd-section-head .eyebrow{ display:block; margin-bottom:8px; }

.pd-char-row{
  display:flex; flex-wrap:wrap; align-items:center; gap:14px;
  margin-bottom: 36px;
}
.pd-char-row img{ height:34px; width:auto; }

.pd-spec-list{ border-top: 1px solid var(--line-dark); }
.pd-spec-list .row{
  display:grid; grid-template-columns: 220px 1fr;
  gap: 24px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line-dark);
}
.pd-spec-list .row dt{ color: var(--ink-soft); font-size:13px; letter-spacing:.3px; }
.pd-spec-list .row dd{ margin:0; }
.pd-spec-list .group-head{
  padding: 22px 0 8px;
  font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--gold); font-weight: 500;
  border-bottom: none;
}
.pd-spec-list .group-head:first-child{ padding-top:0; }
@media (max-width: 640px){
  .pd-spec-list .row{ grid-template-columns: 1fr; gap:4px; }
}

.pd-features{ margin: 0 0 40px; padding:0; list-style:none; }
.pd-features li{
  position:relative;
  padding: 14px 0 14px 30px;
  border-bottom: 1px solid var(--line-dark);
  color: var(--ink-soft);
  font-size: 15px;
}
.pd-features li:first-child{ padding-top:0; }
.pd-features li::before{
  content:'+'; position:absolute; left:0; top:14px;
  color: var(--gold); font-weight:500;
}

.pd-downloads{ display:flex; flex-wrap:wrap; gap:14px; margin: 40px 0; }

.pd-cta{
  display:flex; flex-wrap:wrap; align-items:center; gap:18px;
  padding: 30px 0; margin-top: 20px;
  border-top: 1px solid var(--line-dark);
}
.pd-cta .price{ font-size:22px; color: var(--ink); }
.pd-cta .price small{ display:block; font-size:11px; letter-spacing:1px; text-transform:uppercase; color:var(--ink-soft); }

.pd-media-grid{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin: 0 0 50px;
}
.pd-media-grid a{
  display:flex; align-items:center; justify-content:center;
  aspect-ratio: 1;
  padding: 18px;
  border: 1px solid var(--line-dark);
  background: #fff;
}
.pd-media-grid img{ width:100%; height:100%; object-fit:contain; }
@media (max-width: 640px){
  .pd-media-grid{ grid-template-columns: 1fr; }
}

.pd-video-wrap{
  position:relative; width:100%; aspect-ratio:16/9;
  margin: 0 0 50px;
  background:#000;
}
.pd-video-wrap iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* Project detail gallery */
.photo-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 46px 0;
}
.photo-grid a{ display:block; overflow:hidden; aspect-ratio: 1; background:#000; }
.photo-grid img{
  width:100%; height:100%; object-fit:cover;
  transition: transform .6s ease;
}
.photo-grid a:hover img{ transform: scale(1.06); }
.project-award{ height:56px; width:auto; margin-bottom:28px; }
@media (max-width: 760px){
  .photo-grid{ grid-template-columns: repeat(2, 1fr); }
}
/* Clicking a photo-grid/pd-media-grid thumbnail opens it here instead of a
   new tab — see initPhotoLightbox() in main.js. */
.photo-grid a, .pd-media-grid a{ cursor: zoom-in; }

/* Full-screen photo lightbox */
.lightbox{
  position: fixed; inset:0; z-index: 900;
  background: rgba(6,6,6,0.97);
  opacity:0; visibility:hidden;
  transition: opacity .3s ease, visibility 0s linear .3s;
}
.lightbox.is-open{
  opacity:1; visibility:visible;
  transition: opacity .3s ease, visibility 0s linear 0s;
}
.lightbox-stage{
  position:relative;
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  padding: 76px var(--pad);
}
.lightbox img{
  max-width:100%; max-height:100%;
  object-fit:contain;
  user-select:none; -webkit-user-drag:none;
}
/* Transparent product renders (pd-media-grid) are matted for a light
   background — on the near-black backdrop their semi-transparent edges
   blend with black and the colors come out visibly wrong. Give those a
   white plate instead of showing them raw on black. */
.lightbox img.on-white{
  background:#fff;
  padding: 28px;
  max-width: calc(100% - 56px);
  max-height: calc(100% - 56px);
}
.lightbox .lb-close{
  position:absolute; top:22px; right:var(--pad);
  background:none; border:none; color:#fff; font-size:30px; line-height:1;
  cursor:pointer; z-index:2;
}
.lightbox .lb-close:hover{ color: var(--gold); }
.lightbox .lb-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.25);
  color:#fff;
  width:48px; height:48px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition: background .2s ease, border-color .2s ease;
  z-index:2;
}
.lightbox .lb-nav:hover{ background: rgba(255,255,255,0.16); border-color: var(--gold); }
.lightbox .lb-nav svg{ width:22px; height:22px; }
.lightbox .lb-prev{ left: var(--pad); }
.lightbox .lb-next{ right: var(--pad); }
.lightbox .lb-counter{
  position:absolute; bottom:24px; left:50%; transform:translateX(-50%);
  color: rgba(255,255,255,0.65);
  font-size:12px; letter-spacing:1.5px;
}
@media (max-width: 700px){
  .lightbox-stage{ padding: 60px 14px; }
  .lightbox .lb-nav{ width:38px; height:38px; }
  .lightbox .lb-prev{ left:6px; }
  .lightbox .lb-next{ right:6px; }
  .lightbox .lb-close{ top:16px; }
}
/* A phone in landscape is short, not narrow — the max-width rule above
   never applies (landscape width is easily >700px), so the desktop-sized
   76px top/bottom padding was eating a third or more of the available
   height and capping the photo far smaller than in portrait. Target the
   height directly instead. */
@media (max-height: 500px){
  .lightbox-stage{ padding: 36px 46px; }
  .lightbox .lb-close{ top:6px; font-size:22px; }
  .lightbox .lb-nav{ width:34px; height:34px; }
  .lightbox .lb-nav svg{ width:18px; height:18px; }
  .lightbox .lb-counter{ bottom:8px; }
}

/* Product key features (3-up highlight blocks above the spec table) */
.key-features{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-bottom: 56px;
}
.feature-block{ border-top: 1px solid var(--line-dark); padding-top: 22px; }
.feature-block h3{ font-size: 16px; margin-bottom: 8px; }
.feature-block p{ font-size: 14px; color: var(--ink-soft); line-height:1.6; }
@media (max-width: 860px){ .key-features{ grid-template-columns: 1fr; gap:28px; } }

/* CCT swatch icons inline in the spec table */
.cct-token{
  display:inline-flex;
  align-items:center;
  gap:5px;
  white-space:nowrap;
  margin: 3px 4px 3px 0;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,0.045);
  font-size: 12.5px;
}
.cct-icon{ width:13px; height:13px; object-fit:contain; margin:0; }

/* On a narrow viewport each pill wraps to its own line and reads much
   wider relative to the screen than on desktop — the same fixed vertical
   padding then looks squashed/short. Scale the pill (and its icon) up to
   match. */
@media (max-width: 640px){
  .cct-token{ padding: 8px 16px; gap:8px; font-size: 15px; }
  .cct-icon{ width:16px; height:16px; }
  /* Each pill wraps to its own line, but the CCT column's width is set by
     the widest row in the whole table (some rows list 8-10 tokens), so a
     lone short pill like "4000K" sits left-aligned in a much wider cell —
     reading as lopsided space around it. Center it as a unit instead. */
  .spec-table td:has(.cct-token){ text-align:center; }
}

/* Spec table */
.spec-table-wrap{ overflow-x:auto; }
.spec-table{
  width:100%;
  border-collapse: collapse;
  font-size: 14px;
}
.spec-table th{
  text-align:left;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
  padding: 0 18px 14px 0;
  border-bottom: 1px solid var(--line-dark);
  white-space: nowrap;
}
.spec-table td{
  padding: 20px 18px 20px 0;
  border-bottom: 1px solid var(--line-dark);
  color: var(--ink-soft);
  vertical-align: top;
}
.spec-table td:first-child{ color: var(--ink); font-weight:400; white-space:nowrap; }
.spec-table tr:last-child td{ border-bottom:none; }

.dl-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.dl-chip{
  font-size: 10.5px;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--ink-soft);
  border: 1px solid var(--line-dark);
  padding: 5px 9px;
  white-space: nowrap;
  transition: border-color .2s ease, color .2s ease;
}
.dl-chip:hover{ border-color: var(--gold); color: var(--gold); }
.dl-none{ color: #b9b6ac; font-size: 12.5px; }

.product-nav-links{
  display:flex; justify-content:space-between; align-items:center;
  padding-top: 34px; margin-top: 50px;
  border-top: 1px solid var(--line-dark);
  font-size: 13px;
}

/* Category chip nav (switch between categories from a category page) */
.cat-switch{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  justify-content:center;
  margin: -20px 0 60px;
}
.cat-switch a{
  padding: 9px 20px;
  border: 1px solid var(--line-dark);
  font-size: 12.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink-soft);
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.cat-switch a:hover{ border-color: var(--gold); color: var(--ink); }
.cat-switch a.active{ background: var(--ink); border-color: var(--ink); color:#fff; }

/* Product grid (category pages) */
.product-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 46px 32px;
}
.product-card{ display:flex; flex-direction:column; }
.product-card .thumb{
  position:relative;
  aspect-ratio: 4/3;
  overflow:hidden;
  background: #efece5;
  margin-bottom: 20px;
}
.product-card .thumb img{
  width:100%; height:100%; object-fit:cover;
  transition: transform .6s ease;
}
.product-card:hover .thumb img{ transform: scale(1.045); }
.product-card h3{ font-size:19px; margin-bottom:8px; }
.product-card p{ font-size:14px; color: var(--ink-soft); margin-bottom:10px; }
.product-card .specs{
  display:flex; flex-wrap:wrap; gap:8px;
  margin-top:auto;
}
.product-card .specs span{
  font-size: 11px;
  letter-spacing: .5px;
  color: var(--ink-soft);
  border: 1px solid var(--line-dark);
  padding: 4px 10px;
  text-transform: uppercase;
}
@media (max-width: 980px){
  .product-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px){
  .product-grid{ grid-template-columns: 1fr; }
}

/* ---------------- Unique Product story sections ---------------- */
.up-section{
  min-height: 70vh;
  display:flex;
  align-items:center;
  padding: 70px 0;
  border-bottom: 1px solid var(--line-dark);
}
/* Exclusive Tech listing page — same component as the Projects page's
   teaser sections, but with half the vertical padding/min-height: with a
   short badges+paragraph content block, 70vh of forced centering left a
   lot of dead space above/below on this page specifically. */
.up-section.up-section--compact{ min-height: 35vh; padding: 35px 0; }
.up-section:nth-child(even){ background: var(--panel); }
.up-section .split{ min-height:auto; width:100%; align-items:center; }
.up-media{
  display:flex; align-items:center; justify-content:center;
  padding: 20px;
}
.up-media img{
  position: static;
  inset: auto;
  max-width: 100%;
  max-height: 68vh;
  width:auto; height:auto;
  object-fit: contain;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,0.12));
}
.up-badges{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  margin: 8px 0 26px;
}
.up-badges .swatch{
  height: 26px; width:auto;
  border-radius: 3px;
}
.up-badges .chip{
  font-size: 11px; letter-spacing: .5px; text-transform: uppercase;
  color: var(--ink-soft);
  border: 1px solid var(--line-dark);
  padding: 6px 12px;
  white-space: nowrap;
}
.up-number{
  font-size: 13px; letter-spacing: 2px; color: var(--gold);
  margin-bottom: 4px; display:block;
}
@media (max-width: 900px){
  .up-section{ min-height:auto; padding: 70px 0; }
  .up-section.up-section--compact{ padding: 35px 0; }
  .up-media img{ max-height: 40vh; }
}

/* Exclusive Tech preview grid (homepage) — 2-up, text-only cards. The full
   one-per-row experience with product photos lives on unique-products.html;
   this is a compact teaser so the homepage doesn't run six full-height
   sections deep. */
.exclusive-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 60px 60px;
}
.exclusive-card{
  border-top: 1px solid var(--line-dark);
  padding-top: 28px;
}
.exclusive-card p{ color: var(--ink-soft); max-width: 480px; }
@media (max-width: 760px){
  .exclusive-grid{ grid-template-columns: 1fr; gap: 44px; }
}

/* ---------------- Inner page hero (About / Contact) ---------------- */
.page-hero{
  position:relative;
  height: 52vh;
  min-height: 340px;
  display:flex;
  align-items:flex-end;
  color:#fff;
}
.page-hero img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.page-hero::after{
  content:''; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.3) 35%, rgba(0,0,0,0.82) 100%);
}
.page-hero .inner{ position:relative; z-index:2; padding: 0 var(--pad) 60px; }
.page-hero .inner *{ text-shadow: 0 2px 20px rgba(0,0,0,0.55); }

/* About page */
.story p{ color: var(--ink-soft); max-width: 760px; font-size: 16px; }
.founders{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-top: 30px;
}
.founder-card{ border-top: 1px solid var(--line); padding-top: 26px; }
.founder-card .role{ color: var(--gold); font-size:12px; letter-spacing:2px; text-transform:uppercase; display:block; margin-bottom:10px; }
.founder-card p{ font-size:14.5px; color: rgba(255,255,255,0.72); }
@media (max-width: 860px){ .founders{ grid-template-columns: 1fr; } }

/* Contact page */
.contact-grid{
  display:grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 70px;
}
.contact-info h3{ margin-top: 34px; margin-bottom:8px; }
.contact-info h3:first-child{ margin-top:0; }
.contact-info p{ color: var(--ink-soft); }
.contact-info a{ color: var(--ink); border-bottom:1px solid var(--line-dark); }
.contact-info a:hover{ color: var(--gold); border-color: var(--gold); }

/* Where to Buy — rep cards */
.reps-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.rep-card{
  border: 1px solid var(--line-dark);
  display:flex; flex-direction:column;
}
.rep-card-photo{ aspect-ratio: 4/3; overflow:hidden; background:#000; }
.rep-card-photo img{ width:100%; height:100%; object-fit:cover; }
.rep-card-body{ padding: 28px 26px; display:flex; flex-direction:column; flex:1; }
.rep-card-logo{ height:34px; width:auto; max-width:100%; object-fit:contain; margin-bottom:22px; align-self:flex-start; }
/* City Lighting Representatives' logo is a light/white mark meant for a
   dark backdrop (confirmed on their own site's navy header) — give it a
   matching dark chip rather than assuming every rep's logo works on white. */
.rep-card-body--dark-logo .rep-card-logo{ background: #3d4a6b; padding: 10px 16px; }
.rep-card-details{ margin-bottom: 22px; }
.rep-card-details .row{ padding: 10px 0; border-bottom: 1px solid var(--line-dark); }
.rep-card-details .row:first-child{ padding-top:0; }
.rep-card-details dt{ color: var(--ink-soft); font-size:11px; letter-spacing:1.5px; text-transform:uppercase; margin-bottom:4px; }
.rep-card-details dd{ margin:0; color: var(--ink); }
.rep-card-details a{ color: var(--ink); border-bottom:1px solid var(--line-dark); }
.rep-card-details a:hover{ color: var(--gold); border-color: var(--gold); }
.rep-card-note{ color: var(--ink-soft); font-size:12.5px; }
.rep-card-body .link-arrow{ margin-top:auto; }
@media (max-width: 900px){
  .reps-grid{ grid-template-columns: 1fr; }
}

.form-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-bottom:22px; }
.field label{
  display:block; font-size:12px; letter-spacing:1.5px; text-transform:uppercase;
  color: var(--ink-soft); margin-bottom:10px;
}
.field input, .field textarea{
  width:100%;
  border:none;
  border-bottom: 1px solid var(--line-dark);
  background: transparent;
  padding: 12px 2px;
  font-family: var(--font);
  font-size: 15px;
  color: var(--ink);
}
.field textarea{ resize: vertical; min-height: 120px; }
.field input:focus, .field textarea:focus{ outline:none; border-color: var(--gold); }
.form-note{ font-size:12.5px; color: var(--ink-soft); margin-top: 18px; }
@media (max-width: 860px){
  .contact-grid{ grid-template-columns: 1fr; gap: 50px; }
  .form-row{ grid-template-columns: 1fr; gap: 0; }
}

/* ---------------- SKU Builder ---------------- */
.sku-path{
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: clamp(17px, 2.6vw, 23px);
  letter-spacing: 0.5px;
  padding: 18px 22px;
  border: 1px solid var(--line-dark);
  border-radius: 4px;
  background: var(--panel);
  color: var(--ink);
  margin-bottom: 30px;
  word-break: break-all;
}
.sku-sections{
  display:flex;
  flex-wrap:wrap;
  gap: 26px 30px;
  margin-bottom: 26px;
}
.sku-section{ flex: 1 1 190px; min-width: 190px; }
.sku-section label{
  display:block; font-size:11px; letter-spacing:1.5px; text-transform:uppercase;
  color: var(--ink-soft); margin-bottom:10px;
}
.sku-section select{
  display:block;
  width:100%;
  margin:0;
  border:none;
  border-radius:0;
  border-bottom: 1px solid var(--line-dark);
  background-color: transparent;
  padding: 10px 20px 10px 2px;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink);
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355585c' stroke-width='1.5'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position: right 2px center;
  background-size: 13px;
}
.sku-section select:focus{ outline:none; border-color: var(--gold); }
/* iOS Safari zooms the page on focusing any form control under 16px —
   bump to 16px there specifically rather than site-wide, to keep the
   desktop size. */
@media (max-width: 640px){
  .sku-section select{ font-size: 16px; padding: 12px 22px 12px 2px; }
}

.sku-list-wrap{ margin-top: 54px; }
.sku-list-wrap h3{ margin-bottom: 18px; }
.sku-list-table{ width:100%; border-collapse:collapse; font-size:14px; margin-bottom:22px; }
.sku-list-table th{
  text-align:left; font-size:11px; letter-spacing:1px; text-transform:uppercase;
  color: var(--ink-soft); padding: 0 18px 10px 0; border-bottom: 1px solid var(--line-dark);
}
.sku-list-table td{ padding: 14px 18px 14px 0; border-bottom: 1px solid var(--line-dark); vertical-align:middle; white-space:nowrap; }
.sku-list-table tbody:empty::after{ content:''; }
.sku-pdf-link{ color: var(--gold); font-size:12.5px; text-transform:uppercase; letter-spacing:.5px; }
.sku-qty-btn{
  width:26px; height:26px; border:1px solid var(--line-dark); background:transparent;
  border-radius:4px; cursor:pointer; font-size:14px; color:var(--ink); line-height:1;
}
.sku-qty-btn:hover{ border-color: var(--gold); color: var(--gold); }
.sku-remove-btn{ margin-left:14px; }
.sku-qty-input{
  width:32px; text-align:center; border:none; background:transparent;
  font-size:14px; color:var(--ink); margin:0 6px;
}
.sku-list-empty{ font-size:14px; color: var(--ink-soft); padding: 4px 0 22px; }
.sku-list-actions{ display:flex; gap:14px; flex-wrap:wrap; }

@media (max-width: 640px){
  .sku-sections{ gap:20px; }
  .sku-section{ flex: 1 1 100%; }
  /* Rows are wide enough (long SKU strings, product names) to force
     horizontal scroll on a phone when nowrap; wrap instead so the table
     fits the viewport and the scroll wrapper never needs a scrollbar. */
  .sku-list-table{ font-size:12.5px; }
  .sku-list-table th{ padding: 0 8px 8px 0; }
  .sku-list-table td{ white-space:normal; word-break:break-all; padding: 12px 8px 12px 0; }
  .sku-qty-input{ width:24px; }
}

/* Datasheet request modal (shared across catalog product pages, replaces
   the old per-row Spec/Test/IES download chips) */
button.dl-chip{ background:transparent; cursor:pointer; font-family:inherit; }
.dl-request-modal{
  position: fixed; inset:0; z-index: 900;
  background: rgba(6,6,6,0.75);
  opacity:0; visibility:hidden;
  display:flex; align-items:center; justify-content:center;
  padding: 20px;
  transition: opacity .25s ease, visibility 0s linear .25s;
}
.dl-request-modal.is-open{
  opacity:1; visibility:visible;
  transition: opacity .25s ease, visibility 0s linear 0s;
}
.dl-request-dialog{
  position:relative;
  background:#fff;
  color: var(--ink);
  max-width: 420px; width:100%;
  max-height: calc(100vh - 40px);
  overflow-y:auto;
  padding: 42px 36px;
  border-radius:4px;
}
.dl-request-dialog h3{ margin-bottom:8px; }
.dl-request-item{ font-size:13px; color: var(--ink-soft); margin-bottom:26px; }
.dl-request-close{
  position:absolute; top:14px; right:16px;
  background:none; border:none; font-size:26px; line-height:1;
  color: var(--ink-soft); cursor:pointer;
}
.dl-request-close:hover{ color: var(--gold); }
@media (max-width: 480px){
  .dl-request-dialog{ padding: 32px 22px; }
}

/* Nav search button (opens the site-search modal) — a sibling of
   .nav-links (not nested inside it), so it stays visible on mobile where
   .nav-links itself is display:none. .brand's margin-right:auto clusters
   this + .nav-links + .nav-toggle flush right as one group, with the
   search icon sitting immediately left of "Home". */
.nav-search-btn{
  background:none; border:none; cursor:pointer;
  color: rgba(255,255,255,0.85);
  padding: 0;
  margin-right: 28px;
  display:flex; align-items:center;
}
.nav-search-btn:hover{ color: var(--gold); }
.nav-search-btn svg{ width:17px; height:17px; }

/* Site search modal — same overlay/dialog pattern as the datasheet-request
   modal, sized for a results list instead of a form. */
.site-search-modal{
  position: fixed; inset:0; z-index: 900;
  background: rgba(6,6,6,0.75);
  opacity:0; visibility:hidden;
  display:flex; align-items:flex-start; justify-content:center;
  padding: 20px;
  transition: opacity .25s ease, visibility 0s linear .25s;
}
.site-search-modal.is-open{
  opacity:1; visibility:visible;
  transition: opacity .25s ease, visibility 0s linear 0s;
}
.site-search-dialog{
  position:relative;
  background:#fff;
  color: var(--ink);
  max-width: 560px; width:100%;
  margin-top: 10vh;
  padding: 20px;
  border-radius:4px;
  max-height: calc(100vh - 10vh - 40px);
  display:flex; flex-direction:column;
}
.site-search-close{
  position:absolute; top:10px; right:12px;
  background:none; border:none; font-size:24px; line-height:1;
  color: var(--ink-soft); cursor:pointer;
}
.site-search-close:hover{ color: var(--gold); }
.site-search-input-wrap{
  display:flex; align-items:center; gap:10px;
  border-bottom: 1px solid var(--line-dark);
  padding: 6px 32px 14px 2px;
}
.site-search-input-wrap svg{ width:18px; height:18px; flex:none; color: var(--ink-soft); }
#siteSearchInput{
  flex:1; border:none; outline:none; background:transparent;
  font-family: var(--font); font-size: 17px; color: var(--ink);
}
.site-search-results{
  overflow-y: auto;
  margin-top: 6px;
}
.site-search-hint{ font-size:13.5px; color: var(--ink-soft); padding: 16px 2px; }
.site-search-result{
  display:flex; flex-direction:column; gap:2px;
  padding: 12px 2px;
  border-bottom: 1px solid var(--line-dark);
}
.site-search-result:last-child{ border-bottom:none; }
.site-search-result:hover .site-search-result-name{ color: var(--gold); }
.site-search-result-name{ font-size:15px; color: var(--ink); transition: color .15s ease; }
.site-search-result-meta{ font-size:12px; color: var(--ink-soft); letter-spacing:.3px; }

@media (max-width: 480px){
  .site-search-dialog{ margin-top: 0; padding: 16px; max-height: calc(100vh - 40px); }
  #siteSearchInput{ font-size: 16px; }
}