/* Generated from torabi-sketch — do not edit by hand. Source: torabi-fa-modern-v2.html #hero-v2 */

/* ===== Hero — Cinematic Split (editorial luxury) ===== */
.hx-hero{
  position:relative; isolation:isolate; overflow:hidden;
  min-height:92vh; display:flex; align-items:center;
  background:var(--ink);
  /* Bleed the dark hero up behind the floating (sticky, z-40) header pill,
     so there is no pale strip at the very top of the page. */
  margin-top:calc(-1 * var(--hx-headroom, 7rem));
}
/* Background slideshow — crossfading dark supercar frames.
   Each slide is a stacked layer; opacity keyframes cross-dissolve them.
   The legibility wash + grain sit ABOVE this (z-index -2 / -1). */
.hx-hero__bg{ position:absolute; inset:0; z-index:-3; overflow:hidden; background:var(--ink); }
/* Background + content images/text now come from the Customizer (inline styles
   on each [data-hero-slide]); crossfade is class-driven by initHeroBgSlider(). */
.hx-slide{
  position:absolute; inset:0;
  background-size:cover; background-repeat:no-repeat;
  opacity:0; transition:opacity .8s ease;
  will-change:opacity;
}
.hx-slide.is-active{ opacity:1; }

/* Per-slide content stacked in one grid cell so the tallest slide sets the
   height and the active block crossfades over the others. */
.hx-hero__slides{ display:grid; }
.hx-hero__slidecontent{
  grid-area:1 / 1;
  opacity:0; visibility:hidden; transition:opacity .8s ease;
}
.hx-hero__slidecontent.is-active{ opacity:1; visibility:visible; }
/* Gradient wash: keeps car visible on the left, darkens RIGHT for crisp cream text */
.hx-hero__wash{
  position:absolute; inset:0; z-index:-2; pointer-events:none;
  background:
    linear-gradient(270deg,
      rgba(23,19,17,0.92) 0%,
      rgba(23,19,17,0.80) 26%,
      rgba(23,19,17,0.46) 52%,
      rgba(23,19,17,0.30) 72%,
      rgba(23,19,17,0.55) 100%),
    radial-gradient(120% 90% at 78% 42%,
      rgba(107,31,53,0.34) 0%,
      rgba(69,16,33,0.10) 40%,
      transparent 72%),
    linear-gradient(0deg,
      rgba(23,19,17,0.70) 0%,
      transparent 34%,
      transparent 72%,
      rgba(23,19,17,0.45) 100%);
}
/* Fine grain + vignette for filmic depth */
.hx-hero__grain{
  position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
.hx-hero::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  box-shadow:inset 0 0 220px 60px rgba(23,19,17,0.65);
}

/* Layout wrap — content anchored RIGHT (RTL reading anchor) */
.hx-hero__wrap{
  position:relative; z-index:1; width:100%;
  max-width:72rem; margin-inline:auto;
  padding:7.5rem 1.5rem 6rem;
}
.hx-hero__content{
  max-width:34rem; margin-inline-end:auto; /* anchor to the right edge in RTL */
  text-align:right;
  animation:hx-rise .9s cubic-bezier(.2,.7,.2,1) both;
}

/* Kicker — thin gold hairline + label */
.hx-kicker{ display:inline-flex; align-items:center; gap:14px; }
.hx-kicker__rule{
  width:46px; height:1px;
  background:linear-gradient(90deg,transparent,var(--gold));
}
.hx-kicker__label{
  font-size:12px; font-weight:600; letter-spacing:.14em;
  color:var(--gold-soft); text-transform:uppercase; white-space:nowrap;
}

/* Trust chips — restyled for dark hero (pill already gives shape) */
.hx-pill{
  margin-top:22px; color:var(--cream);
  border:1px solid rgba(217,194,138,0.38);
  background:rgba(23,19,17,0.28);
  backdrop-filter:blur(4px);
}

/* Headline */
.hx-h1{
  margin-top:24px;
  font-size:clamp(40px,7.4vw,82px);
  line-height:1.04;
  color:var(--cream);
  text-shadow:0 2px 28px rgba(23,19,17,0.55);
  text-wrap:balance;
}
.hx-h1 em, .hx-accent{ color:var(--gold-soft); font-style:normal; }

.hx-sub{
  margin-top:18px;
  font-size:clamp(15px,1.9vw,18px);
  line-height:1.95;
  color:rgba(248,244,236,0.82);
  max-width:30rem; margin-inline-end:auto;
}

/* CTAs */
.hx-cta{
  margin-top:34px; display:flex; flex-wrap:wrap; gap:14px;
  justify-content:flex-start;
}
.hx-btn-wine{ box-shadow:0 12px 34px -12px rgba(107,31,53,0.85); }
/* True secondary CTA: white text + white border, inverts to a solid white
   fill (with dark text) on hover. The inline <svg> uses currentColor, so the
   chevron follows the text colour automatically. */
.hx-btn-outline{
  color:#fff;
  border:1px solid rgba(255,255,255,0.85);
  background:transparent;
  -webkit-backdrop-filter:blur(2px);
  backdrop-filter:blur(2px);
  transition:border-color .3s ease, color .3s ease, background .3s ease, transform .3s ease;
}
.hx-btn-outline:hover,
.hx-btn-outline:focus-visible{
  border-color:#fff;
  color:var(--ink);
  background:#fff;
  transform:translateY(-1px);
}

/* Compact stats ledger */
.hx-stats{
  margin-top:46px; padding-top:26px;
  border-top:1px solid rgba(217,194,138,0.20);
  display:flex; align-items:center; flex-wrap:wrap;
  gap:10px 26px;
}
.hx-stat{ display:flex; flex-direction:column; gap:4px; }
.hx-stat__k{
  font-size:11px; font-weight:600; letter-spacing:.10em;
  color:rgba(217,194,138,0.72); text-transform:uppercase;
}
.hx-stat__v{ margin:0; font-size:18px; font-weight:700; color:var(--cream); }
.hx-stat__div{ width:1px; height:30px; background:rgba(217,194,138,0.22); }

/* Scroll cue */
.hx-scroll{
  position:absolute; z-index:1; bottom:26px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.hx-scroll__txt{ font-size:11px; letter-spacing:.12em; color:rgba(217,194,138,0.70); }
.hx-scroll__line{
  width:1px; height:42px; overflow:hidden; position:relative;
  background:rgba(217,194,138,0.22);
}
.hx-scroll__line::after{
  content:""; position:absolute; inset-inline:0; top:-50%; height:50%;
  background:var(--gold-soft); animation:hx-trace 2.4s ease-in-out infinite;
}

@keyframes hx-rise{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:translateY(0); } }
@keyframes hx-trace{ 0%{ top:-50%; } 60%,100%{ top:100%; } }

/* Tablet/mobile: car still reads behind text, layout recentred for comfort */
@media (max-width:768px){
  .hx-hero{ min-height:92vh; --hx-headroom:6.5rem; }
  /* Fallback framing for slides with no Customizer position (inline style wins). */
  .hx-slide{ background-position:50% 42%; }
  .hx-hero__wash{
    background:
      linear-gradient(0deg,
        rgba(23,19,17,0.94) 0%,
        rgba(23,19,17,0.72) 36%,
        rgba(23,19,17,0.50) 64%,
        rgba(23,19,17,0.62) 100%),
      radial-gradient(140% 70% at 50% 18%,
        rgba(107,31,53,0.30) 0%, transparent 60%);
  }
  .hx-hero__wrap{ padding:6.5rem 1.25rem 5rem; }
  .hx-hero__content{ max-width:none; margin-inline-end:0; }
  .hx-h1{ text-shadow:0 2px 22px rgba(23,19,17,0.7); }
  .hx-stats{ gap:8px 18px; }
  .hx-stat__div{ height:24px; }
  .hx-kicker__label{ font-size:11px; letter-spacing:.10em; }
  .hx-kicker__rule{ width:32px; }
}

@media (prefers-reduced-motion:reduce){
  /* No rotation (JS bails too): hold the first slide, no transitions. */
  .hx-slide{ transition:none; }
  .hx-hero__slidecontent{ transition:none; }
  .hx-hero__content{ animation:none; }
  .hx-scroll__line::after{ animation:none; top:100%; }
}