/* SlideReady palette, package-card styling and motion timings. */
@font-face{font-family:Geist;src:url('./Geist-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Geist;src:url('./Geist-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
:root{--canvas:#F9FAFB;--surface:#FFFFFF;--ink:#18181B;--secondary:#71717A;--border:rgba(228,228,231,.72);--accent-soft:#F4F4F5;--shadow-soft:0 18px 48px rgba(24,24,27,.06)}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 50% 12%,rgba(255,255,255,.92),rgba(244,244,245,.92) 42%,rgba(240,240,241,.94) 100%),var(--canvas);color:var(--ink);font-family:Geist,system-ui,sans-serif;line-height:1.65;letter-spacing:0}
a{color:inherit;text-decoration:none}a:focus-visible{outline:2px solid #3B82F6;outline-offset:4px}
html,body{overflow-x:clip}
.page{overflow:clip}
.page{max-width:1140px;min-height:100svh;margin:auto;padding:24px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:24px;isolation:isolate}
.site-header{display:flex;justify-content:center}
.brand{display:block;position:relative}.brand img{object-fit:contain;display:block;width:96px;height:96px}h1{margin:0;line-height:1}
/* Both rings share the logo's center and remain behind the content. */
.brand::before,.brand::after{content:"";position:absolute;left:50%;top:50%;width:128px;height:128px;border:1px solid rgba(113,113,122,.22);border-radius:50%;box-shadow:0 0 8px rgba(113,113,122,.06),inset 0 0 8px rgba(113,113,122,.04);pointer-events:none;z-index:-1;opacity:0;animation:ba-logo-ripple 12s linear infinite}
.brand::after{animation-delay:-6s}
@keyframes ba-logo-ripple{0%{transform:translate(-50%,-50%) scale(.45);opacity:0}16%{opacity:.32}48%{opacity:.15}82%,100%{transform:translate(-50%,-50%) scale(5);opacity:0}}
main{width:100%}.project-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:24px}
.package-card{width:352px;max-width:100%;min-width:0;overflow:hidden;border:1px solid var(--border);border-radius:8px;background:rgba(255,255,255,.82);box-shadow:var(--shadow-soft);transition:transform 220ms ease,opacity 220ms ease}
@media(hover:hover){.package-card:hover{transform:translateY(-4px)}}
.project-link{display:flex;flex-direction:column;height:100%}.project-link:focus-visible{outline-offset:-3px;border-radius:8px}
.go span{display:inline-block;transition:transform 220ms cubic-bezier(.22,1,.36,1)}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.project-link:hover .go span{transform:translate(3px,-3px)}}
@media(prefers-reduced-motion:no-preference){.project-link:focus-visible .go span{transform:translate(3px,-3px)}}
.package-preview{aspect-ratio:16/10;overflow:hidden;margin:12px 12px 0;border-radius:8px;background:var(--canvas)}
.package-preview img{display:block;width:100%;height:100%;object-fit:contain}
.package-card-body{display:flex;flex-direction:column;gap:8px;padding:24px;flex:1}
.package-type{align-self:flex-start;border-radius:9999px;background:var(--accent-soft);color:#3f3f46;font-size:12px;line-height:1;padding:8px}
h2{font-size:20px;line-height:1.2;margin:0}p{margin:0}.package-card p{font-size:14px;line-height:1.55;color:var(--secondary);flex:1}
.card-bottom{display:flex;align-items:center;justify-content:space-between;gap:8px;border-top:1px solid var(--border);padding-top:16px;margin-top:8px;font-size:12px;color:var(--secondary)}.go{display:inline-flex;align-items:center;gap:8px;color:var(--ink);font-size:14px;font-weight:700;min-height:32px;margin-left:auto}.go span{font-size:20px}
.site-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 24px;color:var(--secondary);font-size:14px}
.footer-links{display:flex;align-items:center;gap:4px}.footer-links a{width:40px;height:40px;display:grid;place-items:center}.footer-links svg{display:block;width:16px;height:16px;fill:currentColor}.footer-links a:hover{color:var(--ink)}
/* Reuse the SlideReady skeleton sweep without blocking navigation. */
html.is-loading .package-preview{position:relative;background:rgba(222,227,235,.78)}
html.is-loading .package-preview img{opacity:0}
html.is-loading .package-preview:after{position:absolute;inset:-30% auto -30% 0;width:46%;content:"";background:linear-gradient(90deg,transparent,rgba(255,255,255,.72),transparent);animation:ba-skeleton-sweep 1.35s cubic-bezier(.4,0,.2,1) infinite}
.package-preview img{transition:opacity 420ms cubic-bezier(.22,1,.36,1)}
@keyframes ba-skeleton-sweep{0%{opacity:0;transform:translateX(-170%) skewX(-12deg)}18%,74%{opacity:.7}100%{opacity:0;transform:translateX(280%) skewX(-12deg)}}
@media(max-width:600px){.page{padding:16px}.site-footer{gap:8px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

/* Single-row rail with outside controls and a soft viewport edge. */
.project-carousel{position:relative;min-width:0;padding-inline:3rem}
.project-carousel .project-grid{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:1.5rem;scrollbar-width:none;padding:1.5rem 1.5rem 2.5rem;mask-image:linear-gradient(90deg,transparent,#18181B 1.5rem,#18181B calc(100% - 1.5rem),transparent)}
.project-carousel .project-grid::-webkit-scrollbar{display:none}
.project-carousel .package-card{flex:0 0 22rem;max-width:100%;scroll-snap-align:start;box-shadow:0 .5rem 1rem rgba(24,24,27,.04)}
.project-carousel .project-grid:focus-visible{outline:2px solid #3B82F6;outline-offset:-4px;border-radius:.75rem}
.carousel-arrow{position:absolute;top:50%;z-index:2;display:grid;place-items:center;width:2.5rem;height:3rem;padding:0;border:0;border-radius:.5rem;background:transparent;color:var(--secondary);box-shadow:none;opacity:.5;cursor:pointer;transform:translateY(-50%);transition:opacity 180ms ease}
.carousel-arrow--prev{left:0}.carousel-arrow--next{right:0}.carousel-arrow[hidden]{display:none}
.carousel-arrow svg{width:1.5rem;height:2rem;pointer-events:none}
.carousel-arrow:focus-visible{outline:2px solid #3B82F6;outline-offset:4px;opacity:.9}
@media(hover:hover){.carousel-arrow:hover{opacity:.9}}
@media(min-width:1100px){.project-carousel .package-card{flex-basis:calc((100% - 3rem)/3)}}
@media(max-width:600px){.project-carousel{padding-inline:2rem}.project-carousel .project-grid{padding-inline:.5rem;scroll-padding-inline:.5rem;mask-image:linear-gradient(90deg,transparent,#18181B .5rem,#18181B calc(100% - .5rem),transparent)}.project-carousel .package-card{box-shadow:0 .25rem .5rem rgba(24,24,27,.035)}.carousel-arrow{width:1.5rem}.carousel-arrow svg{width:1rem;height:1.5rem}}
@media(prefers-reduced-motion:reduce){.carousel-arrow{transition:none}}