/* assets/css/pages/service.css */

/* hub */
.svchub-hero{padding-top:9rem;padding-bottom:2rem}
.svchub-hero__title{font-size:var(--fs-900);line-height:.95}
.svchub-hero__sub{margin-top:.8rem;font-size:var(--fs-500);color:var(--color-ivory-soft);max-width:40ch}
.svchub-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}
.svchub-card{background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-md);padding:2rem;transition:border-color var(--dur-fast),transform var(--dur-mid) var(--ease-out-expo)}
.svchub-card:hover{border-color:var(--color-rust);transform:translateY(-4px)}
.svchub-card__t{font-size:var(--fs-600)}
.svchub-card__d{color:var(--color-ivory-soft);margin-top:.4rem}
.svchub-card__go{display:inline-block;margin-top:1rem;color:var(--color-rust-glow)}
.svchub-rows{display:grid;gap:0}
.svchub-row{display:grid;grid-template-columns:1fr 1fr auto;align-items:center;gap:1.5rem;padding:1.6rem 0;border-top:1px solid var(--color-line);transition:padding-left var(--dur-mid) var(--ease-out-expo)}
.svchub-row:last-child{border-bottom:1px solid var(--color-line)}
.svchub-row:hover{padding-left:1rem}
.svchub-row__t{font-family:var(--font-display);font-size:var(--fs-600);color:var(--color-ivory)}
.svchub-row__d{color:var(--color-ivory-soft)}
.svchub-row__go{color:var(--color-rust-glow);font-size:1.4rem}

/* vertical page */
.svc-hero{position:relative;min-height:70vh;display:flex;align-items:flex-end;overflow:hidden}
.svc-hero__bg{position:absolute;inset:0;background-size:cover;background-position:center;background-color:var(--color-surface);transform:scale(1.05);animation:kenburns 18s ease-out infinite alternate}
.svc-hero__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,var(--color-bg-dark),rgba(20,20,20,.3))}
@keyframes kenburns{from{transform:scale(1.05)}to{transform:scale(1.15)}}
.svc-hero__inner{position:relative;z-index:1;padding-bottom:3rem}
.svc-hero__title{font-size:var(--fs-900);line-height:.95;margin-top:.5rem}
.svc-hero__sub{margin-top:1rem;font-size:var(--fs-500);color:var(--color-ivory-soft);max-width:48ch}

.svc-why__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.svc-why__item{padding:1.5rem;border-left:2px solid var(--color-rust)}
.svc-why__h{font-size:var(--fs-500);margin-bottom:.5rem}
.svc-why__item p{color:var(--color-ivory-soft)}

.svc-process__ribbon{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;counter-reset:step}
.svc-step{background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-sm);padding:1.4rem}
.svc-step__n{display:block;font-size:var(--fs-600);color:var(--color-rust)}
.svc-step__t{font-size:var(--fs-400);margin:.5rem 0}
.svc-step p{font-size:var(--fs-300);color:var(--color-ivory-soft)}

.svc-insp__bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:160px;gap:1rem}
.svc-insp__cell{overflow:hidden;border-radius:var(--radius-sm)}
.svc-insp__cell:first-child{grid-column:span 2;grid-row:span 2}
.svc-insp__cell img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-slow) var(--ease-out-expo)}
.svc-insp__cell:hover img{transform:scale(1.06)}

.svc-projects__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.svc-proj{border:1px solid var(--color-line);border-radius:var(--radius-md);overflow:hidden}
.svc-proj__img{aspect-ratio:4/3;background-size:cover;background-position:center;background-color:var(--color-surface);transition:transform var(--dur-slow)}
.svc-proj:hover .svc-proj__img{transform:scale(1.05)}
.svc-proj__meta{display:flex;justify-content:space-between;padding:1rem 1.2rem;background:var(--color-surface)}
.svc-proj__city{color:var(--color-rust-glow);font-size:var(--fs-200)}

.svc-transition{padding-block:clamp(3rem,8vh,6rem);text-align:center;background:var(--color-bg-deep);border-block:1px solid var(--color-line)}
.svc-transition__line{font-family:var(--font-display);font-size:var(--fs-600);color:var(--color-ivory);margin-bottom:1.2rem}

@media (max-width:900px){
  .svchub-grid{grid-template-columns:1fr}
  .svc-why__grid,.svc-projects__grid{grid-template-columns:1fr}
  .svc-process__ribbon{grid-template-columns:1fr 1fr}
  .svc-insp__bento{grid-template-columns:1fr 1fr}
  .svchub-row{grid-template-columns:1fr}
}
@media (max-width:560px){
  .svc-process__ribbon{grid-template-columns:1fr}
}