@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("./fonts/manrope-cyrillic-variable.woff2") format("woff2-variations");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("./fonts/manrope-latin-variable.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("./fonts/cormorant-garamond-cyrillic-variable.woff2") format("woff2-variations");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("./fonts/cormorant-garamond-latin-variable.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --ink: #252525;
  --muted: #666768;
  --line: rgba(255, 255, 255, 0.68);
  --glass: rgba(255, 255, 255, 0.42);
  --silver: #a7abad;
  --pearl: #f5f1e9;
  --champagne: #c8ad9b;
  --shadow: rgba(78, 79, 79, 0.14);
}

* { box-sizing: border-box; }

html {
  min-width: 320px;
  background: #ebe7df;
}

body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background: #ebe7df;
  font-family: "Manrope", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }

.page-shell {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  padding: 42px 18px 54px;
  isolation: isolate;
  background:
    linear-gradient(rgba(242, 239, 232, 0.18), rgba(242, 239, 232, 0.18)),
    url("./pearl-background.png") center / cover fixed,
    radial-gradient(circle at 15% 10%, #fff 0, transparent 38%),
    linear-gradient(135deg, #f4f0e9 0%, #dfe2e2 47%, #f1ece3 100%);
}

.page-shell::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(110deg, rgba(255,255,255,.24), transparent 30%, rgba(255,255,255,.18) 64%, transparent),
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.35), transparent 45%);
}

.ambient {
  position: fixed;
  z-index: -1;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  filter: blur(12px);
  opacity: .5;
  pointer-events: none;
}

.ambient-one { top: -170px; right: -110px; background: rgba(255,255,255,.9); }
.ambient-two { bottom: -210px; left: -120px; background: rgba(190,195,197,.75); }

.profile-card { width: min(100%, 640px); margin: 0 auto; }

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.eyebrow,
.section-number {
  margin: 0;
  color: #5d6061;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.portrait-shell {
  position: relative;
  width: clamp(145px, 35vw, 168px);
  height: clamp(145px, 35vw, 168px);
  margin: 25px 0 20px;
  padding: 5px;
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 50%;
  background: rgba(255,255,255,.26);
  box-shadow: 0 18px 55px rgba(87,89,89,.16), inset 0 1px 0 rgba(255,255,255,.95);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
}

.portrait-shell::after {
  content: "";
  position: absolute;
  inset: -8px;
  border: 1px solid rgba(158,163,165,.32);
  border-radius: inherit;
}

.portrait-photo {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 26%;
  filter: saturate(.88) contrast(.98) brightness(1.03);
}

h1 {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(48px, 13vw, 72px);
  font-weight: 500;
  line-height: .95;
  letter-spacing: -.045em;
}

.subtitle {
  margin: 13px 0 0;
  color: #464849;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.intro {
  max-width: 455px;
  margin: 22px 0 0;
  padding: 11px 20px 12px;
  border: 1px solid rgba(255, 255, 255, 0.64);
  border-radius: 16px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.62),
    0 10px 28px rgba(82, 83, 83, 0.06);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 14px;
  line-height: 1.7;
}

.glass-panel {
  border: 1px solid var(--line);
  background: var(--glass);
  box-shadow: 0 22px 48px var(--shadow), inset 0 1px 0 rgba(255,255,255,.8);
  backdrop-filter: blur(20px) saturate(1.1);
  -webkit-backdrop-filter: blur(20px) saturate(1.1);
}

.services {
  --services-pad-x: 24px;
  margin-top: 34px;
  padding: 25px var(--services-pad-x) 16px;
  border-radius: 28px;
}

.section-heading { padding: 0 2px 18px; }

.section-heading h2 {
  margin: 7px 0 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 28px;
  font-weight: 500;
  line-height: 1.08;
}

.services ul {
  margin: 0 calc(-1 * var(--services-pad-x));
  padding: 0;
  list-style: none;
}

.services li {
  position: relative;
  border-top: 1px solid rgba(118,121,122,.15);
}

.service-row {
  display: grid;
  width: 100%;
  grid-template-columns: 34px 1fr;
  gap: 10px;
  align-items: center;
  min-height: 49px;
  padding: 0 var(--services-pad-x);
  border: 0;
  border-radius: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 260ms ease, box-shadow 260ms ease, transform 180ms ease;
  -webkit-tap-highlight-color: transparent;
}

.service-row:hover,
.service-row:focus-visible {
  background: linear-gradient(90deg, rgba(213,194,183,.16), rgba(255,255,255,.16));
  outline: none;
}

.service-row:active { transform: scale(.995); }

.service-row.is-active {
  background: linear-gradient(100deg, rgba(202,174,158,.25), rgba(241,229,221,.18) 58%, rgba(255,255,255,.1));
}

.service-row span {
  color: #888c8e;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 13px;
  font-style: italic;
}

.service-row p {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}

.link-list { display: grid; gap: 12px; margin-top: 14px; }

.link-card {
  display: flex;
  min-height: 82px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 17px 16px 22px;
  border-radius: 23px;
  transition: transform 220ms ease, border-color 220ms ease, background-color 220ms ease, box-shadow 220ms ease;
}

.link-card:hover,
.link-card:focus-visible {
  z-index: 1;
  transform: translateY(-3px);
  border-color: rgba(255,255,255,.95);
  background: rgba(255,255,255,.58);
  box-shadow: 0 24px 52px rgba(71,73,74,.18), inset 0 1px 0 #fff;
  outline: none;
}

.primary-link {
  color: #342e2a;
  border-color: rgba(255,255,255,.72);
  background: linear-gradient(112deg, rgba(193,164,146,.94), rgba(233,217,206,.96) 52%, rgba(203,181,168,.9));
  box-shadow: 0 24px 54px rgba(125,94,78,.2), inset 0 1px 0 rgba(255,255,255,.72);
}

.primary-link:hover,
.primary-link:focus-visible {
  background: linear-gradient(112deg, rgba(184,150,130,.96), rgba(242,226,215,.98) 52%, rgba(210,184,169,.94));
  box-shadow: 0 26px 58px rgba(125,94,78,.24), inset 0 1px 0 rgba(255,255,255,.82);
}

.link-copy { display: grid; gap: 4px; }

.link-copy strong {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
}

.link-copy small { color: var(--muted); font-size: 11px; line-height: 1.35; }
.primary-link small { color: rgba(61,49,43,.7); }

.arrow {
  display: grid;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(255,255,255,.66);
  border-radius: 50%;
  background: rgba(255,255,255,.26);
  transition: transform 220ms ease;
}

.link-card:hover .arrow,
.link-card:focus-visible .arrow { transform: translateX(3px); }

.arrow svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
}

.footer { padding: 30px 6px 0; text-align: center; }
.footer-line { width: 44px; height: 1px; margin: 0 auto 18px; background: rgba(68,70,71,.35); }

.footer-city {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 20px;
  font-weight: 600;
}

.contact-block {
  display: grid;
  gap: 7px;
  max-width: 520px;
  margin: 16px auto 0;
  color: var(--muted);
  font-style: normal;
}

.contact-block p { margin: 0; font-size: 12px; line-height: 1.55; }
.contact-block strong { color: #4b4c4d; font-weight: 650; }

.contact-block a {
  position: relative;
  color: #4b4c4d;
  font-family: "Manrope", Arial, sans-serif;
  font-size: inherit;
  font-style: normal;
  font-variant-numeric: lining-nums tabular-nums;
  font-weight: 500;
  letter-spacing: 0;
}

.contact-block a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -2px;
  left: 0;
  height: 1px;
  background: rgba(75,76,77,.3);
}

.reveal {
  opacity: 0;
  transform: translateY(-16px) scale(.99);
  animation: reveal 720ms cubic-bezier(.22,1,.36,1) forwards;
}

.reveal-1 { animation-delay: 80ms; }
.reveal-2 { animation-delay: 170ms; }
.reveal-3 { animation-delay: 260ms; }
.reveal-4 { animation-delay: 350ms; }
.reveal-5 { animation-delay: 440ms; }
.reveal-6 { animation-delay: 530ms; }
.reveal-7 { animation-delay: 620ms; }

@keyframes reveal {
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (min-width: 700px) {
  .page-shell { padding-top: 62px; padding-bottom: 72px; }
  .services { --services-pad-x: 31px; padding-top: 30px; padding-bottom: 20px; }
  .link-card { padding-right: 20px; padding-left: 28px; }
  .portrait-shell { width: 176px; height: 176px; }
}

@media (max-width: 380px) {
  .page-shell { padding-right: 12px; padding-left: 12px; }
  .services { --services-pad-x: 18px; }
  .link-card { padding-left: 18px; }
}

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