:root{
  --bone:#F7F5F1;
  --charcoal:#221F1C;
  --taupe:#8C7B6B;
  --stone:#D8D2C7;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{
  background:var(--bone);
  color:var(--charcoal);
  font-family:'Inter',sans-serif;
  font-weight:400;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
.wrap{max-width:1200px;margin:0 auto;padding:0 40px;}
section{padding:90px 0;border-bottom:1px solid var(--stone);}
#hero{padding-top:48px;}

/* Nav */
nav{
  display:flex;align-items:center;justify-content:space-between;
  height:172px;padding:0 40px;max-width:1200px;margin:0 auto;
  border-bottom:1px solid var(--stone);
  overflow:visible;
}
nav img{height:140px;width:auto;flex-shrink:0;}
.navlinks{display:flex;gap:32px;font-size:13px;text-transform:uppercase;letter-spacing:0.05em;font-weight:500;}
.navlinks a:hover, .navlinks a.active{color:var(--taupe);}

/* Hero */
.hero-top{padding-top:0;}
.hero-top h1{font-size:26px;font-weight:800;margin-bottom:14px;}
.hero-top p.hero-question{font-size:16px;font-weight:500;margin-bottom:16px;max-width:640px;}
.hero-top p{font-size:14px;font-weight:400;max-width:700px;margin-bottom:14px;}
.hero-imgs{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:24px;}
.ph{
  background:var(--stone);aspect-ratio:1/1.05;border-radius:2px;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;color:var(--charcoal);text-align:center;padding:12px;
}

/* Hero media (real photos/video filling the same tiles as .ph) */
.hero-media{aspect-ratio:1/1.05;border-radius:2px;overflow:hidden;background:var(--stone);}
.hero-media img, .hero-media video{width:100%;height:100%;object-fit:cover;display:block;}

/* Section heading */
h2.big{font-size:38px;font-weight:800;letter-spacing:-0.01em;margin-bottom:10px;text-transform:uppercase;}
p.caption{font-size:13px;color:var(--taupe);margin-top:30px;font-style:italic;}

/* Client logos image */
.client-logos-img{width:100%;height:auto;margin-top:50px;border:1px solid var(--stone);border-radius:2px;display:block;}

/* Portfolio / gallery grid — uniform tiles */
.portfolio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:50px;}
.portfolio-grid .ph, .portfolio-grid .video-ph{aspect-ratio:3/4;}

/* Video placeholder */
.video-ph{
  background:var(--stone);aspect-ratio:9/16;border-radius:2px;position:relative;
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;
  font-size:12px;color:var(--charcoal);text-align:center;padding:16px;
}
.video-ph .play{
  width:44px;height:44px;border-radius:50%;border:2px solid var(--charcoal);
  display:flex;align-items:center;justify-content:center;font-size:14px;
}

/* Accordion — no white boxes, plain expand */
.accordion{margin-top:40px;}
.acc-item{border-top:1px solid var(--stone);}
.acc-item:last-child{border-bottom:1px solid var(--stone);}
.acc-head{display:flex;justify-content:space-between;align-items:center;cursor:pointer;padding:24px 0;}
.acc-head h3{font-size:18px;font-weight:800;text-transform:uppercase;}
.acc-sign{font-size:22px;color:var(--taupe);flex-shrink:0;margin-left:20px;}
.acc-body{max-height:0;overflow:hidden;transition:max-height 0.3s ease;}
.acc-body-inner{padding-bottom:26px;font-size:15px;}
.acc-body-inner p{max-width:760px;}
.acc-item.open .acc-body{max-height:300px;}

/* Testimonials */
.testimonial-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:50px;}
.testimonial-card{background:#fff;border:1px solid var(--stone);border-radius:2px;padding:28px;}
.testimonial-card p.quote{font-size:15px;font-style:italic;margin-bottom:16px;}
.testimonial-card p.name{font-size:13px;color:var(--taupe);}

/* Buttons */
.btn{display:inline-block;background:var(--taupe);color:var(--bone);padding:14px 32px;border-radius:4px;font-size:14px;letter-spacing:0.03em;}
.btn:hover{background:var(--charcoal);}
.btn.outline{background:none;border:1px solid var(--charcoal);color:var(--charcoal);}

/* Contact */
.contact-box{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:24px;margin-top:30px;}

footer{padding:50px 0;text-align:center;font-size:13px;color:var(--taupe);}
footer .socials{display:flex;justify-content:center;gap:24px;margin-bottom:14px;}
footer .socials a{text-decoration:underline;text-underline-offset:3px;}
footer .socials a:hover{color:var(--charcoal);}

@media (max-width:760px){
  .wrap{padding:0 20px;}
  section{padding:56px 0;}
  #hero{padding-top:8px;}

  nav{
    flex-direction:column;align-items:flex-start;text-align:left;
    height:auto;padding:20px 20px;gap:14px;max-width:100%;
  }
  nav img{height:176px;}
  .navlinks{width:100%;flex-direction:column;align-items:flex-start;gap:10px;font-size:11px;}
  .navlinks a:first-child{display:none;} /* logo already links home */

  .hero-imgs, .portfolio-grid{grid-template-columns:repeat(2,1fr);gap:10px;}
  .testimonial-grid{grid-template-columns:1fr;gap:16px;margin-top:30px;}

  h2.big{font-size:26px;}
  .hero-top h1{font-size:21px;}
  .hero-top p.hero-question{font-size:15px;}
  .hero-top p{font-size:13.5px;}

  .contact-box{gap:16px;}
  .accordion{margin-top:24px;}
}

@media (max-width:480px){
  .wrap{padding:0 16px;}
  nav{padding:16px;}
  nav img{height:144px;}
  section{padding:44px 0;}
}