/* ═══════════════════════════════════════════════════════════════════════════
   1000 HILLS TECHNOLOGY — style.css
   Fonts:
     Display / Headlines → Barlow Condensed 700 / 800 / 900
     Body / UI           → Inter 300 / 400 / 500 / 600 / 700
═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   1. DESIGN TOKENS
═══════════════════════════════════════════════════════════════════════════ */
:root {
  /* Brand */
  --c-orange:  #f69110;
  --c-black:   #000000;
  --c-white:   #ffffff;

  /* Gray scale */
  --c-950: #080808;
  --c-900: #111111;
  --c-800: #1c1c1c;
  --c-700: #2d2d2d;
  --c-500: #666666;
  --c-400: #888888;
  --c-200: #d4d4d4;
  --c-100: #f5f5f5;

  /* Typography */
  --f-display: 'Barlow Condensed', sans-serif;  /* headings, hero, numbers */
  --f-body:    'Inter', sans-serif;              /* all body copy, nav, buttons */

  /* Layout */
  --nav-h:     68px;
  --container: 1300px;
  --gap-x:     clamp(1.25rem, 5vw, 4rem);
  --sec-y:     clamp(5rem, 10vh, 8rem);
}

/* ═══════════════════════════════════════════════════════════════════════════
   2. RESET
═══════════════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--f-body);
  background: var(--c-black);
  color: var(--c-white);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, video { display: block; max-width: 100%; height: auto; }
a          { color: inherit; text-decoration: none; }
ul         { list-style: none; }
button     { cursor: pointer; border: none; background: none; font-family: inherit; }

/* ═══════════════════════════════════════════════════════════════════════════
   3. UTILITIES
═══════════════════════════════════════════════════════════════════════════ */

/* Centred max-width wrapper */
.wrap {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gap-x);
}

/* Section eyebrow label — "— COMPANY OVERVIEW" */
.label {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  font-family: var(--f-body);
  font-size: .688rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-orange);
  margin-bottom: .75rem;
}
.label::before {
  content: '';
  display: block;
  width: 1.75rem;
  height: 2px;
  background: var(--c-orange);
  flex-shrink: 0;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .75rem 1.75rem;
  font-family: var(--f-body);
  font-size: .813rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: background .2s, color .2s, border-color .2s;
  line-height: 1;
  white-space: nowrap;
}
.btn-orange           { background: var(--c-orange); color: var(--c-black); }
.btn-orange:hover     { background: #d97e0c; }
.btn-outline-white    { background: transparent; color: var(--c-white); border: 2px solid var(--c-white); }
.btn-outline-white:hover { background: var(--c-white); color: var(--c-black); }
.btn-outline-black    { background: transparent; color: var(--c-black); border: 2px solid var(--c-black); }
.btn-outline-black:hover { background: var(--c-black); color: var(--c-white); }

/* Media placeholder ─ dashed box shown where images/videos will go */
.ph {
  background: var(--c-800);
  border: 1.5px dashed rgba(246, 145, 16, .35);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: 1.25rem;
  text-align: center;
  width: 100%;
  height: 100%;
}
.ph__icon { opacity: .55; flex-shrink: 0; }
.ph__type {
  font-family: var(--f-body);
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--c-orange);
}
.ph__path {
  font-family: var(--f-body);
  font-size: .688rem;
  color: var(--c-500);
  word-break: break-all;
  max-width: 22ch;
  line-height: 1.35;
}

/* Scroll-triggered reveal animation */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .65s ease, transform .65s ease;
}
.reveal.in-view {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   4. SCROLL PROGRESS BAR  (logic in main.js — mirrors ScrollProgressBar.tsx)
═══════════════════════════════════════════════════════════════════════════ */
.scroll-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--c-orange);
  transform: scaleX(0);
  transform-origin: left center;
  z-index: 9999;
  will-change: transform;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   5. NAVIGATION
═══════════════════════════════════════════════════════════════════════════ */
.nav {
  position: fixed;
  inset-inline: 0;
  top: 0;
  height: var(--nav-h);
  z-index: 900;
  display: flex;
  align-items: center;
  background: transparent;
  transition: background .3s, box-shadow .3s;
}
.nav.is-scrolled {
  background: rgba(0, 0, 0, .96);
  box-shadow: 0 2px 24px rgba(0, 0, 0, .6);
  backdrop-filter: blur(6px);
}
.nav__inner {
  display: flex;
  align-items: center;
  gap: 2rem;
}

/* Logo — text fallback; swap for <img> in HTML */
/* .nav__logo {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 1.1rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1;
  flex-shrink: 0;
}
.nav__logo em { color: var(--c-orange); font-style: normal; } */

/* Navbar logo */
.nav__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  text-decoration: none;
  color: inherit;
  white-space: nowrap;
}

.nav__logo img {
  width: auto;
  height: 40px;
  display: block;
  object-fit: contain;
}

.nav__logo span {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 1.1rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1;
}

.nav__logo em {
  color: var(--c-orange);
  font-style: normal;
}



/* Desktop links */
.nav__links {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  margin-left: auto;
}
.nav__links a {
  font-family: var(--f-body);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-200);
  position: relative;
  padding-bottom: 2px;
  transition: color .2s;
}
.nav__links a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--c-orange);
  transition: width .25s;
}
.nav__links a:hover         { color: var(--c-white); }
.nav__links a:hover::after  { width: 100%; }

.nav__cta { margin-left: 1.25rem; }

/* Hamburger — hidden on desktop */
.nav__burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 4px;
  margin-left: auto;
}
.nav__burger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--c-white);
  transition: transform .3s, opacity .3s;
}
.nav__burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__burger.is-open span:nth-child(2) { opacity: 0; }
.nav__burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile full-screen drawer */
.nav__drawer {
  position: fixed;
  inset: 0;
  top: var(--nav-h);
  background: var(--c-950);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  z-index: 850;
  transform: translateX(100%);
  transition: transform .35s ease;
}
.nav__drawer.is-open { transform: translateX(0); }
.nav__drawer a {
  font-family: var(--f-display);
  font-size: 2.25rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
  transition: color .2s;
}
.nav__drawer a:hover { color: var(--c-orange); }


.nav {
  position: fixed;
  inset-inline: 0;
  top: 0;
  height: var(--nav-h);
  z-index: 900;
  display: flex;
  align-items: center;
  background: transparent;
  transition: background .3s, box-shadow .3s;
}
.nav.is-scrolled {
  background: rgba(0, 0, 0, .96);
  box-shadow: 0 2px 24px rgba(0, 0, 0, .6);
  backdrop-filter: blur(6px);
}
.nav__inner {
  display: flex;
  align-items: center;
  gap: 2rem;
}

/* Logo — text fallback; swap for <img> in HTML */
/* .nav__logo {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 1.1rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1;
  flex-shrink: 0;
  
}
.nav__logo em { color: var(--c-orange); font-style: normal; } */

/* Navbar logo */
.nav__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  text-decoration: none;
  color: inherit;
  white-space: nowrap;
}

.nav__logo img {
  width: auto;
  height: 40px;
  display: block;
  object-fit: contain;
}

.nav__logo span {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 1.1rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1;
}

.nav__logo em {
  color: var(--c-orange);
  font-style: normal;
}

/* Desktop links */
.nav__links {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  margin-left: auto;
}
.nav__links a {
  font-family: var(--f-body);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-200);
  position: relative;
  padding-bottom: 2px;
  transition: color .2s;
}
.nav__links a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--c-orange);
  transition: width .25s;
}
.nav__links a:hover         { color: var(--c-white); }
.nav__links a:hover::after  { width: 100%; }

.nav__cta { margin-left: 1.25rem; }

/* Hamburger — hidden on desktop */
.nav__burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 4px;
  margin-left: auto;
}
.nav__burger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--c-white);
  transition: transform .3s, opacity .3s;
}
.nav__burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__burger.is-open span:nth-child(2) { opacity: 0; }
.nav__burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile full-screen drawer */
.nav__drawer {
  position: fixed;
  inset: 0;
  top: var(--nav-h);
  background: var(--c-950);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  z-index: 850;
  transform: translateX(100%);
  transition: transform .35s ease;
}
.nav__drawer.is-open { transform: translateX(0); }
.nav__drawer a {
  font-family: var(--f-display);
  font-size: 2.25rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
  transition: color .2s;
}
.nav__drawer a:hover { color: var(--c-orange); }


/* ═══════════════════════════════════════════════════════════════════════════
   6. HERO
═══════════════════════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding-top: var(--nav-h);
  padding-bottom: clamp(3.5rem, 9vh, 7rem);
  overflow: hidden;
}

/* Background layer (video or placeholder) */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__bg-ph {
  width: 100%;
  height: 100%;
  min-height: 600px;
}
.hero__bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Dark gradient overlay */
.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    160deg,
    rgba(0, 0, 0, .30) 0%,
    rgba(0, 0, 0, .50) 50%,
    rgba(0, 0, 0, .88) 100%
  );
  z-index: 1;
}

/* Content sits above the video + overlay */
.hero__content { position: relative; z-index: 2; }

.hero__eyebrow {
  font-family: var(--f-body);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-orange);
  margin-bottom: 1.25rem;
}

/* The big stacked headline — Barlow Condensed only */
.hero__title {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(4.5rem, 12vw, 12rem);
  line-height: .9;
  text-transform: uppercase;
  letter-spacing: -.01em;
  margin-bottom: 2rem;
}
.hero__title .orange { color: var(--c-orange); }

.hero__desc {
  font-family: var(--f-body);
  max-width: 52ch;
  font-size: clamp(.9rem, 1.4vw, 1.05rem);
  font-weight: 300;
  color: var(--c-200);
  line-height: 1.75;
  margin-bottom: 2.5rem;
}
.hero__actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

/* ═══════════════════════════════════════════════════════════════════════════
   7. COMPANY OVERVIEW
═══════════════════════════════════════════════════════════════════════════ */
.overview {
  background: var(--c-white);
  color: var(--c-black);
  padding-block: var(--sec-y);
}
.overview__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}

/* Eyebrow label on white bg */
.overview .label       { color: var(--c-orange); }
.overview .label::before { background: var(--c-orange); }

/* Section heading — display font */
.overview__title {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(2rem, 4vw, 3.75rem);
  line-height: 1.0;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  color: var(--c-black);
}

/* Body paragraphs — Inter */
.overview__body p {
  font-family: var(--f-body);
  font-size: .938rem;
  font-weight: 400;
  color: #333;
  line-height: 1.8;
  margin-bottom: 1rem;
}

/* Stats row */
.overview__stats {
  display: flex;
  gap: 3.5rem;
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid #e5e5e5;
}
.overview__stat-val {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 2.625rem;
  color: var(--c-orange);
  line-height: 1;
}
.overview__stat-lbl {
  font-family: var(--f-body);
  font-size: .688rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #666;
  margin-top: .35rem;
}

/* Right side: two overlapping media cards */
.overview__media {
  position: relative;
  height: 480px;
}
.overview__media-main {
  position: absolute;
  top: 0;
  right: 0;
  width: 86%;
  height: 100%;
  overflow: hidden;
}
.overview__media-inset {
  position: absolute;
  bottom: -2rem;
  left: 0;
  width: 48%;
  height: 55%;
  overflow: hidden;
  border: 4px solid var(--c-white);
  box-shadow: 0 20px 55px rgba(0, 0, 0, .22);
  z-index: 2;
}

/* ═══════════════════════════════════════════════════════════════════════════
   8. QUICK STATS BAR
═══════════════════════════════════════════════════════════════════════════ */
.stats-bar {
  background: var(--c-950);
  border-top: 1px solid var(--c-800);
  border-bottom: 1px solid var(--c-800);
  padding-block: 3rem;
}
.stats-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.stats-bar__item { text-align: center; }
.stats-bar__val {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(2.75rem, 5.5vw, 4.5rem);
  color: var(--c-orange);
  line-height: 1;
}
.stats-bar__lbl {
  font-family: var(--f-body);
  font-size: .688rem;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--c-400);
  margin-top: .4rem;
}
.stats-bar__div {
  width: 1px;
  height: 56px;
  background: var(--c-700);
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   9. BRIEF CTA BAND
═══════════════════════════════════════════════════════════════════════════ */
.brief-cta {
  background: var(--c-black);
  padding-block: clamp(4rem, 8vh, 6rem);
  border-bottom: 3px solid var(--c-orange);
}
.brief-cta__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
/* Large display text */
.brief-cta__text {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(2.5rem, 7vw, 6rem);
  text-transform: uppercase;
  line-height: .92;
}
.brief-cta__text .orange { color: var(--c-orange); }

/* ═══════════════════════════════════════════════════════════════════════════
   10. WHY PARTNER
═══════════════════════════════════════════════════════════════════════════ */
.why {
  background: var(--c-950);
  padding-block: var(--sec-y);
}
.why__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
.why__heading {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(2rem, 4.5vw, 4rem);
  text-transform: uppercase;
  line-height: .95;
  margin-bottom: 2.5rem;
}
.why__list  { display: flex; flex-direction: column; }
.why__item  {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  padding-block: 1.5rem;
  border-bottom: 1px solid var(--c-800);
}
.why__num {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: .875rem;
  color: var(--c-orange);
  letter-spacing: .05em;
  min-width: 2.25rem;
  padding-top: .125rem;
  flex-shrink: 0;
}
.why__item-title {
  font-family: var(--f-body);
  font-size: .9rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--c-200);
  letter-spacing: .01em;
}

/* Sticky media column */
.why__media    { position: sticky; top: calc(var(--nav-h) + 2rem); }
.why__media-ph { aspect-ratio: 3/4; min-height: 320px; }

/* ═══════════════════════════════════════════════════════════════════════════
   11. INTEGRATED SOLUTIONS
═══════════════════════════════════════════════════════════════════════════ */
.solutions { background: var(--c-black); padding-block: var(--sec-y); }

.solutions__heading {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(2.25rem, 5.5vw, 5rem);
  text-transform: uppercase;
  line-height: .95;
  margin-bottom: .75rem;
}
.solutions__sub {
  font-family: var(--f-body);
  font-size: .938rem;
  font-weight: 400;
  color: var(--c-400);
  margin-bottom: 3.5rem;
  max-width: 58ch;
  line-height: 1.65;
}

/* Cards grid — gap between cards */
.solutions__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 1.5rem;
  width: 100%;
}

/* ── Service card ─────────────────────────────────────────────────────── */
.sol-card {
  display: flex;
  flex-direction: column;
  position: relative;
  background: var(--c-950);
  padding: 1.5rem;
  min-width: 0;
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid var(--c-800);
  transition: background .3s ease, border-color .3s ease, transform .3s ease;
}
.sol-card:hover {
  background: var(--c-900);
  border-color: var(--c-700);
  transform: translateY(-4px);
}

/* ── Card media container ─────────────────────────────────────────────── */
.sol-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin-bottom: 1.5rem;
  overflow: hidden;
  background: var(--c-800);
}

/* Let .ph flex not fight absolutely-positioned children */
.sol-card__media.ph       { display: block; padding: 0; }
.sol-card__media .ph__icon { opacity: 1; }

/* Gradient overlay */
.sol-card__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, .05)  0%,
    rgba(0, 0, 0, .25) 45%,
    rgba(0, 0, 0, .78) 100%
  );
  z-index: 2;
  pointer-events: none;
  transition: opacity .3s ease;
}
.sol-card:hover .sol-card__media::after { opacity: .65; }

/* Type label — bottom-left */
.sol-card__media .ph__type {
  position: absolute;
  z-index: 3;
  left: 1rem;
  bottom: 1rem;
  color: #fff;
  font-family: var(--f-display);
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}

/* File path — bottom-right */
.sol-card__media .ph__path {
  position: absolute;
  z-index: 3;
  right: 1rem;
  bottom: 1rem;
  max-width: 55%;
  color: rgba(255, 255, 255, .65);
  font-family: var(--f-body);
  font-size: .65rem;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Play icon — centred */
.sol-card__media svg {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  width: 3rem;
  height: 3rem;
  color: var(--c-orange);
  transform: translate(-50%, -50%);
  transition: transform .3s ease, color .3s ease;
}
.sol-card:hover .sol-card__media svg {
  transform: translate(-50%, -50%) scale(1.12);
  color: #fff;
}

/* ── Card text ────────────────────────────────────────────────────────── */
.sol-card__title {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 1.125rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  line-height: 1.2;
  margin: 0 0 .625rem;
  color: var(--c-white);
}
.sol-card__desc {
  font-family: var(--f-body);
  font-size: .838rem;
  font-weight: 400;
  color: var(--c-400);
  line-height: 1.65;
  margin: 0 0 1.5rem;
}
.sol-card__bullets {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sol-card__bullets li {
  font-family: var(--f-body);
  font-size: .775rem;
  font-weight: 400;
  color: var(--c-400);
  padding-left: 1.25rem;
  position: relative;
  line-height: 1.5;
}
.sol-card__bullets li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--c-orange);
  font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════════════════════
   12. VISION / MD QUOTE
═══════════════════════════════════════════════════════════════════════════ */
.vision {
  background: var(--c-950);
  padding-block: var(--sec-y);
  position: relative;
  overflow: hidden;
}
/* Decorative giant open-quote mark in bg */
.vision::before {
  content: '\201C';
  position: absolute;
  top: -3rem;
  left: 2rem;
  font-family: var(--f-display);
  font-size: clamp(16rem, 28vw, 28rem);
  font-weight: 900;
  line-height: 1;
  color: rgba(246, 145, 16, .04);
  pointer-events: none;
  z-index: 0;
}
.vision__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: clamp(3rem, 7vw, 6rem);
  align-items: center;
}
.vision__left-heading {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(2rem, 4.5vw, 4rem);
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 1.75rem;
}
.vision__photo {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--c-orange);
  margin-top: 1.75rem;
  flex-shrink: 0;
}
.vision__name {
  font-family: var(--f-body);
  font-weight: 600;
  font-size: .938rem;
  margin-top: 1rem;
}
.vision__role {
  font-family: var(--f-body);
  font-size: .775rem;
  font-weight: 400;
  color: var(--c-400);
  letter-spacing: .02em;
  margin-top: .2rem;
  line-height: 1.4;
}
.vision__paras { margin-top: 1.75rem; }
.vision__paras p {
  font-family: var(--f-body);
  font-size: .875rem;
  font-weight: 400;
  color: var(--c-400);
  line-height: 1.75;
  margin-bottom: .875rem;
}

/* Blockquote — display font for impact */
.vision__quote blockquote {
  font-family: var(--f-display);
  font-weight: 700;
  font-style: italic;
  font-size: clamp(1.4rem, 3vw, 2.375rem);
  line-height: 1.35;
  color: var(--c-white);
  margin-bottom: 2.5rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   13. JOURNEY TIMELINE
═══════════════════════════════════════════════════════════════════════════ */
.journey { background: var(--c-black); padding-block: var(--sec-y); }

.journey__intro {
  font-family: var(--f-body);
  max-width: 64ch;
  font-size: .938rem;
  font-weight: 400;
  color: var(--c-400);
  line-height: 1.8;
  margin-bottom: 4rem;
}

/* Vertical line */
.journey__line {
  position: relative;
  display: flex;
  flex-direction: column;
}
.journey__line::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 5.5rem;
  width: 2px;
  background: var(--c-800);
}

/* Each milestone row */
.journey__item {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  padding-block: 1.875rem;
  position: relative;
}
/* Orange dot on the line */
.journey__item::before {
  content: '';
  position: absolute;
  left: calc(5.5rem - 7px);
  top: 2.2rem;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--c-orange);
  border: 3px solid var(--c-black);
  box-shadow: 0 0 0 2px var(--c-orange);
  z-index: 1;
}
.journey__year {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 1.375rem;
  color: var(--c-orange);
  line-height: 1.2;
  padding-top: .2rem;
}
.journey__text {
  font-family: var(--f-body);
  padding-left: 2.25rem;
  font-size: .938rem;
  font-weight: 400;
  color: var(--c-400);
  line-height: 1.7;
  padding-top: .25rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   14. LATEST FROM THE FIELD
═══════════════════════════════════════════════════════════════════════════ */
.field { background: var(--c-950); padding-block: var(--sec-y); }

.field__grid {
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 260px 260px;
  gap: 4px;
}
.field__item {
  overflow: hidden;
  position: relative;
}
.field__item:first-child { grid-row: 1 / 3; }
.field__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s;
}
.field__item:hover img { transform: scale(1.05); }

/* ═══════════════════════════════════════════════════════════════════════════
   15. KEY PROJECTS
═══════════════════════════════════════════════════════════════════════════ */
.projects { background: var(--c-black); padding-block: var(--sec-y); }

.projects__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(305px, 1fr));
  gap: 1.5rem;
  margin-top: 3rem;
}

.proj-card {
  background: var(--c-950);
  border: 1px solid var(--c-800);
  overflow: hidden;
  transition: border-color .25s, transform .3s;
}
.proj-card:hover { border-color: var(--c-orange); transform: translateY(-5px); }

.proj-card__img {
  aspect-ratio: 16/9;
  overflow: hidden;
  position: relative;
}
.proj-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .45s;
}
.proj-card:hover .proj-card__img img { transform: scale(1.05); }

.proj-card__body { padding: 1.375rem; }

.proj-card__cat {
  font-family: var(--f-body);
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-orange);
  margin-bottom: .5rem;
}
.proj-card__title {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: .02em;
  margin-bottom: .4rem;
  line-height: 1.2;
}
.proj-card__loc {
  font-family: var(--f-body);
  font-size: .75rem;
  font-weight: 400;
  color: var(--c-400);
  display: flex;
  align-items: center;
  gap: .35rem;
  margin-bottom: .75rem;
}
.proj-card__desc {
  font-family: var(--f-body);
  font-size: .813rem;
  font-weight: 400;
  color: var(--c-500);
  line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════════════════════════
   16. CLIENTS & PARTNERS
═══════════════════════════════════════════════════════════════════════════ */
.partners { background: var(--c-950); padding-block: var(--sec-y); }

.partners__hdr {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 3.5rem;
  flex-wrap: wrap;
}
.partners__count {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 5rem;
  color: var(--c-orange);
  line-height: 1;
}
.partners__count-lbl {
  font-family: var(--f-body);
  font-size: .688rem;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--c-400);
  margin-top: .25rem;
}
.partners__heading {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(2.25rem, 5vw, 4.5rem);
  text-transform: uppercase;
  line-height: .95;
}

/* Logo grid */
.partners__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
  gap: 1px;
  background: var(--c-800);
  border: 1px solid var(--c-800);
}
.partner-item {
  background: var(--c-950);
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  transition: background .2s;
}
.partner-item:hover { background: var(--c-800); }
.partner-item img {
  max-width: 110px;
  max-height: 46px;
  object-fit: contain;
  filter: grayscale(1) brightness(1.4);
  transition: filter .25s;
}
.partner-item:hover img { filter: none; }
.partner-item__name {
  font-family: var(--f-body);
  font-size: .725rem;
  font-weight: 500;
  text-align: center;
  color: var(--c-400);
  line-height: 1.35;
  transition: color .2s;
}
.partner-item:hover .partner-item__name { color: var(--c-200); }

/* ═══════════════════════════════════════════════════════════════════════════
   17. CONTACT
═══════════════════════════════════════════════════════════════════════════ */
.contact { background: var(--c-black); padding-block: var(--sec-y); }

.contact__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 7vw, 6rem);
  align-items: start;
}

/* Big "Let's Build Together" heading */
.contact__title {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(2.75rem, 7vw, 6rem);
  text-transform: uppercase;
  line-height: .9;
  margin-bottom: 3rem;
}
.contact__title .orange { color: var(--c-orange); }

.contact__group { margin-bottom: 2.25rem; }
.contact__group-label {
  font-family: var(--f-body);
  font-size: .656rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--c-orange);
  margin-bottom: .75rem;
}
.contact__group-val {
  font-family: var(--f-body);
  font-size: .938rem;
  font-weight: 400;
  color: var(--c-200);
  line-height: 1.7;
}
.contact__group-val a    { transition: color .2s; }
.contact__group-val a:hover { color: var(--c-orange); }

.contact__social {
  display: flex;
  gap: .75rem;
  margin-top: .75rem;
  flex-wrap: wrap;
}

/* Map embed */
.contact__map {
  overflow: hidden;
  border: 1px solid var(--c-700);
  aspect-ratio: 1;
}
.contact__map iframe {
  width: 100%;
  height: 100%;
  border: none;
  filter: grayscale(.75) invert(.9) hue-rotate(175deg) brightness(.9);
}

/* ═══════════════════════════════════════════════════════════════════════════
   18. FOOTER  (redesigned)
═══════════════════════════════════════════════════════════════════════════ */
.footer {
  background: var(--c-950);
  padding-block: clamp(3rem, 6vh, 5rem);
  border-top: 1px solid var(--c-800);
}

.footer__logo-img {
  width: 150px;
}

/* 3-col grid: brand | nav | contact */
.footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 3rem;
  padding-bottom: 2.75rem;
  border-bottom: 1px solid var(--c-800);
  margin-bottom: 1.75rem;
}
/* .footer__logo {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 1.375rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  display: block;
  margin-bottom: .875rem;
} */
.footer__logo em { color: var(--c-orange); font-style: normal; }

.footer__tagline-sm {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(1.375rem, 2.5vw, 2rem);
  text-transform: uppercase;
  line-height: 1.05;
  color: var(--c-white);
  margin-bottom: 1.625rem;
}
.footer__tagline-sm .orange { color: var(--c-orange); }

/* Rounded social icon buttons */
.footer__socials { display: flex; gap: .5rem; flex-wrap: wrap; }
.social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1.5px solid var(--c-700);
  color: var(--c-400);
  background: transparent;
  flex-shrink: 0;
  transition: background .2s, border-color .2s, color .2s, transform .2s;
}
.social-btn:hover {
  background: var(--c-orange);
  border-color: var(--c-orange);
  color: var(--c-black);
  transform: translateY(-2px);
}

/* Column heading */
.footer__col-title {
  font-family: var(--f-body);
  font-size: .656rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-orange);
  margin-bottom: 1.25rem;
}
.footer__col ul   { display: flex; flex-direction: column; gap: .6rem; }
.footer__col a    { font-family: var(--f-body); font-size: .838rem; color: var(--c-400); transition: color .2s; }
.footer__col a:hover { color: var(--c-white); }
.footer__col address {
  font-style: normal;
  display: flex; flex-direction: column; gap: .625rem;
}
.footer__col address span {
  font-family: var(--f-body); font-size: .838rem;
  color: var(--c-400); line-height: 1.5;
}

/* Bottom bar */
.footer__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.footer__copy {
  font-family: var(--f-body);
  font-size: .688rem;
  color: var(--c-500);
  text-transform: uppercase;
  letter-spacing: .1em;
}

.footer__logo-link {
  display: inline-flex;
  align-items: center;
  margin-bottom: 1rem;
}

.footer__logo-img {
  display: block;
  width: 180px;
  height: auto;
  max-width: 100%;
  object-fit: contain;
}

@media (max-width: 600px) {
  .footer__logo-img {
    width: 155px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   19. RESPONSIVE BREAKPOINTS
═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .overview__inner  { grid-template-columns: 1fr; }
  .overview__media  { height: 360px; margin-top: 2rem; }
  .why__inner       { grid-template-columns: 1fr; }
  .why__media       { position: static; margin-top: 2rem; }
  .vision__inner    { grid-template-columns: 1fr; gap: 3rem; }
  .contact__inner   { grid-template-columns: 1fr; }
  .footer__grid     { grid-template-columns: 1fr 1fr; }
  .footer__brand    { grid-column: 1 / -1; }
}

@media (max-width: 768px) {
  .nav__links, .nav__cta { display: none; }
  .nav__burger            { display: flex; }

  .field__grid            { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .field__item:first-child { grid-row: auto; }
  .field__grid .field__item { min-height: 180px; }

  .partners__hdr          { flex-direction: column; }
  .footer__bottom         { grid-template-columns: 1fr; }
  .footer__links          { align-items: flex-start; }
}

@media (max-width: 640px) {
  .solutions__sub  { margin-bottom: 2.5rem; }
  .solutions__grid { grid-template-columns: 1fr; gap: 1rem; }
  .sol-card        { padding: 1.25rem; }
  .sol-card__media { margin-bottom: 1.25rem; }
}

@media (max-width: 520px) {
  .projects__grid  { grid-template-columns: 1fr; }
  .field__grid     { grid-template-columns: 1fr; }
  .stats-bar__div  { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   20. THEME TOGGLE BUTTON
═══════════════════════════════════════════════════════════════════════════ */
.nav__theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  flex-shrink: 0;
  color: var(--c-400);
  transition: color .2s;
}
.nav__theme-toggle:hover { color: var(--c-orange); }

/* Show sun in dark mode, moon in light mode */
.nav__theme-toggle .icon-moon                { display: none;  }
[data-theme="light"] .nav__theme-toggle .icon-sun  { display: none;  }
[data-theme="light"] .nav__theme-toggle .icon-moon { display: block; }


/* ═══════════════════════════════════════════════════════════════════════════
   21. LIGHT MODE
   Applied via <html data-theme="light">.
   Strategy: remap the gray-scale token ladder + flip --c-black / --c-white
   so every section that used a dark bg gets a light one automatically.
   A handful of hardcoded values (overview body copy, hero text, nav) need
   explicit overrides — listed section-by-section below.
═══════════════════════════════════════════════════════════════════════════ */
[data-theme="light"] {
  --c-black: #f8f7f4;  /* dark page bg  → warm off-white page bg      */
  --c-white: #111110;  /* white text    → near-black text              */
  --c-950:   #f0efec;  /* near-black bg → near-white alt section bg   */
  --c-900:   #e5e4e0;  /* dark surface  → light surface / card hover  */
  --c-800:   #d0cfcc;  /* dark border   → light border                */
  --c-700:   #b4b3af;  /* mid-dark      → mid-light                   */
  --c-500:   #78776f;  /* muted text    (stays mid — fine both ways)  */
  --c-400:   #555450;  /* secondary txt (stays readable on light bg)  */
  --c-200:   #1f1e1b;  /* was near-white body text → near-black       */
  --c-100:   #0f0e0b;  /* darkest text                                */
}

/* ── Hero — always dark (video bg), force text light ───────────────────── */
[data-theme="light"] .hero__title,
[data-theme="light"] .hero__desc { color: #ffffff; }
[data-theme="light"] .hero__title .orange { color: var(--c-orange); }

/* ── Nav — transparent over dark hero stays white;
          scrolled state switches to pale glass ─────────────────────────── */
[data-theme="light"] .nav:not(.is-scrolled) .nav__logo,
[data-theme="light"] .nav:not(.is-scrolled) .nav__links a { color: rgba(255,255,255,.88); }
[data-theme="light"] .nav:not(.is-scrolled) .nav__burger span { background: #fff; }
[data-theme="light"] .nav:not(.is-scrolled) .nav__theme-toggle { color: rgba(255,255,255,.7); }

[data-theme="light"] .nav.is-scrolled {
  background: rgba(248, 247, 244, .97);
  box-shadow: 0 2px 24px rgba(0, 0, 0, .08);
}

/* ── Mobile drawer ──────────────────────────────────────────────────────── */
[data-theme="light"] .nav__drawer { background: var(--c-950); }
[data-theme="light"] .nav__drawer a { color: var(--c-200); }

/* ── Overview — inverts to a dark feature panel in light mode ───────────── */
/* (--c-white → #111 = dark bg; --c-black → #f8f7f4 = light text — correct) */
/* Fix hardcoded values that were written for the original dark-on-white state */
[data-theme="light"] .overview__body p     { color: rgba(248, 247, 244, .72); }
[data-theme="light"] .overview__stat-lbl   { color: rgba(248, 247, 244, .50); }
[data-theme="light"] .overview__stats      { border-top-color: rgba(248, 247, 244, .12); }
[data-theme="light"] .overview__media-inset { border-color: var(--c-black); }

/* ── Service cards — white on light page bg ─────────────────────────────── */
[data-theme="light"] .sol-card             { background: #ffffff; }
[data-theme="light"] .sol-card:hover       { background: var(--c-950); }
[data-theme="light"] .sol-card__title      { color: var(--c-100); }
/* Keep hover icon orange (not dark) on light card */
[data-theme="light"] .sol-card:hover .sol-card__media svg { color: var(--c-orange); }

/* ── Project cards ──────────────────────────────────────────────────────── */
[data-theme="light"] .proj-card            { background: #ffffff; }
[data-theme="light"] .proj-card__title     { color: var(--c-100); }

/* ── Partner logos — brighter filter needed on dark logo + light bg ──────── */
[data-theme="light"] .partner-item         { background: #ffffff; }
[data-theme="light"] .partner-item:hover   { background: var(--c-950); }
[data-theme="light"] .partner-item img     { filter: grayscale(1) brightness(.55); }
[data-theme="light"] .partner-item:hover img { filter: none; }

/* ── Journey timeline — darken the vertical line for contrast ───────────── */
[data-theme="light"] .journey__line::before { background: var(--c-700); }

/* ── Vision — nudge decorative quote-mark opacity up slightly ───────────── */
[data-theme="light"] .vision::before { color: rgba(246, 145, 16, .08); }

/* ── Contact map — show real colours; no dark invert needed ─────────────── */
[data-theme="light"] .contact__map iframe { filter: none; }

/* ── Footer copyright — bump contrast on light bg ──────────────────────── */
[data-theme="light"] .footer__copy { color: var(--c-500); }

/* ═══════════════════════════════════════════════════════════════════════════
   22. LANGUAGE TOGGLE
═══════════════════════════════════════════════════════════════════════════ */
.lang-toggle {
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--c-800);
  border-radius: 2rem;
  padding: 3px;
}
.lang-btn {
  font-family: var(--f-body);
  font-size: .656rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-400);
  padding: .3rem .7rem;
  border-radius: 2rem;
  transition: background .2s, color .2s;
  line-height: 1;
}
.lang-btn.is-active { background: var(--c-orange); color: var(--c-black); }
.lang-btn:not(.is-active):hover { color: var(--c-white); }

/* ═══════════════════════════════════════════════════════════════════════════
   23. FAQ
═══════════════════════════════════════════════════════════════════════════ */
.faq { background: var(--c-950); padding-block: var(--sec-y); }

.faq__heading {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(2.25rem, 5.5vw, 5rem);
  text-transform: uppercase;
  line-height: .95;
  margin-bottom: 3rem;
}
.faq__list {
  border-top: 1px solid var(--c-800);
  display: flex;
  flex-direction: column;
}
.faq__item { border-bottom: 1px solid var(--c-800); }
.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.375rem;
  font-family: var(--f-body);
  font-size: .975rem;
  font-weight: 600;
  color: var(--c-white);
  text-align: left;
  background: none;
  transition: color .2s;
}
.faq__q:hover { color: var(--c-orange); }
.faq__q svg {
  flex-shrink: 0;
  color: var(--c-orange);
  transition: transform .3s ease;
}
.faq__item.is-open .faq__q svg { transform: rotate(45deg); }

/* CSS grid row trick — no JS height calculation needed */
.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .35s ease;
}
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a-inner { overflow: hidden; }
.faq__a-inner p {
  font-family: var(--f-body);
  font-size: .925rem;
  color: var(--c-400);
  line-height: 1.75;
  padding-bottom: 1.375rem;
  max-width: 72ch;
}

/* ── Responsive additions ─────────────────────────────────────────────── */
@media (max-width: 600px) {
  .footer__grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   24. SOLAR CALCULATOR
═══════════════════════════════════════════════════════════════════════════ */
.solar-calc { background: var(--c-black); padding-block: var(--sec-y); }

.solar-calc__heading {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(2.25rem, 5.5vw, 5rem);
  text-transform: uppercase;
  line-height: .95;
  margin-bottom: .625rem;
}
.solar-calc__sub {
  font-size: .938rem;
  color: var(--c-400);
  max-width: 52ch;
  line-height: 1.65;
  margin-bottom: 3rem;
}

.solar-calc__inner {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 3rem;
  align-items: start;
}

/* ── Step label ───────────────────────────────────────────────────────── */
.sc-step {
  font-family: var(--f-body);
  font-size: .656rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-orange);
  margin-bottom: 1rem;
}

/* ── Appliance list ───────────────────────────────────────────────────── */
.appliance-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 2rem;
}

.a-item {
  display: grid;
  grid-template-columns: 20px 1.4rem 1fr auto;
  align-items: center;
  gap: .75rem;
  padding: .875rem 1.125rem;
  background: var(--c-950);
  border: 1px solid var(--c-800);
  border-radius: .25rem;
  cursor: pointer;
  user-select: none;
  transition: border-color .2s, background .2s;
}
.a-item:hover  { border-color: var(--c-700); }
.a-item.is-on  {
  border-color: color-mix(in srgb, var(--c-orange) 40%, transparent);
  background:   color-mix(in srgb, var(--c-orange) 5%,  var(--c-950));
}

/* Custom checkbox */
.a-check {
  width: 18px; height: 18px;
  border: 2px solid var(--c-700);
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background .2s, border-color .2s;
}
.a-item.is-on .a-check { background: var(--c-orange); border-color: var(--c-orange); }
.a-check svg { display: none; }
.a-item.is-on .a-check svg { display: block; }

.a-icon { font-size: 1.1rem; line-height: 1; pointer-events: none; }

.a-name {
  font-family: var(--f-body);
  font-size: .875rem;
  font-weight: 500;
  color: var(--c-200);
  line-height: 1.2;
  pointer-events: none;
}
.a-name small {
  display: block;
  font-size: .688rem;
  color: var(--c-500);
  font-weight: 400;
}

/* Qty + hours controls */
.a-controls {
  display: flex;
  align-items: center;
  gap: .5rem;
  pointer-events: none;
  opacity: .3;
  transition: opacity .2s;
}
.a-item.is-on .a-controls { pointer-events: auto; opacity: 1; }

.sc-stepper {
  display: flex;
  align-items: center;
  gap: .3rem;
}
.sc-step-btn {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--c-700);
  color: var(--c-400);
  font-size: .875rem;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
  background: none;
  flex-shrink: 0;
  transition: background .15s, border-color .15s, color .15s;
}
.sc-step-btn:hover { background: var(--c-orange); border-color: var(--c-orange); color: var(--c-black); }

.sc-val {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: .975rem;
  color: var(--c-white);
  min-width: 1.5rem;
  text-align: center;
}
.sc-unit {
  font-family: var(--f-body);
  font-size: .625rem;
  color: var(--c-500);
  letter-spacing: .05em;
}
.sc-divider {
  width: 1px; height: 14px;
  background: var(--c-700);
  flex-shrink: 0;
}

/* ── Result card (sticky) ─────────────────────────────────────────────── */
.solar-calc__right { position: sticky; top: calc(var(--nav-h) + 2rem); }

.result-card {
  background: var(--c-950);
  border: 1px solid var(--c-800);
  border-radius: .375rem;
  overflow: hidden;
}
.result-card__head {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--c-800);
  background: var(--c-900);
}
.result-card__head svg { color: var(--c-orange); flex-shrink: 0; }
.result-card__title {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 1.125rem;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.result-card__body { padding: 1.375rem 1.5rem; }

.result-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--c-800);
  border: 1px solid var(--c-800);
  border-radius: .25rem;
  overflow: hidden;
  margin-bottom: 1.375rem;
}
.result-metric {
  background: var(--c-950);
  padding: .875rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.result-metric__lbl {
  font-family: var(--f-body);
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-500);
}
.result-metric__val {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 1.375rem;
  color: var(--c-white);
  line-height: 1;
}
.result-metric__val .u {
  font-size: .7rem;
  font-weight: 500;
  color: var(--c-400);
  margin-left: .15rem;
}

/* Recommended system highlight box */
.result-system {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--c-orange) 10%, var(--c-900)) 0%,
    var(--c-900) 100%);
  border: 1px solid color-mix(in srgb, var(--c-orange) 30%, transparent);
  border-radius: .25rem;
  padding: 1.125rem 1.25rem;
  text-align: center;
  margin-bottom: 1.375rem;
}
.result-system__lbl {
  font-family: var(--f-body);
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-orange);
  margin-bottom: .375rem;
}
.result-system__kw {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(2rem, 5vw, 3rem);
  color: var(--c-white);
  line-height: 1;
}
.result-system__detail {
  font-family: var(--f-body);
  font-size: .813rem;
  color: var(--c-400);
  margin-top: .3rem;
}

/* Price */
.result-price {
  margin-bottom: 1.375rem;
  padding-bottom: 1.375rem;
  border-bottom: 1px solid var(--c-800);
}
.result-price__lbl {
  font-family: var(--f-body);
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-orange);
  margin-bottom: .375rem;
}
.result-price__range {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 1.625rem;
  color: var(--c-white);
  line-height: 1.15;
}
.result-price__note {
  font-family: var(--f-body);
  font-size: .725rem;
  color: var(--c-500);
  line-height: 1.45;
  margin-top: .375rem;
}
.result-card .btn { width: 100%; justify-content: center; }

/* Empty state */
.result-empty {
  text-align: center;
  padding-block: 2rem;
  color: var(--c-500);
  font-size: .875rem;
}

/* ── Light mode ─────────────────────────────────────────────────────── */
[data-theme="light"] .a-item        { background: #ffffff; }
[data-theme="light"] .a-item.is-on  {
  background: color-mix(in srgb, var(--c-orange) 7%, #fff);
}
[data-theme="light"] .result-card      { background: #ffffff; border-color: var(--c-800); }
[data-theme="light"] .result-card__head { background: var(--c-950); }
[data-theme="light"] .result-metric   { background: var(--c-950); }

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .solar-calc__inner  { grid-template-columns: 1fr; }
  .solar-calc__right  { position: static; }
}
@media (max-width: 480px) {
  .a-item { grid-template-columns: 20px 1.4rem 1fr; }
  .a-controls { grid-column: 1 / -1; padding-left: calc(20px + 1.4rem + 1.5rem); }
  .a-item { grid-template-rows: auto auto; row-gap: .5rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   25. REAL MEDIA ELEMENTS  (video/img fill rules now placeholders are gone)
═══════════════════════════════════════════════════════════════════════════ */

/* Hero, overview, and why partner videos fill their container */
.hero__bg video,
.overview__media-main,
.overview__media-inset,
.why__media-ph { object-fit: cover; }

/* overview videos are position:absolute containers — fill 100% */
.overview__media-main,
.overview__media-inset { display: block; }

/* MD photo */
.vision__photo img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}

/* Solution card videos */
.sol-card__media {
  /* already has aspect-ratio + overflow:hidden — just make video fill it */
}
.sol-card__media video {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}

/* Lucide icons inside appliance list rows */
.a-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.375rem;
  flex-shrink: 0;
}
.a-icon svg {
  width: 1.125rem;
  height: 1.125rem;
  stroke: var(--c-orange);
  stroke-width: 1.75;
  flex-shrink: 0;
}