
:root{--soft:#eef2f7;--muted:#6b7280;--brand:#0ea5e9;--brand2:#22c55e;--ink:#111827}
*{box-sizing:border-box}html,body{margin:0;padding:0}
body{font-family:Inter,system-ui,Segoe UI,Roboto,Arial;color:var(--ink);background:#fafafa;line-height:1.6}
.container{max-width:1120px;margin:0 auto;padding:0 20px}
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.85);backdrop-filter:blur(8px);border-bottom:1px solid #eaeaea}
.site-header .nav{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.logo img{height:36px;width:36px;border-radius:10px;object-fit:cover;box-shadow:0 0 0 2px rgba(212,175,55,.25)}
.logo-text{font-weight:800;font-size:18px;letter-spacing:.2px}
nav a{margin:0 12px;text-decoration:none;color:#1f2937;font-weight:500}
nav a.button{padding:10px 14px;background:#0f172a;color:#fff;border-radius:10px}
.menu{display:none;background:none;border:0;font-size:22px}
.hero{background: radial-gradient(1200px 400px at 50% -200px, #e0f2fe 0%, transparent 70%), #fff;border-bottom:1px solid #eee}
.hero-inner{padding:72px 0 36px;text-align:center}
.hero h1{font-size:40px;line-height:1.2;margin:0 0 12px}
.hero p{margin:0 auto 20px;max-width:820px;font-size:18px;color:#334155}
.hero-cta{display:flex;gap:12px;justify-content:center;margin:20px 0 28px}
.button{display:inline-block;padding:12px 18px;border-radius:12px;background:#111827;color:#fff;text-decoration:none;font-weight:600}
.button.ghost{background:transparent;border:1px solid #0f172a22;color:#111827}
.hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:720px;margin:12px auto 0}
.hero-stats div{background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:16px}
.hero-stats strong{display:block;font-size:28px}
.hero-stats span{color:#6b7280}
.two-col{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center;margin:40px 0}
.frame-xl,.frame{border-radius:16px;overflow:hidden;border:1px solid #e5e7eb;background:#fff}
.frame img,.frame-xl img{width:100%;height:auto;display:block;object-fit:cover}
.page-hero{background:linear-gradient(135deg,#e0f2fe 0%, #f0fdf4 100%);border-bottom:1px solid #e6e6e6}
.page-hero.small .container{padding:48px 0}.page-hero .container{padding:72px 0}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:28px auto}
.card{background:#fff;border:1px solid #edf0f6;border-radius:16px;padding:20px;box-shadow:0 6px 16px rgba(2,6,23,0.05)}
.link{color:var(--brand);text-decoration:none;font-weight:600}
.service-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin:28px 0}
.bullets{margin:0;padding-left:18px}.bullets li{margin:6px 0}
.checklist{list-style:none;padding:0;margin:0}.checklist li{margin:8px 0;padding-left:28px;position:relative}.checklist li:before{content:"✓";position:absolute;left:8px;color:var(--brand)}
.cta-panel{background:#0b1220;color:#e5e7eb;text-align:center;padding:36px;border-radius:16px;margin:32px auto}
.cta-panel .button{background:var(--brand)}
.project-list{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin:28px 0}
.tags{list-style:none;display:flex;gap:8px;padding:0;margin:12px 0 0}.tags li{background:#eef2ff;color:#1e40af;padding:6px 10px;border-radius:999px;font-size:12px}
.logos-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:28px 0}
.logo-card{background:#fff;border:1px solid #edf0f6;border-radius:16px;padding:16px;display:grid;place-items:center;gap:10px}
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:28px 0}
.gallery-grid figure{margin:0}.gallery-grid figcaption{font-size:13px;color:#475569;margin-top:6px}
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.site-footer{margin-top:40px;background:#0b1220;color:#cbd5e1}
.site-footer a{color:#93c5fd;text-decoration:none}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:20px;padding:28px 0}
.list-plain{list-style:none;padding:0;margin:0}.footer-bottom{border-top:1px solid #1f2937;padding:12px 0;text-align:center;color:#94a3b8}
.contact-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:28px 0}
.contact-details .two-col{grid-template-columns:1fr 1fr}
.contact-form label{display:block;font-weight:600;margin:8px 0 6px}
.contact-form input,.contact-form textarea{width:100%;padding:12px;border-radius:10px;border:1px solid #e5e7eb;background:#fff;font:inherit}
.small{font-size:12px;color:#6b7280}.hidden{display:none}
@media (max-width: 900px){
  .cards{grid-template-columns:1fr}.two-col{grid-template-columns:1fr}
  .service-grid{grid-template-columns:1fr}.project-list{grid-template-columns:1fr}
  .gallery-grid{grid-template-columns:repeat(2,1fr)}.team{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr}.contact-cards{grid-template-columns:1fr}
  nav{display:none}.menu{display:block;color:#111827}
}
.note{color:#64748b}

/* Carousel */
.hero.carousel{position:relative;overflow:hidden;height:420px;border-bottom:1px solid #eee;background:#000}
.carousel-track{display:flex;width:400%;height:100%;animation:slide 28s infinite}
.carousel-track img{width:100%;object-fit:cover;opacity:.85;filter:saturate(1.05) contrast(1.05)}
.carousel-overlay{position:absolute;inset:0;display:grid;align-content:center;color:#fff;text-shadow:0 10px 30px rgba(0,0,0,.6)}
.carousel-overlay p{max-width:820px}
@keyframes slide{
  0%{transform:translateX(0)}
  20%{transform:translateX(0)}
  25%{transform:translateX(-100%)}
  45%{transform:translateX(-100%)}
  50%{transform:translateX(-200%)}
  70%{transform:translateX(-200%)}
  75%{transform:translateX(-300%)}
  95%{transform:translateX(-300%)}
  100%{transform:translateX(0)}
}

/* Smaller, polished director portraits */
.team .card{padding:14px}
.team .card img{width:100%; height:260px; object-fit:cover; border-radius:14px; border:1px solid #e8e8e8; box-shadow:0 8px 22px rgba(2,6,23,.06)}
.team figcaption{padding-top:8px}

/* Bigger brand presence */
.logo img{height:54px;width:54px} /* was 36px */
.tagline{font-size:18px;font-weight:600;margin:8px auto 0;max-width:820px;color:#f8fafc;text-transform:uppercase;letter-spacing:.12em;text-shadow:0 10px 30px rgba(0,0,0,.6);}

/* Clients logos row styling */
.logos-grid .logo-card img{max-height:90px; width:auto; filter:grayscale(100%); opacity:.95}
.logos-grid .logo-card{gap:10px}
.logos-grid .logo-card span{font-size:14px; color:#475569}

/* Responsive adjustments */
@media (max-width:900px){
  .logo img{height:44px;width:44px}
  .tagline{font-size:15px;letter-spacing:.08em}
}
