/* ============================================================
   HOME — page-specific styles
   ============================================================ */

/* ---- HERO ---- */
.hero{min-height:100vh;display:flex;align-items:center;position:relative;overflow:hidden;
  padding-top:120px;padding-bottom:80px}
.hero-bg{position:absolute;inset:0;z-index:0;
  background:radial-gradient(ellipse 80% 60% at 70% 20%,rgba(216,176,104,.10),transparent 60%),
             radial-gradient(ellipse 60% 50% at 10% 90%,rgba(216,176,104,.06),transparent 55%),
             var(--black)}
.hero-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 60%,var(--black))}
.hero-inner{position:relative;z-index:3;max-width:920px}
.hero h1{margin-bottom:28px}
.hero h1 em{font-style:italic;color:var(--gold)}
.hero .lead{font-size:1.3rem;margin-bottom:40px;max-width:54ch}
.hero-actions{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:72px}

.hero-trust{display:flex;align-items:center;gap:40px;flex-wrap:wrap}
.ht-item strong{font-family:var(--font-display);font-size:2.6rem;color:var(--gold);
  display:block;line-height:1;font-weight:600}
.ht-item span{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
.ht-divider{width:1px;height:46px;background:var(--gold-line)}

/* ---- CLIENT BAR ---- */
.clients{padding:48px 0;border-top:1px solid rgba(216,176,104,.12);
  border-bottom:1px solid rgba(216,176,104,.12);background:var(--black-2)}
.clients-label{text-align:center;font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:28px}
.clients-grid{display:flex;justify-content:center;gap:56px;flex-wrap:wrap;align-items:center}
.client-name{font-family:var(--font-display);font-size:1.5rem;color:var(--ink-dim);
  letter-spacing:.02em;opacity:.65;transition:opacity .4s}
.client-name:hover{opacity:1;color:var(--gold)}

/* ---- SERVICE GRID ---- */
.svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--gold-line);border:1px solid var(--gold-line)}
.svc-card{background:var(--black);padding:44px 30px;transition:all .5s var(--ease);
  position:relative;min-height:230px;display:flex;flex-direction:column}
.svc-card:hover{background:var(--black-3)}
.svc-num{font-family:var(--font-display);font-size:.95rem;color:var(--gold);
  opacity:.55;margin-bottom:auto}
.svc-card h3{font-size:1.5rem;margin:18px 0 10px}
.svc-card p{font-size:.92rem}
.svc-card .arr{margin-top:16px;color:var(--gold);opacity:0;transform:translateX(-6px);
  transition:all .4s var(--ease)}
.svc-card:hover .arr{opacity:1;transform:none}

/* ---- PROCESS ---- */
.process{background:var(--black-2)}
.proc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:36px}
.proc-step{position:relative;padding-top:28px;border-top:1px solid var(--gold-line)}
.proc-step .n{font-family:var(--font-display);font-size:3rem;color:var(--gold);
  line-height:1;margin-bottom:14px;font-weight:600}
.proc-step h3{font-size:1.3rem;margin-bottom:8px}
.proc-step p{font-size:.9rem}

/* ---- BEFORE / AFTER SLIDER ---- */
.ba-wrap{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.ba-slider{position:relative;aspect-ratio:4/3;overflow:hidden;border:1px solid var(--gold-line);
  border-radius:var(--radius);cursor:ew-resize;user-select:none;background:var(--char)}
.ba-layer{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--font-display);
  font-size:1.6rem;letter-spacing:.05em}
.ba-after{background:linear-gradient(135deg,#1a1a1e,#0d0d10);color:var(--gold)}
.ba-before{background:linear-gradient(135deg,#2a2622,#1a1714);color:var(--ink-faint);
  clip-path:inset(0 50% 0 0)}
.ba-handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--gold);z-index:4}
.ba-handle::after{content:"⟺";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:42px;height:42px;background:var(--grad-gold);color:var(--black);border-radius:50%;
  display:grid;place-items:center;font-size:1rem}
.ba-tag{position:absolute;bottom:14px;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
  padding:5px 12px;background:rgba(10,10,11,.7);border:1px solid var(--gold-line);z-index:3}
.ba-tag.l{left:14px;color:var(--ink-faint)}
.ba-tag.r{right:14px;color:var(--gold)}

/* ---- TESTIMONIALS ---- */
.test-sec{background:linear-gradient(180deg,var(--black-2),var(--black))}
.test-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.test-card{
  background:linear-gradient(160deg,var(--black-3),var(--black-2));
  border:1px solid rgba(216,176,104,.14);border-radius:var(--radius);padding:38px 34px;
  position:relative;transition:all .5s var(--ease);
}
.test-card:hover{transform:translateY(-5px);border-color:rgba(216,176,104,.4);box-shadow:var(--shadow-lux)}
.test-card .stars{color:var(--gold);font-size:1.05rem;letter-spacing:3px;margin-bottom:18px}
.test-card blockquote{font-family:var(--font-display);font-size:1.32rem;line-height:1.45;
  color:var(--ink);font-style:italic;margin-bottom:24px}
.test-card figcaption strong{display:block;color:var(--gold);font-weight:500;font-size:.95rem;letter-spacing:.04em}
.test-card figcaption span{font-size:.8rem;color:var(--ink-faint)}

/* ---- CTA BAND ---- */
.cta-band{padding:120px 0;position:relative;overflow:hidden;background:var(--black);
  border-top:1px solid var(--gold-line);text-align:center}
.cta-glow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:70vw;height:70vh;background:radial-gradient(circle,rgba(216,176,104,.12),transparent 65%);z-index:0}
.cta-band .wrap{position:relative;z-index:2}
.cta-band h2{font-size:clamp(2.4rem,5.5vw,4.4rem);margin-top:18px;margin-bottom:30px}
.cta-band .btn{margin:0 8px}

@media(max-width:980px){
  .svc-grid{grid-template-columns:1fr 1fr}
  .proc-grid{grid-template-columns:1fr 1fr}
  .clients-grid{gap:32px}
  .test-grid{grid-template-columns:1fr}
  .ba-wrap{grid-template-columns:1fr;gap:36px}
  .hero-trust{gap:24px}
  .ht-item strong{font-size:2rem}
}
@media(max-width:560px){
  .svc-grid{grid-template-columns:1fr}
  .proc-grid{grid-template-columns:1fr}
  .ht-divider{display:none}
  .hero-trust{justify-content:space-between;gap:18px}
  .ht-item{flex:1;min-width:42%}
  .client-name{font-size:1.2rem}
}

/* before/after image support (added) */
.ba-before,.ba-after{background-size:cover;background-position:center}


/* home gallery preview (added) */
.home-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.home-gallery .hg-item{aspect-ratio:4/3;overflow:hidden;border:1px solid var(--gold-line);
  border-radius:var(--radius);display:block;position:relative}
.home-gallery img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease)}
.home-gallery .hg-item:hover img{transform:scale(1.06)}
@media(max-width:980px){.home-gallery{grid-template-columns:1fr 1fr}}