:root {
  color-scheme: dark;
  --bg: #050607;
  --text: #f3f4f4;
  --muted: #8e9295;
  --line: rgba(222, 226, 228, 0.28);
  --silver: #c7cbcd;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
  margin: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 33%, rgba(76, 82, 86, 0.16), transparent 38%),
    radial-gradient(circle at 50% 110%, rgba(36, 40, 42, 0.18), transparent 42%),
    var(--bg);
  color: var(--text);
  font-family: "Avenir Next", Avenir, "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

button, a { font: inherit; }
button { color: inherit; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .09;
  z-index: 20;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E");
}

.stage {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 4vh 6vw 3.2vh;
  position: relative;
  transition: filter 900ms ease, opacity 900ms ease, transform 1000ms cubic-bezier(.22,.68,0,1);
}

.identity {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(1020px, 94vw);
  transform: translateY(-1.5vh);
  animation: arrive 1.3s cubic-bezier(.22,.68,0,1) both;
  position: relative;
}

.ambient-ring {
  position: absolute;
  z-index: -1;
  top: 35%;
  left: 50%;
  width: min(900px, 84vw);
  height: min(400px, 42vh);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(190, 204, 212, .13) 0%, rgba(105, 120, 129, .045) 38%, transparent 72%);
  filter: blur(22px);
  animation: breathe 10s ease-in-out infinite;
  pointer-events: none;
}

.brand-mark {
  width: min(900px, 90vw);
  height: clamp(330px, 57vh, 640px);
  position: relative;
  overflow: visible;
  display: grid;
  place-items: center;
  isolation: isolate;
  --rx: 0deg;
  --ry: 0deg;
  --tx: 0px;
  --ty: 0px;
  --pointer-x: 50%;
  --pointer-y: 44%;
}

.brand-mark::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 5% 4% 7%;
  pointer-events: none;
  background: radial-gradient(circle 170px at var(--pointer-x) var(--pointer-y), rgba(255,255,255,.13), rgba(206,225,236,.035) 38%, transparent 72%);
  mix-blend-mode: screen;
  opacity: .6;
  transition: opacity 700ms ease;
}

.brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  padding-bottom: 10px;
  filter: drop-shadow(0 24px 42px rgba(0,0,0,.78)) contrast(1.07) brightness(1.035);
  transform: perspective(1400px) rotateX(var(--rx)) rotateY(var(--ry)) translate3d(var(--tx), var(--ty), 0);
  transition: transform 650ms cubic-bezier(.2,.75,.2,1), filter 650ms ease;
  animation: metal-breathe 12s ease-in-out infinite;
}

.light-sweep {
  position: absolute;
  z-index: 3;
  inset: 7% 2% 9%;
  transform: translateX(-118%) skewX(-12deg);
  background: linear-gradient(100deg, transparent 45%, rgba(224,239,247,.04) 47.5%, rgba(255,255,255,.26) 49.7%, rgba(255,255,255,.38) 50%, rgba(217,235,245,.08) 52%, transparent 55%);
  mix-blend-mode: screen;
  filter: blur(.2px);
  opacity: 0;
  animation: sweep 14s cubic-bezier(.34,.04,.18,1) infinite;
  pointer-events: none;
}

.glint {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 5px 1px rgba(255,255,255,.65), 0 0 14px 4px rgba(194,215,226,.18);
  opacity: 0;
  pointer-events: none;
}
.glint::before,
.glint::after { content: ""; position: absolute; inset: 50% auto auto 50%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.82), transparent); transform: translate(-50%,-50%); }
.glint::before { width: 30px; height: 1px; }
.glint::after { width: 1px; height: 30px; }
.glint-one { z-index: 4; left: 29%; top: 30%; animation: sparkle 12s 2.2s infinite; }
.glint-two { z-index: 4; right: 26%; top: 57%; animation: sparkle 12s 8.4s infinite; }

.rule {
  width: clamp(100px, 12vw, 164px);
  height: 1px;
  margin-top: 17px;
  background: linear-gradient(90deg, transparent, rgba(229,232,233,.82), transparent);
}

.disciplines {
  margin: 9px 0 0;
  font-family: "Avenir Next", Avenir, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: clamp(.78rem, .96vw, .96rem);
  font-weight: 400;
  letter-spacing: .42em;
  color: #aeb2b4;
  text-indent: .42em;
}

.disciplines span { color: #555b5f; margin: 0 .35em; }

.principals {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(18px, 3.2vw, 44px);
  margin-top: 31px;
  min-height: 92px;
}

.principal {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0 8px;
  min-width: 138px;
  cursor: pointer;
  text-align: center;
  transition: opacity 400ms ease;
}

.initials {
  display: block;
  font-family: "Avenir Next", Avenir, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1.22rem;
  font-weight: 300;
  letter-spacing: .38em;
  text-indent: .38em;
  color: #e2e4e5;
  transition: color 350ms ease, letter-spacing 450ms ease, transform 450ms ease;
}

.principal-preview {
  display: block;
  margin-top: 12px;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 400ms ease, transform 450ms ease;
  white-space: nowrap;
}

.principal-preview strong,
.principal-preview small { display: block; font-weight: 300; }
.principal-preview strong { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }
.principal-preview small { margin-top: 4px; font-size: .68rem; letter-spacing: .18em; color: var(--muted); text-transform: uppercase; }

.principal:hover .initials,
.principal:focus-visible .initials { color: #fff; letter-spacing: .48em; transform: translateY(-2px); }
.principal:hover .principal-preview,
.principal:focus-visible .principal-preview { opacity: 1; transform: translateY(0); }
.principals:has(.principal:hover) .principal:not(:hover) { opacity: .3; }

.principal-divider {
  width: 1px;
  height: 20px;
  margin-top: 1px;
  background: linear-gradient(transparent, rgba(225,228,230,.42), transparent);
}

.footer {
  position: absolute;
  left: 50%;
  bottom: 3vh;
  transform: translateX(-50%);
  display: flex;
  gap: 11px;
  align-items: center;
  color: #555a5e;
  font-size: .68rem;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.footer button {
  border: 0;
  padding: 6px 3px;
  background: none;
  color: inherit;
  cursor: pointer;
  transition: color 250ms ease;
}
.footer button:hover, .footer button:focus-visible { color: #c8cbcd; }

.profile-layer {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  padding: 9vh 8vw;
  background:
    radial-gradient(circle at 76% 48%, rgba(77, 84, 88, .12), transparent 33%),
    rgba(4,5,6,.965);
  opacity: 0;
  visibility: hidden;
  transform: scale(1.015);
  transition: opacity 700ms ease, visibility 700ms ease, transform 950ms cubic-bezier(.22,.68,0,1);
}

body.profile-open .stage { opacity: .18; filter: blur(12px); transform: scale(.985); }
body.profile-open .profile-layer { opacity: 1; visibility: visible; transform: scale(1); }

.profile-monogram {
  position: absolute;
  right: 8vw;
  top: 50%;
  transform: translateY(-52%);
  font-family: "Avenir Next", Avenir, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: clamp(14rem, 32vw, 38rem);
  line-height: .8;
  font-weight: 500;
  letter-spacing: -.09em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(222,226,228,.055);
  user-select: none;
}

.profile-content { width: min(620px, 84vw); position: relative; z-index: 2; transform: translateY(18px); opacity: 0; transition: transform 850ms 180ms ease, opacity 650ms 180ms ease; }
body.profile-open .profile-content { transform: translateY(0); opacity: 1; }
.profile-kicker { margin: 0 0 12px; font-size: .69rem; letter-spacing: .34em; color: #898e91; text-transform: uppercase; }
.profile-name { margin: 0; font-family: "Avenir Next", Avenir, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: clamp(2.2rem, 5.2vw, 5rem); line-height: 1; font-weight: 300; letter-spacing: .055em; text-transform: uppercase; }
.profile-rule { width: 72px; height: 1px; margin: 30px 0; background: linear-gradient(90deg, #d3d6d8, transparent); }
.profile-statement { margin: 0; font-size: clamp(1.25rem, 2.2vw, 1.75rem); line-height: 1.48; font-weight: 300; letter-spacing: .01em; }
.profile-copy { max-width: 540px; margin: 25px 0 0; color: #969a9d; font-size: clamp(.96rem, 1.2vw, 1.05rem); line-height: 1.75; font-weight: 300; }
.inquiry-link { display: inline-flex; gap: 18px; margin-top: 34px; color: #e7e9ea; text-decoration: none; font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; }
.inquiry-link span { transition: transform 250ms ease; }
.inquiry-link:hover span { transform: translate(4px,-3px); }

.close { position: absolute; top: 4vh; right: 4vw; width: 42px; height: 42px; border: 0; background: transparent; cursor: pointer; }
.close span { position: absolute; left: 10px; top: 20px; width: 22px; height: 1px; background: #8e9395; }
.close span:first-child { transform: rotate(45deg); }
.close span:last-child { transform: rotate(-45deg); }
.back { position: absolute; left: 4vw; bottom: 4vh; border: 0; background: none; padding: 8px; color: #666b6e; font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; cursor: pointer; }

.choice-dialog {
  width: min(560px, calc(100vw - 36px));
  border: 1px solid rgba(216,220,222,.13);
  border-radius: 2px;
  padding: clamp(34px, 6vw, 62px);
  background: rgba(8,10,11,.97);
  color: var(--text);
  box-shadow: 0 35px 90px rgba(0,0,0,.72);
}
.choice-dialog::backdrop { background: rgba(0,0,0,.76); backdrop-filter: blur(10px); }
.choice-dialog[open] { animation: dialog-in 400ms ease both; }
.dialog-close { position: absolute; right: 20px; top: 16px; border: 0; background: none; color: #717679; font-size: 1.6rem; font-weight: 200; cursor: pointer; }
.dialog-eyebrow { margin: 0 0 12px; color: #777c7f; font-size: .65rem; letter-spacing: .28em; text-transform: uppercase; }
.choice-dialog h2 { margin: 0 0 32px; font-family: "Avenir Next", Avenir, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: clamp(1.35rem, 3vw, 2.1rem); font-weight: 300; letter-spacing: .02em; }
.dialog-choices { border-top: 1px solid rgba(216,220,222,.13); }
.dialog-choices button { width: 100%; display: grid; grid-template-columns: 50px 1fr; align-items: center; gap: 16px; padding: 19px 0; border: 0; border-bottom: 1px solid rgba(216,220,222,.13); background: none; cursor: pointer; text-align: left; }
.dialog-choices b { font-family: "Avenir Next", Avenir, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300; letter-spacing: .18em; }
.dialog-choices span { color: #9a9ea0; font-size: .8rem; letter-spacing: .07em; }
.dialog-choices button:hover span { color: #fff; }
.draft-note { margin: 24px 0 0; color: #62676a; font-size: .71rem; line-height: 1.6; }

.imprint-detail { min-height: 250px; }
.imprint-back {
  border: 0;
  background: none;
  color: #74797c;
  padding: 0 0 28px;
  cursor: pointer;
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.imprint-back:hover { color: #d7dadc; }
.imprint-owner,
.imprint-address,
.imprint-email,
.imprint-vat {
  display: block;
  margin: 0;
  color: #a9adaf;
  font-size: .88rem;
  line-height: 1.8;
  font-style: normal;
  font-weight: 300;
}
.imprint-address { margin-top: 17px; }
.imprint-email { width: fit-content; margin-top: 17px; color: #d9dcde; text-decoration: none; border-bottom: 1px solid rgba(217,220,222,.24); }
.imprint-email:hover { border-color: rgba(217,220,222,.7); }
.imprint-vat { margin-top: 24px; color: #777c7f; font-size: .76rem; }

.legal-dialog {
  width: min(720px, calc(100vw - 36px));
  max-height: min(82vh, 780px);
  overflow: hidden;
}
.legal-dialog h2 { margin-bottom: 24px; }
.legal-copy {
  max-height: min(60vh, 590px);
  overflow-y: auto;
  padding-right: clamp(8px, 2vw, 22px);
  scrollbar-width: thin;
  scrollbar-color: rgba(210,214,216,.26) transparent;
}
.legal-copy section { padding: 22px 0; border-top: 1px solid rgba(216,220,222,.11); }
.legal-copy section:first-child { padding-top: 18px; }
.legal-copy h3 { margin: 0 0 12px; color: #d6d9da; font-size: .73rem; font-weight: 400; letter-spacing: .13em; text-transform: uppercase; }
.legal-copy p,
.legal-copy address { margin: 0; color: #9da1a3; font-size: .88rem; line-height: 1.72; font-style: normal; font-weight: 300; }
.legal-copy p + p { margin-top: 11px; }
.legal-copy address { margin-top: 14px; }
.legal-copy a { color: #d9dcde; text-decoration: none; border-bottom: 1px solid rgba(217,220,222,.22); }
.legal-copy a:hover { border-color: rgba(217,220,222,.7); }
.legal-copy .legal-date { padding-top: 19px; border-top: 1px solid rgba(216,220,222,.11); color: #62676a; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; }

@keyframes arrive { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(-1.5vh); } }
@keyframes sweep {
  0%, 17% { transform: translateX(-118%) skewX(-12deg); opacity: 0; }
  21% { opacity: .48; }
  52% { opacity: .48; }
  57%, 100% { transform: translateX(118%) skewX(-12deg); opacity: 0; }
}
@keyframes breathe { 0%, 100% { opacity: .48; transform: translate(-50%,-50%) scale(.95); } 50% { opacity: .8; transform: translate(-50%,-50%) scale(1.05); } }
@keyframes metal-breathe { 0%, 100% { opacity: .97; } 50% { opacity: 1; } }
@keyframes sparkle { 0%, 9%, 15%, 100% { opacity: 0; transform: scale(.4) rotate(0deg); } 11.5% { opacity: .9; transform: scale(1) rotate(45deg); } 13% { opacity: .28; transform: scale(.65) rotate(70deg); } }
@keyframes dialog-in { from { opacity: 0; transform: translateY(8px) scale(.99); } to { opacity: 1; transform: none; } }

@media (max-width: 640px) {
  .stage { padding: 5vh 5vw 7vh; }
  .identity { transform: translateY(-3vh); }
  .brand-mark { width: 97vw; height: min(52vh, 460px); }
  .rule { margin-top: 14px; }
  .disciplines { margin-top: 7px; font-size: .7rem; letter-spacing: .3em; text-indent: .3em; }
  .principals { margin-top: 27px; gap: 8px; min-height: 76px; }
  .principal { min-width: 132px; }
  .initials { font-size: 1.1rem; }
  .principal-preview { opacity: .7; transform: none; }
  .footer { bottom: 2.2vh; }
  .footer { gap: 7px; font-size: .62rem; letter-spacing: .09em; }
  .legal-dialog { padding: 34px 25px 28px; }
  .legal-copy { max-height: 63vh; }
  .profile-layer { place-items: center start; padding: 10vh 9vw; }
  .profile-monogram { right: -7vw; top: 23%; font-size: 54vw; }
  .profile-name { max-width: 80vw; }
  .profile-copy { line-height: 1.65; }
  .close { top: 2.5vh; right: 4vw; }
  .back { left: 6vw; bottom: 2.5vh; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; transition-duration: .01ms !important; }
}