/*
 * ThinkDone Solutions - Project detail (new design).
 * Loaded by project-detail-v2.php after css/services-v2.css (shared hero, heading animations, closing CTA)
 * and css/pages-v2.css (story paragraphs). All rules sit under .tdspd-page.
 */

@keyframes tdspd-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@keyframes tdspd-pulse { 0% { box-shadow: 0 0 0 0 rgba(43, 182, 115, .55); } 70% { box-shadow: 0 0 0 7px rgba(43, 182, 115, 0); } 100% { box-shadow: 0 0 0 0 rgba(43, 182, 115, 0); } }
@keyframes tdspd-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- hero ---------- */
.tdspd-page .tdspd-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 48px 64px; min-height: 860px; padding-top: 48px; padding-bottom: 80px; }
.tdspd-page .tdspd-hero__h { overflow-wrap: anywhere; }
.tdspd-page .tdspd-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 28px; font-size: 14px; color: var(--tds-peri); }
.tdspd-page .tdspd-crumb a { display: inline-flex; align-items: center; gap: 8px; color: #FFFFFF; text-decoration: none; transition: color .25s, gap .25s; }
.tdspd-page .tdspd-crumb a:hover { color: var(--tds-or); gap: 12px; }
.tdspd-page .tdspd-crumb a:focus-visible { outline: 2px solid var(--tds-or); outline-offset: 3px; border-radius: 4px; }
.tdspd-page .tdspd-crumb span[aria-current] { color: var(--tds-peri); }
.tdspd-page .tdspd-facts { display: flex; flex-wrap: wrap; margin: 44px 0 0; padding: 0; border-top: 1px solid rgba(221, 222, 222, .16); }
.tdspd-page .tdspd-facts div { padding: 18px 28px 0 0; margin-right: 28px; border-right: 1px solid rgba(221, 222, 222, .16); }
.tdspd-page .tdspd-facts div:last-child { border-right: 0; margin-right: 0; }
.tdspd-page .tdspd-facts dt { font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--tds-peri); }
.tdspd-page .tdspd-facts dd { display: flex; align-items: center; gap: 8px; margin: 6px 0 0; font-family: var(--tds-title); font-weight: 600; font-size: 18px; color: #FFFFFF; }
.tdspd-page .tdspd-dot { width: 8px; height: 8px; border-radius: 50%; background: #2BB673; animation: tdspd-pulse 2s ease-out infinite; }

.tdspd-page .tdspd-cover { justify-self: end; width: min(100%, 620px); perspective: 1600px; }
.tdspd-page .tdspd-cover__frame { --rx: 6deg; --ry: -12deg; overflow: hidden; background: var(--tds-n950); border: 1px solid rgba(221, 222, 222, .18); border-radius: 12px; box-shadow: 0 0 0 1px rgba(255, 89, 47, .14), 0 50px 100px -40px rgba(255, 89, 47, .45); transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .8s cubic-bezier(.2, .8, .2, 1); animation: tdspd-float 7s ease-in-out infinite; }
.tdspd-page .tdspd-cover__bar { display: flex; align-items: center; gap: 6px; padding: 11px 14px; border-bottom: 1px solid rgba(221, 222, 222, .12); }
.tdspd-page .tdspd-cover__bar i, .tdspd-page .tdspd-box__top i { width: 9px; height: 9px; border-radius: 50%; background: rgba(221, 222, 222, .25); }
.tdspd-page .tdspd-cover__bar i:first-child { background: var(--tds-or); }
.tdspd-page .tdspd-cover__bar span { margin-left: 10px; padding: 4px 14px; background: rgba(221, 222, 222, .08); border-radius: 999px; font-size: 12px; color: var(--tds-peri); }
.tdspd-page .tdspd-cover__img { display: block; width: 100%; height: auto; }
.tdspd-page .tdspd-cover__tags { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
.tdspd-page .tdspd-cover__tags li { padding: 7px 14px; background: rgba(23, 24, 26, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid rgba(221, 222, 222, .18); border-radius: 999px; font-size: 13px; color: #FFFFFF; animation: tdspd-in .6s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(.9s + var(--i, 0) * .08s); }

/* ---------- overview (story) ---------- */
.tdspd-page .tdspd-skills { display: flex; flex-wrap: wrap; gap: 10px; margin: 32px 0 0; padding: 0; list-style: none; }
.tdspd-page .tdspd-skills li { display: inline-flex; align-items: center; justify-content: center; min-width: 52px; height: 52px; padding: 0 12px; background: #FFFFFF; border: 1px solid var(--tds-line); border-radius: 12px; font-size: 13px; color: var(--tds-ink); }
.tdspd-page .tdspd-skills img { width: 28px; height: 28px; object-fit: contain; }

/* ---------- what we delivered ---------- */
.tdspd-page .tdspd-scope .tdsv2-head { align-items: flex-end; }
.tdspd-page .tdspd-scope__aside { max-width: 330px; font-size: 16px; line-height: 1.55; color: var(--tds-slate); }
.tdspd-page .tdspd-scope__aside b { display: block; font-family: var(--tds-display); font-size: 64px; line-height: 1; color: var(--tds-or); }
.tdspd-page .tdspd-scope__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.tdspd-page .tdspd-scope__item { position: relative; isolation: isolate; display: flex; flex-direction: column; min-height: 168px; padding: 24px; overflow: hidden; background: #FFFFFF; border: 1px solid var(--tds-line); border-radius: 12px; transition: opacity .6s, transform .6s, border-color .3s; transition-delay: calc(var(--i, 0) * .06s), calc(var(--i, 0) * .06s), 0s; }
.tdspd-page .tdspd-scope__item::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(300px circle at var(--lx, -999px) var(--ly, -999px), rgba(255, 89, 47, .14), rgba(255, 89, 47, 0) 70%); pointer-events: none; }
.tdspd-page .tdspd-scope__item:hover { border-color: var(--tds-or); }
.tdspd-page .tdspd-scope__num { position: absolute; top: 22px; right: 24px; font-family: var(--tds-display); font-size: 22px; line-height: 1; color: var(--tds-line2); transition: color .3s; }
.tdspd-page .tdspd-scope__item:hover .tdspd-scope__num { color: var(--tds-or); }
.tdspd-page .tdspd-scope__tick { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--tds-tint); color: var(--tds-or-text); transition: transform .5s cubic-bezier(.2, .8, .2, 1), background-color .3s, color .3s; }
.tdspd-page .tdspd-scope__item:hover .tdspd-scope__tick { transform: rotate(-10deg) scale(1.08); background: var(--tds-or); color: var(--tds-n950); }
.tdspd-page .tdspd-scope__tick svg path { stroke-dasharray: 24; stroke-dashoffset: 0; transition: stroke-dashoffset .6s cubic-bezier(.65, 0, .2, 1); transition-delay: calc(.3s + var(--i, 0) * .06s); }
.tdspd-page .tdspd-scope__text { margin-top: auto; padding-top: 24px; font-family: var(--tds-title); font-weight: 600; font-size: 18px; line-height: 1.3; color: var(--tds-ink); }
.tdspd-page.tdss-ready .tdspd-scope__grid:not(.is-in) .tdspd-scope__item { opacity: 0; transform: translateY(24px) scale(.98); }
.tdspd-page.tdss-ready .tdspd-scope__grid:not(.is-in) .tdspd-scope__tick svg path { stroke-dashoffset: 24; }

/* ---------- case study ---------- */
.tdspd-page .tdspd-case .tdsv2-head { align-items: flex-end; }
.tdspd-page .tdspd-case__aside { max-width: 340px; font-size: 16px; line-height: 1.55; color: var(--tds-peri); }
.tdspd-page .tdspd-case__grid { display: grid; grid-template-columns: 88px minmax(0, 1fr); align-items: start; gap: 32px; }
.tdspd-page .tdspd-rail { position: sticky; top: 120px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.tdspd-page .tdspd-rail__count { display: flex; align-items: baseline; gap: 6px; font-family: var(--tds-title); font-variant-numeric: tabular-nums; }
.tdspd-page .tdspd-rail__count b { font-family: var(--tds-display); font-weight: 400; font-size: 40px; line-height: 1; color: var(--tds-or); }
.tdspd-page .tdspd-rail__count span { font-size: 14px; color: var(--tds-peri); }
.tdspd-page .tdspd-rail__bar { display: block; width: 100%; height: 3px; overflow: hidden; background: rgba(221, 222, 222, .14); border-radius: 999px; }
.tdspd-page .tdspd-rail__bar i { display: block; height: 100%; background: var(--tds-or); transform: scaleX(0); transform-origin: left; transition: transform .2s linear; }
.tdspd-page .tdspd-rail__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 6px; max-height: calc(100vh - 260px); margin: 6px 0 0; padding: 0; overflow-y: auto; list-style: none; scrollbar-width: none; }
.tdspd-page .tdspd-rail__list::-webkit-scrollbar { display: none; }
.tdspd-page .tdspd-rail__list a { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 30px; border-radius: 999px; font-family: var(--tds-title); font-size: 12px; color: rgba(221, 222, 222, .55); text-decoration: none; font-variant-numeric: tabular-nums; transition: background-color .25s, color .25s; }
.tdspd-page .tdspd-rail__list a:hover { color: #FFFFFF; }
.tdspd-page .tdspd-rail__list a.is-on { background: var(--tds-or); color: var(--tds-n950); }
.tdspd-page .tdspd-rail__list a.is-seen:not(.is-on) { color: #FFFFFF; }
.tdspd-page .tdspd-rail__list a:focus-visible { outline: 2px solid var(--tds-or); outline-offset: 2px; }
.tdspd-page .tdspd-case__stack { overflow: hidden; background: #FFFFFF; border-radius: 12px; box-shadow: 0 0 0 1px rgba(221, 222, 222, .12), 0 60px 120px -60px rgba(255, 89, 47, .4); }
.tdspd-page .tdspd-slice { position: relative; margin: 0; scroll-margin-top: 110px; }
.tdspd-page .tdspd-slice__open { position: relative; display: block; width: 100%; padding: 0; background: none; border: 0; cursor: zoom-in; }
.tdspd-page .tdspd-slice__open img { display: block; width: 100%; height: auto; transition: opacity .8s, transform 1s cubic-bezier(.2, .8, .2, 1); }
.tdspd-page .tdspd-slice__zoom { position: absolute; top: 16px; right: 16px; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: rgba(23, 24, 26, .78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-radius: 50%; color: #FFFFFF; opacity: 0; transform: scale(.8); transition: opacity .3s, transform .3s, background-color .3s; }
.tdspd-page .tdspd-slice__open:hover .tdspd-slice__zoom, .tdspd-page .tdspd-slice__open:focus-visible .tdspd-slice__zoom { opacity: 1; transform: none; }
.tdspd-page .tdspd-slice__open:hover .tdspd-slice__zoom { background: var(--tds-or); color: var(--tds-n950); }
.tdspd-page .tdspd-slice__open:focus-visible { outline: 3px solid var(--tds-or); outline-offset: -3px; }
.tdspd-page.tdss-ready .tdspd-slice:not(.is-in) img { opacity: 0; transform: translateY(40px) scale(.985); }

/* lightbox */
.tdspd-page .tdspd-box { width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; margin: 0; padding: 0; background: rgba(23, 24, 26, .96); border: 0; color: #FFFFFF; }
.tdspd-page .tdspd-box::backdrop { background: rgba(23, 24, 26, .7); }
.tdspd-page .tdspd-box[open] { display: flex; flex-direction: column; animation: tdspd-in .3s ease-out both; }
.tdspd-page .tdspd-box__top { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid rgba(221, 222, 222, .12); }
.tdspd-page .tdspd-box__count { margin-right: auto; font-family: var(--tds-title); font-size: 15px; color: var(--tds-peri); font-variant-numeric: tabular-nums; }
.tdspd-page .tdspd-box__btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; background: rgba(221, 222, 222, .1); border: 0; border-radius: 50%; color: #FFFFFF; cursor: pointer; transition: background-color .25s, color .25s; }
.tdspd-page .tdspd-box__btn:hover { background: var(--tds-or); color: var(--tds-n950); }
.tdspd-page .tdspd-box__btn:focus-visible { outline: 2px solid var(--tds-or); outline-offset: 2px; }
.tdspd-page .tdspd-box__view { flex: 1; overflow: auto; padding: 24px; overscroll-behavior: contain; }
.tdspd-page .tdspd-box__view img { display: block; width: 100%; max-width: 1400px; height: auto; margin: 0 auto; border-radius: 8px; }

/* ---------- more work ---------- */
.tdspd-page .tdspd-pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 120px; }
.tdspd-page .tdspd-pager__link { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 10px; min-height: 180px; padding: 32px; overflow: hidden; background: var(--tds-n950); border-radius: 12px; color: #FFFFFF; text-decoration: none; }
.tdspd-page .tdspd-pager__link--next { align-items: flex-end; text-align: right; }
.tdspd-page .tdspd-pager__label { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--tds-or); transition: gap .3s; }
.tdspd-page .tdspd-pager__link:hover .tdspd-pager__label { gap: 16px; }
.tdspd-page .tdspd-pager__title { font-family: var(--tds-display); font-size: clamp(28px, 2.8vw, 44px); line-height: 1.05; }
.tdspd-page .tdspd-pager__img { position: absolute; inset: 0; z-index: -1; opacity: .18; transition: opacity .5s, transform .8s cubic-bezier(.2, .8, .2, 1); }
.tdspd-page .tdspd-pager__img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--tds-n950) 20%, rgba(23, 24, 26, .4)); }
.tdspd-page .tdspd-pager__link--next .tdspd-pager__img::after { background: linear-gradient(270deg, var(--tds-n950) 20%, rgba(23, 24, 26, .4)); }
.tdspd-page .tdspd-pager__img img { width: 100%; height: 100%; object-fit: cover; }
.tdspd-page .tdspd-pager__link:hover .tdspd-pager__img { opacity: .45; transform: scale(1.04); }
.tdspd-page .tdspd-pager__link:focus-visible { outline: 3px solid var(--tds-or); outline-offset: 3px; }
.tdspd-page .tdspd-more__head { align-items: flex-end; }
.tdspd-page .tdspd-rel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.tdspd-page .tdspd-rel__card { transition: opacity .6s, transform .6s; transition-delay: calc(var(--i, 0) * .08s); }
.tdspd-page .tdspd-rel__card a { position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; background: #FFFFFF; border: 1px solid var(--tds-line); border-radius: 12px; color: inherit; text-decoration: none; transition: border-color .3s, box-shadow .3s; }
.tdspd-page .tdspd-rel__card a:hover { border-color: var(--tds-or); box-shadow: 0 30px 60px -36px rgba(23, 24, 26, .4); }
.tdspd-page .tdspd-rel__card a:focus-visible { outline: 3px solid var(--tds-or); outline-offset: 3px; }
.tdspd-page .tdspd-rel__img { display: block; aspect-ratio: 16 / 11; overflow: hidden; background: var(--tds-n950); }
.tdspd-page .tdspd-rel__img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: scale .8s cubic-bezier(.2, .7, .2, 1); }
.tdspd-page .tdspd-rel__card a:hover .tdspd-rel__img img { scale: 1.05; }
.tdspd-page .tdspd-rel__body { display: flex; flex-direction: column; gap: 8px; padding: 22px 24px 26px; }
.tdspd-page .tdspd-rel__title { padding-right: 52px; font-family: var(--tds-title); font-weight: 600; font-size: 21px; color: var(--tds-ink); }
.tdspd-page .tdspd-rel__desc { font-size: 15px; line-height: 1.55; color: var(--tds-slate); }
.tdspd-page .tdspd-rel__tags { margin-top: 4px; font-size: 13px; color: var(--tds-slate); }
.tdspd-page .tdspd-rel__go { position: absolute; right: 20px; top: 20px; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: #FFFFFF; border-radius: 50%; color: var(--tds-ink); transition: background-color .3s, color .3s, transform .4s cubic-bezier(.2, .8, .2, 1); }
.tdspd-page .tdspd-rel__card a:hover .tdspd-rel__go { background: var(--tds-or); color: var(--tds-n950); transform: rotate(-45deg); }
.tdspd-page.tdss-ready .tdspd-rel:not(.is-in) .tdspd-rel__card { opacity: 0; transform: translateY(24px); }

/* ---------- responsive ---------- */
@media (max-width: 1280px) {
  .tdspd-page .tdspd-hero__grid { gap: 40px; }
}
@media (max-width: 1024px) {
  .tdspd-page .tdspd-hero__grid { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-top: 56px; }
  .tdspd-page .tdspd-cover { justify-self: center; width: min(100%, 560px); margin: 16px 0 32px; }
  .tdspd-page .tdspd-cover__tags { justify-content: flex-start; }
  .tdspd-page .tdspd-case__grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .tdspd-page .tdspd-rail { position: sticky; top: 96px; z-index: 3; flex-direction: row; align-items: center; padding: 10px 16px; background: rgba(23, 24, 26, .82); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(221, 222, 222, .14); border-radius: 999px; }
  .tdspd-page .tdspd-rail__count b { font-size: 24px; }
  .tdspd-page .tdspd-rail__bar { flex: 1; }
  .tdspd-page .tdspd-rail__list { display: none; }
  .tdspd-page .tdspd-rel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tdspd-page .tdspd-rel__card:nth-child(3) { display: none; }
}
@media (max-width: 768px) {
  .tdspd-page .tdspd-hero__grid { padding-top: 32px; padding-bottom: 56px; }
  .tdspd-page .tdspd-crumb { margin-bottom: 20px; font-size: 13px; }
  .tdspd-page .tdspd-facts { margin-top: 32px; }
  .tdspd-page .tdspd-facts div { padding-right: 16px; margin-right: 16px; }
  .tdspd-page .tdspd-facts dd { font-size: 16px; }
  .tdspd-page .tdspd-scope__aside b { font-size: 48px; }
  .tdspd-page .tdspd-scope__item { min-height: 0; padding: 20px; }
  .tdspd-page .tdspd-scope__text { padding-top: 18px; font-size: 16px; }
  .tdspd-page .tdspd-pager { grid-template-columns: minmax(0, 1fr); margin-bottom: 80px; }
  .tdspd-page .tdspd-pager__link { min-height: 140px; padding: 24px; }
  .tdspd-page .tdspd-rel { grid-template-columns: minmax(0, 1fr); }
  .tdspd-page .tdspd-rel__card:nth-child(3) { display: block; }
  .tdspd-page .tdspd-slice__zoom { opacity: 1; transform: none; width: 40px; height: 40px; top: 10px; right: 10px; }
  .tdspd-page .tdspd-box__view { padding: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .tdspd-page .tdspd-cover__frame, .tdspd-page .tdspd-dot, .tdspd-page .tdspd-cover__tags li, .tdspd-page .tdspd-box[open] { animation: none; }
  .tdspd-page .tdspd-cover__frame, .tdspd-page .tdspd-scope__item, .tdspd-page .tdspd-slice__open img, .tdspd-page .tdspd-rel__card, .tdspd-page .tdspd-pager__img, .tdspd-page .tdspd-scope__tick svg path { transition: none; }
}