/* ==========================================
   Alwasi Global - Cargill-Inspired Theme Styles
   ========================================== */

/* ===== CSS VARIABLES ===== */
/* Alwaseer brand palette:
   #F47B00 Alwaseer Orange  - brand / buttons
   #111111 Deep Charcoal    - header text / footer
   #3F7D20 Deep Green       - agriculture accent
   #F6F0E3 Wheat Cream      - page background
   #FFFFFF Off White        - cards / sections
   #333333 Dark Gray        - text */
:root {
    /* Brand tokens */
    --color-brand-orange: #F47B00;
    /* Alwaseer Orange - buttons / brand pops */
    --color-brand-orange-dark: #C05F00;
    /* darker orange for hovers / accessible text */
    --color-charcoal: #111111;
    /* Deep Charcoal - headings / footer */
    --color-deep-green: #3F7D20;
    /* Deep Green - agriculture accent */
    --color-deep-green-dark: #2E5B17;
    /* deep green for large dark surfaces */
    --color-deep-green-light: #356B1B;
    /* deeper green for link hovers (AA on cream) */
    --color-wheat-cream: #F6F0E3;
    /* Wheat Cream - page / section background */
    --color-dark-gray: #333333;
    /* Dark Gray - body text */
    --color-danger: #D14343;
    /* form validation / required markers */

    /* Primary Colors - green agriculture base + orange brand accent */
    --color-primary: var(--color-deep-green);
    --color-primary-dark: var(--color-deep-green-dark);
    --color-primary-light: var(--color-deep-green-light);
    --color-accent: var(--color-brand-orange);
    --color-accent-dark: var(--color-brand-orange-dark);

    /* Neutral Colors */
    --color-white: #FFFFFF;
    --color-off-white: var(--color-wheat-cream);
    --color-light-gray: #EDE5D2;
    /* cream hairlines / soft chips on white */
    --color-medium-gray: #5C5C5C;
    /* secondary text, AA on cream */
    --color-dark-text: var(--color-dark-gray);
    --color-black: var(--color-charcoal);
    --color-page-bg: var(--color-wheat-cream);

    /* Typography */
    --font-primary: 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    --font-heading: 'Georgia', serif;

    /* Spacing */
    --container-width: 1280px;
    --container-padding: 6px;
    --section-padding: 80px 0;
    --header-height: 80px;

    /* Shadows - warm charcoal tints to suit the cream background */
    --shadow-sm: 0 2px 4px rgba(17, 17, 17, 0.08);
    --shadow-md: 0 4px 8px rgba(17, 17, 17, 0.1);
    --shadow-lg: 0 8px 16px rgba(17, 17, 17, 0.14);

    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;

    /* Breadcrumb */
    --breadcrumb-bg: var(--color-wheat-cream);
    --breadcrumb-color: var(--color-medium-gray);
    --breadcrumb-active: var(--color-deep-green);
    --breadcrumb-padding: 12px 0;
}

/* ===== RESET ===== */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

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

img {
    max-width: 100%;
    height: auto;
}

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

a:hover {
    color: var(--color-primary-light);
}

ul,
ol {
    list-style: none;
}

button,
input,
select,
textarea {
    font-family: inherit;
}

/* ===== UTILITY ===== */
/* Content aligns with the header card: the header sits inside .site-header's
   24px outer padding with a max-width 1280px card padded 28px, so the container
   mirrors that: max-width +48px with +24px side padding. */
.container {
    max-width: calc(var(--container-width) + 48px);
    margin: 0 auto;
    padding: 0 calc(var(--container-padding) + 24px);
    width: 100%;
}

.section-padding {
    padding: var(--section-padding);
}

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

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

/* ===== TYPOGRAPHY ===== */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    color: var(--color-black);
    font-weight: 700;
    line-height: 1.3;
}

h1 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
}

h3 {
    font-size: 1.5rem;
    margin-bottom: 0.75rem;
}

h4 {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
}

p {
    margin-bottom: 1rem;
}

/* ===== BUTTONS ===== */
.btn {
    display: inline-block;
    padding: 12px 28px;
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all var(--transition-normal);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-primary {
    background: var(--color-accent);
    color: var(--color-charcoal);
}

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

.btn-outline {
    background: transparent;
    color: var(--color-white);
    border: 2px solid var(--color-white);
}

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

.btn-accent {
    background: var(--color-accent);
    color: var(--color-black);
}

.btn-accent:hover {
    background: var(--color-charcoal);
    color: var(--color-accent);
    transform: translateY(-2px);
}

.btn-small {
    padding: 8px 18px;
    font-size: 0.875rem;
}

/* ===== HEADER (Cargill-style floating pill, sticky, transparent) ===== */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: transparent;
    box-shadow: none;
    padding: 20px 24px 0;
}

.header-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 28px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--color-white);
    border-radius: 18px;
    box-shadow: var(--shadow-sm);
}

.site-logo {
    display: flex;
    align-items: center;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-primary);
    text-decoration: none;
    transition: opacity var(--transition-fast);
}

.site-logo:hover {
    opacity: 0.8;
    color: var(--color-primary);
}

.logo-img {
    max-height: 64px;
    width: auto;
    display: block;
}

/* Navigation */
.main-nav {
    display: flex;
    align-items: center;
    gap: 2rem;
}

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

.nav-menu li {
    position: relative;
}

.nav-menu>li>a {
    display: block;
    padding: 0.5rem 0.9vw;
    color: var(--color-dark-text);
    font-weight: 600;
    font-size: 1rem;
    transition: color var(--transition-fast);
    position: relative;
    white-space: nowrap;
}

.nav-menu>li>a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--color-primary);
    transition: width var(--transition-fast);
}

.nav-menu>li>a:hover {
    color: var(--color-primary);
}

.nav-menu>li>a:hover::after {
    width: 100%;
}

/* Mega Menu */
.nav-menu .has-children {
    position: relative;
}

.dropdown-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.dropdown-content {
    padding: 1.5rem;
}

.nav-menu .has-children>a {
    padding-right: 1.5rem;
}

.nav-menu .has-children>a::after {
    content: '\25BC';
    position: absolute;
    right: 0;
    bottom: 0;
    font-size: 0.7rem;
    color: var(--color-medium-gray);
    transition: transform var(--transition-fast);
}

.nav-menu .has-children:hover>a::after {
    transform: rotate(180deg);
}

.dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    min-width: 250px;
    background: var(--color-white);
    box-shadow: var(--shadow-lg);
    border-radius: 4px;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-fast);
    z-index: 100;
}

.nav-menu .has-children:hover .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(10px);
}

.dropdown-col {
    padding: 1rem;
}

.dropdown-col-title {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-medium-gray);
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--color-light-gray);
}

.dropdown-col ul {
    list-style: none;
}

.dropdown-col li {
    margin-bottom: 0.5rem;
}

.dropdown-col a {
    display: block;
    padding: 0.5rem 0;
    color: var(--color-dark-text);
    font-size: 0.9rem;
    transition: all var(--transition-fast);
}

.dropdown-col a:hover {
    color: var(--color-primary);
    padding-left: 5px;
}

/* Header right section */
.header-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Mobile menu toggle (hidden on desktop, shown ≤768px) */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    margin-left: 0.5rem;
}

.menu-toggle span {
    display: block;
    width: 25px;
    height: 3px;
    background: var(--color-dark-text);
    margin: 5px 0;
    transition: all var(--transition-fast);
}

.search-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    color: var(--color-dark-text);
    font-size: 1.25rem;
    transition: color var(--transition-fast);
}

.search-toggle:hover {
    color: var(--color-primary);
}

.request-quote-btn {
    background: var(--color-accent);
    color: var(--color-black);
    padding: 10px 20px;
    font-weight: 600;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all var(--transition-normal);
}

.request-quote-btn:hover {
    background: var(--color-charcoal);
    color: var(--color-accent);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* Mobile menu toggle */
.menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* Search overlay */
.search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    z-index: 2000;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding-top: 15vh;
}

.search-overlay.active {
    display: flex;
}

.search-overlay-inner {
    width: 100%;
    max-width: 600px;
    padding: 0 20px;
}

.search-overlay-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    color: var(--color-white);
    font-size: 2rem;
    cursor: pointer;
}

.search-form {
    position: relative;
}

.search-form input[type="search"] {
    width: 100%;
    padding: 20px 60px 20px 20px;
    font-size: 1.25rem;
    border: 2px solid var(--color-white);
    border-radius: 4px;
    background: var(--color-white);
    color: var(--color-black);
}

.search-form input[type="search"]::placeholder {
    color: var(--color-medium-gray);
}

.search-form button {
    position: absolute;
    right: 5px;
    top: 5px;
    bottom: 5px;
    width: 50px;
    background: var(--color-primary);
    color: var(--color-white);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1.25rem;
    transition: background var(--transition-fast);
}

.search-form button:hover {
    background: var(--color-primary-dark);
}

.search-results {
    margin-top: 2rem;
}

.search-results article {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    border-bottom: 1px solid var(--color-light-gray);
    transition: background var(--transition-fast);
}

.search-results article:hover {
    background: var(--color-light-gray);
}

.search-results img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 4px;
}

.search-results h4 {
    font-size: 1rem;
    margin-bottom: 0.25rem;
}

.search-results a {
    color: var(--color-dark-text);
}

.search-results a:hover {
    color: var(--color-primary);
}

/* ===== HERO SECTION ===== */
.hero-section {
    position: relative;
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg,
            rgba(63, 125, 32, 0.85) 0%,
            rgba(46, 91, 23, 0.78) 50%,
            rgba(53, 107, 27, 0.8) 100%);
    z-index: 2;
}

.hero-content {
    position: relative;
    z-index: 3;
    text-align: center;
    color: var(--color-white);
    padding: 0 20px;
    max-width: 800px;
}

.hero-title {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 1rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.hero-subtitle {
    font-size: 1.5rem;
    margin-bottom: 2rem;
    opacity: 0.95;
}

.hero-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.hero-image {
    position: absolute;
    top: 50%;
    right: 10%;
    transform: translateY(-50%);
    width: 40%;
    max-width: 500px;
    z-index: 2;
    opacity: 0.3;
}

/* ===== SECTION HEADERS ===== */
.section-header {
    text-align: center;
    margin-bottom: 3rem;
}

.section-title {
    font-size: 2.25rem;
    color: var(--color-primary);
    margin-bottom: 1rem;
    text-align: center;
}

.section-subtitle {
    font-size: 1.125rem;
    color: var(--color-medium-gray);
    max-width: 600px;
    margin: 0 auto;
}

/* ===== FEATURES SECTION ===== */
.features-section {
    background: var(--color-off-white);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.feature-card {
    background: var(--color-white);
    padding: 2.5rem 2rem;
    text-align: center;
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-normal);
}

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

.feature-icon {
    width: 80px;
    height: 80px;
    background: var(--color-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
}

.feature-icon svg {
    width: 40px;
    height: 40px;
    fill: var(--color-white);
}

.feature-title {
    font-size: 1.5rem;
    color: var(--color-primary);
    margin-bottom: 0.75rem;
}

.feature-text {
    color: var(--color-medium-gray);
    margin-bottom: 1.5rem;
}

/* ===== ABOUT SECTION ===== */
.about-section {
    background: var(--color-white);
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.about-image {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.about-image img {
    width: 100%;
    height: 400px;
    object-fit: cover;
}

.about-content {
    padding: 1rem 0;
}

.about-content h2 {
    color: var(--color-primary);
    margin-bottom: 1.5rem;
}

.about-content p {
    color: var(--color-medium-gray);
    margin-bottom: 1.5rem;
    font-size: 1.1rem;
}

/* Stats */
.stats-row {
    display: flex;
    justify-content: space-around;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--color-light-gray);
}

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

.stat-number {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-primary);
    display: block;
}

.stat-label {
    font-size: 0.875rem;
    color: var(--color-medium-gray);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ===== PRODUCTS SHOWCASE ===== */
.products-showcase {
    background: var(--color-light-gray);
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.product-card {
    background: var(--color-white);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-normal);
    text-align: center;
}

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

.product-image {
    height: 200px;
    overflow: hidden;
    background: var(--color-off-white);
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-normal);
}

.product-card:hover .product-image img {
    transform: scale(1.1);
}

.product-info {
    padding: 1.5rem;
}

.product-info h3 {
    font-size: 1.25rem;
    color: var(--color-primary);
    margin-bottom: 0.5rem;
}

.product-info p {
    font-size: 0.875rem;
    color: var(--color-medium-gray);
    margin-bottom: 1rem;
}

.product-link {
    color: var(--color-primary);
    font-weight: 600;
    font-size: 0.9rem;
}

/* ===== WHY CHOOSE US ===== */
.why-choose-section {
    background: var(--color-primary-dark);
    color: var(--color-white);
}

.why-choose-section .section-title {
    color: var(--color-white);
}

.why-choose-section .section-subtitle {
    color: rgba(255, 255, 255, 0.8);
}

.why-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

.why-card {
    background: rgba(255, 255, 255, 0.1);
    padding: 2rem;
    border-radius: 8px;
    text-align: center;
    transition: all var(--transition-normal);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.why-card:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-5px);
}

.why-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.why-title {
    font-size: 1.25rem;
    color: var(--color-accent);
    margin-bottom: 0.5rem;
}

.why-text {
    font-size: 0.9rem;
    opacity: 0.9;
}

/* ===== TRUST SECTION ===== */
.trust-section {
    background: var(--color-off-white);
}

.trust-logos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    flex-wrap: wrap;
    padding: 2rem 0;
}

.trust-logo {
    opacity: 0.6;
    transition: opacity var(--transition-fast);
    display: flex;
    align-items: center;
}

.trust-logo:hover {
    opacity: 1;
}

.trust-logo img {
    max-height: 50px;
}

.trust-text {
    text-align: center;
    color: var(--color-medium-gray);
    margin-bottom: 1.5rem;
}

/* ===== NEWS SECTION ===== */
.news-section {
    background: var(--color-light-gray);
}

.news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.news-card {
    background: var(--color-white);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-normal);
}

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

.news-image {
    height: 220px;
    overflow: hidden;
    background: var(--color-off-white);
}

.news-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-normal);
}

.news-card:hover .news-image img {
    transform: scale(1.05);
}

.news-content {
    padding: 1.5rem;
}

.news-category {
    display: inline-block;
    background: var(--color-primary);
    color: var(--color-white);
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 2px;
    margin-bottom: 0.75rem;
}

.news-title {
    font-size: 1.25rem;
    color: var(--color-black);
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

.news-title a {
    color: var(--color-black);
}

.news-title a:hover {
    color: var(--color-deep-green-light);
}

.news-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.875rem;
    color: var(--color-medium-gray);
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-light-gray);
}

.read-more {
    color: var(--color-primary);
    font-weight: 600;
}

.read-more:hover {
    color: var(--color-primary-dark);
}

/* ===== CTA SECTION ===== */
.cta-section {
    background: var(--color-primary);
    color: var(--color-white);
    text-align: center;
    padding: 4rem 2rem;
}

.cta-section h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: var(--color-white);
}

.cta-section p {
    font-size: 1.25rem;
    opacity: 0.9;
    margin-bottom: 2rem;
}

.cta-section .btn-outline {
    border-color: var(--color-white);
}

.cta-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* ===== PAGE HERO ===== */
.page-hero {
    background: linear-gradient(135deg,
            var(--color-primary) 0%,
            var(--color-primary-dark) 100%);
    color: var(--color-white);
    padding: 5rem 0;
    position: relative;
    overflow: hidden;
}

/* Desktop: pull inner-page heroes up behind the floating pill header */
@media (min-width: 769px) {
    .page-hero {
        margin-top: -92px;
        padding-top: 11rem;
    }

    /* Breadcrumb bar would collide with the overlapping header; Cargill-style keeps it clean */
    .breadcrumb {
        display: none;
    }
}

.page-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="20" r="2" fill="rgba(255,255,255,0.1)"/><circle cx="80" cy="80" r="3" fill="rgba(255,255,255,0.1)"/><circle cx="50" cy="50" r="2" fill="rgba(255,255,255,0.1)"/></svg>') repeat;
    opacity: 0.5;
}

.page-hero-content {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 0 20px;
}

.page-hero h1 {
    color: var(--color-white);
    font-size: 2.75rem;
    margin-bottom: 1rem;
}

.page-hero p {
    font-size: 1.25rem;
    opacity: 0.9;
    max-width: 600px;
    margin: 0 auto;
}

/* ===== BREADCRUMB ===== */
.breadcrumb,
breadcrumb {
    background: var(--breadcrumb-bg);
    padding: var(--breadcrumb-padding);
    border-bottom: 1px solid var(--color-light-gray);
}

.breadcrumb-inner {
    max-width: calc(var(--container-width) + 48px);
    margin: 0 auto;
    padding: 0 calc(var(--container-padding) + 24px);
}

.breadcrumb ol {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    list-style: none;
    font-size: 0.875rem;
}

.breadcrumb li {
    display: flex;
    align-items: center;
    color: var(--breadcrumb-color);
}

.breadcrumb li+li::before {
    content: '>';
    margin: 0 0.5rem;
    color: var(--color-medium-gray);
}

.breadcrumb a {
    color: var(--breadcrumb-color);
    transition: color var(--transition-fast);
}

.breadcrumb a:hover {
    color: var(--breadcrumb-active);
}

.breadcrumb-current {
    color: var(--color-dark-text);
    font-weight: 500;
}

/* ===== INNER PAGES ===== */
.inner-page {
    padding: var(--section-padding);
}

/* ===== CAREER PAGE ===== */
.alw-career-gallery,
.alw-career-apply {
    display: grid;
    gap: 1.5rem;
}

.alw-career-gallery {
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem 1.5rem;
}

.alw-career-apply {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: start;
}

@media (max-width: 768px) {

    .alw-career-gallery,
    .alw-career-apply {
        grid-template-columns: 1fr;
    }
}

/* ===== TWO COLUMN LAYOUT ===== */
.two-column {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 3rem;
    align-items: start;
}

/* ===== QUICK LINKS GRID ===== */
.quick-links-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 2rem;
}

.quick-link-card {
    background: var(--color-white);
    padding: 2rem;
    border-radius: 8px;
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-normal);
    border: 1px solid var(--color-light-gray);
}

.quick-link-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-primary);
}

.quick-link-icon {
    width: 60px;
    height: 60px;
    background: var(--color-light-gray);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    transition: all var(--transition-fast);
}

.quick-link-card:hover .quick-link-icon {
    background: var(--color-primary);
    color: var(--color-white);
}

.quick-link-icon svg {
    width: 24px;
    height: 24px;
    fill: var(--color-primary);
    transition: fill var(--transition-fast);
}

.quick-link-card:hover .quick-link-icon svg {
    fill: var(--color-white);
}

.quick-link-title {
    font-size: 1.125rem;
    color: var(--color-black);
    margin-bottom: 0.5rem;
}

.quick-link-text {
    font-size: 0.875rem;
    color: var(--color-medium-gray);
    margin-bottom: 1rem;
}

.quick-link-btn {
    color: var(--color-primary);
    font-weight: 600;
    font-size: 0.875rem;
}

/* ===== FAQ SECTION ===== */
.faq-section {
    background: var(--color-light-gray);
    padding: var(--section-padding);
}

.faq-list {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    background: var(--color-white);
    border-radius: 8px;
    margin-bottom: 1rem;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.faq-question {
    width: 100%;
    background: none;
    border: none;
    padding: 1.5rem;
    text-align: left;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-dark-text);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: inherit;
    transition: background var(--transition-fast);
}

.faq-question:hover {
    background: var(--color-light-gray);
}

.faq-icon {
    width: 24px;
    height: 24px;
    transition: transform var(--transition-fast);
}

.faq-item.active .faq-icon {
    transform: rotate(180deg);
}

.faqanswer {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-normal);
}

.faq-answer-inner {
    padding: 0 1.5rem 1.5rem;
    color: var(--color-medium-gray);
    line-height: 1.7;
}

/* ===== ARTICLES PAGE ===== */
.articles-page {
    background: var(--color-off-white);
}

.category-filters {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 2rem;
}

.category-filter {
    background: var(--color-white);
    padding: 0.5rem 1.25rem;
    border: 1px solid var(--color-light-gray);
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--color-dark-text);
    transition: all var(--transition-fast);
    font-family: inherit;
}

.category-filter:hover,
.category-filter.active {
    background: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
}

.articles-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

.article-card {
    background: var(--color-white);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-normal);
}

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

.article-image {
    height: 200px;
    overflow: hidden;
    background: var(--color-light-gray);
}

.article-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-normal);
}

.article-card:hover .article-image img {
    transform: scale(1.05);
}

.article-content {
    padding: 1.5rem;
}

.article-meta {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.article-meta span {
    background: var(--color-light-gray);
    color: var(--color-medium-gray);
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    border-radius: 3px;
}

.article-title {
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

.article-title a {
    color: var(--color-black);
}

.article-title a:hover {
    color: var(--color-deep-green-light);
}

.article-excerpt {
    color: var(--color-medium-gray);
    font-size: 0.9rem;
    margin-bottom: 1rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.article-link {
    color: var(--color-primary);
    font-weight: 600;
    font-size: 0.9rem;
}

/* Sidebar */
.sidebar {
    position: sticky;
    top: 100px;
}

.sidebar-widget {
    background: var(--color-white);
    padding: 1.5rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow-sm);
}

.sidebar-widget-title {
    font-size: 1.125rem;
    color: var(--color-primary);
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--color-primary);
}

.search-widget input[type="search"] {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--color-light-gray);
    border-radius: 4px;
    font-size: 0.9rem;
}

.category-list li {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--color-light-gray);
    display: flex;
    justify-content: space-between;
}

.category-list li:last-child {
    border-bottom: none;
}

.category-list a {
    color: var(--color-dark-text);
}

.category-list a:hover {
    color: var(--color-primary);
}

.category-count {
    background: var(--color-light-gray);
    padding: 0.125rem 0.5rem;
    border-radius: 10px;
    font-size: 0.75rem;
    color: var(--color-medium-gray);
}

.recent-post {
    display: flex;
    gap: 1rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--color-light-gray);
}

.recent-post:last-child {
    border-bottom: none;
}

.recent-post-img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 4px;
}

.recent-post-content h4 {
    font-size: 0.95rem;
    margin-bottom: 0.25rem;
}

.recent-post-content a {
    color: var(--color-dark-text);
}

.recent-post-content a:hover {
    color: var(--color-primary);
}

.recent-post-date {
    font-size: 0.75rem;
    color: var(--color-medium-gray);
}

/* ===== CONTACT PAGE (alw-*) ===== */
.alw-contact-section {
    padding: var(--section-padding);
}

.alw-contact-grid {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 2.5rem;
    align-items: stretch;
}

.alw-contact-form-card {
    background: var(--color-white);
    padding: 2.5rem;
    border-radius: 18px;
    box-shadow: var(--shadow-md);
}

.alw-contact-form-card h2 {
    color: var(--color-deep-green);
    margin-bottom: 0.5rem;
}

.alw-contact-form-note {
    color: var(--color-medium-gray);
    margin-bottom: 1.5rem;
}

.alw-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

.alw-form-field {
    display: flex;
    flex-direction: column;
}

.alw-form-field-full {
    grid-column: 1 / -1;
}

.alw-form-field label,
.alw-contact-form-card .wpcf7 label {
    display: block;
    font-weight: 600;
    font-size: 0.9375rem;
    margin-bottom: 0.5rem;
    color: var(--color-dark-text);
}

.alw-required {
    color: var(--color-danger);
}

.alw-form-control,
.alw-contact-form-card .wpcf7 input[type="text"],
.alw-contact-form-card .wpcf7 input[type="email"],
.alw-contact-form-card .wpcf7 input[type="tel"],
.alw-contact-form-card .wpcf7 select,
.alw-contact-form-card .wpcf7 textarea {
    width: 100%;
    padding: 0.8125rem 1rem;
    border: 1px solid var(--color-light-gray);
    border-radius: 10px;
    background: var(--color-off-white);
    color: var(--color-dark-text);
    font-size: 1rem;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}

.alw-form-control::placeholder {
    color: var(--color-medium-gray);
    opacity: 0.8;
}

.alw-form-control:focus,
.alw-contact-form-card .wpcf7 input:focus,
.alw-contact-form-card .wpcf7 select:focus,
.alw-contact-form-card .wpcf7 textarea:focus {
    outline: none;
    border-color: var(--color-deep-green);
    background: var(--color-white);
    box-shadow: 0 0 0 3px rgba(63, 125, 32, 0.15);
}

.alw-contact-form-card select {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235C5C5C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.5rem;
}

textarea.alw-form-control,
.alw-contact-form-card .wpcf7 textarea {
    min-height: 140px;
    resize: vertical;
}

.alw-form-submit {
    margin-top: 1.5rem;
}

.alw-contact-form-card .wpcf7 .wpcf7-submit {
    display: inline-block;
    padding: 12px 28px;
    font-size: 1rem;
    font-weight: 600;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: var(--color-accent);
    color: var(--color-charcoal);
    transition: all var(--transition-normal);
}

.alw-contact-form-card .wpcf7 .wpcf7-submit:hover {
    background: var(--color-charcoal);
    color: var(--color-accent);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* CF7 validation + status messaging */
.alw-contact-form-card .wpcf7 .wpcf7-not-valid-tip {
    font-size: 0.8125rem;
    color: var(--color-danger);
    margin-top: 0.35rem;
}

.alw-contact-form-card .wpcf7 .wpcf7-not-valid {
    border-color: var(--color-danger);
}

.alw-contact-form-card .wpcf7 .wpcf7-response-output {
    margin: 1.25rem 0 0;
    padding: 0.875rem 1.25rem;
    border-radius: 10px;
    border: 1px solid var(--color-light-gray);
    font-size: 0.9375rem;
}

/* Direct contact panel */
.alw-contact-info {
    background: linear-gradient(160deg, var(--color-deep-green) 0%, var(--color-deep-green-dark) 100%);
    color: var(--color-white);
    padding: 2.5rem;
    border-radius: 18px;
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.alw-contact-info h3 {
    color: var(--color-white);
    margin-bottom: 0.25rem;
}

.alw-contact-info-lead {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.9375rem;
    margin-bottom: 0;
}

.alw-contact-channels {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.alw-contact-channel {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    color: var(--color-white);
    transition: background var(--transition-fast), transform var(--transition-fast);
}

.alw-contact-channel:hover {
    background: rgba(255, 255, 255, 0.16);
    color: var(--color-white);
    transform: translateY(-2px);
}

.alw-contact-channel:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.alw-contact-channel-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: var(--color-accent);
    color: var(--color-charcoal);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.alw-contact-channel-icon svg {
    width: 20px;
    height: 20px;
}

.alw-contact-channel-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.alw-contact-channel-label {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.75);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.alw-contact-channel-value {
    font-weight: 600;
    word-break: break-word;
}

.alw-contact-quickfacts {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding-top: 1.5rem;
}

.alw-contact-quickfact {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 0.9375rem;
}

.alw-contact-quickfact-icon {
    width: 20px;
    height: 20px;
    color: var(--color-accent);
    flex-shrink: 0;
    margin-top: 2px;
}

.alw-contact-quickfact-icon svg {
    width: 100%;
    height: 100%;
}

.alw-contact-quickfact strong {
    display: block;
    color: var(--color-wheat-cream);
}

.alw-contact-quickfact span:last-child {
    color: rgba(255, 255, 255, 0.85);
}

.alw-contact-media {
    margin: 0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    margin-top: auto;
}

.alw-contact-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ===== MAP SECTION ===== */
.map-section {
    background: var(--color-light-gray);
    padding: var(--section-padding);
}

.map-container {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
    height: 400px;
    background: var(--color-off-white);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-medium-gray);
}

/* ===== SCROLL ANIMATIONS ===== */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .products-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .why-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .about-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .two-column {
        grid-template-columns: 1fr;
    }

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

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

    .alw-contact-form-card,
    .alw-contact-info {
        padding: 1.75rem;
    }

    .alw-form-grid {
        grid-template-columns: 1fr;
    }

    .articles-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    :root {
        --header-height: 60px;
        --section-padding: 50px 0;
    }

    /* Mobile header: full-width bar with rounded bottom corners (Cargill mobile).
       Overlay pattern: the hero slider / page hero slide up behind the bar so the
       menu floats over the body instead of pushing it down. */
    .site-header {
        padding: 0;
    }

    .alw-hero-slider {
        margin-top: calc(-1 * var(--header-height));
    }

    .page-hero {
        margin-top: calc(-1 * var(--header-height));
        padding-top: calc(5rem + var(--header-height));
    }

    /* Cargill keeps breadcrumbs off overlaid heroes; avoids collision with the
       pulled-up page hero */
    .breadcrumb {
        display: none;
    }

    .header-container {
        max-width: none;
        height: var(--header-height);
        border-radius: 0 0 16px 16px;
        padding: 0 16px;
    }

    /* Mobile header loses its outer inset; match it */
    .container,
    .breadcrumb-inner {
        padding: 0 16px;
    }

    .menu-toggle {
        display: block;
    }

    .logo-img {
        max-height: 52px;
    }

    .main-nav {
        display: none;
        position: fixed;
        top: var(--header-height);
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--color-white);
        flex-direction: column;
        align-items: stretch;
        padding: 2rem;
        overflow-y: auto;
        z-index: 999;
    }

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

    .nav-menu {
        flex-direction: column;
        gap: 1rem;
        width: 100%;
    }

    .nav-menu>li>a {
        padding: 1rem 0;
        border-bottom: 1px solid var(--color-light-gray);
    }

    .dropdown {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: 1px solid var(--color-light-gray);
        margin-top: 0.5rem;
        padding: 1rem;
    }

    .header-right {
        display: none;
    }

    .header-right.mobile-show {
        display: flex;
        position: absolute;
        top: var(--header-height);
        right: 0;
        background: var(--color-white);
        padding: 1rem 20px;
        box-shadow: var(--shadow-md);
        flex-direction: column;
        gap: 0.75rem;
    }

    /* On mobile, show only search icon in header */
    .header-right .request-quote-btn-mobile {
        display: flex;
        align-items: center;
        background: var(--color-accent);
        color: var(--color-black);
        padding: 10px 20px;
        font-weight: 600;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-size: 0.9rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        transition: all var(--transition-normal);
        text-decoration: none;
    }

    .header-right .request-quote-btn-mobile:hover {
        background: var(--color-charcoal);
        color: var(--color-accent);
        transform: translateY(-2px);
    }

    .hero-title {
        font-size: 2rem;
    }

    .hero-subtitle {
        font-size: 1.125rem;
    }

    .hero-image {
        display: none;
    }

    .section-title {
        font-size: 1.75rem;
    }

    .features-grid {
        grid-template-columns: 1fr;
    }

    .products-grid {
        grid-template-columns: 1fr;
    }

    .why-grid {
        grid-template-columns: 1fr;
    }

    .news-grid {
        grid-template-columns: 1fr;
    }

    .stats-row {
        padding: 0;
    }

    .trust-logos {
        gap: 1.5rem;
    }

    .quick-links-grid {
        grid-template-columns: 1fr;
    }

    .articles-grid {
        grid-template-columns: 1fr;
    }

    .page-hero h1 {
        font-size: 2rem;
    }

    .cta-section h2 {
        font-size: 1.75rem;
    }

    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }

    .sidebar {
        position: static;
    }

    .map-container {
        height: 250px;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 1.75rem;
    }

    .section-title {
        font-size: 1.5rem;
    }

    h1 {
        font-size: 1.75rem;
    }

    h2 {
        font-size: 1.5rem;
    }

    .search-overlay-inner {
        padding: 0 15px;
    }
}

/* ==========================================================
   CARGILL-MATCHED HOMEPAGE (front-page.php)
   ========================================================== */

/* ===== Cargill-style buttons (used on homepage + footer) ===== */
.alw-hero-intro .button-secondary,
.alw-feature-section .button-primary,
.alw-purpose-section .button-primary,
.alw-pillars-section .button-primary,
.alw-news-section .button-primary {
    display: inline-block;
}

.alw-hero-intro .button-secondary a,
.alw-hero-intro .button-primary a,
.alw-feature-section .button-primary a,
.alw-purpose-section .button-primary a,
.alw-pillars-section .button-primary a,
.alw-news-section .button-primary a,
.alw-intro-section .button-primary a,
.alw-products-section .button-primary a,
.alw-why-section .button-primary a,
.alw-markets-section .button-primary a,
.alw-quality-section .button-primary a,
.alw-faq-section .button-primary a,
.alw-about-supply-section .button-primary a,
.alw-about-buyers-section .button-primary a {
    display: inline-block;
    padding: 12px 28px;
    border-radius: 4px;
    font-family: var(--font-primary);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-align: center;
    transition: all var(--transition-normal);
}

.alw-feature-section .button-primary a,
.alw-purpose-section .button-primary a,
.alw-pillars-section .button-primary a,
.alw-news-section .button-primary a,
.alw-intro-section .button-primary a,
.alw-products-section .button-primary a,
.alw-why-section .button-primary a,
.alw-quality-section .button-primary a,
.alw-faq-section .button-primary a,
.alw-about-supply-section .button-primary a,
.alw-about-buyers-section .button-primary a {
    background: var(--color-accent);
    color: var(--color-charcoal);
}

.alw-feature-section .button-primary a:hover,
.alw-purpose-section .button-primary a:hover,
.alw-pillars-section .button-primary a:hover,
.alw-news-section .button-primary a:hover,
.alw-intro-section .button-primary a:hover,
.alw-products-section .button-primary a:hover,
.alw-why-section .button-primary a:hover,
.alw-quality-section .button-primary a:hover,
.alw-faq-section .button-primary a:hover,
.alw-about-supply-section .button-primary a:hover,
.alw-about-buyers-section .button-primary a:hover {
    background: var(--color-charcoal);
    color: var(--color-accent);
}

.alw-hero-intro .button-primary a {
    background: var(--color-accent);
    color: var(--color-charcoal);
}

.alw-hero-intro .button-primary a:hover {
    background: var(--color-white);
    color: var(--color-primary);
}

/* "Watch the video" secondary button: white pill, charcoal text, Alwaseer orange
   action border. Hover inverts to the primary action state (charcoal + orange),
   matching the .btn-primary / .button-primary hover language. */
.alw-hero-intro .button-secondary a {
    background: var(--color-white);
    border: 2px solid var(--color-accent);
    border-radius: 8px;
    padding: 8px 24px;
    color: var(--color-charcoal);
}

.alw-hero-intro .button-secondary a:hover {
    background: var(--color-charcoal);
    border-color: var(--color-charcoal);
    color: var(--color-accent);
}

/* ===== HERO SLIDER ===== */
.alw-hero-slider {
    position: relative;
    width: 100%;
    height: 62vh;
    min-height: 420px;
    max-height: 640px;
    overflow: hidden;
    background: var(--color-primary-dark);
}

/* Desktop: slide the hero up behind the floating pill header (Cargill pattern) */
@media (min-width: 769px) {
    .alw-hero-slider {
        margin-top: -92px;
        /* Cargill's slider measures ~738px at 1440w (51.25vw) */
        height: 51.25vw;
        min-height: 480px;
        max-height: 740px;
    }
}

.alw-hero-track,
.alw-hero-slide {
    position: absolute;
    inset: 0;
}

.alw-hero-slide {
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1s ease;
}

.alw-hero-slide.active {
    opacity: 1;
    z-index: 1;
}

/* Background-coloured triangle on the slider view (not on the slide images):
   right-hand side from 76% y, bottom from 50% x, down to the 100%/100% corner */
.alw-hero-corner {
    position: absolute;
    inset: 0;
    background: var(--color-page-bg);
    clip-path: polygon(100% 75%, 60% 100%, 100% 100%);
    pointer-events: none;
    z-index: 2;
    margin-bottom: -0.1rem;
}

/* Cargill-style swoosh COMBO, replicated 1:1 from cargill.com's .homepage .hero-content:
   - section background = pale sage #DFE8D3 wave (0.7 opacity), intrinsic 2157x940, centered
   - ::before = solid deep green #3F7D20 wave, intrinsic 2200x991, centered, on top
   - no background color anywhere; the waves overlap the slider via a large negative margin
   - text sits white on the solid green (desktop); dark on pale green (mobile) */
.alw-hero-intro {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='2157' height='940' viewBox='0 0 2157 940' fill='none'><path opacity='0.7' d='M768.27 939.827C727.562 935.274 686.625 932.183 646.189 925.958C323.264 876.311 47.3345 742.158 -150.689 473.685C-245.952 344.523 -295.62 198.152 -295.286 36.303C-295.286 28.9301 -295.348 21.5573 -295.39 12.9103C-289.73 11.6572 -285.594 10.1743 -281.396 9.90271C-103.11 -2.35759 74.1947 -3.61081 247.572 50.297C400.544 97.8762 542.843 168.242 680.275 249.302C800.623 320.295 917.461 397.366 1045.06 455.597C1118.64 489.182 1193.12 519.927 1273.36 533.503C1374.58 550.651 1471.08 530.955 1565.15 494.154C1696.48 442.773 1800.68 355.217 1885.02 244.791C1940.27 172.461 1988.68 94.8269 2038.79 18.696C2047.79 5.01546 2056.19 -0.686502 2072.33 0.0653918C2099.15 1.29769 2126.07 0.190702 2156.9 0.0653992C2151.89 11.0099 2148.27 19.6359 2144.08 27.9487C2008.15 297.049 1824.24 525.713 1574.32 697.462C1388.89 824.889 1184.62 904.425 960.257 929.927C935.152 932.788 910.109 936.151 885.045 939.284C846.134 939.472 807.202 939.639 768.291 939.827' fill='%23DFE8D3'/></svg>");
    background-repeat: no-repeat;
    background-position: center 50px;
    background-size: auto;
}

.alw-hero-intro::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='2200' height='991' viewBox='0 0 2200 991' fill='none'><path d='M857.141 991C816.288 987.972 775.267 986.384 734.622 981.664C410.089 943.985 129.377 820.129 -78.4218 559.132C-178.384 433.584 -233.441 289.134 -239.08 127.39C-239.33 120.017 -239.685 112.644 -240.041 104.018C-234.422 102.556 -230.349 100.927 -226.172 100.488C-48.4706 81.6489 128.687 73.8374 303.924 121.312C458.546 163.189 603.372 228.271 743.687 304.193C866.561 370.675 986.178 443.401 1115.84 496.87C1190.61 527.719 1266.18 555.686 1346.86 566.297C1448.64 579.685 1544.35 556.438 1637 516.19C1766.35 459.985 1867.23 368.649 1947.45 255.173C2000 180.859 2045.49 101.491 2092.78 23.5641C2101.28 9.54931 2109.45 3.55492 2125.61 3.7011C2152.45 3.95178 2179.33 1.84228 2210.12 0.547302C2205.5 11.6797 2202.22 20.4102 2198.32 28.8901C2072.42 302.836 1897.1 538.142 1653.69 718.997C1473.1 853.213 1271.92 940.246 1048.63 974.02C1023.65 977.8 998.751 982.082 973.813 986.134C934.922 987.742 896.032 989.371 857.162 991' fill='%233F7D20'/></svg>");
    background-repeat: no-repeat;
    background-position: center 50px;
    background-size: auto;
    z-index: 0;
    pointer-events: none;
}

/* Keep the text above the swoosh layers */
.alw-hero-intro .container {
    position: relative;
    z-index: 1;
}

/* ===== HERO INTRO (dark green band + promo cards) ===== */
/* Pulled up over the slider exactly like Cargill: -700px margin / 460px top padding.
   At a 1440px viewport this puts the H1 ~2/3 down the slider and the paragraph
   right at the slider's bottom edge — all on the solid green wave. */
.alw-hero-intro {
    color: var(--color-white);
    padding: 460px 0 8px;
    margin-top: -700px;
    position: relative;
    z-index: 2;
}

.alw-hero-intro-inner {
    max-width: 1280px;
    margin: 0 auto;
}

.alw-hero-heading {
    font-family: var(--font-heading);
    font-size: 4.05rem;
    font-weight: 400;
    line-height: 1.05;
    color: var(--color-white);
    margin-bottom: 1rem;
    margin-top: 4rem;
    max-width: 50%;
    padding-left: 0;
}

.alw-hero-heading em {
    font-style: italic;
}

.alw-hero-text {
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--color-white);
    margin-bottom: 2rem;
    max-width: 60%;
}

.alw-hero-actions {
    margin-bottom: 3rem;
    max-width: 75%;
}

/* Promo cards */
.alw-promo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.alw-promo-card {
    background: var(--color-white);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

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

.alw-promo-image {
    height: 280px;
    background-size: cover;
    background-position: center;
}

.alw-promo-content {
    padding: 1.25rem 1.5rem 1.5rem;
    max-width: 75%;
}

.alw-promo-label {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: var(--color-medium-gray);
    margin-bottom: 0.5rem;
}

.alw-promo-title {
    margin-bottom: 0;
}

.alw-promo-title a {
    font-family: var(--font-primary);
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--color-dark-text);
}

.alw-promo-title a:hover {
    color: var(--color-deep-green-light);
}

/* ===== FEATURE ROWS (50/50 alternating) ===== */
.alw-feature-section {
    padding: 0 0 40px;
}

.alw-feature-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    margin-bottom: 72px;
}

.alw-feature-text h2 {
    color: var(--color-primary);
    margin-bottom: 0.5rem;
}

.alw-feature-text h4 {
    font-family: var(--font-primary);
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--color-black);
    margin-bottom: 1.25rem;
}

.alw-feature-text h4 em {
    font-style: italic;
}

.alw-feature-text p {
    color: var(--color-medium-gray);
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 1rem;
}

.alw-feature-media {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.alw-feature-media img {
    width: 100%;
    height: 420px;
    object-fit: cover;
    display: block;
}

/* ===== OUR PURPOSE (66/33) ===== */
.alw-purpose-section {
    padding: 40px 0 72px;
}

.alw-purpose-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 4rem;
    align-items: center;
}

.alw-purpose-text h2 {
    color: var(--color-primary);
    margin-bottom: 0.5rem;
}

.alw-purpose-text h4 {
    font-family: var(--font-primary);
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--color-black);
    margin-bottom: 1.25rem;
}

.alw-purpose-text p {
    color: var(--color-medium-gray);
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 1rem;
}

.alw-purpose-text ul {
    margin: 0 0 1.25rem 1.25rem;
    list-style: disc;
    color: var(--color-medium-gray);
}

.alw-purpose-text ul li {
    margin-bottom: 0.5rem;
    line-height: 1.6;
}

.alw-purpose-media img {
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
    display: block;
    border-radius: 8px;
}

/* ===== VIDEO SECTION ===== */
.alw-video-section {
    padding: 24px 0 72px;
}

.alw-video-wrapper {
    position: relative;
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    padding-top: 56.25%;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.alw-video-wrapper iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ===== PILLARS: PEOPLE / PRODUCTS / PLANET ===== */
.alw-pillars-section {
    padding: 8px 0 72px;
}

.alw-pillars-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.alw-pillar-card {
    background: var(--color-white);
    border: 1px solid var(--color-light-gray);
    border-radius: 8px;
    padding: 2.5rem 2rem;
    text-align: center;
    transition: box-shadow var(--transition-normal), transform var(--transition-normal);
}

.alw-pillar-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
}

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

.alw-pillar-card p {
    color: var(--color-medium-gray);
    font-size: 0.95rem;
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

/* ===== NEWS SECTION (intro + stacked cards) ===== */
.alw-news-section {
    padding: 0 0 80px;
}

.alw-news-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
}

.alw-news-intro h2 {
    color: var(--color-primary);
    margin-bottom: 1rem;
}

.alw-news-intro p {
    color: var(--color-medium-gray);
    line-height: 1.7;
    margin-bottom: 1.75rem;
}

.alw-news-list {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.alw-news-card {
    background: var(--color-white);
    border: 1px solid var(--color-light-gray);
    border-radius: 8px;
    padding: 1.5rem 1.75rem;
    transition: box-shadow var(--transition-normal);
}

.alw-news-card:hover {
    box-shadow: var(--shadow-md);
}

.alw-news-card h3 {
    margin-bottom: 0.5rem;
}

.alw-news-card h3 a {
    font-family: var(--font-primary);
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.45;
    color: var(--color-dark-text);
}

.alw-news-card h3 a:hover {
    color: var(--color-deep-green-light);
}

.alw-news-source {
    font-size: 0.85rem;
    color: var(--color-medium-gray);
    margin-bottom: 0;
}

/* Main content sheet: rounded bottom corners let the dark footer show through
   behind them (Cargill-style). The sheet sits above the footer (z-index 1) and
   its negative bottom margin slides the footer's dark background up underneath
   the corners.
   overflow-y must stay visible: .alw-hero-slider / .page-hero pull themselves
   up with a negative margin so the floating pill header overlays them (Cargill).
   overflow: hidden clipped that overlap to the sheet, pushing the slider back
   below the menu bar. overflow-x stays clipped so full-bleed decorative bands
   (mobile hero H1 wave) can't add a horizontal scrollbar. */
.site-content {
    position: relative;
    z-index: 1;
    background: var(--color-page-bg);
    border-radius: 0 0 32px 32px;
    margin-bottom: -32px;
    overflow-x: clip;
}

/* The homepage hero-intro band keeps its own stacking context inside the sheet */
.alw-hero-slider {
    position: relative;
    z-index: 0;
}

/* ===== FOOTER — unified dark card: brand+social, quick links, contact ===== */
.site-footer {
    margin: auto 0 0;
    background: var(--color-charcoal);
    color: var(--color-white);
    padding: 4.5rem 0 1.5rem;
    overflow: hidden;
}

/* Footer spacing is intentionally independent from the body .container:
   own max-width + own side padding, decoupled from --container-* variables. */
.site-footer .footer-inner {
    max-width: 1360px;
    margin: 0 2%;
    padding: 0;
}

/* One unified grid: brand + social | quick links | contact */
.footer-top {
    display: grid;
    grid-template-columns: 1.4fr 1.2fr 1.1fr;
    gap: 4rem 3rem;
    align-items: start;
    padding-bottom: 2rem;
}

.footer-brand-name {
    font-family: var(--font-heading);
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--color-white);
    margin-bottom: 0.5rem;
}

.footer-brand-tagline {
    color: rgba(255, 255, 255, 0.72);
    font-size: 1rem;
    margin-bottom: 1.5rem;
    max-width: 34ch;
}

.footer-social-row {
    display: flex;
    gap: 0.75rem;
}

.footer-social-row a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: var(--color-white);
    transition: transform var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.footer-social-row a:hover {
    transform: translateY(-2px);
    background: var(--color-brand-orange);
    border-color: var(--color-brand-orange);
    color: var(--color-charcoal);
}

.footer-social-row svg {
    width: 17px;
    height: 17px;
    fill: currentColor;
}

.footer-heading {
    font-family: var(--font-heading);
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 1.25rem;
    position: relative;
    padding-bottom: 0.6rem;
}

.footer-heading::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 36px;
    height: 2px;
    background: var(--color-brand-orange);
    border-radius: 2px;
}

.footer-links-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 170px));
    gap: 0.65rem 2.5rem;
}

.footer-links-col {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.footer-links-col a {
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.95rem;
    transition: color var(--transition-fast), padding-left var(--transition-fast);
}

.footer-links-col a:hover {
    color: var(--color-white);
    padding-left: 4px;
}

.footer-contact {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.footer-contact-item {
    margin-bottom: 0;
    font-size: 0.95rem;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.footer-contact-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
}

.footer-contact-icon svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: var(--color-brand-orange);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.footer-contact-body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding-top: 0.1rem;
}

.footer-contact-label {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.footer-contact-item a {
    color: var(--color-white);
    transition: color var(--transition-fast);
}

.footer-contact-item a:hover {
    color: var(--color-brand-orange);
}

/* Full-bleed divider between the footer content and the copyright bar */
.footer-divider {
    border: 0;
    margin: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-bottom {
    padding: 1.25rem 24px 0;
    display: flex;
    justify-content: center;
    text-align: center;
}

.footer-copyright {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.65);
    margin-bottom: 0;
}

.footer-copyright strong {
    font-weight: 400;
}

@media (max-width: 1024px) {
    .footer-top {
        grid-template-columns: 1fr 1fr;
        gap: 3rem;
    }

    .footer-contact {
        grid-column: 1 / -1;
    }
}

@media (max-width: 768px) {
    .site-footer {
        margin: auto 0 0;
        border-radius: 0;
        padding: 2.5rem 0 1rem;
    }

    .site-footer .footer-inner {
        padding: 0 24px;
    }

    .footer-top {
        grid-template-columns: 1fr;
        gap: 1.75rem;
        padding-bottom: 1.25rem;
    }

    .footer-heading {
        margin-bottom: 1rem;
    }

    .footer-links-col {
        gap: 0.15rem;
    }

    .footer-links-col a {
        display: block;
        padding: 0.4rem 0;
    }

    .footer-contact {
        gap: 0.55rem;
    }

    .footer-contact-item a {
        display: inline-block;
        padding: 0.35rem 0;
    }

    .footer-social-row a {
        width: 40px;
        height: 40px;
    }

    .footer-bottom {
        padding-top: 1rem;
    }

    .footer-links-col a,
    .footer-copyright {
        font-size: 1rem;
    }
}

/* ===== RESPONSIVE (Cargill homepage) ===== */
@media (max-width: 1024px) {
    .alw-promo-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .alw-feature-row {
        gap: 2.5rem;
    }

    .alw-purpose-grid {
        gap: 2.5rem;
    }

    .alw-news-grid {
        gap: 2.5rem;
    }
}

@media (max-width: 768px) {
    .alw-hero-slider {
        height: 40vh;
        min-height: 360px;
    }

    .alw-hero-heading {
        font-size: 2.4rem;
        line-height: 1.1;
        margin-top: -190px;
        max-width: 100%;
        /* The band (:before/:after) is sized to this box, so bottom padding decides how far
           green runs past the text. It must clear the slider's bottom edge — no raw photo
           strip between band and copy. Desktop matches this with 16px (h1 margin-bottom);
           phones keep more so the band still covers the copy pulled up into it below. */
        padding: calc(80px + 5vw) 0 150px;
        position: relative;
    }

    .alw-promo-grid,
    .alw-pillars-grid {
        grid-template-columns: 1fr;
    }

    .alw-feature-row,
    .alw-purpose-grid,
    .alw-news-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .alw-feature-row.reverse .alw-feature-media {
        order: -1;
    }

    .alw-feature-media img {
        height: 280px;
    }

    /* Mobile (Cargill <=765px): section keeps the pale wave; the solid green band
       moves onto the H1 via pseudo-elements (Cargill's h1:before / h1:after pattern),
       so the white H1 sits on solid green and the paragraph below on pale green */
    .alw-hero-intro {
        /* Bottom padding is the spacer between the CTAs and the next section.
           Phones ran 40 + 56 + 24 = 120px there; 16 + 8 + 24 = 48px now. */
        padding: 270px 0 8px;
        margin-top: -338px;
    }

    .alw-hero-intro {
        background-position: calc(50% + 40px) -10px;
    }

    .alw-hero-intro::before {
        display: none;
    }

    .alw-hero-heading::before,
    .alw-hero-heading::after {
        content: " ";
        width: calc(100% + 50px);
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        margin-left: -25px;
        background-repeat: no-repeat;
        background-position: center -30vw;
        background-size: 200%;
        pointer-events: none;
    }

    /* solid leaf-green band behind the white H1 */
    .alw-hero-heading::before {
        z-index: -1;
        background-image: url("data:image/svg+xml,<svg width='873' height='474' viewBox='0 0 873 474' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M422.885 409.081C409.137 410.468 395.418 412.343 381.64 413.156C271.631 419.648 171.13 394.948 86.8169 320.422C46.2581 284.573 19.5089 239.814 8.16198 186.417C7.64688 183.983 7.09712 181.554 6.47393 178.71C8.25461 177.895 9.51211 177.115 10.874 176.725C68.7989 160.059 127.189 147.087 188.18 152.593C241.994 157.447 293.914 170.584 344.97 187.585C389.681 202.471 433.674 219.623 479.877 229.79C506.522 235.658 533.261 240.521 560.684 239.32C595.277 237.806 625.705 224.479 654.125 205.682C693.8 179.436 721.96 143.187 741.963 100.794C755.066 73.0311 765.528 44.0023 776.671 15.3471C778.674 10.1938 781.036 7.72424 786.415 6.82593C795.344 5.33717 804.15 3.062 814.301 0.828621C813.42 4.79693 812.842 7.88905 812.041 10.9346C786.264 109.308 741.809 197.74 671.547 272.073C619.423 327.233 557.694 367.927 485.498 392.225C477.421 394.944 469.402 397.824 461.356 400.631C448.531 403.443 435.708 406.262 422.892 409.08' fill='%233F7D20'/></svg>");
    }

    /* pale green edge peeking above/behind it */
    .alw-hero-heading::after {
        z-index: -2;
        background-image: url("data:image/svg+xml,<svg width='870' height='456' viewBox='0 0 870 456' fill='none' xmlns='http://www.w3.org/2000/svg'><path opacity='0.7' d='M408.371 393.641C394.582 394.513 380.803 395.884 367.006 396.185C256.83 398.607 157.315 370.206 75.8109 292.624C36.6016 255.299 11.5298 209.587 2.16109 155.805C1.72925 153.356 1.27665 150.911 0.756302 148.041C2.56309 147.293 3.84992 146.558 5.22855 146.222C63.733 131.707 122.556 120.906 183.306 128.657C236.906 135.502 288.296 150.542 338.696 169.418C382.831 185.952 426.156 204.709 471.951 216.579C498.361 223.425 524.902 229.276 552.353 229.085C586.979 228.853 617.879 216.658 646.972 198.924C687.588 174.164 717.074 138.977 738.621 97.3555C752.736 70.0935 764.271 41.4693 776.456 13.2456C778.645 8.17394 781.1 5.78809 786.507 5.09221C795.488 3.93076 804.366 1.98615 814.599 0.138852C813.575 4.06796 812.88 7.14497 811.972 10.1522C782.582 107.503 734.886 194.231 661.926 265.921C607.794 319.111 544.599 357.495 471.565 379.107C463.393 381.528 455.272 384.112 447.129 386.621C434.215 388.962 421.292 391.298 408.378 393.64' fill='%23DFE8D3'/></svg>");
    }

    /* Desktop sets the sub-line 16px under the heading, on the green band. Phones pulled it
       out under the band entirely, leaving ~120px of empty green in between (and the copy
       landed on the photo). Pull it back up onto the band by exactly the amount the heading
       gained in padding, so the gap lands on desktop's 16px at every width. */
    .alw-hero-text {
        margin-top: -150px;
        color: var(--color-white);
    }

    /* Stacked CTAs were flush (0px) because the wrapper is a plain block and the
       buttons are inline spans — flex column gives a real 0.75rem gap, matching the
       row gap already used by .alw-product-card-actions. */
    .alw-hero-actions {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
        margin-bottom: 1rem;
    }

}

@media (max-width: 480px) {
    .alw-hero-heading {
        font-size: 1.75rem;
    }

    .alw-hero-text {
        font-size: 1rem;
    }
}

/* Narrow phones (iPhone SE / 320-390 class): trim the slider another 10% on top of
   the 768px rule (40vh -> 36vh, floor 360px -> 324px). The hero band hangs off the
   slider's bottom edge, so the curve, the copy and the CTA gaps are unchanged — only
   the photo area above the band shrinks, which is what looked oversized on small screens. */
@media (max-width: 400px) {
    .alw-hero-slider {
        height: 24vh;
        min-height: 220px;
    }
}

/* ==========================================================
   HOMEPAGE — content sections (Home Page.docx)
   ========================================================== */

/* ===== SHORT INTRODUCTION ===== */
.alw-intro-section {
    padding: 24px 0 72px;
}

.alw-intro-grid {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 4rem;
    align-items: center;
}

.alw-intro-text h2 {
    color: var(--color-primary);
    margin-bottom: 1.25rem;
}

.alw-intro-text p {
    color: var(--color-medium-gray);
    line-height: 1.7;
    margin-bottom: 1rem;
}

.alw-intro-products {
    margin: 0 0 1.25rem 1.5rem;
    list-style: disc;
    color: var(--color-medium-gray);
}

.alw-intro-products li {
    font-weight: 600;
    color: var(--color-dark-text);
    margin-bottom: 0.35rem;
}

.alw-intro-media img {
    width: 100%;
    height: 420px;
    object-fit: cover;
    display: block;
    border-radius: 8px;
    box-shadow: var(--shadow-md);
}

/* ===== OUR PRODUCTS (two cards) ===== */
.alw-products-section {
    padding: 0 0 72px;
}

.alw-home-products-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

.alw-home-product-card {
    background: var(--color-white);
    border: 1px solid var(--color-light-gray);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition-normal), transform var(--transition-normal);
}

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

.alw-home-product-image {
    height: 300px;
    background-size: cover;
    background-position: center;
}

.alw-home-product-content {
    padding: 1.75rem;
}

.alw-home-product-content h3 {
    color: var(--color-primary);
    margin-bottom: 0.75rem;
}

.alw-home-product-content p {
    color: var(--color-medium-gray);
    font-size: 0.95rem;
    line-height: 1.7;
    margin-bottom: 0.75rem;
}

.alw-product-suitable {
    border-top: 1px solid var(--color-light-gray);
    padding-top: 0.85rem;
    margin-top: 1rem;
    margin-bottom: 1.25rem !important;
}

.alw-product-suitable strong {
    color: var(--color-dark-text);
}

/* ===== WHY CHOOSE ===== */
.alw-why-section {
    background: var(--color-wheat-cream);
    padding: 18px;
}

.alw-why-lead {
    max-width: 720px;
    margin: 0 auto 2.5rem;
    text-align: center;
    color: var(--color-medium-gray);
    line-height: 1.7;
}

.alw-why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.alw-why-card {
    background: var(--color-white);
    border: 1px solid var(--color-light-gray);
    border-radius: 8px;
    padding: 1.75rem;
    transition: box-shadow var(--transition-normal), transform var(--transition-normal);
}

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

.alw-why-card h3 {
    color: var(--color-primary);
    font-size: 1.15rem;
    margin-bottom: 0.5rem;
}

.alw-why-card p {
    color: var(--color-medium-gray);
    font-size: 0.95rem;
    line-height: 1.65;
    margin-bottom: 0;
}

/* ===== INTERNATIONAL B2B MARKETS ===== */
.alw-markets-section {
    padding: 72px 0;
}

.alw-markets-grid {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 4rem;
    align-items: center;
}

.alw-markets-text h2 {
    color: var(--color-primary);
    margin-bottom: 1rem;
}

.alw-markets-text p {
    color: var(--color-medium-gray);
    line-height: 1.7;
    margin-bottom: 1rem;
}

.alw-markets-list-label {
    font-weight: 600;
    color: var(--color-dark-text) !important;
    margin-bottom: 0.5rem !important;
}

.alw-markets-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.alw-markets-list li {
    background: var(--color-white);
    border: 1px solid var(--color-light-gray);
    border-radius: 999px;
    padding: 0.45rem 1.1rem;
    font-size: 0.9rem;
    color: var(--color-dark-text);
}

.alw-markets-cta {
    background: var(--color-primary);
    color: var(--color-white);
    border-radius: 8px;
    padding: 2.5rem 2rem;
    box-shadow: var(--shadow-md);
}

.alw-markets-cta h3 {
    color: var(--color-white);
    margin-bottom: 0.75rem;
}

.alw-markets-cta p {
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.65;
    margin-bottom: 1.5rem;
}

.alw-markets-cta .button-primary a {
    background: var(--color-accent);
    color: var(--color-charcoal);
}

.alw-markets-cta .button-primary a:hover {
    background: var(--color-white);
    color: var(--color-primary);
}

/* ===== WHY PAKISTAN ===== */
.alw-pakistan-section {
    background: var(--color-primary);
    color: var(--color-white);
    padding: 80px 0;
}

.alw-pakistan-grid {
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: 4rem;
    align-items: start;
}

.alw-pakistan-eyebrow {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-brand-orange);
    margin-bottom: 0.75rem;
}

.alw-pakistan-text h2 {
    color: var(--color-white);
    margin-bottom: 1.25rem;
}

.alw-pakistan-text p {
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.75;
    margin-bottom: 0;
    max-width: 46ch;
}

.alw-pakistan-points {
    display: grid;
    gap: 1.5rem;
}

.alw-pakistan-point {
    border-left: 3px solid var(--color-brand-orange);
    padding-left: 1.25rem;
}

.alw-pakistan-point h3 {
    color: var(--color-white);
    margin-bottom: 0.4rem;
    font-size: 1.15rem;
}

.alw-pakistan-point p {
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.75;
    margin-bottom: 0;
}

/* ===== QUALITY & EXPORT PREPARATION ===== */
.alw-quality-section {
    padding: 36px 0;
}

.alw-quality-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
}

.alw-quality-text h2 {
    color: var(--color-primary);
    margin-bottom: 1rem;
}

.alw-quality-text p {
    color: var(--color-medium-gray);
    line-height: 1.7;
    margin-bottom: 1rem;
}

.alw-quality-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem 1.5rem;
}

.alw-quality-list li {
    color: var(--color-dark-text);
    font-weight: 600;
    padding-left: 1.6rem;
    position: relative;
}

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

.alw-quality-media img {
    width: 100%;
    height: 380px;
    object-fit: cover;
    display: block;
    border-radius: 8px;
    box-shadow: var(--shadow-md);
}

.alw-quality-note {
    font-size: 0.9rem;
    color: var(--color-medium-gray) !important;
    line-height: 1.65;
    margin-top: 1.25rem;
}

/* ===== FAQ ===== */
.alw-faq-section {
    padding: 24px;
    padding-bottom: 48px;
}

.alw-faq-list {
    max-width: 860px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.alw-faq-item {
    background: var(--color-white);
    border: 1px solid var(--color-light-gray);
    border-radius: 8px;
    overflow: hidden;
}

.alw-faq-item summary {
    cursor: pointer;
    list-style: none;
    padding: 1.1rem 3rem 1.1rem 1.5rem;
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--color-dark-text);
    position: relative;
}

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

.alw-faq-item summary::after {
    content: "+";
    position: absolute;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--color-accent);
    transition: transform var(--transition-fast);
}

.alw-faq-item[open] summary::after {
    content: "\2212";
}

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

.alw-faq-item p {
    padding: 0 1.5rem 1.25rem;
    color: var(--color-medium-gray);
    line-height: 1.7;
    margin-bottom: 0;
}

/* Homepage sections responsive */
@media (max-width: 1024px) {
    .alw-why-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .alw-intro-grid,
    .alw-markets-grid,
    .alw-quality-grid,
    .alw-pakistan-grid {
        gap: 2.5rem;
    }
}

@media (max-width: 768px) {

    .alw-intro-grid,
    .alw-home-products-grid,
    .alw-why-grid,
    .alw-markets-grid,
    .alw-quality-grid,
    .alw-pakistan-grid {
        grid-template-columns: 1fr;
    }

    .alw-pakistan-grid {
        gap: 2rem;
    }

    .alw-pakistan-text p {
        max-width: none;
    }

    .alw-intro-media img,
    .alw-quality-media img {
        height: 260px;
    }

    .alw-home-product-image {
        height: 220px;
    }

    .alw-quality-list {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================
   ABOUT PAGE (template-about.php — About Us.docx)
   Reuses the homepage design language: .section-title/.section-subtitle,
   .button-primary, .alw-pakistan-eyebrow and the green/orange/cream palette.
   ========================================================== */

/* ===== 1. WHO WE ARE ===== */
/* Section rhythm mirrors the homepage: content flows on the cream sheet inside
   white cards; the only tonal band is the flat green mission section (matching
   .alw-pakistan-section). Each section owns its bottom padding. */
.alw-about-section {
    padding: 24px 0 72px;
}

.alw-about-grid {
    display: grid;
    grid-template-columns: 3fr 2fr;
    grid-template-areas:
        "text media"
        "stats stats";
    gap: 3rem 4rem;
    align-items: center;
}

.alw-about-text {
    grid-area: text;
}

.alw-about-text h2 {
    color: var(--color-primary);
    margin-bottom: 1.25rem;
}

.alw-about-lead {
    color: var(--color-dark-text);
    font-size: 1.15rem;
    line-height: 1.7;
    margin-bottom: 1.25rem;
}

.alw-about-text p:not(.alw-about-lead) {
    color: var(--color-medium-gray);
    line-height: 1.7;
    margin-bottom: 0;
}

.alw-about-media {
    grid-area: media;
}

.alw-about-media img {
    width: 100%;
    height: 380px;
    object-fit: cover;
    display: block;
    border-radius: 8px;
    box-shadow: var(--shadow-md);
}

.alw-about-media-caption {
    font-size: 0.85rem;
    color: var(--color-medium-gray);
    margin-top: 0.75rem;
    margin-bottom: 0;
}

/* Quick facts band: Hq / range / markets */
.alw-about-stats {
    grid-area: stats;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.alw-about-stat {
    background: var(--color-white);
    border: 1px solid var(--color-light-gray);
    border-radius: 8px;
    padding: 1.4rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    box-shadow: var(--shadow-sm);
}

.alw-about-stat-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--color-light-gray);
    color: var(--color-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.alw-about-stat-icon svg {
    width: 22px;
    height: 22px;
}

.alw-about-stat-label {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-medium-gray);
}

.alw-about-stat-value {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    color: var(--color-dark-text);
}

/* ===== 2. WHAT WE SUPPLY ===== */
.alw-about-supply-section {
    padding: 0 0 72px;
}

.alw-about-supply-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

.alw-about-supply-card {
    background: var(--color-white);
    border: 1px solid var(--color-light-gray);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition-normal), transform var(--transition-normal);
}

.alw-about-supply-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
}

.alw-about-supply-image-link {
    display: block;
}

.alw-about-supply-image {
    height: 260px;
    background-size: cover;
    background-position: center;
}

.alw-about-supply-content h3 a {
    color: inherit;
}

.alw-about-supply-content h3 a:hover {
    color: var(--color-primary-light);
}

.alw-about-supply-content {
    padding: 1.75rem;
}

.alw-about-supply-content h3 {
    color: var(--color-primary);
    margin-bottom: 0.75rem;
}

.alw-about-supply-content p {
    color: var(--color-medium-gray);
    font-size: 0.98rem;
    line-height: 1.7;
    margin-bottom: 1.25rem;
}

/* ===== 3. OUR MISSION — flat green band, matches .alw-pakistan-section ===== */
.alw-about-mission-section {
    background: var(--color-primary);
    color: var(--color-white);
    padding: 80px 0;
}

.alw-about-mission-inner {
    max-width: 860px;
    margin: 0 auto;
    text-align: center;
}

.alw-about-mission-lead {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-brand-orange);
    margin-bottom: 0.75rem;
}

.alw-about-mission-section h2 {
    color: var(--color-white);
    font-size: 2.1rem;
    line-height: 1.3;
    margin-bottom: 1.5rem;
}

.alw-about-mission-section p {
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.75;
    margin-bottom: 0;
}

/* ===== 4. OUR APPROACH ===== */
.alw-about-approach-section {
    padding: 0 0 72px;
}

.alw-about-approach-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.alw-about-approach-card {
    background: var(--color-white);
    border: 1px solid var(--color-light-gray);
    border-radius: 8px;
    padding: 1.75rem;
    transition: box-shadow var(--transition-normal), transform var(--transition-normal);
}

.alw-about-approach-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
}

.alw-about-approach-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--color-light-gray);
    color: var(--color-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.alw-about-approach-icon svg {
    width: 26px;
    height: 26px;
}

.alw-about-approach-card h3 {
    color: var(--color-primary);
    font-size: 1.15rem;
    margin-bottom: 0.5rem;
}

.alw-about-approach-card p {
    color: var(--color-medium-gray);
    font-size: 0.95rem;
    line-height: 1.65;
    margin-bottom: 0;
}

/* ===== 5. SERVING INTERNATIONAL BUYERS ===== */
.alw-about-buyers-section {
    padding: 0 0 72px;
}

.alw-about-buyers-grid {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 4rem;
    align-items: center;
}

.alw-about-buyers-text h2 {
    color: var(--color-primary);
    margin-bottom: 1rem;
}

.alw-about-buyers-text p {
    color: var(--color-medium-gray);
    line-height: 1.7;
    margin-bottom: 1.25rem;
}

/* Buyer-type pills (mirrors .alw-markets-list on the homepage) */
.alw-about-buyers-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.alw-about-buyers-list li {
    background: var(--color-white);
    border: 1px solid var(--color-light-gray);
    border-radius: 999px;
    padding: 0.45rem 1.1rem;
    font-size: 0.9rem;
    color: var(--color-dark-text);
}

.alw-about-buyers-cta {
    background: var(--color-primary);
    color: var(--color-white);
    border-radius: 8px;
    padding: 2.5rem 2rem;
    box-shadow: var(--shadow-md);
}

.alw-about-buyers-cta h3 {
    color: var(--color-white);
    font-size: 1.2rem;
    line-height: 1.5;
    margin-bottom: 1.5rem;
}

.alw-about-buyers-cta .button-primary a {
    background: var(--color-accent);
    color: var(--color-charcoal);
}

.alw-about-buyers-cta .button-primary a:hover {
    background: var(--color-white);
    color: var(--color-primary);
}

/* ===== 6. WHY AL WASI GLOBAL? ===== */
.alw-about-why-section {
    padding: 0 0 72px;
}

.alw-about-why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.alw-about-why-card {
    background: var(--color-white);
    border: 1px solid var(--color-light-gray);
    border-radius: 8px;
    padding: 1.6rem;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    transition: box-shadow var(--transition-normal), transform var(--transition-normal);
}

.alw-about-why-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
}

.alw-about-why-icon {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--color-light-gray);
    color: var(--color-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.alw-about-why-icon svg {
    width: 22px;
    height: 22px;
}

.alw-about-why-body h3 {
    color: var(--color-primary);
    font-size: 1.05rem;
    margin-bottom: 0.4rem;
}

.alw-about-why-body p {
    color: var(--color-medium-gray);
    font-size: 0.92rem;
    line-height: 1.65;
    margin-bottom: 0;
}

/* ===== 7. OUR VISION — image right, text left ===== */
.alw-about-vision-section {
    padding: 0 0 72px;
}

.alw-about-vision-grid {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 4rem;
    align-items: center;
}

.alw-about-vision-text h2 {
    color: var(--color-primary);
    margin-bottom: 1.25rem;
}

.alw-about-vision-text p {
    color: var(--color-medium-gray);
    line-height: 1.7;
    margin-bottom: 1rem;
}

.alw-about-vision-text p:last-child {
    margin-bottom: 0;
}

.alw-about-vision-media img {
    width: 100%;
    height: 360px;
    object-fit: cover;
    display: block;
    border-radius: 8px;
    box-shadow: var(--shadow-md);
}

/* ===== 8. CTA — tagline eyebrow above the shared CTA band ===== */
.alw-about-cta-tagline {
    font-family: var(--font-primary);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 1rem;
}

.alw-about-cta-location {
    margin-top: 1.5rem;
    margin-bottom: 0;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.75);
}

/* About page responsive */
@media (max-width: 1024px) {
    .alw-about-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "text"
            "media"
            "stats";
    }

    .alw-about-grid,
    .alw-about-buyers-grid,
    .alw-about-vision-grid {
        gap: 2.5rem;
    }

    .alw-about-why-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

    .alw-about-supply-section,
    .alw-about-mission-section,
    .alw-about-approach-section,
    .alw-about-buyers-section,
    .alw-about-why-section {
        padding: 0 0 48px;
    }

    .alw-about-vision-section {
        padding: 0 0 48px;
    }

    .alw-about-supply-grid,
    .alw-about-approach-grid,
    .alw-about-buyers-grid,
    .alw-about-why-grid,
    .alw-about-vision-grid {
        grid-template-columns: 1fr;
    }

    .alw-about-stats {
        grid-template-columns: 1fr;
    }

    .alw-about-supply-image {
        height: 220px;
    }

    .alw-about-mission-section h2 {
        font-size: 1.6rem;
    }

    .alw-about-media img {
        height: 260px;
    }

    .alw-about-vision-media img {
        height: 260px;
    }
}

/* ==========================================================
   ARTICLES LISTING + DETAIL (template-articles.php / single-alwasi_article.php)
   Reuses the shared design language: .section-title, .two-column,
   .sidebar-widget, .alw-faq-item, green/orange/cream palette.
   ========================================================== */

/* ===== LISTING: featured hero card ===== */
.alw-article-featured {
    display: grid;
    grid-template-columns: 3fr 2fr;
    background: var(--color-white);
    border: 1px solid var(--color-light-gray);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    margin-bottom: 3rem;
    transition: box-shadow var(--transition-normal), transform var(--transition-normal);
}

.alw-article-featured:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-3px);
}

.alw-article-featured-media {
    background-size: cover;
    background-position: center;
    min-height: 340px;
}

.alw-article-featured-body {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.alw-article-featured-title {
    color: var(--color-primary);
    font-size: 1.65rem;
    line-height: 1.35;
    margin-bottom: 0.75rem;
}

.alw-article-featured:hover .alw-article-featured-title {
    color: var(--color-primary-light);
}

.alw-article-featured-sub {
    font-weight: 600;
    color: var(--color-dark-text);
    margin-bottom: 0.5rem;
}

.alw-article-featured-excerpt {
    color: var(--color-medium-gray);
    line-height: 1.7;
    margin-bottom: 1.25rem;
}

/* Featured card dropped into the grid spans the full row width */
.alw-article-featured--grid {
    grid-column: 1 / -1;
}

/* ===== LISTING: uniform cards ===== */
.alw-article-card {
    display: flex;
    flex-direction: column;
}

.alw-article-thumb {
    height: 200px;
    background-size: cover;
    background-position: center;
    transition: transform var(--transition-normal);
}

.alw-article-card:hover .alw-article-thumb {
    transform: scale(1.05);
}

.alw-article-card .article-image {
    overflow: hidden;
}

.alw-article-card .article-content {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.alw-article-card .article-link {
    margin-top: auto;
    color: var(--color-primary);
    font-weight: 600;
    font-size: 0.9rem;
}

.alw-article-card .article-link:hover {
    color: var(--color-primary-light);
}

.alw-articles-empty {
    background: var(--color-white);
    border: 1px dashed var(--color-light-gray);
    border-radius: 8px;
    padding: 3rem 2rem;
    text-align: center;
    color: var(--color-medium-gray);
}

/* ===== DETAIL: hero band (mirrors .alw-pd-hero) ===== */
.alw-art-hero {
    background: linear-gradient(135deg,
            var(--color-primary) 0%,
            var(--color-primary-dark) 100%);
    color: var(--color-white);
    padding: 5rem 0 4rem;
}

@media (min-width: 769px) {
    .alw-art-hero {
        margin-top: -92px;
        padding-top: 11rem;
    }
}

.alw-art-hero-inner {
    max-width: 860px;
}

.alw-art-hero-meta {
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 1rem;
}

.alw-art-hero-meta .article-category {
    background: var(--color-accent);
    color: var(--color-charcoal);
}

.alw-art-hero-title {
    color: var(--color-white);
    font-size: 2.5rem;
    line-height: 1.2;
    margin-bottom: 0.75rem;
}

.alw-art-hero-sub {
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 0;
}

/* ===== DETAIL: layout ===== */
.alw-art-body-section {
    padding: 48px 0 72px;
}

.alw-art-layout {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
    gap: 3.5rem;
    align-items: start;
}

.alw-art-main {
    background: var(--color-white);
    border: 1px solid var(--color-light-gray);
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
    padding: 2.25rem;
}

.alw-art-hero-media {
    margin: -0.5rem -0.5rem 1.75rem;
}

.alw-art-hero-media img {
    width: 100%;
    height: 380px;
    object-fit: cover;
    display: block;
    border-radius: 8px;
    box-shadow: var(--shadow-md);
}

/* Key takeaways highlight box */
.alw-art-takeaways {
    background: var(--color-wheat-cream);
    border-left: 4px solid var(--color-accent);
    border-radius: 0 8px 8px 0;
    padding: 1.5rem 1.75rem;
    margin-bottom: 2rem;
}

.alw-art-takeaways-title {
    font-size: 1.05rem;
    color: var(--color-primary);
    margin-bottom: 0.75rem;
}

.alw-art-takeaways ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.5rem;
}

.alw-art-takeaways li {
    color: var(--color-dark-text);
    font-size: 0.95rem;
    line-height: 1.6;
    padding-left: 1.5rem;
    position: relative;
}

.alw-art-takeaways li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    color: var(--color-accent);
    font-weight: 700;
}

/* Long-form prose styling */
.alw-art-prose {
    color: var(--color-dark-text);
    font-size: 1rem;
    line-height: 1.8;
}

.alw-art-prose h2 {
    color: var(--color-primary);
    font-size: 1.5rem;
    margin: 2rem 0 0.85rem;
}

.alw-art-prose h2:first-child {
    margin-top: 0;
}

.alw-art-prose h3 {
    color: var(--color-dark-text);
    font-size: 1.2rem;
    margin: 1.5rem 0 0.6rem;
}

.alw-art-prose p {
    margin-bottom: 1rem;
}

.alw-art-prose ul,
.alw-art-prose ol {
    margin: 0 0 1.25rem;
    padding: 0;
    list-style: none;
}

.alw-art-prose ul li,
.alw-art-prose ol li {
    padding-left: 1.5rem;
    position: relative;
    margin-bottom: 0.4rem;
}

.alw-art-prose ul li::before {
    content: "\2022";
    position: absolute;
    left: 0.35rem;
    color: var(--color-accent);
    font-weight: 700;
}

.alw-art-prose table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.25rem 0 1.5rem;
    background: var(--color-white);
    border: 1px solid var(--color-light-gray);
    border-radius: 8px;
    overflow: hidden;
}

.alw-art-prose th {
    background: var(--color-primary);
    color: var(--color-white);
    text-align: left;
    font-family: var(--font-primary);
    font-size: 0.85rem;
    letter-spacing: 0.03em;
    padding: 0.7rem 1rem;
}

.alw-art-prose td {
    padding: 0.65rem 1rem;
    border-top: 1px solid var(--color-light-gray);
    font-size: 0.95rem;
}

.alw-art-prose tbody tr:nth-child(even) {
    background: var(--color-wheat-cream);
}

.alw-art-footer-meta {
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--color-light-gray);
    color: var(--color-medium-gray);
    font-size: 0.9rem;
}

/* Sidebar */
.alw-art-side {
    display: grid;
    gap: 1.5rem;
    position: sticky;
    top: 110px;
}

.alw-art-side-cta {
    background: var(--color-primary);
    color: var(--color-white);
}

.alw-art-side-cta h3 {
    color: var(--color-white);
    font-size: 1.1rem;
    margin-bottom: 0.6rem;
}

.alw-art-side-cta p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9rem;
    line-height: 1.65;
    margin-bottom: 1.25rem;
}

.alw-art-side-cta .button-primary a {
    background: var(--color-accent);
    color: var(--color-charcoal);
}

.alw-art-side-cta .button-primary a:hover {
    background: var(--color-white);
    color: var(--color-primary);
}

.alw-art-side-empty {
    color: var(--color-medium-gray);
    font-size: 0.9rem;
    margin-bottom: 0;
}

/* FAQ + related reuse .alw-faq-list / .alw-faq-item / .articles-grid */
.alw-art-faq {
    margin-top: 4rem;
}

.alw-art-faq .section-title {
    margin-bottom: 2rem;
}

.alw-art-related {
    margin-top: 4rem;
}

.alw-art-related .section-title {
    margin-bottom: 2rem;
}

.alw-art-related-grid {
    grid-template-columns: repeat(2, 1fr);
}

/* Articles page responsive */
@media (max-width: 1024px) {
    .alw-article-featured {
        grid-template-columns: 1fr;
    }

    .alw-article-featured-media {
        min-height: 260px;
    }

    .alw-art-layout {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .alw-art-side {
        position: static;
    }
}

@media (max-width: 768px) {
    .alw-art-hero {
        padding: 3rem 0;
    }

    .alw-art-hero-title {
        font-size: 1.75rem;
    }

    .alw-art-main {
        padding: 1.5rem;
    }

    .alw-art-hero-media {
        margin: -0.25rem -0.25rem 1.25rem;
    }

    .alw-art-hero-media img {
        height: 240px;
    }

    .alw-article-thumb {
        height: 180px;
    }

    .alw-art-related-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================
   ACCESSIBILITY & UI POLISH — Alwaseer palette
   ========================================================== */

/* Branded selection (white on orange = 4.5:1 in browsers is fine
   for non-essential highlight; orange on charcoal = 5.6:1) */
::selection {
    background: var(--color-accent);
    color: var(--color-charcoal);
}

/* Visible focus for keyboard users - orange ring + offset on light,
   cream ring on dark surfaces */
:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 2px;
}

.site-footer :focus-visible,
.why-choose-section :focus-visible,
.cta-section :focus-visible,
.contact-info :focus-visible {
    outline-color: var(--color-wheat-cream);
}

/* Focus rings must not be clipped by card overflow */
.card-link:focus-visible {
    outline-offset: -3px;
}

/* Skip link - hidden until focused */
.skip-link {
    position: absolute;
    top: -48px;
    left: 12px;
    z-index: 3000;
    padding: 10px 18px;
    background: var(--color-charcoal);
    color: var(--color-accent);
    font-weight: 600;
    border-radius: 0 0 8px 8px;
    transition: top var(--transition-fast);
}

.skip-link:focus {
    top: 0;
    color: var(--color-accent);
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================================
   PRODUCTS LISTING (template-products.php) — dynamic CPT cards
   Shares the homepage design language: white cards on the cream
   sheet, green headings, orange actions, 8px radii, warm shadows.
   ========================================================== */

.alw-product-listing {
    padding: 0 0 56px;
}

.alw-product-card {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    background: var(--color-white);
    border: 1px solid var(--color-light-gray);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition-normal), transform var(--transition-normal);
}

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

.alw-product-card--flip {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
}

.alw-product-card--flip .alw-product-card-media {
    order: 2;
}

.alw-product-card-media {
    position: relative;
    min-height: 420px;
    background: var(--color-wheat-cream);
}

.alw-product-card-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.alw-product-card-badge {
    position: absolute;
    top: 1.25rem;
    left: 1.25rem;
    background: var(--color-charcoal);
    color: var(--color-accent);
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.08em;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
}

.alw-product-card-body {
    padding: 2.5rem 2.75rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.alw-product-card-tagline {
    font-family: var(--font-primary);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-brand-orange);
    margin-bottom: 0.6rem;
}

.alw-product-card-title {
    font-size: 2rem;
    margin-bottom: 0.85rem;
}

.alw-product-card-title a {
    color: var(--color-primary);
}

.alw-product-card-title a:hover {
    color: var(--color-primary-light);
}

.alw-product-card-excerpt {
    color: var(--color-medium-gray);
    line-height: 1.7;
    margin-bottom: 1.25rem;
}

.alw-product-card-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem 1.5rem;
    margin: 0 0 1.25rem;
}

.alw-product-card-stat {
    background: var(--color-wheat-cream);
    border-radius: 6px;
    padding: 0.7rem 1rem;
}

.alw-product-card-stat dt {
    font-family: var(--font-primary);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-medium-gray);
    margin: 0 0 0.15rem;
}

.alw-product-card-stat dd {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--color-dark-text);
}

/* Common Uses check-list (per approved docx copy) */
.alw-product-card-uses {
    margin-bottom: 1.5rem;
}

.alw-product-card-uses-title {
    font-size: 1.05rem;
    color: var(--color-primary);
    margin-bottom: 0.5rem;
}

.alw-product-card-uses .alw-pd-list {
    margin: 0;
    gap: 0.35rem;
}

.alw-product-card-uses .alw-pd-list li {
    font-size: 0.92rem;
    color: var(--color-medium-gray);
}

.alw-product-card-note {
    font-size: 0.85rem;
    color: var(--color-medium-gray);
    border-left: 3px solid var(--color-accent);
    padding-left: 0.75rem;
    margin: 0.75rem 0 0;
}

.alw-product-card-suitable {
    color: var(--color-medium-gray);
    font-size: 0.95rem;
    border-top: 1px solid var(--color-light-gray);
    padding-top: 1rem;
    margin-bottom: 1.5rem;
}

.alw-product-card-suitable strong {
    color: var(--color-dark-text);
}

.alw-product-card-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: center;
}

.alw-product-card-actions .button-primary a {
    display: inline-block;
    padding: 12px 28px;
    border-radius: 4px;
    font-family: var(--font-primary);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    background: var(--color-accent);
    color: var(--color-charcoal);
    transition: all var(--transition-normal);
}

.alw-product-card-actions .button-primary a:hover {
    background: var(--color-charcoal);
    color: var(--color-accent);
}

/* Ghost secondary button (also used on detail hero) */
.button-secondary-ghost a {
    display: inline-block;
    padding: 10px 24px;
    border: 2px solid var(--color-light-gray);
    border-radius: 4px;
    font-family: var(--font-primary);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-dark-text);
    background: transparent;
    transition: all var(--transition-normal);
}

.button-secondary-ghost a:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.button-secondary-ghost--on-dark a {
    border-color: rgba(255, 255, 255, 0.5);
    color: var(--color-white);
}

.button-secondary-ghost--on-dark a:hover {
    border-color: var(--color-white);
    background: var(--color-white);
    color: var(--color-primary);
}

/* Product introduction (per approved docx copy) */
.alw-products-intro {
    padding: 56px 0;
}

.alw-products-intro-card {
    background: var(--color-white);
    border: 1px solid var(--color-light-gray);
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
    padding: 2.5rem 2.75rem;
}

.alw-products-intro-title {
    color: var(--color-primary);
    font-size: 1.75rem;
    margin-bottom: 1rem;
}

/* Prose variant: renders the Products page's editable Gutenberg content */
.alw-products-intro-card--prose h2 {
    color: var(--color-primary);
    font-size: 1.75rem;
    margin-bottom: 1rem;
}

.alw-products-intro-card--prose p {
    color: var(--color-medium-gray);
    line-height: 1.7;
}

.alw-products-intro-card--prose p:last-child {
    margin-bottom: 0;
}

.alw-products-intro-card p {
    color: var(--color-medium-gray);
    line-height: 1.7;
}

.alw-products-intro-card p:last-child {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .alw-products-intro {
        padding: 36px 0;
    }

    .alw-products-intro-card {
        padding: 1.75rem;
    }

    .alw-products-intro-title {
        font-size: 1.45rem;
    }
}

/* Export supply band (retitled from Export Ready & Quality Assured) */
.alw-products-assurance {
    padding: 0 0 64px;
}

.alw-products-assurance-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.alw-products-assurance-item {
    background: var(--color-white);
    border: 1px solid var(--color-light-gray);
    border-radius: 8px;
    padding: 1.75rem;
    transition: box-shadow var(--transition-normal), transform var(--transition-normal);
}

.alw-products-assurance-item:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
}

.alw-products-assurance-item h3 {
    color: var(--color-primary);
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

.alw-products-assurance-item p {
    color: var(--color-medium-gray);
    font-size: 0.92rem;
    line-height: 1.65;
    margin-bottom: 0;
}

@media (max-width: 1024px) {
    .alw-products-assurance-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 900px) {

    .alw-product-card,
    .alw-product-card--flip {
        grid-template-columns: 1fr;
    }

    .alw-product-card--flip .alw-product-card-media {
        order: 0;
    }

    .alw-product-card-media {
        min-height: 260px;
        height: 260px;
    }

    .alw-product-card-body {
        padding: 1.75rem;
    }

    .alw-product-card-title {
        font-size: 1.6rem;
    }
}

@media (max-width: 560px) {
    .alw-products-assurance-grid {
        grid-template-columns: 1fr;
    }

    .alw-product-card-stats {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================
   PRODUCT DETAIL (single-alwasi_product.php)
   ========================================================== */

/* Hero — matches the homepage slider: tall image with the floating pill
   header overlaid on top (Cargill pattern), content anchored bottom-left. */
.alw-pd-hero {
    position: relative;
    min-height: 480px;
    height: 62vh;
    max-height: 640px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: var(--color-primary-dark);
}

/* Desktop: mirror the homepage slider — pull the photo up behind the floating
   pill header and match its viewport-based height (51.25vw, max 740px). */
@media (min-width: 769px) {
    .alw-pd-hero {
        margin-top: -92px;
        height: 51.25vw;
        min-height: 480px;
        max-height: 740px;
    }

    .alw-pd-hero-content {
        padding-top: 0;
    }
}

.alw-pd-hero-media {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}

.alw-pd-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
            rgba(17, 17, 17, 0.25) 0%,
            rgba(22, 69, 43, 0.55) 60%,
            rgba(17, 17, 17, 0.8) 100%);
}

.alw-pd-hero-content {
    position: relative;
    z-index: 1;
    width: 100%;
    padding-top: 8rem;
    padding-bottom: 3.5rem;
    color: var(--color-white);
}

.alw-pd-eyebrow {
    font-family: var(--font-primary);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 0.75rem;
}

.alw-pd-title {
    color: var(--color-white);
    font-size: 3rem;
    margin-bottom: 1rem;
    max-width: 18ch;
}

.alw-pd-lede {
    color: rgba(255, 255, 255, 0.92);
    font-size: 1.15rem;
    line-height: 1.7;
    max-width: 60ch;
    margin-bottom: 1.75rem;
}

.alw-pd-hero-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 0;
}

.alw-pd-hero-actions .button-primary a {
    display: inline-block;
    padding: 12px 28px;
    border-radius: 4px;
    font-family: var(--font-primary);
    font-size: 1rem;
    font-weight: 600;
    background: var(--color-accent);
    color: var(--color-charcoal);
    transition: all var(--transition-normal);
}

.alw-pd-hero-actions .button-primary a:hover {
    background: var(--color-white);
    color: var(--color-primary);
}

/* Body grid: main + sticky sidebar */
.alw-pd-body {
    padding: 64px 0;
}

.alw-pd-grid {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
    gap: 3.5rem;
    align-items: start;
}

.alw-pd-intro {
    font-size: 1.05rem;
    color: var(--color-dark-text);
    margin-bottom: 2.5rem;
}

.alw-pd-intro p {
    line-height: 1.75;
}

/* Structured sections */
.alw-pd-section {
    margin-bottom: 3rem;
}

.alw-pd-section--split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 2.5rem;
    align-items: center;
    background: var(--color-white);
    border: 1px solid var(--color-light-gray);
    border-radius: 8px;
    padding: 2rem;
    box-shadow: var(--shadow-sm);
}

.alw-pd-section--flip .alw-pd-section-media {
    order: 2;
}

.alw-pd-section-media {
    margin: 0;
}

.alw-pd-section-media img,
.alw-pd-section-img {
    width: 100%;
    height: 320px;
    object-fit: cover;
    display: block;
    border-radius: 6px;
}

.alw-pd-section-text h2 {
    color: var(--color-primary);
    font-size: 1.6rem;
    margin-bottom: 0.85rem;
}

.alw-pd-section-text p {
    color: var(--color-medium-gray);
    line-height: 1.75;
}

.alw-pd-list {
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.5rem;
}

.alw-pd-list li {
    position: relative;
    padding-left: 1.5rem;
    color: var(--color-dark-text);
    line-height: 1.6;
}

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

.alw-pd-note {
    font-size: 0.85rem;
    color: var(--color-medium-gray) !important;
    border-left: 3px solid var(--color-accent);
    padding-left: 1rem;
    margin-top: 1.25rem;
    margin-bottom: 0;
}

/* Spec table */
.alw-pd-table-wrap {
    margin-top: 1.25rem;
    border: 1px solid var(--color-light-gray);
    border-radius: 6px;
    overflow: hidden;
}

.alw-pd-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-white);
}

.alw-pd-table th,
.alw-pd-table td {
    padding: 0.8rem 1.1rem;
    text-align: left;
    font-size: 0.95rem;
    border-bottom: 1px solid var(--color-light-gray);
}

.alw-pd-table tr:last-child th,
.alw-pd-table tr:last-child td {
    border-bottom: none;
}

.alw-pd-table th {
    font-family: var(--font-primary);
    font-weight: 600;
    color: var(--color-dark-text);
    background: var(--color-wheat-cream);
    width: 50%;
}

.alw-pd-table td {
    color: var(--color-medium-gray);
}

/* Sidebar */
.alw-pd-side {
    position: sticky;
    top: 110px;
}

.alw-pd-side-card {
    background: var(--color-white);
    border: 1px solid var(--color-light-gray);
    border-radius: 8px;
    padding: 1.75rem;
    box-shadow: var(--shadow-sm);
}

.alw-pd-side-title {
    font-size: 1.2rem;
    color: var(--color-primary);
    margin-bottom: 1.1rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--color-primary);
}

.alw-pd-facts {
    margin: 0 0 1.25rem;
    display: grid;
    gap: 0.6rem;
}

.alw-pd-fact {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px dashed var(--color-light-gray);
    padding-bottom: 0.5rem;
}

.alw-pd-fact:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.alw-pd-fact dt {
    font-family: var(--font-primary);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-medium-gray);
}

.alw-pd-fact dd {
    margin: 0;
    font-family: var(--font-primary);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-dark-text);
    text-align: right;
}

.alw-pd-side-block {
    margin-bottom: 1.25rem;
}

.alw-pd-side-block h4 {
    font-family: var(--font-primary);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-medium-gray);
    margin-bottom: 0.6rem;
}

.alw-pd-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.alw-pd-tags li {
    background: var(--color-wheat-cream);
    border: 1px solid var(--color-light-gray);
    border-radius: 999px;
    padding: 0.3rem 0.85rem;
    font-size: 0.82rem;
    color: var(--color-dark-text);
}

.alw-pd-side-cta {
    background: var(--color-primary);
    border-radius: 6px;
    padding: 1.25rem;
    color: var(--color-white);
}

.alw-pd-side-cta p {
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.92rem;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.alw-pd-side-cta .button-primary a {
    display: block;
    text-align: center;
    padding: 10px 16px;
    border-radius: 4px;
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 0.92rem;
    background: var(--color-accent);
    color: var(--color-charcoal);
    transition: all var(--transition-normal);
}

.alw-pd-side-cta .button-primary a:hover {
    background: var(--color-white);
    color: var(--color-primary);
}

.alw-pd-side-contact {
    margin: 1rem 0 0 !important;
    font-size: 0.85rem !important;
}

.alw-pd-side-contact a {
    color: var(--color-white);
    text-decoration: underline;
}

/* Gallery */
.alw-pd-gallery-section {
    padding: 0 0 64px;
}

.alw-pd-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

.alw-pd-gallery-item {
    margin: 0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    background: var(--color-white);
}

.alw-pd-gallery-item img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    display: block;
    transition: transform var(--transition-normal);
}

.alw-pd-gallery-item:hover img {
    transform: scale(1.04);
}

.alw-pd-gallery-item figcaption {
    padding: 0.65rem 0.9rem;
    font-size: 0.82rem;
    color: var(--color-medium-gray);
}

/* Detail responsive */
@media (max-width: 1024px) {
    .alw-pd-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .alw-pd-side {
        position: static;
    }
}

@media (max-width: 768px) {
    .alw-pd-hero {
        min-height: 420px;
        height: 46vh;
    }

    .alw-pd-hero-content {
        padding-top: 6rem;
        padding-bottom: 2.5rem;
    }

    .alw-pd-title {
        font-size: 2rem;
    }

    .alw-pd-lede {
        font-size: 1rem;
    }

    .alw-pd-body {
        padding: 40px 0;
    }

    .alw-pd-section--split {
        grid-template-columns: 1fr;
        padding: 1.25rem;
    }

    .alw-pd-section--flip .alw-pd-section-media {
        order: 0;
    }

    .alw-pd-section-media img,
    .alw-pd-section-img {
        height: 220px;
    }

    .alw-pd-gallery {
        grid-template-columns: 1fr;
    }

    .alw-pd-gallery-item img {
        height: 200px;
    }
}

/* ==========================================================
   MOBILE SPACING TIGHTENING (<=768px)
   Desktop values above stay untouched; these only trim the oversized
   vertical rhythm and section padding that reads as empty space on phones.
   ========================================================== */
@media (max-width: 768px) {

    /* Inner-page hero: less dead air above/below the title */
    .page-hero {
        padding: calc(4rem + var(--header-height)) 0 3.5rem;
    }

    .cta-section {
        padding: 3rem 1.25rem;
    }

    .section-header {
        margin-bottom: 2rem;
    }

    /* Homepage sections: 72-80px desktop rhythm -> 48px on phones */
    .alw-intro-section,
    .alw-products-section {
        padding-bottom: 48px;
    }

    .alw-markets-section,
    .alw-pakistan-section {
        padding: 48px 0;
    }

    .alw-faq-section {
        padding-bottom: 40px;
    }

    /* Product / article content sections */
    .alw-products-assurance,
    .alw-pd-gallery-section,
    .alw-art-body-section {
        padding-bottom: 48px;
    }

    /* Inline heading links were 28px tall -> 40px+ tap target */
    .alw-about-supply-content h3 a {
        display: inline-block;
        padding: 0.4rem 0;
    }
}

/* ==========================================================
   TABLET (769px - 1024px)
   Tablets use the desktop layout but are touch devices, so they
   need finger-sized tap targets too; the hero also needs to step
   down between the 4.05rem desktop size and the 2.4rem phone size.
   ========================================================== */
@media (min-width: 769px) and (max-width: 1024px) {

    /* Homepage hero: 64.8px in a 50% column wrapped to 4-5 lines and
       left the right half empty. Cap the width and drop a size step. */
    .alw-hero-heading {
        font-size: 3.4rem;
        max-width: 72%;
    }

    .alw-hero-text {
        max-width: 80%;
    }

    .alw-hero-actions {
        max-width: 90%;
    }

    /* Footer links sat at 24px on a touch screen (phones already got
       the 38px treatment at <=768px). */
    .footer-links-col a {
        display: block;
        padding: 0.4rem 0;
    }

    .footer-contact-item a {
        display: inline-block;
        padding: 0.35rem 0;
    }

    .footer-social-row a {
        width: 42px;
        height: 42px;
    }

    /* Article / product card links were 18-29px tall */
    .article-link,
    .article-title a,
    .recent-post-content h4 a {
        display: inline-block;
        padding: 0.4rem 0;
    }

    .category-list a {
        display: inline-block;
        padding: 0.3rem 0;
    }

    .btn-small {
        padding: 12px 22px;
    }

    .alw-product-card-title a,
    .alw-about-supply-content h3 a {
        display: inline-block;
        padding: 0.4rem 0;
    }

    /* Product sidebar email/WhatsApp links were 16px (0.85rem, no padding) */
    .alw-pd-side-contact {
        font-size: 0.95rem !important;
    }

    .alw-pd-side-contact a {
        display: inline-block;
        padding: 0.35rem 0;
    }
}

/* Sidebar CTA on the article page was never given the shared button
   padding (it is absent from the section-scoped selector lists), so the
   orange anchor rendered as a 19px sliver at every viewport width. */
.alw-art-side-cta .button-primary a {
    display: inline-block;
    padding: 12px 28px;
    border-radius: 4px;
    font-family: var(--font-primary);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-align: center;
    transition: all var(--transition-normal);
}