/**
 * WoofStock Saline — theme layer
 *
 * Loaded after style.css. The base template supplies the grid, the rotated
 * section heads, the buttons and the mail form; everything below re-skins those
 * in the logo palette and adds the components the event page needs.
 */

:root {
    --orange: #D96705;
    --pink: #F2A6C9;
    --lime: #CCDD89;
    --purple: #9377E2;
    --verm: #FB500C;
    --ink: #2A1A10;
    --cream: #FFF6E8;

    --display: "Titan One", "Fredoka", sans-serif;
    --head: "Fredoka", sans-serif;
    --body: "Nunito", sans-serif;
}

/* ==========================================================================
   Typography
   ========================================================================== */

body {
    font-family: var(--body);
    color: var(--ink);
}

h1, h2, .heading-1, .heading-2, .display {
    font-family: var(--display);
    font-weight: 400;
    letter-spacing: 0.01em;
}

h3, h4, h5, h6,
.heading-3, .heading-4, .heading-5, .heading-6 {
    font-family: var(--head);
    font-weight: 600;
    letter-spacing: 0.02em;
}

h3, .heading-3 {
    font-size: 24px;
    line-height: 1.2;
}

@media (min-width: 992px) {
    h3, .heading-3 {
        font-size: 27px;
    }
}

p {
    font-size: 17px;
    line-height: 1.62;
}

@media (min-width: 768px) {
    p {
        font-size: 18px;
        line-height: 1.66;
    }
}

.lead {
    font-size: 20px;
    line-height: 1.5;
    font-family: var(--head);
    font-weight: 500;
}

@media (min-width: 768px) {
    .lead {
        font-size: 23px;
    }
}

.eyebrow {
    display: block;
    font-family: var(--head);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

/* Reusable ink-on-colour "sticker" — a rotated tag with a hard offset shadow */
.sticker {
    display: inline-block;
    font-family: var(--head);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 9px 18px;
    border: 3px solid var(--ink);
    border-radius: 999px;
    background: #fff;
    color: var(--ink);
    box-shadow: 4px 4px 0 var(--ink);
    transform: rotate(-2deg);
}

.sticker--lime  { background: var(--lime); }
.sticker--pink  { background: var(--pink); }
.sticker--verm  { background: var(--verm); color: #fff; }
.sticker--right { transform: rotate(2deg); }

/* ==========================================================================
   Section backgrounds — the template assumes white text on 2, 4 and 5.
   Lime and pink are light, so those two flip back to ink.
   ========================================================================== */

.bg-about, .bg-support {
    color: var(--ink);
}

.bg-about h1, .bg-about h2, .bg-about h3, .bg-about h4, .bg-about h5, .bg-about h6,
.bg-about .heading-1, .bg-about .heading-2, .bg-about .heading-3,
.bg-support h1, .bg-support h2, .bg-support h3, .bg-support h4, .bg-support h5, .bg-support h6,
.bg-support .heading-1, .bg-support .heading-2, .bg-support .heading-3 {
    color: var(--ink);
}

.bg-about .icon-primary,
.bg-support .icon-primary {
    color: var(--ink);
}

.bg-about .marked-list > li:before,
.bg-support .marked-list > li:before {
    background-color: var(--ink);
}

.bg-about .section-head h1 { color: var(--orange); }
.bg-support .section-head h1 { color: var(--verm); }
.bg-contact .section-head h1 { color: var(--lime); }

.bg-hero .section-head h1 { color: #fff; }

.bg-verm {
    background-color: var(--verm);
    color: #fff;
}

.bg-verm h1, .bg-verm h2, .bg-verm h3, .bg-verm h4,
.bg-verm .heading-1, .bg-verm .heading-2, .bg-verm .heading-3 {
    color: #fff;
}

.bg-verm .section-head h1 { color: var(--lime); }
.bg-verm .icon-primary { color: #fff; }
.bg-verm .marked-list > li:before { background-color: #fff; }

.bg-cream {
    background-color: var(--cream);
    color: var(--ink);
}

.bg-cream .section-head h1 { color: var(--purple); }
.bg-cream .marked-list > li:before { background-color: var(--ink); }

/* The activities cut-out sits low on desktop; make room for the card grid. */
.bg-activities {
    background-color: #fff;
}

/* On narrow screens the photo fills the whole section rather than sitting off
   to one side, so copy lands on the dog. Lay a scrim in the section's own
   colour over the image — the portrait still reads, the text stays legible. */
@media (max-width: 991px) {
    .bg-hero,
    .bg-about,
    .bg-support,
    .bg-contact {
        position: relative;
    }

    .bg-hero:before,
    .bg-about:before,
    .bg-support:before,
    .bg-contact:before {
        content: '';
        position: absolute;
        inset: 0;
        pointer-events: none;
    }

    .bg-hero:before { background: rgba(217, 103, 5, 0.76); }
    .bg-about:before { background: rgba(204, 221, 137, 0.78); }
    .bg-support:before { background: rgba(242, 166, 201, 0.78); }
    .bg-contact:before { background: rgba(147, 119, 226, 0.78); }

    /* Lift the content above the scrim at every width the scrim covers. */
    .bg-hero > .container,
    .bg-about > .container,
    .bg-support > .container,
    .bg-contact > .container {
        position: relative;
        z-index: 1;
    }
}

/* On tablets the copy only occupies the left of the section, so weight the
   scrim that way and let the portrait come back through on the right. */
@media (min-width: 768px) and (max-width: 991px) {
    .bg-hero:before {
        background: linear-gradient(100deg, rgba(217, 103, 5, 0.94) 0%, rgba(217, 103, 5, 0.88) 42%, rgba(217, 103, 5, 0.3) 100%);
    }

    .bg-about:before {
        background: linear-gradient(100deg, rgba(204, 221, 137, 0.94) 0%, rgba(204, 221, 137, 0.88) 42%, rgba(204, 221, 137, 0.3) 100%);
    }

    .bg-support:before {
        background: linear-gradient(100deg, rgba(242, 166, 201, 0.94) 0%, rgba(242, 166, 201, 0.88) 42%, rgba(242, 166, 201, 0.3) 100%);
    }

    .bg-contact:before {
        background: linear-gradient(100deg, rgba(147, 119, 226, 0.94) 0%, rgba(147, 119, 226, 0.88) 42%, rgba(147, 119, 226, 0.3) 100%);
    }
}

/* Long-form copy centred at phone width is hard to read; the template's
   text-center only lifts at 480px, so bring it forward. */
@media (max-width: 479px) {
    .page-content .container.text-center {
        text-align: left;
    }
}

/* ==========================================================================
   Groovy furniture — rainbow rules and wave dividers
   ========================================================================== */

.rainbow-rule {
    height: 14px;
    border: 0;
    margin: 0;
    background: linear-gradient(90deg,
    var(--orange) 0 20%,
    var(--pink) 20% 40%,
    var(--lime) 40% 60%,
    var(--verm) 60% 80%,
    var(--purple) 80% 100%);
}

.wave {
    display: block;
    width: 100%;
    height: 44px;
    margin: 0;
    line-height: 0;
}

.wave svg {
    display: block;
    width: 100%;
    height: 100%;
}

@media (min-width: 768px) {
    .wave {
        height: 68px;
    }
}

/* ==========================================================================
   Header
   ========================================================================== */

.page-header {
    position: sticky;
    top: 0;
    z-index: 60;
    background: var(--cream);
    border-bottom: 4px solid var(--ink);
    padding: 10px 0;
}

.page-header .container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* The template turns the brand into a big white circle that hangs over the
   hero. This is a sticky bar instead, so flatten it back out. */
.page-header .brand {
    float: none;
    flex: 0 0 auto;
    line-height: 0;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    border-radius: 0;
    background: none;
    text-align: left;
}

.page-header .brand img {
    width: 178px;
    height: auto;
    max-width: 100%;
}

@media (min-width: 992px) {
    .page-header .brand img {
        width: 232px;
    }
}

.page-header nav {
    flex: 1 1 auto;
    min-width: 0;
}

.main-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 22px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.main-nav > li {
    flex: 0 0 auto;
}

.main-nav a {
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Hamburger — the full nav does not fit inline below 992px
   -------------------------------------------------------------------------- */

.nav-toggle {
    display: none;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    padding: 9px 16px;
    background: var(--verm);
    color: #fff;
    border: 3px solid var(--ink);
    border-radius: 999px;
    box-shadow: 3px 3px 0 var(--ink);
    font-family: var(--head);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
    display: block;
    width: 20px;
    height: 3px;
    border-radius: 2px;
    background: currentColor;
    transition: 0.25s ease;
}

.nav-toggle__bars {
    position: relative;
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
    content: '';
    position: absolute;
    left: 0;
}

.nav-toggle__bars::before { top: -7px; }
.nav-toggle__bars::after { top: 7px; }

/* Bars collapse into an X while the panel is open. */
.nav-toggle[aria-expanded="true"] .nav-toggle__bars {
    background: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before {
    top: 0;
    transform: rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after {
    top: 0;
    transform: rotate(-45deg);
}

@media (max-width: 991px) {
    .nav-toggle {
        display: inline-flex;
    }

    .page-header nav {
        flex: 1 1 100%;
        order: 4;
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows 0.28s ease;
    }

    .page-header nav.is-open {
        grid-template-rows: 1fr;
    }

    .page-header nav > .main-nav {
        overflow: hidden;
        min-height: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .main-nav > li + li {
        border-top: 2px dashed rgba(42, 26, 16, 0.25);
    }

    .main-nav a {
        display: block;
        padding: 14px 4px;
        font-size: 16px;
        border-bottom: 0;
    }

    .main-nav a:hover {
        border-bottom-color: transparent;
    }

    .main-nav .nav-cta a {
        margin: 14px 0 6px;
        text-align: center;
        padding: 12px 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .page-header nav,
    .nav-toggle__bars,
    .nav-toggle__bars::before,
    .nav-toggle__bars::after {
        transition: none;
    }
}

.main-nav a {
    font-family: var(--head);
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink);
    text-decoration: none;
    padding: 4px 0;
    border-bottom: 3px solid transparent;
    transition: 0.2s ease;
}

.main-nav a:hover {
    color: var(--verm);
    border-bottom-color: var(--verm);
}

.main-nav .nav-cta a {
    border: 3px solid var(--ink);
    border-radius: 999px;
    padding: 8px 18px;
    background: var(--verm);
    color: #fff;
    box-shadow: 3px 3px 0 var(--ink);
}

.main-nav .nav-cta a:hover {
    background: var(--ink);
    color: var(--lime);
    border-bottom-color: var(--ink);
}

/* Compact contact strip, shown in place of the nav on small screens */
.header-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 20px;
    font-family: var(--head);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink);
}

.header-meta a {
    color: var(--ink);
    text-decoration: none;
}

.header-meta a:hover {
    color: var(--verm);
}

/* Below the breakpoint the meta line gets its own row between the brand row
   and the collapsible nav panel. */
@media (max-width: 991px) {
    .header-meta {
        order: 3;
        flex: 1 1 100%;
    }
}

@media (min-width: 992px) {
    .header-meta {
        display: none;
    }
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
    align-items: center;
    padding-top: 46px;
    padding-bottom: 46px;
    border-bottom: 4px solid var(--ink);
}

@media (min-width: 992px) {
    .hero {
        height: auto;
        min-height: 84vh;
    }
}

.hero-logo {
    display: block;
    width: 100%;
    max-width: 560px;
    height: auto;
    border: 5px solid var(--ink);
    border-radius: 10px;
    box-shadow: 10px 10px 0 var(--ink);
    transform: rotate(-1.5deg);
    margin: 0 auto;
}

@media (min-width: 480px) {
    .hero-logo {
        margin: 0;
    }
}

.hero-billing {
    margin-top: 34px;
    color: var(--ink);
}

.hero-date {
    display: block;
    font-family: var(--display);
    color: #fff;
    font-size: 54px;
    line-height: 0.95;
    text-transform: uppercase;
    text-shadow: 5px 5px 0 var(--ink);
    margin-top: 6px;
}

@media (min-width: 768px) {
    .hero-date {
        font-size: 84px;
        text-shadow: 7px 7px 0 var(--ink);
    }
}

@media (min-width: 1200px) {
    .hero-date {
        font-size: 100px;
    }
}

.hero-facts {
    list-style: none;
    margin: 22px 0 0;
    padding: 0;
    font-family: var(--head);
    font-weight: 600;
    font-size: 17px;
    letter-spacing: 0.03em;
}

.hero-facts li {
    position: relative;
    padding-left: 32px;
}

.hero-facts li + li {
    margin-top: 8px;
}

.hero-facts .fa {
    position: absolute;
    left: 0;
    top: 2px;
    width: 22px;
    text-align: center;
    color: var(--ink);
}

@media (min-width: 768px) {
    .hero-facts {
        font-size: 19px;
    }
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-top: 30px;
    justify-content: center;
}

/* The template's `* + .btn` adds a 37px top margin, which knocks the second
   button out of line inside a flex row. Spacing here comes from the gap. */
.hero-actions > .btn + .btn {
    margin-top: 0;
}

@media (min-width: 480px) {
    .hero-actions {
        justify-content: flex-start;
    }
}

/* ==========================================================================
   Buttons — squarer, heavier, with the poster-style offset shadow
   ========================================================================== */

.page .btn {
    font-family: var(--head);
    font-weight: 700;
    letter-spacing: 0.08em;
    border-radius: 999px;
    border-width: 3px;
}

.page .btn-primary {
    border-color: var(--ink);
    box-shadow: 5px 5px 0 var(--ink);
}

.page .btn-primary:hover,
.page .btn-primary:active {
    background: var(--lime);
    color: var(--ink);
    box-shadow: 2px 2px 0 var(--ink);
}

.btn-verm {
    color: #fff;
    background: var(--verm);
    border-color: var(--ink);
    box-shadow: 5px 5px 0 var(--ink);
}

.btn-verm:hover,
.btn-verm:active {
    background: var(--ink);
    color: var(--lime);
}

.btn-ghost {
    color: var(--ink);
    background: transparent;
    border-color: var(--ink);
}

.btn-ghost:hover,
.btn-ghost:active {
    background: var(--ink);
    color: var(--lime);
}

.bg-contact .btn-ghost,
.bg-verm .btn-ghost {
    color: #fff;
    border-color: #fff;
}

.bg-contact .btn-ghost:hover,
.bg-verm .btn-ghost:hover {
    background: #fff;
    color: var(--ink);
}

/* ==========================================================================
   Ticker strip
   ========================================================================== */

.ticker {
    background: var(--ink);
    color: #fff;
    padding: 26px 0;
    border-bottom: 4px solid var(--ink);
}

.ticker-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    text-align: center;
}

@media (min-width: 600px) {
    .ticker-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 992px) {
    .ticker-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.ticker-stat b {
    display: block;
    font-family: var(--display);
    font-weight: 400;
    font-size: 44px;
    line-height: 1;
}

.ticker-stat:nth-child(1) b { color: var(--lime); }
.ticker-stat:nth-child(2) b { color: var(--pink); }
.ticker-stat:nth-child(3) b { color: var(--orange); }
.ticker-stat:nth-child(4) b { color: var(--purple); }

.ticker-stat span {
    display: block;
    margin-top: 6px;
    font-family: var(--head);
    font-weight: 500;
    font-size: 15px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #F7E9D8;
}

/* ==========================================================================
   Cards
   ========================================================================== */

.card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 26px;
    margin-top: 34px;
    text-align: left;
}

@media (min-width: 600px) {
    .card-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1200px) {
    .card-grid--3 {
        grid-template-columns: repeat(3, 1fr);
    }
}

.card {
    position: relative;
    background: #fff;
    border: 4px solid var(--ink);
    border-radius: 14px;
    padding: 26px 24px 24px;
    box-shadow: 7px 7px 0 var(--ink);
    transition: 0.22s ease;
}

.card:hover {
    transform: translate(-2px, -2px);
    box-shadow: 11px 11px 0 var(--ink);
}

.card h3 {
    color: var(--ink);
    margin-top: 14px;
    font-size: 21px;
}

.card p {
    font-size: 16px;
    line-height: 1.55;
    color: #4A3A2E;
}

.card .card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 3px solid var(--ink);
    font-size: 25px;
    color: var(--ink);
}

.card:nth-child(5n+1) .card-icon { background: var(--lime); }
.card:nth-child(5n+2) .card-icon { background: var(--pink); }
.card:nth-child(5n+3) .card-icon { background: var(--orange); }
.card:nth-child(5n+4) .card-icon { background: var(--purple); }
.card:nth-child(5n+5) .card-icon { background: var(--verm); color: #fff; }

/* Contest cards sit on vermillion, so they need their own palette */
.bg-verm .card {
    background: var(--cream);
}

.bg-verm .card p {
    color: #4A3A2E;
}

/* ==========================================================================
   Contest ribbons
   ========================================================================== */

.ribbon-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    margin-top: 32px;
    text-align: left;
}

@media (min-width: 600px) {
    .ribbon-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 992px) {
    .ribbon-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

.ribbon {
    background: var(--cream);
    border: 4px solid var(--ink);
    border-radius: 12px;
    padding: 22px 18px;
    text-align: center;
    box-shadow: 6px 6px 0 var(--ink);
}

.ribbon b {
    display: block;
    font-family: var(--display);
    font-size: 30px;
    line-height: 1;
    color: var(--verm);
}

.ribbon span {
    display: block;
    margin-top: 10px;
    font-family: var(--head);
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink);
}

.ribbon:nth-child(2) b { color: var(--purple); }
.ribbon:nth-child(3) b { color: var(--orange); }
.ribbon:nth-child(4) b { color: #C2196B; }
.ribbon:nth-child(5) b { color: #2E7D32; }

/* ==========================================================================
   Schedule
   ========================================================================== */

.schedule {
    list-style: none;
    margin: 30px 0 0;
    padding: 0;
    text-align: left;
}

.schedule li {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 22px;
    padding: 18px 0;
    border-top: 3px dashed rgba(42, 26, 16, 0.35);
}

.schedule li:last-child {
    border-bottom: 3px dashed rgba(42, 26, 16, 0.35);
}

.schedule time {
    flex: 0 0 auto;
    min-width: 150px;
    font-family: var(--display);
    font-size: 21px;
    color: var(--verm);
    line-height: 1.2;
}

.schedule .what {
    flex: 1 1 260px;
}

.schedule .what strong {
    display: block;
    font-family: var(--head);
    font-weight: 600;
    font-size: 18px;
    color: var(--ink);
}

.schedule .what span {
    display: block;
    font-size: 16px;
    color: #4A3A2E;
}

/* ==========================================================================
   Vendor / sponsor chips
   ========================================================================== */

.chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
    justify-content: center;
}

@media (min-width: 480px) {
    .chip-list {
        justify-content: flex-start;
    }
}

.chip-list li {
    font-family: var(--head);
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.03em;
    background: #fff;
    color: var(--ink);
    border: 3px solid var(--ink);
    border-radius: 999px;
    padding: 8px 18px;
    box-shadow: 3px 3px 0 var(--ink);
}

/* ==========================================================================
   Fundraiser panels
   ========================================================================== */

.panel-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 32px;
    text-align: left;
}

@media (min-width: 768px) {
    .panel-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.panel {
    background: var(--cream);
    border: 4px solid var(--ink);
    border-radius: 14px;
    padding: 28px 26px;
    box-shadow: 7px 7px 0 var(--ink);
}

.panel h3 {
    color: var(--ink);
}

.panel p {
    color: #4A3A2E;
    font-size: 16.5px;
}

.panel .price {
    display: inline-block;
    margin-top: 16px;
    font-family: var(--display);
    font-size: 26px;
    color: var(--verm);
}

/* ==========================================================================
   Video banner (VenoBox)
   ========================================================================== */

.video-banner {
    position: relative;
    display: block;
    margin-top: 38px;
    border: 4px solid var(--ink);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 8px 8px 0 var(--ink);
    background: var(--ink);
    text-decoration: none;
}

.video-banner__media {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: var(--ink);
    /* Clicks belong to the anchor, so the lightbox opens from the start. */
    pointer-events: none;
    transition: 0.4s ease;
}

.video-banner:hover .video-banner__media {
    transform: scale(1.03);
}

/* Only a whisper of shade — enough to seat the play button over any frame,
   light enough that the video itself stays the point. */
.video-banner__body {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
    background: rgba(42, 26, 16, 0.16);
    transition: 0.25s ease;
}

.video-banner:hover .video-banner__body {
    background: rgba(42, 26, 16, 0.3);
}

.video-banner__play {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: var(--verm);
    border: 4px solid #fff;
    color: #fff;
    font-size: 30px;
    padding-left: 6px;
}

/* Visible to screen readers only — the play button carries the meaning now. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ==========================================================================
   Rules / know-before-you-go
   ========================================================================== */

.rules {
    background: var(--ink);
    color: #F7E9D8;
    border-radius: 14px;
    padding: 28px 26px;
    margin-top: 34px;
    text-align: left;
}

.rules h3 {
    color: var(--lime);
}

.rules ul {
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
}

.rules li {
    position: relative;
    padding-left: 30px;
    font-size: 16.5px;
    line-height: 1.5;
}

.rules li + li {
    margin-top: 12px;
}

.rules li .fa {
    position: absolute;
    left: 0;
    top: 3px;
    color: var(--lime);
}

.rules .disclaimer {
    display: block;
    margin-top: 20px;
    font-size: 14px;
    color: #C9B7A6;
    line-height: 1.5;
}

/* ==========================================================================
   Contact section
   ========================================================================== */

/* Leave room under the form so the podenco is not sliced off by the map. */
.bg-contact {
    padding-bottom: 2.4rem;
}

/* The Cognito embed sits straight on the section colour — no card behind it. */
.form-panel {
    background: transparent;
    margin-top: 24px;
    text-align: left;
}

.form-panel iframe {
    display: block;
    width: 100%;
    border: 0;
    background: transparent;
}

/* Cognito ships its own styles behind deliberately high specificity
   (`:root:root:root:root:root …`) so the host page cannot bleed into the form.
   Field and button styling therefore belongs in the Cognito form designer's
   Styles tab, not here. */

.contact-card {
    background: rgba(42, 26, 16, 0.82);
    border-radius: 14px;
    padding: 26px 24px;
    text-align: left;
}

.contact-card h3 {
    color: var(--lime);
}

.contact-card address {
    font-style: normal;
    font-family: var(--head);
    font-weight: 500;
    font-size: 17px;
    line-height: 1.55;
    letter-spacing: 0.03em;
    margin: 0;
}

.contact-card a {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.contact-card a:hover {
    color: var(--lime);
}

.social-list {
    display: flex;
    gap: 14px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}

.social-list a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 3px solid #fff;
    color: #fff;
    font-size: 24px;
    text-decoration: none;
    transition: 0.2s ease;
}

.social-list a:hover {
    background: #fff;
    color: var(--purple);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.page-footer {
    background: var(--ink);
    color: #C9B7A6;
}

.map-embed {
    display: block;
    width: 100%;
    height: 360px;
    border: 0;
    filter: saturate(0.85);
}

@media (min-width: 992px) {
    .map-embed {
        height: 440px;
    }
}

.footer-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    padding: 34px 0;
}

.footer-inner img {
    width: 190px;
    height: auto;
    border-radius: 6px;
    border: 3px solid #C9B7A6;
}

.footer-text {
    max-width: 640px;
}

.footer-note {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.6;
}

.footer-note a {
    color: var(--lime);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.footer-note a:hover {
    color: #fff;
}

.footer-credit {
    margin: 14px 0 0;
    font-size: 14px;
    line-height: 1.6;
    letter-spacing: 0.02em;
    color: #A08D7C;
}

.footer-credit a {
    color: #C9B7A6;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.footer-credit a:hover {
    color: var(--lime);
}

.footer-credit sup {
    font-size: 0.6em;
    vertical-align: super;
    line-height: 0;
}

/* ==========================================================================
   Misc
   ========================================================================== */

/* Sticky header offset for in-page anchors */
[id] {
    scroll-margin-top: 96px;
}

html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .card {
        transition: none;
    }
}

.woof-mark {
    display: block;
    width: 170px;
    max-width: 55%;
    height: auto;
    margin: 0 auto;
    transform: rotate(4deg);
    filter: drop-shadow(6px 6px 0 var(--ink));
}

@media (min-width: 992px) {
    .woof-mark {
        width: 230px;
        max-width: 100%;
    }
}

.ui-to-top {
    background: var(--verm);
    border: 3px solid var(--ink);
    color: #fff;
}

.ui-to-top:hover {
    background: var(--ink);
    color: var(--lime);
}