/* ═══════════════════════════════════════════════════════════
   Solar Site Care — site.css
   Navy / orange, Montserrat, angled section edges, skewed
   photo shapes. Layout system mirrors the reference site
   brief: 1010px content column, uppercase eyebrows, 32px
   display headings, square-cornered buttons with a chevron.
   ═══════════════════════════════════════════════════════════ */

:root{
  --navy:#003E65;
  --navy-d:#002033;      /* footer */
  --navy-dd:#001522;     /* footer bottom bar */
  --orange:#EE7923;
  --orange-d:#d96a19;
  --ink:#3C3C3B;
  --white:#fff;
  --grey:#777;
  --line:#e4e7ea;

  --wrap:1010px;
  --gut:24px;
  --nav-h:60px;

  --slant:46px;          /* full-width diagonal rise */
  --slant-sm:26px;

  --ff:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;

  --sp:clamp(64px,7vw,110px);   /* section padding */
}

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

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

body{
  margin:0;
  font-family:var(--ff);
  font-size:16px;
  line-height:1.75;
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
p{ margin:0 0 1.4em; }
p:last-child{ margin-bottom:0; }
ul{ margin:0 0 1.4em; padding-left:0; list-style:none; }

:focus-visible{ outline:3px solid var(--orange); outline-offset:3px; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--navy); color:#fff; padding:12px 20px; font-weight:700;
}
.skip:focus{ left:0; }

.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 var(--gut); }

/* ── Type ─────────────────────────────────────────────── */

.eyebrow{
  font-size:14px; font-weight:500; line-height:1.6;
  letter-spacing:.5px; text-transform:uppercase;
  color:var(--orange); margin:0 0 18px;
}
.eyebrow--light{ color:#fff; }

h1,h2,h3,h4{
  font-family:var(--ff);
  color:var(--navy);
  font-weight:600;
  line-height:1.4;
  margin:0 0 24px;
  letter-spacing:0;
}
h1{ font-size:clamp(28px,3.4vw,40px); }
h2{ font-size:clamp(26px,2.6vw,32px); }
h3{ font-size:20px; }
h4{ font-size:16px; }

.lead{ font-size:18px; line-height:1.7; }
.muted{ color:var(--grey); }

/* ── Buttons ──────────────────────────────────────────── */

.btn{
  display:inline-flex; align-items:center; gap:14px;
  font-size:14px; font-weight:700; line-height:20px;
  text-transform:uppercase; letter-spacing:.2px;
  padding:15px 30px; border:0; border-radius:1px;
  background:var(--orange); color:#fff; cursor:pointer;
  transition:background .25s ease, transform .25s ease;
}
.btn::after{
  content:''; width:8px; height:8px; flex:none;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(-45deg); transition:transform .25s ease;
  margin-top:-1px;
}
.btn:hover{ background:var(--orange-d); }
.btn:hover::after{ transform:rotate(-45deg) translate(3px,3px); }
.btn--navy{ background:var(--navy); }
.btn--navy:hover{ background:#00293f; }
.btn--ghost{ background:transparent; color:#fff; box-shadow:inset 0 0 0 2px rgba(255,255,255,.7); }
.btn--ghost:hover{ background:rgba(255,255,255,.14); }

/* text link with chevron */
.tlink{
  display:inline-flex; align-items:center; gap:10px;
  font-size:14px; font-weight:700; text-transform:uppercase;
  letter-spacing:.5px; color:var(--orange);
}
.tlink::after{
  content:''; width:7px; height:7px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(-45deg); transition:transform .25s ease;
}
.tlink:hover::after{ transform:rotate(-45deg) translate(3px,3px); }

/* ── Header ───────────────────────────────────────────── */

.hdr{
  position:fixed; inset:0 0 auto 0; z-index:100;
  height:var(--nav-h); background:#fff;
  box-shadow:0 1px 0 rgba(0,0,0,.06);
}
.hdr__in{
  max-width:1280px; margin:0 auto; padding:0 26px;
  height:var(--nav-h); display:flex; align-items:center; justify-content:space-between; gap:30px;
}
.logo{ display:flex; align-items:center; }
.logo svg{ height:26px; width:auto; }

.nav{ display:flex; align-items:center; gap:26px; }
.nav > li{ position:relative; }
.nav a{
  display:flex; align-items:center; gap:7px;
  font-size:14px; font-weight:600; letter-spacing:.4px;
  text-transform:uppercase; color:var(--navy);
  height:var(--nav-h); transition:color .2s ease;
}
.nav a:hover,.nav a[aria-current=page]{ color:var(--orange); }
.nav .caret{
  width:6px; height:6px; flex:none; margin-top:-3px;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);
}

/* full-width navy mega bar (Services) */
.mega{
  position:fixed; left:0; right:0; top:var(--nav-h);
  background:var(--navy-d); padding:22px 26px;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .22s ease, transform .22s ease, visibility .22s;
}
.mega__in{
  max-width:1280px; margin:0 auto;
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
}
.mega a{
  height:auto; color:#fff; font-size:14px; font-weight:600;
  letter-spacing:.4px; text-transform:uppercase; padding:6px 0;
}
.mega a:hover{ color:var(--orange); }

/* column dropdown (About) */
.drop{
  position:absolute; top:var(--nav-h); left:50%; transform:translate(-50%,-6px);
  min-width:230px; background:var(--navy-d); padding:14px 22px;
  opacity:0; visibility:hidden; transition:opacity .22s ease, transform .22s ease, visibility .22s;
}
.drop a{ height:auto; color:#fff; padding:7px 0; font-size:14px; }
.drop a:hover{ color:var(--orange); }

.has-menu:hover .mega,.has-menu:focus-within .mega{ opacity:1; visibility:visible; transform:translateY(0); }
.has-menu:hover .drop,.has-menu:focus-within .drop{ opacity:1; visibility:visible; transform:translate(-50%,0); }

.burger{
  display:none; width:44px; height:44px; border:0; background:none; cursor:pointer;
  align-items:center; justify-content:center; color:var(--navy);
}
.burger span,.burger span::before,.burger span::after{
  content:''; display:block; width:22px; height:2px; background:currentColor; transition:.25s ease;
}
.burger span::before{ transform:translateY(-7px); }
.burger span::after{ transform:translateY(5px); }
.burger[aria-expanded=true] span{ background:transparent; }
.burger[aria-expanded=true] span::before{ transform:rotate(45deg); }
.burger[aria-expanded=true] span::after{ transform:rotate(-45deg) translateY(-1.5px); }

/* ── Hero ─────────────────────────────────────────────── */

.hero{
  position:relative; margin-top:var(--nav-h);
  min-height:min(88vh,760px); display:flex; align-items:center;
  padding:120px 0 calc(120px + var(--slant));
  clip-path:polygon(0 0,100% 0,100% 100%,0 calc(100% - var(--slant)));
  overflow:hidden;
}
.hero--sm{ min-height:auto; padding:96px 0 calc(96px + var(--slant)); }
.hero__bg{ position:absolute; inset:0; z-index:0; }
.hero__bg img{ width:100%; height:100%; object-fit:cover; }
.hero__bg::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(0,32,51,.62),rgba(0,32,51,.45));
}
.hero .wrap{ position:relative; z-index:1; }
.hero h1,.hero .eyebrow,.hero p{ color:#fff; }
.hero h1{ max-width:16ch; }
.hero p{ max-width:44ch; font-size:18px; }
.hero .btn{ margin-top:12px; }

/* ── Sections ─────────────────────────────────────────── */

.sec{ padding:var(--sp) 0; }
.sec--tight{ padding:calc(var(--sp) * .62) 0; }
.sec--tint{ background:#f6f8f9; }

.grid2{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,5vw,74px);
  align-items:center;
}
.grid2--rev .grid2__media{ order:2; }

/* skewed photo shape */
.shape{ position:relative; }
.shape img{ width:100%; height:100%; object-fit:cover; }
.shape--a{ clip-path:polygon(0 3.5%,100% 0,100% 96.5%,0 100%); }
.shape--b{ clip-path:polygon(0 0,100% 3.5%,100% 100%,0 96.5%); }

/* ── Testimonial band ─────────────────────────────────── */

.quotes{
  position:relative; padding:calc(var(--sp) + 20px) 0 calc(var(--sp) + 40px);
  clip-path:polygon(0 0,100% var(--slant-sm),100% 100%,0 calc(100% - var(--slant-sm)));
  overflow:hidden; color:#fff;
}
.quotes__bg{ position:absolute; inset:0; z-index:0; }
.quotes__bg img{ width:100%; height:100%; object-fit:cover; }
.quotes__bg::after{ content:''; position:absolute; inset:0; background:rgba(0,32,51,.66); }
.quotes .wrap{ position:relative; z-index:1; }
.quotes__track{ position:relative; min-height:230px; }
.slide{
  position:absolute; inset:0; opacity:0; visibility:hidden;
  transition:opacity .5s ease;
}
.slide.is-on{ opacity:1; visibility:visible; position:relative; }
.slide p{ font-size:19px; line-height:1.6; max-width:74ch; color:#fff; }
.slide cite{ display:block; margin-top:26px; font-style:normal; font-weight:700; letter-spacing:.5px; text-transform:uppercase; font-size:14px; }
.dots{ display:flex; gap:16px; justify-content:center; margin-top:34px; }
.dots button{
  width:9px; height:9px; padding:0; border-radius:50%; cursor:pointer;
  border:1px solid #fff; background:transparent;
}
.dots button[aria-selected=true]{ background:#fff; }

/* ── Card grid ────────────────────────────────────────── */

.cards{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(28px,3.4vw,44px) clamp(28px,3.4vw,40px);
}
.card__media{ aspect-ratio:16/11; margin-bottom:22px; overflow:hidden; }
.card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.card:hover .card__media img{ transform:scale(1.05); }
.card h3{
  font-size:16px; font-weight:700; letter-spacing:.4px; text-transform:uppercase;
  color:var(--orange); margin:0 0 10px;
}
.card p{ font-size:16px; margin:0; }

/* ── Bullet list ──────────────────────────────────────── */

.ticks{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2px 34px; }
.ticks li{
  position:relative; padding:7px 0 7px 26px; font-size:16px;
}
.ticks li::before{
  content:''; position:absolute; left:0; top:15px;
  width:7px; height:12px; border-right:2px solid var(--orange); border-bottom:2px solid var(--orange);
  transform:rotate(40deg);
}
.ticks--one{ grid-template-columns:1fr; }

/* ── Stats ────────────────────────────────────────────── */

.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px; text-align:center; }
.stats .n{ font-size:44px; font-weight:600; color:var(--navy); line-height:1.1; }
.stats .l{ font-size:14px; letter-spacing:.5px; text-transform:uppercase; color:var(--grey); margin-top:8px; }

/* ── Orange CTA band ──────────────────────────────────── */

.cta{ position:relative; padding-top:var(--slant-sm); }
.cta::before{
  content:''; display:block; height:16px; background:var(--orange);
  clip-path:polygon(0 0,100% 0,100% 100%,0 42%);
}
.cta__body{
  background:var(--orange); color:#fff;
  clip-path:polygon(0 var(--slant-sm),100% 0,100% 100%,0 100%);
  padding:calc(var(--slant-sm) + 56px) 0 66px;
}
.cta__row{ display:flex; align-items:center; justify-content:space-between; gap:44px; }
.cta p{ font-size:22px; font-weight:600; line-height:1.5; max-width:34ch; color:#fff; margin:0; }

/* ── Footer ───────────────────────────────────────────── */

.ft{ background:var(--navy-d); color:#fff; }
.ft__badges{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; padding:52px 0 0; }
.badge{
  display:flex; align-items:center; justify-content:center; text-align:center;
  height:52px; padding:0 16px; background:#fff; color:var(--navy);
  font-size:11px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; line-height:1.25;
  border-radius:2px;
}
.ft__rule{ height:1px; background:rgba(255,255,255,.22); margin:44px 0 0; }
.ft__cols{
  display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:34px;
  padding:56px 0 64px;
}
.ft h4{
  color:#fff; font-size:14px; font-weight:700; letter-spacing:.6px;
  text-transform:uppercase; margin:0 0 26px;
}
.ft p,.ft li,.ft a{ font-size:15px; color:#fff; }
.ft li{ margin-bottom:10px; }
.ft a:hover{ color:var(--orange); }
.ft__bar{ background:var(--navy-dd); }
.ft__bar .wrap{ display:flex; align-items:center; justify-content:space-between; gap:24px; padding-top:22px; padding-bottom:22px; }
.ft__bar p{ font-size:14px; margin:0; max-width:70ch; }
.ft__social{ display:flex; gap:18px; }
.ft__social a{ display:block; }
.ft__social svg{ width:19px; height:19px; fill:#fff; }
.ft__social a:hover svg{ fill:var(--orange); }

/* ── Contact ──────────────────────────────────────────── */

.cinfo{ display:grid; grid-template-columns:repeat(3,1fr); gap:34px; }
.cinfo h3{ font-size:14px; letter-spacing:.6px; text-transform:uppercase; color:var(--orange); margin-bottom:12px; }
.form{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.field{ display:flex; flex-direction:column; gap:8px; }
.field--full{ grid-column:1/-1; }
.field label{ font-size:13px; font-weight:600; letter-spacing:.4px; text-transform:uppercase; color:var(--navy); }
.field input,.field textarea,.field select{
  font-family:var(--ff); font-size:16px; color:var(--ink);
  padding:13px 15px; border:1px solid var(--line); border-radius:1px; background:#fff; width:100%;
}
.field textarea{ min-height:150px; resize:vertical; }
.field input:focus,.field textarea:focus,.field select:focus{ border-color:var(--navy); outline:none; }

/* ── News / careers list ──────────────────────────────── */

.list{ display:grid; gap:0; }
.item{ padding:30px 0; border-bottom:1px solid var(--line); display:grid; grid-template-columns:180px 1fr; gap:30px; }
.item:first-child{ border-top:1px solid var(--line); }
.item .meta{ font-size:14px; letter-spacing:.5px; text-transform:uppercase; color:var(--grey); }
.item h3{ margin:0 0 8px; font-size:19px; }
.item p{ margin:0; }

/* ── Reveal on scroll ─────────────────────────────────── */

.rv{ opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s ease; }
.rv.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .rv{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}

/* ── Responsive ───────────────────────────────────────── */

@media (max-width:1024px){
  .cards{ grid-template-columns:repeat(2,1fr); }
  .ft__cols{ grid-template-columns:1fr 1fr; gap:40px 30px; }
  .stats{ grid-template-columns:repeat(2,1fr); gap:34px; }
}

@media (max-width:860px){
  .burger{ display:flex; }
  .nav{
    position:fixed; inset:var(--nav-h) 0 auto 0; background:var(--navy-d);
    flex-direction:column; align-items:stretch; gap:0; padding:12px 26px 28px;
    max-height:calc(100vh - var(--nav-h)); overflow-y:auto;
    transform:translateY(-8px); opacity:0; visibility:hidden;
    transition:opacity .25s ease, transform .25s ease, visibility .25s;
  }
  .nav.is-open{ opacity:1; visibility:visible; transform:none; }
  .nav a{ height:auto; padding:12px 0; color:#fff; }
  .mega,.drop{
    position:static; transform:none; opacity:1; visibility:visible;
    background:transparent; padding:0 0 8px 16px; min-width:0;
  }
  .mega__in{ display:block; }
  .mega a,.drop a{ padding:9px 0; font-size:13px; color:rgba(255,255,255,.82); }

  .grid2{ grid-template-columns:1fr; }
  .grid2--rev .grid2__media{ order:0; }
  .cta__row{ flex-direction:column; align-items:flex-start; gap:28px; }
  .item{ grid-template-columns:1fr; gap:8px; }
  .ft__bar .wrap{ flex-direction:column; align-items:flex-start; }
}

@media (max-width:620px){
  :root{ --slant:26px; --slant-sm:16px; }
  .cards{ grid-template-columns:1fr; }
  .ticks{ grid-template-columns:1fr; }
  .form{ grid-template-columns:1fr; }
  .cinfo{ grid-template-columns:1fr; }
  .ft__cols{ grid-template-columns:1fr; }
  .hero{ min-height:auto; padding:88px 0 calc(88px + var(--slant)); }
}