:root { --blue:#0668ee; --navy:#092542; --muted:#63707d; }

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--navy); background:#fff; font-family:Arial, Helvetica, sans-serif; }
a { color:inherit; text-decoration:none; }
.shell { width:min(1180px, calc(100% - 64px)); margin-inline:auto; }
.hero { min-height:720px; color:white; background:linear-gradient(90deg,rgba(6,26,48,.64),rgba(6,26,48,.20)),url('assets/solar-panels.jpg') center 55%/cover no-repeat; }
.site-header { height:168px; display:flex; align-items:center; justify-content:space-between; gap:42px; }
.brand img { width:185px; height:auto; filter:brightness(0) invert(1); object-fit:contain; }
nav { display:flex; align-items:center; gap:36px; margin-left:auto; }
nav a { font-size:14px; letter-spacing:.03em; }
.menu-toggle,.menu-button { display:none; }
.button { min-height:54px; padding:0 30px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:16px; transition:.2s ease; }
.button:hover { transform:translateY(-2px); }
.button-primary { color:white; background:var(--blue); }
.button-outline { color:white; border:2px solid white; background:transparent; }
.header-cta { margin-left:30px; white-space:nowrap; }
.hero-content { padding-top:0; }
.hero h1 { max-width:670px; margin:0; font-size:68px; line-height:1.18; letter-spacing:-.03em; font-weight:500; }
.hero-content p { margin:24px 0 0; font-size:16px; }
.hero-actions { display:flex; gap:16px; margin-top:84px; }
.benefits { display:grid; grid-template-columns:repeat(4,1fr); gap:38px; padding-block:78px; }
.benefits article { border-right:1px solid #dce2e8; padding-right:28px; }
.benefits article:last-child { border:0; }
.benefits b { display:grid; place-items:center; width:48px; height:48px; border-radius:50%; background:#eaf3ff; color:var(--blue); font-size:23px; }
.benefits h3,.service-cards h3 { margin:20px 0 10px; font-size:19px; }
.benefits p,.service-cards p,.section-copy p { color:var(--muted); line-height:1.75; }
.about { display:grid; grid-template-columns:1.03fr .97fr; gap:90px; align-items:center; padding-block:105px; }
.photo-frame { position:relative; min-height:555px; overflow:hidden; border-radius:0 110px 0 0; }
.photo-frame img { object-fit:cover; }
.section-copy>span,.inner-title p { color:var(--blue); text-transform:uppercase; font-size:13px; font-weight:700; letter-spacing:.12em; }
.section-copy h2 { margin:12px 0 24px; max-width:710px; font-size:47px; line-height:1.12; letter-spacing:-.025em; }
.section-copy ul { list-style:none; padding:0; margin:28px 0; }
.section-copy li { padding:8px 0 8px 28px; position:relative; font-weight:600; }
.section-copy li::before { content:'✓'; position:absolute; left:0; color:var(--blue); }
.text-link { color:var(--blue); font-weight:700; }
.services-section { background:#f4f7fb; padding:110px 0; }
.centered { text-align:center; display:flex; flex-direction:column; align-items:center; }
.service-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:55px; }
.service-cards article { padding:38px; background:white; min-height:255px; box-shadow:0 18px 55px rgba(8,37,66,.06); }
.service-cards b { color:var(--blue); font-size:36px; font-weight:500; }
.service-cards.large article { min-height:320px; padding-top:55px; }
.center-button { width:max-content; margin:48px auto 0; }
.projects { padding-block:110px; }
.section-line { display:flex; align-items:flex-end; justify-content:space-between; gap:32px; }
.project-grid { display:grid; grid-template-columns:1.1fr .9fr .9fr; gap:22px; margin-top:46px; }
.project-img { min-height:400px; background-size:cover; background-position:center; }
.solar { background-image:url('assets/solar-panels.jpg'); }
.install { background-image:url('assets/installation.jpg'); }
.detail { background-position:70% center; }
.testimonials { padding:105px 0; background:#082642; color:white; }
.testimonials .section-copy>span { color:#74adff; }
.reviews { display:grid; grid-template-columns:1fr 1fr; gap:30px; max-width:940px; margin:52px auto 0; }
.reviews article { background:#fff; color:var(--navy); padding:42px; }
.reviews p { color:var(--muted); line-height:1.7; }
.reviews h3 { margin-bottom:3px; }
.reviews small { color:var(--muted); }
.stars { color:#f8b71c; letter-spacing:.2em; }
.cta { background:#eef5ff; padding:72px 0; }
.cta>.shell { display:flex; justify-content:space-between; align-items:center; gap:40px; }
.cta h2 { font-size:36px; margin:0 0 10px; }
.cta p { color:var(--muted); margin:0; }
footer { background:#061c31; color:#d7e1ea; padding-top:72px; }
.footer-grid { display:grid; grid-template-columns:1.4fr .7fr 1fr 1.25fr; gap:60px; padding-bottom:65px; }
.footer-grid img { width:145px; height:auto; filter:brightness(0) invert(1); }
.footer-grid h3 { color:#fff; font-size:17px; margin:0 0 22px; }
.footer-grid a,.footer-grid span { display:block; margin:10px 0; color:#d7e1ea; }
.footer-grid p { line-height:1.7; }
.footer-grid p a { display:inline; }
.copyright { border-top:1px solid rgba(255,255,255,.12); text-align:center; padding:25px; font-size:13px; }
.inner-head { min-height:450px; color:white; background:linear-gradient(90deg,rgba(4,27,50,.8),rgba(4,27,50,.35)),url('assets/solar-panels.jpg') center/cover; }
.inner-title { padding-top:48px; }
.inner-title p { color:#81b5ff; }
.inner-title h1 { margin:10px 0; font-size:62px; letter-spacing:-.03em; }
.inner-section { padding-block:105px; }
.projects-page { grid-template-columns:repeat(3,1fr); }
.project-card { min-height:390px; padding:260px 30px 25px; position:relative; background-size:cover; background-position:center; color:white; overflow:hidden; }
.project-card::before { content:''; position:absolute; inset:40% 0 0; background:linear-gradient(transparent,rgba(5,25,43,.9)); }
.project-card span,.project-card h3 { position:relative; z-index:1; }
.project-card span { color:#a8cbff; font-size:12px; text-transform:uppercase; letter-spacing:.1em; }
.project-card h3 { font-size:22px; margin:7px 0; }
.contact { display:grid; grid-template-columns:1fr 1fr; gap:90px; }
.contact-list { margin-top:35px; }
.contact-list p { display:grid; grid-template-columns:115px 1fr; border-bottom:1px solid #e1e6eb; padding-bottom:15px; }
.contact-list a { color:var(--blue); }
form { padding:40px; background:#f4f7fb; }
form label { display:block; margin-bottom:20px; font-size:14px; font-weight:700; }
form input,form textarea { display:block; width:100%; margin-top:8px; padding:14px; border:1px solid #d1dae3; background:white; font:inherit; }
form textarea { resize:vertical; }
form button { border:0; cursor:pointer; }
@media (max-width:960px) {
  .shell{width:min(100% - 40px,720px)} .site-header{height:120px;position:relative}.header-cta{display:none}.brand img{width:145px}.hero{min-height:680px}.hero h1{font-size:clamp(44px,9vw,64px)}
  .menu-button{display:flex;width:42px;height:42px;border:1px solid rgba(255,255,255,.5);flex-direction:column;justify-content:center;gap:5px;padding:10px;cursor:pointer}.menu-button span{height:2px;background:white;width:100%}
  .site-header nav{display:none;position:absolute;left:0;right:0;top:100px;margin:0;padding:25px;background:#082642;z-index:10;flex-direction:column;align-items:flex-start;gap:20px}.menu-toggle:checked~nav{display:flex}
  .benefits{grid-template-columns:1fr 1fr}.benefits article:nth-child(2){border:0}.about{grid-template-columns:1fr;gap:50px}.service-cards,.projects-page{grid-template-columns:1fr}.project-grid{grid-template-columns:1fr 1fr}.project-img:first-child{grid-column:1/-1}.footer-grid{grid-template-columns:1fr 1fr}.contact{grid-template-columns:1fr}.cta>.shell{align-items:flex-start;flex-direction:column}.inner-title h1{font-size:50px}
}
@media (max-width:560px) {
  .shell{width:calc(100% - 36px)}.brand img{width:120px}.hero{min-height:680px}.hero-content{padding-top:35px}.hero h1{font-size:43px;line-height:1.12}.hero-actions{margin-top:56px;flex-direction:column;align-items:flex-start}.benefits{grid-template-columns:1fr}.benefits article{border-right:0;border-bottom:1px solid #dce2e8;padding-bottom:25px}.about,.inner-section,.projects{padding-block:70px}.photo-frame{min-height:380px}.section-copy h2{font-size:36px}.service-cards,.reviews,.project-grid,.footer-grid{grid-template-columns:1fr}.project-img:first-child{grid-column:auto}.services-section,.testimonials{padding-block:75px}.section-line{align-items:flex-start;flex-direction:column}.cta h2{font-size:31px}.inner-head{min-height:390px}.inner-title{padding-top:25px}.inner-title h1{font-size:42px}.footer-grid{gap:35px}.contact{gap:45px}form{padding:25px}.contact-list p{grid-template-columns:1fr;gap:7px}
}

.static-photo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.works-section { padding:90px 0; background:#fff; }
.works-blue { background:#eaf6ff; }
.works-heading { margin-bottom:38px; }
.works-heading span { color:var(--blue); font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.works-heading h2 { margin:10px 0 0; font-size:46px; }
.works-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.real-project-card { background:white; box-shadow:0 12px 38px rgba(8,37,66,.09); overflow:hidden; transition:.25s ease; }
.real-project-card:hover { transform:translateY(-6px); box-shadow:0 20px 50px rgba(8,37,66,.18); }
.real-project-card img { display:block; width:100%; height:260px; object-fit:cover; }
.real-project-card div { padding:22px 24px; }
.real-project-card h3 { margin:0 0 6px; font-size:20px; }
.real-project-card p { margin:0; color:var(--blue); font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
@media(max-width:960px){.works-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.works-grid{grid-template-columns:1fr}.works-section{padding:65px 0}.works-heading h2{font-size:36px}}