:root{
  --bg:#050505;
  --bg-2:#0b0b0c;
  --panel:rgba(255,255,255,.86);
  --panel-strong:rgba(255,255,255,.94);
  --text:#f7f3ea;
  --muted:rgba(255,255,255,.68);
  --line:rgba(225,190,108,.16);
  --gold:#e5c37b;
  --gold-2:#c89431;
  --gold-3:#fff1cc;
  --shadow:0 34px 100px rgba(0,0,0,.48);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at top, rgba(229,195,123,.13), transparent 24%),
    radial-gradient(circle at bottom right, rgba(200,148,49,.10), transparent 32%),
    linear-gradient(180deg,#050505 0%, #090909 100%);
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  background:url("./logo.jpg") center/60vmin no-repeat;
  opacity:.02;
  filter:grayscale(1) brightness(1.7);
  pointer-events:none;
  z-index:0;
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:72px 72px;
  opacity:.035;
  pointer-events:none;
  z-index:0;
}
a{color:inherit;text-decoration:none}
.container{width:min(1240px, calc(100% - 42px)); margin:0 auto; position:relative; z-index:1}
header{
  position:sticky; top:0; z-index:50;
  background:rgba(5,5,5,.74);
  backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line);
}
.nav-wrap{display:flex; align-items:center; justify-content:space-between; gap:24px; padding:16px 0}
.brand{display:flex; align-items:center; gap:14px}
.brand img{
  width:58px; height:58px; object-fit:cover; border-radius:999px;
  border:1px solid rgba(229,195,123,.28);
  box-shadow:0 0 28px rgba(229,195,123,.12);
  background:#000;
}
.brand-title{font-size:16px; letter-spacing:.22em; font-weight:700; color:#f2ddb0}
.brand-sub{font-size:11px; letter-spacing:.28em; color:rgba(255,255,255,.42); text-transform:uppercase; margin-top:4px}
nav{display:flex; gap:24px; flex-wrap:wrap}
nav a{
  font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.74);
  position:relative; padding:6px 0;
}
nav a:hover, nav a.active{color:#f2ddb0}
nav a.active::after, nav a:hover::after{
  content:""; position:absolute; left:0; bottom:-4px; width:100%; height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}
.page-hero{padding:82px 0 32px; position:relative; overflow:hidden}
.page-hero-grid{display:grid; grid-template-columns:1.08fr .92fr; gap:60px; align-items:center}
.kicker{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 16px; border-radius:999px;
  border:1px solid rgba(229,195,123,.22); background:rgba(229,195,123,.08);
  color:#f2ddb0; font-size:11px; letter-spacing:.28em; text-transform:uppercase;
}
.kicker::before{
  content:""; width:8px; height:8px; border-radius:999px; background:linear-gradient(135deg,var(--gold-3),var(--gold-2));
  box-shadow:0 0 12px rgba(229,195,123,.4);
}
h1{
  margin:24px 0 0;
  font-size:clamp(42px, 6vw, 78px);
  line-height:1.02; font-weight:700; letter-spacing:-.03em;
  max-width:880px;
}
.lead{margin-top:24px; max-width:760px; color:var(--muted); font-size:20px; line-height:1.78}
.actions{display:flex; gap:14px; flex-wrap:wrap; margin-top:34px}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 24px; border-radius:999px; font-size:12px; letter-spacing:.18em;
  text-transform:uppercase; font-weight:700; transition:.22s ease transform,.22s ease border-color,.22s ease color;
}
.btn:hover{transform:translateY(-1px)}
.btn.primary{
  background:linear-gradient(135deg,var(--gold-3),var(--gold),var(--gold-2));
  color:#0a0a0a;
  border:1px solid rgba(229,195,123,.38);
  box-shadow:0 10px 28px rgba(200,148,49,.18);
}
.btn.secondary{border:1px solid rgba(255,255,255,.14); color:#fff; background:rgba(255,255,255,.02)}
.btn.secondary:hover{border-color:rgba(229,195,123,.35); color:#f2ddb0}
.hero-stats{margin-top:42px; display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.stat-card,.panel,.service-card,.team-card,.contact-shell,.download-card{
  border:1px solid rgba(255,255,255,.1);
  background:var(--panel);
  border-radius:32px;
  box-shadow:var(--shadow);
}
.stat-card{padding:22px}
.stat-value{font-size:36px; color:#f2ddb0; font-weight:700}
.stat-label{margin-top:10px; font-size:14px; line-height:1.62; color:rgba(255,255,255,.62)}
.hero-visual{position:relative; display:flex; align-items:center; justify-content:center}
.hero-glow{
  position:absolute; width:30rem; height:30rem; border-radius:999px; background:rgba(229,195,123,.11); filter:blur(64px);
}
.visual-shell{
  position:relative; width:min(100%, 540px);
  border-radius:42px; padding:24px;
  border:1px solid rgba(229,195,123,.18);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow:0 40px 110px rgba(0,0,0,.58);
}
.visual-inner{
  border-radius:34px; padding:22px; background:#050505; border:1px solid rgba(229,195,123,.1);
}
.hero-logo-wrap{
  min-height:400px; border-radius:26px; border:1px solid rgba(229,195,123,.1);
  background:radial-gradient(circle at center, rgba(229,195,123,.14), transparent 58%), #000;
  display:flex; align-items:center; justify-content:center; padding:34px;
}
.hero-logo-wrap img{
  max-width:100%; max-height:300px; object-fit:contain;
  filter:drop-shadow(0 0 46px rgba(229,195,123,.24));
}
section{padding:34px 0}
.section-title-kicker{font-size:12px; letter-spacing:.28em; text-transform:uppercase; color:#f2ddb0}
.section-title{
  font-size:clamp(30px,4vw,56px); line-height:1.1; margin:14px 0 0; font-weight:700; letter-spacing:-.02em;
}
.copy{color:rgba(20,20,20,.76); line-height:1.92}
.grid-2{display:grid; grid-template-columns:1.2fr .8fr; gap:28px}
.stack{display:grid; gap:20px}
.panel{padding:34px; color:#161616}
.mini-panel{
  border:1px solid rgba(229,195,123,.15); border-radius:32px; padding:28px;
  background:linear-gradient(135deg, rgba(229,195,123,.09), transparent);
}
.mini-panel p{margin:12px 0 0; color:rgba(255,255,255,.86); line-height:1.82}
.services-grid{margin-top:36px; display:grid; grid-template-columns:repeat(2,1fr); gap:22px}
.service-card{padding:30px; transition:.25s ease transform,.25s ease border-color,.25s ease background; color:#161616}
.service-card:hover{transform:translateY(-3px); border-color:rgba(229,195,123,.3); background:var(--panel-strong)}
.bar{width:66px; height:6px; border-radius:999px; background:linear-gradient(90deg,var(--gold-3),var(--gold-2)); margin-bottom:18px}
.service-card h3{margin:0; font-size:30px}
.service-card p{color:rgba(20,20,20,.70); line-height:1.75}
ul{list-style:none; padding:0; margin:18px 0 0}
li{display:flex; gap:12px; color:rgba(20,20,20,.78); line-height:1.65; margin:10px 0}
.dot{width:8px; height:8px; border-radius:999px; background:#f2ddb0; margin-top:9px; flex:0 0 8px}
.highlights-grid,.team-grid,.sectors-grid{display:grid; gap:20px}
.highlights-grid{grid-template-columns:repeat(2,1fr)}
.sectors-shell{
  border-radius:40px; padding:34px; border:1px solid rgba(120,90,30,.14);
  background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(247,241,232,.98));
  box-shadow:0 26px 70px rgba(0,0,0,.14);
  color:#161616;
}
.sectors-grid{grid-template-columns:repeat(2,1fr)}
.sector{
  border:1px solid rgba(229,195,123,.15); background:#000; border-radius:28px; padding:26px;
  text-align:center; font-size:24px; box-shadow:0 14px 30px rgba(0,0,0,.2)
}
.team-grid{grid-template-columns:repeat(2,1fr); margin-top:36px}
.team-card{padding:30px; color:#161616}
.team-icon{
  width:56px; height:56px; border-radius:20px; background:linear-gradient(135deg,var(--gold-3),var(--gold-2));
}
.team-card h3{margin:20px 0 0; font-size:24px}
.role{margin-top:8px; color:#f2ddb0; font-size:12px; letter-spacing:.18em; text-transform:uppercase}
.team-card p{color:rgba(20,20,20,.72); line-height:1.82}
.download-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:22px; align-items:stretch}
.download-card{padding:30px; background:linear-gradient(180deg, rgba(229,195,123,.16), rgba(255,255,255,.92)); color:#161616}
.download-meta{display:grid; gap:12px; color:rgba(255,255,255,.68)}
.contact-shell{
  overflow:hidden; border-radius:40px;
  background:linear-gradient(135deg, rgba(255,255,255,.98), rgba(243,236,224,.98));
  color:#161616;
}
.contact-grid{display:grid; grid-template-columns:1fr .95fr; gap:32px; padding:38px}
.contact-info p{color:rgba(20,20,20,.72); line-height:1.9}
.contact-meta{margin-top:28px; display:grid; gap:10px}
.contact-meta strong{color:#9c6c17}
.form{
  border:1px solid rgba(120,90,30,.14); border-radius:32px; padding:24px;
  background:rgba(15,15,15,.92); backdrop-filter:blur(8px);
  display:grid; gap:14px;
}
input, textarea{
  width:100%; border:1px solid rgba(255,255,255,.1); outline:none;
  border-radius:18px; background:rgba(255,255,255,.04); color:#fff; padding:15px 16px; font:inherit;
}
input::placeholder, textarea::placeholder{color:rgba(255,255,255,.36)}
textarea{min-height:150px; resize:vertical}
.page-nav{margin-top:20px; display:flex; gap:12px; flex-wrap:wrap}
.page-link{
  border:1px solid rgba(255,255,255,.12); border-radius:999px; padding:10px 16px;
  color:rgba(255,255,255,.78); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
}
.page-link:hover{border-color:rgba(229,195,123,.35); color:#f2ddb0}
footer{
  position:relative; z-index:1; border-top:1px solid rgba(255,255,255,.1);
  background:rgba(0,0,0,.9); backdrop-filter:blur(10px); margin-top:18px;
}
.footer-wrap{
  display:flex; justify-content:space-between; gap:16px; padding:24px 0; color:rgba(255,255,255,.45); font-size:14px;
}
@media (max-width:1080px){
  .page-hero-grid,.grid-2,.download-grid,.contact-grid{grid-template-columns:1fr}
}
@media (max-width:760px){
  .nav-wrap{flex-direction:column; align-items:flex-start}
  nav{gap:16px}
  .hero-stats,.services-grid,.highlights-grid,.sectors-grid,.team-grid{grid-template-columns:1fr}
  .page-hero{padding-top:48px}
  .brand-title{letter-spacing:.1em; font-size:15px}
  .footer-wrap{flex-direction:column}
  .container{width:min(1240px, calc(100% - 28px))}
  .contact-grid{padding:24px}
  .panel,.mini-panel,.service-card,.team-card,.sectors-shell,.download-card{padding:24px}
}

.panel .section-title, .service-card h3, .team-card h3, .download-card .section-title, .sectors-shell .section-title {
  color:#121212;
}
.mini-panel .section-title-kicker, .panel .section-title-kicker, .service-card .bar + h3 + p {}
.download-card .copy, .download-card .download-meta { color:rgba(20,20,20,.72); }
.sectors-shell .section-title-kicker, .download-card .section-title-kicker { color:#9c6c17; }
.sector{
  border:1px solid rgba(120,90,30,.12);
  background:linear-gradient(180deg,#161616,#0a0a0a);
  color:#fff7e8;
}
.stat-card{
  background:linear-gradient(180deg, rgba(14,14,14,.84), rgba(14,14,14,.72));
}
section:not(.page-hero) .container > .section-title,
section:not(.page-hero) .container > .section-title-kicker {
  position:relative;
  z-index:1;
}
body main {
  position:relative;
}
body main::before{
  content:"";
  position:absolute;
  inset:320px 0 120px 0;
  background:linear-gradient(180deg, rgba(245,241,232,.0), rgba(245,241,232,.82) 18%, rgba(245,241,232,.92) 72%, rgba(245,241,232,0) 100%);
  pointer-events:none;
  z-index:0;
}
body main > section {
  position:relative;
  z-index:1;
}


/* Improve readability on light sections */
.panel,
.service-card,
.team-card,
.download-card,
.sectors-shell,
.contact-shell,
.mini-panel {
  color:#111111 !important;
}

.panel p,
.service-card p,
.team-card p,
.download-card p,
.download-meta,
.copy,
.mini-panel p,
.contact-info p,
.contact-meta,
li {
  color:rgba(17,17,17,.82) !important;
}

.panel h2,
.panel h3,
.service-card h3,
.team-card h3,
.download-card .section-title,
.sectors-shell .section-title,
.contact-shell .section-title,
.section-title {
  color:#0f0f0f !important;
}

.section-title-kicker,
.contact-meta strong,
.role {
  color:#9b6a16 !important;
}

.mini-panel {
  background:linear-gradient(135deg, rgba(229,195,123,.18), rgba(255,255,255,.92));
  border:1px solid rgba(155,106,22,.18);
}

.panel,
.service-card,
.team-card,
.download-card,
.sectors-shell {
  box-shadow:0 22px 60px rgba(0,0,0,.10);
}


/* Fix the remaining white text in the About page highlight cards */
.highlights-grid .panel,
.highlights-grid .panel div {
  color:#181818 !important;
  font-weight:500;
}

/* Improve readability of smaller text under page titles / hero subtitles */
.lead,
.hero-text,
.page-hero p,
.page-hero .lead {
  color:rgba(255,255,255,.82) !important;
  text-shadow:0 1px 10px rgba(0,0,0,.18);
}

/* Slightly brighten smaller navigation and supporting text in dark hero/header */
nav a,
.brand-sub,
.page-link,
.stat-label {
  color:rgba(255,255,255,.78);
}

/* Make the hero supporting paragraph slightly larger and clearer */
.lead {
  font-size:21px;
  line-height:1.82;
  max-width:780px;
}


/* v5 targeted readability patch only: keep all section styles same as v3 */
.lead,
.hero-text,
.page-hero p,
.page-hero .lead {
  color: rgba(255,255,255,0.88) !important;
  text-shadow: 0 1px 10px rgba(0,0,0,0.18);
}

.brand-sub,
nav a,
.page-link {
  color: rgba(255,255,255,0.82) !important;
}

.stat-label {
  color: rgba(255,255,255,0.84) !important;
}


/* Mobile optimization patch */
html, body { overflow-x: hidden; }
img { max-width: 100%; height: auto; }

@media (max-width: 900px) {
  .container { width: min(1240px, calc(100% - 24px)) !important; }
  header { position: sticky; top: 0; }
  .nav-wrap { flex-direction: column !important; align-items: flex-start !important; gap: 14px !important; padding: 14px 0 !important; }
  .brand { width: 100%; }
  .brand img { width: 48px !important; height: 48px !important; }
  .brand-title { font-size: 14px !important; letter-spacing: .10em !important; }
  .brand-sub { font-size: 10px !important; letter-spacing: .18em !important; }
  nav { width: 100%; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px !important; }
  nav a { font-size: 11px !important; letter-spacing: .12em !important; padding: 8px 0 !important; }

  .page-hero { padding: 34px 0 12px !important; }
  .page-hero-grid, .grid-2, .download-grid, .contact-grid, .services-grid, .team-grid, .highlights-grid, .sectors-grid, .hero-stats {
    grid-template-columns: 1fr !important; gap: 16px !important;
  }

  h1 { font-size: clamp(32px, 9vw, 46px) !important; line-height: 1.08 !important; margin-top: 16px !important; }
  .section-title { font-size: clamp(28px, 8vw, 38px) !important; line-height: 1.14 !important; }
  .lead, .hero-text, .page-hero p, .page-hero .lead { font-size: 17px !important; line-height: 1.7 !important; max-width: 100% !important; }
  .kicker, .badge, .section-title-kicker { font-size: 10px !important; letter-spacing: .18em !important; }

  .actions, .page-nav { flex-direction: column !important; align-items: stretch !important; gap: 10px !important; }
  .btn, .page-link { width: 100% !important; justify-content: center !important; text-align: center !important; }

  .hero-visual { order: -1; }
  .visual-shell { width: 100% !important; padding: 16px !important; border-radius: 26px !important; }
  .visual-inner { padding: 14px !important; border-radius: 22px !important; }
  .hero-logo-wrap { min-height: 220px !important; padding: 20px !important; border-radius: 18px !important; }
  .hero-logo-wrap img { max-height: 150px !important; }
  .hero-glow { width: 18rem !important; height: 18rem !important; }

  .panel, .mini-panel, .service-card, .team-card, .download-card, .sectors-shell, .contact-shell, .form, .stat-card {
    padding: 20px !important; border-radius: 22px !important;
  }

  .service-card h3, .team-card h3 { font-size: 22px !important; }
  .sector { font-size: 20px !important; padding: 18px !important; border-radius: 20px !important; }
  .team-icon { width: 46px !important; height: 46px !important; border-radius: 14px !important; }

  input, textarea { padding: 14px 14px !important; font-size: 16px !important; }
  .contact-grid { padding: 0 !important; }
  .contact-shell { overflow: hidden !important; }

  .footer-wrap { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; font-size: 13px !important; }

  body::before { background-size: 80vmin !important; opacity: .02 !important; }
  body::after { background-size: 44px 44px !important; opacity: .02 !important; }
}

@media (max-width: 480px) {
  .container { width: calc(100% - 20px) !important; }
  h1 { font-size: 30px !important; }
  .section-title { font-size: 26px !important; }
  .lead, .hero-text, .page-hero p, .page-hero .lead { font-size: 16px !important; }
  nav { grid-template-columns: 1fr 1fr !important; }
  .brand-title { font-size: 13px !important; }
  .brand-sub { font-size: 9px !important; }
}