
:root {
  --navy: #1a2b4a;
  --navy-soft: #23385f;
  --gold: #c9a961;
  --gold-soft: #e7d6a4;
  --cream: #f5f1e8;
  --white: #ffffff;
  --text: #112033;
  --muted: #637083;
  --border: rgba(17, 32, 51, 0.12);
  --shadow: 0 20px 60px rgba(10, 17, 30, 0.16);
  --radius: 22px;
  --transition: 260ms ease;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; color: var(--text); background: linear-gradient(180deg, #faf8f3 0%, #f2ede3 100%); }
a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.page-shell { overflow: hidden; }
.container { width: min(1240px, calc(100% - 2rem)); margin: 0 auto; }
.section { padding: 90px 0; }
.section-dark { color: var(--white); background: var(--navy); }
.section-accent { background: linear-gradient(180deg, rgba(201, 169, 97, 0.08), rgba(255,255,255,0.96)); }
.eyebrow { letter-spacing: 0.26em; text-transform: uppercase; font-size: 0.74rem; font-weight: 700; color: var(--gold); margin-bottom: 1rem; }
h1,h2,h3,p,ul { margin-top: 0; }
h1,h2,h3 { line-height: 1.08; }
p, li { line-height: 1.7; color: var(--muted); }
.section-dark p, .section-dark .eyebrow, .section-dark h1, .section-dark h2, .section-dark h3, .section-dark span, .section-dark li { color: inherit; }
.site-header { position: fixed; inset: 0 0 auto; z-index: 1000; padding: 16px 0; transition: var(--transition); }
.site-header.scrolled { background: rgba(14,25,43,0.92); backdrop-filter: blur(18px); box-shadow: 0 18px 35px rgba(0,0,0,0.18); }
.nav-wrap { display:flex; align-items:center; justify-content:space-between; gap:1.25rem; }
.brand { display:inline-flex; align-items:center; gap:0.95rem; color:var(--white); }
.brand-badge { width:64px; height:64px; display:grid; place-items:center; border-radius:18px; padding:8px; background:rgba(255,255,255,0.94); box-shadow:0 10px 24px rgba(0,0,0,0.16); }
.brand-badge img { width:100%; height:100%; object-fit:contain; }
.brand-copy { display:flex; flex-direction:column; gap:0.15rem; }
.brand-copy strong { font-size:1.02rem; letter-spacing:0.08em; text-transform:uppercase; }
.brand-copy small { font-size:0.78rem; opacity:0.8; }
.site-nav { display:flex; align-items:center; gap:1.3rem; color:var(--white); }
.site-nav a { font-size:0.96rem; opacity:0.88; transition: var(--transition); }
.site-nav a:hover, .site-nav a.active { opacity:1; color:var(--gold-soft); }
.nav-cta { padding:0.82rem 1.2rem; border:1px solid rgba(255,255,255,0.2); border-radius:999px; }
.nav-toggle { display:none; background:transparent; border:0; padding:0; }
.nav-toggle span { display:block; width:26px; height:2px; background:var(--white); margin:6px 0; transition:var(--transition); }
.hero { position:relative; min-height:100svh; display:flex; align-items:center; }
.hero-media,.hero-overlay { position:absolute; inset:0; }
.hero-media img { width:100%; height:100%; object-fit:cover; }
.hero-overlay { background: linear-gradient(110deg, rgba(9,16,27,0.88) 0%, rgba(20,35,58,0.78) 45%, rgba(20,35,58,0.46) 100%); }
.hero-content { position:relative; z-index:2; padding-top:140px; padding-bottom:70px; max-width:780px; }
.hero h1 { font-size:clamp(2.8rem, 6vw, 5.6rem); margin-bottom:1.25rem; }
.hero-text { color: rgba(255,255,255,0.8); font-size:1.08rem; max-width:680px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:1rem; margin:2rem 0 2.4rem; }
.btn { display:inline-flex; align-items:center; justify-content:center; min-width:190px; padding:1rem 1.4rem; border-radius:999px; border:1px solid transparent; font-weight:700; transition:transform var(--transition), background var(--transition), border-color var(--transition), color var(--transition); }
.btn:hover { transform:translateY(-2px); }
.btn-primary { background: linear-gradient(135deg, var(--gold) 0%, #e7cf8b 100%); color:#1f1d18; box-shadow:0 16px 40px rgba(201,169,97,0.26); }
.btn-secondary { border-color: rgba(255,255,255,0.28); color: var(--white); background: rgba(255,255,255,0.06); }
.btn-block { width:100%; }
.hero-metrics { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:1rem; max-width:760px; }
.hero-metrics article { padding:1.25rem; border:1px solid rgba(255,255,255,0.14); background:rgba(255,255,255,0.06); border-radius:20px; backdrop-filter: blur(6px); }
.hero-metrics strong { display:block; font-size:2rem; margin-bottom:0.35rem; }
.hero-metrics span { color:rgba(255,255,255,0.76); font-size:0.92rem; }
.intro-band { padding:48px 0; background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(245,241,232,0.96)); }
.intro-grid,.split-layout,.contact-grid,.stats-grid,.footer-wrap,.video-grid { display:grid; gap:2rem; }
.intro-grid,.footer-wrap { grid-template-columns:1.2fr 1fr; align-items:center; }
.intro-grid h2,.split-copy h2,.section-heading h2,.stats-grid h2,.contact-copy h2,.video-copy h2 { font-size:clamp(2rem, 4vw, 3.4rem); margin-bottom:1rem; }
.split-layout,.video-grid { grid-template-columns:1.05fr 0.95fr; align-items:center; }
.feature-list { display:grid; gap:1rem; margin-top:2rem; }
.feature-list div { padding:1.25rem 1.3rem; background:rgba(255,255,255,0.82); border:1px solid var(--border); border-radius:18px; box-shadow:var(--shadow); }
.feature-list span { display:inline-flex; width:42px; height:42px; align-items:center; justify-content:center; border-radius:50%; background:rgba(201,169,97,0.16); color:var(--navy); font-weight:700; margin-bottom:0.8rem; }
.feature-list h3 { margin-bottom:0.55rem; }
.split-media { position:relative; }
.split-media img { width:100%; min-height:520px; object-fit:cover; border-radius:28px; box-shadow:var(--shadow); }
.floating-card { position:absolute; left:24px; bottom:24px; padding:1rem 1.1rem; border-radius:18px; background:rgba(255,255,255,0.92); box-shadow:var(--shadow); }
.floating-card strong { display:block; color:var(--navy); margin-bottom:0.35rem; }
.section-heading { max-width:720px; margin-bottom:2rem; }
.service-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:1.2rem; }
.service-card { padding:1.5rem; border-radius:22px; background:rgba(255,255,255,0.92); border:1px solid rgba(17,32,51,0.08); box-shadow:var(--shadow); }
.service-card h3 { margin-bottom:0.6rem; }
.video-showcase { background: linear-gradient(180deg, #12203a 0%, #0f1a2d 100%); }
.video-points { padding-left:1.1rem; margin:1.2rem 0 0; }
.video-points li { margin-bottom:0.45rem; color:rgba(255,255,255,0.78); }
.video-frame { background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.08); padding:1rem; border-radius:28px; box-shadow: var(--shadow); }
.video-frame video { width:100%; border-radius:20px; background:#000; aspect-ratio: 16/9; }
.portfolio-filters { display:flex; flex-wrap:wrap; gap:0.75rem; margin-bottom:1rem; }
.filter-btn { border:1px solid var(--border); background:rgba(255,255,255,0.75); color:var(--navy); padding:0.78rem 1.15rem; border-radius:999px; font-weight:700; transition:var(--transition); }
.filter-btn.active, .filter-btn:hover { background:var(--navy); color:var(--white); border-color:var(--navy); }
.sector-chips { display:flex; gap:0.65rem; flex-wrap:wrap; margin:0 0 1.6rem; }
.sector-chips span { padding:0.6rem 0.9rem; border-radius:999px; border:1px solid rgba(201,169,97,0.32); background:rgba(201,169,97,0.08); color:var(--navy); font-size:0.9rem; }
.portfolio-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:1.3rem; }
.portfolio-card { background:rgba(255,255,255,0.95); border-radius:24px; overflow:hidden; box-shadow:var(--shadow); border:1px solid rgba(17,32,51,0.08); transition:transform var(--transition), box-shadow var(--transition); }
.portfolio-card:hover { transform:translateY(-6px); box-shadow:0 24px 60px rgba(10,17,30,0.18); }
.portfolio-media { display:block; width:100%; padding:0; border:0; background:none; }
.portfolio-card img { width:100%; aspect-ratio: 4 / 3; object-fit:cover; }
.portfolio-copy { padding:1.2rem 1.2rem 1.35rem; }
.portfolio-copy span { display:inline-flex; margin-bottom:0.7rem; padding:0.45rem 0.7rem; border-radius:999px; font-size:0.75rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; background:rgba(201,169,97,0.14); color:var(--navy); }
.portfolio-copy h3 { margin-bottom:0.6rem; font-size:1.2rem; }
.stats-panel { background:linear-gradient(130deg, rgba(16,27,46,1), rgba(22,39,67,1)); }
.stats-grid { grid-template-columns:1.1fr 1fr; align-items:start; }
.stats-cards { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:1rem; }
.stats-cards article { padding:1.25rem; border-radius:18px; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.08); }
.stats-cards strong { display:block; margin-bottom:0.5rem; color:var(--gold-soft); }
.contact-grid { grid-template-columns:0.95fr 1.05fr; align-items:start; }
.contact-list { display:grid; gap:0.65rem; margin-top:1.5rem; }
.contact-list a, .contact-list p { font-size:1.02rem; }
.contact-card { padding:1.6rem; border-radius:24px; background:rgba(255,255,255,0.94); box-shadow:var(--shadow); display:grid; gap:1rem; }
.contact-card label { display:grid; gap:0.45rem; color:var(--navy); font-weight:600; }
.contact-card input, .contact-card select, .contact-card textarea { border:1px solid rgba(17,32,51,0.14); border-radius:14px; padding:0.95rem 1rem; background:#fff; }
.form-note { font-size:0.92rem; margin-bottom:0; }
.site-footer { padding:32px 0 48px; background:#0e1525; color:rgba(255,255,255,0.85); }
.footer-wrap { grid-template-columns:repeat(3, minmax(0,1fr)); }
.footer-wrap p { color:rgba(255,255,255,0.66); margin-bottom:0.35rem; }
.reveal-up { opacity:0; transform: translateY(24px); transition: opacity 700ms ease, transform 700ms ease; }
.reveal-up.in-view { opacity:1; transform: translateY(0); }
.delay-1 { transition-delay:120ms; }
.delay-2 { transition-delay:240ms; }
.lightbox { position:fixed; inset:0; z-index:1200; display:grid; place-items:center; padding:1.2rem; background:rgba(3,7,14,0.84); opacity:0; pointer-events:none; transition: var(--transition); }
.lightbox.open { opacity:1; pointer-events:auto; }
.lightbox-content { width:min(1100px, 100%); background:#0f1727; border-radius:28px; overflow:hidden; box-shadow: 0 30px 80px rgba(0,0,0,0.38); display:grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr); }
.lightbox img { width:100%; height:100%; object-fit:cover; min-height:420px; }
.lightbox-meta { padding:2rem; color:#fff; display:flex; flex-direction:column; justify-content:center; }
.lightbox-meta span { display:inline-flex; align-self:flex-start; padding:0.5rem 0.75rem; border-radius:999px; background:rgba(201,169,97,0.18); color:var(--gold-soft); font-size:0.8rem; text-transform:uppercase; letter-spacing:0.08em; margin-bottom:1rem; }
.lightbox-meta p { color:rgba(255,255,255,0.76); }
.lightbox-close { position:absolute; top:22px; right:24px; width:46px; height:46px; border-radius:50%; border:0; background:rgba(255,255,255,0.12); color:#fff; font-size:1.8rem; line-height:1; }
.hidden { display:none !important; }
@media (max-width: 1120px) {
  .service-grid, .portfolio-grid, .stats-cards { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .video-grid, .split-layout, .contact-grid, .stats-grid, .intro-grid, .footer-wrap { grid-template-columns:1fr; }
}
@media (max-width: 860px) {
  .nav-toggle { display:block; }
  .site-nav { position:absolute; top:86px; left:1rem; right:1rem; flex-direction:column; align-items:stretch; gap:0.5rem; padding:1rem; background:rgba(14,25,43,0.98); border-radius:24px; box-shadow:var(--shadow); opacity:0; pointer-events:none; transform:translateY(-10px); }
  .site-nav.open { opacity:1; pointer-events:auto; transform:translateY(0); }
  .hero-metrics, .service-grid, .portfolio-grid, .stats-cards { grid-template-columns:1fr; }
  .lightbox-content { grid-template-columns:1fr; }
  .lightbox img { min-height:260px; }
}
@media (max-width: 640px) {
  .section { padding:72px 0; }
  .brand-copy small { display:none; }
  .brand-badge { width:56px; height:56px; }
  .hero-content { padding-top:120px; }
  .btn { width:100%; }
  .hero-actions { flex-direction:column; }
  .hero-metrics article { padding:1rem; }
  .floating-card { position:static; margin-top:1rem; }
  .split-media img { min-height:auto; }
}
