/* ==========================================================
   ETECH GREEN ENERGY
   GLOBAL DESIGN SYSTEM
   ========================================================== */


/* ----------------------------------------------------------
   01. DESIGN TOKENS
   ---------------------------------------------------------- */

:root {

  /* Core colours */
  --color-graphite: #171a1c;
  --color-graphite-soft: #222629;

  --color-silver: #c7c9c8;
  --color-silver-dark: #8f9492;
  --color-silver-light: #e4e5e3;

  --color-warm-white: #f1f3f3;
  --color-white: #ffffff;

  --color-solar-orange: #c8642c;
  --color-solar-orange-light: #df7b3f;

  --color-energy-green: #59735d;
  --color-energy-green-light: #718b74;

  /* Text */
  --color-text-dark: #171a1c;
  --color-text-light: #f4f2ed;
  --color-text-muted: #747a78;

  /* Borders */
  --color-border-light: rgba(23, 26, 28, 0.12);
  --color-border-dark: rgba(255, 255, 255, 0.16);

  /* Layout */
  --page-width: 1440px;
  --content-width: 1240px;

  --page-padding: clamp(1.25rem, 4vw, 4.5rem);

  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 7rem;
  --space-xxl: 10rem;

  /* Radius */
  --radius-small: 4px;
  --radius-medium: 10px;
  --radius-large: 18px;

  /* Motion */
  --transition-fast: 180ms ease;
  --transition-standard: 350ms ease;
  --transition-slow: 700ms cubic-bezier(0.22, 1, 0.36, 1);

  /* Header */
  --header-height: 82px;
}


/* ----------------------------------------------------------
   02. RESET
   ---------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);
}

body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  border: 0;
}

img,
picture,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}


/* ----------------------------------------------------------
   03. DOCUMENT
   ---------------------------------------------------------- */

html {
  background: var(--color-graphite);
}

body {
  min-height: 100vh;
  overflow-x: hidden;

  background: var(--color-warm-white);
  color: var(--color-text-dark);

  font-family:
    "Segoe UI",
    Inter,
    Arial,
    sans-serif;

  font-size: 16px;
  line-height: 1.6;

  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}


/* ----------------------------------------------------------
   04. TYPOGRAPHY
   ---------------------------------------------------------- */

h1,
h2,
h3 {
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.035em;
}

h1 {
  font-size: clamp(3.2rem, 7vw, 7.4rem);
}

h2 {
  font-size: clamp(2.4rem, 5vw, 5.5rem);
}

h3 {
  font-size: clamp(1.5rem, 2.5vw, 2.5rem);
}

p {
  max-width: 68ch;
}

.section-placeholder > span,
.experience-layer__content > span {
  display: block;

  margin-bottom: var(--space-md);

  font-size: 0.72rem;
  font-weight: 600;

  letter-spacing: 0.18em;
  text-transform: uppercase;
}


/* ----------------------------------------------------------
   05. ACCESSIBILITY
   ---------------------------------------------------------- */

:focus-visible {
  outline: 2px solid var(--color-solar-orange);
  outline-offset: 5px;
}

::selection {
  background: var(--color-solar-orange);
  color: var(--color-white);
}


/* ----------------------------------------------------------
   06. BUTTON SYSTEM
   ---------------------------------------------------------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 48px;

  padding: 0.8rem 1.4rem;

  border: 1px solid transparent;
  border-radius: var(--radius-small);

  font-size: 0.76rem;
  font-weight: 600;

  letter-spacing: 0.1em;
  text-transform: uppercase;

  cursor: pointer;

  transition:
    background-color var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast),
    transform var(--transition-fast);
}

.button:hover {
  transform: translateY(-2px);
}

.button--primary {
  background: var(--color-solar-orange);
  color: var(--color-white);
}

.button--primary:hover {
  background: var(--color-solar-orange-light);
}


/* ----------------------------------------------------------
   07. SITE HEADER
   ---------------------------------------------------------- */

.site-header {
  position: fixed;
  z-index: 1000;

  top: 0;
  left: 0;

  width: 100%;
  height: var(--header-height);

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding-inline: var(--page-padding);

  background: rgba(72, 76, 78, 0.96);
  color: var(--color-text-light);

  border-bottom: 1px solid var(--color-border-dark);

  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.site-logo {
  display: flex;
  align-items: center;

  font-size: 0.8rem;
  font-weight: 700;

  letter-spacing: 0.16em;
}

.site-logo__image {
  display: block;
  width: auto;
  height: 160px;
  max-width: 260px;
  object-fit: contain;
  filter: brightness(1.22) contrast(1.08);
  transform: translateY(4px);
}

.desktop-navigation {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 2.4rem);
}

.desktop-navigation a,
.navigation-link--button {
  position: relative;

  padding-block: 0.5rem;

  background: transparent;
  color: inherit;

  font-size: 0.78rem;
  font-weight: 500;

  letter-spacing: 0.05em;

  cursor: pointer;
}

.desktop-navigation a::after,
.navigation-link--button::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: 0;

  width: 100%;
  height: 1px;

  background: var(--color-solar-orange);

  transform: scaleX(0);
  transform-origin: right;

  transition: transform var(--transition-standard);
}

.desktop-navigation a:hover::after,
.navigation-link--button:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.language-switcher {
  min-width: 42px;
  min-height: 42px;

  background: transparent;
  color: var(--color-text-light);

  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-small);

  cursor: pointer;
}

.language-switcher:hover {
  border-color: var(--color-solar-orange);
}

/* HEADER — CONTACT PANEL */

.header-contact-panel {
    position: absolute;

    top: calc(100% + 1px);
    right: var(--page-padding);

    width: min(340px, calc(100vw - 2rem));

    padding: 1.5rem 1.6rem;

    background: rgba(34, 35, 36, 0.98);
    color: var(--color-text-light);

    border: 1px solid var(--color-border-dark);
    border-top: 2px solid var(--color-solar-orange);

    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);

    z-index: 1100;
}

.header-contact-panel[hidden] {
    display: none;
}

.header-contact-panel__eyebrow {
    display: block;

    margin-bottom: 1rem;

    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;

    color: var(--color-solar-orange);
}

.header-contact-panel__name {
    display: block;

    margin-bottom: 0.9rem;

    font-size: 1.05rem;
    font-weight: 500;
}

.header-contact-panel a {
    display: block;

    width: fit-content;
    margin-top: 0.55rem;

    color: var(--color-silver);
    text-decoration: none;

    transition: color var(--transition-standard);
}

.header-contact-panel a:hover {
    color: var(--color-solar-orange);
}

/* ----------------------------------------------------------
   08. MOBILE MENU BUTTON
   ---------------------------------------------------------- */

.mobile-menu-toggle {
  display: none;

  width: 44px;
  height: 44px;

  background: transparent;

  cursor: pointer;
}

.mobile-menu-toggle span {
  display: block;

  width: 24px;
  height: 1px;

  margin: 6px auto;

  background: var(--color-white);
}


/* ----------------------------------------------------------
   09. MOBILE NAVIGATION
   ---------------------------------------------------------- */

.mobile-navigation {
  position: fixed;
  z-index: 950;

  inset: 0;

  display: none;

  padding:
    calc(var(--header-height) + 2rem)
    var(--page-padding)
    3rem;

  overflow-y: auto;

  background: var(--color-graphite);
  color: var(--color-text-light);
}

.mobile-navigation[aria-hidden="false"] {
    display: block;
}

.mobile-navigation nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  gap: 1.1rem;
}

.mobile-navigation a,
.mobile-navigation button {
  background: transparent;
  color: inherit;

  font-size: clamp(1.5rem, 5vw, 2.6rem);
  font-weight: 400;

  cursor: pointer;
}

/* MOBILE NAVIGATION — CONTACT DETAILS */

.mobile-contact-details {
    width: 100%;
    margin-top: -0.35rem;
    padding: 1.1rem 0 0.25rem 1rem;

    border-left: 2px solid var(--color-solar-orange);
}

.mobile-contact-details[hidden] {
    display: none;
}

.mobile-contact-details strong {
    display: block;
    margin-bottom: 0.75rem;

    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.04em;

    color: var(--color-text-light);
}

.mobile-contact-details a {
    display: block;
    width: fit-content;

    margin-top: 0.45rem;

    font-size: 1rem;
    color: var(--color-silver);
    text-decoration: none;
}

.mobile-contact-details a:hover {
    color: var(--color-solar-orange);
}

.mobile-navigation__divider {
  width: 100%;
  height: 1px;

  margin-block: 1rem;

  background: var(--color-border-dark);
}

.mobile-navigation__label {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;

  color: var(--color-silver-dark);
}


/* ----------------------------------------------------------
   10. GLOBAL SECTION STRUCTURE
   ---------------------------------------------------------- */

.section {
  position: relative;

  width: 100%;

  display: flex;
  align-items: center;

  min-height: 100vh;

  padding:
    calc(var(--header-height) + var(--space-lg))
    var(--page-padding)
    var(--space-xl);

  overflow: hidden;
}

.section-placeholder {
  position: relative;
  z-index: 2;

  width: min(100%, var(--content-width));

  margin-inline: auto;
}


/* ----------------------------------------------------------
   11. SECTION RHYTHM
   ---------------------------------------------------------- */

/* 01 — HERO */
.section--hero {
  background: var(--color-graphite);
  color: var(--color-text-light);
}

/* 02 — LISTENING */
.section--conversation {
  background: var(--color-silver-light);
  color: var(--color-text-dark);
}

/* 03 — SOLUTIONS */

.section--solutions .section3-intro > p {
  margin-top: var(--space-md);
  max-width: 58ch;

  font-size: clamp(1.05rem, 1.35vw, 1.25rem);
  line-height: 1.65;
}

.section3-transition {
    margin-top: clamp(5rem, 10vw, 9rem);
    max-width: 34rem;
    margin-left: 62%;
}

.section3-transition__statement,
.section3-transition__question {
  margin: 0;
}

.section3-transition__statement {
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.section3-transition__statement {
  font-size: clamp(1.4rem, 2.4vw, 2.2rem);
  font-weight: 600;
}

.section3-transition__question {
  margin-top: var(--space-md);
  font-size: clamp(1.15rem, 1.6vw, 1.45rem);
  font-weight: 400;
  line-height: 1.5;
}

.section3-system {
  position: relative;
  width: 100%;
  height: clamp(18rem, 36vw, 32rem);
  margin-top: clamp(4rem, 8vw, 7rem);
  margin-bottom: clamp(7rem, 12vw, 10rem);
}

.section3-system__origin {
  position: absolute;
  top: 50%;
  left: 50%;

  width: 8px;
  height: 8px;

  border-radius: 50%;
  background: var(--color-solar-orange);

  transform: translate(-50%, -50%);
}

.section3-system__line {
  position: absolute;
  left: 50%;
  width: 1px;
  background: var(--color-solar-orange);
  transform: translateX(-50%);
}

.section3-system__line--up {
    display: none;
}

.section3-system__line--left,
.section3-system__line--right {
  top: 50%;
  width: clamp(5rem, 10vw, 8rem);
  height: 1px;
  background: var(--color-solar-orange);
}

.section3-system__line--left {
    left: auto;
    right: 50%;
    transform: none;
}

.section3-system__line--right {
    left: 50%;
    right: auto;
    transform: none;
}

.section3-system__line--to-management {
    top: 50%;
    left: calc(50% + clamp(5rem, 10vw, 8rem));
    width: clamp(6rem, calc(10vw - 5px), 8.25rem);
    height: 1px;
    transform: none;
}

.section3-continuation {
  width: 100%;
  margin-top: clamp(6rem, 10vw, 9rem);
  padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.section3-continuity {
  width: min(100%, 58rem);
  margin-inline: auto;
  text-align: center;
}

.section3-continuity__label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  align-items: center;
}

.section3-continuity__label span {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-solar-orange);
}

.section3-continuity__label strong {
  font-size: clamp(1.3rem, 2vw, 1.8rem);
  font-weight: 600;
  letter-spacing: 0.08em;
}

.section3-continuity__stage {
  width: 100%;
  min-height: 16rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.section3-continuity__stage {
  position: relative;
  width: 100%;
  min-height: 16rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.section3-continuity__grid-line,
.section3-continuity__energy-line {
  position: absolute;
  top: 50%;
  height: 1px;
}

.section3-continuity__grid-line {
  left: 8%;
  width: 34%;
  background: linear-gradient(
    to right,
    #9a9a96 0%,
    #9a9a96 68%,
    transparent 68%,
    transparent 82%,
    #9a9a96 82%,
    #9a9a96 100%
);
  opacity: 1;
}

.section3-continuity__grid-break {
    position: absolute;
    top: 50%;
    left: 72%;

    width: 40px;
    height: 6px;

    background: var(--color-surface-light);
    transform: translate(-50%, -50%);
}

.section3-continuity__grid-break::after {
    content: "";
    position: absolute;

    width: 26px;
    height: 1px;

    left: 5px;
    top: 50%;

    background: #9a9a96;

    transform: rotate(-28deg);
    transform-origin: left center;
}

.section3-continuity__grid-label,
.section3-continuity__backup-label {
  position: absolute;
  top: calc(50% - 2rem);

  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.section3-continuity__grid-label {
  left: 8%;
  color: #9a9a96;
  opacity: 1;
}

.section3-continuity__backup-label {
  left: 46%;
  color: var(--color-solar-orange);
}

.section3-continuity__energy-line {
  left: 46%;
  width: 46%;
  background: var(--color-solar-orange);
}

.section3-continuity__pulse {
    position: absolute;
    left: 0;
    top: 50%;

    width: 8px;
    height: 8px;

    border-radius: 50%;
    background: var(--color-solar-orange);

    transform: translate(-50%, -50%);
  animation: section3-continuity-flow 2s linear infinite;  
}

@keyframes section3-continuity-flow {
  from {
    left: 0;
  }

  to {
    left: 100%;
  }
}

.section3-continuity__handoff {
  position: absolute;
  top: 50%;
  left: 46%;

  width: 8px;
  height: 8px;

  border-radius: 50%;
  background: var(--color-solar-orange);

  transform: translate(-50%, -50%);
}

.section3-continuity__loads {
  position: absolute;
  top: 50%;
  left: 92%;
  transform: translateY(-50%);
}

.section3-continuity__loads-node {
  position: absolute;
  left: 0;
  top: 0;

  width: 8px;
  height: 8px;

  border-radius: 50%;
  background: var(--color-solar-orange);

  transform: translate(-50%, -50%);
}

.section3-continuity__loads-copy {
  position: absolute;
  left: 1.5rem;
  top: 0;

  width: clamp(14rem, 20vw, 19rem);

  display: flex;
  flex-direction: column;
  gap: 0.45rem;

  transform: translateY(-50%);
}

.section3-continuity__loads-copy strong {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--color-solar-orange);
}

.section3-continuity__loads-copy span {
  font-size: clamp(0.9rem, 1.1vw, 1.05rem);
  line-height: 1.55;
}

.section3-monitoring {
  width: min(100%, 58rem);
  margin: clamp(2.5rem, 5vw, 4rem) auto 0;
  text-align: center;
}

.section3-monitoring__label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  align-items: center;
}

.section3-monitoring__label span {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-solar-orange);
}

.section3-monitoring__label strong {
  font-size: clamp(1.3rem, 2vw, 1.8rem);
  font-weight: 600;
  letter-spacing: 0.08em;
}

.section3-monitoring__stage {
  position: relative;
  width: 100%;
  min-height: 18rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.section3-monitoring__stage::after {
  content: "";
  position: absolute;

  top: 0;
  left: 0;
  right: 0;
  bottom: -7rem;

  border: 1px solid var(--color-solar-orange);

  pointer-events: none;
}

.section3-monitoring__system {
  position: absolute;
  top: 50%;
  left: 8%;

  transform: translateY(-50%);

  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-solar-orange);
}

.section3-monitoring__realtime {
  position: absolute;
  top: 50%;
  left: 50%;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;

  transform: translate(-50%, -50%);
  text-align: center;
}

.section3-monitoring__node {
  position: absolute;
top: calc(50% + 1.35rem);
left: 50%;
  width: 8px;
  height: 8px;

  border-radius: 50%;
  background: var(--color-solar-orange);

  transform: translate(-50%, -50%);
  
}

.section3-monitoring__realtime strong {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-solar-orange);
  white-space: nowrap;
}

.section3-monitoring__decisions {
  position: absolute;
  top: 50%;
  right: 8%;

  transform: translateY(-50%);

  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-solar-orange);
  white-space: nowrap;
}

.section3-monitoring__generation {
  position: absolute;
  top: calc(50% + 5rem);
  left: 28%;

  display: flex;
  flex-direction: column;
  gap: 0.35rem;

  text-align: center;
  transform: translateX(-50%);
}

.section3-monitoring__generation span {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #9a9a96;
}

.section3-monitoring__generation strong {
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  font-weight: 500;
  color: var(--color-text-dark);
}

.section3-monitoring__consumption {
  position: absolute;
  top: calc(50% + 5rem);
  left: 50%;

  display: flex;
  flex-direction: column;
  gap: 0.35rem;

  text-align: center;
  transform: translateX(-50%);
}

.section3-monitoring__consumption span {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #9a9a96;
}

.section3-monitoring__consumption strong {
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  font-weight: 500;
  color: var(--color-text-dark);
}

.section3-monitoring__battery {
  position: absolute;
  top: calc(50% + 5rem);
  left: 72%;

  display: flex;
  flex-direction: column;
  gap: 0.35rem;

  text-align: center;
  transform: translateX(-50%);
}

.section3-monitoring__battery span {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #9a9a96;
}

.section3-monitoring__battery strong {
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  font-weight: 500;
  color: var(--color-text-dark);
}

.section3-monitoring__grid-status {
  position: absolute;
  top: calc(50% + 9rem);
  left: 50%;

  display: flex;
  align-items: center;
  gap: 0.75rem;

  transform: translateX(-50%);
}

.section3-monitoring__grid-status span {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #9a9a96;
}

.section3-monitoring__grid-status strong {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-solar-orange);
}

.section3-monitoring__stage::before {
  content: "";
  position: absolute;
  top: calc(50% + 1.35rem);
  left: 14%;
  right: 14%;

  height: 1px;
  background: var(--color-solar-orange);
}

.section3-monitoring__anomaly {
  position: absolute;
  top: calc(50% + 12rem);
  left: 50%;

  display: flex;
  align-items: center;
  gap: 0.7rem;

  transform: translateX(-50%);
}

.section3-monitoring__anomaly-node {
  width: 8px;
  height: 8px;

  border-radius: 50%;
  background: #c65332;
}

.section3-monitoring__anomaly > span:last-child {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #a9472d;
}

.section3-monitoring__diagnostic {
  position: absolute;
  top: calc(50% + 13.7rem);
  left: 50%;

  width: min(90%, 32rem);
  margin: 0;

  transform: translateX(-50%);

  text-align: center;
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1.5;
  color: #6f6f6b;
}

.section3-closing {
  width: min(100%, 58rem);
  margin: clamp(3.5rem, 5rem, 5rem) 0 0;
  padding-bottom: clamp(4rem, 7vw, 6rem);

  text-align: left;
}

.section3-closing h3 {
  margin: 0 0 1.5rem;

  font-size: clamp(2rem, 3vw, 3rem);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.section3-closing p {
  max-width: 34rem;
  margin: 0;

  font-size: clamp(1rem, 1.15vw, 1.15rem);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}

.section3-management {
  position: absolute;
  top: 50%;
  left: calc(50% + clamp(12rem, 24vw, 20rem));

  width: clamp(5.5rem, 9vw, 7.5rem);
  height: clamp(5.5rem, 9vw, 7.5rem);

  transform: translate(-50%, -50%);
}

.section3-management__module {
  position: relative;
  width: 100%;
  height: 72%;

  margin-top: 28%;

  border: 1px solid var(--color-solar-orange);
  border-top: none;
}

.section3-management__module {
  position: relative;
}

.section3-management__module::before {
  content: "";
  position: absolute;

  width: 72%;
  aspect-ratio: 1 / 1;

  left: 50%;
  top: -52%;

  border-top: 1px solid var(--color-solar-orange);
  border-left: 1px solid var(--color-solar-orange);

  transform: translateX(-50%) rotate(45deg);
  transform-origin: center;
}

.section3-management__module-line {
  position: absolute;
  left: 20%;
  right: 20%;
  top: 35%;

  height: 1px;
  background: var(--color-solar-orange);
}

.section3-management__module-node {
  position: absolute;
  top: 35%;
  left: 50%;

  width: 7px;
  height: 7px;

  border-radius: 50%;
  background: var(--color-solar-orange);

  transform: translate(-50%, -50%);
}

.section3-management__description {
  position: absolute;
  top: 50%;
  left: calc(100% + clamp(2rem, 4vw, 4rem));

  width: clamp(15rem, 22vw, 19rem);
  margin: 0;

  font-size: clamp(0.95rem, 1.2vw, 1.1rem);
  font-style: normal;
  font-weight: 400;
  line-height: 1.65;

  transform: translateY(-50%);
}

.section3-storage-path {
  position: absolute;
  top: 100%;
  left: 50%;

  width: 1px;
  height: clamp(4rem, 7vw, 5.5rem);

  background: var(--color-solar-orange);
  transform: translateX(-50%);
}

.section3-storage {
  position: absolute;
  top: calc(100% + clamp(4.75rem, 8vw, 6.25rem));
  left: 50%;

  width: clamp(6rem, 10vw, 8rem);
  height: clamp(6rem, 10vw, 8rem);

  transform: translate(-50%, 0);
}

.section3-storage__battery {
  position: relative;

  width: 100%;
  height: 100%;

  border: 1px solid var(--color-solar-orange);
}

.section3-storage__battery::before,
.section3-storage__battery::after {
  content: "";
  position: absolute;

  width: 18%;
  height: 8px;

  top: -9px;

  border: 1px solid var(--color-solar-orange);
  border-bottom: none;
}

.section3-storage__battery::before {
  left: 18%;
}

.section3-storage__battery::after {
  right: 18%;
}
.section3-storage__level {
  position: absolute;
  left: 18%;
  right: 18%;
  top: 50%;

  height: 1px;
  background: var(--color-solar-orange);
}

.section3-storage__node {
  position: absolute;
  left: 50%;
  top: 50%;

  width: 7px;
  height: 7px;

  border-radius: 50%;
  background: var(--color-solar-orange);

  transform: translate(-50%, -50%);
}

.section3-storage__description {
  position: absolute;
  top: 50%;
  left: calc(100% + clamp(2rem, 4vw, 4rem));

  width: clamp(15rem, 22vw, 19rem);
  margin: 0;

  font-size: clamp(0.95rem, 1.2vw, 1.1rem);
  font-style: normal;
  font-weight: 400;
  line-height: 1.65;

  transform: translateY(-50%);
}

.section3-storage__label {
    position: absolute;
    right: calc(100% + 2rem);
    bottom: 50%;

    display: flex;
    flex-direction: column;
    gap: 0.35rem;

    transform: translateY(50%);
    text-align: right;
    white-space: nowrap;
}

.section3-storage__label span {
  color: var(--color-solar-orange);
}

.section3-storage__label span {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-solar-orange);
}

.section3-storage__label strong {
  font-size: clamp(1.3rem, 2vw, 1.8rem);
  font-weight: 600;
  letter-spacing: 0.08em;
}

.section3-storage-pulse {
    position: absolute;
    top: 0;
    left: 50%;

    width: 8px;
    height: 8px;

    border-radius: 50%;
    background: var(--color-solar-orange);

    transform: translate(-50%, -50%);
    animation: section3-storage-flow 4.8s linear infinite;
}

@keyframes section3-storage-flow {
    0%,
    83% {
        opacity: 0;
        top: 0;
    }

    84% {
        opacity: 1;
        top: 0;
    }

    100% {
        opacity: 1;
        top: calc(100% + clamp(3rem, 5vw, 4rem));
    }
}

.section3-management__label {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 1.25rem);

  display: flex;
  flex-direction: column;
  gap: 0.35rem;

  transform: translateX(-50%);
  text-align: center;
  white-space: nowrap;
}

.section3-management__label span {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-solar-orange);
}

.section3-management__label strong {
  font-size: clamp(1.3rem, 2vw, 1.8rem);
  font-weight: 600;
  letter-spacing: 0.08em;
}

.section3-system__line--pv-left,
.section3-system__line--pv-right {
  top: calc(50% - clamp(5rem, 10vw, 8rem));
  width: clamp(5rem, 9vw, 7rem);
  height: 1px;
  transform-origin: center;
}

.section3-system__line--pv-left {
  left: calc(50% - clamp(4.5rem, 8vw, 6rem));
  transform: rotate(-24deg);
}

.section3-system__line--pv-right {
  left: calc(50% - 0.5rem);
  transform: rotate(24deg);
}

.section3-pv {
  position: absolute;
  left: 50%;
  bottom: calc(50% + clamp(5rem, 10vw, 8rem));
  width: clamp(9rem, 18vw, 15rem);
  height: clamp(4.5rem, 9vw, 7.5rem);
  transform: translateX(-50%);
}

.section3-pv__frame {
  position: relative;
  width: 100%;
  height: 100%;

  border: 1px solid var(--color-solar-orange);

  transform: skewX(-18deg);
  transform-origin: center;
}

.section3-pv__line {
  position: absolute;
  background: var(--color-solar-orange);
}

.section3-pv__line--vertical {
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
}

.section3-pv__line--horizontal {
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
}

.section3-pv__label {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 1.25rem);

  display: flex;
  flex-direction: column;
  gap: 0.35rem;

  transform: translateX(-50%);
  text-align: center;
  white-space: nowrap;
}

.section3-pv__label span {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-solar-orange);
}

.section3-pv__label strong {
  font-size: clamp(1.3rem, 2vw, 1.8rem);
  font-weight: 600;
  letter-spacing: 0.08em;
}

.section3-pv__description {
  position: absolute;
  top: 20%;
  left: calc(100% + clamp(2.5rem, 5vw, 5rem));

  width: clamp(16rem, 25vw, 23rem);
  margin: 0;

  font-size: clamp(0.95rem, 1.2vw, 1.1rem);
  font-style: normal !important;
  font-weight: 400;
  line-height: 1.65;

  transform: translateY(-50%) skewX(18deg);
}

/* SECTION 03 — extra vertical space for complete energy system */
.section--solutions {
  min-height: 125vh;
}

/* 04 — SIGNATURE ENGINEERING */
.section--engineering {
    background: var(--color-graphite-soft);
    color: var(--color-text-light);
    display: block;
    overflow: visible;
}

.engineering-intro {
    min-height: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
padding-top: 4vh;
}

.engineering-intro-copy {
    margin-top: 1.25rem;
}

.engineering-scroll {
    position: relative;
    min-height: auto;
}

.engineering-sticky {
    position: relative;
    top: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.engineering-stage {
    width: 100%;
    height: auto;
    position: relative;
}

.engineering-canvas {
    position: relative;
    width: min(1100px, 88vw);
    height: auto;
    margin: auto;
}

.engineering-drawing {
    width: 100%;
    height: auto;
    display: block;
}

.engineering-origin {
    fill: #d96b2b;
}

.engineering-origin-line {
    stroke: rgba(255, 255, 255, 0.45);
    stroke-width: 1.5;
}

.engineering-property-outline {
    fill: none;
    stroke: rgba(255, 255, 255, 0.58);
    stroke-width: 1.5;
}

.engineering-internal-line {
    fill: none;
    stroke: rgba(255, 255, 255, 0.28);
    stroke-width: 1;
}

.engineering-dimension {
    fill: none;
    stroke: rgba(255, 255, 255, 0.22);
    stroke-width: 1;
}

.engineering-dimension-label {
    fill: rgba(255, 255, 255, 0.42);
    font-size: 14px;
    letter-spacing: 0.08em;
}

.engineering-property-label {
    fill: rgba(255, 255, 255, 0.34);
    font-size: 12px;
    letter-spacing: 0.16em;
}

/* SECTION 04 — REAL INSTALLATION */

.section--engineering .engineering-reality {
    position: relative;
    inset: auto;
    width: min(1100px, 88vw);
    height: auto;
    margin: 4rem auto 0;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    overflow: visible;
}

.section--engineering .engineering-reality {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 4rem;
    align-items: center;
}

.section--engineering .engineering-reality-image {
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
}

.section--engineering .engineering-reality-image img {
    position: relative;
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
    transform: none;
}

/* SECTION 04 — Stage 1 drawing behaviour */

.engineering-property-outline,
.engineering-internal-line,
.engineering-dimension,
.engineering-origin-line {
    vector-effect: non-scaling-stroke;
}

.engineering-property-outline {
    stroke-dasharray: 1500;
    stroke-dashoffset: 1500;
}

.engineering-internal-line {
    stroke-dasharray: 500;
    stroke-dashoffset: 500;
}

.engineering-dimension {
    stroke-dasharray: 800;
    stroke-dashoffset: 800;
}

.engineering-origin {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    transform: scale(0.4);
}

.engineering-origin-line {
    stroke-dasharray: 120;
    stroke-dashoffset: 120;
}

.engineering-dimension-label,
.engineering-property-label {
    opacity: 0;
}

.engineering-property-outline,
.engineering-internal-line,
.engineering-dimension,
.engineering-origin-line,
.engineering-origin,
.engineering-dimension-label,
.engineering-property-label {
    transition:
    stroke-dashoffset 1.8s ease,
    opacity 0.9s ease,
    transform 0.9s ease;
}

.engineering-origin {
    transition-delay: 0.1s;
}

.engineering-origin-line {
    transition-delay: 0.35s;
}

.engineering-property-outline {
    transition-delay: 0.65s;
}

.engineering-internal-line {
    transition-delay: 1.15s;
}

.engineering-dimension {
    transition-delay: 1.45s;
}

.engineering-dimension-label,
.engineering-property-label {
    transition-delay: 1.8s;
}

/* SECTION 04 — Stage 2: Demand */

.engineering-demand {
    opacity: 0;
    transform: translateY(10px);
    transform-origin: center;
    transition:
        opacity 1.3s ease,
        transform 1.3s ease;
}

.engineering-stage-label {
    fill: rgba(255, 255, 255, 0.34);
    font-size: 12px;
    letter-spacing: 0.16em;
}

.engineering-demand-priority {
    fill: rgba(217, 107, 43, 0.82);
    font-size: 13px;
    letter-spacing: 0.08em;
}

.engineering-demand-rule {
    stroke: rgba(255, 255, 255, 0.22);
    stroke-width: 1;
    stroke-dasharray: 180;
    stroke-dashoffset: 180;
    transition: stroke-dashoffset 1.8s ease;
}

.section--engineering.is-stage-2 .engineering-demand {
    opacity: 1;
    transform: translateY(0);
}

.section--engineering.is-stage-2 .engineering-demand-rule {
    stroke-dashoffset: 0;
}


/* SECTION 04 — Stage 3: Solar potential */

.engineering-solar {
    opacity: 0;
    transition: opacity 1.2s ease;
}

.engineering-roof-zone {
    fill: rgba(255, 255, 255, 0.025);
    stroke: rgba(255, 255, 255, 0.22);
    stroke-width: 1;
    stroke-dasharray: 700;
    stroke-dashoffset: 700;
    transition: stroke-dashoffset 2s ease;
}

.engineering-roof-zone--secondary {
    opacity: 0.55;
}

.engineering-pv-array rect {
    fill: rgba(217, 107, 43, 0.08);
    stroke: rgba(217, 107, 43, 0.7);
    stroke-width: 1;
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    transform: scale(0.85);
    transition:
        opacity 0.9s ease,
        transform 0.9s ease;
}

.engineering-solar-label {
    fill: rgba(255, 255, 255, 0.38);
    font-size: 12px;
    letter-spacing: 0.16em;
    opacity: 0;
    transition: opacity 0.7s ease;
}

.section--engineering.is-stage-3 .engineering-solar {
    opacity: 1;
}

.section--engineering.is-stage-3 .engineering-roof-zone {
    stroke-dashoffset: 0;
}

.section--engineering.is-stage-3 .engineering-solar-label {
    opacity: 1;
}

.section--engineering.is-stage-3 .engineering-pv-array rect {
    opacity: 1;
    transform: scale(1);
}

.section--engineering.is-stage-3 .engineering-pv-array rect:nth-child(1) {
    transition-delay: 0.45s;
}

.section--engineering.is-stage-3 .engineering-pv-array rect:nth-child(2) {
    transition-delay: 0.65s;
}

.section--engineering.is-stage-3 .engineering-pv-array rect:nth-child(3) {
    transition-delay: 0.85s;
}

.section--engineering.is-stage-3 .engineering-pv-array rect:nth-child(4) {
    transition-delay: 1.05s;
}

.section--engineering.is-stage-3 .engineering-pv-array rect:nth-child(5) {
    transition-delay: 1.25s;
}

.section--engineering.is-stage-3 .engineering-pv-array rect:nth-child(6) {
    transition-delay: 1.45s;
}

/* SECTION 04 — Stage 4: System architecture */

.engineering-system {
    opacity: 0;
    transition: opacity 1.5s ease;
}

.engineering-node circle {
    fill: var(--color-graphite-soft);
    stroke: rgba(255, 255, 255, 0.42);
    stroke-width: 1;
}

.engineering-node > text:not(.engineering-node-label) {
    fill: rgba(255, 255, 255, 0.72);
    font-size: 10px;
    letter-spacing: 0.05em;
}

.engineering-node-label {
    fill: rgba(255, 255, 255, 0.34);
    font-size: 9px;
    letter-spacing: 0.11em;
}

.engineering-system-title {
    fill: rgba(255, 255, 255, 0.34);
    font-size: 11px;
    letter-spacing: 0.15em;
}

.section--engineering.is-stage-4 .engineering-system {
    opacity: 1;
}


/* SECTION 04 — Stage 5: Energy flow */

.engineering-energy-flow {
    opacity: 0;
    transition: opacity 1.2s ease;
}

.engineering-energy-path {
    fill: none;
    stroke: rgba(217, 107, 43, 0.62);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 500;
    stroke-dashoffset: 500;
    transition: stroke-dashoffset 2.2s ease;
}

.engineering-energy-path--grid {
    stroke: rgba(255, 255, 255, 0.3);
}

.engineering-energy-pulse {
    fill: #d96b2b;
    opacity: 0;
}

.section--engineering.is-stage-5 .engineering-energy-flow {
    opacity: 1;
}

.section--engineering.is-stage-5 .engineering-energy-path {
    stroke-dashoffset: 0;
}

.section--engineering.is-stage-5 .engineering-energy-pulse {
    opacity: 1;
    animation: engineeringPulse 1.8s ease-in-out infinite;
}

.section--engineering.is-stage-5 .pulse-2 {
    animation-delay: 0.35s;
}

.section--engineering.is-stage-5 .pulse-3 {
    animation-delay: 0.7s;
}

@keyframes engineeringPulse {
    0%,
    100% {
        opacity: 0.25;
        transform: scale(0.75);
    }

    50% {
        opacity: 1;
        transform: scale(1.35);
    }
}

.engineering-flow-dot {
    fill: #d96b2b;
    opacity: 0;
}

.section--engineering.is-stage-5 .engineering-flow-dot {
    opacity: 1;
}

/* SECTION 04 — Stage 6: Monitoring */

.engineering-monitoring {
    opacity: 0;
    transform: translateY(10px);
    transform-origin: center;
    transition:
        opacity 1.3s ease,
        transform 1.3s ease;
}

.engineering-monitor-box {
    fill: rgba(255, 255, 255, 0.025);
    stroke: rgba(255, 255, 255, 0.24);
    stroke-width: 1;
}

.engineering-monitor-title {
    fill: rgba(255, 255, 255, 0.36);
    font-size: 10px;
    letter-spacing: 0.14em;
}

.engineering-monitor-value {
    fill: rgba(255, 255, 255, 0.82);
    font-size: 18px;
    letter-spacing: 0.04em;
}

.engineering-monitor-caption {
    fill: rgba(255, 255, 255, 0.30);
    font-size: 8px;
    letter-spacing: 0.11em;
}

.engineering-monitor-graph {
    fill: none;
    stroke: rgba(217, 107, 43, 0.68);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 220;
    stroke-dashoffset: 220;
    transition: stroke-dashoffset 2s ease;
}

.section--engineering.is-stage-6 .engineering-monitoring {
    opacity: 1;
    transform: translateY(0);
}

.section--engineering.is-stage-6 .engineering-monitor-graph {
    stroke-dashoffset: 0;
}

/* SECTION 04 — Stage 7: 2D becomes dimensional */

.engineering-canvas {
    perspective: 1400px;
}

.engineering-drawing {
    transform-origin: 50% 55%;
    transform:
        rotateX(0deg)
        rotateZ(0deg)
        scale(1);
    transition:
        transform 2.2s cubic-bezier(0.22, 1, 0.36, 1),
        filter 2.2s ease;
}

.section--engineering.is-stage-7 .engineering-drawing {
    transform:
        rotateX(48deg)
        rotateZ(-5deg)
        scale(0.93);
    filter: drop-shadow(0 28px 22px rgba(0, 0, 0, 0.22));
}

.section--engineering.is-stage-7 .engineering-property-outline,
.section--engineering.is-stage-7 .engineering-roof-zone,
.section--engineering.is-stage-7 .engineering-pv-array {
    filter: drop-shadow(0 8px 4px rgba(0, 0, 0, 0.16));
}

/* SECTION 04 — Stage 8: Engineering becomes reality */

.engineering-reality {
    position: relative;
    width: 100%;
    height: auto;
    overflow: visible;
    opacity: 1;
    transform: none;
   border-top: 1px solid rgba(255, 255, 255, 0.12);
padding-top: 3rem; 
}

.engineering-reality img {
    width: 100%;
    height: auto;
object-fit: contain;
    object-position: center 48%;
    display: block;
    filter:
        brightness(0.68)
saturate(0.72)
contrast(1.05);
    transition: filter 2.4s ease;
}

.section--engineering.is-stage-8 .engineering-reality {
    opacity: 1;
    transform: scale(1);
}

.section--engineering.is-stage-8 .engineering-reality img {
    filter:
        brightness(0.92)
        saturate(1)
        contrast(1);
}

.engineering-drawing {
    position: relative;
    z-index: 2;
}

.engineering-reality {
    z-index: 1;
}

.section--engineering.is-stage-8 .engineering-drawing {
    opacity: 0.08;
    filter: none;
    transition:
        opacity 2.4s ease,
        transform 2.2s cubic-bezier(0.22, 1, 0.36, 1),
        filter 2.2s ease;
}

.engineering-final {
    position: absolute;
    left: 50%;
    bottom: 7%;
    z-index: 4;
    width: min(820px, 84%);
    transform: translate(-50%, 18px);
    text-align: center;
    opacity: 0;
    transition:
        opacity 1.4s ease 1.2s,
        transform 1.4s ease 1.2s;
}

.engineering-final span {
    display: block;
    margin-bottom: 12px;
    color: rgba(217, 107, 43, 0.95);
    font-size: 12px;
    letter-spacing: 0.18em;
}

.engineering-final strong {
    display: block;
    color: rgba(255, 255, 255, 0.94);
    font-size: clamp(18px, 2vw, 28px);
    line-height: 1.25;
    letter-spacing: 0.04em;
    font-weight: 500;
   text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45); 
}

.section--engineering.is-stage-8 .engineering-final {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* SECTION 04 — NEW STATIONARY ENGINEERING COMPOSITION */

.section--engineering .engineering-demand,
.section--engineering .engineering-solar,
.section--engineering .engineering-system,
.section--engineering .engineering-energy-flow,
.section--engineering .engineering-monitoring {
    opacity: 1;
    transform: none;
}

.section--engineering .engineering-property-outline,
.section--engineering .engineering-internal-line,
.section--engineering .engineering-dimension,
.section--engineering .engineering-origin-line,
.section--engineering .engineering-roof-zone,
.section--engineering .engineering-demand-rule,
.section--engineering .engineering-energy-path,
.section--engineering .engineering-monitor-graph {
    stroke-dashoffset: 0;
}

.section--engineering .engineering-origin,
.section--engineering .engineering-dimension-label,
.section--engineering .engineering-property-label,
.section--engineering .engineering-solar-label,
.section--engineering .engineering-pv-array rect,
.section--engineering .engineering-flow-dot {
    opacity: 1;
}

.section--engineering .engineering-pv-array rect {
    transform: scale(1);
}

.engineering-flow-label {
    fill: rgba(217, 107, 43, 0.88);
    font-size: 10px;
    letter-spacing: 0.16em;
    font-weight: 500;
}

/* Stage 1 active state */

.section--engineering.is-stage-1 .engineering-origin {
    opacity: 1;
    transform: scale(1);
}

.section--engineering.is-stage-1 .engineering-origin-line,
.section--engineering.is-stage-1 .engineering-property-outline,
.section--engineering.is-stage-1 .engineering-internal-line,
.section--engineering.is-stage-1 .engineering-dimension {
    stroke-dashoffset: 0;
}

.section--engineering.is-stage-1 .engineering-dimension-label,
.section--engineering.is-stage-1 .engineering-property-label {
    opacity: 1;
}

.engineering-reality-flow {
    display: block;
    color: #d96b2b;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 0.85rem;
}

.engineering-reality-copy h3 {
    margin: 0 0 1rem;
}

.engineering-reality-copy p {
    margin: 0;
    max-width: 42rem;
    color: rgba(255, 255, 255, 0.72);
    line-height: 1.65;
}

.engineering-reality-image {
    border: 1px solid rgba(255, 255, 255, 0.10);
}

/* Stage 1 construction origin retires once engineering develops */

.engineering-origin,
.engineering-origin-line {
    transition: opacity 0.8s ease;
}

.section--engineering.is-stage-2 .engineering-origin,
.section--engineering.is-stage-2 .engineering-origin-line {
    opacity: 0;
}

/* 05 — REAL APPLICATION */
.section--proof {
  background: var(--color-warm-white);
  color: var(--color-text-dark);
}

/* 06 — PEACE OF MIND */
.section--support {
  background: var(--color-silver-light);
  color: var(--color-text-dark);
}

/* 07 — BENEFITS */
.section--benefits {
  background: var(--color-warm-white);
  color: var(--color-text-dark);
}

/* 08 — HUMAN HANDOVER */
.section--evaluation {
    background: var(--color-graphite-soft);
    color: var(--color-text-light);

    min-height: 72vh;
    align-items: flex-start;
}

/* 08 — HUMAN HANDOVER INTRO */

.section--evaluation .section-placeholder {
    width: min(100%, 1180px);
}

.section--evaluation h2 {
    max-width: 1000px;
    margin-bottom: var(--space-lg);
}

.evaluation-intro {
    max-width: 720px;
}

.evaluation-intro h3 {
    margin: 0 0 var(--space-md);

    font-size: clamp(1.15rem, 1.7vw, 1.45rem);
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0.02em;

    color: var(--color-silver);
}

.evaluation-intro p {
    margin: 0 0 var(--space-md);

    font-size: clamp(0.95rem, 1.15vw, 1.05rem);
    line-height: 1.75;

    color: var(--color-silver);
}

.evaluation-intro__statement {
    margin-top: var(--space-lg) !important;
    max-width: 680px;

    font-weight: 600;
    color: var(--color-text-light) !important;
}

/* 08 — HUMAN HANDOVER PROCESS */

.evaluation-process {
    position: relative;

    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(1.25rem, 2vw, 2rem);

    margin-top: clamp(4rem, 7vw, 6.5rem);
    padding-top: 2.25rem;

    border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.evaluation-step {
    position: relative;
}

.evaluation-step::before {
    content: "";

    position: absolute;
    top: -2.55rem;
    left: 0;

    width: 7px;
    height: 7px;

    border-radius: 50%;
    background: var(--color-solar-orange);
}

.evaluation-step__number {
    display: block;
    margin-bottom: 1.25rem;

    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.18em;

    color: var(--color-solar-orange);
}

.evaluation-step h3 {
    margin: 0 0 1rem;

    font-size: clamp(1.05rem, 1.4vw, 1.3rem);
    font-weight: 500;
    line-height: 1.25;

    color: var(--color-text-light);
}

.evaluation-step p {
    margin: 0;

    font-size: clamp(0.86rem, 0.95vw, 0.96rem);
    line-height: 1.65;

    color: var(--color-silver);
}

/* 08 — HUMAN HANDOVER PHOTO */

.evaluation-human {
    width: 100%;
    margin-top: clamp(3rem, 5vw, 4.5rem);
}

.evaluation-human__image {
    width: 100%;
    height: clamp(240px, 24vw, 310px);
    margin: 0;
    overflow: hidden;
}

.evaluation-human__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;

    /* Keep the working team visible while trimming the right side */
    object-position: 35% 62%;
}

/* =========================================================
   SECTION 09 — THE PEOPLE BEHIND ETECH
   ========================================================= */
.section--people {
    background: var(--color-warm-white);
    color: var(--color-text-dark);

    min-height: auto;
    align-items: flex-start;
    padding-top: calc(var(--header-height) + var(--space-xl));
   padding-bottom: clamp(4rem, 6vw, 6rem); 
}

/* 09 — PEOPLE SHELL */

.people-shell {
    width: min(100%, 1180px);
    margin-inline: auto;
}

.people-intro {
    max-width: 1080px;
    margin-bottom: clamp(3rem, 5vw, 5rem);
}

.people-eyebrow {
    display: block;
    margin-bottom: 1.25rem;

    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;

    color: var(--color-solar-orange);
}

.people-heading {
    max-width: 1050px;
    margin: 0;

    font-size: clamp(2.8rem, 5.4vw, 5.25rem);
    font-weight: 500;
    line-height: 0.98;
    letter-spacing: -0.035em;

    color: var(--color-text-dark);
}

/* 09 — PEOPLE CONTENT */

.people-content {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
    gap: clamp(3rem, 6vw, 6rem);
    align-items: center;
}

.people-visual {
    position: relative;
    min-height: clamp(340px, 38vw, 500px);

    background:
        linear-gradient(
            135deg,
            rgba(26, 29, 31, 0.06),
            rgba(26, 29, 31, 0.015)
        );

    border: 1px solid rgba(26, 29, 31, 0.10);
}

.people-copy {
    max-width: 470px;
}

.people-copy p {
    margin: 0 0 1.5rem;

    font-size: clamp(0.98rem, 1.15vw, 1.08rem);
    line-height: 1.75;

    color: var(--color-text-dark);
}

.people-statement {
    margin-top: clamp(2rem, 3vw, 3rem) !important;
    padding-top: 1.5rem;

    border-top: 1px solid rgba(26, 29, 31, 0.16);

    font-weight: 600;
}

/* 09 — BILINGUAL ENGINEERING VISUAL */

.people-detail__image[hidden] {
    display: none !important;
}

/* 09 — ENGINEERING DETAIL */

.people-detail {
    width: 100%;
    margin-top: clamp(4rem, 7vw, 6.5rem);
}

.people-detail__image {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
}

/* 10 — COVERAGE */
.section--coverage {
  background: var(--color-silver-light);
  color: var(--color-text-dark);
}

/* 10 — COVERAGE LAYOUT */

.section--coverage {
    min-height: auto;
    align-items: flex-start;

    padding-top: clamp(7rem, 10vw, 10rem);
    padding-bottom: clamp(7rem, 10vw, 10rem);
}

.coverage-shell {
    width: min(100%, 1180px);
    margin-inline: auto;
}

.coverage-intro {
    max-width: 900px;
}

.coverage-eyebrow {
    display: block;
    margin-bottom: 1.5rem;

    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.16em;

    color: var(--color-solar-orange);
}

.coverage-heading {
    margin: 0;

    max-width: 900px;

    font-size: clamp(3rem, 6vw, 5.5rem);
    line-height: 0.98;
    letter-spacing: -0.035em;
}

.coverage-lead {
    max-width: 680px;
    margin: 2rem 0 0;

    font-size: clamp(1rem, 1.25vw, 1.15rem);
    line-height: 1.7;
}

.coverage-map {
    width: 100%;
    margin-top: clamp(3.5rem, 6vw, 5.5rem);
}

.coverage-map__visual {
    width: 100%;
    min-height: 460px;

    border: 1px solid rgba(20, 24, 27, 0.12);
}

/* 10 — BILINGUAL MAP VISIBILITY */

.coverage-map__image[hidden] {
    display: none !important;
}

.coverage-map__image {
    display: block;
    width: 100%;
    height: auto;
}

.coverage-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(2rem, 5vw, 5rem);

    margin-top: 2.5rem;
    padding-top: 2rem;

    border-top: 1px solid rgba(20, 24, 27, 0.16);
}

.coverage-summary__label {
    display: block;
    margin-bottom: 0.75rem;

    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.16em;

    color: var(--color-solar-orange);
}

.coverage-summary__item p {
    max-width: 480px;
    margin: 0;

    line-height: 1.65;
}

/* FINAL */
.section--final {
  min-height: 80vh;

  background: var(--color-graphite);
  color: var(--color-text-light);

  text-align: center;
}

.section--final .section-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.section--final p {
  margin-top: var(--space-md);

  font-size: clamp(1rem, 1.4vw, 1.3rem);

  color: var(--color-silver);
}

.section--final .button {
  margin-top: var(--space-lg);
}


/* ----------------------------------------------------------
   12. TECHNICAL EYEBROW ACCENT
   ---------------------------------------------------------- */

.section-placeholder > span {
  color: var(--color-solar-orange);
}


/* ----------------------------------------------------------
   13. FULL-SCREEN EXPERIENCE LAYERS
   ---------------------------------------------------------- */

.experience-layer {
  position: fixed;
  z-index: 2000;

  inset: 0;

  display: none;

  overflow-y: auto;

  padding:
    calc(var(--header-height) + var(--space-lg))
    var(--page-padding)
    var(--space-xl);

  background: var(--color-graphite);
  color: var(--color-text-light);
}

.experience-layer.is-open {
  display: block;
}

.experience-layer__content {
  width: min(100%, var(--content-width));

  margin-inline: auto;
}

.experience-layer__close {
  position: fixed;

  top: 1.25rem;
  right: var(--page-padding);

  min-height: 44px;

  padding-inline: 1rem;

  background: transparent;
  color: var(--color-text-light);

  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-small);

  cursor: pointer;
}


/* ----------------------------------------------------------
   14. FOOTER
   ---------------------------------------------------------- */

.site-footer {
  display: grid;

  grid-template-columns:
    minmax(180px, 1fr)
    auto
    minmax(180px, 1fr);

  align-items: center;

  gap: var(--space-md);

  padding:
    var(--space-lg)
    var(--page-padding);

  background: #111315;
  color: var(--color-silver);

  border-top: 1px solid var(--color-border-dark);

  font-size: 0.76rem;
}

.site-footer__brand {
  color: var(--color-white);

  font-weight: 700;
  letter-spacing: 0.14em;
}

.site-footer nav {
  display: flex;
  gap: 1.5rem;
}

.site-footer__legal {
  display: flex;
  justify-content: flex-end;

  gap: 1rem;
}


/* ----------------------------------------------------------
   15. TEMPORARY BUILD MARKERS
   ---------------------------------------------------------- */

/*
   These are intentionally subtle.
   They help us see section boundaries while constructing
   the website and can be removed later.
*/

.section::after {
  content: "";

  position: absolute;

  left: var(--page-padding);
  right: var(--page-padding);
  bottom: 0;

  height: 1px;

  background: currentColor;

  opacity: 0.08;
}

/* ==========================================================
   SECTION 01 — HERO
   ========================================================== */


/* ----------------------------------------------------------
   01. HERO CANVAS
   ---------------------------------------------------------- */

.section--hero {
  position: relative;

  min-height: 100vh;
  min-height: 100svh;

  display: flex;
  align-items: flex-end;

  padding-top: calc(var(--header-height) + 3rem);
  padding-bottom: clamp(4.5rem, 9vh, 7.5rem);

  isolation: isolate;

  background: var(--color-graphite);
  color: var(--color-text-light);
}


/* ----------------------------------------------------------
   02. BACKGROUND MEDIA
   ---------------------------------------------------------- */

.hero-media {
  position: absolute;
  z-index: -3;

  inset: 0;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 75% 35%,
      rgba(255, 255, 255, 0.05),
      transparent 35%
    ),
    linear-gradient(
      135deg,
      #252a2d 0%,
      #171a1c 55%,
      #101214 100%
    );
}


/*
   The real approved ETECH photograph will eventually
   be placed here.

   For now we deliberately use the technical background
   rather than a fake/stock project photograph.
*/

.hero-media__image {
  position: absolute;

  inset: 0;

  background-image: url("../assets/photos/hero-etech-ocean.webp");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;

  transform: scale(1.02);

  opacity: 1;
}


/* ----------------------------------------------------------
   03. CINEMATIC OVERLAY
   ---------------------------------------------------------- */

.hero-media__overlay {
  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(12, 14, 15, 0.88) 0%,
      rgba(12, 14, 15, 0.72) 28%,
      rgba(12, 14, 15, 0.38) 52%,
      rgba(12, 14, 15, 0.14) 76%,
      rgba(12, 14, 15, 0.08) 100%
    ),
    linear-gradient(
      0deg,
      rgba(10, 12, 13, 0.62) 0%,
      rgba(10, 12, 13, 0.10) 46%,
      rgba(10, 12, 13, 0.18) 100%
    );
}


/* ----------------------------------------------------------
   04. HERO CONTENT
   ---------------------------------------------------------- */

.hero-content {
  position: relative;
  z-index: 5;

  width: 100%;
}

.hero-content__inner {
  width: min(100%, var(--content-width));

  margin-inline: auto;
}

.hero-eyebrow {
  display: block;

  margin-bottom: clamp(1.4rem, 3vh, 2.2rem);

  color: var(--color-solar-orange);

  font-size: 0.7rem;
  font-weight: 600;

  letter-spacing: 0.2em;
  text-transform: uppercase;
}


/* ----------------------------------------------------------
   05. HERO HEADLINE
   ---------------------------------------------------------- */

.hero-title {
  max-width: 900px;

  margin: 0;

  font-size: clamp(4rem, 7.4vw, 8.3rem);
  font-weight: 500;

  line-height: 1.01;
  letter-spacing: -0.045em;
}

.hero-title__line {
  display: block;
}

.hero-title__line--accent {
  color: var(--color-solar-orange);
}


/* ----------------------------------------------------------
   06. SUPPORTING COPY
   ---------------------------------------------------------- */

.hero-subtitle {
  max-width: 610px;

  margin-top: clamp(1.8rem, 4vh, 2.8rem);

  color: rgba(244, 242, 237, 0.78);

  font-size: clamp(1rem, 1.35vw, 1.25rem);
  font-weight: 400;

  line-height: 1.55;
}


/* ----------------------------------------------------------
   07. DESCRIPTOR LINE
   ---------------------------------------------------------- */

.hero-descriptor {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 0.65rem;

  margin-top: 1.5rem;

  color: rgba(244, 242, 237, 0.58);

  font-size: 0.72rem;
  font-weight: 500;

  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hero-descriptor__separator {
  color: var(--color-solar-orange);
}


/* ----------------------------------------------------------
   08. HERO ACTIONS
   ---------------------------------------------------------- */

.hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 0.9rem;

  margin-top: clamp(2rem, 4vh, 3rem);
}

.hero-action {
  min-width: 190px;
}

.hero-action--secondary {
  background: rgba(255, 255, 255, 0.03);
  color: var(--color-text-light);

  border-color: rgba(255, 255, 255, 0.28);
}

.hero-action--secondary:hover {
  background: rgba(255, 255, 255, 0.08);

  border-color: rgba(255, 255, 255, 0.52);
}


/* ----------------------------------------------------------
   09. ENGINEERING VISUAL
   ---------------------------------------------------------- */

.hero-engineering {
  display: none;
    position: absolute;
    z-index: 1;

    top: var(--header-height);
    right: 6vw;
    bottom: 0;

    width: min(48vw, 760px);

    pointer-events: none;

    opacity: 0.88;
}

.hero-engineering__svg {
  width: 100%;
  height: 100%;
}

.hero-engineering__grid path {
  fill: none;

  stroke: rgba(244, 242, 237, 0.42);
stroke-width: 1.15;

  vector-effect: non-scaling-stroke;
}

.hero-energy-path {
  fill: none;

  stroke-width: 1.6;

  vector-effect: non-scaling-stroke;
}

.hero-energy-path--orange {
  stroke: var(--color-solar-orange);

  stroke-width: 2.1;

  opacity: 1;
}

.hero-energy-path--green {
  stroke: var(--color-energy-green-light);

  stroke-dasharray: 5 12;

  opacity: 0.78;
}

.hero-energy-node {
  fill: var(--color-energy-green-light);

  opacity: 0.9;
}


/* ----------------------------------------------------------
   10. TECHNICAL GLOW
   ---------------------------------------------------------- */

.hero-engineering::before {
  content: "";

  position: absolute;

  width: 420px;
  height: 420px;

  top: 22%;
  right: 5%;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(200, 100, 44, 0.08) 0%,
      rgba(200, 100, 44, 0.025) 40%,
      transparent 70%
    );

  filter: blur(10px);
}


/* ----------------------------------------------------------
   11. SCROLL CUE
   ---------------------------------------------------------- */

.hero-scroll-cue {
  position: absolute;
  z-index: 5;

  right: var(--page-padding);
  bottom: 3rem;

  display: flex;
  flex-direction: column;
  align-items: center;

  gap: 0.75rem;

  color: rgba(244, 242, 237, 0.48);

  font-size: 0.62rem;
  font-weight: 600;

  letter-spacing: 0.18em;
  text-transform: uppercase;

  writing-mode: vertical-rl;
}

.hero-scroll-cue__line {
  display: block;

  width: 1px;
  height: 52px;

  background:
    linear-gradient(
      to bottom,
      var(--color-solar-orange),
      rgba(200, 100, 44, 0.08)
    );
}


/* ----------------------------------------------------------
   12. HERO DEPTH LINE
   ---------------------------------------------------------- */

.section--hero::before {
  content: "";

  position: absolute;
  z-index: 2;

  left: var(--page-padding);
  right: var(--page-padding);
  bottom: 0;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      var(--color-solar-orange) 0%,
      rgba(200, 100, 44, 0.18) 18%,
      rgba(255, 255, 255, 0.08) 55%,
      transparent 100%
    );
}


/* ----------------------------------------------------------
   13. TABLET HERO
   ---------------------------------------------------------- */

@media (max-width: 1100px) {

  .hero-engineering {
    width: 62vw;

    opacity: 0.52;
  }

  .hero-title {
    max-width: 760px;

    font-size: clamp(4rem, 9vw, 7rem);
  }

}


@media (max-width: 820px) {

  .section--hero {
    min-height: 100svh;

    padding-bottom: 4.5rem;
  }

  .hero-engineering {
    top: 18%;
    right: -18%;

    width: 95vw;
    height: 62%;

    opacity: 0.34;
  }

  .hero-media__overlay {
    background:
      linear-gradient(
        90deg,
        rgba(15, 17, 18, 0.94) 0%,
        rgba(15, 17, 18, 0.78) 65%,
        rgba(15, 17, 18, 0.48) 100%
      ),
      linear-gradient(
        0deg,
        rgba(12, 14, 15, 0.86) 0%,
        rgba(12, 14, 15, 0.15) 55%,
        rgba(12, 14, 15, 0.3) 100%
      );
  }

  .hero-title {
    max-width: 680px;

    font-size: clamp(3.8rem, 11vw, 6.4rem);
  }

  .hero-scroll-cue {
    display: none;
  }

}


/* ----------------------------------------------------------
   14. MOBILE HERO
   ---------------------------------------------------------- */

@media (max-width: 600px) {

  .section--hero {
    align-items: flex-end;

    padding-top: calc(var(--header-height) + 3rem);
    padding-bottom: 3rem;
  }

  .hero-eyebrow {
    margin-bottom: 1.2rem;

    font-size: 0.62rem;
  }

  .hero-title {
    max-width: 100%;

    font-size: clamp(3rem, 15vw, 4.7rem);

    line-height: 0.94;
    letter-spacing: -0.045em;
  }

  .hero-subtitle {
    max-width: 92%;

    margin-top: 1.5rem;

    font-size: 0.96rem;
  }

  .hero-descriptor {
    gap: 0.45rem;

    margin-top: 1.2rem;

    font-size: 0.61rem;
    letter-spacing: 0.08em;
  }

  .hero-actions {
    display: grid;

    grid-template-columns: 1fr;

    gap: 0.7rem;

    margin-top: 1.8rem;
  }

  .hero-action {
    width: 100%;
  }

  .hero-engineering {
    top: 10%;
    right: -45%;

    width: 145vw;
    height: 58%;

    opacity: 0.22;
  }

  .hero-engineering::before {
    width: 280px;
    height: 280px;
  }

}


/* ----------------------------------------------------------
   15. VERY SMALL MOBILE
   ---------------------------------------------------------- */

@media (max-width: 390px) {

  .hero-title {
    font-size: clamp(2.7rem, 14vw, 4rem);
  }

  .hero-descriptor {
    max-width: 280px;
  }

}


/* ----------------------------------------------------------
   16. REDUCED MOTION HERO FALLBACK
   ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

  .hero-media__image {
    transform: none;
  }

  .hero-engineering {
    opacity: 0.45;
  }

}

/* ==========================================================
   SECTION 02 — CONVERSATION / LISTENING
   ========================================================== */


/* ----------------------------------------------------------
   01. SECTION CANVAS
   ---------------------------------------------------------- */

.section--conversation {
  position: relative;

  min-height: 100vh;

  padding:
    calc(var(--header-height) + 5rem)
    var(--page-padding)
    7rem;

  background:
    linear-gradient(
      135deg,
      #ececea 0%,
      #dedfdd 52%,
      #d3d5d3 100%
    );

  color: var(--color-text-dark);

  overflow: hidden;
}


/* ----------------------------------------------------------
   02. SUBTLE TECHNICAL BACKGROUND
   ---------------------------------------------------------- */

.section--conversation::before {
  content: "";

  position: absolute;

  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(23, 26, 28, 0.035) 50%,
      transparent 100%
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 79px,
      rgba(23, 26, 28, 0.025) 80px
    );

  opacity: 0.55;
}


/* ----------------------------------------------------------
   03. MAIN SHELL
   ---------------------------------------------------------- */

.conversation-shell {
  position: relative;
  z-index: 2;

  width: min(100%, var(--content-width));

  margin-inline: auto;
}


/* ----------------------------------------------------------
   04. INTRO STATE
   ---------------------------------------------------------- */

.conversation-intro {
    max-width: 52%;
}

.conversation-intro__visual {
    position: absolute;
    top: 50%;
    right: 0;
    width: 52%;
    transform: translateY(-50%);
    pointer-events: none;
}

.conversation-intro__image {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.conversation-eyebrow {
  display: block;

  margin-bottom: 1.8rem;

  color: var(--color-solar-orange);

  font-size: 0.7rem;
  font-weight: 600;

  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.conversation-heading {
  max-width: 900px;

  font-size: clamp(3.5rem, 6.4vw, 7rem);
  font-weight: 500;

  line-height: 0.98;
  letter-spacing: -0.045em;
}

.conversation-intro__text {
  max-width: 680px;

  margin-top: 2rem;

  color: rgba(23, 26, 28, 0.68);

  font-size: clamp(1rem, 1.4vw, 1.25rem);
  line-height: 1.65;
}

.conversation-start {
  margin-top: 2.6rem;

  min-width: 260px;
}


/* ----------------------------------------------------------
   05. INTERACTIVE EXPERIENCE SHELL
   ---------------------------------------------------------- */

.conversation-experience {
  width: 100%;

  margin-top: 4rem;
}

.conversation-experience[hidden] {
  display: none !important;
}


/* ----------------------------------------------------------
   06. TWO-COLUMN DESKTOP STRUCTURE
   ---------------------------------------------------------- */

.conversation-experience:not([hidden]) {
  display: grid;

  grid-template-columns:
    minmax(0, 1.05fr)
    minmax(360px, 0.95fr);

  gap: clamp(3rem, 6vw, 7rem);

  align-items: center;
}


/* ----------------------------------------------------------
   07. QUESTION PANEL
   ---------------------------------------------------------- */

.conversation-panel {
  position: relative;

  min-width: 0;
}

.conversation-step {
  width: 100%;
}

.conversation-step[hidden] {
  display: none !important;
}

.conversation-step__label {
  display: block;

  margin-bottom: 1.2rem;

  color: var(--color-solar-orange);

  font-size: 0.68rem;
  font-weight: 600;

  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.conversation-step h3 {
  max-width: 760px;

  font-size: clamp(2.3rem, 4.2vw, 4.7rem);
  font-weight: 500;

  line-height: 1.02;
  letter-spacing: -0.04em;
}

.conversation-step__support {
  max-width: 620px;

  margin-top: 1.15rem;

  color: rgba(23, 26, 28, 0.58);

  font-size: 0.95rem;
}


/* ----------------------------------------------------------
   08. PROFILE CANVAS CONTAINER
   ---------------------------------------------------------- */

.conversation-profile {
  position: relative;

  min-height: 520px;

  display: flex;
  align-items: center;
  justify-content: center;
}

.conversation-profile__canvas {
  position: relative;

  width: min(100%, 520px);
  aspect-ratio: 1 / 1;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  border: 1px solid rgba(23, 26, 28, 0.08);

  background:
    radial-gradient(
      circle at center,
      rgba(255, 255, 255, 0.36) 0%,
      rgba(255, 255, 255, 0.12) 45%,
      transparent 72%
    );

  border-radius: 50%;
}

.conversation-profile__label {
  position: absolute;

  top: 8%;
  left: 50%;

  transform: translateX(-50%);

  color: rgba(23, 26, 28, 0.42);

  font-size: 0.62rem;
  font-weight: 600;

  letter-spacing: 0.18em;
  text-transform: uppercase;

  white-space: nowrap;
}

.conversation-profile__svg {
  width: 78%;
  height: 78%;
}

.profile-ring {
  fill: none;

  stroke: rgba(23, 26, 28, 0.10);
  stroke-width: 1;
}

.profile-ring--outer {
  stroke: rgba(23, 26, 28, 0.06);
}

.profile-path {
  fill: none;

  stroke: rgba(23, 26, 28, 0.10);
  stroke-width: 1.1;
}

.profile-node {
  fill: rgba(23, 26, 28, 0.22);
}

.profile-node--center {
  fill: var(--color-solar-orange);
}

.conversation-profile__message {
  position: absolute;

  left: 50%;
  bottom: 8%;

  width: min(80%, 360px);

  transform: translateX(-50%);

  color: rgba(23, 26, 28, 0.48);

  font-size: 0.85rem;
  line-height: 1.5;

  text-align: center;
}


/* ----------------------------------------------------------
   09. COMPLETED SUMMARY
   ---------------------------------------------------------- */

.conversation-summary {
  max-width: 920px;

  margin-top: 4rem;
}

.conversation-summary[hidden] {
  display: none !important;
}

.conversation-summary__eyebrow {
  display: block;

  margin-bottom: 1.4rem;

  color: var(--color-energy-green);

  font-size: 0.7rem;
  font-weight: 600;

  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.conversation-summary h3 {
  max-width: 800px;

  font-size: clamp(2.5rem, 4.8vw, 5rem);
  font-weight: 500;

  line-height: 1.02;
  letter-spacing: -0.04em;
}

.conversation-summary__items {
  margin-top: 2.2rem;
}

.conversation-summary__response {
  max-width: 720px;

  margin-top: 2rem;

  color: rgba(23, 26, 28, 0.68);

  font-size: 1rem;
  line-height: 1.65;
}

.conversation-summary__adjust {
  margin-top: 1.5rem;

  padding: 0;

  background: transparent;
  color: var(--color-text-dark);

  border-bottom: 1px solid rgba(23, 26, 28, 0.28);

  font-size: 0.76rem;
  font-weight: 600;

  letter-spacing: 0.1em;
  text-transform: uppercase;

  cursor: pointer;
}


/* ----------------------------------------------------------
   10. TABLET
   ---------------------------------------------------------- */

@media (max-width: 980px) {

  .section--conversation {
    padding-bottom: 5rem;
  }

  .conversation-experience:not([hidden]) {
    grid-template-columns: 1fr;

    gap: 3rem;
  }

  .conversation-profile {
    min-height: 420px;
  }

  .conversation-profile__canvas {
    width: min(100%, 440px);
  }

}


/* ----------------------------------------------------------
   11. MOBILE
   ---------------------------------------------------------- */

@media (max-width: 600px) {

  .section--conversation {
    padding:
      calc(var(--header-height) + 3.5rem)
      var(--page-padding)
      4.5rem;
  }

  .conversation-heading {
    font-size: clamp(2.8rem, 13vw, 4.6rem);
  }

  .conversation-intro__text {
    margin-top: 1.5rem;

    font-size: 0.98rem;
  }

  .conversation-start {
    width: 100%;

    margin-top: 2rem;
  }

  .conversation-experience {
    margin-top: 2.5rem;
  }

  .conversation-step h3 {
    font-size: clamp(2.1rem, 10vw, 3.4rem);
  }

  .conversation-profile {
    min-height: 310px;
  }

  .conversation-profile__canvas {
    width: min(100%, 310px);
  }

  .conversation-profile__label {
    top: 7%;

    font-size: 0.56rem;
  }

  .conversation-profile__message {
    bottom: 7%;

    font-size: 0.78rem;
  }

}
/* ==========================================================
   SECTION 02 — INTERACTION CONTROLS
   ========================================================== */


/* ----------------------------------------------------------
   12. OPTION GROUPS
   ---------------------------------------------------------- */

.conversation-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 0.8rem;

  margin-top: 2.2rem;
}

.conversation-option {
  position: relative;

  min-height: 74px;

  padding: 1.1rem 1.25rem;

  display: flex;
  align-items: center;

  background: rgba(255, 255, 255, 0.22);

  color: var(--color-text-dark);

  border: 1px solid rgba(23, 26, 28, 0.15);
  border-radius: 2px;

  font: inherit;
  font-size: 0.9rem;
  font-weight: 500;

  line-height: 1.35;
  text-align: left;

  cursor: pointer;

  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    color 180ms ease,
    transform 180ms ease;
}

.conversation-option::after {
  content: "";

  position: absolute;

  right: 1rem;
  bottom: 0.8rem;

  width: 5px;
  height: 5px;

  border: 1px solid rgba(23, 26, 28, 0.28);
  border-radius: 50%;

  transition:
    background-color 180ms ease,
    border-color 180ms ease;
}

.conversation-option:hover {
  background: rgba(255, 255, 255, 0.48);

  border-color: rgba(23, 26, 28, 0.32);

  transform: translateY(-1px);
}

.conversation-option:focus-visible {
  outline: 2px solid var(--color-solar-orange);
  outline-offset: 3px;
}

.conversation-option.is-selected {
  background: rgba(23, 26, 28, 0.94);

  color: #f4f3ef;

  border-color: rgba(23, 26, 28, 0.94);
}

.conversation-option.is-selected::after {
  background: var(--color-solar-orange);

  border-color: var(--color-solar-orange);
}


/* ----------------------------------------------------------
   13. MULTIPLE-SELECTION PRIORITIES
   ---------------------------------------------------------- */

.conversation-options--multi {
  grid-template-columns: 1fr;
}

.conversation-options--multi .conversation-option {
  min-height: 62px;
}


/* ----------------------------------------------------------
   14. ELECTRICITY COST RANGE
   ---------------------------------------------------------- */

.conversation-range {
  max-width: 680px;

  margin-top: 3rem;
}

.conversation-range input[type="range"] {
  width: 100%;

  height: 2px;

  appearance: none;
  -webkit-appearance: none;

  background: rgba(23, 26, 28, 0.20);

  border-radius: 0;

  cursor: pointer;
}

.conversation-range input[type="range"]::-webkit-slider-thumb {
  width: 22px;
  height: 22px;

  appearance: none;
  -webkit-appearance: none;

  background: var(--color-solar-orange);

  border: 5px solid #e5e5e2;
  border-radius: 50%;

  box-shadow: 0 0 0 1px rgba(23, 26, 28, 0.18);

  cursor: grab;
}

.conversation-range input[type="range"]::-moz-range-thumb {
  width: 12px;
  height: 12px;

  background: var(--color-solar-orange);

  border: 5px solid #e5e5e2;
  border-radius: 50%;

  box-shadow: 0 0 0 1px rgba(23, 26, 28, 0.18);

  cursor: grab;
}

.conversation-range__value {
  margin-top: 1.4rem;

  display: flex;
  align-items: baseline;

  color: var(--color-text-dark);
}

.conversation-range__value > span:first-child {
  margin-right: 0.25rem;

  color: var(--color-solar-orange);

  font-size: 1.5rem;
  font-weight: 500;
}

.conversation-range__value output {
  font-size: clamp(3rem, 6vw, 5.5rem);
  font-weight: 500;

  line-height: 1;
  letter-spacing: -0.05em;
}

.conversation-range__value > span:last-child {
  margin-left: 0.65rem;

  color: rgba(23, 26, 28, 0.48);

  font-size: 0.8rem;
  font-weight: 600;

  letter-spacing: 0.08em;
  text-transform: uppercase;
}


/* ----------------------------------------------------------
   15. OPTIONAL WRITTEN RESPONSE
   ---------------------------------------------------------- */

.conversation-textarea {
  width: min(100%, 680px);

  margin-top: 2rem;
  padding: 1.25rem 0;

  resize: vertical;

  background: transparent;

  color: var(--color-text-dark);

  border: 0;
  border-top: 1px solid rgba(23, 26, 28, 0.15);
  border-bottom: 1px solid rgba(23, 26, 28, 0.22);

  border-radius: 0;

  font: inherit;
  font-size: 1rem;
  line-height: 1.6;
}

.conversation-textarea::placeholder {
  color: rgba(23, 26, 28, 0.38);
}

.conversation-textarea:focus {
  outline: none;

  border-bottom-color: var(--color-solar-orange);
}


/* ----------------------------------------------------------
   16. LOCATION
   ---------------------------------------------------------- */

.conversation-location {
  max-width: 680px;

  margin-top: 2.2rem;

  display: grid;
  grid-template-columns: 1fr 1.4fr;

  gap: 0.7rem 1.2rem;

  align-items: end;
}

.conversation-location label {
  color: rgba(23, 26, 28, 0.52);

  font-size: 0.66rem;
  font-weight: 600;

  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.conversation-location select,
.conversation-location input {
  width: 100%;

  min-height: 54px;

  padding: 0 0.2rem;

  background: transparent;

  color: var(--color-text-dark);

  border: 0;
  border-bottom: 1px solid rgba(23, 26, 28, 0.25);

  border-radius: 0;

  font: inherit;
  font-size: 0.95rem;
}

.conversation-location select:focus,
.conversation-location input:focus {
  outline: none;

  border-bottom-color: var(--color-solar-orange);
}

/* ------------------------------------------------------------
   CONTACT DETAILS
   ------------------------------------------------------------ */

.conversation-contact {
    display: flex;
    flex-direction: column;

    width: 100%;
    max-width: 520px;

    margin-top: 2rem;
    gap: 0.65rem;
}

.conversation-contact label {
    display: block;

    margin-top: 0.65rem;

    color: var(--color-text-dark);

    font-size: 0.82rem;
    font-weight: 600;
}

.conversation-contact input {
    display: block;

    width: 100%;
    min-height: 52px;

    box-sizing: border-box;

    padding: 0.85rem 1rem;

    background: rgba(255, 255, 255, 0.42);

    color: var(--color-text-dark);

    border: 1px solid rgba(23, 26, 28, 0.18);
    border-radius: 2px;

    font: inherit;
    font-size: 0.95rem;
}

.conversation-contact input:focus {
    outline: none;

    border-color: var(--color-solar-orange);
}


/* ----------------------------------------------------------
   17. CONVERSATION NAVIGATION
   ---------------------------------------------------------- */

.conversation-controls {
  max-width: 680px;

  margin-top: 3rem;
  padding-top: 1.3rem;

  display: flex;
  align-items: center;

  gap: 1rem;

  border-top: 1px solid rgba(23, 26, 28, 0.10);
}

.conversation-control {
  border: 0;

  background: transparent;

  color: rgba(23, 26, 28, 0.62);

  font: inherit;
  font-size: 0.68rem;
  font-weight: 600;

  letter-spacing: 0.1em;
  text-transform: uppercase;

  cursor: pointer;
}

.conversation-control:hover {
  color: var(--color-text-dark);
}

.conversation-control--back {
  margin-right: auto;
}

.conversation-control--skip {
  margin-left: auto;
}

.conversation-control--continue {
  min-width: 145px;
}

.conversation-control[hidden] {
  display: none !important;
}


/* ----------------------------------------------------------
   18. PROFILE — ACTIVE VISUAL LANGUAGE
   ---------------------------------------------------------- */

.conversation-profile__canvas::before {
  content: "";

  position: absolute;

  inset: 16%;

  border: 1px solid rgba(23, 26, 28, 0.035);

  transform: rotate(45deg);

  pointer-events: none;
}

.profile-node,
.profile-path,
.profile-ring {
  transition:
    fill 400ms ease,
    stroke 400ms ease,
    opacity 400ms ease,
    transform 400ms ease;
}

.conversation-profile[data-profile-stage="1"]
.profile-path--one,

.conversation-profile[data-profile-stage="2"]
.profile-path--one,

.conversation-profile[data-profile-stage="2"]
.profile-path--two,

.conversation-profile[data-profile-stage="3"]
.profile-path--one,

.conversation-profile[data-profile-stage="3"]
.profile-path--two,

.conversation-profile[data-profile-stage="3"]
.profile-path--three,

.conversation-profile[data-profile-stage="4"]
.profile-path {
  stroke: var(--color-solar-orange);
}

.conversation-profile[data-profile-stage="1"]
.profile-node--one,

.conversation-profile[data-profile-stage="2"]
.profile-node--one,

.conversation-profile[data-profile-stage="2"]
.profile-node--two,

.conversation-profile[data-profile-stage="3"]
.profile-node--one,

.conversation-profile[data-profile-stage="3"]
.profile-node--two,

.conversation-profile[data-profile-stage="3"]
.profile-node--three,

.conversation-profile[data-profile-stage="4"]
.profile-node {
  fill: var(--color-solar-orange);
}


/* ----------------------------------------------------------
   19. MOBILE INTERACTION CONTROLS
   ---------------------------------------------------------- */

@media (max-width: 600px) {

  .conversation-options {
    grid-template-columns: 1fr;

    gap: 0.65rem;

    margin-top: 1.8rem;
  }

  .conversation-option {
    min-height: 62px;

    padding: 1rem 1.1rem;

    font-size: 0.86rem;
  }

  .conversation-range {
    margin-top: 2.3rem;
  }

  .conversation-location {
    grid-template-columns: 1fr;

    gap: 0.6rem;
  }

  .conversation-location label:not(:first-child) {
    margin-top: 1rem;
  }

  .conversation-controls {
    margin-top: 2.3rem;

    flex-wrap: wrap;
  }

  .conversation-control--continue {
    width: 100%;

    order: 3;

    margin-top: 0.5rem;
  }

}

/* ============================================================
   SECTION 02 — FINAL ENERGY PROFILE REVEAL
   ============================================================ */

.profile-reveal {
    width: min(100%, 680px);
    margin-top: 2.2rem;
    margin-bottom: 2rem;
}

.profile-reveal__diagram {
    position: relative;

    display: grid;
    grid-template-columns: 1fr 70px 1fr;
    grid-template-areas:
        "bill junction grid"
        ". objective ."
        ". property ."
        ". roof ."
        ". location .";

    align-items: center;

    width: 100%;
    min-height: 380px;

    padding: 1.6rem 0 1.2rem;
}


/* ------------------------------------------------------------
   PROFILE ITEMS
   ------------------------------------------------------------ */

.profile-reveal__item {
    position: relative;

    color: var(--color-text-dark);

    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.35;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.profile-reveal__item--bill {
    grid-area: bill;
    text-align: right;

    padding-right: 28px;
}

.profile-reveal__item--grid {
    grid-area: grid;
    text-align: left;

    padding-left: 28px;
}

.profile-reveal__item--objective {
    grid-area: objective;

    margin-top: 3.2rem;

    text-align: center;
}

.profile-reveal__item--property {
    grid-area: property;

    margin-top: 2.4rem;

    text-align: center;
}

.profile-reveal__item--roof {
    grid-area: roof;

    margin-top: 2.4rem;

    text-align: center;
}

.profile-reveal__item--location {
    grid-area: location;

    margin-top: 2.4rem;

    text-align: center;
}


/* ------------------------------------------------------------
   ENGINEERING NODES
   ------------------------------------------------------------ */

.profile-reveal__item::after {
    content: "";

    position: absolute;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--color-solar-orange);
}

.profile-reveal__item--bill::after {
    right: 8px;
    top: 50%;

    transform: translateY(-50%);
}

.profile-reveal__item--grid::after {
    left: 8px;
    top: 50%;

    transform: translateY(-50%);
}

.profile-reveal__item--objective::after,
.profile-reveal__item--property::after,
.profile-reveal__item--roof::after,
.profile-reveal__item--location::after {
    left: 50%;
    bottom: -17px;

    transform: translateX(-50%);
}


/* ------------------------------------------------------------
   CENTRAL CONVERGENCE NODE
   ------------------------------------------------------------ */

.profile-reveal__diagram::before {
    content: "";

    position: absolute;

    left: 50%;
    top: 88px;

    width: 11px;
    height: 11px;

    transform: translateX(-50%);

    border-radius: 50%;

    background: var(--color-solar-orange);

    box-shadow:
        0 0 0 7px rgba(208, 98, 38, 0.08),
        0 0 0 15px rgba(208, 98, 38, 0.035);
}


/* ------------------------------------------------------------
   CENTRAL ENGINEERING AXIS
   ------------------------------------------------------------ */

.profile-reveal__diagram::after {
    content: "";

    position: absolute;

    left: 50%;
    top: 99px;
    bottom: 24px;

    width: 1px;

    transform: translateX(-50%);

    background: rgba(23, 26, 28, 0.16);
}


/* ------------------------------------------------------------
   TOP CONNECTING LINES
   ------------------------------------------------------------ */

.profile-reveal__item--bill::before,
.profile-reveal__item--grid::before {
    content: "";

    position: absolute;

    top: 50%;

    width: 72px;
    height: 1px;

    background: rgba(208, 98, 38, 0.7);
}

.profile-reveal__item--bill::before {
    right: -54px;

    transform: rotate(28deg);
    transform-origin: right center;
}

.profile-reveal__item--grid::before {
    left: -54px;

    transform: rotate(-28deg);
    transform-origin: left center;
}


/* ------------------------------------------------------------
   CONSULTANT RESPONSE
   ------------------------------------------------------------ */

.profile-reveal__consultant {
    max-width: 620px;

    margin: 0;
    padding-top: 1.5rem;

    border-top: 1px solid rgba(23, 26, 28, 0.12);

    color: rgba(23, 26, 28, 0.72);

    font-size: 0.92rem;
    line-height: 1.7;
}


/* ------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------ */

@media (max-width: 600px) {

    .profile-reveal__diagram {
        display: flex;
        flex-direction: column;

        align-items: flex-start;

        min-height: 0;

        padding: 1rem 0;

        gap: 1rem;
    }

    .profile-reveal__item--bill,
    .profile-reveal__item--grid,
    .profile-reveal__item--objective,
    .profile-reveal__item--property,
    .profile-reveal__item--roof,
    .profile-reveal__item--location {
        margin-top: 0;

        padding-left: 18px;
        padding-right: 0;

        text-align: left;
    }

    .profile-reveal__item::after,
    .profile-reveal__item--bill::after,
    .profile-reveal__item--grid::after,
    .profile-reveal__item--objective::after,
    .profile-reveal__item--property::after,
    .profile-reveal__item--roof::after,
    .profile-reveal__item--location::after {
        left: 0;
        right: auto;
        top: 50%;
        bottom: auto;

        transform: translateY(-50%);
    }

    .profile-reveal__item::before,
    .profile-reveal__diagram::before,
    .profile-reveal__diagram::after {
        display: none;
    }
}

/* ============================================================
   SECTION 02 — ETECH HANDOFF
   ============================================================ */

.conversation-handoff {
    display: flex;
    align-items: stretch;
    gap: 0.8rem;

    margin-top: 1.5rem;
}

.conversation-handoff__evaluation,
.conversation-handoff__whatsapp {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 48px;
    padding: 0.85rem 1.35rem;

    border: 0;
    border-radius: 2px;

    font: inherit;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;

    cursor: pointer;
}

.conversation-handoff__whatsapp {
    background-color: #171a1c !important;
    color: #ffffff !important;

    border: 1px solid #171a1c !important;

    transition:
        background-color 180ms ease,
        transform 180ms ease;
}

.conversation-handoff__whatsapp:hover {
    transform: translateY(-1px);
}

@media (max-width: 600px) {
    .conversation-handoff {
        flex-direction: column;
    }

    .conversation-handoff__evaluation,
    .conversation-handoff__whatsapp {
        width: 100%;
    }
}

/* Section 3 — Energy pulse */
.section3-energy-pulse {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-solar-orange);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
}

@keyframes section3-energy-pulse-capture {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%);
  }

  41% {
    opacity: 1;
    transform: translate(calc(-50% + 61px), calc(-50% + 188px));
  }

  42%,
  100% {
    opacity: 0;
    transform: translate(calc(-50% + 61px), calc(-50% + 188px));
  }
}

.section3-energy-pulse {
  animation: section3-energy-pulse-capture 4.8s linear infinite;
}

.section3-energy-pulse-horizontal {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-solar-orange);
  left: calc(50% + 61px);
  top: calc(50% + 188px);
  transform: translate(-50%, -50%);
  z-index: 5;
}

@keyframes section3-energy-pulse-horizontal {
  0%,
  41% {
    opacity: 0;
    transform: translate(-50%, -50%);
  }

  42% {
    opacity: 1;
    transform: translate(-50%, -50%);
  }

  83% {
    opacity: 1;
    transform: translate(calc(-50% + 320px), -50%);
  }

  84%,
  100% {
    opacity: 0;
    transform: translate(calc(-50% + 320px), -50%);
  }
}

.section3-energy-pulse-horizontal {
  animation: section3-energy-pulse-horizontal 4.8s linear infinite;
}

.section3-energy-guide {
  position: absolute;
  left: 50%;
  top: 50%;

  width: 180px;
  height: 1px;

  background: var(--color-solar-orange);

  transform-origin: left center;
  transform: rotate(72deg);

  z-index: 1;
}

.section3-monitoring__stand {
  position: relative;
  width: 90px;
  height: 26px;
  margin: calc(7rem - 1px) auto 0;
}

.section3-monitoring__stand::before {
  content: "";
  position: absolute;

  left: 50%;
  top: 0;

  width: 1px;
  height: 18px;

  background: var(--color-solar-orange);

  transform: translateX(-50%);
}

.section3-monitoring__stand::after {
    content: "";
    position: absolute;

    left: 50%;
    top: 18px;

    width: 110px;
    height: 1px;

    background: var(--color-solar-orange);

    transform: translateX(-50%);
}

.section3-monitoring__flow-pulse {
  position: absolute;

  top: calc(50% + 1.35rem);
  left: 14%;

  width: 8px;
  height: 8px;

  border-radius: 50%;
  background: var(--color-solar-orange);

  transform: translate(-50%, -50%);
  z-index: 5;
}

.section3-monitoring__flow-pulse {
  animation: section3-monitoring-flow 4.8s linear infinite alternate;
}

@keyframes section3-monitoring-flow {
  0% {
    left: 14%;
    opacity: 0;
  }

  5% {
    opacity: 1;
  }

  95% {
    opacity: 1;
  }

  100% {
    left: 86%;
    opacity: 0;
  }
}

/* =========================================================
   ETECH BRAND CONCEPT — INTEGRATED ENERGY
   Technology + Energy + Solar = Integrated Solution
   ========================================================= */

.brand-concept {
    background: #f2f2f0;
    color: #1f2326;
    padding: 90px 6vw 80px;
}

.brand-concept__inner {
    width: min(1280px, 100%);
    margin: 0 auto;

    display: grid;
    grid-template-columns:
        minmax(150px, 1fr)
        auto
        minmax(150px, 1fr)
        auto
        minmax(150px, 1fr)
        auto
        minmax(170px, 1.1fr);

    align-items: center;
    gap: 24px;
}

.brand-concept__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.brand-concept__item strong {
    margin-top: 18px;
    font-size: 13px;
    letter-spacing: 0.14em;
    font-weight: 700;
}

.brand-concept__operator {
    color: #d96b2b;
    font-size: 34px;
    font-weight: 500;
    line-height: 1;
}

.brand-concept__icon {
    position: relative;
    width: 92px;
    height: 92px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #d96b2b;
}

.brand-concept__item:last-child .brand-concept__icon {
    transform: translateY(6px) scale(1.10);
}


/* TECHNOLOGY */

.brand-concept__icon--technology {
    width: 120px;
    height: 120px;
    border: none;
    border-radius: 0;
}

.brand-concept__technology-image {
    display: block;
    width: 120px;
    height: 120px;
    object-fit: contain;
}

.brand-concept__icon--energy {
    width: 120px;
    height: 120px;
}

.brand-concept__energy-image {
    display: block;
    width: 120px;
    height: 120px;
    object-fit: contain;
}

.brand-concept__icon--solar {
    width: 120px;
    height: 120px;
}

.brand-concept__solar-image {
    display: block;
    width: 120px;
    height: 120px;
    object-fit: contain;
}

.brand-concept__icon--technology span {
    position: absolute;
    left: 26px;
    width: 46px;
    height: 3px;
    background: #d96b2b;
}

.brand-concept__icon--technology span:nth-child(1) {
    top: 25px;
}

.brand-concept__icon--technology span:nth-child(2) {
    top: 44px;
}

.brand-concept__icon--technology span:nth-child(3) {
    top: 63px;
}

.brand-concept__icon--technology span::after {
    content: "";
    position: absolute;
    right: -5px;
    top: 50%;
    width: 10px;
    height: 10px;
    transform: translateY(-50%);
    border: 3px solid #d96b2b;
    border-radius: 50%;
    background: #f2f2f0;
}


/* ENERGY */

.brand-concept__icon--energy {
    font-size: 72px;
    line-height: 1;
    color: #d96b2b;
}





/* INTEGRATED SOLUTION */

.brand-concept__item--solution strong {
    color: #2e7d32;
}

.brand-concept__icon--solution {
    border: 3px solid #d96b2b;
    border-right: 0;
    border-radius: 50% 0 0 50%;
}

.brand-concept__icon--solution::before {
    content: "";
    position: absolute;
    right: -2px;
    top: 14px;

    width: 28px;
    height: 62px;

    background: #d96b2b;

    clip-path: polygon(
        55% 0,
        100% 36%,
        70% 36%,
        100% 72%,
        60% 72%,
        80% 100%,
        0 54%,
        34% 54%,
        4% 20%,
        42% 20%
    );
}

.brand-concept__icon--solution span {
    position: absolute;
    left: 24px;
    width: 42px;
    height: 3px;
    background: #d96b2b;
}

.brand-concept__icon--solution span:nth-child(1) {
    top: 23px;
}

.brand-concept__icon--solution span:nth-child(2) {
    top: 41px;
}

.brand-concept__icon--solution span:nth-child(3) {
    top: 59px;
}

.brand-concept__icon--solution span::after {
    content: "";
    position: absolute;
    right: -5px;
    top: 50%;
    width: 9px;
    height: 9px;
    transform: translateY(-50%);
    border: 3px solid #d96b2b;
    border-radius: 50%;
    background: #f2f2f0;
}

.brand-concept__icon--solution::after {
    content: "";
    position: absolute;

    left: 24px;
    bottom: 3px;

    width: 58px;
    height: 28px;

    background:
        linear-gradient(
            90deg,
            #2e7d32 0 22%,
            transparent 22% 26%,
            #2e7d32 26% 48%,
            transparent 48% 52%,
            #2e7d32 52% 74%,
            transparent 74% 78%,
            #2e7d32 78% 100%
        );

    transform: skewX(-18deg);
    opacity: 0.9;
}


/* SUPPORTING MESSAGE */

.brand-concept__statement {
    width: min(820px, 100%);
    margin: 58px auto 0;

    text-align: center;
    font-size: 18px;
    line-height: 1.55;
    color: #555b5e;
}

.brand-concept__statement strong {
    color: #1f2326;
    font-weight: 700;
}

/* Use approved eTech symbol — remove old CSS-generated artwork */

.brand-concept__icon--solution {
    width: 120px;
height: 120px;
    border: none;
    border-radius: 0;
}

.brand-concept__icon--solution::before,
.brand-concept__icon--solution::after {
    display: none;
}

.brand-concept__solution-image {
    display: block;
    width: 200px;
    height: 200px;
    object-fit: contain;
}


/* =========================================================
   SECTION 05 — REAL APPLICATIONS
   ========================================================= */

.section--proof {
    display: block;
    position: relative;
    min-height: auto;
    padding: clamp(7rem, 10vw, 10rem) clamp(2rem, 6vw, 7rem);
    background: #f3f5f4;
    overflow: hidden;
}

.section5 {
    width: min(100%, 1500px);
    margin: 0 auto;
}

.section5__intro {
    max-width: 1050px;
    margin-bottom: clamp(5rem, 8vw, 8rem);
}

.section5__eyebrow {
    display: block;
    margin-bottom: 1.4rem;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.section5__heading {
    max-width: 1000px;
    margin: 0;
    font-size: clamp(3rem, 5.8vw, 6rem);
    line-height: 0.98;
    letter-spacing: -0.045em;
    font-weight: 600;
}

.section5__intro-copy {
    max-width: 620px;
    margin: 2rem 0 0;
    font-size: clamp(1rem, 1.25vw, 1.2rem);
    line-height: 1.7;
}

.section5__applications {
    border-top: 1px solid rgba(20, 25, 24, 0.18);
}

.section5__applications {
    width: 100vw;
    margin-left: calc(50% - 50vw);
}

.section5__application {
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 6rem);
    padding: clamp(3rem, 5vw, 5rem) 0;
    border-bottom: 1px solid rgba(20, 25, 24, 0.18);
}

.section5__number {
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    color: var(--color-solar-orange);
}

.section5__application-content {
    max-width: 900px;
}

.section5__type {
    display: block;
    margin-bottom: 1rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.section5__application h3 {
    margin: 0;
    font-size: clamp(2rem, 3.3vw, 3.6rem);
    line-height: 1.05;
    letter-spacing: -0.035em;
    font-weight: 500;
}

.section5__application p {
    max-width: 700px;
    margin: 1.3rem 0 0;
    font-size: clamp(1rem, 1.15vw, 1.15rem);
    line-height: 1.7;
}

/* Section 05 — application photography */

.section5__application {
    grid-template-columns:
        90px
        minmax(0, 1fr)
        clamp(280px, 30vw, 420px);
    align-items: start;
}

.section5__application-image {
    width: 100%;
    overflow: hidden;
}

.section5__application-image img {
    display: block;
    width: 100%;
    height: clamp(210px, 22vw, 290px);
    object-fit: cover;
}

/* Section 05 — application photography */

.section5__application {
    position: relative;
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 6rem);
    align-items: start;

    min-height: 360px;
    padding: clamp(4rem, 6vw, 6rem) 0;

    overflow: hidden;
    isolation: isolate;
}

.section5__application-image {
    position: absolute;
    inset: 0;
    z-index: -2;
}

.section5__application-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.section5__application::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;

    background:
        linear-gradient(
            90deg,
            rgba(8, 14, 18, 0.94) 0%,
            rgba(8, 14, 18, 0.82) 34%,
            rgba(8, 14, 18, 0.42) 60%,
            rgba(8, 14, 18, 0.08) 100%
        );
}

.section5__application-content {
    max-width: 650px;
}

.section5__application .section5__type,
.section5__application h3,
.section5__application p {
    color: #ffffff;
}

.section5__application .section5__number {
    color: var(--color-solar-orange);
}

/* =========================================================
   SECTION 05 — MOCKUP PROPORTION TEST
   ========================================================= */

.section5__application {
    min-height: 275px;
    padding: 38px 70px;

    grid-template-columns: 70px minmax(0, 520px);
    gap: 40px;

    align-content: center;
    align-items: start;
}

.section5__application-content {
    max-width: 520px;
}

.section5__application h3 {
    font-size: clamp(2rem, 3vw, 3.15rem);
    line-height: 1.08;
    max-width: 520px;
}

.section5__application p {
    max-width: 520px;
    margin-top: 1.25rem;
    line-height: 1.55;
}

.section5__type {
    margin-bottom: 1.15rem;
}

.section5__application-image img {
    object-fit: cover;
    object-position: center center;
}

/* Keep the useful part of each photograph visible */

.section5__application:nth-child(1) .section5__application-image img {
    object-position: center 52%;
}

.section5__application:nth-child(2) .section5__application-image img {
    object-position: center 50%;
}

.section5__application:nth-child(3) .section5__application-image img {
    object-position: center 48%;
}

/* Strong left readability, open photograph on the right */

.section5__application::after {
    background:
        linear-gradient(
            90deg,
            rgba(6, 13, 18, 0.96) 0%,
            rgba(6, 13, 18, 0.90) 24%,
            rgba(6, 13, 18, 0.70) 42%,
            rgba(6, 13, 18, 0.30) 63%,
            rgba(6, 13, 18, 0.05) 100%
        );
}

/* =========================================================
   SECTION 05 — REAL PHOTO FIT REFINEMENT
   Target: second mockup proportions
   ========================================================= */

.section5__application {
    min-height: 400px;
    padding: 32px 44px;
    background: #081014;

    grid-template-columns: 62px minmax(0, 500px);
    gap: 32px;
    align-content: center;
}

/* Photograph now occupies only the right-hand portion.
   This reduces enlargement and shows more of the original photo. */
.section5__application-image {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0%;
    z-index: -2;
}

.section5__application-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;

    /* Mild clarity improvement — not artificial sharpening */
    filter: contrast(1.06) saturate(1.03);
}

/* Controlled transition from text area into photograph */
.section5__application::after {
    background:
        linear-gradient(
            90deg,
            rgba(6, 13, 18, 1) 0%,
            rgba(6, 13, 18, 0.98) 28%,
            rgba(6, 13, 18, 0.88) 38%,
            rgba(6, 13, 18, 0.62) 48%,
            rgba(6, 13, 18, 0.25) 61%,
            rgba(6, 13, 18, 0.04) 76%,
            rgba(6, 13, 18, 0) 100%
        );
}

/* Individual framing */

.section5__application:nth-child(1) .section5__application-image img {
    object-position: center 52%;
}

.section5__application:nth-child(2) .section5__application-image img {
    object-position: center 50%;
}

.section5__application:nth-child(2) .section5__application-image {
    transform: translateX(5%);
}

.section5__application:nth-child(3) .section5__application-image img {
    object-position: center 48%;
}

.section5__application:nth-child(3) .section5__application-image {
    transform: translateX(20%);
}

/* =========================================================
   SECTION 05 — CUSTOMER PROOF
   ========================================================= */

.section5__proof {
    position: relative;
    padding: clamp(6rem, 9vw, 9rem) clamp(2.5rem, 7vw, 7rem);
    background: #f3f5f4;
    color: #111817;
}

.section5__proof-header {
    max-width: 900px;
    margin-bottom: clamp(4rem, 6vw, 6rem);
}

.section5__proof-eyebrow {
    display: block;
    margin-bottom: 1.25rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-solar-orange);
}

.section5__proof-heading {
    max-width: 850px;
    margin: 0;
    font-size: clamp(2.6rem, 4.5vw, 4.8rem);
    line-height: 1;
    letter-spacing: -0.045em;
    font-weight: 600;
}

.section5__proof-intro {
    max-width: 650px;
    margin: 1.75rem 0 0;
    font-size: 1.05rem;
    line-height: 1.7;
}


/* Featured customer statement */

.section5__testimonial--featured {
    max-width: 1150px;
    padding: clamp(3rem, 5vw, 5rem) 0;
    border-top: 1px solid rgba(20, 25, 24, 0.2);
    border-bottom: 1px solid rgba(20, 25, 24, 0.2);
}

.section5__testimonial--featured blockquote {
    max-width: 1050px;
    margin: 0;
    font-size: clamp(2.2rem, 4vw, 4.25rem);
    line-height: 1.12;
    letter-spacing: -0.035em;
    font-weight: 500;
}


/* Supporting testimonials */

.section5__testimonial-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(3rem, 7vw, 7rem);
    max-width: 1150px;
    padding-top: clamp(3.5rem, 5vw, 5rem);
}

.section5__testimonial-grid .section5__testimonial {
    padding-right: clamp(1rem, 3vw, 3rem);
}

.section5__testimonial-grid blockquote {
    margin: 0;
    font-size: clamp(1.25rem, 1.7vw, 1.65rem);
    line-height: 1.55;
    letter-spacing: -0.015em;
}


/* Customer names */

.section5__testimonial-client {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-top: 2rem;
}

.section5__testimonial-client strong {
    font-size: 0.95rem;
    font-weight: 600;
}

.section5__testimonial-client span {
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.55;
}

/* Section 05 — testimonial refinement */

.section5__testimonial--featured blockquote {
    font-size: clamp(2rem, 3.5vw, 3.8rem);
}

.section5__testimonial--featured {
    padding-bottom: clamp(2.5rem, 4vw, 4rem);
}

.section5__testimonial-client {
    margin-top: 1.6rem;
}

/* ============================================================
   SECTION 06 — PEACE OF MIND
   ============================================================ */

.section--support {
    position: relative;
    padding: clamp(6rem, 10vw, 9rem) 0;
}

.support-inner {
    width: min(1180px, calc(100% - 3rem));
    margin: 0 auto;
}

.support-intro {
    max-width: 760px;
}

.support-eyebrow {
    display: inline-block;
    margin-bottom: 1.4rem;
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    opacity: 0.6;
}

.support-heading {
    margin: 0;
    font-size: clamp(2.5rem, 5vw, 5rem);
    line-height: 0.98;
    letter-spacing: -0.04em;
}

.support-today {
    margin-top: clamp(4rem, 7vw, 6rem);
    padding: clamp(2rem, 4vw, 3rem);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 24px;
}

.support-state-label {
    margin-bottom: 1rem;
}

.support-state-label span {
    font-size: 0.75rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    opacity: 0.55;
}

.support-state-content {
    max-width: 720px;
}

.support-state-content h3 {
    margin: 0 0 1rem;
    font-size: clamp(1.8rem, 3vw, 2.8rem);
    line-height: 1.08;
    letter-spacing: -0.025em;
}

.support-state-content p {
    margin: 0;
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    line-height: 1.7;
    opacity: 0.72;
}

.support-monitor {
    position: relative;
    display: flex;
    align-items: center;
    margin-top: 2.5rem;
    padding-top: 2rem;
}

.support-monitor::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.12);

}

.support-monitor-status {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.75;
}

.support-monitor-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #5f8f63;
    box-shadow: 0 0 0 4px rgba(95, 143, 99, 0.12);
}

.support-privacy {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin: clamp(3rem, 5vw, 4.5rem) 0;
    max-width: 760px;
}

.support-privacy-line {
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.12);
}

.support-privacy-message {
    margin: 0;
    font-size: clamp(0.85rem, 1.2vw, 1rem);
    line-height: 1.4;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.65;
}

.support-tomorrow {
    padding: clamp(2rem, 4vw, 3rem);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 24px;
}

.support-evolution {
    display: flex;
    align-items: center;
    margin-top: 2.5rem;
}

.support-evolution-step {
    flex: 0 0 auto;
}

.support-evolution-step span {
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.72;
}

.support-evolution-line {
    position: relative;
    flex: 1 1 32px;
    min-width: 24px;
    height: 3px;
    margin: 0 0.65rem;
    background: rgba(63, 122, 70, 0.48);
}

.support-evolution-line::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -1px;
    width: 5px;
    height: 5px;
    border-top: 1px solid rgba(255, 255, 255, 0.35);
    border-right: 1px solid rgba(255, 255, 255, 0.35);
    transform: translateY(-50%) rotate(45deg);
}

.support-next {
    margin-top: clamp(4rem, 7vw, 6rem);
    text-align: center;
}

.support-next-line {
    width: 1px;
    height: clamp(3.5rem, 6vw, 5rem);
    margin: 0 auto 2rem;
    background: rgba(20, 24, 26, 0.18);
}

.support-next-text {
    max-width: 760px;
    margin: 0 auto;
    font-size: clamp(1.5rem, 3vw, 2.6rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.support-monitor-bars {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-left: 0.35rem;
}

.support-monitor-bars span {
    display: block;
    width: clamp(28px, 3vw, 42px);
    height: 4px;
    border-radius: 999px;
    background: rgba(95, 143, 99, 0.18);
}

.support-experience {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    margin-top: clamp(4rem, 7vw, 6rem);
    border: 1px solid rgba(20, 24, 26, 0.12);
    border-radius: 24px;
    overflow: hidden;

    background-image: url("../assets/photos/section6-monitoring-background.png");
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
background-color: transparent;
}

.support-today,
.support-tomorrow {
    margin-top: 0;
    border: 0;
    border-radius: 0;
}

.support-today {
    border-right: 1px solid rgba(20, 24, 26, 0.12);
}

.support-privacy {
    max-width: none;
    margin: 3rem 0 0;
}

.support-experience {
    position: relative;
}

.support-experience::before {
    content: "";
    position: absolute;
    inset: 0;
   background: rgba(238, 241, 239, 0.47);
    pointer-events: none;
}

.support-today,
.support-tomorrow {
    position: relative;
    z-index: 1;
}

/* =========================================================
   SECTION 07 — ENERGY NEEDS
   ========================================================= */

.section--energy-needs {
    position: relative;
    background: #f4f1ea;
    color: #1f2a2f;
    padding: clamp(7rem, 11vw, 11rem) 0;
    overflow: hidden;
}

.energy-needs-inner {
    width: min(1180px, calc(100% - 48px));
    margin: 0 auto;
}

.energy-needs-intro {
    max-width: 900px;
}

.energy-needs-eyebrow {
    display: block;
    margin-bottom: 2rem;

    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;

    color: rgba(31, 42, 47, 0.58);
}

.energy-needs-kicker {
    margin: 0 0 1.35rem;

    font-size: clamp(0.82rem, 1vw, 0.95rem);
    font-weight: 600;
    letter-spacing: 0.11em;
    line-height: 1.6;
    text-transform: uppercase;

    color: rgba(31, 42, 47, 0.68);
}

.energy-needs-heading {
    margin: 0;

    max-width: 950px;

    font-size: clamp(3rem, 6.2vw, 6.4rem);
    font-weight: 400;
    line-height: 0.98;
    letter-spacing: -0.045em;

    color: #1f2a2f;
}

/* ---------------------------------------------------------
   SECTION 07 — ENERGY RELATIONSHIP
   --------------------------------------------------------- */

.energy-needs-path {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: start;
    gap: clamp(1.5rem, 3vw, 3.5rem);

    margin-top: clamp(5rem, 8vw, 8rem);
    padding: 2.5rem 0;

    border-top: 1px solid rgba(31, 42, 47, 0.16);
    border-bottom: 1px solid rgba(31, 42, 47, 0.16);
}

.energy-needs-step {
    min-width: 0;
}

.energy-needs-step-title {
    display: block;
    margin-bottom: 1rem;

    font-size: clamp(1.15rem, 1.6vw, 1.5rem);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;

    color: #1f2a2f;
}

.energy-needs-step p {
    max-width: 280px;
    margin: 0;

    font-size: clamp(0.95rem, 1.1vw, 1.05rem);
    line-height: 1.65;

    color: rgba(31, 42, 47, 0.68);
}

.energy-needs-arrow {
    align-self: center;

    font-size: 1.5rem;
    font-weight: 300;

    color: #d86a2b;
}

/* ---------------------------------------------------------
   SECTION 07 — ENERGY PROFILE INVITATION
   --------------------------------------------------------- */

.energy-needs-profile-invite {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.65fr);
    column-gap: clamp(4rem, 8vw, 8rem);
    align-items: end;

    margin-top: clamp(4.5rem, 7vw, 7rem);
}

.energy-needs-profile-invite h3 {
    grid-column: 1;
    margin: 0 0 1.5rem;

    max-width: 760px;

    font-size: clamp(2rem, 3.5vw, 3.8rem);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.035em;

    color: #1f2a2f;
}

.energy-needs-profile-invite > p {
    grid-column: 1;
    margin: 0;

    max-width: 620px;

    font-size: clamp(1rem, 1.2vw, 1.1rem);
    line-height: 1.7;

    color: rgba(31, 42, 47, 0.68);
}

.energy-needs-profile-button {
    grid-column: 2;
    grid-row: 1 / span 2;
    justify-self: end;

    display: inline-flex;
    align-items: center;
    gap: 1.4rem;

    padding: 1.15rem 1.5rem;

    border: 1px solid rgba(31, 42, 47, 0.28);
    background: transparent;

    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;

    color: #1f2a2f;
    cursor: pointer;

    transition:
        background-color 180ms ease,
        color 180ms ease,
        border-color 180ms ease;
}

.energy-needs-profile-button:hover {
    background: #1f2a2f;
    border-color: #1f2a2f;
    color: #f4f1ea;
}

.energy-needs-profile-button span:last-child {
    color: #d86a2b;
    font-size: 1.1rem;
}

.energy-needs-profile-button:hover span:last-child {
    color: inherit;
}

/* ---------------------------------------------------------
   SECTION 07 — DESKTOP COMPOSITION REFINEMENT
   --------------------------------------------------------- */

.energy-needs-path {
    margin-top: clamp(3.5rem, 5vw, 5rem);
}

.energy-needs-profile-invite {
    grid-template-columns: minmax(0, 1.3fr) minmax(280px, 0.55fr);
}

.energy-needs-profile-invite h3 {
    max-width: 820px;
}

/* =========================================================
   SECTION 07 — ENERGY PROFILE WORKSPACE
   ========================================================= */

.energy-profile {
    position: fixed;
    inset: 0;
    z-index: 2000;

    display: none;

    background: #f4f1ea;
    color: #1f2a2f;

    overflow-y: auto;
}

.energy-profile.is-open {
    display: block;
}

body.energy-profile-open {
    overflow: hidden;
}

/* =========================================================
   SECTION 07 — ENERGY PROFILE DESKTOP SHELL
   ========================================================= */

.energy-profile-shell {
    min-height: 100vh;
    padding: clamp(2rem, 3vw, 3rem) clamp(2rem, 4vw, 4.5rem) clamp(3rem, 5vw, 5rem);
}

.energy-profile-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding-bottom: 1.5rem;
    margin-bottom: clamp(3rem, 5vw, 5rem);

    border-bottom: 1px solid rgba(31, 42, 47, 0.14);
}

.energy-profile-label {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;

    color: rgba(31, 42, 47, 0.62);
}

.energy-profile-close {
    width: 44px;
    height: 44px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(31, 42, 47, 0.22);
    background: transparent;

    font: inherit;
    font-size: 1.6rem;
    font-weight: 300;
    line-height: 1;

    color: #1f2a2f;
    cursor: pointer;

    transition:
        background-color 180ms ease,
        color 180ms ease,
        border-color 180ms ease;
}

.energy-profile-close:hover {
    background: #1f2a2f;
    border-color: #1f2a2f;
    color: #f4f1ea;
}

.energy-profile-content {
    width: min(1180px, 100%);
    margin: 0 auto;
}

.energy-profile-intro {
    max-width: 900px;
}

.energy-profile-kicker {
    margin: 0 0 1rem;

    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;

    color: rgba(31, 42, 47, 0.58);
}

.energy-profile-heading {
    margin: 0;

    max-width: 980px;

    font-size: clamp(3.2rem, 6vw, 6rem);
    font-weight: 400;
    line-height: 0.98;
    letter-spacing: -0.045em;

    color: #1f2a2f;
}

.energy-profile-description {
    margin: 1.75rem 0 0;

    max-width: 680px;

    font-size: clamp(1rem, 1.2vw, 1.1rem);
    line-height: 1.7;

    color: rgba(31, 42, 47, 0.68);
}

.energy-profile-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.65fr);
    gap: clamp(3rem, 6vw, 6rem);

    margin-top: clamp(4rem, 7vw, 7rem);
    padding-top: clamp(2.5rem, 4vw, 4rem);

    border-top: 1px solid rgba(31, 42, 47, 0.14);
}

.energy-profile-categories {
    min-height: 280px;
}

.energy-profile-placeholder {
    display: flex;
    align-items: center;

    min-height: 280px;

    padding: 2rem;

    border: 1px dashed rgba(31, 42, 47, 0.22);
}

.energy-profile-placeholder span {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;

    color: rgba(31, 42, 47, 0.48);
}

.energy-profile-summary {
    align-self: start;

    padding: 2rem;

    border: 1px solid rgba(31, 42, 47, 0.18);
}

.energy-profile-summary-label {
    display: block;

    margin-bottom: 1.25rem;

    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;

    color: rgba(31, 42, 47, 0.56);
}

.energy-profile-summary-value {
    display: block;

    margin-bottom: 1rem;

    font-size: clamp(2.4rem, 4vw, 4rem);
    font-weight: 400;
    line-height: 1;

    color: #1f2a2f;
}

.energy-profile-summary-note {
    margin: 0;

    font-size: 0.95rem;
    line-height: 1.65;

    color: rgba(31, 42, 47, 0.64);
}

/* ---------------------------------------------------------
   SECTION 07 — ENERGY PROFILE CATEGORY SELECTION
   --------------------------------------------------------- */

.energy-profile-categories-header {
    margin-bottom: 2rem;
}

.energy-profile-categories-label {
    display: block;

    margin-bottom: 0.9rem;

    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;

    color: rgba(31, 42, 47, 0.52);
}

.energy-profile-categories-heading {
    margin: 0;

    max-width: 650px;

    font-size: clamp(1.7rem, 2.8vw, 2.8rem);
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: -0.025em;

    color: #1f2a2f;
}

.energy-profile-category-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    border-top: 1px solid rgba(31, 42, 47, 0.16);
    border-left: 1px solid rgba(31, 42, 47, 0.16);
}

.energy-profile-category {
    position: relative;

    min-height: 150px;
    padding: 1.5rem;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.5rem;

    text-align: left;

    border: 0;
    border-right: 1px solid rgba(31, 42, 47, 0.16);
    border-bottom: 1px solid rgba(31, 42, 47, 0.16);

    background: transparent;
    color: #1f2a2f;

    cursor: pointer;

    transition:
        background-color 180ms ease,
        color 180ms ease;
}

.energy-profile-category:hover {
    background: rgba(31, 42, 47, 0.045);
}

.energy-profile-category.is-selected {
    background: #1f2a2f;
    color: #f4f1ea;
}

.energy-profile-category-title {
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.energy-profile-category-text {
    max-width: 280px;

    font-size: 0.94rem;
    line-height: 1.55;

    color: rgba(31, 42, 47, 0.62);
}

.energy-profile-category.is-selected .energy-profile-category-text {
    color: rgba(244, 241, 234, 0.72);
}

.energy-profile-category::after {
    content: "+";

    position: absolute;
    top: 1.3rem;
    right: 1.4rem;

    font-size: 1.1rem;
    font-weight: 300;

    color: #d86a2b;
}

.energy-profile-category.is-selected::after {
    content: "✓";
}

/* ---------------------------------------------------------
   SECTION 07 — ENERGY PROFILE CONTINUE
   --------------------------------------------------------- */

.energy-profile-category-actions {
    display: flex;
    justify-content: flex-end;

    margin-top: 2rem;
}

.energy-profile-continue {
    min-width: 220px;

    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;

    padding: 1.15rem 1.4rem;

    border: 1px solid #1f2a2f;
    background: #1f2a2f;

    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;

    color: #f4f1ea;
    cursor: pointer;

    transition:
        opacity 180ms ease,
        background-color 180ms ease,
        color 180ms ease;
}

.energy-profile-continue span:last-child {
    color: #d86a2b;
    font-size: 1.05rem;
}

.energy-profile-continue:disabled {
    opacity: 0.28;
    cursor: default;
}

.energy-profile-continue:not(:disabled):hover {
    background: transparent;
    color: #1f2a2f;
}

/* ---------------------------------------------------------
   SECTION 07 — ENERGY PROFILE QUESTIONNAIRE
   --------------------------------------------------------- */

.energy-profile-questionnaire {
    min-height: 420px;
}

.energy-profile-questionnaire-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 2.5rem;
}

.energy-profile-back {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;

    padding: 0;

    border: 0;
    background: transparent;

    font: inherit;
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;

    color: rgba(31, 42, 47, 0.62);
    cursor: pointer;
}

.energy-profile-questionnaire-step {
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.1em;

    color: rgba(31, 42, 47, 0.48);
}

.energy-profile-question-label {
    display: block;
    margin-bottom: 1rem;

    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;

    color: #d86a2b;
}

.energy-profile-question h3 {
    margin: 0 0 2.5rem;

    max-width: 650px;

    font-size: clamp(2rem, 3.4vw, 3.4rem);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.03em;

    color: #1f2a2f;
}

.energy-profile-counter {
    display: inline-grid;
    grid-template-columns: 52px 72px 52px;
    align-items: center;

    margin-bottom: 3rem;

    border: 1px solid rgba(31, 42, 47, 0.22);
}

.energy-profile-counter button,
.energy-profile-counter span {
    height: 52px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.energy-profile-counter button {
    border: 0;
    background: transparent;

    font: inherit;
    font-size: 1.3rem;

    color: #1f2a2f;
    cursor: pointer;
}

.energy-profile-counter span {
    border-left: 1px solid rgba(31, 42, 47, 0.18);
    border-right: 1px solid rgba(31, 42, 47, 0.18);

    font-size: 1rem;
    font-weight: 600;
}

.energy-profile-use-block {
    margin-bottom: 2.5rem;
}

.energy-profile-use-label {
    display: block;
    margin-bottom: 1rem;

    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;

    color: rgba(31, 42, 47, 0.56);
}

.energy-profile-use-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.energy-profile-use-options button {
    min-width: 90px;

    padding: 0.9rem 1.1rem;

    border: 1px solid rgba(31, 42, 47, 0.22);
    background: transparent;

    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.06em;

    color: #1f2a2f;
    cursor: pointer;
}

.energy-profile-use-options button.is-selected {
    background: #1f2a2f;
    border-color: #1f2a2f;
    color: #f4f1ea;
}

.energy-profile-question-next {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;

    min-width: 190px;
    padding: 1rem 1.2rem;

    border: 1px solid #1f2a2f;
    background: #1f2a2f;

    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;

    color: #f4f1ea;
    cursor: pointer;
}

.energy-profile-question-next span:last-child {
    color: #d86a2b;
}

.energy-profile-question-next:disabled {
    opacity: 0.28;
    cursor: default;
}

/* ENERGY PROFILE — ENFORCE HIDDEN STATES */

.energy-profile-questionnaire[hidden],
.energy-profile-categories[hidden] {
    display: none !important;
}

/* ---------------------------------------------------------
   SECTION 07 — ENERGY PROFILE APPLIANCE SELECTION
   --------------------------------------------------------- */

.energy-profile-question-instruction {
    margin: -1.25rem 0 2rem;

    max-width: 620px;

    font-size: 0.95rem;
    line-height: 1.6;

    color: rgba(31, 42, 47, 0.62);
}

.energy-profile-question-panel[hidden] {
    display: none !important;
}

.energy-profile-appliance-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    margin-bottom: 2.5rem;

    border-top: 1px solid rgba(31, 42, 47, 0.16);
    border-left: 1px solid rgba(31, 42, 47, 0.16);
}

.energy-profile-appliance {
    position: relative;

    min-height: 110px;
    padding: 1.35rem 3rem 1.35rem 1.35rem;

    display: flex;
    align-items: flex-end;

    text-align: left;

    border: 0;
    border-right: 1px solid rgba(31, 42, 47, 0.16);
    border-bottom: 1px solid rgba(31, 42, 47, 0.16);

    background: transparent;
    color: #1f2a2f;

    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0.06em;
    text-transform: uppercase;

    cursor: pointer;

    transition:
        background-color 180ms ease,
        color 180ms ease;
}

.energy-profile-appliance:hover {
    background: rgba(31, 42, 47, 0.045);
}

.energy-profile-appliance::after {
    content: "+";

    position: absolute;
    top: 1.15rem;
    right: 1.25rem;

    font-size: 1.05rem;
    font-weight: 300;

    color: #d86a2b;
}

.energy-profile-appliance.is-selected {
    background: #1f2a2f;
    color: #f4f1ea;
}

.energy-profile-appliance.is-selected::after {
    content: "✓";
}


/* OTHER EQUIPMENT */

.energy-profile-other-label {
    display: block;

    margin-bottom: 1rem;

    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;

    color: rgba(31, 42, 47, 0.58);
}

.energy-profile-other-input {
    width: 100%;
    min-height: 130px;

    margin-bottom: 2.5rem;
    padding: 1.25rem;

    resize: vertical;

    border: 1px solid rgba(31, 42, 47, 0.22);
    border-radius: 0;

    background: transparent;
    color: #1f2a2f;

    font: inherit;
    font-size: 1rem;
    line-height: 1.6;

    outline: none;

    transition: border-color 180ms ease;
}

.energy-profile-other-input:focus {
    border-color: #d86a2b;
}

/* ---------------------------------------------------------
   SECTION 07 — ENERGY PROFILE FOLLOW-UP QUESTIONS
   --------------------------------------------------------- */

.energy-profile-follow-up {
    margin-bottom: 2.5rem;
}

.energy-profile-follow-up-heading {
    margin: 0 0 1.75rem;

    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.1em;
    text-transform: uppercase;

    color: rgba(31, 42, 47, 0.58);
}

.energy-profile-follow-up-list {
    border-top: 1px solid rgba(31, 42, 47, 0.16);
}

.energy-profile-follow-up-item {
    padding: 1.5rem 0;

    border-bottom: 1px solid rgba(31, 42, 47, 0.16);
}

.energy-profile-follow-up-label {
    display: block;

    margin-bottom: 1rem;

    font-size: 0.84rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.06em;
    text-transform: uppercase;

    color: #1f2a2f;
}

.energy-profile-follow-up-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.energy-profile-follow-up-options button {
    padding: 0.8rem 1rem;

    border: 1px solid rgba(31, 42, 47, 0.22);
    background: transparent;

    font: inherit;
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.04em;
    text-transform: uppercase;

    color: #1f2a2f;
    cursor: pointer;

    transition:
        background-color 180ms ease,
        border-color 180ms ease,
        color 180ms ease;
}

.energy-profile-follow-up-options button:hover {
    background: rgba(31, 42, 47, 0.045);
}

.energy-profile-follow-up-options button.is-selected {
    background: #1f2a2f;
    border-color: #1f2a2f;
    color: #f4f1ea;
}

/* ---------------------------------------------------------
   SECTION 07 — ENERGY PROFILE APPLIANCE QUANTITIES
   --------------------------------------------------------- */

.energy-profile-quantity {
    margin-bottom: 2.5rem;
}

.energy-profile-quantity-list {
    border-top: 1px solid rgba(31, 42, 47, 0.16);
}

.energy-profile-quantity-item {
    min-height: 84px;
    padding: 1rem 0;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;

    border-bottom: 1px solid rgba(31, 42, 47, 0.16);
}

.energy-profile-quantity-label {
    font-size: 0.84rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.06em;
    text-transform: uppercase;

    color: #1f2a2f;
}

.energy-profile-quantity-counter {
    flex: 0 0 auto;

    display: grid;
    grid-template-columns: 44px 58px 44px;

    border: 1px solid rgba(31, 42, 47, 0.22);
}

.energy-profile-quantity-counter button,
.energy-profile-quantity-counter span {
    height: 44px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.energy-profile-quantity-counter button {
    border: 0;
    background: transparent;

    font: inherit;
    font-size: 1.1rem;

    color: #1f2a2f;
    cursor: pointer;
}

.energy-profile-quantity-counter span {
    border-left: 1px solid rgba(31, 42, 47, 0.18);
    border-right: 1px solid rgba(31, 42, 47, 0.18);

    font-size: 0.9rem;
    font-weight: 600;
}

.energy-profile-quantity-counter button:hover {
    background: rgba(31, 42, 47, 0.045);
}

/* ---------------------------------------------------------
   SECTION 07 — ENERGY PROFILE FINAL RESULT
   --------------------------------------------------------- */

.energy-profile-result[hidden] {
    display: none !important;
}

.energy-profile-result {
    padding: 3.5rem 0 4rem;
    max-width: 760px;
}

.energy-profile-result-kicker {
    display: block;
    margin-bottom: 1.5rem;

    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.12em;
    text-transform: uppercase;

    color: #d86a2b;
}

.energy-profile-result-heading {
    margin: 0 0 3rem;

    font-size: clamp(2rem, 4vw, 3.8rem);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.035em;

    color: #1f2a2f;
}

.energy-profile-result-total {
    padding: 2rem 0;

    border-top: 1px solid rgba(31, 42, 47, 0.18);
    border-bottom: 1px solid rgba(31, 42, 47, 0.18);
}

.energy-profile-result-total-label {
    display: block;
    margin-bottom: 1rem;

    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;

    color: rgba(31, 42, 47, 0.58);
}

.energy-profile-result-total strong {
    display: block;

    font-size: clamp(2.8rem, 6vw, 5rem);
    font-weight: 400;
    line-height: 1;

    color: #1f2a2f;
}

.energy-profile-result-copy {
    max-width: 620px;
    margin: 2rem 0 0;

    font-size: 1rem;
    line-height: 1.7;

    color: rgba(31, 42, 47, 0.7);
}

/* ---------------------------------------------------------
   SECTION 07 — ENERGY PROFILE RESULT ACTIONS
   --------------------------------------------------------- */

.energy-profile-result-next {
    margin-top: 3.5rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(31, 42, 47, 0.16);
}

.energy-profile-result-next-copy {
    max-width: 650px;
    margin: 0 0 2rem;

    font-size: 0.95rem;
    line-height: 1.7;

    color: rgba(31, 42, 47, 0.68);
}

.energy-profile-result-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.energy-profile-result-action {
    min-height: 54px;
    padding: 0.95rem 1.4rem;

    border: 1px solid rgba(31, 42, 47, 0.24);
    background: transparent;

    font: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.06em;
    text-transform: uppercase;

    color: #1f2a2f;

    cursor: pointer;

    transition:
        background-color 180ms ease,
        border-color 180ms ease,
        color 180ms ease;
}

.energy-profile-result-action:hover {
    background: rgba(31, 42, 47, 0.045);
}

.energy-profile-result-action--primary {
    border-color: #1f2a2f;
    background: #1f2a2f;
    color: #f4f1ea;
}

.energy-profile-result-action--primary:hover {
    background: #2b373c;
    border-color: #2b373c;
}

.energy-profile-result-action--quiet {
    border-color: transparent;
    color: rgba(31, 42, 47, 0.62);
}

.energy-profile-result-action--quiet:hover {
    background: transparent;
    color: #1f2a2f;
}

/* ---------------------------------------------------------
   SECTION 02 — COMPLETED PROFILE PULSE
---------------------------------------------------------- */

.conversation-profile.is-pulsing {
  animation: etech-profile-pulse 3.6s ease-in-out infinite;
  transform-origin: center;
}

@keyframes etech-profile-pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.045);
    opacity: 0.78;
  }
}

/* ---------------------------------------------------------
   SECTION 02 — CONTACT / CONSULTATION VISUAL
---------------------------------------------------------- */

.conversation-step[data-step="contactDetails"] .conversation-contact-visual {
  position: absolute;
  left: calc(100% + clamp(2rem, 4vw, 5rem));
  top: 50%;
  width: min(50vw, 820px);
  max-width: none;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 2;
}

.conversation-contact-visual__image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* Section 02 — hide profile graphic on contact-details step */
.conversation-profile[hidden] {
  display: none !important;
}

/* SECTION 02 — FINAL CONFIRMATION VISUAL */

.conversation-step[data-step="confirmation"] .conversation-confirmation-visual {
  position: absolute;
  left: calc(100% + clamp(2rem, 4vw, 5rem));
  top: 50%;
  width: min(50vw, 820px);
  max-width: none;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 2;
}

.conversation-confirmation-visual__image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* SECTION 02 — FINAL CONFIRMATION VISUAL LANGUAGE */

html[lang="en"] .conversation-confirmation-visual__image--en {
  display: block;
}

html[lang="en"] .conversation-confirmation-visual__image--es {
  display: none;
}

html[lang="es"] .conversation-confirmation-visual__image--en {
  display: none;
}

html[lang="es"] .conversation-confirmation-visual__image--es {
  display: block;
}

/* SECTION 02 — HIDE PROFILE CANVAS ON CONTACT + CONFIRMATION */

.conversation-step[data-step="contactDetails"]:not([hidden])
  ~ .conversation-profile,
.conversation-step[data-step="confirmation"]:not([hidden])
  ~ .conversation-profile {
  display: none !important;
}

/* =========================================================
   SECTION 03 — INTEGRATED ENERGY FLOW
   ========================================================= */

.section3-flow {
  position: relative;
  width: min(64vw, 980px);
  margin-left: 0;
  margin-top: 1rem;
  padding-bottom: clamp(4rem, 8vw, 8rem);

  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.section3-flow__item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(260px, 1.6fr) minmax(190px, 1fr);
  align-items: center;
  column-gap: clamp(0.5rem, 1.2vw, 1.5rem);
  min-height: clamp(250px, 24vw, 360px);
}

.section3-flow__visual {
  position: relative;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.section3-flow__image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  margin: 0 auto 0 0;
}

.section3-flow__copy {
  position: relative;
  z-index: 2;
  left: 0;
  top: 8rem;
}

.section3-flow__copy > span {
  display: block;
  margin-bottom: 0.75rem;
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.section3-flow__copy > strong {
  display: block;
  margin-bottom: 1rem;
  color: var(--ink);
  font-size: clamp(1.6rem, 2vw, 2.25rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02em;
}

.section3-flow__copy > p {
  max-width: 220px;
  margin: 0;
  color: var(--muted);
  font-size: clamp(0.95rem, 1.1vw, 1.15rem);
  line-height: 1.5;
}

/* SECTION 03 — ENERGY PATH */

.section3-energy-path {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.section3-flow__item {
  z-index: 2;
}

.section3-energy-path::before {
  content: "";
  position: absolute;

  top: 25%;
  left: 18%;
  width: 42%;

  height: 3px;
  background: var(--color-solar-orange);

  border-radius: 999px;
}

.section3-energy-path::after {
  content: "";
  position: absolute;

  top: 68%;
  left: 18%;
  width: 42%;

  height: 3px;
  background: var(--color-solar-orange);

  border-radius: 999px;
}

.section3-energy-path__vertical {
  position: absolute;
  z-index: 1;

  left: 72%;
  top: 25%;
  height: 43%;

  width: 3px;
  background: var(--color-solar-orange);
  border-radius: 999px;
}

/* SECTION 03 — MOVING ENERGY NODE */

.section3-energy-node {
  position: absolute;
  z-index: 3;

  width: 14px;
  height: 14px;
  border-radius: 50%;

  background: var(--color-solar-orange);

  box-shadow:
    0 0 8px rgba(232, 103, 35, 0.75),
    0 0 18px rgba(232, 103, 35, 0.35);

  transform: translate(-50%, -50%);

  animation: section3-energy-node-flow 8s linear infinite;
}

@keyframes section3-energy-node-flow {
  0% {
    left: 18%;
    top: 25%;
  }

  30% {
    left: 72%;
    top: 25%;
  }

  60% {
    left: 72%;
    top: 68%;
  }

  100% {
    left: 18%;
    top: 68%;
  }
}

/* SECTION 03 — RIGHT COLUMN ALIGNMENT */

.section3-flow__item--manage,
.section3-flow__item--backup {
  left: 3rem;
}

.section3-flow__item--store {
  left: 3rem;
}

/* SECTION 03 — EXPANDED BACKUP */

.section3-backup-expanded {
  width: min(70vw, 880px);
  margin: clamp(3rem, 6vw, 6rem) auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: clamp(2rem, 4vw, 5rem);
}

.section3-backup-expanded__image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.section3-backup-expanded__header {
  grid-column: 1 / -1;
  text-align: center;
  margin-bottom: clamp(1rem, 2vw, 2rem);
}

.section3-backup-expanded__header > span {
  display: block;
  margin-bottom: 0.75rem;
  color: var(--color-solar-orange);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.section3-backup-expanded__header > h3 {
  margin: 0 0 0.9rem;
  color: var(--ink);
  font-size: clamp(1.8rem, 2.5vw, 2.6rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.04em;
}

.section3-backup-expanded__header > p {
  margin: 0 auto;
  max-width: 700px;
  color: var(--muted);
  font-size: clamp(1rem, 1.2vw, 1.2rem);
  line-height: 1.5;
}

.section3-backup-expanded__grid {
  grid-column: 1;
  min-width: 0;
}

.section3-backup-expanded__active {
  grid-column: 2;
  min-width: 0;
}

/* SECTION 03 — EXPANDED BACKUP — RIGHT COPY */

.section3-backup-expanded__active-copy {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 1.5rem;
  margin-top: 0;
}

.section3-backup-expanded__backup-copy,
.section3-backup-expanded__loads-copy {
  min-width: 0;
}

.section3-backup-expanded__backup-copy strong,
.section3-backup-expanded__loads-copy strong {
  display: block;
  margin-bottom: 0.35rem;
}

.section3-backup-expanded__backup-copy p,
.section3-backup-expanded__loads-copy p {
  margin: 0;
  line-height: 1.45;
}

/* SECTION 03 — EXPANDED BACKUP — ENERGY PATH */

.section3-backup-expanded {
  position: relative;
}

.section3-backup-expanded__path {
  position: absolute;
  left: 0;
  top: 150px;
  width: 100%;
  height: 400px;
  pointer-events: none;
  overflow: visible;
  z-index: 3;
}

.section3-backup-expanded__path-line {
  fill: none;
  stroke: var(--color-solar-orange);
  stroke-width: 5;
  stroke-linecap: round;
  opacity: 1;
}

.section3-backup-expanded__moving-node {
  fill: var(--color-solar-orange);
  stroke: #ffffff;
  stroke-width: 2;
  filter: drop-shadow(0 0 5px var(--color-solar-orange));
}

.section3-backup-expanded__path-node {
  fill: var(--color-solar-orange);
  stroke: white;
  stroke-width: 3;
}

.section3-backup-expanded__grid-copy {
  position: relative;
  padding-top: 0.15rem;
}

.section3-backup-expanded__grid-copy::after {
  content: "";
  position: absolute;
  left: 0;
  top: 1.9rem;
  width: 82%;
  height: 2px;
  background: #8b8b8b;
}

.section3-backup-expanded__grid-copy::before {
  content: "";
  position: absolute;
  top: 1.9rem;
  left: 82%;
  width: 42px;
  height: 2px;
  background: #8b8b8b;
  transform: rotate(-36deg);
  transform-origin: left center;
}

/* SECTION 03 — MONITORING / CONTROL */

.section3-monitoring__artwork {
  width: min(92vw, 1400px);
  margin: 2rem auto 0;
  transform: translateX(-8%);
  position: relative;
}

.section3-monitoring__artwork-image {
  width: 100%;
  height: auto;
}

.section3-monitoring__artwork-image[hidden] {
  display: none;
}



.section3-monitoring {
  margin-top: clamp(7rem, 10vw, 11rem);
}

.section3-monitoring__label {
  padding-top: clamp(8rem, 12vw, 13rem);
}

.section3-monitoring__closing {
  width: min(92vw, 1400px);
  margin: clamp(2.5rem, 4vw, 4rem) auto 0;
  text-align: center;
}

.section3-monitoring__closing-marker {
  width: 90px;
  height: 22px;
  margin: 0 auto 1.2rem;
  border-top: 1px solid var(--color-solar-orange);
  position: relative;
}

.section3-monitoring__closing-marker::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -22px;
  width: 1px;
  height: 22px;
  background: var(--color-solar-orange);
}

.section3-monitoring__closing > span {
  display: block;
  color: var(--color-solar-orange);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.section3-monitoring__closing > h3 {
  margin: 0.75rem auto 0;
  color: var(--ink);
  font-size: clamp(2rem, 3.4vw, 3.4rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.025em;
}

.section3-monitoring__live-node {
  position: absolute;

  /* Position over the existing orange monitoring line */
  top: 42.5%;
  left: 39.5%;

  width: 14px;
  height: 14px;
  border-radius: 50%;

  background: var(--color-solar-orange);
  border: 2px solid #ffffff;

  box-shadow:
    0 0 0 2px var(--color-solar-orange),
    0 0 10px rgba(232, 93, 20, 0.55);

  transform: translate(-50%, -50%);
  z-index: 5;

  animation: section3-monitoring-node 4s ease-in-out infinite alternate;
}

@keyframes section3-monitoring-node {
  from {
    left: 39.5%;
  }

  to {
    left: 69%;
  }
}