@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700&family=Manrope:wght@300;400;500;600&display=swap');
body{margin:0;background:#09090a;font-family:'Manrope',sans-serif;}
a{color:#c9a565;text-decoration:none;} a:hover{color:#e6ca97;}
::selection{background:#c9a565;color:#09090a;}

@keyframes clientScroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.client-track{animation:clientScroll 30s linear infinite;}
.client-item{display:flex;flex-direction:column;align-items:center;gap:6px;flex-shrink:0;}
.client-wordmark{font-family:'Sora',sans-serif;font-weight:700;font-size:20px;letter-spacing:0.03em;color:#c4c0b6;white-space:nowrap;opacity:0.7;}
.client-name{font-size:10.5px;letter-spacing:0.08em;color:#5e5849;text-transform:uppercase;}
@keyframes drift{0%{background-position:0% 50%;}50%{background-position:100% 50%;}100%{background-position:0% 50%;}}

.fade-in{animation:fadeUp 0.9s ease both;}
.fade-in-1{animation:fadeUp 0.9s ease 0.1s both;}
.fade-in-2{animation:fadeUp 0.9s ease 0.2s both;}
.fade-in-3{animation:fadeUp 0.9s ease 0.3s both;}

.atmosphere{position:relative;}
.atmosphere::before{content:'';position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(ellipse 60% 50% at 25% 15%, rgba(201,165,101,0.14), transparent 60%),
  radial-gradient(ellipse 50% 60% at 85% 85%, rgba(150,120,70,0.1), transparent 60%);}

.card{display:block;text-decoration:none;color:inherit;border-top:1px solid rgba(233,231,226,0.1);padding:24px 0;transition:opacity 0.3s ease;}
.card:hover{opacity:0.85;}
.card img{width:100%;height:220px;object-fit:cover;border-radius:6px;margin-bottom:16px;display:block;transition:transform 0.5s ease;}
.card:hover img{transform:scale(1.04);}

.btn{display:inline-block;background:linear-gradient(120deg,#e6ca97,#c9a565);background-size:200% auto;color:#09090a;padding:17px 34px;text-decoration:none;font-size:14px;font-weight:600;letter-spacing:0.04em;text-transform:uppercase;transition:filter 0.3s ease,background-position 0.6s ease;}
.btn:hover{filter:brightness(1.1);background-position:right center;color:#09090a;}

.hero-bg{position:relative;background-size:cover;background-position:center;}
.hero-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(9,9,10,0.35) 0%,rgba(9,9,10,0.5) 55%,rgba(9,9,10,0.95) 100%);pointer-events:none;}
.hero-bg > *{position:relative;z-index:1;}

.stat-pill{display:inline-flex;align-items:center;gap:8px;font-family:'Sora',sans-serif;font-weight:600;font-size:15px;color:#f3f1ec;}
.stat-dot{width:5px;height:5px;border-radius:50%;background:#c9a565;display:inline-block;}

.mobile-nav-toggle{display:none;}
nav > div:last-child a{position:relative;transition:color 0.2s ease;white-space:nowrap;}
nav > div:last-child a::after{content:'';position:absolute;left:9px;right:9px;bottom:4px;height:1px;background:#e6ca97;transform:scaleX(0);transition:transform 0.25s ease;transform-origin:center;}
nav > div:last-child a:hover{color:#e6ca97 !important;}
nav > div:last-child a:hover::after{transform:scaleX(1);}
.nav-dropdown-wrap a:hover::after{display:none;}

/* Social icons: brand-colored hover states, top nav + footer */
a[aria-label="Instagram"]:hover{color:#E1306C !important;}
a[aria-label="LinkedIn"]:hover{color:#0A66C2 !important;}
a[aria-label="YouTube"]:hover{color:#FF0000 !important;}

@media (max-width:1180px){
  .bg-anim{display:none;}
  nav{padding:14px 16px !important;}
  nav > div:first-child{gap:8px !important;}
  nav > .connect-wrap-3{flex-shrink:0;margin:0 12px !important;}
  nav > div:last-child{gap:0 2px !important;}
  nav > div:last-child a{padding:8px 5px !important;font-size:11px !important;white-space:nowrap !important;}
  nav .connect-ring-3,
  nav .connect-moon-orbit{width:78px !important;height:24px !important;}
}
@media (max-width:1050px){
  nav > .connect-wrap-3{margin:0 6px !important;}
  nav > div:last-child{gap:0 !important;}
  nav > div:last-child a{padding:8px 3px !important;font-size:10px !important;white-space:nowrap !important;}
  nav > div:last-child span{margin:0 2px !important;}
}
@media (max-width:860px){
  .hero-video-desktop-only{display:none !important;}
  .hero-video-mobile-fallback{display:block !important;top:0 !important;height:180px !important;}
  .grid-2{grid-template-columns:1fr !important;}

  /* MOBILE NAV: hamburger toggle instead of scrollable link row */
  nav > div:last-child{display:none !important;}
  nav > div:last-child.mobile-nav-open{
    display:flex !important;flex-direction:column !important;
    position:fixed !important;top:96px !important;left:12px !important;right:12px !important;
    background:rgba(15,14,12,0.96);backdrop-filter:blur(24px) saturate(150%);-webkit-backdrop-filter:blur(24px) saturate(150%);
    border:1px solid rgba(201,165,101,0.25);border-radius:16px;padding:12px;gap:2px !important;
    overflow-x:visible !important;white-space:normal !important;box-shadow:0 20px 50px rgba(0,0,0,0.5);
  }
  nav > div:last-child.mobile-nav-open a{padding:14px 12px !important;font-size:13px !important;border-top:1px solid rgba(233,231,226,0.08);}
  nav > div:last-child.mobile-nav-open span{display:none !important;}
  .nav-dropdown-wrap{width:100%;}
  .mobile-nav-toggle{
    display:flex !important;flex-direction:column;justify-content:center;align-items:center;gap:4px;
    width:38px;height:38px;order:3;flex-shrink:0;background:rgba(201,165,101,0.08);
    border:1px solid rgba(201,165,101,0.25);border-radius:8px;margin-left:8px;
  }
  .mobile-nav-toggle span{display:block;width:16px;height:1.5px;background:#e6ca97;}

  /* MOBILE NAV: stack into 3 clean rows instead of one squeezed row */
  nav{
    flex-wrap:wrap !important;
    top:12px !important;left:12px !important;right:12px !important;
    padding:12px 16px !important;
    row-gap:12px;
  }
  nav > div:first-child{flex:1 1 auto !important;order:1;}
  nav > div:first-child img{height:38px !important;}
  nav > div:first-child > div{display:flex !important;gap:12px !important;}
  nav > div:first-child > div svg{width:18px !important;height:18px !important;}
  nav > .connect-wrap-3{order:2;width:56px !important;height:56px !important;margin:0 !important;}
  nav > .connect-wrap-3 .connect-sphere{width:56px !important;height:56px !important;font-size:8px !important;}
  nav > .connect-wrap-3 .connect-ring-3,
  nav > .connect-wrap-3 .connect-moon-orbit{width:80px !important;height:26px !important;}
  nav > div:last-child{
    order:3;flex:1 1 100% !important;justify-content:flex-start !important;
    overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch;
    padding-top:8px;border-top:1px solid rgba(201,165,101,0.12);
  }
  nav > div:last-child a,
  nav > div:last-child span{flex-shrink:0;}
  .nav-dropdown{position:fixed !important;left:12px !important;right:12px !important;top:auto !important;transform:none !important;width:auto !important;}

  /* MOBILE HERO: tighten hero type and spacing */
  section.atmosphere{padding:150px 20px 60px !important;min-height:auto !important;}
  section.atmosphere h1{font-size:15px !important;}
  section.atmosphere h2{font-size:34px !important;}
  section.atmosphere p{font-size:15.5px !important;}
  section.atmosphere .btn{width:100%;text-align:center;box-sizing:border-box;}
  section.atmosphere > div > div:last-child{gap:14px 20px !important;margin-top:36px !important;}
  section.atmosphere > div > div:last-child span{font-size:12.5px !important;}

  /* MOBILE SERVICES GRID: collapse bento grid to single column, fix title sizing */
  section h2{font-size:26px !important;}
  a.card[style*="grid-column"]{grid-column:span 1 !important;grid-row:span 1 !important;}
  a.card[style*="grid-auto-rows"],
  div[style*="grid-auto-rows:180px"]{grid-template-columns:1fr !important;grid-auto-rows:220px !important;}
  a.card h3{font-size:18px !important;}
  a.card span{font-size:11px !important;}

  /* MOBILE FOOTER */
  footer div[style*="grid-template-columns:1.4fr"]{grid-template-columns:1fr !important;gap:32px !important;}
}