/* "What we do" service rows: colour hover, staggered offerings, an image or animated illustration per service
   and a preview that follows the pointer. Builds on the template's .row / .pills styles in site.css. */

/* ----- Row head ----- */
.svc { position: relative; }
.svc .row-head { position: relative; isolation: isolate; border-radius: 16px; transition: color .35s ease; }
.svc .row-head::before { content: ""; position: absolute; inset: .35rem -.6rem; z-index: -1; border-radius: 16px; background: var(--c); transform: scaleY(0); transform-origin: 50% 100%; opacity: 0; transition: transform .45s cubic-bezier(.2, .8, .2, 1), opacity .3s ease; }
.svc .rt b, .svc .tags { transition: transform .45s cubic-bezier(.2, .8, .2, 1), color .35s ease; }
.svc .rn { display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1.5px solid var(--line); transition: background .35s ease, border-color .35s ease, color .35s ease, transform .45s cubic-bezier(.2, .8, .2, 1); }
.svc.open .rn { background: var(--c); border-color: var(--c); color: var(--fixed-ink); }
.svc.open .chev { color: var(--orange); }
@media (hover: hover) {
  .svc .row-head:hover { color: var(--fixed-ink); }
  .svc .row-head:hover::before { transform: scaleY(1); opacity: 1; }
  .svc .row-head:hover .rt b { transform: translateX(.6rem); }
  .svc .row-head:hover .tags { transform: translateX(.6rem); color: rgba(43, 34, 32, .72); }
  .svc .row-head:hover .rn { border-color: var(--fixed-ink); transform: rotate(-8deg) scale(1.06); }
}

/* ----- Expanded panel ----- */
.svc-body { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(1.2rem, 3vw, 2.6rem); align-items: center; padding: .4rem .2rem 1.8rem 4.2rem; }
.svc-body .pills { padding: 0; }
.svc-desc { margin: 0 0 1rem; max-width: 52ch; color: var(--muted); font-size: 1rem; }
.svc .pills li { opacity: 0; transform: translateY(12px) scale(.92); transition: opacity .4s ease, transform .5s cubic-bezier(.2, .9, .3, 1.3); transition-delay: 0s; }
.svc.open .pills li { opacity: 1; transform: none; transition-delay: calc(.12s + var(--i, 0) * 45ms); }
.svc-cta { display: inline-flex; align-items: center; gap: .45rem; margin-top: 1.3rem; font-weight: 700; color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--orange); padding-bottom: .15rem; }
.svc-cta span { transition: transform .3s ease; }
.svc-cta:hover span, .svc-cta:focus-visible span { transform: translateX(5px); }

.svc-visual { position: relative; margin: 0; aspect-ratio: 4 / 3; border-radius: 22px; overflow: hidden; background: var(--c); clip-path: inset(100% 0 0 0 round 22px); transition: clip-path .9s cubic-bezier(.7, 0, .2, 1); }
.svc.open .svc-visual { clip-path: inset(0 0 0 0 round 22px); transition-delay: .1s; }
.svc-visual img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.18); transition: transform 1.4s cubic-bezier(.2, .8, .2, 1); }
.svc.open .svc-visual img { transform: scale(1); }
.svc-visual .svc-art { width: 100%; height: 100%; display: block; }

@media (max-width: 760px) {
  .svc-body { grid-template-columns: 1fr; padding-left: .2rem; }
  .svc .rn { width: 2.1rem; height: 2.1rem; font-size: .8rem; }
}

/* ----- Preview that follows the pointer (desktop) ----- */
.svc-float { position: fixed; left: 0; top: 0; z-index: 40; width: 250px; aspect-ratio: 4 / 3; border-radius: 20px; overflow: hidden; pointer-events: none; background: var(--c, var(--yellow)); box-shadow: 0 30px 60px -25px rgba(43, 34, 32, .55); opacity: 0; transform: translate3d(var(--x, 0), var(--y, 0), 0) rotate(var(--r, 0deg)) scale(.4); transition: opacity .3s ease, transform .3s ease; will-change: transform; }
.svc-float.on { opacity: 1; transform: translate3d(var(--x, 0), var(--y, 0), 0) rotate(var(--r, 0deg)) scale(1); transition: opacity .3s ease, transform .08s linear; }
.svc-float img, .svc-float .svc-art { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ----- Illustration palette ----- */
.svc-art .sa-k { fill: #2B2220; }
.svc-art .sa-w { fill: #FFF8EE; }
.svc-art .sa-o { fill: var(--orange); }
.svc-art .sa-p { fill: var(--pink); }
.svc-art .sa-b { fill: var(--blue); }
.svc-art .sa-y { fill: var(--yellow); }
.svc-art .sa-s { fill: none; stroke: #2B2220; stroke-width: 3; }
.svc-art .sa-ln { fill: none; stroke: #2B2220; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.svc-art .sa-thick { stroke-width: 7; }
.svc-art .sa-thin { stroke-width: 2; stroke-dasharray: 5 6; }
.svc-art .sa-txt { font: 700 15px/1 var(--body); fill: #2B2220; letter-spacing: .12em; }
.svc-art * { transform-box: fill-box; transform-origin: center; }

/* Animations only run while a panel is open or the preview is showing. */
.svc-art, .svc-art * { animation-play-state: paused; }
.svc.open .svc-art, .svc.open .svc-art *, .svc-float .svc-art, .svc-float .svc-art * { animation-play-state: running; }

/* Strategy */
.sa-strategy .sa-dash { stroke-dasharray: 3 12; }
.sa-strategy .sa-orbit { transform-box: view-box; transform-origin: 200px 155px; animation: sa-spin 14s linear infinite; }
.sa-strategy .sa-target { transform-box: view-box; transform-origin: 200px 155px; animation: sa-hit 3.6s ease-out infinite; }
.sa-strategy .sa-arrow { animation: sa-shoot 3.6s cubic-bezier(.5, 0, .9, .4) infinite; }
.sa-strategy .sa-fletch { stroke: var(--pink); stroke-width: 14; }
.sa-strategy .sa-sparks { opacity: 0; animation: sa-spark 3.6s ease-out infinite; }
@keyframes sa-shoot { 0% { transform: translate(150px, -100px); opacity: 0; } 8% { opacity: 1; } 30%, 86% { transform: none; opacity: 1; } 100% { transform: none; opacity: 0; } }
@keyframes sa-hit { 0%, 29% { transform: none; } 34% { transform: scale(.93); } 42% { transform: scale(1.03); } 50%, 100% { transform: none; } }
@keyframes sa-spark { 0%, 29% { opacity: 0; } 33% { opacity: 1; } 55%, 100% { opacity: 0; } }

/* Design */
.sa-design .sa-f1 { animation: sa-float 6s ease-in-out infinite; }
.sa-design .sa-f2 { animation: sa-float-r 7s ease-in-out infinite; }
.sa-design .sa-f3 { animation: sa-float 5.5s ease-in-out -2s infinite reverse; }
.sa-design .sa-f4 { animation: sa-float 4.5s ease-in-out -1s infinite; }
.sa-design .sa-draw { stroke-dasharray: 420; stroke-dashoffset: 420; animation: sa-draw 4s ease-in-out infinite; }
.sa-design .sa-hd { stroke: #2B2220; stroke-width: 2.5; }
@keyframes sa-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes sa-float-r { 0%, 100% { transform: rotate(8deg) translateY(0); } 50% { transform: rotate(-6deg) translateY(10px); } }
@keyframes sa-draw { 0% { stroke-dashoffset: 420; } 55%, 80% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -420; } }

/* Digital */
.sa-digital .sa-win { animation: sa-float 7s ease-in-out infinite; }
.sa-digital .sa-grow { transform-origin: 0 50%; animation: sa-grow 4.2s cubic-bezier(.2, .8, .2, 1) infinite; }
.sa-digital .sa-line { opacity: .22; transform-origin: 0 50%; animation: sa-grow 4.2s cubic-bezier(.2, .8, .2, 1) .15s infinite; }
.sa-digital .sa-l2 { animation-delay: .3s; }
.sa-digital .sa-card { animation: sa-pop 4.2s cubic-bezier(.2, .9, .3, 1.3) infinite; }
.sa-digital .sa-btn { animation: sa-press 4.2s ease infinite; }
.sa-digital .sa-cursor { transform-box: view-box; transform-origin: 0 0; animation: sa-cursor 4.2s cubic-bezier(.6, 0, .3, 1) infinite; }
.sa-digital .sa-cur { stroke: #FFF8EE; stroke-width: 2; stroke-linejoin: round; }
.sa-digital .sa-ring { fill: none; stroke: var(--orange); stroke-width: 3; opacity: 0; animation: sa-ring 4.2s ease-out infinite; }
@keyframes sa-grow { 0% { transform: scaleX(0); } 22%, 88% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes sa-pop { 0%, 12% { transform: translateY(30px); opacity: 0; } 32%, 88% { transform: none; opacity: 1; } 100% { transform: translateY(30px); opacity: 0; } }
@keyframes sa-cursor { 0% { transform: translate(330px, 270px); } 35% { transform: translate(250px, 150px); } 65%, 100% { transform: translate(110px, 210px); } }
@keyframes sa-press { 0%, 66% { transform: none; } 70% { transform: scale(.9); } 76%, 100% { transform: none; } }
@keyframes sa-ring { 0%, 66% { opacity: 0; transform: scale(1); } 70% { opacity: 1; } 90%, 100% { opacity: 0; transform: scale(4); } }

/* Film */
.sa-film .sa-strip { animation: sa-roll 2.4s linear infinite; }
.sa-film .sa-blades { transform-box: view-box; transform-origin: 160px 150px; animation: sa-spin 12s linear infinite; }
.sa-film .sa-blade { stroke: #2B2220; stroke-width: 4; stroke-linejoin: round; }
.sa-film .sa-lens { animation: sa-breathe 3s ease-in-out infinite; }
.sa-film .sa-rec { animation: sa-blink 1.2s steps(2, jump-none) infinite; }
@keyframes sa-roll { to { transform: translateY(60px); } }
@keyframes sa-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.35); } }
@keyframes sa-blink { 0% { opacity: 1; } 100% { opacity: .15; } }

/* Campaign */
.sa-campaign .sa-mega { transform-box: view-box; transform-origin: 140px 160px; animation: sa-shout 2.4s ease-in-out infinite; }
.sa-campaign .sa-wv { transform-box: view-box; transform-origin: 222px 150px; opacity: 0; animation: sa-wave 2.4s ease-out infinite; }
.sa-campaign .sa-w2 { animation-delay: .25s; }
.sa-campaign .sa-w3 { animation-delay: .5s; }
.sa-campaign .sa-c1 { animation: sa-float-r 4s ease-in-out infinite; }
.sa-campaign .sa-c2 { animation: sa-float 3.4s ease-in-out -1s infinite; }
.sa-campaign .sa-c3 { animation: sa-float-r 5s ease-in-out -2s infinite reverse; }
.sa-campaign .sa-c4 { animation: sa-float 4.4s ease-in-out infinite; }
@keyframes sa-shout { 0%, 100% { transform: rotate(-10deg); } 12% { transform: rotate(-6deg) scale(1.04); } 24% { transform: rotate(-10deg); } }
@keyframes sa-wave { 0% { opacity: 0; transform: scale(.7); } 25% { opacity: 1; } 80%, 100% { opacity: 0; transform: scale(1.15); } }

@keyframes sa-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .svc-art, .svc-art * { animation: none !important; }
  .svc-art .sa-draw { stroke-dashoffset: 0; }
  .svc-art .sa-wv, .svc-art .sa-sparks { opacity: 1; }
  .svc-art .sa-ring { opacity: 0; }
  .svc-art .sa-cursor { transform: translate(110px, 210px); }
  .svc .pills li { opacity: 1; transform: none; transition: none; }
  .svc-visual, .svc.open .svc-visual { clip-path: none; transition: none; }
  .svc-visual img { transform: none; transition: none; }
  .svc-float { display: none; }
}