*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:#f2f0eb;color:#151a1e;line-height:1.5}

/* EXACT approved hero image scaling */
.hero-wrapper{background:#070d12}
.hero-frame{
  position:relative;
  width:min(100vw, 1920px);
  margin:0 auto;
  line-height:0;
}
.hero-frame img{
  display:block;
  width:100%;
  height:auto;
}

/* Clickable overlays on approved visual */
.hotspot{
  position:absolute;
  display:block;
  z-index:5;
}
.nav-home{left:42.4%;top:2.0%;width:5.0%;height:7.0%}
.nav-services{left:48.7%;top:2.0%;width:6.0%;height:7.0%}
.nav-experience{left:55.4%;top:2.0%;width:7.2%;height:7.0%}
.nav-about{left:64.5%;top:2.0%;width:5.1%;height:7.0%}
.nav-contact{left:70.7%;top:2.0%;width:5.4%;height:7.0%}
.nav-consult{left:83.2%;top:1.5%;width:14.2%;height:7.8%}
.hero-consult{left:3.3%;top:61.8%;width:23.8%;height:7.1%}
.hero-services{left:3.3%;top:68.9%;width:23.8%;height:6.9%}

.section{padding:95px 8vw}
.eyebrow{font-size:12px;letter-spacing:3px;color:#a77d36;font-weight:800}
.section h2{font-size:52px;line-height:1.05;max-width:900px;margin:14px 0 35px}

.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#d0d2d2}
.cards article{background:#faf9f6;padding:32px;min-height:260px}
.cards em{font-style:normal;color:#a47a35;font-size:11px;font-weight:800}
.cards h3{margin:24px 0 10px}
.cards p,.copy p{color:#59636b}

.split{display:grid;grid-template-columns:1fr 1fr;gap:7vw;background:#fff}
.copy li{margin:10px 0}

.dark{background:#111922;color:#fff}
.engage{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.engage>div{border-top:2px solid #a77d36}
.engage p{color:#bbc2c7}

.contact{text-align:center}
.contact h2{margin-left:auto;margin-right:auto}
.contact p{max-width:720px;margin:0 auto 30px;color:#59636b;font-size:18px}
.gold-btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:64px;padding:0 34px;
  background:#c49b52;color:#111;
  text-decoration:none;font-weight:800
}

footer{
  background:#070c10;color:#929ba2;
  padding:38px 8vw;
  display:flex;justify-content:space-between;
  font-size:12px
}

@media(max-width:1050px){
  .cards{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:700px){
  .section{padding:65px 7vw}
  .section h2{font-size:38px}
  .cards,.split,.engage{grid-template-columns:1fr}
  footer{flex-direction:column;gap:12px}
}


/* v1.1 mobile refinement — approved desktop hero remains unchanged */
.brand-values{background:#0a1014;color:#c49b52;text-align:center;padding:22px 7vw;font-size:12px;font-weight:800;letter-spacing:3px}
.brand-values i{font-style:normal;color:#5f666b;margin:0 14px}

@media(max-width:700px){
  .hero-wrapper{overflow:hidden;background:#070d12}
  .hero-frame{width:100%;max-width:none;margin:0;aspect-ratio:1920/819}
  .hero-frame img{width:100%;height:100%;object-fit:contain;object-position:center top}
  .hotspot{display:none}

  .section{padding:46px 7vw 54px}
  .section h2{font-size:clamp(34px,10vw,46px);line-height:1.02;letter-spacing:-1px;margin:12px 0 26px}
  .eyebrow{font-size:11px;letter-spacing:2.5px}

  .cards{display:grid;grid-template-columns:1fr;gap:12px;background:transparent}
  .cards article{min-height:0;padding:24px 22px;border:1px solid #e1dfd8}
  .cards h3{font-size:22px;line-height:1.15;margin:16px 0 10px}
  .cards p{font-size:16px;line-height:1.55;margin-bottom:0}

  .split{grid-template-columns:1fr;gap:28px}
  .copy p{font-size:17px;line-height:1.6}
  .copy li{margin:9px 0}
  .engage{grid-template-columns:1fr;gap:20px}
  .contact p{font-size:17px;line-height:1.6}
  .gold-btn{width:100%;min-height:58px;padding:0 24px}

  .brand-values{padding:20px 5vw;font-size:10px;letter-spacing:2px}
  .brand-values i{margin:0 8px}
  footer{padding:28px 7vw;gap:8px;font-size:11px}
}

@media(min-width:701px) and (max-width:1050px){
  .section{padding:74px 7vw}
  .section h2{font-size:46px}
  .cards{grid-template-columns:repeat(2,1fr)}
}


/* v1.2 — true full-screen mobile landing page */
.desktop-hero{display:block}
.mobile-hero{display:none}

@media(max-width:700px){
  html,body{width:100%;overflow-x:hidden}
  .desktop-hero{display:none !important}

  .hero-wrapper{
    min-height:100svh;
    background:#061016;
    display:block;
    overflow:hidden;
  }

  .mobile-hero{
    display:flex;
    position:relative;
    width:100%;
    min-height:100svh;
    background:#061016;
    align-items:flex-start;
    justify-content:center;
    overflow:hidden;
  }

  .mobile-hero img{
    display:block;
    width:100%;
    height:auto;
    object-fit:contain;
    object-position:center top;
  }

  .mobile-hero::after{
    content:"";
    position:absolute;
    left:0;right:0;bottom:0;
    height:18svh;
    background:linear-gradient(180deg,rgba(6,16,22,0),#061016 62%);
    pointer-events:none;
    z-index:1;
  }

  .mobile-hotspot,.mobile-scroll{
    position:absolute;
    display:block;
    z-index:5;
  }

  .mobile-consult{left:6%;top:66%;width:58%;height:6.5%}
  .mobile-services{left:6%;top:73%;width:58%;height:6.5%}
  .mobile-scroll{left:36%;bottom:2.5%;width:28%;height:7%}

  #services{scroll-margin-top:0}
  .section{padding-top:52px}
  .section h2{font-size:clamp(31px,8.8vw,40px);line-height:1.04}
}

@media(max-width:390px){
  .mobile-consult{top:65%}
  .mobile-services{top:72%}
}

/* v1.4 — mobile navigation + capability-strip readability */
.mobile-menu-toggle,.mobile-nav{display:none}
@media(max-width:700px){
  /* Keep the artwork clean all the way through the capability descriptions. */
  .mobile-hero::after{display:none}

  /* Invisible tap target sits directly over the three-bar artwork. */
  .mobile-menu-toggle{
    display:block;position:absolute;z-index:20;
    top:2.7%;right:3.2%;width:13%;height:6.5%;
    border:0;background:transparent;padding:0;cursor:pointer;
  }
  .mobile-menu-toggle:focus-visible{outline:2px solid #c49b52;outline-offset:2px}

  .mobile-nav{
    display:flex;position:absolute;z-index:19;
    top:8.7%;right:3.5%;width:min(78vw,310px);
    flex-direction:column;
    background:rgba(6,16,22,.97);
    border:1px solid rgba(196,155,82,.7);
    box-shadow:0 14px 34px rgba(0,0,0,.38);
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity .18s ease,transform .18s ease,visibility .18s;
  }
  .mobile-nav.is-open{opacity:1;visibility:visible;transform:translateY(0)}
  .mobile-nav a{
    color:#fff;text-decoration:none;text-transform:uppercase;
    letter-spacing:1.6px;font-size:14px;font-weight:700;
    padding:15px 18px;border-bottom:1px solid rgba(255,255,255,.09);
  }
  .mobile-nav a:last-child{border-bottom:0;color:#d9ad5c}

  /* Preserve the full capability captions instead of fading/cropping them. */
  .mobile-hero{min-height:0;height:auto;overflow:visible}
  .mobile-hero img{width:100%;height:auto;object-fit:contain}
  .mobile-scroll{bottom:1.2%}
}