/* Compact service cards and project browsing. */
.services-section { padding: 64px 0 80px; background: #0c0f17; }
.services-intro { max-width: 760px; margin: 0 auto 36px; text-align: center; }
.services-intro h2 { margin: 0 0 16px; font: 700 clamp(1.9rem, 3.2vw, 2.75rem)/1.2 Inter, sans-serif; color: #f3f5fa; letter-spacing: -.03em; text-wrap: balance; }
.services-intro p { color: #bbc5d4; line-height: 1.7; text-wrap: balance; }
.services-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 1120px; margin: auto; align-items: stretch; }
.service-card { min-width: 0; display: flex; flex-direction: column; padding: 28px; border: 1px solid #8190aa30; border-radius: 16px; background: linear-gradient(125deg,#122027,#151724 70%,#1b182b); }
.service-card-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.service-card-heading > svg { width: 24px; height: 24px; color: #71ddd2; flex-shrink: 0; }
.service-card h3 { margin: 0; font: 650 clamp(1.25rem,2.2vw,1.55rem)/1.3 Inter,sans-serif; letter-spacing: -.02em; color: #f3f5fa; }
.service-description { margin: 0 0 18px; line-height: 1.7; color: #c6cfdd; font-size: 1rem; }
.service-tags { display: flex; flex-wrap: wrap; list-style: none; gap: 8px; padding: 0; margin: 0 0 22px; }
.service-tags li { padding: 5px 9px; border-radius: 6px; background: #91a4c00c; border: 1px solid #91a4c026; color: #b7c5d8; font-size: .8rem; line-height: 1.5; }
.service-carousel { margin: 0 0 22px; min-width: 0; }
.service-slides { position: relative; display: grid; }
.service-slide { grid-area: 1 / 1; min-width: 0; }
.service-slide[hidden] { display: block !important; visibility: hidden; pointer-events: none; }
.project-preview { display: flex; flex-direction: column; height: 100%; width: 100%; padding: 0; overflow: hidden; border: 1px solid #8499af30; border-radius: 10px; background: #0b101a; color: inherit; text-align: left; font: inherit; cursor: pointer; }
.project-preview img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: #080c13; }
.project-preview-content { display: flex; flex: 1; flex-direction: column; gap: 7px; padding: 16px; }
.project-demo { font-size: .75rem; color: #acb9ce; margin: 0 0 4px; }
.project-preview-title { color: #eff3fa; font-size: 1rem; font-weight: 600; }
.project-preview-description { color: #bac5d5; font-size: .875rem; line-height: 1.6; }
.project-preview-link { display: flex; align-items: center; gap: 8px; color: #80e2d7; font-size: .875rem; margin-top: auto; padding-top: 6px; }
.project-preview-link svg { width: 16px; height: 16px; }
.project-preview:hover { border-color: #78ded580; background: #101c26; }
.project-preview:focus-visible { outline-offset: -4px; }
.carousel-controls { display: flex; justify-content: flex-end; align-items: center; gap: 12px; margin-top: 10px; }
.carousel-controls button { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 8px; background: #16212d; border: 1px solid #8190aa40; color: #b8ede7; cursor: pointer; }
.carousel-controls button svg { width: 20px; height: 20px; }
.carousel-controls button:disabled { opacity: .35; cursor: default; }
.carousel-controls button:not(:disabled):hover { background: #24404a; }
.carousel-count { min-width: 44px; text-align: center; color: #c4cede; font-size: .85rem; font-variant-numeric: tabular-nums; }
.service-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: auto; padding-top: 4px; }
.service-actions .hero-action { font-size: .94rem; padding: 12px 18px; min-height: 48px; }
.service-details { padding: 12px 0; min-height: 44px; color: #a3ded8; background: transparent; border: 0; text-decoration: underline; text-underline-offset: 4px; font: inherit; font-size: .9rem; cursor: pointer; }
.service-details:hover { color: #e0fffa; }
.service-dialog { position: fixed; inset: 0; width: min(760px,calc(100% - 32px)); max-height: calc(100svh - 40px); margin: auto; padding: 56px 32px 32px; overflow-y: auto; overscroll-behavior: contain; color: #d1d9e6; background: #111824; border: 1px solid #789ba650; border-radius: 16px; }
.service-dialog::backdrop { background: #030711d9; backdrop-filter: blur(6px); }
.service-dialog-close { position: absolute; top: 10px; right: 12px; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid #8190aa50; border-radius: 8px; color: #def8f4; background: #1c2937; cursor: pointer; }
.service-dialog-close svg { width: 20px; height: 20px; }
.service-dialog h2 { font: 700 clamp(1.5rem,3vw,2rem)/1.3 Inter,sans-serif; color: #f3f6fc; margin: 0 0 20px; }
.detail-description { line-height: 1.8; margin: 0 0 24px; overflow-wrap: anywhere; white-space: pre-line; }
.detail-viewer { margin-bottom: 20px; }
.detail-viewer-main { background: #080c13; border-radius: 10px; overflow: hidden; border: 1px solid #789ba630; }
.detail-viewer-main img { width: 100%; max-height: 55svh; object-fit: contain; display: block; }
.detail-thumbs { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; padding-bottom: 4px; }
.detail-thumb { flex: 0 0 auto; width: 84px; height: 56px; padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden; background: #080c13; cursor: pointer; opacity: .6; transition: opacity .2s, border-color .2s; }
.detail-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.detail-thumb:hover { opacity: .9; }
.detail-thumb.active { border-color: #6fe1d5; opacity: 1; }
.detail-thumbs { scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.detail-thumb { scroll-snap-align: start; touch-action: manipulation; }
@media (max-width: 600px) {
    .detail-viewer-main img { max-height: 42svh; }
    .detail-thumb { width: 68px; height: 46px; }
    .detail-thumbs { gap: 6px; }
}
.detail-full[hidden] { display: none; }
.detail-toggle { display: inline-block; margin: 12px 0 16px; padding: 0; border: 0; background: none; color: #6fe1d5; font: 600 .9rem Inter,sans-serif; cursor: pointer; }
.detail-toggle:hover { text-decoration: underline; }
@media (max-width: 850px) { .services-grid { grid-template-columns: 1fr; max-width: 620px; } }
@media (max-width: 600px) { .services-section { padding: 48px 0; } .services-intro { text-align: left; margin-bottom: 28px; } .service-card { padding: 22px 18px; } .service-actions { gap: 8px 16px; } .service-actions .hero-action { flex: 1 0 100%; } .service-dialog { padding: 60px 20px 24px; } }

/* Compact variants: each grid row grows only to fit its own content. */
.services-grid { grid-auto-rows: auto; }
.service-card { padding: 24px; }
.service-card-heading { margin-bottom: 12px; }
.service-card h3 { font-size: 1.4rem; line-height: 1.25; }
.service-description { font-size: .94rem; line-height: 1.55; margin-bottom: 12px; }
.service-card > .service-tags { gap: 6px; margin-bottom: 12px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent); mask-image: linear-gradient(90deg, #000 90%, transparent); }
.service-card > .service-tags::-webkit-scrollbar { display: none; }
.service-card > .service-tags li { padding: 3px 7px; font-size: .78rem; white-space: nowrap; flex: 0 0 auto; }
.service-carousel { position: relative; margin-bottom: 12px; }
.project-preview img { height: 180px; aspect-ratio: auto; object-fit: contain; }
.project-preview-content { gap: 2px; padding: 10px 12px; justify-content: center; }
.service-carousel:has(.carousel-controls) .project-preview-content { padding-right: 140px; }
.project-preview-title { font-size: .94rem; line-height: 1.35; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: #76d5cc70; }
.project-preview:hover .project-preview-title { color: #87eee0; text-decoration-color: currentColor; }
.project-preview-content .project-demo { margin: 0; line-height: 1.35; }
.carousel-controls { position: absolute; right: 8px; bottom: 4px; margin: 0; gap: 4px; }
.carousel-count { min-width: 36px; font-size: .8rem; }
.carousel-controls button { width: 40px; height: 40px; }
.service-actions { gap: 8px 16px; padding-top: 0; }
.service-actions .hero-action { padding: 10px 16px; }
.service-card-without-projects { background: linear-gradient(120deg,#111923,#151622); border-color: #8190aa30; border-top-color: #66cfc568; }
.service-task-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px 18px; list-style: none; padding: 0; margin: 0 0 18px; color: #bbc8d9; font-size: .94rem; line-height: 1.5; }
.service-task-list li { display: flex; align-items: baseline; gap: 9px; }
.service-task-list li::before { content: ""; width: 4px; height: 4px; border-radius: 50%; flex-shrink: 0; background: #72cec6; transform: translateY(-3px); }
.service-card-without-projects .service-actions { margin-top: 0; }
@media (max-width: 600px) { .service-card { padding: 20px 18px; } .project-preview img { height: auto; aspect-ratio: 16 / 9; } .service-actions .hero-action { flex: 0 1 auto; } }
@media (max-width: 379px) { .service-carousel:has(.carousel-controls) .project-preview-content { padding-right: 12px; } .carousel-controls { position: static; justify-content: flex-end; margin-top: 6px; } .service-task-list { grid-template-columns: 1fr; } }

/* Project previews respond to their own available width, independent of the service grid. */
.service-carousel { container: project-preview / inline-size; }
.project-preview { display: grid; grid-template-columns: minmax(0,1fr); gap: 10px; padding: 8px; height: 100%; cursor: default; border-radius: 14px; }
.project-preview:hover { background: #0b101a; border-color: #8499af30; }
.project-image-open { display: block; width: 100%; min-width: 0; aspect-ratio: 4 / 3; padding: 0; border: 0; border-radius: 12px; overflow: hidden; background: #0f1722; cursor: pointer; align-self: start; }
.project-preview .project-image-open img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: contain; display: block; border-radius: inherit; }
.project-preview .project-image-open img[data-image-fit="cover"] { object-fit: cover; }
.project-preview-content, .service-carousel:has(.carousel-controls) .project-preview-content { min-width: 0; flex: none; gap: 5px; padding: 2px 4px; justify-content: flex-start; }
.project-preview-title { font-size: 1rem; line-height: 1.4; text-decoration: none; overflow-wrap: anywhere; }
.project-preview:hover .project-preview-title { color: #eff3fa; text-decoration: none; }
.project-image-open:hover { filter: brightness(1.08); }
.project-view { align-self: flex-start; min-height: 44px; padding: 8px 0; border: 0; background: transparent; color: #87e1d7; font: inherit; font-size: .9rem; text-align: left; text-decoration: none; cursor: pointer; }
.project-view:hover { color: #d2fff7; text-decoration: underline; text-underline-offset: 4px; }
.project-image-open:focus-visible { outline-offset: -4px; }
.carousel-controls { position: static; justify-content: flex-end; margin-top: 8px; gap: 4px; }
.carousel-controls button { width: 44px; height: 44px; border-color: transparent; background: transparent; }
.carousel-controls button svg { width: 17px; height: 17px; }
.carousel-controls button:not(:disabled):hover { background: #24404a; border-color: #8190aa40; }
@container project-preview (min-width: 420px) {
 .project-preview { grid-template-columns: minmax(0,58fr) minmax(0,42fr); align-items: stretch; gap: 12px; }
 .project-preview-content { padding: 8px 2px 4px; }
 .service-carousel:has(.carousel-controls) .project-preview-content { padding: 8px 2px 56px; }
 .carousel-controls { position: absolute; right: 8px; bottom: 8px; margin: 0; }
}
/* On narrow previews, place controls beside View project instead of adding a footer row. */
.service-carousel .carousel-controls { position: absolute; right: 8px; bottom: 8px; margin: 0; }
.service-carousel:has(.carousel-controls) .project-view { max-width: calc(100% - 128px); }
@container project-preview (min-width: 420px) {
 .service-carousel:has(.carousel-controls) .project-view { max-width: none; }
}