/* Heritage Auto Finance — Elite finish layer, October 2026.
   Additive presentation-only enhancements; no existing business logic is replaced. */
:root {
  --haf-elite-gold: #e1c27a;
  --haf-elite-gold-soft: rgba(225,194,122,.15);
  --haf-elite-purple: #a28bd0;
  --haf-elite-border: rgba(225,194,122,.22);
}
body {
  background-image:
    radial-gradient(ellipse at 4% 18%, rgba(120,82,158,.12), transparent 31rem),
    radial-gradient(ellipse at 94% 48%, rgba(225,194,122,.055), transparent 28rem);
  background-attachment: scroll;
}
.section-title {
  text-wrap: balance;
  letter-spacing: -.025em;
}
.section-subtitle {
  max-width: 760px;
  margin-inline: auto;
  line-height: 1.75;
  text-wrap: pretty;
}
.hero-banner {
  overflow: clip;
}
.hero-banner .main-poster {
  border: 1px solid var(--haf-elite-border);
  border-radius: clamp(14px, 2vw, 26px);
  box-shadow: 0 22px 65px rgba(0,0,0,.34), 0 0 0 1px rgba(255,255,255,.025) inset;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.hero-cta {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 999px;
  padding: 13px 22px;
  font-weight: 700;
  text-decoration: none;
}
.hero-cta-primary {
  background: linear-gradient(135deg, #f2dda4, #c39b4b);
  color: #171019;
  box-shadow: 0 8px 28px rgba(195,155,75,.18);
}
.hero-cta-secondary {
  border: 1px solid rgba(225,194,122,.5);
  background: rgba(255,255,255,.025);
}
.hero-cta:hover { transform: translateY(-2px); }
.trust-strip > div, .stat-item, .journey-step, .detail-box, .review-card,
.calc-card, .form-container, .enquiry-path, .service-tile {
  border-color: var(--haf-elite-border);
}
.service-tile, .enquiry-path, .journey-step, .detail-box, .review-card {
  border-radius: 18px;
}
.service-tile, .enquiry-path {
  background-image: linear-gradient(145deg, rgba(255,255,255,.035), rgba(255,255,255,.008));
}
.service-tile:focus-visible, .enquiry-path:focus-visible {
  outline: 2px solid var(--haf-elite-gold);
  outline-offset: 4px;
}
.detail-box h3, .journey-step h3, .review-card h4 {
  text-wrap: balance;
}
.detail-box li, .journey-step p, .review-card p {
  line-height: 1.75;
}
.poster-grid .poster-item {
  overflow: hidden;
  background: #100d15;
  border: 1px solid rgba(225,194,122,.18);
  border-radius: 16px;
}
.poster-grid .poster-item img {
  display: block;
  width: 100%;
  transition: transform .35s ease, filter .35s ease;
}
.poster-grid .poster-item:hover img {
  transform: scale(1.025);
  filter: saturate(1.04);
}
.calc-card {
  background: linear-gradient(145deg, rgba(30,24,38,.96), rgba(14,11,18,.98));
  box-shadow: 0 18px 50px rgba(0,0,0,.22);
  border-radius: 22px;
}
.calc-card input[type="range"] { accent-color: var(--haf-elite-gold); }
.emi-result {
  border: 1px solid rgba(225,194,122,.22);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(225,194,122,.09), rgba(162,139,208,.06));
}
.emi-whatsapp-cta {
  border-radius: 999px;
  font-weight: 700;
}
.faq-item {
  border: 1px solid rgba(225,194,122,.16);
  border-radius: 14px;
  margin-block: 10px;
  overflow: clip;
}
.faq-item.active {
  border-color: rgba(225,194,122,.45);
  background: rgba(225,194,122,.035);
}
.form-container {
  border: 1px solid var(--haf-elite-border);
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(31,24,39,.97), rgba(13,10,17,.98));
  box-shadow: 0 22px 65px rgba(0,0,0,.25);
}
.form-container input, .form-container select, .form-container textarea {
  border-radius: 12px;
}
.heritage-proof-strip {
  border-block: 1px solid rgba(225,194,122,.18);
  background: linear-gradient(100deg, rgba(225,194,122,.055), rgba(162,139,208,.055));
}
footer {
  border-top: 1px solid rgba(225,194,122,.22);
  background: linear-gradient(180deg, rgba(17,12,22,.7), #08060b);
}
.footer-legal a { text-underline-offset: 4px; }
.mobile-quick-actions {
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(225,194,122,.2);
  box-shadow: 0 -8px 30px rgba(0,0,0,.18);
}
@media (max-width: 640px) {
  .hero-actions { align-items: stretch; flex-direction: column; }
  .hero-cta { width: 100%; box-sizing: border-box; }
  .hero-banner .main-poster { border-radius: 14px; }
  .section-subtitle { padding-inline: 8px; }
  .calc-card, .form-container { border-radius: 17px; }
}
@media (hover: none) {
  .poster-grid .poster-item:hover img { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .poster-grid .poster-item img { transition: none; }
}

/* Helpful contact fallback when the third-party callback form is blocked. */
.form-fallback-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 18px 0 4px;
  padding: 15px;
  border: 1px solid rgba(225,194,122,.2);
  border-radius: 14px;
  background: rgba(225,194,122,.035);
}
.form-fallback-actions p { flex-basis: 100%; margin: 0; color: #c5bdce; font-size: .9rem; text-align: center; }
.form-fallback-actions a { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; padding: 10px 16px; border-radius: 999px; border: 1px solid rgba(225,194,122,.42); text-decoration: none; font-weight: 700; }
.form-fallback-actions a:first-of-type { background: linear-gradient(135deg,#f2dda4,#c39b4b); color: #171019; border-color: transparent; }
.form-fallback-actions a:focus-visible { outline: 2px solid #f2d99b; outline-offset: 3px; }
@media (max-width: 480px) { .form-fallback-actions a { width: 100%; box-sizing: border-box; } }

/* Native share action for quick customer referrals. */
.site-share-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  margin: 8px 0 12px;
  padding: 11px 18px;
  border: 1px solid rgba(225,194,122,.52);
  border-radius: 999px;
  color: #f2dda4;
  background: rgba(225,194,122,.07);
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}
.site-share-button:hover { background: rgba(225,194,122,.14); }
.site-share-button:focus-visible { outline: 2px solid #f2d99b; outline-offset: 4px; }


/* Conversion and accessibility polish: clear service actions and semantic hero heading. */
.hero-banner .typing-container {
  margin-block: 22px 16px;
  max-width: 760px;
}
.service-tile {
  min-height: 92px;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.service-tile strong { line-height: 1.35; }
.service-tile small { line-height: 1.5; }
.service-tile b {
  flex: 0 0 auto;
  transition: transform .2s ease, color .2s ease;
}
.service-tile:hover b { transform: translate(2px,-2px); color: var(--haf-elite-gold); }
.service-tile:active { transform: scale(.99); }
@media (max-width: 640px) {
  .hero-banner .typing-container { margin-block: 18px 12px; }
  .service-tile { min-height: 84px; }
}


/* Next-level performance, mobile ergonomics and keyboard comfort. */
@media (max-width: 760px) {
  .mobile-quick-actions {
    padding-bottom: max(10px, env(safe-area-inset-bottom));
  }
  body { padding-bottom: env(safe-area-inset-bottom); }
  .float-wa { bottom: calc(82px + env(safe-area-inset-bottom)); }
  .back-to-top { bottom: calc(142px + env(safe-area-inset-bottom)); }
}
@media (hover: none) {
  .hero-cta:hover, .service-tile:hover, .site-share-button:hover { transform: none; }
}
:where(a, button, input, select, textarea) { touch-action: manipulation; }


/* Visible keyboard skip link */
.skip-link {
  position: fixed;
  z-index: 2000;
  top: 12px;
  left: 12px;
  transform: translateY(calc(-100% - 20px));
  padding: 12px 16px;
  border: 2px solid #f2dda4;
  border-radius: 10px;
  background: #100b16;
  color: #ffe7a0;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
  box-shadow: 0 8px 28px rgba(0,0,0,.4);
}
.skip-link:focus, .skip-link:focus-visible {
  transform: translateY(0);
  outline: 3px solid #ffe7a0;
  outline-offset: 3px;
}
#main-content:focus { outline: none; }
@media (prefers-reduced-motion: reduce) {
  .skip-link { transition: none !important; }
}


/* Subtle 3D depth accents — CSS-only, lightweight, and brand-safe. */
.hero-banner {
  position: relative;
  isolation: isolate;
  perspective: 1100px;
  transform-style: preserve-3d;
}
.hero-banner::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 15%;
  right: clamp(18px, 6vw, 90px);
  width: clamp(100px, 16vw, 190px);
  aspect-ratio: 1;
  border: 2px solid rgba(225,194,122,.58);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, rgba(225,194,122,.2), rgba(162,139,208,.075) 48%, transparent 72%);
  box-shadow: inset 0 0 32px rgba(225,194,122,.1), 0 0 42px rgba(162,139,208,.16), 0 0 12px rgba(225,194,122,.12);
  transform: rotateX(66deg) rotateZ(-24deg) translateZ(18px);
  pointer-events: none;
  animation:haf-orbit-float 11s ease-in-out infinite alternate;
}
.hero-banner > * {
  position: relative;
  z-index: 1;
}
.hero-banner::after {
  will-change: transform;
}
@keyframes haf-orbit-float {
  from { transform: rotateX(66deg) rotateZ(-24deg) translate3d(0, 0, 18px); }
  to { transform: rotateX(66deg) rotateZ(-12deg) translate3d(-8px, 10px, 34px); }
}
.service-tile, .enquiry-path, .journey-step, .review-card {
  transform-style: preserve-3d;
  transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease;
}
@media (hover: hover) and (pointer: fine) {
  .service-tile:hover, .enquiry-path:hover, .journey-step:hover, .review-card:hover {
    transform: perspective(900px) rotateX(1.5deg) translateY(-4px);
    box-shadow: 0 14px 32px rgba(0,0,0,.22), 0 0 0 1px rgba(225,194,122,.08);
  }
}
@media (max-width: 640px) {
  .hero-banner::after { top: 8%; right: 10px; width: 96px; opacity: .72; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-banner::after { animation: none !important; }
  .service-tile, .enquiry-path, .journey-step, .review-card { transition: none !important; }
}


/* Dedicated orbit element avoids conflicts with the hero's existing ::before/::after artwork. */
.hero-banner { position: relative; isolation: isolate; }
.hero-banner > .haf-3d-orbit {
  position: absolute;
  z-index: 1;
  top: 9%;
  right: 3%;
  width: clamp(115px, 18vw, 230px);
  aspect-ratio: 1;
  border: 2px solid rgba(246,200,95,.72);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, rgba(246,200,95,.19), rgba(143,67,187,.08) 48%, transparent 72%);
  box-shadow: inset 0 0 30px rgba(246,200,95,.11), 0 0 38px rgba(143,67,187,.2), 0 0 14px rgba(246,200,95,.14);
  transform: rotateX(66deg) rotateZ(-24deg) translateZ(18px);
  pointer-events: none;
  animation: haf-orbit-float 11s ease-in-out infinite alternate;
}
.hero-banner > .haf-3d-orbit::after {
  content: "";
  position: absolute;
  inset: 18%;
  border: 1px solid rgba(143,67,187,.72);
  border-radius: 50%;
  transform: rotateY(62deg) rotateZ(42deg);
}
.hero-banner > .secure-badge,
.hero-banner > .typing-container,
.hero-banner > .hero-supporting,
.hero-banner > .hero-actions,
.hero-banner > .hero-trust-points,
.hero-banner > .main-poster { position: relative; z-index: 2; }
@keyframes haf-orbit-float {
  from { margin-top: 0; transform: rotateX(66deg) rotateZ(-24deg) translate3d(0,0,18px); }
  to { margin-top: 8px; transform: rotateX(66deg) rotateZ(-12deg) translate3d(-8px,10px,34px); }
}
@media (max-width: 700px) {
  .hero-banner > .haf-3d-orbit { top: 7%; right: 6%; width: 105px; opacity: .85; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-banner > .haf-3d-orbit { animation: none !important; }
}


/* 3D ring polish: animate only transforms and keep the orbit visible over the poster edge. */
.hero-banner > .haf-3d-orbit {
  z-index: 3;
  right: 1.5%;
  top: 5%;
  mix-blend-mode: screen;
  will-change: transform;
}
@keyframes haf-orbit-float {
  from { transform: rotateX(66deg) rotateZ(-24deg) translate3d(0,0,18px); }
  to { transform: rotateX(66deg) rotateZ(-12deg) translate3d(-8px,10px,34px); }
}
@media (max-width: 700px) {
  .hero-banner > .haf-3d-orbit {
    top: 4%;
    right: 4%;
    width: 94px;
    opacity: .9;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-banner > .haf-3d-orbit { animation: none !important; will-change: auto; }
}


/* Next-level finish: clear hierarchy, refined hover lift, and reduced-motion safety. */
.hero-banner {
  border-color: rgba(246,200,95,.34) !important;
  box-shadow: 0 28px 80px rgba(0,0,0,.38), 0 0 52px rgba(143,67,187,.12) !important;
}
.hero-banner > .haf-3d-orbit {
  filter: drop-shadow(0 0 12px rgba(246,200,95,.22));
}
.hero-banner > .hero-actions .hero-cta {
  position: relative;
  overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease !important;
}
.hero-banner > .hero-actions .hero-cta-primary:hover {
  box-shadow: 0 14px 36px rgba(246,200,95,.3) !important;
}
.service-tile, .enquiry-path, .journey-step, .detail-box, .review-card, .calc-card {
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease !important;
}
@media (hover: hover) and (pointer: fine) {
  .service-tile:hover, .enquiry-path:hover, .journey-step:hover, .detail-box:hover, .review-card:hover, .calc-card:hover {
    transform: translateY(-4px);
    border-color: rgba(246,200,95,.42);
    box-shadow: 0 16px 38px rgba(0,0,0,.24), 0 0 22px rgba(143,67,187,.08);
  }
}
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid #ffe7a0;
  outline-offset: 3px;
}
@media (max-width: 700px) {
  .hero-banner > .hero-actions .hero-cta { min-height: 52px; }
  .hero-banner > .haf-3d-orbit { pointer-events: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-banner > .hero-actions .hero-cta,
  .service-tile, .enquiry-path, .journey-step, .detail-box, .review-card, .calc-card {
    transition: none !important;
  }
}


/* Next-to-next-level finish: premium micro-interactions, reading comfort and mobile clarity. */
#scrollProgress {
  height: 3px !important;
  background: linear-gradient(90deg, #8f43bb 0%, #f6c85f 58%, #fff0b8 100%) !important;
  box-shadow: 0 0 12px rgba(246,200,95,.42);
  transform-origin: left center;
}
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
::selection { color: #171019; background: rgba(246,200,95,.82); }
.hero-banner > .hero-actions .hero-cta-primary {
  position: relative;
  isolation: isolate;
  box-shadow: 0 10px 28px rgba(195,155,75,.2), inset 0 1px 0 rgba(255,255,255,.4) !important;
}
.hero-banner > .hero-actions .hero-cta-primary::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,.38) 48%, transparent 72%);
  transform: translateX(-130%);
  transition: transform .65s ease;
}
@media (hover:hover) and (pointer:fine) {
  .hero-banner > .hero-actions .hero-cta-primary:hover::after { transform: translateX(130%); }
}
.faq-item { transition: border-color .2s ease, background-color .2s ease; }
.faq-item:focus-visible { outline: 2px solid #ffe7a0; outline-offset: 3px; }
.poster-grid .poster-item img { cursor: zoom-in; }
.form-container input:focus, .form-container select:focus, .form-container textarea:focus {
  border-color: rgba(246,200,95,.78) !important;
  box-shadow: 0 0 0 3px rgba(246,200,95,.12) !important;
}
.mobile-quick-actions a { min-height: 46px; }
@media (max-width: 700px) {
  html { scroll-padding-top: 72px; }
  .hero-banner > .haf-3d-orbit { right: 5%; top: 3.5%; width: clamp(78px, 23vw, 94px); }
  .hero-banner .hero-supporting { max-width: 38ch; margin-inline: auto; }
  .hero-trust-points { gap: 8px; }
  .hero-trust-points > * { line-height: 1.35; }
  .poster-grid .poster-item { border-radius: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-banner > .hero-actions .hero-cta-primary::after { display: none; }
}


/* Conversion-focused refinement: clear interaction states and stronger content rhythm. */
.hero-banner .hero-supporting { max-width: 64ch; text-wrap: pretty; }
.hero-banner .hero-trust-points > * {
  border: 1px solid rgba(246,200,95,.18);
  border-radius: 999px;
  padding: 7px 11px;
  background: rgba(10,7,15,.34);
  backdrop-filter: blur(8px);
}
.section-title::after {
  content: "";
  display: block;
  width: 54px;
  height: 2px;
  margin: 14px auto 0;
  border-radius: 99px;
  background: linear-gradient(90deg, #8f43bb, #f6c85f);
  opacity: .85;
}
.service-rail-heading h2 { text-wrap: balance; }
.service-tile, .enquiry-path, .journey-step, .detail-box, .review-card, .calc-card, .poster-grid .poster-item {
  -webkit-tap-highlight-color: transparent;
}
.poster-preview-dialog {
  max-width: min(94vw, 1100px);
  max-height: 92dvh;
  padding: clamp(12px, 2vw, 24px);
  border: 1px solid rgba(246,200,95,.38);
  border-radius: 20px;
  background: rgba(12,8,17,.97);
  color: #fff;
  box-shadow: 0 28px 90px rgba(0,0,0,.62), 0 0 40px rgba(143,67,187,.12);
}
.poster-preview-dialog::backdrop { background: rgba(5,3,8,.82); backdrop-filter: blur(8px); }
.poster-preview-dialog figure { margin: 0; display: grid; justify-items: center; gap: 10px; }
.poster-preview-dialog figure img { display: block; max-width: 100%; max-height: 76dvh; object-fit: contain; border-radius: 10px; }
.poster-preview-dialog figcaption { color: #e8d9b1; font-size: .9rem; text-align: center; }
.poster-preview-dialog button { min-width: 42px; min-height: 42px; border: 1px solid rgba(246,200,95,.42); border-radius: 999px; background: #17101e; color: #ffe7a0; font: inherit; font-size: 1.4rem; cursor: pointer; }
.poster-preview-dialog button:disabled { opacity: .4; cursor: not-allowed; }
.poster-preview-dialog .poster-preview-close { position: sticky; float: right; top: 0; }
.poster-preview-dialog .poster-preview-prev, .poster-preview-dialog .poster-preview-next { position: absolute; top: 50%; transform: translateY(-50%); }
.poster-preview-dialog .poster-preview-prev { left: 8px; }
.poster-preview-dialog .poster-preview-next { right: 8px; }
@media (max-width: 600px) {
  .poster-preview-dialog { width: calc(100vw - 24px); box-sizing: border-box; border-radius: 15px; }
  .poster-preview-dialog .poster-preview-prev { left: 4px; }
  .poster-preview-dialog .poster-preview-next { right: 4px; }
  .hero-banner .hero-trust-points > * { font-size: .78rem; padding: 6px 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-banner .hero-trust-points > * { backdrop-filter: none; }
}


/* Cinematic 3D layer: restrained automotive motion, not a heavy WebGL dependency. */
.hero-banner { overflow: hidden; }
.hero-banner::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -35% -18%;
  pointer-events: none;
  background: conic-gradient(from 210deg at 70% 38%, transparent 0 18%, rgba(143,67,187,.11) 23%, transparent 30% 58%, rgba(246,200,95,.075) 64%, transparent 72%);
  transform: translate3d(0,0,-1px) rotate(-7deg);
  animation: haf-cinematic-sweep 18s ease-in-out infinite alternate;
}
.hero-banner > .haf-3d-orbit { transform-style: preserve-3d; }
.hero-banner > .main-poster {
  transform: perspective(1400px) rotateX(.35deg) translateZ(0);
  transform-origin: center top;
  transition: transform .55s cubic-bezier(.2,.7,.2,1), box-shadow .55s ease;
}
@media (hover:hover) and (pointer:fine) {
  .hero-banner:hover > .main-poster {
    transform: perspective(1400px) rotateX(1deg) translateY(-2px) translateZ(8px);
    box-shadow: 0 30px 80px rgba(0,0,0,.4), 0 0 34px rgba(143,67,187,.12);
  }
  .poster-grid .poster-item:hover { transform: perspective(900px) rotateY(-1deg) translateY(-3px); }
}
.service-rail { perspective: 1000px; }
.service-tile { transform-style: preserve-3d; }
.service-tile b { text-shadow: 0 2px 12px rgba(246,200,95,.18); }
.stats-bar .stat-item h3 { text-shadow: 0 0 24px rgba(246,200,95,.1); }
@keyframes haf-cinematic-sweep {
  from { transform: translate3d(-1%,0,-1px) rotate(-7deg); opacity: .55; }
  to { transform: translate3d(1.5%,1%,-1px) rotate(-3deg); opacity: 1; }
}
@media (max-width: 700px) {
  .hero-banner::before { inset: -20% -35%; opacity: .6; animation-duration: 24s; }
  .hero-banner > .main-poster { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-banner::before { animation: none !important; }
  .hero-banner > .main-poster { transition: none !important; transform: none !important; }
  .poster-grid .poster-item { transition: none !important; }
}


/* Visibility fix: make the hero's 3D orbit unmistakable on mobile and desktop. */
.hero-banner > .haf-3d-orbit {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 8 !important;
  top: 16px !important;
  right: 18px !important;
  width: clamp(112px, 17vw, 205px) !important;
  aspect-ratio: 1 !important;
  border: 3px solid #f6c85f !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at 32% 28%, rgba(255,239,179,.38), rgba(143,67,187,.24) 43%, rgba(8,7,17,.04) 72%) !important;
  box-shadow: 0 0 0 5px rgba(246,200,95,.10), inset 0 0 28px rgba(246,200,95,.28), 0 0 24px rgba(246,200,95,.62), 0 0 58px rgba(143,67,187,.48) !important;
  transform: perspective(650px) rotateX(62deg) rotateZ(-22deg) !important;
  animation: haf-orbit-visible 5.5s ease-in-out infinite alternate !important;
}
.hero-banner > .haf-3d-orbit::before {
  content: "" !important;
  position: absolute !important;
  inset: 13% !important;
  border: 2px solid rgba(198,126,255,.95) !important;
  border-radius: 50% !important;
  box-shadow: 0 0 18px rgba(198,126,255,.65) !important;
  transform: rotateY(58deg) rotateZ(30deg) !important;
}
.hero-banner > .haf-3d-orbit::after {
  inset: 29% !important;
  border: 2px solid rgba(255,235,171,.95) !important;
  box-shadow: 0 0 18px rgba(246,200,95,.6) !important;
  transform: rotateY(-58deg) rotateZ(-35deg) !important;
}
@keyframes haf-orbit-visible {
  from { transform: perspective(650px) rotateX(62deg) rotateZ(-22deg) translateY(0) scale(.98); }
  to { transform: perspective(650px) rotateX(62deg) rotateZ(18deg) translateY(8px) scale(1.04); }
}
@media (max-width: 700px) {
  .hero-banner > .haf-3d-orbit {
    top: 12px !important;
    right: 12px !important;
    width: clamp(96px, 27vw, 124px) !important;
  }
  .hero-banner > .secure-badge,
  .hero-banner > .typing-container,
  .hero-banner > .hero-supporting,
  .hero-banner > .hero-actions,
  .hero-banner > .hero-trust-points,
  .hero-banner > .main-poster { position: relative; z-index: 2; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-banner > .haf-3d-orbit { animation: none !important; }
}


/* Signature motion system: animated orbit, light reflections, and tactile depth. */
.hero-banner { overflow: hidden; }
.hero-banner > .haf-3d-orbit {
  transform-origin: 50% 50%;
  will-change: transform, filter;
  animation: haf-signature-orbit 7s cubic-bezier(.45,0,.55,1) infinite alternate !important;
}
.hero-banner > .haf-3d-orbit::before { animation: haf-inner-orbit 9s linear infinite; }
.hero-banner > .haf-3d-orbit::after { animation: haf-inner-orbit 6s linear infinite reverse; }
.hero-banner::after {
  filter: saturate(1.12);
}
.hero-banner > .secure-badge {
  box-shadow: 0 0 0 1px rgba(246,200,95,.08), 0 0 24px rgba(246,200,95,.09);
}
.hero-banner > .hero-actions .hero-cta-primary {
  box-shadow: 0 10px 28px rgba(246,200,95,.12), inset 0 1px rgba(255,255,255,.16);
}
.hero-banner > .hero-actions .hero-cta-primary::after {
  content: "";
  position: absolute;
  top: -30%;
  bottom: -30%;
  left: -45%;
  width: 30%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.32), transparent);
  transform: skewX(-22deg);
  animation: haf-cta-glint 5.8s ease-in-out infinite;
  pointer-events: none;
}
.service-tile, .poster-grid .poster-item, .review-card {
  transform-style: preserve-3d;
  backface-visibility: hidden;
}
@keyframes haf-signature-orbit {
  0% { transform: perspective(650px) rotateX(62deg) rotateZ(-28deg) translate3d(0,0,0) scale(.96); filter: drop-shadow(0 0 9px rgba(246,200,95,.35)); }
  50% { filter: drop-shadow(0 0 20px rgba(198,126,255,.52)); }
  100% { transform: perspective(650px) rotateX(62deg) rotateZ(28deg) translate3d(-4px,9px,0) scale(1.05); filter: drop-shadow(0 0 16px rgba(246,200,95,.6)); }
}
@keyframes haf-inner-orbit {
  from { rotate: 0deg; }
  to { rotate: 360deg; }
}
@keyframes haf-cta-glint {
  0%, 68% { left: -45%; opacity: 0; }
  72% { opacity: 1; }
  88%, 100% { left: 130%; opacity: 0; }
}
@media (max-width: 700px) {
  .hero-banner > .haf-3d-orbit {
    width: clamp(88px, 25vw, 116px) !important;
    top: 10px !important;
    right: 10px !important;
  }
  .hero-banner > .hero-actions .hero-cta-primary::after { animation-duration: 7s; }
  .hero-banner > .main-poster { box-shadow: 0 20px 44px rgba(0,0,0,.42), 0 0 0 1px rgba(246,200,95,.28) !important; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-banner > .haf-3d-orbit,
  .hero-banner > .haf-3d-orbit::before,
  .hero-banner > .haf-3d-orbit::after,
  .hero-banner > .hero-actions .hero-cta-primary::after {
    animation: none !important;
  }
}


/* Next-level interaction polish: pointer-reactive tilt, animated metallic border, and clear focus. */
.hero-banner {
  --haf-pointer-x: 50%;
  --haf-pointer-y: 40%;
  position: relative;
  isolation: isolate;
}
.hero-banner::before {
  background:
    radial-gradient(420px circle at var(--haf-pointer-x) var(--haf-pointer-y), rgba(246,200,95,.12), transparent 68%),
    conic-gradient(from 210deg at 70% 38%, transparent 0 18%, rgba(143,67,187,.10) 23%, transparent 30% 58%, rgba(246,200,95,.06) 64%, transparent 72%) !important;
}
.hero-banner::after {
  pointer-events: none;
}
.hero-banner > .main-poster {
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s ease, border-color .45s ease !important;
}
.hero-banner > .main-poster:hover {
  border-color: rgba(246,200,95,.9) !important;
  box-shadow: 0 34px 90px rgba(0,0,0,.56), 0 0 0 1px rgba(246,200,95,.28), 0 0 60px rgba(143,67,187,.26) !important;
}
.hero-banner > .hero-actions .hero-cta {
  isolation: isolate;
}
.hero-banner > .hero-actions .hero-cta-primary {
  border: 1px solid rgba(255,231,165,.75) !important;
}
.hero-banner > .hero-actions .hero-cta-secondary:hover {
  background: rgba(143,67,187,.14) !important;
  box-shadow: 0 10px 30px rgba(143,67,187,.18) !important;
}
.hero-trust-points > * {
  transition: transform .25s ease, border-color .25s ease, background .25s ease !important;
}
@media (hover:hover) and (pointer:fine) {
  .hero-trust-points > *:hover {
    transform: translateY(-3px);
    border-color: rgba(246,200,95,.5) !important;
    background: rgba(246,200,95,.07) !important;
  }
  .service-tile:hover {
    transform: perspective(900px) rotateX(2deg) translateY(-5px) translateZ(5px);
  }
}
.poster-grid .poster-item img {
  transition: transform .5s cubic-bezier(.2,.7,.2,1), filter .5s ease !important;
}
@media (hover:hover) and (pointer:fine) {
  .poster-grid .poster-item:hover img {
    transform: scale(1.035);
    filter: saturate(1.08) contrast(1.025);
  }
}
:where(.hero-cta, .service-tile, .poster-grid .poster-item, .mobile-quick-actions a):focus-visible {
  outline: 2px solid #f6c85f !important;
  outline-offset: 4px !important;
}
@media (max-width: 700px) {
  .hero-banner::before {
    background: radial-gradient(ellipse at 78% 10%, rgba(246,200,95,.11), transparent 45%) !important;
  }
  .hero-banner > .main-poster:hover { transform: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-banner > .main-poster,
  .hero-trust-points > *,
  .poster-grid .poster-item img {
    transition: none !important;
  }
}


/* Premium cinematic finish: animated edge light, restrained scroll reveal and glass surfaces. */
.hero-banner {
  border: 1px solid transparent !important;
  background:
    linear-gradient(145deg, rgba(10,8,19,.98), rgba(17,10,29,.96)) padding-box,
    conic-gradient(from var(--haf-edge-angle, 0deg), rgba(246,200,95,.18), rgba(143,67,187,.78), rgba(246,200,95,.88), rgba(143,67,187,.24), rgba(246,200,95,.18)) border-box !important;
  animation: haf-edge-turn 14s linear infinite;
}
@property --haf-edge-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
@keyframes haf-edge-turn { to { --haf-edge-angle: 360deg; } }
.hero-banner > .secure-badge,
.hero-trust-points > *,
.service-tile,
.poster-grid .poster-item,
.review-card {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.hero-banner > .secure-badge {
  background: linear-gradient(110deg, rgba(246,200,95,.10), rgba(143,67,187,.08)) !important;
}
.stats-bar .stat-item {
  transition: transform .25s ease, border-color .25s ease;
}
@media (hover:hover) and (pointer:fine) {
  .stats-bar .stat-item:hover { transform: translateY(-3px); }
}
.hero-banner > .hero-actions .hero-cta-primary {
  position: relative;
  overflow: hidden;
  background-image: linear-gradient(110deg, rgba(246,200,95,.08), transparent 38%, rgba(255,255,255,.12) 50%, transparent 62%) !important;
  background-size: 240% 100% !important;
  animation: haf-button-sheen 8s ease-in-out infinite;
}
@keyframes haf-button-sheen {
  0%, 65% { background-position: 120% 0; }
  85%, 100% { background-position: -120% 0; }
}
.hero-banner > .hero-supporting {
  text-wrap: pretty;
}
.hero-banner > .main-poster {
  filter: drop-shadow(0 12px 24px rgba(0,0,0,.18));
}
@media (max-width: 700px) {
  .hero-banner { animation-duration: 22s; }
  .hero-banner > .hero-actions .hero-cta-primary { animation-duration: 10s; }
  .hero-banner > .secure-badge,
  .hero-trust-points > *,
  .service-tile,
  .poster-grid .poster-item,
  .review-card { -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-banner,
  .hero-banner > .hero-actions .hero-cta-primary { animation: none !important; }
}


/* Executive-grade finish: depth hierarchy, scroll-friendly sections, and refined micro-interactions. */
:root {
  --haf-gold-halo: rgba(246,200,95,.16);
  --haf-purple-halo: rgba(143,67,187,.16);
}
.hero-banner > .hero-trust-points > * {
  border: 1px solid rgba(246,200,95,.18);
  box-shadow: inset 0 1px rgba(255,255,255,.035);
}
.stats-bar {
  position: relative;
  isolation: isolate;
}
.stats-bar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(143,67,187,.075), rgba(246,200,95,.055), transparent);
  background-size: 220% 100%;
  animation: haf-stat-glow 16s ease-in-out infinite;
}
.stats-bar .stat-item h3 {
  background: linear-gradient(110deg, #fff1c5 10%, #f6c85f 45%, #d5a6ff 80%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
.service-tile {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(246,200,95,.16);
  box-shadow: inset 0 1px rgba(255,255,255,.035), 0 14px 34px rgba(0,0,0,.12);
}
.service-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(115deg, transparent 20%, rgba(255,255,255,.055) 48%, transparent 70%);
  transform: translateX(-65%);
  transition: opacity .3s ease, transform .6s ease;
}
@media (hover:hover) and (pointer:fine) {
  .service-tile:hover::after {
    opacity: 1;
    transform: translateX(65%);
  }
}
.poster-grid .poster-item {
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(0,0,0,.18), inset 0 1px rgba(255,255,255,.04);
}
.poster-grid .poster-item img {
  transform-origin: center;
}
section[id] {
  scroll-margin-top: clamp(78px, 8vw, 110px);
}
:where(.hero-banner, .service-tile, .poster-grid .poster-item, .review-card) {
  -webkit-tap-highlight-color: transparent;
}
@keyframes haf-stat-glow {
  0%, 100% { background-position: 100% 0; opacity: .55; }
  50% { background-position: 0 0; opacity: 1; }
}
@media (max-width: 700px) {
  .stats-bar::before { animation-duration: 22s; }
  .service-tile { box-shadow: inset 0 1px rgba(255,255,255,.025), 0 8px 22px rgba(0,0,0,.12); }
  .poster-grid .poster-item { box-shadow: 0 8px 20px rgba(0,0,0,.16); }
}
@media (prefers-reduced-motion: reduce) {
  .stats-bar::before { animation: none !important; }
  .service-tile::after { transition: none !important; }
}


/* Interactive depth: pointer-following hero glow and restrained poster tilt. */
.hero-banner::before {
  background:
    radial-gradient(420px circle at var(--haf-pointer-x, 50%) var(--haf-pointer-y, 40%), rgba(246,200,95,.17), transparent 68%),
    conic-gradient(from 210deg at 70% 38%, transparent 0 18%, rgba(143,67,187,.10) 23%, transparent 30% 58%, rgba(246,200,95,.06) 64%, transparent 72%) !important;
  transition: background-position .12s linear;
}
.poster-grid .poster-item {
  transition: transform .22s ease, box-shadow .3s ease !important;
  transform-style: preserve-3d;
}
.poster-grid .poster-item::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(220px circle at var(--haf-card-x, 50%) var(--haf-card-y, 50%), rgba(246,200,95,.13), transparent 72%);
  transition: opacity .25s ease;
}
@media (hover:hover) and (pointer:fine) {
  .poster-grid .poster-item:hover::after { opacity: 1; }
}
@media (max-width: 700px), (prefers-reduced-motion: reduce) {
  .poster-grid .poster-item { transform: none !important; transition: none !important; }
  .poster-grid .poster-item::after { display: none; }
}


/* Navigation feedback: highlight the section currently in view. */
nav .nav-links a {
  position: relative;
  transition: color .22s ease, background-color .22s ease;
}
nav .nav-links a[aria-current="location"] {
  color: #f6d98d !important;
}
nav .nav-links a[aria-current="location"]::after {
  content: "";
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: -5px;
  height: 2px;
  border-radius: 99px;
  background: linear-gradient(90deg, #f6c85f, #b98be8);
  box-shadow: 0 0 12px rgba(246,200,95,.25);
}
@media (max-width: 700px) {
  nav .nav-links a[aria-current="location"]::after { bottom: -3px; }
}
@media (prefers-reduced-motion: reduce) {
  nav .nav-links a { transition: none !important; }
}


/* Twin-orbit signature mark: a second, contrasting ring makes the 3D motif legible at a glance. */
.hero-banner > .haf-3d-orbit-secondary {
  position: absolute;
  z-index: 3;
  top: calc(5% + 24px);
  right: calc(1.5% + 20px);
  width: clamp(92px, 14vw, 172px);
  aspect-ratio: 1;
  display: block;
  border: 2px solid rgba(196,145,255,.92);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(196,145,255,.18), rgba(143,67,187,.035) 52%, transparent 72%);
  box-shadow: inset 0 0 24px rgba(196,145,255,.14), 0 0 24px rgba(143,67,187,.38), 0 0 9px rgba(246,200,95,.25);
  transform: perspective(650px) rotateX(58deg) rotateZ(36deg);
  pointer-events: none;
  animation: haf-secondary-orbit 9s ease-in-out infinite alternate;
}
.hero-banner > .haf-3d-orbit-secondary::before {
  content: "";
  position: absolute;
  inset: 22%;
  border: 1px dashed rgba(246,200,95,.85);
  border-radius: 50%;
  transform: rotateY(62deg) rotateZ(-28deg);
}
@keyframes haf-secondary-orbit {
  0% { transform: perspective(650px) rotateX(58deg) rotateZ(36deg) translate3d(0,0,0); }
  100% { transform: perspective(650px) rotateX(58deg) rotateZ(112deg) translate3d(4px,-7px,0); }
}
@media (max-width: 700px) {
  .hero-banner > .haf-3d-orbit-secondary {
    top: calc(4% + 12px);
    right: calc(4% + 10px);
    width: 74px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-banner > .haf-3d-orbit-secondary { animation: none !important; }
}

/* Direct WhatsApp enquiry form — clear, mobile-first and keyboard accessible. */
.direct-wa-enquiry{margin-top:24px;padding:clamp(16px,3vw,24px);border:1px solid rgba(246,200,95,.24);border-radius:18px;background:linear-gradient(145deg,rgba(246,200,95,.045),rgba(143,67,187,.07))}
.direct-wa-enquiry h4{margin:0 0 8px;color:#f6d98d;font-size:1.12rem}
.direct-wa-enquiry>p{margin:0 0 16px;color:#d2cbd9;line-height:1.6;font-size:.9rem}
.direct-wa-form{display:grid;gap:9px}
.direct-wa-form label{margin-top:5px;color:#f4edf9;font-size:.9rem;font-weight:600}
.direct-wa-form input,.direct-wa-form select,.direct-wa-form textarea{box-sizing:border-box;width:100%;min-height:46px;padding:12px 13px;color:#fff;background:rgba(8,6,13,.88);border:1px solid rgba(246,200,95,.28);border-radius:10px;font:inherit}
.direct-wa-form select option{color:#171019;background:#fff}
.direct-wa-form textarea{min-height:88px;resize:vertical}
.direct-wa-form input:focus-visible,.direct-wa-form select:focus-visible,.direct-wa-form textarea:focus-visible,.direct-wa-form button:focus-visible{outline:2px solid #f6c85f;outline-offset:3px}
.direct-wa-form button{min-height:48px;margin-top:8px;padding:12px 18px;border:0;border-radius:999px;color:#160f1b;background:linear-gradient(115deg,#f6d98d,#d5a6ff);font:inherit;font-weight:750;cursor:pointer}
.direct-wa-form button:hover{filter:brightness(1.06);transform:translateY(-1px)}
.direct-wa-status{min-height:1.2em;margin:0;color:#f6d98d;font-size:.85rem}
@media(prefers-reduced-motion:reduce){.direct-wa-form button{transition:none!important}}


/* Mobile refinement pass: keep the headline readable, CTAs legible, and orbit clear of the poster. */
.hero-banner{min-width:0;overflow:hidden}
.hero-banner .typing-container{max-width:100%;overflow-wrap:normal;word-break:normal;line-height:1.12}
.hero-banner .typed-text{display:inline-block;max-width:100%;overflow-wrap:normal;word-break:normal}
.hero-banner .hero-actions{position:relative;z-index:5;display:flex;flex-wrap:wrap;gap:12px}
.hero-banner .hero-cta{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:12px 18px;box-sizing:border-box;text-align:center;font-weight:750;line-height:1.25;text-decoration:none}
.hero-banner .hero-cta-primary{color:#17101c!important;background:linear-gradient(115deg,#ffe7a5,#f6c85f)!important;text-shadow:none!important;box-shadow:0 8px 24px rgba(246,200,95,.18)}
.hero-banner .hero-cta-secondary{color:#fff!important;background:linear-gradient(135deg,rgba(143,67,187,.22),rgba(18,12,29,.96))!important;border:1px solid rgba(196,145,255,.6)!important}
.hero-banner .main-poster{position:relative;z-index:2;max-width:100%;height:auto;object-fit:contain}
.hero-banner>.haf-3d-orbit,.hero-banner>.haf-3d-orbit-secondary{z-index:1;pointer-events:none}
@media(max-width:700px){
  .hero-banner{padding:clamp(18px,5vw,28px)!important;gap:16px}
  .hero-banner .typing-container{font-size:clamp(2rem,8.2vw,3rem)!important;line-height:1.08!important;letter-spacing:-.035em;min-height:2.15em}
  .hero-banner .typed-text{font-size:inherit;line-height:inherit}
  .hero-banner .hero-supporting{font-size:.96rem;line-height:1.65;max-width:42rem}
  .hero-banner .hero-actions{display:grid;grid-template-columns:1fr;gap:10px;width:100%}
  .hero-banner .hero-cta{width:100%;min-height:48px;padding:13px 16px;border-radius:12px}
  .hero-banner .main-poster{width:min(100%,390px);margin-inline:auto}
  .hero-banner>.haf-3d-orbit{opacity:.45;transform:scale(.72);transform-origin:top right}
  .hero-banner>.haf-3d-orbit-secondary{opacity:.4;top:10px!important;right:10px!important;width:58px!important}
  .hero-banner .hero-trust-points{position:relative;z-index:2;gap:8px}
  .hero-banner .hero-trust-points>*{line-height:1.35}
}
@media(max-width:380px){
  .hero-banner .typing-container{font-size:clamp(1.8rem,7.8vw,2.2rem)!important}
  .hero-banner .hero-trust-points>*{font-size:.75rem}
}


/* Final mobile UX pass: clearer navigation, thumb-friendly links, and safer floating actions. */
nav .nav-links a{
  min-height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 10px;
  border-radius:999px;
}
nav .nav-links a:hover,
nav .nav-links a:focus-visible{
  background:rgba(246,200,95,.08);
}
nav .nav-logo{flex:0 1 auto;min-width:0}
.float-wa{
  width:58px;
  height:58px;
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  border:2px solid rgba(255,255,255,.8);
  box-shadow:0 8px 26px rgba(37,211,102,.38),0 0 0 5px rgba(37,211,102,.08);
}
@media(max-width:760px){
  nav{
    padding:10px 14px!important;
    gap:8px!important;
    row-gap:10px!important;
  }
  nav .nav-logo{height:44px!important;max-width:48vw}
  nav .nav-links{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr));
    width:100%;
    gap:5px!important;
  }
  nav .nav-links a{
    min-width:0;
    min-height:38px;
    padding:7px 3px;
    font-size:clamp(.62rem,2.6vw,.74rem)!important;
    letter-spacing:.02em!important;
    white-space:nowrap;
  }
  .float-wa{
    right:14px!important;
    bottom:calc(14px + env(safe-area-inset-bottom,0px))!important;
    width:54px!important;
    height:54px!important;
    font-size:28px!important;
    z-index:1002;
  }
  .back-to-top{bottom:calc(78px + env(safe-area-inset-bottom,0px))!important}
  main,section[id]{scroll-margin-top:120px!important}
}
@media(max-width:360px){
  nav .nav-links a{font-size:.59rem!important;padding-inline:1px}
  nav .nav-logo{height:40px!important}
}
@media(prefers-reduced-motion:reduce){
  .float-wa{animation:none!important}
}


/* Enquiry quality pass: make validation and submission feedback easier to notice. */
.direct-wa-form input:invalid:not(:placeholder-shown){
  border-color:rgba(255,117,117,.8)!important;
  box-shadow:0 0 0 2px rgba(255,117,117,.09);
}
.direct-wa-form input:valid:not(:placeholder-shown){
  border-color:rgba(72,207,137,.48);
}
.direct-wa-form button{
  transition:filter .2s ease,transform .2s ease,box-shadow .2s ease;
  box-shadow:0 8px 22px rgba(143,67,187,.2);
}
.direct-wa-form button:active{transform:translateY(1px)}
.direct-wa-status{overflow-wrap:anywhere;line-height:1.55}
@media(max-width:700px){
  .direct-wa-enquiry{scroll-margin-top:120px}
  .direct-wa-form button{width:100%;min-height:50px}
}


/* Text-only contrast correction: preserve the original CTA shape/background; use readable warm ivory text. */
.hero-banner .hero-cta-primary,
.hero-banner .hero-cta-primary:link,
.hero-banner .hero-cta-primary:visited,
.hero-banner .hero-cta-primary:hover,
.hero-banner .hero-cta-primary:active {
  color: #fff3cf !important;
  -webkit-text-fill-color: #fff3cf !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.35) !important;
}



/* Compact the callback section on phones without changing the premium visual style. */
@media (max-width: 600px) {
  #contact.lead-form-section {
    margin-top: 22px !important;
    padding: 26px 12px !important;
    background-attachment: scroll !important;
  }
  #contact .form-container {
    width: 100% !important;
    max-width: 460px !important;
    padding: 18px 14px !important;
    border-radius: 16px !important;
    box-shadow: 0 0 28px rgba(244,180,26,.16) !important;
  }
  #contact .form-container h3 {
    margin: 0 0 8px !important;
    font-size: clamp(1.35rem, 5.4vw, 1.65rem) !important;
    line-height: 1.2 !important;
  }
  #contact .form-container > p:not(.form-privacy-note) {
    margin: 0 0 12px !important;
    font-size: .8rem !important;
    line-height: 1.45 !important;
  }
  #contact .direct-wa-enquiry {
    margin-top: 10px !important;
    padding: 13px 12px !important;
    border-radius: 14px !important;
  }
  #contact .direct-wa-enquiry h4 {
    margin: 0 0 6px !important;
    font-size: .98rem !important;
    line-height: 1.35 !important;
  }
  #contact .direct-wa-enquiry > p {
    margin: 0 0 10px !important;
    font-size: .78rem !important;
    line-height: 1.45 !important;
  }
  #contact .direct-wa-form { gap: 6px !important; }
  #contact .direct-wa-form label {
    margin-top: 2px !important;
    font-size: .8rem !important;
    line-height: 1.25 !important;
  }
  #contact .direct-wa-form input,
  #contact .direct-wa-form select {
    min-height: 40px !important;
    padding: 9px 10px !important;
    font-size: .86rem !important;
    border-radius: 9px !important;
  }
  #contact .direct-wa-form textarea {
    min-height: 62px !important;
    padding: 9px 10px !important;
    font-size: .86rem !important;
    border-radius: 9px !important;
  }
  #contact .direct-wa-form button {
    min-height: 44px !important;
    margin-top: 4px !important;
    padding: 10px 12px !important;
    font-size: .88rem !important;
  }
  #contact .form-fallback-actions {
    margin-top: 10px !important;
    padding: 10px !important;
    gap: 8px !important;
  }
  #contact .form-fallback-actions p {
    margin: 0 0 6px !important;
    font-size: .74rem !important;
    line-height: 1.4 !important;
  }
  #contact .form-fallback-actions a {
    padding: 9px 12px !important;
    font-size: .8rem !important;
  }
  #contact .form-privacy-note {
    margin: 10px 0 0 !important;
    font-size: .7rem !important;
    line-height: 1.45 !important;
  }
}


/* Final mobile callback-card tightening: reduce excess vertical height while keeping all contact options usable. */
@media (max-width: 600px) {
  #contact.lead-form-section { padding: 18px 10px !important; margin-top: 14px !important; }
  #contact .form-container { padding: 14px 12px !important; }
  #contact .form-container h3 { font-size: 1.28rem !important; margin-bottom: 6px !important; }
  #contact .form-container > p:not(.form-privacy-note) { margin-bottom: 8px !important; }
  #contact .direct-wa-enquiry { margin-top: 7px !important; padding: 10px !important; }
  #contact .direct-wa-enquiry h4 { font-size: .92rem !important; margin-bottom: 4px !important; }
  #contact .direct-wa-enquiry > p { margin-bottom: 7px !important; font-size: .74rem !important; line-height: 1.35 !important; }
  #contact .direct-wa-form { gap: 4px !important; }
  #contact .direct-wa-form label { margin-top: 1px !important; font-size: .76rem !important; }
  #contact .direct-wa-form input,
  #contact .direct-wa-form select { min-height: 36px !important; padding: 7px 9px !important; font-size: .82rem !important; }
  #contact .direct-wa-form textarea { min-height: 48px !important; height: 48px !important; padding: 7px 9px !important; font-size: .82rem !important; }
  #contact .direct-wa-form button { min-height: 40px !important; margin-top: 3px !important; padding: 8px 10px !important; }
  #contact .form-fallback-actions { margin-top: 7px !important; padding: 8px !important; gap: 6px !important; }
  #contact .form-fallback-actions p { font-size: .7rem !important; margin-bottom: 3px !important; }
  #contact .form-fallback-actions a { min-height: 34px !important; padding: 7px 10px !important; font-size: .74rem !important; }
  #contact .form-privacy-note { margin-top: 7px !important; font-size: .66rem !important; line-height: 1.35 !important; }
}


/* Strong mobile-only cleanup: remove duplicate fallback contact panel; WhatsApp submit and floating phone remain available. */
@media screen and (max-width: 600px) {
  #contact.lead-form-section { padding: 14px 10px !important; margin: 10px 0 0 !important; }
  #contact .form-container { padding: 12px 11px !important; margin: 0 auto !important; }
  #contact .form-container h3 { margin: 0 0 5px !important; font-size: 1.22rem !important; line-height: 1.2 !important; }
  #contact .form-container > p:not(.form-privacy-note) { margin: 0 0 7px !important; font-size: .76rem !important; line-height: 1.35 !important; }
  #contact .direct-wa-enquiry { margin: 6px 0 0 !important; padding: 9px 10px !important; }
  #contact .direct-wa-enquiry h4 { font-size: .88rem !important; line-height: 1.25 !important; margin: 0 0 4px !important; }
  #contact .direct-wa-enquiry > p { font-size: .70rem !important; line-height: 1.3 !important; margin: 0 0 6px !important; }
  #contact .direct-wa-form { gap: 3px !important; }
  #contact .direct-wa-form label { font-size: .72rem !important; line-height: 1.15 !important; margin: 0 !important; }
  #contact .direct-wa-form input,
  #contact .direct-wa-form select { height: 34px !important; min-height: 34px !important; padding: 5px 8px !important; font-size: .78rem !important; }
  #contact .direct-wa-form textarea { height: 42px !important; min-height: 42px !important; padding: 6px 8px !important; font-size: .78rem !important; }
  #contact .direct-wa-form button { height: 38px !important; min-height: 38px !important; padding: 7px 10px !important; margin-top: 2px !important; font-size: .8rem !important; }
  #contact .direct-wa-status:empty { display: none !important; }
  #contact .form-fallback-actions { display: none !important; }
  #contact .form-privacy-note { font-size: .62rem !important; line-height: 1.3 !important; margin: 6px 0 0 !important; }
}


/* Next-level callback experience: compact, clear, and consistent on narrow screens. */
#contact .form-container { max-width: 560px; }
#contact .form-container > p:not(.form-privacy-note) { margin-bottom: 14px !important; }
#contact .direct-wa-enquiry { margin-top: 10px !important; }
@media (max-width: 700px) {
  #contact.lead-form-section { padding: 16px 10px !important; }
  #contact .form-container { max-width: 440px !important; padding: 14px 12px !important; }
  #contact .form-container h3 { font-size: 1.25rem !important; line-height: 1.2 !important; margin-bottom: 6px !important; }
  #contact .form-container > p:not(.form-privacy-note) { font-size: .76rem !important; line-height: 1.4 !important; margin: 0 0 8px !important; }
  #contact .direct-wa-enquiry { margin: 7px 0 0 !important; padding: 10px !important; }
  #contact .direct-wa-enquiry h4 { font-size: .9rem !important; line-height: 1.25 !important; margin: 0 0 5px !important; }
  #contact .direct-wa-enquiry > p { font-size: .72rem !important; line-height: 1.35 !important; margin: 0 0 7px !important; }
  #contact .direct-wa-form { gap: 4px !important; }
  #contact .direct-wa-form label { font-size: .74rem !important; line-height: 1.2 !important; margin: 0 !important; }
  #contact .direct-wa-form input, #contact .direct-wa-form select { height: 36px !important; min-height: 36px !important; padding: 6px 9px !important; font-size: .8rem !important; }
  #contact .direct-wa-form textarea { height: 46px !important; min-height: 46px !important; padding: 6px 9px !important; font-size: .8rem !important; }
  #contact .direct-wa-form button { height: 40px !important; min-height: 40px !important; margin-top: 3px !important; padding: 8px 10px !important; }
  #contact .form-fallback-actions { display: none !important; }
  #contact .form-privacy-note { font-size: .64rem !important; line-height: 1.35 !important; margin-top: 7px !important; }
}


/* Heritage premium callback v2: focused layout, cleaner inputs, better mobile rhythm. */
#contact.lead-form-section {
  scroll-margin-top: 90px;
}
#contact .form-container {
  width: min(100% - 28px, 540px) !important;
  margin-inline: auto !important;
  border: 1px solid rgba(246,200,95,.24) !important;
  background: linear-gradient(145deg, rgba(31,22,39,.97), rgba(13,9,20,.98)) !important;
}
#contact .form-container h3 {
  text-wrap: balance;
}
#contact .direct-wa-enquiry {
  border: 1px solid rgba(246,200,95,.2) !important;
  background: linear-gradient(155deg, rgba(37,25,43,.92), rgba(20,12,28,.96)) !important;
}
#contact .direct-wa-form input,
#contact .direct-wa-form select,
#contact .direct-wa-form textarea {
  width: 100% !important;
  box-sizing: border-box !important;
  border: 1px solid rgba(215,187,232,.18) !important;
  background: #100b18 !important;
  color: #fff7e7 !important;
  outline: none !important;
  transition: border-color .18s ease, box-shadow .18s ease !important;
}
#contact .direct-wa-form input:focus,
#contact .direct-wa-form select:focus,
#contact .direct-wa-form textarea:focus {
  border-color: #e8bd55 !important;
  box-shadow: 0 0 0 3px rgba(232,189,85,.13) !important;
}
#contact .direct-wa-form input::placeholder,
#contact .direct-wa-form textarea::placeholder {
  color: #a89cad !important;
  opacity: 1 !important;
}
#contact .direct-wa-form button {
  width: 100% !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: linear-gradient(105deg,#ffe7a5,#f4c75f 58%,#e4a8ff) !important;
  color: #24152b !important;
  -webkit-text-fill-color: #24152b !important;
  font-weight: 800 !important;
  box-shadow: 0 7px 20px rgba(216,161,69,.16) !important;
}
@media (max-width: 600px) {
  #contact.lead-form-section { padding: 12px 8px !important; }
  #contact .form-container {
    width: 100% !important;
    max-width: 410px !important;
    padding: 12px 10px !important;
    border-radius: 15px !important;
  }
  #contact .form-container h3 { font-size: 1.2rem !important; }
  #contact .form-container > p:not(.form-privacy-note) { margin-bottom: 7px !important; }
  #contact .direct-wa-enquiry { padding: 9px !important; }
  #contact .direct-wa-enquiry > p { max-width: 34ch; margin-inline: auto !important; }
  #contact .direct-wa-form { display: grid !important; gap: 4px !important; }
  #contact .direct-wa-form input,
  #contact .direct-wa-form select { height: 35px !important; min-height: 35px !important; }
  #contact .direct-wa-form textarea { height: 44px !important; min-height: 44px !important; resize: vertical !important; }
  #contact .direct-wa-form button { min-height: 40px !important; }
  #contact .form-privacy-note { max-width: 58ch; }
}
@media (prefers-reduced-motion: reduce) {
  #contact .direct-wa-form input,
  #contact .direct-wa-form select,
  #contact .direct-wa-form textarea { transition: none !important; }
}


/* HERITAGE SIGNATURE EDITION — premium polish pass */
:root {
  --heritage-gold: #f4c75f;
  --heritage-gold-soft: #ffe9ad;
  --heritage-purple: #c98cff;
  --heritage-ink: #100a17;
}
html { scroll-behavior: smooth; }
::selection { background: rgba(244,199,95,.3); color: #fff8e8; }
a, button { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--heritage-gold) !important;
  outline-offset: 3px !important;
}
#contact.lead-form-section {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background:
    radial-gradient(ellipse at 10% 15%, rgba(142,67,185,.12), transparent 40%),
    radial-gradient(ellipse at 90% 85%, rgba(244,199,95,.08), transparent 38%),
    #08060c !important;
}
#contact.lead-form-section::before {
  content: "";
  position: absolute;
  inset: 0 4% auto;
  height: 1px;
  background: linear-gradient(90deg,transparent,rgba(255,224,145,.9),rgba(201,140,255,.6),transparent);
  pointer-events: none;
}
#contact .form-container {
  position: relative;
  box-shadow: 0 24px 70px rgba(0,0,0,.38), 0 0 0 1px rgba(255,255,255,.025), 0 0 34px rgba(155,78,195,.09) !important;
  backdrop-filter: blur(14px);
}
#contact .form-container h3 {
  letter-spacing: -.025em;
  text-shadow: 0 2px 22px rgba(244,199,95,.12);
}
#contact .direct-wa-enquiry {
  box-shadow: inset 0 1px rgba(255,255,255,.035), 0 12px 32px rgba(0,0,0,.14) !important;
}
#contact .direct-wa-form label {
  color: #eee3f4 !important;
  font-weight: 600 !important;
}
#contact .direct-wa-form select {
  color-scheme: dark;
}
#contact .direct-wa-form button {
  position: relative;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease !important;
}
#contact .direct-wa-form button:hover {
  transform: translateY(-1px);
  filter: saturate(1.05) brightness(1.025);
  box-shadow: 0 10px 26px rgba(216,161,69,.25) !important;
}
#contact .direct-wa-form button:active { transform: translateY(0) scale(.99); }
#contact .form-privacy-note a {
  color: var(--heritage-gold-soft) !important;
  text-underline-offset: 3px;
}
@media (min-width: 900px) {
  #contact.lead-form-section { padding-block: 56px !important; }
  #contact .form-container { max-width: 520px !important; padding: 28px !important; }
  #contact .direct-wa-enquiry { padding: 20px !important; }
}
@media (max-width: 600px) {
  #contact.lead-form-section { padding: 12px 8px !important; }
  #contact .form-container { max-width: 400px !important; padding: 12px 10px !important; }
  #contact .direct-wa-enquiry { padding: 9px !important; }
  #contact .direct-wa-form input,
  #contact .direct-wa-form select { font-size: 16px !important; }
  #contact .direct-wa-form textarea { font-size: 16px !important; }
  #contact .direct-wa-form button { min-height: 42px !important; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  #contact .direct-wa-form button { transition: none !important; }
}

/* HERITAGE MOTION LAB — lightweight 3D depth and motion. */
.hero-banner { perspective:1100px; transform-style:preserve-3d; isolation:isolate; }
.hero-banner::before,.hero-banner::after {
 content:""; position:absolute; z-index:-1; width:clamp(180px,32vw,380px); aspect-ratio:1;
 border-radius:50%; pointer-events:none;
}
.hero-banner::before {
 top:6%; right:-9%;
 background:radial-gradient(circle,rgba(191,121,255,.16),rgba(191,121,255,0) 68%);
 animation:hafGlowFloat 9s ease-in-out infinite alternate;
}
.hero-banner::after {
 bottom:5%; left:-12%;
 background:radial-gradient(circle,rgba(244,199,95,.12),rgba(244,199,95,0) 70%);
 animation:hafGlowFloat 12s ease-in-out infinite alternate-reverse;
}
.haf-3d-orbit,.haf-3d-orbit-secondary {
 position:absolute; z-index:-1; pointer-events:none; border:1px solid rgba(244,199,95,.22);
 border-radius:50%; transform-style:preserve-3d;
 box-shadow:0 0 28px rgba(244,199,95,.06),inset 0 0 24px rgba(201,140,255,.045);
}
.haf-3d-orbit {
 width:clamp(210px,43vw,510px); height:clamp(210px,43vw,510px); right:-7%; top:7%;
 transform:rotateX(67deg) rotateZ(-18deg); animation:hafOrbitTurn 28s linear infinite;
}
.haf-3d-orbit-secondary {
 width:clamp(170px,33vw,390px); height:clamp(170px,33vw,390px); right:2%; top:13%;
 border-color:rgba(201,140,255,.2); transform:rotateX(70deg) rotateZ(24deg);
 animation:hafOrbitTurnReverse 34s linear infinite;
}
.main-poster {
 transform:perspective(1000px) rotateX(1deg) rotateY(-1deg) translateZ(0);
 transform-origin:center; backface-visibility:hidden;
 transition:transform .45s cubic-bezier(.2,.7,.2,1),filter .45s ease;
 filter:drop-shadow(0 22px 34px rgba(0,0,0,.24));
}
@media (hover:hover) and (pointer:fine) {
 .main-poster:hover { transform:perspective(1000px) rotateX(0) rotateY(0) translateY(-5px) translateZ(12px); filter:drop-shadow(0 30px 42px rgba(0,0,0,.34)); }
 .service-tile,.enquiry-path,.calc-card,.review-card { transform:translateZ(0); transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease; }
 .service-tile:hover,.enquiry-path:hover,.calc-card:hover,.review-card:hover { transform:translateY(-4px) perspective(900px) rotateX(1deg); box-shadow:0 16px 34px rgba(0,0,0,.22),0 0 0 1px rgba(244,199,95,.12); }
}
@keyframes hafGlowFloat { from { transform:translate3d(0,-8px,0) scale(.96);opacity:.7; } to { transform:translate3d(-12px,14px,0) scale(1.06);opacity:1; } }
@keyframes hafOrbitTurn { from { rotate:0deg; } to { rotate:360deg; } }
@keyframes hafOrbitTurnReverse { from { rotate:360deg; } to { rotate:0deg; } }
@media(max-width:700px) {
 .haf-3d-orbit { right:-25%;top:8%;opacity:.65; }
 .haf-3d-orbit-secondary { right:-14%;top:14%;opacity:.55; }
 .hero-banner::before { right:-28%;top:5%; }
 .hero-banner::after { left:-30%;bottom:8%; }
 .main-poster { transform:none; }
}
@media(prefers-reduced-motion:reduce) {
 .hero-banner::before,.hero-banner::after,.haf-3d-orbit,.haf-3d-orbit-secondary { animation:none!important; }
 .main-poster,.service-tile,.enquiry-path,.calc-card,.review-card { transition:none!important;transform:none!important; }
}


/* Signature motion pass — restrained 3D depth, clear focus, no layout changes. */
:root { --haf-motion-ease: cubic-bezier(.2,.75,.25,1); }
html { scroll-behavior: smooth; }
.hero-banner { isolation: isolate; perspective: 1200px; }
.hero-banner::before,
.hero-banner::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(2px);
}
.hero-banner::before {
  width: clamp(180px, 32vw, 430px);
  aspect-ratio: 1;
  right: -8%;
  top: -10%;
  border: 1px solid rgba(225,194,122,.19);
  box-shadow: 0 0 0 22px rgba(225,194,122,.018), 0 0 0 54px rgba(162,139,208,.025), inset 0 0 45px rgba(225,194,122,.04);
  animation: hafSignatureFloat 11s var(--haf-motion-ease) infinite alternate;
}
.hero-banner::after {
  width: clamp(120px, 22vw, 280px);
  aspect-ratio: 1;
  left: -7%;
  bottom: -16%;
  border: 1px solid rgba(162,139,208,.16);
  box-shadow: 0 0 0 24px rgba(162,139,208,.018), inset 0 0 40px rgba(162,139,208,.035);
  animation: hafSignatureFloat 14s var(--haf-motion-ease) infinite alternate-reverse;
}
.hero-cta, .emi-whatsapp-cta, .mobile-quick-actions a, .float-wa {
  transition: transform .24s var(--haf-motion-ease), box-shadow .24s ease, filter .24s ease;
}
.hero-cta-primary {
  color: #171019 !important;
  -webkit-text-fill-color: #171019 !important;
  background: linear-gradient(120deg,#f7e8b8 0%,#d7b56d 48%,#b98b3e 100%);
  box-shadow: 0 9px 24px rgba(195,155,75,.19), inset 0 1px rgba(255,255,255,.48);
}
.hero-cta-primary:hover {
  box-shadow: 0 13px 30px rgba(195,155,75,.28), inset 0 1px rgba(255,255,255,.55);
  filter: brightness(1.04);
}
:where(.service-tile,.enquiry-path,.journey-step,.detail-box,.review-card,.calc-card,.form-container,.poster-item) {
  transform-style: preserve-3d;
  transition: transform .3s var(--haf-motion-ease), border-color .25s ease, box-shadow .3s ease;
}
:where(a,button,input,select,textarea,summary):focus-visible {
  outline: 2px solid #f0d895;
  outline-offset: 4px;
  box-shadow: 0 0 0 5px rgba(225,194,122,.12);
}
img { backface-visibility: hidden; }
@keyframes hafSignatureFloat {
  from { transform: translate3d(0,-8px,0) rotate(-5deg); }
  to { transform: translate3d(8px,12px,0) rotate(7deg); }
}
@media (max-width: 700px) {
  .hero-banner { perspective: none; }
  .hero-banner::before { right: -30%; top: 3%; opacity: .48; }
  .hero-banner::after { left: -30%; bottom: 2%; opacity: .4; }
  :where(.service-tile,.enquiry-path,.journey-step,.detail-box,.review-card,.calc-card,.form-container) { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-banner::before,.hero-banner::after { animation: none !important; }
}


/* Conversion polish pass: clear field states, touch-friendly forms, and restrained feedback. */
.direct-wa-form {
  display: grid;
  gap: 10px;
}
.direct-wa-form label {
  color: rgba(255,244,218,.88);
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .01em;
  margin-top: 3px;
}
.direct-wa-form input,
.direct-wa-form select,
.direct-wa-form textarea {
  width: 100%;
  min-height: 48px;
  box-sizing: border-box;
  padding: 12px 14px;
  border: 1px solid rgba(225,194,122,.24);
  background: rgba(8,6,12,.7);
  color: #fff8e9;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.direct-wa-form textarea { min-height: 72px; resize: vertical; }
.direct-wa-form input::placeholder,
.direct-wa-form textarea::placeholder { color: rgba(235,226,244,.55); }
.direct-wa-form input:focus,
.direct-wa-form select:focus,
.direct-wa-form textarea:focus {
  border-color: rgba(242,213,145,.92);
  background: rgba(17,12,23,.98);
  box-shadow: 0 0 0 4px rgba(225,194,122,.1);
  outline: none;
}
.direct-wa-form input:invalid:not(:placeholder-shown) {
  border-color: rgba(255,133,133,.75);
}
.direct-wa-form button[type="submit"] {
  min-height: 50px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  background: linear-gradient(115deg,#f6e6b5,#d7b56d 55%,#b68a3e);
  color: #171019;
  font-weight: 800;
  box-shadow: 0 8px 24px rgba(195,155,75,.16), inset 0 1px rgba(255,255,255,.48);
  touch-action: manipulation;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.direct-wa-form button[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(195,155,75,.25), inset 0 1px rgba(255,255,255,.5);
  filter: brightness(1.035);
}
.direct-wa-form button[type="submit"]:active { transform: translateY(0) scale(.99); }
.direct-wa-status:empty { display: none; }
.direct-wa-status:not(:empty) {
  padding: 10px 12px;
  border: 1px solid rgba(225,194,122,.2);
  border-radius: 10px;
  background: rgba(225,194,122,.055);
  line-height: 1.5;
}
@media (max-width: 640px) {
  .direct-wa-form { gap: 8px; }
  .direct-wa-form input, .direct-wa-form select, .direct-wa-form textarea { font-size: 16px; }
  .direct-wa-form button[type="submit"] { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .direct-wa-form input, .direct-wa-form select, .direct-wa-form textarea,
  .direct-wa-form button[type="submit"] { transition: none !important; }
}


/* Heritage Signature Experience — premium depth, clearer hierarchy, mobile polish. */
:root {
  --haf-gold: #e1c27a;
  --haf-gold-bright: #f7e8b8;
  --haf-violet: #a28bd0;
  --haf-glass: rgba(18, 12, 27, .78);
  --haf-edge: rgba(225, 194, 122, .2);
}
body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
nav {
  background: linear-gradient(105deg, rgba(9,5,16,.96), rgba(22,13,34,.9)) !important;
  border-bottom: 1px solid rgba(225,194,122,.18);
  box-shadow: 0 12px 34px rgba(0,0,0,.2);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.nav-links a {
  position: relative;
  text-decoration: none;
  transition: color .2s ease, opacity .2s ease;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: -7px;
  height: 1px;
  background: linear-gradient(90deg, var(--haf-gold-bright), var(--haf-violet));
  transition: right .24s ease;
}
.nav-links a:hover::after, .nav-links a:focus-visible::after { right: 0; }
.trust-strip {
  border-block: 1px solid rgba(225,194,122,.12);
  background: linear-gradient(90deg, rgba(225,194,122,.055), rgba(162,139,208,.055), rgba(225,194,122,.035));
}
.hero-banner {
  overflow: hidden;
  border: 1px solid rgba(225,194,122,.14);
  box-shadow: 0 28px 80px rgba(0,0,0,.22), inset 0 1px rgba(255,255,255,.035);
}
.secure-badge {
  border: 1px solid rgba(225,194,122,.3);
  background: rgba(12,8,18,.6);
  box-shadow: 0 6px 24px rgba(0,0,0,.16), inset 0 1px rgba(255,255,255,.04);
  backdrop-filter: blur(12px);
}
.hero-banner h1 {
  text-wrap: balance;
  letter-spacing: -.035em;
}
.hero-supporting {
  max-width: 58ch;
  line-height: 1.8;
  text-wrap: pretty;
}
.hero-trust-points span {
  border: 1px solid rgba(225,194,122,.16);
  background: rgba(10,7,15,.35);
  border-radius: 999px;
  padding: .5rem .78rem;
}
.service-tile {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(225,194,122,.17);
  background: linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
  box-shadow: inset 0 1px rgba(255,255,255,.035);
}
.service-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 20%, rgba(255,255,255,.055) 45%, transparent 68%);
  transform: translateX(-130%);
  transition: transform .65s var(--haf-motion-ease);
  pointer-events: none;
}
.service-tile:hover::before { transform: translateX(130%); }
.service-tile-icon {
  filter: drop-shadow(0 5px 12px rgba(225,194,122,.12));
}
.journey-step, .detail-box, .calc-card, .form-container, .review-card {
  border-color: rgba(225,194,122,.16);
  box-shadow: 0 14px 36px rgba(0,0,0,.13), inset 0 1px rgba(255,255,255,.025);
}
.journey-step > span {
  text-shadow: 0 0 22px rgba(225,194,122,.2);
}
.section-title {
  text-wrap: balance;
  letter-spacing: -.025em;
}
.section-subtitle {
  max-width: 62ch;
  margin-inline: auto;
  line-height: 1.75;
}
.poster-item {
  overflow: hidden;
  border: 1px solid rgba(225,194,122,.16);
  border-radius: 16px;
  background: #100a19;
  box-shadow: 0 14px 34px rgba(0,0,0,.2);
}
.poster-item img {
  display: block;
  transition: transform .55s var(--haf-motion-ease), filter .4s ease;
}
.poster-item:hover img { transform: scale(1.035); filter: saturate(1.06); }
.float-wa {
  box-shadow: 0 10px 30px rgba(0,0,0,.35), 0 0 0 5px rgba(225,194,122,.08);
}
.float-wa:focus-visible { outline-offset: 6px; }
.direct-wa-form input, .direct-wa-form select, .direct-wa-form textarea {
  border-radius: 12px;
}
.direct-wa-form button[type="submit"] {
  letter-spacing: .015em;
}
:where(.hero-cta,.service-tile,.tab-btn,.float-wa,.direct-wa-form button):focus-visible {
  outline: 2px solid var(--haf-gold-bright);
  outline-offset: 4px;
}
@media (hover:hover) and (pointer:fine) {
  .journey-step:hover, .detail-box:hover, .review-card:hover {
    transform: translateY(-3px);
    border-color: rgba(225,194,122,.32);
    box-shadow: 0 18px 42px rgba(0,0,0,.2), 0 0 0 1px rgba(225,194,122,.05);
  }
}
@media (max-width: 700px) {
  nav { padding-top: max(10px, env(safe-area-inset-top)); }
  .hero-banner { border-radius: 20px; }
  .hero-trust-points { gap: 8px; }
  .hero-trust-points span { font-size: .78rem; }
  .service-tile { min-height: 76px; }
  .poster-item { border-radius: 12px; }
  .float-wa { bottom: max(18px, env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  .nav-links a::after, .service-tile::before, .poster-item img { transition: none !important; }
  .poster-item:hover img { transform: none; }
}


/* Signature 2.0 — editorial polish, premium surfaces, and stronger conversion cues. */
:root {
  color-scheme: dark;
  --haf-surface: rgba(18, 12, 27, .72);
  --haf-surface-raised: rgba(27, 19, 39, .88);
  --haf-line: rgba(225, 194, 122, .22);
  --haf-shadow-deep: 0 24px 70px rgba(0,0,0,.28);
}
::selection { color: #160f1e; background: #e1c27a; }
body {
  background-image:
    radial-gradient(ellipse at 8% 14%, rgba(112,73,153,.10), transparent 34rem),
    radial-gradient(ellipse at 94% 44%, rgba(225,194,122,.055), transparent 30rem);
  background-attachment: fixed;
}
.section-title::after {
  content: "";
  display: block;
  width: 56px;
  height: 2px;
  margin: 14px auto 0;
  border-radius: 99px;
  background: linear-gradient(90deg, transparent, var(--haf-gold-bright), var(--haf-violet), transparent);
  box-shadow: 0 0 18px rgba(225,194,122,.22);
}
.service-rail-heading > span {
  color: var(--haf-gold);
  letter-spacing: .2em;
  font-size: .72rem;
  font-weight: 700;
}
.service-rail-heading h2 {
  text-wrap: balance;
  letter-spacing: -.035em;
}
.stats-bar {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(225,194,122,.16);
  background: linear-gradient(110deg, rgba(225,194,122,.075), rgba(162,139,208,.055), rgba(255,255,255,.015));
  box-shadow: var(--haf-shadow-deep), inset 0 1px rgba(255,255,255,.035);
}
.stats-bar::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 -45%;
  width: 35%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.045), transparent);
  transform: skewX(-18deg);
  animation: hafStatsShimmer 9s ease-in-out infinite;
  pointer-events: none;
}
.stat-item h3 {
  background: linear-gradient(135deg, #fff1c9, #d6b66e 58%, #b49adf);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
}
.hero-actions { gap: 14px; }
.hero-cta {
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 22px;
  font-weight: 700;
  letter-spacing: .01em;
}
.hero-cta-secondary {
  border: 1px solid rgba(225,194,122,.35);
  background: rgba(14,9,21,.5);
  box-shadow: inset 0 1px rgba(255,255,255,.035);
}
.hero-cta-secondary:hover {
  border-color: rgba(247,232,184,.7);
  background: rgba(225,194,122,.08);
  transform: translateY(-2px);
}
.filter-tabs { gap: 10px; }
.tab-btn {
  border: 1px solid rgba(225,194,122,.2);
  transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease;
}
.tab-btn:hover { transform: translateY(-1px); border-color: rgba(225,194,122,.45); }
.tab-btn.active {
  border-color: rgba(247,232,184,.55);
  box-shadow: 0 6px 22px rgba(225,194,122,.09), inset 0 1px rgba(255,255,255,.16);
}
.tools-wrapper {
  position: relative;
  isolation: isolate;
}
.tools-wrapper::before {
  content: "";
  position: absolute;
  inset: 8% -2%;
  z-index: -1;
  border-radius: 36px;
  background: radial-gradient(ellipse, rgba(112,73,153,.11), transparent 70%);
  pointer-events: none;
}
.calc-card {
  background: linear-gradient(145deg, rgba(30,20,43,.92), rgba(12,8,18,.92));
  box-shadow: 0 24px 60px rgba(0,0,0,.24), inset 0 1px rgba(255,255,255,.045);
}
.calc-card h3 { text-wrap: balance; }
input[type="range"] { accent-color: var(--haf-gold); cursor: pointer; }
a { -webkit-tap-highlight-color: rgba(225,194,122,.12); }
button { -webkit-tap-highlight-color: rgba(225,194,122,.12); }
@keyframes hafStatsShimmer {
  0%, 68%, 100% { left: -45%; opacity: 0; }
  74% { opacity: .8; }
  90% { left: 120%; opacity: 0; }
}
@media (max-width: 700px) {
  body { background-attachment: scroll; }
  .section-title::after { margin-top: 11px; }
  .hero-actions { display: grid; grid-template-columns: 1fr; width: 100%; }
  .hero-cta { width: 100%; box-sizing: border-box; }
  .filter-tabs { display: flex; flex-wrap: wrap; justify-content: center; }
  .tab-btn { min-height: 42px; }
  .stats-bar::before { animation-duration: 12s; }
}
@media (prefers-reduced-motion: reduce) {
  .stats-bar::before { animation: none !important; }
}


/* Conversion clarity — make the enquiry step feel safe, simple and intentional. */
.lead-form-eyebrow {
  margin: 0 0 8px;
  color: var(--haf-gold, #e1c27a);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .2em;
}
.lead-form-intro {
  max-width: 58ch;
  margin: 0 auto 18px;
  color: rgba(244,238,250,.76);
  line-height: 1.8;
  font-size: .94rem;
  text-wrap: pretty;
}
.lead-form-assurances {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 auto 24px;
}
.lead-form-assurances span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 11px;
  border: 1px solid rgba(225,194,122,.16);
  border-radius: 999px;
  background: rgba(225,194,122,.045);
  color: rgba(255,248,233,.82);
  font-size: .76rem;
  line-height: 1.35;
}
.lead-form-assurances b {
  display: inline-grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: rgba(225,194,122,.13);
  color: var(--haf-gold-bright, #f7e8b8);
  font-size: .72rem;
}
.direct-wa-enquiry {
  border: 1px solid rgba(225,194,122,.2);
  border-radius: 18px;
  padding: clamp(16px, 3vw, 26px);
  background: linear-gradient(145deg, rgba(225,194,122,.045), rgba(162,139,208,.045) 60%, rgba(255,255,255,.012));
  box-shadow: 0 18px 44px rgba(0,0,0,.16), inset 0 1px rgba(255,255,255,.035);
}
.direct-wa-enquiry h4 {
  color: #fff0c8;
  text-wrap: balance;
}
.direct-wa-enquiry > p {
  color: rgba(244,238,250,.72);
  line-height: 1.7;
}
.form-privacy-note {
  max-width: 68ch;
  margin: 18px auto 0;
  font-size: .78rem;
  line-height: 1.75;
  color: rgba(235,226,244,.65);
}
.form-privacy-note a {
  color: var(--haf-gold-bright, #f7e8b8);
  text-underline-offset: 3px;
}
@media (max-width: 640px) {
  .lead-form-assurances { align-items: stretch; flex-direction: column; }
  .lead-form-assurances span { justify-content: flex-start; border-radius: 12px; }
  .direct-wa-enquiry { border-radius: 15px; }
}


/* Signature 3.0 — restrained premium interaction, clearer focus and tactile feedback. */
:root {
  --haf-signature-ring: rgba(235, 207, 137, .48);
  --haf-signature-surface: rgba(255, 255, 255, .035);
}
:where(a, button, input, select, textarea, summary, [role="button"]):focus-visible {
  outline: 2px solid var(--haf-signature-ring);
  outline-offset: 4px;
}
:where(button, .hero-cta, .emi-whatsapp-cta, .site-share-button, .service-tile) {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.service-tile, .journey-step, .detail-box, .review-card, .calc-card, .form-container {
  transition: border-color .24s ease, box-shadow .24s ease, background-color .24s ease, transform .24s ease;
}
.service-tile:hover, .journey-step:hover, .detail-box:hover, .review-card:hover {
  border-color: rgba(235, 207, 137, .42);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .19), inset 0 1px rgba(255,255,255,.035);
}
.hero-cta-primary, .emi-whatsapp-cta, .direct-wa-enquiry button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.hero-cta-primary::after, .emi-whatsapp-cta::after, .direct-wa-enquiry button::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(110deg, transparent 25%, rgba(255,255,255,.23) 48%, transparent 68%);
  transform: translateX(-130%);
  transition: transform .65s ease;
  pointer-events: none;
}
.hero-cta-primary:hover::after, .emi-whatsapp-cta:hover::after, .direct-wa-enquiry button:hover::after {
  transform: translateX(130%);
}
.form-container :where(input, select, textarea):focus-visible {
  border-color: rgba(235, 207, 137, .75);
  box-shadow: 0 0 0 3px rgba(235, 207, 137, .12);
}
.lead-form-assurances span { transition: background-color .2s ease, border-color .2s ease; }
.lead-form-assurances span:hover {
  background: rgba(225,194,122,.08);
  border-color: rgba(225,194,122,.3);
}
::selection { background: rgba(225,194,122,.28); color: #fffaf0; }
@media (hover: none) {
  .service-tile:hover, .journey-step:hover, .detail-box:hover, .review-card:hover { transform: none; }
  .hero-cta-primary::after, .emi-whatsapp-cta::after, .direct-wa-enquiry button::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .service-tile, .journey-step, .detail-box, .review-card, .calc-card, .form-container,
  .lead-form-assurances span, .hero-cta-primary::after, .emi-whatsapp-cta::after,
  .direct-wa-enquiry button::after { transition: none !important; }
}


/* ULTRA NEXT — Signature 4.0: premium depth, ambient lighting and polished interaction. */
:root {
  --haf-ultra-gold: #f0d89a;
  --haf-ultra-edge: rgba(240, 216, 154, .28);
  --haf-ultra-glass: rgba(19, 14, 26, .72);
}
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  background-image:
    radial-gradient(ellipse at 10% 8%, rgba(132, 83, 177, .14), transparent 34rem),
    radial-gradient(ellipse at 88% 28%, rgba(240, 216, 154, .07), transparent 32rem),
    radial-gradient(ellipse at 48% 82%, rgba(92, 61, 126, .09), transparent 36rem);
}
nav {
  border-bottom: 1px solid rgba(240,216,154,.15);
  box-shadow: 0 12px 38px rgba(0,0,0,.14);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  backdrop-filter: blur(18px) saturate(130%);
}
.nav-links a {
  text-underline-offset: 6px;
  transition: color .2s ease, opacity .2s ease;
}
.nav-links a:hover { color: var(--haf-ultra-gold); }
.hero-banner {
  isolation: isolate;
  position: relative;
}
.hero-banner .main-poster {
  box-shadow:
    0 28px 72px rgba(0,0,0,.38),
    0 0 0 1px rgba(240,216,154,.13),
    0 0 54px rgba(139,101,180,.10);
}
.section-title::after {
  content: "";
  display: block;
  width: clamp(54px, 8vw, 84px);
  height: 2px;
  margin: 13px auto 0;
  border-radius: 9px;
  background: linear-gradient(90deg, transparent, var(--haf-ultra-gold), transparent);
  box-shadow: 0 0 18px rgba(240,216,154,.24);
}
.service-tile, .journey-step, .detail-box, .review-card, .poster-grid .poster-item {
  box-shadow: 0 10px 32px rgba(0,0,0,.13);
}
.service-tile:hover, .poster-grid .poster-item:hover {
  box-shadow: 0 20px 48px rgba(0,0,0,.25), 0 0 0 1px rgba(240,216,154,.12);
}
.trust-strip > div, .heritage-proof-strip {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.stats-bar {
  border: 1px solid rgba(240,216,154,.18);
  box-shadow: 0 12px 38px rgba(0,0,0,.16), inset 0 1px rgba(255,255,255,.04);
}
.stats-bar::before {
  background: linear-gradient(90deg, transparent, rgba(240,216,154,.28), transparent);
}
.form-container, .calc-card {
  position: relative;
  overflow: hidden;
}
.form-container::before, .calc-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 9%;
  right: 9%;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(240,216,154,.48), transparent);
}
.form-container :where(input, select, textarea) {
  min-height: 46px;
  transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.form-container :where(input, select, textarea):focus {
  background-color: rgba(255,255,255,.045);
}
.float-wa {
  box-shadow: 0 8px 28px rgba(37,211,102,.22), 0 0 0 5px rgba(37,211,102,.055);
}
.back-to-top, .float-wa {
  transition: transform .22s ease, box-shadow .22s ease;
}
.back-to-top:hover, .float-wa:hover { transform: translateY(-3px); }
footer a { transition: color .2s ease; }
footer a:hover { color: var(--haf-ultra-gold); }
::target { scroll-margin-top: 92px; }
@media (max-width: 700px) {
  html { scroll-padding-top: 72px; }
  nav { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
  .hero-banner .main-poster { box-shadow: 0 18px 42px rgba(0,0,0,.3), 0 0 0 1px rgba(240,216,154,.12); }
  .form-container :where(input, select, textarea) { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .nav-links a, .back-to-top, .float-wa, footer a,
  .form-container :where(input, select, textarea) { transition: none !important; }
}


/* ULTRA NEXT — Signature 5.0: dimensional polish and conversion-focused clarity. */
:root {
  --haf-5-gold: #f4dfaa;
  --haf-5-line: rgba(244, 223, 170, .22);
}
.hero-banner::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -5% -3% auto;
  height: 72%;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(132, 83, 177, .17), transparent 68%);
  filter: blur(14px);
}
.service-tile, .journey-step, .detail-box, .review-card, .poster-grid .poster-item {
  transform-style: preserve-3d;
  backface-visibility: hidden;
}
@media (hover: hover) and (pointer: fine) {
  .service-tile:hover, .journey-step:hover, .detail-box:hover, .review-card:hover,
  .poster-grid .poster-item:hover {
    transform: translateY(-4px) perspective(900px) rotateX(.6deg);
  }
  .nav-links a { position: relative; }
  .nav-links a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: -5px;
    height: 1px;
    background: linear-gradient(90deg, var(--haf-5-gold), transparent);
    transition: right .22s ease;
  }
  .nav-links a:hover::after, .nav-links a:focus-visible::after { right: 0; }
}
:where(.hero-cta-primary, .emi-whatsapp-cta, .direct-wa-enquiry button, .mobile-action-whatsapp) {
  box-shadow: 0 8px 24px rgba(0,0,0,.16), inset 0 1px rgba(255,255,255,.16);
}
:where(.hero-cta-primary, .emi-whatsapp-cta, .direct-wa-enquiry button):active {
  transform: translateY(1px) scale(.99);
}
:where(.form-container, .calc-card, .stats-bar, .trust-strip > div, .heritage-proof-strip) {
  border-color: var(--haf-5-line);
}
img { height: auto; }
a { text-decoration-thickness: from-font; }
@media (max-width: 700px) {
  .hero-banner::before { inset: 0 -8%; height: 55%; filter: blur(22px); }
  .mobile-quick-actions a { min-height: 44px; }
  .service-tile, .journey-step, .detail-box, .review-card, .poster-grid .poster-item {
    transform: none;
    backface-visibility: visible;
  }
}
@media (prefers-reduced-motion: reduce) {
  .nav-links a::after { transition: none !important; }
  .service-tile:hover, .journey-step:hover, .detail-box:hover, .review-card:hover,
  .poster-grid .poster-item:hover { transform: none !important; }
}


/* SIGNATURE 6.0 — cinematic premium finish with restrained, accessible motion. */
:root {
  --haf-6-gold: #f7e5b4;
  --haf-6-violet: rgba(133, 91, 180, .18);
}
body {
  background-attachment: fixed;
  background-color: #090510;
}
.hero-banner .main-poster {
  transition: transform .35s ease, box-shadow .35s ease, filter .35s ease;
}
@media (hover: hover) and (pointer: fine) {
  .hero-banner .main-poster:hover {
    transform: translateY(-2px) scale(1.006);
    filter: saturate(1.035);
    box-shadow: 0 34px 86px rgba(0,0,0,.42), 0 0 0 1px rgba(247,229,180,.2), 0 0 62px rgba(133,91,180,.16);
  }
}
.section-title {
  text-wrap: balance;
}
.service-tile :where(h2, h3, h4), .detail-box :where(h2, h3, h4) {
  text-wrap: balance;
}
:where(.service-tile, .journey-step, .detail-box, .review-card, .poster-grid .poster-item) {
  overflow-wrap: anywhere;
}
:where(.hero-cta-primary, .emi-whatsapp-cta, .direct-wa-enquiry button, .mobile-quick-actions a) {
  -webkit-tap-highlight-color: transparent;
}
:where(.hero-cta-primary, .emi-whatsapp-cta, .direct-wa-enquiry button):focus-visible {
  outline-color: var(--haf-6-gold);
  outline-offset: 4px;
}
@media (max-width: 700px) {
  body { background-attachment: scroll; }
  .hero-banner .main-poster { transition: none; }
  .section-title { text-wrap: pretty; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-banner .main-poster { transition: none !important; }
  .hero-banner .main-poster:hover { transform: none !important; filter: none !important; }
}


/* SIGNATURE 7.0 — refined premium system, practical clarity, and resilient mobile UI. */
:root {
  --haf-7-gold: #f6e2ac;
  --haf-7-glass: rgba(16, 11, 24, .78);
  --haf-7-border: rgba(246, 226, 172, .2);
}
:where(.service-tile, .journey-step, .detail-box, .review-card, .poster-grid .poster-item) {
  border-color: var(--haf-7-border);
  box-shadow: 0 12px 34px rgba(0,0,0,.18), inset 0 1px rgba(255,255,255,.025);
}
:where(.form-container, .calc-card) {
  isolation: isolate;
  border-color: var(--haf-7-border);
  box-shadow: 0 22px 58px rgba(0,0,0,.2), inset 0 1px rgba(255,255,255,.035);
}
nav {
  background-color: var(--haf-7-glass);
  border-bottom-color: rgba(246,226,172,.2);
}
:where(.hero-cta-primary, .emi-whatsapp-cta, .direct-wa-enquiry button, .mobile-action-whatsapp) {
  font-weight: 600;
  letter-spacing: .012em;
}
:where(.hero-cta-primary, .emi-whatsapp-cta, .direct-wa-enquiry button, .mobile-quick-actions a):focus-visible {
  outline: 2px solid var(--haf-7-gold);
  outline-offset: 3px;
}
:where(.service-tile, .journey-step, .detail-box, .review-card) {
  overflow: hidden;
}
@media (hover: hover) and (pointer: fine) {
  .service-tile:hover, .journey-step:hover, .detail-box:hover, .review-card:hover {
    border-color: rgba(246,226,172,.44);
    box-shadow: 0 22px 50px rgba(0,0,0,.25), 0 0 0 1px rgba(246,226,172,.06);
  }
}
@media (max-width: 700px) {
  nav { background-color: rgba(12,8,18,.94); }
  :where(.form-container, .calc-card) { box-shadow: 0 14px 36px rgba(0,0,0,.18); }
  .mobile-quick-actions { padding-bottom: max(8px, env(safe-area-inset-bottom)); }
}
@supports not ((backdrop-filter: blur(1px))) {
  nav { background-color: rgba(12,8,18,.96); }
  .trust-strip > div, .heritage-proof-strip { background-color: rgba(18,13,25,.94); }
}
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}


/* SIGNATURE 8.0 — balanced wide-screen layout: reduce unused side space without stretching text. */
@media (min-width: 1200px) {
  #services, #portfolio, .tools-wrapper, .testimonials-container, .faq-section, .lead-form-section {
    padding-left: clamp(36px, 4vw, 72px);
    padding-right: clamp(36px, 4vw, 72px);
  }
  .service-journey, .details-container, .poster-grid {
    width: 100%;
    max-width: 1480px;
    margin-left: auto;
    margin-right: auto;
  }
  .service-journey { gap: 18px; }
  .details-container { gap: 18px; }
  .faq-section .faq-item, .faq-section .faq-list, .faq-section .faq-container {
    width: min(100%, 1180px);
    margin-left: auto;
    margin-right: auto;
  }
  .tools-wrapper .calc-card { max-width: 1120px; }
  .testimonials-container .review-grid, .testimonials-container .reviews-grid {
    max-width: 1480px;
    margin-left: auto;
    margin-right: auto;
  }
}
@media (min-width: 1500px) {
  #services, #portfolio, .tools-wrapper, .testimonials-container, .faq-section, .lead-form-section {
    padding-left: clamp(56px, 5vw, 100px);
    padding-right: clamp(56px, 5vw, 100px);
  }
  .hero-banner {
    padding-left: clamp(48px, 5.5vw, 104px);
    padding-right: clamp(48px, 5.5vw, 104px);
  }
}
@media (min-width: 1001px) and (max-width: 1199px) {
  #services, #portfolio, .tools-wrapper, .testimonials-container, .faq-section, .lead-form-section {
    padding-left: 32px;
    padding-right: 32px;
  }
}
@media (max-width: 700px) {
  #services, #portfolio, .tools-wrapper, .testimonials-container, .faq-section, .lead-form-section {
    padding-left: 16px;
    padding-right: 16px;
  }
}


/* SIGNATURE 9.0 — poster gallery normalization + visible 3D motion + wider portfolio canvas. */
#portfolio {
  width: 100%;
  box-sizing: border-box;
}
#portfolio .poster-grid {
  width: min(100%, 1480px) !important;
  max-width: 1480px !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: clamp(14px, 1.7vw, 24px) !important;
  margin-inline: auto !important;
}
#portfolio .poster-item {
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 0;
  aspect-ratio: 4 / 5;
  box-sizing: border-box;
  display: grid !important;
  place-items: center;
  padding: 8px !important;
  overflow: hidden;
  transform-style: preserve-3d;
  perspective: 900px;
  background: linear-gradient(145deg, rgba(31,20,46,.96), rgba(9,7,15,.98));
  animation: hafPosterFloat 5.5s ease-in-out infinite;
  will-change: transform;
}
#portfolio .poster-item:nth-child(4n + 2) { animation-delay: -.8s; }
#portfolio .poster-item:nth-child(4n + 3) { animation-delay: -1.6s; }
#portfolio .poster-item:nth-child(4n) { animation-delay: -2.4s; }
#portfolio .poster-item img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center !important;
  border-radius: 9px;
  transform: translateZ(14px);
}
@keyframes hafPosterFloat {
  0%, 100% { transform: perspective(900px) translateY(0) rotateX(0deg) rotateY(0deg); }
  50% { transform: perspective(900px) translateY(-5px) rotateX(.8deg) rotateY(-.7deg); }
}
@media (hover: hover) and (pointer: fine) {
  #portfolio .poster-item:hover {
    z-index: 2;
    animation-play-state: paused;
    transform: perspective(900px) translateY(-7px) rotateX(1.2deg) rotateY(-1.2deg) !important;
  }
  #portfolio .poster-item:hover img { transform: translateZ(20px) scale(1.015); }
}
@media (min-width: 1200px) {
  #portfolio { padding-left: clamp(28px, 3vw, 52px) !important; padding-right: clamp(28px, 3vw, 52px) !important; }
}
@media (max-width: 1050px) {
  #portfolio .poster-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 700px) {
  #portfolio .poster-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  #portfolio .poster-item { aspect-ratio: 4 / 5; padding: 5px !important; animation-duration: 7s; }
}
@media (max-width: 380px) {
  #portfolio .poster-grid { grid-template-columns: 1fr !important; }
  #portfolio .poster-item { aspect-ratio: 4 / 5; }
}
@media (prefers-reduced-motion: reduce) {
  #portfolio .poster-item { animation: none !important; }
  #portfolio .poster-item:hover { transform: none !important; }
  #portfolio .poster-item img { transform: none !important; transition: none !important; }
}


/* SIGNATURE 10.0 — animation override fix: use individual transform properties so legacy transform rules cannot cancel motion. */
#portfolio .poster-item {
  transform: none;
  translate: 0 0;
  rotate: 0 0 0deg;
  transform-style: preserve-3d;
  perspective: 1000px;
  animation: hafPosterLevitate 4.8s ease-in-out infinite !important;
  animation-delay: 0s;
  will-change: translate, rotate;
}
#portfolio .poster-item:nth-child(4n + 2) { animation-delay: -1.2s !important; }
#portfolio .poster-item:nth-child(4n + 3) { animation-delay: -2.4s !important; }
#portfolio .poster-item:nth-child(4n) { animation-delay: -3.6s !important; }
#portfolio .poster-item img {
  transform: translateZ(18px);
  transition: translate .28s ease, rotate .28s ease, filter .28s ease;
}
@keyframes hafPosterLevitate {
  0%, 100% { translate: 0 0; rotate: 0 0 0deg; }
  50% { translate: 0 -7px; rotate: 0 1 1deg; }
}
@media (hover: hover) and (pointer: fine) {
  #portfolio .poster-item:hover {
    animation-play-state: paused !important;
    translate: 0 -10px;
    rotate: 0 1 2deg;
    transform: none !important;
    border-color: rgba(246,226,172,.78);
    box-shadow: 0 24px 48px rgba(0,0,0,.44), 0 0 0 1px rgba(246,226,172,.12), 0 0 30px rgba(132,83,177,.2);
  }
  #portfolio .poster-item:hover img {
    translate: 0 0;
    rotate: 0 0 0deg;
    filter: brightness(1.06) saturate(1.04);
  }
}
@media (prefers-reduced-motion: reduce) {
  #portfolio .poster-item {
    animation: none !important;
    translate: none !important;
    rotate: none !important;
    will-change: auto;
  }
  #portfolio .poster-item img { transform: none !important; transition: none !important; }
}


/* SIGNATURE 11.0 — cinematic gallery polish, clear depth layers, and restrained gold light. */
#portfolio {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(130,77,171,.16), transparent 58%),
    linear-gradient(180deg, rgba(18,11,28,.38), rgba(8,7,14,.08));
}
#portfolio::before {
  content: "";
  position: absolute;
  inset: 10% 4% auto;
  height: 220px;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(243,204,117,.075), transparent 70%);
  filter: blur(22px);
}
#portfolio .poster-grid { perspective: 1400px; perspective-origin: 50% 42%; }
#portfolio .poster-item {
  position: relative;
  transform-origin: center center;
  backface-visibility: hidden;
  border-color: rgba(246,226,172,.28);
  box-shadow: 0 18px 38px rgba(0,0,0,.32), inset 0 1px rgba(255,255,255,.055);
  transition: border-color .3s ease, box-shadow .3s ease, background .3s ease;
}
#portfolio .poster-item::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: .5;
  background: linear-gradient(125deg, rgba(255,255,255,.12), transparent 24%, transparent 70%, rgba(246,226,172,.07));
  mix-blend-mode: screen;
}
#portfolio .poster-item::after {
  content: "HERITAGE • PREMIUM FINANCE";
  position: absolute;
  left: 50%;
  bottom: 10px;
  z-index: 3;
  transform: translate(-50%, 5px);
  max-width: calc(100% - 16px);
  padding: 6px 9px;
  border: 1px solid rgba(246,226,172,.38);
  border-radius: 999px;
  background: rgba(8,6,13,.88);
  color: #f6e2ac;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .09em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
@media (hover: hover) and (pointer: fine) {
  #portfolio .poster-item:hover::after { opacity: 1; transform: translate(-50%, 0); }
  #portfolio .poster-item:hover::before { opacity: .9; }
  #portfolio .poster-item:hover {
    border-color: rgba(246,226,172,.82);
    background: linear-gradient(145deg, rgba(45,27,61,.98), rgba(9,7,15,.98));
    box-shadow: 0 28px 55px rgba(0,0,0,.46), 0 0 0 1px rgba(246,226,172,.12), 0 0 32px rgba(132,83,177,.2);
  }
}
@media (max-width: 700px) {
  #portfolio::before { inset: 8% 0 auto; height: 150px; }
  #portfolio .poster-item::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  #portfolio .poster-item::before, #portfolio .poster-item::after { transition: none !important; }
}


/* SIGNATURE 12.0 — make animation obvious, reliable, and add a visible desktop pointer accent. */
/* Use transform-based keyframes for broad browser compatibility; keep motion small and continuous. */
#portfolio .poster-item {
  animation: hafPosterFloatVisible 3.6s ease-in-out infinite !important;
  transform: translate3d(0,0,0);
  will-change: transform;
}
#portfolio .poster-item:nth-child(4n + 2) { animation-delay: -.9s !important; }
#portfolio .poster-item:nth-child(4n + 3) { animation-delay: -1.8s !important; }
#portfolio .poster-item:nth-child(4n) { animation-delay: -2.7s !important; }
@keyframes hafPosterFloatVisible {
  0%, 100% { transform: perspective(1000px) translate3d(0,0,0) rotateX(0deg) rotateY(0deg); }
  50% { transform: perspective(1000px) translate3d(0,-9px,0) rotateX(1.5deg) rotateY(-1.5deg); }
}
#portfolio .poster-item img {
  transform: translateZ(12px);
  transition: transform .28s ease, filter .28s ease;
}
@media (hover: hover) and (pointer: fine) {
  #portfolio .poster-item:hover {
    animation-play-state: paused !important;
    transform: perspective(1000px) translate3d(0,-11px,16px) rotateX(2deg) rotateY(-2deg) !important;
  }
  #portfolio .poster-item:hover img {
    transform: translateZ(24px) scale(1.025);
    filter: brightness(1.08) saturate(1.06);
  }
}
/* Small gold pointer dot with a trailing ring; the native cursor remains enabled as a fallback. */
@media (hover: hover) and (pointer: fine) {
  html.haf-pointer-ready, html.haf-pointer-ready body { cursor: auto; }
  .haf-cursor-dot, .haf-cursor-ring {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
    pointer-events: none;
    border-radius: 50%;
    opacity: 0;
    transform: translate3d(-100px,-100px,0);
    transition: opacity .16s ease, width .16s ease, height .16s ease, border-color .16s ease, background .16s ease;
  }
  .haf-cursor-dot {
    width: 7px;
    height: 7px;
    background: #f6e2ac;
    box-shadow: 0 0 12px rgba(246,226,172,.6);
  }
  .haf-cursor-ring {
    width: 30px;
    height: 30px;
    border: 1px solid rgba(246,226,172,.8);
    background: rgba(132,83,177,.08);
  }
  .haf-cursor-dot.is-visible, .haf-cursor-ring.is-visible { opacity: 1; }
  .haf-cursor-ring.is-hovering {
    width: 42px;
    height: 42px;
    border-color: rgba(246,226,172,1);
    background: rgba(132,83,177,.16);
  }
}
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .haf-cursor-dot, .haf-cursor-ring { display: none !important; }
  #portfolio .poster-item { animation: none !important; transform: none !important; will-change: auto; }
  #portfolio .poster-item img { transform: none !important; transition: none !important; }
}


/* SIGNATURE 13.0 — final visible-motion override for the requested desktop experience. */
@media (hover: hover) and (pointer: fine) {
  #portfolio .poster-item {
    animation: hafPosterFloatVisible 3.6s ease-in-out infinite !important;
    animation-play-state: running !important;
    transform-origin: center center;
  }
  #portfolio .poster-item:nth-child(4n + 2) { animation-delay: -.9s !important; }
  #portfolio .poster-item:nth-child(4n + 3) { animation-delay: -1.8s !important; }
  #portfolio .poster-item:nth-child(4n) { animation-delay: -2.7s !important; }
  .haf-cursor-dot, .haf-cursor-ring { display: block !important; }
  .haf-cursor-dot.is-visible, .haf-cursor-ring.is-visible { opacity: 1 !important; }
}
@media (hover: none), (pointer: coarse) {
  .haf-cursor-dot, .haf-cursor-ring { display: none !important; }
  #portfolio .poster-item { animation: none !important; }
}


/* SIGNATURE 14.0 — flashlight-style cursor glow; deliberately no ring. */
@media (hover: hover) and (pointer: fine) {
  .haf-cursor-dot, .haf-cursor-ring { display: none !important; }
  .haf-cursor-glow {
    position: fixed;
    left: 0;
    top: 0;
    width: 280px;
    height: 280px;
    z-index: 99998;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    transform: translate3d(-500px,-500px,0);
    background: radial-gradient(circle, rgba(246,226,172,.17) 0%, rgba(190,137,224,.105) 24%, rgba(132,83,177,.055) 43%, transparent 72%);
    filter: blur(7px);
    mix-blend-mode: screen;
    transition: opacity .2s ease;
    will-change: transform;
  }
  .haf-cursor-glow.is-visible { opacity: 1; }
  a, button, [role="button"] { cursor: pointer; }
}
@media (hover: none), (pointer: coarse) {
  .haf-cursor-glow { display: none !important; }
}


/* SIGNATURE 15.0 — refined flashlight glow, smoother premium motion, and layered card lighting. */
@media (hover: hover) and (pointer: fine) {
  .haf-cursor-glow {
    width: 320px;
    height: 320px;
    background: radial-gradient(circle,
      rgba(255,235,178,.2) 0%,
      rgba(246,196,95,.12) 16%,
      rgba(155,100,198,.1) 34%,
      rgba(132,83,177,.045) 52%,
      transparent 72%);
    filter: blur(5px);
    transition: opacity .22s ease;
  }
  #portfolio .poster-item,
  .service-tile, .journey-step, .detail-box, .review-card {
    transform-style: preserve-3d;
    backface-visibility: hidden;
  }
  .service-tile:hover, .journey-step:hover, .detail-box:hover, .review-card:hover {
    box-shadow: 0 22px 48px rgba(0,0,0,.32), 0 0 24px rgba(132,83,177,.12);
  }
}
@media (max-width: 700px) {
  .haf-cursor-glow { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .haf-cursor-glow { transition: none !important; }
}


/* SIGNATURE 16.0 — premium micro-interactions and a smoother flashlight halo. */
:root {
  --haf-signature-gold: #f6dfa2;
  --haf-signature-purple: rgba(146,94,190,.18);
}
@media (hover: hover) and (pointer: fine) {
  .haf-cursor-glow {
    width: 360px;
    height: 360px;
    background: radial-gradient(circle,
      rgba(255,240,195,.22) 0%,
      rgba(246,196,95,.13) 17%,
      rgba(171,119,210,.09) 35%,
      rgba(132,83,177,.035) 55%,
      transparent 73%);
    filter: blur(6px);
    mix-blend-mode: screen;
  }
  :where(.hero-cta-primary, .emi-whatsapp-cta, .direct-wa-enquiry button, .mobile-action-whatsapp) {
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }
  :where(.hero-cta-primary, .emi-whatsapp-cta, .direct-wa-enquiry button, .mobile-action-whatsapp)::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,.16) 48%, transparent 72%);
    transform: translateX(-115%);
    transition: transform .55s ease, opacity .2s ease;
    z-index: -1;
  }
  :where(.hero-cta-primary, .emi-whatsapp-cta, .direct-wa-enquiry button, .mobile-action-whatsapp):hover::after {
    opacity: 1;
    transform: translateX(115%);
  }
  #portfolio .poster-item {
    transition: box-shadow .3s ease, border-color .3s ease, background .3s ease;
  }
  #portfolio .poster-item:hover {
    box-shadow: 0 28px 58px rgba(0,0,0,.46), 0 0 36px rgba(146,94,190,.2), 0 0 1px 1px rgba(246,223,162,.35);
  }
}
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--haf-signature-gold);
  outline-offset: 3px;
}
@media (max-width: 700px) {
  .haf-cursor-glow { display: none !important; }
  :where(.hero-cta-primary, .emi-whatsapp-cta, .direct-wa-enquiry button, .mobile-action-whatsapp)::after {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  :where(.hero-cta-primary, .emi-whatsapp-cta, .direct-wa-enquiry button, .mobile-action-whatsapp)::after {
    transition: none !important;
  }
}


/* SIGNATURE 17.0 — full-site refinement: clearer hierarchy, consistent surfaces, and responsive polish. */
:root {
  --haf-17-gold: #f6dfa2;
  --haf-17-line: rgba(246,223,162,.2);
  --haf-17-panel: rgba(17,12,27,.78);
}
html { scroll-behavior: smooth; scroll-padding-top: 92px; }
body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
:where(#services, #portfolio, #tools, #contact) {
  scroll-margin-top: 90px;
}
:where(#services, #portfolio, #tools, #contact) > h2,
:where(#services, #portfolio, #tools, #contact) .section-title {
  text-wrap: balance;
}
:where(.service-tile, .journey-step, .detail-box, .review-card, .poster-item, .calc-card, .form-container) {
  border-color: var(--haf-17-line);
}
:where(.service-tile, .journey-step, .detail-box, .review-card, .calc-card, .form-container) {
  background-image: linear-gradient(145deg, rgba(255,255,255,.025), transparent 55%);
  box-shadow: 0 16px 38px rgba(0,0,0,.2), inset 0 1px rgba(255,255,255,.035);
}
:where(.service-tile, .journey-step, .detail-box, .review-card) {
  transition: transform .26s ease, box-shadow .26s ease, border-color .26s ease;
}
@media (hover: hover) and (pointer: fine) {
  :where(.service-tile, .journey-step, .detail-box, .review-card):hover {
    transform: translateY(-5px);
    border-color: rgba(246,223,162,.48);
    box-shadow: 0 24px 48px rgba(0,0,0,.32), 0 0 26px rgba(146,94,190,.1);
  }
}
:where(input, select, textarea) {
  border-color: rgba(246,223,162,.22);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
:where(input, select, textarea):focus {
  border-color: rgba(246,223,162,.72) !important;
  box-shadow: 0 0 0 3px rgba(246,223,162,.09), 0 0 22px rgba(146,94,190,.08);
}
:where(.hero-cta-primary, .emi-whatsapp-cta, .direct-wa-enquiry button, .mobile-action-whatsapp) {
  min-height: 46px;
}
img { max-width: 100%; }
@media (min-width: 1200px) {
  :where(#services, #portfolio, #tools, #contact) {
    max-width: 100%;
  }
  #services, #portfolio {
    padding-left: clamp(28px, 3vw, 56px);
    padding-right: clamp(28px, 3vw, 56px);
  }
}
@media (max-width: 700px) {
  html { scroll-padding-top: 72px; }
  :where(#services, #portfolio, #tools, #contact) { scroll-margin-top: 70px; }
  :where(.service-tile, .journey-step, .detail-box, .review-card) { transition: none; }
  :where(input, select, textarea) { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  :where(.service-tile, .journey-step, .detail-box, .review-card) { transition: none !important; }
}


/* Official logo blend fix: blend the logo's black canvas into the dark header. */
nav .nav-logo {
  display: block;
  background: transparent !important;
  mix-blend-mode: screen;
  object-fit: contain;
  isolation: auto;
  border: 0;
  box-shadow: none;
}


/* Logo seamless integration: use the same dark canvas behind the opaque logo artwork. */
nav {
  background-color: rgba(9, 5, 16, .98) !important;
}
nav .nav-logo {
  background: transparent !important;
  mix-blend-mode: screen !important;
  filter: drop-shadow(0 2px 8px rgba(240, 216, 154, .08));
  border-radius: 0 !important;
  outline: 0 !important;
}
@media (max-width: 700px) {
  nav { background-color: rgba(9, 5, 16, .99) !important; }
}


/* SIGNATURE 18 — whole-site refinement: hierarchy, rhythm, polish and responsive comfort. */
:root {
  --haf-s18-gold: #f3dda3;
  --haf-s18-border: rgba(243, 221, 163, .2);
  --haf-s18-panel: rgba(20, 14, 29, .72);
}
html { scroll-behavior: smooth; }
body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
:where(h1, h2, h3, h4) {
  text-wrap: balance;
  letter-spacing: -.018em;
}
:where(p, li) { text-wrap: pretty; }
:where(section, .section) { isolation: isolate; }
:where(.service-tile, .journey-step, .detail-box, .review-card, .calc-card, .form-container, .stats-bar) {
  border: 1px solid var(--haf-s18-border);
  border-radius: 18px;
}
:where(.service-tile, .journey-step, .detail-box, .review-card, .calc-card, .form-container) {
  box-shadow: 0 16px 42px rgba(0,0,0,.19), inset 0 1px rgba(255,255,255,.035);
}
:where(.service-tile, .journey-step, .detail-box, .review-card) {
  overflow: hidden;
}
:where(.service-tile, .journey-step, .detail-box, .review-card) :where(h3, h4) {
  color: #f7e8c3;
}
:where(.service-tile, .journey-step, .detail-box, .review-card) :where(p, li) {
  line-height: 1.72;
}
:where(.hero-cta-primary, .emi-whatsapp-cta, .direct-wa-enquiry button, .mobile-action-whatsapp) {
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: .01em;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
@media (hover: hover) and (pointer: fine) {
  :where(.hero-cta-primary, .emi-whatsapp-cta, .direct-wa-enquiry button, .mobile-action-whatsapp):hover {
    filter: brightness(1.055);
    box-shadow: 0 12px 30px rgba(0,0,0,.24), 0 0 22px rgba(243,221,163,.09);
  }
}
:where(input, select, textarea) {
  border-radius: 12px;
  max-width: 100%;
}
:where(button, input, select, textarea, a) { -webkit-tap-highlight-color: transparent; }
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--haf-s18-gold);
  outline-offset: 3px;
}
:where(.trust-strip, .heritage-proof-strip, .lead-form-assurances) {
  gap: 12px;
}
:where(.trust-strip > div, .heritage-proof-strip > div, .lead-form-assurances span) {
  border-color: rgba(243,221,163,.16);
}
:where(.poster-grid .poster-item, .hero-banner .main-poster) {
  overflow: hidden;
}
.poster-grid .poster-item img {
  display: block;
  transition: transform .35s ease, filter .35s ease;
}
@media (hover: hover) and (pointer: fine) {
  .poster-grid .poster-item:hover img { transform: scale(1.025); filter: saturate(1.04); }
}
footer {
  border-top: 1px solid rgba(243,221,163,.16);
}
footer :where(p, li) { line-height: 1.75; }
.site-disclaimer { text-wrap: pretty; }
@media (max-width: 700px) {
  body { line-height: 1.65; }
  :where(.service-tile, .journey-step, .detail-box, .review-card, .calc-card, .form-container, .stats-bar) {
    border-radius: 15px;
  }
  :where(.service-tile, .journey-step, .detail-box, .review-card) {
    box-shadow: 0 9px 25px rgba(0,0,0,.17);
  }
  :where(.hero-cta-primary, .emi-whatsapp-cta, .direct-wa-enquiry button, .mobile-action-whatsapp) {
    min-height: 46px;
  }
  .poster-grid .poster-item img { transition: none; }
}
@media (prefers-reduced-motion: reduce) {
  .poster-grid .poster-item img,
  :where(.hero-cta-primary, .emi-whatsapp-cta, .direct-wa-enquiry button, .mobile-action-whatsapp) {
    transition: none !important;
  }
}


/* FINAL FIX — desktop 3D orbit visibility + seamless official logo integration. */
/* Keep the orbit visible on desktop as well as mobile; no hover prerequisite. */
.hero-banner {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden;
}
.hero-banner > .haf-3d-orbit {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: absolute !important;
  z-index: 9 !important;
  top: 18px !important;
  right: 22px !important;
  width: clamp(112px, 14vw, 190px) !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  pointer-events: none !important;
  transform-style: preserve-3d !important;
}
@media (min-width: 701px) {
  .hero-banner > .haf-3d-orbit {
    animation: haf-signature-orbit 7s cubic-bezier(.45,0,.55,1) infinite alternate !important;
  }
  .hero-banner > .haf-3d-orbit::before,
  .hero-banner > .haf-3d-orbit::after {
    display: block !important;
  }
}
@media (max-width: 700px) {
  .hero-banner > .haf-3d-orbit {
    width: clamp(88px, 25vw, 116px) !important;
    top: 10px !important;
    right: 10px !important;
  }
}
/* Match the logo canvas to the header so it no longer looks like a pasted black tile. */
nav {
  isolation: isolate;
  background: #090510 !important;
  background-color: #090510 !important;
}
nav .nav-logo {
  display: block;
  background: transparent !important;
  mix-blend-mode: screen !important;
  object-fit: contain !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  filter: brightness(1.08) contrast(1.06) drop-shadow(0 2px 9px rgba(240,216,154,.10)) !important;
}
@media (max-width: 700px) {
  nav { background: #090510 !important; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-banner > .haf-3d-orbit,
  .hero-banner > .haf-3d-orbit::before,
  .hero-banner > .haf-3d-orbit::after {
    animation: none !important;
  }
}


/* DESKTOP HERO MOTION FIX — keep both orbital layers visible behind hero content. */
.hero-banner {
  position: relative !important;
  isolation: isolate !important;
}
.hero-banner > .haf-3d-orbit,
.hero-banner > .haf-3d-orbit-secondary {
  display: block !important;
  visibility: visible !important;
  pointer-events: none !important;
  z-index: 1 !important;
  opacity: .72 !important;
  transform-style: preserve-3d !important;
}
.hero-banner > .haf-3d-orbit {
  width: clamp(150px, 19vw, 250px) !important;
  height: clamp(150px, 19vw, 250px) !important;
  top: 16px !important;
  right: clamp(16px, 4vw, 58px) !important;
  border: 1px solid rgba(244, 199, 95, .42) !important;
  animation: hafDesktopOrbitA 13s linear infinite !important;
}
.hero-banner > .haf-3d-orbit-secondary {
  width: clamp(112px, 14vw, 184px) !important;
  height: clamp(112px, 14vw, 184px) !important;
  top: 42px !important;
  right: clamp(34px, 6vw, 82px) !important;
  border: 1px solid rgba(201, 140, 255, .42) !important;
  animation: hafDesktopOrbitB 9s linear infinite !important;
}
.hero-banner > .haf-3d-orbit::before,
.hero-banner > .haf-3d-orbit::after,
.hero-banner > .haf-3d-orbit-secondary::before,
.hero-banner > .haf-3d-orbit-secondary::after {
  content: "";
  display: block !important;
  position: absolute;
  inset: 13%;
  border: 1px solid rgba(244, 199, 95, .25);
  border-radius: 50%;
  transform: rotateX(64deg) rotateY(24deg);
}
.hero-banner > .haf-3d-orbit::after,
.hero-banner > .haf-3d-orbit-secondary::after {
  inset: 23%;
  border-color: rgba(201, 140, 255, .28);
  transform: rotateX(68deg) rotateY(-32deg);
}
.hero-banner > .secure-badge,
.hero-banner > .typing-container,
.hero-banner > .hero-supporting,
.hero-banner > .hero-actions,
.hero-banner > .hero-trust-points,
.hero-banner > .main-poster { position: relative; z-index: 2; }
@keyframes hafDesktopOrbitA {
  from { transform: perspective(900px) rotateX(62deg) rotateZ(0deg); }
  to { transform: perspective(900px) rotateX(62deg) rotateZ(360deg); }
}
@keyframes hafDesktopOrbitB {
  from { transform: perspective(900px) rotateX(68deg) rotateZ(360deg); }
  to { transform: perspective(900px) rotateX(68deg) rotateZ(0deg); }
}
/* Logo black pixels blend into the dark header; keep gold artwork crisp. */
nav .nav-logo {
  background: transparent !important;
  mix-blend-mode: screen !important;
  filter: brightness(1.12) contrast(1.12) drop-shadow(0 0 8px rgba(240,216,154,.12)) !important;
}
@media (max-width: 700px) {
  .hero-banner > .haf-3d-orbit { width: 104px !important; height: 104px !important; top: 8px !important; right: 8px !important; }
  .hero-banner > .haf-3d-orbit-secondary { width: 76px !important; height: 76px !important; top: 23px !important; right: 22px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-banner > .haf-3d-orbit,
  .hero-banner > .haf-3d-orbit-secondary { animation: none !important; }
}


/* DESKTOP 3D ORBIT VISIBILITY — place the animated rings above the hero poster.
   Previous layers sat behind .main-poster (z-index 2), making them invisible on PC. */
@media (min-width: 701px) {
  .hero-banner > .haf-3d-orbit,
  .hero-banner > .haf-3d-orbit-secondary {
    display: block !important;
    visibility: visible !important;
    opacity: .92 !important;
    z-index: 5 !important;
    pointer-events: none !important;
    transform-style: preserve-3d !important;
    mix-blend-mode: screen;
    will-change: transform;
  }
  .hero-banner > .haf-3d-orbit {
    width: clamp(150px, 16vw, 220px) !important;
    height: clamp(150px, 16vw, 220px) !important;
    top: 8% !important;
    right: clamp(24px, 6vw, 88px) !important;
    animation: hafDesktopOrbitA 13s linear infinite !important;
    border-color: rgba(255, 218, 124, .78) !important;
    box-shadow: 0 0 18px rgba(244,199,95,.16), inset 0 0 18px rgba(244,199,95,.07);
  }
  .hero-banner > .haf-3d-orbit-secondary {
    width: clamp(112px, 12vw, 166px) !important;
    height: clamp(112px, 12vw, 166px) !important;
    top: calc(8% + 27px) !important;
    right: calc(clamp(24px, 6vw, 88px) + 27px) !important;
    animation: hafDesktopOrbitB 9s linear infinite !important;
    border-color: rgba(210, 158, 255, .76) !important;
    box-shadow: 0 0 22px rgba(166,105,226,.18), inset 0 0 16px rgba(166,105,226,.06);
  }
  .hero-banner > .haf-3d-orbit::before,
  .hero-banner > .haf-3d-orbit::after,
  .hero-banner > .haf-3d-orbit-secondary::before,
  .hero-banner > .haf-3d-orbit-secondary::after {
    opacity: 1 !important;
    border-width: 1.5px !important;
  }
}
@media (min-width: 701px) and (prefers-reduced-motion: reduce) {
  .hero-banner > .haf-3d-orbit,
  .hero-banner > .haf-3d-orbit-secondary {
    animation: none !important;
  }
}


/* DESKTOP HERO 3D FIX v2 — visible elliptical motion, not a symmetric spinning circle. */
@media (min-width: 701px) {
  .hero-banner {
    overflow: visible !important;
  }
  .hero-banner > .haf-3d-orbit,
  .hero-banner > .haf-3d-orbit-secondary {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    border-radius: 50% !important;
    transform-origin: center center !important;
    will-change: transform !important;
    animation-timing-function: linear !important;
    animation-iteration-count: infinite !important;
    animation-direction: normal !important;
  }
  .hero-banner > .haf-3d-orbit {
    border: 2px solid rgba(255, 214, 115, .88) !important;
    transform-style: preserve-3d !important;
    box-shadow: 0 0 20px rgba(255, 196, 75, .23), inset 0 0 18px rgba(255, 196, 75, .10) !important;
    animation: hafDesktopOrbitVisibleA 7s linear infinite !important;
  }
  .hero-banner > .haf-3d-orbit-secondary {
    border: 2px solid rgba(205, 150, 255, .9) !important;
    box-shadow: 0 0 24px rgba(173, 112, 255, .24), inset 0 0 18px rgba(173, 112, 255, .10) !important;
    animation: hafDesktopOrbitVisibleB 5.5s linear infinite !important;
  }
  .hero-banner > .haf-3d-orbit::before,
  .hero-banner > .haf-3d-orbit-secondary::before {
    content: "" !important;
    position: absolute !important;
    display: block !important;
    width: 12px !important;
    height: 12px !important;
    inset: auto auto 12% 12% !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: #fff0bd !important;
    box-shadow: 0 0 9px 3px rgba(255, 202, 87, .8), 0 0 22px 7px rgba(255, 202, 87, .28) !important;
    transform: none !important;
    opacity: 1 !important;
  }
  .hero-banner > .haf-3d-orbit-secondary::before {
    width: 9px !important;
    height: 9px !important;
    background: #f2dcff !important;
    box-shadow: 0 0 9px 3px rgba(199, 143, 255, .9), 0 0 20px 6px rgba(199, 143, 255, .32) !important;
  }
  .hero-banner > .haf-3d-orbit::after,
  .hero-banner > .haf-3d-orbit-secondary::after {
    content: "" !important;
    position: absolute !important;
    display: block !important;
    inset: 14% !important;
    border: 1px solid rgba(255, 239, 194, .42) !important;
    border-radius: 50% !important;
    transform: rotateX(68deg) rotateY(28deg) !important;
    opacity: .95 !important;
  }
}
@keyframes hafDesktopOrbitVisibleA {
  0% { transform: perspective(850px) rotateX(66deg) rotateY(-18deg) rotateZ(0deg) scale(.96); }
  50% { transform: perspective(850px) rotateX(54deg) rotateY(18deg) rotateZ(180deg) scale(1.04); }
  100% { transform: perspective(850px) rotateX(66deg) rotateY(-18deg) rotateZ(360deg) scale(.96); }
}
@keyframes hafDesktopOrbitVisibleB {
  0% { transform: perspective(780px) rotateX(58deg) rotateY(24deg) rotateZ(360deg) scale(1.02); }
  50% { transform: perspective(780px) rotateX(72deg) rotateY(-20deg) rotateZ(180deg) scale(.94); }
  100% { transform: perspective(780px) rotateX(58deg) rotateY(24deg) rotateZ(0deg) scale(1.02); }
}
@media (min-width: 701px) and (prefers-reduced-motion: reduce) {
  .hero-banner > .haf-3d-orbit,
  .hero-banner > .haf-3d-orbit-secondary {
    animation: none !important;
    transform: perspective(850px) rotateX(60deg) rotateY(15deg) !important;
  }
}


/* GALAXY DESKTOP EDITION — immersive page-wide nebula, stars and layered depth. */
html {
  background: #07040f;
}
body {
  position: relative;
  isolation: isolate;
  background-color: transparent !important;
  background-image:
    radial-gradient(ellipse at 12% 8%, rgba(107, 63, 160, .28), transparent 34rem),
    radial-gradient(ellipse at 88% 18%, rgba(41, 68, 139, .22), transparent 38rem),
    radial-gradient(ellipse at 52% 52%, rgba(74, 38, 120, .17), transparent 42rem),
    radial-gradient(ellipse at 14% 84%, rgba(47, 64, 132, .18), transparent 34rem),
    radial-gradient(ellipse at 90% 92%, rgba(133, 78, 156, .16), transparent 38rem) !important;
  background-attachment: fixed !important;
}
body::before {
  content: "";
  position: fixed;
  inset: -10%;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(1.5px 1.5px at 8% 14%, rgba(255,255,255,.9) 45%, transparent 70%),
    radial-gradient(1px 1px at 18% 76%, rgba(238,221,255,.85) 45%, transparent 70%),
    radial-gradient(2px 2px at 27% 31%, rgba(255,224,156,.9) 45%, transparent 70%),
    radial-gradient(1px 1px at 39% 88%, rgba(255,255,255,.8) 45%, transparent 70%),
    radial-gradient(1.5px 1.5px at 47% 18%, rgba(218,193,255,.9) 45%, transparent 70%),
    radial-gradient(1px 1px at 58% 63%, rgba(255,255,255,.8) 45%, transparent 70%),
    radial-gradient(2px 2px at 69% 28%, rgba(255,226,171,.85) 45%, transparent 70%),
    radial-gradient(1px 1px at 78% 82%, rgba(230,214,255,.9) 45%, transparent 70%),
    radial-gradient(1.5px 1.5px at 91% 45%, rgba(255,255,255,.9) 45%, transparent 70%),
    radial-gradient(ellipse at 50% 40%, rgba(95,52,151,.10), transparent 55%);
  background-size: 100% 100%;
  opacity: .82;
  animation: hafGalaxyDrift 44s linear infinite alternate;
  will-change: transform;
}
@keyframes hafGalaxyDrift {
  from { transform: translate3d(-.4%, -.3%, 0) scale(1); }
  to { transform: translate3d(.4%, .3%, 0) scale(1.025); }
}
/* Give every desktop section a translucent cosmic surface instead of flat black blocks. */
@media (min-width: 701px) {
  nav {
    background: rgba(9, 5, 20, .72) !important;
    -webkit-backdrop-filter: blur(20px) saturate(145%);
    backdrop-filter: blur(20px) saturate(145%);
    border-bottom-color: rgba(205, 164, 255, .22) !important;
  }
  main > section,
  main > .stats-bar,
  main > .service-rail,
  main > .detail-section,
  main > .contact-section,
  main > .tools-section {
    position: relative;
    isolation: isolate;
  }
  main > section::before,
  main > .stats-bar::before,
  main > .service-rail::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    border-radius: inherit;
    background:
      radial-gradient(ellipse at 0% 0%, rgba(119, 73, 174, .10), transparent 55%),
      radial-gradient(ellipse at 100% 100%, rgba(58, 80, 156, .08), transparent 58%);
  }
  .hero-banner {
    background:
      radial-gradient(ellipse at 78% 28%, rgba(111, 65, 169, .18), transparent 38%),
      radial-gradient(ellipse at 18% 90%, rgba(46, 70, 151, .13), transparent 45%);
    border: 1px solid rgba(204, 165, 255, .12);
    box-shadow: 0 26px 80px rgba(0,0,0,.16), inset 0 1px rgba(255,255,255,.035);
  }
  .service-tile, .journey-step, .detail-box, .review-card, .calc-card, .form-container, .poster-grid .poster-item {
    background-image: linear-gradient(145deg, rgba(154,117,199,.065), rgba(255,255,255,.012) 55%, rgba(61,79,153,.045));
    border-color: rgba(196,166,239,.17);
  }
  .stats-bar {
    background: linear-gradient(110deg, rgba(91,54,135,.20), rgba(16,12,33,.72), rgba(48,61,122,.17));
  }
  .section-title::after {
    background: linear-gradient(90deg, transparent, #e8d2ff 24%, #f1d48a 52%, #bca1ff 78%, transparent);
    box-shadow: 0 0 22px rgba(172,131,255,.3);
  }
  .hero-banner > .haf-3d-orbit {
    border-color: rgba(255,220,137,.9) !important;
    box-shadow: 0 0 24px rgba(255,203,91,.23), inset 0 0 22px rgba(255,203,91,.1) !important;
  }
  .hero-banner > .haf-3d-orbit-secondary {
    border-color: rgba(205,155,255,.95) !important;
    box-shadow: 0 0 28px rgba(165,107,255,.28), inset 0 0 22px rgba(165,107,255,.11) !important;
  }
  .hero-banner > .haf-3d-orbit::before,
  .hero-banner > .haf-3d-orbit-secondary::before {
    box-shadow: 0 0 12px 4px rgba(214,182,255,.82), 0 0 28px 9px rgba(145,101,236,.3) !important;
  }
  footer {
    background: linear-gradient(180deg, rgba(10,6,22,.55), rgba(7,4,15,.92));
    border-top-color: rgba(188,153,242,.24);
  }
}
/* Seamless logo: remove the visual black tile by blending black pixels into the header. */
nav .nav-logo {
  mix-blend-mode: screen !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  object-fit: contain !important;
  filter: brightness(1.08) contrast(1.08) drop-shadow(0 0 9px rgba(244,216,157,.13)) !important;
}
@media (max-width: 700px) {
  body {
    background-attachment: scroll !important;
    background-image:
      radial-gradient(ellipse at 12% 8%, rgba(107,63,160,.16), transparent 28rem),
      radial-gradient(ellipse at 88% 24%, rgba(41,68,139,.13), transparent 28rem) !important;
  }
  body::before { opacity: .48; animation-duration: 70s; }
}
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none !important; }
}


/* DESKTOP HERO ANIMATION — hard override after all theme layers.
   Keep the orbital artwork visibly above the hero background on wide screens. */
@media screen and (min-width: 701px) {
  .hero-banner {
    position: relative !important;
    isolation: isolate !important;
    overflow: visible !important;
  }
  .hero-banner > .haf-3d-orbit,
  .hero-banner > .haf-3d-orbit-secondary {
    display: block !important;
    position: absolute !important;
    visibility: visible !important;
    pointer-events: none !important;
    border-radius: 50% !important;
    opacity: 1 !important;
    z-index: 4 !important;
    transform-origin: center center !important;
    transform-style: preserve-3d !important;
    mix-blend-mode: screen !important;
    will-change: transform;
  }
  .hero-banner > .haf-3d-orbit {
    width: clamp(190px, 21vw, 310px) !important;
    height: clamp(190px, 21vw, 310px) !important;
    top: 5% !important;
    right: clamp(34px, 7vw, 112px) !important;
    border: 2px solid rgba(255, 218, 128, .96) !important;
    box-shadow: 0 0 16px rgba(255,203,91,.42), 0 0 42px rgba(255,203,91,.20), inset 0 0 24px rgba(255,203,91,.14) !important;
    animation: hafDesktopOrbitVisibleA 8s linear infinite !important;
  }
  .hero-banner > .haf-3d-orbit-secondary {
    width: clamp(138px, 15vw, 220px) !important;
    height: clamp(138px, 15vw, 220px) !important;
    top: calc(5% + 34px) !important;
    right: calc(clamp(34px, 7vw, 112px) + 34px) !important;
    border: 2px solid rgba(216, 172, 255, .98) !important;
    box-shadow: 0 0 18px rgba(179,119,255,.46), 0 0 46px rgba(179,119,255,.22), inset 0 0 24px rgba(179,119,255,.14) !important;
    animation: hafDesktopOrbitVisibleB 6.4s linear infinite !important;
  }
  .hero-banner > .haf-3d-orbit::before,
  .hero-banner > .haf-3d-orbit::after,
  .hero-banner > .haf-3d-orbit-secondary::before,
  .hero-banner > .haf-3d-orbit-secondary::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: 14% !important;
    border: 1px solid rgba(255, 239, 199, .72) !important;
    border-radius: 50% !important;
    transform: rotateX(64deg) rotateY(28deg) !important;
    opacity: 1 !important;
  }
  .hero-banner > .haf-3d-orbit::before,
  .hero-banner > .haf-3d-orbit-secondary::before {
    inset: auto auto 10% 12% !important;
    width: 12px !important;
    height: 12px !important;
    border: 0 !important;
    background: #fff2c6 !important;
    box-shadow: 0 0 12px 4px rgba(255,210,105,.95), 0 0 30px 10px rgba(255,210,105,.34) !important;
    transform: none !important;
  }
  .hero-banner > .haf-3d-orbit-secondary::before {
    width: 9px !important;
    height: 9px !important;
    background: #f5e5ff !important;
    box-shadow: 0 0 12px 4px rgba(206,160,255,.98), 0 0 28px 9px rgba(174,112,255,.42) !important;
  }
}
@media screen and (min-width: 701px) and (prefers-reduced-motion: reduce) {
  .hero-banner > .haf-3d-orbit,
  .hero-banner > .haf-3d-orbit-secondary {
    animation: none !important;
  }
}

/* Logo integration: prevent a rectangular black tile from looking pasted on. */
nav .nav-logo {
  display: block !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  object-fit: contain !important;
  mix-blend-mode: screen !important;
  filter: brightness(1.1) contrast(1.12) drop-shadow(0 0 10px rgba(244,216,157,.16)) !important;
}


/* DESKTOP HERO ANIMATION FIX — independent 3D layer, not dependent on legacy orbit spans. */
.haf-desktop-3d-scene { display: none; }
@media screen and (min-width: 701px) {
  .hero-banner { position: relative !important; isolation: isolate !important; }
  .hero-banner > .haf-desktop-3d-scene {
    display: block !important;
    position: absolute !important;
    z-index: 6 !important;
    top: 5% !important;
    right: clamp(22px, 5.4vw, 78px) !important;
    width: clamp(190px, 20vw, 290px) !important;
    aspect-ratio: 1 !important;
    pointer-events: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform-style: preserve-3d !important;
    perspective: 900px !important;
  }
  .haf-desktop-3d-scene .haf-scene-ring {
    position: absolute !important;
    inset: 4% !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    border-radius: 50% !important;
    border: 2px solid rgba(255, 218, 125, .95) !important;
    box-shadow: 0 0 16px rgba(255,205,93,.46), inset 0 0 18px rgba(255,205,93,.13) !important;
    background: transparent !important;
    animation: hafSceneSpin 7s linear infinite !important;
    transform-style: preserve-3d !important;
  }
  .haf-desktop-3d-scene .haf-scene-ring::before,
  .haf-desktop-3d-scene .haf-scene-ring::after {
    content: "" !important;
    position: absolute !important;
    display: block !important;
    inset: 12% !important;
    border: 1px solid rgba(255,241,204,.86) !important;
    border-radius: 50% !important;
    background: transparent !important;
    transform: rotateX(66deg) rotateY(28deg) !important;
  }
  .haf-desktop-3d-scene .haf-scene-ring::after {
    inset: 22% !important;
    transform: rotateX(70deg) rotateY(-36deg) !important;
    border-color: rgba(214,179,255,.88) !important;
  }
  .haf-desktop-3d-scene .haf-scene-ring-violet {
    inset: 16% !important;
    border-color: rgba(213,167,255,.98) !important;
    box-shadow: 0 0 22px rgba(178,112,255,.48), inset 0 0 18px rgba(178,112,255,.16) !important;
    animation: hafSceneSpinReverse 5.2s linear infinite !important;
  }
  .haf-desktop-3d-scene .haf-scene-ring-violet::before {
    inset: 9% !important;
    transform: rotateX(48deg) rotateY(-42deg) !important;
  }
  .haf-desktop-3d-scene .haf-scene-ring-violet::after { display: none !important; }
  .haf-desktop-3d-scene .haf-scene-core {
    position: absolute !important;
    width: 10px !important;
    height: 10px !important;
    top: 15% !important;
    left: 18% !important;
    border-radius: 50% !important;
    background: #fff2ca !important;
    box-shadow: 0 0 12px 5px rgba(255,208,100,.9), 0 0 34px 12px rgba(255,208,100,.35) !important;
    animation: hafSceneCoreFloat 3s ease-in-out infinite alternate !important;
  }
}
@keyframes hafSceneSpin {
  0% { transform: rotateX(64deg) rotateY(-20deg) rotateZ(0deg) scale(.94); }
  50% { transform: rotateX(52deg) rotateY(22deg) rotateZ(180deg) scale(1.04); }
  100% { transform: rotateX(64deg) rotateY(-20deg) rotateZ(360deg) scale(.94); }
}
@keyframes hafSceneSpinReverse {
  from { transform: rotateX(58deg) rotateY(28deg) rotateZ(360deg); }
  to { transform: rotateX(70deg) rotateY(-24deg) rotateZ(0deg); }
}
@keyframes hafSceneCoreFloat {
  from { transform: translate3d(0,0,0) scale(.8); opacity: .72; }
  to { transform: translate3d(9px,13px,20px) scale(1.2); opacity: 1; }
}
@media screen and (min-width: 701px) and (max-width: 1000px) {
  .hero-banner > .haf-desktop-3d-scene { right: 12px !important; width: clamp(150px, 19vw, 200px) !important; top: 3% !important; }
}
@media screen and (min-width: 701px) and (prefers-reduced-motion: reduce) {
  .haf-desktop-3d-scene .haf-scene-ring,
  .haf-desktop-3d-scene .haf-scene-core { animation: none !important; }
}


/* DESKTOP MOTION HOTFIX — ensure the visible hero 3D rings keep rotating.
   Unique keyframes and final cascade override prevent older desktop/reduced-motion
   declarations from accidentally leaving the scene looking frozen. */
@media screen and (min-width: 701px) {
  .hero-banner > .haf-desktop-3d-scene,
  .hero-banner > .haf-3d-orbit,
  .hero-banner > .haf-3d-orbit-secondary {
    animation-play-state: running !important;
  }
  .hero-banner > .haf-desktop-3d-scene .haf-scene-ring {
    animation: hafDesktopLiveSpin 8s linear infinite !important;
    animation-play-state: running !important;
    animation-delay: 0s !important;
  }
  .hero-banner > .haf-desktop-3d-scene .haf-scene-ring-violet {
    animation: hafDesktopLiveSpinReverse 5.6s linear infinite !important;
    animation-play-state: running !important;
    animation-delay: 0s !important;
  }
  .hero-banner > .haf-desktop-3d-scene .haf-scene-core {
    animation: hafDesktopLiveFloat 2.8s ease-in-out infinite alternate !important;
    animation-play-state: running !important;
    animation-delay: 0s !important;
  }
  .hero-banner > .haf-3d-orbit {
    animation: hafDesktopLiveOrbitA 8s linear infinite !important;
    animation-play-state: running !important;
  }
  .hero-banner > .haf-3d-orbit-secondary {
    animation: hafDesktopLiveOrbitB 6s linear infinite !important;
    animation-play-state: running !important;
  }
}
@keyframes hafDesktopLiveSpin {
  from { transform: rotateX(58deg) rotateY(-24deg) rotateZ(0deg) scale(.94); }
  50% { transform: rotateX(68deg) rotateY(22deg) rotateZ(180deg) scale(1.04); }
  to { transform: rotateX(58deg) rotateY(-24deg) rotateZ(360deg) scale(.94); }
}
@keyframes hafDesktopLiveSpinReverse {
  from { transform: rotateX(70deg) rotateY(26deg) rotateZ(360deg) scale(.96); }
  to { transform: rotateX(52deg) rotateY(-28deg) rotateZ(0deg) scale(1.03); }
}
@keyframes hafDesktopLiveFloat {
  from { transform: translate3d(0,0,0) scale(.78); opacity: .72; }
  to { transform: translate3d(12px,16px,22px) scale(1.22); opacity: 1; }
}
@keyframes hafDesktopLiveOrbitA {
  from { transform: rotateX(62deg) rotateY(-18deg) rotateZ(0deg); }
  to { transform: rotateX(62deg) rotateY(-18deg) rotateZ(360deg); }
}
@keyframes hafDesktopLiveOrbitB {
  from { transform: rotateX(48deg) rotateY(32deg) rotateZ(360deg); }
  to { transform: rotateX(48deg) rotateY(32deg) rotateZ(0deg); }
}


/* HERO MOTION RELIABILITY PATCH — keep every decorative desktop layer independently animated. */
@media screen and (min-width: 701px) {
  .hero-banner {
    overflow: visible !important;
    perspective: 1100px !important;
  }
  .hero-banner > .haf-desktop-3d-scene {
    animation: hafMotionSceneDrift 9s ease-in-out infinite alternate !important;
    animation-play-state: running !important;
    will-change: transform, opacity !important;
  }
  .hero-banner > .haf-desktop-3d-scene .haf-scene-ring {
    animation: hafMotionGoldOrbit 7.2s linear infinite !important;
    animation-play-state: running !important;
    will-change: transform !important;
  }
  .hero-banner > .haf-desktop-3d-scene .haf-scene-ring-violet {
    animation: hafMotionVioletOrbit 5.1s linear infinite !important;
    animation-play-state: running !important;
    will-change: transform !important;
  }
  .hero-banner > .haf-desktop-3d-scene .haf-scene-core {
    animation: hafMotionCorePulse 2.4s ease-in-out infinite alternate !important;
    animation-play-state: running !important;
    will-change: transform, opacity !important;
  }
  .hero-banner > .haf-3d-orbit {
    animation: hafMotionOrbitA 8.4s linear infinite !important;
    animation-play-state: running !important;
    will-change: transform !important;
  }
  .hero-banner > .haf-3d-orbit-secondary {
    animation: hafMotionOrbitB 6.3s linear infinite !important;
    animation-play-state: running !important;
    will-change: transform !important;
  }
  .hero-banner::before {
    animation: hafMotionHeroGlow 8s ease-in-out infinite alternate !important;
    will-change: opacity, transform !important;
  }
}
@keyframes hafMotionSceneDrift {
  from { transform: translate3d(0, -4px, 0) rotateY(-5deg); }
  to { transform: translate3d(0, 7px, 0) rotateY(5deg); }
}
@keyframes hafMotionGoldOrbit {
  from { transform: rotateX(58deg) rotateY(-24deg) rotateZ(0deg) scale(.94); }
  50% { transform: rotateX(68deg) rotateY(22deg) rotateZ(180deg) scale(1.04); }
  to { transform: rotateX(58deg) rotateY(-24deg) rotateZ(360deg) scale(.94); }
}
@keyframes hafMotionVioletOrbit {
  from { transform: rotateX(70deg) rotateY(26deg) rotateZ(360deg) scale(.96); }
  to { transform: rotateX(52deg) rotateY(-28deg) rotateZ(0deg) scale(1.03); }
}
@keyframes hafMotionCorePulse {
  from { transform: translate3d(0,0,0) scale(.72); opacity: .68; }
  to { transform: translate3d(12px,15px,20px) scale(1.24); opacity: 1; }
}
@keyframes hafMotionOrbitA {
  from { transform: rotateX(62deg) rotateY(-18deg) rotateZ(0deg); }
  to { transform: rotateX(62deg) rotateY(-18deg) rotateZ(360deg); }
}
@keyframes hafMotionOrbitB {
  from { transform: rotateX(48deg) rotateY(32deg) rotateZ(360deg); }
  to { transform: rotateX(48deg) rotateY(32deg) rotateZ(0deg); }
}
@keyframes hafMotionHeroGlow {
  from { opacity: .65; transform: translate3d(-.4%,0,0) scale(.98); }
  to { opacity: 1; transform: translate3d(.4%,.5%,0) scale(1.03); }
}
@media screen and (min-width: 701px) and (prefers-reduced-motion: reduce) {
  .hero-banner > .haf-desktop-3d-scene,
  .hero-banner > .haf-desktop-3d-scene .haf-scene-ring,
  .hero-banner > .haf-desktop-3d-scene .haf-scene-ring-violet,
  .hero-banner > .haf-desktop-3d-scene .haf-scene-core,
  .hero-banner > .haf-3d-orbit,
  .hero-banner > .haf-3d-orbit-secondary,
  .hero-banner::before {
    animation: none !important;
    will-change: auto !important;
  }
}


/* FINAL DESKTOP MOTION RECOVERY — prevent the hero orbit from appearing frozen. */
@media screen and (min-width: 701px) {
  .hero-banner > .haf-desktop-3d-scene {
    animation: hafMotionSceneDrift 12s ease-in-out infinite alternate !important;
    animation-play-state: running !important;
  }
  .hero-banner > .haf-desktop-3d-scene .haf-scene-ring {
    animation: hafMotionGoldOrbit 9s linear infinite !important;
    animation-play-state: running !important;
  }
  .hero-banner > .haf-desktop-3d-scene .haf-scene-ring-violet {
    animation: hafMotionVioletOrbit 7s linear infinite !important;
    animation-play-state: running !important;
  }
  .hero-banner > .haf-desktop-3d-scene .haf-scene-core {
    animation: hafMotionCorePulse 3.4s ease-in-out infinite alternate !important;
    animation-play-state: running !important;
  }
  .hero-banner > .haf-3d-orbit {
    animation: hafMotionOrbitA 10s linear infinite !important;
    animation-play-state: running !important;
  }
  .hero-banner > .haf-3d-orbit-secondary {
    animation: hafMotionOrbitB 8s linear infinite !important;
    animation-play-state: running !important;
  }
}
/* If reduced motion is requested, keep the desktop rings gently moving instead of freezing. */
@media screen and (min-width: 701px) and (prefers-reduced-motion: reduce) {
  .hero-banner > .haf-desktop-3d-scene {
    animation: hafMotionSceneDrift 24s ease-in-out infinite alternate !important;
  }
  .hero-banner > .haf-desktop-3d-scene .haf-scene-ring {
    animation: hafMotionGoldOrbit 22s linear infinite !important;
  }
  .hero-banner > .haf-desktop-3d-scene .haf-scene-ring-violet {
    animation: hafMotionVioletOrbit 18s linear infinite !important;
  }
  .hero-banner > .haf-desktop-3d-scene .haf-scene-core {
    animation: hafMotionCorePulse 12s ease-in-out infinite alternate !important;
  }
  .hero-banner > .haf-3d-orbit {
    animation: hafMotionOrbitA 24s linear infinite !important;
  }
  .hero-banner > .haf-3d-orbit-secondary {
    animation: hafMotionOrbitB 20s linear infinite !important;
  }
}


/* FINAL HERO MOTION FIX — animate every visible layer, not just the main rings. */
@media screen and (min-width: 701px) {
  .hero-banner > .haf-desktop-3d-scene {
    animation: hafHeroSceneDriftFinal 6s ease-in-out infinite alternate !important;
    animation-play-state: running !important;
    transform-origin: 50% 50% !important;
  }
  .hero-banner > .haf-desktop-3d-scene .haf-scene-ring::before {
    animation: hafHeroInnerOrbitFinal 4.8s linear infinite !important;
    transform-origin: 50% 50% !important;
  }
  .hero-banner > .haf-desktop-3d-scene .haf-scene-ring::after {
    animation: hafHeroOuterOrbitFinal 6.2s linear infinite reverse !important;
    transform-origin: 50% 50% !important;
  }
  .hero-banner > .haf-desktop-3d-scene .haf-scene-ring-violet::before {
    animation: hafHeroVioletOrbitFinal 5.3s linear infinite !important;
    transform-origin: 50% 50% !important;
  }
  .hero-banner > .haf-desktop-3d-scene .haf-scene-core {
    animation: hafHeroCoreTravelFinal 2.2s ease-in-out infinite alternate !important;
    animation-play-state: running !important;
    will-change: transform, opacity, filter !important;
  }
  .hero-banner > .haf-3d-orbit {
    animation: hafHeroOrbitDriftFinal 7s linear infinite !important;
    animation-play-state: running !important;
  }
  .hero-banner > .haf-3d-orbit-secondary {
    animation: hafHeroOrbitDriftReverseFinal 5.7s linear infinite !important;
    animation-play-state: running !important;
  }
}
@keyframes hafHeroSceneDriftFinal {
  0% { transform: translate3d(0,-7px,0) rotateY(-7deg) rotateX(2deg) scale(.98); }
  50% { transform: translate3d(5px,2px,10px) rotateY(2deg) rotateX(-2deg) scale(1.015); }
  100% { transform: translate3d(-3px,8px,0) rotateY(7deg) rotateX(2deg) scale(1); }
}
@keyframes hafHeroInnerOrbitFinal {
  from { transform: rotateX(66deg) rotateY(28deg) rotateZ(0deg) scale(.94); }
  to { transform: rotateX(48deg) rotateY(-28deg) rotateZ(360deg) scale(1.08); }
}
@keyframes hafHeroOuterOrbitFinal {
  from { transform: rotateX(70deg) rotateY(-36deg) rotateZ(0deg) scale(1); }
  to { transform: rotateX(48deg) rotateY(34deg) rotateZ(360deg) scale(.9); }
}
@keyframes hafHeroVioletOrbitFinal {
  from { transform: rotateX(48deg) rotateY(-42deg) rotateZ(0deg) scale(.92); }
  to { transform: rotateX(68deg) rotateY(42deg) rotateZ(360deg) scale(1.08); }
}
@keyframes hafHeroCoreTravelFinal {
  0% { transform: translate3d(-5px,-4px,0) scale(.72); opacity:.62; filter:brightness(.92); }
  50% { transform: translate3d(20px,10px,24px) scale(1.35); opacity:1; filter:brightness(1.35); }
  100% { transform: translate3d(8px,24px,10px) scale(.9); opacity:.82; filter:brightness(1.08); }
}
@keyframes hafHeroOrbitDriftFinal {
  from { transform: rotateX(62deg) rotateY(-18deg) rotateZ(0deg) translate3d(-4px,0,0); }
  to { transform: rotateX(52deg) rotateY(22deg) rotateZ(360deg) translate3d(7px,5px,12px); }
}
@keyframes hafHeroOrbitDriftReverseFinal {
  from { transform: rotateX(48deg) rotateY(32deg) rotateZ(360deg) translate3d(5px,0,0); }
  to { transform: rotateX(64deg) rotateY(-24deg) rotateZ(0deg) translate3d(-7px,-5px,10px); }
}
@media screen and (min-width: 701px) and (prefers-reduced-motion: reduce) {
  .hero-banner > .haf-desktop-3d-scene {
    animation-duration: 18s !important;
  }
  .hero-banner > .haf-desktop-3d-scene .haf-scene-ring,
  .hero-banner > .haf-desktop-3d-scene .haf-scene-ring-violet,
  .hero-banner > .haf-desktop-3d-scene .haf-scene-core,
  .hero-banner > .haf-desktop-3d-scene .haf-scene-ring::before,
  .hero-banner > .haf-desktop-3d-scene .haf-scene-ring::after,
  .hero-banner > .haf-desktop-3d-scene .haf-scene-ring-violet::before,
  .hero-banner > .haf-3d-orbit,
  .hero-banner > .haf-3d-orbit-secondary {
    animation-duration: 18s !important;
  }
}


/* HERO DESKTOP FREEZE FIX — final cascade, explicit names + infinite iterations.
   Keeps the 3D scene alive even when earlier theme layers request reduced motion. */
@media screen and (min-width: 701px) {
  .hero-banner > .haf-desktop-3d-scene {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    animation-name: hafHeroSceneDriftFinal !important;
    animation-duration: 6s !important;
    animation-timing-function: ease-in-out !important;
    animation-iteration-count: infinite !important;
    animation-direction: alternate !important;
    animation-play-state: running !important;
  }
  .hero-banner > .haf-desktop-3d-scene .haf-scene-ring {
    animation: hafHeroInnerOrbitFinal 4.8s linear infinite !important;
    animation-play-state: running !important;
  }
  .hero-banner > .haf-desktop-3d-scene .haf-scene-ring-violet {
    animation: hafHeroVioletOrbitFinal 5.3s linear infinite !important;
    animation-play-state: running !important;
  }
  .hero-banner > .haf-desktop-3d-scene .haf-scene-core {
    animation: hafHeroCoreTravelFinal 2.2s ease-in-out infinite alternate !important;
    animation-play-state: running !important;
  }
  .hero-banner > .haf-desktop-3d-scene .haf-scene-ring::before {
    animation: hafHeroInnerOrbitFinal 5.1s linear infinite !important;
    animation-play-state: running !important;
  }
  .hero-banner > .haf-desktop-3d-scene .haf-scene-ring::after {
    animation: hafHeroOuterOrbitFinal 6.2s linear infinite reverse !important;
    animation-play-state: running !important;
  }
  .hero-banner > .haf-desktop-3d-scene .haf-scene-ring-violet::before {
    animation: hafHeroVioletOrbitFinal 5.3s linear infinite !important;
    animation-play-state: running !important;
  }
  .hero-banner > .haf-3d-orbit {
    animation: hafHeroOrbitDriftFinal 7s linear infinite !important;
    animation-play-state: running !important;
  }
  .hero-banner > .haf-3d-orbit-secondary {
    animation: hafHeroOrbitDriftReverseFinal 5.7s linear infinite !important;
    animation-play-state: running !important;
  }
}
/* On reduced-motion desktops, use slow, continuous movement rather than a frozen frame. */
@media screen and (min-width: 701px) and (prefers-reduced-motion: reduce) {
  .hero-banner > .haf-desktop-3d-scene {
    animation: hafHeroSceneDriftFinal 18s ease-in-out infinite alternate !important;
    animation-play-state: running !important;
  }
  .hero-banner > .haf-desktop-3d-scene .haf-scene-ring {
    animation: hafHeroInnerOrbitFinal 18s linear infinite !important;
    animation-play-state: running !important;
  }
  .hero-banner > .haf-desktop-3d-scene .haf-scene-ring-violet {
    animation: hafHeroVioletOrbitFinal 18s linear infinite !important;
    animation-play-state: running !important;
  }
  .hero-banner > .haf-desktop-3d-scene .haf-scene-core {
    animation: hafHeroCoreTravelFinal 18s ease-in-out infinite alternate !important;
    animation-play-state: running !important;
  }
  .hero-banner > .haf-desktop-3d-scene .haf-scene-ring::before {
    animation: hafHeroInnerOrbitFinal 18s linear infinite !important;
    animation-play-state: running !important;
  }
  .hero-banner > .haf-desktop-3d-scene .haf-scene-ring::after {
    animation: hafHeroOuterOrbitFinal 18s linear infinite reverse !important;
    animation-play-state: running !important;
  }
  .hero-banner > .haf-desktop-3d-scene .haf-scene-ring-violet::before {
    animation: hafHeroVioletOrbitFinal 18s linear infinite !important;
    animation-play-state: running !important;
  }
  .hero-banner > .haf-3d-orbit {
    animation: hafHeroOrbitDriftFinal 18s linear infinite !important;
    animation-play-state: running !important;
  }
  .hero-banner > .haf-3d-orbit-secondary {
    animation: hafHeroOrbitDriftReverseFinal 18s linear infinite !important;
    animation-play-state: running !important;
  }
}


/* SITE UX REPAIR — 24 Oct 2026: calmer hero, blended logo, reliable desktop motion and persistent CTA. */

/* Blend dark logo pixels into the navigation rather than showing a pasted rectangular canvas. */
nav .nav-logo {
  background: transparent !important;
  mix-blend-mode: lighten !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: contrast(1.08) saturate(1.05) drop-shadow(0 1px 5px rgba(0,0,0,.18));
  isolation: auto !important;
}

/* Keep the main navigation available while scrolling; preserve a usable wrap on small screens. */
body > nav, nav[aria-label="Main navigation"] {
  position: sticky !important;
  top: 0 !important;
  z-index: 10010 !important;
  background: rgba(9,5,16,.97) !important;
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  backdrop-filter: blur(16px) saturate(120%);
  border-bottom: 1px solid rgba(240,216,154,.2);
}
nav .nav-links a[href="#contact"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 9px 15px;
  border: 1px solid rgba(240,216,154,.55);
  border-radius: 999px;
  background: linear-gradient(135deg, #f1d99c, #c49b4c);
  color: #1b1420 !important;
  font-weight: 800;
  text-shadow: none !important;
  box-shadow: 0 5px 16px rgba(196,155,76,.16);
}
nav .nav-links a[href="#contact"]:hover,
nav .nav-links a[href="#contact"]:focus-visible {
  color: #100b15 !important;
  box-shadow: 0 7px 22px rgba(196,155,76,.25);
}

/* Use one restrained dimensional scene instead of several competing orbital rings. */
.hero-banner {
  position: relative;
  isolation: isolate;
}
.hero-banner > .haf-3d-orbit,
.hero-banner > .haf-3d-orbit-secondary {
  display: none !important;
}
.hero-banner > .haf-desktop-3d-scene {
  display: block !important;
  visibility: visible !important;
  pointer-events: none !important;
  opacity: .72 !important;
  transform-style: preserve-3d;
  animation: hafRepairSceneFloat 11s ease-in-out infinite alternate !important;
  animation-play-state: running !important;
  will-change: translate;
}
.hero-banner > .haf-desktop-3d-scene .haf-scene-ring {
  opacity: .28 !important;
  border-color: rgba(240,216,154,.5) !important;
  box-shadow: 0 0 12px rgba(240,216,154,.08) !important;
  animation: hafRepairRingTurn 24s linear infinite !important;
  animation-play-state: running !important;
}
.hero-banner > .haf-desktop-3d-scene .haf-scene-ring-violet {
  opacity: .13 !important;
  border-color: rgba(179,142,224,.4) !important;
  box-shadow: none !important;
  animation: hafRepairRingTurn 32s linear infinite reverse !important;
  animation-play-state: running !important;
}
.hero-banner > .haf-desktop-3d-scene .haf-scene-core {
  opacity: .38 !important;
  filter: blur(.2px) !important;
  animation: hafRepairCorePulse 4.5s ease-in-out infinite alternate !important;
  animation-play-state: running !important;
}
.hero-banner > .haf-desktop-3d-scene .haf-scene-ring::before,
.hero-banner > .haf-desktop-3d-scene .haf-scene-ring::after,
.hero-banner > .haf-desktop-3d-scene .haf-scene-ring-violet::before {
  opacity: .2 !important;
  box-shadow: none !important;
}
@keyframes hafRepairSceneFloat {
  from { translate: 0 -3px; }
  to { translate: 0 4px; }
}
@keyframes hafRepairRingTurn {
  from { rotate: 0deg; }
  to { rotate: 360deg; }
}
@keyframes hafRepairCorePulse {
  from { scale: .94; opacity: .26; }
  to { scale: 1.04; opacity: .42; }
}

/* The CTA appears after the visitor has scrolled past the hero, without covering WhatsApp. */
.haf-floating-apply {
  display: none;
  position: fixed;
  right: 94px;
  bottom: max(24px, env(safe-area-inset-bottom));
  z-index: 10000;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 12px 20px;
  border: 1px solid rgba(255,244,210,.48);
  border-radius: 999px;
  background: linear-gradient(135deg, #f6e3ad, #c59b4e);
  color: #17101d !important;
  font-size: .9rem;
  font-weight: 800;
  letter-spacing: .01em;
  text-decoration: none !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.28), 0 0 18px rgba(225,194,122,.13);
  opacity: 0;
  translate: 0 8px;
  transition: opacity .2s ease, translate .2s ease, box-shadow .2s ease;
}
.haf-floating-apply.is-visible {
  display: inline-flex;
  opacity: 1;
  translate: 0 0;
}
.haf-floating-apply:hover {
  box-shadow: 0 14px 34px rgba(0,0,0,.32), 0 0 22px rgba(225,194,122,.2);
}
@media (min-width: 701px) {
  nav .nav-links { flex-wrap: nowrap; }
}
@media (max-width: 700px) {
  .haf-floating-apply { display: none !important; }
  nav[aria-label="Main navigation"] {
    padding: 9px 12px !important;
    gap: 8px !important;
  }
  nav .nav-links a[href="#contact"] {
    min-height: 34px;
    padding: 7px 10px;
  }
  .hero-banner > .haf-desktop-3d-scene {
    opacity: .42 !important;
    animation-duration: 16s !important;
  }
  .hero-banner > .haf-desktop-3d-scene .haf-scene-ring { opacity: .2 !important; }
  .hero-banner > .haf-desktop-3d-scene .haf-scene-ring-violet { opacity: .1 !important; }
}
@media (prefers-reduced-motion: reduce) {
  /* The hero copy still changes on desktop via the slower, non-typewriter JS fallback. */
  .hero-banner > .haf-desktop-3d-scene { animation-duration: 28s !important; }
  .hero-banner > .haf-desktop-3d-scene .haf-scene-ring { animation-duration: 32s !important; }
  .hero-banner > .haf-desktop-3d-scene .haf-scene-ring-violet { animation-duration: 38s !important; }
  .haf-floating-apply { transition: none !important; }
}


/* HERO SIGNATURE — bespoke showroom scene replaces the flat campaign poster. */
.hero-banner {
  overflow: hidden;
  padding-bottom: clamp(24px, 3.8vw, 48px);
}
.hero-banner > .haf-desktop-3d-scene {
  z-index: -1 !important;
  display: block !important;
  visibility: visible !important;
  opacity: .82 !important;
  right: clamp(14px, 5vw, 76px) !important;
  top: clamp(8px, 2vw, 28px) !important;
  width: clamp(170px, 24vw, 280px) !important;
  height: clamp(170px, 24vw, 280px) !important;
  animation: hafDesktopSceneFloat 8s ease-in-out infinite alternate !important;
  animation-play-state: running !important;
}
.hero-banner > .haf-desktop-3d-scene .haf-scene-ring {
  opacity: .62 !important;
  border-color: rgba(244, 213, 143, .72) !important;
  box-shadow: 0 0 22px rgba(240, 196, 92, .16) !important;
  animation: hafDesktopRingRotate 18s linear infinite !important;
  animation-play-state: running !important;
}
.hero-banner > .haf-desktop-3d-scene .haf-scene-ring-violet {
  opacity: .38 !important;
  border-color: rgba(184, 135, 235, .58) !important;
  animation: hafDesktopRingRotate 24s linear infinite reverse !important;
  animation-play-state: running !important;
}
.hero-banner > .haf-desktop-3d-scene .haf-scene-core {
  opacity: .72 !important;
  animation: hafDesktopCorePulse 3.8s ease-in-out infinite alternate !important;
  animation-play-state: running !important;
}
@keyframes hafDesktopSceneFloat {
  from { translate: 0 -5px; }
  to { translate: 0 9px; }
}
@keyframes hafDesktopRingRotate {
  from { rotate: 0deg; }
  to { rotate: 360deg; }
}
@keyframes hafDesktopCorePulse {
  from { scale: .9; opacity: .5; }
  to { scale: 1.08; opacity: .86; }
}
.hero-showcase {
  position: relative;
  isolation: isolate;
  width: min(100%, 1180px);
  margin: clamp(22px, 3.5vw, 42px) auto 0;
  border: 1px solid rgba(240, 216, 154, .24);
  border-radius: clamp(18px, 2.2vw, 30px);
  overflow: hidden;
  background: #090610;
  box-shadow: 0 26px 72px rgba(0,0,0,.36), 0 0 0 1px rgba(255,255,255,.025), 0 0 48px rgba(119,76,158,.12);
  transform: perspective(1400px) rotateX(0deg);
  transform-style: preserve-3d;
  transition: transform .45s ease, box-shadow .45s ease, border-color .45s ease;
}
.hero-showcase::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(8,5,14,.08), transparent 24%, transparent 78%, rgba(8,5,14,.12)),
    linear-gradient(0deg, rgba(8,5,14,.58), transparent 27%, transparent 82%, rgba(8,5,14,.10));
}
.hero-showcase-art {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
  mix-blend-mode: normal;
  filter: saturate(1.08) contrast(1.025);
  transform: scale(1.005);
  transition: transform .8s cubic-bezier(.2,.7,.2,1), filter .6s ease;
}
@media (hover: hover) and (pointer: fine) {
  .hero-showcase:hover {
    transform: perspective(1400px) rotateX(.35deg) translateY(-3px);
    border-color: rgba(240,216,154,.42);
    box-shadow: 0 34px 86px rgba(0,0,0,.42), 0 0 54px rgba(119,76,158,.18);
  }
  .hero-showcase:hover .hero-showcase-art { transform: scale(1.025); filter: saturate(1.14) contrast(1.04); }
}
.hero-showcase-chip {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(40%, 290px);
  padding: 12px 15px;
  border: 1px solid rgba(245,224,177,.28);
  border-radius: 15px;
  background: rgba(13,9,21,.76);
  color: #fff8e8;
  text-align: left;
  box-shadow: 0 12px 34px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.06);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  backdrop-filter: blur(14px) saturate(130%);
  animation: hafShowcaseChipFloat 6s ease-in-out infinite alternate;
}
.hero-showcase-chip-left { left: clamp(12px, 3vw, 38px); top: 13%; }
.hero-showcase-chip-right { right: clamp(12px, 3vw, 38px); bottom: 17%; animation-delay: -2.4s; }
.hero-showcase-chip strong, .hero-showcase-chip small { display: block; }
.hero-showcase-chip strong { font-size: clamp(.66rem, .9vw, .86rem); line-height: 1.3; letter-spacing: .01em; }
.hero-showcase-chip small { margin-top: 4px; color: rgba(255,248,232,.68); font-size: clamp(.58rem, .72vw, .72rem); line-height: 1.3; }
.hero-showcase-chip-icon {
  display: grid;
  place-items: center;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: linear-gradient(145deg, #f7e5b4, #b98b3c);
  color: #17101d;
  font-size: 1rem;
}
.hero-showcase-live-dot {
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #8de2b0;
  box-shadow: 0 0 0 5px rgba(141,226,176,.10), 0 0 14px rgba(141,226,176,.4);
}
.hero-showcase-caption {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: clamp(12px, 2.2vw, 28px);
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: max-content;
  max-width: 90%;
  text-align: center;
  transform: translateX(-50%);
  text-shadow: 0 2px 12px rgba(0,0,0,.85);
}
.hero-showcase-caption span { color: #f3dba1; font-size: clamp(.55rem, .8vw, .7rem); font-weight: 800; letter-spacing: .22em; }
.hero-showcase-caption b { color: #fff8e8; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(.95rem, 2vw, 1.55rem); font-weight: 500; letter-spacing: .015em; }
@keyframes hafShowcaseChipFloat { from { translate: 0 0; } to { translate: 0 -7px; } }
@media (max-width: 700px) {
  .hero-banner { overflow: hidden; }
  .hero-banner > .haf-desktop-3d-scene {
    opacity: .52 !important;
    right: 0 !important;
    top: 0 !important;
    width: 155px !important;
    height: 155px !important;
  }
  .hero-showcase { margin-top: 22px; border-radius: 17px; }
  .hero-showcase-art { aspect-ratio: 4 / 3; object-fit: cover; object-position: 54% center; }
  .hero-showcase-chip {
    max-width: 48%;
    gap: 7px;
    padding: 8px 9px;
    border-radius: 11px;
  }
  .hero-showcase-chip-left { top: 9%; left: 9px; }
  .hero-showcase-chip-right { right: 9px; bottom: 19%; }
  .hero-showcase-chip-icon { flex-basis: 24px; width: 24px; height: 24px; border-radius: 8px; font-size: .8rem; }
  .hero-showcase-chip strong { font-size: .62rem; }
  .hero-showcase-chip small { font-size: .54rem; }
  .hero-showcase-caption { bottom: 10px; }
  .hero-showcase-caption span { font-size: .5rem; letter-spacing: .16em; }
  .hero-showcase-caption b { font-size: .95rem; }
}
@media (max-width: 380px) {
  .hero-showcase-chip small { display: none; }
  .hero-showcase-chip { max-width: 46%; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-banner > .haf-desktop-3d-scene,
  .hero-banner > .haf-desktop-3d-scene .haf-scene-ring,
  .hero-banner > .haf-desktop-3d-scene .haf-scene-ring-violet,
  .hero-banner > .haf-desktop-3d-scene .haf-scene-core,
  .hero-showcase-chip { animation: none !important; }
  .hero-showcase, .hero-showcase-art { transition: none !important; }
}


/* HERO REBUILD — responsive desktop composition, full-width use, and visible 3D scene. */
.hero-banner {
  width: 100% !important;
  max-width: 1680px !important;
  margin: 0 auto !important;
  padding: clamp(34px, 4.5vw, 72px) clamp(20px, 4.2vw, 72px) clamp(32px, 4vw, 58px) !important;
  display: grid !important;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  grid-template-rows: auto auto auto auto 1fr;
  column-gap: clamp(28px, 4vw, 72px);
  row-gap: 0;
  align-items: center;
  text-align: left !important;
  overflow: hidden;
  isolation: isolate;
  position: relative;
  min-height: clamp(600px, calc(100svh - 90px), 860px);
}
.hero-banner > .secure-badge {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  margin: 0 0 22px;
  max-width: 100%;
}
.hero-banner > .typing-container {
  grid-column: 1;
  grid-row: 2;
  align-self: end;
  margin: 0 0 18px;
  max-width: 12ch;
  font-size: clamp(2.8rem, 4.6vw, 5.25rem) !important;
  line-height: 1.08;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.hero-banner > .hero-supporting {
  grid-column: 1;
  grid-row: 3;
  margin: 0 0 4px !important;
  padding: 0 !important;
  max-width: 56ch !important;
  font-size: clamp(1rem, 1.25vw, 1.18rem) !important;
  line-height: 1.8;
  text-align: left;
}
.hero-banner > .hero-actions {
  grid-column: 1;
  grid-row: 4;
  justify-content: flex-start;
  margin: 24px 0 18px;
  padding: 0;
  width: 100%;
}
.hero-banner > .hero-actions .hero-cta {
  width: auto;
  min-width: 168px;
}
.hero-banner > .hero-trust-points {
  grid-column: 1;
  grid-row: 5;
  align-self: start;
  justify-content: flex-start;
  margin: 8px 0 0;
  padding: 0;
  gap: 8px;
}
.hero-banner > .hero-trust-points span {
  font-size: clamp(.7rem, .85vw, .8rem);
  padding: 8px 11px;
}
.hero-banner > .hero-showcase {
  grid-column: 2;
  grid-row: 1 / 6;
  align-self: center;
  justify-self: stretch;
  width: 100%;
  max-width: none;
  min-width: 0;
  margin: 0;
  z-index: 2;
  border-radius: clamp(18px, 2vw, 30px);
}
.hero-banner > .hero-showcase .hero-showcase-art {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
}
.hero-banner > .haf-desktop-3d-scene {
  z-index: 0 !important;
  right: 2.5% !important;
  top: 4% !important;
  width: clamp(220px, 25vw, 390px) !important;
  height: clamp(220px, 25vw, 390px) !important;
  opacity: .8 !important;
  pointer-events: none !important;
  display: block !important;
  visibility: visible !important;
  animation: hafDesktopSceneFloat 8s ease-in-out infinite alternate !important;
  animation-play-state: running !important;
}
.hero-banner > .haf-desktop-3d-scene .haf-scene-ring {
  opacity: .72 !important;
  animation: hafDesktopRingRotate 18s linear infinite !important;
  animation-play-state: running !important;
}
.hero-banner > .haf-desktop-3d-scene .haf-scene-ring-violet {
  opacity: .48 !important;
  animation: hafDesktopRingRotate 24s linear infinite reverse !important;
  animation-play-state: running !important;
}
.hero-banner > .haf-desktop-3d-scene .haf-scene-core {
  opacity: .82 !important;
  animation: hafDesktopCorePulse 3.8s ease-in-out infinite alternate !important;
  animation-play-state: running !important;
}
.hero-banner::before {
  inset: 4% 0 3% 0 !important;
  background:
    radial-gradient(ellipse at 75% 40%, rgba(132,83,177,.17), transparent 45%),
    radial-gradient(ellipse at 15% 55%, rgba(240,216,154,.07), transparent 48%) !important;
}
@media (min-width: 1500px) {
  .hero-banner { column-gap: clamp(56px, 5vw, 100px); }
  .hero-banner > .hero-showcase .hero-showcase-art { aspect-ratio: 16 / 10; }
}
@media (max-width: 1000px) and (min-width: 701px) {
  .hero-banner {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    column-gap: 24px;
    padding: 34px 24px 38px !important;
    min-height: 570px;
  }
  .hero-banner > .typing-container { font-size: clamp(2.25rem, 4.4vw, 3.4rem) !important; }
  .hero-banner > .hero-actions { gap: 10px; }
  .hero-banner > .hero-actions .hero-cta { min-width: 0; padding: 12px 16px; font-size: .84rem; }
  .hero-banner > .hero-trust-points span { font-size: .68rem; padding: 7px 9px; }
  .hero-showcase-chip { max-width: 47%; padding: 9px 10px; }
}
@media (max-width: 700px) {
  .hero-banner {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    text-align: center !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 0;
    margin: 0 auto !important;
    padding: 28px 16px 32px !important;
    gap: 0;
  }
  .hero-banner > .secure-badge {
    align-self: center;
    margin: 0 auto 18px;
    font-size: .72rem;
    line-height: 1.4;
    padding: 7px 12px;
  }
  .hero-banner > .typing-container {
    max-width: 100%;
    margin: 0 auto 12px;
    font-size: clamp(2rem, 8.5vw, 3.2rem) !important;
    line-height: 1.1;
    text-align: center;
  }
  .hero-banner > .hero-supporting {
    max-width: 42rem !important;
    margin: 0 auto !important;
    padding: 0 2px !important;
    text-align: center;
    font-size: .96rem !important;
    line-height: 1.65;
  }
  .hero-banner > .hero-actions {
    justify-content: center;
    margin: 20px auto 12px;
    padding: 0;
    gap: 10px;
  }
  .hero-banner > .hero-actions .hero-cta {
    width: 100%;
    max-width: 340px;
  }
  .hero-banner > .hero-trust-points {
    justify-content: center;
    margin: 12px auto 20px;
    gap: 7px;
  }
  .hero-banner > .hero-trust-points span { font-size: .7rem; padding: 7px 9px; }
  .hero-banner > .hero-showcase {
    width: 100%;
    max-width: 620px;
    margin: 0 auto;
    border-radius: 16px;
  }
  .hero-banner > .hero-showcase .hero-showcase-art {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: 54% center;
  }
  .hero-banner > .haf-desktop-3d-scene {
    z-index: 0 !important;
    right: -10px !important;
    top: 0 !important;
    width: 145px !important;
    height: 145px !important;
    opacity: .38 !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-banner > .haf-desktop-3d-scene,
  .hero-banner > .haf-desktop-3d-scene .haf-scene-ring,
  .hero-banner > .haf-desktop-3d-scene .haf-scene-ring-violet,
  .hero-banner > .haf-desktop-3d-scene .haf-scene-core {
    animation: none !important;
  }
}


/* HERO DESKTOP 3D VISIBILITY — final stacking and contrast correction.
   The scene intentionally sits above the showroom artwork, not behind its stacking context. */
@media screen and (min-width: 701px) {
  .hero-banner {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden;
  }
  .hero-banner > .haf-desktop-3d-scene {
    position: absolute !important;
    display: block !important;
    visibility: visible !important;
    right: clamp(18px, 3.2vw, 54px) !important;
    top: clamp(12px, 2.5vw, 38px) !important;
    width: clamp(260px, 30vw, 440px) !important;
    height: clamp(260px, 30vw, 440px) !important;
    z-index: 3 !important;
    opacity: .94 !important;
    pointer-events: none !important;
    transform-style: preserve-3d !important;
    filter: drop-shadow(0 0 16px rgba(240,216,154,.18)) !important;
  }
  .hero-banner > .haf-desktop-3d-scene .haf-scene-ring {
    border-width: 2px !important;
    border-color: rgba(247, 222, 158, .86) !important;
    box-shadow: 0 0 24px rgba(240,196,92,.22), inset 0 0 16px rgba(240,196,92,.08) !important;
    opacity: .88 !important;
  }
  .hero-banner > .haf-desktop-3d-scene .haf-scene-ring-violet {
    border-width: 2px !important;
    border-color: rgba(194,153,245,.72) !important;
    box-shadow: 0 0 22px rgba(153,100,214,.18) !important;
    opacity: .72 !important;
  }
  .hero-banner > .haf-desktop-3d-scene .haf-scene-core {
    opacity: .96 !important;
    filter: drop-shadow(0 0 18px rgba(240,216,154,.5)) !important;
  }
}
@media screen and (min-width: 701px) and (prefers-reduced-motion: no-preference) {
  .hero-banner > .haf-desktop-3d-scene {
    animation: hafHeroSceneDriftFinal 7s ease-in-out infinite alternate !important;
    animation-play-state: running !important;
  }
  .hero-banner > .haf-desktop-3d-scene .haf-scene-ring {
    animation: hafHeroInnerOrbitFinal 10s linear infinite !important;
    animation-play-state: running !important;
  }
  .hero-banner > .haf-desktop-3d-scene .haf-scene-ring-violet {
    animation: hafHeroVioletOrbitFinal 13s linear infinite reverse !important;
    animation-play-state: running !important;
  }
  .hero-banner > .haf-desktop-3d-scene .haf-scene-core {
    animation: hafHeroCoreTravelFinal 4s ease-in-out infinite alternate !important;
    animation-play-state: running !important;
  }
}
@media screen and (min-width: 701px) and (prefers-reduced-motion: reduce) {
  .hero-banner > .haf-desktop-3d-scene,
  .hero-banner > .haf-desktop-3d-scene .haf-scene-ring,
  .hero-banner > .haf-desktop-3d-scene .haf-scene-ring-violet,
  .hero-banner > .haf-desktop-3d-scene .haf-scene-core {
    animation: none !important;
  }
}
@media screen and (max-width: 700px) {
  .hero-banner > .haf-desktop-3d-scene {
    z-index: 0 !important;
    width: 145px !important;
    height: 145px !important;
    opacity: .42 !important;
  }
}


/* FINAL BRAND + HERO POLISH — logo canvas blending and desktop 3D visibility. */
nav .nav-logo {
  display: block;
  background: transparent !important;
  mix-blend-mode: screen !important;
  isolation: auto !important;
  object-fit: contain;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: drop-shadow(0 2px 7px rgba(240,216,154,.10)) !important;
}


/* HERO DESKTOP REPAIR — 24 Oct 2026: force visible, layered 3D orbit on laptop/desktop. */
@media screen and (min-width: 701px) {
  .hero-banner {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
    perspective: 1200px !important;
  }
  .hero-banner > .haf-desktop-3d-scene {
    display: block !important;
    visibility: visible !important;
    position: absolute !important;
    width: clamp(250px, 31vw, 460px) !important;
    height: clamp(250px, 31vw, 460px) !important;
    right: clamp(12px, 2.2vw, 36px) !important;
    top: clamp(16px, 4vh, 52px) !important;
    opacity: 1 !important;
    z-index: 5 !important;
    pointer-events: none !important;
    overflow: visible !important;
    transform: translateZ(0) !important;
    transform-style: preserve-3d !important;
    will-change: transform !important;
    contain: none !important;
    filter: drop-shadow(0 0 20px rgba(240,216,154,.24)) !important;
  }
  .hero-banner > .haf-desktop-3d-scene .haf-scene-ring,
  .hero-banner > .haf-desktop-3d-scene .haf-scene-ring-violet {
    display: block !important;
    visibility: visible !important;
    position: absolute !important;
    inset: 10% !important;
    width: 80% !important;
    height: 80% !important;
    border: 2px solid rgba(247,222,158,.9) !important;
    border-radius: 50% !important;
    opacity: .92 !important;
    transform-style: preserve-3d !important;
    box-shadow: 0 0 26px rgba(240,196,92,.24), inset 0 0 22px rgba(240,196,92,.09) !important;
    animation: hafDesktopFallbackOrbit 11s linear infinite !important;
    animation-play-state: running !important;
  }
  .hero-banner > .haf-desktop-3d-scene .haf-scene-ring-violet {
    inset: 2% !important;
    width: 96% !important;
    height: 96% !important;
    border-color: rgba(194,153,245,.82) !important;
    box-shadow: 0 0 28px rgba(153,100,214,.24), inset 0 0 18px rgba(153,100,214,.08) !important;
    animation-duration: 16s !important;
    animation-direction: reverse !important;
  }
  .hero-banner > .haf-desktop-3d-scene .haf-scene-core {
    display: block !important;
    visibility: visible !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: 22% !important;
    height: 22% !important;
    border-radius: 50% !important;
    opacity: 1 !important;
    transform: translate(-50%,-50%) !important;
    background: radial-gradient(circle at 32% 28%, #fff4ce 0, #f0d89a 18%, #9d6bc5 48%, rgba(67,36,94,.18) 74%, transparent 76%) !important;
    box-shadow: 0 0 32px rgba(240,216,154,.42), 0 0 70px rgba(153,100,214,.26) !important;
    animation: hafDesktopFallbackPulse 3.2s ease-in-out infinite alternate !important;
  }
  .hero-banner > .haf-3d-orbit,
  .hero-banner > .haf-3d-orbit-secondary {
    display: block !important;
    visibility: visible !important;
    pointer-events: none !important;
    opacity: .6 !important;
  }
}
@keyframes hafDesktopFallbackOrbit {
  0% { transform: rotateX(62deg) rotateZ(0deg) scale(.98); }
  50% { transform: rotateX(62deg) rotateZ(180deg) scale(1.02); }
  100% { transform: rotateX(62deg) rotateZ(360deg) scale(.98); }
}
@keyframes hafDesktopFallbackPulse {
  from { scale: .88; filter: brightness(.96); }
  to { scale: 1.08; filter: brightness(1.16); }
}
@media screen and (min-width: 701px) and (prefers-reduced-motion: reduce) {
  .hero-banner > .haf-desktop-3d-scene .haf-scene-ring,
  .hero-banner > .haf-desktop-3d-scene .haf-scene-ring-violet,
  .hero-banner > .haf-desktop-3d-scene .haf-scene-core {
    animation-duration: 24s !important;
  }
}
@media screen and (max-width: 700px) {
  .hero-banner > .haf-desktop-3d-scene {
    display: block !important;
    visibility: visible !important;
    z-index: 1 !important;
  }
}


/* HERO FINISH FIX — 24 Oct 2026: keep the desktop orbit elegant, visible and out of the vehicle artwork. */
@media screen and (min-width: 701px) {
  .hero-banner {
    overflow: hidden !important;
    border: 1px solid rgba(196, 158, 235, .34);
    border-radius: clamp(22px, 2.4vw, 34px);
    background:
      radial-gradient(ellipse at 82% 18%, rgba(119, 73, 164, .15), transparent 38%),
      linear-gradient(135deg, rgba(15, 11, 27, .97), rgba(18, 14, 35, .94) 56%, rgba(14, 10, 24, .98));
    box-shadow: 0 24px 70px rgba(0,0,0,.22), inset 0 1px rgba(255,255,255,.045);
  }
  .hero-banner > .haf-desktop-3d-scene {
    width: clamp(170px, 17vw, 250px) !important;
    height: clamp(170px, 17vw, 250px) !important;
    right: 1.5% !important;
    top: -5% !important;
    z-index: 1 !important;
    opacity: .54 !important;
    filter: drop-shadow(0 0 12px rgba(240,216,154,.15)) !important;
  }
  .hero-banner > .hero-showcase {
    position: relative !important;
    z-index: 2 !important;
    align-self: center;
    box-shadow: 0 24px 60px rgba(0,0,0,.34), 0 0 0 1px rgba(232,207,255,.16);
  }
  .hero-banner > .hero-showcase .hero-showcase-art {
    display: block;
    border-radius: inherit;
  }
  .hero-banner > .hero-trust-points span {
    border: 1px solid rgba(240,216,154,.18);
    background: rgba(255,255,255,.035);
  }
}
@media screen and (min-width: 701px) and (max-width: 1100px) {
  .hero-banner > .haf-desktop-3d-scene {
    width: 155px !important;
    height: 155px !important;
    right: 1% !important;
    top: -2% !important;
    opacity: .38 !important;
  }
}
@media screen and (max-width: 700px) {
  .hero-banner {
    border: 1px solid rgba(196,158,235,.28);
    border-radius: 22px;
    background:
      radial-gradient(ellipse at 80% 10%, rgba(119,73,164,.15), transparent 42%),
      linear-gradient(145deg, rgba(15,11,27,.98), rgba(18,14,35,.96));
    box-shadow: 0 18px 44px rgba(0,0,0,.22);
  }
  .hero-banner > .haf-desktop-3d-scene {
    width: 118px !important;
    height: 118px !important;
    right: 0 !important;
    top: 0 !important;
    opacity: .22 !important;
    z-index: 0 !important;
  }
  .hero-banner > .hero-showcase {
    position: relative !important;
    z-index: 2 !important;
    box-shadow: 0 16px 36px rgba(0,0,0,.3), 0 0 0 1px rgba(232,207,255,.14);
  }
}


/* FINAL FIX — desktop hero 3D visibility + logo background blending (24 Oct 2026). */
nav .nav-logo {
  background: transparent !important;
  mix-blend-mode: screen !important;
  isolation: auto !important;
  object-fit: contain !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  filter: drop-shadow(0 2px 8px rgba(240,216,154,.13)) !important;
}
@media screen and (min-width: 701px) {
  .hero-banner {
    position: relative !important;
    isolation: isolate !important;
  }
  .hero-banner > .haf-desktop-3d-scene {
    display: block !important;
    visibility: visible !important;
    position: absolute !important;
    width: clamp(190px, 20vw, 290px) !important;
    height: clamp(190px, 20vw, 290px) !important;
    right: clamp(10px, 1.8vw, 28px) !important;
    top: 2% !important;
    z-index: 4 !important;
    opacity: .82 !important;
    pointer-events: none !important;
    overflow: visible !important;
    transform-style: preserve-3d !important;
    will-change: transform !important;
    filter: drop-shadow(0 0 18px rgba(240,216,154,.22)) !important;
  }
  .hero-banner > .haf-desktop-3d-scene .haf-scene-ring {
    display: block !important;
    visibility: visible !important;
    border: 2px solid rgba(255,225,157,.92) !important;
    box-shadow: 0 0 22px rgba(240,196,92,.3), inset 0 0 18px rgba(240,196,92,.12) !important;
    animation: hafDesktopFallbackOrbit 11s linear infinite !important;
    animation-play-state: running !important;
  }
  .hero-banner > .haf-desktop-3d-scene .haf-scene-ring-violet {
    border-color: rgba(207,169,255,.9) !important;
    box-shadow: 0 0 26px rgba(153,100,214,.3), inset 0 0 14px rgba(153,100,214,.1) !important;
    animation-duration: 16s !important;
    animation-direction: reverse !important;
  }
  .hero-banner > .haf-desktop-3d-scene .haf-scene-core {
    opacity: 1 !important;
    animation: hafDesktopFallbackPulse 3.2s ease-in-out infinite alternate !important;
  }
}
@media screen and (min-width: 701px) and (max-width: 1100px) {
  .hero-banner > .haf-desktop-3d-scene {
    width: 180px !important;
    height: 180px !important;
    right: 8px !important;
    top: 4% !important;
    opacity: .7 !important;
  }
}
@media screen and (max-width: 700px) {
  .hero-banner > .haf-desktop-3d-scene {
    display: block !important;
    visibility: visible !important;
    z-index: 1 !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-banner > .haf-desktop-3d-scene,
  .hero-banner > .haf-desktop-3d-scene .haf-scene-ring,
  .hero-banner > .haf-desktop-3d-scene .haf-scene-ring-violet,
  .hero-banner > .haf-desktop-3d-scene .haf-scene-core {
    animation: none !important;
  }
}


/* DESKTOP 3D VISIBILITY HOTFIX — keep the animated orbit above hero artwork on wide screens. */
@media screen and (min-width: 701px) {
  .hero-banner > .haf-desktop-3d-scene {
    display: block !important;
    visibility: visible !important;
    position: absolute !important;
    inset: 14px 18px auto auto !important;
    width: clamp(190px, 20vw, 300px) !important;
    height: clamp(190px, 20vw, 300px) !important;
    z-index: 6 !important;
    opacity: .88 !important;
    pointer-events: none !important;
    overflow: visible !important;
    transform-style: preserve-3d !important;
    filter: drop-shadow(0 0 18px rgba(240,216,154,.25)) !important;
  }
  .hero-banner > .haf-desktop-3d-scene .haf-scene-ring,
  .hero-banner > .haf-desktop-3d-scene .haf-scene-ring-violet,
  .hero-banner > .haf-desktop-3d-scene .haf-scene-core {
    display: block !important;
    visibility: visible !important;
  }
  .hero-banner > .haf-desktop-3d-scene .haf-scene-ring {
    border: 2px solid rgba(255,226,164,.92) !important;
    box-shadow: 0 0 22px rgba(240,196,92,.28), inset 0 0 18px rgba(240,196,92,.12) !important;
  }
  .hero-banner > .haf-desktop-3d-scene .haf-scene-ring-violet {
    border-color: rgba(207,169,255,.9) !important;
    box-shadow: 0 0 24px rgba(153,100,214,.28), inset 0 0 14px rgba(153,100,214,.1) !important;
  }
}
@media screen and (min-width: 701px) and (prefers-reduced-motion: no-preference) {
  .hero-banner > .haf-desktop-3d-scene .haf-scene-ring {
    animation: hafDesktopFallbackOrbit 11s linear infinite !important;
    animation-play-state: running !important;
  }
  .hero-banner > .haf-desktop-3d-scene .haf-scene-ring-violet {
    animation: hafDesktopFallbackOrbit 16s linear infinite reverse !important;
    animation-play-state: running !important;
  }
  .hero-banner > .haf-desktop-3d-scene .haf-scene-core {
    animation: hafDesktopFallbackPulse 3.2s ease-in-out infinite alternate !important;
    animation-play-state: running !important;
  }
}
@media screen and (min-width: 701px) and (max-width: 1100px) {
  .hero-banner > .haf-desktop-3d-scene {
    width: 175px !important;
    height: 175px !important;
    right: 12px !important;
    top: 14px !important;
    opacity: .78 !important;
  }
}
/* Blend away a dark logo canvas against the header without adding a tile. */
nav .nav-logo {
  background: transparent !important;
  mix-blend-mode: screen !important;
  isolation: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  object-fit: contain !important;
  filter: brightness(1.08) contrast(1.04) drop-shadow(0 2px 8px rgba(240,216,154,.16)) !important;
}


/* HERO SHOWROOM COMPLETION FIX — 24 Oct 2026.
   Keep the desktop hero balanced, remove the oversized empty lower area, and keep the showroom artwork crisp. */
@media screen and (min-width: 1101px) {
  .hero-banner {
    display: grid !important;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr) !important;
    align-items: center !important;
    align-content: center !important;
    column-gap: clamp(28px, 3.4vw, 58px) !important;
    row-gap: 16px !important;
    min-height: 0 !important;
    height: auto !important;
    padding: clamp(38px, 4vw, 64px) clamp(30px, 4vw, 64px) !important;
  }
  .hero-banner > .hero-showcase {
    grid-column: 2 !important;
    grid-row: 1 / span 5 !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    align-self: center !important;
    aspect-ratio: 16 / 10 !important;
    overflow: hidden !important;
    border-radius: 22px !important;
    background: linear-gradient(145deg, #171022, #0b0912) !important;
  }
  .hero-banner > .hero-showcase .hero-showcase-art {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 10 !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
  }
  .hero-banner > .haf-desktop-3d-scene {
    right: 1% !important;
    top: 0 !important;
    width: clamp(150px, 15vw, 230px) !important;
    height: clamp(150px, 15vw, 230px) !important;
    opacity: .42 !important;
    z-index: 3 !important;
  }
}
@media screen and (min-width: 701px) and (max-width: 1100px) {
  .hero-banner {
    min-height: 0 !important;
    height: auto !important;
    align-content: center !important;
    padding-bottom: 34px !important;
  }
  .hero-banner > .hero-showcase {
    align-self: center !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 10 !important;
    overflow: hidden !important;
  }
  .hero-banner > .hero-showcase .hero-showcase-art {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 16 / 10 !important;
    object-fit: cover !important;
    object-position: center !important;
  }
}
@media screen and (max-width: 700px) {
  .hero-banner { min-height: 0 !important; height: auto !important; }
  .hero-banner > .hero-showcase {
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 4 / 3 !important;
    overflow: hidden !important;
  }
  .hero-banner > .hero-showcase .hero-showcase-art {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 4 / 3 !important;
    object-fit: cover !important;
    object-position: center !important;
  }
}


/* FINAL DESKTOP HERO FIX — keep the 3D scene visible on wide screens. */
@media (min-width: 701px) {
  .hero-banner {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
  }
  .hero-banner > .haf-desktop-3d-scene {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    z-index: 1 !important;
    pointer-events: none !important;
    overflow: visible !important;
    width: clamp(220px, 28vw, 420px) !important;
    height: clamp(220px, 28vw, 420px) !important;
    right: clamp(18px, 5vw, 78px) !important;
    top: 50% !important;
    left: auto !important;
    transform: translateY(-50%) !important;
    perspective: 1000px !important;
  }
  .hero-banner > .haf-desktop-3d-scene .haf-scene-ring {
    display: block !important;
    visibility: visible !important;
    opacity: .9 !important;
    animation: hafDesktopRingSpin 12s linear infinite !important;
    transform-style: preserve-3d !important;
  }
  .hero-banner > .haf-desktop-3d-scene .haf-scene-ring-violet {
    display: block !important;
    visibility: visible !important;
    opacity: .78 !important;
    animation: hafDesktopRingTilt 9s ease-in-out infinite alternate !important;
  }
  .hero-banner > .haf-desktop-3d-scene .haf-scene-core {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    animation: hafDesktopCorePulse 3s ease-in-out infinite !important;
  }
  .hero-banner > .hero-showcase {
    position: relative !important;
    z-index: 2 !important;
  }
}
@keyframes hafDesktopRingSpin {
  from { rotate: 0deg; }
  to { rotate: 360deg; }
}
@keyframes hafDesktopRingTilt {
  from { transform: rotateX(58deg) rotateZ(-22deg) scale(.9); }
  to { transform: rotateX(58deg) rotateZ(22deg) scale(1.04); }
}
@keyframes hafDesktopCorePulse {
  0%, 100% { transform: translate(-50%, -50%) scale(.92); filter: brightness(.9); }
  50% { transform: translate(-50%, -50%) scale(1.12); filter: brightness(1.35); }
}
/* Make the logo's black canvas blend with the site rather than look pasted on. */
nav .nav-logo {
  background: transparent !important;
  mix-blend-mode: lighten;
  isolation: isolate;
  object-fit: contain;
  filter: drop-shadow(0 2px 10px rgba(244,196,94,.12));
}
@media (max-width: 700px) {
  .hero-banner > .haf-desktop-3d-scene { display: none !important; }
  nav .nav-logo { mix-blend-mode: lighten; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-banner > .haf-desktop-3d-scene .haf-scene-ring,
  .hero-banner > .haf-desktop-3d-scene .haf-scene-ring-violet,
  .hero-banner > .haf-desktop-3d-scene .haf-scene-core { animation: none !important; }
}


/* SHOWROOM + DESKTOP HERO FINAL REPAIR — 24 Oct 2026.
   The orbit was layered underneath the showcase on desktop, so it could not be seen.
   Keep the animated rings visible as a deliberate overlay and finish the vehicle panel as one composition. */
.hero-banner > .hero-showcase {
  position: relative !important;
  isolation: isolate !important;
  border: 1px solid rgba(240,216,154,.28) !important;
  border-radius: clamp(18px, 1.8vw, 26px) !important;
  background: #100b19 !important;
  box-shadow: 0 26px 72px rgba(0,0,0,.42), 0 0 0 1px rgba(255,255,255,.035), 0 0 46px rgba(128,73,169,.12) !important;
}
.hero-banner > .hero-showcase::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(120deg, rgba(7,5,14,.16), transparent 35%, transparent 72%, rgba(7,5,14,.18)),
              linear-gradient(0deg, rgba(7,5,14,.48), transparent 34%);
}
.hero-banner > .hero-showcase .hero-showcase-art {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  filter: saturate(1.04) contrast(1.025) !important;
  transform: scale(1.001);
}
.hero-banner > .hero-showcase .hero-showcase-chip,
.hero-banner > .hero-showcase .hero-showcase-caption {
  z-index: 2 !important;
}
.hero-banner > .hero-showcase .hero-showcase-chip {
  border: 1px solid rgba(245,221,168,.22) !important;
  background: rgba(12,9,20,.76) !important;
  -webkit-backdrop-filter: blur(14px) saturate(125%) !important;
  backdrop-filter: blur(14px) saturate(125%) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.06) !important;
}
.hero-banner > .hero-showcase .hero-showcase-caption {
  text-shadow: 0 2px 16px rgba(0,0,0,.8);
}
@media screen and (min-width: 701px) {
  .hero-banner {
    position: relative !important;
    isolation: isolate !important;
  }
  /* Put the 3D scene ABOVE the showroom image; the old z-index put it behind the artwork. */
  .hero-banner > .haf-desktop-3d-scene {
    display: block !important;
    visibility: visible !important;
    position: absolute !important;
    width: clamp(150px, 16vw, 230px) !important;
    height: clamp(150px, 16vw, 230px) !important;
    top: clamp(10px, 2vw, 28px) !important;
    right: clamp(12px, 2vw, 30px) !important;
    left: auto !important;
    bottom: auto !important;
    z-index: 8 !important;
    opacity: .86 !important;
    pointer-events: none !important;
    overflow: visible !important;
    transform: none !important;
    transform-style: preserve-3d !important;
    perspective: 1000px !important;
    filter: drop-shadow(0 0 18px rgba(240,216,154,.28)) !important;
  }
  .hero-banner > .haf-desktop-3d-scene .haf-scene-ring,
  .hero-banner > .haf-desktop-3d-scene .haf-scene-ring-violet,
  .hero-banner > .haf-desktop-3d-scene .haf-scene-core {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  .hero-banner > .haf-desktop-3d-scene .haf-scene-ring {
    border: 2px solid rgba(255,226,164,.92) !important;
    box-shadow: 0 0 22px rgba(240,196,92,.34), inset 0 0 18px rgba(240,196,92,.14) !important;
    animation: hafDesktopRingSpin 12s linear infinite !important;
    animation-play-state: running !important;
  }
  .hero-banner > .haf-desktop-3d-scene .haf-scene-ring-violet {
    border: 2px solid rgba(207,169,255,.9) !important;
    box-shadow: 0 0 24px rgba(153,100,214,.34), inset 0 0 14px rgba(153,100,214,.12) !important;
    animation: hafDesktopRingTilt 9s ease-in-out infinite alternate !important;
    animation-play-state: running !important;
  }
  .hero-banner > .haf-desktop-3d-scene .haf-scene-core {
    animation: hafDesktopCorePulse 3s ease-in-out infinite !important;
    animation-play-state: running !important;
  }
  .hero-banner > .hero-showcase { z-index: 2 !important; }
}
@media screen and (min-width: 701px) and (max-width: 1100px) {
  .hero-banner > .haf-desktop-3d-scene {
    width: 142px !important;
    height: 142px !important;
    top: 12px !important;
    right: 12px !important;
    opacity: .78 !important;
  }
}
@media screen and (max-width: 700px) {
  .hero-banner > .haf-desktop-3d-scene { display: none !important; }
  .hero-banner > .hero-showcase {
    border-radius: 18px !important;
    box-shadow: 0 18px 42px rgba(0,0,0,.32), 0 0 0 1px rgba(240,216,154,.13) !important;
  }
  .hero-banner > .hero-showcase .hero-showcase-chip {
    max-width: calc(100% - 18px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-banner > .haf-desktop-3d-scene .haf-scene-ring,
  .hero-banner > .haf-desktop-3d-scene .haf-scene-ring-violet,
  .hero-banner > .haf-desktop-3d-scene .haf-scene-core,
  .hero-banner > .hero-showcase .hero-showcase-art { animation: none !important; transition: none !important; }
}


/* FINAL TARGETED REPAIR — desktop hero animation visibility + seamless logo canvas. */
@media screen and (min-width: 701px) {
  .hero-banner > .haf-desktop-3d-scene {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    top: 18px !important;
    right: 22px !important;
    left: auto !important;
    bottom: auto !important;
    width: clamp(190px, 22vw, 310px) !important;
    height: clamp(190px, 22vw, 310px) !important;
    aspect-ratio: 1 / 1 !important;
    z-index: 20 !important;
    pointer-events: none !important;
    overflow: visible !important;
    transform: none !important;
    transform-style: preserve-3d !important;
    perspective: 1100px !important;
    filter: drop-shadow(0 0 20px rgba(240,216,154,.34)) !important;
  }
  .hero-banner > .haf-desktop-3d-scene .haf-scene-ring,
  .hero-banner > .haf-desktop-3d-scene .haf-scene-ring-violet {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    border-radius: 50% !important;
    background: transparent !important;
    transform-style: preserve-3d !important;
    animation-play-state: running !important;
  }
  .hero-banner > .haf-desktop-3d-scene .haf-scene-ring {
    inset: 4% !important;
    border: 2px solid rgba(255,226,164,.98) !important;
    box-shadow: 0 0 26px rgba(240,196,92,.42), inset 0 0 20px rgba(240,196,92,.16) !important;
    animation: hafSceneSpin 7s linear infinite !important;
  }
  .hero-banner > .haf-desktop-3d-scene .haf-scene-ring-violet {
    inset: 16% !important;
    border: 2px solid rgba(213,167,255,.98) !important;
    box-shadow: 0 0 24px rgba(178,112,255,.42), inset 0 0 18px rgba(178,112,255,.15) !important;
    animation: hafSceneSpinReverse 5.2s linear infinite !important;
  }
  .hero-banner > .haf-desktop-3d-scene .haf-scene-core {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    animation: hafSceneCoreFloat 3s ease-in-out infinite alternate !important;
  }
}
@media screen and (min-width: 701px) and (max-width: 1100px) {
  .hero-banner > .haf-desktop-3d-scene {
    width: 190px !important;
    height: 190px !important;
    top: 14px !important;
    right: 14px !important;
  }
}
/* Screen blending suppresses opaque black pixels in the source logo without adding a badge/tile. */
nav .nav-logo {
  display: block !important;
  background: transparent !important;
  mix-blend-mode: screen !important;
  isolation: auto !important;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  object-fit: contain !important;
  filter: brightness(1.12) contrast(1.06) drop-shadow(0 2px 9px rgba(244,196,94,.18)) !important;
}
@media screen and (max-width: 700px) {
  .hero-banner > .haf-desktop-3d-scene { display: none !important; }
  nav .nav-logo { mix-blend-mode: screen !important; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-banner > .haf-desktop-3d-scene .haf-scene-ring,
  .hero-banner > .haf-desktop-3d-scene .haf-scene-ring-violet,
  .hero-banner > .haf-desktop-3d-scene .haf-scene-core {
    animation-duration: 24s !important;
  }
}


/* HERO CAMPAIGN UPGRADE — premium vehicle photography with layered brand artwork. */
.hero-showcase {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: clamp(300px, 42vw, 560px);
  border: 1px solid rgba(225,194,122,.42) !important;
  border-radius: clamp(18px, 2.4vw, 30px) !important;
  background-color: #09070d !important;
  background-image: linear-gradient(90deg, rgba(8,6,13,.76), rgba(8,6,13,.18) 58%, rgba(8,6,13,.32)), url('https://images.unsplash.com/photo-1503376780353-7e6692767b70?auto=format&fit=crop&w=2000&q=88');
  background-size: cover;
  background-position: center 58%;
  box-shadow: 0 28px 75px rgba(0,0,0,.42), 0 0 0 1px rgba(255,255,255,.035) inset, 0 0 42px rgba(225,194,122,.08);
  transform: translateZ(0);
}
.hero-showcase::before {
  content: "YOUR NEXT DRIVE STARTS HERE";
  position: absolute;
  z-index: 3;
  top: clamp(16px, 3vw, 30px);
  left: clamp(16px, 3vw, 32px);
  padding: 10px 14px;
  border: 1px solid rgba(242,217,155,.58);
  border-radius: 999px;
  color: #ffedbd;
  background: rgba(9,7,13,.72);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  font-size: clamp(.62rem, 1.1vw, .78rem);
  font-weight: 800;
  letter-spacing: .16em;
  box-shadow: 0 8px 24px rgba(0,0,0,.22);
}
.hero-showcase::after {
  content: "NEW CAR  ·  USED CAR  ·  REFINANCE";
  position: absolute;
  z-index: 3;
  left: clamp(16px, 3vw, 32px);
  bottom: clamp(68px, 8vw, 104px);
  color: #f8e8c2;
  font-size: clamp(.65rem, 1.15vw, .86rem);
  font-weight: 750;
  letter-spacing: .12em;
  text-shadow: 0 2px 16px rgba(0,0,0,.9);
}
.hero-showcase .hero-showcase-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .24;
  mix-blend-mode: screen;
  filter: saturate(.8) contrast(1.08);
}
.hero-showcase .hero-showcase-chip {
  background: rgba(10,8,14,.76) !important;
  border: 1px solid rgba(242,217,155,.34) !important;
  box-shadow: 0 12px 36px rgba(0,0,0,.28);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.hero-showcase .hero-showcase-caption {
  background: linear-gradient(90deg, rgba(8,6,13,.88), rgba(8,6,13,.18)) !important;
  border-top: 1px solid rgba(242,217,155,.25);
}
@media (max-width: 700px) {
  .hero-showcase {
    min-height: 330px;
    background-position: 56% center;
  }
  .hero-showcase::before { letter-spacing: .1em; }
  .hero-showcase::after { max-width: calc(100% - 32px); letter-spacing: .07em; }
  .hero-showcase .hero-showcase-art { opacity: .18; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-showcase, .hero-showcase * { scroll-behavior: auto !important; }
}


/* Final uploaded hero artwork: use the approved campaign image as the actual showcase image. */
.hero-banner .hero-showcase {
  background-image: linear-gradient(90deg, rgba(8,6,13,.12), rgba(8,6,13,.02) 58%, rgba(8,6,13,.10)) !important;
  background-color: #09070d !important;
  min-height: 0 !important;
  aspect-ratio: 16 / 9;
}
.hero-banner .hero-showcase > .hero-showcase-art {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  filter: none !important;
  z-index: 0 !important;
}
.hero-banner .hero-showcase::before,
.hero-banner .hero-showcase::after { z-index: 2 !important; }
.hero-banner .hero-showcase > .hero-showcase-chip,
.hero-banner .hero-showcase > .hero-showcase-caption { z-index: 3 !important; }
@media (max-width: 700px) {
  .hero-banner .hero-showcase { aspect-ratio: 4 / 3; min-height: 0 !important; }
  .hero-banner .hero-showcase > .hero-showcase-art { object-position: center center !important; }
}


/* Emergency visibility fix for the uploaded hero campaign artwork. */
.hero-showcase { position: relative !important; display: block !important; width: 100% !important; overflow: hidden !important; }
.hero-showcase > img.hero-showcase-art {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  opacity: 1 !important;
  visibility: visible !important;
  mix-blend-mode: normal !important;
  filter: none !important;
  z-index: 0 !important;
}


/* Hero art correction: remove legacy orbital graphics that obscure the real campaign photo. */
.hero-banner > .hero-showcase::before,
.hero-banner > .hero-showcase::after {
  content: none !important;
  display: none !important;
  animation: none !important;
}
.hero-banner > .hero-showcase > .hero-showcase-chip,
.hero-banner > .hero-showcase > .hero-showcase-caption {
  display: none !important;
}
.hero-banner > .hero-showcase > img.hero-showcase-art {
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  transform: none !important;
  animation: none !important;
  object-fit: contain !important;
  background: #09070d !important;
}

/* Heritage premium hero layout v2 */
.hero-banner.reveal.active{display:grid!important;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)!important;align-items:center!important;gap:16px 3vw!important;padding:clamp(24px,4vw,54px)!important;position:relative!important;isolation:isolate!important;overflow:hidden!important;background:radial-gradient(ellipse at 80% 15%,rgba(120,76,160,.19),transparent 38%),linear-gradient(135deg,#0a0711,#100a1a 58%,#171022)!important;border:1px solid rgba(225,194,122,.28)!important;border-radius:26px!important}
.hero-banner>.haf-3d-orbit,.hero-banner>.haf-3d-orbit-secondary,.hero-banner>.haf-desktop-3d-scene{display:none!important}
.hero-banner>.secure-badge{grid-column:1;grid-row:1;justify-self:start;margin:0 0 2px!important}
.hero-banner>h1{grid-column:1;grid-row:2;text-align:left!important;margin:0!important;font-size:clamp(2.5rem,4.4vw,4.6rem)!important;line-height:1.02!important}
.hero-banner>.hero-supporting{grid-column:1;grid-row:3;text-align:left!important;max-width:540px!important;margin:0!important}
.hero-banner>.hero-actions{grid-column:1;grid-row:4;justify-content:flex-start!important;margin:4px 0!important}
.hero-banner>.hero-trust-points{grid-column:1;grid-row:5;justify-content:flex-start!important;margin-top:0!important}
.hero-banner>.hero-showcase{grid-column:2!important;grid-row:1/span 5!important;align-self:stretch!important;width:100%!important;height:100%!important;min-height:0!important;aspect-ratio:4/5!important;max-height:650px!important;border-radius:20px!important;border:1px solid rgba(239,203,120,.55)!important;box-shadow:0 22px 65px rgba(0,0,0,.38)!important;background:#100b16!important;overflow:hidden!important}
.hero-banner>.hero-showcase>img.hero-showcase-art{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:58% center!important;display:block!important;opacity:1!important;visibility:visible!important;mix-blend-mode:normal!important;filter:none!important;transform:none!important}
.hero-banner>.hero-showcase::before,.hero-banner>.hero-showcase::after,.hero-banner>.hero-showcase>.hero-showcase-chip,.hero-banner>.hero-showcase>.hero-showcase-caption{display:none!important;content:none!important}
.hero-banner>h1 .typed-text{color:#f2c65e!important;-webkit-text-fill-color:#f2c65e!important}
@media(max-width:900px){.hero-banner.reveal.active{gap:16px 20px!important;padding:24px!important}.hero-banner>h1{font-size:clamp(2.2rem,5.5vw,3.5rem)!important}}
@media(max-width:700px){.hero-banner.reveal.active{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:18px!important;padding:22px 18px!important;border-radius:20px!important}.hero-banner>.secure-badge,.hero-banner>h1,.hero-banner>.hero-supporting,.hero-banner>.hero-actions,.hero-banner>.hero-trust-points{width:100%!important;text-align:left!important}.hero-banner>h1{font-size:clamp(2.35rem,10vw,3.2rem)!important;line-height:1.02!important}.hero-banner>.hero-actions{justify-content:flex-start!important;flex-wrap:wrap!important}.hero-banner>.hero-trust-points{justify-content:flex-start!important}.hero-banner>.hero-showcase{width:100%!important;height:auto!important;min-height:0!important;max-height:none!important;aspect-ratio:4/3!important;grid-column:auto!important;grid-row:auto!important}.hero-banner>.hero-showcase>img.hero-showcase-art{object-position:58% center!important}}


/* Final hero crop fix: keep the campaign's full landscape composition visible. */
@media (min-width: 701px) {
  .hero-banner > .hero-showcase {
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    align-self: center !important;
    grid-row: 1 / span 5 !important;
  }
  .hero-banner > .hero-showcase > img.hero-showcase-art {
    object-fit: contain !important;
    object-position: center center !important;
    background: #0b0810 !important;
  }
}
@media (max-width: 700px) {
  .hero-banner > .hero-showcase {
    aspect-ratio: 4 / 3 !important;
    height: auto !important;
    max-height: none !important;
  }
  .hero-banner > .hero-showcase > img.hero-showcase-art {
    object-fit: contain !important;
    object-position: center center !important;
    background: #0b0810 !important;
  }
}

/* Campaign image polish: crop letterbox bars baked into the uploaded artwork. */
.hero-banner > .hero-showcase { aspect-ratio: 16 / 9 !important; }
.hero-banner > .hero-showcase > img.hero-showcase-art {
  object-fit: cover !important;
  object-position: center center !important;
  transform: scale(1.2) !important;
  transform-origin: center center !important;
}
@media (max-width: 700px) {
  .hero-banner > .hero-showcase > img.hero-showcase-art {
    transform: scale(1.12) !important;
    object-fit: cover !important;
    object-position: center center !important;
  }
}

/* Balance hero crop: preserve the full family/car subjects while trimming only most letterboxing. */
.hero-banner > .hero-showcase > img.hero-showcase-art {
  transform: scale(1.07) !important;
  object-fit: cover !important;
  object-position: 56% center !important;
}
@media (max-width: 700px) {
  .hero-banner > .hero-showcase > img.hero-showcase-art {
    transform: scale(1.03) !important;
    object-position: 56% center !important;
  }
}


/* Final premium polish: restrained gold glow, depth and calmer heading rhythm. */
.hero-banner.reveal.active {
  box-shadow: 0 26px 80px rgba(0,0,0,.26), 0 0 0 1px rgba(225,194,122,.035) inset !important;
}
.hero-banner > .hero-showcase {
  box-shadow: 0 24px 58px rgba(0,0,0,.34), 0 0 0 1px rgba(255,255,255,.035) inset, 0 0 30px rgba(225,194,122,.085) !important;
  transition: box-shadow .3s ease, border-color .3s ease !important;
  border-color: rgba(225,194,122,.58) !important;
}
@media (hover:hover) and (pointer:fine) {
  .hero-banner > .hero-showcase:hover {
    box-shadow: 0 28px 70px rgba(0,0,0,.4), 0 0 36px rgba(225,194,122,.13) !important;
    border-color: rgba(242,217,155,.82) !important;
  }
}
.hero-banner > h1 {
  text-wrap: balance !important;
  letter-spacing: -.035em !important;
}
.hero-banner > .hero-supporting {
  line-height: 1.8 !important;
}
.hero-banner > .hero-actions a,
.hero-banner > .hero-actions button {
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease !important;
}
@media (hover:hover) and (pointer:fine) {
  .hero-banner > .hero-actions a:hover,
  .hero-banner > .hero-actions button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 9px 24px rgba(225,194,122,.11) !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-banner > .hero-showcase,
  .hero-banner > .hero-actions a,
  .hero-banner > .hero-actions button { transition: none !important; }
}


/* Premium copy overlay inside the hero campaign image */
.hero-banner > .hero-showcase > .hero-art-overlay {
  position: absolute !important;
  z-index: 4 !important;
  left: clamp(14px, 2.2vw, 28px) !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: min(43%, 310px) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: clamp(7px, 1vw, 13px) !important;
  padding: clamp(14px, 1.8vw, 24px) !important;
  border: 1px solid rgba(239,203,120,.28) !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, rgba(9,7,14,.91), rgba(15,10,22,.76)) !important;
  box-shadow: 0 16px 38px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.04) !important;
  -webkit-backdrop-filter: blur(9px) !important;
  backdrop-filter: blur(9px) !important;
  text-align: left !important;
  pointer-events: none !important;
}
.hero-banner > .hero-showcase > .hero-art-overlay .hero-art-eyebrow {
  color: #f1d38b !important;
  font-size: clamp(.52rem, .7vw, .67rem) !important;
  line-height: 1.35 !important;
  font-weight: 800 !important;
  letter-spacing: .14em !important;
}
.hero-banner > .hero-showcase > .hero-art-overlay h2 {
  margin: 0 !important;
  color: #fffaf0 !important;
  font-size: clamp(1.05rem, 2vw, 2rem) !important;
  font-weight: 750 !important;
  line-height: 1.08 !important;
  letter-spacing: -.035em !important;
  text-wrap: balance !important;
}
.hero-banner > .hero-showcase > .hero-art-overlay h2 em {
  color: #f2c65e !important;
  font-style: normal !important;
}
.hero-banner > .hero-showcase > .hero-art-overlay p {
  margin: 0 !important;
  color: rgba(255,250,240,.86) !important;
  font-size: clamp(.62rem, .85vw, .82rem) !important;
  line-height: 1.45 !important;
}
.hero-banner > .hero-showcase > .hero-art-overlay .hero-art-services {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
}
.hero-banner > .hero-showcase > .hero-art-overlay .hero-art-services span {
  padding: 5px 7px !important;
  border: 1px solid rgba(239,203,120,.3) !important;
  border-radius: 999px !important;
  color: #f8e8c2 !important;
  background: rgba(255,255,255,.045) !important;
  font-size: clamp(.52rem, .66vw, .65rem) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}
.hero-banner > .hero-showcase > .hero-art-overlay .hero-art-signature {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  padding-top: 7px !important;
  border-top: 1px solid rgba(239,203,120,.32) !important;
  color: #e8c77e !important;
  font-size: .63rem !important;
  letter-spacing: .16em !important;
  font-weight: 800 !important;
}
.hero-banner > .hero-showcase > .hero-art-overlay .hero-art-signature b {
  color: rgba(255,250,240,.76) !important;
  font-size: .5rem !important;
  letter-spacing: .22em !important;
}
@media (max-width: 700px) {
  .hero-banner > .hero-showcase > .hero-art-overlay {
    left: 10px !important;
    top: auto !important;
    bottom: 10px !important;
    transform: none !important;
    width: min(58%, 250px) !important;
    padding: 11px !important;
    gap: 7px !important;
    border-radius: 12px !important;
  }
  .hero-banner > .hero-showcase > .hero-art-overlay h2 { font-size: clamp(1rem, 4.5vw, 1.45rem) !important; }
  .hero-banner > .hero-showcase > .hero-art-overlay p { font-size: .66rem !important; }
  .hero-banner > .hero-showcase > .hero-art-overlay .hero-art-services span { font-size: .55rem !important; padding: 4px 6px !important; }
  .hero-banner > .hero-showcase > .hero-art-overlay .hero-art-signature { font-size: .56rem !important; }
}
@media (max-width: 380px) {
  .hero-banner > .hero-showcase > .hero-art-overlay { width: min(64%, 220px) !important; }
}


/* Refined campaign overlay: lighter glass, compact labels and improved balance. */
.hero-banner > .hero-showcase > .hero-art-overlay {
  left: clamp(12px, 1.6vw, 22px) !important;
  width: min(40%, 286px) !important;
  padding: clamp(12px, 1.35vw, 18px) !important;
  gap: clamp(6px, .8vw, 10px) !important;
  background: linear-gradient(135deg, rgba(9,7,14,.78), rgba(15,10,22,.58)) !important;
  border-color: rgba(239,203,120,.35) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.2), inset 0 1px rgba(255,255,255,.05) !important;
  -webkit-backdrop-filter: blur(7px) !important;
  backdrop-filter: blur(7px) !important;
}
.hero-banner > .hero-showcase > .hero-art-overlay .hero-art-services {
  gap: 4px !important;
  flex-wrap: nowrap !important;
}
.hero-banner > .hero-showcase > .hero-art-overlay .hero-art-services span {
  padding: 4px 6px !important;
  font-size: clamp(.48rem, .58vw, .59rem) !important;
  letter-spacing: -.01em !important;
}
.hero-banner > .hero-showcase > .hero-art-overlay .hero-art-signature {
  padding-top: 5px !important;
}
@media (max-width: 900px) and (min-width: 701px) {
  .hero-banner > .hero-showcase > .hero-art-overlay { width: min(44%, 260px) !important; }
  .hero-banner > .hero-showcase > .hero-art-overlay .hero-art-services { flex-wrap: wrap !important; }
}
@media (max-width: 700px) {
  .hero-banner > .hero-showcase > .hero-art-overlay {
    left: 10px !important;
    bottom: 10px !important;
    width: min(58%, 238px) !important;
    padding: 10px !important;
    gap: 6px !important;
    background: linear-gradient(135deg, rgba(9,7,14,.84), rgba(15,10,22,.68)) !important;
  }
  .hero-banner > .hero-showcase > .hero-art-overlay .hero-art-services { flex-wrap: wrap !important; }
}


/* Final typography polish for the in-photo campaign panel */
.hero-banner > .hero-showcase > .hero-art-overlay h2 {
  font-size: clamp(1.12rem, 2.05vw, 1.9rem) !important;
  line-height: 1.06 !important;
  letter-spacing: -.04em !important;
}
.hero-banner > .hero-showcase > .hero-art-overlay .hero-art-services {
  flex-wrap: wrap !important;
  gap: 6px !important;
  max-width: 100% !important;
}
.hero-banner > .hero-showcase > .hero-art-overlay .hero-art-services span {
  padding: 5px 8px !important;
  font-size: clamp(.52rem, .62vw, .61rem) !important;
  line-height: 1.25 !important;
}
.hero-banner > .hero-showcase > .hero-art-overlay .hero-art-signature {
  width: 100% !important;
  gap: 3px !important;
  padding-top: 7px !important;
  font-size: .68rem !important;
  letter-spacing: .18em !important;
}
.hero-banner > .hero-showcase > .hero-art-overlay .hero-art-signature b {
  font-size: .56rem !important;
  letter-spacing: .24em !important;
}
@media (max-width: 700px) {
  .hero-banner > .hero-showcase > .hero-art-overlay h2 { font-size: clamp(1.05rem, 4.7vw, 1.4rem) !important; }
  .hero-banner > .hero-showcase > .hero-art-overlay .hero-art-services { gap: 5px !important; }
  .hero-banner > .hero-showcase > .hero-art-overlay .hero-art-services span { padding: 4px 6px !important; }
  .hero-banner > .hero-showcase > .hero-art-overlay .hero-art-signature { font-size: .6rem !important; }
}


/* Direct-on-photo typography: remove the card and let the copy sit naturally over the image. */
.hero-banner > .hero-showcase > .hero-art-overlay {
  left: clamp(18px, 2.2vw, 32px) !important;
  width: min(45%, 320px) !important;
  padding: 0 !important;
  gap: 11px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.hero-banner > .hero-showcase > .hero-art-overlay .hero-art-eyebrow,
.hero-banner > .hero-showcase > .hero-art-overlay h2,
.hero-banner > .hero-showcase > .hero-art-overlay p,
.hero-banner > .hero-showcase > .hero-art-overlay .hero-art-signature {
  text-shadow: 0 2px 12px rgba(0,0,0,.95), 0 1px 3px rgba(0,0,0,.9) !important;
}
.hero-banner > .hero-showcase > .hero-art-overlay h2 {
  font-size: clamp(1.25rem, 2.25vw, 2.1rem) !important;
  line-height: 1.06 !important;
}
.hero-banner > .hero-showcase > .hero-art-overlay p {
  max-width: 235px !important;
}
.hero-banner > .hero-showcase > .hero-art-overlay .hero-art-services {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 7px 12px !important;
  max-width: 270px !important;
}
.hero-banner > .hero-showcase > .hero-art-overlay .hero-art-services span {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #fff1cf !important;
  font-size: clamp(.62rem, .76vw, .76rem) !important;
  font-weight: 750 !important;
  text-shadow: 0 2px 9px rgba(0,0,0,.98) !important;
}
.hero-banner > .hero-showcase > .hero-art-overlay .hero-art-services span + span::before {
  content: "•" !important;
  color: #f2c65e !important;
  margin-right: 8px !important;
}
.hero-banner > .hero-showcase > .hero-art-overlay .hero-art-signature {
  width: max-content !important;
  border-top: 1px solid rgba(242,198,94,.8) !important;
  padding-top: 8px !important;
  color: #f2c65e !important;
}
.hero-banner > .hero-showcase > .hero-art-overlay .hero-art-signature b {
  color: #fffaf0 !important;
}
@media (max-width: 900px) and (min-width: 701px) {
  .hero-banner > .hero-showcase > .hero-art-overlay { width: min(48%, 280px) !important; }
}
@media (max-width: 700px) {
  .hero-banner > .hero-showcase > .hero-art-overlay {
    left: 14px !important;
    bottom: 14px !important;
    top: auto !important;
    transform: none !important;
    width: min(62%, 250px) !important;
    padding: 0 !important;
    gap: 7px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  .hero-banner > .hero-showcase > .hero-art-overlay h2 { font-size: clamp(1.1rem, 5vw, 1.55rem) !important; }
  .hero-banner > .hero-showcase > .hero-art-overlay p { font-size: .68rem !important; }
  .hero-banner > .hero-showcase > .hero-art-overlay .hero-art-services { gap: 5px 8px !important; }
  .hero-banner > .hero-showcase > .hero-art-overlay .hero-art-services span { font-size: .58rem !important; }
}


/* Final direct-on-photo alignment: keep copy clear of the main car/family subjects. */
.hero-banner > .hero-showcase > .hero-art-overlay {
  left: clamp(16px, 2vw, 28px) !important;
  top: 13% !important;
  bottom: auto !important;
  transform: none !important;
  width: min(43%, 300px) !important;
  gap: 9px !important;
}
.hero-banner > .hero-showcase > .hero-art-overlay h2 {
  font-size: clamp(1.22rem, 2.15vw, 2rem) !important;
  line-height: 1.04 !important;
}
.hero-banner > .hero-showcase > .hero-art-overlay p {
  max-width: 225px !important;
}
.hero-banner > .hero-showcase > .hero-art-overlay .hero-art-services {
  flex-wrap: wrap !important;
  gap: 7px 10px !important;
  max-width: 255px !important;
}
.hero-banner > .hero-showcase > .hero-art-overlay .hero-art-services span {
  font-size: clamp(.58rem, .68vw, .7rem) !important;
  line-height: 1.25 !important;
}
.hero-banner > .hero-showcase > .hero-art-overlay .hero-art-signature {
  margin-top: 1px !important;
  padding-top: 6px !important;
  font-size: .68rem !important;
  letter-spacing: .18em !important;
}
.hero-banner > .hero-showcase > .hero-art-overlay .hero-art-signature b {
  font-size: .56rem !important;
  letter-spacing: .22em !important;
}
@media (max-width: 900px) and (min-width: 701px) {
  .hero-banner > .hero-showcase > .hero-art-overlay {
    left: 14px !important;
    top: 12% !important;
    width: min(46%, 270px) !important;
  }
}
@media (max-width: 700px) {
  .hero-banner > .hero-showcase > .hero-art-overlay {
    left: 12px !important;
    top: 10% !important;
    bottom: auto !important;
    width: min(60%, 238px) !important;
    gap: 7px !important;
  }
  .hero-banner > .hero-showcase > .hero-art-overlay h2 { font-size: clamp(1.08rem, 4.8vw, 1.5rem) !important; }
  .hero-banner > .hero-showcase > .hero-art-overlay p { font-size: .65rem !important; }
  .hero-banner > .hero-showcase > .hero-art-overlay .hero-art-services { gap: 5px 8px !important; max-width: 220px !important; }
  .hero-banner > .hero-showcase > .hero-art-overlay .hero-art-services span { font-size: .56rem !important; }
}


/* Hero direct-on-photo type: larger, dimensional gold lettering with subtle motion. */
.hero-banner > .hero-showcase > .hero-art-overlay {
  width: min(49%, 340px) !important;
  gap: 11px !important;
  animation: hafHeroCopyFloat 6s ease-in-out infinite !important;
}
.hero-banner > .hero-showcase > .hero-art-overlay .hero-art-eyebrow {
  font-size: clamp(.62rem, .78vw, .76rem) !important;
  letter-spacing: .17em !important;
  color: #ffe6a0 !important;
  text-shadow: 0 1px 0 #8a5a14, 0 3px 12px rgba(0,0,0,.95) !important;
}
.hero-banner > .hero-showcase > .hero-art-overlay h2 {
  font-size: clamp(1.55rem, 2.8vw, 2.55rem) !important;
  line-height: 1.02 !important;
  letter-spacing: -.045em !important;
  text-shadow: 0 1px 0 #a76a19, 0 2px 0 rgba(120,73,20,.9), 0 5px 0 rgba(42,22,10,.65), 0 9px 22px rgba(0,0,0,.9) !important;
}
.hero-banner > .hero-showcase > .hero-art-overlay h2 em {
  color: #ffd36a !important;
  -webkit-text-fill-color: #ffd36a !important;
  text-shadow: 0 1px 0 #a76a19, 0 2px 0 rgba(120,73,20,.9), 0 5px 0 rgba(42,22,10,.65), 0 0 18px rgba(255,194,73,.3), 0 9px 22px rgba(0,0,0,.9) !important;
}
.hero-banner > .hero-showcase > .hero-art-overlay p {
  font-size: clamp(.78rem, 1vw, .94rem) !important;
  line-height: 1.45 !important;
  color: #fffaf0 !important;
  text-shadow: 0 2px 9px rgba(0,0,0,.98) !important;
}
.hero-banner > .hero-showcase > .hero-art-overlay .hero-art-services {
  max-width: 310px !important;
  gap: 8px 12px !important;
}
.hero-banner > .hero-showcase > .hero-art-overlay .hero-art-services span {
  font-size: clamp(.68rem, .82vw, .8rem) !important;
  font-weight: 800 !important;
  color: #fff0c7 !important;
  text-shadow: 0 2px 9px rgba(0,0,0,.98) !important;
}
.hero-banner > .hero-showcase > .hero-art-overlay .hero-art-signature {
  padding-top: 8px !important;
  border-top: 1px solid rgba(255,207,95,.9) !important;
  font-size: clamp(.82rem, 1vw, .98rem) !important;
  letter-spacing: .2em !important;
  color: #ffd36a !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.98), 0 0 14px rgba(255,196,73,.28) !important;
}
.hero-banner > .hero-showcase > .hero-art-overlay .hero-art-signature b {
  font-size: clamp(.66rem, .78vw, .76rem) !important;
  letter-spacing: .26em !important;
  color: #fffaf0 !important;
}
@keyframes hafHeroCopyFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
@media (max-width: 900px) and (min-width: 701px) {
  .hero-banner > .hero-showcase > .hero-art-overlay { width: min(49%, 300px) !important; }
  .hero-banner > .hero-showcase > .hero-art-overlay h2 { font-size: clamp(1.4rem, 2.6vw, 2rem) !important; }
}
@media (max-width: 700px) {
  .hero-banner > .hero-showcase > .hero-art-overlay {
    width: min(64%, 255px) !important;
    gap: 7px !important;
    animation-duration: 7s !important;
  }
  .hero-banner > .hero-showcase > .hero-art-overlay h2 { font-size: clamp(1.25rem, 5.4vw, 1.75rem) !important; }
  .hero-banner > .hero-showcase > .hero-art-overlay p { font-size: .72rem !important; }
  .hero-banner > .hero-showcase > .hero-art-overlay .hero-art-services { max-width: 235px !important; gap: 6px 9px !important; }
  .hero-banner > .hero-showcase > .hero-art-overlay .hero-art-services span { font-size: .62rem !important; }
  .hero-banner > .hero-showcase > .hero-art-overlay .hero-art-signature { font-size: .72rem !important; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-banner > .hero-showcase > .hero-art-overlay { animation: none !important; }
}


/* Mobile-first hero readability + tasteful premium 3D motion */
.hero-banner > .hero-showcase > .hero-art-overlay {
  width: min(54%, 360px) !important;
  gap: 12px !important;
}
.hero-banner > .hero-showcase > .hero-art-overlay .hero-art-eyebrow {
  font-size: clamp(.68rem, .85vw, .82rem) !important;
  letter-spacing: .16em !important;
}
.hero-banner > .hero-showcase > .hero-art-overlay h2 {
  font-size: clamp(1.7rem, 3vw, 2.8rem) !important;
  line-height: 1.02 !important;
  text-shadow: 0 1px 0 #bd8427, 0 2px 0 #8b5a1c, 0 4px 0 rgba(55,30,12,.9), 0 8px 18px rgba(0,0,0,.95) !important;
}
.hero-banner > .hero-showcase > .hero-art-overlay h2 em {
  text-shadow: 0 1px 0 #bd8427, 0 2px 0 #8b5a1c, 0 4px 0 rgba(55,30,12,.9), 0 0 18px rgba(255,196,73,.34), 0 8px 18px rgba(0,0,0,.95) !important;
}
.hero-banner > .hero-showcase > .hero-art-overlay p {
  font-size: clamp(.84rem, 1.1vw, 1rem) !important;
}
.hero-banner > .hero-showcase > .hero-art-overlay .hero-art-services {
  max-width: 330px !important;
  gap: 9px 13px !important;
}
.hero-banner > .hero-showcase > .hero-art-overlay .hero-art-services span {
  font-size: clamp(.72rem, .9vw, .86rem) !important;
}
.hero-banner > .hero-showcase > .hero-art-overlay .hero-art-signature {
  font-size: clamp(.92rem, 1.15vw, 1.08rem) !important;
  letter-spacing: .22em !important;
  text-shadow: 0 2px 12px rgba(0,0,0,.98), 0 0 16px rgba(255,195,66,.38) !important;
}
.hero-banner > .hero-showcase > .hero-art-overlay .hero-art-signature b {
  font-size: clamp(.72rem, .9vw, .86rem) !important;
  letter-spacing: .28em !important;
}
@keyframes hafHeroGoldShimmer {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(255,202,91,0)); }
  50% { filter: drop-shadow(0 0 7px rgba(255,202,91,.42)); }
}
.hero-banner > .hero-showcase > .hero-art-overlay h2 em {
  animation: hafHeroGoldShimmer 4.5s ease-in-out infinite !important;
}
@media (max-width: 700px) {
  .hero-banner > .hero-showcase > .hero-art-overlay {
    width: min(72%, 285px) !important;
    gap: 8px !important;
  }
  .hero-banner > .hero-showcase > .hero-art-overlay .hero-art-eyebrow {
    font-size: clamp(.6rem, 2.5vw, .72rem) !important;
  }
  .hero-banner > .hero-showcase > .hero-art-overlay h2 {
    font-size: clamp(1.38rem, 6vw, 1.9rem) !important;
    line-height: 1.02 !important;
  }
  .hero-banner > .hero-showcase > .hero-art-overlay p {
    font-size: clamp(.72rem, 3vw, .83rem) !important;
  }
  .hero-banner > .hero-showcase > .hero-art-overlay .hero-art-services {
    max-width: 270px !important;
    gap: 6px 9px !important;
  }
  .hero-banner > .hero-showcase > .hero-art-overlay .hero-art-services span {
    font-size: clamp(.6rem, 2.5vw, .7rem) !important;
  }
  .hero-banner > .hero-showcase > .hero-art-overlay .hero-art-signature {
    font-size: .78rem !important;
    letter-spacing: .2em !important;
  }
  .hero-banner > .hero-showcase > .hero-art-overlay .hero-art-signature b {
    font-size: .62rem !important;
    letter-spacing: .23em !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-banner > .hero-showcase > .hero-art-overlay h2 em { animation: none !important; }
}


/* Performance pass: reduce costly paint effects on phones without changing the visual theme. */
@media (max-width: 700px) {
  html { scroll-behavior: auto; }
  body { background-attachment: scroll !important; }
  .hero-banner .main-poster,
  .hero-showcase,
  .hero-showcase-art,
  .service-tile,
  .poster-grid .poster-item,
  .calc-card {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .hero-showcase-art {
    transform: none !important;
    filter: none !important;
  }
  .hero-showcase-chip,
  .hero-showcase-live-dot,
  .hero-showcase-chip-icon,
  .hero-art-overlay,
  .hero-art-overlay h2 em {
    animation: none !important;
  }
  .hero-banner .main-poster,
  .calc-card,
  .service-tile {
    box-shadow: 0 8px 22px rgba(0,0,0,.22) !important;
  }
  .service-tile,
  .enquiry-path,
  .journey-step,
  .detail-box,
  .review-card,
  .poster-grid .poster-item img,
  .hero-cta {
    transition-duration: .16s !important;
  }
}
@media (max-width: 700px) and (prefers-reduced-motion: no-preference) {
  .hero-art-overlay {
    animation: hafHeroCopyFloat 7s ease-in-out infinite !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}


/* Responsive stability pass: consistent sizing and one-column mobile/tablet hero. */
*, *::before, *::after { box-sizing: border-box; }
html { max-width: 100%; overflow-x: clip; }
body { width: 100%; max-width: 100%; overflow-x: clip; }
img, picture, video, canvas, svg { max-width: 100%; }
input, select, textarea, button { max-width: 100%; }
main, section, header, footer, nav, .hero-banner, .stats-bar, .service-rail { min-width: 0; }
.hero-banner .hero-supporting { max-width: 62ch; }
.hero-showcase { min-width: 0; }
.hero-showcase-art { display: block; width: 100%; height: 100%; }
@media (min-width: 701px) and (max-width: 1024px) {
  nav { padding: 12px 20px !important; gap: 16px !important; }
  .nav-logo { height: 48px !important; max-width: 130px !important; object-fit: contain; }
  .nav-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 14px; }
  .nav-links a { margin-left: 0 !important; font-size: .75rem !important; letter-spacing: .06em !important; }
  .hero-banner { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr) !important; align-items: center !important; gap: 18px !important; padding: 24px !important; }
  .hero-banner .secure-badge, .hero-banner .typing-container, .hero-banner .hero-supporting, .hero-banner .hero-actions, .hero-banner .hero-trust-points { grid-column: 1 !important; }
  .hero-banner .hero-showcase { grid-column: 2 !important; grid-row: 1 / span 5 !important; }
  .hero-banner .typing-container { font-size: clamp(2rem, 4vw, 3rem) !important; }
}
@media (max-width: 700px) {
  nav { padding: 9px 12px !important; gap: 8px !important; flex-wrap: wrap !important; min-height: 66px; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .nav-logo { height: 42px !important; width: auto !important; max-width: 112px !important; }
  .nav-links { display: flex !important; flex: 1 1 auto !important; flex-wrap: wrap !important; justify-content: flex-end !important; align-items: center !important; gap: 6px 10px !important; min-width: 0 !important; }
  .nav-links a { margin: 0 !important; font-size: clamp(.58rem, 2.1vw, .68rem) !important; letter-spacing: .025em !important; line-height: 1.4 !important; white-space: nowrap; }
  .hero-banner { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 12px !important; width: 100% !important; max-width: 100% !important; margin: 14px auto 22px !important; padding: 18px 14px !important; text-align: left !important; overflow: hidden !important; }
  .hero-banner .secure-badge, .hero-banner .typing-container, .hero-banner .hero-supporting, .hero-banner .hero-actions, .hero-banner .hero-trust-points, .hero-banner .hero-showcase { grid-column: 1 !important; grid-row: auto !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; margin-inline: 0 !important; }
  .hero-banner .secure-badge { justify-self: start; width: fit-content !important; max-width: 100% !important; padding: 7px 11px !important; margin-bottom: 2px !important; font-size: .66rem !important; letter-spacing: .04em !important; }
  .hero-banner .typing-container { margin: 0 !important; font-size: clamp(2rem, 8vw, 2.8rem) !important; line-height: 1.04 !important; overflow-wrap: anywhere; }
  .hero-banner .hero-supporting { font-size: .94rem !important; line-height: 1.65 !important; max-width: 58ch !important; }
  .hero-banner .hero-actions { justify-content: flex-start !important; padding: 0 !important; gap: 9px !important; }
  .hero-banner .hero-cta { flex: 1 1 145px !important; width: auto !important; min-width: 0 !important; min-height: 46px !important; padding: 12px 13px !important; font-size: .82rem !important; }
  .hero-banner .hero-trust-points { justify-content: flex-start !important; gap: 7px !important; }
  .hero-banner .hero-trust-points span { font-size: .69rem !important; }
  .hero-banner .hero-showcase { margin-top: 4px !important; aspect-ratio: 4 / 3 !important; height: auto !important; min-height: 0 !important; overflow: hidden !important; border-radius: 16px !important; }
  .hero-banner .hero-showcase-art { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center !important; }
  .hero-banner .hero-art-overlay { top: 8% !important; left: 4% !important; bottom: auto !important; width: min(66%, 260px) !important; gap: 6px !important; }
  .hero-banner .hero-art-overlay h2 { font-size: clamp(1.2rem, 5.2vw, 1.65rem) !important; }
  .hero-banner .hero-art-overlay p { font-size: .68rem !important; line-height: 1.35 !important; }
  .hero-banner .hero-art-services { gap: 5px 8px !important; }
  .hero-banner .hero-art-services span { font-size: .58rem !important; }
  .hero-banner .hero-art-signature { padding-top: 5px !important; }
  .hero-banner .hero-showcase-chip, .hero-banner .hero-showcase-caption { display: none !important; }
  .hero-banner .haf-3d-orbit, .hero-banner .haf-3d-orbit-secondary, .hero-banner .haf-desktop-3d-scene { display: none !important; }
  .stats-bar { margin: 22px 12px !important; padding: 12px !important; gap: 8px !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .stat-item { flex: 1 1 100px !important; min-width: 0 !important; padding: 12px 7px !important; }
  .stat-item h3 { font-size: 1.05rem !important; }
  .stat-item p { font-size: .65rem !important; line-height: 1.4 !important; }
  .service-rail, .service-grid, .service-cards, .enquiry-path-grid { min-width: 0 !important; }
  .service-rail { padding-inline: 12px !important; }
  .service-rail .service-rail-grid, .service-rail .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .float-wa { right: 12px !important; bottom: 14px !important; }
  .reveal { transform: none !important; }
}
@media (max-width: 380px) {
  .hero-banner { padding: 15px 11px !important; }
  .hero-banner .hero-actions { flex-direction: column !important; align-items: stretch !important; }
  .hero-banner .hero-cta { width: 100% !important; flex-basis: auto !important; }
  .hero-banner .hero-showcase { aspect-ratio: 1 / 1 !important; }
  .hero-banner .hero-art-overlay { width: 70% !important; }
  .nav-logo { max-width: 94px !important; }
  .nav-links { gap: 5px 7px !important; }
}


/* Stop the rotating hero headline from reflowing the whole page.
   Reserve a stable text slot for the longest rotating phrase and cursor. */
.hero-banner .typing-container {
  min-height: 2.25em;
  line-height: 1.08;
  text-wrap: balance;
}
.hero-banner .typing-container .typed-text {
  display: inline-block;
  width: 21ch;
  min-width: 21ch;
  min-height: 1.12em;
  vertical-align: baseline;
  white-space: nowrap;
  overflow: visible;
  contain: layout;
}
@media (max-width: 700px) {
  .hero-banner .typing-container { min-height: 0; }
  .hero-banner .typing-container .typed-text {
    display: inline;
    width: auto;
    min-width: 0;
    min-height: 0;
    white-space: normal;
    contain: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-banner .typing-container .typed-text { contain: none; }
}


/* Definitive anti-layout-shift fix for the animated hero headline. */
.hero-banner .typing-container {
  display: block !important;
  min-height: 2.35em !important;
  line-height: 1.08 !important;
  overflow: visible !important;
}
.hero-banner .typing-container .typed-text {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 1.2em !important;
  height: 1.2em !important;
  line-height: 1.08 !important;
  white-space: nowrap !important;
  overflow: visible !important;
  contain: layout style !important;
  transition: opacity .16s ease, transform .16s ease !important;
}
.hero-banner .typing-container .typed-text.phrase-changing {
  opacity: .2 !important;
  transform: translateY(2px) !important;
}
@media (max-width: 700px) {
  .hero-banner .typing-container {
    min-height: 2.3em !important;
    line-height: 1.08 !important;
  }
  .hero-banner .typing-container .typed-text {
    display: block !important;
    height: auto !important;
    min-height: 1.2em !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-banner .typing-container .typed-text { transition: none !important; }
}


/* Keep the blinking typewriter caret immediately after the current letters,
   rather than at the far edge of the reserved headline slot. */
.hero-banner .typing-container .typed-text {
  width: max-content !important;
  min-width: 0 !important;
  max-width: 100% !important;
  border-right: 0 !important;
  padding-right: 0 !important;
  position: relative !important;
}
.hero-banner .typing-container .typed-text::after {
  content: "";
  display: inline-block;
  height: .92em;
  margin-left: 2px;
  border-right: 3px solid #f4b41a;
  vertical-align: -.08em;
  animation: blinkCursor .7s steps(1, end) infinite;
}
@media (max-width: 700px) {
  .hero-banner .typing-container .typed-text {
    width: auto !important;
    max-width: 100% !important;
    white-space: normal !important;
  }
  .hero-banner .typing-container .typed-text::after {
    vertical-align: -.04em;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-banner .typing-container .typed-text::after { animation: none; }
}


/* RESPONSIVE QUALITY PASS — final overrides for phone, tablet and desktop */
html {
  scroll-padding-top: 84px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  max-width: 100%;
  overflow-x: clip;
}
img, video, canvas, svg {
  max-width: 100%;
}
button, input, select, textarea {
  font: inherit;
}
a, button, input, select, textarea, summary {
  touch-action: manipulation;
}
:where(a, button, input, select, textarea, [role="button"], [tabindex]):focus-visible {
  outline: 3px solid rgba(244, 180, 26, .95);
  outline-offset: 3px;
}
section[id], main[id], footer[id] {
  scroll-margin-top: 84px;
}
.hero-banner, .hero-banner * {
  min-width: 0;
}
.hero-banner {
  width: min(100% - 32px, 1240px);
  margin-inline: auto;
}
.hero-banner .typing-container {
  overflow-wrap: normal;
  word-break: normal;
  max-width: 100%;
}
.hero-banner .hero-supporting,
.hero-banner .hero-description {
  max-width: 66ch;
  text-wrap: pretty;
}
.hero-banner .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.hero-banner .hero-cta {
  max-width: 100%;
  min-height: 46px;
}
.hero-banner .hero-showcase {
  max-width: 100%;
  overflow: hidden;
}
.service-rail, .service-grid, .service-cards, .enquiry-path-grid,
.stats-bar, .poster-grid, .footer-grid, .contact-grid {
  min-width: 0;
  max-width: 100%;
}
.poster-grid img, .hero-showcase-art {
  display: block;
  height: auto;
}
input, select, textarea {
  max-width: 100%;
}
@media (min-width: 1200px) {
  .hero-banner { width: min(100% - 64px, 1320px); }
}
@media (min-width: 701px) and (max-width: 1024px) {
  .hero-banner {
    width: calc(100% - 36px);
    gap: 24px;
  }
  .hero-banner .typing-container {
    font-size: clamp(2rem, 4vw, 3rem);
  }
  .service-rail .service-rail-grid,
  .service-rail .service-grid,
  .service-grid, .service-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .poster-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 700px) {
  html { scroll-padding-top: 68px; }
  section[id], main[id], footer[id] { scroll-margin-top: 68px; }
  body { font-size: 15px; }
  .hero-banner {
    width: calc(100% - 24px);
    margin: 12px auto 20px;
    padding: clamp(16px, 4vw, 22px) !important;
    border-radius: 20px;
    gap: 18px;
  }
  .hero-banner .typing-container {
    font-size: clamp(1.65rem, 7.1vw, 2.45rem) !important;
    line-height: 1.14 !important;
    margin-bottom: 14px !important;
    text-wrap: balance;
  }
  .hero-banner .typing-container .typed-text {
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    height: auto !important;
    min-height: 1.2em !important;
  }
  .hero-banner .hero-supporting,
  .hero-banner .hero-description {
    font-size: .96rem;
    line-height: 1.65;
  }
  .hero-banner .hero-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px !important;
    width: 100%;
  }
  .hero-banner .hero-cta {
    width: 100% !important;
    min-height: 48px;
    justify-content: center;
  }
  .hero-banner .hero-showcase {
    width: 100%;
    border-radius: 16px;
  }
  .stats-bar {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-inline: 12px !important;
  }
  .stat-item { min-width: 0 !important; }
  .service-rail .service-rail-grid,
  .service-rail .service-grid,
  .service-grid, .service-cards, .enquiry-path-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  .poster-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  .poster-item, .service-tile { min-width: 0; }
  .poster-item img { width: 100%; height: auto; object-fit: cover; }
  .nav-logo { max-width: min(34vw, 140px); }
  .nav-links { max-width: 100%; flex-wrap: wrap; }
  .float-wa { bottom: calc(14px + env(safe-area-inset-bottom)); }
  .mobile-action-bar {
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
  }
  .contact-grid, .footer-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .form-group, .form-row, .contact-form {
    min-width: 0;
    max-width: 100%;
  }
  input, select, textarea {
    min-height: 44px;
    font-size: 16px !important;
  }
}
@media (max-width: 420px) {
  .hero-banner { width: calc(100% - 18px); padding: 15px 12px !important; }
  .hero-banner .typing-container { font-size: clamp(1.55rem, 7.2vw, 1.9rem) !important; }
  .service-rail .service-rail-grid,
  .service-rail .service-grid,
  .service-grid, .service-cards, .enquiry-path-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .stats-bar { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .nav-links { gap: 6px 8px; }
}
@media (prefers-reduced-motion: reduce) {
  html:focus-within { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}


/* Prevent duplicate Apply Now CTA on phones: keep the header CTA and hide
   the scroll-triggered floating CTA on narrow viewports. */
@media screen and (max-width: 700px) {
  html body #hafFloatingApply,
  html body a#hafFloatingApply.haf-floating-apply,
  html body a#hafFloatingApply.haf-floating-apply.is-visible {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
  }
}


/* Fix narrow-screen hero: stack copy and campaign artwork instead of squeezing
   them into desktop columns. Keep the original typewriter animation intact. */
@media screen and (max-width: 700px) {
  .hero-banner {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 16px !important;
    text-align: left !important;
    overflow: hidden !important;
  }
  .hero-banner > .secure-badge,
  .hero-banner > .typing-container,
  .hero-banner > .hero-supporting,
  .hero-banner > .hero-actions,
  .hero-banner > .hero-trust-points,
  .hero-banner > .hero-showcase {
    position: relative !important;
    inset: auto !important;
    grid-column: auto !important;
    grid-row: auto !important;
    align-self: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .hero-banner > .typing-container {
    min-height: 2.55em !important;
    height: auto !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    line-height: 1.12 !important;
    overflow: visible !important;
  }
  .hero-banner > .typing-container .typed-text {
    display: inline !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
  .hero-banner > .hero-showcase {
    order: 6 !important;
    min-height: 0 !important;
    aspect-ratio: 1.35 / 1 !important;
    margin-top: 2px !important;
  }
  .hero-banner > .hero-showcase .hero-showcase-art {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }
  .hero-banner .hero-art-overlay {
    max-width: 68% !important;
    transform: none !important;
  }
  .hero-banner > .haf-3d-orbit,
  .hero-banner > .haf-3d-orbit-secondary,
  .hero-banner > .haf-desktop-3d-scene {
    pointer-events: none !important;
  }
}


/* Mobile-only compact layout: retain desktop styling unchanged. */
@media screen and (max-width: 700px) {
  /* The showcase artwork should be a horizontal swipe gallery, not 2-up rows. */
  #portfolio .poster-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 12px !important;
    padding: 4px 16px 18px !important;
    margin: 0 -4px 8px !important;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 16px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
  }
  #portfolio .poster-grid > .poster-item {
    flex: 0 0 min(76vw, 310px) !important;
    width: min(76vw, 310px) !important;
    max-width: min(76vw, 310px) !important;
    margin: 0 !important;
    scroll-snap-align: start;
  }
  #portfolio .poster-grid > .poster-item img {
    display: block;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 3 / 4;
    object-fit: contain;
  }
  #portfolio .filter-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    max-width: 100%;
    overflow-x: auto;
    gap: 8px;
    padding: 0 12px 8px;
    -webkit-overflow-scrolling: touch;
  }
  #portfolio .filter-tabs .tab-btn {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  /* Restore compact service/feature card flow and prevent oversized empty gaps. */
  .stats-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    padding: 12px !important;
    gap: 10px !important;
  }
  .stats-bar .stat-item {
    padding: 14px 8px !important;
    min-height: 0 !important;
  }
  .stats-bar .stat-item:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
  .service-rail {
    padding: 28px 14px !important;
  }
  .service-rail .service-rail-grid,
  .service-rail .service-grid,
  .service-grid, .service-cards, .enquiry-path-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  .service-tile, .enquiry-path {
    min-width: 0 !important;
    padding: 12px !important;
  }
  .mobile-quick-actions {
    z-index: 10020 !important;
    padding-bottom: calc(8px + env(safe-area-inset-bottom)) !important;
  }
  .float-wa {
    right: 12px !important;
    bottom: calc(78px + env(safe-area-inset-bottom)) !important;
    width: 54px !important;
    height: 54px !important;
    z-index: 10030 !important;
  }
}
@media screen and (max-width: 420px) {
  #portfolio .poster-grid > .poster-item {
    flex-basis: 82vw !important;
    width: 82vw !important;
    max-width: 82vw !important;
  }
  .service-rail .service-rail-grid,
  .service-rail .service-grid,
  .service-grid, .service-cards, .enquiry-path-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}


/* Mobile hero clipping/overlap repair — desktop styles remain untouched. */
@media screen and (max-width: 700px) {
  body { overflow-x: clip !important; }
  nav {
    position: sticky !important;
    top: 0 !important;
    z-index: 10050 !important;
    min-height: 66px !important;
    height: auto !important;
  }
  main#main-content {
    display: block !important;
    position: relative !important;
    overflow: visible !important;
    padding-top: 12px !important;
  }
  .trust-strip {
    position: relative !important;
    z-index: 1 !important;
    margin-top: 0 !important;
  }
  .hero-banner {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 22px 16px !important;
    margin-top: 12px !important;
    margin-bottom: 18px !important;
    gap: 14px !important;
  }
  .hero-banner > .secure-badge { order: 1 !important; }
  .hero-banner > .typing-container {
    order: 2 !important;
    display: block !important;
    position: relative !important;
    inset: auto !important;
    height: auto !important;
    min-height: 2.45em !important;
    max-height: none !important;
    width: 100% !important;
    overflow: visible !important;
    margin: 0 !important;
    line-height: 1.14 !important;
    font-size: clamp(1.7rem, 7vw, 2.25rem) !important;
    white-space: normal !important;
  }
  .hero-banner > .typing-container .typed-text {
    display: inline !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    white-space: normal !important;
    overflow: visible !important;
    overflow-wrap: break-word !important;
  }
  .hero-banner > .hero-supporting {
    order: 3 !important;
    display: block !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    line-height: 1.6 !important;
    margin: 0 !important;
  }
  .hero-banner > .hero-actions {
    order: 4 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    margin: 0 !important;
  }
  .hero-banner > .hero-trust-points {
    order: 5 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    margin: 0 !important;
    gap: 8px !important;
  }
  .hero-banner > .hero-showcase {
    order: 6 !important;
    position: relative !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 1.25 / 1 !important;
    overflow: hidden !important;
    margin: 6px 0 0 !important;
    transform: none !important;
  }
  .hero-banner > .hero-showcase .hero-showcase-art {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }
  .hero-banner .hero-art-overlay {
    left: 4% !important;
    top: 7% !important;
    max-width: 62% !important;
    width: 62% !important;
    height: auto !important;
    transform: none !important;
    overflow-wrap: break-word !important;
  }
  .hero-banner .hero-showcase-chip,
  .hero-banner .hero-showcase-caption {
    display: none !important;
  }
  .stats-bar {
    position: relative !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    margin-top: 16px !important;
    margin-bottom: 24px !important;
  }
  #portfolio {
    overflow: hidden !important;
  }
}


/* Final mobile-only structural correction: keep nav in its own space and
   force all hero copy to participate in normal document flow. */
@media screen and (max-width: 700px) {
  body > nav,
  body > nav[aria-label="Main navigation"] {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 10px 12px 12px !important;
    gap: 10px !important;
    overflow: visible !important;
    background: rgba(8, 4, 16, .98) !important;
    transform: none !important;
  }
  body > nav .nav-logo {
    display: block !important;
    position: relative !important;
    inset: auto !important;
    width: auto !important;
    height: 52px !important;
    max-width: 150px !important;
    margin: 0 auto !important;
    object-fit: contain !important;
  }
  body > nav .nav-links {
    display: flex !important;
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    transform: none !important;
  }
  body > nav .nav-links a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 9px 5px !important;
    font-size: clamp(10px, 2.8vw, 13px) !important;
    line-height: 1.2 !important;
    letter-spacing: .2px !important;
    white-space: nowrap !important;
  }
  .trust-strip {
    position: relative !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 auto 14px !important;
    padding: 10px 8px !important;
    overflow: visible !important;
    transform: none !important;
    z-index: 1 !important;
  }
  .trust-strip > div {
    min-width: 0 !important;
    width: auto !important;
    height: auto !important;
    padding: 4px !important;
  }
  main#main-content {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
    overflow: visible !important;
    transform: none !important;
  }
  main#main-content > .hero-banner {
    display: flex !important;
    position: relative !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: calc(100% - 24px) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 12px auto 22px !important;
    padding: 20px 15px !important;
    gap: 13px !important;
    overflow: visible !important;
    text-align: left !important;
    transform: none !important;
  }
  main#main-content > .hero-banner > .secure-badge,
  main#main-content > .hero-banner > .typing-container,
  main#main-content > .hero-banner > .hero-supporting,
  main#main-content > .hero-banner > .hero-actions,
  main#main-content > .hero-banner > .hero-trust-points,
  main#main-content > .hero-banner > .hero-showcase {
    position: relative !important;
    inset: auto !important;
    float: none !important;
    clear: both !important;
    flex: 0 0 auto !important;
    align-self: stretch !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
  }
  main#main-content > .hero-banner > .secure-badge {
    order: 1 !important;
    width: fit-content !important;
    max-width: 100% !important;
    margin: 0 0 2px !important;
  }
  main#main-content > .hero-banner > .typing-container {
    order: 2 !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 2.45em !important;
    max-height: none !important;
    margin: 0 !important;
    overflow: visible !important;
    font-size: clamp(1.7rem, 7vw, 2.25rem) !important;
    line-height: 1.14 !important;
  }
  main#main-content > .hero-banner > .hero-supporting {
    order: 3 !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    overflow: visible !important;
    line-height: 1.6 !important;
  }
  main#main-content > .hero-banner > .hero-actions {
    order: 4 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    gap: 9px !important;
  }
  main#main-content > .hero-banner > .hero-trust-points {
    order: 5 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    gap: 7px !important;
    overflow: visible !important;
  }
  main#main-content > .hero-banner > .hero-showcase {
    order: 6 !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 1.25 / 1 !important;
    margin: 5px 0 0 !important;
    overflow: hidden !important;
  }
  main#main-content > .hero-banner > .hero-showcase > .hero-showcase-art {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
  .stats-bar {
    display: grid !important;
    position: relative !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: calc(100% - 24px) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 auto 22px !important;
    padding: 12px !important;
    gap: 10px !important;
    overflow: visible !important;
    transform: none !important;
  }
  .stats-bar .stat-item {
    min-width: 0 !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 14px 8px !important;
  }
  .stats-bar .stat-item:last-child:nth-child(odd) { grid-column: 1 / -1; }
}


/* Mobile-only artwork fit: show the complete campaign image without cropping the family/car at the right edge. */
@media screen and (max-width: 700px) {
  main#main-content > .hero-banner > .hero-showcase {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 9 !important;
    overflow: hidden !important;
    border-radius: 18px !important;
    background: #130d20 !important;
  }
  main#main-content > .hero-banner > .hero-showcase > .hero-showcase-art {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
  }
  main#main-content > .hero-banner .hero-art-overlay {
    left: 4% !important;
    top: 6% !important;
    width: 60% !important;
    max-width: 60% !important;
    max-height: 88% !important;
    overflow: hidden !important;
  }
  main#main-content > .hero-banner .hero-art-overlay h2 {
    font-size: clamp(1rem, 4.8vw, 1.65rem) !important;
    line-height: 1.02 !important;
  }
  main#main-content > .hero-banner .hero-art-overlay p {
    font-size: clamp(.65rem, 2.7vw, .9rem) !important;
    line-height: 1.25 !important;
  }
  main#main-content > .hero-banner .hero-art-services { gap: 3px 7px !important; flex-wrap: wrap !important; }
  main#main-content > .hero-banner .hero-art-services span { font-size: clamp(.55rem, 2.2vw, .72rem) !important; }
}


/* Mobile-only: remove empty dark bands above/below the hero artwork. */
@media screen and (max-width: 700px) {
  main#main-content > .hero-banner {
    gap: 10px !important;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }
  main#main-content > .hero-banner > .hero-showcase {
    aspect-ratio: 16 / 9 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
    background: transparent !important;
  }
  main#main-content > .hero-banner > .hero-showcase > .hero-showcase-art {
    display: block !important;
    object-fit: contain !important;
  }
  main#main-content > .hero-banner .hero-art-overlay {
    line-height: normal !important;
  }
}


/* Mobile final trim: fill the artwork frame edge-to-edge to eliminate letterbox bands. */
@media screen and (max-width: 700px) {
  main#main-content > .hero-banner > .hero-showcase {
    display: block !important;
    aspect-ratio: 16 / 9 !important;
    overflow: hidden !important;
    padding: 0 !important;
    background: #130d20 !important;
  }
  main#main-content > .hero-banner > .hero-showcase > .hero-showcase-art {
    object-fit: cover !important;
    object-position: center center !important;
  }
}


/* Tablet layout alignment: keep phone/tablet hero composition stacked.
   Desktop's side-by-side hero begins above 1024px; preserve desktop styles. */
@media screen and (min-width: 701px) and (max-width: 1024px) {
  main#main-content > .hero-banner {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: calc(100% - 32px) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 16px auto 24px !important;
    padding: 24px !important;
    gap: 14px !important;
    overflow: visible !important;
    text-align: left !important;
  }
  main#main-content > .hero-banner > .secure-badge,
  main#main-content > .hero-banner > .typing-container,
  main#main-content > .hero-banner > .hero-supporting,
  main#main-content > .hero-banner > .hero-actions,
  main#main-content > .hero-banner > .hero-trust-points,
  main#main-content > .hero-banner > .hero-showcase {
    position: relative !important;
    inset: auto !important;
    float: none !important;
    clear: both !important;
    align-self: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
  }
  main#main-content > .hero-banner > .secure-badge { order: 1 !important; }
  main#main-content > .hero-banner > .typing-container {
    order: 2 !important;
    display: block !important;
    height: auto !important;
    min-height: 2.45em !important;
    max-height: none !important;
    margin: 0 !important;
    overflow: visible !important;
    font-size: clamp(2rem, 4.2vw, 3rem) !important;
    line-height: 1.14 !important;
  }
  main#main-content > .hero-banner > .hero-supporting {
    order: 3 !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    overflow: visible !important;
    line-height: 1.6 !important;
  }
  main#main-content > .hero-banner > .hero-actions {
    order: 4 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    gap: 10px !important;
  }
  main#main-content > .hero-banner > .hero-trust-points {
    order: 5 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    gap: 8px !important;
    overflow: visible !important;
  }
  main#main-content > .hero-banner > .hero-showcase {
    order: 6 !important;
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 16 / 9 !important;
    margin: 4px 0 0 !important;
    overflow: hidden !important;
    border-radius: 18px !important;
    background: #130d20 !important;
  }
  main#main-content > .hero-banner > .hero-showcase > .hero-showcase-art {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
  }
}