:root {
    /* Brand Colors */
    --primary-color: #276C91;
    --primary-dark: #14384B;
    --secondary-color: #CC6934;
    --secondary-hover: #A8531F;
    --accent-light: #91B0B3;
    --text-main: #071319;
    --text-light: #4C5F66;
    --bg-light: #F5F9FA;
    --hairline: #D7E3E6;
    --white: #ffffff;

    /* Type */
    --font-body: 'Signika', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-label: 'Signika Negative', 'Segoe UI', system-ui, -apple-system, sans-serif;

    /* Spacing & Layout */
    --container-width: 1200px;
    --header-height: 80px;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-btn: 8px;
    --shadow-sm: 0 1px 3px rgba(7, 19, 25, 0.06);
    --shadow-md: 0 6px 16px rgba(7, 19, 25, 0.08);
    --shadow-lg: 0 12px 32px rgba(7, 19, 25, 0.14);
}

/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Signika:wght@400;500;600;700&family=Signika+Negative:wght@500;600;700&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-body);
    color: var(--text-main);
    line-height: 1.6;
    background-color: var(--white);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-body);
    color: var(--primary-dark);
    line-height: 1.15;
    margin-bottom: 1rem;
    text-wrap: balance;
}

h1 {
    font-size: clamp(2.5rem, 4.5vw, 3.25rem);
    font-weight: 700;
    letter-spacing: -0.01em;
}

h2 {
    font-size: clamp(1.9rem, 3vw, 2.25rem);
    font-weight: 600;
    letter-spacing: -0.005em;
}

h3 {
    font-size: 1.4rem;
    font-weight: 600;
}

p {
    margin-bottom: 1rem;
    max-width: 65ch;
}

a {
    text-decoration: none;
    color: var(--primary-color);
    transition: color 0.2s;
}

a:hover {
    color: var(--secondary-color);
}

a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--secondary-color);
    outline-offset: 3px;
}

.eyebrow {
    display: block;
    font-family: var(--font-label);
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--secondary-color);
    margin-bottom: 0.75rem;
}

/* Layout Utilities */
.container {
    width: 90%;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 1rem;
}

section {
    padding: 5rem 0;
}

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

.text-center {
    text-align: center;
}

/* Header & Navigation */
header {
    height: var(--header-height);
    background: var(--white);
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.logo-img {
    height: 40px;
    width: auto;
}

.nav-links {
    display: flex;
    gap: 2rem;
    list-style: none;
}

.nav-links a {
    font-family: var(--font-label);
    color: var(--primary-dark);
    font-weight: 600;
    font-size: 1.02rem;
    letter-spacing: 0.01em;
    padding-bottom: 4px;
    border-bottom: 2px solid transparent;
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--secondary-color);
    border-bottom-color: var(--secondary-color);
}

/* Buttons */
.btn {
    display: inline-block;
    font-family: var(--font-label);
    padding: 0.8rem 2rem;
    border-radius: var(--radius-btn);
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: all 0.2s ease;
    border: 2px solid transparent;
    cursor: pointer;
}

.btn-primary {
    background-color: var(--secondary-color);
    color: var(--white);
}

.btn-primary:hover {
    background-color: var(--secondary-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    color: var(--white);
}

.btn-outline {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.btn-outline:hover {
    background-color: var(--primary-color);
    color: var(--white);
}

/* Hero Section */
.hero {
    padding: 10rem 0 8rem;
    background-color: var(--primary-dark);
    background-image:
        radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1.6px),
        radial-gradient(circle at 88% 78%, rgba(204, 105, 52, 0.24) 0%, transparent 42%),
        radial-gradient(circle at 8% 18%, rgba(39, 108, 145, 0.45) 0%, transparent 45%);
    background-size: 26px 26px, auto, auto;
    color: var(--white);
    text-align: center;
    position: relative;
    overflow: hidden;
    clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
}

.hero h1 {
    color: var(--white);
    margin-bottom: 1.5rem;
    letter-spacing: -0.015em;
}

.hero .tagline {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.2rem;
    font-weight: 400;
    margin-left: auto;
    margin-right: auto;
}

.cta-group {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    margin-top: 2.5rem;
    flex-wrap: wrap;
}

/* Small Hero for Subpages */
.hero-small {
    padding: 7rem 0 5rem;
    background-color: var(--primary-dark);
    background-image:
        radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1.6px),
        radial-gradient(circle at 88% 75%, rgba(204, 105, 52, 0.2) 0%, transparent 42%),
        radial-gradient(circle at 8% 20%, rgba(39, 108, 145, 0.4) 0%, transparent 45%);
    background-size: 26px 26px, auto, auto;
    color: var(--white);
    text-align: center;
    margin-bottom: 0;
    clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
}

.hero-small h1 {
    color: var(--white);
    margin-bottom: 1rem;
}

.hero-small .tagline {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.15rem;
    font-weight: 400;
    margin-left: auto;
    margin-right: auto;
}

/* Feature/Product Section */
.products {
    padding: 8rem 0;
    background: var(--white);
}

/* Generic Grid & Card (Restored) */
.grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
    margin-top: 3rem;
}

.card {
    flex: 0 0 100%;
    max-width: 100%;
}

@media (min-width: 650px) {
    .card {
        flex: 0 0 calc(50% - 1rem);
        max-width: calc(50% - 1rem);
    }
}

@media (min-width: 950px) {
    .card {
        flex: 0 0 calc(33.333% - 1.33rem);
        max-width: calc(33.333% - 1.33rem);
    }
}

@media (min-width: 1250px) {
    .card {
        flex: 0 0 calc(25% - 1.5rem);
        max-width: calc(25% - 1.5rem);
    }
}

.card {
    background: var(--white);
    padding: 2rem;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    border: 1px solid #eee;
    transition: transform 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

.card h3 {
    color: var(--primary-color);
    margin-bottom: 1rem;
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 3rem;
    margin-top: 4rem;
}

.product-card {
    background: var(--white);
    border-radius: var(--radius-md);
    padding: 0;
    box-shadow: var(--shadow-md);
    transition: transform 0.3s ease;
    overflow: hidden;
    border: 1px solid #eee;
    display: flex;
    flex-direction: column;
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.product-image-placeholder {
    height: 200px;
    background: linear-gradient(135deg, #f0f4f6 0%, #e1e8ec 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.product-content {
    padding: 2rem;
}

.product-content h3 {
    color: var(--primary-dark);
    margin-bottom: 0.5rem;
}

/* Browser Window Mockup */
.browser-window {
    background: var(--white);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    margin: 3rem 0;
    border: 1px solid #e1e4e8;
}

.browser-header {
    background: #f1f3f5;
    padding: clamp(0.4rem, 1.5vw, 0.75rem) clamp(0.6rem, 2vw, 1rem);
    display: flex;
    gap: clamp(5px, 1vw, 8px);
    border-bottom: 1px solid #e1e4e8;
}

.dot {
    width: clamp(6px, 1.5vw, 12px);
    height: clamp(6px, 1.5vw, 12px);
    border-radius: 50%;
    background-color: #d1d5db;
}

.dot:nth-child(1) {
    background-color: #ff5f56;
}

.dot:nth-child(2) {
    background-color: #ffbd2e;
}

.dot:nth-child(3) {
    background-color: #27c93f;
}

.main-screenshot-placeholder {
    height: 450px;
    background: linear-gradient(135deg, #f0f4f6 0%, #e1e8ec 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    font-weight: 600;
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.main-screenshot {
    width: 100%;
    height: auto;
    display: block;
}

/* Modules List — a quiet manifest, not a feature grid */
.modules-grid {
    max-width: 720px;
    margin: 2.5rem auto 0;
    text-align: left;
}

.module-item {
    margin-bottom: 0.6rem;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-light);
    max-width: none;
}

.module-item strong {
    font-weight: 600;
    color: var(--primary-dark);
}

.modules-note {
    max-width: 720px;
    margin: 1.5rem auto 0;
    text-align: left;
    font-size: 0.9rem;
    font-style: italic;
    color: var(--accent-light);
}

/* Values Section (Home Page) */
.values-section {
    background-color: var(--bg-light);
    padding: 8rem 0;
    position: relative;
}

.values-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4rem;
    margin-top: 4rem;
}

.value-item {
    flex: 0 0 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    border-left: 2px solid var(--hairline);
    padding-left: 1.75rem;
    transition: border-color 0.25s ease;
}

.value-item:hover {
    border-left-color: var(--secondary-color);
}

@media (min-width: 700px) {
    .value-item {
        flex: 0 0 calc(50% - 2rem);
        max-width: calc(50% - 2rem);
    }
}

@media (min-width: 1000px) {
    .value-item {
        flex: 0 0 calc(33.333% - 2.67rem);
        max-width: calc(33.333% - 2.67rem);
    }
}

.icon-box {
    color: var(--secondary-color);
    margin-bottom: 1.25rem;
}

.icon-box svg {
    width: 34px;
    height: 34px;
    stroke-width: 1.75;
}

.value-item h3 {
    margin-bottom: 0.5rem;
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation: fadeInUp 0.8s ease-out forwards;
    opacity: 0;
    /* Start hidden */
}

.delay-100 {
    animation-delay: 0.1s;
}

.delay-200 {
    animation-delay: 0.2s;
}

.delay-300 {
    animation-delay: 0.3s;
}

@media (prefers-reduced-motion: reduce) {
    .fade-in-up {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* About Page Specifics */
.values-container-wide {
    max-width: 1800px;
}

.values-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
}

.value-card {
    flex: 0 0 100%;
    max-width: 100%;
    background: var(--white);
    padding: 2rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--hairline);
    text-align: left;
    transition: border-color 0.2s ease;
    display: flex;
    flex-direction: column;
}

.value-card:hover {
    border-color: var(--secondary-color);
}

.value-card h3 {
    color: var(--secondary-color);
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--hairline);
    padding-bottom: 0.6rem;
}

.value-card ul {
    list-style-type: none;
    padding-left: 0;
}

.value-card li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.5rem;
    color: var(--text-light);
    font-size: 0.95rem;
}

.value-card li::before {
    content: "•";
    color: var(--primary-color);
    font-weight: bold;
    position: absolute;
    left: 0;
}

@media (min-width: 850px) {
    .value-card {
        flex: 0 0 calc(50% - 1rem);
        max-width: calc(50% - 1rem);
    }
}

@media (min-width: 1250px) {
    .value-card {
        flex: 0 0 calc(33.333% - 1.4rem);
        max-width: calc(33.333% - 1.4rem);
    }
}

@media (min-width: 1700px) {
    .value-card {
        flex: 0 0 calc(20% - 1.7rem);
        max-width: calc(20% - 1.7rem);
    }
}

.team-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 3rem;
    margin-top: 3rem;
    text-align: center;
}

.team-member {
    flex: 0 0 100%;
    max-width: 100%;
}

@media (min-width: 500px) {
    .team-member {
        flex: 0 0 calc(50% - 1.5rem);
        max-width: calc(50% - 1.5rem);
    }
}

@media (min-width: 800px) {
    .team-member {
        flex: 0 0 calc(33.333% - 2rem);
        max-width: calc(33.333% - 2rem);
    }
}

@media (min-width: 1100px) {
    .team-member {
        flex: 0 0 calc(20% - 2.4rem);
        max-width: calc(20% - 2.4rem);
    }
}

.team-member img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 1rem;
    border: 3px solid var(--primary-color);
    background-color: var(--bg-light);
}

/* Contact Page */
.contact-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
}

.contact-info-box {
    background: var(--primary-dark);
    color: var(--white);
    padding: 3rem;
    border-radius: var(--radius-md);
}

.contact-info-box h2 {
    color: var(--white);
}

.contact-info-box a {
    color: var(--accent-light);
}

.contact-info-box a:hover {
    color: var(--white);
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-family: var(--font-label);
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.03em;
    color: var(--primary-dark);
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 0.8rem;
    border: 1px solid var(--hairline);
    border-radius: var(--radius-sm);
    font-family: inherit;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(39, 108, 145, 0.1);
}

.styled-form {
    background: white;
    padding: 2rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--hairline);
}

/* Footer */
footer {
    background: var(--primary-dark);
    color: var(--white);
    padding: 3rem 0;
    margin-top: auto;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 2rem;
}

.footer-links a {
    color: var(--accent-light);
    margin-left: 2rem;
}

.footer-links a:hover {
    color: var(--white);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    h1 {
        font-size: 2.5rem;
    }

    .nav-links {
        display: none;
        position: absolute;
        top: var(--header-height);
        left: 0;
        width: 100%;
        background: var(--white);
        flex-direction: column;
        padding: 1rem 0;
        box-shadow: var(--shadow-md);
        gap: 0;
    }

    .nav-links.active {
        display: flex;
    }

    .nav-links li {
        width: 100%;
        text-align: center;
    }

    .nav-links a {
        display: block;
        padding: 1rem;
        width: 100%;
    }

    .mobile-menu-btn {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 30px;
        height: 21px;
        background: none;
        border: none;
        cursor: pointer;
        padding: 0;
        z-index: 1001;
    }

    .mobile-menu-btn .bar {
        width: 100%;
        height: 3px;
        background-color: var(--primary-dark);
        border-radius: 3px;
        transition: all 0.3s ease;
    }

    .contact-wrapper {
        grid-template-columns: 1fr;
    }

    .hero {
        padding: 4rem 0;
    }
}

/* Mobile Menu Button (Hidden on Desktop) */
.mobile-menu-btn {
    display: none;
}

.future-outlook {
    margin-top: 5rem;
    text-align: center;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 2rem;
    border-top: 1px solid var(--hairline);
}

.future-outlook h4 {
    font-family: var(--font-label);
    color: var(--primary-color);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    font-size: 0.85rem;
    margin-bottom: 1rem;
}

.future-outlook p {
    color: var(--text-light);
    font-size: 1.05rem;
    margin-left: auto;
    margin-right: auto;
}

/* Contact Card Pages (/c/) */
.contact-page {
    background:
        radial-gradient(circle at 10% 12%, rgba(39, 108, 145, 0.12), transparent 35%),
        radial-gradient(circle at 88% 85%, rgba(204, 105, 52, 0.11), transparent 40%),
        #f4f8fa;
}

.contact-shell {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(1rem, 4vw, 2.5rem) 0;
}

.contact-card-section {
    width: 100%;
    padding: 0;
}

.contact-profile-card {
    background: var(--white);
    border: 1px solid #e2e9ed;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    max-width: 760px;
    margin: 0 auto;
    overflow: hidden;
}

.contact-profile-hero {
    padding: clamp(1rem, 3vw, 1.5rem);
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 1rem;
    align-items: center;
    background: linear-gradient(135deg, #f8fbfd 0%, #eef5f8 100%);
    border-bottom: 1px solid #e8edf0;
}

.contact-profile-hero img {
    width: 110px;
    height: 110px;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid var(--white);
    box-shadow: var(--shadow-sm);
}

.contact-profile-hero h1 {
    font-size: clamp(1.5rem, 4vw, 2rem);
    margin-bottom: 0.35rem;
}

.contact-profile-hero p {
    margin-bottom: 0;
}

.contact-profile-body {
    padding: clamp(1rem, 3vw, 1.7rem);
}

.contact-status-card {
    text-align: center;
    min-height: 260px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.6rem;
}

.contact-status-card p {
    margin: 0;
    color: var(--text-light);
}

.contact-points {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.55rem;
}

.contact-points li {
    color: var(--text-main);
    overflow-wrap: anywhere;
}

.contact-primary-action {
    margin-top: 1.2rem;
    display: flex;
    justify-content: flex-end;
}

.contact-primary-action .btn {
    min-width: 170px;
    text-align: center;
    padding: 0.75rem 1rem;
}

@media (max-width: 680px) {
    .contact-shell {
        padding: 0.65rem 0;
    }

    .contact-profile-card {
        border-radius: 12px;
    }

    .contact-profile-hero {
        grid-template-columns: 82px 1fr;
        gap: 0.8rem;
    }

    .contact-profile-hero img {
        width: 82px;
        height: 82px;
    }

    .contact-profile-body {
        padding: 0.9rem;
    }

    .contact-primary-action {
        justify-content: stretch;
    }

    .contact-primary-action .btn {
        width: 100%;
        min-width: 0;
    }
}

/* ==========================================================================
   BENEVIA POULTRY ADDITIONS
   Everything above is inherited from the Benevia Software parent site
   (../website/styles.css). Add poultry-specific patterns below only.
   ========================================================================== */

/* Benevia Poultry wordmark. A stacked two-line lockup ("Benevia" over
   "Poultry") at roughly 3.38:1, where the parent's single-line wordmark was
   5.31:1. It therefore needs more height to keep the second line legible, but
   is narrower overall, which leaves more room in the header. */
.logo-link {
    display: flex;
    align-items: center;
}

.logo-img {
    height: 52px;
}

/* Trust bar - the three published commitments */
/* White, so the band separates from the bg-light Solutions section beneath it.
   The top border does the work of dividing it from the white platform section
   above; without that rule the two whites would run together. */
.trust-bar {
    background: var(--white);
    border-top: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
    padding: 2.5rem 0;
}

.trust-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: 2rem;
}

.trust-item {
    border-left: 2px solid var(--secondary-color);
    padding-left: 1.25rem;
}

.trust-item h3 {
    font-family: var(--font-label);
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--primary-color);
    margin-bottom: 0.4rem;
}

.trust-item p {
    margin-bottom: 0;
    color: var(--text-light);
    font-size: 0.98rem;
    max-width: none;
}

/* Six-stage process strip */
.process-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
    gap: 1.5rem;
    margin-top: 3rem;
}

.stage {
    border-top: 3px solid var(--hairline);
    padding-top: 1.1rem;
    transition: border-color 0.25s ease;
}

.stage:hover {
    border-top-color: var(--secondary-color);
}

.stage-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--primary-color);
    color: var(--white);
    font-family: var(--font-label);
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.7rem;
}

/* Alternating blue/orange, carried over from the Proven Process infographic.
   Scoped deliberately to this graphic only - see README section 5. */
.stage:nth-child(even) .stage-num {
    background: var(--secondary-color);
}

.stage h3 {
    font-family: var(--font-label);
    font-size: 0.85rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--primary-color);
    margin-bottom: 0.3rem;
}

.stage:nth-child(even) h3 {
    color: var(--secondary-color);
}

.stage h4 {
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--primary-dark);
    margin-bottom: 0.5rem;
    line-height: 1.3;
}

.stage p {
    font-size: 0.93rem;
    color: var(--text-light);
    margin-bottom: 0;
    max-width: none;
}

/* Audience / segment split */
.segment-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.segment-card {
    background: var(--white);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-md);
    padding: 2.25rem;
    display: flex;
    flex-direction: column;
    transition: border-color 0.2s ease, transform 0.25s ease;
}

.segment-card:hover {
    border-color: var(--secondary-color);
    transform: translateY(-3px);
}

.segment-card h3 {
    color: var(--primary-dark);
}

.segment-card p {
    color: var(--text-light);
    max-width: none;
}

.segment-card .quote {
    font-style: italic;
    color: var(--primary-color);
    border-left: 2px solid var(--hairline);
    padding-left: 1rem;
    margin: 1.25rem 0;
}

.segment-card .btn {
    align-self: flex-start;
    margin-top: auto;
}

/* Proof figures */
.proof-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: 2.5rem;
    margin-top: 3rem;
}

.proof-item {
    text-align: center;
}

.proof-figure {
    font-family: var(--font-label);
    font-size: clamp(2rem, 4vw, 2.6rem);
    font-weight: 700;
    color: var(--primary-color);
    line-height: 1.1;
    display: block;
}

.proof-item p {
    color: var(--text-light);
    font-size: 0.95rem;
    margin: 0.5rem auto 0;
    max-width: 30ch;
}

.proof-source {
    margin-top: 2.5rem;
    font-size: 0.88rem;
    color: var(--text-light);
    text-align: center;
    max-width: 70ch;
    margin-left: auto;
    margin-right: auto;
}

/* Commitment callout */
.commitment {
    background: var(--primary-dark);
    color: var(--white);
    border-radius: var(--radius-md);
    padding: clamp(2rem, 4vw, 3rem);
    margin-top: 3rem;
}

.commitment h2,
.commitment h3 {
    color: var(--white);
}

.commitment p {
    color: rgba(255, 255, 255, 0.86);
    max-width: 70ch;
}

.commitment p:last-child {
    margin-bottom: 0;
}

.commitment .lead {
    font-size: 1.2rem;
    color: var(--white);
}

/* Decision outcomes: proceed / pause / do not proceed */
.decision-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: 1.5rem;
    margin-top: 2.5rem;
}

.decision-item {
    background: var(--white);
    border: 1px solid var(--hairline);
    border-top: 3px solid var(--primary-color);
    border-radius: var(--radius-sm);
    padding: 1.5rem;
}

.decision-item h3 {
    font-family: var(--font-label);
    font-size: 0.85rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}

.decision-item p {
    margin-bottom: 0;
    color: var(--text-light);
    font-size: 0.95rem;
    max-width: none;
}

/* Implementation phases */
.phase-list {
    margin-top: 3rem;
    display: grid;
    gap: 1.25rem;
}

.phase {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 1.5rem;
    background: var(--white);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-md);
    padding: 1.75rem;
    align-items: start;
}

.phase-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--bg-light);
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
    font-family: var(--font-label);
    font-weight: 700;
    font-size: 1.15rem;
}

.phase h3 {
    margin-bottom: 0.4rem;
}

.phase p {
    color: var(--text-light);
    max-width: none;
}

.phase .signal {
    margin-bottom: 0;
    font-size: 0.93rem;
    color: var(--primary-color);
    border-top: 1px solid var(--hairline);
    padding-top: 0.75rem;
    margin-top: 0.75rem;
}

.phase .signal strong {
    font-family: var(--font-label);
    letter-spacing: 0.02em;
}

/* Two-column checklists */
.checklist-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.checklist {
    background: var(--white);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-md);
    padding: 2rem;
}

.checklist h3 {
    color: var(--primary-color);
    font-size: 1.15rem;
    border-bottom: 1px solid var(--hairline);
    padding-bottom: 0.7rem;
}

.checklist ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.checklist li {
    position: relative;
    padding-left: 1.6rem;
    margin-bottom: 0.6rem;
    color: var(--text-light);
    font-size: 0.96rem;
}

.checklist li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    color: var(--secondary-color);
    font-weight: 700;
}

/* Team rosters */
.roster-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: 2rem;
    margin-top: 2.5rem;
}

.roster h3 {
    font-family: var(--font-label);
    font-size: 0.85rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--secondary-color);
    margin-bottom: 1rem;
}

.roster ul {
    list-style: none;
    padding-left: 0;
}

.roster li {
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--hairline);
    color: var(--text-light);
    font-size: 0.96rem;
}

/* FAQ */
.faq {
    max-width: 820px;
    margin: 3rem auto 0;
}

.faq details {
    border-bottom: 1px solid var(--hairline);
    padding: 1.1rem 0;
}

.faq summary {
    font-family: var(--font-label);
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--primary-dark);
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.faq summary::-webkit-details-marker {
    display: none;
}

.faq summary::after {
    content: "+";
    color: var(--secondary-color);
    font-size: 1.4rem;
    line-height: 1;
    flex-shrink: 0;
}

.faq details[open] summary::after {
    content: "\2013";
}

.faq summary:hover {
    color: var(--primary-color);
}

.faq details p {
    margin: 0.9rem 0 0;
    color: var(--text-light);
}

/* Capability groups (product page) */
.capability-group {
    margin-top: 3.5rem;
}

.capability-group > h3 {
    color: var(--primary-dark);
    border-bottom: 2px solid var(--secondary-color);
    display: inline-block;
    padding-bottom: 0.4rem;
    margin-bottom: 1.5rem;
}

.capability-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: 1.25rem 2.5rem;
}

.capability {
    border-left: 2px solid var(--hairline);
    padding-left: 1.25rem;
}

.capability strong {
    display: block;
    color: var(--primary-dark);
    font-weight: 600;
    margin-bottom: 0.2rem;
}

.capability span {
    color: var(--text-light);
    font-size: 0.95rem;
}

/* Pain / outcome comparison */
.compare-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: 2rem;
    margin-top: 2.5rem;
}

.compare-col h3 {
    font-family: var(--font-label);
    font-size: 0.85rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.compare-col.today h3 {
    color: var(--text-light);
}

.compare-col.with-benevia h3 {
    color: var(--primary-color);
}

.compare-col ul {
    list-style: none;
    padding-left: 0;
}

.compare-col li {
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--hairline);
    color: var(--text-light);
    font-size: 0.96rem;
}

/* Roadmap note */
.roadmap {
    margin-top: 3rem;
    background: var(--bg-light);
    border-radius: var(--radius-md);
    padding: 2rem;
}

.roadmap h3 {
    font-family: var(--font-label);
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--primary-color);
    margin-bottom: 0.75rem;
}

.roadmap p {
    color: var(--text-light);
    margin-bottom: 0.75rem;
}

.roadmap ul {
    columns: 2;
    column-gap: 2.5rem;
    list-style-position: inside;
    color: var(--text-light);
    font-size: 0.96rem;
}

@media (max-width: 600px) {
    .roadmap ul {
        columns: 1;
    }
}

/* Section CTA */
.section-cta {
    margin-top: 3.5rem;
    text-align: center;
}

.section-cta p {
    margin: 0 auto 1.5rem;
    color: var(--text-light);
}

/* Footer parent-company line */
.footer-parent {
    font-size: 0.92rem;
    color: var(--accent-light);
    margin-bottom: 0;
}

.footer-parent a {
    color: var(--white);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.footer-parent a:hover {
    color: var(--secondary-color);
}

/* Anchored sub-navigation */
.jump-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.75rem;
    justify-content: center;
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--hairline);
}

.jump-nav a {
    font-family: var(--font-label);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--primary-dark);
}

.jump-nav a:hover {
    color: var(--secondary-color);
}

/* Long-form prose blocks */
.prose {
    max-width: 720px;
}

.prose p {
    color: var(--text-light);
    font-size: 1.05rem;
}

.prose h3 {
    margin-top: 2.5rem;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-height) + 1rem);
}

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

/* Bare tick list - same markers as .checklist, without the card chrome */
.tick-list {
    list-style: none;
    padding-left: 0;
    margin: 1rem 0 0;
}

.tick-list li {
    position: relative;
    padding-left: 1.6rem;
    margin-bottom: 0.5rem;
    color: var(--text-light);
    font-size: 0.96rem;
}

.tick-list li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    color: var(--secondary-color);
    font-weight: 700;
}

/* --------------------------------------------------------------------------
   Inherited bug fix: mobile navigation was unreachable.
   In the parent stylesheet the unconditional `.mobile-menu-btn { display: none }`
   (line ~848) comes AFTER the `@media (max-width: 768px)` rule that sets it to
   `flex` (line ~817). Same specificity, later in source, so it won everywhere and
   the hamburger never appeared -- while .nav-links stayed hidden on small screens.
   Result: no navigation at all below 768px. This restores it.
   The same defect exists on benevia.software and should be fixed there too.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .mobile-menu-btn {
        display: flex;
    }
}

/* Mobile header fit. The menu button must not shrink -- as a flex item next to
   the wordmark it collapsed to ~5px wide. Padding brings the tap target to
   46x45. The wordmark steps down but stays large enough that the "Poultry"
   line remains readable. */
@media (max-width: 768px) {
    .logo-img {
        height: 44px;
    }

    .mobile-menu-btn {
        flex-shrink: 0;
        width: 46px;
        height: 45px;
        padding: 12px 8px;
    }
}

/* Very small screens (320px and similar). */
@media (max-width: 400px) {
    .logo-img {
        height: 38px;
    }

    .container {
        width: 100%;
        padding: 0 1rem;
    }
}

/* --------------------------------------------------------------------------
   Contrast corrections.
   Benevia Orange (#CC6934) reaches only 3.72:1 on white and 3.51:1 on the
   subtle surface -- short of the 4.5:1 needed for small text. The design system
   requires confirming contrast whenever orange is used for text, so small
   orange text and the primary button use the palette's existing darker orange
   (--secondary-hover, #A8531F) instead: 5.35:1 on white, 5.05:1 on bg-light,
   and 5.35:1 for white text on top of it. No new colors are introduced, and the
   full-strength orange is still used for borders, underlines, and icons, where
   the 3:1 non-text threshold applies.
   -------------------------------------------------------------------------- */
:root {
    /* Orange that is safe for text and for white-on-orange fills */
    --secondary-text: #A8531F;
}

.eyebrow,
.roster h3,
.value-card h3,
.stage:nth-child(even) h3,
.compare-col.with-benevia h3 + *,
.faq summary::after {
    color: var(--secondary-text);
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--secondary-text);
    border-bottom-color: var(--secondary-text);
}

.btn-primary {
    background-color: var(--secondary-text);
}

.btn-primary:hover {
    background-color: var(--secondary-text);
    filter: brightness(0.9);
}

.stage:nth-child(even) .stage-num {
    background: var(--secondary-text);
}

.checklist li::before,
.tick-list li::before {
    color: var(--secondary-text);
}

/* accent-light is 2.32:1 on white -- unusable for real content */
.modules-note {
    color: var(--text-light);
    font-style: normal;
}

/* Skip-link and screen-reader-only text */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    left: 1rem;
    top: -3rem;
    z-index: 1100;
    background: var(--white);
    color: var(--primary-dark);
    font-family: var(--font-label);
    font-weight: 600;
    padding: 0.7rem 1.2rem;
    border-radius: var(--radius-btn);
    box-shadow: var(--shadow-md);
    transition: top 0.15s ease;
}

.skip-link:focus {
    top: 1rem;
}

/* Header breathing room. The subsidiary lockup is wider than the parent's
   wordmark and the nav carries six items, so at mid widths "Poultry" ran
   straight into the first nav link. Guarantee a gap, and tighten the nav
   spacing between the mobile breakpoint and full desktop. */
nav.container {
    gap: 2.5rem;
}

@media (min-width: 769px) and (max-width: 1100px) {
    .nav-links {
        gap: 1.25rem;
    }

    .nav-links a {
        font-size: 0.94rem;
    }

    nav.container {
        gap: 1.5rem;
    }
}

/* Four-figure proof row. auto-fit left a 3+1 orphan at common widths, so this
   variant steps 1 -> 2 -> 4 columns and always stays balanced. */
.proof-grid.cols-4 {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem 1.5rem;
}

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

@media (max-width: 520px) {
    .proof-grid.cols-4 {
        grid-template-columns: 1fr;
    }
}

/* Six stages need column counts that divide evenly, or the last row orphans.
   Default (stages carrying a description): 1 -> 2 -> 3 columns.
   .compact (labels only, as on the Proven Process page): also 6 across on wide. */
.process-strip {
    grid-template-columns: 1fr;
}

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

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

@media (min-width: 1100px) {
    .process-strip.compact {
        grid-template-columns: repeat(6, 1fr);
        gap: 1rem;
    }
}

/* White wordmark on the dark footer. The reversed variant exists for exactly
   this surface; the dark wordmark would be unreadable here. */
.footer-logo {
    height: 56px;
    width: auto;
    display: block;
    margin-bottom: 1.25rem;
}

@media (max-width: 768px) {
    .footer-logo {
        height: 46px;
    }
}