:root {
  --bg:#07090a;
  --panel:#0d0f10;
  --text:#f5f1e8;
  --muted:#a9a7a1;
  --gold:#e6ad45;
  --gold2:#ffd878;
  --line:rgba(230,173,69,.22);
  --max:1160px;
}

* {
  box-sizing:border-box;
}

html {
  scroll-behavior:smooth;
}

body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"DM Sans",Arial,sans-serif;
  line-height:1.6;
}

a {
  color:inherit;
  text-decoration:none;
}

.container {
  width:min(var(--max),calc(100% - 48px));
  margin:auto;
}

/* =========================
   HEADER
========================= */

.site-header {
  position:fixed;
  z-index:20;
  top:0;
  left:0;
  right:0;
  background:rgba(4,6,7,.82);
  backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(255,255,255,.06);
}

.nav {
  height:76px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.brand {
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

.brand-logo {
  width:52px;
  height:52px;
  max-width:52px;
  max-height:52px;
  object-fit:contain;
  display:block;
  flex:0 0 52px;
}

.brand-copy {
  display:grid;
  gap:1px;
  min-width:0;
}

.brand-copy strong {
  font-size:10px;
  letter-spacing:.5px;
  white-space:nowrap;
}

.brand-copy small {
  font-size:6px;
  line-height:1.15;
  color:#d8b86c;
  letter-spacing:.45px;
}

.nav-links {
  display:flex;
  align-items:center;
  gap:26px;
  text-transform:uppercase;
  font-size:10px;
  letter-spacing:.55px;
}

.nav-links a {
  color:#ddd9d0;
}

.nav-links .active {
  color:var(--gold2);
  border-bottom:2px solid var(--gold);
  padding-bottom:6px;
}

.nav-cta {
  border:1px solid #8b6a2f;
  padding:10px 16px!important;
  border-radius:2px;
  color:var(--gold2)!important;
}

.nav-cta span,
.button span {
  margin-left:14px;
}

.menu-toggle {
  display:none;
  background:none;
  border:0;
  color:white;
  font-size:26px;
  cursor:pointer;
}

/* =========================
   HERO
========================= */

.hero {
  min-height:660px;
  position:relative;
  display:flex;
  align-items:center;
  overflow:hidden;
}

.hero-image {
  position:absolute;
  inset:0;
  background:url("/assets/hero/hero-banner.jpg") center/cover no-repeat;
  transform:scale(1.02);
}

.hero-overlay {
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      90deg,
      rgba(3,8,12,.98) 0%,
      rgba(3,8,12,.85) 38%,
      rgba(3,8,12,.15) 75%
    ),
    linear-gradient(
      0deg,
      rgba(0,0,0,.5),
      transparent 45%
    );
}

.hero-content {
  position:relative;
  padding-top:75px;
  max-width:620px;
  margin-left:max(24px,calc((100vw - var(--max))/2));
}

.eyebrow {
  color:var(--gold2);
  text-transform:uppercase;
  font-size:11px;
  font-weight:700;
  letter-spacing:1.5px;
  margin:0 0 12px;
}

.eyebrow i {
  display:inline-block;
  width:34px;
  border-top:2px solid var(--gold);
  vertical-align:middle;
  margin-left:13px;
}

h1,
h2 {
  font-family:"Playfair Display",Georgia,serif;
  font-weight:500;
  letter-spacing:-1.4px;
  line-height:.98;
  margin:0;
}

.hero h1 {
  font-size:clamp(50px,6vw,78px);
}

.hero-sub {
  font-size:clamp(19px,2.2vw,29px);
  font-weight:700;
  letter-spacing:2px;
  color:var(--gold2);
  margin:16px 0;
}

.hero-text {
  color:#d0cec8;
  max-width:530px;
  font-size:14px;
}

.button {
  display:inline-flex;
  align-items:center;
  margin-top:14px;
  padding:11px 17px;
  border:1px solid var(--gold);
  color:var(--gold2);
  font-size:10px;
  font-weight:800;
  letter-spacing:1px;
  text-transform:uppercase;
  transition:.25s;
}

.button:hover {
  background:var(--gold);
  color:#080909;
}

.filled {
  background:var(--gold);
  color:#090a0a;
  border:0;
  cursor:pointer;
}

/* =========================
   SECTIONS
========================= */

.section {
  padding:86px 0;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.about {
  background:linear-gradient(115deg,#080a0b,#111313);
}

.two-col {
  display:grid;
  grid-template-columns:1.25fr .85fr;
  gap:70px;
  align-items:center;
}

.about h2 {
  font-size:42px;
  max-width:680px;
}

.feature-list {
  border-left:1px solid var(--line);
  padding-left:40px;
  display:grid;
  gap:25px;
}

.feature-list article {
  display:flex;
  gap:17px;
}

.icon {
  font-size:28px;
  color:var(--gold2);
  width:30px;
}

.feature-list h3,
.steps h3 {
  margin:0 0 2px;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:1px;
  color:var(--gold2);
}

.feature-list p,
.steps p {
  font-size:12px;
  color:var(--muted);
  margin:0;
  line-height:1.45;
}

/* =========================
   VISION VIDEO
========================= */

.image-section {
  position:relative;
  min-height:475px;
  display:flex;
  align-items:center;
  overflow:hidden;
  isolation:isolate;
}

.vision {
  position:relative;
  overflow:hidden;
  background:#05080b;
}

/* Video is a true full-section background */
.vision-video {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  min-width:100%;
  min-height:100%;
  object-fit:cover;
  object-position:center center;
  display:block;
  z-index:0;
  pointer-events:none;
  background:#05080b;
}

/* Overlay stays above the video */
.vision .image-shade {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(
      90deg,
      rgba(3,10,17,.72) 0%,
      rgba(3,10,17,.48) 42%,
      rgba(3,10,17,.08) 82%
    ),
    linear-gradient(
      0deg,
      rgba(0,0,0,.28),
      rgba(0,0,0,.05)
    );
}

/* Vision content stays above the video */
.vision .split-copy {
  position:relative;
  z-index:2;
  width:100%;
}

.split-copy > div {
  max-width:430px;
}

.split-copy h2 {
  font-size:50px;
}

.split-copy p:not(.eyebrow) {
  color:#d0d3d5;
  max-width:390px;
  font-size:13px;
}

/* =========================
   SERVICES
========================= */

.service-intro {
  display:grid;
  grid-template-columns:1fr .9fr;
  gap:90px;
  align-items:center;
}

.services h2,
.impact h2,
.approach h2 {
  font-size:46px;
}

.services p:not(.eyebrow),
.impact p:not(.eyebrow),
.approach p:not(.eyebrow),
.contact p:not(.eyebrow) {
  color:var(--muted);
  font-size:13px;
  max-width:480px;
}

.photo-card {
  border:1px solid rgba(230,173,69,.18);
  overflow:hidden;
  background:#111;
}

.photo-card img {
  display:block;
  width:100%;
  height:250px;
  object-fit:cover;
  transition:transform .5s;
}

.photo-card:hover img {
  transform:scale(1.04);
}

/* =========================
   IMPACT
========================= */

.impact {
  background:#090b0c;
}

.impact-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:center;
}

.impact .large img {
  height:330px;
}

.impact h2 {
  max-width:520px;
}

/* =========================
   APPROACH
========================= */

.approach {
  background:linear-gradient(120deg,#080a0b,#111313);
}

.approach-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:90px;
  align-items:center;
}

.steps {
  border-left:1px solid var(--line);
}

.steps article {
  display:flex;
  gap:18px;
  align-items:center;
  padding:18px 0 18px 24px;
  border-bottom:1px solid var(--line);
}

.steps article:last-child {
  border-bottom:0;
}

.steps b {
  border:1px solid var(--gold);
  border-radius:50%;
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  color:var(--gold2);
  font-size:12px;
  flex:none;
}

/* =========================
   CONTACT
========================= */

.contact-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
}

.contact h2 {
  font-size:55px;
}

.contact-details {
  display:flex;
  gap:24px;
  flex-wrap:wrap;
  margin-top:28px;
  color:var(--gold2);
  font-size:12px;
}

.contact-details span {
  color:#d2d0ca;
  margin-left:7px;
}

.contact-form {
  display:grid;
  gap:10px;
}

.form-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.contact-form input,
.contact-form textarea {
  width:100%;
  background:#090b0c;
  border:1px solid rgba(255,255,255,.13);
  padding:13px;
  color:white;
  font:inherit;
  font-size:12px;
  outline:none;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color:var(--gold);
}

.contact-form textarea {
  resize:vertical;
}

.contact-form .button {
  justify-self:start;
}

.hidden {
  display:none;
}

/* =========================
   FOOTER
========================= */

footer {
  background:#050708;
}

.footer-main {
  padding:35px 0;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.footer-links {
  display:flex;
  gap:25px;
  text-transform:uppercase;
  font-size:9px;
  color:#b9b6af;
}

.social {
  display:flex;
  gap:14px;
  justify-content:flex-end;
  margin-top:15px;
}

.social a {
  font-size:12px;
  color:var(--gold2);
}

.copyright {
  border-top:1px solid rgba(255,255,255,.08);
  padding:17px 0;
  color:#666;
  font-size:9px;
}

/* =========================
   TABLET
========================= */

@media(max-width:850px) {

  .nav-links {
    display:none;
    position:absolute;
    top:76px;
    left:0;
    right:0;
    padding:25px;
    background:#07090a;
    flex-direction:column;
    align-items:flex-start;
  }

  .nav-links.open {
    display:flex;
  }

  .menu-toggle {
    display:block;
  }

  .hero {
    min-height:680px;
  }

  .two-col,
  .service-intro,
  .impact-grid,
  .approach-grid,
  .contact-grid {
    grid-template-columns:1fr;
    gap:45px;
  }

  .feature-list {
    padding-left:20px;
  }

  .about h2,
  .services h2,
  .impact h2,
  .approach h2 {
    font-size:37px;
  }

  .split-copy h2 {
    font-size:45px;
  }

  .footer-main {
    align-items:flex-start;
    gap:30px;
    flex-direction:column;
  }

  .footer-links {
    flex-wrap:wrap;
  }

  .footer-right {
    width:100%;
  }
}

/* =========================
   SMALL MOBILE
========================= */

@media(max-width:520px) {

  .container {
    width:min(var(--max),calc(100% - 30px));
  }

  .nav {
    height:70px;
  }

  .brand-logo {
    width:42px;
    height:42px;
    max-width:42px;
    max-height:42px;
    flex-basis:42px;
  }

  .brand-copy {
    display:none;
  }

  .hero-content {
    margin-left:15px;
    margin-right:15px;
  }

  .hero h1 {
    font-size:45px;
  }

  .hero-sub {
    font-size:17px;
  }

  .hero-text {
    font-size:12px;
  }

  .section {
    padding:62px 0;
  }

  .photo-card img,
  .impact .large img {
    height:230px;
  }

  .form-row {
    grid-template-columns:1fr;
  }

  .image-section {
    min-height:560px;
  }

  .vision-video {
    min-width:100%;
    min-height:100%;
    object-fit:cover;
  }

  .split-copy h2 {
    font-size:42px;
  }
}
```css
/* =========================
   VISION - VIDEO RIGHT SIDE
   Safe override
========================= */

.vision {
  position: relative;
  overflow: hidden;
  background: #05080b;
}

.vision-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.vision-content {
  position: relative;
  z-index: 2;
  max-width: 500px;
}

.vision-video {
  position: relative;
  width: 100%;
  height: auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border: 1px solid rgba(230,173,69,.22);
  background: #05080b;
}

.vision-video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Tablet and mobile */
@media (max-width: 850px) {
  .vision-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .vision-content {
    max-width: 600px;
  }

  .vision-video {
    width: 100%;
    min-width: 0;
    min-height: 0;
  }
}