:root { --ink:#0b1520; --muted:#5c6873; --paper:#f3f4f0; --line:#d5dad8; --hot:#ff5b36; --lime:#c7f36b; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--paper); font-family:Manrope,Arial,sans-serif; } a { color:inherit; text-decoration:none; }
.site-header { height:82px; padding:0 5.5vw; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(11,21,32,.12); background:rgba(243,244,240,.88); position:sticky; top:0; z-index:5; backdrop-filter:blur(12px); }
.logo { font:500 19px/1 "DM Mono",monospace; letter-spacing:-1.3px; } .logo span { color:var(--hot); } .logo-image { display:block; width:172px; height:50px; overflow:hidden; } .logo-image img { display:block; width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply; } nav { display:flex; gap:30px; font-size:13px; font-weight:700; } nav a:hover,.text-link:hover { color:var(--hot); }
.button { display:inline-flex; justify-content:center; align-items:center; min-height:52px; padding:0 25px; border-radius:3px; color:white; background:var(--ink); font-size:13px; font-weight:800; transition:transform .2s,background .2s; } .button:hover { transform:translateY(-2px); background:var(--hot); } .site-header .button-small { min-height:48px; padding:0 22px; color:var(--ink); background:var(--hot); font-size:12px; box-shadow:0 5px 15px rgba(255,91,54,.22); } .site-header .button-small:hover { color:white; background:var(--ink); }
.hero { min-height:680px; padding:105px 8vw 85px; overflow:hidden; position:relative; display:flex; align-items:center; color:white; background:#0b1520; } .hero-photo { position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; object-position:center; opacity:.72; } .hero:after { content:""; position:absolute; z-index:1; inset:0; background:linear-gradient(90deg,rgba(7,17,27,.95) 0%,rgba(7,17,27,.7) 39%,rgba(7,17,27,.12) 72%,rgba(7,17,27,.15)); } .hero-copy { position:relative; z-index:2; max-width:650px; } .eyebrow { margin:0 0 19px; color:var(--hot); font:500 11px/1.3 "DM Mono",monospace; letter-spacing:1.5px; } h1,h2,h3,p { margin-top:0; } h1 { margin-bottom:28px; font-size:clamp(47px,6.4vw,88px); line-height:.98; letter-spacing:-5px; } h1 em { color:var(--lime); font-style:normal; } .hero-text { max-width:520px; color:#c8d0d1; font-size:18px; line-height:1.65; } .hero-actions { display:flex; gap:28px; align-items:center; margin-top:36px; } .text-link { font-size:13px; font-weight:800; } .text-link span { padding-left:8px; color:var(--lime); }
.hero-glow { z-index:1; width:650px; height:650px; position:absolute; right:-12%; top:-20%; border-radius:50%; background:radial-gradient(circle,#fc5234 0%,#9b3634 21%,rgba(11,21,32,0) 66%); filter:blur(16px); opacity:.4; } .thermal-visual { z-index:2; width:42%; height:100%; min-height:500px; position:absolute; inset:0 4vw 0 auto; opacity:.58; background:linear-gradient(135deg,transparent 0 33%,rgba(255,91,54,.13) 33% 36%,transparent 36% 61%,rgba(199,243,107,.14) 61% 64%,transparent 64%),radial-gradient(ellipse at 64% 43%,rgba(255,225,78,.95),rgba(255,91,54,.73) 9%,rgba(18,37,48,.15) 28%,transparent 48%); }
.page-hero { padding:130px 8vw 115px; color:white; background:linear-gradient(125deg,#0b1520,#1b3440); } .page-hero h1 { max-width:970px; margin-bottom:25px; } .page-hero h1 em { color:var(--lime); font-style:normal; } .page-hero>p:not(.eyebrow) { max-width:600px; margin-bottom:32px; color:#c8d0d1; font-size:17px; line-height:1.65; } .content-grid { display:grid; grid-template-columns:1fr 1fr; gap:70px; padding:110px 8vw; } .content-grid h2 { max-width:480px; } .content-grid>div:last-child { max-width:570px; color:var(--muted); font-size:16px; line-height:1.75; } .content-grid p:last-child { margin-bottom:0; }
.scan-lines { position:absolute; inset:0; background:repeating-linear-gradient(0deg,rgba(255,255,255,.13) 0 1px,transparent 1px 7px); opacity:.22; } .thermal-card { position:absolute; top:29%; right:6%; width:190px; padding:16px; color:var(--ink); background:var(--lime); } .thermal-card p { margin:0 0 8px; font:500 9px "DM Mono",monospace; letter-spacing:.8px; } .thermal-card strong { display:block; font-size:31px; letter-spacing:-2px; } .thermal-card span,.coordinates { font:10px "DM Mono",monospace; } .target { position:absolute; width:165px; height:165px; top:42%; left:25%; border:1px solid white; border-radius:50%; } .target:before,.target:after { content:""; position:absolute; background:white; } .target:before { width:1px; height:185px; left:50%; top:-10px; } .target:after { width:185px; height:1px; left:-10px; top:50%; } .target i { position:absolute; width:12px; height:12px; top:calc(50% - 6px); left:calc(50% - 6px); border:2px solid white; border-radius:50%; } .coordinates { position:absolute; bottom:12%; right:2%; color:#e9eeee; }
.intro { padding:132px 8vw 65px; display:grid; grid-template-columns:1.1fr .9fr; gap:40px; } .intro .eyebrow { grid-column:1/-1; } h2 { font-size:clamp(37px,4.5vw,65px); line-height:1.04; letter-spacing:-3.7px; } .intro > p:last-child { max-width:460px; color:var(--muted); font-size:16px; line-height:1.75; align-self:end; }
.services { padding:0 8vw 130px; display:grid; grid-template-columns:repeat(3,1fr); } .services article { padding:34px 32px 40px 0; min-height:325px; border-top:1px solid var(--ink); display:flex; flex-direction:column; } .services article+article { padding-left:32px; border-left:1px solid var(--line); } .service-number { color:var(--hot); font:500 12px "DM Mono",monospace; } .services h3 { margin:70px 0 14px; font-size:26px; letter-spacing:-1.5px; } .services p { color:var(--muted); max-width:280px; font-size:14px; line-height:1.65; } .services a { margin-top:auto; font-size:12px; font-weight:800; } .services a span { color:var(--hot); padding-left:8px; }
.visual-services { display:grid; grid-template-columns:1fr 1fr; gap:14px; padding:0 8vw 125px; background:var(--paper); } .visual-card { position:relative; min-height:360px; overflow:hidden; color:white; background:#10202a; } .visual-card:after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(8,18,26,.92),rgba(8,18,26,.03) 68%); } .visual-card img { width:100%; height:100%; position:absolute; inset:0; object-fit:cover; transition:transform .5s ease; } .visual-card:hover img { transform:scale(1.04); } .visual-card span,.visual-card strong { position:absolute; z-index:1; left:30px; right:30px; } .visual-card span { bottom:82px; color:var(--lime); font:500 10px "DM Mono",monospace; letter-spacing:1px; } .visual-card strong { bottom:31px; max-width:400px; font-size:21px; letter-spacing:-1px; }
.process { padding:110px 8vw; color:white; background:#162936; display:grid; grid-template-columns:1fr 1.1fr; gap:80px; } .process .eyebrow { color:var(--lime); } .process h2 { margin:0; } ol { margin:0; padding:0; list-style:none; } ol li { display:flex; gap:24px; padding:0 0 26px; margin-bottom:26px; border-bottom:1px solid rgba(255,255,255,.2); } ol li>span { color:var(--lime); font:500 12px "DM Mono",monospace; } ol h3 { margin:0 0 8px; font-size:18px; } ol p { margin:0; color:#b8c3c6; font-size:14px; line-height:1.55; }
.case-studies { display:grid; grid-template-columns:.8fr 1.2fr; gap:70px; padding:120px 8vw; background:#101c26; color:white; } .case-heading { max-width:430px; } .case-heading .eyebrow { color:var(--lime); } .case-heading h2 { margin-bottom:20px; } .case-heading>p:not(.eyebrow) { color:#afbbc0; font-size:14px; line-height:1.7; } .case-list { display:grid; gap:12px; } .case { position:relative; min-height:190px; padding:28px 34px; overflow:hidden; display:flex; flex-direction:column; border:1px solid rgba(255,255,255,.12); background:#192c36; } .case:after { content:""; position:absolute; width:220px; height:220px; right:-30px; bottom:-75px; border-radius:50%; filter:blur(4px); opacity:.75; } .case-pv:after { background:radial-gradient(circle,#ffeb70 0%,#ff6437 23%,transparent 66%); } .case-roof:after { background:radial-gradient(circle,#ff6b40 0%,#773338 23%,transparent 66%); } .case-industry:after { background:radial-gradient(circle,#c6f36b 0%,#3d766a 23%,transparent 66%); } .case span { position:relative; z-index:1; color:var(--lime); font:500 9px "DM Mono",monospace; letter-spacing:1px; } .case h3 { position:relative; z-index:1; max-width:500px; margin:17px 0 8px; font-size:21px; letter-spacing:-1px; } .case p { position:relative; z-index:1; max-width:510px; margin:0; color:#c0cbcf; font-size:13px; line-height:1.6; } .case strong { position:relative; z-index:1; margin-top:auto; padding-top:18px; color:white; font-size:11px; }
.contact { padding:125px 8vw; background:var(--hot); color:#151719; } .contact .eyebrow { color:#151719; } .contact h2 { max-width:760px; margin-bottom:22px; } .contact>p:not(.eyebrow):not(.contact-note) { max-width:520px; font-size:17px; line-height:1.6; } .contact-layout { display:grid; grid-template-columns:minmax(0,620px) 1fr; gap:70px; margin-top:35px; } .contact-form { display:grid; gap:17px; } .form-row { display:grid; grid-template-columns:1fr 1fr; gap:17px; } .contact-form label { display:grid; gap:8px; font-size:11px; font-weight:800; } .contact-form input,.contact-form textarea { width:100%; border:1px solid rgba(21,23,25,.43); border-radius:0; padding:13px 14px; background:rgba(255,255,255,.16); color:var(--ink); font:500 14px Manrope,Arial,sans-serif; outline:none; } .contact-form input:focus,.contact-form textarea:focus { border-color:var(--ink); background:rgba(255,255,255,.32); } .contact-form textarea { resize:vertical; } .contact-form ::placeholder { color:rgba(21,23,25,.6); } .contact-form .button { justify-self:start; margin-top:4px; border:0; cursor:pointer; } .website-field { position:absolute; left:-9999px; } .contact-direct { display:flex; flex-direction:column; align-items:flex-start; gap:13px; align-self:start; padding-top:2px; } .contact-direct p { margin:0; font-size:13px; font-weight:800; } .contact-direct>a:not(.phone-link) { font-size:18px; font-weight:800; letter-spacing:-.6px; border-bottom:2px solid rgba(21,23,25,.5); } .phone-link { font-size:18px; font-weight:800; letter-spacing:-.6px; border-bottom:2px solid rgba(21,23,25,.5); } .button-light { margin-top:17px; color:var(--ink); background:var(--paper); } .contact-note { max-width:800px; margin:25px 0 0; font-size:11px; font-weight:700; line-height:1.55; opacity:.68; } .success-page { min-height:100vh; display:flex; flex-direction:column; justify-content:center; }
.seo-section { display:grid; grid-template-columns:1fr 1fr; gap:70px; padding:120px 8vw; background:#e5e9e6; } .seo-section h2 { margin:0; } .seo-copy { max-width:540px; color:var(--muted); font-size:15px; line-height:1.75; } .seo-copy p:last-child { margin:0; }
.faq { padding:120px 8vw; max-width:1100px; } .faq h2 { max-width:760px; margin-bottom:50px; } details { border-top:1px solid var(--line); padding:22px 0; } details:last-child { border-bottom:1px solid var(--line); } summary { cursor:pointer; font-size:17px; font-weight:800; list-style:none; } summary::-webkit-details-marker { display:none; } summary:after { content:'+'; color:var(--hot); float:right; font-size:25px; font-weight:400; line-height:.7; } details[open] summary:after { content:'–'; } details p { max-width:660px; margin:16px 0 0; color:var(--muted); font-size:14px; line-height:1.65; } details a { text-decoration:underline; color:var(--ink); }
footer { padding:32px 5.5vw; display:flex; justify-content:space-between; align-items:center; font-size:11px; color:var(--muted); } footer p { margin:0; }
.privacy-check { grid-template-columns:18px 1fr; align-items:start; gap:9px !important; font-size:12px !important; font-weight:600 !important; line-height:1.45; } .privacy-check input { width:16px; height:16px; margin:1px 0 0; padding:0; accent-color:var(--ink); } .privacy-check a { text-decoration:underline; }
.privacy-page { max-width:1080px; padding:110px 8vw; } .privacy-page h1 { max-width:720px; color:var(--ink); } .privacy-lead { max-width:680px; color:var(--muted); font-size:18px; line-height:1.7; } .privacy-summary { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin:52px 0 28px; background:var(--line); border:1px solid var(--line); } .privacy-summary div { padding:20px; background:#e4e9e6; } .privacy-summary span { display:block; margin-bottom:9px; color:var(--hot); font:500 9px "DM Mono",monospace; letter-spacing:1.1px; } .privacy-summary strong { font-size:14px; letter-spacing:-.5px; } .policy-list { border-top:1px solid var(--ink); } .policy-list section { display:grid; grid-template-columns:72px 1fr; gap:20px; padding:31px 0; border-bottom:1px solid var(--line); } .policy-list section>span { color:var(--hot); font:500 12px "DM Mono",monospace; } .privacy-page h2 { margin:0 0 12px; font-size:25px; letter-spacing:-1.5px; } .privacy-page section p { max-width:720px; margin:0; color:var(--muted); font-size:15px; line-height:1.75; } .privacy-page a { color:var(--ink); text-decoration:underline; } .privacy-updated { margin:23px 0 0; color:var(--muted); font-size:12px; }
@media (max-width:760px) { .site-header { height:67px; padding:0 6vw; } .logo-image { width:145px; height:43px; } nav { display:none; } .site-header .button { display:none; } .hero { min-height:690px; padding:92px 7vw 70px; align-items:flex-start; } .thermal-visual { width:100%; opacity:.54; right:0; top:160px; } h1 { letter-spacing:-3px; } .hero-text { font-size:16px; } .hero-actions { flex-direction:column; align-items:flex-start; gap:20px; } .intro,.process,.seo-section,.content-grid,.case-studies { grid-template-columns:1fr; gap:15px; padding:90px 7vw 50px; } .intro .eyebrow { grid-column:auto; } .services,.visual-services { grid-template-columns:1fr; padding:0 7vw 85px; } .visual-card { min-height:270px; } .services article,.services article+article { min-height:230px; padding:26px 0; border-left:0; } .services h3 { margin-top:38px; } .process { gap:45px; } .case-studies { gap:45px; } .contact-layout,.form-row { grid-template-columns:1fr; gap:25px; } .contact,.faq,.page-hero { padding:90px 7vw; } footer { padding:26px 7vw; flex-direction:column; align-items:flex-start; gap:14px; } }