/* Base */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color:#0f172a; background:#0b1220; line-height:1.5; }
img { max-width:100%; height:auto; display:block; }
a { color: inherit; text-decoration: none; }
/* Sticky header */
.site-header { position: sticky; top:0; z-index:1000; display:flex; align-items:center; justify-content:space-between; gap:12px;
padding:12px clamp(12px,4vw,32px); background:rgba(6,10,18,0.7); backdrop-filter:saturate(1.1) blur(8px);
border-bottom:1px solid rgba(255,255,255,0.08); color:#e2e8f0; }
.brand { display:flex; align-items:center; gap:14px; }
.logo-img { height: clamp(56px,8vw,92px); width:auto; border-radius:8px; box-shadow:0 6px 18px rgba(0,0,0,0.15); }
.brand-text .company { display:block; font-weight:800; font-size:clamp(18px,3.2vw,34px); }
.brand-text .tag { display:block; font-size:clamp(12px,2.2vw,14px); color:#94a3b8; }
.nav-links { display:flex; align-items:center; gap:clamp(8px,2.4vw,18px); flex-wrap:wrap; }
.nav-links a { padding:6px 8px; color:#e2e8f0; }
.nav-links .cta { background:#22c55e; color:#052e1a; padding:10px 14px; border-radius:10px; font-weight:700; }
/* Hero split (background image inline per page) */
.hero-split { background-size:cover; background-position:center; padding:clamp(24px,5vw,48px); }
.hero-inner { display:grid; gap:24px; align-items:start; grid-template-columns:1fr; max-width:1200px; margin:0 auto; color:#e2e8f0; }
@media (min-width: 980px) { .hero-inner { grid-template-columns:1.2fr 1fr; } }
.hero-left h1 { margin:0 0 10px; font-size:clamp(26px,5vw,56px); font-weight:800; }
.hero-left p { margin:0 0 16px; color:#cbd5e1; }
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.cta.solid { background:#22c55e; color:#052e1a; padding:12px 16px; border-radius:10px; font-weight:700; }
.cta.ghost { border:1px solid #93c5aa; color:#e2e8f0; padding:12px 16px; border-radius:10px; }
.stats { list-style:none; padding:0; margin:14px 0 0; display:flex; gap:10px; flex-wrap:wrap; }
.stats li { background:rgba(15,23,42,0.6); border:1px solid rgba(255,255,255,0.08); color:#e2e8f0; padding:10px 12px; border-radius:10px; display:grid; }
.stats strong { font-size:16px; }
.stats span { font-size:12px; color:#94a3b8; }
/* What panel (home & services right) */
.hero-right h2 { margin:0 0 8px; font-size:clamp(18px,2.4vw,24px); }
.what-panel { background:rgba(15,23,42,0.6); border:1px solid rgba(255,255,255,0.08); border-radius:14px; overflow:hidden; }
.what-panel .row { display:grid; grid-template-columns:1fr 2fr; }
.what-panel .row.head { background:rgba(148,163,184,0.15); font-weight:700; }
.what-panel .cell { padding:12px 12px; color:#e2e8f0; border-bottom:1px solid rgba(255,255,255,0.06); }
@media (max-width:640px) { .what-panel .row { grid-template-columns:1fr; } }
/* Services bullets */
.bullets { margin:8px 0 0 18px; padding:0; color:#e2e8f0; }
.bullets li { margin:6px 0; }
/* Cards */
.cards { padding:36px clamp(14px,4vw,48px); display:grid; gap:20px; grid-template-columns:1fr; }
@media (min-width:640px) { .cards { grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px) { .cards.cols-4 { grid-template-columns:repeat(4,1fr); } }
.card { background:#0f172a; border:1px solid rgba(255,255,255,0.08); border-radius:14px; overflow:hidden; box-shadow:0 8px 24px rgba(2,6,23,0.3); color:#e2e8f0; }
.card img { width:100%; aspect-ratio:4/3; object-fit:cover; }
.card h3 { margin:14px 14px 6px; font-size:18px; }
.card p { margin:0 14px 16px; color:#cbd5e1; }
/* CTA band */
.cta-band { padding: clamp(28px, 6vw, 64px) clamp(16px, 6vw, 48px); display:grid; place-items:center;
text-align:center; background: linear-gradient(180deg, rgba(34,197,94,0.08), rgba(34,197,94,0.02));
border-top:1px solid rgba(255,255,255,0.07); border-bottom:1px solid rgba(255,255,255,0.07); }
.cta-band .cta-inner { max-width: 800px; }
.cta-band h2 { margin:0 0 8px; font-size: clamp(22px, 4.6vw, 40px); color:#e2e8f0; }
.cta-band p { margin:0 0 18px; color:#cbd5e1; }
/* Pro Contact form */
.contact { padding:12px clamp(14px,4vw,48px) 48px; color:#e2e8f0; }
.muted { color:#94a3b8; }
.contact-form.pro { display:grid; gap:14px; }
.contact-form.pro .grid { display:grid; gap:12px; }
.contact-form.pro .grid.one { grid-template-columns: 1fr; }
.contact-form.pro .grid.two { grid-template-columns: 1fr; }
@media (min-width: 820px) { .contact-form.pro .grid.two { grid-template-columns: 1fr 1fr; } }
fieldset.inline { border: 1px solid #475569; border-radius: 10px; padding: 10px; }
fieldset.inline legend { padding: 0 6px; }
fieldset.inline label { margin-right: 16px; }
.checkgrid { display:grid; grid-template-columns: 1fr; gap:8px; }
@media (min-width: 820px) { .checkgrid { grid-template-columns: repeat(2, 1fr); } }
.recaptcha { margin-top: 8px; }
.prefer-email { margin: 8px 0 0; }
/* About photo and panels */
.about-photo img { width:100%; border-radius:14px; border:1px solid rgba(255,255,255,0.08); box-shadow:0 8px 24px rgba(2,6,23,0.3); }
.about-panels { display:grid; gap:14px; margin-top:10px; }
.about-panels .panel { background:#0f172a; border:1px solid rgba(255,255,255,0.08); border-radius:14px; padding:14px; color:#e2e8f0; }
/* Footer */
.site-footer { padding:36px clamp(14px,4vw,48px); border-top:1px solid rgba(255,255,255,0.08); color:#94a3b8; background:#0b1220; }
/* Contact form card container */
.form-card {
background: linear-gradient(180deg, rgba(15,23,42,0.85), rgba(15,23,42,0.75));
border: 1px solid rgba(255,255,255,0.08);
border-radius: 16px;
box-shadow: 0 16px 40px rgba(2,6,23,0.45);
padding: clamp(14px, 3.5vw, 24px);
max-width: 980px;
margin: 8px auto 0;
}
.contact-form input, .contact-form textarea, .contact-form select {
background:#0b1220;
border:1px solid #475569;
}
.contact h2 { margin-left: auto; margin-right:auto; max-width:980px; }
/* ensure hero photo shows behind content */
.hero-split{ position:relative; }
.hero-photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-1; filter:brightness(0.82); }
@media (max-width: 640px){ .hero-left{ text-align:left !important; } }
/* --- Contact: remove panel look --- */
.contact .form-card {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 !important;
}
fieldset.inline {
border: 0 !important;
padding: 0 !important;
}
/* Optional lighter inputs */
.contact-form input,
.contact-form textarea,
.contact-form select {
background: rgba(11,18,32,0.55);
}
/* Contact hero: larger and more vibrant */
.hero-split { min-height: clamp(420px, 72vh, 900px); }
.hero-photo { filter: brightness(0.95) contrast(1.08) saturate(1.12); }
/* Contact hero bigger and centered text */
.contact .hero-split { min-height: clamp(500px, 80vh, 1100px); display: flex; align-items: center; }
.contact .hero-left { margin: 0 auto; max-width: 800px; }
.contact form { margin-top: 3rem; }
/* Contact page hero: bigger image, centered text, larger heading, form lower */
.contact-page .hero-split { min-height: clamp(560px, 80vh, 980px); }
.contact-page .hero-left { text-align: center; margin: 0 auto; }
.contact-page .hero-left h1 { font-size: clamp(36px, 6.8vw, 76px); line-height: 1.05; }
.contact-page .hero-left p { font-size: clamp(16px, 2.2vw, 22px); }
.contact .form-card { margin-top: clamp(32px, 12vh, 200px) !important; }
/* Contact page hero: bigger text, lower in middle */
.contact-page .hero-left {
text-align: center;
margin: 0 auto;
display: flex;
flex-direction: column;
justify-content: center;
min-height: clamp(400px, 70vh, 900px);
padding-top: 6vh;
}
.contact-page .hero-left h1 {
font-size: clamp(44px, 7vw, 90px);
line-height: 1.05;
}
.contact-page .hero-left p {
font-size: clamp(18px, 2.5vw, 28px);
}
/* Contact page hero: centered, bold, larger text */
.contact-page .hero-left {
text-align: center;
margin: 0 auto;
display: flex;
flex-direction: column;
justify-content: center;
min-height: clamp(500px, 80vh, 980px);
}
.contact-page .hero-left h1 {
font-size: clamp(48px, 7.5vw, 96px);
font-weight: bold;
line-height: 1.05;
}
.contact-page .hero-left p {
font-size: clamp(20px, 2.6vw, 30px);
font-weight: 500;
}