/* ==========================================================================
   Enlighten Pro · Marketing v3 — Apple grammar
   --------------------------------------------------------------------------
   Apple's chassis: photography-first, UI recedes, edge-to-edge alternating
   tiles, single accent for "click me", one product-shadow, pill CTAs.
   Brand keepers: the LUMEN Spectrum (warm-white → cool-white → blue) is our
   signature ribbon under the hero. Action color is LUMEN amber (our "light
   on"), not Apple blue. SIGNAL blue stays reserved for inline data links.
   ========================================================================== */

/* ==========================================================================
   FONTS — self-hosted under unique family names ('EP Montserrat', 'EP JBM')
   so we bypass any corrupted system-installed Montserrat.
   The user's Mac has /Users/mustafasafri/Library/Fonts/Montserrat-Medium.ttf
   which renders capital E as an open-epsilon "Ɛ". By giving our self-hosted
   Google-Fonts WOFF2 a unique family name, the broken local font cannot win.
   No `local()` source is used — purely the bundled WOFF2 files.
   ========================================================================== */

@font-face {
  font-family: 'EP Montserrat';
  src: url('fonts/montserrat-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'EP Montserrat';
  src: url('fonts/montserrat-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'EP Montserrat';
  src: url('fonts/montserrat-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'EP Montserrat';
  src: url('fonts/montserrat-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

@font-face {
  font-family: 'EP JBM';
  src: url('fonts/jetbrainsmono-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'EP JBM';
  src: url('fonts/jetbrainsmono-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'EP JBM';
  src: url('fonts/jetbrainsmono-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}

:root {
  /* mono ramp */
  --ep-black:    #0A0B0D;
  --ep-ink:      #1D1D1F;          /* Apple near-black, not pure */
  --ep-graphite: #2A2D33;
  --ep-tile-1:   #1D1D1F;          /* primary dark tile */
  --ep-tile-2:   #2A2A2C;          /* lighter dark sibling */
  --ep-steel:    #4A4F57;
  --ep-slate:    #6B7079;
  --ep-mist:     #A3A8B0;
  --ep-fog:      #D4D7DC;
  --ep-haze:     #E8EAED;
  --ep-paper:    #F5F5F7;          /* Apple parchment */
  --ep-white:    #FFFFFF;

  /* lumen (action) */
  --ep-lumen-100:  #FFEBB8;
  --ep-lumen-300:  #FFD166;
  --ep-lumen-500:  #F5A524;
  --ep-lumen-600:  #D98A0B;
  --ep-lumen-700:  #A66807;

  /* signal (data) */
  --ep-signal-50:  #E6F0FA;
  --ep-signal-300: #6FA8DC;
  --ep-signal-500: #1E6FBA;
  --ep-signal-700: #0F4272;
  --ep-signal-link-dark: #2997FF;  /* sky link blue, on dark surfaces */

  /* spectrum — warm white → cool white → blue (the brand's lumen range) */
  --ep-cct-2200: #FFB76B;
  --ep-cct-2700: #FFCB8E;
  --ep-cct-3000: #FFD9A8;
  --ep-cct-4000: #F4F0E0;
  --ep-cct-5000: #E8EEF5;
  --ep-cct-6500: #DCE6F2;

  /* aliases */
  --ep-fg-1: var(--ep-ink);
  --ep-fg-2: rgba(0,0,0,.62);
  --ep-fg-3: rgba(0,0,0,.48);
  --ep-fg-4: rgba(0,0,0,.32);
  --ep-fg-inverse: var(--ep-white);
  --ep-bg-1: var(--ep-white);
  --ep-bg-2: var(--ep-paper);
  --ep-border-hair: rgba(0,0,0,.10);
  --ep-border-hair-2: rgba(0,0,0,.06);

  /* type */
  --ep-font-sf:      -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', system-ui, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --ep-font-display: 'EP Montserrat', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --ep-font-mono:    'EP JBM', 'SF Mono', Menlo, monospace;

  /* the one shadow — for product renders only */
  --ep-product-shadow: 0 3px 5px rgba(0,0,0,.04), 0 5px 30px rgba(0,0,0,.22);

  /* glows on the action moment */
  --ep-glow-lumen: 0 0 24px rgba(245,165,36,.45), 0 0 48px rgba(245,165,36,.18);

  --ep-ease: cubic-bezier(.2,.7,.2,1);
}

/* ----------------------------- base ----------------------------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--ep-font-sf);
  font-size: 17px; line-height: 1.47;
  letter-spacing: -0.022em;
  color: var(--ep-fg-1);
  background: var(--ep-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "kern";
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* ----------------------------- nav ----------------------------- */

/* Top utility bar — thin, ~36px, holds Customer portal / Channel partner / Contact */
.nav-utility-bar {
  position: sticky; top: 0; z-index: 101;
  background: rgba(0,0,0,.92);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.nav-utility-inner {
  max-width: 1180px; margin: 0 auto;
  display: flex; justify-content: flex-end; align-items: center; gap: 24px;
  height: 36px; padding: 0 28px;
  font-size: 12px; letter-spacing: -0.01em;
}
.nav-utility-inner a {
  color: rgba(255,255,255,.6);
  transition: color 200ms var(--ep-ease);
  white-space: nowrap;
}
.nav-utility-inner a:hover { color: rgba(255,255,255,.95); }

/* Primary nav — sits below the utility bar */
.nav-global {
  position: sticky; top: 36px; z-index: 100;
  background: rgba(0,0,0,.82);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  color: rgba(255,255,255,.9);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.nav-global-inner {
  max-width: 1180px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  height: 64px; padding: 0 28px;
  font-size: 13px; letter-spacing: -0.01em;
}
.nav-mark {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 500; font-size: 13px;
  /* Real wordmark replaces the text + dot lockup. The PNG carries ~30% vertical
     transparent padding, so margin: -10px 0 absorbs it back into the 44px bar. */
}
.nav-mark img {
  display: block; height: 170px; width: auto; margin: -75px 0;
  /* The wordmark PNG is ~12% of its natural height — rest is transparent
     vertical padding (~44% top + 44% bottom). At height:170px the wordmark
     renders ~20px tall × ~267px wide (~22% of the 1180px bar) — refined,
     premium presence without overwhelming the rest of the nav. */
  /* Source PNG is solid black on transparent — forcing brightness(0) first
     guarantees pure black, then invert flips to pure white with crisp AA. */
  filter: brightness(0) invert(1);
}
.nav-links { display: flex; gap: 24px; }
.nav-links a { opacity: .82; font-weight: 400; }
.nav-links a:hover { opacity: 1; }
.nav-utility { display: flex; gap: 16px; align-items: center; opacity: .82; }
.nav-utility svg { width: 16px; height: 16px; }

/* sub-nav, frosted parchment — sticks under utility (36px) + primary (64px) = 100px */
.nav-sub {
  position: sticky; top: 100px; z-index: 99;
  /* 96% opaque (was 72% — content bled through it during scroll). Backdrop
     blur stays for the slight depth cue on browsers that support it. */
  background: rgba(245,245,247,.96);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--ep-border-hair);
}
.nav-sub-inner {
  max-width: 1180px; margin: 0 auto;
  height: 52px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 28px;
  font-size: 12px; letter-spacing: -0.01em;
}
.nav-sub-title {
  font-family: var(--ep-font-display);
  font-size: 21px; font-weight: 500;
  letter-spacing: -0.022em;
}
.nav-sub-mid { display: flex; gap: 22px; color: var(--ep-fg-2); }
.nav-sub-mid a:hover { color: var(--ep-fg-1); }

/* ----------------------------- tile ----------------------------- */
.tile {
  width: 100%;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  padding: 80px 22px 0;          /* product render tucks in below */
  overflow: hidden;
}
.tile.dark { background: var(--ep-tile-1); color: var(--ep-white); }
.tile.tile-2 { background: var(--ep-tile-2); }
.tile.parchment { background: var(--ep-paper); }
.tile.white { background: var(--ep-white); }

.tile-eyebrow {
  font-size: 14px; font-weight: 500; letter-spacing: -0.016em;
  color: var(--ep-lumen-500); margin: 0 0 6px;
}
.tile.dark .tile-eyebrow,
.tile.tile-2 .tile-eyebrow { color: var(--ep-lumen-300); }

.tile-h {
  font-family: var(--ep-font-display);
  font-size: clamp(34px, 5vw, 64px);
  font-weight: 500;             /* Montserrat ships only Medium */
  line-height: 1.05;
  letter-spacing: -0.025em;     /* Montserrat tracks slightly wider than SF — pull in */
  margin: 0 0 8px;
  max-width: 22ch;
  /* Tonal-shift hierarchy: base copy reads in graphite, the emphasis word
     snaps to true ink. One weight, one face — emphasis from contrast, not
     from a glyph swap. The previous weight bump felt gimmicky; this is the
     classier move and matches how luxury editorial uses tone. */
  color: var(--ep-graphite);
}
.tile.dark .tile-h,
.tile.tile-2 .tile-h { color: rgba(255,255,255,.72); }

.tile-h em {
  font-style: normal;
  font-weight: 500;
  color: var(--ep-ink);
}
.tile.dark .tile-h em,
.tile.tile-2 .tile-h em { color: #FFFFFF; }

.tile-sub {
  font-size: clamp(19px, 1.6vw, 24px);
  font-weight: 400;
  line-height: 1.21;
  letter-spacing: 0.004em;
  color: var(--ep-fg-2);
  max-width: 30ch;
  margin: 0 0 22px;
}
.tile.dark .tile-sub { color: rgba(255,255,255,.78); }

.tile-ctas { display: inline-flex; gap: 22px; justify-content: center; flex-wrap: wrap; margin-bottom: 48px; }

/* product render zone (placeholder) */
.tile-render {
  margin-top: 0;
  width: 100%; max-width: 980px;
  height: clamp(280px, 38vw, 420px);
  position: relative;
  display: grid; place-items: center;
}
.beam {
  width: 60%; aspect-ratio: 1; border-radius: 999px;
  background: radial-gradient(circle at 50% 55%,
    rgba(255,228,170,.95) 0%,
    rgba(255,209,102,.7) 14%,
    rgba(245,165,36,.42) 30%,
    rgba(245,165,36,.12) 50%,
    transparent 68%);
  filter: blur(2px);
}
.tile.parchment .beam, .tile.white .beam {
  background: radial-gradient(circle at 50% 55%,
    rgba(245,165,36,.7) 0%,
    rgba(245,165,36,.35) 22%,
    rgba(245,165,36,.10) 45%,
    transparent 65%);
  filter: blur(1.5px);
}
/* product silhouette: a simple architectural fixture body */
.fixture {
  position: absolute; inset: auto 0 14% 0; margin: 0 auto;
  width: 64px; height: 100px;
  border-radius: 6px 6px 12px 12px;
  background: linear-gradient(180deg, #2a2a2c 0%, #131315 100%);
  box-shadow: var(--ep-product-shadow);
}
.tile.parchment .fixture, .tile.white .fixture {
  background: linear-gradient(180deg, #1d1d1f 0%, #0a0b0d 100%);
}

/* ----------------------------- pill CTA ----------------------------- */
.pill-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 40px;
  padding: 0 22px;
  border-radius: 980px;
  font-size: 17px; font-weight: 400; letter-spacing: -0.022em;
  border: 1px solid transparent;
  transition: transform 120ms var(--ep-ease), background 200ms var(--ep-ease), color 200ms var(--ep-ease), box-shadow 200ms var(--ep-ease);
  text-decoration: none;
}
.pill-cta:active { transform: scale(0.96); }
.pill-cta:focus-visible { outline: 2px solid var(--ep-signal-500); outline-offset: 2px; }

/* primary — lumen action */
.pill-primary { background: var(--ep-lumen-500); color: var(--ep-ink); }
.pill-primary:hover { background: var(--ep-lumen-600); box-shadow: var(--ep-glow-lumen); color: var(--ep-ink); }

/* secondary — ghost outlined in lumen */
.pill-secondary { background: transparent; color: var(--ep-lumen-700); border-color: var(--ep-lumen-600); }
.pill-secondary:hover { background: rgba(245,165,36,.08); }

/* on dark — sky variants */
.tile.dark .pill-secondary,
.tile.tile-2 .pill-secondary {
  color: var(--ep-lumen-300); border-color: var(--ep-lumen-300);
}
.tile.dark .pill-secondary:hover,
.tile.tile-2 .pill-secondary:hover {
  background: rgba(255,209,102,.12);
}

/* tertiary inline link */
.link-cta {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 17px; font-weight: 400; letter-spacing: -0.022em;
  color: var(--ep-signal-500);
}
.link-cta:hover { text-decoration: underline; text-underline-offset: 3px; }
.tile.dark .link-cta, .tile.tile-2 .link-cta { color: var(--ep-signal-link-dark); }
.link-cta svg { width: 12px; height: 12px; transition: transform 200ms var(--ep-ease); }
.link-cta:hover svg { transform: translateX(2px); }

/* ----------------------------- spectrum ribbon ----------------------------- */
.spectrum-ribbon {
  background: var(--ep-paper);
  padding: 56px 22px;
}
.spectrum-inner {
  max-width: 980px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 24px;
}
.spectrum-eyebrow {
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ep-fg-3);
}
.spectrum-h {
  font-family: var(--ep-font-display);
  font-size: 32px; font-weight: 500; letter-spacing: -0.022em; line-height: 1.16;
  text-align: center; margin: 0; max-width: 24ch;
}
.spectrum-h em { color: var(--ep-lumen-600); font-style: normal; }
.spectrum-bar {
  width: 100%; max-width: 720px; height: 16px;
  border-radius: 999px;
  background: linear-gradient(90deg,
    var(--ep-cct-2200) 0%,
    var(--ep-cct-2700) 18%,
    var(--ep-cct-3000) 32%,
    var(--ep-cct-4000) 52%,
    var(--ep-cct-5000) 70%,
    var(--ep-cct-6500) 84%,
    #B7CEE9 100%);
  border: 1px solid var(--ep-border-hair-2);
}
.spectrum-ticks {
  width: 100%; max-width: 720px;
  display: flex; justify-content: space-between;
  font-family: var(--ep-font-mono); font-size: 11px; color: var(--ep-fg-3);
  font-variant-numeric: tabular-nums;
}
.spectrum-tick { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.spectrum-tick b { color: var(--ep-fg-1); font-weight: 600; }
.spectrum-tick span { font-family: var(--ep-font-sf); font-size: 11px; letter-spacing: -0.01em; }

/* ----------------------------- utility grid ----------------------------- */
.section { padding: 80px 22px; }
.section.parchment { background: var(--ep-paper); }
.section-inner { max-width: 1024px; margin: 0 auto; }
.section-head { text-align: center; margin-bottom: 40px; }
.section-eyebrow { font-size: 12px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ep-fg-3); margin: 0 0 8px; }
.section-h {
  font-family: var(--ep-font-display);
  font-size: 44px; font-weight: 500;
  line-height: 1.08; letter-spacing: -0.025em;
  margin: 0 0 10px;
}
.section-sub { font-size: 21px; color: var(--ep-fg-2); margin: 0 auto; max-width: 36ch; line-height: 1.33; letter-spacing: 0.011em; }

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 833px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* utility card */
.card {
  background: var(--ep-white);
  border: 1px solid var(--ep-border-hair);
  border-radius: 18px;
  overflow: hidden;
  transition: transform 200ms var(--ep-ease), box-shadow 200ms var(--ep-ease);
}
.card:hover { transform: translateY(-2px); }
.card-media {
  aspect-ratio: 1; position: relative;
  background: linear-gradient(180deg, #1d1d1f 0%, #0a0b0d 100%);
  display: grid; place-items: center; overflow: hidden;
}
.card-media .beam { width: 70%; }
.card-media .fixture { width: 48px; height: 76px; bottom: 18%; }
.card-body { padding: 22px 22px 24px; }
.card-name {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-bottom: 4px;
}
.card-name b { font-size: 17px; font-weight: 600; letter-spacing: -0.022em; }
.card-sku { font-family: var(--ep-font-mono); font-size: 11px; color: var(--ep-fg-3); letter-spacing: 0.04em; }
.card-tag { font-size: 14px; color: var(--ep-fg-2); margin: 0 0 14px; line-height: 1.43; letter-spacing: -0.016em; }
.card-cct {
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--ep-border-hair);
  font-family: var(--ep-font-mono); font-size: 11px; color: var(--ep-fg-2);
  font-variant-numeric: tabular-nums;
}
.card-cct .dots { display: inline-flex; gap: 2px; }
.card-cct .dot { width: 8px; height: 8px; border-radius: 999px; }
.card-link { margin-top: 14px; display: block; font-size: 14px; color: var(--ep-signal-500); }
.card-link:hover { text-decoration: underline; text-underline-offset: 3px; }

.card-specs {
  display: flex; gap: 0;
  padding-top: 14px; margin-top: 14px;
  border-top: 1px solid var(--ep-border-hair-2);
}
.card-spec { flex: 1; }
.card-spec-v { font-family: var(--ep-font-mono); font-size: 15px; font-weight: 600; line-height: 1; letter-spacing: -0.01em; color: var(--ep-fg-1); font-variant-numeric: tabular-nums; }
.card-spec-k { font-size: 11px; color: var(--ep-fg-3); margin-top: 4px; letter-spacing: -0.01em; }

/* family tile (small) */
.family {
  background: var(--ep-white);
  border: 1px solid var(--ep-border-hair);
  border-radius: 18px;
  padding: 22px;
  display: flex; flex-direction: column; gap: 4px;
  transition: transform 200ms var(--ep-ease);
}
.family:hover { transform: translateY(-2px); }
.family-name { font-size: 17px; font-weight: 600; letter-spacing: -0.022em; }
.family-kind { font-size: 14px; color: var(--ep-fg-2); letter-spacing: -0.016em; }
.family-foot { display: flex; align-items: baseline; gap: 6px; margin-top: 12px; }
.family-count { font-family: var(--ep-font-mono); font-size: 24px; font-weight: 600; line-height: 1; color: var(--ep-fg-1); }
.family-count-k { font-size: 12px; color: var(--ep-fg-3); letter-spacing: -0.01em; }

/* stat */
.stat {
  text-align: center; padding: 24px 12px;
  border-right: 1px solid var(--ep-border-hair-2);
}
.stat:last-child { border-right: 0; }
.stat-v {
  font-family: var(--ep-font-display);
  font-size: 64px; font-weight: 500;
  line-height: 1; letter-spacing: -0.03em;
}
.stat-v sub { font-size: 18px; font-weight: 400; color: var(--ep-fg-3); letter-spacing: -0.01em; vertical-align: baseline; margin-left: 4px; bottom: 0; }
.stat-k { font-size: 14px; color: var(--ep-fg-3); margin-top: 6px; letter-spacing: -0.016em; }
@media (max-width: 833px) {
  .stat { border-right: 0; border-bottom: 1px solid var(--ep-border-hair-2); }
  .stat:last-child { border-bottom: 0; }
}

/* quote */
.quote {
  max-width: 820px; margin: 0 auto;
  text-align: center;
}
.quote p {
  font-family: var(--ep-font-display);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 500; line-height: 1.18; letter-spacing: -0.025em;
  margin: 0 0 28px;
}
.quote-by { display: inline-flex; align-items: center; gap: 12px; }
.quote-by .quote-avatar {
  width: 40px; height: 40px; border-radius: 999px;
  background: var(--ep-ink); color: var(--ep-white);
  display: grid; place-items: center;
  font-size: 13px; font-weight: 600; letter-spacing: 0.02em;
}
.quote-by b { font-size: 14px; font-weight: 600; letter-spacing: -0.016em; display: block; }
.quote-by > span:not(.quote-avatar) { font-size: 13px; color: var(--ep-fg-3); letter-spacing: -0.01em; }

/* footer */
.footer {
  background: var(--ep-paper);
  padding: 48px 22px 28px;
  font-size: 12px; color: var(--ep-fg-3);
  letter-spacing: -0.012em;
}
.footer-inner { max-width: 1024px; margin: 0 auto; }
.footer-cols {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px;
  padding-bottom: 28px; border-bottom: 1px solid var(--ep-border-hair-2);
}
.footer-col h4 { font-size: 12px; font-weight: 600; color: var(--ep-fg-1); margin: 0 0 12px; letter-spacing: -0.012em; }
.footer-col a { display: block; line-height: 2.2; color: var(--ep-fg-2); }
.footer-col a:hover { color: var(--ep-fg-1); }
.footer-bottom { display: flex; justify-content: space-between; padding-top: 20px; flex-wrap: wrap; gap: 12px; }
@media (max-width: 833px) {
  .footer-cols { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   SEARCH (in global nav)
   ========================================================================== */

.ep-search { position: relative; }

/* Always-visible pill input, sits inline in the dark nav */
.ep-search-field {
  display: inline-flex; align-items: center; gap: 8px;
  height: 32px; padding: 0 12px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  transition: background 200ms var(--ep-ease), border-color 200ms var(--ep-ease);
  min-width: 240px;
}
.ep-search-field:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.18); }
.ep-search-field:focus-within { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.28); }
.ep-search-icon { width: 14px; height: 14px; color: rgba(255,255,255,.65); flex-shrink: 0; }

.ep-search-field input[type="search"] {
  flex: 1; min-width: 0;
  background: transparent; border: 0; outline: 0;
  color: #fff;
  font-family: var(--ep-font-sf);
  font-size: 13px; letter-spacing: -0.01em;
  padding: 0;
}
.ep-search-field input[type="search"]::placeholder { color: rgba(255,255,255,.5); }
.ep-search-field input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }

/* Results panel — only visible while typing, anchored under the input */
.ep-search-panel {
  position: absolute; top: calc(100% + 8px); right: 0;
  width: 420px;
  background: rgba(20,20,22,.96);
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  overflow: hidden;
  opacity: 0; visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 180ms var(--ep-ease), transform 180ms var(--ep-ease), visibility 180ms;
  z-index: 1000;
  box-shadow: 0 12px 48px rgba(0,0,0,.4);
}
.ep-search-panel.open { opacity: 1; visibility: visible; transform: translateY(0); }

@media (max-width: 833px) {
  .ep-search-field { min-width: 0; width: 100%; }
  .ep-search-panel { width: calc(100vw - 44px); right: -8px; }
}

.ep-search-results {
  max-height: 480px; overflow-y: auto;
}

.ep-search-result {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 20px;
  text-decoration: none;
  color: rgba(255,255,255,.9);
  border-bottom: 1px solid rgba(255,255,255,.04);
  transition: background 120ms var(--ep-ease);
}
.ep-search-result:hover { background: rgba(255,255,255,.06); }
.ep-search-thumb {
  width: 44px; height: 44px;
  background: #fff; border-radius: 8px;
  display: grid; place-items: center;
  flex-shrink: 0; overflow: hidden;
}
.ep-search-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.ep-search-meta { min-width: 0; flex: 1; }
.ep-search-name {
  font-size: 14px; font-weight: 600; letter-spacing: -0.012em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ep-search-sub {
  font-family: var(--ep-font-mono); font-size: 11px;
  color: rgba(255,255,255,.5);
  font-variant-numeric: tabular-nums; letter-spacing: 0;
  margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ep-search-empty {
  padding: 18px 20px;
  font-size: 13px; color: rgba(255,255,255,.5);
}
.ep-search-allresults {
  display: block; padding: 12px 20px;
  font-size: 12px; color: var(--ep-lumen-300);
  text-decoration: none;
  letter-spacing: -0.012em;
  border-top: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.02);
}
.ep-search-allresults:hover { color: var(--ep-lumen-100); background: rgba(255,255,255,.06); }

/* ==========================================================================
   PRODUCT DESCRIPTION — re-style any tables that come from the WC description
   so they match the EP spec table grammar (ink header, hairline rows, tabular
   numerals, wide enough columns to NOT wrap LED/Driver paragraphs).
   ========================================================================== */

.desc-body table {
  width: 100% !important;
  border-collapse: collapse;
  margin: 0 0 28px;
  background: var(--ep-white);
  border: 1px solid var(--ep-border-hair);
  border-radius: 14px;
  overflow: hidden;
  table-layout: auto;
}
.desc-body table th {
  background: var(--ep-ink); color: var(--ep-white);
  text-align: left;
  padding: 14px 18px;
  font-weight: 600; font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
  border-bottom: 1px solid var(--ep-graphite);
  white-space: nowrap;
}
.desc-body table th strong { font-weight: 600; }
.desc-body table td {
  padding: 14px 18px;
  font-size: 14px; line-height: 1.55;
  border-bottom: 1px solid var(--ep-border-hair-2);
  color: var(--ep-fg-1);
  vertical-align: top;
}
.desc-body table tr:last-child td { border-bottom: none; }
.desc-body table tr:nth-child(even) td { background: var(--ep-paper); }
/* Numeric / size cells render in mono with tabular nums */
.desc-body table tbody tr td:not(:first-child) {
  font-family: var(--ep-font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-size: 13px;
  letter-spacing: 0;
  color: var(--ep-fg-1);
}
/* Tables WITHOUT a thead (the LED/Driver/Optional… style) — first column is the LABEL */
.desc-body table:not(:has(thead)) td:first-child {
  font-family: var(--ep-font-sf);
  font-weight: 600;
  color: var(--ep-fg-2);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11px;
  width: 30%;
  white-space: nowrap;
}
.desc-body table:not(:has(thead)) td:not(:first-child) {
  font-family: var(--ep-font-sf);
  font-size: 14px;
  font-weight: 400;
  color: var(--ep-fg-1);
  letter-spacing: -0.012em;
}
/* Override the scoped width/height attributes inline on the WC tables */
.desc-body table[width],
.desc-body table[style*="height"],
.desc-body table[style*="width"] {
  width: 100% !important; height: auto !important;
}
.desc-body img {
  max-width: 100%; height: auto; border-radius: 10px;
  margin: 8px 0;
}

/* Strip empty paragraphs that WC peppers between blocks */
.desc-body p:empty { display: none; }


/* ==========================================================================
   CERTIFICATIONS STRIP (per EP brand-certifications.html reference)
   ========================================================================== */

.ep-cert-strip {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 18px 20px;
  border: 1px solid var(--ep-border-hair);
  border-radius: 14px;
  background: var(--ep-paper);
  flex-wrap: wrap;
  max-width: 1024px;
  margin: 0 auto;
}
.ep-cert {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 0 22px;
  height: 56px;
  border-right: 1px solid var(--ep-border-hair-2);
}
.ep-cert:first-child { padding-left: 4px; }
.ep-cert:last-child  { padding-right: 4px; border-right: none; }
.ep-cert-mark {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ep-white);
  border: 1px solid rgba(0,0,0,.14);
  border-radius: 999px;
  color: var(--ep-ink);
  flex-shrink: 0;
}
.ep-cert-mark--rect { border-radius: 8px; }
.ep-cert-mark--filled { background: var(--ep-ink); color: var(--ep-white); border-color: transparent; }
.ep-cert-mark--green { background: #1F8A4C; color: var(--ep-white); border-color: transparent; }
.ep-cert-mark svg { display: block; width: 100%; height: 100%; }
.ep-cert-label { display: flex; flex-direction: column; gap: 2px; line-height: 1.1; }
.ep-cert-label .k { font-weight: 600; font-size: 13px; color: var(--ep-fg-1); letter-spacing: -0.012em; }
.ep-cert-label .v { font-weight: 400; font-size: 11px; color: var(--ep-fg-3); letter-spacing: -0.008em; }


/* ==========================================================================
   ICON-BASED PRODUCT CARD SPEC STRIP (for catalogue cards)
   Per EP component-product-card.html reference — 5 equal cells with icons.
   ========================================================================== */

.card-icon-specs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  border: 1px solid var(--ep-border-hair);
  border-radius: 4px;
  margin-top: 12px;
}
.card-icon-spec {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 10px 4px;
  gap: 5px;
  border-right: 1px solid var(--ep-border-hair);
  height: 56px; box-sizing: border-box;
}
.card-icon-spec:last-child { border-right: none; }
.card-icon-spec svg { color: var(--ep-fg-2); display: block; width: 16px; height: 16px; }
.card-icon-spec-v {
  font-family: var(--ep-font-mono);
  font-weight: 600; font-size: 11px;
  color: var(--ep-fg-1);
  font-feature-settings: "tnum" 1;
  line-height: 1; letter-spacing: 0;
}

/* Cert chips (small, bottom of cards) */
.card-cert-chip {
  display: inline-flex; align-items: center;
  height: 22px; padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--ep-border-hair);
  background: var(--ep-white);
  font-size: 10px; font-weight: 600; color: var(--ep-fg-2);
  letter-spacing: 0.08em; text-transform: uppercase;
}

/* ==========================================================================
   BRAND TICKER (the "Trusted by leading brands" marquee)
   ========================================================================== */

.brand-ticker {
  background: var(--ep-white);
  padding: 80px 0 88px;
  border-top: 1px solid var(--ep-border-hair-2);
  border-bottom: 1px solid var(--ep-border-hair-2);
  overflow: hidden;
}
.brand-ticker-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 40px;
  padding: 0 22px;
}
.brand-ticker-h {
  font-family: var(--ep-font-display);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 8px 0 0;
}

.brand-marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.brand-marquee-track {
  display: inline-flex;
  gap: 56px;
  align-items: center;
  white-space: nowrap;
  animation: marquee 45s linear infinite;
  padding-right: 56px;
}
.brand-marquee-item {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 64px;
  padding: 0 12px;
}
.brand-marquee-item img {
  display: block;
  max-height: 48px;
  max-width: 170px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(1) opacity(.55);
  transition: filter 220ms var(--ep-ease);
}
.brand-marquee-item:hover img { filter: grayscale(0) opacity(1); }

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* On dark surfaces — invert + raise opacity so logos read on black */
.tile.dark .brand-marquee-item img,
.brand-ticker.dark .brand-marquee-item img {
  filter: grayscale(1) brightness(8) opacity(.55);
}
.tile.dark .brand-marquee-item:hover img,
.brand-ticker.dark .brand-marquee-item:hover img {
  filter: grayscale(1) brightness(8) opacity(1);
}

/* Stat token (used on About page) */
.stat-v sub { font-size: 18px; font-weight: 400; color: var(--ep-fg-3); letter-spacing: -0.01em; vertical-align: baseline; margin-left: 4px; bottom: 0; }

/* ==========================================================================
   PRINT STYLESHEET — used by the "Download datasheet" button on product pages.
   window.print() opens the browser's print dialog where users save as PDF.
   We hide everything that's marketing chrome and keep just the product specs.
   ========================================================================== */
@media print {
  @page { size: A4; margin: 18mm 16mm; }

  html, body {
    background: #fff !important;
    color: #000 !important;
    font-family: var(--ep-font-sf), Helvetica, sans-serif;
    -webkit-print-color-adjust: exact;
            print-color-adjust: exact;
  }

  /* Strip site chrome — nav, footer, CTAs, marketing sections */
  .nav-utility-bar,
  .nav-global,
  .nav-sub,
  .footer,
  .pdp-ctas,
  .related-section,
  .ep-cert-strip,           /* certifications strip is rendered separately on print */
  .opt-group,
  #relatedGrid,
  [class*="brand-ticker"],
  [class*="brand-marquee"] { display: none !important; }

  /* Datasheet header — printed at the top of every page */
  body::before {
    content: "ENLIGHTEN PRO  ·  Architectural LED  ·  www.enlighten.biz";
    display: block;
    font-family: var(--ep-font-display);
    font-size: 10pt; font-weight: 600;
    letter-spacing: 0.18em;
    color: #000;
    border-bottom: 1px solid #000;
    padding-bottom: 6mm; margin-bottom: 8mm;
  }

  /* Tighten the product overview block for print */
  .pdp {
    display: grid !important;
    grid-template-columns: 38% 1fr !important;
    gap: 12mm !important;
    padding: 0 !important;
    page-break-inside: avoid;
  }
  .pdp-media {
    background: #fff !important;
    border: 1px solid #ccc !important;
    border-radius: 4mm !important;
    aspect-ratio: 1 !important;
  }
  .pdp-media img.main { padding: 6mm !important; }
  .pdp-thumbs { display: none !important; }
  .pdp-name {
    font-size: 22pt !important;
    color: #000 !important;
    margin-bottom: 2mm !important;
  }
  .pdp-eyebrow { font-size: 9pt !important; color: #555 !important; }
  .pdp-sku { font-size: 9pt !important; }
  .pdp-tag { font-size: 11pt !important; color: #333 !important; }
  .pdp-cats { display: none !important; }
  .pdp-meta { font-size: 9pt !important; color: #555 !important; }
  .pdp-meta-item b { color: #000 !important; }

  /* Description block */
  .desc-section {
    background: #fff !important;
    padding: 8mm 0 !important;
    page-break-before: auto;
    page-break-inside: avoid;
  }
  .desc-inner h2 {
    font-size: 14pt !important;
    margin-bottom: 4mm !important;
  }
  .desc-body { font-size: 10pt !important; color: #333 !important; }

  /* Spec table — the meat of the datasheet */
  .spec-section {
    background: #fff !important;
    padding: 4mm 0 !important;
    page-break-inside: auto;
  }
  .spec {
    border: 1px solid #000 !important;
    border-radius: 0 !important;
    page-break-inside: auto;
  }
  .spec-row-head {
    background: #000 !important;
    color: #fff !important;
    padding: 3mm 6mm !important;
    font-size: 9pt !important;
    -webkit-print-color-adjust: exact;
            print-color-adjust: exact;
  }
  .spec table { font-size: 10pt !important; }
  .spec td { padding: 2.5mm 6mm !important; }
  .spec tr:nth-child(even) { background: #f7f7f7 !important; }

  /* Page break footer — printed only on the last page */
  body::after {
    content: "Specifications subject to change · Contact +91 93723 99052 · sales@enlighten.biz";
    display: block;
    font-size: 8pt; color: #666;
    border-top: 1px solid #ccc;
    margin-top: 8mm; padding-top: 4mm;
  }

  /* Avoid orphan section headers */
  h1, h2, h3 { page-break-after: avoid; }
  .desc-section, .spec-section { page-break-inside: avoid; }
}