/* ============================================================
   Blue Ray Solar — Global Stylesheet
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Outfit:wght@300;400;500;600;700;800&display=swap');

/* ── CSS Variables ─────────────────────────────────────────── */
:root {
  --navy:       #0a1628;
  --navy-light: #112240;
  --blue:       #1e6fff;
  --blue-light: #4d8eff;
  --gold:       #f5a623;
  --gold-dark:  #d4891a;
  --white:      #ffffff;
  --gray-50:    #f8f9fa;
  --gray-100:   #f1f3f5;
  --gray-200:   #e9ecef;
  --gray-400:   #adb5bd;
  --gray-600:   #495057;
  --gray-800:   #212529;
  --green:      #25d366;
  --red:        #e53e3e;

  --font-display: 'Bebas Neue', sans-serif;
  --font-body:    'Outfit', sans-serif;

  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  20px;
  --radius-xl:  28px;

  --shadow-sm:   0 2px 8px rgba(0,0,0,.08);
  --shadow-md:   0 4px 20px rgba(0,0,0,.12);
  --shadow-lg:   0 8px 40px rgba(0,0,0,.18);
  --shadow-blue: 0 4px 24px rgba(30,111,255,.25);
  --shadow-gold: 0 4px 24px rgba(245,166,35,.30);

  --transition:      200ms ease;
  --transition-slow: 350ms ease;

  --nav-h: 130px;

  --z-base:    10;
  --z-card:    20;
  --z-sticky:  30;
  --z-overlay: 50;
  --z-modal:   60;
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  .orb, .energy-ring, .panel-shimmer, .cellShimmer { animation: none !important; }
}

body {
  font-family: var(--font-body);
  color: var(--gray-800);
  background: var(--white);
  line-height: 1.6;
  overflow-x: hidden;
}

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

/* ── Layout Utilities ──────────────────────────────────────── */
.container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 24px;
}

.section    { padding-block: 88px; }
.section-sm { padding-block: 56px; }

.text-center  { text-align: center; }
.text-left    { text-align: left; }

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }

.flex         { display: flex; }
.flex-center  { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.gap-8  { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.gap-24 { gap: 24px; }

/* ── Section Header ────────────────────────────────────────── */
.section-header { margin-bottom: 56px; }
.section-header .eyebrow {
  display: inline-block;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin-bottom: 12px;
}
.section-header h2 { font-family: var(--font-display); font-size: clamp(1.8rem, 3vw, 2.8rem); color: var(--navy); margin-bottom: 16px; }
.section-header p  { max-width: 560px; color: var(--gray-600); font-size: 1.05rem; line-height: 1.7; }
.section-header.text-center p { margin-inline: auto; }

.divider {
  width: 56px; height: 4px;
  background: linear-gradient(90deg, var(--gold-dark), var(--gold));
  border-radius: 2px;
  margin-bottom: 20px;
}
.text-center .divider { margin-inline: auto; }

/* ── Buttons ───────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: var(--radius-md);
  font-size: 1rem;
  font-weight: 600;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition), border-color var(--transition);
  cursor: pointer;
  white-space: nowrap;
  border: 2px solid transparent;
}
.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

.btn-gold {
  background: var(--gold);
  color: var(--navy);
  border-color: var(--gold);
  box-shadow: var(--shadow-gold);
}
.btn-gold:hover { background: var(--gold-dark); border-color: var(--gold-dark); box-shadow: 0 6px 28px rgba(245,166,35,.4); }

.btn-outline-white {
  background: transparent;
  color: var(--white);
  border-color: rgba(255,255,255,.5);
}
.btn-outline-white:hover { border-color: var(--white); background: rgba(255,255,255,.08); }

.btn-outline-navy {
  background: transparent;
  color: var(--navy);
  border-color: var(--navy);
}
.btn-outline-navy:hover { background: var(--navy); color: var(--white); }

.btn-blue {
  background: var(--blue);
  color: var(--white);
  border-color: var(--blue);
  box-shadow: var(--shadow-blue);
}
.btn-blue:hover { background: var(--blue-light); border-color: var(--blue-light); }

.btn-green {
  background: var(--green);
  color: var(--white);
  border-color: var(--green);
  box-shadow: 0 4px 20px rgba(37,211,102,.3);
}
.btn-green:hover { background: #1ebe5d; border-color: #1ebe5d; }

.btn-sm { padding: 10px 20px; font-size: .875rem; }
.btn-lg { padding: 16px 36px; font-size: 1.1rem; }

/* ── Navbar ────────────────────────────────────────────────── */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  z-index: var(--z-sticky);
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--gray-200);
  transition: box-shadow var(--transition-slow);
}
.navbar .container {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.navbar.scrolled {
  box-shadow: 0 2px 24px rgba(0,0,0,.10);
  border-bottom-color: var(--gray-200);
}

.navbar-logo {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-display);
  font-size: 1.45rem;
  letter-spacing: .04em;
  color: var(--navy);
  flex-shrink: 0;
  cursor: pointer;
}

/* Brand name text next to logo */
.nav-brand-name {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.nav-brand-name .brand-main {
  font-family: var(--font-display);
  font-size: 1.55rem;
  letter-spacing: .06em;
  color: var(--navy);
  white-space: nowrap;
}
.nav-brand-name .brand-sub {
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-dark);
  white-space: nowrap;
}

/* Real logo images — both logos are portrait with text below icon */
.nav-logo-img {
  height: 118px;
  width: auto;
  object-fit: contain;
  display: block;
}
/* solar logo has white bg in PNG — multiply makes white areas transparent on light navbar */
.nav-logo-img:not(.nav-logo-dark) {
  mix-blend-mode: multiply;
  border-radius: 0;
}
/* construction logo: dark bg blends into navy navbar */
.nav-logo-dark {
  background: transparent;
  padding: 0;
}
.footer-logo-img {
  height: 120px;
  width: auto;
  object-fit: contain;
  display: block;
  margin-bottom: 12px;
}
.footer-logo-img:not(.footer-logo-dark) {
  border-radius: 8px;
}
.footer-logo-dark {
  background: transparent;
  padding: 0;
}
.logo-icon {
  width: 36px; height: 36px;
  background: linear-gradient(135deg, var(--gold), #ffca3a);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.logo-icon svg { width: 20px; height: 20px; fill: var(--navy); }
.brand-blue { color: var(--blue-light); }
.brand-gold { color: var(--gold); }

.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: 20px;
}
.nav-links a {
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  font-size: .875rem;
  font-weight: 500;
  white-space: nowrap;
  color: var(--gray-600);
  transition: color var(--transition), background var(--transition);
}
.nav-links a:hover,
.nav-links a.active { color: var(--navy); background: var(--gray-100); }

.nav-cta { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

.btn-call {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  color: var(--navy);
  font-family: var(--font-body);
  font-size: .875rem;
  font-weight: 600;
  white-space: nowrap;
  transition: background var(--transition), border-color var(--transition);
}
.btn-call:hover {
  background: var(--gray-200);
  border-color: var(--gray-400);
}
.btn-call svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  animation: ring 2.5s ease-in-out infinite;
}
@keyframes ring {
  0%, 100% { transform: rotate(0deg); }
  10%       { transform: rotate(-15deg); }
  20%       { transform: rotate(15deg); }
  30%       { transform: rotate(-10deg); }
  40%       { transform: rotate(10deg); }
  50%       { transform: rotate(0deg); }
}

.btn-construction {
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-size: .85rem;
  font-weight: 700;
  color: var(--gold);
  border: 1.5px solid rgba(245,166,35,.6);
  background: transparent;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
  cursor: pointer;
  white-space: nowrap;
  letter-spacing: .02em;
}
.btn-construction:hover,
.btn-construction.active-brand { background: var(--gold); color: var(--navy); border-color: var(--gold); }

/* Hamburger */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background var(--transition);
}
.hamburger:hover { background: var(--gray-100); }
.hamburger span {
  display: block;
  width: 24px; height: 2px;
  background: var(--navy);
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  display: none;
  position: fixed;
  top: var(--nav-h);
  left: 0; right: 0;
  background: rgba(255,255,255,.98);
  backdrop-filter: blur(16px);
  padding: 20px 24px 28px;
  z-index: var(--z-overlay);
  border-top: 1px solid var(--gray-200);
  flex-direction: column;
  gap: 4px;
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  font-size: .975rem;
  font-weight: 500;
  color: var(--gray-600);
  transition: background var(--transition), color var(--transition);
}
.mobile-menu a:hover { background: var(--gray-100); color: var(--navy); }
.mobile-menu .btn-construction { width: 100%; text-align: center; margin-top: 12px; padding: 13px 16px; border-radius: var(--radius-sm); }

.page-content { padding-top: var(--nav-h); }

/* ── Hero ──────────────────────────────────────────────────── */
.hero {
  position: relative;
  background: linear-gradient(135deg, #fffbf0 0%, #fff8e6 50%, #fef3d0 100%);
  overflow: hidden;
  padding: 100px 0 88px;
  min-height: calc(100vh - var(--nav-h));
  display: flex;
  align-items: center;
}

/* Gold sun ray burst (top right) */
.hero::before {
  content: '';
  position: absolute;
  top: -20%; right: -8%;
  width: 820px; height: 820px;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,   rgba(245,166,35,.10) 3deg,  transparent 6deg,
    transparent 20deg,  rgba(245,166,35,.07) 23deg,  transparent 26deg,
    transparent 40deg,  rgba(245,166,35,.09) 43deg,  transparent 46deg,
    transparent 60deg,  rgba(245,166,35,.07) 63deg,  transparent 66deg,
    transparent 80deg,  rgba(245,166,35,.10) 83deg,  transparent 86deg,
    transparent 100deg, rgba(245,166,35,.07) 103deg, transparent 106deg,
    transparent 120deg, rgba(245,166,35,.09) 123deg, transparent 126deg,
    transparent 140deg, rgba(245,166,35,.07) 143deg, transparent 146deg,
    transparent 160deg, rgba(245,166,35,.10) 163deg, transparent 166deg
  );
  border-radius: 50%;
  pointer-events: none;
  animation: rayRotate 30s linear infinite;
}

/* Blue ray streaks overlay */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(112deg, transparent 30%, rgba(30,111,255,.06) 31%, rgba(30,111,255,.06) 32%, transparent 33%),
    linear-gradient(118deg, transparent 45%, rgba(30,111,255,.04) 46%, rgba(30,111,255,.04) 47%, transparent 48%),
    linear-gradient(105deg, transparent 60%, rgba(30,111,255,.05) 61%, rgba(30,111,255,.05) 62%, transparent 63%),
    linear-gradient(125deg, transparent 20%, rgba(30,111,255,.03) 21%, rgba(30,111,255,.03) 22.5%, transparent 23.5%),
    radial-gradient(ellipse 60% 55% at 78% 50%, rgba(245,166,35,.07) 0%, transparent 70%);
  pointer-events: none;
}

@keyframes rayRotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── Floating energy orbs ─────────────────────────── */
.orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  animation: orbFloat linear infinite;
}
.orb-1 {
  width: 14px; height: 14px;
  background: radial-gradient(circle, rgba(30,111,255,.7), rgba(30,111,255,.1));
  box-shadow: 0 0 16px 4px rgba(30,111,255,.3);
  top: 15%; left: 60%;
  animation-duration: 6s;
  animation-delay: 0s;
}
.orb-2 {
  width: 9px; height: 9px;
  background: radial-gradient(circle, rgba(245,166,35,.9), rgba(245,166,35,.2));
  box-shadow: 0 0 12px 3px rgba(245,166,35,.4);
  top: 65%; left: 72%;
  animation-duration: 8s;
  animation-delay: -2s;
}
.orb-3 {
  width: 11px; height: 11px;
  background: radial-gradient(circle, rgba(30,111,255,.6), rgba(30,111,255,.05));
  box-shadow: 0 0 14px 3px rgba(30,111,255,.25);
  top: 40%; left: 88%;
  animation-duration: 7s;
  animation-delay: -4s;
}
.orb-4 {
  width: 7px; height: 7px;
  background: radial-gradient(circle, rgba(245,166,35,1), rgba(245,166,35,.3));
  box-shadow: 0 0 10px 2px rgba(245,166,35,.5);
  top: 80%; left: 55%;
  animation-duration: 5s;
  animation-delay: -1s;
}
@keyframes orbFloat {
  0%   { transform: translateY(0px) scale(1); opacity: .8; }
  50%  { transform: translateY(-28px) scale(1.15); opacity: 1; }
  100% { transform: translateY(0px) scale(1); opacity: .8; }
}

/* ── 3D Solar Scene ───────────────────────────────── */
.solar-scene {
  position: relative;
  width: 100%;
  max-width: 480px;
  height: 420px;
  margin: 0 auto;
  perspective: 900px;
}

/* Energy pulse rings behind panel */
.energy-ring {
  position: absolute;
  border-radius: 50%;
  border: 2px solid rgba(30,111,255,.18);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: ringPulse 3s ease-out infinite;
}
.ring-1 { width: 200px; height: 200px; animation-delay: 0s; }
.ring-2 { width: 300px; height: 300px; animation-delay: 1s; }
.ring-3 { width: 400px; height: 400px; animation-delay: 2s; }
@keyframes ringPulse {
  0%   { opacity: .6; transform: translate(-50%, -50%) scale(.85); }
  100% { opacity: 0;  transform: translate(-50%, -50%) scale(1.2); }
}

/* 3D Solar Panel */
.solar-panel-3d {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -55%) rotateX(25deg) rotateY(-18deg) rotateZ(2deg);
  transform-style: preserve-3d;
  width: 300px; height: 210px;
  transition: transform 0.4s ease;
  cursor: pointer;
  animation: panelFloat 5s ease-in-out infinite;
}
.solar-panel-3d:hover {
  transform: translate(-50%, -55%) rotateX(18deg) rotateY(-8deg) rotateZ(1deg) scale(1.04);
}
@keyframes panelFloat {
  0%, 100% { transform: translate(-50%, -55%) rotateX(25deg) rotateY(-18deg) rotateZ(2deg) translateY(0); }
  50%       { transform: translate(-50%, -55%) rotateX(25deg) rotateY(-18deg) rotateZ(2deg) translateY(-12px); }
}

.panel-face {
  position: absolute;
  transform-style: preserve-3d;
}

/* Main panel surface */
.panel-top {
  width: 300px; height: 210px;
  background: linear-gradient(135deg, #1a3a6e 0%, #0d2654 40%, #1e4080 100%);
  border: 2px solid rgba(30,111,255,.5);
  border-radius: 6px;
  top: 0; left: 0;
  overflow: hidden;
  box-shadow:
    0 0 40px rgba(30,111,255,.3),
    inset 0 0 30px rgba(255,255,255,.04),
    0 20px 60px rgba(0,0,0,.25);
}

/* Solar cell grid */
.panel-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(6, 1fr);
  gap: 3px;
  padding: 10px;
  width: 100%; height: 100%;
}
.panel-cell {
  background: linear-gradient(135deg, #1a4090 0%, #0f2d6e 50%, #1d3d82 100%);
  border-radius: 2px;
  border: 1px solid rgba(30,111,255,.25);
  position: relative;
  overflow: hidden;
  transition: background 0.3s;
}
.panel-cell::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
  animation: cellShimmer 3s ease-in-out infinite;
}
.panel-cell:nth-child(odd)::after  { animation-delay: 0s; }
.panel-cell:nth-child(even)::after { animation-delay: 1.5s; }
@keyframes cellShimmer {
  0%   { left: -100%; }
  50%  { left: 150%; }
  100% { left: 150%; }
}

/* Shimmer reflection on panel */
.panel-shimmer {
  position: absolute;
  top: -40%; left: -30%;
  width: 80%; height: 80%;
  background: radial-gradient(ellipse, rgba(255,255,255,.12) 0%, transparent 70%);
  transform: rotate(-20deg);
  pointer-events: none;
  animation: shimmerMove 4s ease-in-out infinite;
}
@keyframes shimmerMove {
  0%, 100% { top: -40%; left: -30%; opacity: .8; }
  50%       { top: -10%; left: 10%;  opacity: .4; }
}

/* Panel right edge (3D depth) */
.panel-right {
  width: 18px; height: 210px;
  background: linear-gradient(180deg, #0a1e4a 0%, #061535 100%);
  top: 0;
  left: 300px;
  transform: rotateY(90deg);
  transform-origin: left center;
  border-radius: 0 4px 4px 0;
}

/* Panel bottom edge */
.panel-bottom {
  width: 300px; height: 18px;
  background: linear-gradient(90deg, #0a1e4a 0%, #061535 100%);
  top: 210px; left: 0;
  transform: rotateX(-90deg);
  transform-origin: top center;
}

/* Mount stand */
.panel-stand {
  position: absolute;
  bottom: 28px; left: 50%;
  transform: translateX(-50%);
  width: 180px;
}
.stand-leg {
  position: absolute;
  bottom: 0;
  width: 6px; height: 60px;
  background: linear-gradient(180deg, #c0a060, #8a6e30);
  border-radius: 3px;
}
.stand-left  { left: 30px;  transform: rotate(-12deg); }
.stand-right { right: 30px; transform: rotate(12deg); }
.stand-base {
  position: absolute;
  bottom: -6px; left: 10px;
  width: 160px; height: 12px;
  background: linear-gradient(90deg, #8a6e30, #c0a060, #8a6e30);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
}

/* Floating info badges */
.info-badge {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 12px;
  padding: 10px 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.08);
  pointer-events: none;
  animation: badgeFloat ease-in-out infinite;
}
.info-badge svg { width: 18px; height: 18px; flex-shrink: 0; }
.badge-val  { display: block; font-family: var(--font-display); font-size: 1rem; color: var(--navy); line-height: 1; }
.badge-unit { display: block; font-size: .65rem; color: var(--gray-600); font-weight: 500; letter-spacing: .04em; text-transform: uppercase; }

.badge-kwh {
  top: 8%; left: -4%;
  animation-duration: 4s;
  animation-delay: 0s;
}
.badge-kwh svg { color: var(--blue); }

.badge-save {
  bottom: 22%; right: -5%;
  animation-duration: 5s;
  animation-delay: -1.5s;
}
.badge-save svg { color: var(--gold-dark); }

.badge-cert {
  top: 58%; left: -8%;
  animation-duration: 6s;
  animation-delay: -3s;
}
.badge-cert svg { color: #22c55e; stroke: #22c55e; }

@keyframes badgeFloat {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-8px); }
}

/* Two-column hero layout */
.hero-grid {
  display: grid;
  grid-template-columns: 55% 45%;
  align-items: center;
  gap: 40px;
}

.hero-content {
  position: relative;
  z-index: 2;
}

/* Right side image */
.hero-visual {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
}
.hero-img-wrap {
  position: relative;
  width: 100%;
  max-width: 540px;
  border-radius: var(--radius-lg);
  overflow: visible;
}
.hero-img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  display: block;
  box-shadow: 0 24px 64px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.08);
}
.hero-img-badge {
  position: absolute;
  bottom: -18px;
  left: 24px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--gold);
  color: var(--navy);
  font-family: var(--font-body);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-gold);
}
.hero-img-badge svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(245,166,35,.12);
  border: 1px solid rgba(245,166,35,.35);
  border-radius: 100px;
  padding: 6px 16px;
  font-size: .78rem;
  font-weight: 700;
  color: var(--gold-dark);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 24px;
}
.dot {
  width: 6px; height: 6px;
  background: var(--gold);
  border-radius: 50%;
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .5; transform: scale(.75); }
}

.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 6.5vw, 5.2rem);
  line-height: 1.0;
  color: var(--navy);
  margin-bottom: 20px;
}
.hero h1 .accent { color: var(--gold-dark); }

.hero-sub {
  font-size: clamp(.95rem, 1.8vw, 1.1rem);
  color: var(--gray-600);
  line-height: 1.75;
  margin-bottom: 36px;
  max-width: 500px;
}

.hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 56px;
}

.hero-stats {
  display: flex;
  gap: 0;
  flex-wrap: wrap;
  border-top: 1px solid var(--gray-200);
  padding-top: 40px;
}
.stat-item {
  flex: 1;
  min-width: 110px;
  padding-right: 28px;
  border-right: 1px solid var(--gray-200);
}
.stat-item:last-child { border-right: none; padding-right: 0; }
.stat-number {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  color: var(--gold-dark);
  line-height: 1;
  display: block;
  margin-bottom: 4px;
}
.stat-label {
  font-size: .78rem;
  color: var(--gray-600);
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
}

/* Construction hero */
.hero-construction {
  background: linear-gradient(135deg, #1a1000 0%, #2d1f00 40%, #1e1500 100%);
}
.hero-construction::before {
  background: conic-gradient(
    from 0deg,
    transparent 0deg,   rgba(245,166,35,.09) 3deg,  transparent 6deg,
    transparent 20deg,  rgba(245,166,35,.06) 23deg,  transparent 26deg,
    transparent 40deg,  rgba(245,166,35,.08) 43deg,  transparent 46deg,
    transparent 60deg,  rgba(245,166,35,.06) 63deg,  transparent 66deg,
    transparent 80deg,  rgba(245,166,35,.09) 83deg,  transparent 86deg,
    transparent 100deg, rgba(245,166,35,.06) 103deg, transparent 106deg,
    transparent 120deg, rgba(245,166,35,.08) 123deg, transparent 126deg,
    transparent 140deg, rgba(245,166,35,.06) 143deg, transparent 146deg,
    transparent 160deg, rgba(245,166,35,.09) 163deg, transparent 166deg
  );
}
.hero-construction::after {
  background:
    linear-gradient(112deg, transparent 30%, rgba(245,166,35,.05) 31%, rgba(245,166,35,.05) 32%, transparent 33%),
    linear-gradient(118deg, transparent 45%, rgba(245,166,35,.03) 46%, rgba(245,166,35,.03) 47%, transparent 48%),
    linear-gradient(105deg, transparent 60%, rgba(245,166,35,.04) 61%, rgba(245,166,35,.04) 62%, transparent 63%),
    radial-gradient(ellipse 60% 55% at 78% 50%, rgba(245,166,35,.08) 0%, transparent 70%);
}
.hero-construction .hero-eyebrow {
  background: rgba(245,166,35,.1);
  border-color: rgba(245,166,35,.25);
  color: var(--gold);
}
.hero-construction .hero-stats { border-top-color: rgba(255,255,255,.1); }
.hero-construction .stat-item  { border-right-color: rgba(255,255,255,.1); }
.hero-construction .stat-label { color: rgba(255,255,255,.5); }
.hero-construction h1 { color: var(--white); }
.hero-construction .hero-sub { color: rgba(255,255,255,.65); }

/* Construction orbs — amber tones */
.orb-c1 {
  width: 13px; height: 13px;
  background: radial-gradient(circle, rgba(245,166,35,.9), rgba(245,166,35,.2));
  box-shadow: 0 0 16px 4px rgba(245,166,35,.4);
  top: 18%; left: 62%;
  animation: orbFloat 6s ease-in-out infinite;
  animation-delay: 0s;
}
.orb-c2 {
  width: 9px; height: 9px;
  background: radial-gradient(circle, rgba(255,200,80,.9), rgba(255,200,80,.2));
  box-shadow: 0 0 12px 3px rgba(255,200,80,.4);
  top: 70%; left: 75%;
  animation: orbFloat 8s ease-in-out infinite;
  animation-delay: -2s;
}
.orb-c3 {
  width: 11px; height: 11px;
  background: radial-gradient(circle, rgba(245,166,35,.7), rgba(245,166,35,.1));
  box-shadow: 0 0 14px 3px rgba(245,166,35,.3);
  top: 38%; left: 90%;
  animation: orbFloat 7s ease-in-out infinite;
  animation-delay: -4s;
}
.orb-c4 {
  width: 7px; height: 7px;
  background: radial-gradient(circle, rgba(255,220,100,1), rgba(255,220,100,.3));
  box-shadow: 0 0 10px 2px rgba(255,220,100,.5);
  top: 82%; left: 58%;
  animation: orbFloat 5s ease-in-out infinite;
  animation-delay: -1s;
}

/* Construction energy rings — amber */
.ring-c1 { width: 200px; height: 200px; border-color: rgba(245,166,35,.2); animation: ringPulse 3s ease-out infinite; animation-delay: 0s; }
.ring-c2 { width: 300px; height: 300px; border-color: rgba(245,166,35,.14); animation: ringPulse 3s ease-out infinite; animation-delay: 1s; }
.ring-c3 { width: 400px; height: 400px; border-color: rgba(245,166,35,.08); animation: ringPulse 3s ease-out infinite; animation-delay: 2s; }

/* ── 3D Building ──────────────────────────────────── */
.building-3d {
  position: absolute;
  top: 48%; left: 48%;
  transform: translate(-50%, -54%) rotateX(12deg) rotateY(-20deg);
  transform-style: preserve-3d;
  width: 180px; height: 260px;
  transition: transform 0.4s ease;
  cursor: pointer;
  animation: bldFloat 5s ease-in-out infinite;
}
.building-3d:hover {
  transform: translate(-50%, -54%) rotateX(8deg) rotateY(-10deg) scale(1.04);
}
@keyframes bldFloat {
  0%, 100% { transform: translate(-50%, -54%) rotateX(12deg) rotateY(-20deg) translateY(0); }
  50%       { transform: translate(-50%, -54%) rotateX(12deg) rotateY(-20deg) translateY(-12px); }
}

.bld-face { position: absolute; transform-style: preserve-3d; }

/* Main front face */
.bld-front {
  width: 180px; height: 260px;
  background: linear-gradient(160deg, #c8a96e 0%, #a07840 40%, #8a6030 100%);
  border: 1.5px solid rgba(255,200,80,.3);
  border-radius: 4px 4px 0 0;
  top: 0; left: 0;
  overflow: hidden;
  box-shadow: 0 0 40px rgba(245,166,35,.2), inset 0 0 30px rgba(255,255,255,.05), 0 20px 60px rgba(0,0,0,.4);
}
.bld-shimmer {
  position: absolute;
  top: -30%; left: -20%;
  width: 70%; height: 70%;
  background: radial-gradient(ellipse, rgba(255,255,255,.10) 0%, transparent 70%);
  transform: rotate(-20deg);
  pointer-events: none;
  animation: shimmerMove 4s ease-in-out infinite;
}

/* Side face */
.bld-side {
  width: 50px; height: 260px;
  background: linear-gradient(180deg, #7a5020 0%, #5a3a10 100%);
  top: 0; left: 180px;
  transform: rotateY(90deg);
  transform-origin: left center;
}

/* Roof */
.bld-top {
  width: 180px; height: 50px;
  background: linear-gradient(135deg, #d4b060 0%, #b08030 100%);
  top: -50px; left: 0;
  transform: rotateX(90deg);
  transform-origin: bottom center;
}
.bld-roof-line {
  width: 100%; height: 3px;
  background: rgba(255,220,80,.4);
  position: absolute; top: 50%;
}

/* Windows grid */
.bld-windows {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 16px 14px 10px;
  height: calc(100% - 40px);
}
.bld-win {
  background: rgba(255,240,180,.15);
  border: 1px solid rgba(255,220,80,.25);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
  animation: winGlow 3s ease-in-out infinite;
}
.bld-win:nth-child(odd)  { animation-delay: 0s; }
.bld-win:nth-child(even) { animation-delay: 1.5s; }
@keyframes winGlow {
  0%, 100% { background: rgba(255,240,180,.12); }
  50%       { background: rgba(255,240,180,.28); }
}
.bld-win-sm { width: auto; height: auto; }
.bld-door {
  grid-column: 2;
  background: rgba(80,40,10,.6);
  border: 1px solid rgba(255,200,80,.2);
  border-radius: 2px 2px 0 0;
  height: 36px;
  align-self: end;
}

/* Side wing */
.bld-wing {
  position: absolute;
  top: 80px; left: -80px;
  width: 80px; height: 140px;
  transform-style: preserve-3d;
}
.bld-wing-front {
  width: 80px; height: 140px;
  background: linear-gradient(160deg, #b09050 0%, #8a6830 100%);
  border: 1px solid rgba(255,200,80,.2);
  top: 0; left: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 12px;
  overflow: hidden;
}
.bld-wing-side {
  width: 24px; height: 140px;
  background: linear-gradient(180deg, #6a4820 0%, #4a2800 100%);
  top: 0; left: -24px;
  transform: rotateY(-90deg);
  transform-origin: right center;
}
.bld-wing-top {
  width: 80px; height: 24px;
  background: linear-gradient(90deg, #b08030, #d4a850);
  top: -24px; left: 0;
  transform: rotateX(90deg);
  transform-origin: bottom center;
}

/* Ground shadow */
.bld-ground {
  position: absolute;
  bottom: 20px; left: 50%;
  transform: translateX(-50%);
  width: 220px; height: 16px;
  background: radial-gradient(ellipse, rgba(0,0,0,.3) 0%, transparent 70%);
  border-radius: 50%;
}

/* Construction badge colours */
.badge-projects svg { color: var(--gold-dark); stroke: var(--gold-dark); }
.badge-sqft svg     { color: #b08030; stroke: #b08030; }
.badge-turnkey svg  { color: #22c55e; stroke: #22c55e; }

/* ── FAQ ───────────────────────────────────────────────────── */
.faq-section { background: var(--gray-50); }

.faq-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 820px;
  margin: 0 auto 32px;
}

.faq-item {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: box-shadow var(--transition-base);
}
.faq-item:hover { box-shadow: var(--shadow-sm); }
.faq-item.open  { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(245,166,35,.1); }

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 24px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.4;
  transition: color var(--transition-base);
}
.faq-question:hover { color: var(--gold-dark); }
.faq-item.open .faq-question { color: var(--gold-dark); }

.faq-icon {
  width: 20px; height: 20px;
  flex-shrink: 0;
  color: var(--gold-dark);
  transition: transform 0.3s ease;
}
.faq-item.open .faq-icon { transform: rotate(180deg); }

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, padding 0.35s ease;
}
.faq-answer p {
  padding: 0 24px 18px;
  font-size: .95rem;
  color: var(--gray-600);
  line-height: 1.7;
  margin: 0;
}
.faq-item.open .faq-answer { max-height: 300px; }

.faq-note {
  max-width: 820px;
  margin: 0 auto;
  font-size: .82rem;
  color: var(--gray-500);
  line-height: 1.6;
  text-align: center;
  font-style: italic;
}

/* ── Card Base ─────────────────────────────────────────────── */
.card {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gray-200);
  padding: 32px;
  transition: transform var(--transition-slow), box-shadow var(--transition-slow);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

.card-icon {
  width: 52px; height: 52px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.ci-blue  { background: rgba(30,111,255,.1);  color: var(--blue); }
.ci-gold  { background: rgba(245,166,35,.12); color: var(--gold-dark); }
.ci-navy  { background: rgba(10,22,40,.08);   color: var(--navy); }
.ci-green { background: rgba(37,211,102,.1);  color: #16a34a; }

.card h3 { font-family: var(--font-display); font-size: 1.4rem; color: var(--navy); margin-bottom: 10px; }
.card p  { color: var(--gray-600); font-size: .95rem; line-height: 1.65; }

/* ── Why Solar / Feature cards ─────────────────────────────── */
.why-section { background: var(--gray-50); }
.why-card { text-align: center; }
.why-card .card-icon { margin-inline: auto; }

/* ── Package Section ───────────────────────────────────────── */
.package-section {
  background: var(--navy);
  position: relative;
  overflow: hidden;
}
.package-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 55% 75% at 80% 50%, rgba(30,111,255,.13) 0%, transparent 65%);
  pointer-events: none;
}
.package-section .section-header h2 { color: var(--white); }
.package-section .section-header .eyebrow { color: var(--gold); }
.package-section .section-header p { color: rgba(255,255,255,.6); }
.package-section .divider { background: linear-gradient(90deg, var(--gold), var(--blue-light)); }

.package-card {
  position: relative;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-xl);
  padding: 48px;
  max-width: 880px;
  margin-inline: auto;
  backdrop-filter: blur(8px);
}
.package-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, var(--gold), #ffca3a);
  color: var(--navy);
  padding: 6px 18px;
  border-radius: 100px;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.package-layout {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 48px;
  align-items: start;
}

.package-title {
  font-family: var(--font-display);
  font-size: 2.2rem;
  color: var(--white);
  margin-bottom: 6px;
}
.package-subtitle { color: rgba(255,255,255,.5); font-size: .9rem; margin-bottom: 28px; }

.includes-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 32px; }
.includes-item {
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(255,255,255,.82);
  font-size: .95rem;
}
.check-icon {
  width: 22px; height: 22px;
  background: rgba(30,111,255,.18);
  border: 1px solid rgba(30,111,255,.35);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--blue-light);
}
.check-icon svg { width: 12px; height: 12px; }

.price-box {
  background: rgba(30,111,255,.08);
  border: 1px solid rgba(30,111,255,.2);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  text-align: center;
  min-width: 210px;
}
.price-original {
  font-size: 1.05rem;
  color: rgba(255,255,255,.3);
  text-decoration: line-through;
  margin-bottom: 2px;
}
.price-effective-label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 6px;
}
.price-effective {
  font-family: var(--font-display);
  font-size: 3rem;
  color: var(--white);
  line-height: 1;
  margin-bottom: 20px;
}

.subsidy-breakdown {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
}
.subsidy-row {
  display: flex;
  justify-content: space-between;
  font-size: .82rem;
  color: rgba(255,255,255,.5);
}
.subsidy-row.total {
  color: var(--gold);
  font-weight: 700;
  font-size: .92rem;
  padding-top: 8px;
  margin-top: 4px;
  border-top: 1px solid rgba(245,166,35,.2);
}

/* Hybrid package badge */
.package-badge-hybrid {
  background: linear-gradient(135deg, #1e6fff, #0d52cc);
  color: var(--white);
}

/* Hybrid price box */
.price-box-hybrid {
  background: rgba(30,111,255,.12);
  border-color: rgba(30,111,255,.3);
}

/* Savings table */
.savings-table-wrap { background: var(--white); border-radius: var(--radius-lg); padding: 32px; box-shadow: var(--shadow-sm); border: 1px solid var(--gray-200); }
.savings-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .95rem;
}
.savings-table th {
  background: var(--navy);
  color: var(--white);
  padding: 14px 18px;
  text-align: center;
  font-family: var(--font-display);
  font-size: .85rem;
  letter-spacing: .04em;
}
.savings-table th:first-child { border-radius: var(--radius) 0 0 0; }
.savings-table th:last-child  { border-radius: 0 var(--radius) 0 0; }
.savings-table td {
  padding: 12px 18px;
  text-align: center;
  border-bottom: 1px solid var(--gray-200);
  color: var(--gray-700);
}
.savings-table tbody tr:hover td { background: var(--gray-50); }
.savings-table tr.savings-highlight td {
  background: rgba(245,166,35,.08);
  color: var(--navy);
  font-weight: 600;
}

/* ── Services Section ──────────────────────────────────────── */
.services-section { background: var(--white); }

/* ── Process Section ───────────────────────────────────────── */
.process-section { background: var(--gray-50); }

.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  position: relative;
}
.process-grid::before {
  content: '';
  position: absolute;
  top: 27px;
  left: calc(12.5% + 27px);
  right: calc(12.5% + 27px);
  height: 2px;
  background: linear-gradient(90deg, var(--blue), var(--gold));
}
.process-step {
  text-align: center;
  position: relative;
  z-index: 1;
  padding: 16px;
}
.step-num {
  width: 54px; height: 54px;
  background: var(--navy);
  color: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.4rem;
  margin: 0 auto 18px;
  border: 3px solid var(--gray-50);
  box-shadow: 0 0 0 2px var(--blue);
}
.process-step h4 { font-family: var(--font-display); font-size: 1.15rem; color: var(--navy); margin-bottom: 8px; }
.process-step p  { font-size: .875rem; color: var(--gray-600); line-height: 1.55; }

/* ── Preview / Recent Work ─────────────────────────────────── */
.preview-section { background: var(--gray-50); }

/* ── Project Cards ─────────────────────────────────────────── */
.project-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gray-200);
  transition: transform var(--transition-slow), box-shadow var(--transition-slow);
  cursor: pointer;
}
.project-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }

.project-thumb {
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.thumb-solar        { background: linear-gradient(135deg, #0a1628 0%, #0d2151 45%, #1a3d8a 100%); }
.thumb-construction { background: linear-gradient(135deg, #2d1a00 0%, #5c3a0e 45%, #8b5e20 100%); }

.project-img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
}

/* Portfolio dynamic loading */
.portfolio-loading {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 60px 0;
  color: var(--gray-500);
}
.loading-spinner {
  width: 40px; height: 40px;
  border: 3px solid var(--gray-200);
  border-top-color: var(--gold-dark);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.portfolio-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 0;
  color: var(--gray-500);
}

/* Placeholder card when no image */
.project-placeholder {
  width: 100%;
  aspect-ratio: 4/3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: linear-gradient(135deg, var(--gray-100) 0%, #f0ead8 100%);
  color: var(--gray-500);
}
.placeholder-icon svg { opacity: .5; }
.placeholder-loc {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: .8rem;
  color: var(--gray-600);
}
.placeholder-loc svg { width: 14px; height: 14px; }

.thumb-icon {
  opacity: .2;
  width: 72px; height: 72px;
  color: var(--white);
}
.thumb-icon svg { width: 100%; height: 100%; fill: currentColor; }

.project-info { padding: 20px 22px 22px; }

.project-tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 100px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.tag-solar        { background: rgba(30,111,255,.1);  color: var(--blue); }
.tag-ongrid       { background: rgba(30,111,255,.08); color: #1557cc; }
.tag-residential  { background: rgba(245,166,35,.1);  color: var(--gold-dark); }
.tag-commercial   { background: rgba(10,22,40,.07);   color: var(--navy); }
.tag-construction { background: rgba(245,166,35,.12); color: var(--gold-dark); }

.project-info h4 { font-family: var(--font-display); font-size: 1.15rem; color: var(--navy); margin-bottom: 8px; line-height: 1.2; }

.project-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--gray-100);
}
.project-location {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: .82rem;
  color: var(--gray-600);
}
.project-location svg { width: 13px; height: 13px; flex-shrink: 0; color: var(--blue); }
.project-capacity { font-size: .82rem; font-weight: 700; color: var(--navy); }

/* ── Portfolio Page ────────────────────────────────────────── */
.portfolio-hero {
  background: var(--navy);
  padding: 80px 0 56px;
  text-align: center;
}
.portfolio-hero h1 { font-family: var(--font-display); font-size: clamp(2.4rem, 5vw, 4rem); color: var(--white); margin-bottom: 12px; }
.portfolio-hero p  { color: rgba(255,255,255,.6); font-size: 1.1rem; }

.portfolio-section { background: var(--gray-50); padding-block: 72px; }

.tabs-wrapper { margin-bottom: 52px; }
.tab-header {
  display: flex;
  align-items: center;
  gap: 0;
  border-bottom: 2px solid var(--gray-200);
  margin-bottom: 28px;
}
.tab-main-label {
  padding: 14px 24px;
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--navy);
  letter-spacing: .04em;
  border-bottom: 3px solid var(--navy);
  margin-bottom: -2px;
}

.subtabs { display: flex; gap: 10px; flex-wrap: wrap; }
.subtab-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  border-radius: 100px;
  border: 2px solid var(--gray-200);
  font-size: .9rem;
  font-weight: 600;
  color: var(--gray-600);
  background: var(--white);
  cursor: pointer;
  transition: all var(--transition);
}
.subtab-btn:hover { border-color: var(--blue); color: var(--blue); }
.subtab-btn.active { background: var(--blue); border-color: var(--blue); color: var(--white); box-shadow: var(--shadow-blue); }
.subtab-btn.active.tab-construction { background: var(--gold-dark); border-color: var(--gold-dark); box-shadow: var(--shadow-gold); }
.subtab-btn svg { width: 16px; height: 16px; }

.tab-panel { display: none; }
.tab-panel.active { display: block; }

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

/* ── Contact Page ──────────────────────────────────────────── */
.contact-hero {
  background: var(--navy);
  padding: 80px 0 56px;
  text-align: center;
}
.contact-hero h1 { font-family: var(--font-display); font-size: clamp(2.4rem, 5vw, 4rem); color: var(--white); margin-bottom: 12px; }
.contact-hero p  { color: rgba(255,255,255,.6); font-size: 1.05rem; }

.contact-section { background: var(--gray-50); padding-block: 72px; }

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 40px;
  align-items: start;
}
.contact-info-col { display: flex; flex-direction: column; gap: 14px; }

.contact-card {
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 20px 22px;
  border: 1px solid var(--gray-200);
  display: flex;
  align-items: flex-start;
  gap: 16px;
  transition: box-shadow var(--transition), transform var(--transition);
}
.contact-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

.cc-icon {
  width: 44px; height: 44px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cc-label {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--gray-400);
  margin-bottom: 3px;
}
.cc-value {
  font-size: .95rem;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.4;
}

.company-box {
  background: var(--navy);
  border-radius: var(--radius-md);
  padding: 24px;
  margin-top: 4px;
}
.company-box h4 { font-family: var(--font-display); font-size: 1.15rem; color: var(--white); margin-bottom: 14px; }
.company-meta-row { display: flex; flex-direction: column; gap: 7px; }
.company-meta-item { font-size: .85rem; color: rgba(255,255,255,.55); }
.company-meta-item strong { color: rgba(255,255,255,.88); }

.form-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 40px;
  border: 1px solid var(--gray-200);
  box-shadow: var(--shadow-sm);
}
.form-card h3 { font-family: var(--font-display); font-size: 1.7rem; color: var(--navy); margin-bottom: 6px; }
.form-sub { color: var(--gray-600); font-size: .9rem; margin-bottom: 28px; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.form-group label { font-size: .875rem; font-weight: 600; color: var(--gray-800); }

.form-group input,
.form-group select,
.form-group textarea {
  padding: 12px 16px;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: .95rem;
  color: var(--gray-800);
  background: var(--white);
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
  width: 100%;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(30,111,255,.12);
}
.form-group .error-input { border-color: var(--red) !important; }
.err-msg { font-size: .78rem; color: var(--red); display: none; margin-top: 2px; }
.has-error .err-msg { display: block; }
.form-group textarea { resize: vertical; min-height: 120px; }

.form-success {
  display: none;
  text-align: center;
  padding: 48px 24px;
}
.form-success.show { display: block; }
.success-icon {
  width: 68px; height: 68px;
  background: rgba(37,211,102,.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  color: #16a34a;
}
.success-icon svg { width: 32px; height: 32px; }
.form-success h4 { font-family: var(--font-display); font-size: 1.7rem; color: var(--navy); margin-bottom: 8px; }
.form-success p  { color: var(--gray-600); }

/* ── Footer ────────────────────────────────────────────────── */
.footer {
  background: var(--navy);
  padding: 64px 0 32px;
  color: rgba(255,255,255,.6);
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  margin-bottom: 32px;
}
.footer-brand-desc {
  font-size: .875rem;
  line-height: 1.7;
  color: rgba(255,255,255,.45);
  max-width: 280px;
  margin: 16px 0 20px;
}
.footer-col h5 {
  font-family: var(--font-display);
  font-size: .95rem;
  letter-spacing: .1em;
  color: var(--white);
  margin-bottom: 16px;
  text-transform: uppercase;
}
.footer-col ul { display: flex; flex-direction: column; gap: 8px; }
.footer-col ul li a {
  font-size: .875rem;
  color: rgba(255,255,255,.45);
  transition: color var(--transition);
}
.footer-col ul li a:hover { color: var(--white); }
.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: .875rem;
  color: rgba(255,255,255,.45);
  margin-bottom: 10px;
  line-height: 1.5;
}
.footer-contact-item svg { flex-shrink: 0; margin-top: 2px; width: 15px; height: 15px; }
.footer-contact-item:hover { color: rgba(255,255,255,.8); }

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.footer-bottom p   { font-size: .8rem; color: rgba(255,255,255,.3); }
.footer-gst        { font-size: .78rem; color: rgba(255,255,255,.25); }

/* ── Scroll Reveal ─────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .5s ease, transform .5s ease;
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: .08s; }
.reveal-delay-2 { transition-delay: .16s; }
.reveal-delay-3 { transition-delay: .3s; }
.reveal-delay-4 { transition-delay: .4s; }

/* ── Misc ──────────────────────────────────────────────────── */
.view-all-row { text-align: center; margin-top: 48px; }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .process-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .process-grid::before { display: none; }
  .package-layout { grid-template-columns: 1fr; }
  .price-box { min-width: unset; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid .footer-brand { grid-column: 1 / -1; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { display: none; }
}

@media (min-width: 1025px) {
  .hero-visual { display: flex; }
}

@media (max-width: 768px) {
  :root { --nav-h: 84px; }
  .section { padding-block: 64px; }
  .section-sm { padding-block: 40px; }

  .nav-logo-img { height: 68px; }
  .nav-brand-name { display: none; }

  .nav-links { display: none; }
  .nav-cta   { display: none; }
  .hamburger { display: flex; }

  .hero { padding: 72px 0 56px; min-height: unset; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { display: none; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .hero-actions { flex-direction: column; }
  .hero-stats { gap: 20px; }
  .stat-item { border-right: none; min-width: 45%; }

  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .portfolio-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-grid  { grid-template-columns: 1fr; }
  .form-row      { grid-template-columns: 1fr; }
  .package-card  { padding: 28px 20px; }
  .footer-grid   { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 480px) {
  .portfolio-grid { grid-template-columns: 1fr; }
  .hero h1 { font-size: 2.6rem; }
  .form-card { padding: 24px 20px; }
  .hero-eyebrow { font-size: .72rem; }
}