/* Brand-first: the ஆ mark, the logo in the header, and the home banner led by the name. */
:root {
  --mark-gold: #E2AE3C;   /* the golden yellow of the zari border */
  --mark-red: #A3161A;
}

/* ---------- The mark: the logo's ஆ with its star, tinted with the text colour —
   deep gold on the cream header, soft gold when the header sits over the hero photo ---------- */
.mark {
  display: inline-block; flex: none; width: 40px; height: 38px; color: #9C6A12; background: currentColor;
  -webkit-mask: url(/shared/aa-mark.png) center / contain no-repeat; mask: url(/shared/aa-mark.png) center / contain no-repeat;
  transition: color .3s;
}
body.over-hero .hdr .mark { color: var(--gold-soft); }
.mark-img {width: 38px; height: 38px; object-fit: contain; flex: none; }

/* Header logo: mark + name, side by side */
.logo { flex-direction: row !important; align-items: center; gap: 10px; }
.logo-words { display: inline-flex; flex-direction: column; line-height: 1; }

/* ---------- Home banner: the name leads ---------- */
.hero-copy.brand-hero { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 16px 52px; }
.brand-hero > * { animation: rise 1.2s var(--ease) both; }
.hero-mark { width: 62px; height: 62px; margin-bottom: 18px; animation-delay: .35s; }
.mark-img.hero-mark { width: 72px; height: 72px; }
.hero-brand {
  margin: 0; font-family: var(--display); font-weight: 400; text-transform: uppercase; color: #FFF6E6;
  font-size: clamp(38px, 9.6vw, 176px); letter-spacing: .05em; line-height: .95;
  text-shadow: 0 4px 40px rgba(0, 0, 0, .45); animation-delay: .5s;
}
.brand-hero .hero-native { font-size: clamp(20px, 3vw, 34px); margin: 10px 0 14px; color: var(--gold-soft); animation-delay: .65s; }
.brand-hero .eyebrow { color: rgba(255, 246, 230, .85); margin: 0; animation-delay: .75s; }
.brand-hero .hero-ctas { justify-content: center; margin-top: 26px; animation-delay: .9s; }
.hero::after { background: radial-gradient(ellipse at 50% 85%, rgba(40, 8, 5, .7), transparent 65%), linear-gradient(180deg, rgba(52, 12, 8, .55) 0%, rgba(52, 12, 8, 0) 30%, rgba(52, 12, 8, .15) 55%, rgba(52, 12, 8, .85) 100%); }

/* Header over the photo gets a backing as soon as the page moves, so the garland never shows through the menu. */
body.over-hero .hdr.tinted { background: rgba(52, 12, 8, .86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

@media (min-width: 960px) {
  .hero-copy.brand-hero { display: flex; padding: 0 48px 64px; }
  .brand-hero .hero-ctas { flex-direction: row; margin: 30px 0 0; }
  .mark { width: 48px; height: 46px; }
}
@media (max-width: 639px) {
  .logo .mark { width: 34px; height: 32px; }
  .logo { gap: 7px; margin-left: 0 !important; }
  .logo-words { font-size: 15px; letter-spacing: .02em; }
  .logo-sub { font-size: 8px !important; }
  .hdr-right .hdr-btn { min-width: 38px; padding: 0 4px; }
}