
:root{
  --bg:#ffffff;
  --bg-soft:#f6f6f6;
  --text:#111111;
  --muted:#5a5a5a;
  --line:rgba(17,17,17,.1);
  --overlay:rgba(0,0,0,.5);
  --max:1280px;
  --radius:24px;
  --shadow:0 18px 50px rgba(0,0,0,.08);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
button{font:inherit}
.container{width:min(calc(100% - 2rem), var(--max));margin:0 auto}

.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav{
  min-height:74px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}
.brand{
  font-weight:800;
  letter-spacing:.14em;
  font-size:1.08rem;
}
.nav-links{
  display:flex;
  flex-wrap:wrap;
  gap:1.2rem;
}
.nav-links a{color:var(--muted)}

.hero{
  position:relative;
  min-height:88vh;
  display:grid;
  align-items:center;
  overflow:hidden;
  background:#0f0f0f;
}
.hero-media{position:absolute;inset:0}
.hero-bg{
  position:absolute;
  inset:-7%;
  background-image:url("../img/acs-team-hero.png");
  background-size:cover;
  background-position:center;
  filter:blur(28px) grayscale(.15);
  transform:scale(1.08);
}
.hero-image-frame{
  position:absolute;inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
}
.hero-image-frame img{
  width:min(1600px,100%);
  height:100%;
  object-fit:cover;
  object-position:center;
}
.hero-overlay{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.3) 0%, rgba(0,0,0,.48) 55%, rgba(0,0,0,.62) 100%);
}
.hero-content{
  position:relative;
  z-index:2;
  color:#fff;
  padding:8rem 0 6rem;
}
.eyebrow,.section-label{
  margin:0 0 1rem;
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:.78rem;
  font-weight:700;
}
.hero h1{
  margin:0 0 1rem;
  max-width:9ch;
  font-size:clamp(2.8rem,6vw,5.4rem);
  line-height:.97;
}
.hero-copy{
  max-width:42rem;
  margin:0 0 1.6rem;
  font-size:1.08rem;
  color:rgba(255,255,255,.9);
}
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.9rem;
  margin-bottom:1.35rem;
}
.button{
  min-height:50px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 1.2rem;
  border-radius:999px;
  font-weight:700;
  border:1px solid rgba(255,255,255,.35);
}
.button-primary{background:#fff;color:#111}
.button-secondary{background:transparent;color:#fff}

.hero-points{
  list-style:none;
  display:flex;
  gap:1.2rem;
  flex-wrap:wrap;
  padding:0;
  margin:0;
  color:rgba(255,255,255,.88);
}
.hero-points li::before{content:"• ";opacity:.85}

.section{padding:5rem 0}
.intro{background:var(--bg-soft)}
.intro-grid,.split,.contact-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:2rem;
  align-items:start;
}
h2{
  margin:.2rem 0 0;
  font-size:clamp(2rem,4vw,3.2rem);
  line-height:1.08;
  max-width:14ch;
}
p{margin:0 0 1rem}

.gallery-section{
  padding:0 0 5rem;
}
.gallery-shell{
  width:min(100%, var(--max));
  margin:0 auto;
}
.gallery-slider{
  overflow:hidden;
  background:#fff;
}
.gallery-track{
  display:flex;
  transition:transform .55s ease;
  will-change:transform;
}
.gallery-slide{
  min-width:100%;
  margin:0;
  aspect-ratio:16 / 9;
  background:linear-gradient(135deg, #f1f1f1, #dcdcdc);
}
.gallery-slide img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

.cards{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1rem;
  margin-top:2rem;
}
.card,.panel,.quote,.contact-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:1.4rem;
  box-shadow:var(--shadow);
}
.card h3{
  margin:.1rem 0 .55rem;
  font-size:1.15rem;
}
.band{
  background:#111;
  color:#fff;
}
.band .panel{
  background:#191919;
  color:#fff;
  border-color:rgba(255,255,255,.1);
}
.lead{font-size:1.08rem}
.price{
  font-size:clamp(2.6rem,5vw,4.2rem);
  line-height:1;
  font-weight:800;
  margin-bottom:.6rem;
}
.price span{
  font-size:1rem;
  font-weight:600;
  opacity:.85;
}
.quote{background:var(--bg-soft)}
.contact-card a{
  display:block;
  font-size:1.18rem;
  font-weight:700;
  margin-bottom:.7rem;
}
.site-footer{
  padding:1.35rem 0 2rem;
  border-top:1px solid var(--line);
  color:var(--muted);
}
.footer-inner{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
}

@media (max-width: 980px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .intro-grid,.split,.contact-grid{grid-template-columns:1fr}
  h2{max-width:none}
  .hero{min-height:82vh}
}
@media (max-width: 640px){
  .nav{min-height:66px}
  .nav-links{gap:.85rem;font-size:.95rem}
  .hero-content{padding:7rem 0 5rem}
  .hero h1{max-width:none}
  .cards{grid-template-columns:1fr}
  .hero-actions{display:grid;grid-template-columns:1fr}
  .button{width:100%}
  .gallery-shell{
    width:100%;
  }
}
