/* NACRE — global layer: reset, scale, header, links, buttons, loader, reveals, footer, page transition.
   Desktop sizes are in rem where 1rem = 1px of a 1723px comp (html font-size = 100vw / 1723);
   at 1100px and below everything switches to px. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { font-size: calc(100vw / 1723); }
html { background: var(--c-black); -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  background: var(--c-night);
  color: var(--c-ink);
  font-family: var(--font);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, video, canvas, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }
input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 1px solid var(--c-pearl); outline-offset: 4px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: fixed; left: 16px; top: -60px; z-index: 2147483647; background: var(--c-pearl); color: #141414; padding: 10px 14px; font-size: 14px; transition: top .25s ease; }
.skip-link:focus { top: 16px; }

.container { max-width: 1600rem; margin: 0 auto; padding: 0 15rem; }

/* phone scroller: <main> scrolls on touch layouts, like the reference */
@media (max-width: 1099px) {
  html.is-main-scroller, html.is-main-scroller body { height: 100%; overflow: hidden; }
  html.is-main-scroller main { height: 100dvh; overflow-y: auto; overflow-x: hidden; overscroll-behavior: none; -webkit-overflow-scrolling: touch; }
}
@media (max-width: 1100px) {
  .container { max-width: 100%; padding: 0 15px; width: 100%; }
}

/* ---------- eyebrow ---------- */
.eyebrow { color: var(--c-pearl); font-size: 20rem; font-weight: 400; letter-spacing: .2rem; line-height: 1.1; text-align: center; text-transform: uppercase; }
@media (max-width: 1100px) { .eyebrow { font-size: 16px; letter-spacing: 0; } }

/* ---------- letter-hover links ---------- */
.lh { display: inline-block; line-height: inherit; overflow: hidden; position: relative; vertical-align: top; }
.lh__layer { display: block; white-space: pre; }
.lh__layer--next { color: var(--c-pearl); left: 0; position: absolute; top: 0; }
.lh__layer--next .lh__ch { transform: translateY(-115%); }
.lh__ch { display: inline-block; transition: transform .7s var(--ease-lux); transition-delay: calc(var(--i) * 18ms); will-change: transform; }
@media (min-width: 1101px) {
  a:hover .lh__layer:not(.lh__layer--next) .lh__ch, a:focus-visible .lh__layer:not(.lh__layer--next) .lh__ch,
  .svc-row:not(.is-open):hover .lh__layer:not(.lh__layer--next) .lh__ch, .svc-row:not(.is-open) .svc-row__title:focus-visible .lh__layer:not(.lh__layer--next) .lh__ch { transform: translateY(115%); }
  a:hover .lh__layer--next .lh__ch, a:focus-visible .lh__layer--next .lh__ch,
  .svc-row:not(.is-open):hover .lh__layer--next .lh__ch, .svc-row:not(.is-open) .svc-row__title:focus-visible .lh__layer--next .lh__ch { transform: translateY(0); }
}

/* ---------- header ---------- */
.hdr { left: 0; padding: 20rem 80rem 0; position: fixed; top: 0; width: 100%; z-index: 2000000; }
.hdr__wrap { align-items: center; display: flex; justify-content: space-between; }
.hdr__logo { display: block; height: 43rem; position: relative; width: 85rem; z-index: 100; }
.hdr__logo img { height: 100%; width: 100%; object-fit: contain; }
.hdr__menu ul { display: flex; gap: 60rem; }
.hdr__menu a { display: block; overflow: hidden; position: relative; }
.hdr__menu a > .lh { display: block; font-size: 14rem; line-height: 1.1; text-transform: uppercase; }
.hdr__menu a::after, .ftr__nav a::after { background: currentColor; bottom: 0; content: ""; height: 1px; left: 0; opacity: 0; position: absolute; right: 0; transform: scaleX(0); transform-origin: left center; transition: opacity .35s ease, transform .35s ease; }
.hdr__menu a.is-active, .ftr__nav a.is-active { color: var(--c-pearl); }
.hdr__menu a.is-active::after, .ftr__nav a.is-active::after { opacity: 1; transform: scaleX(1); }
.hdr__menu a[aria-current="page"], .ftr__nav a[aria-current="page"] { cursor: default; }
.hdr.is-gallery-open { pointer-events: none; }
.hdr.is-gallery-open .hdr__menu a.is-active::after { opacity: 0; transform: scaleX(0); }
.hdr__burger { align-items: center; color: #fff; display: none; height: 24px; justify-content: flex-end; overflow: hidden; position: relative; width: 68px; z-index: 100; }
.hdr__burger-label { display: block; line-height: 1; overflow: hidden; position: relative; }
.hdr__burger-text { display: block; font-size: 14px; line-height: 1; text-transform: uppercase; }
.hdr__burger-x { height: 16px; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 16px; }
.hdr__burger-line { background: currentColor; height: 1px; left: 0; position: absolute; top: 50%; width: 100%; }
.hdr__burger-line--a { clip-path: inset(0 100% 0 0); transform: translateY(-50%) rotate(45deg); }
.hdr__burger-line--b { clip-path: inset(0 0 0 100%); transform: translateY(-50%) rotate(-45deg); }
@media (max-width: 1100px) {
  .hdr { padding: 15px; }
  .hdr__logo { height: 40px; width: 70px; }
  .hdr__menu ul { gap: 40px; }
  .hdr__menu a > .lh { font-size: 14px; }
}
@media (max-width: 768px) {
  .hdr__burger { display: inline-flex; z-index: 2; }
  .hdr__menu { align-items: center; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); background: #1a1a1af5; display: flex; height: 100dvh; inset: 0; justify-content: center; opacity: 0; padding: 96px 30px 40px; pointer-events: none; position: fixed; visibility: hidden; z-index: 1; }
  .hdr__menu.is-open { visibility: visible; }
  .hdr__menu ul { align-items: center; flex-direction: column; gap: 24px; justify-content: center; min-height: 100%; text-align: center; width: 100%; }
}

/* ---------- back to homepage (inner pages) ---------- */
.back-home { align-items: center; color: #ffffffad; display: inline-flex; font-size: 12rem; left: 80rem; letter-spacing: -.04em; line-height: 1; position: fixed; text-transform: uppercase; top: 110rem; transition: opacity .45s ease, visibility .45s ease, transform .45s ease; z-index: 950; }
.back-home > .lh, .back-home > [data-lh] { display: block; font-size: inherit; line-height: 1; }
.back-home__icon { color: var(--c-pearl); display: none; height: 14px; width: 18px; }
html.is-gallery-open .back-home { opacity: 0; pointer-events: none; transform: translateY(-8rem); visibility: hidden; }
@media (max-width: 1100px) { .back-home { font-size: 14px; left: 15px; top: 100px; } }
@media (max-width: 768px) {
  .back-home { color: var(--c-pearl); top: 80px; }
  .back-home > .lh, .back-home > [data-lh] { display: none; }
  .back-home__icon { display: block; }
}

/* ---------- button-link ---------- */
.btn-line { align-items: center; color: var(--c-pearl); display: inline-flex; overflow: hidden; padding-bottom: 5rem; position: relative; width: max-content; }
.btn-line::before, .btn-line::after { background: currentColor; bottom: 0; content: ""; height: 1rem; left: 0; position: absolute; transition: transform .6s var(--ease-lux); width: 100%; }
.btn-line::before { transform: translateX(0); }
.btn-line::after { transform: translateX(-101%); }
.btn-line__label { font-size: 16rem; font-weight: 400; line-height: 1; text-transform: uppercase; white-space: nowrap; }
.btn-line__icon { align-items: center; display: inline-flex; flex: 0 0 auto; height: 13rem; justify-content: center; margin-left: 5rem; width: 15rem; }
.btn-line__icon svg { height: 100%; width: 100%; transition: transform .7s var(--ease-lux); }
.btn-line:hover::before, .btn-line:focus-visible::before { transform: translateX(101%); }
.btn-line:hover::after, .btn-line:focus-visible::after { transform: translateX(0); transition-delay: .3s; }
.btn-line:hover .btn-line__icon svg, .btn-line:focus-visible .btn-line__icon svg { transform: rotate(45deg); }
@media (max-width: 1100px) {
  .btn-line { padding-bottom: 5px; }
  .btn-line::before, .btn-line::after { height: 1px; }
  .btn-line__label { font-size: 14px; padding-right: 10px; }
  .btn-line__icon { height: 10px; margin-right: 5px; width: 10px; margin-left: 0; }
}

/* ---------- reveals ---------- */
.reveal-lines { font-kerning: none; font-feature-settings: "kern" off; }
.reveal-lines.is-split .rl-line { display: block !important; overflow: hidden; }
.reveal-lines.is-split .rl-inner { display: block; will-change: transform; }
.fill { color: var(--c-ghost); font-kerning: none; font-feature-settings: "kern" off; }
.fill__word { display: inline-block; margin-right: .16em; white-space: nowrap; }
.fill__word:last-child { margin-right: 0; }
.fill__ch { color: var(--c-ghost); display: inline-block; }
.fill__br--m { display: none; }
@media (max-width: 768px) { .fill__br--d { display: none; } .fill__br--m { display: block; } }
.clip-reveal { overflow: hidden; }
.rule-draw { position: relative; }
.rule-draw::before { background: var(--c-pearl); content: ""; height: 1rem; left: 0; position: absolute; top: 0; transform: scaleX(0); transform-origin: left center; transition: transform 1.5s var(--ease-lux); width: 100%; }
.rule-draw.is-drawn::before { transform: scaleX(1); }
@media (max-width: 1100px) { .rule-draw::before { height: 1px; } }

/* ---------- loader ---------- */
html.is-loading, html.is-loading body { overflow: hidden; }
html.is-loading main { overflow: hidden !important; }
.loader { background: #171717; display: none; inset: 0; overflow: hidden; position: fixed; z-index: 2147483000; }
.loader.is-active { display: flex; }
.loader__stage { align-items: center; display: flex; height: 100%; justify-content: center; overflow: hidden; position: relative; width: 100%; }
.loader__lines { height: 150rem; left: 90rem; pointer-events: none; position: absolute; right: 90rem; top: 50%; transform: translateY(-50%); }
.loader__line { background: var(--c-line); height: 1rem; left: 0; position: absolute; transform: scaleX(0); width: 100%; }
.loader__line--top { top: 0; transform-origin: left center; }
.loader__line--bottom { bottom: 0; transform-origin: right center; }
.loader__logo, .loader__group { left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); }
.loader__logo { width: 150rem; height: auto; z-index: 3; }
.loader__group { height: 560rem; overflow: hidden; pointer-events: none; width: 820rem; }
.loader__rotate { inset: 0; position: absolute; transform-origin: center; }
.loader__mask { height: 480rem; left: 50%; overflow: hidden; position: absolute; top: 50%; width: 130rem; }
.loader__mover { display: block; inset: 0; position: absolute; }
.loader__rotator { display: inline-block; left: 50%; position: absolute; top: 50%; transform-origin: center; white-space: nowrap; }
.loader__word { color: #3c3c3c; display: inline-block; font-size: 150rem; font-weight: 400; letter-spacing: -.02em; line-height: .84; text-transform: uppercase; white-space: nowrap; backface-visibility: hidden; }
@media (max-width: 767px) {
  .loader__lines { height: 104px; left: 20px; right: 20px; }
  .loader__line { height: 1px; }
  .loader__logo { width: 96px; }
  .loader__group { height: 300px; width: 280px; }
  .loader__mask { height: 230px; width: 62px; }
  .loader__word { font-size: 68px; }
}

/* ---------- cursors ---------- */
.cursor-label { left: 0; mix-blend-mode: difference; opacity: 0; pointer-events: none; position: fixed; top: 0; transform: translate(-50%, -50%); z-index: 1000000; color: #ffffffb3; font-size: 11rem; line-height: 1.4; text-transform: uppercase; white-space: nowrap; }
.cursor-label__slot { height: 15rem; overflow: hidden; }
.cursor-label__slot span { display: block; }
@media (max-width: 1099px) { .cursor-label { display: none; } }

/* ring close button (gallery + inspect) */
@property --ring-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --ring-b { syntax: "<angle>"; inherits: false; initial-value: 360deg; }
.ring-close { --ring-a: 0deg; --ring-b: 360deg; border-radius: 50%; color: #fff; display: block; height: 64rem; width: 64rem; position: absolute; }
.ring-close::before { background: conic-gradient(from -90deg, transparent 0deg var(--ring-a), currentColor var(--ring-a) var(--ring-b), transparent var(--ring-b) 1turn); border-radius: 50%; content: ""; inset: 0; -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 1.5rem), #000 calc(100% - 1.5rem)); mask: radial-gradient(farthest-side, transparent calc(100% - 1.5rem), #000 calc(100% - 1.5rem)); pointer-events: none; position: absolute; }
.ring-close:hover::before, .ring-close:focus-visible::before { animation: ringSweep 2.45s var(--ease-lux) both; }
.ring-close__label { font-size: 9rem; left: 50%; line-height: 1; position: absolute; text-transform: uppercase; top: 62%; transform: translate(-50%, -50%); }
.ring-close__x { height: 11rem; left: 50%; overflow: hidden; position: absolute; top: 39%; transform: translate(-50%, -50%); width: 11rem; }
.ring-close__x::before, .ring-close__x::after { background: currentColor; clip-path: inset(0); content: ""; height: 1rem; left: 0; position: absolute; top: 50%; width: 100%; }
.ring-close__x::before { transform: translateY(-50%) rotate(45deg); }
.ring-close__x::after { transform: translateY(-50%) rotate(-45deg); }
.ring-close:hover .ring-close__x::before, .ring-close:focus-visible .ring-close__x::before { animation: xSweep 1s var(--ease-lux) both; }
.ring-close:hover .ring-close__x::after, .ring-close:focus-visible .ring-close__x::after { animation: xSweep 1s var(--ease-lux) .08s both; }
@keyframes ringSweep { 0% { --ring-a: 0deg; --ring-b: 360deg; } 32% { --ring-a: 360deg; --ring-b: 360deg; } 32.01% { --ring-a: 0deg; --ring-b: 0deg; } to { --ring-a: 0deg; --ring-b: 360deg; } }
@keyframes xSweep { 0% { clip-path: inset(0); } 45% { clip-path: inset(0 0 0 100%); } 46% { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@media (max-width: 1099px) {
  .ring-close { height: 56px; width: 56px; }
  .ring-close::before { -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 1px), #000 calc(100% - 1px)); mask: radial-gradient(farthest-side, transparent calc(100% - 1px), #000 calc(100% - 1px)); }
  .ring-close__label { font-size: 8px; }
  .ring-close__x { height: 10px; width: 10px; }
  .ring-close__x::before, .ring-close__x::after { height: 1px; }
}

/* ---------- footer ---------- */
.ftr { background: var(--c-night); position: relative; z-index: 3; }
.ftr__top { align-items: center; display: flex; flex-direction: column; padding: 90rem 0 180rem; }
.ftr__wrap { display: flex; flex-direction: column; align-items: center; }
.ftr__logo { display: block; height: 208rem; margin: 0 auto 75rem; width: 300rem; }
.ftr__logo img { height: 100%; width: 100%; object-fit: contain; }
.ftr__nav { margin-bottom: 110rem; width: 100%; }
.ftr__nav ul { display: flex; gap: 105rem; justify-content: center; }
.ftr__nav a { color: var(--c-ink-2); display: block; font-size: 14rem; line-height: 1; position: relative; text-transform: uppercase; }
.ftr__contacts, .ftr__social { align-items: center; display: flex; flex-direction: column; }
.ftr__contacts { margin-bottom: 100rem; }
.ftr__label { color: var(--c-muted); display: block; font-size: 11rem; font-weight: 300; letter-spacing: 2rem; margin-bottom: 15rem; text-align: center; text-transform: uppercase; }
.ftr__contact { color: var(--c-pearl); font-size: 16rem; line-height: 2; position: relative; text-align: center; width: max-content; }
.ftr__contact::after { background: currentColor; bottom: 4rem; content: ""; height: 1rem; left: 0; position: absolute; transform: scaleX(0); transform-origin: right; transition: transform .55s var(--ease-lux); width: 100%; }
.ftr__social-link { color: var(--c-pearl); display: inline-block; font-size: 16rem; overflow: hidden; position: relative; width: max-content; }
.ftr__social-link::before, .ftr__social-link::after { background: currentColor; bottom: 0; content: ""; height: 1rem; left: 0; position: absolute; transition: transform .8s var(--ease-lux); width: 100%; }
.ftr__social-link::before { transform: scaleX(1); transform-origin: right; }
.ftr__social-link::after { transform: scaleX(0); transform-origin: left; transition-delay: .1s; }
@media (min-width: 1101px) {
  .ftr__contact:hover::after, .ftr__contact:focus-visible::after { transform: scaleX(1); transform-origin: left; }
  .ftr__social-link:hover::before, .ftr__social-link:focus-visible::before { transform: scaleX(0); }
  .ftr__social-link:hover::after, .ftr__social-link:focus-visible::after { transform: scaleX(1); }
  .ftr__legal a:hover { color: #6e6e6e; }
}
.ftr__bottom { padding-bottom: 30rem; }
.ftr__bottom-inner { align-items: center; display: grid; grid-template-columns: 1fr auto 1fr; padding: 22rem 0; }
.ftr__copy { color: var(--c-ink-3); font-size: 12rem; }
.ftr__legal { display: flex; gap: 32rem; justify-self: center; }
.ftr__legal a { color: var(--c-ink-3); font-size: 12rem; transition: color .7s var(--ease-lux); }
.ftr__credits { justify-self: end; color: var(--c-ink-3); font-size: 12rem; line-height: 1.15; text-align: right; max-width: 420rem; }
.ftr__credits a { text-decoration: underline; text-decoration-color: #ffffff40; text-underline-offset: 2px; }
@media (max-width: 1100px) {
  .ftr__top { padding: 150px 0 60px; }
  .ftr__logo { height: auto; margin: 0 auto 80px; width: 150px; }
  .ftr__nav { margin-bottom: 50px; }
  .ftr__nav ul { gap: 50px; }
  .ftr__nav a { font-size: 16px; }
  .ftr__contacts { margin-bottom: 60px; }
  .ftr__label { color: #fff; font-size: 12px; margin-bottom: 15px; letter-spacing: 2px; }
  .ftr__contact, .ftr__social-link { font-size: 18px; }
  .ftr__contact::after, .ftr__social-link::before, .ftr__social-link::after { height: 1px; }
  .ftr__bottom { padding-bottom: 20px; }
  .ftr__bottom-inner { padding: 0; }
  .ftr__copy, .ftr__credits { font-size: 10px; }
  .ftr__legal { gap: 30px; }
  .ftr__legal a { color: #9a9a9a; font-size: 10px; }
}
@media (max-width: 768px) {
  .ftr__wrap { display: flex; flex-direction: column; }
  .ftr__logo { order: 1; }
  .ftr__contacts { order: 2; }
  .ftr__social { order: 3; }
  .ftr__nav { margin-top: 90px; order: 4; }
  .ftr__nav ul { flex-direction: column; gap: 20px; text-align: center; }
  .ftr__bottom-inner { display: flex; flex-direction: column; }
  .ftr__legal { margin-bottom: 42px; order: 1; }
  .ftr__credits { margin-bottom: 35px; order: 2; text-align: center; justify-self: center; max-width: 320px; }
  .ftr__copy { order: 3; }
}
@media (max-width: 500px) { .ftr__legal { gap: 50px; } }

/* ---------- page transition (cross-document View Transitions) ---------- */
@view-transition { navigation: auto; }
::view-transition { background: var(--c-night); }
::view-transition-group(root) { animation-duration: 1.9s; animation-timing-function: var(--ease-vt); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 1.9s; animation-fill-mode: both; animation-timing-function: var(--ease-vt); backface-visibility: hidden; }
::view-transition-old(root) { animation-name: vt-out; transform-origin: center top; z-index: 1; }
::view-transition-new(root) { animation-name: vt-in; transform-origin: center top; z-index: 2; }
@keyframes vt-out { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: .48; transform: translateY(-6vh) scale(1.12); } }
@keyframes vt-in { from { clip-path: inset(100% 0 0 0); transform: translateY(18vh) scale(.8); } to { clip-path: inset(0); transform: translateY(0) scale(1); } }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(root), ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .01ms; }
  .lh__ch, .btn-line::before, .btn-line::after, .btn-line__icon svg, .rule-draw::before { transition-duration: .01ms !important; transition-delay: 0s !important; }
  .ring-close:hover::before, .ring-close:hover .ring-close__x::before, .ring-close:hover .ring-close__x::after { animation: none; }
}