/* ==========================================================================
   Homepage — The Big Addiction Conversation
   Standalone stylesheet. Not shared with any other public page.
   ========================================================================== */

/* PHO-2217: homepage now uses the PHO-2207 site-wide palette + typography.
   Purple/pink/red replaces the previous Canva blue/purple/magenta; Anton
   replaces Barlow Condensed for display type; Bariol replaces Barlow for body. */
:root {
    --home-blue: #0A43FF;
    --home-purple: #6A00FF;
    --home-magenta: #FF0066;
    --home-pink: #FF2D55;
    --home-ink: #0B0B1D;
    --home-body: #0B0B1D;
    --home-muted: #6b7280;
    --home-line: #e5e7eb;
    --home-surface: #ffffff;
    --home-surface-alt: #f7f7f9;
    --home-dark: #0B0B1D;

    --home-gradient: linear-gradient(90deg, #6A00FF 0%, #FF0066 50%, #FF2D55 100%);
    --home-gradient-diag: linear-gradient(135deg, #6A00FF 0%, #FF0066 50%, #FF2D55 100%);

    --home-radius: 16px;
    --home-radius-sm: 10px;
    --home-container: 1200px;
    --home-container-pad: 24px;

    --home-font-heading: "Anton", "Arial Narrow", Arial, sans-serif;
    --home-font-body: "bariol", "Helvetica Neue", Arial, sans-serif;
}

/* Self-hosted Bariol so the homepage layout (which doesn't load bootstrap.css)
   still has the body font available. Duplicate declarations on inner pages are
   deduplicated by the browser by family+src. */
@font-face {
    font-family: "bariol";
    src: url("../fonts/bariol_regular-webfont.woff2") format("woff2"),
         url("../fonts/bariol_regular-webfont.woff") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "bariol";
    src: url("../fonts/bariol_bold-webfont.woff2") format("woff2"),
         url("../fonts/bariol_bold-webfont.woff") format("woff");
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "bariol";
    src: url("../fonts/bariol_light-webfont.woff2") format("woff2"),
         url("../fonts/bariol_light-webfont.woff") format("woff");
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

/* Reset and base ---------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body.home-page {
    font-family: var(--home-font-body);
    font-size: 17px;
    line-height: 1.55;
    color: var(--home-body);
    background: var(--home-surface);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.home-page img,
.home-page svg { max-width: 100%; height: auto; display: block; }

.home-page a { color: var(--home-blue); text-decoration: none; }
.home-page a:hover { text-decoration: underline; }

.home-page h1, .home-page h2, .home-page h3, .home-page h4 {
    font-family: var(--home-font-heading);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.05;
    color: var(--home-ink);
    margin: 0 0 0.5em;
}

.home-page h1 { font-size: clamp(2.5rem, 5vw, 4rem); }
.home-page h2 { font-size: clamp(2rem, 3.6vw, 2.75rem); }
.home-page h3 { font-size: clamp(1.5rem, 2.4vw, 1.875rem); }
.home-page h4 { font-size: 1.375rem; }

.home-page p { margin: 0 0 1em; }

.home-container {
    max-width: var(--home-container);
    margin: 0 auto;
    padding: 0 var(--home-container-pad);
    width: 100%;
}

.home-section { padding: 72px 0; }
.home-section--tight { padding: 48px 0; }
.home-section--dark {
    background: var(--home-dark);
    color: #f3f4f6;
}
.home-section--dark h1,
.home-section--dark h2,
.home-section--dark h3,
.home-section--dark h4 { color: #fff; }
.home-section--dark a { color: #fff; }

@media (max-width: 768px) {
    .home-section { padding: 48px 0; }
}

/* Buttons ----------------------------------------------------------------- */

.home-page .home-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    font-family: var(--home-font-body);
    font-weight: 700;
    font-size: 1rem;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    border: 2px solid transparent;
    text-align: center;
    cursor: pointer;
    line-height: 1.2;
    transition: transform 0.05s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
    text-decoration: none;
    color: #fff;
}
.home-page .home-btn:hover { text-decoration: none; }
.home-page .home-btn:active { transform: translateY(1px); }

.home-page .home-btn--magenta {
    background: var(--home-magenta);
    color: #fff;
}
.home-page .home-btn--magenta:hover { background: #CC0052; color: #fff; }

.home-page .home-btn--gradient {
    background: var(--home-gradient);
    color: #fff;
    border: none;
    padding: 0.85rem 1.75rem;
}
.home-page .home-btn--gradient:hover { color: #fff; filter: brightness(1.05); }

.home-page .home-btn--blue { background: var(--home-blue); color: #fff; }
.home-page .home-btn--blue:hover { background: #0836CC; color: #fff; }

.home-page .home-btn--purple { background: var(--home-purple); color: #fff; }
.home-page .home-btn--purple:hover { background: #5500CC; color: #fff; }

.home-page .home-btn--outline {
    background: transparent;
    color: var(--home-ink);
    border-color: var(--home-ink);
}
.home-page .home-btn--outline:hover { background: var(--home-ink); color: #fff; }

.home-page .home-btn--block { display: flex; width: 100%; }

/* Header ------------------------------------------------------------------ */

.home-header {
    background: #fff;
    border-bottom: 1px solid var(--home-line);
    position: sticky;
    top: 0;
    z-index: 50;
    /* Neutralise a legacy `header { padding: 1rem 0 }` rule in bootstrap.css that
       only fires on inner pages (they load bootstrap.css, the homepage doesn't).
       Without this, the shared header is 32px taller on inner pages than on home. */
    padding: 0;
}

.home-header .home-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding-top: 12px;
    padding-bottom: 12px;
}

.home-header__brand img {
    height: 92px;
    width: auto;
    object-fit: contain;
    object-position: left center;
}

@media (max-width: 991px) {
    .home-header__brand img { height: 72px; }
}
@media (max-width: 480px) {
    .home-header__brand img { height: 56px; }
}

.home-header__nav ul {
    display: flex;
    align-items: center;
    gap: 1.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.home-header__nav a {
    color: var(--home-ink);
    font-family: var(--home-font-body);
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    padding: 0.5rem 0;
    border-bottom: 2px solid transparent;
    transition: border-color 0.15s ease, color 0.15s ease;
}
/* The homepage sets `.home-page a:hover { text-decoration: underline }` on all
   links; explicitly keep the shared nav links underline-free so we don't get a
   double underline (magenta border + underline) on hover/focus. */
.home-header__nav a:hover,
.home-header__nav a:focus { border-color: var(--home-magenta); color: var(--home-ink); text-decoration: none; }
.home-header__nav a.is-active { border-color: var(--home-magenta); }

.home-header__nav a.home-header__cta {
    background: var(--home-magenta);
    color: #fff;
    padding: 0.5rem 1.25rem;
    border-radius: 8px;
    border: none;
}
.home-header__nav a.home-header__cta:hover { background: #CC0052; color: #fff; }

.home-header__toggle {
    display: none;
    background: none;
    border: 0;
    padding: 8px;
    cursor: pointer;
    flex-direction: column;
    gap: 5px;
}
.home-header__toggle span {
    display: block;
    width: 26px;
    height: 3px;
    background: var(--home-ink);
    border-radius: 3px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}
.home-header__toggle.is-open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.home-header__toggle.is-open span:nth-child(2) { opacity: 0; }
.home-header__toggle.is-open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 991px) {
    .home-header__toggle { display: flex; }
    .home-header__nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #fff;
        border-bottom: 1px solid var(--home-line);
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.25s ease;
    }
    .home-header__nav.is-open { max-height: 80vh; }
    .home-header__nav ul {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 0.5rem 0;
    }
    .home-header__nav li { border-bottom: 1px solid var(--home-line); }
    .home-header__nav a {
        display: block;
        padding: 0.9rem var(--home-container-pad);
        border-bottom: 0;
    }
    .home-header__nav a.home-header__cta {
        margin: 0.75rem var(--home-container-pad);
        border-radius: 8px;
        padding: 0.75rem 1.25rem;
        text-align: center;
    }
}

/* Back-to-top ------------------------------------------------------------- */

#backtotop {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 44px;
    height: 44px;
    display: none;
    align-items: center;
    justify-content: center;
    background: var(--home-ink);
    color: #fff;
    border-radius: 50%;
    z-index: 50;
    opacity: 0.85;
}
#backtotop:hover { opacity: 1; text-decoration: none; }

/* Hero -------------------------------------------------------------------- */

.home-hero {
    padding: 56px 0 24px;
    background: #fff;
}

.home-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 48px;
    align-items: center;
}

/* PHO-2219: hero title is a supplied PNG with the speech-bubble motif; the
   wrapping <h1> stays for semantics. Reset the h1's default heading styling
   so it doesn't add empty vertical space around the image. */
.home-page .home-hero__title {
    margin: 0;
    padding: 0;
    line-height: 0;
    font-size: 0;
}
.home-hero__title-img {
    display: block;
    width: 100%;
    max-width: 640px;
    height: auto;
}

.home-hero__date {
    font-family: var(--home-font-heading);
    font-weight: 400;
    font-size: clamp(2rem, 4vw, 3.25rem);
    color: var(--home-ink);
    line-height: 1;
    margin-bottom: 0.25em;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* PHO-2226: sub-title between the date and hashtag. Anton, slightly smaller
   than the date so it reads as an eyebrow; ink colour so it groups visually
   with the date rather than the gradient hashtag. */
.home-hero__eyebrow {
    font-family: var(--home-font-heading);
    font-weight: 400;
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    color: var(--home-ink);
    line-height: 1;
    margin: 0 0 0.25em;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.home-hero__hashtag {
    display: inline-block;
    font-family: var(--home-font-heading);
    font-weight: 400;
    font-size: clamp(1.25rem, 2.4vw, 2rem);
    background: linear-gradient(90deg, #6A00FF 0%, #FF0066 50%, #FF2D55 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    letter-spacing: 0.02em;
    margin: 0;
    text-transform: uppercase;
}

@media (max-width: 900px) {
    .home-hero__grid { grid-template-columns: 1fr; gap: 24px; text-align: left; }
    .home-hero__title-img { max-width: 560px; }
}

/* Intro + CTA column ------------------------------------------------------ */

.home-intro__grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 48px;
    align-items: start;
}

.home-intro__lead {
    font-family: var(--home-font-heading);
    font-weight: 400;
    font-size: clamp(1.9rem, 3.6vw, 2.9rem);
    line-height: 1.05;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--home-ink);
    margin: 0 0 1.25rem;
}

.home-intro__grid > div > p:not(.home-intro__lead) {
    font-size: clamp(1.125rem, 1.7vw, 1.5rem);
    line-height: 1.45;
    color: var(--home-ink);
    margin: 0 0 1rem;
}

.home-intro__movement { font-weight: 700; }
.home-intro__movement a { color: var(--home-ink); text-decoration: underline; }

.home-intro__ctas { display: grid; gap: 12px; }

.home-intro__ctas .home-btn { font-size: 1.0625rem; padding: 0.9rem 1.4rem; }

@media (max-width: 900px) {
    .home-intro__grid { grid-template-columns: 1fr; gap: 24px; }
}

/* Join the Movement form -------------------------------------------------- */

.home-join {
    background: var(--home-ink);
    color: #f3f4f6;
    padding: 72px 0;
}
.home-join__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
    align-items: center;
}
.home-join h2 {
    color: #fff;
    font-size: clamp(2.5rem, 4.4vw, 3.5rem);
    margin-bottom: 1.25rem;
}
.home-join p {
    color: #e5e7eb;
    font-size: clamp(1.25rem, 1.8vw, 1.625rem);
    line-height: 1.45;
}
.home-join__form-wrap {
    padding: 6px;
    background: var(--home-gradient);
    border-radius: var(--home-radius);
}
.home-join__form {
    display: grid;
    gap: 14px;
    padding: 22px;
    background: transparent;
}
/* PHO-2227: fields now have visible labels above each input. Keep the label
   tight to its input and let the form's grid gap space out rows. */
.home-join__field {
    display: grid;
    gap: 4px;
}
.home-join__label {
    font-family: var(--home-font-body);
    font-size: 0.95rem;
    font-weight: 600;
    color: #fff;
    letter-spacing: 0.01em;
}
.home-join__req { color: #fff; font-weight: 400; opacity: 0.85; }
.home-join__opt { color: #e5e7eb; font-weight: 400; opacity: 0.7; }
.home-join__form input,
.home-join__form select {
    width: 100%;
    border: 0;
    border-radius: 6px;
    padding: 12px 14px;
    font-family: var(--home-font-body);
    font-size: 1rem;
    background: #fff;
    color: var(--home-ink);
}
/* Chevron indicator for the native select so it doesn't render as a plain
   input on browsers that hide the arrow when appearance is normalised. */
.home-join__form select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%230B0B1D'><path d='M5.5 7.5l4.5 4.5 4.5-4.5z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 20px 20px;
    padding-right: 40px;
}
.home-join__form input:focus,
.home-join__form select:focus {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* Kwes validation states. Kwes injects the following:
     - .kw-alert.kw-alert-error (summary bar at the top of the form)
     - .kw-alert.kw-alert-success (submission success bar)
     - .kw-field-error-message (inline per-field error text)
     - .kw-border-error / .kw-border-success (added to inputs on validate)
   The Kwes defaults use light red text/background, which is illegible against
   the form's magenta/red gradient. Override with high-contrast solid pills
   so errors stand out clearly. */
.home-join__form .kw-alert {
    margin: 0 0 8px;
    padding: 10px 14px;
    border-radius: 6px;
    font-family: var(--home-font-body);
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.4;
    color: #fff;
}
.home-join__form .kw-alert-error {
    background: #b91c1c;
    border: 1px solid #7f1d1d;
}
.home-join__form .kw-alert-success {
    background: #166534;
    border: 1px solid #14532d;
}
.home-join__form .kw-field-error-message {
    display: inline-block;
    justify-self: start; /* .home-join__field is a grid; keep the pill hugging its text */
    margin-top: 4px;
    padding: 3px 8px;
    border-radius: 4px;
    background: #b91c1c;
    color: #fff;
    font-family: var(--home-font-body);
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.3;
}
.home-join__form input.kw-border-error,
.home-join__form select.kw-border-error {
    outline: 2px solid #b91c1c;
    outline-offset: 1px;
}

/* Specificity bumped to .home-page so it beats the .home-join p rule above
   (which is meant for the intro copy on the left) and the .home-page a rule. */
.home-page .home-join__disclaimer {
    margin: 4px 0 0;
    color: #e5e7eb;
    font-family: var(--home-font-body);
    font-size: 0.85rem;
    line-height: 1.4;
}
.home-page .home-join__disclaimer a {
    color: #fff;
    text-decoration: underline;
}
.home-join__submit {
    margin-top: 8px;
    background: var(--home-ink);
    color: #fff;
    border: 0;
    padding: 14px 20px;
    font-family: var(--home-font-heading);
    font-weight: 400;
    font-size: 1.25rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    border-radius: 6px;
    cursor: pointer;
}
.home-join__submit:hover { background: #050510; }

@media (max-width: 900px) {
    .home-join__grid { grid-template-columns: 1fr; gap: 32px; }
}

/* Scale of addiction / stats --------------------------------------------- */

.home-stats-heading {
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    margin-bottom: 24px;
}

.home-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    border-radius: var(--home-radius);
    overflow: hidden;
}

.home-stat {
    padding: 40px 24px;
    color: #fff;
    text-align: center;
}
.home-stat__icon {
    width: 44px;
    height: 44px;
    margin: 0 auto 16px;
    display: block;
    color: #fff;
    font-size: 44px;
}
.home-stat__icon svg { width: 44px; height: 44px; margin: 0 auto; }
.home-stat__value {
    font-family: var(--home-font-body);
    font-weight: 500;
    font-size: clamp(2.25rem, 3.6vw, 3.25rem);
    letter-spacing: -0.01em;
    line-height: 1;
    margin: 0 0 8px;
    color: #fff;
}
.home-stat__label {
    font-size: 0.9375rem;
    line-height: 1.35;
    margin: 0;
    color: rgba(255, 255, 255, 0.92);
}

.home-stat--0 { background: var(--home-purple); }
.home-stat--1 { background: var(--home-blue); }
.home-stat--2 { background: var(--home-magenta); }
.home-stat--3 { background: var(--home-ink); }

@media (max-width: 900px) {
    .home-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
    .home-stats { grid-template-columns: 1fr; }
}

/* Two-column content blocks (Tony Adams, Royal Patron, Media Sponsor) ---- */

.home-two-col {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
    align-items: center;
}
.home-two-col--reverse .home-two-col__media { order: 2; }
.home-two-col--text-cta {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    align-items: start;
}
.home-two-col--text-cta .home-two-col__aside {
    padding-top: 0.5rem;
    display: flex;
    justify-content: flex-start;
}
.home-two-col__media img {
    width: 100%;
    border-radius: var(--home-radius);
    object-fit: cover;
}
.home-two-col__media--logo {
    display: flex;
    align-items: center;
    justify-content: center;
}
.home-two-col__media--logo img {
    width: auto;
    max-width: 320px;
    max-height: 380px;
    border-radius: 0;
    object-fit: contain;
}
.home-two-col__body h2 { margin-bottom: 1rem; }
.home-two-col__body .home-two-col__eyebrow {
    color: var(--home-blue);
    font-family: var(--home-font-body);
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    font-size: 1.125rem;
    margin: 0 0 0.5rem;
}
.home-two-col__body .home-two-col__link {
    color: var(--home-blue);
    font-weight: 700;
    text-decoration: underline;
}

@media (max-width: 900px) {
    .home-two-col { grid-template-columns: 1fr; gap: 24px; }
    .home-two-col--reverse .home-two-col__media { order: 0; }
}

/* Media sponsor block ---------------------------------------------------- */

.home-media-sponsor {
    background: var(--home-surface-alt);
    padding: 56px 0;
    border-radius: 0;
}
.home-media-sponsor__logo {
    max-width: 240px;
    margin: 0 auto;
    display: block;
}

/* Involve / Donate 2-panel ------------------------------------------------ */

.home-involve {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
}
.home-involve__panel {
    color: #fff;
}
.home-involve__panel--stay { background: var(--home-purple); }
.home-involve__panel--donate { background: var(--home-magenta); }
/* Anchor jumps (e.g. from `/#stay-involved`) should clear the sticky header. */
.home-involve__panel[id],
.home-join[id],
#join-the-movement,
#stay-involved { scroll-margin-top: 96px; }
.home-involve__panel h2 {
    color: #fff;
    font-size: clamp(2rem, 3.4vw, 2.5rem);
    margin-bottom: 1rem;
}
.home-involve__heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.home-involve__heading h2 { margin-bottom: 0; }
.home-involve__heading .sharethis-inline-share-buttons { margin: 0; }
.home-involve__panel a { color: #fff; text-decoration: underline; }

/* Constrain panel content to the shared page container width, but let the
   colored backgrounds bleed to the viewport edges. */
.home-involve__inner {
    padding: 56px var(--home-container-pad);
    max-width: calc(var(--home-container) / 2);
}
.home-involve__inner--right { margin-left: auto; }
.home-involve__inner--left { margin-right: auto; }

@media (max-width: 720px) {
    .home-involve { grid-template-columns: 1fr; }
    .home-involve__inner { max-width: 100%; margin: 0; }
}

/* Latest news ------------------------------------------------------------- */

.home-news {
    background: var(--home-ink);
    color: #fff;
    padding: 72px 0;
}
.home-news__heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 32px;
}
.home-news__heading h2 { color: #fff; margin: 0; }

.home-news__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}
.home-page .home-news-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    color: var(--home-body);
    border-radius: var(--home-radius-sm);
    overflow: hidden;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.home-page .home-news-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
    text-decoration: none;
    color: var(--home-body);
}
.home-news-card__image {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--home-line);
}
.home-news-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.home-news-card:hover .home-news-card__image img { transform: scale(1.03); }
.home-news-card__body { padding: 18px 20px 22px; }
.home-page .home-news-card__title {
    font-family: var(--home-font-body);
    font-weight: bold;
    color: var(--home-magenta);
    font-size: 1.125rem;
    line-height: 1.3;
    margin: 0 0 10px;
    text-transform: none;
    letter-spacing: 0;
}
.home-news-card__date {
    color: var(--home-muted);
    font-size: 0.875rem;
    margin: 0 0 8px;
}
.home-news-card__excerpt {
    font-size: 0.9375rem;
    color: var(--home-body);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
}
@media (max-width: 1100px) { .home-news__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px)  { .home-news__grid { grid-template-columns: 1fr; } }

/* Footer ------------------------------------------------------------------ */

.home-footer {
    background: #fff;
    padding: 56px 0;
    color: var(--home-ink);
}
.home-footer h4 {
    display: inline-block;
    font-family: "Anton", var(--home-font-body);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0.02em;
    font-size: 1.75rem;
    margin: 0 0 1.25rem;
    background: linear-gradient(90deg, #6A00FF 0%, #FF0066 50%, #FF2D55 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    line-height: 1.1;
}
.home-footer p { margin: 0 0 1rem; color: var(--home-ink); }
.home-page .home-footer a { color: inherit; text-decoration: none; }
.home-page .home-footer a.home-footer__link { color: var(--home-blue); text-decoration: underline; }
.home-page .home-footer a.home-footer__link:hover { color: var(--home-purple); }
.home-footer__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
}

/* Third column: social icons + partner/sponsor logos + bottom row. */
.home-footer__col--brand { display: flex; flex-direction: column; gap: 20px; }

.home-footer__social {
    list-style: none;
    margin: 0 0 4px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.home-footer__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--home-ink);
    color: #fff;
    font-size: 20px;
    transition: background 0.15s ease;
}
.home-page .home-footer__social a { color: #fff; text-decoration: none; }
.home-page .home-footer__social a:hover { background: var(--home-magenta); color: #fff; }

.home-footer__partners {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
}
/* Bare `img { max-width: 100% }` in bootstrap.css and `.home-page img` in this
   file would otherwise beat these on specificity; using img.<class> ties the
   spec at (0,1,1) and wins by source order (this file loads last). */
img.home-footer__partner-logo { display: block; width: auto; height: auto; }
img.home-footer__partner-logo--taoa { max-width: 200px; }
img.home-footer__partner-logo--forward { max-width: 180px; }
img.home-footer__partner-logo--ft { max-width: 100px; }
.home-footer__media-sponsor {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}
.home-footer__media-sponsor-label {
    margin: 0;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--home-muted);
}

.home-footer__bottom {
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid var(--home-line);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}
.home-footer__bottom p {
    margin: 0;
    font-size: 0.875rem;
    color: var(--home-muted);
}

@media (max-width: 900px) {
    .home-footer__grid { grid-template-columns: 1fr; gap: 32px; }
    .home-footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* ShareThis buttons re-skin ---------------------------------------------- */
.home-page .sharethis-inline-share-buttons { margin-top: 8px; }