/* Service detail pages — Design 2 tokens. Photo "who it's for", panic problem cards, icon checklist, sample case. */

/* who it's for: four photo boxes */
.who-title{margin:56px 0 22px;font-size:clamp(24px,3vw,32px)}
.who-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.who-card{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;transition:transform .25s,box-shadow .25s,border-color .25s}
.who-card:hover{transform:translateY(-5px);border-color:var(--purple);box-shadow:var(--shadow)}
.who-img{position:relative;aspect-ratio:400/260;overflow:hidden}
.who-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.who-card:hover .who-img img{transform:scale(1.06)}
.who-flag{position:absolute;left:10px;top:10px;font:700 10px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;background:rgba(255,255,255,.9);color:var(--ink-2);border-radius:5px;padding:3px 7px}
.who-card figcaption{padding:18px 18px 22px}
.who-card h3{font-size:18px}
.who-card p{margin-top:6px;color:var(--ink-2);font-size:15px}
@media(max-width:1000px){.who-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.who-grid{grid-template-columns:1fr}}

/* problems: red panic alerts that pop out */
.panic{position:relative;border-radius:var(--radius-lg);padding:26px 24px 24px;color:#fff;background:linear-gradient(150deg,#F0405E,#B3122E);box-shadow:0 18px 36px -14px rgba(179,18,46,.55);overflow:hidden}
.panic::after{content:"";position:absolute;inset:0;border-radius:inherit;border:2px solid rgba(255,255,255,.35);animation:panic-ring 1.6s ease-in-out infinite;pointer-events:none}
.panic .eyebrow{color:#FFD6DD;margin-bottom:8px}
.panic h3{color:#fff;font-size:21px}
.panic p{color:#FFE3E8;margin-top:8px;font-size:15px}
.panic-ico{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:#fff;margin-bottom:16px;animation:panic-blink 1.2s steps(2,start) infinite}
.panic-ico svg{width:24px;height:24px;fill:#FFD84D;stroke:#B3122E;stroke-width:1.8;stroke-linejoin:round}
@keyframes panic-ring{0%,100%{opacity:.2}50%{opacity:1}}
@keyframes panic-blink{50%{background:#FFE3E8}}
/* pop-out + shake when the cards scroll into view (class added by service-detail.js) */
.js-motion .panics:not(.in) .panic{opacity:0;transform:scale(.6) rotate(-4deg)}
.panics.in .panic{animation:panic-pop .55s cubic-bezier(.3,1.6,.5,1) var(--d) both,panic-shake .5s ease-in-out calc(var(--d) + .55s) 2}
@keyframes panic-pop{from{opacity:0;transform:scale(.6) rotate(-4deg)}to{opacity:1;transform:none}}
@keyframes panic-shake{0%,100%{transform:none}20%{transform:translateX(-6px) rotate(-1deg)}40%{transform:translateX(6px) rotate(1deg)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
@media(prefers-reduced-motion:reduce){.panic::after,.panic-ico{animation:none}.panics .panic,.js-motion .panics:not(.in) .panic{opacity:1;transform:none;animation:none}}

/* what GETDO handles: matching icons instead of ticks */
.handles-ico{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.handles-ico li{display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 16px;font-weight:600;transition:border-color .2s,transform .2s}
.handles-ico li:hover{border-color:var(--purple);transform:translateY(-2px)}
.hi{flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--tint)}
.hi svg{width:22px;height:22px;fill:none;stroke:var(--purple-ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.handles-ico li:hover .hi{background:var(--purple)}.handles-ico li:hover .hi svg{stroke:#fff}
@media(max-width:900px){.handles-ico{grid-template-columns:1fr 1fr}}@media(max-width:560px){.handles-ico{grid-template-columns:1fr}}

/* sample case study */
.case-sample h3{font-size:20px;margin-top:4px}
.case-sample>p{font-size:15px}
.cs-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:6px 0 4px}
.cs-metrics div{background:var(--tint);border-radius:12px;padding:12px}
.cs-metrics b{display:block;font:700 22px var(--f-mono);color:var(--purple-ink)}
.cs-metrics span{font-size:12.5px;color:var(--ink-2)}
.panics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}@media(max-width:900px){.panics{grid-template-columns:1fr}}

/* hero platform logos */
.plat-logos{list-style:none;display:flex;gap:12px;margin-top:22px}
.plat-logos img{width:44px;height:44px;border-radius:12px;box-shadow:0 6px 14px rgba(21,24,38,.12);transition:transform .25s}
.plat-logos li:hover img{transform:translateY(-4px) rotate(-6deg)}

/* platform by platform: logo pops out, then description */
.pp-grid{display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));gap:18px;max-width:calc(var(--cols,4) * 290px);margin-inline:auto}
.pp-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:28px 22px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px}
.pp-logo{width:72px;height:72px;border-radius:20px;box-shadow:0 12px 26px rgba(21,24,38,.16)}
.pp-card h3{font-size:19px;margin-top:6px}
.pp-card p{color:var(--ink-2);font-size:15px}
.js-motion .pp-grid:not(.in) .pp-logo{opacity:0;transform:scale(0) rotate(-30deg)}
.js-motion .pp-grid:not(.in) .pp-card h3,.js-motion .pp-grid:not(.in) .pp-card p{opacity:0;transform:translateY(12px)}
.pp-grid.in .pp-logo{animation:pp-pop .6s cubic-bezier(.3,1.7,.5,1) calc(var(--i) * .18s) both}
.pp-grid.in .pp-card h3,.pp-grid.in .pp-card p{animation:pp-txt .5s ease-out calc(var(--i) * .18s + .55s) both}
@keyframes pp-pop{from{opacity:0;transform:scale(0) rotate(-30deg)}to{opacity:1;transform:none}}
@keyframes pp-txt{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.pp-card:hover .pp-logo{transform:translateY(-4px) scale(1.06);transition:transform .25s}
@media(max-width:900px){.pp-grid{grid-template-columns:1fr 1fr}}@media(max-width:520px){.pp-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.pp-grid .pp-logo,.pp-grid .pp-card h3,.pp-grid .pp-card p{opacity:1!important;transform:none!important;animation:none!important}}

/* what GETDO handles: chips + cards + mock-up */
.hd-wrap{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:28px;align-items:center}
.hd-chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.hd-chips li{display:flex;align-items:center;gap:6px;background:var(--tint);color:var(--purple-ink);font-weight:700;font-size:14px;border-radius:999px;padding:7px 14px}
.hd-chips li::before{content:"✓";font-weight:800}
.hd-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.hd-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:20px;transition:border-color .2s,transform .2s}
.hd-card:hover{border-color:var(--purple);transform:translateY(-3px)}
.hd-n{font:700 12px var(--f-mono);color:var(--gold);letter-spacing:.08em}
.hd-card h3{font-size:17px;margin-top:6px}.hd-card p{color:var(--ink-2);font-size:14.5px;margin-top:6px}
.hd-mock{position:relative;margin:0;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow)}
.hd-mock img{width:100%;height:auto;display:block}
@media(max-width:900px){.hd-wrap{grid-template-columns:1fr}.hd-cards{grid-template-columns:1fr}}

/* relevant work carousel */
.cs-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:28px}
.cs-ctrl{display:flex;gap:10px}
.cs-ctrl button{width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--purple-ink);font-size:20px;cursor:pointer;transition:background .2s,color .2s}
.cs-ctrl button:hover{background:var(--purple);color:#fff}
.carousel{overflow:hidden;border-radius:var(--radius-lg)}
.cs-track{display:flex;transition:transform .7s cubic-bezier(.65,0,.35,1)}
.cs-slide{flex:0 0 100%;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
.cs-img img{width:100%;height:100%;object-fit:cover;display:block}
.cs-body{padding:32px;display:flex;flex-direction:column;gap:12px;justify-content:center}
.cs-body h3{font-size:22px}
.cs-foot{display:flex;justify-content:space-between;align-items:center;margin-top:20px;gap:16px;flex-wrap:wrap}
.cs-dots{display:flex;gap:8px}
.cs-dots button{width:10px;height:10px;border-radius:999px;border:0;background:var(--line);cursor:pointer;padding:0;transition:width .3s,background .3s}
.cs-dots button[aria-current="true"]{width:30px;background:var(--purple)}
@media(max-width:760px){.cs-slide{grid-template-columns:1fr}.cs-body{padding:22px}.cs-head{flex-direction:column;align-items:flex-start}}
@media(prefers-reduced-motion:reduce){.cs-track{transition:none}}
.sec-head.center{margin-inline:auto;text-align:center}.sec-head.center h2::after{margin-inline:auto}.gsap-on .sec-head.center h2::after{transform-origin:center}

/* ---------- behind-the-scenes gallery ---------- */
.bts-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.bts-head .lead{color:var(--on-deep-2)}
.bts-flag{font:700 10px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;background:rgba(255,255,255,.1);color:var(--on-deep-2);border-radius:5px;padding:4px 8px}
.gal{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:180px;gap:14px;grid-template-areas:"a a b c" "a a d c" "e f f c"}
.gal figure{margin:0;position:relative;border-radius:var(--radius-lg);overflow:hidden;background:#2a1a6e}
.gal .g1{grid-area:a}.gal .g2{grid-area:b}.gal .g3{grid-area:c}.gal .g4{grid-area:d}.gal .g5{grid-area:e}.gal .g6{grid-area:f}
.bts-open{display:block;width:100%;height:100%;padding:0;border:0;background:none;cursor:zoom-in}
.gal-img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s}
.gal figure:hover .gal-img{transform:scale(1.06)}
.gal figcaption{position:absolute;left:12px;bottom:12px;background:rgba(21,24,38,.82);color:#fff;font-weight:700;font-size:13px;border-radius:999px;padding:5px 12px;pointer-events:none}
.bts-open:focus-visible{outline:3px solid var(--gold);outline-offset:-3px}
.js-motion .bts-gal figure{opacity:0;transform:translateY(18px) scale(.97);transition:opacity .6s,transform .6s;transition-delay:calc(var(--d,0) * 90ms)}
.js-motion .bts-gal.in figure{opacity:1;transform:none}
@media(max-width:760px){.gal{grid-template-columns:1fr 1fr;grid-auto-rows:140px;grid-template-areas:"a a" "b c" "d d" "e f"}}
.bts-lb{position:fixed;inset:0;z-index:200;background:rgba(10,8,30,.88);display:grid;place-items:center;padding:20px}
.bts-lb[hidden]{display:none}
.bts-lb figure{margin:0;max-width:min(1000px,100%);text-align:center}
.bts-lb img{width:min(1000px,90vw);height:auto;aspect-ratio:3/2;max-height:78vh;object-fit:contain;border-radius:16px;display:block;margin:auto}
.bts-lb figcaption{color:#fff;font-weight:700;margin-top:12px}
.bts-lb button{position:absolute;width:48px;height:48px;border-radius:50%;border:0;background:#fff;color:var(--ink);font-size:22px;cursor:pointer}
.bts-x{top:18px;right:18px}.bts-pv{left:18px;top:50%}.bts-nx{right:18px;top:50%}
@media(prefers-reduced-motion:reduce){.js-motion .bts-gal figure{opacity:1;transform:none}}

/* pp cards without text */
.pp-card{padding:26px 18px}
.pp-card h3{margin-top:2px}
.panic h3{margin-top:2px}
@media(max-width:900px){.pp-grid{grid-template-columns:1fr 1fr!important;gap:12px}.pp-card{padding:20px 12px}.pp-logo{width:60px;height:60px}}