/* ============================================================
   home.css — Homepage-specific sections: client marquee,
   interactive service index, service preview visual.
   ============================================================ */

/* ---------- CLIENT LOGO MARQUEE ---------- */
.marquee-section{background:var(--white);padding:56px 0;border-bottom:1px solid var(--line);}
.marquee-heading{
  font-family:var(--font-mono);font-size:12px;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--text-faint);text-align:center;margin-bottom:30px;
}
.marquee-track-wrap{overflow:hidden;position:relative;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.marquee-track{display:flex;align-items:center;gap:72px;width:max-content;animation:marquee-scroll 38s linear infinite;}
.marquee-track img{height:34px;width:auto;object-fit:contain;filter:grayscale(1);opacity:.6;transition:opacity .2s ease, filter .2s ease;}
.marquee-track a:hover img{opacity:1;filter:grayscale(0);}
.marquee-track-wrap:hover .marquee-track{animation-play-state:paused;}
@keyframes marquee-scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.marquee-empty{text-align:center;font-size:13px;color:var(--text-faint);}
@media (prefers-reduced-motion: reduce){
  .marquee-track{animation:none;overflow-x:auto;}
}

/* ---------- INTERACTIVE SERVICE INDEX ---------- */
.services-section{background:var(--paper);}
.svc-layout{display:grid;grid-template-columns:1fr 460px;gap:56px;align-items:start;}
.svc-list{border-top:1px solid var(--line);}
.svc-item{position:relative;border-bottom:1px solid var(--line);transition:border-color var(--duration-base) ease;}
.svc-row{
  display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:20px;
  width:100%;background:none;border:none;cursor:pointer;text-align:left;
  padding:26px 4px;font-family:inherit;color:inherit;
  transition:padding-left .35s var(--ease-standard);
}
.svc-item:hover .svc-row,.svc-item.active .svc-row{padding-left:14px;}
.svc-num{font-family:var(--font-mono);font-size:12px;letter-spacing:0.08em;color:var(--mauve);transition:color var(--duration-base) ease;}
.svc-item:hover .svc-num,.svc-item.active .svc-num{color:var(--wine);}
.svc-title{font-family:var(--font-heading);font-weight:700;letter-spacing:-0.015em;font-size:clamp(21px,2.5vw,30px);line-height:1.1;color:var(--ink);transition:color var(--duration-base) ease;display:block;}
.svc-item:hover .svc-title,.svc-item.active .svc-title{color:var(--wine);}
.svc-desc{font-size:14px;color:var(--text-soft);margin-top:7px;max-width:46ch;line-height:1.55;}
.svc-go{
  width:38px;height:38px;border-radius:50%;flex-shrink:0;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;color:var(--wine);background:var(--white);
  transition:background var(--duration-base) ease, border-color var(--duration-base) ease, transform var(--duration-base) ease, color var(--duration-base) ease;
}
.svc-item:hover .svc-go,.svc-item.active .svc-go{background:var(--wine);border-color:var(--wine);color:var(--white);transform:translateX(4px);}

.svc-visual{
  position:sticky;top:104px;aspect-ratio:808/632;border-radius:var(--radius-lg);overflow:hidden;
  background:var(--wine-deep);box-shadow:var(--shadow-lifted);
}
.svc-visual::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:3;background:linear-gradient(180deg, rgba(30,20,23,0) 55%, rgba(30,20,23,0.42) 100%);}
.svc-figure{position:absolute;inset:0;opacity:0;transition:opacity .45s ease;}
.svc-figure.on{opacity:1;}
.svc-figure img{width:100%;height:100%;object-fit:cover;transform:scale(1.03);transition:transform .6s var(--ease-standard);}
.svc-figure.on img{transform:scale(1);}
.svc-visual-cap{position:absolute;left:0;right:0;bottom:0;z-index:4;padding:20px 22px;display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--white);pointer-events:none;}
.svc-visual-cap span:first-child{font-family:var(--font-heading);font-weight:600;font-size:15px;}
.svc-visual-cap span:last-child{font-family:var(--font-mono);font-size:10.5px;letter-spacing:0.06em;color:var(--mauve);text-transform:uppercase;}

.svc-thumb{display:none;}
@media (max-width:980px){
  .svc-layout{grid-template-columns:1fr;gap:0;}
  .svc-visual{display:none;}
  .svc-row{grid-template-columns:44px 1fr auto;padding:22px 2px;}
  .svc-thumb{display:block;width:100%;border-radius:4px;overflow:hidden;max-height:0;opacity:0;margin-top:0;background:var(--wine-deep);transition:max-height .45s var(--ease-standard), opacity .35s ease, margin-top .45s ease;}
  .svc-item.active .svc-thumb{max-height:280px;opacity:1;margin-top:4px;margin-bottom:22px;}
  .svc-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
}
@media (max-width:520px){
  .svc-row{grid-template-columns:34px 1fr auto;gap:12px;padding:20px 0;}
  .svc-desc{font-size:13.5px;}
  .svc-go{width:32px;height:32px;}
}
@media (prefers-reduced-motion: reduce){
  .svc-row,.svc-figure,.svc-figure img,.svc-go,.svc-thumb{transition:none !important;}
  .svc-figure img{transform:none !important;}
}

/* Secondary service strip (design section — must stay visually lighter than web dev) */
.svc-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line);border:1px solid var(--line);}
.svc-strip-item{background:var(--white);padding:26px 24px;}
.svc-strip-item h4{font-family:var(--font-heading);font-size:16px;margin-bottom:6px;color:var(--ink);}
.svc-strip-item p{font-size:13px;color:var(--text-soft);}
@media (max-width:760px){.svc-strip{grid-template-columns:1fr 1fr;}}
@media (max-width:480px){.svc-strip{grid-template-columns:1fr;}}