/* =============================================================================
   CINESTAR EVENTS -- Partner With Us (Storm Fusion)
   theme/cinestar-child/assets/css/partner.css
   Depends on: main.css (tokens, base, buttons)
               storm-core.css (storm field, fade-up, footlight, shimmer keyframe)
               storm-inner.css (scroll rail)

   One family with the homepage and About Us: storm atmosphere, gold-foil
   headings, igniting footlights, matte Storm cards with a gold keyline and a
   gold-to-magenta tube edge, and the homepage's stat dials.

   Mobile first. Breakpoints: 600px (two-up fields and cards), 768px, 1024px.

   Sections:
     0. Tokens and shared typography
     A. Hero
     B. Now inviting partners
     C. Numbers (dials and claims)
     D. Two ways to partner
     E. What sponsors receive
     F. Logo marquee
     G. Enquiry (switch, forms, direct contact)
     H. Reduced motion
   ============================================================================= */


/* =============================================================================
   0. TOKENS AND SHARED TYPOGRAPHY
   ============================================================================= */

.ce-pw-page {
  --ce-pw-card: #16131F;
  --ce-pw-keyline: 0 0 0 1px rgba(255, 215, 0, 0.22);
  --ce-pw-keyline-lit: 0 0 0 1px rgba(255, 215, 0, 0.42);
  --ce-pw-glow: 0 18px 44px -18px rgba(0, 0, 0, 0.85), 0 0 30px -6px rgba(255, 20, 147, 0.32);
  --ce-pw-foil: linear-gradient(100deg, #FFEFA0 0%, #FFDF4F 26%, #FFFEF5 50%, #FFDF4F 74%, #FFEFA0 100%);
  --ce-pw-molten: linear-gradient(180deg, #FFF6D8 0%, #FFE583 35%, #FFD700 70%, #E3B43A 100%);
  --ce-pw-soft: #C2BDCC;   /* body copy on cards: 9.6:1 on the card fill */
  --ce-pw-quiet: #A39EAD;  /* captions and hints: 6.6:1 on the card fill */
  --ce-pw-error: #FF9DB0;  /* 8.4:1 on the card fill */
}

.ce-pw-page section {
  scroll-margin-top: 96px; /* clears the sticky header when a link jumps here */
}

.ce-pw-eyebrow {
  font-family: var(--ce-font-body);
  font-size: var(--ce-text-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ce-magenta);
  margin: 0 0 0.7rem;
}

.ce-pw-eyebrow--centre,
.ce-pw-heading--centre {
  text-align: center;
}

/* Section heading: the shared gold-foil shimmer. */
.ce-pw-heading {
  font-family: var(--ce-font-heading);
  font-size: clamp(1.75rem, 4vw, 2.8rem);
  font-weight: 800;
  line-height: 1.15;
  margin: 0;
  background: var(--ce-pw-foil);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow: none;
  animation: ce-shimmer-smooth 4s linear infinite;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.55)) drop-shadow(0 0 16px rgba(255, 215, 0, 0.15));
}

.ce-pw-sub {
  max-width: 56ch;
  margin: 1.25rem auto 0;
  text-align: center;
  font-size: var(--ce-text-base);
  line-height: 1.65;
  color: var(--ce-text-muted);
}

/* A quiet gold text link with an arrow. */
.ce-pw-textlink,
.ce-pw-now__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  font-family: var(--ce-font-heading);
  font-size: var(--ce-text-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ce-gold);
  transition: color 0.2s ease;
}

.ce-pw-textlink svg,
.ce-pw-now__link svg {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.ce-pw-textlink:hover,
.ce-pw-textlink:focus-visible,
.ce-pw-now__link:hover,
.ce-pw-now__link:focus-visible {
  color: #FFF4CC;
  text-decoration: none;
}

.ce-pw-textlink:hover svg,
.ce-pw-textlink:focus-visible svg,
.ce-pw-now__link:hover svg,
.ce-pw-now__link:focus-visible svg {
  transform: translateX(4px);
}

.ce-pw-page a:focus-visible,
.ce-pw-page button:focus-visible {
  outline: 2px solid var(--ce-gold);
  outline-offset: 3px;
}

/* The Storm card's tube edge: a 2px gold-to-magenta line along the top. */
.ce-pw-claim::before,
.ce-pw-path::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--ce-gold), var(--ce-magenta));
  box-shadow: 0 0 10px rgba(255, 20, 147, 0.5);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}


/* =============================================================================
   A. HERO
   Two stage beams, gold and magenta, cross behind the headline: two ways in.
   No image, so nothing arrives late and moves the page.
   ============================================================================= */

.ce-pw-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 600px;
  padding-top: 80px; /* clearance for the sticky header */
  overflow: hidden;
  isolation: isolate;
}

.ce-pw-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 85% 60% at 50% 104%, rgba(123, 47, 190, 0.44) 0%, transparent 68%),
    radial-gradient(ellipse 50% 40% at 12% 90%, rgba(255, 215, 0, 0.10) 0%, transparent 62%),
    radial-gradient(ellipse 50% 40% at 88% 90%, rgba(255, 20, 147, 0.14) 0%, transparent 62%),
    var(--ce-bg, #0A0A0A);
}

/* The blur sits on the wrapper and the beam shape on its child, so the beam's
   edges come out soft (a filter is applied before a clip-path on one element). */
.ce-pw-hero__beam {
  position: absolute;
  top: -8%;
  width: 62%;
  height: 116%;
  z-index: 1;
  pointer-events: none;
  filter: blur(18px);
  opacity: 0.8;
}

.ce-pw-hero__beam::before {
  content: "";
  position: absolute;
  inset: 0;
}

.ce-pw-hero__beam--gold { left: -14%; }
.ce-pw-hero__beam--gold::before {
  background: linear-gradient(180deg, rgba(255, 215, 0, 0.30) 0%, rgba(255, 215, 0, 0.08) 48%, transparent 82%);
  clip-path: polygon(22% 0, 34% 0, 100% 100%, 52% 100%);
}

.ce-pw-hero__beam--magenta { right: -14%; }
.ce-pw-hero__beam--magenta::before {
  background: linear-gradient(180deg, rgba(255, 20, 147, 0.30) 0%, rgba(255, 20, 147, 0.08) 48%, transparent 82%);
  clip-path: polygon(66% 0, 78% 0, 48% 100%, 0 100%);
}

.ce-pw-hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  text-align: center;
  padding-top: 3rem;
  padding-bottom: 4.5rem;
}

.ce-pw-hero__eyebrow {
  font-family: var(--ce-font-body);
  font-size: var(--ce-text-sm);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ce-magenta);
  margin: 0 0 1rem;
}

.ce-pw-hero__headline {
  font-family: var(--ce-font-heading);
  font-size: clamp(2.7rem, 9vw, 5.5rem);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--ce-text);
  line-height: 1.04;
  letter-spacing: -0.01em;
  margin: 0 0 1.25rem;
}

.ce-pw-hero__accent {
  display: inline-block; /* "With Us" stays together when the headline wraps */
  white-space: nowrap;
  background: linear-gradient(100deg, #F7E7B0 0%, #FFD700 38%, #FFF4CC 52%, #FFD700 66%, #E8B923 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 1px 10px rgba(255, 215, 0, 0.18));
  animation: ce-shimmer-smooth 4s linear infinite;
}

.ce-pw-hero__sub {
  max-width: 660px;
  margin: 0 auto;
  font-family: var(--ce-font-body);
  font-size: clamp(1rem, 2.5vw, 1.2rem);
  line-height: 1.65;
  color: var(--ce-text-muted);
}

.ce-pw-hero__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.85rem;
  max-width: 360px;
  margin: 2rem auto 0;
}

/* On a phone the large pill is one size down, so each label fits on one line. */
.ce-pw-hero__actions .ce-btn--lg {
  padding: 1rem 1.25rem;
  font-size: var(--ce-text-sm);
}

.ce-pw-hero .ce-storm-footlight {
  margin-top: 2.25rem;
}

.ce-pw-hero__fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 96px;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--ce-bg));
}

@media (min-width: 600px) {
  .ce-pw-hero__actions {
    flex-direction: row;
    justify-content: center;
    max-width: none;
  }
  .ce-pw-hero__actions .ce-btn--lg {
    padding: 1.125rem 2.5rem;
    font-size: var(--ce-text-lg);
  }
}

@media (min-width: 1024px) {
  .ce-pw-hero { min-height: 640px; }
  .ce-pw-hero__content { padding-top: 4rem; padding-bottom: 5.5rem; }
}


/* =============================================================================
   B. NOW INVITING PARTNERS
   ============================================================================= */

.ce-pw-now {
  padding: 0 0 clamp(2rem, 4vw, 3rem);
}

.ce-pw-now__card {
  position: relative;
  display: grid;
  gap: 0.9rem;
  padding: 1.4rem 1.5rem;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(34, 14, 60, 0.82) 0%, rgba(22, 19, 31, 0.9) 60%, rgba(40, 10, 40, 0.82) 100%);
  box-shadow: var(--ce-pw-keyline), 0 20px 50px -24px rgba(0, 0, 0, 0.9);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.ce-pw-now__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0;
  font-family: var(--ce-font-body);
  font-size: var(--ce-text-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ce-magenta);
}

.ce-pw-now__dot {
  position: relative;
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ce-magenta);
}

.ce-pw-now__dot::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1px solid rgba(255, 20, 147, 0.7);
  animation: ce-pw-pulse 2.2s ease-out infinite;
}

@keyframes ce-pw-pulse {
  0%   { transform: scale(0.6); opacity: 0.9; }
  100% { transform: scale(1.7); opacity: 0; }
}

.ce-pw-now__title {
  margin: 0;
  font-family: var(--ce-font-heading);
  font-size: clamp(1.15rem, 2.6vw, 1.5rem);
  font-weight: 800;
  line-height: 1.25;
  color: var(--ce-text);
}

.ce-pw-now__line {
  margin: 0.25rem 0 0;
  font-size: var(--ce-text-base);
  color: var(--ce-pw-soft);
}

@media (min-width: 768px) {
  .ce-pw-now__card {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 2rem;
    padding: 1.5rem 2rem;
  }
  .ce-pw-now__event {
    padding-left: 2rem;
    border-left: 1px solid rgba(255, 215, 0, 0.2);
  }
}


/* =============================================================================
   C. NUMBERS -- four dials and two claims
   The dial is the homepage's: a molten numeral in a gold ring that sweeps
   closed on reveal. @property is declared here because home.css is not loaded.
   ============================================================================= */

@property --ce-pw-a {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.ce-pw-numbers,
.ce-pw-paths,
.ce-pw-benefits,
.ce-pw-logos,
.ce-pw-enquiry {
  padding: clamp(3.25rem, 6vw, 5.5rem) 0;
}

.ce-pw-dials {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem 1rem;
  margin-top: 2.75rem;
}

.ce-pw-dial {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  text-align: center;
}

.ce-pw-dial__ring {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 132px;
  height: 132px;
  font-family: var(--ce-font-heading);
  font-size: 1.9rem;
  font-weight: 900;
  line-height: 1;
}

.ce-pw-dial__ring::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  --ce-pw-a: 0deg;
  background: conic-gradient(var(--ce-gold) var(--ce-pw-a), rgba(255, 255, 255, 0.07) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 7px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 7px));
  transition: --ce-pw-a 1.8s cubic-bezier(0.22, 1, 0.36, 1) 0.3s;
  filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.3));
}

.ce-pw-dial.ce-fade-up.is-visible .ce-pw-dial__ring::before {
  --ce-pw-a: 330deg;
}

.ce-pw-dial__ring span[data-count-to],
.ce-pw-dial__plus,
.ce-pw-claim__figure {
  font-variant-numeric: tabular-nums;
  background: var(--ce-pw-molten);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 0 16px rgba(255, 215, 0, 0.25));
}

.ce-pw-dial__plus {
  font-size: 0.62em;
  margin-left: 0.04em;
  transform: translateY(-0.45em);
}

.ce-pw-dial__label {
  font-family: var(--ce-font-heading);
  font-size: var(--ce-text-sm);
  font-weight: 700;
  line-height: 1.3;
  color: var(--ce-text);
}

/* The two claims */
.ce-pw-claims {
  display: grid;
  gap: 1.25rem;
  margin-top: 2.75rem;
}

.ce-pw-claim {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.6rem 1.5rem;
  border-radius: 14px;
  background: var(--ce-pw-card);
  box-shadow: var(--ce-pw-keyline);
  overflow: hidden;
  transition: box-shadow 0.22s ease, transform 0.22s ease;
}

/* A slice of dial ring in the corner ties the claims to the dials above.
   Only where the card is wide enough for it to clear the words. */
.ce-pw-claim::after {
  content: "";
  display: none;
  position: absolute;
  right: -70px;
  top: 50%;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  transform: translateY(-50%);
  background: conic-gradient(from 200deg, rgba(255, 215, 0, 0.5) 0deg, rgba(255, 20, 147, 0.35) 110deg, transparent 150deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px));
  opacity: 0.7;
  pointer-events: none;
}

.ce-pw-claim:hover {
  transform: translateY(-4px);
  box-shadow: var(--ce-pw-keyline-lit), var(--ce-pw-glow);
}

.ce-pw-claim:hover::before {
  transform: scaleX(1);
}

.ce-pw-claim__figure {
  flex-shrink: 0;
  margin: 0;
  font-family: var(--ce-font-heading);
  font-size: clamp(2.5rem, 7vw, 3.6rem);
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.ce-pw-claim__label {
  margin: 0;
  font-family: var(--ce-font-heading);
  font-size: var(--ce-text-base);
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--ce-text);
}

@media (min-width: 600px) {
  .ce-pw-dial__ring { width: 150px; height: 150px; font-size: 2.2rem; }
  .ce-pw-dial__label { font-size: var(--ce-text-base); }
}

@media (min-width: 768px) {
  .ce-pw-dials { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; }
  .ce-pw-claims { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
  .ce-pw-claim { padding: 2rem 2.1rem; }
}

@media (min-width: 1024px) {
  .ce-pw-claim::after { display: block; }
}

@media (min-width: 1024px) {
  .ce-pw-dial__ring { width: 172px; height: 172px; font-size: 2.6rem; }
}


/* =============================================================================
   D. TWO WAYS TO PARTNER
   Gold for sponsors, magenta for Local Promoters. Each card also carries its
   own icon and label, so colour is never the only difference.
   ============================================================================= */

.ce-pw-paths__grid {
  display: grid;
  gap: 1.5rem;
  margin-top: 2.75rem;
}

.ce-pw-path {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 2rem 1.6rem;
  border-radius: 18px;
  background: var(--ce-pw-card);
  box-shadow: var(--ce-pw-keyline);
  overflow: hidden;
  isolation: isolate;
  transition: box-shadow 0.22s ease, transform 0.22s ease;
}

/* A wash of the path's own colour in the far corner */
.ce-pw-path::after {
  content: "";
  position: absolute;
  right: -90px;
  top: -90px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  z-index: -1;
  background: radial-gradient(circle, rgba(255, 215, 0, 0.16) 0%, transparent 68%);
  pointer-events: none;
}

.ce-pw-path--promoter::after {
  background: radial-gradient(circle, rgba(255, 20, 147, 0.2) 0%, transparent 68%);
}

.ce-pw-path--promoter::before {
  background: linear-gradient(90deg, var(--ce-magenta), var(--ce-purple));
}

.ce-pw-path:hover,
.ce-pw-path:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--ce-pw-keyline-lit), var(--ce-pw-glow);
}

.ce-pw-path:hover::before,
.ce-pw-path:focus-within::before {
  transform: scaleX(1);
}

.ce-pw-path__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  margin-bottom: 1.25rem;
  border-radius: 14px;
  color: var(--ce-gold);
  background: rgba(255, 215, 0, 0.09);
  box-shadow: inset 0 0 0 1px rgba(255, 215, 0, 0.2);
}

.ce-pw-path--promoter .ce-pw-path__icon {
  color: #FF6FBA; /* a lighter magenta: 6.6:1 on the card */
  background: rgba(255, 20, 147, 0.1);
  box-shadow: inset 0 0 0 1px rgba(255, 20, 147, 0.3);
}

.ce-pw-path__for {
  margin: 0 0 0.6rem;
  font-family: var(--ce-font-body);
  font-size: var(--ce-text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ce-gold);
}

.ce-pw-path--promoter .ce-pw-path__for {
  color: #FF6FBA;
}

.ce-pw-path__title {
  margin: 0 0 0.85rem;
  font-family: var(--ce-font-heading);
  font-size: clamp(1.4rem, 3vw, 1.75rem);
  font-weight: 800;
  line-height: 1.2;
  color: var(--ce-text);
}

.ce-pw-path__text {
  margin: 0 0 1.75rem;
  font-size: var(--ce-text-base);
  line-height: 1.7;
  color: var(--ce-pw-soft);
}

.ce-pw-path .ce-btn {
  margin-top: auto;
  width: 100%;
}

@media (min-width: 600px) {
  .ce-pw-path .ce-btn { width: auto; }
}

@media (min-width: 768px) {
  .ce-pw-paths__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem; }
  .ce-pw-path { padding: 2.5rem 2.25rem; }
}


/* =============================================================================
   E. WHAT SPONSORS RECEIVE
   ============================================================================= */

.ce-pw-benefits__grid {
  display: grid;
  gap: 0.9rem;
  margin: 2.5rem 0 0;
  padding: 0;
  list-style: none;
}

.ce-pw-benefit {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 80px;
  margin: 0;
  padding: 1rem 1.15rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.035);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.ce-pw-benefit__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  color: var(--ce-gold);
  background: rgba(255, 215, 0, 0.09);
  box-shadow: inset 0 0 0 1px rgba(255, 215, 0, 0.18);
}

.ce-pw-benefit__text {
  font-family: var(--ce-font-heading);
  font-size: var(--ce-text-base);
  font-weight: 600;
  line-height: 1.35;
  color: var(--ce-text);
}

@media (min-width: 600px) {
  .ce-pw-benefits__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; }
}

@media (min-width: 1024px) {
  .ce-pw-benefits__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
}


/* =============================================================================
   F. LOGO MARQUEE
   The homepage and Sponsors & Partners treatment, unchanged: silhouette at
   rest, full colour on hover. Kept here so this page is self-contained.
   ============================================================================= */

.ce-pw-logos .ce-marquee {
  overflow: hidden;
  width: 100%;
  margin-block: 2.5rem 1rem;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%);
}

.ce-pw-logos .ce-marquee__track {
  display: flex;
  align-items: center;
  gap: 3.25rem;
  width: max-content;
  animation: ce-pw-marquee 50s linear infinite;
}

@media (hover: hover) {
  .ce-pw-logos .ce-marquee:hover .ce-marquee__track {
    animation-play-state: paused;
  }
}

@keyframes ce-pw-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.ce-pw-logos .ce-sponsor-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: 64px;
  padding: 10px 16px;
  border-radius: 12px;
  background: transparent;
  transition: background 0.3s ease;
}

.ce-pw-logos .ce-sponsor-badge img {
  display: block;
  max-width: 120px;
  max-height: 44px;
  width: auto;
  height: auto;
  filter: brightness(0) invert(1);
  opacity: 0.7;
  transition: filter 0.3s ease, opacity 0.3s ease;
}

.ce-pw-logos .ce-sponsor-badge:hover { background: rgba(255, 255, 255, 0.95); }
.ce-pw-logos .ce-sponsor-badge:hover img { filter: none; opacity: 1; }

.ce-pw-logos .ce-sponsor--sm img   { max-width: 100px; }
.ce-pw-logos .ce-sponsor--lg img   { max-width: 122px; }
.ce-pw-logos .ce-sponsor--wide img { max-width: 160px; }
.ce-pw-logos .ce-sponsor--xl img   { max-width: 180px; }
.ce-pw-logos .ce-sponsor--xxl img  { max-width: 270px; }
.ce-pw-logos .ce-sponsor--light img { filter: brightness(2) grayscale(1); }
.ce-pw-logos .ce-sponsor--light:hover img { filter: brightness(0.7) saturate(1.4); }

.ce-pw-logos__more {
  text-align: center;
}


/* =============================================================================
   G. ENQUIRY -- switch, forms, direct contact
   ============================================================================= */

.ce-pw-enquiry__layout {
  display: grid;
  gap: 1.5rem;
  margin-top: 2.75rem;
}

.ce-pw-enquiry__main {
  min-width: 0;
  scroll-margin-top: 104px; /* clears the sticky header when a button jumps here */
  padding: 1.35rem 1.15rem 1.75rem;
  border-radius: 18px;
  background: var(--ce-pw-card);
  box-shadow: var(--ce-pw-keyline), 0 24px 60px -30px rgba(0, 0, 0, 0.9);
}

/* ── The switch. Hidden until the script is running: without it both forms
      simply show, one after the other. Two classes on every rule, to outrank
      the parent theme's own button styles. */
.ce-pw-switch {
  display: none;
}

.ce-pw-enquiry__main.is-enhanced .ce-pw-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.35rem;
  margin: 0 0 1.75rem;
  padding: 0.35rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.ce-pw-switch .ce-pw-switch__tab {
  min-height: 48px;
  margin: 0;
  padding: 0.5rem 0.4rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  color: var(--ce-text);
  font-family: var(--ce-font-heading);
  font-size: 0.8125rem; /* "Local Promoter" stays on one line on a phone */
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-transform: uppercase;
  cursor: pointer;
  touch-action: manipulation;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.ce-pw-switch .ce-pw-switch__tab:hover,
.ce-pw-switch .ce-pw-switch__tab:focus {
  background: rgba(255, 215, 0, 0.1);
  color: var(--ce-text);
}

/* Gold background takes dark text. */
.ce-pw-switch .ce-pw-switch__tab[aria-selected="true"],
.ce-pw-switch .ce-pw-switch__tab[aria-selected="true"]:hover,
.ce-pw-switch .ce-pw-switch__tab[aria-selected="true"]:focus {
  background: linear-gradient(180deg, #FFE680 0%, #FFD700 46%, #E8B923 100%);
  color: #0A0A0A;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 2px 10px rgba(0, 0, 0, 0.45);
}

/* ── Panels */
.ce-pw-panel + .ce-pw-panel {
  margin-top: 3rem;
  padding-top: 2.5rem;
  border-top: 1px solid rgba(255, 215, 0, 0.16);
}

.ce-pw-enquiry__main.is-enhanced .ce-pw-panel + .ce-pw-panel {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.ce-pw-panel[hidden] {
  display: none;
}

.ce-pw-panel__title {
  margin: 0 0 0.5rem;
  font-family: var(--ce-font-heading);
  font-size: var(--ce-text-xl);
  font-weight: 800;
  line-height: 1.25;
  color: var(--ce-text);
}

/* With the switch in place its tab names the panel, so the title steps back
   for sighted visitors and stays for screen readers. */
.ce-pw-enquiry__main.is-enhanced .ce-pw-panel__title {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ce-pw-panel__sub {
  margin: 0 0 1.5rem;
  font-size: var(--ce-text-base);
  line-height: 1.6;
  color: var(--ce-pw-soft);
}

/* ── Form */
.ce-pw-form {
  margin: 0;
}

.ce-pw-form__note {
  margin: 0 0 1rem;
  font-size: var(--ce-text-sm);
  color: var(--ce-pw-quiet);
}

.ce-pw-req {
  color: var(--ce-gold);
  font-weight: 700;
}

.ce-pw-form .ce-pw-fieldset {
  min-width: 0;
  margin: 0 0 1.9rem;
  padding: 0;
  border: 0;
}

.ce-pw-form .ce-pw-legend {
  float: left;
  width: 100%;
  margin: 0 0 1.1rem;
  padding: 0 0 0.65rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  font-family: var(--ce-font-heading);
  font-size: var(--ce-text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #FF6FBA;
}

.ce-pw-fields {
  clear: both;
  display: grid;
  gap: 1.05rem 1.25rem;
}

.ce-pw-field {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-width: 0;
}

.ce-pw-label {
  font-family: var(--ce-font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.88);
}

/* 16px text keeps a phone from zooming in when a field is tapped. Two
   classes, to outrank the parent theme's own input rules. */
.ce-pw-form .ce-pw-input {
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 0.75rem 1rem;
  border: 0;
  border-radius: 12px;
  background-color: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  color: #fff;
  font-family: var(--ce-font-body);
  font-size: 16px;
  line-height: 1.4;
  transition: box-shadow 0.2s ease;
}

.ce-pw-form .ce-pw-input::placeholder {
  color: rgba(255, 255, 255, 0.45);
}

.ce-pw-form .ce-pw-input:focus {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--ce-gold), 0 0 20px rgba(255, 215, 0, 0.25);
}

.ce-pw-form .ce-pw-input:-webkit-autofill {
  -webkit-text-fill-color: #fff;
  -webkit-box-shadow: inset 0 0 0 1000px #231a30, inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  caret-color: #fff;
}

.ce-pw-form .ce-pw-input[aria-invalid="true"] {
  box-shadow: inset 0 0 0 2px var(--ce-pw-error);
}

.ce-pw-form .ce-pw-select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23FFD700' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 12px 8px;
  cursor: pointer;
}

.ce-pw-form .ce-pw-select option {
  background-color: #1a1423;
  color: #fff;
}

.ce-pw-form .ce-pw-textarea {
  min-height: 140px;
  resize: vertical;
}

.ce-pw-hint,
.ce-pw-fielderror {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ce-pw-quiet);
}

.ce-pw-fielderror {
  color: var(--ce-pw-error);
  font-weight: 600;
}

/* ── City chips: real checkboxes, drawn as pills */
.ce-pw-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.ce-pw-chip {
  position: relative;
  display: inline-flex;
  margin: 0;
  cursor: pointer;
}

.ce-pw-chip input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.ce-pw-chip span {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  padding: 0 1.1rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
  color: #fff;
  font-family: var(--ce-font-body);
  font-size: 15px;
  font-weight: 600;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.ce-pw-chip:hover span {
  box-shadow: inset 0 0 0 1px rgba(255, 215, 0, 0.6);
}

/* Chosen: gold with dark text, and a tick so it does not rest on colour alone */
.ce-pw-chip input:checked + span {
  background: linear-gradient(180deg, #FFE680 0%, #FFD700 46%, #E8B923 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
  color: #0A0A0A;
}

.ce-pw-chip input:checked + span::before {
  content: "";
  width: 14px;
  height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A0A0A' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ce-pw-chip input:focus-visible + span {
  outline: 2px solid var(--ce-gold);
  outline-offset: 3px;
}

/* ── Send */
.ce-pw-form__actions {
  margin-top: 0.5rem;
}

/* On a phone the label is long for a large pill: one size down keeps it on one line. */
.ce-pw-form .ce-pw-form__submit {
  width: 100%;
  padding: 1rem 1.25rem;
  font-size: var(--ce-text-sm);
}

.ce-pw-form__consent {
  max-width: 60ch;
  margin: 1.1rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--ce-pw-quiet);
}

.ce-pw-form__consent a {
  color: var(--ce-gold);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ce-pw-form__consent a:hover,
.ce-pw-form__consent a:focus-visible {
  color: #fff;
}

/* ── Messages */
.ce-pw-alert {
  margin: 0 0 1.5rem;
  padding: 0.9rem 1.1rem;
  border-radius: 12px;
  background: rgba(255, 107, 139, 0.1);
  box-shadow: inset 0 0 0 1px rgba(255, 157, 176, 0.5);
  color: #FFD3DC;
  font-size: var(--ce-text-base);
  font-weight: 600;
  line-height: 1.5;
}

.ce-pw-thanks {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2.5rem 1rem 2rem;
  text-align: center;
}

.ce-pw-thanks:focus {
  outline: none;
}

.ce-pw-thanks__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin-bottom: 1.25rem;
  border-radius: 50%;
  color: var(--ce-gold);
  background: rgba(255, 215, 0, 0.1);
  box-shadow: inset 0 0 0 2px rgba(255, 215, 0, 0.55), 0 0 30px rgba(255, 215, 0, 0.25);
}

.ce-pw-thanks__title {
  margin: 0 0 0.75rem;
  font-family: var(--ce-font-heading);
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  font-weight: 800;
  line-height: 1.15;
  background: var(--ce-pw-foil);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.ce-pw-thanks__text {
  max-width: 44ch;
  margin: 0 0 1.25rem;
  font-size: var(--ce-text-lg);
  line-height: 1.65;
  color: var(--ce-text-muted);
}

/* ── Direct contact */
.ce-pw-aside {
  display: grid;
  gap: 1.25rem;
  min-width: 0;
}

.ce-pw-contact {
  padding: 1.6rem 1.4rem;
  border-radius: 18px;
  background:
    radial-gradient(ellipse 90% 60% at 100% 0%, rgba(255, 215, 0, 0.1) 0%, transparent 62%),
    var(--ce-pw-card);
  box-shadow: var(--ce-pw-keyline);
}

.ce-pw-contact__heading,
.ce-pw-next__heading {
  margin: 0 0 1rem;
  font-family: var(--ce-font-heading);
  font-size: var(--ce-text-lg);
  font-weight: 800;
  line-height: 1.3;
  color: var(--ce-text);
}

.ce-pw-contact__person {
  margin: 0 0 1rem;
  font-size: var(--ce-text-base);
  line-height: 1.5;
  color: var(--ce-pw-soft);
}

.ce-pw-contact__person strong {
  display: block;
  font-family: var(--ce-font-heading);
  font-weight: 700;
  color: var(--ce-text);
}

.ce-pw-contact__link {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  min-height: 52px;
  color: var(--ce-text);
  font-size: var(--ce-text-base);
  font-weight: 600;
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: color 0.2s ease;
}

.ce-pw-contact__link:hover,
.ce-pw-contact__link:focus-visible {
  color: var(--ce-gold);
  text-decoration: none;
}

.ce-pw-contact__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  color: var(--ce-gold);
  background: rgba(255, 215, 0, 0.09);
  box-shadow: inset 0 0 0 1px rgba(255, 215, 0, 0.18);
}

.ce-pw-next {
  padding: 1.5rem 1.4rem;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.03);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.ce-pw-next__steps {
  display: grid;
  gap: 0.9rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: ce-pw-step;
}

.ce-pw-next__steps li {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin: 0;
  font-size: var(--ce-text-base);
  line-height: 1.45;
  color: var(--ce-pw-soft);
  counter-increment: ce-pw-step;
}

.ce-pw-next__steps li::before {
  content: counter(ce-pw-step);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255, 215, 0, 0.55);
  color: var(--ce-gold);
  font-family: var(--ce-font-heading);
  font-size: var(--ce-text-sm);
  font-weight: 800;
}

@media (min-width: 600px) {
  .ce-pw-enquiry__main { padding: 1.9rem 1.9rem 2.25rem; }
  .ce-pw-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ce-pw-field--full { grid-column: 1 / -1; }
  .ce-pw-form .ce-pw-form__submit { width: auto; padding: 1.125rem 2.5rem; font-size: var(--ce-text-lg); }
  .ce-pw-enquiry__main.is-enhanced .ce-pw-switch { max-width: 440px; }
  .ce-pw-switch .ce-pw-switch__tab { padding-inline: 0.75rem; font-size: var(--ce-text-sm); letter-spacing: 0.06em; }
}

@media (min-width: 768px) {
  .ce-pw-aside { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .ce-pw-enquiry__layout {
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
  }
  .ce-pw-enquiry__main { padding: 2.4rem 2.5rem 2.6rem; }
  .ce-pw-aside {
    grid-template-columns: minmax(0, 1fr);
    position: sticky;
    top: 104px;
  }
}


/* =============================================================================
   H. REDUCED MOTION
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
  .ce-pw-heading,
  .ce-pw-hero__accent {
    animation: none;
    background-position: 50% center;
  }

  .ce-pw-now__dot::after {
    animation: none;
    opacity: 0;
  }

  .ce-pw-dial__ring::before {
    transition: none;
    --ce-pw-a: 330deg;
  }

  .ce-pw-claim,
  .ce-pw-path,
  .ce-pw-claim::before,
  .ce-pw-path::before,
  .ce-pw-textlink svg,
  .ce-pw-now__link svg {
    transition: none;
  }

  .ce-pw-claim:hover,
  .ce-pw-path:hover,
  .ce-pw-path:focus-within {
    transform: none;
  }

  /* The row of logos stands still and wraps; its second copy is not needed. */
  .ce-pw-logos .ce-marquee {
    -webkit-mask-image: none;
    mask-image: none;
  }
  .ce-pw-logos .ce-marquee__track {
    animation: none;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.25rem 2rem;
    width: auto;
    padding-inline: 1rem;
  }
  .ce-pw-logos .ce-sponsor-badge:nth-child(n+15) {
    display: none;
  }
}