/* ============================================================
   INTEK LED — design system
   Concept: LED panels are built from modular cabinets in a grid,
   switching between a dark "screen-off" state and a glowing
   "screen-on" state. That duality drives the palette, the seam
   rules between sections, and the module-grid textures.
   ============================================================ */

/* Self-hosted fonts (no external requests) */
@font-face{
  font-family: 'Big Shoulders Display';
  src: url('../fonts/bsd-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face{
  font-family: 'Big Shoulders Display';
  src: url('../fonts/bsd-800.woff2') format('woff2');
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face{
  font-family: 'Big Shoulders Display';
  src: url('../fonts/bsd-900.woff2') format('woff2');
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face{
  font-family: 'IBM Plex Sans';
  src: url('../fonts/ips-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face{
  font-family: 'IBM Plex Sans';
  src: url('../fonts/ips-400i.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face{
  font-family: 'IBM Plex Sans';
  src: url('../fonts/ips-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face{
  font-family: 'IBM Plex Sans';
  src: url('../fonts/ips-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}

:root{
  --ink:        #0B1420;   /* screen-off navy */
  --panel:      #101A29;   /* panel surface, one step up from ink */
  --panel-2:    #16233795; /* translucent panel for overlays */
  --paper:      #EDF0EE;   /* light section background */
  --paper-2:    #E2E7E4;   /* slightly deeper light surface */
  --ink-text:   #12181F;   /* body text on paper */
  --signal:     #23C6E8;   /* LED glow blue — primary accent */
  --signal-dim: #17A3C2;
  --amber:      #F2A73B;   /* highlight / CTA */
  --amber-dim:  #D68F27;
  --steel:      #7E8CA1;   /* muted text / rules */
  --steel-soft: #A9B4C4;
  --line:       #24344a;   /* seam rule on dark */
  --line-light: #C9D0CC;   /* seam rule on paper */

  --display: 'Big Shoulders Display', 'Arial Narrow', sans-serif;
  --body: 'IBM Plex Sans', -apple-system, 'Segoe UI', sans-serif;

  --wrap: 1180px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--paper);
  color: var(--ink-text);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1.18;
  margin: 0;
  text-wrap: balance;
}
p{ margin: 0; }
.container{
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 28px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ============================================================
   ANIMATION SYSTEM
   ============================================================ */
@keyframes fadeUp{ from{ opacity:0; transform:translateY(32px); } to{ opacity:1; transform:translateY(0); } }
@keyframes floatY{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-9px); } }
@keyframes pulseRing{ 0%{ box-shadow:0 0 0 0 rgba(35,198,232,0.45); } 70%{ box-shadow:0 0 0 16px rgba(35,198,232,0); } 100%{ box-shadow:0 0 0 0 rgba(35,198,232,0); } }
@keyframes kenburns{ 0%{ transform:scale(1.0); } 100%{ transform:scale(1.05); } }
@keyframes marquee{ 0%{ transform:translateX(0); } 100%{ transform:translateX(-50%); } }
@keyframes dotPulse{ 0%,100%{ opacity:1; box-shadow:0 0 10px 2px var(--signal); } 50%{ opacity:0.55; box-shadow:0 0 4px 0px var(--signal); } }
@keyframes shimmerSweep{ 0%{ transform:translateX(-140%) skewX(-18deg); } 45%,100%{ transform:translateX(220%) skewX(-18deg); } }
@keyframes glowBreathe{ 0%,100%{ box-shadow:0 0 0 0 rgba(35,198,232,0.35); } 50%{ box-shadow:0 0 0 10px rgba(35,198,232,0); } }

/* Scroll-triggered reveal — fires automatically as elements enter viewport */
.reveal{
  opacity:0;
  transform: translateY(34px);
  transition: opacity 0.85s cubic-bezier(.22,.9,.25,1), transform 0.85s cubic-bezier(.22,.9,.25,1);
  will-change: transform, opacity;
}
.reveal.is-visible{ opacity:1; transform:translateY(0); }
.reveal-d1.is-visible{ transition-delay: 0.08s; }
.reveal-d2.is-visible{ transition-delay: 0.16s; }
.reveal-d3.is-visible{ transition-delay: 0.24s; }
.reveal-d4.is-visible{ transition-delay: 0.32s; }
.reveal-d5.is-visible{ transition-delay: 0.40s; }
.reveal-d6.is-visible{ transition-delay: 0.48s; }
.reveal-d7.is-visible{ transition-delay: 0.56s; }
.reveal-d8.is-visible{ transition-delay: 0.64s; }

/* Directional corner reveal — curtain wipes away toward the image's side */
.corner-reveal{
  position: relative;
  overflow: hidden;
}
.corner-reveal img{
  transition: transform 900ms cubic-bezier(.22,.9,.25,1);
  transform: scale(1.15);
}
.corner-reveal.is-visible img{
  transform: scale(1);
}
.corner-reveal::after{
  content:"";
  position:absolute; inset:0;
  z-index: 2;
  background: var(--ink);
  transition: transform 900ms cubic-bezier(.22,.9,.25,1);
}
.corner-reveal.from-right::after{ transform-origin: right; transform: scaleX(1); }
.corner-reveal.from-right.is-visible::after{ transform: scaleX(0); }
.corner-reveal.from-left::after{ transform-origin: left; transform: scaleX(1); }
.corner-reveal.from-left.is-visible::after{ transform: scaleX(0); }

/* Match curtain color to each section's actual background */
.section .corner-reveal::after{ background: var(--paper); }
.section-panel .corner-reveal::after{ background: var(--panel); }
.section-dark .corner-reveal::after{ background: var(--ink); }
/* Continuous hero headline reveal on load (no scroll needed) */
.load-in{ opacity:0; animation: fadeUp 0.9s cubic-bezier(.22,.9,.25,1) forwards; }
.load-in-1{ animation-delay: 0.05s; }
.load-in-2{ animation-delay: 0.22s; }
.load-in-3{ animation-delay: 0.4s; }
.load-in-4{ animation-delay: 0.58s; }

/* Bold / important emphasis, site-wide */
strong, b{ font-weight: 800; color: var(--amber-dim); }
.section-dark strong, .section-panel strong, .hero strong,
.section-dark b, .section-panel b, .hero b{ color: var(--signal); }
.crumb b{ color: var(--signal); font-weight: 600; }

/* Continuous image hover-zoom (applies wherever .zoom-media wraps an img) */
.zoom-media{ overflow:hidden; }
.zoom-media img{ transition: transform 650ms cubic-bezier(.22,.9,.25,1); }
.zoom-media:hover img{ transform: scale(1.055); }

/* Auto-scrolling logo marquee (continuous, automatic — not interaction-based) */
.marquee{ overflow:hidden; position:relative; }
.marquee::before, .marquee::after{
  content:""; position:absolute; top:0; bottom:0; width:90px; z-index:2; pointer-events:none;
}
.marquee::before{ left:0; background: linear-gradient(90deg, var(--paper-2), transparent); }
.marquee::after{ right:0; background: linear-gradient(270deg, var(--paper-2), transparent); }
.marquee-track{
  display:flex; align-items:center; gap: 20px;
  width: max-content;
  animation: marquee 30s linear infinite;
}
.marquee-track .logo-chip{
  flex: 0 0 auto;
  width: 150px; height: 84px;
   background: #FFFFFF;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(11,20,32,0.08);
  display: flex; align-items:center; justify-content:center;
  padding: 14px 18px;
}
.marquee-track .logo-chip img{
  max-height: 42px; max-width: 100%;
  width: auto; height: auto;
  object-fit: contain;
}
.marquee-track img:hover{ filter: grayscale(0%) opacity(1); }
.marquee:hover .marquee-track{ animation-play-state: paused; }

/* Shimmer sweep across primary CTA buttons — plays automatically on a loop */
.btn-amber{ position:relative; overflow:hidden; }
.btn-amber::before{
  content:"";
  position:absolute; top:0; bottom:0; left:0; width:36%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
  animation: shimmerSweep 4.5s ease-in-out infinite;
  animation-delay: 1.2s;
  pointer-events:none;
}

:focus-visible{
  outline: 2px solid var(--signal);
  outline-offset: 3px;
}

/* ---------- module-grid texture ---------- */
.grid-texture{
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: 44px 44px;
}
.grid-texture-dim{
  background-image:
    linear-gradient(to right, rgba(11,20,32,0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(11,20,32,0.06) 1px, transparent 1px);
  background-size: 44px 44px;
}

/* ---------- buttons ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--body);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 13px 26px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}
.btn-amber{
  background: var(--amber);
  color: #1a1002;
}
.btn-amber:hover{ background: var(--amber-dim); }
.btn-outline{
  background: transparent;
  border-color: var(--steel);
  color: var(--paper);
}
.btn-outline:hover{ border-color: var(--signal); color: var(--signal); }
.btn-outline-dark{
  background: transparent;
  border-color: var(--steel);
  color: var(--ink-text);
}
.btn-outline-dark:hover{ border-color: var(--ink); }

/* ---------- kicker / spec label ---------- */
.kicker{
  font-family: var(--body);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  color: var(--signal);
}
.kicker-dark{ color: var(--signal-dim); }

/* ============================================================
   NAV
   ============================================================ */
.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--ink);
  border-bottom: 1px solid var(--line);
  transition: background-color 240ms ease, box-shadow 240ms ease, border-color 240ms ease;
}
.site-header.scrolled{
  background: rgba(11,20,32,0.86);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.32);
  border-bottom-color: transparent;
}
.site-header.scrolled .nav{ height: 64px; }
.nav{
  display:grid;
  grid-template-columns: auto 1fr auto;
  align-items:center;
  height: 78px;
  gap: 24px;
  transition: height 240ms ease;
}
.nav-links{
  justify-content: center;
}
.nav-logo{
  display:flex;
  align-items:center;
  gap:10px;
  position:relative;
}
.nav-logo img{ height: 26px; width:auto; transition: filter 260ms ease; }
.nav-logo::after{
  content:"";
  position:absolute; left:-14px; top:50%;
  width:6px; height:6px; border-radius:50%;
  background: var(--signal);
  transform: translateY(-50%);
  animation: dotPulse 2.6s ease-in-out infinite;
}
.nav-logo span{
  font-family: var(--display);
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: var(--steel-soft);
}
.nav-links{
  display:flex;
  align-items:center;
  gap: 34px;
  list-style:none;
  margin:0; padding:0;
}
.nav-links a{
  position:relative;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--steel-soft);
  padding: 6px 0;
  transition: color 150ms ease;
}
.nav-links a::after{
  content:"";
  position:absolute; left:0; right:100%; bottom:0; height:2px;
  background: linear-gradient(90deg, var(--signal), var(--amber));
  transition: right 260ms cubic-bezier(.22,.9,.25,1);
}
.nav-links a:hover, .nav-links a.active{
  color: var(--paper);
}
.nav-links a:hover::after, .nav-links a.active::after{
  right: 0;
}
.nav-links a.btn{
  color: #1a1002;
}
.nav-links a.btn::after{ content:none; }
.nav-links a.btn:hover{
  color: #1a1002;
}
.nav-cta{
  font-size: 0.85rem;
  padding: 10px 20px;
}
.nav-toggle{ display:none; }

@media (max-width: 860px){
  .nav-links{
    position: fixed;
    inset: 78px 0 auto 0;
    background: var(--ink);
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 8px 28px 20px;
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease, transform 180ms ease;
  }
  .nav-links.open{
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .nav-links li{ width:100%; opacity:0; }
  .nav-links.open li{ animation: fadeUp 420ms cubic-bezier(.22,.9,.25,1) forwards; }
  .nav-links.open li:nth-child(1){ animation-delay: 0.05s; }
  .nav-links.open li:nth-child(2){ animation-delay: 0.10s; }
  .nav-links.open li:nth-child(3){ animation-delay: 0.15s; }
  .nav-links.open li:nth-child(4){ animation-delay: 0.20s; }
  .nav-links.open li:nth-child(5){ animation-delay: 0.25s; }
  .nav-links.open li:nth-child(6){ animation-delay: 0.30s; }
  .nav-links a{
    display:block;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
  }
  .nav-links a.btn{
    text-align: center;
    justify-content: center;
    margin-top: 12px;
    padding: 13px 0;
  }
  .nav-toggle{
    display:flex;
    flex-direction:column;
    gap:5px;
    background:none;
    border:none;
    cursor:pointer;
    padding: 8px;
  }
  .nav-toggle span{
    width: 22px; height: 2px; background: var(--paper);
  }
}

/* ============================================================
   PAGE HERO (interior pages)
   ============================================================ */
.page-hero{
  background: var(--ink);
  color: var(--paper);
  padding: 76px 0 52px;
  position: relative;
  overflow:hidden;
}
.page-hero::after{
  content:"";
  position:absolute; inset:0;
  background-image: linear-gradient(to right, rgba(255,255,255,0.05) 1px, transparent 1px),
                     linear-gradient(to bottom, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(to bottom, black, transparent 85%);
}
.page-hero .container{ position:relative; }
.page-hero .kicker{ margin-bottom: 14px; display:block; }
.page-hero h1{
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  color: var(--paper);
}
.page-hero .lede{
  margin-top: 16px;
  max-width: 58ch;
  color: var(--steel-soft);
  font-size: 1.06rem;
}
.crumb{
  font-size: 0.82rem;
  color: var(--steel);
}
.crumb b{ color: var(--signal); font-weight: 600; }

/* ============================================================
   SEAM / SECTION DIVIDERS
   ============================================================ */
.seam{
  border: none;
  border-top: 1px solid var(--line-light);
  margin: 0;
}
.seam-dark{ border-top: 1px solid var(--line); }
.section{ padding: 88px 0; }
.section-tight{ padding: 64px 0; }
.section-dark{ background: var(--ink); color: var(--paper); }
.section-panel{ background: var(--panel); color: var(--paper); }

.section-head{
  display:flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 48px;
  flex-wrap: wrap;
}
.section-head h2{
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
}
.section-head .lede{
  max-width: 46ch;
  color: var(--steel);
  font-size: 1rem;
}
.section-dark .section-head .lede,
.section-panel .section-head .lede{ color: var(--steel-soft); }
.section-bg-image{
  position: relative;
  background-size: cover;
  background-position: center;
  background-attachment: scroll;
  isolation: isolate;
}
.section-bg-image::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(11,20,32,0.82) 0%, rgba(11,20,32,0.93) 60%, rgba(11,20,32,0.98) 100%);
  z-index: -1;
}
/* ============================================================
   HOME — HERO
   ============================================================ */
.hero{
    margin-top: 0%;
  position:relative;
  background: var(--ink);
  color: var(--amber);
  overflow:hidden;
}
.hero-media{

  position:relative;
  height: min(56vw, 640px);
  min-height: 420px;
}
.hero-media img,
.hero-media video{
  width:100%; height:100%; object-fit:cover;
  filter: saturate(1.02);
  animation: kenburns 26s ease-in-out infinite alternate;
}
.hero-media video{ object-position: center center; }
.hero-media::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(11,20,32,0.35) 0%, rgba(11,20,32,0.55) 55%, rgba(11,20,32,0.97) 100%);
}
.hero-copy{
  position:absolute;
  left:0; right:0; top:50%;
  transform: translateY(-50%);
  padding: 0;
}
.hero-copy .container{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap: 22px;
}
.hero-copy h1{ margin-bottom: 6px; }
.hero-copy .kicker{ display:flex; align-items:center; gap:10px; }
.hero-copy .kicker .dot{
  width:7px; height:7px; border-radius:50%;
  background: var(--signal);
  box-shadow: 0 0 10px 2px var(--signal);
}
.hero h1{
  font-size: clamp(2.1rem, 4.8vw, 3.7rem);
  line-height: 1.2;
  max-width: 19ch;
  color: var(--paper);
}
.hero-copy .lede{
  max-width: 48ch;
  color: var(--paper);
  font-size: 1.08rem;
  
  padding: 12px 16px;
  border-radius: 8px;
  display: inline-block;
}
.hero-actions{ display:flex; gap:14px; margin-top:8px; flex-wrap:wrap; }

.hero-stats{
  border-top: 1px solid var(--line);
  background: var(--ink);
}
.hero-stats .container{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
}
.stat{
  padding: 24px 0;
  border-left: 1px solid var(--line);
  padding-left: 24px;
}
.stat:first-child{ border-left:none; padding-left:0; }
.stat .num{
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  color: var(--signal);
}
.stat .label{
  font-size: 0.82rem;
  color: var(--steel-soft);
  margin-top: 4px;
}
@media (max-width: 760px){
  .hero-stats .container{ grid-template-columns: repeat(2,1fr); row-gap: 20px; }
  .stat:nth-child(3){ border-left:none; padding-left:0; }
}

/* ============================================================
   PROFILE / SPLIT
   ============================================================ */
.split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items:center;
}
.split.reverse{ direction: rtl; }
.split.reverse > *{ direction: ltr; }
.split-media{ position:relative; overflow:hidden; }
.split-media img{
  width:100%; height:100%; object-fit:cover; aspect-ratio: 4/3.1;
  transition: transform 650ms cubic-bezier(.22,.9,.25,1);
}
.split-media:hover img{ transform: scale(1.045); }
.split-media .frame-tag{
  position:absolute; top:16px; left:16px;
  background: rgba(11,20,32,0.82);
  color: var(--signal);
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  padding: 6px 12px;
}
.split-copy .kicker{ margin-bottom: 14px; display:block; }
.split-copy h2{ font-size: clamp(1.9rem, 3.4vw, 2.5rem); margin-bottom: 20px; }
.split-copy p{ color: var(--steel); font-size: 1.02rem; }
.split-copy .btn{ margin-top: 26px; }

.readout-row{
  display:flex;
  gap: 34px;
  margin-top: 30px;
  flex-wrap: wrap;
}
.readout{ border-left: 2px solid var(--signal); padding-left: 14px; }
.readout .num{
  font-family: var(--display); font-weight: 800;
  font-size: 1.7rem; color: var(--ink-text);
}
.readout .label{ font-size: 0.8rem; color: var(--steel); margin-top:2px; }

@media (max-width: 860px){
  .split{ grid-template-columns: 1fr; gap: 34px; }
}

/* ============================================================
   WARRANTY BAND
   ============================================================ */
.warranty{
  background: var(--panel);
  color: var(--paper);
  padding: 64px 0;
  position: relative;
}
.warranty .inner{
  display:flex;
  align-items:center;
  gap: 44px;
}
.badge{
  flex: 0 0 auto;
  width: 128px; height:128px;
  border-radius:50%;
  border: 2px solid var(--signal);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  position:relative;
  animation: floatY 4.2s ease-in-out infinite, glowBreathe 3.2s ease-in-out infinite;
}
.badge::before{
  content:"";
  position:absolute; inset: 8px;
  border-radius:50%;
  border: 1px dashed var(--steel);
  opacity: 0.5;
}
.badge .yrs{
  font-family: var(--display); font-weight: 900;
  font-size: 2.4rem; color: var(--signal); line-height:1;
}
.badge .label{ font-size: 0.68rem; letter-spacing: 0.1em; color: var(--steel-soft); margin-top:4px; }
.warranty-copy h3{ font-size: clamp(1.5rem, 2.6vw, 1.9rem); color: var(--paper); margin-bottom: 10px; }
.warranty-copy p{ color: var(--steel-soft); max-width: 62ch; }

@media (max-width: 700px){
  .warranty .inner{ flex-direction:column; align-items:flex-start; gap: 24px; }
}

/* ============================================================
   SPEC LIST (Why choose / Core capabilities)
   ============================================================ */
.spec-list{ list-style:none; margin:0; padding:0; }
.spec-item{
  display:grid;
  grid-template-columns: 64px 1fr;
  gap: 22px;
  padding: 22px 0;
  border-top: 1px solid var(--line-light);
}
.section-dark .spec-item, .section-panel .spec-item{ border-top-color: var(--line); }
.spec-item:last-child{ border-bottom: 1px solid var(--line-light); }
.section-dark .spec-item:last-child, .section-panel .spec-item:last-child{ border-bottom-color: var(--line); }
.spec-item .n{
  font-family: var(--display); font-weight: 800;
  font-size: 1.5rem; color: var(--signal);
}
.spec-item h4{ font-size: 1.08rem; margin-bottom: 4px; }
.spec-item p{ color: var(--steel); font-size: 0.95rem; }
.section-dark .spec-item p, .section-panel .spec-item p{ color: var(--steel-soft); }

.spec-cols{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 56px;
}
.full-bleed-img{ width:100%; overflow:hidden; }
.full-bleed-img img{
  width:100%;
  height:auto;
  display:block;
}
@media (max-width: 760px){
  .spec-cols{ grid-template-columns: 1fr; }
}

/* ============================================================
   CLIENT LOGOS
   ============================================================ */
.logo-strip{
  background: var(--paper-2);
}
.logo-grid{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--line-light);
  border: 1px solid var(--line-light);
}
.logo-cell{
  background: #FFFFFF;
  aspect-ratio: 1.4;
  display:flex; align-items:center; justify-content:center;
  padding: 6px;
}
.logo-cell img{ max-height: 100%; max-width: 100%; width:auto; height:auto; object-fit:contain; }
@media (max-width: 860px){ .logo-grid{ grid-template-columns: repeat(3,1fr); } }
@media (max-width: 560px){ .logo-grid{ grid-template-columns: repeat(2,1fr); } }

/* ============================================================
   CASE STUDY / INSTALLATION SHOWCASE CARDS
   ============================================================ */
.case-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  background: var(--line);
  border: 1px solid var(--line);
}

.case-carousel{ position:relative; }
.case-track-wrap{ overflow:hidden; }
.case-track{
  display:flex;
  gap: 24px;
  transition: transform 650ms cubic-bezier(.22,.9,.25,1);
}
.case-track .case-card{
  flex: 0 0 calc((100% - 48px) / 3);
  aspect-ratio: 3/4;
  border-radius: 10px;
  overflow: hidden;
}
@media (max-width: 960px){ .case-track .case-card{ flex: 0 0 calc((100% - 24px) / 2); } }
@media (max-width: 600px){ .case-track .case-card{ flex: 0 0 100%; } }
.case-dots{
  display:flex; justify-content:center; gap: 10px;
  margin-top: 20px;
}
.case-dots button{
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--line-light);
  border: none; padding: 0; cursor: pointer;
  transition: background-color 200ms ease, transform 200ms ease;
}
.case-dots button.active{ background: var(--amber); transform: scale(1.35); }
.section-dark .case-dots button:not(.active), .section-panel .case-dots button:not(.active){ background: var(--line); }
.case-card{
  position:relative;
  overflow:hidden;
  aspect-ratio: 3/4;
  background: var(--panel);
}
.case-card img{
  width:100%; height:100%; object-fit:cover;
  transition: transform 750ms cubic-bezier(.22,.9,.25,1), filter 400ms ease;
  filter: saturate(1.03);
}
.case-card:hover img{ transform: scale(1.09); }
.case-card::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(11,20,32,0) 45%, rgba(11,20,32,0.94) 100%);
  z-index:1;
}
.case-card .case-tag{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding: 18px 18px 16px;
  color: var(--paper);
}
.case-card .case-sector{
  font-family: var(--display); font-weight: 800;
  font-size: 0.7rem; letter-spacing: 0.1em;
  color: var(--signal);
  display:block; margin-bottom: 4px;
}
.case-card .case-name{ font-size: 1.02rem; font-weight: 700; line-height:1.25; }
@media (max-width: 960px){ .case-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .case-grid{ grid-template-columns: 1fr; } .case-card{ aspect-ratio: 4/3; } }

/* ============================================================
   CAPABILITY CARDS (Products page)
   ============================================================ */
.cap-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  background: transparent;
  border: none;
}
.cap-card{
  background: var(--panel);
  padding: 36px 32px;
  border-radius: 14px;
  border: 1px solid var(--line);
  position: relative;
  overflow: hidden;
  transition: transform 380ms cubic-bezier(.22,.9,.25,1), box-shadow 380ms cubic-bezier(.22,.9,.25,1), border-color 380ms ease;
}
.cap-card:hover{
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.28);
  border-color: var(--signal);
}
.cap-card::before{
  content:"";
  position:absolute; top:0; left:0; right:0; height:3px;
  background: linear-gradient(90deg, var(--signal), var(--amber));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 420ms cubic-bezier(.22,.9,.25,1);
}
.cap-card:hover::before{ transform: scaleX(1); }
.cap-card-img{
  width: 100%;
  height: 400px;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 18px;
  transition: transform 550ms cubic-bezier(.22,.9,.25,1);
}
.cap-card:hover .cap-card-img{ transform: scale(1.06); }

.cap-card .n{
  font-family: var(--display); font-weight: 800;
  font-size: 0.85rem; color: var(--signal);
  letter-spacing: 0.06em;
}
.cap-card h3{
  font-size: 1.4rem;
  margin: 14px 0 10px;
  color: var(--paper);
}
.cap-card p{ color: var(--steel-soft); font-size: 0.96rem; }
@media (max-width: 760px){ .cap-grid{ grid-template-columns: 1fr; } }

/* ============================================================
   CTA BAND
   ============================================================ */
.cta-band{
  background: var(--ink);
  color: var(--paper);
  padding: 76px 0;
  position:relative;
  overflow:hidden;
}
.cta-band .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 30px;
  flex-wrap:wrap;
  position:relative;
}
.cta-band h2{
  font-size: clamp(1.9rem, 3.6vw, 2.7rem);
  max-width: 16ch;
  color: var(--paper);
}
.cta-band .lede{ color: var(--steel-soft); margin-top:10px; max-width:44ch; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
}
.contact-card{
  border-top: 1px solid var(--line-light);
  padding: 22px 0;
}
.contact-card:last-child{ border-bottom: 1px solid var(--line-light); }
.contact-card .kicker-dark{ display:block; margin-bottom: 8px; }
.contact-card .val{ font-size: 1.15rem; font-weight: 500; }
.contact-card a.val:hover{ color: var(--signal-dim); }

.contact-media{ position:relative; }
.contact-media img{ width:100%; height:100%; object-fit:cover; aspect-ratio: 4/3.4; }

form.enquiry{ display:flex; flex-direction:column; gap:16px; margin-top: 8px; }
form.enquiry label{
  font-size: 0.78rem; letter-spacing:0.06em; color: var(--steel);
  display:block; margin-bottom:6px;
}
form.enquiry input, form.enquiry textarea, form.enquiry select{
  width:100%;
  font-family: var(--body);
  font-size: 0.98rem;
  padding: 12px 14px;
  border: 1px solid var(--line-light);
  background: var(--paper);
  color: var(--ink-text);
}
form.enquiry input:focus, form.enquiry textarea:focus, form.enquiry select:focus{
  outline: 2px solid var(--signal);
  outline-offset: 1px;
  border-color: var(--signal);
}
form.enquiry textarea{ resize: vertical; min-height: 110px; }
.form-note{ font-size: 0.82rem; color: var(--steel); margin-top: 6px; }
@media (max-width: 860px){ .contact-grid{ grid-template-columns: 1fr; } }

/* ============================================================
   MAP PLACEHOLDER
   ============================================================ */
.map-block{
  height: 340px;
  background: var(--panel);
  position:relative;
  overflow:hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.map-block .pin{
  position:absolute; top:50%; left:50%;
  transform: translate(-50%,-100%);
  display:flex; flex-direction:column; align-items:center;
  color: var(--paper);
}
.map-block .pin .dot{
  width:14px; height:14px; border-radius:50%;
  background: var(--amber);
  box-shadow: 0 0 0 6px rgba(242,167,59,0.22);
}
.map-block .pin .tag{
  margin-top:10px;
  background: var(--ink);
  border: 1px solid var(--line);
  padding: 8px 14px;
  font-size: 0.85rem;
  white-space:nowrap;
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{
  background: var(--ink);
  color: var(--steel-soft);
  padding: 60px 0 28px;
  position: relative;
  overflow: hidden;
}
.site-footer::before{
  content:"";
  position:absolute; top:0; left:0; right:0; height:2px;
  background: linear-gradient(90deg, transparent, var(--signal), var(--amber), transparent);
  opacity: 0.7;
}
.back-to-top{
  position: fixed;
  right: 24px; bottom: 24px;
  z-index: 60;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--ink);
  border: 1px solid var(--signal);
  color: var(--signal);
  display:flex; align-items:center; justify-content:center;
  cursor: pointer;
  opacity: 0; transform: translateY(12px);
  pointer-events: none;
  transition: opacity 260ms ease, transform 260ms ease, background-color 200ms ease;
  animation: glowBreathe 3.4s ease-in-out infinite;
}
.back-to-top.visible{ opacity:1; transform: translateY(0); pointer-events:auto; }
.back-to-top:hover{ background: var(--panel); }
.back-to-top svg{ width:18px; height:18px; }
.footer-top{
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--line);
}
.footer-brand img{ height: 24px; margin-bottom: 14px; }
.footer-brand p{ font-size: 0.9rem; max-width: 32ch; color: var(--steel); }
.footer-col h5{
  font-family: var(--body);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  color: var(--steel);
  margin-bottom: 16px;
  font-weight: 600;
}
.footer-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.footer-col a{ font-size: 0.92rem; color: var(--steel-soft); }
.footer-col a:hover{ color: var(--signal); }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center;
  padding-top: 24px; font-size: 0.82rem; color: var(--steel);
  flex-wrap:wrap; gap:10px;
}
@media (max-width: 860px){
  .footer-top{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  .footer-top{ grid-template-columns: 1fr; }
}

/* ============================================================
   MISC helpers
   ============================================================ */
.eyebrow-inline{ display:flex; align-items:center; gap:10px; }
.text-center{ text-align:center; }
.mt-40{ margin-top:40px; }

.about-hero-media{
  position:relative; height: 800px; overflow:hidden;
}
.about-hero-media img{ width:100%; height:100%; object-fit:cover; }
.about-hero-media::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(11,20,32,0.15), rgba(11,20,32,0.9));
}