/*
 * Showcase brand page (src/legacy/render/showcase.ts): light and plain, in the site's own type (IBM Plex Sans
 * Hebrew) and buttons; the brand's color (brands.json "accent", --bx-red) used sparingly. Logical properties
 * throughout: the page is RTL in Hebrew and LTR in English.
 */
.bx {
  --bx-ink: #1e1e20;
  --bx-text: #4e4c50;
  --bx-mute: #77757b;
  --bx-line: #e3e2df;
  --bx-soft: #f6f5f3;
  display: block;
  background: #fff;
  color: var(--bx-text);
  font-family: 'IBM Plex Sans Hebrew', sans-serif;
  font-size: 17px;
  line-height: 1.75;
}
.bx *,
.bx *::before,
.bx *::after { box-sizing: border-box; }
.bx h1, .bx h2, .bx h3, .bx p, .bx dl, .bx dd, .bx ol, .bx ul, .bx figure { margin: 0; padding: 0; }
.bx a { text-decoration: none; }
.bx img { display: block; max-width: 100%; height: auto; }

.bx-wrap { width: min(1160px, 100% - 48px); margin-inline: auto; }

.bx-h2 { font-size: clamp(28px, 3.2vw, 38px); font-weight: 600; line-height: 1.25; color: var(--bx-ink); }
.bx-lead { margin-top: 12px; font-size: 19px; line-height: 1.55; color: var(--bx-mute); max-width: 52ch; }
.bx-label { margin-bottom: 10px; font-size: 15px; font-weight: 600; color: var(--bx-red); }
.bx-section-head { margin-bottom: 44px; }

/* Buttons: the site's own (a gradient from the brand color to a darker shade of it, square) and a plain outline. */
.bx-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.bx-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 26px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  border: 1px solid transparent;
  transition: opacity 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.bx-btn--red { background: linear-gradient(90deg, var(--bx-red) 0%, color-mix(in srgb, var(--bx-red) 58%, #000) 100%); color: #fff; }
.bx-btn--red:hover, .bx-btn--red:focus-visible { opacity: 0.88; color: #fff; }
.bx-btn--ghost { color: #fff; border-color: rgba(255, 255, 255, 0.7); }
.bx-btn--ghost:hover, .bx-btn--ghost:focus-visible { background: #fff; color: var(--bx-ink); }
.bx-btn:focus-visible, .bx-link:focus-visible { outline: 2px solid var(--bx-red); outline-offset: 3px; }
.bx-arrow { width: 16px; height: 16px; flex: none; }

/* ---------- hero: the photo, darkened only enough behind the text ---------- */
.bx-hero {
  position: relative;
  min-height: min(calc(100vh - 110px), 600px);
  display: flex;
  align-items: center;
  padding-block: 80px;
  isolation: isolate;
}
.bx-hero__photo { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; }
.bx-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to right, rgba(20, 20, 22, 0.62) 0%, rgba(20, 20, 22, 0.35) 45%, rgba(20, 20, 22, 0) 75%);
}
.bx:dir(rtl) .bx-hero::before { background: linear-gradient(to left, rgba(20, 20, 22, 0.62) 0%, rgba(20, 20, 22, 0.35) 45%, rgba(20, 20, 22, 0) 75%); }
.bx-kicker { font-size: 15px; font-weight: 500; color: rgba(255, 255, 255, 0.85); }
.bx-hero__logo { width: auto; max-width: min(70vw, 360px); max-height: 70px; margin-block: 16px 22px; object-fit: contain; object-position: left; }
.bx:dir(rtl) .bx-hero__logo { object-position: right; }
.bx-hero__title { font-size: clamp(34px, 4.6vw, 54px); font-weight: 600; line-height: 1.15; color: #fff; max-width: 18ch; }
.bx-hero__title span { display: block; }
.bx-hero__title2 { font-size: 0.5em; font-weight: 400; line-height: 1.4; margin-top: 10px; color: rgba(255, 255, 255, 0.88); max-width: 34ch; }
.bx-hero .bx-actions { margin-top: 30px; }
.bx-in { opacity: 0; animation: bx-fade 0.7s ease forwards; animation-delay: calc(0.1s + var(--d, 0) * 0.1s); }
@keyframes bx-fade { to { opacity: 1; } }

/* ---------- figures ---------- */
.bx-figures { border-bottom: 1px solid var(--bx-line); }
.bx-figures__grid { display: grid; grid-template-columns: repeat(5, 1fr); }
.bx-figure { padding: 30px 24px; border-inline-start: 1px solid var(--bx-line); }
.bx-figure:first-child { border-inline-start: 0; padding-inline-start: 0; }
.bx-figure dt { font-size: 15px; color: var(--bx-mute); }
.bx-figure dd { margin-top: 4px; font-size: 24px; font-weight: 600; line-height: 1.3; color: var(--bx-red); }

/* ---------- about ---------- */
.bx-about { padding-block: 96px; }
.bx-about__grid { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: start; }
.bx-about__text p + p { margin-top: 16px; }

/* ---------- feature ---------- */
.bx-feature { padding-block: 96px; background: var(--bx-soft); }
.bx-feature__grid { display: grid; grid-template-columns: 6fr 5fr; gap: 64px; align-items: center; }
.bx-feature__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.bx-feature__text p { margin-top: 16px; }

/* ---------- products ---------- */
.bx-lineup { padding-block: 96px; }
.bx-lineup__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 360px)); justify-content: center; gap: 24px; }
.bx-product { display: flex; flex-direction: column; border: 1px solid var(--bx-line); background: #fff; transition: border-color 0.2s ease; }
.bx-product:hover { border-color: var(--bx-red); }
.bx-product__media { display: grid; place-items: center; padding: 32px; background: var(--bx-soft); min-height: 300px; }
.bx-product__img { max-height: 280px; width: auto; }
.bx-product__body { padding: 26px 28px 30px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.bx-product__name { font-size: 26px; font-weight: 600; line-height: 1.25; color: var(--bx-ink); }
.bx-product__desc { font-size: 16px; line-height: 1.65; }
.bx-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.bx-chips li { font-size: 14px; padding: 3px 12px; background: var(--bx-soft); border-radius: 20px; color: var(--bx-ink); unicode-bidi: isolate; }
.bx-link { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--bx-red); align-self: flex-start; }
.bx-link:hover { text-decoration: underline; }
.bx-lineup__grid--one { grid-template-columns: 1fr; }
.bx-more { margin-top: 40px; text-align: center; }
.bx-more .bx-btn--ghost { color: var(--bx-ink); border-color: #c9c7c3; }
.bx-more .bx-btn--ghost:hover, .bx-more .bx-btn--ghost:focus-visible { border-color: var(--bx-ink); background: #fff; }
.bx-lineup__grid--one .bx-product { display: grid; grid-template-columns: 5fr 7fr; }
.bx-lineup__grid--one .bx-product__media { min-height: 420px; }
.bx-lineup__grid--one .bx-product__img { max-height: 380px; }
.bx-lineup__grid--one .bx-product__body { padding: 48px; justify-content: center; }
.bx-lineup__grid--one .bx-product__name { font-size: 32px; }

/* ---------- why ---------- */
.bx-why { padding-block: 96px; background: var(--bx-soft); }
.bx-why .bx-section-head { margin-bottom: 36px; }
.bx-why__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }
.bx-pillar { background: #fff; padding: 32px 34px; border-top: 3px solid var(--bx-red); }
.bx-pillar h3 { font-size: 22px; font-weight: 600; line-height: 1.35; color: var(--bx-ink); margin-bottom: 12px; }

/* ---------- series ---------- */
.bx-series { padding-block: 96px; }
.bx-tiles { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; border-top: 1px solid var(--bx-line); }
.bx-tile { padding: 26px 22px 6px; border-inline-start: 1px solid var(--bx-line); }
.bx-tile:first-child { border-inline-start: 0; padding-inline-start: 0; }
.bx-tile h3 { font-size: 19px; font-weight: 600; line-height: 1.35; color: var(--bx-ink); margin-bottom: 8px; }
.bx-tile p { font-size: 15px; line-height: 1.65; }

/* ---------- call to action ---------- */
.bx-cta { padding-block: 72px; background: var(--bx-soft); border-top: 1px solid var(--bx-line); }
.bx-cta__inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.bx-cta .bx-btn--ghost { color: var(--bx-ink); border-color: #c9c7c3; }
.bx-cta .bx-btn--ghost:hover { border-color: var(--bx-ink); background: #fff; }

/* ---------- AIKO: its own site's look (aikosolar.com) ----------
 * A dark product banner, centred titles between thin orange lines, large orange figures, the text on a light grey
 * rounded card, a full-width photo band with white text, white product cards on grey with square outlined buttons.
 * ".bx.bx--aiko" outranks the layout's rules, the smaller-screen ones included. */
.bx.bx--aiko { --bx-grey: #f0f0f0; --bx-ink: #111; }
.bx.bx--aiko .bx-label { display: none; }
.bx.bx--aiko .bx-h2 { display: flex; align-items: center; justify-content: center; gap: 22px; text-align: center; font-weight: 500; }
.bx.bx--aiko .bx-h2::before,
.bx.bx--aiko .bx-h2::after { content: ''; flex: 0 1 150px; height: 1px; background: linear-gradient(90deg, transparent, var(--bx-red)); }
.bx.bx--aiko .bx-h2::after { background: linear-gradient(90deg, var(--bx-red), transparent); }
.bx.bx--aiko:dir(rtl) .bx-h2::before { background: linear-gradient(90deg, var(--bx-red), transparent); }
.bx.bx--aiko:dir(rtl) .bx-h2::after { background: linear-gradient(90deg, transparent, var(--bx-red)); }
.bx.bx--aiko .bx-section-head,
.bx.bx--aiko .bx-about__head { text-align: center; }
.bx.bx--aiko .bx-lead { margin-inline: auto; color: var(--bx-text); }
.bx.bx--aiko .bx-btn { border-radius: 0; }
.bx.bx--aiko .bx-btn--red { background: var(--bx-red); }
/* hero: the dark banner (its panel to the side away from the text: mirrored in Hebrew) */
.bx.bx--aiko .bx-hero { background: #000; }
.bx.bx--aiko .bx-hero::before { background: linear-gradient(to right, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0) 55%); }
.bx.bx--aiko:dir(rtl) .bx-hero::before { background: linear-gradient(to left, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0) 55%); }
.bx.bx--aiko .bx-hero__photo { background-position: left center; }
.bx.bx--aiko:dir(rtl) .bx-hero__photo { transform: scaleX(-1); }
.bx.bx--aiko .bx-hero__title { font-weight: 700; }
.bx.bx--aiko .bx-hero__title2 { font-size: 0.56em; font-weight: 600; color: var(--bx-red); }
/* figures: large orange numbers, small captions under them */
.bx.bx--aiko .bx-figures { border: 0; padding-block: 64px 0; }
.bx.bx--aiko .bx-figure { display: flex; flex-direction: column-reverse; align-items: center; text-align: center; padding: 8px 12px; border: 0; }
.bx.bx--aiko .bx-figure dd { margin: 0 0 6px; font-size: clamp(24px, 2.6vw, 36px); font-weight: 600; line-height: 1.2; white-space: nowrap; unicode-bidi: isolate; }
.bx.bx--aiko .bx-figure dt { font-size: 14px; color: var(--bx-ink); }
/* about: the text on a grey rounded card */
.bx.bx--aiko .bx-about { padding-block: 80px; }
.bx.bx--aiko .bx-about__grid { grid-template-columns: 1fr; gap: 36px; }
.bx.bx--aiko .bx-about__text { max-width: 940px; margin-inline: auto; padding: 44px 56px; border-radius: 32px; background: var(--bx-grey); color: var(--bx-ink); }
/* feature: a full-width photo band, white text over its sky */
.bx.bx--aiko .bx-feature { position: relative; isolation: isolate; min-height: 560px; padding-block: 88px 220px; background: #3b4657; }
.bx.bx--aiko .bx-feature__grid { grid-template-columns: 1fr; }
.bx.bx--aiko .bx-feature__media { position: absolute; inset: 0; z-index: -2; }
.bx.bx--aiko .bx-feature__media picture,
.bx.bx--aiko .bx-feature__img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: center bottom; }
.bx.bx--aiko .bx-feature::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(rgba(25, 32, 44, 0.45), rgba(25, 32, 44, 0.1) 70%); }
.bx.bx--aiko .bx-feature__text { max-width: 900px; margin-inline: auto; text-align: center; color: #fff; }
.bx.bx--aiko .bx-feature .bx-h2 { color: #fff; }
/* products: white cards on grey, an orange tag, a square outlined button */
.bx.bx--aiko .bx-lineup { background: var(--bx-grey); }
.bx.bx--aiko .bx-product { border: 0; }
.bx.bx--aiko .bx-product__media { background: #fff; }
.bx.bx--aiko .bx-product__name { font-weight: 500; }
.bx.bx--aiko .bx-chips li { border-radius: 0; background: none; border: 1px solid #d6d6d6; }
.bx.bx--aiko .bx-chips li:first-child { background: var(--bx-red); border-color: var(--bx-red); color: #fff; }
.bx.bx--aiko .bx-link { padding: 10px 22px; border: 1px solid var(--bx-ink); color: var(--bx-ink); font-weight: 500; transition: background-color 0.2s ease, color 0.2s ease; }
.bx.bx--aiko .bx-link:hover,
.bx.bx--aiko .bx-link:focus-visible { background: var(--bx-ink); color: #fff; text-decoration: none; }
/* why: "למה AIKO" as a large orange title, the two reasons centred under it */
.bx.bx--aiko .bx-why { background: #fff; }
.bx.bx--aiko .bx-why .bx-label { display: block; margin: 0; font-size: clamp(30px, 3.4vw, 42px); font-weight: 600; line-height: 1.25; text-align: center; }
.bx.bx--aiko .bx-why__grid { gap: 48px; }
.bx.bx--aiko .bx-pillar { padding: 0; border: 0; background: none; text-align: center; }
/* series: white tiles on grey, each title after a small orange square (the logo's) */
.bx.bx--aiko .bx-series { background: var(--bx-grey); }
.bx.bx--aiko .bx-tiles { gap: 16px; border: 0; }
.bx.bx--aiko .bx-tile { padding: 28px 24px; border: 0; background: #fff; }
.bx.bx--aiko .bx-tile h3::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-inline-end: 10px; vertical-align: 0.15em; background: var(--bx-red); }
/* call to action: centred, a square outlined second button */
.bx.bx--aiko .bx-cta { background: #fff; border: 0; padding-block: 88px; }
.bx.bx--aiko .bx-cta__inner { flex-direction: column; text-align: center; }
.bx.bx--aiko .bx-cta__inner > div:first-child { width: 100%; }
.bx.bx--aiko .bx-cta .bx-actions { justify-content: center; }
.bx.bx--aiko .bx-cta .bx-btn--ghost { border-color: var(--bx-ink); }
.bx.bx--aiko .bx-cta .bx-btn--ghost:hover { background: var(--bx-ink); color: #fff; }

/* ---------- Growatt and REPT: corporate ----------
 * Restrained and editorial, like the big energy companies' sites: no kicker labels, no tinted tiles or filled cards,
 * no pills or chips, no fade-ins. Headings aligned to the reading side, the brand colour (--bx-red) only on buttons,
 * links and a thin rule, hairline dividers, the feature photo running to the page edge. */
.bx.bx--growatt, .bx.bx--rept { --bx-ink: #15191d; --bx-text: #464c53; --bx-mute: #6c737a; --bx-line: #dfe2e5; --bx-soft: #f4f5f6; }
.bx.bx--growatt .bx-label, .bx.bx--rept .bx-label { display: none; }
.bx.bx--growatt .bx-h2, .bx.bx--rept .bx-h2 { font-size: clamp(30px, 3.2vw, 42px); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; color: var(--bx-ink); }
.bx.bx--growatt .bx-lead, .bx.bx--rept .bx-lead { margin-top: 14px; font-size: 18px; color: var(--bx-mute); }
.bx.bx--growatt .bx-section-head, .bx.bx--rept .bx-section-head { margin-bottom: 48px; }
.bx.bx--growatt .bx-btn, .bx.bx--rept .bx-btn { border-radius: 2px; padding: 14px 28px; font-weight: 500; }
.bx.bx--growatt .bx-btn--red, .bx.bx--rept .bx-btn--red { background: var(--bx-red); }
.bx.bx--growatt .bx-btn--red:hover, .bx.bx--growatt .bx-btn--red:focus-visible, .bx.bx--rept .bx-btn--red:hover, .bx.bx--rept .bx-btn--red:focus-visible { opacity: 1; background: color-mix(in srgb, var(--bx-red) 85%, #000); }
/* hero: the photo, a neutral shade behind the text, no animation */
.bx.bx--growatt .bx-hero, .bx.bx--rept .bx-hero { min-height: min(calc(100vh - 110px), 640px); }
.bx.bx--growatt .bx-hero::before, .bx.bx--rept .bx-hero::before { background: linear-gradient(to right, rgba(12, 16, 22, 0.72), rgba(12, 16, 22, 0.35) 45%, rgba(12, 16, 22, 0) 72%); }
.bx.bx--growatt .bx-hero__title, .bx.bx--rept .bx-hero__title { font-weight: 600; letter-spacing: -0.01em; }
.bx.bx--growatt .bx-hero__title2, .bx.bx--rept .bx-hero__title2 { font-weight: 400; color: rgba(255, 255, 255, 0.85); }
.bx.bx--growatt .bx-hero__logo, .bx.bx--rept .bx-hero__logo { max-height: 60px; }
.bx.bx--growatt .bx-kicker, .bx.bx--rept .bx-kicker { display: none; }
.bx.bx--growatt .bx-in, .bx.bx--rept .bx-in { animation: none; opacity: 1; }
/* figures: one band, hairlines between, a short brand-colour rule over each number */
.bx.bx--growatt .bx-figures, .bx.bx--rept .bx-figures { border-bottom: 1px solid var(--bx-line); }
.bx.bx--growatt .bx-figure, .bx.bx--rept .bx-figure { display: flex; flex-direction: column-reverse; justify-content: flex-end; padding: 36px 22px 34px; border-radius: 0; background: none; text-align: start; }
.bx.bx--growatt .bx-figure dd, .bx.bx--rept .bx-figure dd { margin: 0 0 8px; font-size: clamp(22px, 2.1vw, 30px); font-weight: 600; line-height: 1.15; color: var(--bx-ink); white-space: nowrap; unicode-bidi: isolate; }
.bx.bx--growatt .bx-figure dd::before, .bx.bx--rept .bx-figure dd::before { content: ''; display: block; width: 28px; height: 3px; margin-bottom: 16px; background: var(--bx-red); }
.bx.bx--growatt .bx-figure dt, .bx.bx--rept .bx-figure dt { font-size: 14px; color: var(--bx-mute); }
/* about: heading beside the text */
.bx.bx--growatt .bx-about, .bx.bx--rept .bx-about { padding-block: 112px; }
.bx.bx--growatt .bx-about__grid, .bx.bx--rept .bx-about__grid { grid-template-columns: 5fr 7fr; gap: 72px; }
.bx.bx--growatt .bx-about__head, .bx.bx--growatt .bx-section-head, .bx.bx--rept .bx-about__head, .bx.bx--rept .bx-section-head { text-align: start; }
.bx.bx--growatt .bx-about__text, .bx.bx--rept .bx-about__text { max-width: none; margin: 0; padding: 0; text-align: start; font-size: 17px; }
/* feature: the photo to the page edge, the text beside it on light grey */
.bx.bx--growatt .bx-feature, .bx.bx--rept .bx-feature { padding: 0; background: var(--bx-soft); overflow: hidden; }
.bx.bx--growatt .bx-feature__grid, .bx.bx--rept .bx-feature__grid { grid-template-columns: 1fr 1fr; gap: 80px; align-items: stretch; }
.bx.bx--growatt .bx-feature__media, .bx.bx--rept .bx-feature__media { margin-inline-start: calc(-1 * max(24px, (100vw - 1160px) / 2)); min-height: 520px; }
.bx.bx--growatt .bx-feature__media picture, .bx.bx--rept .bx-feature__media picture { display: block; height: 100%; }
.bx.bx--growatt .bx-feature__img, .bx.bx--rept .bx-feature__img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; border-radius: 0; }
.bx.bx--growatt .bx-feature__text, .bx.bx--rept .bx-feature__text { align-self: center; padding-block: 96px; }
/* products: thin-bordered cards, specs as plain text */
.bx.bx--growatt .bx-lineup, .bx.bx--rept .bx-lineup { padding-block: 112px; }
.bx.bx--growatt .bx-product, .bx.bx--rept .bx-product { border: 1px solid var(--bx-line); border-radius: 0; overflow: visible; transition: border-color 0.2s ease; }
.bx.bx--growatt .bx-product:hover, .bx.bx--rept .bx-product:hover { border-color: var(--bx-ink); }
.bx.bx--growatt .bx-product__media, .bx.bx--rept .bx-product__media { background: var(--bx-soft); padding: 40px; }
.bx.bx--growatt .bx-product__name, .bx.bx--rept .bx-product__name { font-size: 21px; font-weight: 600; }
.bx.bx--growatt .bx-chips, .bx.bx--rept .bx-chips { gap: 0; }
.bx.bx--growatt .bx-chips li, .bx.bx--rept .bx-chips li { padding: 0; border: 0; border-radius: 0; background: none; font-size: 14px; color: var(--bx-mute); }
.bx.bx--growatt .bx-chips li + li::before, .bx.bx--rept .bx-chips li + li::before { content: '·'; margin-inline: 8px; color: var(--bx-line); }
.bx.bx--growatt .bx-product__desc, .bx.bx--rept .bx-product__desc { font-size: 15px; color: var(--bx-text); }
.bx.bx--growatt .bx-link, .bx.bx--rept .bx-link { color: var(--bx-red); font-weight: 600; padding: 0; border: 0; }
.bx.bx--growatt .bx-more, .bx.bx--rept .bx-more { text-align: start; }
.bx.bx--growatt .bx-lineup__grid--one .bx-link, .bx.bx--rept .bx-lineup__grid--one .bx-link { margin-top: 12px; }
.bx.bx--growatt .bx-more .bx-btn--ghost, .bx.bx--rept .bx-more .bx-btn--ghost { border-radius: 2px; }
/* why: a list under hairlines, not cards */
.bx.bx--growatt .bx-why, .bx.bx--rept .bx-why { padding-block: 112px; background: var(--bx-soft); }
.bx.bx--growatt .bx-why .bx-label, .bx.bx--rept .bx-why .bx-label { display: block; margin: 0 0 48px; font-size: clamp(30px, 3.2vw, 42px); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; color: var(--bx-ink); }
.bx.bx--growatt .bx-why .bx-section-head, .bx.bx--rept .bx-why .bx-section-head { margin-bottom: 0; }
.bx.bx--growatt .bx-why__grid, .bx.bx--rept .bx-why__grid { gap: 0 64px; }
.bx.bx--growatt .bx-pillar, .bx.bx--rept .bx-pillar { padding: 28px 0 36px; border: 0; border-top: 1px solid #cdd2d6; border-radius: 0; background: none; color: inherit; text-align: start; }
.bx.bx--growatt .bx-pillar h3, .bx.bx--rept .bx-pillar h3 { font-size: 20px; font-weight: 600; color: var(--bx-ink); }
/* series: the same, five across */
.bx.bx--growatt .bx-series, .bx.bx--rept .bx-series { padding-block: 112px; }
.bx.bx--growatt .bx-tiles, .bx.bx--rept .bx-tiles { gap: 0 32px; border: 0; }
.bx.bx--growatt .bx-tile, .bx.bx--rept .bx-tile { padding: 24px 0 8px; border: 0; border-top: 1px solid var(--bx-line); border-radius: 0; background: none; }
.bx.bx--growatt .bx-tile h3, .bx.bx--rept .bx-tile h3 { font-size: 17px; font-weight: 600; color: var(--bx-ink); }
.bx.bx--growatt .bx-tile h3::before, .bx.bx--rept .bx-tile h3::before { content: none; }
.bx.bx--growatt .bx-tile p, .bx.bx--rept .bx-tile p { color: var(--bx-mute); }
/* call to action: a plain band, heading and buttons on one line */
.bx.bx--growatt .bx-cta, .bx.bx--rept .bx-cta { padding-block: 80px; background: #fff; border-top: 1px solid var(--bx-line); }
.bx.bx--growatt .bx-cta__inner, .bx.bx--rept .bx-cta__inner { flex-direction: row; text-align: start; }
.bx.bx--growatt .bx-cta .bx-btn--ghost, .bx.bx--rept .bx-cta .bx-btn--ghost { color: var(--bx-ink); border-color: var(--bx-ink); }
.bx.bx--growatt .bx-cta .bx-btn--ghost:hover, .bx.bx--rept .bx-cta .bx-btn--ghost:hover { background: var(--bx-ink); color: #fff; }
/* colour: a light tint of the brand's colour on the figures band, the grey sections and the closing band */
.bx.bx--growatt, .bx.bx--rept { --bx-soft: color-mix(in srgb, var(--bx-red) 7%, #fff); --bx-tint: color-mix(in srgb, var(--bx-red) 11%, #fff); }
.bx.bx--growatt .bx-figures, .bx.bx--rept .bx-figures { background: var(--bx-tint); border: 0; }
.bx.bx--growatt .bx-figure, .bx.bx--rept .bx-figure { border-color: color-mix(in srgb, var(--bx-red) 22%, #fff); }
.bx.bx--growatt .bx-pillar, .bx.bx--rept .bx-pillar { border-top: 2px solid var(--bx-red); }
.bx.bx--growatt .bx-tile, .bx.bx--rept .bx-tile { border-top: 2px solid color-mix(in srgb, var(--bx-red) 45%, #fff); }
.bx.bx--growatt .bx-cta, .bx.bx--rept .bx-cta { background: var(--bx-tint); border: 0; }

/* no fade-ins */
.bx.bx--growatt.bx-js .bx-reveal, .bx.bx--rept.bx-js .bx-reveal { opacity: 1; transform: none; transition: none; }
/* The photos' products are on their right: the hero text stays on the left in Hebrew too. */
.bx.bx--growatt:dir(rtl) .bx-hero__inner, .bx.bx--rept:dir(rtl) .bx-hero__inner { display: flex; flex-direction: column; align-items: flex-end; }
.bx.bx--growatt:dir(rtl) .bx-hero::before, .bx.bx--rept:dir(rtl) .bx-hero::before { background: linear-gradient(to right, rgba(12, 16, 22, 0.72), rgba(12, 16, 22, 0.35) 45%, rgba(12, 16, 22, 0) 72%); }

/* ---------- scroll reveal (brand-showcase.js; without JS everything is visible) ---------- */
.bx.bx-js .bx-reveal { opacity: 0; transform: translateY(12px); transition: opacity 0.6s ease, transform 0.6s ease; transition-delay: calc(var(--d, 0) * 0.06s); }
.bx.bx-js .bx-reveal.bx-on { opacity: 1; transform: none; }

/* ---------- smaller screens ---------- */
@media (max-width: 1024px) {
  .bx-figures__grid { grid-template-columns: repeat(3, 1fr); }
  .bx-figure:nth-child(4) { border-inline-start: 0; padding-inline-start: 0; }
  .bx-figure:nth-child(n + 4) { border-top: 1px solid var(--bx-line); }
  .bx-tiles { grid-template-columns: repeat(2, 1fr); }
  .bx-tile { border-bottom: 1px solid var(--bx-line); padding-bottom: 22px; }
  .bx-tile:nth-child(odd) { border-inline-start: 0; padding-inline-start: 0; }
  .bx-about__grid, .bx-feature__grid { grid-template-columns: 1fr; gap: 36px; }
  .bx.bx--growatt .bx-about__grid, .bx.bx--rept .bx-about__grid, .bx.bx--growatt .bx-feature__grid, .bx.bx--rept .bx-feature__grid { grid-template-columns: 1fr; gap: 36px; }
  .bx.bx--growatt .bx-feature__media, .bx.bx--rept .bx-feature__media { margin-inline: calc(-1 * max(24px, (100vw - 1160px) / 2)); min-height: 360px; }
  .bx.bx--growatt .bx-feature__text, .bx.bx--rept .bx-feature__text { padding-block: 0 72px; }
  .bx-lineup__grid--one .bx-product { grid-template-columns: 1fr; }
  .bx-lineup__grid--one .bx-product__body { padding: 30px 28px; }
}
@media (max-width: 680px) {
  .bx { font-size: 16px; }
  .bx-wrap { width: calc(100% - 32px); }
  .bx-hero { min-height: 0; padding-block: 64px; }
  .bx-hero__logo { max-height: 52px; max-width: 70vw; }
  .bx-hero::before { background: rgba(20, 20, 22, 0.5) !important; }
  .bx-figures__grid { grid-template-columns: repeat(2, 1fr); }
  .bx-figure, .bx-figure:first-child, .bx-figure:nth-child(4) { padding: 20px 0; border-inline-start: 0; border-top: 1px solid var(--bx-line); }
  .bx-figure:nth-child(-n + 2) { border-top: 0; }
  .bx-figure:nth-child(even) { padding-inline-start: 16px; border-inline-start: 1px solid var(--bx-line); }
  .bx-about, .bx-feature, .bx-lineup, .bx-why, .bx-series { padding-block: 64px; }
  .bx-section-head { margin-bottom: 28px; }
  .bx-why__grid { grid-template-columns: 1fr; gap: 20px; }
  .bx-tiles { grid-template-columns: 1fr; }
  .bx-tile, .bx-tile:nth-child(odd) { border-inline-start: 0; padding-inline-start: 0; }
  .bx-product__media, .bx-lineup__grid--one .bx-product__media { min-height: 240px; }
  .bx-lineup__grid--one .bx-product__img { max-height: 240px; }
  .bx-cta { padding-block: 56px; }
  .bx.bx--aiko .bx-h2::before,
  .bx.bx--aiko .bx-h2::after { flex-basis: 40px; }
  .bx.bx--aiko .bx-hero__photo { background-position: center; }
  .bx.bx--growatt .bx-hero, .bx.bx--rept .bx-hero { min-height: 0; }
  .bx.bx--growatt .bx-hero__logo, .bx.bx--rept .bx-hero__logo { max-height: 42px; }
  .bx.bx--growatt .bx-figure, .bx.bx--rept .bx-figure { padding: 24px 0; border-inline-start: 0; }
  .bx.bx--growatt .bx-figure:nth-child(even), .bx.bx--rept .bx-figure:nth-child(even) { padding-inline-start: 16px; border-inline-start: 1px solid var(--bx-line); }
  .bx.bx--growatt .bx-about, .bx.bx--rept .bx-about, .bx.bx--growatt .bx-lineup, .bx.bx--rept .bx-lineup,
  .bx.bx--growatt .bx-why, .bx.bx--rept .bx-why, .bx.bx--growatt .bx-series, .bx.bx--rept .bx-series { padding-block: 64px; }
  .bx.bx--growatt .bx-feature__media, .bx.bx--rept .bx-feature__media { min-height: 260px; margin-inline: -16px; }
  .bx.bx--growatt .bx-feature__text, .bx.bx--rept .bx-feature__text { padding-block: 0 56px; }
  .bx.bx--growatt .bx-why__grid, .bx.bx--rept .bx-why__grid { gap: 0; }
  .bx.bx--growatt .bx-cta__inner, .bx.bx--rept .bx-cta__inner { flex-direction: column; align-items: flex-start; }
  .bx.bx--aiko .bx-figure { padding: 16px 8px; border: 0; }
  .bx.bx--aiko .bx-about__text { padding: 28px 24px; border-radius: 20px; }
  .bx.bx--aiko .bx-feature { min-height: 0; padding-block: 56px 160px; }
  .bx.bx--aiko .bx-tile { padding: 22px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .bx-in { animation: none; opacity: 1; }
  .bx.bx-js .bx-reveal { opacity: 1; transform: none; transition: none; }
}