/* ============ SERVICE DETAIL PAGE ============ */
.svc-hero{ padding: 160px var(--pad) 80px; position:relative; overflow:hidden; }
.svc-hero-field{ position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:0; }
.svc-particle{
  position:absolute; width:5px; height:5px; border-radius:50%; background: var(--accent); opacity:.35;
  animation: svcFloat linear infinite;
}
@keyframes svcFloat{
  0%{ transform: translate3d(0,0,0) scale(1); opacity:0; }
  10%{ opacity:.4; }
  50%{ transform: translate3d(20px,-60px,0) scale(1.4); }
  90%{ opacity:.4; }
  100%{ transform: translate3d(-15px,-140px,0) scale(1); opacity:0; }
}
.svc-back{ position:relative; z-index:1; font-size:.85rem; color: var(--ink-soft); margin-bottom:40px; display:inline-block; }
.svc-back:hover{ color: var(--accent); }

.svc-reveal{ opacity:0; transform: translateY(20px); transition: opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1); position:relative; z-index:1; }
.svc-reveal.is-in{ opacity:1; transform: translateY(0); }
.svc-tag{ font-size:.85rem; color: var(--accent); margin-bottom:20px; }

.svc-title-3d-wrap{ perspective:900px; margin-bottom:30px; position:relative; z-index:1; }
.svc-title-3d{
  font-size: clamp(2.6rem, 8vw, 6rem); letter-spacing:-.02em; max-width:900px;
  -webkit-text-stroke: 1.5px var(--ink); color: transparent;
  opacity:0; transform: perspective(900px) translateY(50px) translateZ(-80px) rotateX(12deg);
  transition: transform 1s cubic-bezier(.16,1,.3,1), opacity 1.1s ease;
  will-change: transform;
}

.svc-intro{ font-size: clamp(1.1rem, 2vw, 1.4rem); color: var(--ink-soft); max-width:680px; line-height:1.55; }

.svc-cover{ margin: 0 var(--pad) 100px; aspect-ratio: 21/9; border-radius:6px; overflow:hidden; background-size:cover; background-position:center; position:relative; transition: background-position .1s linear; }
.svc-cover-scrim{ position:absolute; inset:0; background: linear-gradient(180deg, rgba(28,26,21,.12), rgba(28,26,21,.32)); }

.svc-body{ padding: 0 var(--pad) 100px; display:grid; grid-template-columns: 1fr 1.4fr; gap:70px; }
.svc-what h3{ font-size:1.4rem; margin-bottom:18px; }
.svc-what p{ color: var(--ink-soft); line-height:1.65; margin-bottom:16px; }
.svc-points{ list-style:none; display:flex; flex-direction:column; gap:14px; }
.svc-points li{ padding-left:24px; position:relative; color: var(--ink-soft); font-size:.96rem; line-height:1.5; }
.svc-points li::before{ content:''; position:absolute; left:0; top:9px; width:8px; height:1px; background: var(--accent); }
.svc-what, .svc-capabilities{ opacity:0; transform: translateY(24px); transition: opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1); }
.svc-what.is-in, .svc-capabilities.is-in{ opacity:1; transform: translateY(0); }

.svc-process{ padding: 0 var(--pad) 100px; }
.svc-process h3{ font-size:1.4rem; margin-bottom:30px; }
.svc-process-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:24px; }
.svc-process-step{ border-top:2px solid var(--line); padding-top:18px; opacity:0; transform: translateY(20px); transition: opacity .6s ease, transform .6s cubic-bezier(.16,1,.3,1); }
.svc-process-step.is-in{ opacity:1; transform: translateY(0); }
.svc-process-step .step-num{ font-size:.8rem; color: var(--accent); font-weight:700; display:block; margin-bottom:10px; }
.svc-process-step h4{ font-size:1.05rem; margin-bottom:8px; }
.svc-process-step p{ font-size:.88rem; color: var(--ink-soft); line-height:1.55; }
@media (max-width:820px){ .svc-process-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width:520px){ .svc-process-grid{ grid-template-columns: 1fr; } }

@media (max-width:900px){ .svc-body{ grid-template-columns:1fr; gap:40px; } }

.svc-gallery{ padding: 0 var(--pad) 120px; }
.svc-gallery-head{ margin-bottom:36px; }
.svc-gallery-head h3{ font-size: clamp(1.6rem, 3vw, 2.2rem); }
.svc-gallery-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; perspective:1200px; opacity:0; transform: translateY(30px); transition: opacity .8s ease, transform .8s cubic-bezier(.16,1,.3,1); }
.svc-gallery-grid.is-in{ opacity:1; transform: translateY(0); }
.svc-gitem{
  display:block; position:relative; aspect-ratio: 4/3; border-radius:5px; overflow:hidden;
  background-size:cover; background-position:center; transition: transform .3s ease-out, box-shadow .3s ease;
}
.svc-gitem:hover{ box-shadow: 0 20px 45px rgba(28,26,21,.22); }
.svc-gitem::before{ content:''; position:absolute; inset:0; background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.72)); opacity:0; transition: opacity .3s ease; }
.svc-gitem:hover::before{ opacity:1; }
.svc-gcap{
  position:absolute; left:14px; right:14px; bottom:12px; color:#F7F4EE; font-size:.8rem; line-height:1.4;
  opacity:0; transform: translateY(8px); transition: opacity .3s ease, transform .3s ease;
}
.svc-gitem:hover .svc-gcap{ opacity:1; transform: translateY(0); }
.svc-gallery-grid a:first-child{ grid-column: span 2; grid-row: span 2; }
@media (max-width:760px){
  .svc-gallery-grid{ grid-template-columns: repeat(2,1fr); }
  .svc-gallery-grid a:first-child{ grid-column: span 2; grid-row: span 1; aspect-ratio: 16/9; }
  .svc-gcap{ opacity:1; transform:none; }
}

.svc-cta{ padding: 100px var(--pad); text-align:left; border-top:1px solid var(--line); }
.svc-cta h2{ font-size: clamp(2rem, 5vw, 3.2rem); margin-bottom:26px; max-width:700px; }

.svc-nav-links{ display:flex; justify-content:space-between; padding: 40px var(--pad) 0; border-top:1px solid var(--line); }
.svc-nav-links a{ font-size:.88rem; color: var(--ink-soft); }
.svc-nav-links a:hover{ color: var(--accent); }


/* Premium service-page motion */
.svc-hero{perspective:1200px;isolation:isolate;overflow:hidden;background:radial-gradient(circle at 70% 35%,rgba(201,146,46,.1),transparent 32%),#0b0c0b!important}
.svc-hero:after{content:"";position:absolute;inset:0;z-index:-1;opacity:.2;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:70px 70px;transform:perspective(700px) rotateX(60deg) scale(1.4);transform-origin:center bottom;mask-image:linear-gradient(transparent,#000 35%,transparent)}
.svc-title-3d{font-size:clamp(4rem,10vw,10rem)!important;line-height:.82!important;letter-spacing:-.075em!important;text-shadow:0 20px 80px rgba(0,0,0,.5)}
.svc-cover{transform:scale(1.015);transition:transform 1.2s cubic-bezier(.16,1,.3,1),filter 1.2s ease}.svc-cover.is-visible{transform:scale(1);filter:saturate(1.08)}
.svc-process-step{transform:translateY(35px);opacity:0;transition:transform .8s cubic-bezier(.16,1,.3,1),opacity .7s ease}.svc-process-step.is-in{transform:none;opacity:1}
.svc-gallery-grid{perspective:1000px}.svc-gitem{transition:transform .7s cubic-bezier(.16,1,.3,1),box-shadow .7s ease,filter .7s ease!important}.svc-gitem:hover{box-shadow:0 30px 80px rgba(0,0,0,.35);filter:saturate(1.1)}
@media(max-width:700px){.svc-title-3d{font-size:clamp(3.3rem,15vw,6rem)!important}}

/* V12: native lazy-loaded gallery media */
.svc-gitem{background:#111;isolation:isolate}.svc-gitem img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform 1s cubic-bezier(.16,1,.3,1),filter .8s ease}.svc-gitem:hover img{transform:scale(1.055);filter:saturate(1.08)}


/* V14 — service detail art direction */
.svc-hero{min-height:78vh;display:flex;flex-direction:column;justify-content:center;padding-top:145px;padding-bottom:90px}
.svc-hero-field:before{content:"";position:absolute;inset:10% 5% auto;height:55%;background:radial-gradient(circle at 68% 42%,rgba(201,146,46,.12),transparent 28%),linear-gradient(90deg,transparent 49.8%,rgba(201,146,46,.08) 50%,transparent 50.2%);opacity:.65;transform:perspective(900px) rotateX(58deg) scale(1.35);transform-origin:center bottom}
.svc-hero-field:after{content:"";position:absolute;left:0;right:0;bottom:14%;height:1px;background:linear-gradient(90deg,transparent,rgba(201,146,46,.55),transparent);box-shadow:0 0 28px rgba(201,146,46,.16)}
.svc-back{transition:transform .45s cubic-bezier(.16,1,.3,1),color .3s ease}.svc-back:hover{transform:translateX(-5px)}
.svc-tag{letter-spacing:.13em;text-transform:uppercase;font-size:.72rem;font-weight:700}
.svc-title-3d{max-width:1100px;text-wrap:balance}
.svc-intro{max-width:760px}
.svc-hero-meta{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px;position:relative;z-index:2}
.svc-meta-pill{border:1px solid rgba(247,244,238,.16);background:rgba(247,244,238,.045);padding:9px 13px;border-radius:999px;color:rgba(247,244,238,.72);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;backdrop-filter:blur(8px)}
.svc-hero-index{position:absolute;right:var(--pad);bottom:70px;color:rgba(247,244,238,.35);font-size:.68rem;letter-spacing:.18em;writing-mode:vertical-rl;text-transform:uppercase}
.svc-cover{box-shadow:0 30px 100px rgba(0,0,0,.16);will-change:transform}
.svc-cover:after{content:"";position:absolute;inset:0;border:1px solid rgba(255,255,255,.13);pointer-events:none}
.svc-body{padding-top:20px}
.svc-body:before{content:"01 / THE BRIEF";grid-column:1/-1;font-size:.68rem;letter-spacing:.16em;color:var(--accent);margin-bottom:4px}
.svc-what h3,.svc-capabilities h3,.svc-process h3,.svc-gallery-head h3{letter-spacing:-.025em}
.svc-capabilities{border-left:1px solid var(--line);padding-left:34px}
.svc-points li{transition:transform .35s ease,color .35s ease}.svc-points li:hover{transform:translateX(6px);color:var(--ink)}
.svc-process{position:relative}.svc-process:before{content:"02 / DELIVERY SYSTEM";display:block;font-size:.68rem;letter-spacing:.16em;color:var(--accent);margin-bottom:14px}
.svc-process-step{position:relative;min-height:190px;background:linear-gradient(180deg,rgba(28,26,21,.025),transparent);padding-right:18px}
.svc-process-step:after{content:"↗";position:absolute;right:10px;top:15px;font-size:1.1rem;color:var(--accent);opacity:.55;transition:transform .35s ease}.svc-process-step:hover:after{transform:translate(4px,-4px)}
.svc-gallery{position:relative}.svc-gallery:before{content:"03 / SELECTED WORK";display:block;font-size:.68rem;letter-spacing:.16em;color:var(--accent);margin-bottom:14px}.svc-gallery-head{display:flex;justify-content:space-between;align-items:end;gap:20px}.svc-gallery-head:after{content:"CLICK ANY FRAME TO OPEN";font-size:.64rem;letter-spacing:.12em;color:var(--ink-soft)}
.svc-gitem{transform-style:preserve-3d}.svc-gitem:after{content:"";position:absolute;inset:10px;border:1px solid rgba(255,255,255,.12);opacity:0;transform:translateZ(18px);transition:opacity .4s ease}.svc-gitem:hover:after{opacity:1}
.svc-cta{position:relative;overflow:hidden}.svc-cta:before{content:"04 / NEXT MOVE";display:block;font-size:.68rem;letter-spacing:.16em;color:var(--accent);margin-bottom:20px}.svc-cta:after{content:"";position:absolute;width:42vw;height:42vw;right:-18vw;top:-20vw;border:1px solid rgba(201,146,46,.18);border-radius:50%;box-shadow:0 0 0 90px rgba(201,146,46,.025),0 0 0 180px rgba(201,146,46,.018);pointer-events:none}
.svc-nav-links{padding-bottom:70px}.svc-nav-links a{transition:transform .35s ease,color .3s ease}.svc-nav-links a:first-child:hover{transform:translateX(-5px)}.svc-nav-links a:last-child:hover{transform:translateX(5px)}
@media(max-width:900px){.svc-hero{min-height:70vh}.svc-capabilities{border-left:0;border-top:1px solid var(--line);padding:28px 0 0}.svc-hero-index{display:none}.svc-gallery-head:after{display:none}}
@media(max-width:560px){.svc-hero{padding-top:125px}.svc-title-3d{font-size:clamp(3rem,16vw,5.2rem)!important}.svc-intro{font-size:1rem}.svc-meta-pill{font-size:.62rem;padding:8px 10px}.svc-cover{margin-bottom:70px}.svc-body,.svc-process,.svc-gallery,.svc-cta{padding-bottom:78px}.svc-gallery-grid{gap:10px}.svc-process-step{min-height:auto;padding-bottom:22px}}
@media(prefers-reduced-motion:reduce){.svc-title-3d,.svc-gitem,.svc-cover,.svc-back,.svc-points li,.svc-nav-links a{transition:none!important}.svc-hero-field:before{transform:none}}