body::before {
content: "";
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
background:
radial-gradient(ellipse 70% 50% at 18% 12%, rgba(74, 32, 24, .20), transparent 62%),
radial-gradient(ellipse 60% 55% at 84% 78%, rgba(28, 32, 41, .55), transparent 66%),
var(--canvas);
animation: vault-breathe 96s var(--ease-soft) -18s infinite;
}
@keyframes vault-breathe {
0%, 100% { transform: scale(1) translate3d(0, 0, 0); opacity: 1; }
50%      { transform: scale(1.06) translate3d(0, -1.2%, 0); opacity: .88; }
}
.section {
position: relative;
padding: clamp(64px, 7.6vw, 104px) 0;
}
.section__head {
display: block;
margin-bottom: clamp(34px, 5vw, 64px);
}
.section__head--row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
}
.eyebrow {
display: inline-block;
margin-bottom: 14px;
font-family: var(--font-mono);
font-size: .78rem;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--gold);
}
.section__title {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(1.9rem, 4.2vw, 3.3rem);
line-height: 1.06;
letter-spacing: -.02em;
text-transform: none;
color: var(--text-primary);
max-width: 20ch;
margin: 0;
}
.section__link {
display: inline-flex;
align-items: center;
gap: .5rem;
font-family: var(--font-mono);
font-weight: 400;
font-size: .86rem;
text-transform: none;
letter-spacing: .02em;
border-bottom: 1px solid var(--border-int);
padding-bottom: 3px;
color: var(--text-secondary);
transition: color .3s var(--ease), border-color .3s var(--ease);
}
.section__link:hover { border-color: var(--accent); }
.section__link:hover { color: var(--text-primary); }
.section__link .icon { width: 18px; transition: transform .35s var(--ease); }
.section__link:hover .icon { transform: translateX(4px); }
.reveal {
opacity: 0;
transform: translateY(20px);
transition:
opacity .8s var(--ease-soft) var(--d, 0ms),
transform .8s var(--ease-soft) var(--d, 0ms);
}
.reveal.in,
.reveal.is-visible { opacity: 1; transform: none; }
.reveal.in.done,
.reveal.is-visible.done { transition-delay: 0s !important; }
.hero-static__scrim {
position: absolute;
inset: 0;
background: linear-gradient(180deg,
rgba(8, 10, 16, .74) 0%,
rgba(8, 10, 16, .40) 38%,
rgba(8, 10, 16, .88) 100%);
}
.hero-static__inner {
position: relative;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding-bottom: clamp(38px, 9vw, 72px);
text-shadow: var(--tshadow);
}
.hero-static__title {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(2.1rem, 8.5vw, 3.4rem);
line-height: 1.04;
letter-spacing: -.02em;
color: var(--text-primary);
max-width: 14ch;
margin: 0 0 .7rem;
}
.hero-static__sub {
font-size: 1.02rem;
color: var(--text-primary);
max-width: 34ch;
margin: 0 0 1.5rem;
}
.hero-static__inner .btn { align-self: flex-start; text-shadow: none; }
.hero-static__chip {
margin: 1.1rem 0 0;
font-family: var(--font-mono);
font-size: .74rem;
letter-spacing: .03em;
color: var(--text-secondary);
}
.paths__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: clamp(16px, 2.4vw, 28px);
}
.door {
position: relative;
display: block;
min-height: clamp(340px, 42vw, 520px);
padding: clamp(22px, 3vw, 34px);
border: 1px solid var(--hairline);
border-radius: var(--radius-lg);
overflow: hidden;
isolation: isolate;
background: var(--panel);
box-shadow: var(--lift);
transition: border-color .45s var(--ease), transform .55s var(--ease-soft);
}
.door__media {
position: absolute;
inset: 0;
z-index: -3;

background: var(--panel-deep) center 62% / cover no-repeat;
transform: scale(1.02);
transition: transform 1.1s var(--ease-soft), filter .6s var(--ease);
filter: saturate(.92);
}
.door__piece {
position: absolute;
left: 8%;
right: 8%;
top: 8%;
height: 52%;
z-index: -1;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
filter: drop-shadow(0 14px 18px rgba(4, 6, 11, .6))
drop-shadow(0 32px 52px rgba(4, 6, 11, .5));
transform: scale(1);
transition: transform 1.1s var(--ease-soft);
}
.door__piece::before {
content: "";
position: absolute;
inset: -18% -12% -30%;
z-index: -1;
background: radial-gradient(ellipse 62% 58% at 50% 42%,
rgba(204, 176, 83, .20) 0%,
rgba(204, 176, 83, .07) 45%,
transparent 72%);
pointer-events: none;
}
.door:hover .door__piece,
.door:focus-visible .door__piece { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) {
.door__piece { transition: none; }
.door:hover .door__piece { transform: none; }
}
.door__glow {
position: absolute;
inset: 0;
z-index: -2;
background: linear-gradient(180deg,
rgba(8, 10, 16, .30) 0%,
rgba(8, 10, 16, .55) 52%,
rgba(8, 10, 16, .93) 100%);
transition: opacity .5s var(--ease);
}
.door:hover { border-color: var(--border-int); transform: translateY(-3px); }
.door:hover .door__media { transform: scale(1.06); filter: saturate(1); }
.door__body {
position: absolute;
left: clamp(22px, 3vw, 34px);
right: clamp(22px, 3vw, 34px);
bottom: clamp(22px, 3vw, 34px);
display: grid;
gap: .4rem;
}
.door__name {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(1.7rem, 3.4vw, 2.6rem);
line-height: 1;
letter-spacing: -.02em;
color: var(--text-primary);
}
.door__desc {
color: var(--text-primary);
font-size: clamp(1.05rem, 1.55vw, 1.3rem);
line-height: 1.4;
max-width: 30ch;
}
.door__range {
margin-top: .15rem;
font-family: var(--font-display);
font-size: clamp(1.4rem, 2.4vw, 1.85rem);
font-weight: 800;
line-height: 1.1;
letter-spacing: -.01em;
color: var(--gold);
}
.door__go {
position: absolute;
top: clamp(22px, 3vw, 34px);
right: clamp(22px, 3vw, 34px);
display: grid;
place-items: center;
width: 44px;
height: 44px;
border: 1px solid var(--border-int);
border-radius: 50%;
color: var(--text-primary);
background: rgba(8, 10, 16, .5);
backdrop-filter: blur(8px);
transition: background .4s var(--ease), transform .45s var(--ease);
}
.door:hover .door__go { background: var(--accent); transform: translate(3px, -3px); }
.door__go .icon { width: 20px; }
.paths__note {
margin: clamp(22px, 3vw, 34px) 0 0;
font-family: var(--font-mono);
font-size: .86rem;
color: var(--text-secondary);
}
@media (max-width: 780px) {
.paths__grid { grid-template-columns: 1fr; }
}
.verify__steps {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(20px, 3vw, 40px);
margin: 0;
padding: 0;
list-style: none;
counter-reset: none;
}
.vstep {
position: relative;
padding-top: 26px;
border-top: 1px solid var(--hairline);
}
.vstep__mark { display: block; width: 60px; color: var(--accent); margin-bottom: 18px; }
.mark { width: 60px; height: 60px; }
.mark path, .mark circle {
stroke-dasharray: var(--len, 240);
stroke-dashoffset: var(--len, 240);
transition: stroke-dashoffset 1.5s var(--ease-soft) var(--d, 0ms);
}
.reveal.in .mark path,
.reveal.in .mark circle,
.reveal.is-visible .mark path,
.reveal.is-visible .mark circle { stroke-dashoffset: 0; }
.vstep__n {
position: absolute;
top: 26px;
right: 0;
font-family: var(--font-mono);
font-size: .8rem;
letter-spacing: .1em;
color: var(--text-secondary);
}
.vstep__ttl {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(1.12rem, 1.7vw, 1.42rem);
line-height: 1.16;
color: var(--text-primary);
margin: 0 0 .6rem;
max-width: 20ch;
}
.vstep__txt { color: var(--text-secondary); margin: 0; max-width: 34ch; }
@media (max-width: 860px) {
.verify__steps { grid-template-columns: 1fr; }
}
.dossier__grid {
display: grid;
grid-template-columns: 1.05fr .95fr;
gap: clamp(22px, 3.4vw, 52px);
align-items: center;
}
.teca {
position: relative;
margin: 0;
aspect-ratio: 4 / 3;
border: 1px solid var(--hairline);
border-radius: var(--radius-lg);
overflow: hidden;
isolation: isolate;
box-shadow: var(--shadow), var(--lift);
}
.teca__room {
position: absolute;
inset: 0;
z-index: -2;
background-size: cover;
background-position: center;
}
.teca__pool {
position: absolute;
left: 50%;
bottom: 12%;
width: 62%;
height: 26%;
z-index: -1;
transform: translateX(-50%);
background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(217, 133, 60, .40), transparent 70%);
animation: teca-pulse 9s var(--ease-soft) -3s infinite;
}
@keyframes teca-pulse {
0%, 100% { opacity: .78; }
50%      { opacity: 1; }
}
.teca__item {
position: absolute;
left: 50%;
top: 50%;
width: min(58%, 340px);
height: auto;
transform: translate(-50%, -54%);
object-fit: contain;
filter: drop-shadow(0 26px 30px rgba(0, 0, 0, .7));
transition: transform 1s var(--ease-soft);
}
.teca:hover .teca__item { transform: translate(-50%, -57%); }
.teca__glass {
position: absolute;
inset: 0;
background: linear-gradient(112deg,
rgba(236, 234, 229, 0) 38%,
rgba(236, 234, 229, .07) 47%,
rgba(236, 234, 229, .13) 50%,
rgba(236, 234, 229, .07) 53%,
rgba(236, 234, 229, 0) 62%);
transform: translateX(-30%);
transition: transform 1.4s var(--ease-soft);
pointer-events: none;
}
.teca:hover .teca__glass { transform: translateX(30%); }
.teca__cap {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 16px 20px;
font-family: var(--font-mono);
font-size: .78rem;
letter-spacing: .03em;
color: var(--text-primary);
background: linear-gradient(180deg, transparent, rgba(8, 10, 16, .88));
}
.dsr {
position: relative;
padding: clamp(22px, 2.8vw, 36px);
border: 1px solid var(--hairline);
border-radius: var(--radius-lg);
background: var(--panel);
box-shadow: var(--lift);
overflow: hidden;
}
.dsr__head {
display: flex;
align-items: center;
gap: .8rem;
padding-bottom: 18px;
margin-bottom: 18px;
border-bottom: 1px solid var(--hairline);
}
.dsr__seal { display: block; width: 38px; color: var(--gold); }
.dsr__seal .mark { width: 38px; height: 38px; }
.dsr__label {
font-family: var(--font-mono);
font-size: .8rem;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--gold);
}
.dsr__rows { margin: 0; display: grid; gap: 0; }
.dsr__row {
display: grid;
grid-template-columns: 11rem 1fr;
gap: 1rem;
padding: .74rem 0;
border-bottom: 1px solid var(--hairline);

opacity: calc(.18 + .82 * clamp(0, (var(--hold, 0) - var(--i) * .1) * 4, 1));
filter: blur(calc((1 - clamp(0, (var(--hold, 0) - var(--i) * .1) * 4, 1)) * 3px));
transition: opacity .25s linear, filter .25s linear;
}
.dsr__row:last-child { border-bottom: 0; }
.dsr__row dt {
font-family: var(--font-mono);
font-size: .78rem;
letter-spacing: .04em;
color: var(--text-secondary);
margin: 0;
}
.dsr__row dd {
margin: 0;
color: var(--text-primary);
font-weight: 500;
}
.dsr__frost {
position: absolute;
inset: 0;
pointer-events: none;
backdrop-filter: blur(calc((1 - var(--hold, 0)) * 5px));
background: rgba(20, 23, 31, calc((1 - var(--hold, 0)) * .42));
transition: background .25s linear;
}
.dsr__hold {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 48px;
margin-top: 22px;
padding: .8rem 1.2rem;
font-family: var(--font-mono);
font-size: .8rem;
letter-spacing: .06em;
color: var(--text-primary);
background: transparent;
border: 1px solid var(--border-int);
border-radius: var(--radius-sm);
cursor: pointer;
overflow: hidden;
touch-action: none;
transition: border-color .35s var(--ease), color .35s var(--ease);
}
.dsr__hold:hover { border-color: var(--accent); }
.dsr__hold-fill {
position: absolute;
inset: 0;
transform-origin: left center;
transform: scaleX(var(--hold, 0));
background: var(--accent-muted);
transition: transform .12s linear;
}
.dsr__hold-label { position: relative; }
.dsr[data-done="1"] .dsr__hold { border-color: var(--gold); color: var(--gold); }
.dsr__hint {
margin: 14px 0 0;
font-size: .88rem;
color: var(--text-secondary);
}
.dsr__go {
display: inline-flex;
align-items: center;
gap: .55rem;
min-height: 48px;
margin-top: 14px;
font-family: var(--font-mono);
font-size: .88rem;
font-weight: 500;
letter-spacing: .02em;
color: var(--gold);
border-bottom: 1px solid color-mix(in oklab, var(--gold) 40%, transparent);
padding-bottom: 3px;
transition: color .3s var(--ease), border-color .3s var(--ease);
}
.dsr__go:hover { color: var(--gold); border-color: var(--gold); }
.dsr__go .icon { transition: transform .3s var(--ease-soft); }
.dsr__go:hover .icon { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
.dsr__go .icon { transition: none; }
.dsr__go:hover .icon { transform: none; }
}
.dsr__go .icon { width: 18px; }
@media (max-width: 900px) {
.dossier__grid { grid-template-columns: 1fr; }
.dsr__row { grid-template-columns: 1fr; gap: .2rem; }
}
.owners { isolation: isolate; }
.owners__texture {
position: absolute;
inset: 0;
z-index: -1;
background-size: cover;
background-position: center;
opacity: .16;
mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
}
.owners__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: clamp(16px, 2.4vw, 28px);
}
.owner {
position: relative;
padding: clamp(22px, 2.8vw, 34px);
border: 1px solid var(--hairline);
border-radius: var(--radius-lg);
background: rgba(20, 23, 31, .82);
backdrop-filter: blur(8px);
box-shadow: var(--lift);
}
.owner__seal {
display: block;
width: 44px;
color: var(--gold);
margin-bottom: 16px;
}
.owner__seal .mark { width: 44px; height: 44px; }
.owner__name {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(1.24rem, 2vw, 1.6rem);
color: var(--text-primary);
margin: 0 0 18px;
}
.owner__data { margin: 0; display: grid; gap: 0; }
.owner__data > div {
display: grid;
grid-template-columns: 10rem 1fr;
gap: 1rem;
padding: .6rem 0;
border-top: 1px solid var(--hairline);
}
.owner__data dt {
font-family: var(--font-mono);
font-size: .76rem;
letter-spacing: .04em;
color: var(--text-secondary);
margin: 0;
}
.owner__data dd { margin: 0; color: var(--text-primary); font-family: var(--font-mono); font-size: .88rem; }
.owners__note {
margin: clamp(22px, 3vw, 34px) 0 0;
max-width: 66ch;
color: var(--text-secondary);
}
@media (max-width: 780px) {
.owners__grid { grid-template-columns: 1fr; }
.owner__data > div { grid-template-columns: 1fr; gap: .2rem; }
}
.faq__list { max-width: 78ch; }
.qa {
border-top: 1px solid var(--hairline);
}
.qa:last-child { border-bottom: 1px solid var(--hairline); }
.qa__q {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.4rem;
padding: 1.2rem 0;
cursor: pointer;
list-style: none;
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(1.02rem, 1.5vw, 1.24rem);
color: var(--text-primary);
transition: color .3s var(--ease);
}
.qa__q::-webkit-details-marker { display: none; }
.qa__q:hover { color: var(--accent); }
.qa__sign {
position: relative;
flex: 0 0 auto;
width: 18px;
height: 18px;
}
.qa__sign::before,
.qa__sign::after {
content: "";
position: absolute;
left: 0;
top: 50%;
width: 18px;
height: 1.5px;
background: var(--accent);
transition: transform .4s var(--ease);
}
.qa__sign::after { transform: rotate(90deg); }
.qa[open] .qa__sign::after { transform: rotate(0deg); }
.qa__a { padding-bottom: 1.3rem; }
.qa__a p {
margin: 0;
max-width: 68ch;
color: var(--text-secondary);
}
.closing {
position: relative;
isolation: isolate;
text-align: center;
padding: clamp(96px, 15vw, 190px) 0;
}
.closing__media {
position: absolute;
inset: 0;
z-index: -2;
background: var(--canvas) center 42% / cover no-repeat;
}
.closing__scrim {
position: absolute;
inset: 0;
z-index: -1;
background:
radial-gradient(ellipse 60% 70% at 50% 58%,
rgba(194, 64, 42, .12) 0%,
rgba(194, 64, 42, 0) 70%),
linear-gradient(180deg,
var(--canvas) 0%,
rgba(12, 14, 19, .78) 26%,
rgba(12, 14, 19, .72) 62%,
var(--canvas) 100%);
}
.closing__inner { text-shadow: var(--tshadow); }
.closing__title {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(2rem, 5.6vw, 3.8rem);
line-height: 1.04;
letter-spacing: -.02em;
color: var(--text-primary);
margin: 0 0 .6rem;
}
.closing__sub {
font-size: clamp(1rem, 1.5vw, 1.16rem);
color: var(--text-primary);
margin: 0 0 2rem;
}
.closing__inner .btn { text-shadow: none; }
@media (max-height: 560px) {
.hero-static__chip { display: none; }
}
@media (prefers-reduced-motion: reduce) {
body::before,
.teca__pool { animation: none; }
.reveal,
.reveal.in {
opacity: 1;
transform: none;
transition: none;
transition-delay: 0s !important;
}
.mark path, .mark circle {
stroke-dashoffset: 0;
transition: none;
}
.door, .door__media, .door__go,
.teca__item, .teca__glass,
.qa__sign::before, .qa__sign::after,
.dsr__row, .dsr__frost, .dsr__hold-fill { transition: none; }

.dsr__row { opacity: 1; filter: none; }
.dsr__frost { display: none; }
.dsr__hold { display: none; }

.teca__item { transform: translate(-50%, -54%); }
.teca__pool { transform: translateX(-50%); }
.teca__glass { transform: none; }
}
body.is-pinned .reveal { opacity: 1; transform: none; transition-delay: 0s !important; }
body.is-pinned .mark path,
body.is-pinned .mark circle { stroke-dashoffset: 0; }
body.is-pinned .dsr__row { opacity: 1; filter: none; }
body.is-pinned .dsr__frost { display: none; }
body.paused *,
body.paused *::before,
body.paused *::after { animation-play-state: paused !important; }
.departments__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
gap: clamp(14px, 1.6vw, 20px);
margin-top: clamp(28px, 3.5vw, 44px);
}
.dept {
position: relative;
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 20px;

padding: 20px 22px 20px 20px;
border: 1px solid var(--hairline);
border-radius: var(--radius);
background: var(--panel);
overflow: hidden;
transition: border-color .4s var(--ease), transform .4s var(--ease-soft), background .4s var(--ease);
}
.dept::before {

content: "";
position: absolute;
inset: -1px;
border-radius: inherit;
pointer-events: none;
opacity: 0;
background: radial-gradient(120% 140% at 12% 50%,
color-mix(in oklab, var(--accent) 16%, transparent), transparent 62%);
transition: opacity .4s var(--ease);
}
.dept:hover,
.dept:focus-visible {
border-color: color-mix(in oklab, var(--accent) 42%, var(--hairline));
transform: translateY(-3px);
}
.dept:hover::before,
.dept:focus-visible::before { opacity: 1; }
.dept__media {
position: relative;
width: 104px;
height: 104px;
border-radius: calc(var(--radius) - 6px);
overflow: hidden;
flex: 0 0 auto;
background: var(--panel-deep) center 76% / cover no-repeat url(../img/prod-bg.webp);
}
.dept__photo {
position: absolute;
inset: 8%;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
filter: drop-shadow(0 3px 6px rgba(4, 6, 11, .55));
}
.dept__body { display: grid; gap: 2px; min-width: 0; }
.dept__name {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(1.2rem, 1.8vw, 1.55rem);
color: var(--text-primary);
letter-spacing: -.01em;
}
.dept__count {
font-family: var(--font-mono);
font-size: .84rem;
color: var(--text-secondary);
}
.dept__go {
display: grid;
place-items: center;
width: 42px; height: 42px;
border-radius: 50%;
border: 1px solid var(--border-int);
color: var(--text-secondary);
transition: transform .4s var(--ease-soft), border-color .4s var(--ease), color .4s var(--ease);
}
.dept__go svg { width: 15px; height: 15px; }
.dept:hover .dept__go {
transform: translateX(3px);
border-color: var(--accent);
color: var(--accent);
}
@media (max-width: 900px) {
.departments__grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
.dept, .dept__go { transition: none; }
.dept:hover, .dept:focus-visible { transform: none; }
.dept:hover .dept__go { transform: none; }
}
.door--grail  .door__media { background-image: url(../img/porta-grail.webp); }
.door--street .door__media { background-image: url(../img/porta-street.webp); }
.door__piece { display: none; }