/* =========================================================
   HERO BANNER — CREATIVE  ·  .cg-hero-v2
   Elementor widget. A faithful port of html-design/css/hero-banner.css
   (the approved reference implementation) into a Swiper-driven,
   repeater-backed widget.

   Two deliberate differences from the reference, both required by
   the Elementor conversion — everything else is 1:1:

   1. HEIGHT. The reference is a fixed `min-height:100vh` stage with
      `overflow:hidden` on the section, which is safe only because its
      three slides have hand-tuned copy. A repeater can hold any amount
      of content, so here the height floor lives on the SLIDE as a
      `min-height` (never `height`), the section is never vertically
      clipped, and the bottom chrome's height is reserved as padding on
      __inner via --cg-hv2-band. A tall slide simply makes the hero
      taller; nothing is ever cropped to make it fit.

   2. BOTTOM CHROME. The reference positions .cg-hero__scroll and
      .cg-hero__controls as two independent absolute boxes. Here they
      are children of one absolutely-positioned flex bar (__bar), so
      the optional progress indicator can join the row and reflow onto
      its own line on narrow screens without any chance of the three
      overlapping each other.

   Fonts: the reference @imports Space Grotesk + Archivo. The theme
   already enqueues both in inc/enqueue.php, so the @import is dropped
   (it would be a render-blocking duplicate) and only the families are
   declared, with the same fallback stacks.
   ========================================================= */

.cg-hero-v2 {
  /* ---- brand tokens (scoped: they leak nowhere) ---- */
  --cg-hv2-navy: #0b1438;
  --cg-hv2-navy-soft: #3d456b;
  --cg-hv2-pink: #f20a63;
  --cg-hv2-blue: #304cff;
  --cg-hv2-yellow: #ffc928;
  --cg-hv2-white: #ffffff;
  --cg-hv2-paper: #f7f5f8;

  --cg-hv2-accent-1: var(--cg-hv2-pink);
  --cg-hv2-accent-2: #ff5a2e;
  --cg-hv2-accent-3: var(--cg-hv2-yellow);

  --cg-hv2-font-display: "Space Grotesk", "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --cg-hv2-font-body: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --cg-hv2-gutter: clamp(22px, 5.6vw, 104px);
  --cg-hv2-ease: cubic-bezier(0.22, 0.61, 0.24, 1);
  --cg-hv2-fade: 1150ms;

  /* Height FLOOR, never a fixed height — see note 1 above. */
  --cg-hv2-min-h: 100vh;

  /* Space reserved at the bottom of the content column for the chrome
     bar. Bumped by the .has-progress modifier further down when the
     optional progress indicator is switched on, so the bar can never
     sit on top of the copy no matter what is enabled. */
  --cg-hv2-band: clamp(150px, 22vh, 220px);

  --cg-hv2-content-max: 660px;
  --cg-hv2-align: center;

  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  display: block;
  width: 100%;
  max-width: 100%;
  /* `clip` (not `hidden`) keeps the decorative circles from causing a
     horizontal scrollbar WITHOUT turning the hero into a scroll
     container, and the vertical axis is left explicitly visible so a
     tall slide can never be cropped. */
  overflow-x: clip;
  overflow-y: visible;
  background-color: var(--cg-hv2-paper);
  color: var(--cg-hv2-navy);
  font-family: var(--cg-hv2-font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

@supports (min-height: 100svh) {
  .cg-hero-v2 { --cg-hv2-min-h: 100svh; }
}

.cg-hero-v2 *,
.cg-hero-v2 *::before,
.cg-hero-v2 *::after { box-sizing: border-box; }

.cg-hero-v2__sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.cg-hero-v2__live {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Editor-only placeholder when the repeater is empty. */
.cg-hero-v2__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 320px;
  padding: 40px var(--cg-hv2-gutter);
  font-family: var(--cg-hv2-font-body);
  font-size: 15px;
  text-align: center;
  color: var(--cg-hv2-navy-soft);
  border: 1px dashed rgba(11, 20, 56, 0.24);
}

/* ------------------------------------------------------------
   STAGE + SLIDES
   ------------------------------------------------------------ */

/* height:auto — the flex row of slides sizes itself to the TALLEST
   slide, so every slide gets the same height and the tallest one is
   never clipped. This is what replaces the reference's fixed stage. */
.cg-hero-v2__viewport {
  position: relative;
  z-index: 0;
  width: 100%;
  height: auto;
  overflow: hidden; /* horizontal only in practice: the row is as tall as its tallest child. */
}

.cg-hero-v2__slide {
  position: relative;
  display: block;
  margin: 0;
  min-height: var(--cg-hv2-min-h);
  height: auto;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: var(--cg-hv2-pos, 60% 50%);
}

/* Swiper's fade effect drives opacity itself; this only supplies the
   timing function, so the cross-fade matches the reference's
   `opacity var(--cg-fade) var(--cg-ease)` curve rather than Swiper's
   default linear ease. Duration comes from `speed` (1150ms). */
.cg-hero-v2__viewport.swiper-fade .swiper-slide {
  transition-timing-function: var(--cg-hv2-ease);
}

/* full-bleed background image — one per slide */
.cg-hero-v2__media {
  position: absolute;
  inset: 0;
  display: block;
  background-image: inherit;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: var(--cg-hv2-pos, 60% 50%);
  transform: scale(1.075);
  transform-origin: 72% 50%;
  transition: transform 2400ms var(--cg-hv2-ease);
  will-change: transform;
}

/* Ken-Burns settle. Bound to Swiper's own active-slide class so it is
   driven by real carousel state, exactly as the reference bound it to
   its .is-active class. */
.cg-hero-v2__slide.swiper-slide-active .cg-hero-v2__media { transform: scale(1); }

/* the light editorial wash that lets the type sit on the photo */
.cg-hero-v2__scrim {
  position: absolute;
  inset: 0;
  display: block;
  opacity: var(--cg-hv2-scrim-opacity, 1);
  background:
    radial-gradient(78% 92% at 6% 6%, rgba(242, 10, 99, 0.16) 0%, rgba(242, 10, 99, 0) 62%),
    linear-gradient(
      98deg,
      rgba(255, 255, 255, 0.99) 0%,
      rgba(255, 255, 255, 0.978) 30%,
      rgba(255, 255, 255, 0.925) 41%,
      rgba(255, 255, 255, 0.66) 50%,
      rgba(255, 255, 255, 0.26) 60%,
      rgba(255, 255, 255, 0.06) 70%,
      rgba(255, 255, 255, 0) 78%
    ),
    linear-gradient(180deg, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0) 26%),
    linear-gradient(0deg, rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0) 24%);
}

/* ------------------------------------------------------------
   DECORATIVE GEOMETRY (behind the type, never over it)
   ------------------------------------------------------------ */

.cg-hero-v2__decor {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
}

/* the big translucent circle sweeping in from the upper middle */
.cg-hero-v2__arc {
  position: absolute;
  top: -34vw;
  left: 26%;
  width: 68vw;
  height: 68vw;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.24) 40%, rgba(255, 255, 255, 0.07) 62%, rgba(255, 255, 255, 0) 78%);
  opacity: 0.85;
}

/* soft pink bloom, lower left of the headline */
.cg-hero-v2__glow {
  position: absolute;
  left: -14vw;
  bottom: -18vw;
  width: 52vw;
  height: 52vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(242, 10, 99, 0.16) 0%, rgba(242, 10, 99, 0.05) 42%, rgba(242, 10, 99, 0) 70%);
}

/* thin outlined ring — a quiet geometric accent */
.cg-hero-v2__orb {
  position: absolute;
  top: 12%;
  left: 30.5%;
  width: 16vw;
  height: 16vw;
  min-width: 120px;
  min-height: 120px;
  border-radius: 50%;
  border: 1px solid rgba(11, 20, 56, 0.07);
}

/* ------------------------------------------------------------
   CONTENT
   ------------------------------------------------------------ */

.cg-hero-v2__inner {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: var(--cg-hv2-align);
  width: 100%;
  min-height: var(--cg-hv2-min-h);
  padding-top: clamp(96px, 13vh, 168px);
  padding-left: var(--cg-hv2-gutter);
  padding-right: var(--cg-hv2-gutter);
  /* Reserves the chrome bar's band. Because this is padding on a
     min-height (not height) box, extra content pushes the box taller
     instead of sliding under the bar.

     --cg-hv2-band is the authored/admin-set value; --cg-hv2-band-min is
     measured from the real bar at runtime (see syncBand() in
     hero-banner-creative.js) and applied as a FLOOR via max(). So the
     admin's own Bottom Reserved Space setting still wins whenever it is
     the larger of the two, while a bar that turns out taller than the
     stylesheet assumed — many progress ticks, a wrapped two-row bar on a
     short landscape screen — can still never overlap the copy. */
  padding-bottom: max(var(--cg-hv2-band), var(--cg-hv2-band-min, 0px));
}

.cg-hero-v2__content {
  width: 100%;
  max-width: var(--cg-hv2-content-max);
}

/* --- staggered reveal --- */
.cg-hero-v2__eyebrow,
.cg-hero-v2__title,
.cg-hero-v2__text,
.cg-hero-v2__features,
.cg-hero-v2__actions {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition:
    opacity 900ms var(--cg-hv2-ease),
    transform 1000ms var(--cg-hv2-ease);
}

.cg-hero-v2__slide.swiper-slide-active .cg-hero-v2__eyebrow,
.cg-hero-v2__slide.swiper-slide-active .cg-hero-v2__title,
.cg-hero-v2__slide.swiper-slide-active .cg-hero-v2__text,
.cg-hero-v2__slide.swiper-slide-active .cg-hero-v2__features,
.cg-hero-v2__slide.swiper-slide-active .cg-hero-v2__actions {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.cg-hero-v2__slide.swiper-slide-active .cg-hero-v2__eyebrow  { transition-delay: 180ms; }
.cg-hero-v2__slide.swiper-slide-active .cg-hero-v2__title    { transition-delay: 300ms; }
.cg-hero-v2__slide.swiper-slide-active .cg-hero-v2__text     { transition-delay: 460ms; }
.cg-hero-v2__slide.swiper-slide-active .cg-hero-v2__features { transition-delay: 600ms; }
.cg-hero-v2__slide.swiper-slide-active .cg-hero-v2__actions  { transition-delay: 720ms; }

/* --- eyebrow --- */
.cg-hero-v2__eyebrow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.7em;
  margin: 0 0 clamp(18px, 2.4vw, 30px);
  padding: 0;
  font-family: var(--cg-hv2-font-body);
  font-size: clamp(10px, 0.78vw, 13px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--cg-hv2-navy);
}

.cg-hero-v2__eyebrow i {
  font-style: normal;
  font-weight: 500;
  color: var(--cg-hv2-pink);
  transform: translateY(-0.04em);
}

/* --- headline --- */
.cg-hero-v2__title {
  margin: 0;
  padding: 0;
  font-family: var(--cg-hv2-font-display);
  font-size: clamp(2.55rem, 6.05vw, 6.05rem);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.035em;
  color: var(--cg-hv2-navy);
  text-wrap: balance;
}

.cg-hero-v2__accent {
  font-style: normal;
  font-weight: inherit;
  background-image: linear-gradient(96deg, var(--cg-hv2-accent-1) 0%, var(--cg-hv2-accent-2) 58%, var(--cg-hv2-accent-3) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* --- supporting copy --- */
.cg-hero-v2__text {
  margin: clamp(20px, 2.6vw, 34px) 0 0;
  padding: 0;
  max-width: 42ch;
  font-family: var(--cg-hv2-font-body);
  font-size: clamp(15px, 1.12vw, 19px);
  font-weight: 400;
  line-height: 1.62;
  color: var(--cg-hv2-navy-soft);
  text-wrap: pretty;
}

/* --- feature row --- */
.cg-hero-v2__features {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(16px, 1.8vw, 26px);
  margin: clamp(34px, 5vh, 62px) 0 0;
  padding: 0;
  list-style: none;
}

.cg-hero-v2__feature {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: clamp(16px, 1.8vw, 26px);
  border-left: 1px solid var(--cg-hv2-rule, rgba(11, 20, 56, 0.14));
  font-family: var(--cg-hv2-font-body);
  font-size: clamp(12px, 0.86vw, 14px);
  font-weight: 500;
  line-height: 1.32;
  letter-spacing: 0.005em;
  color: var(--cg-hv2-navy);
}

.cg-hero-v2__feature:first-child {
  padding-left: 0;
  border-left: 0;
}

.cg-hero-v2__icon {
  flex: 0 0 auto;
  width: 21px;
  height: 21px;
  fill: none;
  stroke: var(--cg-hv2-icon, var(--cg-hv2-pink));
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ------------------------------------------------------------
   CTA BUTTONS
   Not in the reference markup (it has no buttons) — added for the
   Elementor version, drawn in the reference's own visual language:
   the pill geometry and hover choreography of .cg-hero__nav, the
   pink/navy palette, and the body font's uppercase tracking.
   ------------------------------------------------------------ */

.cg-hero-v2__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cg-hv2-btn-gap, 14px);
  margin: clamp(28px, 4vh, 44px) 0 0;
}

.cg-hero-v2__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  max-width: 100%;
  padding: 16px 32px;
  border: 1px solid transparent;
  border-radius: var(--cg-hv2-btn-radius, 999px);
  font-family: var(--cg-hv2-font-body);
  font-size: clamp(12px, 0.84vw, 14px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition:
    background 420ms var(--cg-hv2-ease),
    border-color 420ms var(--cg-hv2-ease),
    color 420ms var(--cg-hv2-ease),
    transform 420ms var(--cg-hv2-ease);
}

.cg-hero-v2__btn svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 420ms var(--cg-hv2-ease);
}

.cg-hero-v2__btn:hover svg,
.cg-hero-v2__btn:focus-visible svg { transform: translateX(3px); }

.cg-hero-v2__btn:active { transform: scale(0.97); }

.cg-hero-v2__btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(242, 10, 99, 0.24);
}

.cg-hero-v2__btn--primary {
  background: var(--cg-hv2-btn1-bg, var(--cg-hv2-pink));
  border-color: var(--cg-hv2-btn1-bd, var(--cg-hv2-pink));
  color: var(--cg-hv2-btn1-fg, var(--cg-hv2-white));
}

.cg-hero-v2__btn--primary:hover,
.cg-hero-v2__btn--primary:focus-visible {
  background: var(--cg-hv2-btn1-bg-h, var(--cg-hv2-navy));
  border-color: var(--cg-hv2-btn1-bd-h, var(--cg-hv2-navy));
  color: var(--cg-hv2-btn1-fg-h, var(--cg-hv2-white));
}

.cg-hero-v2__btn--secondary {
  background: var(--cg-hv2-btn2-bg, rgba(255, 255, 255, 0.42));
  border-color: var(--cg-hv2-btn2-bd, rgba(11, 20, 56, 0.22));
  color: var(--cg-hv2-btn2-fg, var(--cg-hv2-navy));
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);
}

.cg-hero-v2__btn--secondary:hover,
.cg-hero-v2__btn--secondary:focus-visible {
  background: var(--cg-hv2-btn2-bg-h, var(--cg-hv2-navy));
  border-color: var(--cg-hv2-btn2-bd-h, var(--cg-hv2-navy));
  color: var(--cg-hv2-btn2-fg-h, var(--cg-hv2-white));
}

/* ------------------------------------------------------------
   BOTTOM CHROME BAR  (scroll cue · progress · prev/next)
   ------------------------------------------------------------ */

.cg-hero-v2__bar {
  position: absolute;
  z-index: 5;
  left: var(--cg-hv2-gutter);
  right: var(--cg-hv2-gutter);
  bottom: clamp(28px, 5.4vh, 58px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px 20px;
  /* Wrapping is enabled at every width, not just on phones: a repeater with
     many slides produces a long row of progress ticks, and without this the
     arrows would be pushed past the right edge on a tablet. When it does wrap,
     syncBand() in the JS measures the taller bar and grows the reserved band
     to match, so wrapping can never cost the copy any room. */
  flex-wrap: wrap;
}

.cg-hero-v2__bar:empty { display: none; }

/* --- scroll cue --- */
.cg-hero-v2__scroll {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.cg-hero-v2__mouse {
  display: block;
  flex: 0 0 auto;
  width: 17px;
  height: 28px;
}

.cg-hero-v2__mouse svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--cg-hv2-navy);
  stroke-width: 2;
  stroke-linecap: round;
  opacity: 0.6;
}

.cg-hero-v2__mouse-wheel {
  stroke: var(--cg-hv2-pink);
  stroke-width: 3;
  animation: cg-hv2-wheel 2000ms var(--cg-hv2-ease) infinite;
}

@keyframes cg-hv2-wheel {
  0%, 100% { transform: translateY(0); opacity: 1; }
  45%      { transform: translateY(7px); opacity: 0.15; }
  46%      { transform: translateY(0); opacity: 0; }
}

.cg-hero-v2__scroll-label {
  font-family: var(--cg-hv2-font-body);
  font-size: clamp(9px, 0.66vw, 11px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--cg-hv2-navy);
  opacity: 0.72;
}

/* --- right-hand control cluster --- */
.cg-hero-v2__controls {
  display: flex;
  align-items: center;
  gap: 14px;
  /* Never shrinks: the arrows keep their full hit area whatever else is
     in the bar, and wrap to their own line instead. */
  flex: 0 0 auto;
  margin-left: auto;
}

.cg-hero-v2__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--cg-hv2-nav-size, 52px);
  height: var(--cg-hv2-nav-size, 52px);
  padding: 0;
  border: 1px solid var(--cg-hv2-nav-bd, rgba(11, 20, 56, 0.22));
  border-radius: 50%;
  background: var(--cg-hv2-nav-bg, rgba(255, 255, 255, 0.42));
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);
  color: var(--cg-hv2-nav-fg, var(--cg-hv2-navy));
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition:
    background 420ms var(--cg-hv2-ease),
    border-color 420ms var(--cg-hv2-ease),
    color 420ms var(--cg-hv2-ease),
    transform 420ms var(--cg-hv2-ease),
    opacity 420ms var(--cg-hv2-ease);
}

.cg-hero-v2__nav svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 420ms var(--cg-hv2-ease);
}

.cg-hero-v2__nav:hover,
.cg-hero-v2__nav:focus-visible {
  background: var(--cg-hv2-nav-bg-h, var(--cg-hv2-pink));
  border-color: var(--cg-hv2-nav-bd-h, var(--cg-hv2-pink));
  color: var(--cg-hv2-nav-fg-h, var(--cg-hv2-white));
  outline: none;
}

.cg-hero-v2__nav:focus-visible { box-shadow: 0 0 0 3px rgba(242, 10, 99, 0.24); }

.cg-hero-v2__nav--prev:hover svg,
.cg-hero-v2__nav--prev:focus-visible svg { transform: translateX(-3px); }

.cg-hero-v2__nav--next:hover svg,
.cg-hero-v2__nav--next:focus-visible svg { transform: translateX(3px); }

.cg-hero-v2__nav:active { transform: scale(0.95); }

/* Non-loop carousel at either end. Dimmed, never removed, so the bar's
   layout can't jump. */
.cg-hero-v2__nav.swiper-button-disabled {
  opacity: 0.38;
  cursor: default;
}

.cg-hero-v2__nav-rule {
  display: block;
  flex: 0 0 auto;
  width: 22px;
  height: 1px;
  background: rgba(11, 20, 56, 0.28);
}

/* ------------------------------------------------------------
   PROGRESS INDICATOR  (optional, OFF by default)
   Not in the reference design. Rendered as one tick per real slide —
   the count comes from the repeater, never a hardcoded number.
   The fill is a CSS animation whose duration is the real autoplay
   delay; it is started, paused, resumed and reset exclusively from
   Swiper's own events, so there is no second timer to drift.
   ------------------------------------------------------------ */

.cg-hero-v2__progress {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  /* Takes the slack in the bar and is allowed to shrink below its content
     width, so its own ticks wrap before the bar itself has to. */
  flex: 1 1 auto;
  min-width: 0;
  margin-right: auto;
  padding: 0 4px;
}

.cg-hero-v2__tick {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border: 0;
  background: none;
  font-family: var(--cg-hv2-font-body);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.18em;
  color: var(--cg-hv2-navy);
  opacity: 0.45;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: opacity 420ms var(--cg-hv2-ease);
}

.cg-hero-v2__tick:hover,
.cg-hero-v2__tick.is-active { opacity: 1; }

.cg-hero-v2__tick:focus-visible {
  outline: none;
  opacity: 1;
  box-shadow: 0 0 0 3px rgba(242, 10, 99, 0.24);
  border-radius: 4px;
}

.cg-hero-v2__tick-track {
  display: block;
  position: relative;
  width: var(--cg-hv2-tick-w, 34px);
  height: var(--cg-hv2-prog-h, 2px);
  border-radius: 2px;
  background: var(--cg-hv2-prog-track, rgba(11, 20, 56, 0.2));
  overflow: hidden;
}

.cg-hero-v2__tick-fill {
  display: block;
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--cg-hv2-prog-fill, var(--cg-hv2-pink));
  transform: scaleX(0);
  transform-origin: left center;
}

/* Ticks already passed read as complete. */
.cg-hero-v2__tick.is-done .cg-hero-v2__tick-fill { transform: scaleX(1); }

/* Only the active tick animates, and only while autoplay is actually
   running — JS adds .is-running and sets --cg-hv2-prog-dur from the
   real Swiper autoplay delay. */
.cg-hero-v2__tick.is-active.is-running .cg-hero-v2__tick-fill {
  animation: cg-hv2-fill var(--cg-hv2-prog-dur, 6800ms) linear forwards;
}

/* Autoplay paused (hover, tab hidden, off screen, interaction) freezes
   the fill exactly where it is — no re-timing, no catch-up. */
.cg-hero-v2__tick.is-active.is-paused .cg-hero-v2__tick-fill {
  animation-play-state: paused;
}

/* Autoplay switched off entirely: the active tick is simply marked,
   with no fake progress animation at all. */
.cg-hero-v2--no-autoplay .cg-hero-v2__tick.is-active .cg-hero-v2__tick-fill {
  animation: none;
  transform: scaleX(1);
}

@keyframes cg-hv2-fill {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* The progress row needs more room than the reference's bar reserved. */
.cg-hero-v2.has-progress { --cg-hv2-band: clamp(170px, 24vh, 240px); }

/* ============================================================
   RESPONSIVE — each breakpoint is composed, not just scaled.
   Ported 1:1 from html-design/css/hero-banner.css.
   ============================================================ */

/* ---------- 1. LARGE DESKTOP (>=1600px) ---------- */
@media (min-width: 1600px) {
  .cg-hero-v2 {
    --cg-hv2-gutter: clamp(104px, 6.4vw, 150px);
    --cg-hv2-content-max: 760px;
    --cg-hv2-nav-size: 56px;
  }
  .cg-hero-v2__title { font-size: clamp(5.4rem, 5.6vw, 6.6rem); }
  .cg-hero-v2__text { font-size: 19px; }
}

/* ---------- 3. IPAD LANDSCAPE (1024–1279px) ----------
   Keep the left/right relationship; pull the photo slightly
   right so the machine stays whole beside the type.           */
@media (min-width: 1024px) and (max-width: 1279px) {
  .cg-hero-v2 {
    --cg-hv2-gutter: 56px;
    --cg-hv2-content-max: 520px;
  }
  .cg-hero-v2__media { background-position: 72% 50%; }
  .cg-hero-v2__title { font-size: clamp(3rem, 5.4vw, 3.9rem); }
  .cg-hero-v2__text { font-size: 16px; max-width: 38ch; }
  .cg-hero-v2__features { gap: 14px; }
  .cg-hero-v2__feature { padding-left: 14px; font-size: 12px; }
  .cg-hero-v2__btn { padding: 14px 26px; }
  .cg-hero-v2__scrim {
    background:
      radial-gradient(78% 92% at 6% 6%, rgba(242, 10, 99, 0.16) 0%, rgba(242, 10, 99, 0) 62%),
      linear-gradient(
        98deg,
        rgba(255, 255, 255, 0.985) 0%,
        rgba(255, 255, 255, 0.955) 30%,
        rgba(255, 255, 255, 0.78) 44%,
        rgba(255, 255, 255, 0.3) 58%,
        rgba(255, 255, 255, 0) 74%
      ),
      linear-gradient(0deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 22%);
  }
}

/* ---------- 4. IPAD PORTRAIT / SMALL TABLET (768–1023px) ----------
   Portrait composition: type sits in the upper two thirds, the
   press reads across the lower half of the frame.             */
@media (max-width: 1023px) {
  .cg-hero-v2 {
    --cg-hv2-gutter: 48px;
    --cg-hv2-align: flex-start;
    --cg-hv2-content-max: 640px;
    --cg-hv2-band: clamp(150px, 20vh, 200px);
  }

  .cg-hero-v2.has-progress { --cg-hv2-band: clamp(176px, 23vh, 226px); }

  .cg-hero-v2__slide { background-position: var(--cg-hv2-pos-sm, 68% 58%); }

  .cg-hero-v2__media {
    background-position: var(--cg-hv2-pos-sm, 68% 58%);
    transform-origin: 60% 62%;
  }

  .cg-hero-v2__scrim {
    background:
      radial-gradient(70% 60% at 8% 4%, rgba(242, 10, 99, 0.15) 0%, rgba(242, 10, 99, 0) 62%),
      linear-gradient(
        176deg,
        rgba(255, 255, 255, 0.985) 0%,
        rgba(255, 255, 255, 0.95) 38%,
        rgba(255, 255, 255, 0.7) 56%,
        rgba(255, 255, 255, 0.16) 76%,
        rgba(255, 255, 255, 0) 92%
      ),
      linear-gradient(0deg, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0) 30%);
  }

  .cg-hero-v2__inner { padding-top: clamp(88px, 12vh, 128px); }

  .cg-hero-v2__title {
    font-size: clamp(2.9rem, 6.6vw, 4.2rem);
    letter-spacing: -0.03em;
  }

  .cg-hero-v2__text {
    font-size: 17px;
    max-width: 46ch;
  }

  /* the authored <br> in the copy is a desktop measure decision */
  .cg-hero-v2__text br { display: none; }

  .cg-hero-v2__features {
    gap: 18px 22px;
    margin-top: clamp(30px, 4.6vh, 46px);
  }

  .cg-hero-v2__feature {
    padding-left: 22px;
    font-size: 13px;
  }

  .cg-hero-v2__arc { top: -46vw; left: 18%; width: 92vw; height: 92vw; }
  .cg-hero-v2__orb { display: none; }
}

/* ---------- 5. MOBILE PORTRAIT (<=767px) ---------- */
@media (max-width: 767px) {
  .cg-hero-v2 {
    --cg-hv2-gutter: 24px;
    --cg-hv2-nav-size: 46px;
    --cg-hv2-band: 138px;
  }

  .cg-hero-v2__media { transform-origin: 62% 60%; }

  /* a touch more wash: small type needs the extra contrast */
  .cg-hero-v2__scrim {
    background:
      radial-gradient(80% 52% at 10% 2%, rgba(242, 10, 99, 0.16) 0%, rgba(242, 10, 99, 0) 66%),
      linear-gradient(
        178deg,
        rgba(255, 255, 255, 0.99) 0%,
        rgba(255, 255, 255, 0.965) 40%,
        rgba(255, 255, 255, 0.72) 56%,
        rgba(255, 255, 255, 0.16) 76%,
        rgba(255, 255, 255, 0) 92%
      ),
      linear-gradient(0deg, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0) 22%);
  }

  .cg-hero-v2__inner { padding-top: clamp(64px, 10vh, 96px); }

  .cg-hero-v2__eyebrow {
    gap: 0.6em;
    font-size: 10px;
    letter-spacing: 0.3em;
    margin-bottom: 16px;
  }

  .cg-hero-v2__title {
    font-size: clamp(2.2rem, 10.6vw, 3.1rem);
    line-height: 1.02;
  }

  /* Per-slide opt-out: drop the authored desktop breaks so a long heading
     wraps to the phone's measure instead of forcing awkward short lines. */
  .cg-hero-v2__title--wrap-mobile br { display: none; }

  .cg-hero-v2__text {
    margin-top: 18px;
    font-size: 15px;
    line-height: 1.6;
    max-width: 34ch;
  }

  /* compact 2 x 2 grid */
  .cg-hero-v2__features {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 16px;
    margin-top: 30px;
    max-width: 340px;
  }

  .cg-hero-v2__feature {
    padding-left: 14px;
    font-size: 12.5px;
    gap: 9px;
  }

  /* every left-column cell loses its rule, not just the first */
  .cg-hero-v2__feature:nth-child(odd) {
    padding-left: 0;
    border-left: 0;
  }

  .cg-hero-v2__icon { width: 19px; height: 19px; }

  /* Buttons go full-width and stack. They are never hidden — the
     hero's min-height simply yields to the taller content. */
  .cg-hero-v2__actions {
    margin-top: 26px;
    gap: 10px;
  }

  .cg-hero-v2__btn {
    width: 100%;
    padding: 15px 24px;
    font-size: 12px;
  }

  .cg-hero-v2__scroll { gap: 12px; }
  .cg-hero-v2__mouse { width: 15px; height: 25px; }
  .cg-hero-v2__scroll-label { font-size: 9px; letter-spacing: 0.24em; }

  .cg-hero-v2__bar { bottom: 24px; gap: 12px; }
  .cg-hero-v2__controls { gap: 10px; }
  .cg-hero-v2__nav svg { width: 18px; height: 18px; }
  .cg-hero-v2__nav-rule { display: none; }

  /* With progress on, the bar becomes two rows — ticks across the top,
     scroll cue and arrows beneath — so the three can never collide
     however many slides the repeater holds. */
  .cg-hero-v2.has-progress .cg-hero-v2__bar { flex-wrap: wrap; }

  .cg-hero-v2.has-progress .cg-hero-v2__progress {
    order: -1;
    flex: 1 0 100%;
    margin-right: 0;
    padding: 0;
    gap: 8px 12px;
  }

  .cg-hero-v2.has-progress { --cg-hv2-band: 188px; }

  .cg-hero-v2__tick { font-size: 10px; letter-spacing: 0.14em; gap: 6px; }
  .cg-hero-v2__tick-track { width: var(--cg-hv2-tick-w, 22px); }

  .cg-hero-v2__glow { left: -30vw; bottom: -30vw; width: 90vw; height: 90vw; }
}

/* ---------- 5b. very narrow phones ---------- */
@media (max-width: 359px) {
  .cg-hero-v2__features { grid-template-columns: minmax(0, 1fr); max-width: none; }
  .cg-hero-v2__feature,
  .cg-hero-v2__feature:nth-child(odd) { padding-left: 0; border-left: 0; }
  .cg-hero-v2__scroll-label { display: none; }
  .cg-hero-v2__tick-track { width: 16px; }
}

/* ---------- 6. MOBILE / SMALL LANDSCAPE ----------
   Short viewport: shrink the vertical rhythm, drop the scroll cue
   so the controls and copy never collide.
   The min-height floor drops to 380px, but it is still only a FLOOR —
   a slide with more content than that grows past it.            */
@media (max-height: 560px) and (orientation: landscape) {
  .cg-hero-v2 {
    --cg-hv2-min-h: 380px;
    --cg-hv2-gutter: 40px;
    --cg-hv2-align: center;
    --cg-hv2-content-max: 62%;
    --cg-hv2-band: 66px;
    --cg-hv2-nav-size: 42px;
  }

  .cg-hero-v2.has-progress { --cg-hv2-band: 86px; }

  .cg-hero-v2__inner { padding-top: 44px; }

  .cg-hero-v2__eyebrow {
    margin-bottom: 12px;
    font-size: 9.5px;
    letter-spacing: 0.26em;
  }

  .cg-hero-v2__title { font-size: clamp(1.7rem, 4.1vw, 2.3rem); }
  .cg-hero-v2__text { margin-top: 10px; font-size: 13.5px; line-height: 1.5; max-width: 44ch; }
  .cg-hero-v2__text br { display: none; }

  .cg-hero-v2__features {
    display: flex;
    grid-template-columns: none;
    max-width: none;
    gap: 12px;
    margin-top: 16px;
  }

  .cg-hero-v2__feature,
  .cg-hero-v2__feature:nth-child(odd) {
    padding-left: 14px;
    border-left: 1px solid var(--cg-hv2-rule, rgba(11, 20, 56, 0.14));
    font-size: 11.5px;
  }

  .cg-hero-v2__feature:first-child { padding-left: 0; border-left: 0; }

  .cg-hero-v2__actions { margin-top: 16px; gap: 10px; }
  .cg-hero-v2__btn { width: auto; padding: 12px 22px; font-size: 11.5px; }

  .cg-hero-v2__scroll { display: none; }
  .cg-hero-v2__bar { bottom: 20px; }
}

/* ---------- motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  .cg-hero-v2__slide,
  .cg-hero-v2__media,
  .cg-hero-v2__eyebrow,
  .cg-hero-v2__title,
  .cg-hero-v2__text,
  .cg-hero-v2__features,
  .cg-hero-v2__actions,
  .cg-hero-v2__btn,
  .cg-hero-v2__btn svg,
  .cg-hero-v2__nav,
  .cg-hero-v2__nav svg {
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }

  .cg-hero-v2__media { transform: none !important; }
  .cg-hero-v2__mouse-wheel { animation: none; }
  .cg-hero-v2__nav:active { transform: none; }
  .cg-hero-v2__btn:active { transform: none; }
  .cg-hero-v2__tick-fill { animation: none !important; transform: scaleX(1); }
}

/* ---------- forced colours ---------- */
@media (forced-colors: active) {
  .cg-hero-v2__nav,
  .cg-hero-v2__btn { border-color: ButtonBorder; background: ButtonFace; color: ButtonText; }
  .cg-hero-v2__scrim { display: none; }
}