/* ==========================================================================
   Home.css
   Styles ONLY for the custom homepage hero (home.hbs).
   Scoped entirely under .home-hero so nothing here can leak into or
   override the existing theme styles (screen.css, blocks.css).
   Loaded only on the homepage via {{#is "home"}} in default.hbs.
   ========================================================================== */

/* ================================================================
   BRAND STATEMENT
   Full-width banner with a centered headline and a photo mosaic.
   Matches the reference (armenia.travel) mechanic: instead of
   scaling a photo with CSS transform, the photos sit in a flex row
   and their WIDTH (via flex-grow) is what's animated as the person
   scrolls. The center photo's flex-grow ramps way up while every
   other photo's flex-grow ramps down to 0 - flexbox guarantees the
   row always fills exactly 100% of the sticky viewport, so the
   center photo ends up covering the full screen with zero manual
   position/scale math and therefore no drift, no matter the
   viewport size. Scrolling back up reverses it, since everything
   reads from the --reveal custom property (0 to 1) set by the
   small script at the end of the section.
   Background color is set inline from @custom.footer_bg_color.
   ================================================================ */
/* ================================================================
   BRAND STATEMENT
   Full-width banner with a centered headline and a photo mosaic.
   Photo mechanic matches the reference (armenia.travel): the
   photos sit in a flex row and their WIDTH (via flex-grow) is what
   animates, not a CSS transform scale - the center photo's
   flex-grow ramps way up while every other photo's ramps down to
   0, and flexbox guarantees the row always fills exactly 100% of
   the sticky viewport, so the center photo ends up covering the
   full screen with zero manual position/scale math.
   --reveal (0 to 1) is driven by how far the person has scrolled
   through the tall .brand-stage spacer below, smoothed with a
   small easing lag in the script at the end of this section so the
   motion doesn't feel mechanically tied 1:1 to the scroll wheel.
   Background color is set inline from @custom.footer_bg_color.
   ================================================================ */
.brand-statement {
    /* NO overflow property here at all - not even overflow-x alone.
       Per the CSS spec, setting overflow-x to anything other than
       visible while overflow-y is left default silently computes
       overflow-y to auto too - and that still breaks position:sticky
       on .brand-sticky below, exactly like overflow:hidden did.
       .brand-sticky already has its own overflow:hidden, which is
       enough on its own to clip the photos as they scale - this
       ancestor needs to stay completely overflow:visible (the
       default) for sticky to work at all. */
    margin-bottom: 40px;
    padding-left: 0;
    padding-right: 0;
}

.brand-stage {
    position: relative;
    height: 180vh;
}

.brand-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

.brand-statement-inner {
    text-align: center;
    padding: 100px 24px;
}

.brand-statement-text {
    margin: 0 auto;
    max-width: 900px;
    text-align: center;
    color: #ffffff;
    font-weight: 700;
    font-size: 4rem;
    line-height: 1.35;
}

.brand-mosaic {
    --reveal: 0;
    position: absolute;
    inset: 0;
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: calc(24px * (1 - var(--reveal, 0)));
    width: 100%;
    height: 100%;
    padding: calc(40px * (1 - var(--reveal, 0))) calc(min(5vw, 60px) * (1 - var(--reveal, 0)));
    z-index: 2;
}

.brand-mosaic-col {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: calc(24px * (1 - var(--reveal, 0)));
    overflow: hidden;
}

.brand-mosaic-photo {
    flex: 1;
    background-size: cover;
    background-position: center;
    background-color: rgba(255, 255, 255, 0.08);
    border-radius: calc(16px * (1 - var(--reveal, 0)));
}

/* Side columns (the 4 non-center photos): their flex-grow ramps
   down to 0 as --reveal increases, so flexbox itself shrinks their
   width away to nothing (with a fade on top for polish) - they
   read as "closing/disappearing", never as "also getting bigger". */
.brand-mosaic-single,
.brand-mosaic-stacked {
    flex-grow: calc(1 - var(--reveal, 0));
    flex-shrink: 1;
    flex-basis: 0%;
    opacity: calc(1 - var(--reveal, 0) * 1.4);
}

.brand-mosaic-single {
    align-self: flex-end;
    height: 85%;
}

/* The center column: flex-grow ramps way up (60x by the end),
   which - combined with every other column ramping down to 0 -
   means flexbox hands it essentially the entire row width. Height
   is already 100% via align-items:stretch on the parent, so at
   --reveal:1 this single photo covers the full sticky viewport. */
.brand-mosaic-center {
    flex-grow: calc(1.5 + var(--reveal, 0) * 60);
    flex-shrink: 1;
    flex-basis: 0%;
    position: relative;
    z-index: 3;
}

.brand-mosaic-center .brand-mosaic-photo {
    border-radius: calc(16px * (1 - var(--reveal, 0)));
}

@media (max-width: 900px) {
    .brand-mosaic-single {
        display: none;
    }
}

@media (max-width: 600px) {
    .brand-stage {
        height: 150vh;
    }
    .brand-mosaic-stacked {
        display: none;
    }
}

@media (max-width: 700px) {
    .brand-statement-text {
        font-size: 1.8rem;
        margin-bottom: 32px;
    }
}

.home-hero {
    padding-top: 24px;
    margin-bottom: 60px;
}

.home-hero-media {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 420px;
    aspect-ratio: 16 / 8;
    overflow: hidden;
    border-radius: 28px;
    background-color: #2b4a52;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    isolation: isolate;
}

.home-hero-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(
        60% 55% at center,
        rgba(0, 0, 0, 0.32) 0%,
        rgba(0, 0, 0, 0.12) 55%,
        rgba(0, 0, 0, 0.05) 100%
    );
    z-index: 1;
}

.home-hero-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 640px;
    padding: 32px 24px;
    text-align: center;
    color: #fff;
}

.home-hero-greeting {
    font-size: 2.6rem;
    font-weight: 400;
    line-height: 1.2;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.2);
}

.home-hero-title {
    margin: 2px 0 0;
    font-size: 5.0rem;
    font-weight: 700;
    line-height: 1.15;
    text-shadow: 0 2px 22px rgba(0, 0, 0, 0.25);
}

.home-hero-subtitle {
    margin: 17px 0 0;
    font-size: 2.2rem;
    font-weight: 400;
    line-height: 1.5;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.2);
}

.home-hero-form {
    width: 100%;
    max-width: 460px;
    margin-top: 26px;
}

/* Generic selectors (not tied to a specific Ghost markup version) so this
   keeps working even if Ghost's subscribe_form internals change slightly */
.home-hero-form form {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    background: #fff;
    border-radius: 999px;
    padding: 6px 6px 6px 24px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}

.home-hero-form input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-size: 1.5rem;
    color: #111;
    padding: 10px 0;
}

.home-hero-form input::placeholder {
    color: #8a8a8a;
}

.home-hero-form button {
    flex-shrink: 0;
    border: none;
    border-radius: 999px;
    background: #e6231a;
    color: #fff;
    font-size: 1.45rem;
    font-weight: 700;
    padding: 12px 24px;
    cursor: pointer;
    white-space: nowrap;
}

.home-hero-form button:hover {
    background: #cc1e16;
}

.home-hero-form .loading-spinner {
    display: none;
}

@media (max-width: 700px) {
    .home-hero-media {
        border-radius: 20px;
        min-height: 340px;
        aspect-ratio: auto;
    }

    .home-hero-greeting {
        font-size: 2rem;
    }

    .home-hero-title {
        font-size: 3rem;
    }

    .home-hero-subtitle {
        font-size: 1.3rem;
    }

    .home-hero-form form {
        flex-direction: column;
        border-radius: 20px;
        padding: 12px;
        gap: 10px;
    }

    .home-hero-form input {
        width: 100%;
        text-align: center;
    }

    .home-hero-form button {
        width: 100%;
    }
}

.home-section-heading {
    padding-top: 60px;
    padding-bottom: 0px;
    margin: 10px 0px 0px 0px;
}

/* Extra top space just for "New Destination" (the heading right
   before the Explore by Continent gallery) - scoped separately from
   .home-section-heading so it doesn't also push down the
   "Experiences" heading further down the page, which shares the
   same base class. */
.home-section-heading--destinations {
    padding-top: 120px;
}

.home-section-title {
    margin: 0;
    font-size: 2.5rem;
    font-weight: 600;
    color: inherit;
}

.home-section-heading-row {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 0;
}

.home-section-line {
    flex: 1;
    height: 1px;
    background: rgba(0, 0, 0, 0.15);
}

html.dark-mode .home-section-line {
    background: rgba(255, 255, 255, 0.2);
}

/* Editor's Picks */
.editors-picks {
    padding-top: 24px;
    padding-bottom: 110px;
}

.editors-picks-head {
    margin-bottom: 32px;
}

.editors-picks-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0 0 8px 0;
}

.editors-picks-subtitle {
    margin: 0;
    font-size: 1.5rem;
    opacity: 0.7;
    max-width: 560px;
}

.editors-picks-banner {
    position: relative;
    display: block;
    text-decoration: none;
    color: inherit;
}

.editors-picks-banner-image-wrap {
    border-radius: 16px;
    overflow: hidden;
}

.editors-picks-banner-image {
    width: 100%;
    aspect-ratio: 16 / 8;
    background-size: cover;
    background-position: center;
    background-color: rgba(0, 0, 0, 0.06);
    transition: transform 0.4s ease;
}

.editors-picks-banner:hover .editors-picks-banner-image {
    transform: scale(1.03);
}

.editors-picks-overlay-card {
    position: absolute;
    left: 32px;
    bottom: -64px;
    max-width: 520px;
    width: calc(100% - 64px);
    background: #ffffff;
    border-radius: 16px;
    padding: 44px;
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.18);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.editors-picks-tag {
    display: block !important;
    width: fit-content;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.55;
    margin: 0 !important;
}

.editors-picks-headline {
    margin: 0 !important;
    font-size: 5rem !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
}

.editors-picks-excerpt {
    margin: 0 !important;
    font-size: 1.5rem !important;
    line-height: 1.6 !important;
    opacity: 0.75;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.editors-picks-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
    margin-top: 8px;
    padding: 14px 24px;
    border-radius: 999px;
    background: #0d2b2e;
    color: #ffffff;
    font-weight: 600;
    font-size: 1.2rem;
}

.editors-picks-cta-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    font-size: 0.85rem;
}

@media (max-width: 800px) {
    .editors-picks-banner-image {
        aspect-ratio: 4 / 3;
    }
    .editors-picks-overlay-card {
        position: static;
        max-width: none;
        width: auto;
        margin-top: -40px;
        margin-left: 16px;
        margin-right: 16px;
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
    }
    .editors-picks {
        padding-bottom: 40px;
    }
}

html.dark-mode .editors-picks-overlay-card {
    background: #14201f;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}

/* Explore by Continent: horizontal scroll with the title overlaid
   directly on the photo (dark gradient at the bottom), matching
   the "Top Destinations" style reference. Scoped to
   .continent-explorer so it does not affect anything else on the
   site (Latest Stories, tag pages, index, etc). */
.continent-explorer {
    padding-top: 24px;
    padding-bottom: 80px;
}

.destination-row {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 24px;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.destination-row::-webkit-scrollbar {
    display: none;
}

.destination-card {
    position: relative;
    flex: 0 0 clamp(240px, 26vw, 320px);
    scroll-snap-align: start;
    aspect-ratio: 3 / 4;
    border-radius: 10px;
    overflow: hidden;
    display: block;
    text-decoration: none;
}

.destination-card-image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-color: rgba(0, 0, 0, 0.08);
    transition: transform 0.4s ease;
}

.destination-card:hover .destination-card-image {
    transform: scale(1.08);
}

.destination-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.15) 45%, rgba(0, 0, 0, 0) 70%);
}

.destination-card-title {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 20px;
    margin: 0;
    padding: 0 20px;
    color: #ffffff;
    font-weight: 700;
    font-size: 1.9rem;
    line-height: 1.3;
}

.continent-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}

.continent-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: #0d2b2e;
    color: #ffffff;
    cursor: pointer;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.continent-arrow:hover {
    transform: scale(1.06);
}

.continent-arrow:disabled {
    background: rgba(13, 43, 46, 0.25);
    cursor: default;
    transform: none;
}

@media (max-width: 700px) {
    .destination-card-title {
        font-size: 1.05rem;
    }
}

/* Experiences: news-style grid with date + title + "More" link,
   no tags/excerpt. Scoped to .experiences-explorer so it does not
   affect post-card styling anywhere else on the site. */
.experiences-explorer {
    padding-top: 24px;
    padding-bottom: 48px;
}

.experiences-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px 28px;
}

@media (max-width: 900px) {
    .experiences-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .experiences-grid {
        grid-template-columns: 1fr;
    }
}

.experience-card {
    display: block;
    text-decoration: none;
    color: inherit;
}

.experience-card-image {
    aspect-ratio: 3 / 2;
    border-radius: 10px;
    background-size: cover;
    background-position: center;
    background-color: rgba(0, 0, 0, 0.06);
    margin-bottom: 16px;
}

.experience-card-date {
    display: block;
    font-size: 1.3rem;
    text-transform: lowercase;
    opacity: 0.55;
    margin-bottom: 3px;
}

.experience-card-title {
    margin: 0 0 18px 0;
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.35;
}

.experience-card-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 1.05rem;
}

.experience-card-more-icon {
    transition: transform 0.2s ease;
}

.experience-card:hover .experience-card-more-icon {
    transform: translateX(3px);
}

/* Meet the Agency (homepage only) - horizontal carousel of team
   member cards, matching the same scroll/snap + arrow-nav pattern
   used by Explore by Continent (.destination-row / .continent-nav)
   so the two carousels feel consistent. Background color matches
   the footer (@custom.footer_bg_color, set inline in home.hbs),
   so text needs to switch to white for contrast - same treatment
   as Brand Statement above it. */
.home-meet-agency {
    padding-top: 90px;
    padding-bottom: 90px;
    color: #ffffff;
}

.home-meet-agency-head {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 20px;
    margin-bottom: 28px;
}

.home-meet-agency-title {
    margin: 5px;
    margin-bottom: 20px;
    font-size: 3.4rem;
    font-weight: 500;
    color: inherit;
}

.home-meet-agency-row {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 8px;
    margin: 0px 0px 19px 0px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.home-meet-agency-row::-webkit-scrollbar {
    display: none;
}

.home-meet-agency-member {
    flex: 0 0 clamp(160px, 16vw, 200px);
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none;
}

.home-meet-agency-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1 / 1;
    margin-bottom: 16px;
    border-radius: 16px;
    overflow: hidden;
    background: var(--color-border, #e5e7eb);
    transition: transform 0.3s ease;
}

.home-meet-agency-member:hover .home-meet-agency-avatar {
    transform: translateY(-4px);
}

.home-meet-agency-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-meet-agency-avatar-fallback {
    font-size: 3rem;
    font-weight: 700;
    color: var(--color-secondary-text);
}

.home-meet-agency-name {
    font-size: 1.5rem;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 4px;
}

.home-meet-agency-meta {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.7);
}

.agency-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}

@media (max-width: 700px) {
    .home-meet-agency-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

/* ================================================================
   TESTIMONIALS ("What Our Clients Say") - added below Meet the Agency
   ================================================================ */
.home-testimonials-2 {
    padding: 90px 0;
}

.home-testi-title {
    display: flex;
    margin: 0 14px 57px;
    font-size: 5.2rem;
    font-weight: 700;
    color: inherit;
    justify-content: center;
}

.home-testi-row {
    display: flex;
    justify-content: center;
    gap: 24px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.home-testi-card {
    flex: 0 0 clamp(300px, 26vw, 380px);
    min-width: 300px;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 14px;
    padding: 36px 32px;
    background: #0B3F41;
    color: #ffffff;
}

html.dark-mode .home-testi-card {
    background: #0B3F41;
    border-color: rgba(255, 255, 255, .18);
}

.home-testi-avatar {
    width: 64px;
    height: 64px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.15);
    margin-bottom: 22px;
}

.home-testi-quote {
    margin: 0 0 28px;
    font-size: 1.55rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
}

.home-testi-footer {
    margin-top: auto;
}

.home-testi-name {
    font-family: "Courier New", monospace;
    font-weight: 700;
    font-size: 1.4rem;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: inherit;
}

.home-testi-role {
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.6);
}

@media (max-width: 700px) {
    .home-testi-card {
        flex: 0 0 85%;
        min-width: 0;
    }
}

/* ================================================================
   FINAL CTA ("Ready to Plan Your Next Trip?")
   ================================================================ */
.home-final-cta {
    position: relative;
    margin-top: 48px;
    padding: 80px 0;
    overflow: hidden;
    color: #ffffff;
    text-align: center;
}

/* Two solid panels that form the section's background. By default
   (no JS, or before the entrance animation fires) they sit fully
   closed - each one covering half the section - so the section
   always looks correct even without JavaScript. The small script at
   the end of the Final CTA block in home.hbs adds
   .cta-curtains-open right away (pulling them off to the sides,
   revealing whatever is behind), then removes that class the first
   time the section scrolls into view, animating them sliding back
   together to "close". */
.cta-curtain {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50%;
    background: #0d2b2e;
    transition: transform 1s cubic-bezier(0.65, 0, 0.35, 1);
    z-index: 1;
}

.cta-curtain-left {
    left: 0;
}

.cta-curtain-right {
    right: 0;
}

.home-final-cta.cta-curtains-open .cta-curtain-left {
    transform: translateX(-100%);
}

.home-final-cta.cta-curtains-open .cta-curtain-right {
    transform: translateX(100%);
}

.home-final-cta .inner {
    position: relative;
    z-index: 2;
}

.home-final-cta-title {
    margin: 0 0 14px 0;
    font-size: 4.1rem;
    font-weight: 700;
}

.home-final-cta-subtitle {
    margin: 0 0 32px 0;
    font-size: 1.8rem;
    opacity: 0.8;
}

.home-final-cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 36px;
    border-radius: 999px;
    background: #ffffff;
    color: #0d2b2e;
    font-weight: 700;
    font-size: 1.6rem;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
    border: none;
}

.home-final-cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
}

@media (max-width: 700px) {
    .home-final-cta {
        padding: 56px 24px;
    }
    .home-final-cta-title {
        font-size: 1.9rem;
    }
}
/* ================================================================
   MARQUEE BAND ("Get in Touch") - homepage only, above the footer
   ================================================================ */
.marquee-band {
    display: block;
    text-decoration: none;
    cursor: pointer;
    color: #ffffff;
    font-family: var(--gh-font-body, var(--font-sans));
}

.marquee-viewport {
    position: relative;
    height: 76px;
    overflow: hidden;
}

.marquee-stack {
    height: 152px;
    transform: translateY(0%);
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

.marquee-band:hover .marquee-stack {
    transform: translateY(-50%);
}

.marquee-row {
    height: 76px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.marquee-track {
    display: flex;
    align-items: center;
    width: max-content;
    animation: marquee-scroll 26s linear infinite;
}

.marquee-row--simple .marquee-track {
    animation-duration: 16s;
}

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

.marquee-group {
    display: flex;
    align-items: center;
    gap: 28px;
    padding-right: 28px;
    flex-shrink: 0;
}

.marquee-headline {
    font-size: 2.1rem;
    font-weight: 700;
    color: inherit;
    white-space: nowrap;
}

.marquee-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 26px;
    border-radius: 999px;
    background: #ffffff;
    color: #0d2b2e;
    font-size: 1.05rem;
    font-weight: 700;
    white-space: nowrap;
}

.marquee-tagline {
    font-size: 1.3rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.65);
    white-space: nowrap;
}

.marquee-simple-text {
    font-size: 2.4rem;
    font-weight: 800;
    color: inherit;
    white-space: nowrap;
    padding-right: 24px;
}

@media (prefers-reduced-motion: reduce) {
    .marquee-track {
        animation: none;
    }
    .marquee-stack {
        transition: none;
    }
}

@media (max-width: 700px) {
    .marquee-headline {
        font-size: 1.4rem;
    }
    .marquee-tagline {
        font-size: 1rem;
    }
    .marquee-pill {
        padding: 10px 20px;
        font-size: 0.9rem;
    }
    .marquee-simple-text {
        font-size: 1.6rem;
    }
}

/* Removes the footer's usual top margin, but only on the homepage
   (Ghost adds .home-template to <body> automatically there) - this
   makes the marquee band's background sit flush against the
   footer's, with no gap between the two dark sections. Every other
   template keeps the footer's normal spacing untouched. */
.home-template .site-footer {
    margin-top: 0;
}