.pinktober-page {
  /*--pink: #ed2d83;*/
  --pink: #ff378a;
  --pink-soft: #fff6fa;
  --rose: #aa165b;
  --ink: #141114;
  --muted: #70666d;
  --line: #eadfe5;
  background: #fff;
}
.header.pinktober-page {
  background: var(--pink) !important;
  border: 1px solid var(--pink);
}
.pinktober-page .text-pink {
  color: var(--pink);
}
.pinktober-page .kicker {
  color: var(--pink);
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 800;
}
.pinktober-page .title {
  font-size: clamp(30px, 3.6vw, 48px);
  line-height: 1.05;
  letter-spacing: 0;
  font-weight: 600;
}
.pinktober-page .intro {
  color: var(--muted);
}

/* Buttons: Bootstrap's .btn + .rounded-pill handle shape/spacing; these are only the brand colours */
.pinktober-page .btn.pink {
  background: var(--pink);
  border-color: var(--pink);
  color: #fff;
}
.pinktober-page .btn.pink:hover {
  background: var(--rose);
  border-color: var(--rose);
  color: #fff;
}
.pinktober-page .btn.white {
  background: #fff;
  border-color: #fff;
  color: #111;
}
.pinktober-page .btn.black {
  background: #0d0d0d;
  border-color: #0d0d0d;
  color: #fff;
}
.pinktober-page .btn.outline {
  background: #fff;
  border-color: #d8cbd2;
  color: #111;
}
.pinktober-page .btn[aria-disabled="true"] {
  opacity: 0.45;
  pointer-events: none;
}

.pinktober-page .section .gtt-container .hero-pinktober h1.heading {
  font-size: clamp(42px, 5.6vw, 82px) !important;
  line-height: 0.92 !important;
  letter-spacing: 2px;
  font-weight: 700;
}

.pinktober-page .hero-pinktober .heading span {
  color: var(--pink);
}

/* Campaign sub-nav */

.pinktober-page .campaign-brand {
  text-decoration: none;
  font-weight: 900;
  letter-spacing: -0.02em;
}
.pinktober-page .campaign-brand strong {
  font-size: 15px;
  color: var(--pink);
}
.pinktober-page .campaign-brand-logo {
  height: 75px;
  width: auto;
}
.pinktober-page .campaign-links .nav-link {
  text-decoration: none;
  color: #4d4449;
  font-size: 14px;
  font-weight: 500;
  padding: 0.5rem 0;
}
.pinktober-page .campaign-links .nav-link:hover {
  color: var(--pink);
}
.pinktober-page .campaign-toggler .hamburger-icon {
  width: 26px;
  filter: invert(1);
}
@media (max-width: 991.98px) {
  .pinktober-page .campaign-links {
    text-align: right;
  }
}
@media (min-width: 992px) {
  .pinktober-page #pinktoberSubNav {
    flex-direction: row;
    justify-content: flex-end;
  }
}

/* Hero */

 .pinktober-page .darkpink.hero-pinktober { background: var(--pink); overflow: hidden; }
    /*.pinktober-page .hero-copy-col { min-height: 320px; } */
    .pinktober-page .hero-copy-col h1 { font-size: clamp(58px, 7vw, 92px); line-height: .88; letter-spacing: 2px; }
    /*.pinktober-page .hero-copy-col h1 span { color: #000; }*/

    .pinktober-page .eyebrow-badge { background: rgba(255,255,255,.12); color: #fff; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; }
    /*.pinktober-page .hero-img-col { min-height: 340px; } */
    .pinktober-page .hero-img { object-fit: cover; object-position: center; position: absolute; top: 0; left: 0; }
    .pinktober-page .hero-quote-card { width: min(90%, 360px); }
    .pinktober-page .hero-logo-badge { width: 34px; height: 34px; background: var(--pink-soft); color: var(--pink); font-weight: 900; font-size: 12px; }
    .pinktober-page .hero-logo-word { color: var(--pink); letter-spacing: .02em; }
    /*@media (min-width: 992px) {
        .pinktober-page .hero-copy-col, .pinktober-page .hero-img-col { min-height: 560px; }
    }*/


    /* The card sits inside .banner-content-wrapper, whose .para rule paints text
       white for the copy over the photo - that would be invisible on the card. */
    .pinktober-page .hero-quote-card .para { color: var(--pink); }

    /* Why quote card */
    .pinktober-page .quote-card .mark { font-size: 32px; line-height: 1; color: #fff; font-weight: 900; padding: unset; background-color:unset; }
    .pinktober-page .quote-card .quote-title { font-size: 32px; line-height: 1.08; color: #fff; }

    @media (max-width: 991.98px) {
    .hero-pinktober .row {
        display: flex;
        flex-direction: column;
    }

    .hero-pinktober .hero-copy-col,
    .hero-pinktober .hero-img-col {
        width: 100%;
        max-width: 100%;
    }

    .hero-pinktober .hero-img-col {
        min-height: 400px;
    }

    .hero-pinktober .hero-img {
        height: auto !important;
        min-height: 400px;
        object-fit: cover;
    }
}


/* Walk in Pink */
.pinktober-page .walk {
  background: #100e10;
  color: #fff;
}
.pinktober-page .walk .title {
  color: #fff;
  font-size: clamp(28px, 3.2vw, 40px);
}
.pinktober-page .walk .intro {
  color: #bfb5ba;
}
.pinktober-page .event-card {
  background: linear-gradient(145deg, #2b292b, #1c191c);
  border: 1px solid #40393e !important;
}
.pinktober-page .status-badge {
  background: var(--pink);
  color: #fff;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 700;
}
.pinktober-page .event-detail .ico {
  color: var(--pink);
  font-size: 20px;
  line-height: 1;
}
.pinktober-page .event-detail small {
  display: block;
  color: var(--pink);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

/* Champions */
.pinktober-page .champions {
  background: linear-gradient(#fff8fb, #fff);
}
.pinktober-page #champions h2.title,
.pinktober-page #partners h2.title,
.pinktober-page #gallery h2.title,
.pinktober-page #awareness h2.title {
  max-width: 620px;
}
/*.pinktober-page .champ-photo {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}*/

 .pinktober-page .champ-photo { aspect-ratio: 4 / 3; object-fit: cover; }
    .pinktober-page .champ-card iframe { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; border: 0; }

.pinktober-page .champ-photo-ph {
  aspect-ratio: 4 / 4.6;
  background: var(--pink-soft);
  color: var(--pink);
  font-weight: 900;
  font-size: 26px;
}

/* Cancer Awareness */
.pinktober-page .aw-card {
  border-color: var(--line) !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.pinktober-page .aw-card:hover {
  border-color: var(--pink) !important;
  box-shadow: 0 12px 28px -18px rgba(237, 45, 131, 0.4);
}
.pinktober-page .aw-icon {
  width: 44px;
  height: 44px;
}
.pinktober-page .aw-icon svg,
.pinktober-page .aw-icon img {
  width: 100%;
  height: 100%;
}
.pinktober-page .learn-more {
  color: var(--pink);
}
.pinktober-page .learn-more:hover {
  color: var(--rose);
}

/* Gallery — kept as CSS grid: Bootstrap's grid can't do the spanning "hero tile" mosaic cleanly */
.pinktober-page .gallery {
  background: #121012;
  color: #fff;
}
.pinktober-page .gallery-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr 0.8fr;
  grid-auto-rows: 160px;
  gap: 8px;
}
.pinktober-page .gallery-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 11px;
}
.pinktober-page .gallery-grid .big {
  grid-row: span 2;
}
.pinktober-page .btn-active {
  background: #fff;
  color: #000;
}
.pinktober-page .hero-copy-col .btn.btn-md {
  padding-left: 24px;
  padding-right: 24px;
}
.pinktober-page .hero-img-col .pink-logo-img {
  height: 150px;
}
.pinktober-page .walk-in-pink-calendar {
  height: 75px;
}
.pinktober-page .qcard {
  border: 1px solid #eadfe5;
}
@media (max-width: 767.98px) {
  .pinktober-page .gallery-grid {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 190px;
  }
  .pinktober-page .gallery-grid .big {
    grid-column: span 2;
    grid-row: auto;
  }
}

/* Partners */
.pinktober-page .partner-card {
  border-color: var(--line) !important;
}
.pinktober-page .partner-card .btn {
  white-space: nowrap;
  padding-left: 0.6rem;
  padding-right: 0.6rem;
}
.pinktober-page .partner-logo {
  height: 90px;
  width: -moz-fit-content;
  width: fit-content;
  padding: 6px 10px;
  border-radius: 8px;
  font-weight: 800;
  letter-spacing: 0.04em;
  margin: 0 auto;
}
.pinktober-page .partner-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
@media (max-width: 575.98px) {
  .pinktober-page .partner-card h3 {
    font-size: 13px;
    line-height: 1.25;
  }
}

/* News */
.pinktober-page .news-card {
  border-color: var(--line) !important;
}
.pinktober-page .news-card small {
  color: var(--pink);
  letter-spacing: 0.05em;
}

/* Final CTA */
.pinktober-page .final-box {
  background: var(--pink);
  box-shadow: 0 12px 35px rgba(178, 27, 94, 0.2);
}
.pinktober-page .final-box p {
  color: #ffe8f2;
}

.pinktober-page .navbar .navbar-brand .logo {
  height: 121px;
  width: 123px;
  padding-bottom: 0;
}
@media (max-width: 575.98px) {
  .pinktober-page .navbar .navbar-brand .logo {
    height: 62px;
    width: 62px;
  }
}

/* Cancer Awareness Page */
.cancer-awareness-page .ca-panel {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}
.cancer-awareness-page .ca-panel-pink {
  border: 1px solid var(--pink);
  background: var(--pink);
  color: #fff;
}

/* Stat figures */
.cancer-awareness-page .ca-stat {
  font-size: clamp(38px, 4.6vw, 60px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
}

.know-the-four .title {
  max-width: 620px;
}

.cancer-awareness-page .ca-card {
  border-color: #f4dde4;
  transition: transform 0.15s ease, box-shadow 0.15s ease,
    border-color 0.15s ease;
}

.cancer-awareness-page .ca-card:hover {
  transform: translateY(-3px);
  border-color: var(--pink);
  box-shadow: 0 16px 32px rgba(225, 58, 92, 0.14);
}

/* The hover reveal, for pointer devices only. Gating on (hover: hover) keeps
       it away from touch, where a tap leaves a sticky :hover that would hide the
       face and take the button with it. Both faces then share one grid cell, so
       each covers the whole pink block, the block is as tall as the taller of
       the two, and the reveal shifts nothing on the page. */
@media (hover: hover) and (pointer: fine) and (min-width: 992px) {
  .cancer-awareness-page .ca-screen {
    display: grid;
  }
  .cancer-awareness-page .ca-screen-face,
  .cancer-awareness-page .ca-screen-pop {
    grid-area: 1 / 1;
  }
  .cancer-awareness-page .ca-screen-pop {
    opacity: 0;
    visibility: hidden;
  }

  /* Only the button opens the panel. The panel then holds itself open,
           since once it covers the block the pointer is over the panel. */
  .cancer-awareness-page
    .ca-screen:has(.ca-screen-trigger:hover)
    .ca-screen-pop,
  .cancer-awareness-page .ca-screen:has(.ca-screen-pop:hover) .ca-screen-pop {
    opacity: 1;
    visibility: visible;
  }
  .cancer-awareness-page
    .ca-screen:has(.ca-screen-trigger:hover)
    .ca-screen-face,
  .cancer-awareness-page .ca-screen:has(.ca-screen-pop:hover) .ca-screen-face {
    opacity: 0;
    visibility: hidden;
  }

  /* Keyboard. Kept in its own rule, because a browser that does not know
           :has() throws away the whole rule it appears in. */
  .cancer-awareness-page .ca-screen:focus-within .ca-screen-pop {
    opacity: 1;
    visibility: visible;
  }
  .cancer-awareness-page .ca-screen:focus-within .ca-screen-face {
    opacity: 0;
    visibility: hidden;
  }
}

.cancer-awareness-page .ca-screen-count {
  font-size: clamp(38px, 4.6vw, 60px);
  font-weight: 800;
  line-height: 1;
}
.cancer-awareness-page .ca-screen-face,
.cancer-awareness-page .ca-screen-pop {
  transition: opacity 0.25s ease, visibility 0.25s;
}
/* The list sits on the pink block, so it runs white through Bootstrap's own vars. */
.cancer-awareness-page .ca-screen-list {
  --bs-list-group-color: #fff;
  --bs-list-group-bg: transparent;
  --bs-list-group-border-color: rgba(255, 255, 255, 0.22);
}
.cancer-awareness-page .ca-screen-list .list-group-item:last-child {
  border-bottom: 0;
}
.cancer-awareness-page .ca-region-head {
  letter-spacing: 0.06em;
  opacity: 0.7;
}
.cancer-awareness-page .status-badge {
  background: #fff;
  color: #000;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 700;
}

/* Pledge Wall */

 /* Pinktober Pledge Wall banner - scoped to this page. */
    .pinktober-pledge-page {
        --pledge-pink: #f0506e;
        /*--pledge-pink-deep: #e13a5c;*/
        --pledge-pink-deep: #e0325a;
        --pledge-ink: #14161c;
        --pledge-body: #3d4350;
    }

    .pinktober-pledge-page {
    	background-color: #FFF1F6;
    }

    .pinktober-pledge-page .pledge-banner {
        position: relative;
        overflow: hidden;
        /*background: linear-gradient(135deg, #FFF0F6 0%, #F9D5E6 45%, #F0B0D0 100%);*/
       /* background: linear-gradient(225deg, #FFF0F6 0%, #F9D5E6 10%, #F0B0D0 100%);*/
        padding: clamp(48px, 7vw, 92px) 0;
    }

    /* Soft concentric arc sweeping out of the bottom-right corner. */
    /* FIX: the selector was listed twice; one is enough. */
    .pinktober-pledge-page .pledge-banner::after {
        content: "";
        position: absolute;
        border-radius: 50%;
        border: 40px solid rgba(240, 80, 110, 0.07);
        pointer-events: none;
    }
   /* .pinktober-pledge-page .pledge-banner::before {
        width: 900px;
        height: 900px;
        right: -180px;
        bottom: -620px;
    }*/
    .pinktober-pledge-page .pledge-banner::after {
        width: 1300px;
        height: 1300px;
        right: -420px;
        bottom: -960px;
        border-width: 56px;
        border-color: rgba(240, 80, 110, 0.05);
    }

    .pinktober-pledge-page .pledge-banner .gtt-container {
        position: relative;
        z-index: 2;
    }

    .pinktober-pledge-page .pledge-banner-row {
        display: flex;
        align-items: center;
        gap: clamp(24px, 5vw, 64px);
    }

    /* FIX (Safari): take the leftover space explicitly instead of relying on shrink. */
    .pinktober-pledge-page .pledge-banner-copy {
        flex: 1 1 0%;
        min-width: 0;
    }

    .pinktober-pledge-page .pledge-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: #ffffff;
        border: 1.5px solid #f6bac7;
        border-radius: 999px;
        padding: 9px 20px;
        margin-bottom: clamp(20px, 3vw, 34px);
        color: var(--pledge-pink-deep);
        font-size: 14px;
        font-weight: 700;
        letter-spacing: 0.09em;
        text-transform: uppercase;
        line-height: 1;
        white-space: nowrap; /* FIX: keep the pill on one line */
    }
    .pinktober-pledge-page .pledge-eyebrow .pledge-eyebrow-icon {
        font-size: 15px;
        line-height: 1;
    }

    .pinktober-pledge-page .pledge-heading {
        margin: 0 0 clamp(18px, 2.5vw, 28px);
        color: var(--pledge-ink);
        font-size: clamp(38px, 5.6vw, 74px);
        font-weight: 800;
        line-height: 1.03;
        letter-spacing: -0.02em;
    }
    .pinktober-pledge-page .pledge-heading .pledge-heading-alt {
        display: block;
        color: var(--pledge-pink-deep);
    }

    .pinktober-pledge-page .pledge-sub-heading {
        max-width: 560px;
        margin: 0 0 clamp(26px, 3.5vw, 40px);
        color: var(--pledge-body);
        font-size: clamp(16px, 1.35vw, 20px);
        font-weight: 400;
        line-height: 1.55;
    }

    .pinktober-pledge-page .pledge-counter {
        display: inline-flex;
        align-items: center;
        gap: 14px;
        background: #ffffff;
        border-radius: 999px;
        padding: 13px 28px;
        box-shadow: 0 8px 24px rgba(240, 80, 110, 0.16);
        white-space: nowrap; /* FIX: keep the pill on one line */
    }
    .pinktober-pledge-page .pledge-counter-dot {
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background: var(--pledge-pink-deep);
        box-shadow: 0 0 0 5px rgba(240, 80, 110, 0.18);
        flex: 0 0 auto;
    }
    .pinktober-pledge-page .pledge-counter-number {
        color: var(--pledge-ink);
        font-size: clamp(17px, 1.4vw, 21px);
        font-weight: 800;
        line-height: 1;
    }
    .pinktober-pledge-page .pledge-counter-label {
        color: var(--pledge-ink);
        font-size: clamp(15px, 1.2vw, 18px);
        font-weight: 700;
        line-height: 1;
    }

    /* FIX (Safari): an explicit width, so the badge is never sized from the
       logo image's large natural width (which crushed the copy column). */
    .pinktober-pledge-page .pledge-badge {
        flex: 0 0 auto;
        width: clamp(260px, 32vw, 440px);
        height: clamp(260px, 32vw, 440px);
        filter: drop-shadow(0 22px 34px rgba(110, 49, 69, .18));
        display: flex;
        align-items: center;
        justify-content: center;
        padding: clamp(8px, 1.5vw, 20px);
    }
    .pinktober-pledge-page .pledge-badge img {
        display: block;
        width: 100%;
        height: 100%;
        min-width: 0;
        object-fit: contain;
    }

    @media (max-width: 991.98px) {
        .pinktober-pledge-page .pledge-banner-row {
            flex-direction: column-reverse;
            align-items: flex-start;
        }
        .pinktober-pledge-page .pledge-badge {
            width: 240px;
            height: 240px;
            padding: 10px;
        }
        .pinktober-pledge-page .pledge-banner::after {
            display: none;
        }
    }

    /* ------------------------------------------------------------------
       Live Pledge Wall + pledge form.

       Layout, spacing, cards, form controls and buttons come from Bootstrap
       and the theme's own classes (row/col, card, d-flex, form-control,
       form-select, btn btn-md btn-banner, para p-md, alert...). Everything
       below is only what those cannot do: the scrolling stream itself and the
       campaign's pink treatments.
       ------------------------------------------------------------------ */
    .pinktober-pledge-page .pledge-wall-section {
       /*background: linear-gradient(135deg, #FFF0F6 0%, #F9D5E6 45%, #F0B0D0 100%);*/
       /*background: linear-gradient(225deg, #FFF0F6 0%, #F9D5E6 10%, #F0B0D0 100%);*/
    }

    /* Panels: Bootstrap .card gives the box, this only softens it. */
    .pinktober-pledge-page .pledge-panel {
        border-color: #f4dde4;
        box-shadow: 0 18px 40px rgba(225, 58, 92, 0.06);
    }

    .pinktober-pledge-page .pledge-hint {
        color: var(--pledge-pink);
    }

    /* --- The scrolling wall --- */
    .pinktober-pledge-page .pledge-wall {
        /* .card is a flex column: the basis is the wall's own height, grow lets
           it absorb whatever h-100 adds when the form panel is taller, and
           min-height:0 stops the flex item growing to fit the whole track. */
        flex: 1 1 clamp(430px, 52vw, 560px);
        min-height: 0;
        /* Cards fade out instead of being clipped at the top and bottom edges. */
        -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 91%, transparent 100%);
        mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 91%, transparent 100%);
    }

    .pinktober-pledge-page .pledge-wall-track {
        will-change: transform;
        animation: pledge-wall-scroll var(--pledge-speed, 46s) linear infinite;
    }
    .pinktober-pledge-page .pledge-wall-col:nth-child(2) .pledge-wall-track {
        animation-direction: reverse;
    }

    @keyframes pledge-wall-scroll {
        /* The track holds two copies of the column, so -50% is one seamless loop. */
        from { transform: translate3d(0, 0, 0); }
        to   { transform: translate3d(0, -50%, 0); }
    }

    /* Hover anywhere on the wall holds every column still so a pledge can be read. */
    .pinktober-pledge-page .pledge-wall:hover .pledge-wall-track,
    .pinktober-pledge-page .pledge-wall:focus-within .pledge-wall-track {
        animation-play-state: paused;
    }

    /* --- Pledge cards: .card handles the box, these are the pink treatments --- */
    .pinktober-pledge-page .pledge-card {
        background: linear-gradient(180deg, #fff6f8 0%, #ffeef2 100%);
        border-color: #f8dde4;
    }
    .pinktober-pledge-page .pledge-card-quote {
        color: var(--pledge-pink);
        font-size: 24px;
        line-height: 0.6;
    }
    .pinktober-pledge-page .pledge-card-name {
        color: var(--pledge-pink-deep);
    }
    .pinktober-pledge-page .pledge-card-heart {
        color: #e9b7c3;
    }

    /* Filled cards break up the stream. */
    .pinktober-pledge-page .pledge-card.is-solid {
        background: linear-gradient(160deg, #f0506e 0%, #e0325a 100%);
        border-color: transparent;
    }
    .pinktober-pledge-page .pledge-card.is-solid,
    .pinktober-pledge-page .pledge-card.is-solid .pledge-card-name {
        color: #ffffff;
    }
    .pinktober-pledge-page .pledge-card.is-solid .pledge-card-quote,
    .pinktober-pledge-page .pledge-card.is-solid .pledge-card-heart {
        color: rgba(255, 255, 255, 0.7);
    }
    .pinktober-pledge-page .pledge-card.is-solid .pledge-card-time {
        color: rgba(255, 255, 255, 0.75) !important;
    }

    /* A pledge that has just been added, so the visitor can spot it arrive. */
    .pinktober-pledge-page .pledge-card.is-new {
        animation: pledge-card-arrive 2.4s ease-out 1;
    }
    @keyframes pledge-card-arrive {
        0%   { box-shadow: 0 0 0 3px rgba(240, 80, 110, 0.55); transform: scale(0.97); }
        18%  { transform: scale(1); }
        100% { box-shadow: 0 0 0 3px rgba(240, 80, 110, 0); }
    }

    /* Campaign cards seeded into the stream. */
    .pinktober-pledge-page .pledge-card.is-brand {
        min-height: 128px;
        background: linear-gradient(180deg, #ffffff 0%, #fff2f5 100%);
    }

    .pinktober-pledge-page .pledge-card-badge {
        width: 52px;
        height: 52px;
        background: var(--pledge-pink);
    }
    .pinktober-pledge-page .pledge-preview-badge {
        width: 46px;
        height: 46px;
        background: var(--pledge-pink);
    }

    /* --- Static view: no scroll, no duplicated cards --- */
    .pinktober-pledge-page .pledge-wall.is-static {
        min-height: 0;
        height: auto;
        flex: 0 1 auto;
        max-height: 560px;
        overflow-y: auto;
        -webkit-mask-image: none;
        mask-image: none;
    }
    .pinktober-pledge-page .pledge-wall.is-static .pledge-wall-track {
        animation: none;
        transform: none;
    }
    .pinktober-pledge-page .pledge-wall.is-static .pledge-wall-clone {
        display: none;
    }

    /* The theme's .btn capitalizes every word; this copy is sentence case. */
    .pinktober-pledge-page .btn.pledge-view-toggle,
    .pinktober-pledge-page .btn.pledge-submit {
        text-transform: none;
    }

    .pinktober-pledge-page .pledge-view-toggle {
        color: #fff;
    }
    .pinktober-pledge-page .pledge-view-toggle:hover {
        color: #fff;
    }

    /* --- Form: brand colours over the theme's control styling --- */
    /* The theme's .form-label is 20px, which is too heavy for this narrow
       side panel - everything else about the class still applies. */
    .pinktober-pledge-page .pledge-form-panel .form-label {
        font-size: 13.5px;
        line-height: 1.3;
    }

    .pinktober-pledge-page .pledge-input,
    .pinktober-pledge-page .pledge-select {
        margin-bottom: 0; /* the theme adds 32px to every control; the grid spaces these */
        height: 46px;
        border-color: #eddfe3;
        border-radius: 11px;
        color: var(--pledge-ink);
    }
    .pinktober-pledge-page .pledge-input:focus,
    .pinktober-pledge-page .pledge-select:focus {
        border-color: var(--pledge-pink);
        box-shadow: 0 0 0 3px rgba(240, 80, 110, 0.13);
    }

    .pinktober-pledge-page .pledge-chip {
        border: 1px solid #f6ccd7;
        background: #fff6f8;
        color: var(--pledge-pink-deep);
        height: auto;
        box-shadow: none;
        white-space: normal;
        text-transform: none;
    }
    .pinktober-pledge-page .pledge-chip:hover,
    .pinktober-pledge-page .pledge-chip:focus-visible {
        background: #ffe8ee;
        border-color: var(--pledge-pink);
        color: var(--pledge-pink-deep);
    }

    .pinktober-pledge-page .pledge-counter-chars.is-limit {
        color: var(--pledge-pink-deep);
        font-weight: 700;
    }

    .pinktober-pledge-page .pledge-preview-card {
        min-height: 132px;
        /* background: #ff378a;*/
        background: var(--pledge-pink-deep);
        color: #fff !important;
    }
    .pinktober-pledge-page .pledge-preview-text {
        font-size: clamp(17px, 1.5vw, 21px);
        line-height: 1.25;
    }


    /* The strip's resting state. Once the JS adds .alert-danger/.alert-success
       Bootstrap's contextual colours take over, so this must not match then. */
    .pinktober-pledge-page .pledge-message-strip:not(.alert-danger):not(.alert-success) {
        border-color: #f1e2e6;
        background: #fffafb;
        color: #7b8291;
    }

    /* The CTA: .btn .btn-md .btn-banner .rounded-pill size it, this colours it. */
    .pinktober-pledge-page .btn.pink {
       /* background: #ff378a; */
       background: var(--pledge-pink-deep);
        border-color: transparent;
        color: #ffffff;
    }
    .pinktober-pledge-page .btn.pink:hover:not(:disabled) {
        filter: brightness(1.05);
        color: #ffffff;
    }

    .pinktober-pledge-page .pledge-footnote {
        /*background: #fff6f8;*/
       /* background: #ff378a; */
       background: var(--pledge-pink-deep);
        color: #fff;
    }

    @media (max-width: 991.98px) {
        .pinktober-pledge-page .pledge-wall {
            flex-basis: 420px;
        }
    }


    /* --- Pledge cards open the share modal --- */
    .pinktober-pledge-page .pledge-card.is-shareable {
        cursor: pointer;
        transition: transform 0.15s ease, box-shadow 0.15s ease;
    }
    .pinktober-pledge-page .pledge-card.is-shareable:hover,
    .pinktober-pledge-page .pledge-card.is-shareable:focus-visible {
        transform: translateY(-2px);
        box-shadow: 0 10px 24px rgba(225, 58, 92, 0.18);
        outline: none;
    }
    .pinktober-pledge-page .pledge-card.is-shareable:focus-visible {
        border-color: #f0506e;
    }

    /* --- Share modal --- */
    .pledge-share-modal .modal-content {
        box-shadow: 0 30px 70px rgba(20, 22, 28, 0.28);
    }

    /* Keep the dialog inside the viewport and let the actions column scroll,
       rather than clipping the buttons off the bottom on a short screen.
       Below md the whole modal scrolls with the page instead. */
    @media (min-width: 768px) {
        .pledge-share-modal .modal-content {
            max-height: calc(100vh - 3.5rem);
        }
        .pledge-share-modal .pledge-share-actions-col {
            max-height: calc(100vh - 3.5rem);
            overflow-y: auto;
        }
    }

    /* Left panel: the generated artwork sits on a soft pink ground. */
    .pledge-share-modal .pledge-share-artwork {
        background: linear-gradient(180deg, #fff1f5 0%, #ffe4ec 100%);
    }
    .pledge-share-modal .pledge-share-image {
        display: block;
        width: 100%;
        max-width: 340px;
        height: auto;
        border-radius: 22px;
        box-shadow: 0 18px 36px rgba(225, 58, 92, 0.28);
    }
    /* Shown only when a pledge has no image yet. */
    .pledge-share-modal .pledge-share-fallback {
        max-width: 340px;
        padding: 28px;
        border-radius: 22px;
        background: linear-gradient(160deg, #f0506e 0%, #e0325a 100%);
        color: #ffffff;
        text-transform: uppercase;
        line-height: 1.2;
    }

    .pledge-share-modal .pledge-share-tick {
        width: 64px;
        height: 64px;
        background: #f0506e;
        color: #ffffff;
        font-size: 30px;
        line-height: 1;
        box-shadow: 0 10px 22px rgba(240, 80, 110, 0.35);
    }

    .pledge-share-modal .pledge-share-heading {
        font-size: clamp(24px, 2.4vw, 34px);
        line-height: 1.15;
        letter-spacing: -0.01em;
        color: #14161c;
        max-width: 22ch;
    }

    /* Outline actions: Share / Copy caption / Save image. */
    .pledge-share-modal .pledge-share-action {
        height: auto;
        padding: 12px 22px;
        border: 1px solid #e3d7dc;
        background: #ffffff;
        color: #14161c;
        font-weight: 600;
        text-transform: none;
        box-shadow: none;
    }
    .pledge-share-modal .pledge-share-action:hover,
    .pledge-share-modal .pledge-share-action:focus-visible {
        border-color: #f0506e;
        color: #e13a5c;
    }

    /* "Share directly on" sits on a rule. */
    .pledge-share-modal .pledge-share-divider {
        position: relative;
    }
    .pledge-share-modal .pledge-share-divider::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        border-top: 1px solid #eee1e6;
    }
    .pledge-share-modal .pledge-share-divider span {
        position: relative;
        padding: 0 12px;
        background: #ffffff;
    }

    /* Brand buttons. */
    .pledge-share-modal .pledge-share-buttons {
        display: flex;
        gap: 8px;
    }
    .pledge-share-modal .pledge-share-btn {
        /* Flex centring so a one word label sits level with the three line one. */
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 1 1 0;
        min-width: 0;
        min-height: 72px;
        height: auto;
        padding: 12px 10px;
        border: 0;
        border-radius: 12px;
        box-shadow: none;
        color: #ffffff;
        font-size: 12.5px;
        font-weight: 700;
        line-height: 1.25;
        text-transform: none;
        text-align: center;
        white-space: normal;
    }
    .pledge-share-modal .pledge-share-btn:hover,
    .pledge-share-modal .pledge-share-btn:focus-visible {
        color: #ffffff;
        filter: brightness(1.07);
    }
    .pledge-share-modal .pledge-share-btn.is-facebook { background: #1877f2; }
    .pledge-share-modal .pledge-share-btn.is-linkedin { background: #0a66c2; }
    .pledge-share-modal .pledge-share-btn.is-whatsapp { background: #25d366; }
    .pledge-share-modal .pledge-share-btn.is-whatsapp-status { background: #128c47; }
    .pledge-share-modal .pledge-share-btn.is-instagram {
        background: linear-gradient(45deg, #f09433 0%, #dc2743 45%, #bc1888 100%);
    }

    .pledge-share-modal .pledge-share-note {
        background: #f6f7f9;
        color: #6d7480;
        line-height: 1.5;
    }

    @media (max-width: 575.98px) {
        .pledge-share-modal .pledge-share-image,
        .pledge-share-modal .pledge-share-fallback {
            max-width: 220px;
        }
        .pledge-share-modal .pledge-share-buttons {
            flex-wrap: wrap;
        }
        .pledge-share-modal .pledge-share-btn {
            flex: 1 1 30%;
        }
    }

    /* Visitors who ask for less motion get the static wall, no toggle needed. */
    @media (prefers-reduced-motion: reduce) {
        .pinktober-pledge-page .pledge-wall {
            min-height: 0;
            height: auto;
            flex: 0 1 auto;
            max-height: 560px;
            overflow-y: auto;
            -webkit-mask-image: none;
            mask-image: none;
        }
        .pinktober-pledge-page .pledge-wall .pledge-wall-track {
            animation: none;
            transform: none;
        }
        .pinktober-pledge-page .pledge-wall .pledge-wall-clone {
            display: none;
        }
    }

 /* News Page */
 .news-band .news-conten .news-item {
 background-color: #ff378a !important;
 }

.news-band .news-conten .news-item:hover {
    background-color: #fff !important;
    color: #ff378a !important;
}


/* Brand marks in the "Add to calendar" chooser. */
   .pinktober-page .cal-ico { width: 22px; height: 22px; }
   .pinktober-page .hero-pinktober .btn.btn-md {
        padding-left: 24px;
        padding-right: 24px;
    }
    .pinktober-page .hero-quote-card .pink-logo-img {
        height: 150px;
    }
    .pinktober-page .walk-in-pink-calendar {
        height: 75px;
    }
    .pinktober-page .qcard {
        border: 1px solid var(--pink);
        background: var(--pink);
        color: #fff;
    }
    @media (max-width: 767.98px) {
        .pinktober-page .gallery-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 190px; }
        .pinktober-page .gallery-grid .big { grid-column: span 2; grid-row: auto; }
    }


.pinktober-news-page .champ-card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.pinktober-news-page .champ-logo-img,
.pinktober-news-page .champ-card iframe {
    width: 100%;
    height: 220px;
    display: block;
}

.pinktober-news-page .champ-logo-img {
    object-fit: cover;
}

.pinktober-news-page .champ-card iframe {
    border: 0;
}

.pinktober-news-page .champ-card .card-body {
    flex: 1;
    display: flex;
    align-items: flex-start;
}

.pinktober-news-page .champ-card h3 {
    line-height: 1.35;
}

.pinktober-news-page a.news-link{
	color: #000;
    text-decoration:none;
}

.pinktober-news-page a.news-link:hover h3{
	color: #ff378a;
}