:root { --teal: #003b3d; --gold: #d8b574; --ivory: #f8eedb; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; background: var(--teal); }
body { overflow: hidden; font-family: Arial, Helvetica, sans-serif; }
.hero { position: relative; width: 100%; height: 100%; min-height: 100svh; overflow: hidden; isolation: isolate; background: var(--teal); }
.hero-art { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.desktop-art { z-index: -1; object-position: center; animation: reveal 1s ease both; }
.mobile-art { display: none; z-index: -1; }
.headline { position: absolute; z-index: 1; left: 70%; top: 45%; transform: translate(-50%, -50%); width: 40%; text-align: center; color: var(--ivory); font-family: Georgia, 'Times New Roman', serif; font-size: clamp(32px, 4.2vw, 68px); font-weight: 400; letter-spacing: .12em; line-height: 1.04; text-shadow: 0 2px 18px rgba(235,190,112,.22); pointer-events: none; }
.headline span { display: inline-block; margin-top: .08em; }
.brand { position: absolute; top: clamp(18px, 5vh, 48px); left: 50%; transform: translateX(-50%); display: block; width: clamp(135px, 13vw, 190px); height: clamp(88px, 12vh, 125px); z-index: 2; }
.brand img { display: block; width: 100%; height: 100%; object-fit: contain; }
.mobile-tagline { display: none; }
.social-links { position: absolute; z-index: 2; left: 70%; bottom: clamp(18px, 4vh, 42px); transform: translateX(-50%); display: flex; align-items: center; justify-content: center; gap: clamp(14px, 2vw, 24px); }
.social-links a { width: clamp(34px, 3.1vw, 44px); height: clamp(34px, 3.1vw, 44px); display: grid; place-items: center; border: 1px solid rgba(224,190,126,.9); border-radius: 50%; color: var(--ivory); background: rgba(0,37,38,.16); transition: background .2s ease, color .2s ease, transform .2s ease; }
.social-links a:hover { background: var(--gold); color: var(--teal); transform: translateY(-3px); }
.social-links svg { width: 45%; height: 45%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.social-links svg .fill, .social-links svg .dot { fill: currentColor; stroke: none; }
@keyframes reveal { from { opacity: .65; filter: blur(7px); } to { opacity: 1; filter: blur(0); } }
@media (max-width: 700px) {
  .desktop-art { display: none; }
  .mobile-art { display: block; object-position: center; }
  .brand { top: max(22px, env(safe-area-inset-top)); left: 50%; width: clamp(100px, 27vw, 124px); height: clamp(70px, 18vw, 88px); }
  .headline { left: 69%; top: 38%; width: 58%; font-size: clamp(25px, 7vw, 32px); letter-spacing: .035em; line-height: 1.08; }
  .mobile-tagline { position: absolute; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 10px; left: 70%; top: 53%; transform: translateX(-50%); width: 57%; max-width: 330px; text-align: center; color: var(--ivory); font-family: Georgia, 'Times New Roman', serif; font-size: clamp(11px, 3.1vw, 14px); line-height: 1.7; letter-spacing: .09em; text-shadow: 0 2px 12px rgba(0,0,0,.55); }
  .mobile-divider { position: relative; display: block; width: 100%; height: 1px; background: linear-gradient(90deg, transparent, var(--gold) 16%, var(--gold) 84%, transparent); }
  .mobile-divider i { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); padding: 0 8px; color: var(--gold); background: #063c3d; font-size: 13px; font-style: normal; line-height: 1; }
  .social-links { left: 70%; top: 68%; bottom: auto; transform: translateX(-50%); gap: clamp(12px, 3.5vw, 18px); }
  .social-links a { width: clamp(36px, 9vw, 42px); height: clamp(36px, 9vw, 42px); background: rgba(0,37,38,.25); }
}
@media (max-width: 380px) {
  .headline { left: 69%; font-size: 25px; width: 60%; }
  .mobile-tagline { left: 70%; width: 58%; font-size: 11px; letter-spacing: .06em; }
  .social-links { left: 70%; }
}
@media (max-height: 700px) and (max-width: 700px) {
  .headline { top: 36%; }
  .mobile-tagline { top: 52%; }
  .social-links { top: 70%; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }