/* ==========================================================================
   HOPS Entertainment — brand theme
   Loaded after main.css. Retokenises the Renev template to the HOPS palette
   and adds the few components the template does not ship with.
   ========================================================================== */

:root {
  /* --- Brand palette (sampled from the HOPS portfolio deck) --- */
  --hops-orange: #ED702D;        /* fills, large display type */
  --hops-orange-deep: #B54A12;   /* small text on cream/white — 5.15:1 */
  --hops-orange-light: #F79C5E;  /* small text on navy — 5.24:1 */
  --hops-orange-soft: #FBE6D6;
  --hops-ink-soft: #5C679B;      /* muted body text on light — 5.43:1 */
  --hops-navy: #283773;
  --hops-ink-on-orange: #1C2755;  /* button labels on orange fill — 4.73:1 */
  --hops-orange-figure: #D85E1B;  /* big numerals on light — 3.68:1 */
  --hops-navy-deep: #1C2755;
  --hops-cream: #FEFBF7;
  --hops-line: #EFE6DA;

  /* --- Retokenise the template ---
     The template drives nearly everything off these, so overriding them
     rethemes the whole site without touching main.css. */
  --ztc-text-text-2: var(--hops-orange);
  --ztc-text-text-4: var(--hops-navy);
  --ztc-text-text-5: rgba(40, 55, 115, 0.9);
  --ztc-text-text-6: var(--hops-orange);
  --ztc-text-text-7: var(--hops-navy);
  --ztc-text-text-8: var(--hops-orange);
  --ztc-text-text-9: var(--hops-orange);
  --ztc-text-text-10: var(--hops-navy);
  --ztc-text-text-11: var(--hops-orange-deep);

  --ztc-bg-bg-2: var(--hops-orange);
  --ztc-bg-bg-4: var(--hops-orange);
  --ztc-bg-bg-5: var(--hops-navy);
  --ztc-bg-bg-6: var(--hops-navy-deep);
  --ztc-bg-bg-7: var(--hops-orange);
  --ztc-bg-bg-8: var(--hops-orange);
  --ztc-bg-bg-9: var(--hops-navy);
  --ztc-bg-bg-10: linear-gradient(90deg, #ED702D 0%, #F6A15C 100%);

  --ztc-border-border-1: var(--hops-line);
  --ztc-border-border-2: var(--hops-line);
  --ztc-border-border-3: var(--hops-orange);
}

body {
  background: var(--hops-cream);
  color: var(--hops-navy);
}

/* The template paints the page shell with the same token it uses for dark
   sections, so the body needs its own rule to stay cream. */
body.body-bg1,
body.body-bg2 {
  background: var(--hops-cream);
}

/* --------------------------------------------------------------------------
   Header — the template assumes a dark hero behind a transparent header;
   the HOPS hero is cream, so the nav has to read dark.
   -------------------------------------------------------------------------- */
.vl-transparent-header .vl-main-menu > nav > ul > li > a {
  color: var(--hops-navy);
}
.vl-transparent-header .vl-main-menu > nav > ul > li > a:hover,
.vl-main-menu > nav > ul > li.active > a {
  color: var(--hops-orange-deep);
}
.vl-logo img,
.vl-offcanvas-logo img {
  width: auto;
  height: 52px;
}
.footer-logo1 img {
  width: auto;
  height: 58px;
}
#vl-header-sticky.header-sticky {
  background: var(--hops-cream);
  box-shadow: 0 6px 24px rgba(40, 55, 115, 0.08);
}

/* Indonesian labels are longer than the template's English ones, so the menu
   needs tighter tracking to stay on one line. */
.homepage1-menu .vl-main-menu ul > li > a {
  font-size: 16px;
  padding: 0 11px;
  white-space: nowrap;
}
@media (min-width: 1200px) {
  .homepage1-menu .vl-main-menu ul > li > a {
    font-size: 17px;
    padding: 0 14px;
  }
}

/* Inner pages open on a navy page header, so the nav has to invert there —
   and flip back once the sticky cream bar kicks in. */
.hops-logo-light { display: none; }

.hops-dark-head .vl-logo .hops-logo-dark { display: none; }
.hops-dark-head .vl-logo .hops-logo-light { display: inline-block; }
.hops-dark-head .vl-transparent-header .vl-main-menu > nav > ul > li > a {
  color: var(--hops-cream);
}
.hops-dark-head .vl-transparent-header .vl-main-menu > nav > ul > li > a:hover {
  color: var(--hops-orange);
}

.hops-dark-head .header-sticky .vl-logo .hops-logo-dark { display: inline-block; }
.hops-dark-head .header-sticky .vl-logo .hops-logo-light { display: none; }
.hops-dark-head .header-sticky .vl-main-menu > nav > ul > li > a {
  color: var(--hops-navy);
}
.hops-dark-head .header-sticky .vl-main-menu > nav > ul > li > a:hover {
  color: var(--hops-orange-deep);
}

/* The offcanvas toggle also sits on navy on inner pages. */
.hops-dark-head .vl-offcanvas-toggle {
  color: var(--hops-cream);
}
.hops-dark-head .header-sticky .vl-offcanvas-toggle {
  color: var(--hops-navy);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.vl-btn1 {
  background: var(--hops-orange);
  color: var(--hops-ink-on-orange);
  border-radius: 10px;
}
.vl-btn1:hover {
  background: var(--hops-navy);
  color: var(--hops-cream);
}

/* Button pairs wrap instead of running off the side on narrow screens. */
.hops-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.hops-btns--center {
  justify-content: center;
}
.vl-btn1--ghost {
  background: transparent;
  border: 2px solid var(--hops-navy);
}
.hops-section--navy .vl-btn1--ghost,
.hops-pagehead .vl-btn1--ghost {
  border-color: var(--hops-cream);
  color: var(--hops-cream);
}
.vl-btn1--ghost:hover {
  background: var(--hops-navy);
  color: var(--hops-cream);
}
.hops-section--navy .vl-btn1--ghost:hover {
  background: var(--hops-cream);
  color: var(--hops-navy);
}

/* Visible focus for keyboard users — the template ships none. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid var(--hops-orange-deep);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   CTA + footer — both were drawn for a dark page shell, so now that the body
   is cream they carry their own navy block.
   -------------------------------------------------------------------------- */
.cta-btn-area {
  background: var(--hops-navy);
}
.cta-btn-area .btn-area a {
  color: var(--hops-cream);
}
.cta-btn-area .btn-area a:hover {
  color: var(--hops-orange);
}
.vl-footer1-section-area {
  background: var(--hops-navy);
}
.vl-footer1-section-area .footer-logo1 p,
.vl-footer1-section-area .vl-footer-widget p {
  color: rgba(254, 251, 247, .8);
}
.vl-copyright-area p {
  color: rgba(254, 251, 247, .65);
}
/* Lime decorative blob shipped with the template — off-brand, so drop it. */
.vl-footer1-section-area .elements6 {
  display: none;
}

/* --------------------------------------------------------------------------
   Signature checkerboard — the deck's recurring motif.
   -------------------------------------------------------------------------- */
.hops-check {
  height: 26px;
  background-image:
    linear-gradient(45deg, var(--hops-orange) 25%, transparent 25%, transparent 75%, var(--hops-orange) 75%),
    linear-gradient(45deg, var(--hops-orange) 25%, transparent 25%, transparent 75%, var(--hops-orange) 75%);
  background-size: 52px 52px;
  background-position: 0 0, 26px 26px;
}
.hops-check--sm {
  height: 16px;
  background-size: 32px 32px;
  background-position: 0 0, 16px 16px;
}

/* Orange marker-pen highlight behind a word, straight from the deck. */
.hops-mark {
  background: var(--hops-orange);
  color: var(--hops-navy);
  padding: 0 .28em;
  display: inline-block;
}

/* --------------------------------------------------------------------------
   Section helpers
   -------------------------------------------------------------------------- */
.hops-section {
  padding: 100px 0;
  position: relative;
}
.hops-section--navy {
  background: var(--hops-navy);
  color: var(--hops-cream);
}
.hops-section--navy h2,
.hops-section--navy h3,
.hops-section--navy h4 {
  color: var(--hops-cream);
}
.hops-section--navy p {
  color: rgba(254, 251, 247, 0.82);
}
.hops-eyebrow {
  font-family: var(--ztc-family-font1);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 14px;
  font-weight: 700;
  color: var(--hops-orange-deep);
  margin-bottom: 14px;
  display: block;
}
.hops-section--navy .hops-eyebrow {
  color: var(--hops-orange-light);
}
.hops-title {
  font-family: var(--ztc-family-font1);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-size: clamp(2rem, 1.2rem + 3.2vw, 4rem);
  color: var(--hops-navy);
}
.hops-section--navy .hops-title {
  color: var(--hops-cream);
}
.hops-lead {
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.2rem);
  line-height: 1.7;
  max-width: 62ch;
}

/* --------------------------------------------------------------------------
   Inner page header
   -------------------------------------------------------------------------- */
.hops-pagehead {
  background: var(--hops-navy);
  color: var(--hops-cream);
  padding: 170px 0 74px;
  position: relative;
  overflow: hidden;
}
.hops-pagehead h1 {
  font-family: var(--ztc-family-font1);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--hops-cream);
  font-size: clamp(2.2rem, 1.4rem + 3vw, 4.2rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 0;
}
.hops-crumb {
  margin: 18px 0 0;
  font-size: 15px;
  color: rgba(254, 251, 247, .7);
}
.hops-crumb a {
  color: var(--hops-orange-light);
}
.hops-crumb a:hover {
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Stat tiles
   -------------------------------------------------------------------------- */
.hops-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
}
.hops-stats > * {
  flex: 1 1 190px;
  max-width: 320px;
}
.hops-stat {
  background: var(--hops-cream);
  border: 2px solid var(--hops-navy);
  border-radius: 16px;
  padding: 26px 24px;
  box-shadow: 6px 6px 0 var(--hops-orange);
}
.hops-section--navy .hops-stat {
  background: var(--hops-navy-deep);
  border-color: var(--hops-cream);
}
.hops-stat__num {
  font-family: var(--ztc-family-font1);
  font-weight: 700;
  font-size: clamp(2rem, 1.4rem + 1.8vw, 3rem);
  line-height: 1;
  color: var(--hops-orange-figure);
  display: block;
}
/* On navy the vivid orange already clears the large-text floor (3.69:1). */
.hops-section--navy .hops-stat__num {
  color: var(--hops-orange);
}
.hops-stat__label {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.45;
  color: var(--hops-navy);
}
.hops-section--navy .hops-stat__label {
  color: rgba(254, 251, 247, 0.85);
}

/* --------------------------------------------------------------------------
   Creator / host cards
   -------------------------------------------------------------------------- */
.hops-hosts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 22px;
}
.hops-hosts > * {
  flex: 1 1 200px;
  max-width: 260px;
}
.hops-host {
  background: #fff;
  border-radius: 18px;
  padding: 26px 20px;
  text-align: center;
  border: 1px solid var(--hops-line);
  transition: transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s;
}
.hops-host:hover {
  transform: translateY(-8px);
  box-shadow: 0 18px 40px rgba(40, 55, 115, .14);
}
.hops-host img {
  width: 108px;
  height: 108px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--hops-orange);
}
.hops-host__name {
  font-family: var(--ztc-family-font1);
  font-weight: 700;
  font-size: 20px;
  margin: 16px 0 2px;
  color: var(--hops-navy);
}
.hops-host__handle {
  font-size: 14px;
  color: var(--hops-ink-soft);
  margin: 0 0 14px;
  word-break: break-all;
}
.hops-host__meta {
  display: flex;
  justify-content: center;
  gap: 16px;
  border-top: 1px solid var(--hops-line);
  padding-top: 14px;
}
.hops-host__meta div {
  font-size: 13px;
  color: var(--hops-ink-soft);
  line-height: 1.3;
}
.hops-host__meta b {
  display: block;
  font-family: var(--ztc-family-font1);
  font-size: 17px;
  color: var(--hops-navy);
}

/* --------------------------------------------------------------------------
   Event cards
   -------------------------------------------------------------------------- */
/* Fixed track counts, not auto-fit: a month with a single event keeps a normal
   card width instead of stretching across the whole row. */
.hops-events {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
}
.hops-events > * {
  flex: 1 1 250px;
  max-width: 330px;
}
.hops-event {
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--hops-line);
  display: flex;
  flex-direction: column;
  transition: transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s;
}
.hops-event:hover {
  transform: translateY(-8px);
  box-shadow: 0 18px 40px rgba(40, 55, 115, .16);
}
.hops-event img {
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  display: block;
  background: var(--hops-orange-soft);
}
.hops-event__body {
  padding: 20px;
  flex: 1;
}
.hops-event__month {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--hops-orange-deep);
}
.hops-event__name {
  font-family: var(--ztc-family-font1);
  font-weight: 700;
  font-size: 19px;
  text-transform: uppercase;
  margin: 8px 0 8px;
  color: var(--hops-navy);
  line-height: 1.2;
}
.hops-event__desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--hops-ink-soft);
  margin: 0;
}

/* --------------------------------------------------------------------------
   Team cards — the deck's poster artwork is the portrait itself.
   -------------------------------------------------------------------------- */
.hops-team {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
}
.hops-team > * {
  flex: 1 1 200px;
  max-width: 260px;
}
.hops-member {
  text-align: center;
}
.hops-member img {
  width: 100%;
  height: auto;
  aspect-ratio: 369 / 800;
  object-fit: cover;
  border-radius: 16px;
  display: block;
  background: var(--hops-navy);
  transition: transform .35s cubic-bezier(.16, 1, .3, 1);
}
.hops-member:hover img {
  transform: translateY(-8px) scale(1.01);
}
.hops-member__name {
  font-family: var(--ztc-family-font1);
  font-weight: 700;
  font-size: 19px;
  margin: 16px 0 2px;
  color: var(--hops-navy);
  text-transform: uppercase;
}
.hops-member__role {
  font-size: 14px;
  color: var(--hops-orange-deep);
  margin: 0;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Creator growth rows
   -------------------------------------------------------------------------- */
.hops-growth {
  display: grid;
  gap: 12px;
}
.hops-growth__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  background: #fff;
  border: 1px solid var(--hops-line);
  border-radius: 12px;
  padding: 16px 20px;
}
.hops-section--navy .hops-growth__row {
  background: rgba(254, 251, 247, .06);
  border-color: rgba(254, 251, 247, .18);
}
.hops-growth__month {
  font-family: var(--ztc-family-font1);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 14px;
  color: var(--hops-orange-deep);
}
.hops-section--navy .hops-growth__month {
  color: var(--hops-orange-light);
}
.hops-growth__val {
  font-family: var(--ztc-family-font1);
  font-weight: 700;
  font-size: 24px;
  color: var(--hops-navy);
}
.hops-section--navy .hops-growth__val {
  color: var(--hops-cream);
}
.hops-growth__delta {
  font-size: 14px;
  font-weight: 700;
  color: #167A42;
}
.hops-section--navy .hops-growth__delta {
  color: #5FD48D;
}
.hops-growth__prev {
  font-size: 13px;
  color: var(--hops-ink-soft);
}
.hops-section--navy .hops-growth__prev {
  color: rgba(254, 251, 247, .6);
}

/* --------------------------------------------------------------------------
   Media / partner logo wall
   -------------------------------------------------------------------------- */
.hops-logos {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}
.hops-logos span {
  border: 1px solid var(--hops-line);
  background: #fff;
  border-radius: 999px;
  padding: 12px 24px;
  font-family: var(--ztc-family-font1);
  font-weight: 700;
  font-size: 16px;
  color: var(--hops-navy);
}
.hops-section--navy .hops-logos span {
  background: rgba(254, 251, 247, .07);
  border-color: rgba(254, 251, 247, .22);
  color: var(--hops-cream);
}

/* Image logo wall — white tiles so the cropped logos sit on a neutral field. */
.hops-logos--img {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (min-width: 768px) {
  .hops-logos--img { grid-template-columns: repeat(4, 1fr); }
}
.hops-logos--img figure {
  background: #fff;
  border: 1px solid var(--hops-line);
  border-radius: 14px;
  margin: 0;
  padding: 22px 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 104px;
  transition: transform .3s cubic-bezier(.16, 1, .3, 1), box-shadow .3s;
}
.hops-logos--img figure:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 26px rgba(40, 55, 115, .1);
}
.hops-logos--img img {
  max-width: 100%;
  max-height: 52px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* --------------------------------------------------------------------------
   Gallery
   -------------------------------------------------------------------------- */
.hops-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
}
.hops-gallery img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 14px;
  display: block;
}

/* Feature list with orange ticks */
.hops-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.hops-list li {
  position: relative;
  padding-left: 34px;
  margin-bottom: 14px;
  line-height: 1.6;
}
.hops-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .35em;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  background: var(--hops-orange);
}

/* --------------------------------------------------------------------------
   Responsive + motion
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .hops-section { padding: 68px 0; }
  .hops-host img { width: 92px; height: 92px; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Contact page field labels */
.hops-contact-label {
  font-family: var(--ztc-family-font1);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 16px;
  color: var(--hops-orange-light);
}

/* Phone-screenshot proof: show the whole screen rather than a 4:3 crop. */
.hops-proof {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
  max-width: 900px;
  margin: 0 auto;
}
.hops-proof > * {
  flex: 1 1 230px;
  max-width: 290px;
}
.hops-proof img {
  width: 100%;
  height: auto;
  border-radius: 14px;
  display: block;
  background: #fff;
}

/* --------------------------------------------------------------------------
   FAQ accordion — native <details>, so it works without JS and stays
   keyboard-accessible.
   -------------------------------------------------------------------------- */
.hops-faq {
  display: grid;
  gap: 14px;
  max-width: 860px;
  margin: 0 auto;
}
.hops-faq details {
  background: #fff;
  border: 1px solid var(--hops-line);
  border-radius: 14px;
  overflow: hidden;
}
.hops-faq details[open] {
  border-color: var(--hops-orange);
  box-shadow: 0 10px 30px rgba(40, 55, 115, .08);
}
.hops-faq summary {
  cursor: pointer;
  list-style: none;
  padding: 20px 56px 20px 22px;
  font-family: var(--ztc-family-font1);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.4;
  color: var(--hops-navy);
  position: relative;
}
.hops-faq summary::-webkit-details-marker { display: none; }
.hops-faq summary::after {
  content: "";
  position: absolute;
  right: 22px;
  top: 50%;
  width: 12px;
  height: 12px;
  margin-top: -8px;
  border-right: 3px solid var(--hops-orange);
  border-bottom: 3px solid var(--hops-orange);
  transform: rotate(45deg);
  transition: transform .3s cubic-bezier(.16, 1, .3, 1);
}
.hops-faq details[open] summary::after {
  transform: rotate(-135deg);
  margin-top: -3px;
}
.hops-faq summary:hover { color: var(--hops-orange-deep); }
.hops-faq .hops-faq__body {
  padding: 0 22px 22px;
  line-height: 1.7;
  color: var(--hops-ink-soft);
}
.hops-faq .hops-faq__body p { margin: 0 0 10px; }
.hops-faq .hops-faq__body p:last-child { margin-bottom: 0; }
.hops-faq .hops-faq__body b { color: var(--hops-navy); }

/* --------------------------------------------------------------------------
   Benefit / requirement cards
   -------------------------------------------------------------------------- */
.hops-benefits {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}
.hops-benefits > * {
  flex: 1 1 240px;
  max-width: 340px;
}
.hops-benefit {
  background: #fff;
  border: 1px solid var(--hops-line);
  border-left: 5px solid var(--hops-orange);
  border-radius: 14px;
  padding: 24px 22px;
}
.hops-section--navy .hops-benefit {
  background: rgba(254, 251, 247, .06);
  border-color: rgba(254, 251, 247, .18);
  border-left-color: var(--hops-orange);
}
.hops-benefit h3 {
  font-family: var(--ztc-family-font1);
  font-weight: 700;
  font-size: 18px;
  margin: 0 0 8px;
  color: var(--hops-navy);
}
.hops-section--navy .hops-benefit h3 { color: var(--hops-cream); }
.hops-benefit p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--hops-ink-soft);
}
.hops-section--navy .hops-benefit p { color: rgba(254, 251, 247, .8); }

/* Category chips */
.hops-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.hops-chips span {
  background: #fff;
  border: 2px solid var(--hops-navy);
  border-radius: 999px;
  padding: 11px 22px;
  font-family: var(--ztc-family-font1);
  font-weight: 700;
  font-size: 15px;
  color: var(--hops-navy);
  transition: background .25s, color .25s, transform .25s cubic-bezier(.16, 1, .3, 1);
}
.hops-chips span:hover {
  background: var(--hops-orange);
  transform: translateY(-3px);
}
.hops-section--navy .hops-chips span {
  background: transparent;
  border-color: rgba(254, 251, 247, .35);
  color: var(--hops-cream);
}


/* ==========================================================================
   QA pass fixes
   ========================================================================== */

/* The template's custom cursor follower sits at a hardcoded x=1939 until the
   first mousemove, overflowing the page at >=1024px. main.js dereferences both
   nodes without a null check, so they stay in the DOM and are hidden instead of
   removed. It is also pointless on touch devices. */
.procus-cursor,
.procus-cursor2 {
  display: none !important;
}

/* The logo <a> is inline, so its box collapsed to an 18px line box while the
   image overflowed it — the clickable area did not match what you see. */
.vl-logo a,
.vl-offcanvas-logo a,
.sidebar-logo a,
.footer-logo1 a {
  display: inline-block;
  line-height: 0;
}

/* Standalone links that sit on their own line (contact details, breadcrumb)
   were only 18px tall. WCAG 2.5.8 wants 24px; give them a comfortable target. */
.hops-crumb a,
.hops-pagehead .hops-crumb a {
  display: inline-block;
  padding: 3px 2px;
}
.hops-contact-list a {
  display: inline-block;
  padding: 5px 0;
  min-height: 24px;
}

/* ==========================================================================
   QA pass 2 — findings from the accessibility + code review
   ========================================================================== */

/* [HIGH] The template reveals a white panel (.vl-btn1::after, z-index:-1 inside
   the button's own stacking context) on hover, which paints ON TOP of the
   button background. Combined with our navy hover fill + cream label the text
   became invisible (1.02:1). Remove the panel; keep the brand underline. */
.vl-btn1::after {
  content: none;
}
.vl-btn1::before {
  border-bottom-color: var(--hops-orange);
}
.vl-btn1:hover::before {
  border-bottom-color: var(--hops-orange);
}
.hops-section--navy .vl-btn1--ghost::before,
.hops-section--navy .vl-btn1--ghost:hover::before {
  border-bottom-color: var(--hops-cream);
}

/* [HIGH] WCAG 2.4.11 / 1.4.11 — the global focus ring (#B54A12) only scores
   2.10:1 against navy. Dark surfaces get the light orange (5.24:1). */
.hops-section--navy :focus-visible,
.hops-pagehead :focus-visible,
.cta-btn-area :focus-visible,
.vl-footer1-section-area :focus-visible,
.vl-offcanvas :focus-visible,
.hops-dark-head .vl-transparent-header :focus-visible {
  outline-color: var(--hops-orange-light);
}

/* [HIGH] WCAG 2.2.2 Pause, Stop, Hide — the ticker loops forever. Let pointer
   and keyboard users stop it. (prefers-reduced-motion already halts it.) */
.marquee-wrap:hover .marquee-text,
.marquee-wrap:focus-within .marquee-text {
  animation-play-state: paused;
}

/* [MEDIUM] Chip hover only changed the fill, leaving navy-on-orange (3.69:1)
   and cream-on-orange (2.93:1) at 15px/700 — both under the 4.5:1 floor. */
.hops-chips span:hover {
  background: var(--hops-orange);
  color: var(--hops-ink-on-orange);
}
.hops-section--navy .hops-chips span:hover {
  background: var(--hops-cream);
  color: var(--hops-navy);
}

/* [MEDIUM] WCAG 2.5.8 — the hamburger button itself had no box, only a 20px
   glyph; the padding sat on its non-interactive wrapper. */
.vl-offcanvas-toggle,
.vl-offcanvas-close-toggle {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* [LOW] The ticker used 16 duplicate <h3> elements purely for the loop
   illusion, which polluted the heading outline and made screen readers
   announce the same heading over and over. They are plain spans now, so the
   template's h3 styling has to be carried across. */
.slider1-section-area .marquee-wrap .marquee-text .brand-single-box .brand-single-text {
  color: var(--ztc-text-text-4);
  font-family: var(--ztc-family-font1);
  font-size: var(--ztc-font-size-font-s28);
  font-style: normal;
  font-weight: var(--ztc-weight-bold);
  line-height: 28px;
  text-transform: uppercase;
  display: inline-block;
  white-space: nowrap;
}
.slider1-section-area .marquee-wrap .marquee-text .brand-single-box .brand-single-text img {
  margin: -10px 20px 0;
}