/* ==========================================================================
   EliteBlocc — Download Centre
   File: assets/css/pages/eb-download-centre.css
   Version: 4.0 — Full v4 build. Premium curated resource library.
              Emerald-primary. Front-end filter system. Resource card grid.
              Pack-request soft gate. Motion intensity 1.

   SCOPE: All rules under [data-eb-dc4] or prefixed .eb-dc4-
   NO :root tokens, NO reset, NO global resets — global files only.

   ACCENT SYSTEM
   - Emerald primary: search focus, filter chips, resource cards, CTAs.
   - Gold accents: certified/verified badges, CE/BBA/EPD resource types.
   - Category-specific icon colours match Technical Hub conventions.

   SECTIONS
   00. Page token shortcuts
   01. Keyframes
   02. Reveal states
   03. Hero (search bar centred)
   04. Filter strip (role + category chips)
   05. Resource card grid
   06. Category sections (anchor-linked)
   07. Pack request (soft gate)
   08. Final CTA
   09. Disclaimer
   10. Focus states
   11. Reduced-motion overrides
   ========================================================================== */

/* ── 00. Page tokens ───────────────────────────────────────────────────── */
[data-eb-dc4] {
  --dc-ep:   cubic-bezier(0.22,1,0.36,1);
  --dc-es:   cubic-bezier(0.4,0,0.2,1);
  --dc-fast: 150ms;
  --dc-base: 280ms;
  --dc-slow: 650ms;
  /* Resource type accent colours */
  --dc-cert: var(--eb-color-gold,#f59e0b);
  --dc-data: var(--eb-color-emerald-light,#10b981);
  --dc-draw: #3b82f6;
  --dc-epd:  #06b6d4;
  --dc-test: var(--eb-color-emerald-light,#10b981);
  --dc-span: #b47c32;
  --dc-inst: #8b5cf6;
}

/* ── 01. Keyframes ─────────────────────────────────────────────────────── */
@keyframes eb-dc-breathe  { 0%,100%{opacity:.5}  50%{opacity:.85} }
@keyframes eb-dc-pls      { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.35;transform:scale(1.45)} }
@keyframes eb-dc-ticker   { from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes eb-dc-rv-up    { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:translateY(0)} }
@keyframes eb-dc-shimmer  { 0%{left:-100%} 100%{left:200%} }
@keyframes eb-dc-cta-glow { 0%,100%{box-shadow:0 0 0 0 rgba(16,185,129,.3)} 50%{box-shadow:0 0 22px 4px rgba(16,185,129,.14)} }

/* ── 02. Reveal states ─────────────────────────────────────────────────── */
.eb-dc4-h-rv { opacity: 0 }
.eb-dc4-h-rv.on { animation: eb-dc-rv-up .8s var(--dc-ep) both }

.eb-dc4-rv { opacity: 0; transform: translateY(16px) }
.eb-dc4-rv.on {
  opacity: 1; transform: translateY(0);
  transition: opacity var(--dc-slow) var(--dc-ep), transform var(--dc-slow) var(--dc-ep);
}
.eb-dc4-rv.on.d1 { transition-delay: .08s }
.eb-dc4-rv.on.d2 { transition-delay: .16s }
.eb-dc4-rv.on.d3 { transition-delay: .24s }

/* ── 03. Hero ──────────────────────────────────────────────────────────── */
.eb-dc4-hero {
  position: relative; overflow: hidden;
  padding: 4rem var(--eb-container-gutter,clamp(20px,4vw,56px)) 0;
  border-bottom: .5px solid rgba(16,185,129,.1);
}
.eb-dc4-hero__glow {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 100% 55% at 50% 0%, rgba(6,78,59,.5) 0%, transparent 55%);
  animation: eb-dc-breathe 7s ease-in-out infinite;
}
.eb-dc4-hero__grid {
  position: absolute; inset: 0; pointer-events: none; opacity: .4;
  background-image:
    linear-gradient(rgba(16,185,129,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16,185,129,.035) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse at 50% 0%, black 15%, transparent 60%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, black 15%, transparent 60%);
}
.eb-dc4-hero__inner {
  max-width: var(--eb-container-max,1400px); margin: 0 auto;
  position: relative; z-index: 1; text-align: center;
}

/* Breadcrumb */
.eb-dc4-bc {
  font-size: 11px; font-weight: var(--eb-weight-light,300);
  color: rgba(255,255,255,.28); display: inline-flex; align-items: center;
  gap: 5px; margin-bottom: 1rem;
}
.eb-dc4-bc a { color: rgba(255,255,255,.42); transition: color var(--dc-fast) }
.eb-dc4-bc a:hover { color: var(--eb-color-emerald-light,#10b981) }

/* Eyebrow */
.eb-dc4-eyebrow {
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  font-size: clamp(11px,1.2vw,12px); font-weight: var(--eb-weight-light,300);
  letter-spacing: .32em; text-transform: uppercase;
  color: var(--eb-color-emerald-light,#10b981); margin-bottom: .875rem;
}
.eb-dc4-eyebrow__bar {
  width: 14px; height: 2px;
  background: linear-gradient(90deg, var(--eb-color-emerald-light,#10b981), rgba(16,185,129,.4));
  border-radius: 1px; flex-shrink: 0;
}

/* H1 */
.eb-dc4-h1 {
  font-family: var(--eb-font-display,'DrukWide',Impact,sans-serif);
  font-weight: var(--eb-weight-extrabold,800);
  font-size: clamp(28px,3.8vw,52px); line-height: 1.02;
  letter-spacing: -.01em; text-transform: uppercase; color: #fff; margin-bottom: .75rem;
}
.eb-dc4-h1 em { font-style: normal; color: var(--eb-color-emerald-light,#10b981); text-shadow: 0 0 40px rgba(16,185,129,.28) }

.eb-dc4-lead {
  font-size: clamp(14px,1.4vw,16px); font-weight: var(--eb-weight-light,300);
  color: rgba(220,235,225,.72); line-height: 1.68;
  max-width: 560px; margin: 0 auto 2rem;
}

/* Search bar — hero centred, full width up to 720px */
.eb-dc4-search {
  display: flex; max-width: 720px; margin: 0 auto 0;
  background: rgba(255,255,255,.04);
  border: .5px solid rgba(16,185,129,.3);
  border-radius: var(--eb-radius-lg,12px);
  overflow: hidden;
  transition: border-color 200ms, box-shadow 200ms;
}
.eb-dc4-search:focus-within {
  border-color: rgba(16,185,129,.6);
  box-shadow: 0 0 0 3px rgba(16,185,129,.12);
}
.eb-dc4-search__input {
  flex: 1; background: transparent; border: none; outline: none;
  padding: 16px 22px; font-size: 16px; font-weight: var(--eb-weight-light,300);
  color: rgba(255,255,255,.82); font-family: var(--eb-font-body);
  min-height: 58px;
}
.eb-dc4-search__input::placeholder { color: rgba(255,255,255,.3) }
.eb-dc4-search__btn,
.elementor .eb-dc4-search__btn {
  all: unset; box-sizing: border-box;
  background: var(--eb-color-emerald-light,#10b981) !important;
  color: #011e0d !important; border: none !important;
  padding: 0 28px; font-size: 13px; font-weight: var(--eb-weight-semibold,600) !important;
  letter-spacing: .04em; cursor: pointer; display: flex; align-items: center;
  gap: 7px; white-space: nowrap; flex-shrink: 0;
  font-family: var(--eb-font-body); transition: opacity var(--dc-fast);
  border-radius: 0 !important; box-shadow: none !important;
  text-transform: none !important;
}
.eb-dc4-search__btn:hover, .elementor .eb-dc4-search__btn:hover { opacity: .9 !important }
.eb-dc4-search__btn svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; fill: none }

/* Stat band below search */
.eb-dc4-stat-band {
  display: flex; max-width: var(--eb-container-max,1400px); margin: 0 auto;
  border-top: .5px solid rgba(16,185,129,.1); position: relative; z-index: 1;
}
.eb-dc4-sb-i {
  flex: 1; padding: .875rem 0; text-align: center;
  border-right: .5px solid rgba(255,255,255,.05);
}
.eb-dc4-sb-i:last-child { border-right: none }
.eb-dc4-sb-i__n { display: block; font-size: 14.5px; font-weight: var(--eb-weight-bold,700); color: rgba(255,255,255,.6) }
.eb-dc4-sb-i__n em { font-style: normal; color: var(--eb-color-emerald-light,#10b981) }
.eb-dc4-sb-i__l { display: block; font-size: 10px; font-weight: var(--eb-weight-light,300); color: rgba(255,255,255,.26); margin-top: 2px; letter-spacing: .04em }

/* ── 04. Filter strip ──────────────────────────────────────────────────── */
.eb-dc4-filter-bar {
  background: rgba(1,12,8,.85);
  border-bottom: .5px solid rgba(16,185,129,.18);
  position: sticky; top: 0; z-index: 50;
  padding: .75rem var(--eb-container-gutter,clamp(20px,4vw,56px));
}
.eb-dc4-filter-bar__inner {
  max-width: var(--eb-container-max,1400px); margin: 0 auto;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.eb-dc4-filter-label {
  font-size: 10px; font-weight: var(--eb-weight-bold,700);
  letter-spacing: .18em; text-transform: uppercase;
  color: rgba(16,185,129,.55); white-space: nowrap; flex-shrink: 0;
}
.eb-dc4-chips { display: flex; gap: 6px; flex-wrap: wrap; flex: 1 }

/* Filter chip — Elementor-safe all:unset */
.eb-dc4-chip,
.elementor .eb-dc4-chip {
  all: unset; box-sizing: border-box;
  font-size: 11px; font-weight: var(--eb-weight-medium,500);
  padding: 5px 13px; border-radius: 20px;
  background: rgba(255,255,255,.05); border: .5px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.45); cursor: pointer; white-space: nowrap;
  transition: background var(--dc-fast), border-color var(--dc-fast), color var(--dc-fast);
  font-family: var(--eb-font-body);
}
.eb-dc4-chip:hover, .elementor .eb-dc4-chip:hover {
  background: rgba(16,185,129,.09) !important; border-color: rgba(16,185,129,.3) !important;
  color: var(--eb-color-emerald-light,#10b981) !important;
}
.eb-dc4-chip.on, .elementor .eb-dc4-chip.on {
  background: rgba(16,185,129,.18) !important; border-color: rgba(16,185,129,.45) !important;
  color: var(--eb-color-emerald-light,#10b981) !important;
}
.eb-dc4-chip:focus-visible { box-shadow: 0 0 0 2px rgba(16,185,129,.45) !important; outline: none !important }
.eb-dc4-chip:focus:not(:focus-visible) { outline: none !important }

/* Category anchor chips row */
.eb-dc4-cat-anchors {
  display: flex; gap: 6px; flex-wrap: wrap;
  max-width: var(--eb-container-max,1400px); margin: 0 auto;
  padding: .625rem var(--eb-container-gutter,clamp(20px,4vw,56px)) 0;
  position: relative; z-index: 1;
}
.eb-dc4-cat-anchor {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: var(--eb-weight-medium,500);
  padding: 4px 12px; border-radius: 20px;
  background: rgba(255,255,255,.04); border: .5px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.4); text-decoration: none;
  transition: background var(--dc-fast), border-color var(--dc-fast), color var(--dc-fast);
}
.eb-dc4-cat-anchor:hover { background: rgba(16,185,129,.08); border-color: rgba(16,185,129,.25); color: rgba(16,185,129,.8) }
.eb-dc4-cat-anchor__dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0 }

/* ── 05. Resource card grid ────────────────────────────────────────────── */
.eb-dc4-grid-sect {
  background: rgba(1,14,9,.65);
  background-image: radial-gradient(ellipse 70% 50% at 8% 40%, rgba(16,185,129,.08) 0%, transparent 55%);
  padding: 3rem 0;
  border-top: 1px solid rgba(16,185,129,.2);
}
.eb-dc4-grid-sect__inner {
  max-width: var(--eb-container-max,1400px); margin: 0 auto;
  padding: 0 var(--eb-container-gutter,clamp(20px,4vw,56px));
}
.eb-dc4-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-top: 1.5rem }

/* ── Resource card ──────────────────────────────────────────────────────── */
.eb-dc4-card {
  background: rgba(255,255,255,.035);
  border: .5px solid rgba(16,185,129,.22);
  border-radius: var(--eb-radius-lg,12px);
  padding: 18px 20px; display: flex; flex-direction: column;
  position: relative; overflow: hidden;
  transition: background var(--dc-base) var(--dc-ep), border-color var(--dc-base) var(--dc-ep),
              transform var(--dc-base) var(--dc-ep), box-shadow var(--dc-base) var(--dc-ep);
}
.eb-dc4-card:hover {
  background: rgba(16,185,129,.06);
  border-color: rgba(16,185,129,.4);
  transform: translateY(-4px);
  box-shadow: 0 14px 36px rgba(0,0,0,.25);
}
/* Top accent line on hover */
.eb-dc4-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  transform: scaleX(0); transform-origin: left; transition: transform var(--dc-base) var(--dc-ep);
}
.eb-dc4-card:hover::before { transform: scaleX(1) }

/* Category colour variants for top line */
.eb-dc4-card--cert::before { background: linear-gradient(90deg, transparent, var(--dc-cert), rgba(245,158,11,.4)) }
.eb-dc4-card--data::before { background: linear-gradient(90deg, transparent, var(--dc-data), rgba(16,185,129,.4)) }
.eb-dc4-card--draw::before { background: linear-gradient(90deg, transparent, var(--dc-draw), rgba(59,130,246,.4)) }
.eb-dc4-card--epd::before  { background: linear-gradient(90deg, transparent, var(--dc-epd),  rgba(6,182,212,.4)) }
.eb-dc4-card--test::before { background: linear-gradient(90deg, transparent, var(--dc-test), rgba(16,185,129,.4)) }
.eb-dc4-card--span::before { background: linear-gradient(90deg, transparent, var(--dc-span), rgba(180,124,50,.4)) }
.eb-dc4-card--inst::before { background: linear-gradient(90deg, transparent, var(--dc-inst), rgba(139,92,246,.4)) }

/* Card header row */
.eb-dc4-card__hdr { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px }
.eb-dc4-card__icon {
  width: 36px; height: 36px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; border: .5px solid;
}
.eb-dc4-card__icon svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; fill: none }
/* Icon colour variants */
.eb-dc4-card--cert .eb-dc4-card__icon { background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.28); color: var(--dc-cert) }
.eb-dc4-card--data .eb-dc4-card__icon { background: rgba(16,185,129,.12);  border-color: rgba(16,185,129,.28); color: var(--dc-data) }
.eb-dc4-card--draw .eb-dc4-card__icon { background: rgba(59,130,246,.12);  border-color: rgba(59,130,246,.28); color: var(--dc-draw) }
.eb-dc4-card--epd  .eb-dc4-card__icon { background: rgba(6,182,212,.12);   border-color: rgba(6,182,212,.28);  color: var(--dc-epd) }
.eb-dc4-card--test .eb-dc4-card__icon { background: rgba(16,185,129,.1);   border-color: rgba(16,185,129,.2);  color: var(--dc-test) }
.eb-dc4-card--span .eb-dc4-card__icon { background: rgba(180,124,50,.1);   border-color: rgba(180,124,50,.25); color: var(--dc-span) }
.eb-dc4-card--inst .eb-dc4-card__icon { background: rgba(139,92,246,.1);   border-color: rgba(139,92,246,.25); color: var(--dc-inst) }

/* Badges row (type + verified) */
.eb-dc4-card__badges { display: flex; gap: 5px; flex-wrap: wrap; flex: 1 }
.eb-dc4-badge {
  font-size: 9.5px; font-weight: var(--eb-weight-bold,700);
  padding: 2px 9px; border-radius: 20px; white-space: nowrap;
  letter-spacing: .04em;
}
.eb-dc4-badge--cert { background: rgba(245,158,11,.12); color: var(--dc-cert);  border: .5px solid rgba(245,158,11,.25) }
.eb-dc4-badge--data { background: rgba(16,185,129,.12); color: var(--dc-data);  border: .5px solid rgba(16,185,129,.25) }
.eb-dc4-badge--draw { background: rgba(59,130,246,.12); color: var(--dc-draw);  border: .5px solid rgba(59,130,246,.25) }
.eb-dc4-badge--epd  { background: rgba(6,182,212,.12);  color: var(--dc-epd);   border: .5px solid rgba(6,182,212,.25) }
.eb-dc4-badge--test { background: rgba(16,185,129,.1);  color: var(--dc-test);  border: .5px solid rgba(16,185,129,.2) }
.eb-dc4-badge--span { background: rgba(180,124,50,.1);  color: var(--dc-span);  border: .5px solid rgba(180,124,50,.22) }
.eb-dc4-badge--inst { background: rgba(139,92,246,.1);  color: var(--dc-inst);  border: .5px solid rgba(139,92,246,.22) }
.eb-dc4-badge--em   { background: rgba(16,185,129,.14); color: var(--eb-color-emerald-light,#10b981); border: .5px solid rgba(16,185,129,.3) }
.eb-dc4-badge--vfy  { background: rgba(16,185,129,.08); color: rgba(16,185,129,.65); border: .5px solid rgba(16,185,129,.18) }

/* Card content */
.eb-dc4-card__title { font-size: 14px; font-weight: var(--eb-weight-bold,700); color: rgba(255,255,255,.88); margin-bottom: 4px; line-height: 1.3 }
.eb-dc4-card__meta  { font-size: 11px; font-weight: var(--eb-weight-light,300); color: rgba(255,255,255,.32); margin-bottom: 8px }
.eb-dc4-card__desc  { font-size: 12px; font-weight: var(--eb-weight-light,300); color: rgba(220,235,225,.62); line-height: 1.6; flex: 1; margin-bottom: 14px }

/* Download row */
.eb-dc4-card__dl {
  display: flex; align-items: center; justify-content: space-between;
  border-top: .5px solid rgba(16,185,129,.12); padding-top: 11px; margin-top: auto;
}
.eb-dc4-card__dl-btn,
.elementor .eb-dc4-card__dl-btn {
  all: unset; box-sizing: border-box;
  font-size: 11.5px; font-weight: var(--eb-weight-semibold,600);
  color: var(--eb-color-emerald-light,#10b981) !important;
  display: flex; align-items: center; gap: 5px; cursor: pointer;
  font-family: var(--eb-font-body); transition: gap var(--dc-fast);
  text-decoration: none;
}
.eb-dc4-card:hover .eb-dc4-card__dl-btn { gap: 8px }
.eb-dc4-card__dl-btn svg { width: 13px; height: 13px; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; fill: none }
.eb-dc4-card__dl-size { font-size: 10px; font-weight: var(--eb-weight-light,300); color: rgba(255,255,255,.22) }

/* Hidden state for JS filtering */
.eb-dc4-card[hidden] { display: none }
.eb-dc4-card.eb-dc4-filtered { display: none }

/* Empty state */
.eb-dc4-empty {
  display: none; grid-column: 1 / -1; text-align: center;
  padding: 3rem 0; color: rgba(255,255,255,.28);
  font-size: 14px; font-weight: var(--eb-weight-light,300);
}
.eb-dc4-empty.on { display: block }
.eb-dc4-empty__icon { font-size: 32px; margin-bottom: .75rem; opacity: .3 }

/* ── 06. Category sections ─────────────────────────────────────────────── */
.eb-dc4-cat-sect {
  padding: 2.5rem 0;
  border-top: .5px solid rgba(16,185,129,.1);
  scroll-margin-top: 60px; /* accounts for sticky filter bar */
}
.eb-dc4-cat-sect__inner {
  max-width: var(--eb-container-max,1400px); margin: 0 auto;
  padding: 0 var(--eb-container-gutter,clamp(20px,4vw,56px));
}
.eb-dc4-cat-hdr { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem }
.eb-dc4-cat-hdr__left { display: flex; align-items: center; gap: 12px }
.eb-dc4-cat-icon {
  width: 38px; height: 38px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; border: .5px solid;
}
.eb-dc4-cat-icon svg { width: 17px; height: 17px; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; fill: none }
/* Category icon colours — same as card variants */
.eb-dc4-ci--cert { background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.28); color: var(--dc-cert) }
.eb-dc4-ci--data { background: rgba(16,185,129,.12); border-color: rgba(16,185,129,.28); color: var(--dc-data) }
.eb-dc4-ci--draw { background: rgba(59,130,246,.12); border-color: rgba(59,130,246,.28); color: var(--dc-draw) }
.eb-dc4-ci--epd  { background: rgba(6,182,212,.12);  border-color: rgba(6,182,212,.28);  color: var(--dc-epd) }
.eb-dc4-ci--test { background: rgba(16,185,129,.1);  border-color: rgba(16,185,129,.22); color: var(--dc-test) }
.eb-dc4-ci--span { background: rgba(180,124,50,.1);  border-color: rgba(180,124,50,.25); color: var(--dc-span) }
.eb-dc4-ci--inst { background: rgba(139,92,246,.1);  border-color: rgba(139,92,246,.25); color: var(--dc-inst) }
.eb-dc4-cat-hdr__title { font-size: 17px; font-weight: var(--eb-weight-bold,700); color: #fff }
.eb-dc4-cat-hdr__count { font-size: 10px; font-weight: var(--eb-weight-light,300); color: rgba(255,255,255,.28); letter-spacing: .06em }
.eb-dc4-cat-hdr__link {
  font-size: 12px; font-weight: var(--eb-weight-medium,500); color: rgba(16,185,129,.6);
  display: flex; align-items: center; gap: 4px; text-decoration: none;
  transition: color var(--dc-fast);
}
.eb-dc4-cat-hdr__link:hover { color: var(--eb-color-emerald-light,#10b981) }

/* ── 07. Pack request (soft gate) ──────────────────────────────────────── */
.eb-dc4-pack {
  background: rgba(6,78,59,.06);
  background-image: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(16,185,129,.12) 0%, transparent 60%);
  border: .5px solid rgba(16,185,129,.28);
  border-radius: var(--eb-radius-lg,12px);
  padding: 2.5rem; margin: 3rem auto;
  max-width: var(--eb-container-max,1400px);
  margin-left: var(--eb-container-gutter,clamp(20px,4vw,56px));
  margin-right: var(--eb-container-gutter,clamp(20px,4vw,56px));
  display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: center;
  position: relative; overflow: hidden;
}
.eb-dc4-pack::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1.5px;
  background: linear-gradient(90deg, transparent, rgba(16,185,129,.45), transparent);
  pointer-events: none;
}
.eb-dc4-pack__kicker {
  font-size: 10px; font-weight: var(--eb-weight-bold,700); letter-spacing: .2em;
  text-transform: uppercase; color: rgba(16,185,129,.65); margin-bottom: .5rem; display: block;
}
.eb-dc4-pack__title { font-size: clamp(18px,2.2vw,24px); font-weight: var(--eb-weight-bold,700); color: #fff; margin-bottom: .5rem }
.eb-dc4-pack__title em { font-style: normal; color: var(--eb-color-emerald-light,#10b981) }
.eb-dc4-pack__desc { font-size: 13px; font-weight: var(--eb-weight-light,300); color: rgba(220,235,225,.72); line-height: 1.65; max-width: 520px }
.eb-dc4-pack__items { display: flex; gap: 8px; flex-wrap: wrap; margin-top: .875rem }
.eb-dc4-pack__item {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: var(--eb-weight-light,300); color: rgba(255,255,255,.45);
}
.eb-dc4-pack__item::before { content: '✓'; color: var(--eb-color-emerald-light,#10b981); font-size: 10px; flex-shrink: 0 }
.eb-dc4-pack__ctas { display: flex; flex-direction: column; gap: 10px; align-items: flex-end; flex-shrink: 0 }

/* ── 08. Final CTA ─────────────────────────────────────────────────────── */
.eb-dc4-final {
  background: rgba(1,10,6,.75); padding: 4rem 0; text-align: center;
  position: relative; overflow: hidden;
  border-top: 1px solid rgba(16,185,129,.2);
}
.eb-dc4-final__wash {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 800px; height: 500px; pointer-events: none;
  background: radial-gradient(ellipse, rgba(16,185,129,.18) 0%, rgba(6,78,59,.08) 40%, transparent 65%);
  animation: eb-dc-breathe 5.5s ease-in-out infinite;
}
.eb-dc4-final__inner {
  max-width: 580px; margin: 0 auto;
  padding: 0 var(--eb-container-gutter,clamp(20px,4vw,56px));
  position: relative; z-index: 1;
}
.eb-dc4-final__ey { font-size: 10px; font-weight: var(--eb-weight-light,300); letter-spacing: .32em; text-transform: uppercase; color: rgba(16,185,129,.6); margin-bottom: .875rem }
.eb-dc4-final__h {
  font-family: var(--eb-font-display,'DrukWide',Impact,sans-serif);
  font-weight: var(--eb-weight-extrabold,800); font-size: clamp(22px,2.8vw,34px);
  text-transform: uppercase; color: #fff; margin-bottom: .75rem; line-height: 1.05;
}
.eb-dc4-final__h em { font-style: normal; color: var(--eb-color-emerald-light,#10b981); text-shadow: 0 0 40px rgba(16,185,129,.45) }
.eb-dc4-final__lead { font-size: 14px; font-weight: var(--eb-weight-light,300); color: rgba(220,235,225,.72); line-height: 1.7; margin-bottom: 2rem }
.eb-dc4-final__btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap }
/* Emerald primary CTA */
.eb-dc4-final__btns .eb-btn--primary {
  background: var(--eb-color-emerald-light,#10b981) !important; color: #011e0d !important;
  animation: eb-dc-cta-glow 3.2s ease-in-out infinite;
  position: relative; overflow: hidden;
}
.eb-dc4-final__btns .eb-btn--primary::after {
  content: ''; position: absolute; top: 0; left: -100%; width: 38%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
  animation: eb-dc-shimmer 3.8s ease-in-out 1.2s infinite;
}

/* ── 09. Disclaimer ────────────────────────────────────────────────────── */
.eb-dc4-disc { background: rgba(1,8,5,.85); padding: 1.375rem 0; border-top: .5px solid rgba(255,255,255,.05) }
.eb-dc4-disc p {
  max-width: var(--eb-container-max,1400px); margin: 0 auto;
  padding: 0 var(--eb-container-gutter,clamp(20px,4vw,56px));
  font-size: 10.5px; font-weight: var(--eb-weight-light,300);
  color: rgba(255,255,255,.18); line-height: 1.65;
}

/* ── 10. Focus states ──────────────────────────────────────────────────── */
.eb-dc4-card:focus-visible {
  outline: 2px solid rgba(16,185,129,.5); outline-offset: 2px;
}
.eb-dc4-chip:focus-visible,
.elementor .eb-dc4-chip:focus-visible {
  box-shadow: 0 0 0 2px rgba(16,185,129,.45) !important; outline: none !important;
}
.eb-dc4-search__input:focus-visible { outline: none }

/* ── 11. Reduced-motion ────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .eb-dc4-hero__glow, .eb-dc4-final__wash { animation: none }
  .eb-dc4-rv, .eb-dc4-h-rv { opacity: 1 !important; transform: none !important; animation: none !important }
  .eb-dc4-final__btns .eb-btn--primary { animation: none }
  .eb-dc4-final__btns .eb-btn--primary::after { animation: none }
  .eb-dc4-card { transition: none }
}

/* ==========================================================================
   RESPONSIVE — Download Centre
   ========================================================================== */

.eb-dc4-card,.eb-dc4-chip,.elementor .eb-dc4-chip,.eb-dc4-cat-anchor{
  touch-action: manipulation;
}

@media (max-width: 1023px) {
  /* Resource grid: 2-col */
  .eb-dc4-grid {
    grid-template-columns: repeat(2,1fr);
  }
  /* Pack CTA: stack */
  .eb-dc4-pack {
    grid-template-columns: 1fr;
  }
  .eb-dc4-pack__ctas {
    align-items: flex-start;
    flex-direction: row;
  }
  /* Category section grids */
  .eb-dc4-cat-sect .eb-dc4-grid {
    grid-template-columns: repeat(2,1fr);
  }
}

@media (max-width: 767px) {
  .eb-dc4-hero {
    overflow-x: clip;
  }
  /* Search: stack */
  .eb-dc4-search {
    flex-direction: column;
    max-width: 100%;
  }
  .eb-dc4-search__input {
    font-size: 16px; /* Prevent iOS zoom */
    min-height: 52px;
    padding: 16px 20px;
  }
  .eb-dc4-search__btn,.elementor .eb-dc4-search__btn {
    min-height: 50px;
    justify-content: center;
    padding: 0 20px;
    font-size: 16px;
  }
  /* Stat band: wrap */
  .eb-dc4-stat-band {
    flex-wrap: wrap;
  }
  .eb-dc4-sb-i {
    min-width: 50%;
    border-right: none;
    border-bottom: .5px solid rgba(255,255,255,.05);
  }
  /* Category quick-links: wrap naturally */
  .eb-dc4-cat-anchors {
    gap: 5px;
  }
  /* Filter bar: stack */
  .eb-dc4-filter-bar__inner {
    flex-wrap: wrap;
    gap: 8px;
  }
  /* All grids: single col on mobile */
  .eb-dc4-grid,
  .eb-dc4-cat-sect .eb-dc4-grid {
    grid-template-columns: 1fr;
  }
  /* Resource grid in res section */
  .eb-dc4-res-grid {
    grid-template-columns: 1fr;
  }
  /* Pack CTA: full stack */
  .eb-dc4-pack {
    margin-left: var(--eb-container-gutter,clamp(20px,4vw,56px));
    margin-right: var(--eb-container-gutter,clamp(20px,4vw,56px));
  }
  .eb-dc4-pack__ctas {
    flex-direction: column;
    align-items: stretch;
  }
  /* Final CTA buttons */
  .eb-dc4-final__btns {
    flex-direction: column;
    align-items: center;
  }
}

@media (max-width: 479px) {
  .eb-dc4-h1 {
    font-size: clamp(26px,8vw,36px);
  }
}

/* ── UX polish additions ─────────────────────────────────────────────── */
.eb-dc4-card__title, .eb-dc4-card__desc, .eb-dc4-res-card__name {
  overflow-wrap: break-word;
  word-break: break-word;
}
#dc-certifications, #dc-datasheets, #dc-drawings,
#dc-sustainability, #dc-thermal, #dc-floor, #dc-installation {
  scroll-margin-top: 120px; /* sticky filter bar ~60px + nav ~72px */
}