:root {
  --up-bg: #f7fbfd;
  --up-surface: #ffffff;
  --up-line: #149fc2;
  --up-blue: #1767cf;
  --up-text: #14334a;
  --up-muted: #527084;
}

.upcycling-page { background: var(--up-bg); color: var(--up-text); overflow: hidden; }
.upcycling-page section { padding: 82px 0; position: relative; }
.upcycling-page .up-eyebrow { color: #65ddf6; font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.upcycling-page .up-title { color: #14334a; font-weight: 800; margin: 10px 0 18px; }
.upcycling-page .up-copy { color: var(--up-muted); font-size: 1.05rem; line-height: 1.8; }

.up-hero { min-height: 680px; display: flex; align-items: center; padding-top: 132px !important; background: radial-gradient(circle at 82% 20%, rgba(30,180,226,.22), transparent 28%), linear-gradient(135deg, #f9fdff, #e7f5fa 65%); }
.up-hero:before, .up-section-circuit:before { content: ''; position: absolute; inset: 0; opacity: .12; pointer-events: none; background-image: linear-gradient(90deg, transparent 49.7%, #149fc2 50%, transparent 50.3%), linear-gradient(transparent 49.7%, #149fc2 50%, transparent 50.3%); background-size: 112px 112px; mask-image: linear-gradient(to bottom, #000, transparent); }
.up-hero .container, .up-section-circuit .container { position: relative; z-index: 1; }
.up-hero h1 { color: #12364e; font-size: clamp(2.5rem, 5vw, 4.8rem); font-weight: 900; line-height: 1.02; margin: 15px 0 22px; max-width: 760px; }
.up-hero .lead { color: #436578; line-height: 1.7; max-width: 660px; }
.up-mascot { width: min(320px, 74vw); filter: drop-shadow(0 10px 20px rgba(20,159,194,.25)); }
.up-button { display: inline-flex; align-items: center; gap: 8px; margin: 24px 8px 0 0; padding: 12px 20px; color: #fff; background: #168eaf; border: 2px solid #168eaf; border-radius: 4px; font-weight: 800; text-decoration: none; transition: .2s; }
.up-button:hover { background: transparent; color: #137d9a; }
.up-button--outline { background: transparent; color: #137d9a; }
.up-button--outline:hover { background: #168eaf; color: #fff; }

.up-gallery-item { height: 100%; background: var(--up-surface); border: 1px solid rgba(20,159,194,.22); border-radius: 10px; overflow: hidden; box-shadow: 0 8px 22px rgba(34,85,108,.08); }
.up-gallery-item img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: contain; padding: 10px; background: #edf8fb; }
.up-gallery-item p { color: #355b70; margin: 0; padding: 19px 20px; font-size: 1rem; }
.up-video-section { background: #eef8fb; }
.up-video { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 10px; box-shadow: 0 12px 30px rgba(34,85,108,.18); }

.up-project-card { height: 100%; display: flex; flex-direction: column; background: var(--up-surface); border: 1px solid rgba(20,159,194,.18); border-radius: 10px; overflow: hidden; box-shadow: 0 8px 22px rgba(34,85,108,.08); transition: transform .2s, border-color .2s; }
.up-project-card:hover { transform: translateY(-5px); border-color: #149fc2; }
.up-project-card img { width: 100%; height: 220px; object-fit: cover; }
.up-project-card__body { display: flex; flex-direction: column; flex: 1; padding: 24px; }
.up-project-card h3 { color: #14334a; font-size: 1.25rem; font-weight: 800; }
.up-project-card p, .up-project-card li { color: var(--up-muted); }
.up-project-card ul { padding-left: 18px; font-size: .9rem; }
.up-project-card .up-button { margin-top: auto; align-self: flex-start; }
.upcycling-page #footer { background: #f0f7fa; color: #527084; }

@media (max-width: 991px) { .up-hero { text-align: center; min-height: auto; } .up-hero .lead { margin-inline: auto; } .up-mascot { margin-top: 38px; } }