.clients-marquee{
  padding:80px 0;
  border-top:1px solid var(--line);
  overflow:hidden;
}
.clients-marquee .eyebrow{
  font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--gold);
}
.clients-marquee .wrap{
  text-align:center;
}
.clients-marquee h2{
  font-size:clamp(26px,3vw,38px);
  font-weight:400;
  max-width:20ch;
  margin:16px auto 0; /* auto left/right margins center the box itself */
}

.marquee-track-wrap{
  margin-top:56px;
  overflow:hidden;
  mask-image:linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  -webkit-mask-image:linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}
.marquee-track{
  display:flex;
  width:max-content;
  animation:marquee-scroll 28s linear infinite;
}
.marquee-track span{
  flex:0 0 auto;
  padding:0 48px;
  font-size:clamp(20px,2.4vw,30px);
  font-weight:400;
  color:var(--off-dim);
  white-space:nowrap;
  transition:color .3s ease;
}
.marquee-track span:hover{
  color:var(--gold);
}

@keyframes marquee-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}


  :root{
    --black:#0A0A09;
    --panel:#131211;
    --off:#EFECE4;
    --off-dim:#B9B6AC;
    --line:rgba(239,236,228,0.14);
    --gold:#B99456;
    --gold-soft:rgba(185,148,86,0.5);
    --max:1400px;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--black);
    color:var(--off);
    font-family:'Inter',sans-serif;
    font-weight:300;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  @media (prefers-reduced-motion: reduce){
    *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important;}
  }
  a{color:inherit;}
  h1,h2,h3,h4{font-family:'Fraunces',serif; font-weight:400; margin:0;}
  .wrap{max-width:var(--max); margin:0 auto; padding:0 5vw;}
  .eyebrow{
    font-size:11px; letter-spacing:0.24em; text-transform:uppercase;
    color:var(--gold); font-weight:500;
  }
  :focus-visible{outline:1px solid var(--gold); outline-offset:4px;}
  img,svg{display:block; max-width:100%;}

  /* ---------------- Nav ---------------- */
  header{
    position:fixed; top:0; left:0; right:0; z-index:100;
    padding:28px 0;
    transition:background .4s ease, padding .4s ease, border-color .4s ease;
    border-bottom:1px solid transparent;
  }
  header.scrolled{
    background:rgba(10,10,9,0.92);
    backdrop-filter:blur(10px);
    padding:18px 0;
    border-bottom:1px solid var(--line);
  }
  nav.wrap{display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:16px;}
  .nav-left ul, ul{list-style:none; display:flex; gap:34px; align-items:center; margin:0; padding:0;}
  .nav-right{display:flex; justify-content:flex-end;}
  nav a{text-decoration:none;}
  nav ul a{
    font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--off-dim);
    transition:color .25s ease;
  }
  nav ul a:hover{color:var(--off);}
  .brand{
    font-family:'Fraunces',serif; font-size:20px; letter-spacing:0.32em; text-align:center;
    text-decoration:none; color:var(--off); font-weight:400;
    display:flex; align-items:center; justify-content:center;
  }
  .brand img{height:64px; width:auto; display:block;}
  .contact-watermark{
    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    width:min(70vw, 600px); opacity:0.045; pointer-events:none; z-index:0;
  }
  .nav-cta{
    border:1px solid var(--gold-soft); color:var(--gold);
    padding:9px 20px; font-size:11px; letter-spacing:0.14em; text-transform:uppercase;
    transition:background .3s ease, color .3s ease;
  }
  .nav-cta:hover{background:var(--gold); color:var(--black);}

  /* ---------------- Hero ---------------- */
  .hero{
    position:relative;
    min-height:100vh;
    display:flex; flex-direction:column; justify-content:flex-end;
    overflow:hidden;
    padding-bottom:64px;
  }
  .hero-scene{
    position:absolute; inset:0; z-index:0;
  }
  .hero-scene svg{width:100%; height:100%;}
  .hero-scene::after{
    content:"";
    position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(10,10,9,0.2) 0%, rgba(10,10,9,0.55) 55%, var(--black) 100%);
  }
  .hero-content{position:relative; z-index:2;}
  .hero .eyebrow{display:block; margin-bottom:22px;}
  .hero h1{
    font-size:clamp(40px, 6.6vw, 96px);
    line-height:1.04;
    max-width:15em;
    font-weight:400;
    color:var(--off);
  }
  .hero h1 em{font-style:italic; color:var(--gold);}
  .hero-foot{
    display:flex; justify-content:space-between; align-items:flex-end; gap:24px;
    margin-top:56px; padding-top:28px; border-top:1px solid var(--line);
  }
  .hero-foot p{max-width:34ch; font-size:15px; color:var(--off-dim); margin:0;}
  .hero-scroll{
    display:flex; align-items:center; gap:10px; font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--off-dim);
    white-space:nowrap;
  }
  .hero-scroll .dot{width:6px; height:6px; border-radius:50%; background:var(--gold); animation:pulse 1.8s ease-in-out infinite;}
  @keyframes pulse{0%,100%{opacity:0.35;} 50%{opacity:1;}}

  /* ---------------- Quote ---------------- */
  .quote-band{
    padding:180px 0; text-align:center;
    border-bottom:1px solid var(--line);
  }
  .quote-band blockquote{
    margin:0 auto; max-width:20ch;
    font-family:'Fraunces',serif; font-style:italic; font-weight:400;
    font-size:clamp(26px, 4vw, 46px); line-height:1.4; color:var(--off);
  }
  .quote-band cite{
    display:block; margin-top:28px; font-style:normal;
    font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--gold);
  }

  /* ---------------- Stats ---------------- */
  .stats{
    display:grid; grid-template-columns:repeat(4,1fr);
    border-bottom:1px solid var(--line);
  }
  .stat{
    padding:56px 40px;
    border-right:1px solid var(--line);
  }
  .stat:last-child{border-right:none;}
  .stat b{
    font-family:'Fraunces',serif; font-weight:400; font-size:clamp(34px,4vw,52px);
    display:block; color:var(--off);
  }
  .stat span{font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--off-dim); margin-top:10px; display:block;}

  /* ---------------- Section heads ---------------- */
  .section-intro{padding:160px 0 90px;}
  .section-intro .eyebrow{margin-bottom:22px; display:block;}
  .section-intro h2{font-size:clamp(34px,5vw,64px); max-width:14em; font-weight:400;}
  .section-intro p{max-width:56ch; color:var(--off-dim); font-size:16.5px; margin-top:26px;}

  /* ---------------- Portfolio (stacked, alternating) ---------------- */
  .work-row{
    display:grid; grid-template-columns:1fr 1fr;
    align-items:stretch;
    border-top:1px solid var(--line);
  }
  .work-row:nth-child(even){direction:rtl;}
  .work-row:nth-child(even) > *{direction:ltr;}
  .work-visual{
    position:relative; min-height:560px; overflow:hidden;
    background:var(--panel);
  }
 .work-visual svg{position:absolute; inset:0; width:100%; height:100%;}

.work-visual img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:grayscale(70%);
  transform:scale(1.10);
  transition:filter .6s ease, transform .6s ease;
}
.work-visual img:hover{
  filter:grayscale(0%);
  transform:scale(1);
}

.work-visual--triptych{
  display:flex;
}
.work-visual--triptych img{
  flex:1 1 33.333%;
  width:33.333%;
  height:100%;
  object-fit:cover;
  display:block;
}
   .work-copy {
    padding: 64px 6vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
  .work-copy .idx{font-size:11px; letter-spacing:0.14em; color:var(--gold); text-transform:uppercase; margin-bottom:18px;}
  .work-copy h3{font-size:clamp(30px,3.4vw,46px); font-weight:400; margin-bottom:16px;}
  .work-copy .loc{font-size:12px; letter-spacing:0.1em; text-transform:uppercase; color:var(--off-dim); margin-bottom:22px;}
  .work-copy p{color:var(--off-dim); font-size:15.5px; max-width:44ch; margin:0 0 28px;}
  .work-copy .tag{
    display:inline-flex; width:fit-content;
    font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--off);
    border-bottom:1px solid var(--gold-soft); padding-bottom:6px;
  }

  /* ---------------- Services ---------------- */
  .services{border-top:1px solid var(--line);}
  .service-row{
    display:grid; grid-template-columns:80px 1fr 1.4fr;
    gap:32px; align-items:baseline;
    padding:38px 0; border-bottom:1px solid var(--line);
  }
  .service-row .no{font-family:'Fraunces',serif; font-style:italic; color:var(--gold); font-size:15px;}
  .service-row h4{font-size:24px; font-weight:400;}
  .service-row p{margin:0; color:var(--off-dim); font-size:15px; max-width:48ch;}

  /* ---------------- Philosophy split ---------------- */
  .philosophy{
    display:grid; grid-template-columns:0.9fr 1.3fr; gap:64px;
    padding:160px 0; border-top:1px solid var(--line);
  }
  .philosophy h2{font-size:clamp(30px,4vw,48px); max-width:10em;}
  .philosophy .body p{font-size:17px; color:var(--off-dim); max-width:58ch; margin:0 0 22px;}
  .philosophy .body p:first-child{color:var(--off); font-size:19px;}

  /* ---------------- Contact ---------------- */
  .contact{
    border-top:1px solid var(--line);
    padding:180px 0 100px;
    text-align:center;
    position:relative;
    overflow:hidden;
  }
  .contact > .wrap{position:relative; z-index:1;}
  .contact .eyebrow{display:block; margin-bottom:22px;}
  .contact h2{font-size:clamp(38px,7vw,88px); max-width:16em; margin:0 auto;}
  .contact h2 em{font-style:italic; color:var(--gold);}
  .contact-cta{
    display:inline-block; margin-top:48px;
    border:1px solid var(--gold-soft); color:var(--gold);
    padding:18px 40px; font-size:12px; letter-spacing:0.16em; text-transform:uppercase;
    text-decoration:none; transition:background .3s ease, color .3s ease;
  }
  .contact-cta:hover{background:var(--gold); color:var(--black);}
  .contact-details{
    display:flex; justify-content:center; gap:64px; margin-top:80px; flex-wrap:wrap;
  }
  .contact-details div{text-align:left;}
  .contact-details .eyebrow{margin-bottom:14px;}
  .contact-details p, .contact-details a{
    font-size:14.5px; color:var(--off-dim); margin:0 0 6px; text-decoration:none; display:block;
  }
  .contact-details a:hover{color:var(--gold);}

  footer{
    border-top:1px solid var(--line);
    padding:32px 0;
    position:relative;
  }
  footer .wrap{
    display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px;
    font-size:11px; letter-spacing:0.06em; color:var(--off-dim);
  }
  footer .socials{display:flex; gap:26px; list-style:none; margin:0; padding:0;}
  footer .socials a{text-decoration:none; color:var(--off-dim); transition:color .25s ease;}
  footer .socials a:hover{color:var(--gold);}

  @media (max-width:980px){
    .stats{grid-template-columns:repeat(2,1fr);}
    .stat:nth-child(2){border-right:none;}
    .work-row{grid-template-columns:1fr;}
    .work-row:nth-child(even){direction:ltr;}
    .work-visual{min-height:360px;}
    .philosophy{grid-template-columns:1fr;}
    .service-row{grid-template-columns:50px 1fr; row-gap:8px;}
    .service-row p{grid-column:1/-1;}
  }
  @media (max-width:720px){
    .nav-left, .nav-cta{display:none;}
    nav.wrap{grid-template-columns:1fr auto;}
    .contact-details{flex-direction:column; gap:32px; align-items:center;}
    .contact-details div{text-align:center;}
    .section-intro{padding:120px 0 60px;}
    .quote-band{padding:120px 0;}
    .philosophy, .contact{padding-top:100px; padding-bottom:100px;}
  }