/* =============================================================================
   Nova Life — page layouts
   ============================================================================= */

/* =========================== HOME ========================================== */

/* ---------- Hero ---------- */
.hero {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
	align-items: center;
	gap: 40px;
	min-height: 100svh;
	padding: calc(var(--header-h) + 60px) var(--gutter) 130px;
	background: var(--ink);
	color: var(--paper);
	overflow: hidden;
}
.hero__comet { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero__comet path { fill: none; stroke: rgba(227, 192, 137, .55); stroke-width: 1.6; stroke-dasharray: 1; stroke-dashoffset: 1; vector-effect: non-scaling-stroke; }
.js .is-ready .hero__comet path { stroke-dashoffset: 0; transition: stroke-dashoffset 2.4s var(--ease-snap) .3s; }
.hero__comet-star { position: absolute; right: 5.8%; top: 11.7%; width: 46px; height: 46px; margin: -23px -23px 0 0; color: var(--gold); pointer-events: none; }
.hero__comet-star .star { width: 100%; height: 100%; animation: twinkle 2.6s ease-in-out infinite; filter: drop-shadow(0 0 14px rgba(227, 192, 137, .7)); }
.js .hero__comet-star { transform: scale(0); transition: transform 1s var(--ease-back) 2.3s; }
.js .is-ready .hero__comet-star { transform: none; }
@keyframes twinkle { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(.72) rotate(30deg); } }

.hero__copy { position: relative; z-index: 2; }
.hero__hi { color: var(--gold-2); font-size: clamp(1.7rem, 2.6vw, 2.4rem); margin-bottom: 10px; }
.hero__title {
	font-family: var(--f-display);
	font-weight: 800;
	font-size: clamp(3.1rem, 8.6vw, 9.6rem);
	line-height: .86;
	letter-spacing: -.05em;
	font-variation-settings: "opsz" 96;
}
.hero__title .line { display: block; overflow: hidden; padding: 0 .06em .07em 0; margin-bottom: -.05em; }
.hero__title .line > span { display: inline-block; }
.js .hero__title .line > span { transform: translateY(110%) rotate(5deg); transform-origin: left bottom; transition: transform 1.2s var(--ease); }
.js .is-ready .hero__title .line > span { transform: none; }
.js .is-ready .hero__title .line:nth-child(2) > span { transition-delay: .1s; }
.js .is-ready .hero__title .line:nth-child(3) > span { transition-delay: .2s; }
.hero__title em { font-family: var(--f-serif); font-weight: 400; color: var(--gold-2); letter-spacing: -.02em; }
.hero__title .outline {
	color: transparent;
	-webkit-text-stroke: 2px var(--paper);
	background: linear-gradient(90deg, var(--tang) 0 50%, transparent 50%) 100% 0 / 200% 100% no-repeat;
	-webkit-background-clip: text;
	background-clip: text;
	transition: background-position 1.2s var(--ease) !important;
}
.hero__title .outline:hover { background-position: 0 0; }
.hero__motto { max-width: 30ch; margin-top: 30px; font-family: var(--f-serif); font-style: italic; font-size: clamp(1.3rem, 1.9vw, 1.75rem); line-height: 1.25; color: rgba(246, 239, 227, .86); }
.hero__btns { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 30px; margin-top: 36px; }
.hero__btns .link-u { color: var(--paper); }
.js .hero [data-hero-in] { transition: opacity 1s var(--ease), transform 1.2s var(--ease); }
.js .hero:not(.is-ready) [data-hero-in] { opacity: 0; transform: translateY(26px); }
.js .is-ready .hero__motto { transition-delay: .45s; }
.js .is-ready .hero__btns { transition-delay: .6s; }

/* The photo deck. */
.hero__visual { position: relative; z-index: 2; justify-self: center; }
.hero__deck { position: relative; z-index: 2; width: min(400px, 31vw); aspect-ratio: 4 / 5.2; cursor: pointer; }
.deck__card {
	position: absolute;
	inset: 0;
	padding: 10px 10px 46px;
	border-radius: 8px;
	background: var(--white);
	box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .75);
	transform: rotate(var(--rot, 0deg)) translate(var(--tx, 0px), var(--ty, 0px));
	transition: transform .9s var(--ease-back);
	translate: var(--fx, 0px) var(--fy, 0px);
	rotate: var(--fr, 0deg);
	z-index: calc(10 - var(--i));
	will-change: transform;
}
.deck__card img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; }
.deck__card figcaption { position: absolute; left: 14px; right: 14px; bottom: 9px; font-family: var(--f-hand); font-size: 1.45rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.deck__tape {
	position: absolute;
	top: -18px;
	left: 50%;
	z-index: 20;
	width: 120px;
	height: 34px;
	margin-left: -60px;
	background: rgba(227, 192, 137, .75);
	transform: rotate(-4deg);
	box-shadow: 0 3px 6px rgba(0, 0, 0, .15);
	pointer-events: none;
}
.js .hero__deck { transition: transform 1.4s var(--ease-back) .3s, opacity .8s .3s; }
.js .hero:not(.is-ready) .hero__deck { transform: translateY(120px) rotate(14deg); opacity: 0; }

/* Spinning "Now hiring" sticker. */
.sticker {
	position: absolute;
	z-index: 5;
	left: -76px;
	top: 34%;
	width: clamp(120px, 11vw, 158px);
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--tang);
	color: var(--ink);
	display: grid;
	place-items: center;
	box-shadow: 0 16px 30px -12px rgba(0, 0, 0, .5);
	transition: transform .6s var(--ease-back);
}
.sticker svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 16s linear infinite; }
.sticker text { font-family: var(--f-display); font-weight: 800; font-size: 15.5px; letter-spacing: .12em; fill: currentColor; }
.sticker__star { width: 34%; height: 34%; transition: transform .8s var(--ease-back); }
.sticker:hover { transform: scale(1.1) rotate(-10deg); }
.sticker:hover .sticker__star { transform: rotate(180deg) scale(1.2); }
.sticker:hover svg { animation-duration: 4s; }
.js .sticker { transition: transform .6s var(--ease-back), scale 1s var(--ease-back) 1.1s; }
.js .hero:not(.is-ready) .sticker { scale: 0; }

.hero__scroll { position: absolute; left: var(--gutter); bottom: 90px; display: flex; align-items: center; gap: 12px; font-size: .74rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: rgba(246, 239, 227, .6); }
.hero__scroll i { position: relative; display: block; width: 64px; height: 1.5px; background: rgba(246, 239, 227, .2); overflow: hidden; }
.hero__scroll i::after { content: ""; position: absolute; inset: 0; background: var(--gold-2); animation: scrollline 2s var(--ease) infinite; }
@keyframes scrollline { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* ---------- Ticker ---------- */
.ticker { position: relative; z-index: 4; margin-top: -58px; padding: 20px 0; background: var(--tang); color: var(--ink); transform: rotate(-2deg) scale(1.03); overflow: hidden; box-shadow: 0 20px 40px -24px rgba(10, 26, 47, .6); }
.ticker__track { display: flex; width: max-content; will-change: transform; }
.ticker ul { display: flex; flex: none; }
.ticker li { display: flex; align-items: center; gap: 30px; padding-right: 30px; font-family: var(--f-display); font-weight: 750; font-size: clamp(1.3rem, 2.5vw, 2.2rem); letter-spacing: -.02em; white-space: nowrap; }
.ticker li:nth-child(even) { font-family: var(--f-serif); font-style: italic; font-weight: 400; }
.ticker .star { width: .75em; height: .75em; animation: spin 5s linear infinite; }

/* ---------- About ---------- */
.about { padding: clamp(120px, 13vw, 200px) 0 clamp(80px, 10vw, 150px); }
.about__grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 40px 28px;
	align-items: start;
}
.about__label { grid-column: 1 / 4; padding-top: 12px; }
.about__lead {
	grid-column: 4 / 13;
	font-family: var(--f-display);
	font-weight: 650;
	font-size: clamp(1.8rem, 3.6vw, 3.5rem);
	line-height: 1.07;
	letter-spacing: -.03em;
	text-wrap: pretty;
}
.about__lead em { font-family: var(--f-serif); font-weight: 400; color: var(--gold-deep); }
.about__photo { grid-column: 1 / 7; grid-row: 2 / 4; margin-top: 40px; aspect-ratio: 4 / 4.6; border-radius: 28px; overflow: hidden; }
.about__photo img { width: 100%; height: 115%; object-fit: cover; }
.about__body { grid-column: 8 / 12; margin-top: 60px; }
.about__body p { font-size: 1.14rem; margin-bottom: 30px; }
.about__photo--small {
	grid-column: 9 / 12;
	grid-row: 3;
	aspect-ratio: auto;
	margin-top: 0;
	padding: 10px 10px 12px;
	border-radius: 8px;
	background: var(--white);
	box-shadow: 0 30px 50px -30px rgba(10, 26, 47, .55);
	transform: rotate(4deg);
	overflow: visible;
}
.about__photo--small img { height: auto; aspect-ratio: 1; border-radius: 4px; }
.about__photo--small figcaption { position: absolute; left: -130px; bottom: 30px; color: var(--tang); }
.js .about__photo--small[data-reveal]:not(.is-in) { transform: translateY(80px) rotate(-10deg); }
.js .about__photo--small.is-in { transform: rotate(4deg); }

.mission {
	position: relative;
	margin-top: clamp(80px, 10vw, 150px);
	padding: clamp(40px, 6vw, 90px);
	border-radius: 40px;
	background: var(--ink);
	color: var(--paper);
	transform: rotate(-1.2deg);
}
.js .mission.is-in { transform: rotate(-1.2deg); }
.mission .tag { color: var(--gold-2); }
.mission > p:not(.tag) { max-width: 24ch; font-family: var(--f-serif); font-size: clamp(2rem, 4.6vw, 4.4rem); line-height: 1.02; letter-spacing: -.015em; }
.mission > p em { color: var(--gold-2); }
.mission__star { position: absolute; right: 6%; top: 50%; width: clamp(90px, 14vw, 200px); height: auto; margin-top: calc(clamp(90px, 14vw, 200px) / -2); color: var(--gold); animation: spin 22s linear infinite; }

/* ---------- Values: horizontal scroll ---------- */
.values { position: relative; overflow: hidden; background: var(--paper); }
.values__track { display: flex; width: max-content; }
.values__intro, .value { flex: none; height: 100vh; min-height: 620px; }
.values__intro { display: flex; flex-direction: column; justify-content: center; width: 52vw; padding: 0 var(--gutter); }
.values__intro .h-xl { max-width: 10ch; }
.values__hint { margin-top: 30px; color: var(--tang); }
.value {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, .8fr);
	grid-template-rows: auto 1fr auto;
	gap: 20px 50px;
	width: max(74vw, 620px);
	padding: calc(var(--header-h) + 40px) 5vw 70px;
	overflow: hidden;
}
.value--paper { background: var(--paper-2); }
.value--gold { background: var(--gold); }
.value--tang { background: var(--tang); }
.value--sky { background: var(--ink); color: var(--paper); }
.value__num { grid-column: 1; font-family: var(--f-display); font-weight: 800; font-size: clamp(7rem, 18vw, 17rem); line-height: .8; letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 2px currentColor; opacity: .5; }
.value--sky .value__num { -webkit-text-stroke-color: var(--gold-2); opacity: .8; }
.value__title { grid-column: 1; align-self: end; font-family: var(--f-display); font-weight: 800; font-size: clamp(2.4rem, 4.6vw, 4.8rem); line-height: .92; letter-spacing: -.04em; max-width: 11ch; }
.value__text { grid-column: 1; font-size: 1.16rem; max-width: 40ch; }
.value__img { grid-column: 2; grid-row: 1 / 4; align-self: center; aspect-ratio: 4 / 5; border-radius: 26px; overflow: hidden; transform: rotate(3deg); box-shadow: 0 40px 60px -40px rgba(10, 26, 47, .7); }
.value:nth-child(odd) .value__img { transform: rotate(-3deg); }
.value__img img { width: 100%; height: 100%; object-fit: cover; }
.value__star { position: absolute; right: 3vw; top: calc(var(--header-h) + 20px); width: 54px; height: 54px; color: var(--ink); animation: spin 12s linear infinite; }
.value--sky .value__star { color: var(--gold); }

/* ---------- Scoreboard ---------- */
.board { padding: clamp(110px, 12vw, 180px) 0; background: var(--ink); color: var(--paper); }
.board .tag { color: var(--gold-2); }
.board .tag::after { content: "Live"; display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; padding: 4px 10px 4px 22px; border-radius: 999px; background: rgba(243, 155, 46, .15); color: var(--tang); font-size: .68rem; background-image: radial-gradient(circle at 11px 50%, var(--tang) 3.5px, transparent 4.5px); animation: live 1.4s steps(2) infinite; }
@keyframes live { 50% { background-image: radial-gradient(circle at 11px 50%, transparent 3.5px, transparent 4.5px); } }
.board .h-xl em { color: var(--gold-2); }
.board__head { margin-bottom: 60px; }
.board__rows { counter-reset: r; }
.board__row {
	position: relative;
	display: grid;
	grid-template-columns: 80px minmax(0, 1fr) auto;
	align-items: center;
	gap: 26px;
	padding: 26px 16px;
	border-top: 1.5px dashed rgba(246, 239, 227, .2);
	transition: background .4s;
}
.board__row:last-child { border-bottom: 1.5px dashed rgba(246, 239, 227, .2); }
.board__row:hover { background: rgba(227, 192, 137, .08); }
.board__rank { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 14px; background: var(--ink-2); font-weight: 800; color: var(--gold-2); transition: transform .5s var(--ease-back), background .3s, color .3s; }
.board__row:hover .board__rank { transform: rotate(-10deg) scale(1.08); background: var(--tang); color: var(--ink); }
.board__what { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.3rem, 2.4vw, 2.1rem); line-height: 1.05; letter-spacing: -.02em; }
.board__what small { display: block; margin-top: 6px; font-family: var(--f-body); font-weight: 500; font-size: .95rem; letter-spacing: 0; color: rgba(246, 239, 227, .6); }
.board__val { font-family: var(--f-display); font-weight: 800; font-size: clamp(3rem, 7.2vw, 6.6rem); line-height: .9; letter-spacing: -.05em; color: var(--gold-2); font-variant-numeric: tabular-nums; }
.board__row:nth-child(4) .board__val, .board__row:nth-child(5) .board__val { color: var(--tang); }

/* ---------- Perks: stacked sticky cards ---------- */
.perks { padding: clamp(110px, 12vw, 180px) 0 clamp(60px, 8vw, 110px); }
.perks__head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 20px 60px; align-items: end; margin-bottom: 70px; }
.perks__head .tag { grid-column: 1 / -1; margin: 0; }
.perks__head p { font-size: 1.1rem; }
.perks__stack { display: grid; gap: 7vh; padding-bottom: 6vh; }
.perk {
	position: sticky;
	top: calc(100px + var(--i) * 26px);
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
	gap: clamp(30px, 4vw, 70px);
	min-height: min(76vh, 720px);
	padding: clamp(28px, 4.5vw, 64px);
	border-radius: 40px;
	transform-origin: center top;
	box-shadow: 0 -20px 50px -40px rgba(10, 26, 47, .5);
	will-change: transform;
}
.perk--1 { background: var(--gold); }
.perk--2 { background: var(--ink); color: var(--paper); }
.perk--3 { background: var(--blush); }
.perk__kicker { display: flex; align-items: center; gap: 12px; font-weight: 800; font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; }
.perk__kicker span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--ink); color: var(--gold-2); letter-spacing: 0; }
.perk--2 .perk__kicker span { background: var(--tang); color: var(--ink); }
.perk__title { margin: 22px 0 34px; font-family: var(--f-serif); font-style: italic; font-weight: 400; font-size: clamp(2.2rem, 4.4vw, 4.2rem); line-height: 1; letter-spacing: -.015em; max-width: 16ch; }
.perk__list { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 28px; }
.perk__list li { display: flex; gap: 12px; font-weight: 550; font-size: 1.05rem; line-height: 1.4; }
.perk__list .star { width: 18px; height: 18px; margin-top: 3px; color: var(--ink); }
.perk--2 .perk__list .star { color: var(--gold); }
.perk__img { border-radius: 28px; overflow: hidden; transform: rotate(2.5deg); box-shadow: 0 30px 50px -34px rgba(10, 26, 47, .8); }
.perk:nth-child(even) .perk__img { transform: rotate(-2.5deg); }
.perk__img img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Glimpses strip ---------- */
.glimpses { padding: clamp(80px, 10vw, 140px) 0 clamp(60px, 8vw, 100px); overflow: hidden; }
.glimpses__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 30px; }
.glimpses__head .h-xl { max-width: 13ch; }
.glimpses__hint { display: block; color: var(--tang); }

/* ---------- Floors ---------- */
.floors { position: relative; padding: clamp(90px, 10vw, 150px) 0; background: var(--paper-2); }
.floors .ticket { --notch: var(--paper-2); }
.floors__head { margin-bottom: 50px; }
.floors__list { border-top: 2px solid var(--ink); }
.floors__list a {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto 70px;
	align-items: center;
	gap: 30px;
	padding: 22px 6px;
	border-bottom: 2px solid var(--ink);
	isolation: isolate;
	overflow: hidden;
}
.floors__list a::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink); transform: translateY(101%); transition: transform .6s var(--ease); }
.floors__list a:hover { color: var(--paper); }
.floors__list a:hover::before { transform: none; }
.floors__name { font-family: var(--f-display); font-weight: 800; font-size: clamp(2.6rem, 7.6vw, 7.4rem); line-height: .95; letter-spacing: -.05em; transition: transform .6s var(--ease), letter-spacing .6s var(--ease); }
.floors__list a:hover .floors__name { transform: translateX(26px); font-family: var(--f-serif); font-style: italic; font-weight: 400; letter-spacing: -.02em; color: var(--gold-2); }
.floors__region { font-weight: 700; font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; }
.floors__count { font-family: var(--f-hand); font-size: 1.5rem; color: var(--tang); }
.floors__go { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; border: 2px solid currentColor; transition: transform .6s var(--ease-back), background .3s, color .3s; }
.floors__go .icon { width: 26px; height: 26px; }
.floors__list a:hover .floors__go { background: var(--tang); border-color: var(--tang); color: var(--ink); transform: rotate(45deg); }
.follow-img {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 50;
	width: 260px;
	aspect-ratio: 4 / 5;
	margin: -160px 0 0 -130px;
	border-radius: 130px 130px 20px 20px;
	overflow: hidden;
	pointer-events: none;
	opacity: 0;
	scale: .4;
	transition: opacity .35s, scale .6s var(--ease-back);
	box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7);
}
.follow-img.is-on { opacity: 1; scale: 1; }
.follow-img img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Finale ---------- */
.finale { padding: 12vh var(--gutter) 0; background: var(--paper-2); }
.finale__panel {
	position: relative;
	display: grid;
	place-items: center;
	align-content: center;
	gap: 22px;
	min-height: 94vh;
	padding: 100px var(--gutter);
	border-radius: 48px 48px 0 0;
	background: var(--ink);
	color: var(--paper);
	text-align: center;
	overflow: hidden;
	margin-inline: calc(var(--gutter) * -1);
}
.finale .scribble { color: var(--gold-2); }
.finale__title { max-width: 15ch; font-family: var(--f-display); font-weight: 800; font-size: clamp(2.9rem, 8vw, 8.4rem); line-height: .88; letter-spacing: -.05em; text-wrap: balance; }
.finale__title em { color: var(--gold-2); }
.finale__sub { max-width: 46ch; font-size: 1.14rem; color: rgba(246, 239, 227, .75); }
.finale__btns { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 20px 30px; margin-top: 10px; }
.finale__s { position: absolute; color: var(--gold); animation: twinkle 3s ease-in-out infinite; }
.finale__s--1 { width: 60px; height: 60px; left: 10%; top: 18%; }
.finale__s--2 { width: 34px; height: 34px; right: 14%; top: 26%; color: var(--tang); animation-delay: -1s; }
.finale__s--3 { width: 90px; height: 90px; right: 9%; bottom: 14%; animation-delay: -2s; }

/* =========================== GALLERY ======================================= */

.gallery { padding: clamp(120px, 12vw, 180px) 0 clamp(90px, 10vw, 150px); }
.gallery .chips { margin-bottom: 56px; }
.gallery__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 56px 30px; }
@media (min-width: 900px) {
	.gallery__grid .ticket:nth-child(3n + 2) { transform: translateY(60px); }
	.gallery__grid .ticket:nth-child(3n + 2):hover { transform: translateY(50px) rotate(1.6deg); }
	.gallery__grid { padding-bottom: 60px; }
}
.gallery__grid .ticket.is-hidden { display: none; }

/* ---------- Single glimpse ---------- */
.ev-hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; color: var(--paper); overflow: hidden; background: var(--ink); }
.ev-hero__bg { position: absolute; inset: 0; }
.ev-hero__bg img { width: 100%; height: 118%; object-fit: cover; }
.ev-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 26, 47, .95) 5%, rgba(10, 26, 47, .35) 55%, rgba(10, 26, 47, .55)); }
.ev-hero__doors { position: absolute; inset: 0; z-index: 3; display: flex; pointer-events: none; }
.ev-hero__doors i { flex: 1; background: var(--ink); transition: transform 1.5s var(--ease-snap) .15s; }
.ev-hero__doors i:last-child { background: var(--ink-2); }
.is-ready .ev-hero__doors i:first-child { transform: translateX(-101%); }
.is-ready .ev-hero__doors i:last-child { transform: translateX(101%); }
html:not(.js) .ev-hero__doors { display: none; }
.ev-hero__copy { position: relative; z-index: 2; width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter) clamp(50px, 7vw, 100px); }
.ev-hero__back { display: flex; width: fit-content; align-items: center; gap: 6px; margin-bottom: 30px; font-weight: 600; color: var(--gold-2); }
.ev-hero__back .icon { width: 18px; height: 18px; transition: transform .4s var(--ease); }
.ev-hero__back:hover .icon { transform: translateX(-5px); }
.ev-hero__type { display: inline-block; margin-bottom: 20px; padding: 7px 14px; border-radius: 999px; background: var(--tang); color: var(--ink); font-size: .76rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; transform: rotate(-2deg); }
.ev-hero__title { max-width: 14ch; font-family: var(--f-display); font-weight: 800; font-size: clamp(3rem, 8.6vw, 9rem); line-height: .86; letter-spacing: -.05em; text-wrap: balance; }
.ev-hero__meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.ev-hero__meta li { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; background: rgba(246, 239, 227, .12); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-weight: 600; font-size: .95rem; }
.ev-hero__meta .icon, .ev-hero__meta .star { width: 17px; height: 17px; color: var(--gold-2); }

.story { padding: clamp(90px, 10vw, 150px) 0 clamp(50px, 6vw, 90px); }
.story__grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(40px, 7vw, 120px); align-items: start; }
.story__side { position: sticky; top: 120px; }
.story__quote { font-family: var(--f-serif); font-style: italic; font-size: clamp(2rem, 3.8vw, 3.4rem); line-height: 1.04; letter-spacing: -.01em; color: var(--ink); }
.story__quote::first-letter { color: var(--tang); }
.story__note { margin-top: 30px; color: var(--tang); }
.story__body { font-size: 1.16rem; }
.story__body > p:first-child::first-letter { float: left; margin: .05em .12em 0 0; font-family: var(--f-serif); font-size: 5.4em; line-height: .78; color: var(--gold-deep); }

.wall { padding: clamp(40px, 6vw, 80px) 0 clamp(100px, 11vw, 160px); }
.wall__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 30px; margin-bottom: 40px; }
.wall__head .tag { margin: 0; }
.wall__head .scribble { color: var(--tang); }
.wall__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 26px; }
.wall__item {
	grid-column: span 4;
	position: relative;
	display: block;
	padding: 9px;
	border-radius: 10px;
	background: var(--white);
	box-shadow: 0 26px 50px -34px rgba(10, 26, 47, .7);
	transform: rotate(var(--r, 0deg));
	transition: transform .7s var(--ease-back), box-shadow .5s, opacity .9s var(--ease) !important;
}
.wall__item img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 5px; }
.wall__item:hover { transform: rotate(0) scale(1.03); z-index: 2; box-shadow: 0 40px 70px -34px rgba(10, 26, 47, .8); }
.wall__grid--4 .wall__item:nth-child(1) { grid-column: 1 / 8; grid-row: span 2; }
.wall__grid--4 .wall__item:nth-child(1) img { aspect-ratio: auto; height: 100%; }
.wall__grid--4 .wall__item:nth-child(2), .wall__grid--4 .wall__item:nth-child(3) { grid-column: 8 / 13; }
.wall__grid--4 .wall__item:nth-child(4) { grid-column: 3 / 11; }
.wall__grid--4 .wall__item:nth-child(4) img { aspect-ratio: 16 / 8; }

.next-ev {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 10px;
	min-height: 78vh;
	padding: 80px var(--gutter);
	background: var(--ink);
	color: var(--paper);
	text-align: center;
	overflow: hidden;
	clip-path: inset(5% 4% 5% 4% round 44px);
	transition: clip-path 1s var(--ease);
}
.next-ev:hover { clip-path: inset(0 0 0 0 round 0); }
.next-ev__img { position: absolute; inset: 0; }
.next-ev__img img { width: 100%; height: 100%; object-fit: cover; opacity: .4; transform: scale(1.12); transition: transform 1.6s var(--ease), opacity .8s; }
.next-ev:hover .next-ev__img img { opacity: .6; transform: scale(1); }
.next-ev__label, .next-ev__title, .next-ev__arrow { position: relative; }
.next-ev__label { font-family: var(--f-hand); font-size: 1.9rem; color: var(--gold-2); transform: rotate(-3deg); }
.next-ev__title { max-width: 14ch; font-family: var(--f-display); font-weight: 800; font-size: clamp(2.8rem, 7.6vw, 7.8rem); line-height: .88; letter-spacing: -.05em; }
.next-ev__arrow { display: grid; place-items: center; width: 84px; height: 84px; margin-top: 18px; border-radius: 50%; background: var(--tang); color: var(--ink); transition: transform .7s var(--ease-back); }
.next-ev__arrow .icon { width: 32px; height: 32px; }
.next-ev:hover .next-ev__arrow { transform: rotate(-45deg) scale(1.1); }

/* =========================== CAREERS ======================================= */

.role { padding: clamp(120px, 12vw, 180px) 0 clamp(90px, 10vw, 140px); }
.role__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr); gap: clamp(40px, 6vw, 100px); align-items: start; }
.role__body { max-width: 70ch; }
.other-floors { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 40px; }
.other-floors .scribble { margin-right: 10px; color: var(--tang); }

/* =========================== TEAM ========================================== */

.quote-band { padding: clamp(130px, 13vw, 200px) 0 clamp(60px, 7vw, 100px); }
.quote-band blockquote { max-width: 1100px; }
.quote-band__text { font-family: var(--f-serif); font-style: italic; font-size: clamp(2rem, 4.4vw, 4.2rem); line-height: 1.06; letter-spacing: -.015em; }
.quote-band cite { display: block; margin-top: 24px; font-family: var(--f-hand); font-style: normal; font-size: 1.7rem; color: var(--tang); }
.team { padding: 0 0 clamp(100px, 11vw, 160px); }
.team__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 120px); align-items: start; }
.team__intro { max-width: 58ch; }
.team__cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 40px; }
.tcard { width: min(100%, 380px); perspective: 900px; transform: rotate(var(--r, 0deg)); }
.js .tcard.is-in { transform: rotate(var(--r, 0deg)); }
.tcard__inner {
	position: relative;
	padding: 16px 16px 28px;
	border-radius: 28px;
	background: var(--ink);
	color: var(--paper);
	overflow: hidden;
	transform-style: preserve-3d;
	transition: transform .5s var(--ease);
	box-shadow: 0 40px 70px -40px rgba(10, 26, 47, .8);
}
.tcard__img { aspect-ratio: 4 / 5; border-radius: 18px; overflow: hidden; margin-bottom: 20px; }
.tcard__img img { width: 100%; height: 100%; object-fit: cover; }
.tcard__role { display: inline-block; margin: 0 8px 8px; padding: 6px 12px; border-radius: 999px; background: var(--tang); color: var(--ink); font-weight: 800; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; }
.tcard__name { margin: 0 8px; font-family: var(--f-display); font-weight: 800; font-size: 2.2rem; line-height: 1; letter-spacing: -.035em; }
.tcard__bio { margin: 12px 8px 0; font-size: .98rem; color: rgba(246, 239, 227, .8); }
.tcard__star { position: absolute; right: 22px; bottom: 26px; width: 40px; height: 40px; color: var(--gold); animation: spin 10s linear infinite; }
.tcard__shine {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .22) 45%, rgba(227, 192, 137, .28) 52%, transparent 66%);
	background-size: 250% 250%;
	background-position: var(--mx, 100%) var(--my, 100%);
	mix-blend-mode: screen;
	opacity: 0;
	transition: opacity .4s;
}
.tcard:hover .tcard__shine { opacity: 1; }

/* =========================== CONTACT ======================================= */

.dial { padding: clamp(120px, 12vw, 180px) 0 clamp(60px, 8vw, 110px); }
.dial__keys { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 3vw, 40px); }
.key {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	aspect-ratio: 1;
	max-width: 360px;
	width: 100%;
	justify-self: center;
	border-radius: 50%;
	border: 2px solid var(--ink);
	text-align: center;
	box-shadow: 0 12px 0 var(--ink);
	transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .3s;
}
.key.is-in, .key { transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .3s, opacity .9s var(--ease); }
.key:hover { transform: translateY(6px); box-shadow: 0 6px 0 var(--ink); }
.key:active { transform: translateY(12px); box-shadow: 0 0 0 var(--ink); }
.key--call { background: var(--gold); }
.key--mail { background: var(--white); }
.key--wa { background: var(--tang); }
.key__icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--ink); color: var(--paper); margin-bottom: 6px; }
.key__icon .icon { width: 28px; height: 28px; }
.key__label { font-family: var(--f-display); font-weight: 800; font-size: clamp(1.8rem, 3vw, 2.8rem); line-height: 1; letter-spacing: -.035em; }
.key__value { font-weight: 600; font-size: clamp(.85rem, 1.1vw, 1rem); padding: 0 12%; word-break: break-word; }

.offices { padding: clamp(60px, 7vw, 100px) 0 clamp(100px, 11vw, 160px); }
.offices__head { margin-bottom: 44px; }
.offices__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.office {
	display: grid;
	grid-template-columns: 200px minmax(0, 1fr);
	border-radius: 28px;
	background: var(--white);
	overflow: hidden;
	box-shadow: 0 30px 50px -44px rgba(10, 26, 47, .6);
	transition: transform .6s var(--ease-back) !important;
}
.office:hover { transform: translateY(-6px) rotate(-.6deg); }
.office__img img { width: 100%; height: 100%; object-fit: cover; }
.office__body { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 26px 28px; }
.office__region { font-weight: 800; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-deep); }
.office__name { font-family: var(--f-display); font-weight: 800; font-size: 2rem; line-height: 1; letter-spacing: -.035em; margin-bottom: 6px; }
.office__line { display: flex; gap: 10px; font-size: .98rem; line-height: 1.4; }
.office__line .icon { flex: none; width: 19px; height: 19px; margin-top: 1px; color: var(--gold-deep); }
.office__line:hover span { text-decoration: underline; }
.office .link-u { margin-top: 8px; }
.apply--contact { background: var(--paper-2); }

/* =========================== 404 =========================================== */

.lost { position: relative; display: grid; place-items: center; align-content: center; gap: 20px; min-height: 100svh; padding: 140px var(--gutter) 80px; background: var(--ink); color: var(--paper); text-align: center; overflow: hidden; }
.lost__code { display: flex; align-items: center; font-family: var(--f-display); font-weight: 800; font-size: clamp(8rem, 30vw, 22rem); line-height: .8; letter-spacing: -.06em; }
.lost__star { width: .7em; height: .7em; margin: 0 .02em; color: var(--gold); animation: spin 5s linear infinite; }
.lost__title { font-family: var(--f-display); font-weight: 800; font-size: clamp(2.4rem, 6vw, 5rem); line-height: .95; letter-spacing: -.04em; }
.lost__title em { color: var(--gold-2); }
.lost__text { max-width: 44ch; color: rgba(246, 239, 227, .75); font-size: 1.1rem; }
.lost__btns { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 20px 30px; margin-top: 16px; }

/* =========================== RESPONSIVE ==================================== */

@media (max-width: 1080px) {
	.hero { grid-template-columns: 1fr; padding-bottom: 150px; }
	.hero__deck { width: min(360px, 70vw); }
	.hero__visual { margin-top: 20px; }
	.hero__scroll { display: none; }
	.about__label, .about__lead, .about__body { grid-column: 1 / -1; }
	.about__photo { grid-column: 1 / 8; grid-row: auto; }
	.about__photo--small { grid-column: 8 / 13; grid-row: auto; align-self: end; }
	.about__body { margin-top: 0; }
	.about__photo--small figcaption { left: auto; right: 0; bottom: -40px; }
	.perks__head, .story__grid, .team__grid, .role__grid { grid-template-columns: 1fr; }
	.story__side { position: static; }
	.perk { grid-template-columns: 1fr; }
	.perk__img { max-height: 320px; }
	.offices__grid { grid-template-columns: 1fr; }
}
/* Horizontal scroll only where there's room for it; stacked below. */
@media (max-width: 900px) {
	.values__track { flex-direction: column; width: 100%; }
	.values__intro, .value { width: 100%; height: auto; min-height: 0; }
	.values__intro { padding: 100px var(--gutter) 50px; }
	.value { grid-template-columns: 1fr; padding: 60px var(--gutter); }
	.value__img { grid-column: 1; grid-row: auto; max-width: 420px; }
	.value__num { font-size: 7rem; }
	.value__star { top: 30px; }
}
@media (max-width: 640px) {
	.hero { padding-top: calc(var(--header-h) + 40px); gap: 20px; }
	.hero__title { font-size: clamp(2.7rem, 14vw, 4.4rem); }
	.hero__title .outline { -webkit-text-stroke-width: 1.5px; }
	.sticker { left: -30px; top: auto; bottom: -30px; width: 104px; }
	.ticker { margin-top: -40px; padding: 14px 0; }
	.about__photo, .about__photo--small { grid-column: 1 / -1; }
	.about__photo--small { width: 70%; justify-self: end; }
	.mission { border-radius: 28px; }
	.mission__star { display: none; }
	.board__row { grid-template-columns: 44px minmax(0, 1fr); gap: 8px 16px; padding: 22px 4px; }
	.board__rank { width: 40px; height: 40px; border-radius: 10px; font-size: .85rem; }
	.board__val { grid-column: 2; }
	.perk { top: calc(80px + var(--i) * 14px); border-radius: 28px; }
	.perk__list { grid-template-columns: 1fr; }
	.floors__list a { grid-template-columns: minmax(0, 1fr) 52px; gap: 6px 14px; }
	.floors__region, .floors__count { grid-column: 1; }
	.floors__go { grid-column: 2; grid-row: 1 / 4; width: 52px; height: 52px; }
	.follow-img { display: none; }
	.finale__panel { border-radius: 30px 30px 0 0; min-height: 80vh; }
	.dial__keys { grid-template-columns: 1fr; }
	.key { max-width: 260px; }
	.office { grid-template-columns: 1fr; }
	.office__img { aspect-ratio: 16 / 9; }
	.wall__grid { grid-template-columns: 1fr 1fr; gap: 14px; }
	.wall__item, .wall__grid--4 .wall__item:nth-child(n) { grid-column: span 1; grid-row: auto; }
	.wall__grid--4 .wall__item:nth-child(1), .wall__grid--4 .wall__item:nth-child(4) { grid-column: 1 / -1; }
	.wall__grid--4 .wall__item img { aspect-ratio: 4 / 3 !important; }
	.next-ev { clip-path: none; min-height: 60vh; }
	.ev-hero__title { font-size: clamp(2.6rem, 13vw, 4.4rem); }
}