/* Header */
.site-header {
  position: sticky;
  z-index: 100;
  top: 0;
  width: 100%;
  border-bottom: 1px solid var(--hqess-border);
  background: #1F2328;
  color: var(--hqess-white);
  backdrop-filter: blur(14px);
  transition:
    background-color var(--hqess-transition-base),
    border-color var(--hqess-transition-base),
    color var(--hqess-transition-base);
}

.admin-bar .site-header { top: 32px; }
.site-header--overlay { position: fixed; }

.site-header--overlay:not(.is-scrolled):not(.menu-is-open) {
  border-color: rgba(255, 255, 255, 0.14);
  background: #1F2328;
  color: var(--hqess-white);
  backdrop-filter: none;
}

.site-header__inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-height: 5.5rem;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 3rem);
}

.site-branding { min-width: 8.25rem; }
.custom-logo-link, .site-logo { display: inline-flex; align-items: center; }
.custom-logo { width: auto; max-height: 2.75rem; }
.site-logo { padding: 0.28rem 0.4rem; background: var(--hqess-white); line-height: 0; text-decoration: none; }
.site-logo picture, .site-logo img { display: block; width: clamp(8.25rem, 10.85vw, 9.75rem); height: auto; }
.primary-navigation { justify-self: end; }

.primary-menu, .footer-menu {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 1.65vw, 1.75rem);
  padding: 0;
  margin: 0;
  list-style: none;
}

.primary-menu a {
  position: relative;
  color: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.035em;
  text-decoration: none;
}

.primary-menu a::after {
  position: absolute;
  right: 0;
  bottom: -0.5rem;
  left: 0;
  height: 1px;
  background: var(--hqess-green);
  content: "";
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--hqess-transition-fast);
}

.primary-menu a:hover, .primary-menu a:focus-visible { color: inherit; }
.primary-menu a:hover::after, .primary-menu a:focus-visible::after { transform: scaleX(1); transform-origin: left; }

.menu-toggle {
  display: none;
  min-height: 2.75rem;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.menu-toggle__lines { display: grid; width: 1.5rem; gap: 0.35rem; }
.menu-toggle__lines span { display: block; width: 100%; height: 1px; background: currentColor; transition: transform var(--hqess-transition-fast); }
.menu-toggle[aria-expanded="true"] .menu-toggle__lines span:first-child { transform: translateY(0.2rem) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__lines span:last-child { transform: translateY(-0.2rem) rotate(-45deg); }
.site-header__cta { min-height: 2.75rem; white-space: nowrap; }

/* Shared homepage structures */
.section-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 2rem; margin-bottom: clamp(3rem, 7vw, 6.5rem); }
.section-header .section-index { padding-top: 0.75rem; }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  color: inherit;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-decoration: none;
}

.text-link::before { width: 1.75rem; height: 1px; background: var(--hqess-green); content: ""; transition: width var(--hqess-transition-fast); }
.text-link:hover, .text-link:focus-visible { color: var(--hqess-green); }
.text-link:hover::before, .text-link:focus-visible::before { width: 2.5rem; }
.placeholder-copy { color: rgba(255, 255, 255, 0.5); font-family: var(--hqess-font-display); letter-spacing: 0.08em; }

.energy-line__inner, .final-cta__energy-line { display: grid; grid-template-columns: auto minmax(4rem, 1fr) auto; align-items: center; gap: 1rem; }
.energy-line__label { font-size: 0.625rem; font-weight: 800; letter-spacing: 0.14em; }
.energy-line__track { display: block; height: 1px; overflow: hidden; background: rgba(255, 255, 255, 0.14); }
.energy-line__track span { display: block; width: 100%; height: 100%; background: var(--hqess-green); transform: scaleX(0); transform-origin: left; }
.is-visible .energy-line__track span, .home-hero__energy-line .energy-line__track span { animation: hqess-line-reveal 900ms 500ms cubic-bezier(0.22, 1, 0.36, 1) forwards; }
@keyframes hqess-line-reveal { to { transform: scaleX(1); } }

/* 01 Hero */
.home-hero {
  position: relative;
  min-height: max(88vh, 51.25rem);
  overflow: hidden;
  background: linear-gradient(90deg, rgba(11, 124, 68, 0.08) 1px, transparent 1px) 0 0 / 12.5% 100%, var(--hqess-graphite);
  color: var(--hqess-white);
}

.home-hero::before { position: absolute; inset: 0; background: linear-gradient(105deg, rgba(31, 35, 40, 1) 0%, rgba(31, 35, 40, 0.97) 40%, rgba(31, 35, 40, 0.55) 68%, rgba(31, 35, 40, 0.15) 100%); content: ""; pointer-events: none; }

.home-hero__grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 41%) minmax(0, 59%);
  min-height: max(88vh, 51.25rem);
  align-items: center;
  padding-top: 7rem;
  padding-bottom: 7rem;
}

.home-hero__copy { position: relative; z-index: 3; padding-top: 1rem; }
.home-hero__eyebrow { color: rgba(255, 255, 255, 0.64); }

.home-hero__title {
  max-width: 7ch;
  margin-bottom: 2rem;
  font-size: clamp(5rem, 8.2vw, 8.75rem);
  line-height: 0.82;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}

.home-hero__title span { display: block; }
.home-hero__title span:nth-child(2) { transition-delay: 80ms; }
.home-hero__title span:nth-child(3) { transition-delay: 160ms; }
.home-hero__description { max-width: 32rem; margin-bottom: 2.25rem; color: rgba(255, 255, 255, 0.72); font-size: clamp(1rem, 1.3vw, 1.125rem); line-height: 1.65; }
.home-hero__actions { display: flex; align-items: center; gap: 1rem; }
.home-hero .button--outline:hover, .home-hero .button--outline:focus-visible { border-color: var(--hqess-white); background: var(--hqess-white); color: var(--hqess-graphite); }
.home-hero__visual { position: relative; align-self: stretch; min-width: 0; }
.home-hero__asset-wrap { position: absolute; top: 15%; right: -30%; width: 115%; }
.home-hero__asset { position: relative; z-index: 2; width: 100%; filter: drop-shadow(0 1.5rem 1.25rem rgba(0, 0, 0, 0.26)); }
.home-hero__asset picture, .home-hero__asset img, .home-hero__asset video { display: block; width: 100%; height: auto; }
.home-hero__ground { position: absolute; z-index: 1; right: 8%; bottom: 10%; width: 74%; height: 8%; border-radius: 50%; background: rgba(0, 0, 0, 0.34); filter: blur(1.5rem); }

.home-hero__specs { position: absolute; right: 0; bottom: 2.5rem; display: grid; grid-template-columns: repeat(3, auto); gap: clamp(1.5rem, 3vw, 3.5rem); margin: 0; }
.home-hero__specs div { padding-left: 1rem; border-left: 1px solid var(--hqess-green); }
.home-hero__specs dt { color: rgba(255, 255, 255, 0.52); font-size: 0.5625rem; font-weight: 800; letter-spacing: 0.14em; }
.home-hero__specs dd { margin: 0.3rem 0 0; font-family: var(--hqess-font-display); font-size: 1rem; font-weight: 600; letter-spacing: 0.05em; }
.home-hero__energy-line { position: absolute; z-index: 3; right: 0; bottom: 1.5rem; left: 0; color: rgba(255, 255, 255, 0.56); }

/* 02 Energy modes */
.energy-modes { position: relative; overflow: hidden; background: var(--hqess-white); }
.energy-modes__header { display: grid; grid-template-columns: 4rem minmax(0, 1fr); justify-content: start; }
.energy-modes__header .section-heading { max-width: 11ch; }
.energy-modes__stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(7rem, 12vw, 13rem); align-items: end; }
.energy-mode { min-width: 0; }
.energy-mode__heading { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-top: 1rem; border-top: 1px solid var(--hqess-graphite); }
.energy-mode__heading h3 { font-size: clamp(2rem, 3.3vw, 3.5rem); text-align: right; }
.energy-mode__number, .product-family__number { color: var(--hqess-green); font-family: var(--hqess-font-display); font-size: 0.875rem; font-weight: 700; }
.energy-mode__picture { display: block; }
.energy-mode__asset { width: 100%; height: clamp(23rem, 40vw, 35rem); margin: 1rem 0 1.5rem; object-fit: contain; }
.energy-mode--fixed .energy-mode__asset { width: 80%; margin-inline: auto; }
.energy-mode__product { margin-bottom: 1.25rem; font-family: var(--hqess-font-display); font-size: 1.125rem; font-weight: 600; text-transform: uppercase; }
.energy-mode__applications { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; padding: 0; margin: 0; color: var(--hqess-muted); font-size: 0.75rem; font-weight: 600; list-style: none; }
.energy-mode__applications li::before { margin-right: 0.5rem; color: var(--hqess-green); content: "+"; }

.energy-modes__bridge { position: absolute; top: 48%; left: 50%; display: grid; grid-template-rows: auto 5rem auto 5rem auto; align-items: center; justify-items: center; color: var(--hqess-muted); font-size: 0.5625rem; font-weight: 800; letter-spacing: 0.12em; transform: translate(-50%, -50%); }
.energy-modes__bridge strong { display: grid; width: 4rem; height: 4rem; place-items: center; border: 1px solid var(--hqess-green); background: var(--hqess-pale-green); color: var(--hqess-green); font-family: var(--hqess-font-display); font-size: 1.125rem; }
.energy-modes__route { position: relative; width: 1px; height: 100%; overflow: hidden; background: rgba(11, 124, 68, 0.2); }
.energy-modes__route i { position: absolute; top: -100%; left: 0; width: 100%; height: 100%; background: var(--hqess-green); animation: hqess-route 2.4s linear infinite; }
@keyframes hqess-route { to { transform: translateY(200%); } }

/* 03 Solutions */
.solutions { background: var(--hqess-warm-white); }
.solutions__header .section-heading { max-width: 16ch; font-size: clamp(2.75rem, 5vw, 5rem); }
.solutions__workspace { display: grid; grid-template-columns: minmax(15rem, 30%) minmax(0, 70%); gap: clamp(2.5rem, 5vw, 6rem); }
.solution-selector { align-self: start; }

.solution-selector__item { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); width: 100%; align-items: start; gap: 1rem; padding: 1.25rem 0; border: 0; border-top: 1px solid var(--hqess-border); background: transparent; color: var(--hqess-muted); cursor: pointer; text-align: left; transition: color var(--hqess-transition-fast); }
.solution-selector__item:last-of-type { border-bottom: 1px solid var(--hqess-border); }
.solution-selector__item span { color: var(--hqess-green); font-family: var(--hqess-font-display); font-size: 0.75rem; font-weight: 700; }
.solution-selector__item strong { font-family: var(--hqess-font-display); font-size: clamp(1.15rem, 1.8vw, 1.5rem); font-weight: 600; line-height: 1.15; transition: transform var(--hqess-transition-fast); }
.solution-selector__item:hover, .solution-selector__item:focus-visible, .solution-selector__item.is-active { color: var(--hqess-graphite); }
.solution-selector__item.is-active strong { transform: translateX(0.5rem); }
.solution-selector .text-link { margin-top: 2.25rem; }

.solution-diagram { min-width: 0; background: var(--hqess-graphite); color: var(--hqess-white); }
.solution-diagram__topline, .solution-diagram__legend { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.14); font-size: 0.625rem; letter-spacing: 0.12em; }
.solution-diagram__topline strong { color: var(--hqess-green); font-family: var(--hqess-font-display); font-size: 0.875rem; text-align: right; }
.solution-diagram__canvas { position: relative; min-height: 32rem; overflow: hidden; background: linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px) 0 0 / 4rem 4rem, linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px) 0 0 / 4rem 4rem; }
.solution-diagram__routes { position: absolute; inset: 7% 5%; width: 90%; height: 86%; }
.solution-diagram__routes path { fill: none; stroke: var(--hqess-green); stroke-dasharray: 8 7; stroke-width: 1.5; vector-effect: non-scaling-stroke; }

.diagram-node { position: absolute; display: grid; width: 7rem; min-height: 4.25rem; align-content: center; padding: 0.75rem; border: 1px solid rgba(255, 255, 255, 0.18); background: var(--hqess-graphite); opacity: 0.25; transform: scale(0.96); transition: border-color var(--hqess-transition-base), opacity var(--hqess-transition-base), transform var(--hqess-transition-base); }
.diagram-node.is-active { border-color: var(--hqess-green); opacity: 1; transform: scale(1); }
.diagram-node span { font-family: var(--hqess-font-display); font-size: 1.125rem; font-weight: 600; }
.diagram-node small { color: rgba(255, 255, 255, 0.42); font-size: 0.5rem; font-weight: 800; letter-spacing: 0.12em; }
.diagram-node--pv { top: 8%; left: 5%; }
.diagram-node--grid { top: 41%; left: 5%; }
.diagram-node--fuel { bottom: 8%; left: 5%; }
.diagram-node--ems { top: 40%; left: 43%; }
.diagram-node--bess { bottom: 6%; left: 43%; }
.diagram-node--load { top: 13%; right: 5%; }
.diagram-node--charger { right: 5%; bottom: 14%; }
.solution-diagram__legend { border-top: 1px solid rgba(255, 255, 255, 0.14); border-bottom: 0; color: rgba(255, 255, 255, 0.48); }
.solution-diagram__legend span:first-child { display: flex; align-items: center; gap: 0.5rem; }
.solution-diagram__legend i { width: 1.5rem; height: 1px; background: var(--hqess-green); }

/* 04 Products */
.products { background: var(--hqess-white); }
.product-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(19rem, auto)); gap: 1rem; }
.product-family { position: relative; display: grid; min-width: 0; overflow: hidden; background: var(--hqess-warm-white); }
.product-family--mobile { grid-column: 1 / span 7; grid-row: 1 / span 2; min-height: 48rem; background: var(--hqess-graphite); color: var(--hqess-white); }
.product-family--cabinet, .product-family--portable { grid-column: 8 / -1; grid-template-columns: 45% 55%; min-height: 23.5rem; }
.product-family--cabinet { grid-row: 1; }
.product-family--portable { grid-row: 2; }
.product-family__media { position: relative; min-height: 0; overflow: hidden; }
.product-family__media picture { display: block; width: 100%; height: 100%; }
.product-family__media img { width: 100%; height: 100%; object-fit: contain; transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1); }
.product-family:hover .product-family__media img { transform: translateX(0.5rem); }
.product-family--mobile .product-family__media { min-height: 31rem; }
.product-family__copy { align-self: end; padding: clamp(1.5rem, 3vw, 2.5rem); }
.product-family__copy h3 { max-width: 10ch; margin-top: 0.5rem; font-size: clamp(1.75rem, 3.5vw, 3.75rem); text-transform: uppercase; }
.product-family__copy p { max-width: 27rem; color: var(--hqess-muted); font-size: 0.875rem; }
.product-family--mobile .product-family__copy p { color: rgba(255, 255, 255, 0.62); }
.product-family--cabinet .product-family__copy, .product-family--portable .product-family__copy { display: flex; align-self: stretch; flex-direction: column; justify-content: flex-end; }
.product-family--cabinet .product-family__copy h3, .product-family--portable .product-family__copy h3 { font-size: clamp(1.5rem, 2.25vw, 2.5rem); }
.product-family--cabinet .product-family__copy p, .product-family--portable .product-family__copy p { font-size: 0.75rem; }

/* 05 Mobile feature */
.mobile-feature { position: relative; min-height: 56.25rem; overflow: hidden; background: linear-gradient(90deg, rgba(11, 124, 68, 0.07) 1px, transparent 1px) 0 0 / 10% 100%, #171b1f; color: var(--hqess-white); }
.mobile-feature__header { display: grid; grid-template-columns: 4rem minmax(0, 1fr); align-items: start; }
.mobile-feature__header .section-heading { max-width: 8ch; font-size: clamp(4rem, 8vw, 8rem); line-height: 0.82; }
.mobile-feature__stage { position: relative; min-height: 36rem; margin-top: -3rem; }
.mobile-feature__asset { position: absolute; top: 3%; left: 50%; width: min(80rem, 92%); height: 95%; filter: drop-shadow(0 1.75rem 1.5rem rgba(0, 0, 0, 0.34)); transform: translateX(-46%); }
.mobile-feature__asset picture { display: block; width: 100%; height: 100%; }
.mobile-feature__asset img, .mobile-feature__asset video { width: 100%; height: 100%; object-fit: contain; }
.feature-annotation { position: absolute; display: flex; min-width: 12rem; align-items: center; gap: 0.75rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--hqess-green); font-size: 0.625rem; font-weight: 800; letter-spacing: 0.12em; }
.feature-annotation::after { position: absolute; bottom: -1px; width: 4rem; height: 1px; background: rgba(255, 255, 255, 0.3); content: ""; }
.feature-annotation span { color: var(--hqess-green); font-family: var(--hqess-font-display); font-size: 0.75rem; }
.feature-annotation--one { top: 4%; left: 3%; }
.feature-annotation--two { top: 34%; right: 2%; }
.feature-annotation--three { bottom: 22%; left: 1%; }
.feature-annotation--four { right: 7%; bottom: 4%; }
.mobile-feature__copy { max-width: 36rem; margin: 1rem 0 0 auto; color: rgba(255, 255, 255, 0.65); font-size: clamp(1.125rem, 2vw, 1.5rem); line-height: 1.5; }

/* 06 Applications */
.applications { background: var(--hqess-warm-white); }
.applications__header .section-heading { max-width: 15ch; font-size: clamp(2.75rem, 5vw, 5rem); }
.application-switcher { display: grid; grid-template-columns: minmax(13rem, 25%) minmax(0, 75%); gap: clamp(2rem, 5vw, 5rem); }
.application-switcher__tabs { align-self: start; }

.application-tab, .engineering-tab { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); width: 100%; align-items: center; gap: 1rem; padding: 1rem 0; border: 0; border-top: 1px solid var(--hqess-border); background: transparent; color: var(--hqess-muted); cursor: pointer; text-align: left; transition: color var(--hqess-transition-fast), padding-left var(--hqess-transition-fast); }
.application-tab:last-child, .engineering-tab:last-child { border-bottom: 1px solid var(--hqess-border); }
.application-tab span, .engineering-tab span { color: var(--hqess-green); font-family: var(--hqess-font-display); font-size: 0.75rem; }
.application-tab strong, .engineering-tab strong { font-family: var(--hqess-font-display); font-size: clamp(1.25rem, 2vw, 1.75rem); font-weight: 600; }
.application-tab:hover, .application-tab:focus-visible, .application-tab.is-active, .engineering-tab:hover, .engineering-tab:focus-visible, .engineering-tab.is-active { padding-left: 0.5rem; color: var(--hqess-graphite); }

.application-switcher__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--hqess-graphite); }
.application-switcher__media picture, .project-proof__media picture, .engineering__visual picture { display: block; width: 100%; height: 100%; }
.application-switcher__media::after, .project-proof__media::after, .engineering__visual::after { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(18, 21, 24, 0.68) 100%); content: ""; pointer-events: none; }
.application-switcher__media img { width: 100%; height: 100%; object-fit: cover; transition: opacity 180ms ease, transform 500ms cubic-bezier(0.22, 1, 0.36, 1); }
.application-switcher__visual.is-changing img, .engineering__visual.is-changing img { opacity: 0; transform: scale(1.02); }
.application-switcher__index { position: absolute; z-index: 2; top: 1rem; right: 1.25rem; color: rgba(255, 255, 255, 0.24); font-family: var(--hqess-font-display); font-size: clamp(5rem, 11vw, 10rem); font-weight: 600; line-height: 0.8; }
.application-switcher__scene { position: absolute; z-index: 2; bottom: 1.5rem; left: 1.5rem; color: var(--hqess-white); font-family: var(--hqess-font-display); font-size: clamp(2rem, 5vw, 4.5rem); font-weight: 600; }
.application-switcher__details { display: grid; grid-template-columns: 1fr 1fr; border-right: 1px solid var(--hqess-border); border-bottom: 1px solid var(--hqess-border); border-left: 1px solid var(--hqess-border); }
.application-switcher__details div { padding: 1.5rem; }
.application-switcher__details div + div { border-left: 1px solid var(--hqess-border); }
.application-switcher__details span, .application-switcher__details strong { display: block; }
.application-switcher__details span { margin-bottom: 0.5rem; color: var(--hqess-green); font-size: 0.5625rem; font-weight: 800; letter-spacing: 0.12em; }
.application-switcher__details strong { font-family: var(--hqess-font-display); font-size: 1.25rem; font-weight: 600; }

/* 07 Projects */
.projects { background: var(--hqess-white); }
.project-list { display: grid; gap: clamp(4rem, 8vw, 8rem); }
.project-proof { display: grid; grid-template-columns: minmax(0, 62%) minmax(18rem, 38%); align-items: center; }
.project-proof:nth-child(even) { grid-template-columns: minmax(18rem, 38%) minmax(0, 62%); }
.project-proof:nth-child(even) .project-proof__media { grid-column: 2; grid-row: 1; }
.project-proof:nth-child(even) .project-proof__content { grid-column: 1; grid-row: 1; }
.project-proof__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--hqess-graphite); }
.project-proof__media img { width: 100%; height: 100%; object-fit: cover; }
.project-proof__number { position: absolute; z-index: 2; right: 1rem; bottom: -0.08em; color: rgba(255, 255, 255, 0.24); font-family: var(--hqess-font-display); font-size: clamp(6rem, 12vw, 11rem); font-weight: 600; line-height: 0.8; }
.project-proof__content { position: relative; z-index: 2; padding: clamp(1.75rem, 4vw, 4rem); margin-left: -2rem; background: var(--hqess-white); }
.project-proof:nth-child(even) .project-proof__content { margin-right: -2rem; margin-left: 0; }
.project-proof__content h3 { margin-bottom: 2rem; font-size: clamp(3rem, 6vw, 6rem); text-transform: uppercase; }
.project-proof__content dl { margin: 0; }
.project-proof__content dl div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1rem; padding: 0.85rem 0; border-top: 1px solid var(--hqess-border); }
.project-proof__content dl div:last-child { border-bottom: 1px solid var(--hqess-border); }
.project-proof__content dt { color: var(--hqess-green); font-size: 0.5625rem; font-weight: 800; letter-spacing: 0.1em; }
.project-proof__content dd { margin: 0; color: var(--hqess-muted); font-family: var(--hqess-font-display); font-size: 0.875rem; }

/* 08 Engineering */
.engineering { background: var(--hqess-pale-green); }
.engineering__workspace { display: grid; grid-template-columns: minmax(14rem, 31%) minmax(0, 69%); gap: clamp(2rem, 5vw, 5rem); }
.engineering__visual { position: relative; aspect-ratio: 8 / 5; overflow: hidden; background: var(--hqess-graphite); }
.engineering__visual img { width: 100%; height: 100%; object-fit: cover; transition: opacity 180ms ease, transform 500ms cubic-bezier(0.22, 1, 0.36, 1); }
.engineering__visual > span { position: absolute; z-index: 2; bottom: 1.5rem; left: 1.5rem; color: var(--hqess-white); font-family: var(--hqess-font-display); font-size: clamp(2.5rem, 6vw, 5.5rem); font-weight: 600; }

/* 09 FAQ */
.faq { background: var(--hqess-white); }
.faq__grid { display: grid; grid-template-columns: minmax(18rem, 38%) minmax(0, 62%); gap: clamp(3rem, 8vw, 8rem); }
.faq__header .section-index { display: block; margin-bottom: 2rem; }
.faq__header .section-heading { max-width: 8ch; font-size: clamp(3rem, 6vw, 5.75rem); }
.faq-item { border-top: 1px solid var(--hqess-border); }
.faq-item:last-child { border-bottom: 1px solid var(--hqess-border); }
.faq-item h3 { margin: 0; font-family: var(--hqess-font-body); }
.faq-item__trigger { display: flex; width: 100%; min-height: 5rem; align-items: center; justify-content: space-between; gap: 2rem; padding: 1.25rem 0; border: 0; background: transparent; color: var(--hqess-graphite); cursor: pointer; font-size: clamp(1rem, 1.5vw, 1.25rem); font-weight: 600; line-height: 1.35; text-align: left; }
.faq-item__trigger svg { width: 1.25rem; min-width: 1.25rem; height: 1.25rem; transition: transform var(--hqess-transition-base); }
.faq-item__trigger path { fill: none; stroke: currentColor; stroke-linecap: square; stroke-width: 1.5; }
.faq-item__trigger[aria-expanded="true"] svg { transform: rotate(45deg); }
.faq-item__panel { max-width: 38rem; max-height: 0; overflow: hidden; padding: 0 3rem 0 0; color: var(--hqess-muted); opacity: 0; transition: max-height var(--hqess-transition-base), opacity var(--hqess-transition-fast), padding-bottom var(--hqess-transition-base); }
.faq-item__panel.is-open { max-height: 12rem; padding-bottom: 1.5rem; opacity: 1; }
.faq-item__panel p { margin: 0; }

/* 10 Final CTA */
.final-cta { position: relative; overflow: hidden; background: linear-gradient(90deg, rgba(11, 124, 68, 0.07) 1px, transparent 1px) 0 0 / 12.5% 100%, var(--hqess-graphite); color: var(--hqess-white); }
.final-cta__inner { position: relative; }
.final-cta__title { max-width: 10ch; margin: 1.5rem 0 clamp(3rem, 7vw, 6rem); font-size: clamp(4.5rem, 9.5vw, 10rem); line-height: 0.82; letter-spacing: -0.04em; }
.final-cta__footer { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; }
.final-cta__footer p { max-width: 34rem; margin: 0; color: rgba(255, 255, 255, 0.62); font-size: clamp(1rem, 1.5vw, 1.25rem); }
.final-cta__energy-line { margin-top: clamp(3rem, 7vw, 6rem); color: rgba(255, 255, 255, 0.48); }

/* Footer */
.site-footer { padding-block: clamp(3rem, 6vw, 5.5rem) 2rem; background: #1F2328; color: var(--hqess-white); }
.site-footer__inner { display: grid; gap: clamp(3rem, 7vw, 6rem); }
.site-footer__top { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; }
.site-footer__logo { display: inline-flex; padding: clamp(0.45rem, 1vw, 0.75rem); background: var(--hqess-white); line-height: 0; text-decoration: none; }
.site-footer__logo picture, .site-footer__logo img { display: block; width: clamp(13rem, 24vw, 20rem); height: auto; }
.site-footer__statement { margin: 0; color: var(--hqess-green); font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.16em; }
.site-footer__columns { display: grid; grid-template-columns: minmax(0, 1fr) 18rem; gap: 4rem; padding-top: 2rem; border-top: 1px solid rgba(255, 255, 255, 0.14); }
.site-footer__label { margin-bottom: 1.25rem; color: rgba(255, 255, 255, 0.38); font-size: 0.625rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.footer-menu { align-items: flex-start; flex-wrap: wrap; gap: 0.75rem clamp(1.5rem, 3vw, 3rem); }
.footer-menu a, .site-footer__legal a { color: rgba(255, 255, 255, 0.75); font-size: 0.75rem; text-decoration: none; }
.footer-menu a:hover, .footer-menu a:focus-visible, .site-footer__legal a:hover, .site-footer__legal a:focus-visible { color: var(--hqess-white); }
.site-footer__contact p:not(.site-footer__label) { margin-bottom: 0.4rem; }
.site-footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.38); font-size: 0.6875rem; }
.site-footer__legal { display: flex; gap: 1.5rem; }

/* Inner-page foundation remains intentionally minimal. */
.content-layout { max-width: 55rem; }
.entry + .entry { margin-top: var(--hqess-space-7); padding-top: var(--hqess-space-7); border-top: 1px solid var(--hqess-border); }
.entry-title a { color: inherit; text-decoration: none; }
.entry-content > * + * { margin-top: var(--hqess-space-5); }

/* Tablet */
@media (max-width: 64rem) {
  .site-header__inner { grid-template-columns: auto minmax(0, 1fr) auto; }
  .menu-toggle { display: inline-flex; grid-column: 3; justify-self: end; }
  .primary-navigation { display: none; grid-column: 1 / -1; width: 100%; padding-top: 1rem; padding-bottom: 1rem; justify-self: stretch; }
  .primary-navigation.is-open { display: block; }
  .primary-menu { align-items: stretch; flex-direction: column; gap: 0; }
  .primary-menu a { display: block; padding-block: 0.8rem; border-bottom: 1px solid var(--hqess-border); font-family: var(--hqess-font-display); font-size: 1.25rem; }
  .site-header__cta { grid-column: 1 / -1; display: none; margin-bottom: 1rem; justify-self: start; }
  .site-header.menu-is-open .site-header__cta { display: inline-flex; }
  .site-header.menu-is-open { max-height: 100vh; overflow-y: auto; background: #1F2328; color: var(--hqess-white); backdrop-filter: blur(14px); }
  .home-hero__grid { grid-template-columns: minmax(0, 46%) minmax(0, 54%); }
  .home-hero__title { font-size: clamp(4.25rem, 9vw, 6.75rem); }
  .home-hero__asset-wrap { top: 18%; right: -26%; width: 140%; }
  .home-hero__specs { right: 0; gap: 1.5rem; }
  .energy-modes__stage { gap: 8rem; }
  .solution-diagram__canvas { min-height: 28rem; }
  .product-family--mobile { min-height: 42rem; }
  .product-family--cabinet, .product-family--portable { grid-template-columns: 42% 58%; }
}

/* Tablet portrait and mobile reflow */
@media (max-width: 56.25rem) {
  .home-hero, .home-hero__grid { min-height: auto; }
  .home-hero__grid { grid-template-columns: 1fr; padding-top: 9rem; padding-bottom: 5rem; }
  .home-hero__copy { max-width: 42rem; }
  .home-hero__title { font-size: clamp(4.75rem, 13vw, 7rem); }
  .home-hero__visual { min-height: 33rem; }
  .home-hero__asset-wrap { top: 0; right: -16%; width: 112%; }
  .home-hero__specs { right: auto; bottom: 1rem; left: 0; }
  .home-hero__energy-line { display: none; }
  .energy-modes__stage { grid-template-columns: 1fr; gap: 6rem; }
  .energy-modes__bridge { position: relative; top: auto; left: auto; grid-template-columns: auto minmax(2rem, 1fr) auto minmax(2rem, 1fr) auto; grid-template-rows: auto; width: 100%; transform: none; }
  .energy-modes__route { width: 100%; height: 1px; }
  .energy-modes__route i { top: 0; left: -100%; width: 100%; height: 100%; animation-name: hqess-route-horizontal; }
  @keyframes hqess-route-horizontal { to { transform: translateX(200%); } }
  .solutions__workspace, .application-switcher, .engineering__workspace, .faq__grid { grid-template-columns: 1fr; }
  .solution-selector, .application-switcher__tabs, .engineering__list { display: flex; padding-bottom: 0.5rem; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: thin; }
  .solution-selector__item, .application-tab, .engineering-tab { min-width: 14rem; border-bottom: 1px solid var(--hqess-border); }
  .solution-selector .text-link { min-width: 11rem; align-self: center; margin: 0 0 0 1.5rem; }
  .product-grid { grid-template-rows: auto; }
  .product-family--mobile, .product-family--cabinet, .product-family--portable { grid-column: 1 / -1; grid-row: auto; }
  .product-family--mobile { min-height: 42rem; }
  .product-family--cabinet, .product-family--portable { min-height: 24rem; }
  .mobile-feature__stage { min-height: 38rem; margin-top: 1rem; }
  .mobile-feature__asset { width: 120%; }
  .feature-annotation--one { top: 0; left: 0; }
  .feature-annotation--two { top: 22%; right: 0; }
  .feature-annotation--three { bottom: 23%; left: 0; }
  .feature-annotation--four { right: 0; bottom: 0; }
  .project-proof, .project-proof:nth-child(even) { grid-template-columns: 1fr; }
  .project-proof:nth-child(even) .project-proof__media, .project-proof:nth-child(even) .project-proof__content { grid-column: 1; grid-row: auto; }
  .project-proof__content, .project-proof:nth-child(even) .project-proof__content { margin: -2rem 1.5rem 0; }
}

/* Mobile */
@media (max-width: 47.9375rem) {
  .admin-bar .site-header { top: 46px; }
  .site-header__inner { min-height: 4.5rem; gap: 1rem; }
  .site-logo img { width: 8.25rem; }
  .section-header, .energy-modes__header, .mobile-feature__header { display: block; }
  .section-header .section-index, .energy-modes__header .section-index, .mobile-feature__header .section-index { display: block; margin-bottom: 1.5rem; padding: 0; }
  .home-hero__grid { padding-top: 7.5rem; padding-bottom: 4rem; }
  .home-hero__title { font-size: clamp(3.4rem, 15.5vw, 4rem); }
  .home-hero__description { max-width: 24rem; }
  .home-hero__actions { align-items: stretch; flex-direction: column; }
  .home-hero__actions .button { width: 100%; }
  .home-hero__visual { min-height: 25rem; }
  .home-hero__asset-wrap { top: 1.5rem; right: -25%; width: 130%; }
  .home-hero__specs { right: 0; bottom: 0; left: 0; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
  .home-hero__specs div { padding-left: 0.6rem; }
  .home-hero__specs dd { font-size: 0.75rem; }
  .energy-modes__header .section-heading { max-width: 9ch; }
  .energy-mode__heading h3 { font-size: 2rem; }
  .energy-mode__asset { height: 23rem; }
  .energy-modes__bridge { gap: 0.4rem; }
  .energy-modes__bridge strong { width: 3.25rem; height: 3.25rem; }
  .solution-diagram__topline { align-items: flex-start; flex-direction: column; }
  .solution-diagram__canvas { min-height: 27rem; }
  .diagram-node { width: 5.25rem; min-height: 3.5rem; padding: 0.55rem; }
  .diagram-node span { font-size: 0.875rem; }
  .diagram-node--ems, .diagram-node--bess { left: 39%; }
  .solution-diagram__legend { align-items: flex-start; flex-direction: column; }
  .product-family--mobile { min-height: 34rem; }
  .product-family--mobile .product-family__media { min-height: 22rem; }
  .product-family--cabinet, .product-family--portable { grid-template-columns: 1fr; }
  .product-family--cabinet .product-family__media, .product-family--portable .product-family__media { min-height: 17rem; }
  .product-family__copy { padding: 1.5rem; }
  .mobile-feature { min-height: auto; }
  .mobile-feature__header .section-heading { font-size: clamp(4rem, 20vw, 6rem); }
  .mobile-feature__stage { display: grid; min-height: 36rem; align-content: end; padding-bottom: 1rem; }
  .mobile-feature__asset { top: 9%; width: 145%; }
  .feature-annotation { position: relative; top: auto; right: auto; bottom: auto; left: auto; z-index: 2; width: 100%; min-width: 0; margin-top: 0.75rem; background: rgba(23, 27, 31, 0.7); }
  .application-switcher__details { grid-template-columns: 1fr; }
  .application-switcher__details div + div { border-top: 1px solid var(--hqess-border); border-left: 0; }
  .application-switcher__scene, .engineering__visual > span { bottom: 1rem; left: 1rem; }
  .project-proof__content, .project-proof:nth-child(even) .project-proof__content { padding: 1.5rem 1rem 0; margin: 0; }
  .project-proof__content dl div { grid-template-columns: 1fr; gap: 0.35rem; }
  .engineering__visual { aspect-ratio: 4 / 3; }
  .faq__grid { gap: 2.5rem; }
  .faq__header .section-heading { font-size: clamp(3.25rem, 15vw, 4.75rem); }
  .faq-item__trigger { min-height: 4.5rem; gap: 1rem; }
  .final-cta__title { font-size: clamp(4rem, 19vw, 6rem); }
  .final-cta__footer { align-items: stretch; flex-direction: column; }
  .final-cta__footer .button { width: 100%; }
  .energy-line__inner, .final-cta__energy-line { grid-template-columns: auto minmax(2rem, 1fr); }
  .energy-line__label:last-child { display: none; }
  .site-footer__top, .site-footer__bottom { align-items: flex-start; flex-direction: column; }
  .site-footer__columns { grid-template-columns: 1fr; gap: 3rem; }
  .footer-menu { display: grid; grid-template-columns: 1fr 1fr; }
}

@media (min-width: 74.0625rem) { .primary-navigation { display: block !important; } }

@media (prefers-reduced-motion: reduce) {
  .energy-modes__route i, .is-visible .energy-line__track span, .home-hero__energy-line .energy-line__track span, .energy-line__track span { animation: none; transform: none; }
  .product-family__media img, .application-switcher__media img, .engineering__visual img { transition: none; }
}

/* Homepage V2 information architecture. */
.about-hqess { background: #fbfbf8; }
.about-hqess__grid { display: grid; grid-template-columns: minmax(0, .96fr) minmax(20rem, 1.04fr); gap: clamp(2.5rem, 7vw, 9rem); align-items: center; }
.about-hqess__header { margin-bottom: 2rem; }
.about-hqess__header .section-heading { max-width: 13ch; }
.about-hqess__intro { max-width: 37rem; margin: 0 0 1.25rem; color: var(--hqess-graphite); font-family: var(--hqess-font-display); font-size: clamp(1.55rem, 2.2vw, 2.45rem); font-weight: 500; line-height: 1.15; }
.about-hqess__body { max-width: 37rem; margin: 0; color: #57605b; font-size: 1rem; line-height: 1.75; }
.about-hqess__capabilities { display: flex; flex-wrap: wrap; gap: .75rem 1.4rem; margin: 2.25rem 0 0; padding: 1.1rem 0 0; border-top: 1px solid var(--hqess-border); color: var(--hqess-green); list-style: none; font-size: .6875rem; font-weight: 700; letter-spacing: .09em; }
.about-hqess__media { position: relative; min-height: 31rem; margin: 0; overflow: hidden; background: var(--hqess-graphite); }
.about-hqess__media img { width: 100%; height: 100%; min-height: 31rem; object-fit: cover; object-position: 55% center; }
.about-hqess__media::after { position: absolute; inset: 0; pointer-events: none; content: ''; background: linear-gradient(180deg, transparent 55%, rgba(16,22,25,.62)); }
.about-hqess__media figcaption { position: absolute; z-index: 1; right: 1.4rem; bottom: 1.25rem; left: 1.4rem; color: #fff; font-size: .7rem; font-weight: 700; letter-spacing: .12em; }

.solution-diagram__details { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; padding: 1.5rem; border-top: 1px solid var(--hqess-border); }
.solution-diagram__details div { min-width: 0; }
.solution-diagram__details span { display: block; margin-bottom: .55rem; color: #647168; font-size: .625rem; font-weight: 700; letter-spacing: .1em; }
.solution-diagram__details p { margin: 0; color: var(--hqess-graphite); font-size: .875rem; line-height: 1.55; }
.solution-diagram__details .text-link { grid-column: 1 / -1; margin-top: .25rem; }

.sustainability { position: relative; overflow: hidden; background: var(--hqess-pale-green); }
.sustainability::before { position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; content: ''; background: rgba(11,124,68,.13); }
.sustainability__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(20rem, 1.2fr); gap: clamp(2.5rem, 7vw, 9rem); align-items: end; }
.sustainability__header { position: relative; }
.sustainability__header .section-heading { max-width: 11ch; margin: 0 0 1.5rem; }
.sustainability__header > p:last-of-type { max-width: 30rem; margin: 0; color: #486053; line-height: 1.65; }
.sustainability__header .section-index { position: absolute; top: 0; right: 0; }
.sustainability__entries { border-top: 1px solid rgba(11,124,68,.3); }
.sustainability__entry { display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; align-items: center; gap: 1rem; min-height: 8.5rem; border-bottom: 1px solid rgba(11,124,68,.3); color: var(--hqess-graphite); text-decoration: none; transition: color 180ms ease, background-color 180ms ease; }
.sustainability__entry:hover { padding-inline: 1rem; color: var(--hqess-green); background: rgba(255,255,255,.38); }
.sustainability__entry > span { color: var(--hqess-green); font-size: .75rem; font-weight: 700; }
.sustainability__entry strong { font-family: var(--hqess-font-display); font-size: clamp(1.7rem, 2.5vw, 3rem); font-weight: 600; line-height: 1; letter-spacing: -.03em; }
.sustainability__entry svg { width: 1.5rem; height: 1.5rem; }

.engineering__advantages { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0 0 3.5rem; padding: 0; border-top: 1px solid var(--hqess-border); border-bottom: 1px solid var(--hqess-border); list-style: none; }
.engineering__advantages li { min-height: 4.5rem; display: flex; align-items: center; padding: .8rem 1.1rem; color: #4b5750; font-size: .69rem; font-weight: 700; letter-spacing: .075em; line-height: 1.45; }
.engineering__advantages li + li { border-left: 1px solid var(--hqess-border); }

.insights { background: #f7f7f3; }
.insights__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.insight-card { display: flex; min-width: 0; flex-direction: column; padding-bottom: 1rem; border-bottom: 2px solid var(--hqess-graphite); }
.insight-card__media { display: block; min-height: 14rem; margin-bottom: 1.25rem; overflow: hidden; background: #d7d9d5; }
.insight-card__media:empty { min-height: 0; margin: 0; }
.insight-card__media img { width: 100%; height: 100%; min-height: 14rem; object-fit: cover; transition: transform 300ms ease; }
.insight-card:hover .insight-card__media img { transform: scale(1.03); }
.insight-card__meta { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .9rem; color: #69746d; font-size: .67rem; font-weight: 700; letter-spacing: .08em; }
.insight-card h3 { margin: 0 0 .75rem; font-family: var(--hqess-font-display); font-size: clamp(1.7rem, 2.5vw, 2.5rem); line-height: 1.02; letter-spacing: -.035em; }
.insight-card h3 a { color: inherit; text-decoration: none; }
.insight-card > p { margin: 0 0 1rem; color: #57605b; line-height: 1.6; }
.insight-card .text-link { margin-top: auto; }
.insights__entry { display: inline-flex; min-height: 3.5rem; align-items: center; padding: 0 1.2rem; border: 1px solid var(--hqess-graphite); }

@media (max-width: 56.25rem) {
  .about-hqess__grid, .sustainability__grid { grid-template-columns: 1fr; }
  .about-hqess__media { min-height: 25rem; }
  .about-hqess__media img { min-height: 25rem; }
  .sustainability::before { display: none; }
  .sustainability__header .section-index { position: static; display: block; margin-bottom: 1.5rem; }
  .engineering__advantages { grid-template-columns: 1fr 1fr; }
  .engineering__advantages li:nth-child(3) { border-left: 0; border-top: 1px solid var(--hqess-border); }
  .engineering__advantages li:nth-child(4) { border-top: 1px solid var(--hqess-border); }
}
@media (max-width: 47.9375rem) {
  .about-hqess__header .section-index, .insights__header .section-index { display: block; margin-bottom: 1.5rem; }
  .about-hqess__media, .about-hqess__media img { min-height: 20rem; }
  .about-hqess__intro { font-size: 1.8rem; }
  .solution-diagram__details { grid-template-columns: 1fr; padding: 1.25rem 1rem; }
  .solution-diagram__details .text-link { grid-column: auto; }
  .sustainability__entry { min-height: 6.5rem; grid-template-columns: 2rem minmax(0, 1fr) auto; }
  .sustainability__entry strong { font-size: 1.9rem; }
  .engineering__advantages { margin-bottom: 2.25rem; }
  .engineering__advantages li { min-height: 4.8rem; padding: .8rem; font-size: .625rem; }
  .insights__grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .insight-card__media, .insight-card__media img { min-height: 13rem; }
}

/* Homepage V2 — Round 02: scale, hierarchy and energy routing. */
.site-header__inner { min-height: 5rem; }
.site-logo, .site-footer__logo { padding: 0; background: transparent; }
.site-logo picture, .site-logo img { width: 10rem; height: auto; }
.primary-menu a { font-size: 0.875rem; font-weight: 600; }
.eyebrow::before { display: none; }
.home-hero__title { max-width: none; font-size: clamp(4.5rem, 5.65vw, 6.5rem); line-height: 0.96; letter-spacing: -0.055em; }
.home-hero__title span { white-space: nowrap; }
.home-hero__grid { padding-bottom: 6rem; }
.home-hero__asset-wrap { top: auto; right: -30%; bottom: -2rem; width: 129%; }
.home-hero__asset { filter: drop-shadow(0 0.65rem 0.75rem rgba(0,0,0,0.2)); }
.home-hero__ground { right: 27%; bottom: 13%; width: 55%; height: 3%; background: rgba(0,0,0,0.24); filter: blur(1rem); }
.home-hero__specs { z-index: 3; bottom: -2.75rem; right: 0; gap: 1.75rem; padding-top: 1rem; border-top: 1px solid var(--hqess-green); }
.home-hero__specs dt { color: #c1c6c8; font-size: 0.6875rem; }
.home-hero__specs dd { font-size: 1.125rem; }
.energy-line__track { height: 2px; }
.home-hero__energy-line { bottom: 1.25rem; }

.energy-modes__header { grid-template-columns: 3rem 1fr; margin-bottom: 3rem; }
.energy-modes__header .section-heading { max-width: 17ch; font-size: clamp(3rem, 5.4vw, 5rem); }
.energy-modes__stage { grid-template-columns: minmax(0, 1fr) 8rem minmax(0, 1.25fr); gap: 2rem; align-items: stretch; }
.energy-mode__heading { justify-content: flex-start; align-items: center; gap: 1rem; padding-block: 1rem; }
.energy-mode__heading h3 { margin: 0; text-align: left; font-size: clamp(1.75rem, 2.7vw, 2.5rem); }
.energy-mode__number { font-size: 1rem; }
.energy-mode__picture { position: relative; height: 27rem; overflow: hidden; }
.energy-mode__asset { position: absolute; inset: 0; height: 100%; width: 100%; margin: 0; object-fit: contain; }
.energy-mode--fixed .energy-mode__asset { width: 100%; margin: 0; transform: scale(1.4); }
.energy-mode--mobile .energy-mode__asset { transform: scale(1.22); }
.energy-mode__product { padding-top: 1.5rem; border-top: 1px solid var(--hqess-border); margin-bottom: 0.8rem; }
.energy-mode__applications { font-size: 0.875rem; line-height: 1.6; gap: 0.3rem 1.2rem; }
.energy-mode__applications li::before { display: none; }
.energy-modes__bridge { position: relative; top: auto; left: auto; transform: none; display: flex; flex-direction: column; align-self: center; justify-content: center; gap: 0.5rem; height: 8rem; margin-top: -2rem; color: var(--hqess-green); font-size: 0.75rem; }
.energy-modes__bridge strong { width: 7rem; height: 7rem; border: 1.5px solid var(--hqess-green); border-radius: 50%; font-size: 1.8rem; background: white; }
.energy-modes__bridge > span:first-child, .energy-modes__bridge > span:last-child { display: none; }
.energy-modes__route { position: absolute; top: 50%; left: -4.5rem; width: 4.5rem; height: 1.5px; overflow: visible; background: var(--hqess-green); }
.energy-modes__route ~ .energy-modes__route { left: auto; right: -4.5rem; }
.energy-modes__route::before, .energy-modes__route::after { position: absolute; top: -3px; width: 7px; height: 7px; border-top: 1.5px solid var(--hqess-green); border-right: 1.5px solid var(--hqess-green); content: ''; }
.energy-modes__route::before { left: 0; transform: rotate(-135deg); }
.energy-modes__route::after { right: 0; transform: rotate(45deg); }
.energy-modes__route i { display: none; }

.solutions__header .section-heading { max-width: 25ch; }
.solutions__workspace { grid-template-columns: minmax(16rem, 25%) minmax(0, 1fr); gap: 2.5rem; align-items: center; }
.solution-diagram { background: #fff; color: var(--hqess-graphite); border: 1px solid var(--hqess-border); }
.solution-diagram__topline, .solution-diagram__legend { border-color: var(--hqess-border); font-size: 0.7rem; letter-spacing: 0.06em; }
.solution-diagram__topline strong { font-size: 1rem; }
.solution-diagram__canvas { min-height: 40rem; background: linear-gradient(#1f232808 1px, transparent 1px) 0 0 / 3rem 3rem, linear-gradient(90deg, #1f232808 1px, transparent 1px) 0 0 / 3rem 3rem; }
.solution-diagram__routes { inset: 0; width: 100%; height: 100%; }
.solution-diagram__routes > path { stroke: #b8bec1; stroke-width: 1.5; stroke-dasharray: none; transition: stroke 180ms ease; }
.solution-diagram__routes > path.is-active { stroke: var(--hqess-green); stroke-width: 2.5; }
.solution-diagram__routes marker path { stroke: context-stroke; stroke-dasharray: none; vector-effect: none; }
.diagram-node { width: 17.5%; min-height: 5.2rem; padding: 0.75rem 0.35rem; text-align: center; background: #f3f4f1; border: 1px solid #bbc2bf; color: #606c66; opacity: 1; transform: translateY(-50%); }
.diagram-node.is-active { border: 1.5px solid var(--hqess-green); background: var(--hqess-pale-green); color: var(--hqess-green); transform: translateY(-50%); }
.diagram-node span { font-size: clamp(1rem, 1.55vw, 1.6rem); }
.diagram-node small { color: #63746a; font-size: 0.625rem; }
.diagram-node--pv { left: 3%; top: 19.3%; }
.diagram-node--grid { left: 3%; top: 50%; }
.diagram-node--fuel { left: 3%; top: 80.7%; bottom: auto; }
.diagram-node--ems { left: 41.25%; top: 50%; }
.diagram-node--bess { left: 41.25%; top: 82%; bottom: auto; }
.diagram-node--load { left: 79.375%; right: auto; top: 25%; }
.diagram-node--charger { left: 79.375%; right: auto; top: 75%; bottom: auto; }
.diagram-node--ems.is-active { background: var(--hqess-green); color: white; }
.diagram-node--ems.is-active small { color: #d5ebdf; }
.solution-diagram__legend { color: #63746a; }

.product-family--mobile .product-family__media img { object-position: center 65%; }
.product-family--cabinet .product-family__media img { padding: 1rem 0; }
.product-family:hover .product-family__media img { transform: translateY(-0.3rem); }
.product-family__copy .text-link { margin-top: 0.5rem; }

.mobile-feature { min-height: auto; }
.mobile-feature__header { position: relative; z-index: 3; pointer-events: none; }
.mobile-feature__header .section-heading { max-width: none; font-size: clamp(4rem, 7vw, 7rem); line-height: 0.94; }
.mobile-feature__stage { height: clamp(38rem, 54vw, 49rem); min-height: 0; margin-top: -5rem; }
.mobile-feature__asset { top: -5%; left: 5%; width: 110%; max-width: none; height: 105%; transform: none; filter: none; mask-image: linear-gradient(to right, transparent, #000 12%, #000 85%, transparent); }
.mobile-feature__asset::after { position: absolute; inset: -1px; content: ''; pointer-events: none; background: linear-gradient(180deg,#171b1f 0%,transparent 32%,transparent 66%,#171b1f 99%),linear-gradient(90deg,#171b1f 0%,transparent 28%,transparent 85%,#171b1f 100%); }
.mobile-feature__asset img, .mobile-feature__asset video { object-fit: cover; object-position: center; }
.feature-annotation { z-index: 4; min-width: 11rem; font-size: 0.75rem; letter-spacing: 0.05em; background: transparent; }
.feature-annotation::after { width: 6rem; background: var(--hqess-green); transform-origin: left; }
.feature-annotation--one { top: 26%; left: 3%; }
.feature-annotation--one::after { right: -5.8rem; transform: rotate(25deg); }
.feature-annotation--two { top: 35%; right: 0; color: var(--hqess-graphite); }
.feature-annotation--two::after { left: -5rem; transform: rotate(150deg); }
.feature-annotation--three { bottom: 27%; left: 4%; }
.feature-annotation--three::after { right: -5.8rem; transform: rotate(-30deg); }
.feature-annotation--four { bottom: 12%; right: 3%; }
.feature-annotation--four::after { left: -4rem; transform: rotate(210deg); }
.mobile-feature__copy { position: relative; z-index: 4; max-width: 40rem; margin-top: -1rem; color: #ced2d3; }

.application-switcher { grid-template-columns: minmax(13rem, 25%) minmax(0, 1fr); }
.application-switcher__details { border: none; border-top: 2px solid var(--hqess-green); }
.application-switcher__details div { padding: 1.6rem 1.25rem 0 0; }
.application-switcher__details div + div { padding-left: 1.5rem; }
.application-switcher__details span { font-size: 0.75rem; margin-bottom: 0.8rem; }
.application-switcher__details strong { font-size: clamp(1.3rem, 2vw, 1.8rem); line-height: 1.3; overflow-wrap: anywhere; }
.project-proof__content h3 { font-size: clamp(2.75rem, 4.7vw, 4.6rem); margin-bottom: 1.7rem; }
.project-proof__location { color: #526359; font-size: 0.75rem; letter-spacing: 0.14em; margin-bottom: 0.7rem; }
.project-proof__key-data { display: grid; gap: 0.25rem; margin-bottom: 2rem; padding-left: 1rem; border-left: 3px solid var(--hqess-green); color: var(--hqess-green); font-family: var(--hqess-font-display); font-size: clamp(1.7rem, 2.75vw, 2.65rem); font-weight: 600; line-height: 1.15; }
.project-proof__content dl div { grid-template-columns: 1fr; gap: 0.4rem; }
.project-proof__content dt { font-size: 0.6875rem; }
.project-proof__content dd { font-size: 1rem; }
.engineering__workspace { grid-template-columns: minmax(15rem, 29%) minmax(0, 1fr); }
.engineering-tab { position: relative; padding: 1.25rem 0; }
.engineering-tab span { font-size: 1.25rem; color: #597361; }
.engineering-tab.is-active { border-top: 2px solid var(--hqess-green); background: rgba(255,255,255,0.45); padding-left: 0.75rem; color: var(--hqess-green); }
.engineering-tab.is-active span { color: var(--hqess-green); }
.engineering__visual > span { max-width: calc(100% - 3rem); font-size: clamp(1.6rem,3.3vw,3.5rem); }
.faq__grid { grid-template-columns: minmax(18rem, 36%) minmax(0, 1fr); gap: 4rem; }
.faq-item__trigger { padding: 1.6rem 0; font-size: 1.125rem; }
.faq-item__trigger:hover, .faq-item__trigger[aria-expanded="true"] { color: var(--hqess-green); }
.faq-item:has(.faq-item__trigger[aria-expanded="true"]) { border-top-color: var(--hqess-green); }
.faq-item__panel { padding-right: 1rem; color: #535d56; }
.faq-item__panel.is-open { max-height: none; padding-bottom: 1.8rem; }
.final-cta__title { max-width: none; margin-bottom: 2.5rem; font-size: clamp(4rem,8.1vw,8rem); line-height: 0.96; }
.final-cta__footer { justify-content: flex-start; gap: 3rem; align-items: center; }
.final-cta__footer .button { min-height: 3.5rem; padding-inline: 2rem; font-size: 0.875rem; }
.final-cta__energy-line { margin-top: 3.5rem; }
.footer-menu a, .site-footer__legal a { font-size: 0.875rem; color: #c9cecf; }

@media (max-width: 64rem) and (min-width: 56.3125rem) {
  .home-hero__title { font-size: 4.1rem; }
  .home-hero__asset-wrap { width: 145%; right: -37%; }
  .energy-modes__stage { gap: 1rem; grid-template-columns: 1fr 5rem 1.2fr; }
  .energy-modes__bridge strong { width: 5rem; height: 5rem; }
  .energy-modes__route { width: 2rem; left: -2rem; }
  .energy-modes__route ~ .energy-modes__route { right: -2rem; }
}
@media (max-width: 56.25rem) {
  .home-hero__grid { padding-bottom: 3.5rem; }
  .home-hero__asset-wrap { top: 0; bottom: auto; right: -18%; width: 120%; }
  .home-hero__specs { bottom: 0; }
  .energy-modes__stage { grid-template-columns: 1fr; gap: 0; }
  .energy-mode__picture { height: 26rem; }
  .energy-mode--fixed .energy-mode__asset { transform: scale(1.35); }
  .energy-mode--mobile .energy-mode__asset { transform: scale(1.12); }
  .energy-modes__bridge { justify-self: center; width: 6rem; height: 6rem; margin: 3.25rem 0; }
  .energy-modes__bridge strong { width: 6rem; height: 6rem; }
  .energy-modes__route { top: -3rem; left: 50%; width: 1.5px; height: 3rem; }
  .energy-modes__route ~ .energy-modes__route { top: auto; bottom: -3rem; left: 50%; right: auto; }
  .energy-modes__route::before { top: 0; left: -3px; transform: rotate(-45deg); }
  .energy-modes__route::after { top: auto; bottom: 0; right: auto; left: -3px; transform: rotate(135deg); }
  .solutions__workspace, .application-switcher, .engineering__workspace, .faq__grid { grid-template-columns: 1fr; }
  .solution-diagram__canvas { min-height: 33rem; }
  .diagram-node span { font-size: 1.25rem; }
  .mobile-feature__stage { margin-top: 0; height: 38rem; }
  .mobile-feature__asset { left: -10%; width: 125%; }
  .final-cta__title { font-size: clamp(3rem, 9vw, 5.5rem); }
}
@media (max-width: 47.9375rem) {
  .site-header__inner { min-height: 4rem; }
  .primary-menu a { font-size: 1.125rem; }
  .site-logo picture, .site-logo img { width: 8.15rem; height: auto; }
  .home-hero__grid { padding-top: 6rem; padding-bottom: 2.5rem; }
  .home-hero__eyebrow { margin-bottom: 1.25rem; font-size: 0.625rem; letter-spacing: 0.12em; }
  .home-hero__title { font-size: clamp(2.7rem, 14.15vw, 3.625rem); letter-spacing: -0.058em; line-height: 0.99; margin-bottom: 1.5rem; }
  .home-hero__description { margin-bottom: 1.5rem; font-size: 0.9375rem; }
  .home-hero__actions { gap: 0.65rem; }
  .home-hero__visual { min-height: 22rem; }
  .home-hero__asset-wrap { top: -0.5rem; right: -25%; width: 130%; }
  .home-hero__specs { gap: 0.5rem; bottom: 0; padding-top: 0.75rem; }
  .home-hero__specs dt { font-size: 0.625rem; }
  .home-hero__specs dd { font-size: 0.8rem; }
  .energy-modes__header .section-heading { max-width: 15ch; font-size: 2.5rem; }
  .energy-mode__picture { height: 23rem; }
  .energy-mode--mobile .energy-mode__picture { height: 17rem; }
  .energy-mode__heading h3 { font-size: 1.9rem; }
  .energy-mode__applications { gap: 0.4rem 1rem; }
  .solution-diagram__canvas { min-height: 28rem; }
  .diagram-node { min-height: 4.5rem; width: 22%; padding: 0.4rem 0.1rem; }
  .diagram-node--pv, .diagram-node--grid, .diagram-node--fuel { left: 0; }
  .diagram-node--ems, .diagram-node--bess { left: 39%; }
  .diagram-node--load, .diagram-node--charger { left: 78%; }
  .diagram-node span { font-size: 0.9rem; }
  .diagram-node small { font-size: 0.5rem; letter-spacing: 0.03em; }
  .solution-diagram__topline { padding: 1rem; }
  .solution-diagram__topline strong { text-align: left; font-size: 1rem; }
  .product-family--mobile .product-family__media { min-height: 18rem; }
  .product-family--mobile { min-height: 30rem; }
  .mobile-feature__header .section-heading { font-size: 3.8rem; }
  .mobile-feature__stage { display: block; height: 30rem; min-height: 0; margin-top: 1.5rem; padding: 0; }
  .mobile-feature__asset { top: 0; left: -35%; width: 170%; height: 90%; }
  .feature-annotation { position: absolute; width: 46%; min-width: 0; margin: 0; font-size: 0.625rem; line-height: 1.3; gap: 0.35rem; background: transparent; }
  .feature-annotation--one { left: 0; top: 3%; }
  .feature-annotation--two { left: auto; right: 0; top: 13%; color: white; text-shadow: 0 1px 4px #171b1f; }
  .feature-annotation--three { left: 0; top: auto; bottom: 20%; }
  .feature-annotation--four { left: auto; right: 0; top: auto; bottom: 7%; }
  .feature-annotation::after { width: 2rem; }
  .feature-annotation--one::after { right: -1.8rem; }
  .feature-annotation--two::after { left: -1.5rem; }
  .feature-annotation--three::after { right: 1rem; transform: rotate(-65deg); }
  .feature-annotation--four::after { left: 0; width: 4.5rem; transform: rotate(-100deg); }
  .mobile-feature__copy { margin-top: 0; font-size: 1.125rem; }
  .application-switcher__details div { padding: 1.25rem 0; }
  .application-switcher__details div + div { padding-left: 0; }
  .application-switcher__scene { font-size: 1.65rem; }
  .project-proof__content { padding-top: 1.5rem; }
  .project-proof__content h3 { font-size: 3rem; }
  .project-proof__key-data { font-size: 2.1rem; margin-bottom: 1.5rem; }
  .engineering-tab { min-width: 14rem; }
  .engineering__visual > span { font-size: 1.65rem; }
  .faq__grid { gap: 2.5rem; }
  .faq-item__trigger { padding-block: 1.4rem; font-size: 1rem; }
  .final-cta__title { font-size: clamp(2.5rem, 11.2vw, 3.3rem); letter-spacing: -0.055em; line-height: 1.02; }
  .final-cta__title span { white-space: nowrap; }
  .final-cta__footer { gap: 1.5rem; }
  .site-footer__logo picture, .site-footer__logo img { width: 12rem; }
}

/* Keep V2 section rules authoritative after legacy V1 responsive fallbacks. */
@media (max-width: 56.25rem) {
  .about-hqess__grid, .sustainability__grid { grid-template-columns: 1fr; }
  .sustainability::before { display: none; }
  .sustainability__header .section-index { position: static; display: block; margin-bottom: 1.5rem; }
  .engineering__advantages { grid-template-columns: 1fr 1fr; }
  .engineering__advantages li:nth-child(3) { border-left: 0; border-top: 1px solid var(--hqess-border); }
  .engineering__advantages li:nth-child(4) { border-top: 1px solid var(--hqess-border); }
}
@media (max-width: 47.9375rem) {
  .about-hqess__header .section-index, .insights__header .section-index { display: block; margin-bottom: 1.5rem; }
  .about-hqess__media, .about-hqess__media img { min-height: 20rem; }
  .solution-diagram__details { grid-template-columns: 1fr; padding: 1.25rem 1rem; }
  .solution-diagram__details .text-link { grid-column: auto; }
  .sustainability__entry { min-height: 6.5rem; grid-template-columns: 2rem minmax(0, 1fr) auto; }
  .engineering__advantages { margin-bottom: 2.25rem; }
  .insights__grid { grid-template-columns: 1fr; gap: 2.5rem; }
}