/* ============================================================
   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; }
}

: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);
}
.nav{
  display:grid;
  grid-template-columns: auto 1fr auto;
  align-items:center;
  height: 78px;
  gap: 24px;
}
.nav-links{
  justify-content: center;
}
.nav-logo{
  display:flex;
  align-items:center;
  gap:10px;
}
.nav-logo img{ height: 26px; width:auto; }
.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{
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--steel-soft);
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition: color 150ms ease, border-color 150ms ease;
}
.nav-links a:hover, .nav-links a.active{
  color: var(--paper);
  border-color: var(--signal);
}
.nav-links a.btn{
  border-bottom: none;
  color: #1a1002;
}
.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%; }
  .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); }

/* ============================================================
   HOME — HERO
   ============================================================ */
.hero{
  position:relative;
  background: var(--ink);
  color: var(--amber);
  overflow:hidden;
}
.hero-media{
  position:relative;
  height: min(82vh, 680px);
  min-height: 520px;
}
.hero-media img,
.hero-media video{
  width:100%; height:100%; object-fit:cover;
  filter: saturate(1.02);
}
.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; bottom:0;
 padding: 0 0 24px;
}
.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; }
.split-media img{ width:100%; height:100%; object-fit:cover; aspect-ratio: 4/3.1; }
.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;
}
.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;
}
@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: var(--paper);
  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); } }

/* ============================================================
   CAPABILITY CARDS (Products page)
   ============================================================ */
.cap-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.cap-card{
  background: var(--panel);
  padding: 36px 32px;
}
.cap-card-img{
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 18px;
}
.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;
}
.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));
}