/* =========================================================
   CrestCell Energy — Design System
   "Solar instrument panel": dusk navy + solar amber + PV-cell green
   Display: Space Grotesk | Body: Inter | Data: JetBrains Mono
   ========================================================= */

:root{
  /* Color tokens */
  --cc-navy-950:      #071B33;   /* deep dusk sky */
  --cc-navy-900:      #0B2545;   /* primary ink / header */
  --cc-navy-700:      #16375E;
  --cc-amber-500:     #F5A623;   /* solar accent — primary CTA */
  --cc-amber-400:     #FFC257;
  --cc-cell-600:      #146B5E;   /* PV-cell green — secondary accent */
  --cc-cell-500:      #1B8A79;
  --cc-paper:         #F6F7F5;   /* page background, cool not cream */
  --cc-paper-dim:     #ECEEEA;
  --cc-white:         #FFFFFF;
  --cc-ink:           #16202E;   /* body text */
  --cc-ink-soft:       #4B5A6B;
  --cc-line:          #DBE0DE;
  --cc-success:       #1B8A79;
  --cc-danger:        #C4482E;

  /* Type */
  --font-display: 'Space Grotesk', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;

  /* Radii / shadow */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 18px;
  --shadow-card: 0 1px 2px rgba(11,37,69,.04), 0 8px 24px rgba(11,37,69,.08);
  --shadow-lift: 0 12px 32px rgba(11,37,69,.16);

  --container-max: 1200px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  color:var(--cc-ink);
  background:var(--cc-paper);
  margin:0;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,.font-display{
  font-family:var(--font-display);
  color:var(--cc-navy-900);
  font-weight:700;
  letter-spacing:-0.01em;
  line-height:1.15;
}
.font-mono{font-family:var(--font-mono);}
a{color:var(--cc-cell-600); text-decoration:none;}
a:hover{color:var(--cc-navy-900);}

.container-cc{
  width:100%;
  max-width:var(--container-max);
  margin:0 auto;
  padding:0 24px;
}

/* -------------------- Skip link / a11y -------------------- */
.skip-link{
  position:absolute; left:-999px; top:0; background:var(--cc-navy-900); color:#fff;
  padding:10px 16px; z-index:2000; border-radius:0 0 var(--r-sm) 0;
}
.skip-link:focus{left:0;}
:focus-visible{outline:3px solid var(--cc-amber-500); outline-offset:2px;}

/* -------------------- Eyebrow / labels -------------------- */
.eyebrow{
  font-family:var(--font-mono);
  font-size:.75rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--cc-cell-600);
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:14px;
}
.eyebrow::before{
  content:"";
  width:22px; height:2px; background:var(--cc-amber-500); display:inline-block;
}

/* -------------------- PV cell grid motif -------------------- */
.pv-grid{
  --cell: 34px;
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: var(--cell) var(--cell);
}
.pv-grid-dark{
  --cell: 34px;
  background-image:
    linear-gradient(90deg, rgba(11,37,69,.06) 1px, transparent 1px),
    linear-gradient(0deg, rgba(11,37,69,.06) 1px, transparent 1px);
  background-size: var(--cell) var(--cell);
}

.hex-divider{
  display:flex; align-items:center; gap:6px; margin:0 0 18px;
}
.hex-divider span{
  width:9px;height:9px;
  background:var(--cc-amber-500);
  clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);
}
.hex-divider span:nth-child(2){background:var(--cc-cell-600);}
.hex-divider span:nth-child(3){background:var(--cc-navy-700);}

/* -------------------- Buttons -------------------- */
.btn-cc{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-display); font-weight:600; font-size:.95rem;
  padding:13px 26px; border-radius:999px; border:2px solid transparent;
  cursor:pointer; transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
  white-space:nowrap;
}
.btn-cc:hover{transform:translateY(-2px);}
.btn-cc-amber{background:var(--cc-amber-500); color:var(--cc-navy-950);}
.btn-cc-amber:hover{background:var(--cc-amber-400); color:var(--cc-navy-950); box-shadow:var(--shadow-lift);}
.btn-cc-outline{background:transparent; border-color:rgba(255,255,255,.5); color:#fff;}
.btn-cc-outline:hover{border-color:#fff; color:#fff; background:rgba(255,255,255,.08);}
.btn-cc-outline-navy{background:transparent; border-color:var(--cc-navy-900); color:var(--cc-navy-900);}
.btn-cc-outline-navy:hover{background:var(--cc-navy-900); color:#fff;}
.btn-cc-cell{background:var(--cc-cell-600); color:#fff;}
.btn-cc-cell:hover{background:var(--cc-cell-500); color:#fff; box-shadow:var(--shadow-lift);}
.btn-sm{padding:9px 18px; font-size:.85rem;}
.btn-block{width:100%;}

/* -------------------- Header / Nav -------------------- */
.announce-bar{
  background:var(--cc-navy-950); color:#cfe0ea; font-family:var(--font-mono);
  font-size:.78rem; text-align:center; padding:7px 12px; letter-spacing:.02em;
}
.announce-bar a{color:var(--cc-amber-400);}

.site-header{
  background:rgba(11,37,69,.97);
  backdrop-filter:blur(6px);
  position:sticky; top:0; z-index:1000;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.site-header .navbar{padding:12px 0;}
.brand-mark{display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:700; font-size:1.25rem; color:#fff;}
.brand-mark .brand-cell{
  width:30px;height:30px; border-radius:7px;
  background:linear-gradient(135deg, var(--cc-amber-500), var(--cc-cell-600));
  display:flex; align-items:center; justify-content:center;
  clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);
}
.brand-mark span.tag{color:var(--cc-amber-400); font-weight:400; font-size:.7rem; display:block; font-family:var(--font-mono); letter-spacing:.08em;}

.site-header .nav-link{
  color:rgba(255,255,255,.82) !important; font-weight:500; font-size:.92rem;
  padding:8px 14px !important; border-radius:6px;
}
.site-header .nav-link:hover, .site-header .nav-link.active{color:#fff !important; background:rgba(255,255,255,.06);}
.header-cta{display:flex; align-items:center; gap:12px;}
.header-phone{color:#fff; font-family:var(--font-mono); font-size:.85rem; display:flex; align-items:center; gap:6px;}
.navbar-toggler{border-color:rgba(255,255,255,.3) !important;}
.navbar-toggler-icon{filter:invert(1);}

/* -------------------- Hero -------------------- */
.hero{
  position:relative;
  background:linear-gradient(180deg, var(--cc-navy-950) 0%, var(--cc-navy-900) 65%);
  color:#fff;
  padding:76px 0 0;
  overflow:hidden;
}
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(600px 320px at 82% 10%, rgba(245,166,35,.18), transparent 70%);
}
.hero-roofline{
  width:100%; height:64px; display:block;
}
.hero h1{color:#fff; font-size:clamp(2.2rem, 4.4vw, 3.5rem); margin-bottom:20px;}
.hero .lead-cc{color:#C9D6E3; font-size:1.12rem; max-width:520px; margin-bottom:32px;}
.hero-stats{display:flex; gap:34px; margin-top:44px; flex-wrap:wrap;}
.hero-stats .stat-num{font-family:var(--font-mono); font-size:1.6rem; font-weight:700; color:var(--cc-amber-400);}
.hero-stats .stat-label{font-size:.78rem; color:#9FB2C4; text-transform:uppercase; letter-spacing:.06em;}

/* Mini calculator widget embedded in hero */
.hero-calc{
  background:#fff; border-radius:var(--r-lg); padding:26px; box-shadow:var(--shadow-lift);
  color:var(--cc-ink);
}
.hero-calc .hc-title{font-family:var(--font-display); font-weight:700; font-size:1.05rem; color:var(--cc-navy-900); margin-bottom:4px;}
.hero-calc .hc-sub{font-size:.82rem; color:var(--cc-ink-soft); margin-bottom:18px;}
.hero-calc label{font-size:.78rem; font-weight:600; color:var(--cc-navy-900); text-transform:uppercase; letter-spacing:.04em;}
.hero-calc .form-control, .hero-calc .form-select{
  font-family:var(--font-mono); border:1.5px solid var(--cc-line); border-radius:var(--r-sm);
  padding:10px 12px; margin-bottom:14px;
}
.hero-calc .form-control:focus, .hero-calc .form-select:focus{border-color:var(--cc-cell-600); box-shadow:0 0 0 3px rgba(27,138,121,.14);}
.hc-result{
  background:var(--cc-paper); border-radius:var(--r-md); padding:16px; margin-top:10px;
  display:flex; justify-content:space-between; align-items:center;
}
.hc-result .hc-num{font-family:var(--font-mono); font-size:1.5rem; font-weight:700; color:var(--cc-cell-600);}
.hc-result .hc-cap{font-size:.72rem; color:var(--cc-ink-soft); text-transform:uppercase; letter-spacing:.05em;}

/* -------------------- Sections -------------------- */
section{padding:80px 0;}
.section-tight{padding:56px 0;}
.section-alt{background:var(--cc-white);}
.section-navy{background:var(--cc-navy-900); color:#fff;}
.section-navy h2{color:#fff;}
.section-navy .eyebrow{color:var(--cc-amber-400);}
.section-navy .eyebrow::before{background:var(--cc-cell-500);}
.section-head{max-width:640px; margin-bottom:48px;}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center;}
.section-head p{color:var(--cc-ink-soft); font-size:1.02rem;}

/* -------------------- Cards -------------------- */
.cc-card{
  background:#fff; border-radius:var(--r-md); border:1px solid var(--cc-line);
  padding:26px; height:100%; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.cc-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-card); border-color:transparent;}
.cc-card .card-icon{
  width:46px; height:46px; border-radius:var(--r-sm); background:var(--cc-paper);
  display:flex; align-items:center; justify-content:center; margin-bottom:16px; color:var(--cc-cell-600); font-size:1.3rem;
}
.cc-card h3{font-size:1.05rem; margin-bottom:8px;}
.cc-card p{color:var(--cc-ink-soft); font-size:.92rem; margin-bottom:0;}

.product-card{
  background:#fff; border-radius:var(--r-md); border:1px solid var(--cc-line); overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease; height:100%; display:flex; flex-direction:column;
}
.product-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-card);}
.product-card .pc-media{
  aspect-ratio:4/3; background:linear-gradient(135deg, var(--cc-navy-900), var(--cc-cell-600));
  display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.85); font-size:2.4rem;
  position:relative; overflow:hidden;
}
.product-card .pc-media .pc-photo{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1;
}
.product-card .pc-media i{position:relative; z-index:0;}
.product-card .pc-tag{
  position:absolute; top:12px; left:12px; background:rgba(255,255,255,.92); color:var(--cc-navy-900);
  font-family:var(--font-mono); font-size:.68rem; padding:4px 10px; border-radius:999px; text-transform:uppercase; letter-spacing:.04em;
  z-index:2;
}
.product-card .pc-body{padding:20px; flex:1; display:flex; flex-direction:column;}
.product-card h3{font-size:1rem; margin-bottom:6px;}
.product-card p{color:var(--cc-ink-soft); font-size:.86rem; flex:1;}
.product-card .pc-foot{display:flex; justify-content:space-between; align-items:center; margin-top:14px;}

/* -------------------- Process steps -------------------- */
.process-step{display:flex; gap:18px; padding:22px 0; border-top:1px solid var(--cc-line);}
.process-step:last-child{border-bottom:1px solid var(--cc-line);}
.process-step .ps-num{font-family:var(--font-mono); color:var(--cc-amber-500); font-size:1.6rem; font-weight:700; width:52px; flex-shrink:0;}
.process-step h3{font-size:1.02rem; margin-bottom:4px;}
.process-step p{color:var(--cc-ink-soft); margin-bottom:0; font-size:.92rem;}

/* -------------------- Testimonials -------------------- */
.testimonial-card{background:#fff; border-radius:var(--r-md); border:1px solid var(--cc-line); padding:28px; height:100%;}
.testimonial-card .t-quote{font-size:.98rem; color:var(--cc-ink); margin-bottom:18px;}
.testimonial-card .t-person{display:flex; align-items:center; gap:12px;}
.t-avatar{width:42px;height:42px;border-radius:50%; background:var(--cc-paper-dim); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; color:var(--cc-navy-900);}
.t-name{font-weight:600; font-size:.9rem; color:var(--cc-navy-900);}
.t-role{font-size:.78rem; color:var(--cc-ink-soft);}
.stars{color:var(--cc-amber-500); font-size:.85rem; margin-bottom:10px;}

/* -------------------- Forms -------------------- */
.cc-form label{font-weight:600; font-size:.85rem; color:var(--cc-navy-900); margin-bottom:6px; display:block;}
.cc-form .form-control, .cc-form .form-select, .cc-form textarea{
  border:1.5px solid var(--cc-line); border-radius:var(--r-sm); padding:12px 14px; font-size:.95rem;
}
.cc-form .form-control:focus, .cc-form .form-select:focus, .cc-form textarea:focus{
  border-color:var(--cc-cell-600); box-shadow:0 0 0 3px rgba(27,138,121,.14);
}
.cc-form .invalid-feedback{font-size:.78rem;}
.form-status{padding:14px 16px; border-radius:var(--r-sm); font-size:.9rem; display:none; margin-top:16px;}
.form-status.show{display:block;}
.form-status.ok{background:rgba(27,138,121,.1); color:var(--cc-cell-600); border:1px solid rgba(27,138,121,.3);}
.form-status.err{background:rgba(196,72,46,.1); color:var(--cc-danger); border:1px solid rgba(196,72,46,.3);}

/* -------------------- Map section -------------------- */
.map-wrap{border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-card); border:1px solid var(--cc-line);}
.map-wrap iframe{width:100%; height:100%; min-height:340px; border:0; display:block;}
.map-card-info{background:var(--cc-navy-900); color:#fff; border-radius:var(--r-lg); padding:28px;}
.map-card-info .mi-row{display:flex; gap:12px; margin-bottom:16px; align-items:flex-start;}
.map-card-info .mi-icon{color:var(--cc-amber-400); width:20px; flex-shrink:0; margin-top:3px;}

/* -------------------- FAQ accordion -------------------- */
.accordion-cc .accordion-item{border:1px solid var(--cc-line); border-radius:var(--r-sm) !important; margin-bottom:12px; overflow:hidden;}
.accordion-cc .accordion-button{font-family:var(--font-display); font-weight:600; color:var(--cc-navy-900); padding:18px 20px;}
.accordion-cc .accordion-button:not(.collapsed){background:var(--cc-paper); color:var(--cc-cell-600); box-shadow:none;}
.accordion-cc .accordion-button:focus{box-shadow:0 0 0 3px rgba(27,138,121,.14);}
.accordion-cc .accordion-body{color:var(--cc-ink-soft); padding:0 20px 20px;}

/* -------------------- Footer -------------------- */
.site-footer{background:var(--cc-navy-950); color:#B7C4D1; padding:64px 0 0;}
.site-footer h4{color:#fff; font-family:var(--font-display); font-size:1rem; margin-bottom:18px;}
.site-footer a{color:#B7C4D1;}
.site-footer a:hover{color:var(--cc-amber-400);}
.site-footer ul{list-style:none; padding:0; margin:0;}
.site-footer li{margin-bottom:10px; font-size:.9rem;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1); margin-top:48px; padding:22px 0; font-size:.82rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;}
.social-row{display:flex; gap:10px;}
.social-row a{
  width:36px;height:36px; border-radius:50%; border:1px solid rgba(255,255,255,.2);
  display:flex; align-items:center; justify-content:center; color:#fff; transition:.2s;
}
.social-row a:hover{background:var(--cc-amber-500); border-color:var(--cc-amber-500); color:var(--cc-navy-950);}

/* -------------------- WhatsApp float button -------------------- */
.wa-float{
  position:fixed; bottom:24px; right:24px; z-index:1200;
  width:58px; height:58px; border-radius:50%; background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center; box-shadow:0 8px 20px rgba(37,211,102,.4);
  font-size:1.5rem; transition:transform .2s ease;
}
.wa-float:hover{transform:scale(1.08); color:#fff;}

/* -------------------- Breadcrumb / page header -------------------- */
.page-header{background:var(--cc-navy-900); color:#fff; padding:56px 0 44px; position:relative; overflow:hidden;}
.page-header h1{color:#fff; margin-bottom:8px; font-size:clamp(1.8rem,3vw,2.4rem);}
.page-header .bc{font-family:var(--font-mono); font-size:.8rem; color:#9FB2C4;}
.page-header .bc a{color:#C9D6E3;}
.page-header .bc a:hover{color:var(--cc-amber-400);}

/* -------------------- Calculator page -------------------- */
.calc-panel{background:#fff; border-radius:var(--r-lg); border:1px solid var(--cc-line); padding:32px; box-shadow:var(--shadow-card);}
.gauge-wrap{display:flex; flex-direction:column; align-items:center; text-align:center;}
.gauge-value{font-family:var(--font-mono); font-size:2.4rem; font-weight:700; color:var(--cc-cell-600); margin-top:-10px;}
.result-row{display:flex; justify-content:space-between; align-items:center; padding:16px 0; border-bottom:1px dashed var(--cc-line);}
.result-row:last-child{border-bottom:none;}
.result-row .rr-label{color:var(--cc-ink-soft); font-size:.9rem;}
.result-row .rr-val{font-family:var(--font-mono); font-weight:700; color:var(--cc-navy-900); font-size:1.15rem;}

/* -------------------- Misc utility -------------------- */
.badge-cc{
  display:inline-block; background:var(--cc-paper-dim); color:var(--cc-navy-900); font-family:var(--font-mono);
  font-size:.72rem; padding:5px 12px; border-radius:999px; text-transform:uppercase; letter-spacing:.04em;
}
.text-cell{color:var(--cc-cell-600) !important;}
.text-amber{color:var(--cc-amber-500) !important;}
.divider-line{border:0; border-top:1px solid var(--cc-line);}
.lazy-img{background:var(--cc-paper-dim);}

@media (max-width: 991px){
  .header-cta .header-phone{display:none;}
  .hero{padding-top:64px;}
  section{padding:56px 0;}
}
@media (max-width: 576px){
  .hero-stats{gap:22px;}
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}



/* FAQ CTA Fix */
.cc-card {
  height: auto !important;
  min-height: auto !important;
  padding: 40px !important;
  overflow: hidden;
}

.site-footer {
  margin-top: 0 !important;
}

section {
  overflow: hidden;
}

/* ===== HEADER IMPROVEMENT ===== */

/* Slim Header */
.site-header{
  padding: 0 !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
}

.site-header .navbar{
  min-height: 64px;
  padding: 8px 0 !important;
}

.brand-mark{
  transform: scale(.92);
  transform-origin: left center;
}

.nav-link{
  padding: 8px 12px !important;
  font-size: 15px;
  font-weight: 500;
}

/* Hide Phone Number */
.header-phone{
  display: none !important;
}

/* Keep Quote Button */
.header-cta{
  display: flex;
  align-items: center;
}

/* Hamburger */
.navbar-toggler{
  border: none !important;
  box-shadow: none !important;
  padding: 6px;
}

.navbar-toggler:focus{
  box-shadow: none !important;
}

.navbar-toggler-icon{
  filter: brightness(0) invert(1);
}

/* Mobile Menu */
@media (max-width:991px){

  .site-header .navbar{
      min-height: 58px;
  }

  .navbar-collapse{
      background:#0B2545;
      margin-top:12px;
      padding:18px;
      border-radius:14px;
      box-shadow:0 15px 40px rgba(0,0,0,.25);
  }

  .navbar-nav{
      gap:6px;
  }

  .navbar-nav .nav-link{
      color:#fff !important;
      padding:12px !important;
      border-radius:8px;
  }

  .navbar-nav .nav-link:hover,
  .navbar-nav .nav-link.active{
      background:#F5A623;
      color:#0B2545 !important;
  }

  .header-cta{
      margin-top:15px;
  }

  .header-cta .btn-cc{
      width:100%;
  }
}