:root {
  --hgv-red: #d10a11;
  --hgv-blue: #1683d5;
  --hgv-green: #118d48;
  --hgv-ink: #101114;
  --hgv-paper: #f5f6f7;
}

body.hgv-onas-preview {
  letter-spacing: 0;
}

body.hgv-onas-preview .hgv-anim,
body.hgv-onas-preview .hgv-rise,
body.hgv-onas-preview .hgv-in {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

body.hgv-onas-preview #panel-onas .hero.hero--image {
  box-sizing: border-box;
  height: 420px;
  min-height: 0;
  padding: 48px 5%;
  background-position: center;
}

body.hgv-onas-preview #panel-onas .hero .hero-overlay {
  background: linear-gradient(90deg, rgba(7, 9, 12, .72), rgba(7, 9, 12, .08));
}

body.hgv-onas-preview #panel-onas .hero .hero-content {
  align-self: flex-end;
  width: min(620px, 70%);
  max-width: none;
  padding: 0;
}

body.hgv-onas-preview #panel-onas .hero .hero-content h1 {
  margin: 0 0 12px;
  font-size: 56px;
  font-weight: 500;
  line-height: 1;
}

body.hgv-onas-preview #panel-onas .hero .hero-content .hero-subtitle {
  margin: 0;
  font-size: 17px;
  line-height: 1.45;
}

body.hgv-onas-preview #panel-onas .hero .hero-arrow {
  right: 5%;
  bottom: 48px;
}

body.hgv-onas-preview #panel-onas .section-intro {
  padding: 72px 5%;
}

body.hgv-onas-preview #panel-onas .section-intro__content {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(48px, 8vw, 120px);
  align-items: start;
  width: 100%;
  max-width: 1180px;
}

body.hgv-onas-preview #panel-onas .section-intro__heading {
  margin: 0;
  font-size: 46px;
  font-weight: 550;
  line-height: 1.08;
  text-align: left;
}

body.hgv-onas-preview #panel-onas .section-intro__body {
  padding: 0;
}

body.hgv-onas-preview #panel-onas .section-intro__body p {
  margin: 0 0 18px;
  color: #2a2c31;
  font-size: 17px;
  line-height: 1.55;
  text-align: left;
}

body.hgv-onas-preview #panel-onas .section-spec {
  display: block;
  min-height: 0;
  overflow: hidden;
  background: var(--hgv-ink);
}

body.hgv-onas-preview #panel-onas .section-spec__bg {
  position: relative;
  top: auto;
  height: 360px;
  background-position: center;
  background-size: cover;
}

body.hgv-onas-preview #panel-onas .section-spec__bg::before {
  background: linear-gradient(180deg, rgba(10, 12, 15, .05), rgba(10, 12, 15, .78));
}

body.hgv-onas-preview #panel-onas .section-spec__content {
  display: block;
  width: auto;
  margin: 0;
  padding: 56px 5% 64px;
}

body.hgv-onas-preview #panel-onas .section-spec__heading {
  margin: 0 0 14px;
  color: #fff;
  font-size: 46px;
  font-weight: 500;
  line-height: 1.1;
  text-align: left;
}

body.hgv-onas-preview #panel-onas .section-spec__desc {
  max-width: 760px;
  margin: 0 0 48px;
  color: rgba(255, 255, 255, .78);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.55;
  text-align: left;
}

body.hgv-onas-preview #panel-onas .section-spec__grid-wrap {
  width: 100%;
  max-width: none;
  margin: 0;
}

body.hgv-onas-preview #panel-onas .section-spec__subheading {
  margin: 0 0 12px;
  font-size: 16px;
}

body.hgv-onas-preview #panel-onas .section-spec__separator {
  max-width: none;
  margin: 0 0 24px;
}

body.hgv-onas-preview #panel-onas .section-spec__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
}

body.hgv-onas-preview #panel-onas .section-spec__tile {
  box-sizing: border-box;
  width: auto;
  min-height: 104px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 6px;
  background: rgba(255, 255, 255, .07);
  color: #fff;
}

body.hgv-onas-preview #panel-onas .section-spec__num {
  top: 14px;
  left: 16px;
  color: rgba(255, 255, 255, .48);
}

body.hgv-onas-preview #panel-onas .section-spec__label {
  font-size: 16px;
  line-height: 1.35;
}

body.hgv-onas-preview .footer,
body.hgv-onas-preview footer.footer {
  margin-top: 0;
}

/* A third content chapter: each retained preview tests a different story. */
body.hgv-onas-preview .hgv-about-third {
  padding: 84px 5% 92px;
  background: #fff;
  color: var(--hgv-ink);
}

body.hgv-onas-preview .hgv-about-third__inner {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
}

body.hgv-onas-preview .hgv-about-third__eyebrow {
  margin: 0 0 22px;
  color: #666a71;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  text-transform: uppercase;
}

body.hgv-onas-preview .hgv-about-third h2 {
  margin: 0;
  font-size: 52px;
  font-weight: 550;
  line-height: 1.05;
}

body.hgv-onas-preview .hgv-about-third h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.25;
}

body.hgv-onas-preview .hgv-about-third p {
  font-size: 17px;
  line-height: 1.55;
}

body.hgv-onas-preview .hgv-about-third__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 42px;
  padding-bottom: 8px;
  border-bottom: 1px solid currentColor;
  color: inherit;
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
}

body.hgv-onas-preview .hgv-about-third__cta span {
  font-size: 22px;
}

body.hgv-onas-v2-family .hgv-about-third--process {
  background: #fff;
}

body.hgv-onas-v2-family .hgv-about-third__heading-row {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr);
  gap: clamp(56px, 9vw, 130px);
  align-items: end;
  margin-bottom: 60px;
}

body.hgv-onas-v2-family .hgv-about-third__heading-row > p {
  margin: 0;
  color: #4a4d53;
}

body.hgv-onas-v2-family .hgv-about-process {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  border-top: 1px solid #cfd2d6;
  list-style: none;
}

body.hgv-onas-v2-family .hgv-about-process li {
  min-height: 240px;
  padding: 24px 24px 28px 0;
  border-right: 1px solid #dfe1e4;
}

body.hgv-onas-v2-family .hgv-about-process li + li {
  padding-left: 24px;
}

body.hgv-onas-v2-family .hgv-about-process li:last-child {
  border-right: 0;
}

body.hgv-onas-v2-family .hgv-about-process span {
  display: block;
  margin-bottom: 58px;
  color: var(--hgv-blue);
  font-size: 14px;
  font-weight: 700;
}

body.hgv-onas-v2-family .hgv-about-process p {
  margin: 14px 0 0;
  color: #555961;
  font-size: 15px;
}

body.hgv-onas-v10 .hgv-about-third--cycle {
  position: relative;
  overflow: hidden;
  background: #0f1012;
  color: #fff;
}

body.hgv-onas-v10 .hgv-about-third--cycle::before {
  content: '';
  position: absolute;
  top: 0;
  left: 5%;
  width: 90%;
  height: 5px;
  background: linear-gradient(90deg, var(--hgv-red) 0 33.333%, var(--hgv-blue) 33.333% 66.666%, var(--hgv-green) 66.666%);
}

body.hgv-onas-v10 .hgv-about-third__eyebrow {
  color: rgba(255, 255, 255, .55);
}

body.hgv-onas-v10 .hgv-about-third h2 {
  max-width: 850px;
  font-size: 58px;
}

body.hgv-onas-v10 .hgv-about-third__lead {
  max-width: 760px;
  margin: 26px 0 62px;
  color: rgba(255, 255, 255, .68);
  font-size: 19px;
}

body.hgv-onas-v10 .hgv-about-cycle {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid rgba(255, 255, 255, .22);
  border-bottom: 1px solid rgba(255, 255, 255, .22);
}

body.hgv-onas-v10 .hgv-about-cycle article {
  min-height: 250px;
  padding: 24px 24px 30px 0;
  border-right: 1px solid rgba(255, 255, 255, .16);
}

body.hgv-onas-v10 .hgv-about-cycle article + article {
  padding-left: 24px;
}

body.hgv-onas-v10 .hgv-about-cycle article:last-child {
  border-right: 0;
}

body.hgv-onas-v10 .hgv-about-cycle span {
  display: block;
  margin-bottom: 58px;
  color: rgba(255, 255, 255, .42);
  font-size: 14px;
  font-weight: 700;
}

body.hgv-onas-v10 .hgv-about-cycle p {
  margin: 14px 0 0;
  color: rgba(255, 255, 255, .62);
  font-size: 15px;
}

body.hgv-onas-v10 .hgv-about-third__closing {
  display: flex;
  justify-content: space-between;
  gap: 48px;
  align-items: flex-end;
  margin-top: 38px;
}

body.hgv-onas-v10 .hgv-about-third__closing p {
  max-width: 680px;
  margin: 0;
  font-size: 22px;
  line-height: 1.4;
}

body.hgv-onas-v10 .hgv-about-third__closing .hgv-about-third__cta {
  flex: 0 0 auto;
  margin-top: 0;
}

/* 1. Compact cinematic: the closest evolution of the current page. */
body.hgv-onas-v1 #panel-onas .hero.hero--image { height: 400px; }
body.hgv-onas-v1 #panel-onas .section-intro__heading { border-top: 4px solid var(--hgv-red); padding-top: 22px; }

/* 2. Bright editorial split with product photography. */
body.hgv-onas-v2-family #panel-onas .hero.hero--image {
  height: 400px;
  background-color: #f3f4f5;
  background-image: url('/hgv-design-previews/hgv-pallet-factory.jpg') !important;
  background-position: right center;
  background-size: 58% 100%;
  background-repeat: no-repeat;
}
body.hgv-onas-v2-family #panel-onas .hero .hero-overlay { background: linear-gradient(90deg, #f3f4f5 0 43%, rgba(243,244,245,.96) 47%, transparent 66%); }
body.hgv-onas-v2-family #panel-onas .hero .hero-content { align-self: center; width: 42%; color: var(--hgv-ink); }
body.hgv-onas-v2-family #panel-onas .hero .hero-content h1,
body.hgv-onas-v2-family #panel-onas .hero .hero-content .hero-subtitle { color: var(--hgv-ink); }
body.hgv-onas-v2-family #panel-onas .hero .hero-arrow { color: var(--hgv-ink); }
body.hgv-onas-v2-family #panel-onas .section-intro { background: #fff; }
body.hgv-onas-v2-family #panel-onas .section-intro__heading { font-size: 52px; }
body.hgv-onas-v2-family #panel-onas .section-spec { position: relative; min-height: 720px; background: #f2f3f4; }
body.hgv-onas-v2-family #panel-onas .section-spec__bg { position: absolute; inset: 0 auto 0 0; width: 42%; height: 100%; }
body.hgv-onas-v2-family #panel-onas .section-spec__content { width: 58%; margin-left: 42%; padding: 64px 5%; }
body.hgv-onas-v2-family #panel-onas .section-spec__heading,
body.hgv-onas-v2-family #panel-onas .section-spec__subheading,
body.hgv-onas-v2-family #panel-onas .section-spec__tile { color: var(--hgv-ink); }
body.hgv-onas-v2-family #panel-onas .section-spec__desc { color: #4a4d53; }
body.hgv-onas-v2-family #panel-onas .section-spec__separator { background: #c8cbd0; }
body.hgv-onas-v2-family #panel-onas .section-spec__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.hgv-onas-v2-family #panel-onas .section-spec__tile { min-height: 88px; border-color: #d5d8dc; background: #fff; }
body.hgv-onas-v2-family #panel-onas .section-spec__num { color: #777b83; }

/* 3. Full-width photo from IMG_2049, with a restrained text overlay. */
body.hgv-onas-v3 #panel-onas .hero.hero--image {
  height: 420px;
  background-color: #151515;
  background-image: url('/hgv-design-previews/hgv-onas-img-2049.webp') !important;
  background-position: center 56%;
  background-size: cover;
}
body.hgv-onas-v3 #panel-onas .hero .hero-overlay {
  background: linear-gradient(90deg, rgba(7, 9, 12, .78) 0%, rgba(7, 9, 12, .48) 38%, rgba(7, 9, 12, .08) 76%);
}
body.hgv-onas-v3 #panel-onas .hero .hero-content {
  align-self: flex-end;
  width: min(620px, 58%);
  color: #fff;
}
body.hgv-onas-v3 #panel-onas .hero .hero-content h1,
body.hgv-onas-v3 #panel-onas .hero .hero-content .hero-subtitle { color: #fff; }
body.hgv-onas-v3 #panel-onas .hero .hero-arrow { display: block; color: #fff; }

/* 4. Editorial band: title on black, clear panoramic image below. */
body.hgv-onas-v4 #panel-onas .hero.hero--image {
  position: relative;
  height: 500px;
  padding: 0;
  background-color: #101114;
  background-position: center bottom;
  background-size: 100% 310px;
  background-repeat: no-repeat;
}
body.hgv-onas-v4 #panel-onas .hero .hero-overlay {
  background: linear-gradient(180deg, #101114 0 190px, transparent 190px);
}
body.hgv-onas-v4 #panel-onas .hero .hero-content {
  position: absolute;
  top: 94px;
  left: 5%;
  width: 90%;
  color: #fff;
}
body.hgv-onas-v4 #panel-onas .hero .hero-content h1 {
  display: inline-block;
  margin-right: 34px;
  font-size: 52px;
}
body.hgv-onas-v4 #panel-onas .hero .hero-content .hero-subtitle {
  display: inline-block;
  color: rgba(255,255,255,.7);
}
body.hgv-onas-v4 #panel-onas .hero .hero-arrow { display: none; }

/* 5. Product editorial: large copy, compact centered story. */
body.hgv-onas-v5 #panel-onas .hero.hero--image { height: 440px; background-position: center 58%; }
body.hgv-onas-v5 #panel-onas .hero .hero-content { width: 52%; }
body.hgv-onas-v5 #panel-onas .hero .hero-content h1 { font-size: 68px; }
body.hgv-onas-v5 #panel-onas .section-intro__content { display: block; max-width: 980px; }
body.hgv-onas-v5 #panel-onas .section-intro__heading { max-width: 900px; margin: 0 auto 34px; font-size: 54px; text-align: center; }
body.hgv-onas-v5 #panel-onas .section-intro__body { columns: 2; column-gap: 64px; }
body.hgv-onas-v5 #panel-onas .section-intro__body p { break-inside: avoid; }
body.hgv-onas-v5 #panel-onas .section-spec__bg { height: 420px; background-image: url('/hgv-design-previews/hgv-pallet-stack.jpg') !important; }
body.hgv-onas-v5 #panel-onas .section-spec__heading,
body.hgv-onas-v5 #panel-onas .section-spec__desc { text-align: center; margin-left: auto; margin-right: auto; }

/* 6. Slim documentary banner with a dense two-column lower section. */
body.hgv-onas-v6 #panel-onas .hero.hero--image {
  height: 370px;
  background-image: url('../assets/onas6-hero.webp') !important;
  background-position: center;
}
body.hgv-onas-v6 #panel-onas .hero .hero-overlay {
  background: linear-gradient(180deg, rgba(8, 9, 11, .32), rgba(8, 9, 11, .58));
}
body.hgv-onas-v6 #panel-onas .hero .hero-content {
  align-self: center;
  width: 90%;
  margin: 0 auto;
  color: #fff;
  text-align: center;
}
body.hgv-onas-v6 #panel-onas .hero .hero-content h1 {
  color: #fff;
  font-size: 52px;
  text-align: center;
}

body.hgv-onas-v6 #panel-onas .hero .hero-content .hero-subtitle {
  width: 100%;
  margin: 10px 0 0;
  color: rgba(255, 255, 255, .82);
  font-size: 15px;
  text-align: center;
}
body.hgv-onas-v6 #panel-onas .hero .hero-arrow { display: none; }
body.hgv-onas-v6 #panel-onas .section-intro { padding-top: 52px; padding-bottom: 52px; background: #fff; }
body.hgv-onas-v6 #panel-onas .section-intro__heading { font-size: 44px; }
body.hgv-onas-v6 #panel-onas .section-spec { position: relative; min-height: 650px; }
body.hgv-onas-v6 #panel-onas .section-spec__bg {
  position: absolute;
  inset: 0 0 0 auto;
  width: 48%;
  height: 100%;
  background-position: 65% center;
}
body.hgv-onas-v6 #panel-onas .section-spec__content { box-sizing: border-box; width: 52%; margin-left: 0; padding: 56px 4% 56px 5%; }
body.hgv-onas-v6 #panel-onas .section-spec__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.hgv-onas-v6 #panel-onas .section-spec__tile { min-height: 86px; }

/* 7. HGV red accent with architectural typography. */
body.hgv-onas-v7 #panel-onas .hero.hero--image {
  height: 370px;
  background-image: url('/hgv-design-previews/hgv-o-nas-hero-litery-3d.jpg') !important;
  background-position: center 42%;
}
body.hgv-onas-v7 #panel-onas .hero .hero-overlay { background: linear-gradient(90deg, rgba(25,0,2,.86), rgba(20,7,8,.15)); }
body.hgv-onas-v7 #panel-onas .hero .hero-content { padding-left: 26px; border-left: 6px solid var(--hgv-red); }
body.hgv-onas-v7 #panel-onas .section-intro__heading { color: #9f080e; font-size: 50px; }
body.hgv-onas-v7 #panel-onas .section-spec { background: #150f10; }
body.hgv-onas-v7 #panel-onas .section-spec__bg { height: 320px; }
body.hgv-onas-v7 #panel-onas .section-spec__tile { border-color: rgba(209,10,17,.45); background: rgba(209,10,17,.08); }
body.hgv-onas-v7 #panel-onas .section-spec__num { color: #ff686d; }

/* 8. HGV blue technical band. */
body.hgv-onas-v8 #panel-onas .hero.hero--image {
  height: 380px;
  background-image: url('/hgv-design-previews/hgv-pallet-factory.jpg') !important;
}
body.hgv-onas-v8 #panel-onas .hero .hero-overlay { background: linear-gradient(90deg, rgba(0,37,66,.84), rgba(5,32,49,.18)); }
body.hgv-onas-v8 #panel-onas .section-intro { background: #edf6fc; }
body.hgv-onas-v8 #panel-onas .section-intro__heading { color: #0b568d; }
body.hgv-onas-v8 #panel-onas .section-spec { background: #08243a; }
body.hgv-onas-v8 #panel-onas .section-spec__bg { height: 300px; }
body.hgv-onas-v8 #panel-onas .section-spec__tile { border-color: rgba(22,131,213,.42); background: rgba(22,131,213,.1); }
body.hgv-onas-v8 #panel-onas .section-spec__num { color: #71b9ef; }

/* 9. HGV green, focused on material and responsible production. */
body.hgv-onas-v9 #panel-onas .hero.hero--image {
  height: 400px;
  background-image: url('/hgv-design-previews/hgv-o-nas-hero-szyld.jpg') !important;
  background-position: center 48%;
}
body.hgv-onas-v9 #panel-onas .hero .hero-overlay { background: linear-gradient(90deg, rgba(0,45,23,.8), rgba(5,31,19,.12)); }
body.hgv-onas-v9 #panel-onas .section-intro__heading { color: #0b6734; }
body.hgv-onas-v9 #panel-onas .section-intro__body { padding-top: 8px; border-top: 2px solid var(--hgv-green); }
body.hgv-onas-v9 #panel-onas .section-spec { background: #0c2619; }
body.hgv-onas-v9 #panel-onas .section-spec__bg { height: 340px; filter: saturate(.82); }
body.hgv-onas-v9 #panel-onas .section-spec__tile { border-color: rgba(35,161,91,.38); background: rgba(17,141,72,.09); }
body.hgv-onas-v9 #panel-onas .section-spec__num { color: #5fc78c; }

/* 10. Monochrome premium with a single tri-colour signature. */
body.hgv-onas-v10 #panel-onas .hero.hero--image { height: 410px; filter: grayscale(1); }
body.hgv-onas-v10 #panel-onas .hero .hero-overlay { background: rgba(8,9,11,.52); }
body.hgv-onas-v10 #panel-onas .hero .hero-content { align-self: center; width: 100%; text-align: center; }
body.hgv-onas-v10 #panel-onas .hero .hero-content::before { content: ''; display: block; width: 96px; height: 5px; margin: 0 auto 24px; background: linear-gradient(90deg, var(--hgv-red) 0 33%, var(--hgv-blue) 33% 66%, var(--hgv-green) 66%); }
body.hgv-onas-v10 #panel-onas .hero .hero-arrow { display: none; }
body.hgv-onas-v10 #panel-onas .section-intro__content { grid-template-columns: 1fr 1fr; }
body.hgv-onas-v10 #panel-onas .section-intro__heading { font-size: 50px; }
body.hgv-onas-v10 #panel-onas .section-spec__bg { height: 300px; filter: grayscale(1); }
body.hgv-onas-v10 #panel-onas .section-spec__tile { border-radius: 0; background: #f1f2f3; color: var(--hgv-ink); }
body.hgv-onas-v10 #panel-onas .section-spec__num { color: #686c73; }

/* Shared update: use the real homepage "Poznaj nas" photo in specialization. */
body.hgv-onas-preview #panel-onas .section-spec__bg {
  background-image: url('../assets/poznaj-nas.webp') !important;
  background-position: center;
}

body.hgv-onas-v6 #panel-onas .section-spec__bg {
  background-position: 65% center;
}

/* White navigation variants: colour logo and dark controls. */
body.hgv-onas-v5 header#header.header,
body.hgv-onas-v6 header#header.header {
  background: #fff;
  color: var(--hgv-ink);
}

body.hgv-onas-v5 header#header.header::before,
body.hgv-onas-v6 header#header.header::before {
  display: none;
}

body.hgv-onas-v5 .menu-toggle,
body.hgv-onas-v6 .menu-toggle,
body.hgv-onas-v5 .header-account,
body.hgv-onas-v6 .header-account {
  color: var(--hgv-ink) !important;
}

body.hgv-onas-v5 .menu-toggle:hover,
body.hgv-onas-v6 .menu-toggle:hover,
body.hgv-onas-v5 .header-account:hover,
body.hgv-onas-v6 .header-account:hover {
  color: var(--hgv-ink);
  background: rgba(14, 14, 19, .06);
}

body.hgv-onas-v5 .header-lang-switcher .footer-lang-switch,
body.hgv-onas-v6 .header-lang-switcher .footer-lang-switch {
  border-color: rgba(14, 14, 19, .22);
  background: #fff;
}

body.hgv-onas-v5 .header-lang-switcher .footer-lang-option,
body.hgv-onas-v6 .header-lang-switcher .footer-lang-option {
  color: #4a4d53 !important;
}

body.hgv-onas-v5 .header-lang-switcher .footer-lang-option.is-active,
body.hgv-onas-v6 .header-lang-switcher .footer-lang-option.is-active {
  color: #fff !important;
  background: var(--hgv-ink) !important;
}

/* 5. White editorial hero with colour HGV signature. */
body.hgv-onas-v5 #panel-onas .hero.hero--image {
  height: 350px;
  background: #f1f2f3 !important;
}

body.hgv-onas-v5 #panel-onas .hero .hero-overlay { display: none; }

body.hgv-onas-v5 #panel-onas .hero .hero-content {
  align-self: center;
  width: 100%;
  color: var(--hgv-ink);
  text-align: center;
}

body.hgv-onas-v5 #panel-onas .hero .hero-content::before {
  content: '';
  display: block;
  width: 84px;
  height: 4px;
  margin: 0 auto 22px;
  background: linear-gradient(90deg, var(--hgv-red) 0 33.333%, var(--hgv-blue) 33.333% 66.666%, var(--hgv-green) 66.666%);
}

body.hgv-onas-v5 #panel-onas .hero .hero-content h1,
body.hgv-onas-v5 #panel-onas .hero .hero-content .hero-subtitle { color: var(--hgv-ink); }
body.hgv-onas-v5 #panel-onas .hero .hero-arrow { display: none; }
body.hgv-onas-v5 #panel-onas .section-intro__content { display: block; max-width: 1040px; }
body.hgv-onas-v5 #panel-onas .section-intro__heading { max-width: 900px; margin: 0 auto 38px; text-align: center; }
body.hgv-onas-v5 #panel-onas .section-intro__body { columns: 2; column-gap: 64px; }
body.hgv-onas-v5 #panel-onas .section-intro__body p { break-inside: avoid; }

/* 6. White navigation above a bright production photograph. */
body.hgv-onas-v6 #panel-onas .hero.hero--image {
  height: 440px;
  background-image: url('/hgv-design-previews/hgv-pallet-factory.jpg') !important;
  background-position: center 58%;
  background-size: cover;
}

body.hgv-onas-v6 #panel-onas .hero .hero-overlay {
  top: 90px;
  background: linear-gradient(180deg, rgba(9, 11, 14, .08), rgba(9, 11, 14, .68));
}

body.hgv-onas-v6 #panel-onas .hero .hero-content {
  align-self: flex-end;
  width: 100%;
  color: #fff;
  text-align: center;
}

body.hgv-onas-v6 #panel-onas .hero .hero-content h1,
body.hgv-onas-v6 #panel-onas .hero .hero-content .hero-subtitle { color: #fff; }
body.hgv-onas-v6 #panel-onas .hero .hero-arrow { display: none; }

/* 7. Full photographic hero, white logo, strong centred title. */
body.hgv-onas-v7 #panel-onas .hero.hero--image {
  height: 430px;
  background-image: url('/hgv-design-previews/hgv-onas-img-2049.webp') !important;
  background-position: center 56%;
  background-size: cover;
}

body.hgv-onas-v7 #panel-onas .hero .hero-overlay {
  background: rgba(8, 10, 12, .54);
}

body.hgv-onas-v7 #panel-onas .hero .hero-content {
  align-self: center;
  width: 100%;
  color: #fff;
  text-align: center;
}

body.hgv-onas-v7 #panel-onas .hero .hero-content h1,
body.hgv-onas-v7 #panel-onas .hero .hero-content .hero-subtitle { color: #fff; }
body.hgv-onas-v7 #panel-onas .hero .hero-arrow { display: none; }
body.hgv-onas-v7 #panel-onas .section-intro__heading { padding-top: 22px; border-top: 4px solid var(--hgv-red); }

/* 8. Compact documentary hero using the current HGV yard image. */
body.hgv-onas-v8 #panel-onas .hero.hero--image {
  height: 380px;
  background-image: url('/wp-content/themes/blankslate/assets/onas-hh.webp') !important;
  background-position: center 60%;
  background-size: cover;
}

body.hgv-onas-v8 #panel-onas .hero .hero-overlay {
  background: linear-gradient(180deg, rgba(8,10,12,.2), rgba(8,10,12,.7));
}

body.hgv-onas-v8 #panel-onas .hero .hero-content {
  align-self: center;
  width: 100%;
  color: #fff;
  text-align: center;
}

body.hgv-onas-v8 #panel-onas .hero .hero-content h1,
body.hgv-onas-v8 #panel-onas .hero .hero-content .hero-subtitle { color: #fff; }
body.hgv-onas-v8 #panel-onas .hero .hero-arrow { display: none; }
body.hgv-onas-v8 #panel-onas .section-intro { padding-top: 58px; padding-bottom: 58px; }
body.hgv-onas-v8 #panel-onas .section-intro__heading { font-size: 48px; }

/* The title must be centred against the viewport, not an inherited flex column. */
body.hgv-onas-v5 #panel-onas .hero .hero-content,
body.hgv-onas-v6 #panel-onas .hero .hero-content,
body.hgv-onas-v7 #panel-onas .hero .hero-content,
body.hgv-onas-v8 #panel-onas .hero .hero-content {
  position: absolute;
  top: 58%;
  left: 50%;
  align-items: center;
  width: 90%;
  max-width: none;
  padding-left: 0;
  border-left: 0;
  text-align: center;
  transform: translate(-50%, -50%);
}

body.hgv-onas-v6 #panel-onas .hero .hero-content { top: 62%; }

body.hgv-onas-v5 #panel-onas .hero .hero-content h1,
body.hgv-onas-v6 #panel-onas .hero .hero-content h1,
body.hgv-onas-v7 #panel-onas .hero .hero-content h1,
body.hgv-onas-v8 #panel-onas .hero .hero-content h1,
body.hgv-onas-v5 #panel-onas .hero .hero-content .hero-subtitle,
body.hgv-onas-v6 #panel-onas .hero .hero-content .hero-subtitle,
body.hgv-onas-v7 #panel-onas .hero .hero-content .hero-subtitle,
body.hgv-onas-v8 #panel-onas .hero .hero-content .hero-subtitle {
  width: 100%;
  text-align: center;
}

@media (max-width: 900px) {
  body.hgv-onas-preview #panel-onas .section-intro__content,
  body.hgv-onas-v4 #panel-onas .section-intro__content,
  body.hgv-onas-v10 #panel-onas .section-intro__content {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  body.hgv-onas-preview #panel-onas .section-spec__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.hgv-onas-v2-family .hgv-about-process,
  body.hgv-onas-v10 .hgv-about-cycle {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.hgv-onas-v2-family .hgv-about-process li:nth-child(2),
  body.hgv-onas-v10 .hgv-about-cycle article:nth-child(2) {
    border-right: 0;
  }
}

@media (max-width: 760px) {
  body.hgv-onas-preview #panel-onas .hero.hero--image,
  body.hgv-onas-v1 #panel-onas .hero.hero--image,
  body.hgv-onas-v2-family #panel-onas .hero.hero--image,
  body.hgv-onas-v3 #panel-onas .hero.hero--image,
  body.hgv-onas-v4 #panel-onas .hero.hero--image,
  body.hgv-onas-v5 #panel-onas .hero.hero--image,
  body.hgv-onas-v6 #panel-onas .hero.hero--image,
  body.hgv-onas-v7 #panel-onas .hero.hero--image,
  body.hgv-onas-v8 #panel-onas .hero.hero--image,
  body.hgv-onas-v9 #panel-onas .hero.hero--image,
  body.hgv-onas-v10 #panel-onas .hero.hero--image {
    height: 300px;
    min-height: 0;
    padding: 36px 20px;
    background-position: center;
    background-size: cover;
  }

  body.hgv-onas-v2-family #panel-onas .hero .hero-overlay,
  body.hgv-onas-preview #panel-onas .hero .hero-overlay {
    background: linear-gradient(180deg, rgba(7,9,12,.12), rgba(7,9,12,.76));
  }

  body.hgv-onas-preview #panel-onas .hero .hero-content,
  body.hgv-onas-v2-family #panel-onas .hero .hero-content,
  body.hgv-onas-v5 #panel-onas .hero .hero-content,
  body.hgv-onas-v10 #panel-onas .hero .hero-content {
    align-self: flex-end;
    width: 100%;
    color: #fff;
    text-align: left;
  }

  body.hgv-onas-v2-family #panel-onas .hero .hero-content h1,
  body.hgv-onas-v2-family #panel-onas .hero .hero-content .hero-subtitle { color: #fff; }
  body.hgv-onas-v10 #panel-onas .hero .hero-content::before { margin: 0 0 18px; }

  body.hgv-onas-preview #panel-onas .hero .hero-content h1,
  body.hgv-onas-v3 #panel-onas .hero .hero-content h1,
  body.hgv-onas-v5 #panel-onas .hero .hero-content h1 {
    margin-bottom: 8px;
    font-size: 42px;
  }

  body.hgv-onas-preview #panel-onas .hero .hero-content .hero-subtitle { font-size: 15px; }
  body.hgv-onas-preview #panel-onas .hero .hero-arrow { display: none; }

  body.hgv-onas-v6 #panel-onas .hero .hero-content {
    align-self: center;
    text-align: center;
  }

  body.hgv-onas-v6 #panel-onas .hero .hero-content h1 {
    font-size: 40px;
    text-align: center;
  }

  body.hgv-onas-preview #panel-onas .section-intro {
    padding: 46px 20px;
  }

  body.hgv-onas-preview #panel-onas .section-intro__heading,
  body.hgv-onas-v2-family #panel-onas .section-intro__heading,
  body.hgv-onas-v4 #panel-onas .section-intro__heading,
  body.hgv-onas-v5 #panel-onas .section-intro__heading,
  body.hgv-onas-v7 #panel-onas .section-intro__heading,
  body.hgv-onas-v10 #panel-onas .section-intro__heading {
    font-size: 34px;
  }

  body.hgv-onas-preview #panel-onas .section-intro__body,
  body.hgv-onas-v5 #panel-onas .section-intro__body {
    columns: 1;
  }

  body.hgv-onas-preview #panel-onas .section-intro__body p { font-size: 16px; }

  body.hgv-onas-preview #panel-onas .section-spec,
  body.hgv-onas-v2-family #panel-onas .section-spec,
  body.hgv-onas-v6 #panel-onas .section-spec {
    min-height: 0;
  }

  body.hgv-onas-preview #panel-onas .section-spec__bg,
  body.hgv-onas-v2-family #panel-onas .section-spec__bg,
  body.hgv-onas-v6 #panel-onas .section-spec__bg {
    position: relative;
    inset: auto;
    width: 100%;
    height: 240px;
  }

  body.hgv-onas-preview #panel-onas .section-spec__content,
  body.hgv-onas-v2-family #panel-onas .section-spec__content,
  body.hgv-onas-v6 #panel-onas .section-spec__content {
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 42px 20px 48px;
  }

  body.hgv-onas-preview #panel-onas .section-spec__heading { font-size: 34px; }
  body.hgv-onas-preview #panel-onas .section-spec__desc { margin-bottom: 32px; font-size: 16px; }
  body.hgv-onas-preview #panel-onas .section-spec__grid,
  body.hgv-onas-v2-family #panel-onas .section-spec__grid,
  body.hgv-onas-v6 #panel-onas .section-spec__grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  body.hgv-onas-preview #panel-onas .section-spec__grid-wrap {
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 0;
    background: transparent;
    border-radius: 0;
  }

  body.hgv-onas-preview #panel-onas .section-spec__tile {
    min-height: 72px;
    padding: 14px 16px;
  }

  body.hgv-onas-preview .hgv-about-third {
    padding: 52px 20px 60px;
  }

  body.hgv-onas-preview .hgv-about-third h2,
  body.hgv-onas-v10 .hgv-about-third h2 {
    font-size: 36px;
  }

  body.hgv-onas-v2-family .hgv-about-third__heading-row {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 42px;
  }

  body.hgv-onas-v2-family .hgv-about-process,
  body.hgv-onas-v10 .hgv-about-cycle {
    grid-template-columns: 1fr;
  }

  body.hgv-onas-v2-family .hgv-about-process li,
  body.hgv-onas-v2-family .hgv-about-process li + li,
  body.hgv-onas-v10 .hgv-about-cycle article,
  body.hgv-onas-v10 .hgv-about-cycle article + article {
    min-height: 0;
    padding: 22px 0 26px;
    border-right: 0;
    border-bottom: 1px solid rgba(128, 132, 138, .28);
  }

  body.hgv-onas-v2-family .hgv-about-process span,
  body.hgv-onas-v10 .hgv-about-cycle span {
    margin-bottom: 24px;
  }

  body.hgv-onas-v10 .hgv-about-third__lead {
    margin: 22px 0 42px;
    font-size: 17px;
  }

  body.hgv-onas-v10 .hgv-about-third__closing {
    display: block;
    margin-top: 32px;
  }

  body.hgv-onas-v10 .hgv-about-third__closing p {
    font-size: 19px;
  }

  body.hgv-onas-v10 .hgv-about-third__closing .hgv-about-third__cta {
    margin-top: 30px;
  }

  body.hgv-onas-v4 #panel-onas .hero.hero--image {
    height: 360px;
    padding: 0;
    background-position: center bottom;
    background-size: 100% 210px;
  }

  body.hgv-onas-v4 #panel-onas .hero .hero-overlay {
    background: linear-gradient(180deg, #101114 0 150px, transparent 150px);
  }

  body.hgv-onas-v4 #panel-onas .hero .hero-content {
    top: 70px;
    left: 20px;
    width: calc(100% - 40px);
  }

  body.hgv-onas-v4 #panel-onas .hero .hero-content h1 {
    display: block;
    margin: 0 0 6px;
    font-size: 36px;
  }

  body.hgv-onas-v4 #panel-onas .hero .hero-content .hero-subtitle {
    display: block;
    font-size: 14px;
  }

  body.hgv-onas-v5 header#header.header .header-right,
  body.hgv-onas-v6 header#header.header .header-right {
    background: #fff;
  }

  body.hgv-onas-v5 header#header.header .header-account,
  body.hgv-onas-v6 header#header.header .header-account,
  body.hgv-onas-v5 header#header.header .header-account svg,
  body.hgv-onas-v6 header#header.header .header-account svg {
    color: var(--hgv-ink);
    stroke: var(--hgv-ink);
  }

  body.hgv-onas-v5 #panel-onas .hero.hero--image,
  body.hgv-onas-v6 #panel-onas .hero.hero--image {
    height: 360px;
    padding-top: 112px;
  }

  body.hgv-onas-v7 #panel-onas .hero.hero--image,
  body.hgv-onas-v8 #panel-onas .hero.hero--image {
    height: 340px;
  }

  body.hgv-onas-v5 #panel-onas .hero .hero-content,
  body.hgv-onas-v6 #panel-onas .hero .hero-content,
  body.hgv-onas-v7 #panel-onas .hero .hero-content,
  body.hgv-onas-v8 #panel-onas .hero .hero-content {
    align-self: center;
    width: 100%;
    text-align: center;
  }

  body.hgv-onas-v5 #panel-onas .section-intro__body {
    columns: 1;
  }
}

/* Final onas6 direction. Keep this after the historical preview rules. */
body.hgv-onas-v6 header#header.header {
  border-bottom: 1px solid #d9dbdf;
  box-shadow: 0 2px 8px rgba(16, 17, 20, .06);
}

body.hgv-onas-v6 header#header.header .menu-toggle,
body.hgv-onas-v6 header#header.header .menu-toggle svg {
  color: #101114 !important;
}

body.hgv-onas-v6 header#header.header .menu-toggle svg > path {
  fill: #101114 !important;
}

body.hgv-onas-v6 header#header.header .menu-toggle .menu-line {
  stroke: #101114 !important;
}

body.hgv-onas-v6 header#header.header .menu-toggle:hover {
  background: rgba(16, 17, 20, .06);
}

body.hgv-onas-v6 #panel-onas .hero.hero--image {
  height: 280px;
  padding: 0;
  background-image: url('../assets/onas6-hero.webp') !important;
  background-position: center;
  background-size: cover;
}

body.hgv-onas-v6 #panel-onas .hero .hero-overlay {
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 9, 11, .32), rgba(8, 9, 11, .58));
}

body.hgv-onas-v6 #panel-onas .hero .hero-content {
  position: absolute;
  top: 50%;
  left: 50%;
  align-self: center;
  width: 90%;
  max-width: none;
  margin: 0;
  padding: 0;
  color: #fff;
  text-align: center;
  transform: translate(-50%, -50%);
}

body.hgv-onas-v6 #panel-onas .hero .hero-content h1 {
  width: 100%;
  margin: 0;
  color: #fff;
  font-size: 52px;
  text-align: center;
}

body.hgv-onas-v6 #panel-onas .section-intro {
  background: #fff;
}

@media (max-width: 760px) {
  body.hgv-onas-v6 #panel-onas .hero.hero--image {
    height: 280px;
    padding: 0;
    background-position: 48% center;
  }

  body.hgv-onas-v6 #panel-onas .hero .hero-content {
    top: 50%;
    width: calc(100% - 40px);
    text-align: center;
  }

  body.hgv-onas-v6 #panel-onas .hero .hero-content h1 {
    font-size: 40px;
    text-align: center;
  }
}