@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500;1,600&family=DM+Sans:wght@400;500;600;700&display=swap');

:root{
  --navy:#143f5c;
  --navy-deep:#081e30;
  --navy-deeper:#050f1a;
  --gold:#b49b62;
  --gold-light:#d8c497;
  --brown:#71818a;
  --sun:#dce2e4;
  --black:#0b1116;
  --paper:#f5f5f2;
  --mist:#e4e9ea;
  --white:#fff;
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'DM Sans',Arial,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box}
html{height:100%}
body{
  margin:0;
  min-height:100dvh;
  min-height:100vh;
  background:var(--navy-deeper);
  color:var(--white);
  font-family:var(--sans);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}

/* ---------- ambient background ---------- */
.ambient{
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  background:radial-gradient(120% 90% at 50% -10%,var(--navy) 0%,var(--navy-deep) 45%,var(--navy-deeper) 100%);
}
.ambient__blob{
  position:absolute;
  border-radius:50%;
  filter:blur(70px);
  opacity:.32;
  will-change:transform;
}
.ambient__blob--gold{
  width:52vmax;height:52vmax;
  left:-18vmax;top:-14vmax;
  background:radial-gradient(circle,var(--gold) 0%,transparent 70%);
  animation:driftA 26s var(--ease) infinite alternate;
}
.ambient__blob--navy{
  width:58vmax;height:58vmax;
  right:-20vmax;bottom:-22vmax;
  background:radial-gradient(circle,#2c6a93 0%,transparent 72%);
  opacity:.4;
  animation:driftB 30s var(--ease) infinite alternate;
}
.ambient__monogram{
  position:absolute;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  font-family:var(--serif);
  font-style:italic;
  font-weight:600;
  font-size:min(70vw,640px);
  line-height:1;
  color:var(--white);
  opacity:.035;
  user-select:none;
}
@keyframes driftA{
  0%{transform:translate(0,0) scale(1)}
  100%{transform:translate(6vmax,8vmax) scale(1.12)}
}
@keyframes driftB{
  0%{transform:translate(0,0) scale(1)}
  100%{transform:translate(-7vmax,-5vmax) scale(1.1)}
}

/* ---------- stage ---------- */
.stage{
  position:relative;
  z-index:1;
  min-height:100dvh;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:22px;
  padding:calc(28px + env(safe-area-inset-top)) 20px calc(28px + env(safe-area-inset-bottom));
}

.scene{
  width:min(380px,92vw);
  perspective:1800px;
  animation:cardEnter .9s var(--ease) both;
  animation-delay:.05s;
}
@keyframes cardEnter{
  from{opacity:0;transform:translateY(28px) scale(.95)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

.card{
  position:relative;
  width:100%;
  height:clamp(520px,78dvh,648px);
  transform-style:preserve-3d;
  transform:rotateX(var(--tiltY)) rotateY(var(--tiltX));
  transition:transform .5s var(--ease);
}

.card__inner{
  position:relative;
  width:100%;
  height:100%;
  transform-style:preserve-3d;
  transition:transform .85s var(--ease);
}
.card.is-flipped .card__inner{transform:rotateY(180deg)}

.card__face{
  position:absolute;
  inset:0;
  border-radius:26px;
  overflow:hidden;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  box-shadow:0 30px 60px -20px rgb(3 10 20 / .65),0 2px 0 rgb(255 255 255 / .04) inset;
  border:1px solid rgb(255 255 255 / .08);
}
.card__face--front{pointer-events:auto}
.card__face--back{pointer-events:none}
.card.is-flipped .card__face--front{pointer-events:none}
.card.is-flipped .card__face--back{pointer-events:auto}

.card__face--back{
  transform:rotateY(180deg);
  background:linear-gradient(165deg,var(--navy) 0%,var(--navy-deep) 62%,var(--navy-deeper) 100%);
  display:flex;
  flex-direction:column;
  padding:20px 20px calc(14px + env(safe-area-inset-bottom));
  overflow-y:auto;
}

/* ---------- front face ---------- */
.card__face--front{background:var(--navy-deeper)}
.card__photo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 18%;
}
.card__scrim{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,rgb(5 15 26 / .55) 0%,rgb(5 15 26 / 0) 30%,rgb(5 15 26 / .15) 55%,rgb(5 15 26 / .92) 100%);
}
.card__mark{
  position:absolute;
  top:20px;left:20px;
  width:34px;height:auto;
  opacity:.92;
  z-index:2;
  filter:drop-shadow(0 2px 6px rgb(0 0 0 / .35));
}
.card__front-copy{
  position:absolute;
  left:0;right:0;bottom:0;
  z-index:2;
  padding:0 24px 74px;
}
.card__firm{
  margin:0 0 6px;
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gold-light);
  font-weight:600;
}
.card__name{
  margin:0;
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(30px,8vw,38px);
  line-height:1.08;
  color:var(--white);
}
.card__name em{
  font-style:italic;
  color:var(--gold-light);
}
.card__role{
  margin:10px 0 0;
  font-size:12.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--sun);
  font-weight:600;
}
.card__tagline{
  margin:10px 0 0;
  font-size:13.5px;
  line-height:1.5;
  color:rgb(255 255 255 / .78);
  max-width:26ch;
}

/* ---------- flip triggers ---------- */
.flip-trigger{
  display:flex;
  align-items:center;
  gap:7px;
  cursor:pointer;
  transition:transform .25s var(--ease),background-color .25s var(--ease);
}
.flip-trigger:active{transform:scale(.96)}
.flip-trigger__icon svg,.flip-trigger--back svg{width:16px;height:16px}
.flip-trigger--front{
  position:absolute;
  z-index:3;
  top:18px;right:18px;
  padding:9px 14px 9px 11px;
  border-radius:999px;
  background:rgb(8 30 48 / .45);
  border:1px solid rgb(255 255 255 / .22);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  color:var(--white);
  font-size:12px;
  font-weight:600;
  letter-spacing:.02em;
}
.flip-trigger--front:hover{background:rgb(8 30 48 / .65)}
.flip-trigger--back{
  flex:0 0 auto;
  width:36px;height:36px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgb(255 255 255 / .08);
  border:1px solid rgb(255 255 255 / .16);
  color:var(--gold-light);
}
.flip-trigger--back:hover{background:rgb(255 255 255 / .14)}

/* ---------- back face ---------- */
.card__back-head{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:8px;
}
.card__mark--inline{position:static;width:28px;flex:0 0 auto;opacity:.9}
.card__back-head>div{flex:1 1 auto;min-width:0}
.card__back-name{
  margin:0;
  font-family:var(--serif);
  font-weight:600;
  font-style:italic;
  font-size:19px;
  color:var(--white);
}
.card__back-role{
  margin:2px 0 0;
  font-size:10.5px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--gold-light);
}

.contact-list{
  list-style:none;
  margin:0;
  padding:2px 0 0;
}
.contact-list li{border-bottom:1px solid rgb(255 255 255 / .09)}
.contact-list li:last-child{border-bottom:0}
.contact-list a,.contact-list__static{
  display:flex;
  align-items:center;
  gap:12px;
  padding:8px 2px;
  transition:opacity .2s ease;
}
.contact-list a:hover{opacity:.8}
.contact-list a:active{opacity:.6}
.contact-list__icon{
  flex:0 0 auto;
  width:30px;height:30px;
  border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  background:rgb(180 155 98 / .12);
  color:var(--gold-light);
}
.contact-list__icon svg{width:15px;height:15px}
.contact-list__text{
  display:flex;
  flex-direction:column;
  gap:1px;
  font-size:13.5px;
  font-weight:500;
  color:var(--white);
  min-width:0;
}
.contact-list__text small{
  font-size:9.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:rgb(220 226 228 / .55);
  font-weight:600;
}

.card__divider{
  height:1px;
  margin:10px 0;
  background:linear-gradient(90deg,transparent,rgb(180 155 98 / .5),transparent);
  flex:0 0 auto;
}

.social-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin-bottom:12px;
}
.social-row a{
  width:38px;height:38px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgb(255 255 255 / .06);
  border:1px solid rgb(255 255 255 / .12);
  color:var(--sun);
  transition:transform .25s var(--ease),background-color .25s var(--ease),color .25s var(--ease);
}
.social-row a svg{width:16px;height:16px}
.social-row a:hover{background:var(--gold);color:var(--navy-deeper);transform:translateY(-2px)}
.social-row a:active{transform:translateY(0) scale(.94)}

.card__actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-bottom:10px;
}
.action{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:10px 10px;
  border-radius:13px;
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.02em;
  white-space:nowrap;
  transition:transform .2s var(--ease),background-color .2s var(--ease),border-color .2s var(--ease);
}
.action svg{width:15px;height:15px;flex:0 0 auto}
.action:active{transform:scale(.96)}
.action--primary{
  background:linear-gradient(135deg,var(--gold-light),var(--gold));
  color:var(--navy-deeper);
}
.action--primary:hover{filter:brightness(1.06)}
.action--ghost{
  background:rgb(255 255 255 / .04);
  border:1px solid rgb(255 255 255 / .22);
  color:var(--white);
}
.action--ghost:hover{background:rgb(255 255 255 / .1)}

.qr{
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
}
.qr img{
  width:62px;height:62px;
  border-radius:10px;
  background:var(--white);
  padding:5px;
}
.qr figcaption{
  font-size:10px;
  letter-spacing:.04em;
  color:rgb(220 226 228 / .55);
}

.stage__hint{
  position:relative;
  z-index:1;
  margin:0;
  font-size:11.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:rgb(220 226 228 / .5);
  animation:hintFade 2s var(--ease) both;
  animation-delay:.6s;
}
@keyframes hintFade{from{opacity:0}to{opacity:1}}

.toast{
  position:fixed;
  left:50%;
  bottom:calc(26px + env(safe-area-inset-bottom));
  transform:translate(-50%,14px);
  z-index:20;
  background:var(--white);
  color:var(--navy-deeper);
  font-size:12.5px;
  font-weight:600;
  padding:11px 18px;
  border-radius:999px;
  box-shadow:0 14px 30px -10px rgb(0 0 0 / .5);
  opacity:0;
  pointer-events:none;
  transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.toast.is-visible{opacity:1;transform:translate(-50%,0)}

.credit{
  position:relative;
  z-index:1;
  text-align:center;
  font-size:11px;
  color:rgb(220 226 228 / .4);
  padding:0 20px 22px;
}
.credit a{color:rgb(220 226 228 / .7);text-decoration:underline;text-underline-offset:2px}
.credit a:hover{color:var(--gold-light)}

/* ---------- responsive ---------- */
@media (max-width:380px){
  .card__name{font-size:28px}
  .card__front-copy{padding-bottom:66px}
}
@media (min-width:640px){
  .stage{gap:28px}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .scene{animation:none}
  .card{transition:none;transform:none}
  .card__inner{transition:transform .01s linear}
  .ambient__blob{animation:none}
  .stage__hint{animation:none;opacity:1}
  .flip-trigger,.action,.social-row a{transition:none}
}