.gallery-page { min-height:100vh; color:#102b40; background:#f5fbfd; }
.gallery-page-hero { position:relative; overflow:hidden; color:#fff; background:linear-gradient(115deg,#061b2b,#0d4b68 62%,#208fc0); }
.gallery-page-hero::after { content:''; position:absolute; inset:0; opacity:.18; background-image:linear-gradient(120deg,transparent 35%,rgba(255,255,255,.35) 35.2%,transparent 35.5%),linear-gradient(30deg,transparent 50%,rgba(98,224,255,.32) 50.2%,transparent 50.5%); background-size:220px 170px,280px 210px; pointer-events:none; }
.gallery-page-hero-inner { position:relative; z-index:1; display:flex; min-height:430px; align-items:center; justify-content:space-between; gap:45px; padding-top:120px; padding-bottom:80px; }
.gallery-page-hero-copy { max-width:760px; }
.gallery-page-kicker,.gallery-page-section-kicker { display:inline-flex; align-items:center; gap:9px; color:#66ddff; font-size:11px; font-weight:800; letter-spacing:.17em; text-transform:uppercase; }
.gallery-page-kicker::before,.gallery-page-section-kicker::before { content:''; width:8px; height:8px; border-radius:50%; background:currentColor; box-shadow:0 0 18px currentColor; }
.gallery-page-hero h1 { margin:21px 0 0; color:#fff; font:700 clamp(3rem,7vw,6.8rem)/.9 'Space Grotesk',sans-serif; letter-spacing:-.08em; }
.gallery-page-hero p { max-width:600px; margin:24px 0 0; color:#ccebf4; font-size:clamp(1rem,1.7vw,1.2rem); line-height:1.7; }
.gallery-page-meta { display:flex; align-items:baseline; gap:10px; margin-top:34px; color:#fff; }.gallery-page-meta span { font:700 2rem 'Space Grotesk',sans-serif; }.gallery-page-meta small { color:#a8d5e2; font-size:11px; text-transform:uppercase; letter-spacing:.13em; }
.gallery-page-hero-art { position:relative; width:min(340px,30vw); aspect-ratio:1; flex:0 0 auto; border:1px solid rgba(170,238,255,.35); border-radius:50%; background:radial-gradient(circle at 38% 35%,rgba(99,226,255,.48),rgba(16,91,123,.1) 38%,transparent 40%),radial-gradient(circle,rgba(5,25,42,.15),rgba(5,25,42,.58)); box-shadow:0 0 0 18px rgba(92,222,255,.05),0 0 80px rgba(75,213,255,.25); }
.gallery-page-hero-art span { position:absolute; inset:0; display:grid; place-items:center; color:rgba(255,255,255,.75); font:700 clamp(3rem,7vw,5rem) 'Space Grotesk',sans-serif; letter-spacing:-.1em; }.gallery-page-hero-art b,.gallery-page-hero-art i { position:absolute; display:block; border:1px solid rgba(143,237,255,.4); border-radius:50%; }.gallery-page-hero-art b { inset:18%; transform:rotate(35deg) scaleX(1.7); }.gallery-page-hero-art i { inset:32%; transform:rotate(-35deg) scaleX(1.7); }
.gallery-page-body { padding-top:85px; padding-bottom:105px; }.gallery-page-toolbar { display:flex; align-items:end; justify-content:space-between; gap:30px; margin-bottom:35px; }.gallery-page-toolbar h2 { margin:14px 0 0; color:#102b40; font:700 clamp(2rem,4vw,3.6rem)/1 'Space Grotesk',sans-serif; letter-spacing:-.07em; }.gallery-page-section-kicker { color:#2477d4; }.gallery-page-filters { display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }.gallery-page-filter { min-height:42px; padding:0 15px; color:#5e7482; border:1px solid #d8e7ed; border-radius:999px; background:#fff; cursor:pointer; font-size:12px; font-weight:700; }.gallery-page-filter:hover,.gallery-page-filter.is-active { color:#fff; border-color:#2477d4; background:#2477d4; }
.gallery-page-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }.gallery-page-card { position:relative; min-height:310px; overflow:hidden; padding:0; border:0; border-radius:20px; background:#123b51; cursor:pointer; text-align:left; }.gallery-page-card:nth-child(5n+1) { grid-row:span 2; min-height:636px; }.gallery-page-card img { width:100%; height:100%; min-height:310px; object-fit:cover; transition:transform .6s ease,filter .5s ease; }.gallery-page-card:hover img,.gallery-page-card:focus-visible img { transform:scale(1.06); filter:saturate(1.15); }
.gallery-page-empty { padding:70px 25px; border:1px dashed #a8ccd9; border-radius:20px; color:#647b87; text-align:center; background:#fff; }.gallery-page-empty-icon { display:grid; width:52px; height:52px; place-items:center; margin:0 auto 18px; color:#2477d4; border-radius:16px; background:#eaf5ff; }.gallery-page-empty-icon svg { width:25px; }.gallery-page-empty strong { display:block; color:#102b40; font-size:18px; }.gallery-page-empty p { margin:9px auto 0; max-width:430px; font-size:14px; line-height:1.6; }
.gallery-page-upload-note { display:flex; align-items:center; gap:17px; margin-top:42px; padding:22px 24px; border:1px solid #cce5ef; border-radius:18px; background:#eaf7fb; }.gallery-page-upload-icon { display:grid; width:43px; height:43px; flex:0 0 auto; place-items:center; color:#fff; border-radius:13px; background:#2477d4; }.gallery-page-upload-icon svg { width:21px; }.gallery-page-upload-note strong { color:#102b40; font-size:14px; }.gallery-page-upload-note p { margin:5px 0 0; color:#617b87; font-size:13px; line-height:1.5; }.gallery-page-upload-note .btn-primary { margin-left:auto; white-space:nowrap; }
.gallery-page-modal { position:fixed; z-index:100; inset:0; display:none; place-items:center; padding:24px; }.gallery-page-modal.is-open { display:grid; }.gallery-page-modal-backdrop { position:absolute; inset:0; width:100%; border:0; background:rgba(2,13,24,.88); cursor:default; }.gallery-page-modal-content { position:relative; z-index:1; width:min(1000px,100%); max-height:calc(100vh - 48px); padding:12px; border:1px solid rgba(157,223,255,.22); border-radius:20px; background:#071a29; box-shadow:0 24px 90px rgba(0,0,0,.4); }.gallery-page-modal-content img { display:block; width:100%; max-height:calc(100vh - 120px); object-fit:contain; border-radius:12px; }.gallery-page-modal-close { position:absolute; z-index:2; top:20px; right:20px; display:grid; width:42px; height:42px; place-items:center; color:#fff; border:1px solid rgba(255,255,255,.25); border-radius:50%; background:rgba(3,19,31,.72); cursor:pointer; font-size:27px; line-height:1; }.gallery-modal-open { overflow:hidden; }
@media (max-width:850px) { .gallery-page-hero-inner { align-items:flex-start; flex-direction:column; min-height:0; padding-top:95px; }.gallery-page-hero-art { width:220px; margin:5px auto 0; }.gallery-page-toolbar { align-items:flex-start; flex-direction:column; }.gallery-page-filters { justify-content:flex-start; }.gallery-page-grid { grid-template-columns:repeat(2,1fr); }.gallery-page-card:nth-child(5n+1) { grid-row:span 1; min-height:310px; }.gallery-page-upload-note { align-items:flex-start; flex-wrap:wrap; }.gallery-page-upload-note .btn-primary { margin-left:60px; } }
@media (max-width:560px) { .gallery-page-body { padding-top:60px; padding-bottom:75px; }.gallery-page-grid { grid-template-columns:1fr; }.gallery-page-card,.gallery-page-card:nth-child(5n+1) { min-height:330px; }.gallery-page-upload-note .btn-primary { width:100%; margin-left:0; }.gallery-page-modal { padding:12px; }.gallery-page-modal-content { padding:7px; } }
@media (prefers-reduced-motion:reduce) { .gallery-page-card img { transition:none; } }