:root{
  --gold: #C6A45C;
  --gold-dark: #A9863F;
  --cream: #EAD8C1;
  --white: #FFFFFF;
  --brown: #8A6D46;
  --line: #DCC9A6;
  --ink: #2B2620;
  --ink-soft: #5B5348;
  --radius: 16px;
  --shadow: 0 10px 30px -12px rgba(120, 92, 42, 0.25);
}

*{ box-sizing: border-box; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

html,body{
  margin:0;
  padding:0;
}

body{
  font-family: 'Tajawal', sans-serif;
  background: linear-gradient(180deg, var(--cream) 0%, var(--white) 55%);
  color: var(--ink);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

.page{
  display:flex;
  justify-content:center;
  padding: 32px 16px 56px;
}

.card{
  width:100%;
  max-width: 420px;
  background: var(--white);
  border-radius: 24px;
  box-shadow: var(--shadow);
  padding: 30px 26px 24px;
  text-align:center;
  border: 1px solid var(--line);
  opacity: 0;
  transform: translateY(14px);
  animation: rise 0.7s ease forwards;
}

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

/* Crest divider */
.crest{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom: 18px;
}
.crest-bottom{ margin: 26px 0 22px; }
.crest-line{
  flex:1;
  height:1px;
  background: linear-gradient(90deg, transparent, var(--line) 40%, var(--line) 60%, transparent);
}
.crest-mark{
  color: var(--gold);
  font-size: 15px;
  transform: translateY(-1px);
}

/* Logo */
.logo-wrap{
  width: 78%;
  max-width: 260px;
  margin: 0 auto 6px;
  position: relative;
}
.logo-img{
  width:100%;
  height:auto;
  display:block;
  margin: 0 auto;
}
.logo-fallback{
  font-family:'El Messiri', serif;
  color: var(--gold-dark);
  font-size: 26px;
  font-weight:700;
  display:none;
  align-items:center;
  justify-content:center;
  padding: 20px 0;
}

.tagline{
  font-size: 14.5px;
  color: var(--brown);
  margin: 0 0 16px;
  font-weight: 500;
}

.bio{
  font-size: 14.5px;
  line-height: 1.9;
  color: var(--ink-soft);
  margin: 0 0 16px;
  padding: 0 4px;
}

.location{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color: var(--brown);
  text-decoration:none;
  font-size: 13.5px;
  font-weight: 500;
  border-bottom: 1px dashed var(--line);
  padding-bottom: 2px;
}
.location .i{ width:15px; height:15px; color: var(--gold); }

.divider{
  height:1px;
  background: linear-gradient(90deg, transparent, var(--line) 20%, var(--line) 80%, transparent);
  margin: 22px 0;
}

.section-title{
  font-family:'El Messiri', serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 14px;
  position: relative;
}

.buttons{
  display:flex;
  flex-direction:column;
  gap: 11px;
}

.btn{
  display:flex;
  align-items:center;
  gap: 12px;
  text-decoration:none;
  color: var(--ink);
  background: var(--white);
  border: 1.4px solid var(--gold);
  border-radius: 14px;
  padding: 12px 16px;
  transition: transform 0.15s ease, background 0.2s ease, box-shadow 0.2s ease;
  text-align: right;
}
.btn:active{ transform: scale(0.98); }
.btn:hover{ background: #FCF8F1; box-shadow: 0 6px 16px -8px rgba(198,164,92,0.45); }

.btn-primary{
  background: var(--gold);
  border-color: var(--gold);
  color: #fff;
}
.btn-primary:hover{ background: var(--gold-dark); }
.btn-primary .btn-icon{ background: rgba(255,255,255,0.22); color:#fff; }
.btn-primary .btn-sub{ color: rgba(255,255,255,0.85); }

.btn-icon{
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--cream);
  color: var(--gold-dark);
  display:flex;
  align-items:center;
  justify-content:center;
}
.btn-icon .i{ width:18px; height:18px; }

.btn-text{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.btn-label{
  font-size: 14.5px;
  font-weight: 600;
}
.btn-sub{
  font-size: 12.5px;
  color: var(--brown);
  direction: ltr;
  unicode-bidi: plaintext;
}

.social-row{
  display:flex;
  justify-content:center;
  gap: 16px;
}
.social-btn{
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--cream);
  color: var(--gold-dark);
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  border: 1px solid var(--line);
  transition: transform 0.15s ease, background 0.2s ease;
}
.social-btn:hover{ background: var(--gold); color:#fff; transform: translateY(-2px); }
.social-btn .i{ width:22px; height:22px; }

.btn-map{
  justify-content:center;
  background: var(--cream);
  border-color: var(--line);
  color: var(--brown);
  font-weight: 600;
  gap: 8px;
}
.btn-map .i{ width:17px; height:17px; color: var(--gold-dark); }
.btn-map:hover{ background: var(--gold); color:#fff; }
.btn-map:hover .i{ color:#fff; }

.footer{
  color: var(--brown);
  font-size: 11.5px;
  opacity: 0.85;
}
.footer p{ margin:0; }

/* Staggered reveal for buttons */
.buttons .btn, .social-row .social-btn{
  opacity: 0;
  transform: translateY(8px);
  animation: fadeUp 0.5s ease forwards;
}
.buttons .btn:nth-child(1){ animation-delay: 0.15s; }
.buttons .btn:nth-child(2){ animation-delay: 0.22s; }
.buttons .btn:nth-child(3){ animation-delay: 0.29s; }
.buttons .btn:nth-child(4){ animation-delay: 0.36s; }
.social-row .social-btn:nth-child(1){ animation-delay: 0.4s; }
.social-row .social-btn:nth-child(2){ animation-delay: 0.46s; }

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

@media (max-width: 380px){
  .card{ padding: 24px 18px 20px; }
  .brand{ font-size: 23px; }
}