:root{
  --black:#050505;
  --black2:#0b0b0b;
  --panel:#111;
  --gold:#d7a23a;
  --gold2:#f2c874;
  --text:#f7f4ec;
  --muted:#c9c5bb;
  --line:rgba(215,162,58,.45);
  --shadow:0 18px 45px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--black);
  color:var(--text);
  font-family:Inter,Arial,sans-serif;
  line-height:1.55;
}
body:before{
  content:"";
  position:fixed; inset:0; pointer-events:none; z-index:-1;
  background:
    radial-gradient(circle at 15% 15%,rgba(215,162,58,.07),transparent 22%),
    radial-gradient(circle at 85% 55%,rgba(215,162,58,.05),transparent 22%);
}
a{color:inherit;text-decoration:none}
.container{width:min(1180px,92%);margin:auto}
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(5,5,5,.94);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(12px);
}
.nav-wrap{min-height:82px;display:flex;align-items:center;gap:28px}
.brand{display:flex;align-items:center;gap:12px;min-width:245px}
.brand-mark{
  color:var(--gold2);font-size:40px;line-height:.8;font-weight:700;letter-spacing:3px;
  text-shadow:0 0 18px rgba(242,200,116,.2);
}
.brand-mark span{font-weight:400}
.brand-sub{font-size:9px;letter-spacing:1.3px;color:var(--gold2);line-height:1.3}
.brand-sub small{font-size:8px;letter-spacing:2px}
.nav{display:flex;gap:24px;align-items:center;margin-left:auto}
.nav a{font-size:13px;color:#e8e4da;position:relative;padding:10px 0}
.nav a:after{content:"";position:absolute;left:0;bottom:4px;width:0;height:1px;background:var(--gold);transition:.25s}
.nav a:hover:after{width:100%}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:46px;padding:0 22px;border-radius:10px;
  font-weight:700;font-size:13px;letter-spacing:.2px;
  transition:.25s;border:1px solid transparent;
}
.btn:hover{transform:translateY(-1px)}
.btn-gold{background:linear-gradient(135deg,var(--gold2),var(--gold));color:#090909;box-shadow:0 8px 25px rgba(215,162,58,.16)}
.btn-outline{border-color:var(--gold);color:var(--text);background:rgba(0,0,0,.2)}
.menu-toggle{display:none;background:none;border:0;color:var(--gold2);font-size:26px}
.hero{
  min-height:720px;
  display:flex;align-items:stretch;
  background:
    linear-gradient(90deg,rgba(0,0,0,.98) 0%,rgba(0,0,0,.78) 46%,rgba(0,0,0,.28) 100%),
    linear-gradient(135deg,#111 0%,#050505 55%,#13100a 100%);
  border-bottom:1px solid var(--line);
  position:relative;overflow:hidden;
}
.hero:before,.hero:after{
  content:"";position:absolute;width:360px;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);transform:rotate(-35deg)
}
.hero:before{left:-120px;bottom:100px}.hero:after{right:-70px;top:110px}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:50px;align-items:center;padding:90px 0}
.eyebrow{color:var(--gold2);letter-spacing:5px;font-weight:600;font-size:13px;margin:0 0 12px}
.hero h1{font-size:64px;line-height:1.03;margin:0 0 22px;letter-spacing:-1.5px}
.hero h1 span{color:var(--gold2)}
.lead{max-width:680px;color:#e3dfd6;font-size:18px}
.gold-rule{width:86px;height:3px;background:var(--gold);margin:22px 0}
.since{color:var(--gold2);font-size:24px;letter-spacing:7px;margin:0}
.micro{color:var(--gold2);letter-spacing:4px;font-size:11px}
.hero-actions{display:flex;gap:14px;margin-top:28px}
.hero-panel{
  min-height:520px;border:1px solid var(--line);box-shadow:var(--shadow);
  background:
    linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.88)),
    repeating-linear-gradient(120deg,transparent 0 34px,rgba(215,162,58,.05) 34px 35px),
    #101010;
  display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;
}
.hero-panel:before{content:"";position:absolute;inset:18px;border:1px solid rgba(215,162,58,.18)}
.hero-logo{font-size:110px;font-weight:700;color:var(--gold2);letter-spacing:8px}
.hero-logo span{font-weight:400}
.hero-company{color:var(--gold2);font-weight:700;letter-spacing:1px}
.hero-side{position:absolute;right:28px;top:38px;color:#fff;letter-spacing:4px;font-size:14px;line-height:1.8}
.section{padding:90px 0;border-bottom:1px solid rgba(215,162,58,.25);position:relative;overflow:hidden}
.section h2{font-size:36px;line-height:1.15;margin:0 0 20px}
.section p{color:var(--muted)}
.split{display:grid;grid-template-columns:1.25fr .75fr;gap:60px;align-items:center}
.about{
  background:
    linear-gradient(120deg,#060606 0%,#0b0b0b 55%,#14100a 100%);
}
.about-card{
  min-height:360px;padding:40px;border:1px solid var(--line);
  background:linear-gradient(145deg,rgba(215,162,58,.09),rgba(0,0,0,.3));
  box-shadow:var(--shadow);
}
.script{font-family:"Playfair Display",serif;font-style:italic;color:var(--gold2);font-size:39px;line-height:1.05}
.feature-list{list-style:none;padding:28px 0 0;margin:0;display:grid;gap:18px}
.feature-list li{display:flex;gap:14px;align-items:center}
.feature-list span{color:var(--gold2);font-size:22px}
.section-head{text-align:center;margin-bottom:38px}
.section-head h2{font-size:22px;letter-spacing:.5px;color:#e8e4da}
.services{background:#080808}
.service-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.service-card{
  min-height:310px;padding:28px 22px;border:1px solid rgba(215,162,58,.28);
  background:linear-gradient(180deg,#161616,#0a0a0a);
  box-shadow:0 10px 28px rgba(0,0,0,.22);
}
.service-card .icon{font-size:38px;color:var(--gold2);margin-bottom:14px}
.service-card h3{color:var(--gold2);font-size:16px;text-transform:uppercase;line-height:1.25}
.service-card p{font-size:13px}
.organization{background:linear-gradient(180deg,#080808,#050505)}
.org-chart{max-width:1050px;margin:20px auto 0;position:relative;padding:8px 0 20px}
.org-node{
  width:280px;margin:auto;text-align:center;padding:18px;border:1px solid var(--gold);
  background:linear-gradient(180deg,#171717,#090909);
  border-radius:10px;box-shadow:var(--shadow)
}
.avatar{
  width:84px;height:84px;border-radius:50%;display:grid;place-items:center;margin:-62px auto 12px;
  background:linear-gradient(135deg,var(--gold2),#4d3815);border:3px solid var(--gold2);color:#090909;font-weight:800;font-size:22px
}
.org-node strong{display:block;color:var(--gold2);font-size:18px}
.org-node span{display:block;font-size:13px;color:#eee}
.director{margin-top:55px}
.v1{width:1px;height:44px;background:var(--gold);margin:auto}
.h1{height:1px;background:var(--gold);width:58%;margin:auto}
.org-branches{display:grid;grid-template-columns:1fr 1fr;gap:70px;margin-top:44px}
.branch{position:relative}
.manager{width:230px}
.branch:before{content:"";position:absolute;top:-44px;left:50%;width:1px;height:44px;background:var(--gold)}
.team-row{
  border-top:1px solid var(--gold);
  margin-top:38px;padding-top:28px;display:grid;gap:10px;position:relative
}
.team-row:before{content:"";position:absolute;top:-38px;left:50%;height:38px;width:1px;background:var(--gold)}
.five{grid-template-columns:repeat(5,1fr)}
.four{grid-template-columns:repeat(4,1fr)}
.member{
  min-height:72px;display:flex;align-items:center;justify-content:center;text-align:center;
  border:1px solid rgba(215,162,58,.55);background:#101010;color:#f5f1e7;
  padding:10px 8px;border-radius:8px;font-size:12px
}
.vm-grid{display:grid;grid-template-columns:.75fr 1.25fr;gap:60px}
.vision-mission{
  background:
    linear-gradient(90deg,rgba(0,0,0,.98),rgba(0,0,0,.75)),
    radial-gradient(circle at 80% 50%,rgba(215,162,58,.12),transparent 32%),#0a0a0a;
}
.check-list{list-style:none;padding:0;margin:0;display:grid;gap:11px}
.check-list li{color:var(--muted);position:relative;padding-left:26px}
.check-list li:before{content:"✓";position:absolute;left:0;color:var(--gold2);font-weight:800}
.values{background:#090909}
.value-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:22px;text-align:center}
.value-grid article{padding:18px}
.value-icon{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;margin:0 auto 14px;background:var(--gold2);color:#090909;font-size:20px}
.value-grid h3{color:var(--gold2);text-transform:uppercase;font-size:14px}
.value-grid p{font-size:12px}
.contact{background:linear-gradient(135deg,#080808,#11100d)}
.contact-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:40px}
.location-card{border:1px solid var(--line);padding:28px;background:#0d0d0d}
.location-card h3{color:var(--gold2)}
.contact-panel{border:1px solid var(--line);padding:36px;display:flex;flex-direction:column;gap:16px;justify-content:center}
.footer{background:#030303;border-top:1px solid var(--line)}
.footer-grid{display:grid;grid-template-columns:1.2fr .8fr .8fr;gap:60px;padding:45px 0}
.footer h4{color:var(--gold2);margin-top:0}
.footer a{display:block;color:#d7d2c8;font-size:13px;margin:6px 0}
.footer p{color:#c6c1b7;font-size:13px}
.footer-mark{font-size:54px}
.footer-bottom{border-top:1px solid rgba(215,162,58,.22);padding:15px 4%;font-size:11px;color:#aaa;display:flex;justify-content:space-between;gap:20px}
.footer-bottom span{color:var(--gold2);letter-spacing:2px}
.floating-wa{
  position:fixed;right:24px;bottom:24px;z-index:40;width:54px;height:54px;border-radius:50%;
  display:grid;place-items:center;background:#21c063;color:#fff;font-weight:800;box-shadow:0 12px 30px rgba(0,0,0,.4)
}

@media (max-width: 980px){
  .top-cta{display:none}
  .nav{position:absolute;top:82px;left:0;right:0;background:#050505;border-bottom:1px solid var(--line);display:none;flex-direction:column;padding:20px}
  .nav.open{display:flex}
  .menu-toggle{display:block;margin-left:auto}
  .hero-grid,.split,.contact-grid,.vm-grid{grid-template-columns:1fr}
  .hero{min-height:auto}
  .hero h1{font-size:48px}
  .hero-panel{min-height:390px}
  .service-grid{grid-template-columns:repeat(2,1fr)}
  .value-grid{grid-template-columns:repeat(2,1fr)}
  .org-branches{grid-template-columns:1fr;gap:80px}
  .h1{width:1px;height:44px}
  .org-branches{margin-top:0}
  .branch:before{display:none}
  .five{grid-template-columns:repeat(3,1fr)}
  .four{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 620px){
  .brand{min-width:auto}
  .brand-sub{display:none}
  .brand-mark{font-size:34px}
  .hero-grid{padding:60px 0}
  .hero h1{font-size:38px}
  .lead{font-size:16px}
  .hero-actions{flex-direction:column;align-items:stretch}
  .service-grid,.value-grid{grid-template-columns:1fr}
  .section{padding:65px 0}
  .section h2{font-size:29px}
  .five,.four{grid-template-columns:1fr 1fr}
  .member{min-height:58px}
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column}
}

.brand-logo{width:210px;height:64px;object-fit:contain;object-position:left center;display:block}
.hero-real-logo{width:min(520px,82%);height:auto;object-fit:contain;filter:drop-shadow(0 8px 24px rgba(215,162,58,.12))}
.office-photo{width:100%;height:220px;object-fit:cover;display:block;margin-bottom:28px;border:1px solid rgba(215,162,58,.35)}
.office-gallery{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:22px 0}
.office-gallery img{width:100%;height:260px;object-fit:cover;border:1px solid rgba(215,162,58,.35);box-shadow:0 12px 30px rgba(0,0,0,.3)}
.footer-logo{width:260px;max-width:100%;height:auto;display:block}
@media(max-width:620px){
  .brand-logo{width:145px;height:52px}
  .office-gallery{grid-template-columns:1fr}
  .office-gallery img{height:220px}
}

/* Real office photography integration */
.real-office-hero{
  background:
    linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,.76)),
    url("assets/office-2.jpeg") center/cover no-repeat !important;
}
.real-office-hero .hero-real-logo{
  width:min(480px,78%);
  background:rgba(0,0,0,.28);
  padding:18px 22px;
  border:1px solid rgba(215,162,58,.35);
  backdrop-filter:blur(2px);
}
.office-photo{
  height:300px !important;
  object-fit:cover;
  object-position:center;
  image-rendering:auto;
}
.office-gallery-three{
  grid-template-columns:repeat(3,1fr) !important;
}
.office-gallery-three img{
  height:260px !important;
  object-fit:cover;
  object-position:center;
  image-rendering:auto;
}
.location-visuals{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:12px;
  margin:22px 0;
}
.location-visuals img{
  width:100%;
  height:320px;
  object-fit:cover;
  object-position:center;
  border:1px solid rgba(215,162,58,.35);
  box-shadow:0 12px 30px rgba(0,0,0,.28);
}
.office-showcase{
  background:
    radial-gradient(circle at 75% 30%,rgba(215,162,58,.08),transparent 28%),
    #070707;
}
.office-showcase-grid{
  display:grid;
  grid-template-columns:1.2fr 1fr 1fr;
  gap:16px;
}
.office-showcase-grid figure{
  margin:0;
  border:1px solid rgba(215,162,58,.32);
  background:#0d0d0d;
  overflow:hidden;
}
.office-showcase-grid img{
  display:block;
  width:100%;
  height:330px;
  object-fit:cover;
  object-position:center;
  image-rendering:auto;
  transition:transform .35s ease;
}
.office-showcase-grid figure:hover img{transform:scale(1.025)}
.office-showcase-grid figcaption{
  color:var(--gold2);
  padding:14px 16px;
  font-size:13px;
  letter-spacing:.4px;
}
.office-feature img{height:330px}
@media(max-width:980px){
  .office-showcase-grid{grid-template-columns:1fr 1fr}
  .office-feature{grid-column:1/-1}
  .location-visuals{grid-template-columns:1fr}
  .office-gallery-three{grid-template-columns:1fr 1fr !important}
}
@media(max-width:620px){
  .office-showcase-grid,
  .office-gallery-three{grid-template-columns:1fr !important}
  .office-showcase-grid img,
  .office-gallery-three img,
  .location-visuals img{height:240px !important}
}
