/*
 * Royal Auto homepage hero video.
 * HF18: the video belongs only to the first screen. It scrolls away with the
 * hero; all content below it sits on the normal light-grey site background.
 */

.home-page {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
}

.home-page main,
.home-page .footer {
  position: relative;
  z-index: 1;
}

/* One-screen media layer. It is deliberately absolute, never fixed. */
.site-video-background {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  right: 0;
  height: 100svh;
  overflow: hidden;
  pointer-events: none;
  background: #090909 url("assets/hero-poster.jpg") center / cover no-repeat;
}

.site-video,
.site-video-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.site-video {
  object-fit: cover;
  object-position: center;
}

.site-video-overlay {
  background:
    linear-gradient(180deg, rgba(4,4,4,.30) 0%, rgba(4,4,4,.38) 55%, rgba(4,4,4,.48) 100%),
    radial-gradient(circle at 70% 35%, rgba(0,0,0,.02), rgba(0,0,0,.28) 82%);
}

/* Header remains usable while the first screen moves away. */
.home-page .site-header {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  right: 0;
  background: transparent;
}

.home-page .header-shell {
  background: rgba(12,12,12,.82);
  border-color: rgba(255,255,255,.16);
  box-shadow: 0 12px 36px rgba(0,0,0,.20);
  backdrop-filter: blur(14px) saturate(.9);
  -webkit-backdrop-filter: blur(14px) saturate(.9);
}

.home-page .more-menu {
  box-shadow: 0 18px 48px rgba(0,0,0,.24);
}

/* First screen */
.hero-video-section {
  position: relative;
  min-height: 100svh;
  padding: 0;
  overflow: hidden;
  color: #fff;
  background: transparent;
}

.hero-video-section::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.42) 38%, rgba(0,0,0,.08) 74%, rgba(0,0,0,.16) 100%),
    linear-gradient(180deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,0) 56%, rgba(0,0,0,.34) 100%);
}

.hero-video-container {
  position: relative;
  z-index: 2;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: 118px;
  padding-bottom: 72px;
}

.hero-video-content {
  width: min(780px,70vw);
  text-shadow: 0 2px 22px rgba(0,0,0,.28);
}

.hero-overline {
  display: inline-block;
  margin-bottom: 18px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.78);
}

.hero-video-content h1 {
  max-width: 760px;
  font-size: clamp(48px,6.4vw,88px);
  line-height: .96;
  letter-spacing: -.045em;
  text-wrap: balance;
}

.hero-subline {
  margin: 22px 0 0;
  font-size: clamp(14px,1.35vw,18px);
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(255,255,255,.92);
}

.hero-subline span {
  margin: 0 5px;
  color: var(--accent);
}

.hero-video-content .lead {
  max-width: 650px;
  margin-top: 18px;
  color: rgba(255,255,255,.82);
  font-size: 17px;
}

.hero-video-content .actions {
  margin-top: 30px;
}

.hero-video-content .btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #111;
  text-shadow: none;
}

.hero-video-content .btn.primary:hover {
  box-shadow: 0 12px 30px rgba(0,0,0,.28);
}

.hero-video-content .btn.secondary {
  background: rgba(10,10,10,.26);
  border-color: rgba(255,255,255,.52);
  color: #fff;
  text-shadow: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.hero-video-content .btn.secondary:hover {
  background: rgba(255,255,255,.12);
}

.hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-top: 38px;
  color: rgba(255,255,255,.76);
  font-size: 12px;
  font-weight: 700;
}

.hero-facts span {
  display: inline-flex;
  align-items: center;
}

.hero-facts span+span::before {
  content: "";
  width: 1px;
  height: 13px;
  margin: 0 14px;
  background: rgba(255,255,255,.36);
}

.hero-scroll {
  position: absolute;
  right: 18px;
  bottom: 30px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,.70);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-shadow: 0 2px 14px rgba(0,0,0,.5);
}

.hero-scroll b {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.38);
  border-radius: 50%;
  font-size: 16px;
  color: #fff;
}

/* Everything below the first screen is ordinary light site content. */
.home-page main > .section:not(.hero-video-section) {
  position: relative;
  color: var(--ink);
  background: var(--bg);
  border-top: 1px solid rgba(16,16,16,.045);
}

.home-page main > .section:not(.hero-video-section):nth-of-type(odd) {
  background: #f1f2f3;
}

.home-page main > .section:not(.hero-video-section) .section-head h2,
.home-page main > .section:not(.hero-video-section) .section-head h3 {
  color: var(--ink);
  text-shadow: none;
}

.home-page main > .section:not(.hero-video-section) .section-head .lead {
  color: var(--muted);
}

.home-page main > .section:not(.hero-video-section) .eyebrow {
  color: #6b645b;
}

.home-page main > .section:not(.hero-video-section) .eyebrow::before {
  background: #978a78;
}

.home-page main > .section .section-head > .btn.secondary,
.home-page .home-deals-head-actions > .btn.secondary {
  background: #fff;
  border-color: #cfcfd2;
  color: #111;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.home-page main > .section .section-head > .btn.secondary:hover,
.home-page .home-deals-head-actions > .btn.secondary:hover {
  background: #ececef;
}

.home-page .footer {
  padding-top: 34px;
  background: var(--bg);
}

/* Accessibility: poster stays as first-screen background when motion is reduced. */
@media (prefers-reduced-motion: reduce) {
  .site-video {
    display: none;
  }
}

@media (max-width:850px) {
  .hero-video-container {
    padding-top: 104px;
    padding-bottom: 64px;
  }

  .hero-video-content {
    width: min(720px,86vw);
  }

  .hero-video-content h1 {
    font-size: clamp(46px,8.8vw,72px);
  }
}

@media (max-width:580px) {
  .site-video-background {
    background-image: url("assets/hero-poster-mobile.jpg");
  }

  .hero-video-section::before {
    background:
      linear-gradient(180deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,.22) 36%, rgba(0,0,0,.66) 100%),
      linear-gradient(90deg, rgba(0,0,0,.34), rgba(0,0,0,.08));
  }

  .hero-video-container {
    align-items: flex-end;
    padding-top: 96px;
    padding-bottom: 74px;
  }

  .hero-video-content {
    width: 100%;
  }

  .hero-video-content h1 {
    font-size: clamp(42px,12vw,58px);
    line-height: .98;
  }

  .hero-overline {
    margin-bottom: 14px;
    font-size: 10px;
  }

  .hero-subline {
    margin-top: 17px;
    font-size: 12px;
    line-height: 1.6;
  }

  .hero-video-content .lead {
    margin-top: 13px;
    font-size: 15px;
    line-height: 1.5;
  }

  .hero-video-content .actions {
    margin-top: 22px;
  }

  .hero-facts {
    display: grid;
    gap: 7px;
    margin-top: 22px;
    font-size: 11px;
  }

  .hero-facts span+span::before {
    display: none;
  }

  .hero-scroll {
    display: none;
  }
}

/* =========================================================
   HF20 — homepage conversion hierarchy + premium contrast
   ========================================================= */
.home-page{background:var(--bg)}
.home-page main > .section:not(.hero-video-section),
.home-page main > .section:not(.hero-video-section):nth-of-type(odd){
  background:var(--bg);
  border-top:1px solid rgba(17,17,17,.055);
}
.home-page .home-deals-section{background:#f7f6f3!important}
.home-page .process-section{background:#e6e4df!important}

.home-page .header-shell{
  background:rgba(12,12,12,.90);
  border-color:rgba(255,255,255,.14);
  box-shadow:0 12px 34px rgba(0,0,0,.18);
}

.hero-video-section::before{
  background:
    linear-gradient(90deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.52) 44%,rgba(0,0,0,.15) 74%,rgba(0,0,0,.22) 100%),
    linear-gradient(180deg,rgba(0,0,0,.08) 0%,rgba(0,0,0,0) 58%,rgba(0,0,0,.36) 100%);
}
.hero-video-container{
  display:grid;
  grid-template-columns:minmax(0,1fr) 310px;
  gap:54px;
  align-items:center;
  padding-top:112px;
  padding-bottom:70px;
}
.hero-video-content{width:auto;max-width:790px;text-shadow:0 2px 20px rgba(0,0,0,.24)}
.hero-video-content h1{font-size:clamp(52px,6vw,88px);line-height:.94;max-width:820px}
.hero-video-content .lead{max-width:610px;font-size:17px;line-height:1.5;color:rgba(255,255,255,.83)}
.hero-video-content .actions{margin-top:28px}
.hero-video-content .btn.primary{background:#fff;border-color:#fff;color:#111}
.hero-video-content .btn.primary:hover{background:#eee;border-color:#eee;box-shadow:none}
.hero-video-content .btn.secondary{background:rgba(12,12,12,.32);border-color:rgba(255,255,255,.55);color:#fff}
.hero-video-content .btn.secondary:hover{background:rgba(255,255,255,.12)}
.hero-facts{margin-top:30px;font-size:11px;color:rgba(255,255,255,.72)}

.hero-sales{
  align-self:center;
  width:100%;
  padding:24px;
  border-radius:22px;
  background:rgba(255,255,255,.95);
  color:#111;
  border:1px solid rgba(255,255,255,.72);
  box-shadow:0 18px 56px rgba(0,0,0,.18);
  text-shadow:none;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.hero-sales[hidden]{display:none!important}
.hero-sales-main{display:grid;gap:3px;padding-bottom:20px;border-bottom:1px solid #ddd9d2}
.hero-sales-main strong{font-size:50px;line-height:.95;letter-spacing:-.06em;font-weight:850}
.hero-sales-main span{font-size:12px;font-weight:750;color:#67625c}
.hero-sales-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding-top:18px}
.hero-sales-row>div{display:grid;gap:2px}
.hero-sales-row strong{font-size:27px;line-height:1;font-weight:850;letter-spacing:-.045em}
.hero-sales-row span{font-size:10px;text-transform:uppercase;letter-spacing:.07em;font-weight:800;color:#77716b}
.hero-sales small{display:block;margin-top:18px;color:#918b83;font-size:9px;letter-spacing:.035em}

.home-deals-head .lead{max-width:620px}
.home-deals-track{gap:16px;grid-auto-columns:calc((100% - 32px)/3)}
.home-deal-card{border-radius:18px;transition:transform .18s ease,border-color .18s ease}
.home-deal-card:hover{transform:translateY(-3px);border-color:#b8b4ae}
.home-deal-card .card-body{padding:17px}
.deal-kind{background:#ece9e3;color:#58534d}
.deal-kind-seller{background:#e5f1e8;color:#235f34}
.deal-kind-rate{background:#e8edf2;color:#37556f}

.process-section .section-head{margin-bottom:28px}
.process-steps-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:12px}
.process-stage{
  min-height:230px;
  padding:24px;
  border-radius:24px;
  box-shadow:none;
  background:#f7f6f3;
  border-color:rgba(17,17,17,.08);
  display:flex;
  flex-direction:column;
}
.process-stage:nth-child(1){grid-column:span 2}
.process-stage:nth-child(2){grid-column:span 3;background:#151515;color:#fff;border-color:#151515}
.process-stage:nth-child(3){grid-column:span 2}
.process-stage:nth-child(4){grid-column:span 2;background:#8f8f8c;color:#fff;border-color:#8f8f8c}
.process-stage:nth-child(5){grid-column:span 3}
.process-stage:nth-child(6){grid-column:span 4;background:#8f8f8c;color:#fff;border-color:#8f8f8c;min-height:190px}
.process-stage:nth-child(7){grid-column:span 3;min-height:190px}
.process-stage:nth-child(8){grid-column:span 5;background:#151515;color:#fff;border-color:#151515;min-height:190px}
.process-stage-num{background:#fff;color:#111;border:1px solid rgba(17,17,17,.08);font-size:11px;height:30px}
.process-stage:nth-child(2) .process-stage-num,
.process-stage:nth-child(4) .process-stage-num,
.process-stage:nth-child(6) .process-stage-num,
.process-stage:nth-child(8) .process-stage-num{background:#fff;color:#111;border-color:#fff}
.process-stage h3{margin-top:24px;font-size:20px;letter-spacing:-.035em}
.process-stage p{margin-top:auto;padding-top:28px;color:#65615c;font-size:13px;line-height:1.5}
.process-stage:nth-child(2) p,
.process-stage:nth-child(4) p,
.process-stage:nth-child(6) p,
.process-stage:nth-child(8) p{color:rgba(255,255,255,.78)}

@media(max-width:1080px){
  .hero-video-container{grid-template-columns:minmax(0,1fr) 270px;gap:28px}
  .process-steps-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .process-stage:nth-child(n){grid-column:span 1;min-height:210px}
}
@media(max-width:850px){
  .hero-video-container{display:flex;align-items:flex-end}
  .hero-video-content{width:min(720px,86vw)}
  .hero-sales{position:absolute;right:18px;bottom:68px;width:250px;padding:18px}
  .hero-sales-main strong{font-size:40px}
  .hero-sales-row strong{font-size:23px}
  .process-steps-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:620px){
  .hero-video-container{display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch;gap:18px}
  .hero-video-content{width:100%}
  .hero-video-content h1{font-size:clamp(42px,12vw,58px)}
  .hero-sales{position:static;width:100%;padding:16px;border-radius:17px;background:rgba(255,255,255,.94)}
  .hero-sales-main{grid-template-columns:auto 1fr;align-items:end;gap:10px;padding-bottom:13px}
  .hero-sales-main strong{font-size:35px}
  .hero-sales-main span{padding-bottom:3px}
  .hero-sales-row{padding-top:13px}
  .hero-sales small{display:none}
  .process-steps-grid{grid-template-columns:1fr}
  .process-stage:nth-child(n){grid-column:auto;min-height:185px;border-radius:20px}
  .home-deals-track{grid-auto-columns:86%}
}

/* ================================================================
   HF20.2 — Liquid Glass experiment
   Glass is used as an interaction layer, not as wallpaper everywhere.
   ================================================================ */

:root{
  --ra-glass-dark:rgba(13,13,14,.35);
  --ra-glass-light:rgba(245,246,247,.16);
  --ra-glass-line:rgba(255,255,255,.24);
  --ra-glass-blur:20px;
  --ra-glass-shadow:0 18px 52px rgba(0,0,0,.20);
}

/* On the video the header stays deliberately solid for maximum legibility. */
.home-page .site-header .header-shell{
  background:#111;
  border-color:rgba(255,255,255,.12);
  box-shadow:0 10px 30px rgba(0,0,0,.18);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  transition:
    background-color .38s cubic-bezier(.2,.75,.25,1),
    border-color .38s ease,
    box-shadow .38s ease,
    backdrop-filter .38s ease,
    -webkit-backdrop-filter .38s ease;
}

/* Once the video has scrolled away the same bar becomes about 65% transparent. */
.home-page .site-header.is-after-hero .header-shell{
  background:var(--ra-glass-dark);
  border-color:rgba(255,255,255,.20);
  box-shadow:0 14px 42px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.09);
  backdrop-filter:blur(var(--ra-glass-blur)) saturate(1.28);
  -webkit-backdrop-filter:blur(var(--ra-glass-blur)) saturate(1.28);
}

/* Hover/focus restores the solid surface smoothly. */
@media (hover:hover) and (pointer:fine){
  .home-page .site-header.is-after-hero .header-shell:hover,
  .home-page .site-header.is-after-hero .header-shell:focus-within{
    background:#111;
    border-color:rgba(255,255,255,.14);
    box-shadow:0 16px 44px rgba(0,0,0,.22);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
}

/* Sales proof is another small glass insert on the first screen. */
.hero-sales{
  background:rgba(235,238,241,.16);
  color:#fff;
  border-color:rgba(255,255,255,.30);
  box-shadow:var(--ra-glass-shadow), inset 0 1px 0 rgba(255,255,255,.12);
  backdrop-filter:blur(18px) saturate(1.2);
  -webkit-backdrop-filter:blur(18px) saturate(1.2);
  transition:transform .3s cubic-bezier(.2,.75,.25,1),background-color .3s ease,color .3s ease,box-shadow .3s ease;
}
.hero-sales-main{border-bottom-color:rgba(255,255,255,.24)}
.hero-sales-main span,.hero-sales-row span,.hero-sales small{color:rgba(255,255,255,.76)}
@media (hover:hover) and (pointer:fine){
  .hero-sales:hover{
    transform:translateY(-4px);
    background:rgba(235,237,239,.96);
    color:#111;
    box-shadow:0 22px 58px rgba(0,0,0,.25);
  }
  .hero-sales:hover .hero-sales-main{border-bottom-color:#d3d4d6}
  .hero-sales:hover .hero-sales-main span,
  .hero-sales:hover .hero-sales-row span,
  .hero-sales:hover small{color:#666a6e}
}

/* One shared video runs behind the whole 8-step grid. */
.process-section{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:#111!important;
  color:#fff;
}
.process-video-background{
  position:absolute;
  z-index:-2;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  background:#111 url("assets/hero-poster.jpg") center/cover no-repeat;
}
.process-video,.process-video-overlay{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.process-video{object-fit:cover;object-position:center 48%;filter:saturate(.86) contrast(1.02)}
.process-video-overlay{
  background:
    linear-gradient(180deg,rgba(5,6,7,.46),rgba(5,6,7,.52)),
    radial-gradient(circle at 68% 30%,rgba(255,255,255,.03),rgba(0,0,0,.25) 76%);
}
.process-content{position:relative;z-index:1}
.process-section .eyebrow,.process-section .lead{color:rgba(255,255,255,.74)}
.process-section h2{color:#fff}
.process-section .btn.secondary{
  color:#fff;
  border-color:rgba(255,255,255,.32);
  background:rgba(255,255,255,.11);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.process-section .btn.secondary:hover{background:rgba(240,242,244,.94);color:#111;border-color:rgba(255,255,255,.72)}

/* Every step begins as one and the same liquid-glass material. */
.process-stage,
.process-stage:nth-child(n){
  background:var(--ra-glass-light);
  color:#fff;
  border:1px solid var(--ra-glass-line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
  backdrop-filter:blur(18px) saturate(1.22);
  -webkit-backdrop-filter:blur(18px) saturate(1.22);
  transition:
    transform .32s cubic-bezier(.2,.8,.2,1),
    background-color .32s ease,
    color .32s ease,
    border-color .32s ease,
    box-shadow .32s ease;
}
.process-stage .process-stage-num,
.process-stage:nth-child(n) .process-stage-num{
  background:rgba(255,255,255,.84);
  color:#17191b;
  border-color:rgba(255,255,255,.55);
  box-shadow:0 6px 18px rgba(0,0,0,.08);
}
.process-stage p,
.process-stage:nth-child(n) p{color:rgba(255,255,255,.78)}

@media (hover:hover) and (pointer:fine){
  .process-stage:hover{
    transform:translateY(-7px) scale(1.006);
    background:rgba(225,227,229,.97);
    color:#17191b;
    border-color:rgba(255,255,255,.78);
    box-shadow:0 22px 48px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.9);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
  .process-stage:hover p{color:#555b60}
}

/* Small glass accents elsewhere, enough to establish the language without
   turning every rectangle on the site into translucent soup. */
.home-deals-arrows .carousel-control{
  background:rgba(255,255,255,.56);
  border-color:rgba(255,255,255,.76);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.home-deals-arrows .carousel-control:hover:not(:disabled){
  background:#fff;
  box-shadow:0 10px 26px rgba(0,0,0,.12);
}

@media (max-width:620px){
  .hero-sales{
    background:rgba(236,238,240,.19);
    color:#fff;
    border-color:rgba(255,255,255,.28);
  }
  .process-video{object-position:center}
  .process-stage:nth-child(n){backdrop-filter:blur(15px) saturate(1.18);-webkit-backdrop-filter:blur(15px) saturate(1.18)}
}

@media (prefers-reduced-motion:reduce){
  .home-page .header-shell,.hero-sales,.process-stage{transition:none!important}
  .process-stage:hover,.hero-sales:hover{transform:none!important}
}


/* ================================================================
   HF20.3 — "windows in the wall" process section + lighter header glass
   The page remains a solid wall. One shared video is clipped only to the
   exact rectangles of the eight process cards.
   ================================================================ */

/* After the hero the floating bar is now deliberately more transparent. */
.home-page .site-header.is-after-hero .header-shell{
  background:rgba(13,13,14,.18);
  border-color:rgba(255,255,255,.14);
  box-shadow:0 12px 38px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(18px) saturate(1.18);
  -webkit-backdrop-filter:blur(18px) saturate(1.18);
}
.home-page .site-header.is-after-hero .brand,
.home-page .site-header.is-after-hero .main-nav,
.home-page .site-header.is-after-hero .header-cta,
.home-page .site-header.is-after-hero .menu-toggle{
  opacity:.58;
  transition:opacity .34s ease;
}
@media (hover:hover) and (pointer:fine){
  .home-page .site-header.is-after-hero .header-shell:hover,
  .home-page .site-header.is-after-hero .header-shell:focus-within{
    background:#111;
    border-color:rgba(255,255,255,.14);
    box-shadow:0 16px 44px rgba(0,0,0,.22);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
  .home-page .site-header.is-after-hero .header-shell:hover .brand,
  .home-page .site-header.is-after-hero .header-shell:hover .main-nav,
  .home-page .site-header.is-after-hero .header-shell:hover .header-cta,
  .home-page .site-header.is-after-hero .header-shell:hover .menu-toggle,
  .home-page .site-header.is-after-hero .header-shell:focus-within .brand,
  .home-page .site-header.is-after-hero .header-shell:focus-within .main-nav,
  .home-page .site-header.is-after-hero .header-shell:focus-within .header-cta,
  .home-page .site-header.is-after-hero .header-shell:focus-within .menu-toggle{
    opacity:1;
  }
}

/* The section itself is the same solid "wall" as the rest of the site. */
.process-section{
  position:relative;
  isolation:isolate;
  overflow:visible;
  background:#e6e4df!important;
  color:#111;
}
.process-window-clip-defs{
  position:absolute;
  width:0;
  height:0;
  overflow:hidden;
  pointer-events:none;
}
.process-video-background{
  display:none;
  position:absolute;
  z-index:0;
  inset:auto;
  overflow:hidden;
  pointer-events:none;
  background:#202225 url("assets/hero-poster.jpg") center/cover no-repeat;
  clip-path:url(#processWindowsClip);
  -webkit-clip-path:url(#processWindowsClip);
}
.process-section.process-windows-ready .process-video-background{display:block}
.process-video,.process-video-overlay{position:absolute;inset:0;width:100%;height:100%}
.process-video{
  object-fit:cover;
  object-position:center 48%;
  filter:saturate(.88) contrast(1.03) brightness(.90);
}
.process-video-overlay{
  background:linear-gradient(180deg,rgba(7,9,11,.20),rgba(7,9,11,.30));
}
.process-content{position:relative;z-index:2}
.process-section .eyebrow{color:#68645f}
.process-section .lead{color:#706d68}
.process-section h2{color:#101010}
.process-section .btn.secondary{
  color:#111;
  border-color:#d1cfca;
  background:#fff;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.process-section .btn.secondary:hover{
  color:#111;
  border-color:#bcb9b3;
  background:#f5f4f1;
}

/* The cards are literal windows. At rest they reveal the one shared video. */
.process-stage,
.process-stage:nth-child(n){
  position:relative;
  z-index:2;
  overflow:hidden;
  background:rgba(12,14,17,.18);
  color:#fff;
  border:1px solid rgba(255,255,255,.32);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.13);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  text-shadow:0 1px 8px rgba(0,0,0,.28);
  transition:
    transform .32s cubic-bezier(.2,.8,.2,1),
    background-color .32s ease,
    color .32s ease,
    border-color .32s ease,
    box-shadow .32s ease,
    text-shadow .32s ease;
}
.process-stage .process-stage-num,
.process-stage:nth-child(n) .process-stage-num{
  background:rgba(248,248,247,.88);
  color:#17191b;
  border-color:rgba(255,255,255,.62);
  box-shadow:0 4px 16px rgba(0,0,0,.08);
  text-shadow:none;
}
.process-stage p,
.process-stage:nth-child(n) p{
  color:rgba(255,255,255,.88);
  text-shadow:0 1px 7px rgba(0,0,0,.30);
}
@media (hover:hover) and (pointer:fine){
  .process-stage:hover{
    transform:translateY(-6px) scale(1.004);
    background:rgba(226,228,230,.985);
    color:#17191b;
    border-color:rgba(255,255,255,.92);
    box-shadow:0 20px 46px rgba(20,23,27,.24), inset 0 1px 0 rgba(255,255,255,.95);
    text-shadow:none;
  }
  .process-stage:hover p{
    color:#555b60;
    text-shadow:none;
  }
}

@media (max-width:620px){
  .process-stage:nth-child(n){backdrop-filter:none;-webkit-backdrop-filter:none}
}

@media (prefers-reduced-motion:reduce){
  .home-page .site-header.is-after-hero .brand,
  .home-page .site-header.is-after-hero .main-nav,
  .home-page .site-header.is-after-hero .header-cta,
  .home-page .site-header.is-after-hero .menu-toggle{transition:none!important}
}

/* ================================================================
   HF20.5 — hero video restored + slightly deeper contrast
   ================================================================ */
.site-video-overlay{
  background:
    linear-gradient(180deg,rgba(3,3,3,.38) 0%,rgba(3,3,3,.46) 56%,rgba(3,3,3,.56) 100%),
    radial-gradient(circle at 70% 35%,rgba(0,0,0,.06),rgba(0,0,0,.34) 82%);
}
.hero-video-section::before{
  background:
    linear-gradient(90deg,rgba(0,0,0,.76) 0%,rgba(0,0,0,.56) 44%,rgba(0,0,0,.20) 74%,rgba(0,0,0,.27) 100%),
    linear-gradient(180deg,rgba(0,0,0,.12) 0%,rgba(0,0,0,.03) 58%,rgba(0,0,0,.40) 100%);
}

/* ================================================================
   HF20.8 — equal process windows + calmer sales proof
   The eight process cards remain literal video windows, but no longer lift
   away from the clip mask. All desktop windows share one size, so the shared
   video layer and its SVG clip stay visually exact.
   ================================================================ */

/* Four equal windows per row on desktop. The clip mask is rebuilt from these
   real rectangles by initProcessVideoWindows(), so the video automatically
   follows the new geometry. */
.process-steps-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
}
.process-stage:nth-child(n){
  grid-column:span 1;
  min-height:226px;
  height:226px;
  padding:24px;
  border-radius:22px;
}

/* Window cards are the one deliberate exception to global "lift on hover".
   Moving a clipped window creates a visible ghost edge from the fixed video
   mask. Keep the material change, contrast and shadow, but keep geometry still. */
@media (hover:hover) and (pointer:fine){
  .process-stage:hover,
  .process-stage:nth-child(n):hover{
    transform:none;
    translate:none;
    background:rgba(218,220,222,.985);
    color:#17191b;
    border-color:rgba(188,190,193,.94);
    box-shadow:0 10px 28px rgba(20,23,27,.16), inset 0 1px 0 rgba(255,255,255,.82);
    text-shadow:none;
  }
  .process-stage:hover p,
  .process-stage:nth-child(n):hover p{
    color:#51565a;
    text-shadow:none;
  }
}

/* The sales proof starts as a darker grey glass pane so it is distinct from
   the hero and does not wash into the warm site canvas when it becomes solid. */
.hero-sales{
  background:rgba(77,82,87,.42);
  border-color:rgba(255,255,255,.34);
  box-shadow:0 18px 48px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.11);
}
@media (hover:hover) and (pointer:fine){
  .hero-sales:hover{
    background:rgba(214,215,213,.985);
    color:#111;
    box-shadow:0 18px 44px rgba(0,0,0,.22);
  }
}

@media (max-width:1080px){
  .process-steps-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .process-stage:nth-child(n){height:210px;min-height:210px}
}

@media (max-width:620px){
  .process-steps-grid{grid-template-columns:1fr}
  .process-stage:nth-child(n){height:auto;min-height:185px}
  .hero-sales{background:rgba(77,82,87,.46)}
}

/* ================================================================
   HF20.12 — restore the approved first-screen + video-window geometry.
   The wall around the eight windows uses the same continuous page canvas.
   ================================================================ */
.home-page{background:#f7f6f3!important;background-image:none!important;}
.home-page main > .section:not(.hero-video-section),
.home-page main > .section:not(.hero-video-section):nth-of-type(odd),
.home-page .home-deals-section,
.home-page .process-section{
  background:#f7f6f3!important;
  background-image:none!important;
}
.process-section{
  background:#f7f6f3!important;
}