@font-face {
    font-display: swap;
    font-family: 'DIN-Cond';
    font-weight: 900;
    font-style: normal;
    src: url(/wp-content/themes/checkpoint-theme-v2/fonts/DINCondensed-Black.woff2) format("woff2"), url(/wp-content/themes/checkpoint-theme-v2/fonts/DINPro-CondBlack.otf) format("opentype")
}

.cp-hero {
  /* Tokens – map these to the site's design tokens if needed */
  --cp-plum: #33002B;
  --cp-plum-deep:  #471940;
  --cp-hero-panel: rgba(29, 0, 0, 0.12);
  --cp-hero-bg-colour: #d4105a;
  --cp-display: 'DIN-Cond', 'Barlow Condensed', 'Arial Narrow', sans-serif;
  /* Mobile type fit: em width of the widest mobile line (+ padding). Set per banner in the markup. */
  --cp-hero-fit: 7.9;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  width: 100%;
  min-height: 470px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  color: #fff;
  /* Background covers the banner at any size (crops, never stretches) */
  background-color: var(--cp-hero-bg-colour);
  background-repeat: repeat;
  background-size: 288px 288px;
  background-image:
    radial-gradient(ellipse 45% 250% at center, transparent 40%, #880838 120%),
    url("/wp-content/uploads/grid-effect-tile-48px-red.png");
  background-repeat: no-repeat, repeat;
  background-size: cover, 288px 288px;
  background-position: center, left top;
}
.cp-hero *,
.cp-hero *::before,
.cp-hero *::after { box-sizing: border-box; }
.cp-hero .container {
  padding-top: 5rem;
  padding-bottom: 4rem;
}
.cp-hero__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 1000px;
}

/* Headline (any tag: h1 / h2 / div – styling is class-based) -------------- */
.cp-hero__title {
  position: relative;
  isolation: isolate;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  font-family: var(--cp-display);
  font-weight: 900;
  font-size: clamp(2.5rem, 7.25vw, 4.25rem); 
  line-height: 1;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: #fff;
}

/* Load-flash guard: while hero.js is loading the headline is hidden, so the
   end state never flashes before the animation starts. If the script never
   runs, a CSS failsafe reveals the static end state after 3s. */
@media (prefers-reduced-motion: no-preference) {
  .cp-hero:not(.cp-hero--ready) .cp-hero__title {
    visibility: hidden;
    animation: cp-hero-failsafe 0s linear 3s forwards;
  }
}
@keyframes cp-hero-failsafe { to { visibility: visible; } }

/* Line 1: rotating phrases ----------------------------------------------- */
.cp-hero__phrases {
  position: relative;
  z-index: 0;
  display: grid;
  justify-items: start;
  max-width: 100%;
}
.cp-hero__panel {
  position: absolute;
  inset: 0;
  /* top: -10px;
  bottom: 5px; */
  background: var(--cp-hero-panel);
  transform-origin: 0 0;
}
.cp-hero__phrase {
  grid-area: 1 / 1;
  position: relative;
  display: block;
  white-space: nowrap;
  padding: 0.02em 12px 0.084em;   /* visually centres DIN caps in the bar (Figma cap-trim) */
}
/* Without JS only the last phrase (the end state) shows */
.cp-hero:not(.cp-hero--enhanced) .cp-hero__phrase:not(:last-child) { display: none; }
.cp-hero:not(.cp-hero--enhanced) .cp-hero__phrase { white-space: normal; }
.cp-hero__phrase.is-idle { visibility: hidden; }

/* Word masks (built by hero.js): .cp-hero__m clips, .cp-hero__w moves */
.cp-hero__m {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-right: 0.05em;      /* stops the last glyph being clipped by negative tracking */
  margin-right: -0.05em;
}
.cp-hero__w {
  display: inline-block;
  white-space: nowrap;
  will-change: transform;
}
/* Phrases clip per line: each .cp-hero__ln is a clip box. */
.cp-hero__ln {
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
  white-space: nowrap;
  padding-right: 0.05em;
  margin-right: -0.05em;
}
.cp-hero__phrases .cp-hero__m { overflow: visible; }
.cp-hero__phrase--break .cp-hero__ln { display: block; }        /* two lines everywhere */

/* Line 2: plum title ---------------------------------------------------------- */
.cp-hero__plum {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  padding: 0.02em 12px 0.084em;
}
.cp-hero__plum-bg {
  position: absolute;
  inset: 0;
  /* top: -10px !important;
  bottom: 5px !important; */
  background: var(--cp-plum);
}
.cp-hero__plum-text {
  position: relative;
  display: block;
  white-space: nowrap;
}
@media (min-width: 768px) {
  .cp-hero__br-mobile { display: none; }   /* plum title stays on one line on desktop */
}

/* Gate corners (two halves of the 20x24 gate SVG) */
.cp-hero__gate {
  position: absolute;
  z-index: 2;
  top: -20px;
  width: 10px;
  height: 24px;
  display: block;
  line-height: 0;
}
.cp-hero__gate svg { display: block; }
.cp-hero__gate--left  { left: -14px; }
.cp-hero__gate--right { right: -14px; }

/* Pause / play control (WCAG 2.2.2) – added by hero.js --------------------- */
.cp-hero__toggle {
  position: absolute;
  right: 24px;
  bottom: 24px;
  z-index: 3;
  width: 44px;
  height: 44px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 0;
  background: rgba(51, 0, 43, 0.35);
  color: #fff;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.cp-hero__toggle:hover { background: var(--cp-plum); }
.cp-hero__toggle:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.cp-hero__toggle[hidden] { display: none; }
.cp-hero__toggle svg { display: block; width: 14px; height: 14px; fill: currentColor; }

/* Screen-reader text (added by hero.js) */
.cp-hero__sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/*  Buttons */

.cp-hero .btn {
  padding: 0.75rem 1.25rem;
  border-radius: 0;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -1%;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.cp-hero .btn-cp-plum {
  background: var(--cp-plum);
  color: #fff;
  border: 1px solid var(--cp-plum);
}
.cp-hero .btn-cp-plum:hover,
.cp-hero .btn-cp-plum:focus {
  background: var(--cp-plum-deep);
  border-color: var(--cp-plum-deep);
  color: #fff;
}
.cp-hero .btn-cp-outline {
  background: transparent;
  color: #fff;
  border: 1px solid #fff;
}
.cp-hero .btn-cp-outline:hover,
.cp-hero .btn-cp-outline:focus { background: #fff; color: var(--cp-plum); }

.cp-hero .btn-cp-plum::after {
content: "";
display: inline-block;
width: 20px;
height: 15px;
vertical-align: middle;
margin-left: .2rem;
transition: transform .15s ease;
background: url("/wp-content/themes/checkpoint-theme-v2/images/svg/btn-arrow.svg") no-repeat center right;
}
.cp-hero .btn-cp-plum:hover::after { transform: translateX(3px); }
/* Responsive ----------------------------------------------------------------- */
@media (max-width: 767px) {
  .cp-hero {
    min-height: 0;
  }
    .cp-hero .container {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
  .cp-hero__toggle { right: 16px; bottom: 16px; }
  /* Type scales so the widest mobile line always fits, capped at 48px */
  .cp-hero__title { font-size: min(calc((100vw - 74px) / var(--cp-hero-fit)), 48px); }
  .cp-hero__phrase--break-mobile .cp-hero__ln { display: block; }
}