:root {
  --black: #0a0a0a;
  --white: #ffffff;
  --accent: #c9a84c;
  --accent-dim: rgba(201,168,76,0.15);
  --light-gray: #a0a0a0;
  --mid-gray: #666;
  --card-bg: #141414;
  --border: rgba(255,255,255,0.08);
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family: 'Libre Franklin', sans-serif;
  background: var(--black);
  color: var(--white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* NAV */
nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding: 28px 48px;
  display:flex; justify-content:space-between; align-items:center;
  backdrop-filter: blur(24px);
  background: rgba(10,10,10,0.7);
  border-bottom: 1px solid rgba(201,168,76,0.08);
}
.nav-links { display:flex; gap:40px; align-items:center; }
.nav-links a {
  color: var(--light-gray); text-decoration:none;
  font-family: 'Instrument Sans', sans-serif;
  font-size:13px; font-weight:500; letter-spacing:1px; text-transform:uppercase;
  transition: color 0.3s;
}
.nav-links a:hover { color: var(--accent); }
.nav-contact {
  color: var(--accent) !important;
  padding: 10px 28px;
  border: 1px solid var(--accent) !important;
  transition: all 0.3s !important;
}
.nav-contact:hover { background: var(--accent) !important; color: var(--black) !important; }
.nav-wordmark {
  font-family: 'Instrument Sans', sans-serif;
  font-size:13px; font-weight:700; letter-spacing:3px; text-transform:uppercase;
  color: var(--white); text-decoration:none;
}

/* HERO */
.hero {
  min-height:100vh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  position:relative; padding:48px;
}
.hero::before {
  content:''; position:absolute; top:0;left:0;right:0;bottom:0;
  background: radial-gradient(ellipse 60% 50% at 50% 45%, rgba(201,168,76,0.04) 0%, transparent 70%);
  pointer-events:none;
}
.hero-logo {
  width: min(800px, 88vw);
  opacity: 0.95;
  margin: 0 auto 48px;
  display: block;
  animation: logo-in 1.2s cubic-bezier(0.16,1,0.3,1) forwards;
}
@keyframes logo-in { from{opacity:0;transform:scale(0.95)} to{opacity:0.95;transform:scale(1)} }
.hero-slogan {
  font-family:'Instrument Sans',sans-serif;
  font-size:clamp(14px,2vw,18px); font-weight:500;
  letter-spacing:6px; text-transform:uppercase; color:var(--accent);
  animation: fade-in 1s 0.4s cubic-bezier(0.16,1,0.3,1) both;
}

@media(max-width:640px) {
  .hero-slogan {
    font-size: 17px;
    letter-spacing: 2px;
  }
  .service-card p {
  max-width: 260px;
  margin: 0 auto;
  }
  .work-header .section-title {
  text-wrap: balance;
  }
  .stats-inner {
    justify-items: center;
  }

  .stat-block {
    max-width: 220px;
  }

  .stat-num {
    margin-bottom: 8px;
  }
 
.stat-num {
  font-variant-numeric: tabular-nums;
}

.stat-block:nth-child(1) .stat-num {
  transform: translateX(4px);
}

.stat-block:nth-child(3) .stat-num {
  transform: translateX(2px);
}
.stats-inner .stat-block:first-child {
  display: flex;
  flex-direction: column;
  align-items: flex; /* override center */
  padding-left: 5px; /* adjust value as needed */
}
.cta h2 {
  text-wrap: balance; /* modern property for balanced lines */
  word-break: normal; /* prevent awkward breaks */
  line-height: 1.3;   /* ensures tight, readable spacing */
}
.hero-sub {
    display: flex;                
    flex-wrap: wrap;              
    justify-content: center;      
    gap: 4px;                     
    font-size: 13px;              
    line-height: 1.4;
}

.hero-sub span {
    white-space: nowrap;
}

/* Mobile adjustment for smaller screens */
@media(max-width:640px) {
  .cta h2 {
    font-size: 1.8rem;   /* scale down for mobile readability */
    letter-spacing: -0.5px;
    text-align: center;  /* make sure it's centered on mobile */
  }
}


}

@keyframes fade-in { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }
.hero-line {
  width: 60px;
  height: 1px;
  background: var(--accent);
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 32px;
  margin-bottom: 32px;
  animation: fade-in 1s 0.6s cubic-bezier(0.16,1,0.3,1) both;
}
.hero-sub {
  font-size:11px; color:var(--light-gray); font-weight:400; letter-spacing:2px;
  text-transform:uppercase;
  animation: fade-in 1s 0.8s cubic-bezier(0.16,1,0.3,1) both;
}
.scroll-indicator {
  position: absolute;
  bottom: 40px;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: fit-content;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  animation: fade-in 1s 1.2s cubic-bezier(0.16,1,0.3,1) both;
}
.scroll-indicator span { font-size:10px; letter-spacing:3px; text-transform:uppercase; color:var(--mid-gray); }
.scroll-line {
  width:1px; height:40px;
  background:linear-gradient(to bottom,var(--accent),transparent);
  animation: scroll-pulse 2s ease-in-out infinite;
}
@keyframes scroll-pulse { 0%,100%{opacity:0.3} 50%{opacity:0.8} }

.divider { height:1px; background:var(--border); max-width:1200px; margin:0 auto; }

/* SECTION LABELS */
.section-label {
  font-family:'Instrument Sans',sans-serif;
  font-size:11px; font-weight:700; letter-spacing:4px; text-transform:uppercase;
  color:var(--accent); margin-bottom:20px;
  text-align:center;
}
.section-title {
  font-family:'Instrument Sans',sans-serif;
  font-size:clamp(1.8rem,3vw,2.6rem); font-weight:700;
  line-height:1.3; letter-spacing:-0.5px;
  text-align:center;
}

/* SERVICES */
.services { padding:120px 48px; max-width:1200px; margin:0 auto; }
.services-header {
  text-align:center; margin-bottom:80px; max-width:700px; margin-left:auto; margin-right:auto;
}
.services-header .section-title { margin-bottom:24px; }
.services-desc {
  font-size:0.95rem; line-height:1.8; color:var(--light-gray); font-weight:300;
  text-align:center; max-width:600px; margin:0 auto;
}
.services-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
}
.service-card {
  padding:48px 32px; border:1px solid var(--border); margin:-0.5px;
  transition:all 0.4s; position:relative; text-align:center;
}
.service-card:hover { background:rgba(201,168,76,0.03); border-color:rgba(201,168,76,0.2); }
.service-num {
  font-family:'Instrument Sans',sans-serif;
  font-size:32px; font-weight:800; color:var(--accent); opacity:0.2;
  margin-bottom:20px;
}
.service-card h3 {
  font-family:'Instrument Sans',sans-serif;
  font-size:1.1rem; font-weight:700; margin-bottom:16px; letter-spacing:-0.2px;
}
.service-card p { font-size:0.9rem; color:var(--light-gray); line-height:1.7; font-weight:300; }

/* WORK */
.work { padding:120px 48px; max-width:1200px; margin:0 auto; }
.work-header { text-align:center; margin-bottom:80px; }
.work-header .section-title { margin-bottom:0; }
.work-category { margin-bottom:64px; }
.work-cat-label {
  font-family:'Instrument Sans',sans-serif;
  font-size:11px; font-weight:700; letter-spacing:3px; text-transform:uppercase;
  color:var(--accent); margin-bottom:24px; padding-bottom:16px;
  border-bottom:1px solid var(--border); text-align:center;
}
.logo-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:2px; }
.logo-item { aspect-ratio:16/9; overflow:hidden; background:var(--card-bg); }
.logo-item img { width:100%; height:100%; object-fit:cover; transition:transform 0.6s cubic-bezier(0.16,1,0.3,1); }
.logo-item:hover img { transform:scale(1.04); }
.promo-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:2px; }
.promo-item { aspect-ratio:4/5; overflow:hidden; background:var(--card-bg); }
.promo-item img { width:100%; height:100%; object-fit:cover; transition:transform 0.6s cubic-bezier(0.16,1,0.3,1); }
.promo-item:hover img { transform:scale(1.04); }

/* STATS */
.stats { padding:100px 48px; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.stats-inner { max-width:1200px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr 1fr; gap:48px; }
.stat-block { text-align:center; }
.stat-num {
  font-family:'Instrument Sans',sans-serif;
  font-size:clamp(3rem,5vw,4.5rem); font-weight:800; letter-spacing:-2px;
  line-height:1; margin-bottom:12px; color:var(--accent);
}
.stat-label { font-size:12px; letter-spacing:3px; text-transform:uppercase; color:var(--light-gray); font-weight:500; }

/* ABOUT */
.about { padding:120px 48px; max-width:1200px; margin:0 auto; }
.about-inner {
  display:grid; grid-template-columns:1fr 1fr; gap:100px; align-items:start;
}
.about-text .section-label { text-align:left; }
.about-text .section-title { text-align:left; }
.about-text p { font-size:1rem; line-height:1.9; color:var(--light-gray); font-weight:300; margin-top:24px; }
.about-right { padding-top:16px; }
.about-quote {
  font-family:'Instrument Sans',sans-serif;
  font-size:1.5rem; font-weight:600; line-height:1.5; letter-spacing:-0.3px;
  border-left:3px solid var(--accent); padding-left:32px;
}
.about-cite { margin-top:24px; padding-left:32px; font-size:13px; color:var(--mid-gray); font-weight:400; }
.about-cite strong { color:var(--accent); font-weight:600; }

/* CTA */
.cta { padding:140px 48px; text-align:center; position:relative; }
.cta::before {
  content:''; position:absolute; top:0;left:0;right:0;bottom:0;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(201,168,76,0.05) 0%, transparent 70%);
  pointer-events:none;
}
.cta h2 {
  font-family:'Instrument Sans',sans-serif;
  font-size:clamp(2rem,4vw,3.2rem); font-weight:800; letter-spacing:-1px; margin-bottom:16px;
  position:relative;
}
.cta p { color:var(--light-gray); font-size:1.05rem; font-weight:300; margin-bottom:48px; position:relative; }
.cta-email {
  display:inline-block; font-family:'Instrument Sans',sans-serif;
  font-size:14px; font-weight:700; letter-spacing:2px; text-transform:uppercase;
  color:var(--black); text-decoration:none; padding:18px 48px;
  background:var(--accent); border:1px solid var(--accent);
  transition:all 0.3s; position:relative;
}
.cta-email:hover { background:transparent; color:var(--accent); }

/* FOOTER */
footer {
  padding:40px 48px; border-top:1px solid var(--border);
  display:flex; justify-content:space-between; align-items:center;
  max-width:1200px; margin:0 auto;
}
footer span { font-size:12px; color:var(--mid-gray); letter-spacing:0.5px; }
footer a { font-size:12px; color:var(--mid-gray); text-decoration:none; transition:color 0.3s; }
footer a:hover { color:var(--accent); }

/* FADE ANIMATION */
.fade-up { opacity:0; transform:translateY(30px); transition:all 0.7s cubic-bezier(0.16,1,0.3,1); }
.fade-up.visible { opacity:1; transform:translateY(0); }

/* RESPONSIVE */
@media(max-width:960px) {
  .services-grid{grid-template-columns:repeat(2,1fr)}
  .logo-grid{grid-template-columns:repeat(2,1fr)}
  .promo-grid{grid-template-columns:repeat(2,1fr)}
  .about-inner{grid-template-columns:1fr;gap:48px}
}
@media(max-width:640px) {
  nav{padding:20px 24px}
  .nav-links{gap:20px}
  .nav-links a:not(.nav-contact){display:none}
  .hero{padding:24px}
  .hero-logo{width:min(600px,92vw)}
  .services,.work,.about{padding:80px 24px}
  .services-grid{grid-template-columns:1fr}
  .stats{padding:64px 24px}
  .stats-inner{grid-template-columns:1fr;gap:40px}
  .cta{padding:80px 24px}
  footer{padding:32px 24px;flex-direction:column;gap:12px;text-align:center}
  .about-text .section-label,.about-text .section-title{text-align:center}
}