/* HARONG CAROUSEL PATCH — isolated landing-hero revision only. */
.hero-carousel {
  position: relative;
  min-height: 100svh;
  display: block !important;
  overflow: hidden;
  isolation: isolate;
  background: #0b0705;
}
.hero-carousel .carousel-viewport { position:absolute; inset:0; z-index:0; overflow:hidden; }
.hero-carousel .hero-slide {
  position:absolute; inset:0;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .72s cubic-bezier(.22,.61,.36,1), visibility .72s linear;
}
.hero-carousel .hero-slide.is-active { opacity:1; visibility:visible; pointer-events:auto; z-index:2; }
.hero-carousel .hero-media { position:absolute; inset:0; width:100%; height:100%; z-index:0; }
.hero-carousel .hero-media picture,
.hero-carousel .hero-media img { display:block; width:100%; height:100%; }
.hero-carousel .hero-media img { object-fit:cover; object-position:center center; }
.hero-carousel .hero-media img { filter:brightness(1.10) saturate(1.08) contrast(1.04); }
.hero-carousel .hero-slide--brand .hero-media img { filter:brightness(1.06) saturate(1.05) contrast(1.03); }
.hero-carousel .hero-slide--brand .hero-media img { object-position:58% center; }
.hero-carousel .hero-shade {
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(12,7,4,.68) 0%, rgba(12,7,4,.50) 22%, rgba(12,7,4,.22) 42%, rgba(12,7,4,.06) 58%, rgba(12,7,4,0) 76%),
    linear-gradient(180deg, rgba(10,5,3,.05) 0%, rgba(10,5,3,0) 58%, rgba(10,5,3,.18) 100%);
}
.hero-carousel .hero-slide--brand .hero-shade {
  background:
    linear-gradient(90deg, rgba(12,7,4,.70) 0%, rgba(12,7,4,.48) 28%, rgba(12,7,4,.15) 52%, rgba(12,7,4,0) 74%),
    linear-gradient(180deg, rgba(10,5,3,.05) 0%, rgba(10,5,3,0) 58%, rgba(10,5,3,.22) 100%);
}
.hero-carousel .hero-content {
  position:relative !important; z-index:3 !important;
  min-height:100svh !important;
  display:grid !important;
  grid-template-columns:minmax(0, 1.05fr) minmax(320px, .95fr) !important;
  align-items:center !important;
  align-content:center !important;
  gap:clamp(36px,5vw,88px) !important;
  padding-top:110px !important;
  padding-bottom:98px !important;
  text-align:left !important;
}
.hero-carousel .hero-copy {
  position:relative !important; z-index:4 !important;
  display:block !important;
  width:min(100%, 690px) !important;
  max-width:690px !important;
  justify-self:start !important;
  opacity:1 !important; transform:none !important;
}
.hero-carousel .hero-copy h1 {
  margin:0;
  max-width:11.5ch !important;
  color:var(--paper);
  font-size:clamp(56px,6.35vw,96px) !important;
  line-height:.92 !important;
  letter-spacing:-.035em;
  text-wrap:balance;
  text-shadow:0 12px 34px rgba(0,0,0,.34);
}
.hero-carousel .hero-copy h1 em { color:var(--gold); font-weight:600; }
.hero-carousel .hero-lead {
  max-width:620px !important;
  margin:26px 0 0 !important;
  color:rgba(255,255,255,.82);
  font-size:clamp(15px,1.35vw,20px) !important;
  line-height:1.65 !important;
  text-shadow:0 4px 18px rgba(0,0,0,.45);
}
.hero-carousel .hero-actions { margin-top:30px !important; display:flex !important; width:auto !important; max-width:none !important; }
.hero-carousel .hero-actions .button { min-width:205px; justify-content:center; }
.hero-carousel .hero-emblem {
  position:relative !important; display:grid !important; place-items:center;
  width:min(39vw,560px) !important; max-width:560px;
  justify-self:end !important; margin:0 !important; top:auto !important; right:auto !important;
  opacity:1 !important; order:initial !important; pointer-events:none;
}
.hero-carousel .hero-emblem img { width:100%; height:auto; filter:drop-shadow(0 28px 48px rgba(0,0,0,.48)); }
.hero-carousel .emblem-glow { position:absolute; inset:13%; border-radius:50%; background:rgba(218,156,72,.14); filter:blur(42px); }
.hero-carousel .carousel-controls { position:absolute; inset:0; z-index:6; pointer-events:none; }
.hero-carousel .carousel-arrow {
  pointer-events:auto; position:absolute; top:50%; transform:translateY(-50%);
  width:54px; height:54px; border-radius:50%;
  border:1px solid rgba(226,173,97,.58); color:#fff;
  background:rgba(17,10,6,.48); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  display:grid; place-items:center; cursor:pointer;
  transition:background .22s ease, border-color .22s ease, transform .22s ease;
  font-size:30px; line-height:1;
}
.hero-carousel .carousel-arrow:hover { background:rgba(197,132,50,.72); border-color:var(--gold); transform:translateY(-50%) scale(1.04); }
.hero-carousel .carousel-prev { left:clamp(14px,2vw,32px); }
.hero-carousel .carousel-next { right:clamp(14px,2vw,32px); }
.hero-carousel .carousel-dots {
  pointer-events:auto; position:absolute; right:clamp(28px,5vw,76px); bottom:46px;
  display:flex; align-items:center; gap:11px; padding:10px 14px;
  border:1px solid rgba(255,255,255,.10); border-radius:999px;
  background:rgba(13,8,5,.30); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.hero-carousel .carousel-dot {
  width:10px; height:10px; border:1px solid rgba(255,255,255,.64); border-radius:50%;
  padding:0; background:transparent; cursor:pointer; transition:.25s ease;
}
.hero-carousel .carousel-dot.is-active { width:34px; border-radius:999px; border-color:var(--gold); background:var(--gold); }
.hero-carousel .scroll-cue { z-index:7; }
.hero-carousel:focus { outline:none; }
.hero-carousel:focus-visible { outline:2px solid var(--gold); outline-offset:-3px; }

@media (max-width: 980px) {
  .hero-carousel .hero-content {
    grid-template-columns:1fr !important;
    min-height:100svh !important;
    padding-top:112px !important;
    padding-bottom:108px !important;
    align-content:end !important;
    gap:0 !important;
    text-align:left !important;
  }
  .hero-carousel .hero-copy { justify-self:start !important; width:min(100%,650px) !important; max-width:650px !important; }
  .hero-carousel .hero-copy h1 { max-width:10.5ch !important; font-size:clamp(54px,9vw,80px) !important; }
  .hero-carousel .hero-emblem { position:absolute !important; width:min(48vw,430px) !important; right:4vw !important; top:18% !important; opacity:.64 !important; }
  .hero-carousel .hero-slide--brand .hero-shade,
  .hero-carousel .hero-shade {
    background:
      linear-gradient(180deg, rgba(12,7,4,.04) 0%, rgba(12,7,4,.02) 44%, rgba(12,7,4,.28) 68%, rgba(12,7,4,.66) 100%),
      linear-gradient(90deg, rgba(12,7,4,.18) 0%, rgba(12,7,4,.06) 46%, rgba(12,7,4,0) 72%);
  }
}

@media (max-width: 768px) {
  .hero-carousel { min-height:100svh !important; }
  .hero-carousel .hero-slide--brand .hero-media img { object-position:62% center; }
  .hero-carousel .hero-content {
    min-height:100svh !important;
    padding-top:92px !important;
    padding-bottom:112px !important;
    align-content:end !important;
  }
  .hero-carousel .hero-copy { width:100% !important; max-width:100% !important; }
  .hero-carousel .hero-copy h1 { max-width:9.7ch !important; font-size:clamp(43px,13vw,62px) !important; line-height:.94 !important; }
  .hero-carousel .hero-lead { max-width:35rem !important; margin-top:18px !important; font-size:14px !important; line-height:1.58 !important; }
  .hero-carousel .hero-actions { margin-top:23px !important; width:min(100%,340px) !important; }
  .hero-carousel .hero-actions .button { width:100%; min-height:50px; }
  .hero-carousel .hero-emblem { display:none !important; }
  .hero-carousel .hero-shade,
  .hero-carousel .hero-slide--brand .hero-shade {
    background:
      linear-gradient(180deg, rgba(12,7,4,0) 0%, rgba(12,7,4,.02) 42%, rgba(12,7,4,.30) 66%, rgba(12,7,4,.70) 100%),
      linear-gradient(90deg, rgba(12,7,4,.10) 0%, rgba(12,7,4,.03) 48%, rgba(12,7,4,0) 72%);
  }
  .hero-carousel .carousel-arrow { width:44px; height:44px; font-size:24px; top:48%; }
  .hero-carousel .carousel-prev { left:10px; }
  .hero-carousel .carousel-next { right:10px; }
  .hero-carousel .carousel-dots { right:50%; transform:translateX(50%); bottom:54px; gap:8px; padding:8px 11px; }
  .hero-carousel .carousel-dot { width:8px; height:8px; }
  .hero-carousel .carousel-dot.is-active { width:28px; }
  .hero-carousel .scroll-cue { display:none !important; }
}

@media (max-width: 430px) {
  .hero-carousel .hero-content { padding-top:86px !important; padding-bottom:105px !important; }
  .hero-carousel .hero-copy h1 { font-size:clamp(40px,12.5vw,54px) !important; }
  .hero-carousel .hero-lead { font-size:13.5px !important; }
  .hero-carousel .carousel-arrow { width:40px; height:40px; font-size:22px; opacity:.88; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-carousel .hero-slide { transition:none !important; }
  .hero-carousel .carousel-arrow, .hero-carousel .carousel-dot { transition:none !important; }
}

/* RESPONSIVE NORMALIZATION PATCH — 2026-09-24
   Layout-only hardening. Preserves approved artwork, copy, controls and carousel behavior. */

/* Use the live viewport where supported while keeping svh as the safe fallback. */
.hero-carousel,
.hero-carousel .hero-content {
  min-height: 100svh !important;
}
@supports (height: 100dvh) {
  .hero-carousel,
  .hero-carousel .hero-content {
    min-height: 100dvh !important;
  }
}

/* Medium desktop / landscape tablet: reserve a genuine arrow-safe text gutter and
   remove the old 981px -> 980px headline growth jump. */
@media (min-width: 769px) and (max-width: 1366px) {
  .hero-carousel .hero-content {
    width: min(1180px, calc(100% - 180px)) !important;
  }
  .hero-carousel .hero-copy h1 {
    font-size: clamp(50px, 5.45vw, 72px) !important;
  }
  .hero-carousel .hero-lead {
    margin-top: 20px !important;
    font-size: clamp(14px, 1.3vw, 18px) !important;
    line-height: 1.55 !important;
  }
  .hero-carousel .hero-actions {
    margin-top: 24px !important;
  }
}

/* Tablet shell: keep the approved bottom-weighted composition but make spacing
   proportional to viewport height rather than assuming a tall screen. */
@media (min-width: 769px) and (max-width: 980px) {
  .hero-carousel .hero-content {
    grid-template-columns: 1fr !important;
    align-content: end !important;
    gap: 0 !important;
    padding-top: clamp(88px, 13vh, 108px) !important;
    padding-bottom: clamp(92px, 13vh, 108px) !important;
  }
  .hero-carousel .hero-copy {
    width: min(100%, 620px) !important;
    max-width: 620px !important;
    justify-items: start !important;
  }
  .hero-carousel .hero-copy h1 {
    max-width: 10.5ch !important;
    font-size: clamp(48px, 6.2vw, 62px) !important;
  }
  .hero-carousel .hero-emblem {
    width: min(42vw, 360px, 44vh) !important;
    right: 4vw !important;
    top: clamp(112px, 16vh, 148px) !important;
  }
  .hero-carousel .carousel-dots {
    bottom: 42px;
  }
  .hero-carousel .scroll-cue {
    bottom: 18px;
  }
}

/* Short-height desktop / scaled Windows layouts. This is intentionally height-led:
   125%/150% display scaling reduces usable CSS height even on otherwise wide monitors. */
@media (min-width: 769px) and (max-height: 720px) {
  .hero-carousel .hero-content {
    padding-top: 86px !important;
    padding-bottom: 78px !important;
    gap: clamp(26px, 4vw, 58px) !important;
  }
  .hero-carousel .hero-copy h1 {
    font-size: clamp(44px, 5.3vw, 66px) !important;
    line-height: .94 !important;
  }
  .hero-carousel .hero-lead {
    margin-top: 16px !important;
    font-size: clamp(13.5px, 1.15vw, 16px) !important;
    line-height: 1.48 !important;
  }
  .hero-carousel .hero-actions {
    margin-top: 18px !important;
  }
  .hero-carousel .hero-actions .button {
    min-height: 48px;
  }
  .hero-carousel .hero-emblem {
    width: min(34vw, 430px, 54vh) !important;
  }
  .hero-carousel .carousel-dots {
    bottom: 36px;
  }
  .hero-carousel .scroll-cue {
    bottom: 12px;
  }
}

/* Extra-short effective viewport (e.g. 1366x768 around 150% display scaling).
   Keep every interactive/text element inside the hero instead of allowing clipping. */
@media (min-width: 769px) and (max-height: 560px) {
  .hero-carousel .hero-content {
    align-content: center !important;
    padding-top: 74px !important;
    padding-bottom: 58px !important;
  }
  .hero-carousel .hero-copy h1 {
    font-size: clamp(38px, 4.8vw, 54px) !important;
    max-width: 11.5ch !important;
  }
  .hero-carousel .hero-lead {
    margin-top: 12px !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    max-width: 560px !important;
  }
  .hero-carousel .hero-actions {
    margin-top: 14px !important;
  }
  .hero-carousel .hero-actions .button {
    min-height: 44px;
  }
  .hero-carousel .hero-emblem {
    display: none !important;
  }
  .hero-carousel .carousel-dots {
    bottom: 24px;
  }
  .hero-carousel .scroll-cue {
    display: none !important;
  }
}

/* Keep existing phone composition; only make its viewport sizing dynamic where supported. */
@media (max-width: 768px) {
  @supports (height: 100dvh) {
    .hero-carousel,
    .hero-carousel .hero-content {
      min-height: 100dvh !important;
    }
  }
}


/* SLIDE 1 ARTWORK REPLACEMENT + RIGHT MEDALLION MOTION — 2026-09-24
   Isolated to the brand slide. Background artwork contains no baked logo/text. */
.hero-carousel .hero-slide--brand .hero-media img {
  object-position: 50% center;
}
.hero-carousel .hero-slide--brand .hero-emblem img {
  transform-origin: 50% 50%;
  animation: harongMedallionDrift 9s ease-in-out infinite alternate !important;
  will-change: transform;
}
@keyframes harongMedallionDrift {
  0%   { transform: translate3d(0, 0, 0) rotate(-2deg) scale(1); }
  50%  { transform: translate3d(0, -8px, 0) rotate(1deg) scale(1.012); }
  100% { transform: translate3d(0, 4px, 0) rotate(3deg) scale(1.005); }
}
@media (min-width: 769px) and (max-width: 1100px) {
  .hero-carousel .hero-slide--brand .hero-media img {
    object-position: 54% center;
  }
}
@media (max-width: 768px) {
  .hero-carousel .hero-slide--brand .hero-media img {
    object-position: 57% center;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-carousel .hero-slide--brand .hero-emblem img {
    animation: none !important;
    transform: none !important;
  }
}

/* HEADER RESTORE + SLIDE 1 MEDALLION TEST B — 2026-09-24
   Restore the approved always-readable top panel. Slide 1: small lower-center medallion. */
.site-header {
  background: rgba(20, 13, 9, .94) !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(226, 173, 97, .24);
  box-shadow: 0 6px 24px rgba(0,0,0,.18);
}
.hero-carousel .hero-slide--brand .hero-emblem {
  display: grid !important;
  position: absolute !important;
  width: clamp(108px, 9.5vw, 152px) !important;
  max-width: 152px !important;
  left: 58% !important;
  right: auto !important;
  top: auto !important;
  bottom: clamp(76px, 9vh, 96px) !important;
  transform: translateX(-50%) !important;
  opacity: .88 !important;
  margin: 0 !important;
  z-index: 4;
}
.hero-carousel .hero-slide--brand .hero-emblem img {
  filter: drop-shadow(0 12px 24px rgba(0,0,0,.42)) !important;
  animation-duration: 12s !important;
}
.hero-carousel .hero-slide--brand .emblem-glow {
  inset: 16% !important;
  opacity: .42;
  filter: blur(20px) !important;
}
@media (min-width: 769px) and (max-width: 1100px) {
  .hero-carousel .hero-slide--brand .hero-emblem {
    width: clamp(96px, 11vw, 126px) !important;
    left: 59% !important;
    bottom: 76px !important;
  }
}
@media (max-width: 768px) {
  .hero-carousel .hero-slide--brand .hero-emblem {
    display: none !important;
  }
}

/* HEADER MEDALLION — TRANSPARENT CIRCULAR CROP + SLOW SPIN/HOVER — 2026-09-24
   Header brand only. Does not affect the locked Slide 1 lower medallion or footer logo. */
.site-header .brand > img {
  background: transparent !important;
  border-radius: 50% !important;
  clip-path: circle(47.8% at 50% 50%);
  -webkit-clip-path: circle(47.8% at 50% 50%);
  transform-origin: 50% 50% !important;
  animation: harongHeaderMedallionSpinHover 12s linear infinite !important;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,.36));
  will-change: transform;
  backface-visibility: hidden;
}

@keyframes harongHeaderMedallionSpinHover {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
  25%  { transform: translate3d(0, -1.5px, 0) rotate(90deg); }
  50%  { transform: translate3d(0, 0, 0) rotate(180deg); }
  75%  { transform: translate3d(0, 1.5px, 0) rotate(270deg); }
  100% { transform: translate3d(0, 0, 0) rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .site-header .brand > img {
    animation: none !important;
    transform: none !important;
  }
}


/* HARONG CAROUSEL CTA NORMALIZATION — 2026-09-24
   Carousel-only: every slide uses the same Menu + Facebook action pair. */
.hero-carousel .hero-actions--dual {
  gap: 12px !important;
  align-items: center;
}
.hero-carousel .hero-actions--dual .button {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
}
.hero-carousel .hero-actions--dual .button-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  display: block;
}
.hero-carousel .hero-actions--dual .button-icon-menu {
  width: 19px;
  height: 19px;
}
.hero-carousel .hero-actions--dual .button-icon-facebook {
  width: 21px;
  height: 21px;
  flex-basis: 21px;
}
.hero-carousel .hero-actions--dual .hero-cta-facebook {
  background: rgba(22,15,11,.72);
  border-color: rgba(244,228,201,.38);
}
.hero-carousel .hero-actions--dual .hero-cta-facebook:hover {
  background: rgba(22,15,11,.88);
  border-color: var(--gold);
}

@media (max-width: 768px) {
  .hero-carousel .hero-actions--dual {
    gap: 10px !important;
  }
  .hero-carousel .hero-actions--dual .button {
    min-height: 48px;
  }
}

@media (max-width: 430px) {
  .hero-carousel .hero-actions--dual .button {
    font-size: 12px;
    padding-inline: 18px;
  }
}