@font-face {
  font-family: "Instrument Sans";
  src: url("assets/fonts/InstrumentSans.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("assets/fonts/InstrumentSans-Italic.ttf") format("truetype");
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: Manrope;
  src: url("assets/fonts/Manrope.ttf") format("truetype");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("assets/fonts/InstrumentSerif-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("assets/fonts/InstrumentSerif-Italic.ttf") format("truetype");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

:root {
  --ivory: #f3f0e8;
  --navy: #102b3c;
}

* { box-sizing: border-box; }
html { min-width: 320px; }
body {
  margin: 0;
  min-height: 100svh;
  background:
    radial-gradient(ellipse 88% 78% at 95% 0%, rgba(89,140,161,.52), transparent 67%),
    radial-gradient(ellipse 78% 75% at 0% 100%, rgba(129,171,184,.4), transparent 70%),
    linear-gradient(120deg, #e8f0ed 0%, #f5f1e8 52%, #dce7e8 100%);
  overflow: hidden;
}
body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
}
body::before {
  z-index: 0;
  inset: -20% -60%;
  background: linear-gradient(110deg, #0b2534 0%, #193a4c 24%, #557889 39%, #a5c3c9 51%, #66899b 62%, #183b4f 77%, #0a2637 100%);
  animation: intro-gradient 3.2s cubic-bezier(.2,.65,.2,1) both;
}
body::after {
  z-index: 0;
  background: url("assets/grain.svg") repeat;
  opacity: .14;
  mix-blend-mode: multiply;
}

.stage {
  min-height: 100svh;
  display: grid;
  place-items: center;
  position: relative;
  z-index: 1;
}

.corner-label {
  position: absolute;
  top: clamp(25px, 3vw, 43px);
  color: var(--navy);
  font-family: Manrope, "Segoe UI", Arial, sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .29em;
  line-height: 1;
  white-space: nowrap;
  animation: detail-reveal 3.8s ease-out both;
}
.corner-label--left { left: clamp(25px, 3vw, 43px); }
.corner-label--right { right: clamp(25px, 3vw, 43px); text-align: right; }

.identity {
  width: min(84vw, 1160px);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.logo-frame {
  position: relative;
  width: 100%;
  height: clamp(95px, 11vw, 150px);
}

.logo {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: auto;
  display: block;
  color: var(--navy);
  animation: logo-reveal 3s cubic-bezier(.25, .75, .25, 1) both;
}

.intro-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 30px;
  padding: 12px 4px;
  border: 0;
  background: transparent;
  color: var(--navy);
  font-family: Manrope, "Segoe UI", Arial, sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .26em;
  white-space: nowrap;
  cursor: pointer;
  animation: detail-reveal 3.8s ease-out both;
  transition: color .25s ease;
}
.intro-link__plus { color: #517f95; font-family: "Segoe UI", Arial, sans-serif; font-size: 16px; font-weight: 300; line-height: .6; letter-spacing: 0; }
.intro-link:hover, .intro-link:focus-visible { color: #517f95; }
.intro-link:focus-visible, .inquiries a:focus-visible, .dialog-close:focus-visible { outline: 2px solid #517f95; outline-offset: 5px; }

.inquiries {
  position: absolute;
  bottom: clamp(25px, 3vw, 43px);
  left: clamp(25px, 3vw, 43px);
  display: flex;
  flex-direction: column;
  gap: 7px;
  color: var(--navy);
  font-family: Manrope, "Segoe UI", Arial, sans-serif;
  font-style: normal;
  animation: detail-reveal 3.8s ease-out both;
}
.inquiries span {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .25em;
  line-height: 1.2;
}
.inquiries a {
  width: fit-content;
  color: inherit;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .01em;
  line-height: 1.35;
  text-decoration: none;
  transition: color .25s ease;
}
.inquiries a:hover { color: #517f95; }

.referral-note {
  position: absolute;
  right: clamp(25px, 3vw, 43px);
  bottom: clamp(25px, 3vw, 43px);
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: calc(50vw - 35px);
  color: var(--navy);
  font-family: "Instrument Sans", "Segoe UI", Arial, sans-serif;
  font-size: 11px;
  font-style: italic;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: .005em;
  text-align: right;
  animation: detail-reveal 3.8s ease-out both;
}
.referral-note__upright { font-style: normal; }

.about-dialog {
  width: min(700px, calc(100vw - 48px));
  max-height: calc(100svh - 48px);
  padding: 0;
  border: 1px solid rgba(243,240,232,.28);
  border-radius: 0;
  background:
    radial-gradient(ellipse 90% 90% at 105% 0%, rgba(106,153,168,.35), transparent 62%),
    linear-gradient(124deg, #0b2433 4%, #15394b 53%, #2a5568 100%);
  color: var(--ivory);
  box-shadow: 0 22px 80px rgba(16,43,60,.16);
  font-family: "Instrument Sans", "Segoe UI", Arial, sans-serif;
  overflow: auto;
}
.about-dialog[open] { animation: dialog-arrive .4s cubic-bezier(.2,.7,.2,1) both; }
.about-dialog::backdrop { background: rgba(243,240,232,.82); backdrop-filter: blur(6px); }
.dialog-shell { position: relative; padding: clamp(30px, 5vw, 54px); }
.dialog-close { position: absolute; top: 25px; right: 27px; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; background: none; color: var(--ivory); font-family: "Instrument Sans", "Segoe UI", Arial, sans-serif; font-size: 27px; line-height: 1; font-weight: 300; cursor: pointer; transition: color .25s ease, transform .25s ease; }
.dialog-close:hover { color: #a9c5d0; transform: rotate(90deg); }
.dialog-press { display: flex; flex-direction: column; align-items: center; gap: 17px; padding: 4px 0 25px; border-bottom: 1px solid rgba(243,240,232,.25); text-align: center; }
.dialog-press__label { color: rgba(243,240,232,.64); font-size: 9px; font-weight: 600; letter-spacing: .28em; }
.dialog-press__logos { width: min(100%, 450px); margin-inline: auto; display: grid; grid-template-columns: 60fr 86fr 86fr 176fr; align-items: center; gap: clamp(8px, 2vw, 14px); }
.dialog-press__logo { display: block; width: 100%; height: auto; object-fit: contain; }
.dialog-press__logo--entrepreneur, .dialog-press__logo--newsweek { filter: brightness(0) invert(1); }
.dialog-press__logo--entrepreneur { width: 93%; justify-self: center; transform: translateY(2px); }
.dialog-main { padding: 39px 0 0; text-align: center; }
.about-dialog h2 { max-width: 590px; margin: 0 auto; font-family: "Instrument Serif", Georgia, serif; font-size: clamp(21px, 2.25vw, 26px); font-weight: 400; line-height: 1.18; letter-spacing: -.025em; text-wrap: balance; }
.about-dialog h2 em { margin-left: .09em; color: #b9d3da; font-weight: 400; }
.dialog-underlined { text-decoration: underline; text-decoration-color: #b9d3da; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.dialog-copy { max-width: 485px; margin: 28px auto 0; color: rgba(243,240,232,.84); }
.dialog-copy p { margin: 0; font-size: 14px; font-weight: 400; line-height: 1.55; text-wrap: balance; }
.dialog-copy strong { color: var(--ivory); font-weight: 600; }
.dialog-closing { display: flex; flex-direction: column; align-items: center; gap: 9px; margin: 35px 0 0; line-height: 1.12; }
.dialog-closing strong { font-family: "Instrument Sans", "Segoe UI", Arial, sans-serif; font-size: 15.5px; font-weight: 600; letter-spacing: .005em; white-space: nowrap; }
.closing-italic { font-style: italic; }
.dialog-closing em { color: #c3dce2; font-family: "Instrument Serif", Georgia, serif; font-size: 29px; font-weight: 400; letter-spacing: -.018em; white-space: nowrap; }
.dialog-close:focus-visible { outline-color: #a9c5d0; }

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

@keyframes intro-gradient {
  0% { opacity: 1; transform: translateX(-22%); }
  58% { opacity: 1; transform: translateX(22%); }
  100% { opacity: 0; transform: translateX(25%); }
}

@keyframes logo-reveal {
  0%, 30% { opacity: 0; clip-path: inset(0 50% 0 50%); transform: translateY(-50%) scale(.98); color: var(--ivory); }
  42% { opacity: 1; }
  56% { clip-path: inset(0 0 0 0); transform: translateY(-50%) scale(1); color: var(--ivory); }
  78% { color: var(--navy); }
  100% { opacity: 1; clip-path: inset(0 0 0 0); transform: translateY(-50%) scale(1); color: var(--navy); }
}

@keyframes detail-reveal {
  0%, 72% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes dialog-arrive {
  from { opacity: 0; transform: translateY(18px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 650px) {
  .identity { width: calc(100vw - 32px); }
  .logo-frame { height: clamp(56px, 18vw, 70px); }
  .intro-link { margin-top: clamp(17px, 4.5vw, 21px); font-size: 9px; letter-spacing: .22em; }
  .about-dialog { width: calc(100vw - 28px); max-height: calc(100svh - 28px); }
  .dialog-shell { padding: 29px; }
  .dialog-close { top: 19px; right: 18px; }
  .dialog-press { gap: 15px; padding: 7px 0 21px; }
  .dialog-main { padding-top: 31px; }
  .about-dialog h2 { font-size: clamp(21px, 4.8vw, 25px); }
  .dialog-copy { margin-top: 23px; }
  .dialog-copy p { font-size: 13px; }
  .dialog-closing { margin-top: 30px; }
  .dialog-closing strong { font-size: clamp(14px, 3.5vw, 15.5px); }
  .dialog-closing em { font-size: clamp(24px, 5.5vw, 29px); }
  .corner-label { top: 22px; font-size: 9px; letter-spacing: .16em; }
  .corner-label--left { left: 21px; }
  .corner-label--right { right: 21px; }
  .inquiries { left: 21px; bottom: 22px; }
  .referral-note { right: 21px; bottom: 22px; max-width: calc(50vw - 10px); font-size: 10.5px; }
}

@media (max-width: 450px) {
  .dialog-press__logo--entrepreneur { width: 100%; transform: translateY(1px); }
}

@media (max-height: 650px) {
  .dialog-shell { padding-top: 18px; padding-bottom: 18px; }
  .dialog-press { padding-bottom: 14px; }
  .dialog-main { padding-top: 21px; }
  .dialog-copy { margin-top: 18px; }
  .dialog-closing { margin-top: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  body::before, .logo, .corner-label, .intro-link, .inquiries, .referral-note { animation: none; }
  body::before { opacity: 0; }
  .about-dialog[open] { animation: none; }
  .dialog-close { transition: none; }
  .dialog-close:hover { transform: none; }
  .logo { transform: translateY(-50%); }
}