/* HERO v2. Scoped to the main cover and its existing header.
   No rules for entrance, booking, services, products or owner panel. */
@font-face {
  font-family: "Habibi Pirata";
  src: url("assets/fonts/PirataOne-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

.site-header {
  background: #10110ff5;
  box-shadow: 48px 0 #10110ff5, -48px 0 #10110ff5;
}
.site-header .brand-mark { border-color: #a67a38; color: #edbc75; }
.site-header nav a { transition: color .2s; }
.site-header nav a:hover { color: #f1bf7a; }

.hero-urban {
  --urban-gold: #eab443;
  position: relative;
  isolation: isolate;
  background: #10110f;
  min-height: clamp(690px, 53.5vw, 820px);
  display: grid;
  align-items: center;
}
.urban-scene { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.urban-scene img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  object-position: 66% 42%;
}
.hero-urban::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, #0b0d0bdd 0%, #0b0d0b99 29%, #0b0d0b22 52%, transparent 72%),
              linear-gradient(0deg, #10110f 0%, #10110f22 22%, transparent 72%, #10110f33);
}
.urban-scene figcaption {
  position: absolute; bottom: 21px; right: 4%; z-index: 1;
  font-size: 10px; line-height: 1.5; color: #d6d0c4;
  padding: 5px 9px; background: #10110fc7;
}
.urban-inner { padding-block: 42px 50px; }
.urban-copy { width: 55%; max-width: 650px; }
.urban-kicker {
  display: flex; align-items: center; gap: 24px;
  color: #ddd8cf; font-size: 11px; letter-spacing: .23em;
}
.urban-kicker>span { width: 36px; height: 1px; background: #e9af60; }
.urban-kicker b { font-weight: 400; color: #edb15e; font-size: 11px; }
.urban-wordmark {
  font: 400 clamp(140px, 18vw, 260px)/.96 "Habibi Pirata", Georgia, serif;
  letter-spacing: -.035em;
  color: var(--urban-gold);
  margin: 28px 0 30px;
  text-shadow: 0 2px 0 #8e631d40;
}
.urban-wordmark>span {
  display: block; font-family: "Arial Narrow", "Segoe UI", Arial, sans-serif;
  font-weight: 400; font-size: .22em; line-height: 1.3;
  letter-spacing: .265em; margin: 6px 0 0 4px;
}
.urban-tagline {
  color: #f6f2e9; font-size: 22px; font-weight: 550; line-height: 1.5;
  letter-spacing: .18em;
}
.urban-tagline br { display: none; }
.urban-tagline br::after { content: " "; }
.urban-description { color: #c6c2b9; font-size: 16px; line-height: 1.75; margin-top: 15px; }
.urban-actions { display: flex; align-items: center; gap: 28px; margin-top: 30px; }
.urban-actions .button {
  min-height: 59px; background: #efbb78; color: #15150f;
  padding: 17px 26px; border: 1px solid #f5d49e; border-radius: 4px;
  font-size: 14px; letter-spacing: 0; gap: 38px;
  transition: transform .2s, background .2s, box-shadow .2s;
}
.urban-actions .button>span { transition: transform .2s; }
.urban-local-link {
  display: inline-flex; gap: 17px; align-items: center; min-height: 48px;
  color: #f3eee5; font-size: 12px; white-space: nowrap;
  border-bottom: 1px solid #ada797; transition: color .2s, border-color .2s;
}
.urban-local-link>span { font-size: 22px; line-height: 1; transition: transform .2s; }
.urban-demo-note { font-size: 11px; color: #b7b6ad; margin-top: 12px; }
.urban-stats { display: flex; gap: 37px; margin-top: 37px; }
.urban-stats>span { display: flex; gap: 10px; align-items: center; font-size: 10px; letter-spacing: .08em; color: #d4cfc3; }
.urban-stats strong { font-size: 27px; font-weight: 500; line-height: 1.3; color: #f5f1e9; letter-spacing: -.04em; }

@media (hover:hover) {
  .urban-actions .button:hover { background: #f7cc92; transform: translateY(-3px); box-shadow: 0 8px 26px #0006; }
  .urban-actions .button:hover>span { transform: translate(2px,-2px); }
  .urban-local-link:hover { color: #f2bf7a; border-color: #f2bf7a; }
  .urban-local-link:hover>span { transform: translateY(3px); }
}
.urban-actions .button:active { transform: translateY(0) scale(.98); }
.hero-urban :is(a,button):focus-visible { outline: 2px solid #ffda9f; outline-offset: 6px; }

@media (max-width:1100px) {
  .urban-inner { padding-block: 48px 65px; }
  .urban-copy { width: 60%; }
  .urban-kicker { gap: 15px; font-size: 10px; }
  .urban-tagline { font-size: 19px; letter-spacing: .12em; }
  .urban-actions { gap: 20px; }
  .urban-actions .button { padding-inline: 21px; gap: 24px; font-size: 13px; }
  .urban-stats { gap: 25px; }
}
@media (max-width:800px) {
  .hero-urban { min-height: 650px; }
  .urban-copy { width: 65%; }
  .urban-wordmark { font-size: clamp(120px, 16vw, 150px); }
  .urban-kicker { gap: 13px; font-size: 9px; letter-spacing: .13em; }
  .urban-kicker>span { width: 23px; }
  .urban-description { font-size: 14px; }
  .urban-stats { gap: 20px; }
  .urban-stats>span { gap: 7px; font-size: 9px; }
  .urban-scene img { object-position: 64% center; }
  .hero-urban::before { background: linear-gradient(90deg,#0b0d0bef,#0b0d0b77 56%,#0b0d0b11),linear-gradient(0deg,#10110f,transparent 60%); }
  .site-header { box-shadow: 20px 0 #10110ff5, -20px 0 #10110ff5; }
}
@media (max-width:560px) {
  .hero-urban { min-height: 0; }
  .urban-inner { padding-block: 32px 38px; }
  .urban-copy { width: 100%; max-width: none; }
  .urban-scene img { height: 440px; object-position: 72% top; }
  .hero-urban::before {
    background: linear-gradient(180deg,#10110f0a 0,#10110f0a 190px,#10110fdd 335px,#10110f 440px),
                linear-gradient(90deg,#10110fb8 0%,#10110f33 55%,#10110f11);
  }
  .urban-kicker { font-size: 9px; gap: 13px; letter-spacing: .15em; }
  .urban-kicker>span { width: 22px; }
  .urban-wordmark { font-size: clamp(98px,39vw,200px); margin: 195px 0 25px; line-height: .95; }
  .urban-wordmark>span { font-size: .21em; letter-spacing: .22em; margin-left: 2px; }
  .urban-tagline { font-size: 18px; letter-spacing: .13em; line-height: 1.4; }
  .urban-description { font-size: 14px; margin-top: 13px; }
  .urban-actions { gap: 20px; margin-top: 24px; }
  .urban-actions .button { min-height: 54px; font-size: 12px; padding: 15px 17px; gap: 24px; }
  .urban-local-link { font-size: 11px; gap: 10px; min-height: 46px; }
  .urban-demo-note { font-size: 10px; }
  .urban-stats { gap: 12px; justify-content: space-between; margin-top: 27px; padding-top: 22px; border-top: 1px solid #39372e; }
  .urban-stats>span { font-size: 8px; gap: 7px; }
  .urban-stats strong { font-size: 24px; }
  .urban-scene figcaption { top: 210px; bottom: auto; right: 16px; max-width: 205px; font-size: 9px; line-height: 1.45; padding: 4px 7px; }
}
@media (max-width:360px) {
  .urban-kicker { gap: 9px; font-size: 8px; }
  .urban-actions { gap: 13px; }
  .urban-actions .button { padding-inline: 13px; gap: 15px; font-size: 11px; }
  .urban-local-link { font-size: 10px; }
  .urban-tagline { font-size: 16px; }
  .urban-stats>span { font-size: 7px; gap: 5px; }
}
@media (prefers-reduced-motion:reduce) {
  .hero-urban *, .hero-urban *::before, .hero-urban *::after { transition: none!important; animation: none!important; }
  .urban-actions .button:hover, .urban-actions .button:hover>span, .urban-local-link:hover>span { transform: none; }
}