@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');
/* ============================================================
   SOLYX SYSTEMS — site-extra.css
   Hero video + corporate components. Loads AFTER styles.css.
   ============================================================ */

/* ---------- HERO VIDEO (home) — JS-driven crossfade, each clip plays start→end ---------- */
.hero--harbor .hero__slides--video { background: #0B1530; }
.hero--harbor .hero__slide--video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s ease;
  will-change: opacity;
}
.hero--harbor .hero__slide--video.is-active { opacity: 1; }

/* ---------- HERO ROTATING HEADLINES (synced to the 3 videos) ---------- */
.hero--harbor .hero__heads { display: grid; }
.hero--harbor .hero__head {
  grid-area: 1 / 1;            /* stack all three in the same cell */
  margin: 0;
  opacity: 0;
  transition: opacity 1s ease;
  text-align: center;
  justify-self: center;
  color: #fff;
}
.hero--harbor .hero__head.is-active { opacity: 1; }
.hero--harbor .hero__title {
  margin: 0;
  width: auto;
  text-align: center;
  font-family: 'Montserrat', var(--font-display);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.02em;
  font-size: clamp(4rem, 10.5vw, 8.1rem);
  text-shadow: 0 2px 32px rgba(0,0,0,.22);
}
.hero--harbor .hero__sub {
  margin: 40px auto 0;
  max-width: 36ch;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(1.3rem, 2.3vw, 1.95rem);
  line-height: 1.45;
  letter-spacing: 0;
  color: rgba(255,255,255,.92);
  text-shadow: 0 1px 14px rgba(0,0,0,.35);
}
/* orange accent rule separating the headline from the subtitle */
.hero--harbor .hero__sub::before {
  content: "";
  display: block;
  width: 140px; height: 3px;
  margin: 0 auto 34px;
  background: var(--solyx-orange);
  border-radius: 2px;
}
.hero--harbor .hero__headline .container { display: flex; justify-content: center; }

/* logo a touch smaller */
.brand--icon-only .brand-mark { width: 36px; height: 36px; }

/* ---------- LANGUAGE SELECTOR ---------- */
.lang-select {
  -webkit-appearance: none; appearance: none;
  font: inherit; font-size: .9rem; font-weight: 600;
  color: var(--jet-black);
  background-color: transparent;
  border: 1.5px solid var(--soft-gray); border-radius: 999px;
  padding: 8px 30px 8px 14px; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236A6A74' stroke-width='3'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 11px center; background-size: 11px;
  transition: border-color var(--transition), color var(--transition);
  max-width: 168px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lang-select:hover { border-color: var(--solyx-orange); }
/* legible over the dark transparent hero header */
.site-header--transparent:not(.is-scrolled) .lang-select {
  color: #fff; border-color: rgba(255,255,255,.45);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'><path d='M6 9l6 6 6-6'/></svg>");
}
.lang-select option { color: #111; }
@media (max-width: 860px){ .lang-select { display: none; } }
/* hide Google Translate chrome */
.goog-te-banner-frame, .goog-te-gadget-icon, #goog-gt-tt, .goog-tooltip { display: none !important; }
#google_translate_element { display: none !important; }
body { top: 0 !important; }

/* larger hero card thumbnails */
.hero-card__thumb { flex: 0 0 104px; width: 104px; height: 104px; border-radius: 12px; }
@media (max-width: 720px) { .hero-card__thumb { flex-basis: 88px; width: 88px; height: 88px; } }

/* ---------- KICKER / SECTION HELPERS ---------- */
.subhero--tight { padding-bottom: 8px; }
.center-narrow { max-width: 760px; margin: 0 auto; }
.lead-in { font-size: 1.15rem; color: var(--graphite); max-width: 70ch; }

/* storage icon — brand Charge Blue → Trust Navy (dark blue) */
.icon-storage { background: #1668E3; }
/* inline white SVG icons (replaces colored emoji) */
.techtab__icon svg, .tech-badge svg { width: 56%; height: 56%; display: block; }
.tv-bigicon svg { width: 3.4rem; height: 3.4rem; display: block; }
/* hybrid-system icon — brand SDCP teal to signal the solar+storage+firm combination */
.icon-hybrid { background: #00A0A8; }

/* extra pill colors (storage/utility/infra) */
.pill-blue   { background: rgba(22,104,227,.12);  color: #1668E3; }
.pill-teal   { background: rgba(0,160,168,.14);   color: #008791; }
.pill-navy   { background: rgba(18,53,107,.12);   color: #12356B; }

/* ---------- STAT BAND ---------- */
.statband {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
  padding: 12px 0 4px;
}
/* boxed stats so the row reads as a distinct band above the cards below */
.statband .stat {
  border: 1px solid var(--line-2, #CCD2DD);
  border-radius: 16px;
  padding: 24px 22px;
  background: var(--off-white);
  box-shadow: var(--shadow-sm);
}
.statband .stat .num {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2rem, 4vw, 3rem); line-height: 1;
  background: linear-gradient(135deg, var(--solyx-orange), var(--solar-gold));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  letter-spacing: -.02em;
}
.statband .stat .lbl { margin-top: 8px; color: var(--mid-gray); font-size: .92rem; line-height: 1.4; }
@media (max-width: 820px){ .statband { grid-template-columns: repeat(2, 1fr); gap: 22px; } }

/* ---------- CAPABILITY / FEATURE ROWS ---------- */
.cap { padding: clamp(56px, 7vw, 88px) 0; }
.cap + .cap { border-top: 1px solid var(--soft-gray); }
.cap__num {
  font-family: var(--font-display); font-weight: 800; font-size: .85rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--solar-gold);
}

/* ---------- HYBRID SYSTEM DIAGRAM ---------- */
.hsys { background:#0B1530; color:#fff; border-radius:20px; padding:30px 26px; }
.hsys svg { width:100%; height:auto; display:block; }
.hsys .legend-row { display:flex; flex-wrap:wrap; gap:18px; margin-top:18px; }
.hsys .legend-row span { display:flex; align-items:center; gap:8px; font-size:.85rem; color:rgba(255,255,255,.78); }
.hsys .legend-row i { width:12px; height:12px; border-radius:3px; display:inline-block; }

/* ---------- PROJECT CARDS ---------- */
.proj-head {
  display:flex; align-items:flex-end; justify-content:space-between; gap:20px;
  flex-wrap:wrap; padding-bottom:18px; border-bottom:2px solid var(--soft-gray); margin-bottom:8px;
}
.proj-status {
  font-size:.74rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding:6px 14px; border-radius:999px; white-space:nowrap;
}
.proj-status.active { background:rgba(16,185,129,.14); color:#0a8f63; }
.proj-status.dev    { background:rgba(249,168,37,.16); color:#a96a00; }
.proj-status.soon   { background:rgba(106,106,116,.14); color:var(--mid-gray); }

.spec-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:6px 0 0; }
@media (max-width:760px){ .spec-grid { grid-template-columns:repeat(2,1fr); } }
.spec {
  background:var(--off-white); border:1px solid var(--soft-gray); border-radius:12px; padding:16px 16px;
}
.spec .k { font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--mid-gray); margin:0 0 6px; }
.spec .v { font-family:var(--font-display); font-weight:800; font-size:1.45rem; line-height:1; color:var(--jet-black); }
.spec .v small { font-size:.8rem; font-weight:700; color:var(--mid-gray); margin-left:3px; }

/* TX placeholder */
.placeholder {
  border:1px dashed var(--line-2, #CCD2DD); border-radius:18px; padding:38px 32px; background:var(--off-white);
}
.placeholder h3 { margin-top:0; }
.placeholder .ph-line { height:10px; border-radius:6px; background:linear-gradient(90deg,var(--soft-gray),#fff,var(--soft-gray)); margin:10px 0; }
.placeholder .ph-line.w70{ width:70%; } .placeholder .ph-line.w50{ width:50%; } .placeholder .ph-line.w85{ width:85%; }

/* ---------- MISSION / VISION ---------- */
.mv-grid { display:grid; grid-template-columns:1fr 1fr; gap:44px; }
@media (max-width:760px){ .mv-grid { grid-template-columns:1fr; } }
.mv-card {
  border-radius:18px; padding:30px 28px; color:#fff;
  background:linear-gradient(135deg,#12356B,#0B1530);
}
.mv-card.vision { background:linear-gradient(135deg,var(--solyx-orange),var(--solar-gold)); }
.mv-card .mv-k { font-size:.78rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; opacity:.85; }
.mv-card h3 { color:#fff; font-size:1.5rem; margin:10px 0 10px; }
.mv-card p { color:rgba(255,255,255,.92); margin:0; font-size:1.05rem; line-height:1.55; }

/* values row */
.values { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media (max-width:760px){ .values { grid-template-columns:1fr; } }

/* ---------- full-width chart section helper ---------- */
.bleed { width:100%; }

/* ============================================================
   MAGAZINE BLOG (Salient "Mag"-style editorial grid — static, no marquee)
   ============================================================ */
.mag-masthead { text-align:center; padding:72px 0 14px; }
.mag-masthead h1 { font-family:var(--font-display); font-weight:800; font-size:clamp(2.6rem,7vw,5rem); letter-spacing:-.03em; margin:0; }
.mag-masthead .mag-sub { color:var(--mid-gray); max-width:62ch; margin:14px auto 0; font-size:1.05rem; }
.mag-cats { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:22px 0 0; }
.mag-cat { font-size:.76rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:7px 14px; border-radius:999px; border:1px solid var(--soft-gray); color:var(--graphite); background:#fff; }
.mag-cat:hover { border-color:var(--solyx-orange); color:var(--solyx-orange); }

.mag-hero { display:grid; grid-template-columns:1.5fr 1fr; gap:42px; margin-top:60px; }
.mag-side { display:grid; gap:24px; align-content:start; }
@media (max-width:860px){ .mag-hero { grid-template-columns:1fr; } }

.post { display:block; color:inherit; text-decoration:none; }
.post .thumb { position:relative; border-radius:16px; overflow:hidden; aspect-ratio:16/10; background:var(--soft-gray); box-shadow:var(--shadow-sm); }
.post .thumb img { width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.2,.7,.3,1); display:block; }
.post:hover .thumb img { transform:scale(1.045); }
.post .tag { position:absolute; top:12px; left:12px; font-size:.68rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; padding:5px 11px; border-radius:999px; background:rgba(11,11,13,.72); color:#fff; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.post h3 { margin:14px 0 0; line-height:1.22; color:var(--jet-black); transition:color var(--transition); }
.post:hover h3 { color:var(--solyx-orange); }
.post .excerpt { color:var(--mid-gray); margin:8px 0 0; font-size:.95rem; }
.post .meta { display:flex; align-items:center; gap:9px; margin-top:12px; font-size:.84rem; color:var(--mid-gray); }
.post .meta .av { width:28px; height:28px; border-radius:50%; background:linear-gradient(135deg,var(--solyx-orange),var(--solar-gold)); color:#fff; font-size:.68rem; font-weight:800; display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.post .meta b { color:var(--graphite); font-weight:600; }

.post--feature .thumb { aspect-ratio:16/11; }
.post--feature h3 { font-size:clamp(1.55rem,2.6vw,2.3rem); }
.post--feature .excerpt { font-size:1.02rem; }

.post--row { display:grid; grid-template-columns:128px 1fr; gap:16px; align-items:center; }
.post--row .thumb { aspect-ratio:1/1; border-radius:12px; }
.post--row h3 { margin:0; font-size:1.08rem; }

.mag-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin:96px 0 34px; border-bottom:2px solid var(--jet-black); padding-bottom:14px; }
.mag-head h2 { margin:0; color:var(--jet-black); }
.mag-head a { font-weight:700; font-size:.88rem; white-space:nowrap; }
.mag-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:56px 36px; }
@media (max-width:860px){ .mag-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .mag-grid { grid-template-columns:1fr; } .post--row { grid-template-columns:104px 1fr; } }

/* ---- magazine: featured overlay + 2x2 quad + scrolling row ---- */
.mag-hero { grid-template-columns: 1.35fr 1fr; align-items: stretch; }
.post--overlay { position:relative; border-radius:18px; overflow:hidden; min-height:600px; box-shadow:var(--shadow-sm); }
.post--overlay > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.3,1); }
.post--overlay:hover > img { transform:scale(1.04); }
.post--overlay .ov { position:absolute; inset:0; display:flex; flex-direction:column; padding:28px;
  background:linear-gradient(180deg, rgba(11,11,13,.6) 0%, rgba(11,11,13,.12) 38%, rgba(11,11,13,.8) 100%); }
.post--overlay .tag { position:static; align-self:flex-start; background:rgba(255,255,255,.92); color:var(--jet-black); }
.post--overlay h3 { color:#fff; font-family:var(--font-display); font-weight:700; font-size:clamp(1.7rem,2.5vw,2.5rem); line-height:1.12; margin:16px 0 0; max-width:15ch; }
.post--overlay:hover h3 { color:#fff; }
.post--overlay .meta { margin-top:auto; color:rgba(255,255,255,.92); }
.post--overlay .meta b { color:#fff; } .post--overlay .dt { color:rgba(255,255,255,.7); font-size:.8rem; }

.mag-quad { display:grid; grid-template-columns:1fr 1fr; gap:30px; align-content:start; }
@media (max-width:560px){ .mag-quad { grid-template-columns:1fr; } }
.post--mini .thumb { aspect-ratio:16/11; } .post--mini h3 { margin:0; font-size:1.08rem; }

.mag-tag { display:inline-block; margin:12px 0 6px; font-size:.64rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; padding:4px 10px; border-radius:6px; background:var(--soft-gray); color:var(--graphite); }
.mag-tag.policy { background:rgba(250,204,21,.28); color:#E0701A; }
.mag-tag.engineering { background:rgba(22,104,227,.12); color:#1668E3; }
.mag-tag.markets { background:rgba(214,40,40,.12); color:#C62828; }
.mag-tag.community { background:rgba(16,185,129,.14); color:#0a8f63; }
.mag-tag.technology { background:rgba(0,160,168,.14); color:#008791; }

.mag-marquee { overflow:hidden; margin-top:64px; padding:4px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent); }
.mag-marquee__track { display:flex; gap:24px; width:max-content; animation:magScroll 50s linear infinite; }
.mag-marquee:hover .mag-marquee__track { animation-play-state:paused; }
.mag-marquee .post--card { flex:0 0 300px; width:300px; }
.post--card .thumb { aspect-ratio:16/11; } .post--card h3 { margin:0; font-size:1.05rem; }
@keyframes magScroll { from { transform:translateX(0); } to { transform:translateX(-100%); } }
@media (prefers-reduced-motion:reduce){ .mag-marquee__track { animation:none; } .mag-marquee { overflow-x:auto; } }

/* ============================================================
   TECHNOLOGIES SLIDER (home · Salient "Tether"-style tabbed features)
   ============================================================ */
.techslider { display:grid; grid-template-columns:.85fr 1.15fr; gap:56px; align-items:stretch; margin-top:10px; }
@media (max-width:860px){ .techslider { grid-template-columns:1fr; gap:24px; } }
.techslider__tabs { display:flex; flex-direction:column; gap:16px; justify-content:center; }
.techtab { position:relative; display:flex; gap:16px; align-items:flex-start; text-align:left; width:100%;
  background:transparent; border:1px solid var(--soft-gray); border-radius:16px; padding:20px 22px; cursor:pointer;
  transition:border-color var(--transition), background var(--transition), box-shadow var(--transition); font:inherit; color:var(--graphite); overflow:hidden; }
.techtab:hover { border-color:var(--line-2,#CCD2DD); }
.techtab.is-active { background:var(--off-white); border-color:transparent; box-shadow:var(--shadow-md); }
.techtab__icon { flex:0 0 46px; width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.3rem; }
.techtab__txt { display:flex; flex-direction:column; gap:4px; }
.techtab__txt b { font-family:var(--font-display); font-size:1.12rem; color:var(--jet-black); }
.techtab__txt small { color:var(--mid-gray); font-size:.92rem; line-height:1.45; }
.techtab__bar { position:absolute; left:0; bottom:0; height:3px; width:0; background:#F27522; }
/* timeline counter colored per tab: orange · blue · teal */
.techslider__tabs .techtab:nth-child(1) .techtab__bar { background:#F27522; }
.techslider__tabs .techtab:nth-child(2) .techtab__bar { background:#1668E3; }
.techslider__tabs .techtab:nth-child(3) .techtab__bar { background:#00A0A8; }

.techslider__stage { position:relative; min-height:clamp(440px, 42vw, 540px); }
.techpanel { position:absolute; inset:0; opacity:0; transform:translateY(44px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1); pointer-events:none; }
.techpanel.is-active { opacity:1; transform:translateY(0); pointer-events:auto; }
@media (prefers-reduced-motion:reduce){ .techpanel { transition:opacity .3s ease; transform:none; } }

.techvisual { position:relative; height:100%; min-height:inherit; border-radius:22px; overflow:hidden; padding:40px; color:#fff;
  display:flex; flex-direction:column; justify-content:flex-end; box-shadow:var(--shadow-md); }
.techvisual::before { content:''; position:absolute; inset:0; background-image:var(--photo); background-size:cover; background-position:center; opacity:.30; }
.techvisual::after  { content:''; position:absolute; inset:0; background:var(--tvgrad); }
.techvisual > * { position:relative; z-index:2; }
.tv-eyebrow { display:block; font-size:.78rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; opacity:.92; margin-bottom:10px; }
.tv-stat { font-family:var(--font-display); font-weight:800; font-size:clamp(2.8rem,5vw,4.4rem); line-height:1; margin:10px 0 6px; }
.tv-stat small { font-size:.32em; font-weight:700; opacity:.85; }
.tv-lead { font-size:1.14rem; line-height:1.4; max-width:34ch; margin:0 0 18px; }
.tv-points { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.tv-points li { position:relative; padding-left:26px; font-size:.98rem; color:rgba(255,255,255,.94); }
.tv-points li::before { content:'✓'; position:absolute; left:0; font-weight:800; }
.tv-bigicon { position:absolute; top:30px; right:34px; font-size:3.6rem; opacity:.5; z-index:2; }
.tv-solar   { --tvgrad:linear-gradient(155deg, rgba(249,168,37,.90), rgba(194,82,26,.96)); }
.tv-storage { --tvgrad:linear-gradient(155deg, rgba(22,104,227,.95), rgba(18,53,107,.92)); }
.tv-hybrid  { --tvgrad:linear-gradient(155deg, rgba(0,160,168,.95), rgba(10,123,130,.92)); }

/* ===== Technologies page — consistent two-column tech blocks ===== */
.tcol { display:grid; grid-template-columns:0.9fr 1.1fr; gap:64px; align-items:center; }
.tcol--rev { grid-template-columns:1.1fr 0.9fr; }          /* visual on the left */
@media (max-width:880px){ .tcol, .tcol--rev { grid-template-columns:1fr; gap:34px; } }
/* uniform chart box across every technology chart */
.solyx-viz .chart-card .svg-chart { height:360px; width:100%; }
@media (max-width:880px){ .solyx-viz .chart-card .svg-chart { height:auto; } }
/* section label: icon + inline text (replaces the old pill button) */
.tech-label { display:flex; align-items:center; gap:14px; margin-bottom:18px; }
.tech-badge { display:flex; flex:0 0 auto; width:50px; height:50px; border-radius:14px; align-items:center; justify-content:center; color:#fff; font-size:1.45rem; line-height:1; box-shadow:0 6px 16px rgba(0,0,0,.12); }
.tech-label__txt { font-size:.82rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--graphite); }
.solyx-viz.dark .tech-label__txt { color:rgba(255,255,255,.72); }

/* feature boxes — 6-up grid used across all three technology sections */
.featgrid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
@media (max-width:600px){ .featgrid { grid-template-columns:1fr; } }
/* 3-up variant for full-width grids (e.g. project spec boxes) */
.featgrid--3 { grid-template-columns:repeat(3,1fr); }
@media (max-width:760px){ .featgrid--3 { grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .featgrid--3 { grid-template-columns:1fr; } }
.featbox { border:1px solid #e7e7ea; border-radius:14px; padding:18px 18px 19px; background:#fff; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.featbox:hover { transform:translateY(-2px); box-shadow:0 12px 26px rgba(0,0,0,.07); border-color:#dadade; }
.featbox .fk { display:flex; align-items:center; gap:7px; font-size:.78rem; font-weight:700; letter-spacing:.02em; text-transform:capitalize; color:#8a8f99; margin-bottom:8px; }
.featbox .fk i { display:none; }

/* colored box themes — light sections */
.featgrid--orange .featbox { background:#FFF4EC; border-color:#F3C9AE; }
.featgrid--orange .featbox:hover { border-color:#F27522; box-shadow:0 12px 26px rgba(242,117,34,.12); }
.featgrid--orange .featbox .fk { color:#BE5417; }
.featgrid--orange .featbox .fk i { background:#F27522; }

.featgrid--teal .featbox { background:#ECF8F8; border-color:#BFE6E8; }
.featgrid--teal .featbox:hover { border-color:#00A0A8; box-shadow:0 12px 26px rgba(0,160,168,.13); }
.featgrid--teal .featbox .fk { color:#067880; }
.featgrid--teal .featbox .fk i { background:#00A0A8; }

/* blue boxes — on the dark storage section */
.solyx-viz.dark .featgrid--blue .featbox { background:rgba(59,130,246,.13); border-color:rgba(59,130,246,.36); }
.solyx-viz.dark .featgrid--blue .featbox:hover { border-color:rgba(96,165,250,.65); box-shadow:none; }
.solyx-viz.dark .featgrid--blue .featbox .fk { color:#9CC0FF; }
.solyx-viz.dark .featgrid--blue .featbox .fv { color:#fff; }
.featgrid--blue .featbox .fk i { background:#3b82f6; }

/* keep the two storage rows on one seamless dark background */
#storage, #retention { background:var(--c-ink-2); }
.featbox .fv { display:block; font-size:1rem; font-weight:600; color:var(--jet-black); line-height:1.34; }
/* dark variant for the storage section */
.solyx-viz.dark .featbox { background:rgba(255,255,255,.045); border-color:rgba(255,255,255,.11); }
.solyx-viz.dark .featbox:hover { border-color:rgba(255,255,255,.22); box-shadow:none; }
.solyx-viz.dark .featbox .fk { color:rgba(255,255,255,.55); }
.solyx-viz.dark .featbox .fv { color:#fff; }

/* cost-chart toggle — sits above the chart, outside the card */
.costcol { display:flex; flex-direction:column; }
.solyx-viz .chips--cost { margin:0 0 16px; gap:10px; justify-content:center; }
.solyx-viz .chips--cost .chip { font-size:.92rem; padding:10px 18px; }
/* selected = solid orange fill, no outer ring */
.solyx-viz .chips--cost .chip[aria-pressed="true"] { background:#F27522; border-color:transparent; color:#fff; box-shadow:none; }
/* battery series uses blue */
.solyx-viz .chips--cost .chip[data-cost="battery"][aria-pressed="true"] { background:#1668E3; }
/* LCOE explainer */
.solyx-viz.dark .lcoe-def { font-size:.88rem; line-height:1.55; color:rgba(255,255,255,.62); border-left:2px solid rgba(255,255,255,.22); padding-left:14px; margin-top:20px; }
.solyx-viz.dark .lcoe-def strong { color:#fff; }

/* ===== Page hero with photo (Technologies, Projects, Team) ===== */
.subhero--photo { position:relative; isolation:isolate; border-bottom:0; background-color:#0E1320; background-size:cover; background-position:center; background-repeat:no-repeat; color:#fff; padding:clamp(116px,17vh,188px) 0 clamp(60px,9vh,96px); }
.subhero--photo::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(14,19,32,.50) 0%, rgba(14,19,32,.74) 100%); }
.subhero--photo .eyebrow { color:#FFC23D; }
.subhero--photo h1 { color:#fff; }
.subhero--photo .lede { color:rgba(255,255,255,.86); }
/* video-background variant (Contact) */
.subhero--video { overflow:hidden; }
.subhero--video .subhero__video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; }

/* ===== Blog article page ===== */
.bpost-hero { position:relative; isolation:isolate; background:#0E1320 center/cover no-repeat; color:#fff; padding:clamp(116px,17vh,184px) 0 52px; }
.bpost-hero::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(14,19,32,.55) 0%, rgba(14,19,32,.86) 100%); }
.bpost-hero .container { max-width:860px; }
.bpost-back { display:inline-block; color:rgba(255,255,255,.78); font-size:.85rem; font-weight:600; letter-spacing:.02em; margin-bottom:18px; }
.bpost-back:hover { color:#fff; }
.bpost-hero h1 { color:#fff; font-size:clamp(2rem,3.6vw,3rem); line-height:1.12; margin:12px 0 14px; max-width:20ch; }
.bpost-dek { color:rgba(255,255,255,.85); font-size:1.18rem; line-height:1.5; max-width:62ch; margin:0; }
.bpost-byline { display:flex; align-items:center; gap:11px; margin-top:24px; color:rgba(255,255,255,.72); font-size:.9rem; }
.bpost-byline .av { width:38px; height:38px; font-size:.8rem; }
.bpost { padding:54px 0 8px; }
.bpost-body { max-width:720px; margin:0 auto; font-size:1.13rem; line-height:1.75; color:var(--graphite); }
.bpost-body > p:first-of-type { font-size:1.22rem; color:var(--jet-black); }
.bpost-body h2 { font-size:1.5rem; color:var(--jet-black); margin:1.7em 0 .5em; }
.bpost-body p { margin:0 0 1.15em; }
.bpost-body a { color:var(--solyx-orange); text-decoration:underline; text-underline-offset:2px; }
.bpost-body ul { margin:0 0 1.15em; padding-left:22px; }
.bpost-body li { margin-bottom:.5em; }
.bpost-pull { margin:1.7em 0; padding:6px 0 6px 22px; border-left:3px solid var(--solyx-orange); font-family:var(--font-display); font-weight:700; font-size:1.4rem; line-height:1.38; color:var(--jet-black); }
.bpost-take { margin:1.8em 0; padding:22px 24px; background:#FFF4EC; border:1px solid #F3C9AE; border-radius:14px; }
.bpost-take h3 { margin:0 0 8px; font-size:1.05rem; color:#BE5417; }
.bpost-take p { margin:0; font-size:1.02rem; color:var(--graphite); }
.bpost-sources { max-width:720px; margin:32px auto 0; font-size:.9rem; line-height:1.6; color:var(--mid-gray); border-top:1px solid #ececef; padding-top:18px; }
.bpost-sources a { color:var(--mid-gray); text-decoration:underline; }
.bpost-sources a:hover { color:var(--solyx-orange); }

/* ===== White-paper components (tables, figures, key stats, TOC) ===== */
.bpost-meta-tag { display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:rgba(255,255,255,.82); border:1px solid rgba(255,255,255,.4); border-radius:999px; padding:4px 12px; margin-left:8px; }
.bpost-lead { max-width:720px; margin:0 auto 8px; }
.bpost-toc { max-width:720px; margin:0 auto 30px; padding:20px 24px; background:#F7F8FA; border:1px solid #ececef; border-radius:14px; }
.bpost-toc h4 { margin:0 0 10px; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--mid-gray); }
.bpost-toc ol { margin:0; padding-left:20px; columns:2; column-gap:34px; font-size:.96rem; line-height:1.6; }
.bpost-toc a { color:var(--graphite); text-decoration:none; }
.bpost-toc a:hover { color:var(--solyx-orange); }
@media (max-width:600px){ .bpost-toc ol { columns:1; } }
.bpost-body h2 .secnum { color:var(--solyx-orange); font-weight:800; margin-right:.5em; }

/* Key-stats band */
.bpost-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; max-width:760px; margin:30px auto; }
@media (max-width:640px){ .bpost-stats { grid-template-columns:1fr; } }
.bpost-stat { background:#fff; border:1px solid #ececef; border-radius:14px; padding:20px 22px; }
.bpost-stat .n { font-family:var(--font-display); font-weight:800; font-size:2rem; line-height:1; color:var(--jet-black); }
.bpost-stat .n span { font-size:.5em; font-weight:700; color:var(--mid-gray); }
.bpost-stat .l { margin-top:8px; font-size:.86rem; line-height:1.45; color:var(--graphite); }

/* Data table */
.bpost-figure { max-width:760px; margin:30px auto; }
.bpost-figure figcaption { font-size:.84rem; color:var(--mid-gray); margin-top:10px; line-height:1.5; }
.bpost-table { width:100%; border-collapse:collapse; font-size:.95rem; background:#fff; border:1px solid #ececef; border-radius:12px; overflow:hidden; }
.bpost-table caption { caption-side:top; text-align:left; font-size:.84rem; letter-spacing:.06em; text-transform:uppercase; color:var(--mid-gray); padding:0 0 10px; }
.bpost-table th, .bpost-table td { padding:11px 14px; text-align:left; border-bottom:1px solid #eef0f3; }
.bpost-table thead th { background:#0E1320; color:#fff; font-size:.8rem; letter-spacing:.03em; font-weight:700; }
.bpost-table tbody tr:nth-child(even) { background:#fafbfc; }
.bpost-table td.num, .bpost-table th.num { text-align:right; font-variant-numeric:tabular-nums; }
.bpost-table tbody tr.is-hi td { background:#FFF4EC; font-weight:600; }

/* Inline SVG chart card */
.bpost-chart { max-width:760px; margin:30px auto; padding:24px 24px 16px; background:#fff; border:1px solid #ececef; border-radius:16px; }
.bpost-chart h4 { margin:0 0 2px; font-size:1.05rem; color:var(--jet-black); }
.bpost-chart .sub { margin:0 0 14px; font-size:.86rem; color:var(--mid-gray); }
.bpost-chart svg { width:100%; height:auto; display:block; }
.bpost-chart .src { margin:10px 0 0; font-size:.78rem; color:var(--mid-gray); }

/* ===== Team member cards (photo + bio) ===== */
.tmember-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:34px; }
@media (max-width:1000px){ .tmember-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .tmember-grid { grid-template-columns:1fr; } }
.tmember { background:#fff; border:1px solid #ececef; border-radius:18px; overflow:hidden; display:flex; flex-direction:column; transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.tmember:hover { transform:translateY(-4px); box-shadow:0 18px 42px rgba(0,0,0,.11); border-color:#e1e1e5; }
.tmember__photo { aspect-ratio:4/5; background:#0E1320 center 18%/cover no-repeat; }
.tmember__body { padding:20px 22px 24px; }
.tmember__name { font-family:var(--font-display); font-weight:800; font-size:1.18rem; color:var(--jet-black); margin:0; }
.tmember__role { font-size:.78rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--solyx-orange); margin:7px 0 13px; }
.tmember__bio { font-size:.92rem; line-height:1.58; color:var(--graphite); margin:0; }

/* ===== Line-art illustration in techslider panels ===== */
.tv-lineart{ position:absolute; top:24px; right:24px; width:50%; max-width:380px; height:auto; opacity:.6; filter:brightness(0) invert(1); pointer-events:none; z-index:1; }
@media (max-width:700px){ .tv-lineart{ width:58%; opacity:.5; } }