@layer bricks {.brxe-code{width:100%}}  :root { --navy: #0B132B; --navy-deep: #070D1E; --navy-mid: #0E1830; --cream: #F9F6F0; --cream-dark: #EDE8DF; --offwhite: #F4F4F4; --charcoal: #1C1C1C; --gold: #D4AF37; --gold-light: #E8C94A; --gold-dim: rgba(212,175,55,0.14); --gold-dim2: rgba(212,175,55,0.08); --serif: 'Playfair Display', Georgia, serif; --sans: 'Inter', system-ui, sans-serif; --ease-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-circ: cubic-bezier(0.85, 0, 0.15, 1); --z-base: 10; --z-overlay: 20; --z-header: 30; --z-menu: 40; --z-loader: 50; --z-cursor: 60; --header-h: 72px; --gap: clamp(5rem, 10vw, 9rem); }  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: auto; font-size: 1.2rem !important} body { font-family: var(--sans); background: var(--navy); color: var(--offwhite); overflow-x: hidden; -webkit-font-smoothing: antialiased; } img { display: block; width: 100%; height: 100%; object-fit: cover; } a { text-decoration: none; color: inherit; } button { cursor: pointer; border: none; background: none; font-family: inherit; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }  .noise { position: fixed; inset: -200%; width: 400%; height: 400%; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E"); background-size: 180px 180px; opacity: 0.028; pointer-events: none; z-index: var(--z-cursor); animation: grainShift 0.12s steps(1) infinite; } @keyframes grainShift { 0% { transform: translate(0, 0); } 10% { transform: translate(-3%, -4%); } 20% { transform: translate(2%, 5%); } 30% { transform: translate(-4%, 2%); } 40% { transform: translate(5%, -3%); } 50% { transform: translate(-2%, 4%); } 60% { transform: translate(4%, -5%); } 70% { transform: translate(-5%, 3%); } 80% { transform: translate(3%, -2%); } 90% { transform: translate(-2%, 5%); } 100% { transform: translate(4%, -4%); } }  .cursor { position: fixed; top: 0; left: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); pointer-events: none; z-index: var(--z-cursor); transform: translate(-50%,-50%); will-change: transform; mix-blend-mode: difference; } .cursor--ring { width: 34px; height: 34px; background: transparent; border: 1px solid rgba(212,175,55,0.45); transition: width .45s var(--ease-expo), height .45s var(--ease-expo), border-color .3s; } .cursor--expand .cursor--ring { width: 54px; height: 54px; border-color: rgba(212,175,55,0.85); }  .scroll-progress { position: fixed; top: 0; left: 0; width: 0%; height: 2px; background: linear-gradient(to right, var(--gold), var(--gold-light)); z-index: calc(var(--z-header) + 2); pointer-events: none; }  .loader { position: fixed; inset: 0; background: var(--navy-deep); z-index: var(--z-loader); display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; } .loader__wordmark { font-family: var(--serif); font-size: clamp(3rem, 10vw, 8rem); font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: var(--offwhite); overflow: hidden; display: block; } .loader__wordmark-inner { display: block; transform: translateY(110%); }  .loader__glow { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 500px; height: 500px; border-radius: 50%; background: radial-gradient(circle, rgba(212,175,55,0.07) 0%, transparent 65%); opacity: 0; pointer-events: none; }  .loader__tagline { font-size: 0.58rem; letter-spacing: 0.42em; text-transform: uppercase; color: rgba(244,244,244,0.22); margin-top: 1.25rem; opacity: 0; transform: translateY(8px); } .loader__line { width: 0; height: 1px; background: linear-gradient(to right, transparent, var(--gold), transparent); margin-top: 1.75rem; } .loader__counter { position: absolute; bottom: 3rem; right: 3rem; font-family: var(--serif); font-size: 0.78rem; letter-spacing: 0.2em; color: rgba(244,244,244,0.25); font-weight: 400; }  .loader__corner { position: absolute; font-size: 0.58rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(244,244,244,0.18); opacity: 0; } .loader__corner--tl { top: 2.5rem; left: 3rem; } .loader__corner--br { bottom: 3rem; left: 3rem; } .loader__bar { position: absolute; bottom: 0; left: 0; height: 1px; background: linear-gradient(to right, var(--gold), var(--gold-light)); width: 0%; }  .loader__curtain { position: absolute; inset: 0; background: var(--navy-deep); transform: scaleY(0); transform-origin: top; }  .back-top { position: fixed; bottom: 2.5rem; left: clamp(1.5rem, 3vw, 3rem); width: 48px; height: 48px; z-index: calc(var(--z-header) - 1); display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transform: translateY(12px); transition: opacity .5s var(--ease-expo), transform .5s var(--ease-expo); pointer-events: none; } .back-top--visible { opacity: 1; transform: translateY(0); pointer-events: all; }  .back-top__ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .back-top__ring-track { stroke: rgba(212,175,55,0.15); } .back-top__ring-fill { stroke: var(--gold); stroke-dasharray: 113.1; stroke-dashoffset: 113.1; transition: stroke-dashoffset .05s linear; }  .back-top__disc { position: absolute; inset: 4px; border-radius: 50%; background: rgba(7,13,30,0.75); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: background .3s ease; } .back-top:hover .back-top__disc { background: var(--gold); }  .back-top__arrow { position: relative; z-index: 1; width: 16px; height: 16px; color: var(--gold); transition: color .3s ease, transform .35s var(--ease-expo); } .back-top:hover .back-top__arrow { color: var(--navy-deep); transform: translateY(-2px); }  .header { position: fixed; top: 0; left: 0; right: 0; height: var(--header-h); z-index: var(--z-header); display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(1.5rem, 4vw, 3.5rem); transition: background .55s ease, border-color .55s ease; } .header--scrolled { background: rgba(7,13,30,0.9); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--gold-dim2); }  .header--menu-open { z-index: calc(var(--z-menu) + 1); } .header__logo { font-family: var(--serif); font-size: 1.55rem; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--offwhite); position: relative; opacity: 0; } .header__logo::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 1px; background: var(--gold); transition: width .45s var(--ease-expo); } .header__logo:hover::after { width: 100%; } .header__nav { display: flex; align-items: center; gap: 1.5rem; opacity: 0; } .header__admissions { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--navy-deep); background: var(--gold); padding: 0.6rem 1.4rem; border-radius: 2px; transition: background .22s ease, transform .25s var(--ease-expo), box-shadow .25s ease; cursor: pointer; } .header__admissions:hover { background: var(--gold-light); transform: translateY(-1px); box-shadow: 0 8px 24px rgba(212,175,55,0.22); }  .header__burger { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 28px; height: 28px; cursor: pointer; z-index: calc(var(--z-menu) + 1); position: relative; } .header__burger-line { display: block; height: 1px; background: var(--offwhite); transform-origin: center; transition: transform .4s var(--ease-expo), opacity .3s ease, width .35s var(--ease-expo); } .header__burger-line:nth-child(1) { width: 100%; } .header__burger-line:nth-child(2) { width: 66%; } .header__burger-line:nth-child(3) { width: 100%; } .header__burger:hover .header__burger-line:nth-child(2) { width: 100%; } .header__burger--open .header__burger-line:nth-child(1) { transform: translateY(6px) rotate(45deg); } .header__burger--open .header__burger-line:nth-child(2) { opacity: 0; transform: scaleX(0); } .header__burger--open .header__burger-line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }  .menu-overlay { position: fixed; inset: 0; background: var(--navy-deep); z-index: var(--z-menu); display: grid; grid-template-rows: 1fr auto; clip-path: circle(0% at calc(100% - 3.5rem) calc(var(--header-h) / 2)); transition: clip-path .9s var(--ease-circ); pointer-events: none; } .menu-overlay--open { clip-path: circle(160% at calc(100% - 3.5rem) calc(var(--header-h) / 2)); pointer-events: all; } .menu-overlay__body { display: flex; align-items: center; padding: 0 clamp(2rem, 8vw, 8rem); gap: clamp(3rem, 8vw, 10rem); } .menu-overlay__nav { list-style: none; } .menu-overlay__item { overflow: hidden; } .menu-overlay__link { display: inline-flex; align-items: baseline; gap: 1rem; font-family: var(--serif); font-size: clamp(2.5rem, 5.5vw, 5rem); font-weight: 400; color: rgba(244,244,244,0.25); letter-spacing: -0.02em; line-height: 1.2; position: relative; transform: translateY(115%); transition: color .3s ease; } .menu-overlay__link-num { font-family: var(--sans); font-size: 0.65rem; letter-spacing: 0.15em; color: var(--gold); opacity: 0; transition: opacity .3s ease; align-self: center; } .menu-overlay__link:hover { color: var(--offwhite); } .menu-overlay__link:hover .menu-overlay__link-num { opacity: 1; } .menu-overlay--open .menu-overlay__link { animation: slideUp .75s var(--ease-expo) forwards; } .menu-overlay__item:nth-child(1) .menu-overlay__link { animation-delay: .08s; } .menu-overlay__item:nth-child(2) .menu-overlay__link { animation-delay: .14s; } .menu-overlay__item:nth-child(3) .menu-overlay__link { animation-delay: .20s; } .menu-overlay__item:nth-child(4) .menu-overlay__link { animation-delay: .26s; } .menu-overlay__item:nth-child(5) .menu-overlay__link { animation-delay: .32s; } @keyframes slideUp { to { transform: translateY(0); } } .menu-overlay__aside { display: flex; flex-direction: column; gap: 2rem; } .menu-overlay__aside-label { font-size: 0.6rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.5rem; } .menu-overlay__aside-text { font-size: 0.8rem; line-height: 1.7; color: rgba(244,244,244,0.38); } .menu-overlay__footer { padding: 1.5rem clamp(2rem, 8vw, 8rem); border-top: 1px solid rgba(244,244,244,0.06); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; } .menu-overlay__footer-copy { font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(244,244,244,0.2); } .menu-overlay__social { display: flex; gap: 2rem; list-style: none; } .menu-overlay__social-link { font-size: 0.68rem; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(244,244,244,0.35); transition: color .25s ease; } .menu-overlay__social-link:hover { color: var(--gold); }  .hero { position: relative; width: 100%; height: 100vh; min-height: 700px; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; background: var(--navy-deep); } .hero__bg { position: absolute; inset: 0; z-index: 0; background: url("https://pixlooplab.com/wp-content/uploads/2026/06/hero.webp") no-repeat center / cover; animation: ambientGlow 14s ease-in-out infinite alternate; } @keyframes ambientGlow { 0% { filter: brightness(1) saturate(1); } 100% { filter: brightness(1.06) saturate(1.1); } } .hero__bg::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(212,175,55,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(212,175,55,0.035) 1px, transparent 1px); background-size: 72px 72px; mask-image: radial-gradient(ellipse 80% 80% at 55% 45%, black 30%, transparent 100%); } .hero__bg::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(212,175,55,0.2) 1px, transparent 1px); background-size: 40px 40px; background-position: 20px 20px; mask-image: radial-gradient(ellipse 55% 55% at 72% 28%, black 0%, transparent 75%); animation: starDrift 22s linear infinite; } @keyframes starDrift { to { background-position: 60px 60px; } }  .hero__ornament { position: absolute; top: 8vh; right: clamp(1.5rem, 5vw, 5rem); z-index: 1; opacity: 0; } .hero__ornament-svg { width: clamp(120px, 18vw, 240px); height: auto; } .hero__overlay { position: absolute; inset: 0; background: linear-gradient( to top, rgba(7,13,30,0.97) 0%, rgba(7,13,30,0.5) 38%, rgba(7,13,30,0.15) 65%, transparent 100% ); z-index: 2; } .hero__content { position: relative; z-index: 3; padding: 0 clamp(1.5rem, 6vw, 6rem) clamp(3.5rem, 7vh, 6rem); display: grid; grid-template-rows: auto auto; gap: clamp(1.5rem, 3vh, 2.5rem); } .hero__eyebrow { display: flex; align-items: center; gap: 1rem; font-size: 0.66rem; font-weight: 500; letter-spacing: 0.34em; text-transform: uppercase; color: var(--gold); opacity: 0; } .hero__eyebrow-line { display: block; width: 36px; height: 1px; background: var(--gold); flex-shrink: 0; } .hero__heading { font-family: var(--serif); font-size: clamp(3.8rem, 9vw, 9.5rem); font-weight: 700; line-height: 1.2; letter-spacing: -0.025em; color: var(--offwhite); max-width: 14ch; } .hero__heading-line { display: block; overflow: hidden; padding-bottom: 0.08em; } .hero__heading-line-inner { display: block; } .hero__heading-line--gold { color: var(--gold); font-style: italic; } .hero__bottom { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 2rem; } .hero__sub { font-size: clamp(0.88rem, 1.4vw, 1rem); font-weight: 300; line-height: 1.8; color: rgba(244,244,244,0.6); max-width: 38ch; opacity: 0; } .hero__actions { display: flex; align-items: center; gap: 1.5rem; flex-shrink: 0; opacity: 0; } .btn-primary { display: inline-flex; align-items: center; gap: 0.8rem; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--navy-deep); background: var(--gold); padding: 0.9rem 2rem; border-radius: 2px; cursor: pointer; position: relative; overflow: hidden; transition: transform .3s var(--ease-expo), box-shadow .3s ease; } .btn-primary::before { content: ''; position: absolute; inset: 0; background: var(--gold-light); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease-expo); } .btn-primary span, .btn-primary svg { position: relative; z-index: 1; } .btn-primary:hover::before { transform: scaleX(1); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(212,175,55,0.28); } .btn-primary svg { width: 15px; height: 15px; transition: transform .3s var(--ease-expo); } .btn-primary:hover svg { transform: translateX(4px); } .btn-ghost { font-size: 0.7rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(244,244,244,0.65); border-bottom: 1px solid rgba(244,244,244,0.22); padding-bottom: 2px; transition: color .25s ease, border-color .25s ease; cursor: pointer; } .btn-ghost:hover { color: var(--gold); border-color: var(--gold); }  .hero__scroll-cue { position: absolute; right: clamp(1.5rem, 3vw, 3rem); bottom: clamp(2.5rem, 5vh, 4rem); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; opacity: 0; } .hero__scroll-cue-text { font-size: 0.58rem; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(244,244,244,0.35); writing-mode: vertical-rl; text-orientation: mixed; } .hero__scroll-cue-line { width: 1px; height: 56px; background: linear-gradient(to bottom, var(--gold), transparent); animation: cueLinePulse 2.2s var(--ease-expo) infinite 2s; } @keyframes cueLinePulse { 0% { transform: scaleY(0); transform-origin: top; opacity: 1; } 50% { transform: scaleY(1); transform-origin: top; opacity: 1; } 50.01% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; } }  .marquee { background: var(--gold); padding: 1rem 0; overflow: hidden; position: relative; } .marquee__track { display: flex; width: max-content; animation: marqueeScroll 28s linear infinite; } .marquee:hover .marquee__track { animation-play-state: paused; } @keyframes marqueeScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } .marquee__group { display: flex; align-items: center; gap: 0; flex-shrink: 0; } .marquee__item { font-size: 0.66rem; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; color: var(--navy-deep); white-space: nowrap; padding: 0 2.5rem; } .marquee__sep { width: 4px; height: 4px; border-radius: 50%; background: rgba(7,13,30,0.35); flex-shrink: 0; }  .legacy { background: var(--navy); position: relative; } .legacy__header { padding: var(--gap) clamp(1.5rem, 6vw, 6rem) 3.5rem; display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 2rem; } .section-label { display: flex; align-items: center; gap: 0.75rem; font-size: 0.65rem; font-weight: 500; letter-spacing: 0.32em; text-transform: uppercase; color: var(--gold); margin-bottom: 1rem; } .section-label::before { content: ''; display: block; width: 28px; height: 1px; background: var(--gold); flex-shrink: 0; } .section-title { font-family: var(--serif); font-size: clamp(2.4rem, 5vw, 4.5rem); font-weight: 700; letter-spacing: -0.025em; line-height: 1.08; color: var(--offwhite); } .section-title em { font-style: italic; color: var(--gold); } .legacy__subtitle { font-size: 0.85rem; font-weight: 300; line-height: 1.75; color: rgba(244,244,244,0.45); max-width: 34ch; text-align: right; } .legacy__track { display: flex; gap: clamp(2rem, 3.5vw, 3rem); padding: 0 clamp(1.5rem, 6vw, 6rem) clamp(3.5rem, 7vh, 6rem); width: max-content; will-change: transform; } .legacy-card { width: clamp(300px, 34vw, 500px); flex-shrink: 0; cursor: pointer; } .legacy-card__image { width: 100%; height: clamp(380px, 52vh, 600px); border-radius: 3px; position: relative; overflow: hidden; }  .legacy-card:nth-child(1) .legacy-card__image-bg { background: linear-gradient(145deg, #162342 0%, #0c1628 55%, #060e1c 100%); } .legacy-card:nth-child(2) .legacy-card__image-bg { background: linear-gradient(145deg, #1c2c18 0%, #0f1c0d 55%, #070d05 100%); } .legacy-card:nth-child(3) .legacy-card__image-bg { background: linear-gradient(145deg, #241618 0%, #160d0e 55%, #0a0608 100%); } .legacy-card__image-bg { position: absolute; inset: 0; transition: transform .85s var(--ease-expo); } .legacy-card:hover .legacy-card__image-bg { transform: scale(1.06); }  .legacy-card__image-art { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: flex-end;  } .legacy-card__image-art svg { width: 65%; height: auto; opacity: 0.12; transition: opacity .6s ease; } .legacy-card:hover .legacy-card__image-art svg { opacity: 0.22; } .legacy-card__image-gradient { position: absolute; inset: 0; background: linear-gradient(to top, rgba(7,13,30,0.92) 0%, rgba(7,13,30,0.3) 45%, transparent 100%); } .legacy-card__image-year { position: absolute; top: 1.5rem; left: 1.5rem; font-family: var(--serif); font-size: 0.72rem; letter-spacing: 0.22em; color: var(--navy); border: 1px solid var(--navy); padding: 0.3rem 0.8rem; backdrop-filter: blur(6px); border-radius: 1px; } .legacy-card__image-index { position: absolute; bottom: 1.5rem; right: 1.5rem; font-family: var(--serif); font-size: 7rem; font-weight: 900; line-height: 1; color: rgba(212,175,55,0.06); letter-spacing: -0.06em; user-select: none; transition: color .5s ease; } .legacy-card:hover .legacy-card__image-index { color: rgba(212,175,55,0.1); } .legacy-card__body { padding: 1.6rem 0 0; } .legacy-card__rule { width: 0; height: 1px; background: linear-gradient(to right, var(--gold), transparent); margin-bottom: 1.1rem; transition: width .65s var(--ease-expo); } .legacy-card:hover .legacy-card__rule { width: 100%; } .legacy-card__era { font-size: 0.63rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.55rem; } .legacy-card__title { font-family: var(--serif); font-size: clamp(1.35rem, 2vw, 1.85rem); font-weight: 600; line-height: 1.22; letter-spacing: -0.01em; color: var(--offwhite); margin-bottom: 0.8rem; } .legacy-card__text { font-size: 0.855rem; font-weight: 300; line-height: 1.78; color: rgba(244,244,244,0.48); max-width: 38ch; } .legacy-card__link { display: inline-flex; align-items: center; gap: 0.55rem; margin-top: 1.2rem; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); transition: gap .3s var(--ease-expo); } .legacy-card__link svg { width: 13px; height: 13px; } .legacy-card:hover .legacy-card__link { gap: 0.95rem; }  .legacy__dots { display: flex; align-items: center; justify-content: center; gap: 0.75rem; padding: 0 clamp(1.5rem, 6vw, 6rem) clamp(3rem, 6vh, 5rem); } .legacy__dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(244,244,244,0.15); transition: background .3s ease, transform .3s ease; } .legacy__dot--active { background: var(--gold); transform: scale(1.4); } .legacy__progress-row { display: flex; align-items: center; gap: 1.25rem; padding: 0 clamp(1.5rem, 6vw, 6rem) clamp(3rem, 6vh, 5rem); } .legacy__progress-track { flex: 1; height: 1px; background: rgba(244,244,244,0.08); position: relative; } .legacy__progress-fill { position: absolute; top: 0; left: 0; height: 100%; background: linear-gradient(to right, var(--gold), var(--gold-light)); width: 0%; } .legacy__progress-label { font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(244,244,244,0.28); flex-shrink: 0; }  .manifesto { background: var(--navy-deep); padding: var(--gap) clamp(1.5rem, 6vw, 6rem); position: relative; overflow: hidden; border-top: 1px solid var(--gold-dim2); border-bottom: 1px solid var(--gold-dim2); } .manifesto::before { content: '"'; position: absolute; top: -0.2em; left: clamp(1rem, 4vw, 4rem); font-family: var(--serif); font-size: clamp(12rem, 22vw, 22rem); font-weight: 900; line-height: 1; color: rgba(212,175,55,0.04); pointer-events: none; user-select: none; } .manifesto__inner { position: relative; max-width: 90ch; margin: 0 auto; text-align: center; } .manifesto__quote { font-family: var(--serif); font-size: clamp(1.7rem, 3.5vw, 3.2rem); font-weight: 400; font-style: italic; line-height: 1.45; letter-spacing: -0.01em; color: var(--offwhite); margin-bottom: 2.5rem; } .manifesto__quote em { color: var(--gold); font-style: normal; } .manifesto__attr { display: flex; align-items: center; justify-content: center; gap: 1rem; font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(244,244,244,0.35); } .manifesto__attr::before, .manifesto__attr::after { content: ''; display: block; width: 30px; height: 1px; background: rgba(212,175,55,0.3); }  .stats { background: var(--navy-mid); padding: clamp(4rem, 8vh, 7rem) clamp(1.5rem, 6vw, 6rem); } .stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; } @media (max-width: 768px) { .stats__grid { grid-template-columns: repeat(2, 1fr); } } .stat { text-align: center; position: relative; padding: 2rem 1rem; } .stat::after { content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 45%; background: rgba(212,175,55,0.12); } .stat:last-child::after { display: none; } .stat__rule { width: 24px; height: 1px; background: var(--gold); margin: 0 auto 1.25rem; opacity: 0.5; } .stat__number { font-family: var(--serif); font-size: clamp(2.8rem, 5.5vw, 4.5rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1; color: var(--offwhite); } .stat__number .suffix { color: var(--gold); } .stat__label { font-size: 0.65rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(244,244,244,0.35); margin-top: 0.65rem; }  .programs { background: var(--cream); padding: var(--gap) clamp(1.5rem, 6vw, 6rem); } .programs__header { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 2rem; margin-bottom: clamp(3rem, 5vw, 5rem); } .programs__label { color: var(--gold); } .programs__label::before { background: var(--gold); } .programs__title { color: var(--charcoal); } .programs__title em { color: var(--gold); font-style: italic; } .programs__intro { font-size: 0.88rem; line-height: 1.78; color: rgba(28,28,28,0.55); max-width: 34ch; text-align: right; } .bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(0.6rem, 1.2vw, 1rem); } .bento-card { position: relative; border-radius: 5px; overflow: hidden; cursor: pointer; background: var(--charcoal); } .bento-card:nth-child(1) { grid-column: span 7; grid-row: span 2; } .bento-card:nth-child(2) { grid-column: span 5; } .bento-card:nth-child(3) { grid-column: span 3; } .bento-card:nth-child(4) { grid-column: span 2; } @media (max-width: 860px) { .bento-card:nth-child(1) { grid-column: span 12; grid-row: span 1; } .bento-card:nth-child(2) { grid-column: span 12; } .bento-card:nth-child(3) { grid-column: span 6; } .bento-card:nth-child(4) { grid-column: span 6; } } @media (max-width: 560px) { .bento-card { grid-column: span 12 !important; grid-row: auto !important; } } .bento-card__media { position: relative; width: 100%; height: 100%; min-height: clamp(250px, 33vh, 420px); overflow: hidden; } .bento-card:nth-child(1) .bento-card__media { min-height: clamp(440px, 60vh, 680px); } .bento-card:nth-child(3) .bento-card__media, .bento-card:nth-child(4) .bento-card__media { min-height: clamp(190px, 26vh, 290px); } .bento-card__bg { position: absolute; inset: 0; transition: transform .95s var(--ease-expo); } .bento-card:hover .bento-card__bg { transform: scale(1.08); }  .bento-card:nth-child(1) .bento-card__bg { background: url("https://pixlooplab.com/wp-content/uploads/2026/06/program_01.webp") no-repeat center / cover } .bento-card:nth-child(2) .bento-card__bg { background: url("https://pixlooplab.com/wp-content/uploads/2026/06/program_02.webp") no-repeat center / cover } .bento-card:nth-child(3) .bento-card__bg { background: url("https://pixlooplab.com/wp-content/uploads/2026/06/sport.webp") no-repeat center / cover } .bento-card:nth-child(4) .bento-card__bg { background: url("https://pixlooplab.com/wp-content/uploads/2026/06/program_04.webp") no-repeat center / cover }  .bento-card:nth-child(1) .bento-card__bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 80% 15%, rgba(212,175,55,0.1) 0%, transparent 38%), repeating-linear-gradient(48deg, transparent, transparent 22px, rgba(212,175,55,0.025) 22px, rgba(212,175,55,0.025) 23px); } .bento-card:nth-child(2) .bento-card__bg::after { content: ''; position: absolute; inset: 0; background: conic-gradient(from 30deg at 85% 85%, rgba(212,175,55,0.07) 0deg, transparent 80deg); } .bento-card:nth-child(3) .bento-card__bg::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent, transparent 16px, rgba(212,175,55,0.05) 16px, rgba(212,175,55,0.05) 17px); } .bento-card:nth-child(4) .bento-card__bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(212,175,55,0.14) 0%, transparent 55%); } .bento-card__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(7,13,30,0.92) 0%, rgba(7,13,30,0.22) 55%, transparent 100%); }  .bento-card__num { position: absolute; top: 1.25rem; left: 1.25rem; font-family: var(--sans); font-size: 0.58rem; letter-spacing: 0.18em; color: rgba(212,175,55,0.55); border: 1px solid rgba(212,175,55,0.18); padding: 0.25rem 0.6rem; border-radius: 1px; backdrop-filter: blur(4px); transition: color .3s ease, border-color .3s ease; } .bento-card:hover .bento-card__num { color: var(--gold); border-color: rgba(212,175,55,0.45); } .bento-card__content { position: absolute; bottom: 0; left: 0; right: 0; padding: clamp(1.2rem, 2.5vw, 1.85rem); } .bento-card__rule { width: 0; height: 2px; background: var(--gold); margin-bottom: 0.9rem; transition: width .55s var(--ease-expo); } .bento-card:hover .bento-card__rule { width: clamp(36px, 12%, 60px); } .bento-card__cat { font-size: 0.6rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.45rem; font-weight: 500; } .bento-card__name { font-family: var(--serif); font-weight: 600; color: var(--offwhite); line-height: 1.18; letter-spacing: -0.01em; } .bento-card:nth-child(1) .bento-card__name { font-size: clamp(1.7rem, 2.8vw, 2.7rem); } .bento-card:nth-child(2) .bento-card__name { font-size: clamp(1.35rem, 2.1vw, 1.95rem); } .bento-card:nth-child(3) .bento-card__name, .bento-card:nth-child(4) .bento-card__name { font-size: clamp(1.05rem, 1.7vw, 1.45rem); } .bento-card__desc { font-size: 0.8rem; font-weight: 300; line-height: 1.68; color: rgba(244,244,244,0.52); max-width: 40ch; max-height: 0; overflow: hidden; transition: max-height .5s var(--ease-expo), margin-top .3s ease; } .bento-card:hover .bento-card__desc { max-height: 90px; margin-top: 0.5rem; } .bento-card__cta { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.63rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); max-height: 0; overflow: hidden; transition: max-height .4s var(--ease-expo) .06s, margin-top .3s ease .06s; } .bento-card:hover .bento-card__cta { max-height: 36px; margin-top: 0.8rem; } .bento-card__cta svg { width: 11px; height: 11px; transition: transform .3s var(--ease-expo); } .bento-card:hover .bento-card__cta svg { transform: translateX(4px); }  .curriculum { background: var(--cream); padding: var(--gap) 0; overflow: hidden; } .curriculum__inner { max-width: 1280px; margin: 0 auto; padding: 0 clamp(1.5rem, 5vw, 5rem); } .curriculum__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 3rem; margin-bottom: 3.5rem; } .curriculum__label { color: var(--gold); } .curriculum__label::before { background: var(--gold); } .curriculum__title { color: var(--charcoal); } .curriculum__title em { color: var(--gold); font-style: italic; } .curriculum__intro { max-width: 360px; font-size: 0.88rem; line-height: 1.8; color: rgba(28,28,28,0.55); padding-top: 0.4rem; flex-shrink: 0; }  .curriculum__tabs { display: flex; border-bottom: 1px solid rgba(28,28,28,0.12); margin-bottom: 0; overflow-x: auto; scrollbar-width: none; } .curriculum__tabs::-webkit-scrollbar { display: none; } .curriculum__tab { flex: 1 0 auto; padding: 1rem 2rem; font-family: var(--sans); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: rgba(28,28,28,0.38); background: transparent; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; transition: color .3s ease, border-color .3s ease; white-space: nowrap; } .curriculum__tab--active, .curriculum__tab:hover { color: var(--charcoal); border-bottom-color: var(--gold); }  .curriculum__panel { display: none; grid-template-columns: 1fr 1fr; min-height: 500px; } .curriculum__panel--active { display: grid; } .curriculum__panel-content { padding: clamp(2.5rem, 5vw, 4.5rem); display: flex; flex-direction: column; justify-content: center; background: var(--navy); } .curriculum__level-number { font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); margin-bottom: 1rem; } .curriculum__level-name { font-family: var(--serif); font-size: clamp(2rem, 3.5vw, 2.8rem); font-weight: 700; line-height: 1.1; color: var(--offwhite); margin-bottom: 0.8rem; } .curriculum__level-ages { font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(249,246,240,0.35); margin-bottom: 1.75rem; padding-bottom: 1.75rem; border-bottom: 1px solid rgba(212,175,55,0.18); } .curriculum__level-desc { font-size: 0.88rem; line-height: 1.78; color: rgba(249,246,240,0.68); margin-bottom: 2rem; max-width: 420px; } .curriculum__features { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 2.5rem; } .curriculum__feature { display: flex; align-items: center; gap: 0.85rem; font-size: 0.8rem; color: rgba(249,246,240,0.58); } .curriculum__feature::before { content: ''; width: 18px; height: 1px; background: var(--gold); flex-shrink: 0; } .curriculum__panel-link { display: inline-flex; align-items: center; gap: 0.55rem; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: var(--gold); transition: gap .3s var(--ease-expo); } .curriculum__panel-link:hover { gap: 0.9rem; }  .curriculum__panel-visual { position: relative; background: var(--navy-mid); display: flex; align-items: center; justify-content: center; overflow: hidden; } .curriculum__panel-visual::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 55% 50%, rgba(212,175,55,0.07) 0%, transparent 65%); pointer-events: none; } .curriculum__panel-visual svg { width: 72%; max-width: 360px; height: auto; position: relative; z-index: 1; } .curriculum__panel-visual-num { position: absolute; bottom: 1.8rem; right: 2.2rem; font-family: var(--serif); font-size: 7rem; font-weight: 900; line-height: 1; color: rgba(212,175,55,0.055); pointer-events: none; user-select: none; z-index: 0; } @media (max-width: 768px) { .curriculum__header { flex-direction: column; gap: 1.5rem; } .curriculum__panel { grid-template-columns: 1fr; } .curriculum__panel-visual { min-height: 260px; } } @media (max-width: 560px) { .curriculum__tab { padding: 0.85rem 1.2rem; font-size: 0.65rem; } }  .testimonials { background: var(--navy-deep); padding: var(--gap) 0; position: relative; overflow: hidden; } .testimonials::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(to right, transparent, rgba(212,175,55,0.22), transparent); } .testimonials__inner { max-width: 1280px; margin: 0 auto; padding: 0 clamp(1.5rem, 5vw, 5rem); } .testimonials__header { text-align: center; margin-bottom: 4rem; display: flex; flex-direction: column; align-items: center; } .testimonials__label { justify-content: center; } .testimonials__title { color: var(--offwhite); font-size: clamp(2rem, 4vw, 3.2rem); } .testimonials__title em { font-style: italic; color: var(--gold); } .testimonials__slider { position: relative; } .testimonials__viewport { overflow: hidden; cursor: grab; user-select: none; touch-action: pan-y; } .testimonials__viewport:active { cursor: grabbing; } .testimonials__track { display: flex; gap: 1.5rem; will-change: transform; } .testimonials__controls { display: flex; align-items: center; gap: 1.5rem; margin-top: 2.5rem; } .testimonials__dots { display: flex; gap: 0.5rem; align-items: center; flex: 1; justify-content: center; } .testimonials__dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(212,175,55,0.3); cursor: pointer; border: none; padding: 0; transition: background .3s ease, transform .3s ease; } .testimonials__dot--active { background: var(--gold); transform: scale(1.5); } .testimonials__arrow { width: 48px; height: 48px; border: 1px solid rgba(212,175,55,0.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--offwhite); cursor: pointer; background: transparent; transition: border-color .3s ease, background .3s ease; flex-shrink: 0; } .testimonials__arrow:hover:not(:disabled) { border-color: var(--gold); background: rgba(212,175,55,0.08); } .testimonials__arrow:disabled { opacity: 0.3; cursor: default; } @media (max-width: 560px) { .testimonials__arrow { display: none; } } .testimonial-card { background: rgba(255,255,255,0.03); border: 1px solid rgba(212,175,55,0.1); padding: 2.5rem; position: relative; transition: border-color .4s ease, background .4s ease, transform .4s var(--ease-expo); } .testimonial-card:hover { border-color: rgba(212,175,55,0.28); background: rgba(255,255,255,0.055); transform: translateY(-4px); } .testimonial-card--featured { background: rgba(212,175,55,0.055); border-color: rgba(212,175,55,0.2); } .testimonial-card__stars { display: flex; gap: 0.25rem; margin-bottom: 1.5rem; } .testimonial-card__star { width: 11px; height: 11px; color: var(--gold); } .testimonial-card__quote-mark { font-family: var(--serif); font-size: 4.5rem; line-height: 0.7; color: var(--gold); opacity: 0.2; display: block; margin-bottom: 0.75rem; user-select: none; } .testimonial-card__text { font-family: var(--serif); font-size: clamp(0.92rem, 1.4vw, 1.05rem); line-height: 1.78; color: rgba(249,246,240,0.78); font-style: italic; margin-bottom: 2rem; } .testimonial-card__author { display: flex; align-items: center; gap: 1rem; padding-top: 1.5rem; border-top: 1px solid rgba(212,175,55,0.1); } .testimonial-card__avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--navy-mid); border: 1px solid rgba(212,175,55,0.22); display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 0.82rem; font-weight: 700; color: var(--gold); flex-shrink: 0; } .testimonial-card__name { font-size: 0.82rem; font-weight: 600; color: var(--offwhite); letter-spacing: 0.04em; } .testimonial-card__role { font-size: 0.7rem; color: rgba(249,246,240,0.38); margin-top: 0.22rem; letter-spacing: 0.05em; }  @media (max-width: 768px) {  .legacy { overflow: visible; }  .legacy__track { width: 100% !important; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none;  padding-right: clamp(1.5rem, 6vw, 6rem); } .legacy__track::-webkit-scrollbar { display: none; }  .legacy-card { width: clamp(260px, 78vw, 340px); scroll-snap-align: start; flex-shrink: 0; }  .legacy__header { flex-direction: column; align-items: flex-start; gap: 1rem; } .legacy__subtitle { text-align: left; max-width: 100%; } }   @media (hover: none), (pointer: coarse) { .cursor, .cursor--ring { display: none !important; } }  .header__burger { position: relative; } .header__burger::after { content: ''; position: absolute; inset: -8px; }  .header__admissions { min-height: 44px; display: inline-flex; align-items: center; }  .btn-ghost { display: inline-flex; align-items: center; min-height: 44px; }  @media (max-width: 640px) { .hero__bottom { flex-direction: column; align-items: flex-start; gap: 1.5rem; } .hero__actions { flex-shrink: 1; flex-wrap: wrap; gap: 1rem 1.5rem; } }  @media (max-width: 560px) { .hero__scroll-cue { display: none; } }  @media (max-width: 768px) { .programs__header { flex-direction: column; align-items: flex-start; gap: 1.25rem; } .programs__intro { max-width: 100%; } }  .legacy-card__link { padding: 0.6rem 0; margin-top: 0.5rem; min-height: 44px; }  .footer__col-link { display: block; padding: 0.45rem 0; }  .menu-overlay__social-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.25rem; }  .curriculum__panel-link { min-height: 44px; padding: 0.5rem 0; }  .curriculum__tab { min-height: 44px; }  @media (max-width: 400px) { .stats__grid { grid-template-columns: 1fr; } }  @media (max-width: 480px) { .manifesto__quote { font-size: clamp(1.3rem, 6vw, 1.8rem); } }  @media (max-width: 480px) { .footer__inner { padding: 3rem 1.5rem; } .footer__cta-heading { font-size: clamp(1.8rem, 8vw, 2.5rem); } }  .footer { background: var(--navy-deep); position: relative; overflow: hidden; }  .footer__bg-word { position: absolute; bottom: -0.18em; left: 50%; transform: translateX(-50%); font-family: var(--serif); font-size: clamp(10rem, 22vw, 22rem); font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(212,175,55,0.04); white-space: nowrap; pointer-events: none; user-select: none; line-height: 1; } .footer__inner { position: relative; z-index: 2; padding: clamp(4rem, 9vh, 8rem) clamp(1.5rem, 6vw, 6rem) 0; border-top: 1px solid var(--gold-dim2); } .footer__cta-block { text-align: center; padding-bottom: clamp(4rem, 8vh, 7rem); border-bottom: 1px solid rgba(244,244,244,0.06); } .footer__cta-label { display: flex; align-items: center; justify-content: center; gap: 1rem; font-size: 0.65rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.5rem; } .footer__cta-label::before, .footer__cta-label::after { content: ''; display: block; width: 30px; height: 1px; background: rgba(212,175,55,0.4); } .footer__cta-heading { font-family: var(--serif); font-size: clamp(2rem, 4.5vw, 4rem); font-weight: 700; letter-spacing: -0.025em; line-height: 1.1; color: var(--offwhite); margin-bottom: 2rem; } .footer__cta-heading em { font-style: italic; color: var(--gold); } .footer__cta-btn { display: inline-flex; align-items: center; gap: 0.8rem; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--navy-deep); background: var(--gold); padding: 1rem 2.4rem; border-radius: 2px; cursor: pointer; transition: background .22s ease, transform .3s var(--ease-expo), box-shadow .3s ease; } .footer__cta-btn:hover { background: var(--gold-light); transform: translateY(-2px); box-shadow: 0 14px 36px rgba(212,175,55,0.25); } .footer__grid { display: grid; grid-template-columns: 1fr auto; gap: clamp(3rem, 6vw, 8rem); padding: clamp(3rem, 6vh, 5rem) 0 clamp(1.5rem, 3vh, 2.5rem); flex-wrap: wrap; } @media (max-width: 640px) { .footer__grid { grid-template-columns: 1fr; } } .footer__brand-logo { font-family: var(--serif); font-size: 1.75rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--offwhite); display: block; margin-bottom: 0.75rem; } .footer__brand-tag { font-size: 0.72rem; letter-spacing: 0.1em; color: rgba(244,244,244,0.3); line-height: 1.65; max-width: 28ch; } .footer__links { display: flex; gap: clamp(2rem, 4vw, 4.5rem); flex-wrap: wrap; } .footer__col-title { font-size: 0.6rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.1rem; } .footer__col-list { list-style: none; display: flex; flex-direction: column; gap: 0.65rem; } .footer__col-link { font-size: 0.8rem; color: rgba(244,244,244,0.38); transition: color .22s ease; } .footer__col-link:hover { color: var(--offwhite); } .footer__bottom { padding: 1.5rem 0 2.5rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; border-top: 1px solid rgba(244,244,244,0.05); } .footer__copy { font-size: 0.68rem; color: rgba(244,244,244,0.18); letter-spacing: 0.07em; } .footer__badge { font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(212,175,55,0.45); border: 1px solid rgba(212,175,55,0.15); padding: 0.28rem 0.7rem; border-radius: 2px; }  .js-hide { opacity: 0; visibility: hidden; }