/* Colours and fonts pulled directly from fischerfarms.co.uk's own compiled theme CSS
   (app/themes/fischerfarms/dist/css/styles.css), not an approximation - same convention
   New Eden Plants Web's own brand.css already uses for its brand (see that file's header
   comment). Font is Google Fonts "Roboto", used for both headings and body on the source site.
   Layout patterns below (solid-colour hero band integrated with the nav, overlapping preview
   cards, colour-block sections) are reproduced from visually comparing the deployed rebuild
   against the live site side-by-side - matching "look the same, minus the food pages" was the
   brief, and colour tokens alone weren't enough to deliver that. */
:root {
    --ff-green: #8ac43f;
    --ff-green-mid: #95d444;
    --ff-green-bright: #a4e84b;
    --ff-green-bright-adjusted: #bafe61;
    --ff-green-deep: #3d752e;
    --ff-green-deep-adjusted: #2d651e;
    --ff-blue-deep: #24477e;
    --ff-charcoal: #54595f;
    --ff-light-grey: #f5f5f5;
    --ff-black: #000;
    --ff-white: #fff;

    --ff-font-family: "Roboto", Helvetica, Arial, sans-serif;
}

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

h1, h2, h3, h4, h5, h6 {
    font-family: var(--ff-font-family);
    color: var(--ff-green-deep);
    font-weight: 800;
    letter-spacing: -0.022em;
}

a {
    color: var(--ff-green-deep);
}

a:hover {
    color: var(--ff-blue-deep);
}

.btn-primary {
    background-color: var(--ff-green);
    border-color: var(--ff-green);
    color: var(--ff-green-deep-adjusted);
    font-weight: 700;
}

.btn-primary:hover {
    background-color: var(--ff-green-deep);
    border-color: var(--ff-green-deep);
    color: var(--ff-white);
}

.btn-pill {
    border-radius: 999px;
    padding: 0.6rem 1.75rem;
}

/* Nav sits ON the same solid green as the hero below it, so the two read as one continuous
   band - the real site never shows a visual seam between its header and hero. */
.ff-navbar {
    background-color: var(--ff-green-deep);
}

.ff-navbar .navbar-brand,
.ff-navbar .nav-link {
    color: var(--ff-white) !important;
}

/* Base (mobile/tablet, collapsed hamburger menu below 1200px - see navbar-expand-xl in
   _Layout.cshtml) - a vertical stacked list, so padding here is cosmetic only, no overflow risk. */
.ff-navbar .nav-link {
    padding-left: 1rem;
    padding-right: 1rem;
}

/* Expanded horizontal nav only ever renders at 1200px+ now. "Fischer Farms Technology" is the
   longest label, so the full doubled spacing is held back until 1400px, where the container-fluid
   nav has enough real width to take it without wrapping or overflowing. */
@media (min-width: 1200px) {
    .ff-navbar .nav-link {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

@media (min-width: 1400px) {
    .ff-navbar .nav-link {
        padding-left: 3rem;
        padding-right: 3rem;
    }
}

.ff-navbar .nav-link:hover,
.ff-navbar .dropdown-item:hover {
    color: var(--ff-green-bright) !important;
}

.ff-navbar .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.5);
}

.ff-navbar .navbar-toggler-icon {
    filter: invert(1);
}

.navbar-brand img {
    height: 36px;
}

/* Solid full-bleed colour band - the hero pattern used on every page's own header, not a
   translucent box over a photo. The H1 itself is bright lime-green by default (confirmed on
   About Us/How We Grow/Technology/Partner/Plants) - only the Home page's flagship hero uses a
   white H1 instead (see .ff-hero-home below), so that's the one deliberate exception. */
.ff-hero {
    background-color: var(--ff-green-deep);
    color: var(--ff-white);
    padding: 3rem 0 0;
}

.ff-hero h1 {
    color: var(--ff-green-bright);
    font-weight: 800;
}

.ff-hero .lead {
    color: var(--ff-white);
    opacity: 0.92;
}

/* Home's own hero is the one page where the H1 is white, not bright-green. */
.ff-hero-home h1 {
    color: var(--ff-white);
}

/* Fischer Farms Technology's own sub-brand uses blue instead of green for its hero/intro band -
   confirmed on Technology, Baby Leaf Growers and Young Plant Growers all three. */
.ff-hero-blue {
    background-color: var(--ff-blue-deep);
}

/* The two-column intro text block that sits directly under the hero photo, still INSIDE the
   coloured band (not a separate white section) - confirmed on every interior page. Heading
   stays white here (only the H1 above it is the bright-green accent), body text white too. */
.ff-hero-intro h2 {
    color: var(--ff-white);
}

.ff-hero-intro p {
    color: var(--ff-white);
    opacity: 0.95;
}

.ff-hero-intro {
    padding: 2.5rem 0 3rem;
}

/* Benefit-list titles on a coloured (blue/green) band - confirmed bright-green regardless of
   which band colour they sit on, e.g. Baby Leaf/Young Plant Growers' "Benefits" section. */
.ff-benefit-title {
    color: var(--ff-green-bright);
    font-weight: 700;
}

/* The hero photo band directly under the heading, full width, with an organic rounded corner
   on one side (an approximation of the site's own custom blob mask) and two white "preview"
   cards overlapping its bottom edge. */
.ff-hero-photo-wrap {
    position: relative;
    margin-top: 2rem;
}

.ff-hero-photo {
    width: 100%;
    max-height: 480px;
    object-fit: cover;
    border-top-right-radius: 220px;
}

/* New Eden Plants' own hero is a pre-composed graphic (badges fixed at each corner: UK grown,
   peat free, bug free, the heart), not a photo - the crop-to-fill + corner-radius-cut treatment
   above (built for photos) chops into those badges. Shown uncropped and, like the source site's
   own version of this image, kept inside the normal content-width container rather than
   stretched full-bleed across the viewport. */
.ff-hero-graphic-wrap {
    margin-top: 2rem;
    padding-bottom: 2rem;
}

.ff-hero-graphic {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 1.5rem;
}

.ff-hero-cards {
    position: relative;
    margin-top: -3.5rem;
    padding-bottom: 3.5rem;
    z-index: 2;
}

.ff-hero-card {
    background: var(--ff-white);
    /* The source site's own asymmetric card shape (its .c-brand-hero__link) - rounded top-left
       and bottom-right only, not a plain rounded rectangle. */
    border-top-left-radius: 2.5rem;
    border-bottom-right-radius: 2.5rem;
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    text-decoration: none;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.12);
    height: 100%;
}

.ff-hero-card:hover {
    box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.18);
}

.ff-hero-card-title {
    color: var(--ff-green-deep);
    font-weight: 800;
    margin-bottom: 0.15rem;
}

.ff-hero-card-sub {
    color: var(--ff-charcoal);
    font-size: 0.9rem;
    margin-bottom: 0;
}

.ff-hero-card-logo {
    flex-shrink: 0;
    height: 32px;
    width: auto;
}

/* Simpler variant for interior pages - a plain green band with just a heading, no photo/cards. */
.ff-hero-simple {
    padding: 3rem 0 4rem;
}

/* Full-bleed colour-block section - used for the "mission"-style content block right after a
   hero, matching the site's own alternating colour-band rhythm rather than an all-white page. */
.ff-section-blue {
    background-color: var(--ff-blue-deep);
    color: var(--ff-white);
    padding: 4rem 0;
}

.ff-section-blue h2 {
    color: var(--ff-white);
}

.ff-newsletter {
    background-color: var(--ff-green-deep);
    color: var(--ff-white);
    border-radius: 0.75rem;
    padding: 2rem;
    text-align: center;
    margin-top: 3rem;
}

.ff-newsletter .form-control {
    max-width: 280px;
}

.ff-site-footer {
    background-color: var(--ff-blue-deep);
    color: var(--ff-white);
    padding: 2rem 0;
}

.ff-site-footer a {
    color: var(--ff-white);
}

/* ---------- Live chat widget ----------
   Connects cross-origin to New Eden Plants Web's shared chat hub (see
   _ChatWidget.cshtml's own header comment) - class names match that site's widget exactly so
   the one wwwroot/js/chat-widget.js file works unmodified, only these colours differ. */
.ne-chat-widget {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 1040;
}

.ne-chat-widget [hidden] {
    display: none !important;
}

.ne-chat-toggle {
    position: relative;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 3px solid var(--ff-white);
    background-color: var(--ff-green-deep);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    /* A dark button on the site's own dark-green hero bands is otherwise invisible without this -
       the white ring plus a two-layer shadow (a soft spread, then a tight dark contact shadow)
       keeps it visibly separated from the page behind it whether that's light or dark. */
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.15s ease;
}

.ne-chat-unread-dot {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #e5484d;
    border: 2px solid #fff;
}

.ne-chat-header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ne-chat-end {
    background-color: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: #fff;
    border-radius: 999px;
    padding: 0.25rem 0.65rem;
    font-size: 0.72rem;
    cursor: pointer;
}

.ne-chat-end:hover {
    background-color: rgba(255, 255, 255, 0.28);
}

.ne-chat-toggle:hover {
    background-color: var(--ff-green-deep-adjusted);
    transform: translateY(-1px);
}

.ne-chat-toggle svg {
    width: 26px;
    height: 26px;
}

.ne-chat-panel {
    position: absolute;
    right: 0;
    bottom: calc(56px + 0.75rem);
    width: 320px;
    max-height: min(560px, calc(100vh - 7rem));
    background-color: var(--ff-white);
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 1rem;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ne-chat-panel-header {
    background-color: var(--ff-green-deep);
    color: #fff;
    padding: 0.85rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
}

.ne-chat-close {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}

.ne-chat-prechat {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    overflow-y: auto;
    min-height: 0;
}

.ne-chat-prechat-intro {
    margin: 0;
    font-size: 0.85rem;
    color: var(--ff-charcoal);
    opacity: 0.8;
    line-height: 1.4;
}

.ne-chat-prechat label {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.85rem;
    color: var(--ff-charcoal);
}

.ne-chat-prechat label span {
    font-weight: 600;
}

.ne-chat-prechat input,
.ne-chat-prechat textarea {
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 0.5rem;
    padding: 0.5rem 0.7rem;
    font-size: 0.9rem;
    font-family: inherit;
    background-color: #fff;
    color: var(--ff-charcoal);
}

.ne-chat-prechat textarea {
    resize: vertical;
    min-height: 60px;
}

.ne-chat-prechat button[type="submit"] {
    border: none;
    border-radius: 999px;
    padding: 0.55rem 1rem;
    background-color: var(--ff-green-deep);
    color: #fff;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
}

.ne-chat-messages {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    min-height: 220px;
}

.ne-chat-message {
    display: flex;
}

.ne-chat-message-staff {
    justify-content: flex-start;
}

.ne-chat-message-customer {
    justify-content: flex-end;
}

.ne-chat-message-inner {
    max-width: 80%;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.ne-chat-message-customer .ne-chat-message-inner {
    align-items: flex-end;
}

.ne-chat-meta {
    display: flex;
    gap: 0.4rem;
    font-size: 0.72rem;
    color: var(--ff-charcoal);
    opacity: 0.6;
    padding: 0 0.2rem;
}

.ne-chat-meta-name {
    font-weight: 600;
}

.ne-chat-bubble {
    padding: 0.55rem 0.85rem;
    border-radius: 1rem;
    font-size: 0.9rem;
    line-height: 1.35;
    word-break: break-word;
}

.ne-chat-message-staff .ne-chat-bubble {
    background-color: #eef7e3;
    color: var(--ff-charcoal);
    border-bottom-left-radius: 0.25rem;
}

.ne-chat-message-customer .ne-chat-bubble {
    background-color: var(--ff-green-deep);
    color: #fff;
    border-bottom-right-radius: 0.25rem;
}

.ne-chat-system-note {
    text-align: center;
    font-size: 0.8rem;
    color: var(--ff-charcoal);
    opacity: 0.65;
    padding: 0.25rem 0;
}

.ne-chat-typing-indicator {
    padding: 0 1rem 0.4rem;
    font-size: 0.78rem;
    color: var(--ff-charcoal);
    opacity: 0.6;
    font-style: italic;
}

.ne-chat-restart {
    margin: 0 1rem 0.75rem;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 999px;
    padding: 0.5rem 1rem;
    background-color: #fff;
    color: var(--ff-green-deep);
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
}

.ne-chat-restart:hover {
    background-color: #eef7e3;
}

.ne-chat-input-row {
    display: flex;
    border-top: 1px solid rgba(0, 0, 0, 0.12);
    padding: 0.6rem;
    gap: 0.5rem;
}

.ne-chat-input-row input {
    flex: 1 1 auto;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 999px;
    padding: 0.5rem 0.9rem;
    font-size: 0.9rem;
    background-color: #fff;
    color: var(--ff-charcoal);
}

.ne-chat-input-row button {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;
    background-color: var(--ff-green-deep);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}

.ne-chat-input-row button svg {
    width: 16px;
    height: 16px;
}

@media (max-width: 480px) {
    .ne-chat-panel { width: calc(100vw - 2.5rem); }
}

/* ---------- News article body blocks ----------
   Left/right float the image so surrounding paragraph blocks wrap around it (a traditional
   magazine layout); full-width breaks the flow entirely. See NewsArticleBlock.ImageLayout. */
.ff-news-paragraph {
    margin-bottom: 1.25rem;
    line-height: 1.7;
}

.ff-news-image-full {
    display: block;
    width: 100%;
    border-radius: 0.5rem;
    margin: 0 0 1.5rem;
}

.ff-news-image-left {
    float: left;
    max-width: 45%;
    border-radius: 0.5rem;
    margin: 0 1.5rem 1rem 0;
}

.ff-news-image-right {
    float: right;
    max-width: 45%;
    border-radius: 0.5rem;
    margin: 0 0 1rem 1.5rem;
}

@media (max-width: 575.98px) {
    .ff-news-image-left, .ff-news-image-right {
        float: none;
        max-width: 100%;
        margin: 0 0 1.5rem;
    }
}

/* ---------- News listing cards ----------
   Matches the source fischerfarms.co.uk news archive's own card shape (its .c-post-card):
   a photo, a small title, a date - the whole card is one link, no excerpt shown on the listing. */
.ff-news-card {
    display: block;
    text-decoration: none;
    color: inherit;
    background-color: var(--ff-white);
    box-shadow: 0 0.35rem 1rem rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    height: 100%;
}

.ff-news-card:hover {
    box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.16);
    transform: translateY(-2px);
    color: inherit;
}

/* The source site's own news card (.c-post-card) only rounds one corner of the photo itself,
   not the whole card - the organic accent shape used throughout its imagery. */
.ff-news-card-image {
    aspect-ratio: 16 / 10;
    background-color: var(--ff-light-grey);
    overflow: hidden;
    border-top-right-radius: 3rem;
}

.ff-news-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ff-news-card-body {
    padding: 1.1rem 1.25rem 1.35rem;
}

.ff-news-card-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ff-green-deep);
    margin: 0 0 0.5rem;
    line-height: 1.35;
}

.ff-news-card-date {
    font-size: 0.82rem;
    color: var(--ff-charcoal);
    opacity: 0.75;
    margin: 0;
}

.ff-news-filter {
    border-radius: 0.5rem;
    font-weight: 600;
    color: var(--ff-green-deep);
}

.ff-news-filter:focus {
    border-color: var(--ff-green);
    box-shadow: 0 0 0 0.2rem rgba(138, 196, 63, 0.25);
}

/* ---------- Watermark background patterns ----------
   The subtle grey clover-leaf pattern the source fischerfarms.co.uk theme calls a "watermark"
   (its own CSS: .has-leaves-watermark / .has-tech-watermark / the news archive's own
   .o-blog-listing pattern) - pulled from its actual theme assets
   (app/themes/fischerfarms/dist/img/*.svg), not redrawn. Every one of these swaps to a separate,
   shorter mobile SVG below 40em (640px), matching the source theme's own breakpoint. */
.ff-watermark {
    position: relative;
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: 100%;
    background-image: url('/images/patterns/watermark-mobile.svg');
}

.ff-watermark-tech {
    position: relative;
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: 100%;
    background-image: url('/images/patterns/watermark-tech-mobile.svg');
}

.ff-watermark-blog {
    position: relative;
    background-repeat: no-repeat;
    background-position: top;
    background-size: 100%;
    background-image: url('/images/patterns/blog-watermark-mobile.svg');
}

@media screen and (min-width: 40em) {
    .ff-watermark { background-image: url('/images/patterns/watermark.svg'); }
    .ff-watermark-tech { background-image: url('/images/patterns/watermark-tech.svg'); }
    .ff-watermark-blog { background-image: url('/images/patterns/blog-watermark-desktop.svg'); }
}

/* "Our accreditations" logo strip - shared by Home and About Us, matching the original site's
   own .c-logos section. Logos are greyscale-neutral by design (LEAF/BRCGS/etc. own artwork), so
   just cap their height and let them sit at natural width. */
.ff-accreditation-logo {
    max-height: 64px;
    width: auto;
    margin: 0 auto;
}

/* ---------- Photo-background tiles ----------
   The source site puts a lot of its copy directly on top of a full-bleed photo (its own
   .c-benefits-slider / .c-feature-carousel components) rather than in a plain text block - used
   for the "Benefits of indoor farming" tiles and any other photo+text tile section. */
.ff-photo-tile {
    position: relative;
    display: block;
    border-radius: 1rem;
    overflow: hidden;
    min-height: 260px;
    background-size: cover;
    background-position: center;
    color: var(--ff-white);
}

.ff-photo-tile::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.75) 100%);
}

.ff-photo-tile-body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1.25rem 1.35rem;
    z-index: 1;
}

.ff-photo-tile-title {
    color: var(--ff-white);
    font-weight: 700;
    font-size: 1.05rem;
    margin: 0 0 0.35rem;
}

.ff-photo-tile-copy {
    font-size: 0.85rem;
    opacity: 0.92;
    margin: 0;
}

/* ---------- "Fischer Modular Farms" carousel ----------
   Matches the source site's own blue feature carousel (.c-feature-carousel): a solid blue band,
   nav arrows beside the heading, and horizontally-scrolling tiles pairing copy with a photo. A
   plain scroll-snap row rather than a JS carousel plugin - same visual result, no new dependency. */
.ff-modular-section {
    background-color: var(--ff-blue-deep);
}

.ff-modular-nav-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.15);
    color: var(--ff-white);
    font-size: 1.5rem;
    line-height: 1;
    margin-left: 0.5rem;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.ff-modular-nav-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

.ff-modular-carousel {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: 0.5rem;
}

.ff-modular-carousel::-webkit-scrollbar {
    display: none;
}

.ff-modular-tile {
    flex: 0 0 min(680px, 90vw);
    scroll-snap-align: start;
    background-color: rgba(255, 255, 255, 0.08);
    /* The source site's own asymmetric slide shape (.c-feature-carousel__slide), not a plain
       rounded rectangle - overflow:hidden so the photo (filling the right side, full height)
       respects it too, rather than each having its own separate corner cut. */
    border-top-right-radius: 4rem;
    border-bottom-left-radius: 4rem;
    overflow: hidden;
    display: flex;
    align-items: stretch;
    min-height: 320px;
}

.ff-modular-tile-copy {
    flex: 1 1 55%;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ff-modular-tile-copy h3 {
    color: var(--ff-green-bright);
    font-size: 1.3rem;
    font-weight: 800;
}

.ff-modular-tile-copy p {
    color: var(--ff-white);
    opacity: 0.92;
    margin-bottom: 0;
}

.ff-modular-tile-image {
    flex: 1 1 45%;
    width: 45%;
    height: auto;
    object-fit: cover;
}

@media (max-width: 575.98px) {
    .ff-modular-tile {
        flex-direction: column;
    }

    .ff-modular-tile-image {
        width: 100%;
        height: 200px;
    }
}

/* ---------- "Indoor Farming" benefits slider ----------
   Matches the source site's own .c-benefits-slider: one full-bleed background photo at a time,
   with a translucent colour panel (cycling through the brand palette per slide) holding a big
   slide number, title and copy. JS (in the partial) swaps the photo/panel colour/text on
   prev/next - no carousel library, just four bits of state. */
.ff-benefits-slider {
    position: relative;
    min-height: 32rem;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    overflow: hidden;
}

.ff-benefits-slider-title {
    position: absolute;
    top: 2.5rem;
    left: 2.5rem;
    color: var(--ff-white);
    margin: 0;
    z-index: 2;
}

.ff-benefits-panel {
    position: relative;
    width: min(100%, 34rem);
    padding: 2rem 2.5rem 3rem;
    border-bottom-right-radius: 12vw;
    transition: background-color 0.2s ease;
}

.ff-benefits-panel-green { background-color: rgba(61, 117, 46, 0.9); }
.ff-benefits-panel-green .ff-benefits-panel-title,
.ff-benefits-panel-green .ff-benefits-panel-copy,
.ff-benefits-panel-green .ff-benefits-nav-btn { color: var(--ff-white); }
.ff-benefits-panel-green .ff-benefits-panel-count { color: var(--ff-green-bright); }
.ff-benefits-panel-green .ff-benefits-nav-btn { background: rgba(255, 255, 255, 0.2); }
.ff-benefits-panel-green .ff-benefits-nav-btn:hover { background: rgba(255, 255, 255, 0.35); }

.ff-benefits-panel-blue { background-color: rgba(36, 71, 126, 0.9); }
.ff-benefits-panel-blue .ff-benefits-panel-title,
.ff-benefits-panel-blue .ff-benefits-panel-copy,
.ff-benefits-panel-blue .ff-benefits-nav-btn { color: var(--ff-white); }
.ff-benefits-panel-blue .ff-benefits-panel-count { color: var(--ff-green-bright); }
.ff-benefits-panel-blue .ff-benefits-nav-btn { background: rgba(255, 255, 255, 0.2); }
.ff-benefits-panel-blue .ff-benefits-nav-btn:hover { background: rgba(255, 255, 255, 0.35); }

.ff-benefits-panel-bright { background-color: rgba(164, 232, 75, 0.9); }
.ff-benefits-panel-bright .ff-benefits-panel-title,
.ff-benefits-panel-bright .ff-benefits-panel-copy,
.ff-benefits-panel-bright .ff-benefits-nav-btn { color: var(--ff-green-deep); }
.ff-benefits-panel-bright .ff-benefits-panel-count { color: var(--ff-green-deep); }

.ff-benefits-panel-white { background-color: rgba(255, 255, 255, 0.9); }
.ff-benefits-panel-white .ff-benefits-panel-title,
.ff-benefits-panel-white .ff-benefits-panel-copy,
.ff-benefits-panel-white .ff-benefits-nav-btn { color: var(--ff-green-deep); }
.ff-benefits-panel-white .ff-benefits-panel-count { color: var(--ff-green-deep); }

.ff-benefits-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2.5rem;
}

.ff-benefits-panel-count {
    font-size: 3.5rem;
    font-weight: 300;
    line-height: 1;
}

.ff-benefits-panel-nav {
    display: flex;
}

.ff-benefits-nav-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.12);
    color: inherit;
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
    margin-left: 0.4rem;
    transition: background-color 0.15s ease;
}

.ff-benefits-nav-btn:hover {
    background: rgba(0, 0, 0, 0.22);
}

.ff-benefits-panel-title {
    font-weight: 800;
    font-size: 1.5rem;
    margin-bottom: 0.75rem;
}

.ff-benefits-panel-copy {
    font-size: 0.95rem;
    opacity: 0.95;
    margin-bottom: 0;
}

@media (max-width: 767.98px) {
    .ff-benefits-panel {
        width: 100%;
        border-bottom-right-radius: 0;
        border-top-left-radius: 2rem;
    }
}

/* ---------- News / LinkedIn feed toggle ----------
   Matches the source site's own .c-news-scroller__feed-toggles - lets a visitor switch the news
   section between the News grid and Fischer Farms' LinkedIn company feed. */
.ff-feed-toggles {
    display: flex;
    gap: 0.5rem;
    background-color: var(--ff-light-grey);
    border-radius: 999px;
    padding: 0.25rem;
}

.ff-feed-toggle {
    border: none;
    background: transparent;
    color: var(--ff-charcoal);
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0.4rem 1.1rem;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.ff-feed-toggle.is-active {
    background-color: var(--ff-green-deep);
    color: var(--ff-white);
}