/* ==========================================================================
   Leolus brand layer (lx-) — added 2026-10-05
   Colours are taken from the Leolus logo (green wordmark, lime gradient,
   red bolt). Used first on /media-events and /media-gallery; reuse on other
   pages as the brand rolls out. All selectors are prefixed .lx- so nothing
   here touches the existing theme.
   ========================================================================== */
:root{
  --lx-green:#037C31;      /* wordmark green — primary */
  --lx-green-deep:#04431D; /* dark sections */
  --lx-lime:#A4C511;       /* logo gradient end — "charge" */
  --lx-red:#E4081E;        /* the bolt — used sparingly */
  --lx-ink:#1C221E;        /* text */
  --lx-muted:#58625B;
  --lx-mist:#F1F4EE;       /* quiet section background */
  --lx-line:#D9E0D4;
  --lx-paper:#FFFFFF;
}

.lx{font-family:"Poppins",system-ui,sans-serif;color:var(--lx-ink);}
.lx h1,.lx h2,.lx h3{font-family:"Poppins",system-ui,sans-serif;color:var(--lx-ink);letter-spacing:-0.02em;}
.lx p{color:var(--lx-muted);}
.lx a{color:var(--lx-green);}
.lx a:focus-visible,.lx button:focus-visible{outline:3px solid var(--lx-lime);outline-offset:3px;border-radius:4px;}

.lx-section{padding:88px 0;}
.lx-section--mist{background:var(--lx-mist);}
.lx-section--deep{background:var(--lx-green-deep);}
.lx-section--deep h2,.lx-section--deep h3{color:#fff;}
.lx-section--deep p{color:#CFE0C9;}
.lx-h2{font-size:clamp(28px,3.4vw,40px);font-weight:700;line-height:1.15;margin:0 0 14px;}
.lx-lede{font-size:17px;line-height:1.7;max-width:62ch;margin:0 0 40px;}

/* ---------- hero ---------- */
.lx-hero.about-top{background:var(--lx-green-deep);background-image:none;padding-top:180px;padding-bottom:0;overflow:hidden;}
.lx-hero .lx-hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:end;}
.lx-hero h1.hero_title{font-size:clamp(38px,5.2vw,68px);line-height:1.04;font-weight:700;color:#fff;margin:0 0 22px;letter-spacing:-0.03em;}
.lx-hero .lx-hero-copy{padding-bottom:88px;}
.lx-hero .lx-hero-copy p{color:#D5E6CF;font-size:18px;line-height:1.65;max-width:52ch;}
.lx-hero .lx-hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px;}
.lx-hero-media{position:relative;align-self:end;}
.lx-hero-media img.lx-cover{display:block;width:100%;max-width:420px;margin-left:auto;border-radius:14px 14px 0 0;box-shadow:0 -10px 60px rgba(0,0,0,.35);}
.lx-hero-media .lx-badge{position:absolute;left:0;bottom:48px;width:min(220px,46%);border-radius:10px;box-shadow:0 14px 40px rgba(0,0,0,.35);}
.lx-hero-photo{position:relative;height:100%;}
.lx-hero-photo img{display:block;width:100%;height:420px;object-fit:cover;border-radius:14px 14px 0 0;}

/* bolt rule under the hero: the one place the red appears big */
.lx-bolt-rule{height:6px;background:linear-gradient(90deg,var(--lx-green) 0 62%,var(--lx-lime) 62% 88%,var(--lx-red) 88% 100%);}

/* ---------- buttons ---------- */
.lx-btn{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:15px;padding:13px 24px;border-radius:999px;text-decoration:none;border:2px solid transparent;transition:background-color .2s,color .2s,border-color .2s;}
.lx a.lx-btn--solid,.lx-btn--solid{background:var(--lx-lime);color:var(--lx-green-deep);}
.lx a.lx-btn--solid:hover{background:#B8DA1E;color:var(--lx-green-deep);}
.lx a.lx-btn--ghost,.lx-btn--ghost{border-color:rgba(255,255,255,.45);color:#fff;}
.lx a.lx-btn--ghost:hover{border-color:#fff;color:#fff;}
.lx a.lx-btn--dark,.lx-btn--dark{background:var(--lx-green);color:#fff;}
.lx a.lx-btn--dark:hover{background:var(--lx-green-deep);color:#fff;}
.lx a.lx-btn--line,.lx-btn--line{border-color:var(--lx-green);color:var(--lx-green);background:transparent;}
.lx a.lx-btn--line:hover{background:var(--lx-green);color:#fff;}

/* ---------- signature: the battery-pack timeline ---------- */
.lx-pack{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:22px;position:relative;}
.lx-pack::before{content:"";position:absolute;left:6%;right:6%;top:64px;height:4px;background:var(--lx-line);border-radius:2px;}
.lx-cell{position:relative;text-align:left;}
.lx-cell-can{position:relative;width:76px;height:128px;border:3px solid var(--lx-ink);border-radius:12px;background:var(--lx-paper);margin:12px 0 22px;overflow:hidden;z-index:1;}
.lx-cell-can::before{content:"";position:absolute;}
.lx-cell-nub{position:absolute;top:0;left:38px;transform:translate(-50%,0);width:30px;height:12px;background:var(--lx-ink);border-radius:4px 4px 0 0;z-index:2;}
.lx-cell-fill{position:absolute;left:5px;right:5px;bottom:5px;height:calc(var(--lvl,100%) - 10px);border-radius:6px;background:linear-gradient(0deg,var(--lx-green),var(--lx-lime));}
.lx-cell-year{font-size:26px;font-weight:700;color:var(--lx-ink);line-height:1;margin:0 0 8px;letter-spacing:-0.02em;}
.lx-cell-title{font-size:16px;font-weight:600;color:var(--lx-ink);margin:0 0 6px;line-height:1.35;}
.lx-cell p{font-size:14px;line-height:1.6;margin:0;}
.lx-cell.is-charging .lx-cell-fill{animation:lx-charge 2.4s cubic-bezier(.3,.7,.2,1) .4s both;}
.lx-cell.is-charging .lx-cell-bolt{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:3;}
.lx-cell.is-charging .lx-cell-bolt svg{width:30px;height:30px;fill:var(--lx-red);filter:drop-shadow(0 0 0 #fff);}
@keyframes lx-charge{from{height:0}to{height:calc(var(--lvl,100%) - 10px)}}

/* ---------- press feature ---------- */
.lx-press{display:grid;grid-template-columns:.8fr 1.2fr;gap:64px;align-items:start;}
.lx-press-cover{position:relative;}
.lx-press-cover img.lx-cover{width:100%;max-width:380px;height:auto;border-radius:12px;box-shadow:0 24px 60px rgba(4,67,29,.22);}
.lx-press h3{font-size:clamp(24px,2.6vw,32px);font-weight:700;line-height:1.2;margin:6px 0 16px;}
.lx-press-source{font-size:14px;font-weight:600;color:var(--lx-green);margin:0;}
.lx-press ul{padding-left:18px;margin:18px 0;}
.lx-press li{color:var(--lx-muted);line-height:1.7;margin-bottom:8px;}
.lx-quote{margin:28px 0;padding:0 0 0 22px;border-left:4px solid var(--lx-lime);}
.lx-quote p{font-size:20px;line-height:1.5;color:var(--lx-ink);font-weight:500;margin:0 0 10px;}
.lx-quote cite{font-style:normal;font-size:14px;color:var(--lx-muted);}

/* ---------- credentials ---------- */
.lx-creds{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--lx-line);border-bottom:1px solid var(--lx-line);}
.lx-cred{padding:28px 24px;border-left:1px solid var(--lx-line);}
.lx-cred:first-child{border-left:none;padding-left:0;}
.lx-cred strong{display:block;font-size:20px;color:var(--lx-ink);line-height:1.25;margin-bottom:6px;}
.lx-cred span{font-size:14px;color:var(--lx-muted);line-height:1.55;display:block;}

/* ---------- brand family ---------- */
.lx-brands{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.lx-brand{display:flex;flex-direction:column;background:var(--lx-paper);border:1px solid var(--lx-line);border-radius:16px;padding:28px;text-decoration:none;transition:border-color .2s;}
.lx a.lx-brand:hover{border-color:var(--lx-green);}
.lx-brand-logo{height:76px;display:flex;align-items:center;margin-bottom:20px;}
.lx-brand-logo img{max-height:68px;max-width:220px;width:auto;}
.lx-brand h3{font-size:18px;font-weight:700;margin:0 0 8px;}
.lx-brand p{font-size:14.5px;line-height:1.6;margin:0 0 16px;flex:1;}
.lx-brand .lx-brand-link{font-size:14px;font-weight:600;color:var(--lx-green);}
.lx-master{display:flex;align-items:center;gap:28px;margin-bottom:28px;}
.lx-master img{height:64px;width:auto;}
.lx-master p{margin:0;max-width:60ch;}

/* ---------- event feature ---------- */
.lx-event{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;margin-bottom:56px;}
.lx-event-photo img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:16px;}
.lx-event h3{font-size:clamp(24px,2.6vw,32px);font-weight:700;line-height:1.2;margin:0 0 14px;}
.lx-facts{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;margin:18px 0 22px;font-size:15px;}
.lx-facts dt{color:var(--lx-muted);font-weight:500;}
.lx-facts dd{margin:0;color:var(--lx-ink);font-weight:600;}
.lx-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.lx-strip a{display:block;border-radius:10px;overflow:hidden;}
.lx-strip img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;transition:transform .5s;}
.lx-strip a:hover img{transform:scale(1.05);}

/* ---------- press kit ---------- */
.lx-kit{display:grid;grid-template-columns:1.2fr .8fr;gap:48px;}
.lx-boiler{background:var(--lx-paper);border:1px solid var(--lx-line);border-radius:14px;padding:26px;}
.lx-boiler p{color:var(--lx-ink);font-size:15.5px;line-height:1.75;margin:0 0 16px;}
.lx-copy{font:600 14px "Poppins",sans-serif;background:var(--lx-mist);border:1px solid var(--lx-line);color:var(--lx-green);padding:9px 16px;border-radius:999px;cursor:pointer;}
.lx-copy:hover{border-color:var(--lx-green);}
.lx-downloads{list-style:none;padding:0;margin:0;}
.lx-downloads li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--lx-line);}
.lx-downloads li span{font-size:15px;color:var(--lx-ink);font-weight:500;}
.lx-downloads li small{display:block;color:var(--lx-muted);font-size:12.5px;font-weight:400;}
.lx-downloads a{font-size:14px;font-weight:600;white-space:nowrap;}
.lx-contact{margin-top:24px;font-size:15px;color:var(--lx-muted);line-height:1.7;}
.lx-contact strong{color:var(--lx-ink);}

/* ---------- closing band ---------- */
.lx-close{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:24px;}
.lx-close h2{margin:0;font-size:clamp(24px,2.8vw,34px);font-weight:700;color:#fff;max-width:24ch;line-height:1.2;}

/* ---------- gallery ---------- */
.lx-highlights{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:auto auto;gap:14px;margin-bottom:12px;}
.lx-highlights figure{margin:0;position:relative;border-radius:14px;overflow:hidden;background:#dfe5da;cursor:zoom-in;}
.lx-highlights figure:first-child{grid-row:span 2;}
.lx-highlights img{width:100%;height:100%;object-fit:cover;display:block;min-height:220px;transition:transform .6s;}
.lx-highlights figure:hover img{transform:scale(1.04);}
.lx-highlights figcaption{position:absolute;left:0;right:0;bottom:0;padding:40px 18px 14px;background:linear-gradient(transparent,rgba(4,30,14,.85));color:#fff;font-size:14px;font-weight:500;line-height:1.4;}
.lx-chapter{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:20px;margin-bottom:28px;}
.lx-chapter h2{margin:0;}
.lx-chapter .lx-facts{margin:0;}
.lx-filter{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:22px;}
.lx-filter button{font:600 14px "Poppins",sans-serif;background:var(--lx-paper);border:1.5px solid var(--lx-line);color:var(--lx-ink);padding:8px 18px;border-radius:999px;cursor:pointer;}
.lx-filter button[aria-pressed="true"]{background:var(--lx-green);border-color:var(--lx-green);color:#fff;}
.lx-grid{columns:4;column-gap:14px;}
.lx-grid figure{break-inside:avoid;margin:0 0 14px;border-radius:12px;overflow:hidden;background:#dfe5da;cursor:zoom-in;}
.lx-grid figure img{width:100%;display:block;transition:transform .5s;}
.lx-grid figure:hover img{transform:scale(1.04);}
.lx-grid figure button,.lx-highlights figure button{all:unset;display:block;width:100%;height:100%;cursor:zoom-in;}

.lx-lightbox{display:none;position:fixed;inset:0;z-index:99999;background:rgba(6,20,11,.95);align-items:center;justify-content:center;flex-direction:column;}
.lx-lightbox.is-open{display:flex;}
.lx-lightbox img{max-width:92vw;max-height:78vh;border-radius:8px;}
.lx-lightbox .lx-lb-bar{display:flex;gap:18px;align-items:center;color:#CFE0C9;font-size:14px;margin-top:16px;}
.lx-lightbox .lx-lb-bar a{color:var(--lx-lime);font-weight:600;text-decoration:none;}
.lx-lightbox button{position:absolute;background:rgba(255,255,255,.1);border:none;color:#fff;width:52px;height:52px;border-radius:50%;font-size:26px;cursor:pointer;line-height:1;}
.lx-lightbox button:hover{background:rgba(255,255,255,.2);}
.lx-lb-close{top:20px;right:22px;}
.lx-lb-prev{left:20px;top:50%;transform:translateY(-50%);}
.lx-lb-next{right:20px;top:50%;transform:translateY(-50%);}

/* ---------- responsive ---------- */
@media (max-width:991px){
  .lx-section{padding:64px 0;}
  .lx-hero .lx-hero-grid,.lx-press,.lx-event,.lx-kit{grid-template-columns:1fr;gap:36px;}
  .lx-hero .lx-hero-copy{padding-bottom:0;}
  .lx-hero-media img.lx-cover{margin:0 auto;max-width:340px;}
  .lx-hero-media .lx-badge{left:4%;}
  .lx-pack{grid-template-columns:1fr;gap:0;}
  .lx-pack::before{left:36px;right:auto;top:20px;bottom:20px;width:4px;height:auto;}
  .lx-cell{display:grid;grid-template-columns:76px 1fr;gap:22px;align-items:center;padding:10px 0;}
  .lx-cell-can{margin:0;width:76px;height:110px;}
  .lx-creds{grid-template-columns:1fr 1fr;}
  .lx-cred:nth-child(3){border-left:none;padding-left:0;}
  .lx-cred:nth-child(n+3){border-top:1px solid var(--lx-line);}
  .lx-brands{grid-template-columns:1fr;}
  .lx-grid{columns:3;}
  .lx-highlights{grid-template-columns:1fr 1fr;}
  .lx-highlights figure:first-child{grid-column:span 2;grid-row:auto;}
  .lx-hero-photo img{height:300px;}
}
@media (max-width:640px){
  .lx-grid{columns:2;}
  .lx-strip{grid-template-columns:1fr 1fr;}
  .lx-creds{grid-template-columns:1fr;}
  .lx-cred{border-left:none !important;padding-left:0 !important;border-top:1px solid var(--lx-line);}
  .lx-cred:first-child{border-top:none;}
  .lx-master{flex-direction:column;align-items:flex-start;gap:14px;}
  .lx-highlights{grid-template-columns:1fr;}
  .lx-highlights figure:first-child{grid-column:auto;}
  .lx-lb-prev,.lx-lb-next{top:auto !important;bottom:24px;transform:none !important;}
}
@media (prefers-reduced-motion:reduce){
  .lx-cell.is-charging .lx-cell-fill{animation:none;}
  .lx-strip img,.lx-grid figure img,.lx-highlights img{transition:none;}
}