/* ============================================================
   DJC_HeroDeck
   full-bleed hero that turns through slides. the component owns the
   stack, the crossfade, the controls, the fixtures, the entrance
   motion and -- in data mode -- every layout, button and heading.
   the page paints the background art and reskins through the --hd-*
   knobs below. nothing here needs campaign-base, but every knob reads
   its tokens first when they are present.
   ============================================================ */
.djc-hero-deck {
  /* knobs -- set these on the page to reskin, never restyle the parts */
  --hd-min-height: min(88vh, 780px);
  --hd-top-offset: 0px;                       /* room a fixed bar takes at the top */
  --hd-surface: var(--brand-dark, #1b1b4a);   /* behind any background art */
  --hd-ink: #ffffff;
  --hd-content-max: var(--max-xl, 2000px);
  --hd-gutter: var(--padding-md, 25px);
  --hd-scrim: radial-gradient(ellipse at 50% 58%, rgb(12 6 34 / 0.72) 0%, rgb(12 6 34 / 0.38) 42%, rgb(12 6 34 / 0.2) 72%);
  --hd-arrow-bkg: rgb(255 255 255 / 0.16);
  --hd-arrow-bkg-hover: rgb(255 255 255 / 0.3);
  --hd-dot: rgb(255 255 255 / 0.38);
  --hd-dot-active: #ffffff;
  --hd-fade: 0.7s;
  /* data-mode type and colour */
  --hd-font-display: var(--font-1, inherit);
  --hd-font-ui: var(--font-ui, var(--font-2, inherit));
  --hd-accent: var(--brand-3, #ef6a1c);              /* the script word */
  --hd-accent-bkg: var(--gradientX3, linear-gradient(to right, #ef6a1c, #bc2622));
  --hd-accent-ink: #ffffff;
  --hd-accent-shadow: 0 4px 15px rgb(239 106 28 / 0.3);
  --hd-glass-bkg: linear-gradient(180deg, rgb(255 255 255 / 0.24), rgb(255 255 255 / 0.12));
  --hd-glass-bkg-hover: rgb(255 255 255 / 0.3);
  --hd-glass-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.4), 0 8px 24px rgb(7 17 38 / 0.28);
  --hd-card-bkg: rgb(255 255 255 / 0.1);
  --hd-card-radius: var(--radius-md, 16px);
  --hd-tag-bkg: rgb(27 27 74 / 0.92);                /* a spread's label; set per [data-book] */
  --hd-cue-bkg: #ffffff;
  --hd-cue-ink: var(--color-3, #ef6a1c);
  --hd-cue-ink-hover: var(--color-3b, #bc2622);
  /* the script face -- the badge's circled mark and a showcase kicker */
  --hd-font-script: var(--hd-font-display);
  /* the badge heading every slide */
  --hd-badge-bkg: var(--hd-accent-bkg);
  --hd-badge-ink: var(--hd-accent-ink);
  --hd-badge-radius: 4px;
  --hd-badge-mark-bkg: #ffffff;
  --hd-badge-mark-ink: var(--hd-accent);
  /* what a tone: 'light' slide switches to, and the controls with it */
  --hd-light-ink: var(--brand-dark, #1b1b4a);
  --hd-light-glass-bkg: rgb(27 27 74 / 0.06);
  --hd-light-glass-bkg-hover: rgb(27 27 74 / 0.12);
  --hd-light-glass-shadow: inset 0 0 0 1px rgb(27 27 74 / 0.28);
  --hd-light-arrow-bkg: rgb(27 27 74 / 0.08);
  --hd-light-arrow-bkg-hover: rgb(27 27 74 / 0.16);
  --hd-light-dot: rgb(27 27 74 / 0.28);
  --hd-light-dot-active: var(--brand-dark, #1b1b4a);

  position: relative;
  width: 100%;
  padding-top: var(--hd-top-offset);
  color: var(--hd-ink);
  /* hands horizontal finger drags to the swipe handler, keeps vertical
     scrolling with the browser */
  touch-action: pan-y;
}

/* ============================================================
   THE STACK
   every slide is a full-width flex item pulled back over the one
   before it, so the track takes the tallest slide's height and the
   hero never resizes as the deck turns. no absolute positioning at
   this size: a wrapper whose children are all absolute collapses to
   zero height inside the cms grid rows.
   ============================================================ */
.djc-hero-deck__track {
  position: relative;
  display: flex;
  align-items: stretch;
}

.djc-hero-deck__slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  min-height: var(--hd-min-height);
}

.djc-hero-deck .djc-hero-deck__slide {
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--hd-fade) ease, visibility 0s linear var(--hd-fade);
}

.djc-hero-deck .djc-hero-deck__slide + .djc-hero-deck__slide {
  margin-left: -100%;
}

/* visibility, not display -- a hidden slide keeps its box ( the stack
   height ) and its buttons drop out of the tab order for free */
.djc-hero-deck .djc-hero-deck__slide.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
  transition: opacity var(--hd-fade) ease, visibility 0s linear 0s;
}

/* below a laptop the tallest slide can be nearly twice the shortest once
   its content stacks, so the deck sizes to whichever slide is up instead.
   the active slide stays in flow; the rest lift out over it. */
@media (max-width: 1024px) {
  .djc-hero-deck .djc-hero-deck__slide {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
  }

  .djc-hero-deck .djc-hero-deck__slide + .djc-hero-deck__slide {
    margin-left: 0;
  }

  .djc-hero-deck .djc-hero-deck__slide.is-active {
    position: relative;
  }
}

/* before the deck hydrates only the first slide shows, so the page never
   flashes a column of stacked slides. !important because the cms can give
   authored divs .row.has-children, whose display rule out-ranks this. */
:not(.djc-hero-deck__track) > .djc-hero-deck__slide ~ .djc-hero-deck__slide {
  display: none !important;
}

/* ============================================================
   SLIDE PARTS
   ============================================================ */
/* the background clips, the deck does not -- a bottom fixture hangs off
   the lower edge and would be cut by an overflow here */
.djc-hero-deck__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background-color: var(--hd-surface);
  background-size: cover;
  background-position: center;
}

/* one scrim over every background so light type clears whatever art is
   behind it; a slide can re-point --hd-scrim for its own art */
.djc-hero-deck__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--hd-scrim);
}

/* two art halves side by side ( a diptych ) */
.djc-hero-deck__bg--split {
  display: flex;
}

.djc-hero-deck__bg--split > * {
  flex: 1 1 50%;
  min-width: 0;
  background-size: cover;
  background-position: center;
}

/* the content takes the free height and centres in it, which is what
   leaves the foot row at the same height on every slide */
.djc-hero-deck__body {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  max-width: var(--hd-content-max);
  margin: 0 auto;
  padding: clamp(28px, 3.4vw, 80px) var(--hd-gutter) clamp(14px, 1.6vw, 26px);
}

/* the badge row. like the foot, it is built into every slide but holds
   the same geometry, so it reads as one badge the deck turns behind */
.djc-hero-deck__head {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: var(--hd-content-max);
  margin: 0 auto;
  padding: clamp(18px, 2.2vw, 30px) var(--hd-gutter) 0;
}

.djc-hero-deck__head + .djc-hero-deck__body {
  padding-top: clamp(16px, 2vw, 40px);
}

/* authored once per slide so it CAN differ, held at a fixed geometry so
   it reads as a fixture the deck turns behind. its bottom padding is the
   clearance for the dots. */
.djc-hero-deck__foot {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  width: 100%;
  max-width: var(--hd-content-max);
  margin: 0 auto;
  padding: 0 var(--hd-gutter) clamp(56px, 4.6vw, 70px);
}

/* a line under the foot buttons, on a row of its own */
.djc-hero-deck__foot-note {
  flex: 1 1 100%;
  margin: 2px 0 0;
  font-family: var(--hd-font-ui);
  font-size: 15px;
  font-style: italic;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  color: var(--hd-ink);
  opacity: 0.88;
}

/* ============================================================
   CONTROLS
   ============================================================ */
.djc-hero-deck__arrow {
  position: absolute;
  top: 50%;
  z-index: 7;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--hd-arrow-bkg);
  color: var(--hd-ink);
  font-size: 20px;
  line-height: 1;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.45);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  cursor: pointer;
  transform: translateY(-50%);
  transition: background 0.25s ease, transform 0.25s ease;
}

.djc-hero-deck__arrow:hover {
  background: var(--hd-arrow-bkg-hover);
  transform: translateY(-50%) scale(1.07);
}

.djc-hero-deck__arrow--prev {
  left: clamp(8px, 2vw, 24px);
}

.djc-hero-deck__arrow--next {
  right: clamp(8px, 2vw, 24px);
}

.djc-hero-deck__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(14px, 2.6vw, 26px);
  z-index: 7;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.djc-hero-deck__dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--hd-dot);
  box-shadow: 0 1px 4px rgb(6 3 24 / 0.4);
  cursor: pointer;
  transition: background 0.25s ease, transform 0.25s ease;
}

.djc-hero-deck__dot.is-active {
  background: var(--hd-dot-active);
  transform: scale(1.34);
}

.djc-hero-deck__arrow:focus-visible,
.djc-hero-deck__dot:focus-visible {
  outline: 3px solid var(--hd-dot-active);
  outline-offset: 3px;
}

/* the arrows are a pointer affordance; on a phone the swipe is the real
   control and two glass circles only cover the artwork */
@media (max-width: 680px) {
  .djc-hero-deck__arrow {
    display: none;
  }
}

/* ============================================================
   FIXTURES
   held by the deck, outside the slide stack, so they never move while
   the slides change behind them
   ============================================================ */
.djc-hero-deck .djc-hero-deck__fixture {
  position: absolute;
  z-index: 5;
}

.djc-hero-deck .djc-hero-deck__fixture--top-left {
  top: calc(var(--hd-top-offset) + clamp(8px, 1.8vw, 22px));
  left: clamp(12px, 3vw, 40px);
}

/* straddles the lower edge of the hero */
.djc-hero-deck .djc-hero-deck__fixture--bottom {
  left: 50%;
  bottom: -26px;
  z-index: 8;
  transform: translateX(-50%);
}

@media (max-width: 760px) {
  /* a slide taller than the minimum starts at the top and would run under
     a top fixture */
  .djc-hero-deck .djc-hero-deck__body {
    padding-top: 78px;
  }

  /* a badge row takes that clearance instead, and the body follows it */
  .djc-hero-deck .djc-hero-deck__head {
    padding-top: 78px;
  }

  .djc-hero-deck .djc-hero-deck__head + .djc-hero-deck__body {
    padding-top: 18px;
  }

  /* the bottom fixture sits on the middle dots at phone padding, so the
     dots and the foot row above them both move up */
  .djc-hero-deck--has-bottom-fixture .djc-hero-deck__dots {
    bottom: 56px;
  }

  .djc-hero-deck--has-bottom-fixture .djc-hero-deck__foot {
    padding-bottom: 92px;
  }
}

/* ============================================================
   DATA MODE -- SHARED PARTS
   every heading sets its own case, margin and tracking: sitewide
   sheets style bare h1-h3 ( one uppercases them ) and a class out-ranks
   an element selector, so the deck reads the same on any template
   ============================================================ */
.djc-hero-deck__title,
.djc-hero-deck__heading-title,
.djc-hero-deck__feature-title,
.djc-hero-deck__step-title {
  margin: 0;
  padding: 0;
  font-family: var(--hd-font-display);
  font-weight: 800;
  letter-spacing: normal;
  text-transform: none;
  color: var(--hd-ink);
}

.djc-hero-deck__title em,
.djc-hero-deck__heading-title em,
.djc-hero-deck__feature-title em {
  font-style: italic;
}

.djc-hero-deck__eyebrow {
  display: block;
  margin: 0 0 12px;
  font-family: var(--hd-font-ui);
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.6;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.78);
}

.djc-hero-deck__heading {
  margin-bottom: clamp(14px, 2vw, 24px);
  text-align: center;
  color: var(--hd-ink);
  --anim-y: -24px;
}

.djc-hero-deck__heading-title {
  font-size: clamp(26px, 3.8vw, 42px);
  line-height: 1.1;
}

.djc-hero-deck__sub {
  max-width: 640px;
  margin: 12px auto 0;
  font-size: clamp(15px, 2vw, 18px);
  line-height: 1.6;
  color: rgb(255 255 255 / 0.84);
}

/* split background halves -- the page paints each through [data-half] */
.djc-hero-deck__half {
  display: block;
}

/* ============================================================
   DATA MODE -- BUTTONS
   sm is the foot-row pill, md the in-slide ask, lg the lone ask.
   glass and accent are the two surfaces; colours are knobs
   ============================================================ */
.djc-hero-deck__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0;
  border: 0;
  border-radius: var(--radius-pill, 40px);
  font-family: var(--hd-font-ui);
  font-weight: 800;
  line-height: 1.3;
  white-space: nowrap;
  text-decoration: none;
  text-transform: none;
  color: var(--hd-ink);
  cursor: pointer;
  transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}

/* a gated button waits in the dom; the display rule above would beat the
   browser's own [hidden] */
.djc-hero-deck__btn[hidden] {
  display: none;
}

.djc-hero-deck__btn:hover {
  transform: translateY(-2px);
}

.djc-hero-deck__btn:focus-visible {
  outline: 3px solid var(--hd-dot-active);
  outline-offset: 3px;
}

.djc-hero-deck__btn--sm {
  padding: 12px 22px;
  font-size: 16px;
  font-weight: 700;
}

.djc-hero-deck__btn--md {
  height: 47px;
  padding: 0 20px;
  font-size: 16px;
}

.djc-hero-deck__btn--lg {
  height: 55px;
  min-width: min(350px, 100%);
  padding: 0 25px;
  font-size: 23px;
}

.djc-hero-deck__btn--glass {
  background: var(--hd-glass-bkg);
  box-shadow: var(--hd-glass-shadow);
}

.djc-hero-deck__btn--glass:hover {
  background: var(--hd-glass-bkg-hover);
}

.djc-hero-deck__btn--accent {
  background: var(--hd-accent-bkg);
  box-shadow: var(--hd-accent-shadow);
  color: var(--hd-accent-ink);
}

.djc-hero-deck__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

/* ============================================================
   DATA MODE -- LOCKUP
   ============================================================ */
.djc-hero-deck__lockup {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 4vw, 56px);
}

/* cut-outs carry their own transparent margin, so a drop-shadow filter
   rather than box chrome. tilt and entrance follow position, not book */
.djc-hero-deck__cover {
  flex: 0 0 auto;
  width: clamp(150px, 25vw, 380px);
  --anim-y: 0px;
  --anim-d: 0.08s;
}

.djc-hero-deck__cover img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 26px 40px rgb(6 3 24 / 0.5));
}

.djc-hero-deck__cover:first-child {
  --anim-x: -54px;
}

.djc-hero-deck__cover:first-child img {
  transform: rotate(-5deg);
}

.djc-hero-deck__cover:last-child {
  --anim-x: 54px;
}

.djc-hero-deck__cover:last-child img {
  transform: rotate(5deg);
}

.djc-hero-deck__lockup-mid {
  flex: 1 1 380px;
  max-width: 620px;
  text-align: center;
  color: var(--hd-ink);
}

/* ============================================================
   DATA MODE -- BADGE
   louder than a caption, quieter than a button: a plain bar, square
   against the pill buttons. a **word** in it is the mark -- a circle
   in the script face that sits over the bar's leading edge
   ============================================================ */
.djc-hero-deck__badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  padding: 9px 26px;
  border-radius: var(--hd-badge-radius);
  background: var(--hd-badge-bkg);
  font-family: var(--hd-font-ui);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.6;
  letter-spacing: 1.8px;
  text-align: center;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--hd-badge-ink);
}

/* the circle is sized off the bar and hangs past both of its edges, so
   the bar makes room on its left for it */
.djc-hero-deck__badge--marked {
  margin-left: 30px;
  padding-left: 46px;
}

.djc-hero-deck__badge strong {
  position: absolute;
  top: 50%;
  left: -30px;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--hd-badge-mark-bkg);
  box-shadow: 0 6px 16px rgb(6 3 24 / 0.28);
  font-family: var(--hd-font-script);
  font-size: 27px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  color: var(--hd-badge-mark-ink);
  transform: translateY(-50%) rotate(-8deg);
}

.djc-hero-deck__title {
  font-size: clamp(36px, 6.4vw, 72px);
  line-height: 1.02;
  --anim-d: 0.26s;
}

.djc-hero-deck__script {
  display: block;
  font-family: var(--hd-font-display);
  font-weight: 800;
  font-size: 1.18em;
  line-height: 0.95;
  letter-spacing: -0.4px;
  color: var(--hd-accent);
}

.djc-hero-deck__tag {
  margin: 16px 0 26px;
  font-family: var(--hd-font-ui);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(17px, 2.4vw, 22px);
  line-height: 1.6;
  color: var(--hd-ink);
  --anim-d: 0.36s;
}

/* ============================================================
   DATA MODE -- STEPS
   capped so six cards break three and three instead of one
   unreadable row under the arrows
   ============================================================ */
.djc-hero-deck__steps {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(10px, 1.2vw, 14px);
  max-width: 1020px;
  margin: 0 auto;
}

.djc-hero-deck__step {
  flex: 1 1 270px;
  max-width: 320px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: clamp(12px, 1.5vw, 16px) clamp(10px, 1.6vw, 16px);
  border-radius: var(--hd-card-radius);
  background: var(--hd-card-bkg);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.22);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  text-align: center;
  color: var(--hd-ink);
  --anim-y: 36px;
}

.djc-hero-deck__step:nth-child(1) { --anim-d: 0.14s; }
.djc-hero-deck__step:nth-child(2) { --anim-d: 0.19s; }
.djc-hero-deck__step:nth-child(3) { --anim-d: 0.24s; }
.djc-hero-deck__step:nth-child(4) { --anim-d: 0.29s; }
.djc-hero-deck__step:nth-child(5) { --anim-d: 0.34s; }
.djc-hero-deck__step:nth-child(n+6) { --anim-d: 0.39s; }

.djc-hero-deck__step-num {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--hd-accent-bkg);
  color: var(--hd-accent-ink);
  font-family: var(--hd-font-display);
  font-weight: 800;
  font-size: 15px;
}

.djc-hero-deck__step-title {
  font-size: 17px;
  line-height: 1.1;
}

.djc-hero-deck__step-body {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.45;
  color: rgb(255 255 255 / 0.82);
}

.djc-hero-deck__split {
  display: block;
  font-family: var(--hd-font-ui);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  color: rgb(255 255 255 / 0.8);
}

/* page scans are low-contrast on a dark ground, so they get a light card */
.djc-hero-deck__step-arts {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  margin-top: auto;
  padding-top: 12px;
}

.djc-hero-deck__step-arts img {
  flex: 0 1 auto;
  min-width: 0;
  width: auto;
  height: 84px;
  max-width: 48%;
  object-fit: contain;
  border-radius: 5px;
  background: rgb(255 255 255 / 0.9);
  padding: 3px;
  box-shadow: 0 4px 14px rgb(6 3 24 / 0.4);
}

/* ============================================================
   DATA MODE -- SPREADS
   the back sheet is out of flow and the front one holds the box
   ============================================================ */
.djc-hero-deck__spreads {
  text-align: center;
}

.djc-hero-deck__spread-stack {
  position: relative;
  width: 100%;
  max-width: 640px;
  margin: 0 auto clamp(20px, 3vw, 32px);
  padding: clamp(20px, 3.4vw, 40px) clamp(20px, 3.4vw, 44px) 0 0;
}

.djc-hero-deck__spread {
  position: relative;
  z-index: 2;
  /* the resting angle rides --anim-r through the entrance transform -- a
     transform here would out-rank the entrance offset */
  --anim-r: -1.4deg;
  --anim-x: -44px;
  --anim-y: 0px;
  --anim-d: 0.18s;
}

.djc-hero-deck__spread img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 14px 30px rgb(27 27 74 / 0.22));
}

/* second in the dom, behind in the stack -- peeking out top-right */
.djc-hero-deck__spread + .djc-hero-deck__spread {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  width: 86%;
  --anim-r: 2.5deg;
  --anim-x: 44px;
  --anim-d: 0.1s;
}

.djc-hero-deck__spread + .djc-hero-deck__spread img {
  filter: drop-shadow(0 14px 30px rgb(27 27 74 / 0.22)) brightness(0.82) saturate(0.9);
}

/* the image carries a filter, which paints it in its own layer -- without
   a z-index the tag disappears under the artwork. only the front sheet is
   labelled */
.djc-hero-deck__spread-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  padding: 5px 12px;
  border-radius: 4px;
  background: var(--hd-tag-bkg);
  color: var(--hd-ink);
  font-family: var(--hd-font-ui);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 1.1px;
  text-transform: uppercase;
}

.djc-hero-deck__spread + .djc-hero-deck__spread .djc-hero-deck__spread-tag {
  display: none;
}

.djc-hero-deck__spreads .djc-hero-deck__actions {
  --anim-y: 26px;
  --anim-d: 0.3s;
}

.djc-hero-deck__note {
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: rgb(255 255 255 / 0.72);
  --anim-d: 0.38s;
}

/* ============================================================
   DATA MODE -- FEATURE
   ============================================================ */
.djc-hero-deck__feature {
  max-width: var(--max-sm, 900px);
  margin: 0 auto;
  text-align: center;
  color: var(--hd-ink);
}

.djc-hero-deck__feature .djc-hero-deck__eyebrow {
  --anim-y: -16px;
  --anim-d: 0.1s;
}

.djc-hero-deck__feature-title {
  font-size: clamp(30px, 5.4vw, 54px);
  line-height: 1.1;
  --anim-y: -22px;
  --anim-d: 0.18s;
}

.djc-hero-deck__feature-sub {
  margin: 14px 0 26px;
  font-family: var(--hd-font-ui);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(16px, 2.4vw, 21px);
  line-height: 1.6;
  color: rgb(255 255 255 / 0.9);
  --anim-d: 0.28s;
}

/* the ask settles last, and is the only thing that scales */
.djc-hero-deck__feature .djc-hero-deck__actions {
  --anim-y: 26px;
  --anim-s: 0.94;
  --anim-d: 0.38s;
}

/* end: the statement sits in the right-hand part of the slide, over art the
   page paints there, held in from the edge so the next arrow ( 48px, up to
   24px in ) never sits on it. on a phone it drops to the foot of the slide
   instead, centred, so the page can put its art above it */
.djc-hero-deck__feature--end {
  width: min(44%, 560px);
  max-width: none;
  margin: 0 clamp(64px, 7vw, 140px) 0 auto;
  text-align: right;
}

.djc-hero-deck__feature--end .djc-hero-deck__actions {
  justify-content: flex-end;
}

@media (max-width: 760px) {
  .djc-hero-deck__feature--end {
    width: auto;
    margin: auto 0 0;
    text-align: center;
  }

  .djc-hero-deck__feature--end .djc-hero-deck__actions {
    justify-content: center;
  }
}

/* ============================================================
   DATA MODE -- SHOWCASE
   the words and a pair of product shots. side: words left, the pair
   overlapping on the right. stack: words centred over the pair laid
   side by side. flank: words centred between the pair, one shot each
   side and tilted out, as lockup sets its covers; on a phone it falls
   back to stack. title and kicker take a gradient through --hd-title-fill
   / --hd-kicker-fill ( set the matching -ink knob to transparent too )
   ============================================================ */
.djc-hero-deck__showcase {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3.4vw, 56px);
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
}

.djc-hero-deck__showcase--stack {
  flex-direction: column;
  gap: clamp(14px, 2vw, 26px);
  text-align: center;
}

.djc-hero-deck__showcase-words {
  flex: 1 1 0;
  min-width: 0;
  color: var(--hd-ink);
}

.djc-hero-deck__showcase--side .djc-hero-deck__showcase-words {
  max-width: 520px;
}

.djc-hero-deck__showcase--stack .djc-hero-deck__showcase-words,
.djc-hero-deck__showcase--flank .djc-hero-deck__showcase-words {
  flex: 0 0 auto;
  max-width: 760px;
}

.djc-hero-deck__kicker,
.djc-hero-deck__showcase-title {
  -webkit-background-clip: text;
  background-clip: text;
}

.djc-hero-deck__kicker {
  margin: 0 0 6px;
  padding: 0 0.12em;
  background-image: var(--hd-kicker-fill, none);
  font-family: var(--hd-font-script);
  font-size: clamp(44px, 6vw, 80px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: normal;
  text-transform: none;
  color: var(--hd-kicker-ink, var(--hd-accent));
  --anim-y: -22px;
  --anim-d: 0.1s;
}

.djc-hero-deck__showcase-title {
  margin: 0;
  padding: 0;
  background-image: var(--hd-title-fill, none);
  font-family: var(--hd-font-display);
  font-weight: 800;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.05;
  letter-spacing: normal;
  text-transform: none;
  color: var(--hd-title-ink, var(--hd-ink));
  --anim-d: 0.2s;
}

.djc-hero-deck__showcase--stack .djc-hero-deck__showcase-title,
.djc-hero-deck__showcase--flank .djc-hero-deck__showcase-title {
  max-width: 15em;
  margin: 0 auto;
  text-wrap: balance;
  font-size: clamp(26px, 3.4vw, 42px);
  line-height: 1.12;
}

.djc-hero-deck__showcase-tag {
  margin: 16px 0 0;
  font-family: var(--hd-font-ui);
  font-weight: 600;
  font-size: clamp(17px, 2vw, 25px);
  line-height: 1.4;
  color: var(--hd-ink);
  --anim-d: 0.3s;
}

.djc-hero-deck__showcase--stack .djc-hero-deck__showcase-tag,
.djc-hero-deck__showcase--flank .djc-hero-deck__showcase-tag {
  margin-top: 10px;
  font-size: clamp(16px, 1.7vw, 20px);
}

.djc-hero-deck__showcase-art {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-width: 0;
}

.djc-hero-deck__showcase--side .djc-hero-deck__showcase-art {
  flex: 1.3 1 0;
  max-width: 700px;
}

.djc-hero-deck__showcase--stack .djc-hero-deck__showcase-art {
  gap: clamp(12px, 3vw, 44px);
  width: 100%;
  max-width: 820px;
}

/* product renders are transparent cut-outs, so a drop-shadow filter
   rather than box chrome */
.djc-hero-deck__showcase-pic {
  flex: 0 1 54%;
  min-width: 0;
  --anim-y: 0px;
}

.djc-hero-deck__showcase-pic img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 22px 34px rgb(6 3 24 / 0.32));
}

/* side: the second shot overlaps the first and sits a little lower, in
   front of it */
.djc-hero-deck__showcase--side .djc-hero-deck__showcase-pic:first-child {
  --anim-x: -40px;
  --anim-d: 0.14s;
}

.djc-hero-deck__showcase--side .djc-hero-deck__showcase-pic + .djc-hero-deck__showcase-pic {
  position: relative;
  z-index: 1;
  margin-left: -14%;
  margin-bottom: -3%;
  --anim-x: 40px;
  --anim-r: 3deg;
  --anim-d: 0.22s;
}

.djc-hero-deck__showcase--stack .djc-hero-deck__showcase-pic {
  max-width: 380px;
  --anim-y: 30px;
  --anim-d: 0.3s;
}

.djc-hero-deck__showcase--stack .djc-hero-deck__showcase-pic + .djc-hero-deck__showcase-pic {
  --anim-d: 0.38s;
}

/* flank: the art wrapper steps out of the layout, so its two shots take
   the outer columns either side of the words. the side padding keeps
   the outer shots clear of the deck arrows ( 48px wide, up to 24px in ) */
.djc-hero-deck__showcase--flank {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(16px, 3vw, 48px);
  box-sizing: border-box;
  max-width: 1600px;
  padding: 0 56px;
  text-align: center;
}

.djc-hero-deck__showcase--flank .djc-hero-deck__showcase-words {
  grid-column: 2;
  grid-row: 1;
}

/* the middle column is the narrowest the words get, so the kicker and
   the title step down a size -- the kicker to hold one line, the title
   to hold two */
.djc-hero-deck__showcase--flank .djc-hero-deck__kicker {
  font-size: clamp(38px, 5.4vw, 72px);
}

.djc-hero-deck__showcase--flank .djc-hero-deck__showcase-title {
  font-size: clamp(22px, 2.9vw, 38px);
}

/* a kicker the page sends as lettered art ( scriptArt ). the image takes the
   width the words would have, so it sizes with the same font-size steps */
.djc-hero-deck__kicker--art {
  padding: 0;
  background: none;
  line-height: 0;
}

.djc-hero-deck__kicker--art img {
  display: inline-block;
  width: 6em;
  max-width: 100%;
  height: auto;
}

.djc-hero-deck__showcase--flank .djc-hero-deck__showcase-art {
  display: contents;
}

/* short of the full column, so the tilted corners stay clear too */
.djc-hero-deck__showcase--flank .djc-hero-deck__showcase-pic {
  grid-column: 1;
  grid-row: 1;
  justify-self: center;
  width: 92%;
  max-width: 380px;
  --anim-x: -54px;
  --anim-d: 0.08s;
}

.djc-hero-deck__showcase--flank .djc-hero-deck__showcase-pic + .djc-hero-deck__showcase-pic {
  grid-column: 3;
  --anim-x: 54px;
}

.djc-hero-deck__showcase--flank .djc-hero-deck__showcase-pic img {
  transform: rotate(-5deg);
}

.djc-hero-deck__showcase--flank .djc-hero-deck__showcase-pic + .djc-hero-deck__showcase-pic img {
  transform: rotate(5deg);
}

/* a wide screen has room the arrows don't need ( the flank runs past the
   showcase's 1180px cap ), so the shots take a bigger share of it. 1400px is
   where the middle column still holds the title to two lines at full size */
@media (min-width: 1400px) {
  .djc-hero-deck__showcase--flank {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1.8fr) minmax(0, 1.35fr);
  }

  .djc-hero-deck__showcase--flank .djc-hero-deck__showcase-pic {
    width: 94%;
    max-width: 520px;
  }
}

@media (max-width: 760px) {
  .djc-hero-deck__showcase--side {
    flex-direction: column;
    gap: 18px;
    text-align: center;
  }

  .djc-hero-deck__showcase--side .djc-hero-deck__showcase-words {
    flex: 0 0 auto;
  }

  .djc-hero-deck__showcase--side .djc-hero-deck__showcase-art {
    flex: 0 0 auto;
    width: 100%;
    max-width: 400px;
  }

  .djc-hero-deck__showcase--flank {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 18px clamp(12px, 3vw, 24px);
    padding: 0;
  }

  .djc-hero-deck__showcase--flank .djc-hero-deck__showcase-words {
    grid-column: 1 / -1;
  }

  .djc-hero-deck__showcase--flank .djc-hero-deck__showcase-title {
    font-size: clamp(26px, 3.4vw, 42px);
  }

  .djc-hero-deck__showcase--flank .djc-hero-deck__showcase-pic {
    grid-row: 2;
    width: 100%;
    max-width: 260px;
  }

  .djc-hero-deck__showcase--flank .djc-hero-deck__showcase-pic + .djc-hero-deck__showcase-pic {
    grid-column: 2;
  }
}

/* ============================================================
   DATA MODE -- LIGHT TONE
   a slide on light art ( tone: 'light' ) swaps white ink for dark,
   drops the scrim and darkens the glass. the root carries --light while
   that slide is up, so the arrows and dots follow
   ============================================================ */
.djc-hero-deck .djc-hero-deck__slide--light {
  --hd-ink: var(--hd-light-ink);
  --hd-glass-bkg: var(--hd-light-glass-bkg);
  --hd-glass-bkg-hover: var(--hd-light-glass-bkg-hover);
  --hd-glass-shadow: var(--hd-light-glass-shadow);
  --hd-scrim: none;
}

.djc-hero-deck--light {
  --hd-arrow-bkg: var(--hd-light-arrow-bkg);
  --hd-arrow-bkg-hover: var(--hd-light-arrow-bkg-hover);
  --hd-dot: var(--hd-light-dot);
  --hd-dot-active: var(--hd-light-dot-active);
}

.djc-hero-deck--light .djc-hero-deck__arrow {
  color: var(--hd-light-ink);
  box-shadow: inset 0 0 0 1px rgb(27 27 74 / 0.25);
}

.djc-hero-deck--light .djc-hero-deck__dot {
  box-shadow: none;
}

/* ============================================================
   DATA MODE -- FIXTURES
   ============================================================ */
.djc-hero-deck__portrait {
  width: clamp(62px, 8vw, 104px);
  height: auto;
  border-radius: 50%;
  box-shadow: 0 10px 28px rgb(6 3 24 / 0.45), 0 0 0 3px rgb(255 255 255 / 0.5);
}

.djc-hero-deck__cue {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--hd-cue-bkg);
  color: var(--hd-cue-ink);
  font-size: 22px;
  cursor: pointer;
  box-shadow: 0 8px 26px rgb(6 3 24 / 0.3);
  animation: djcHeroDeckNudge 2.4s ease-in-out infinite;
  transition: color 0.25s ease, box-shadow 0.25s ease;
}

.djc-hero-deck__cue:hover {
  color: var(--hd-cue-ink-hover);
  box-shadow: 0 12px 32px rgb(6 3 24 / 0.4);
  animation: none;
}

.djc-hero-deck__cue:focus-visible {
  outline: 3px solid var(--hd-dot-active);
  outline-offset: 3px;
}

/* the bottom fixture is placed with translateX(-50%); the nudge keeps it */
@keyframes djcHeroDeckNudge {
  0%,
  100% {
    transform: translateX(-50%) translateY(0);
  }

  50% {
    transform: translateX(-50%) translateY(5px);
  }
}

/* ============================================================
   DATA MODE -- PHONE
   the deck has to stay about one thumb-scroll tall, so the steps
   shed their sub, split and art
   ============================================================ */
@media (max-width: 760px) {
  .djc-hero-deck__slide--steps .djc-hero-deck__sub,
  .djc-hero-deck__split,
  .djc-hero-deck__step-arts {
    display: none;
  }

  .djc-hero-deck__portrait {
    width: clamp(50px, 13vw, 66px);
  }

  .djc-hero-deck__lockup {
    flex-wrap: wrap;
  }

  .djc-hero-deck__lockup-mid {
    order: -1;
    flex: 1 1 100%;
  }

  .djc-hero-deck__cover {
    width: clamp(150px, 40vw, 260px);
  }
}

@media (max-width: 600px) {
  .djc-hero-deck__btn--sm {
    padding: 10px 16px;
    font-size: 14px;
  }

  .djc-hero-deck__spread-stack {
    padding-top: 16px;
    padding-right: 16px;
  }

  .djc-hero-deck__spreads .djc-hero-deck__btn--md {
    flex: 1 1 100%;
  }
}

@media (max-width: 520px) {
  .djc-hero-deck__badge {
    padding: 7px 14px;
    font-size: 11.5px;
    letter-spacing: 1.2px;
  }

  .djc-hero-deck__badge--marked {
    margin-left: 24px;
    padding-left: 34px;
  }

  .djc-hero-deck__badge strong {
    left: -24px;
    width: 52px;
    height: 52px;
    font-size: 22px;
  }
}

/* ============================================================
   ENTRANCE MOTION
   anything marked data-anim rests offset and transparent and lands when
   its slide goes active; the same declaration runs backwards on the way
   out. direction, delay, angle and scale are per-element custom
   properties the page sets, so there is one transition here rather than
   one per element. arriving is staggered, leaving is not.
   ============================================================ */
.djc-hero-deck [data-anim] {
  opacity: 0;
  transform: translate3d(var(--anim-x, 0px), var(--anim-y, 30px), 0) scale(var(--anim-s, 1)) rotate(var(--anim-r, 0deg));
  transition: opacity 0.5s ease, transform 0.68s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: 0s;
}

/* an element that rests at an angle keeps it while it travels, or it
   lands by un-rotating, which reads as a wobble */
.djc-hero-deck .djc-hero-deck__slide.is-active [data-anim] {
  opacity: 1;
  transform: translate3d(0, 0, 0) rotate(var(--anim-r, 0deg));
  transition-delay: var(--anim-d, 0s);
}

@media (prefers-reduced-motion: reduce) {
  .djc-hero-deck .djc-hero-deck__slide {
    transition: none;
  }

  .djc-hero-deck__cue {
    animation: none;
  }

  .djc-hero-deck [data-anim],
  .djc-hero-deck .djc-hero-deck__slide.is-active [data-anim] {
    opacity: 1;
    transform: rotate(var(--anim-r, 0deg));
    transition: none;
  }
}

/* ============================================================
   CMS EDITOR
   the editor runs no js, so the deck never hydrates there. unstack
   every slide into a flat column an author can read and select, and
   let the fixtures sit in flow.
   ============================================================ */
.tpadmin_content :not(.djc-hero-deck__track) > .djc-hero-deck__slide ~ .djc-hero-deck__slide {
  display: flex !important;
}

.tpadmin_content .djc-hero-deck__slide {
  min-height: 0;
  border-bottom: 2px dashed rgb(255 255 255 / 0.3);
}

.tpadmin_content .djc-hero-deck__fixture {
  position: static;
  transform: none;
}