@import url('https://fonts.cdnfonts.com/css/satoshi');

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

:root {
    /* Base family that every text element should inherit */
    --font-family-base: 'Satoshi', system-ui, -apple-system, sans-serif;
    /* Override Bootstrap defaults so its components also use Satoshi */
    --bs-font-sans-serif: var(--font-family-base);
    --bs-body-font-family: var(--font-family-base);
}

html,
body {
    /* Set Satoshi as the default font across the entire site */
    font-family: var(--font-family-base);
}

body,
button,
input,
select,
textarea,
option {
    font-family: inherit;
    line-height: 1.6;
    color: #2d1a10;
    background-color: #fff;
}

a {
    text-decoration: none;
    color: inherit;
}

img {
    max-width: 100%;
    display: block;
}

ul {
    list-style: none;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

/* Color palette */
:root {
    --primary: #4d260f; /* deep brown */
    /* Primary dark background color for sections such as "Who We Serve?".  The original
       design uses an almost black, richly brown hue behind the cards.  Adjust this
       variable to match the deep, near‑black tone from the PDF mockup. */
    --primary-dark: #120602;
    --secondary: #f7f3ec; /* light cream */
    --accent: #d6a05f; /* warm gold */
    --cream: #ebd8c5; /* light swap colour for buttons */
    --deep-brown: #3d1700; /* dark swap colour for buttons */
    --text-dark: #2d1a10;
    --text-light: #fff;

    /* Primary colour of the alternate site used for cross-site hover states */
    --offsite-primary: var(--accent);

    /* Additional custom colors based on provided hero mockup */
    --hero-btn-bg: var(--cream); /* warm beige for hero button to match design */
    --hero-btn-hover: var(--deep-brown); /* swaps to deep brown on hover */
    --hero-btn-text: var(--deep-brown); /* dark text for contrast on the light hero CTA */
}

/* Navigation */
/* Navigation */
/* Navigation bar container */
/* Position nav bar inside hero with some margin */
.navbar {
    /* Keep the navigation bar visible as the user scrolls by making it fixed.
       It remains centered horizontally with a small top offset.  A high z-index
       ensures it stays above other content. */
    position: fixed;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    width: 96%;
    z-index: 1000;
    padding: 0;
}

/* Wrapper around the navigation content. This class is not subject to the generic
   container styles, allowing us to fully control width, border, and background */
/* Wrapper around the navigation content. This class is not subject to the generic
   container styles, allowing us to fully control width, border, and background */
.nav-wrapper {
    display: flex;
    align-items: center;
    position: relative;
    width: 100%;
    padding: 0.6rem 1.2rem;
    /* Semi‑transparent, blurred glass effect with a dark tint */
    /* The color values here are tuned to approximate the dark, subtly gradient bar in the provided design */
    background: rgba(34, 24, 17, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.15);
    /* Increase border radius to better approximate the rounded corners in the design */
    border-radius: 24px;
    backdrop-filter: blur(12px);
    /* Subtle shadow to lift the bar off the background */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    color: #fff;
}

.nav-wrapper nav {
    flex: 1;
}

.logo {
    font-size: 1.6rem;
    font-weight: 700;
    color: #fff;
    margin-right: auto;
}

.nav-links {
    display: flex;
    justify-content: center;
    gap: 2rem;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-left: 1.25rem;
    color: #fff;
}

.nav-actions .admin-user {
    font-size: 0.95rem;
    opacity: 0.85;
}

.nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    margin-left: auto;
    margin-left: 1rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(34, 24, 17, 0.5);
    color: #fff;
    cursor: pointer;
    transition: background 0.3s ease, border-color 0.3s ease, transform 0.2s ease;
}

.nav-toggle-icon {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 20px;
    height: 18px;
}

.nav-toggle-icon span {
    display: block;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: #fff;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-icon span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-icon span:nth-child(2) {
    opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-icon span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

.nav-toggle:active {
    transform: scale(0.96);
}

.nav-links li a {
    color: #fff;
    font-weight: 500;
    position: relative;
    padding-bottom: 0.2rem;
    opacity: 1;
    transition: color 0.3s ease, opacity 0.3s ease;
}

.nav-links li a:hover {
    color: #fff;
}

.nav-links li a.active {
    font-weight: 600;
    position: relative;
    color: var(--text-light);
    opacity: 1;
}

/* Underline for the active navigation item */
.nav-links li a.active::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    /* Position the underline a little closer to the text and make it thicker,
       inspired by the provided navigation mockup */
    bottom: -4px;
    /* Thinner underline to mirror the mockup */
    height: 2px;
    background: var(--text-light);
    border-radius: 2px;
}

.nav-toggle i,
.nav-toggle .nav-toggle-icon span {
    color: #fff;
}

/* Hero Section */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 140px 24px 120px;
    background: url('./images/Hero (2).png') center/cover no-repeat;
    text-align: center;
    color: var(--text-light);
}

/* Remove legacy hero button rules.  Specific hero button styles are now
 * defined via the `.hero-btn` variant above, which uses the same colour
 * values but adds a border and hover effect. */
.hero .overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(29, 14, 5, 0.7) 0%, rgba(29, 14, 5, 0.4) 60%, rgba(29, 14, 5, 0.6) 100%);
    z-index: 1;
}
.hero-content {
    position: relative;
    z-index: 2;
    color: #fff;
    max-width: 760px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.hero h1 {
    font-size: 3.25rem;
    font-weight: 700;
    margin-bottom: 1.25rem;
    color: #fff;
}
.hero p {
    font-size: 1.15rem;
    line-height: 1.6;
    max-width: 620px;
    margin: 0 0 2rem;
    color: #fff;
}

.hero-svg-btn,
.svg-cta-btn {
    display: inline-block;
    line-height: 0;
    cursor: pointer;
}

.hero-svg-btn svg,
.svg-cta-btn svg {
    display: block;
    width: 207px;
    height: 54px;
}

.svg-cta-btn svg rect {
    fill: var(--deep-brown);
}

.svg-cta-btn svg path {
    fill: var(--secondary);
}

.svg-cta-btn svg rect,
.svg-cta-btn svg path {
    transition: fill 0.2s ease;
}

.hero-svg-btn .cta-bg,
.hero-svg-btn .cta-fg {
    transition: fill 0.2s ease;
}

.hero-svg-btn .cta-bg {
    fill: var(--hero-btn-bg);
}

.hero-svg-btn .cta-fg {
    fill: var(--hero-btn-text);
}

.hero-svg-btn:hover .cta-bg,
.hero-svg-btn:focus-visible .cta-bg,
.hero-svg-btn:active .cta-bg {
    fill: var(--hero-btn-hover);
}

.hero-svg-btn:hover .cta-fg,
.hero-svg-btn:focus-visible .cta-fg,
.hero-svg-btn:active .cta-fg {
    fill: var(--text-light);
}

.svg-cta-btn:is(:hover, :focus-visible, :active) rect {
    fill: #EBD8C5;
}

.svg-cta-btn:is(:hover, :focus-visible, :active) path {
    fill: #3D1700;
}
/*
 * Base button styling.  All CTA buttons share a common set of layout
 * properties.  The border radius has been tightened to 12px to better
 * reflect the rounded rectangles seen in the provided Figma mockup.  A
 * subtle border is added in the variant definitions below.
 */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    text-decoration: none;
}

/*
 * Primary call‑to‑action button.  This variant uses the warm accent colour as
 * its base, with a matching border.  On hover the background darkens
 * slightly to provide feedback without dramatically changing the palette.
 */
.primary-btn {
    background: var(--accent);
    color: var(--primary-dark);
    border: 2px solid var(--accent);
}
.primary-btn:hover {
    background: #2d1a10;
    border-color: #2d1a10;
    color: var(--secondary);
}
.primary-btn:focus-visible,
.primary-btn:active {
    background: #2d1a10;
    border-color: #2d1a10;
    color: var(--secondary);
}

/*
 * Secondary call‑to‑action button for dark backgrounds.  This now uses the
 * #3D1700 brand brown so it can swap to the cream tone on hover and active
 * states as requested. Text remains a soft cream for contrast.
 */
.secondary-btn {
    background: var(--deep-brown);
    color: var(--cream);
    border: 2px solid var(--deep-brown);
}
.secondary-btn:hover,
.secondary-btn:focus-visible,
.secondary-btn:active {
    background: var(--cream);
    border-color: var(--cream);
    color: var(--deep-brown);
}

/*
 * Hero button variant.  The hero section calls for a lighter beige button
 * reminiscent of the Figma example.  It features a dark border and text and
 * subtly darkens on hover.  The explicit !important declarations ensure
 * that these values override any more general rules that might be applied
 * earlier in the stylesheet.
 */
.hero-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: var(--hero-btn-bg);
    color: var(--hero-btn-text);
    border-radius: 12px;
    border: none;
    min-width: 207px;
    padding: 0.9rem 1.75rem;
    font-weight: 700;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.15);
    transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.hero-btn:hover,
.hero-btn:focus-visible,
.hero-btn:active {
    background: var(--hero-btn-hover);
    color: var(--cream);
}
.hero-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(61, 23, 0, 0.35), 0 10px 28px rgba(0, 0, 0, 0.15);
}

.hero .hero-btn {
    margin-inline: auto;
}

/*
 * Apply the requested palette swap to any button (or link styled as a button)
 * that uses either #EBD8C5 or #3D1700 as its base background colour. Buttons
 * that start in cream flip to the deep brown on hover/active states, while
 * deep brown buttons invert to cream for clear feedback.
 */
:where(button, .btn, input[type="button"], input[type="submit"], input[type="reset"]) {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

:where(button, .btn, input[type="button"], input[type="submit"], input[type="reset"])[style*="#EBD8C5" i],
:where(button, .btn, input[type="button"], input[type="submit"], input[type="reset"]).btn-cream {
    background-color: var(--cream);
    color: var(--deep-brown);
    border-color: var(--deep-brown);
}

:where(button, .btn, input[type="button"], input[type="submit"], input[type="reset"])[style*="#EBD8C5" i]:is(:hover, :focus-visible, :active),
:where(button, .btn, input[type="button"], input[type="submit"], input[type="reset"]).btn-cream:is(:hover, :focus-visible, :active) {
    background-color: var(--deep-brown);
    color: var(--cream);
    border-color: var(--deep-brown);
}

:where(button, .btn, input[type="button"], input[type="submit"], input[type="reset"])[style*="#3D1700" i],
:where(button, .btn, input[type="button"], input[type="submit"], input[type="reset"]).btn-deep-brown {
    background-color: var(--deep-brown);
    color: var(--cream);
    border-color: var(--deep-brown);
}

:where(button, .btn, input[type="button"], input[type="submit"], input[type="reset"])[style*="#3D1700" i]:is(:hover, :focus-visible, :active),
:where(button, .btn, input[type="button"], input[type="submit"], input[type="reset"]).btn-deep-brown:is(:hover, :focus-visible, :active) {
    background-color: var(--cream);
    color: var(--deep-brown);
    border-color: var(--cream);
}

/* Shared hover treatment for legacy Get started CTAs that don't use the palette swap */
.get-started-btn:not(.btn-cream):not(.btn-deep-brown):hover,
.get-started-btn:not(.btn-cream):not(.btn-deep-brown):focus-visible {
    background: var(--offsite-primary) !important;
    border-color: var(--offsite-primary) !important;
    color: var(--primary-dark) !important;
}

/* Inline WhatsApp icon used ahead of CTA copy */
.btn-icon {
    display: inline-flex;
    width: 1.2rem;
    height: 1.2rem;
}
.btn-icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
    display: block;
}

/* Who We Are Section */
.who {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 20px 50px;
    min-height: 535px;
    background: transparent;
    position: relative;
}

.who::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    background: #f2eeea;
    opacity: 1;
    z-index: -1;
}
.who.container {
    width: min(100%, 1440px);
    max-width: none;
    margin: 0 auto;
}
.who-text {
    flex: 1;
    min-width: 250px;
}
.who-text h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: var(--primary);
}
.who-text p {
    font-size: 1rem;
    color: var(--text-dark);
    line-height: 1.7;
}
.who-action {
    margin-top: 1.5rem;
}
.who-action .hero-btn {
    box-shadow: none;
}
.who-image {
    flex: 1;
    display: flex;
    justify-content: center;
    min-width: 250px;
}
.who-image img {
    border-radius: 8px;
    width: 100%;
    object-fit: cover;
}

/* Sourcing Section */
.sourcing {
    background: #3D1700;
    color: #EBD8C5;
    padding: 5rem 0;
}

.sourcing-layout {
    display: grid;
    grid-template-columns: minmax(320px, 1.05fr) minmax(320px, 0.95fr);
    align-items: center;
    gap: 72px;
}

.sourcing-visual {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.35);
}

.sourcing-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sourcing-details {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    max-width: 520px;
    color: #F7F0E8;
}

.sourcing-details h2 {
    font-family: var(--font-family-base);
    font-size: 2.5rem;
    line-height: 1.2;
    color: #F7F0E8;
}

.sourcing-details p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #f2eeea;
    max-width: 44ch;
}

.sourcing-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border-radius: 12px;
    background: #EBD8C5;
    color: #3D1700;
    font-family: var(--font-family-base);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.sourcing-btn:hover,
.sourcing-btn:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.25);
    background: #f6e6d2;
    color: #2d1400;
}

/* Services Section */
.services {
    padding: 4rem 0;
    background: #F9FAFB;
}
.services .section-title {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 3rem;
    color: var(--primary);
}
.service-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}
.card {
    background: #fff;
    padding: 2rem;
    border-radius: 16px;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.08);
    text-align: center;
    transition: transform 0.3s ease;
}
.card:hover {
    transform: translateY(-5px);
}
.card .icon {
    font-size: 2.5rem;
    color: var(--accent);
    margin-bottom: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.card .icon.icon-left {
    display: flex;
    width: 100%;
    justify-content: center;
}
.card .icon svg {
    width: 2.75rem;
    height: 2.75rem;
}
.card h3 {
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
    color: var(--primary);
}
.card p {
    font-size: 0.9rem;
    color: #5b463b;
    line-height: 1.6;
    /* Service descriptions should always be visible in the default state. */
}

/* Show extra service description when hovering over the card or when it has an
   explicit `.active` class toggled via JavaScript.  Increasing max-height
   accommodates longer paragraphs without knowing exact height. */
/*
 * Removed the hover/active rules that previously revealed service descriptions on
 * interaction. Service descriptions are visible by default, so these
 * additional rules are no longer necessary.
 */
.services-action {
    text-align: center;
    margin-top: 2rem;
}

/* High Quality Section */
.high-quality {
    background: #3d1700;
    color: #fff;
    padding: 4rem 0;
}
.high-quality,
.high-quality * {
    color: #fff;
}
.high-quality .container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2rem;
}
.quality-image,
.quality-text {
    flex: 1;
    min-width: 260px;
}
.quality-image img {
    border-radius: 8px;
    width: 100%;
    object-fit: cover;
}
.quality-text .subtitle {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
    color: #fff;
}
.quality-text h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
}
.quality-text p {
    font-size: 1rem;
    margin-bottom: 1.5rem;
    line-height: 1.7;
}
.quality-cards {
    display: grid;
    gap: 1rem;
}
.quality-card {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    background: #2c1307;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 1rem 1.25rem;
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.2);
}
.quality-card img {
    width: 48px;
    height: 48px;
}
.quality-card h3 {
    margin: 0 0 0.35rem;
    font-size: 1.1rem;
}
.quality-card p {
    margin: 0;
    line-height: 1.5;
}
.high-quality .quality-text h2,
.high-quality .quality-text p,
.high-quality .primary-btn {
    color: #fff;
}
.high-quality .primary-btn:hover {
    color: #fff;
}

/* Who We Serve Section */

.serve {
    background: #f2eeea;
    color: var(--text-dark);
    padding: 4.5rem 0;
}

.serve-inner {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2rem;
}

.serve-content {
    flex: 1;
    min-width: 260px;
}

.serve-content h2 {
    font-size: 2.5rem;
    color: var(--text-dark);
    margin: 0;
}

.serve-cards {
    flex: 2;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
}

.serve-card {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    min-height: 400px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    cursor: pointer;
}

.serve-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.serve-card:hover img {
    transform: scale(1.04);
}

.serve-card .serve-overlay {
    position: absolute;
    inset: 0;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 0.75rem;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.75) 100%);
    color: #fff;
    transition: background 0.25s ease;
}

.serve-card .vertical-bar {
    width: 56px;
    height: 3px;
    background: #fff;
    border-radius: 999px;
}

.serve-card .serve-text h3 {
    font-size: 1.6rem;
    margin: 0.25rem 0;
}

.serve-card .serve-text p {
    display: block;
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateY(10px);
    transition: max-height 0.25s ease, opacity 0.25s ease, transform 0.25s ease;
}

.serve-card:hover .serve-overlay {
    background: rgba(0, 0, 0, 0.75);
}

.serve-card:hover .serve-text p,
.serve-card:focus-visible .serve-text p,
.serve-card.expanded .serve-text p {
    max-height: 400px;
    opacity: 1;
    transform: translateY(0);
}

.why-choose {
    padding: 4.5rem 0;
    background: #3D1700;
    color: #f7f0ea;
}

.why-choose .container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 3rem;
    align-items: center;
}

.why-choose h2 {
    font-size: 2rem;
    color: #EBD8C5;
    margin: 0 0 1rem;
}

.why-choose-text p {
    margin: 0;
    line-height: 1.6;
    color: #f7f0ea;
}

.why-choose-list {
    list-style: none;
    padding: 0;
    margin: 1.75rem 0 0;
    display: grid;
    gap: 1rem;
}

.why-choose-list li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
    align-items: center;
}

.why-choose-list h3 {
    margin: 0 0 0.35rem;
    color: #fff3e5;
    font-size: 1.05rem;
}

.why-choose-list p {
    margin: 0;
    color: #f4e6d9;
    line-height: 1.5;
}

.why-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #EBD8C5;
    color: #3D1700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

.reliable-icon {
    display: flex;
    width: 40px;
    height: 40px;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    aspect-ratio: 1/1;
    border-radius: 9999px;
    background: rgba(235, 216, 197, 0.24);
    box-shadow: none;
}

.network-icon {
    display: flex;
    width: 40px;
    height: 40px;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    aspect-ratio: 1/1;
    border-radius: 9999px;
    background: rgba(235, 216, 197, 0.24);
    box-shadow: none;
}

.network-icon img {
    width: 20px;
    height: 20px;
}

.reliable-icon img {
    width: 20px;
    height: 20px;
}

.mission-icon {
    display: flex;
    width: 40px;
    height: 40px;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    aspect-ratio: 1 / 1;
    border-radius: 9999px;
    background: rgba(235, 216, 197, 0.24);
    box-shadow: none;
}

.mission-icon img {
    width: 20px;
    height: 20px;
}

.cross-border-icon {
    display: flex;
    width: 40px;
    height: 40px;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    aspect-ratio: 1 / 1;
    border-radius: 9999px;
    background: rgba(235, 216, 197, 0.24);
    box-shadow: none;
}

.cross-border-icon img {
    width: 20px;
    height: 20px;
}

.partner-growth-icon {
    display: flex;
    width: 40px;
    height: 40px;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    aspect-ratio: 1 / 1;
    border-radius: 9999px;
    background: rgba(235, 216, 197, 0.24);
    box-shadow: none;
}

.partner-growth-icon img {
    width: 20px;
    height: 20px;
}

.why-choose-image img {
    width: 100%;
    border-radius: 16px;
    box-shadow: 0 18px 30px rgba(0, 0, 0, 0.25);
    object-fit: cover;
    min-height: 360px;
}

@media (max-width: 768px) {
    .why-choose {
        text-align: center;
    }

    .why-choose-list li {
        justify-content: center;
        grid-template-columns: 1fr;
    }

    .why-choose-list .why-icon {
        margin: 0 auto;
    }

    .why-choose-image img {
        min-height: auto;
    }
}

    @media (max-width: 1024px) {
        .hero {
            height: auto;
            min-height: 80vh;
            padding: 7rem 0 4rem;
        }

    .hero-content {
        padding: 0 1.25rem;
    }

    .who {
        padding: 20px 24px;
        flex-direction: column;
        text-align: center;
        gap: 1.5rem;
    }

        .who-text,
        .who-image {
            max-width: 720px;
        }

        .sourcing-layout {
            grid-template-columns: 1fr;
            gap: 48px;
        }

        .high-quality .container,
        .serve-inner {
            flex-direction: column;
            text-align: center;
    }

    .serve-content {
        align-items: center;
    }

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

    @media (max-width: 768px) {
        .sourcing {
            padding: 3.5rem 0;
        }

        .sourcing-layout {
            gap: 32px;
        }

        .sourcing-details h2 {
            font-size: 2rem;
        }

        .sourcing-details p {
            font-size: 1rem;
        }

        .serve-inner {
            flex-direction: column;
            align-items: flex-start;
        }

    .serve-content {
        width: 100%;
        text-align: center;
    }

    .serve-cards {
        width: 100%;
        grid-template-columns: 1fr;
    }

    .serve-card {
        min-height: 320px;
    }
}

/* How Section */
.how {
    padding: 4rem 0;
    background: #FFFFFF;
    text-align: center;
    color: #0f172a;
}

.how .container {
    background-color: transparent;
}

.how h2 {
    font-size: 2rem;
    margin-bottom: 2.5rem;
    color: #0f172a;
}

.steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 2rem;
    margin-bottom: 2.5rem;
    text-align: center;
}

.step {
    background: transparent;
    padding: 1rem 0.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.circle {
    width: 48px;
    height: 48px;
    background: #57210a;
    border: 3px solid #6f2b0e;
    color: #f8efe7;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    margin: 0 auto;
}

.step h4 {
    font-size: 1.05rem;
    margin-bottom: 0.35rem;
    color: #111827;
}

.step p {
    font-size: 0.92rem;
    color: #4b5563;
}
.how-action {
    text-align: center;
}
.how .primary-btn {
    background: #f1d6bd;
    color: #2d1a10;
    border-color: #f1d6bd;
    box-shadow: 0 12px 22px rgba(0, 0, 0, 0.2);
}
.how .primary-btn:hover,
.how .primary-btn:focus-visible,
.how .primary-btn:active {
    background: #2d1a10;
    border-color: #2d1a10;
    color: #f7f3ec;
}

.section-divider {
    background: #F2EEEA;
    padding: 4px;
}

.section-divider::after {
    content: "";
    display: block;
    width: 120px;
    height: 4px;
    background: #F2EEEA;
    margin: 0 auto;
    border-radius: 4px;
}

/* Why Section */
.why {
    background: #3d1700;
    color: #f9f1ea;
    padding: 5rem 0;
}

.why .container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
}

.why-text,
.why-image {
    flex: 1;
    min-width: 260px;
}

.why-text h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: #fdf8f3;
}

.why-text p {
    font-size: 1.05rem;
    margin-bottom: 1.5rem;
    color: rgba(249, 241, 234, 0.9);
    max-width: 32rem;
    line-height: 1.7;
}

.reasons {
    padding-left: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.reasons li {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 1.05rem;
    font-weight: 600;
    color: #fdf8f3;
    padding: 0.9rem 1rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.18);
}

.reason-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1.5px solid #f0dcc8;
    background: rgba(240, 220, 200, 0.08);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}

.reason-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #f0dcc8;
    box-shadow: 0 0 0 6px rgba(240, 220, 200, 0.22);
}

.why-image img {
    width: 100%;
    border-radius: 16px;
    object-fit: cover;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

/* Contact Section */
.contact.contact-footer {
    background: #3d1700;
    color: #f7f1e9;
    padding: 4.75rem 0 3.75rem;
}

.contact-footer .contact-wrapper {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    align-items: stretch;
}

.contact-footer .contact-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
    align-items: flex-start;
}

.contact-footer .contact-intro {
    max-width: 640px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
    text-align: left;
}

.contact-footer .contact-eyebrow {
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #f0dcc8;
    margin: 0;
}

.contact-footer h2 {
    font-size: 2.25rem;
    margin: 0;
    color: #ffffff;
}

.contact-footer p {
    margin: 0;
    color: #e6dfd6;
    line-height: 1.7;
}

.contact-footer .contact-actions {
    width: 100%;
}

.contact-footer .contact-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
}

.contact-footer .contact-email-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0;
    background: transparent;
    border: none;
}

.contact-footer .contact-email-cta .method-label {
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #f0dcc8;
}

.contact-footer .contact-email-cta .method-value {
    font-weight: 700;
    color: #ffffff;
    text-decoration: none;
}

.contact-footer .contact-email-cta .method-value:hover,
.contact-footer .contact-email-cta .method-value:focus-visible {
    text-decoration: underline;
}

.contact-footer .contact-link {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.35rem 0;
    color: #f7f1e9;
    text-decoration: none;
    border: none;
    border-radius: 0;
    background: none;
    flex: 0 1 auto;
}

.contact-footer .contact-link:hover,
.contact-footer .contact-link:focus-visible {
    color: #f0dcc8;
    text-decoration: underline;
    outline: none;
}

@media (min-width: 1025px) {
    .contact-footer .contact-links {
        flex-wrap: nowrap;
        justify-content: flex-start;
    }

    .contact-footer .contact-link {
        flex: 0 0 auto;
    }
}

.contact-footer .contact-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
}

.contact-footer .contact-text {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    text-align: left;
}

.contact-footer .method-label {
    font-size: 0.85rem;
    color: #f0dcc8;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.contact-footer .method-value {
    font-size: 0.98rem;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.contact-footer .footer-brand {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    text-align: center;
}

.contact-footer .footer-logo h3 {
    font-size: 1.8rem;
    letter-spacing: 0.14em;
    color: #ffffff;
    margin: 0;
    text-transform: uppercase;
}

.contact-footer .footer-logo p {
    color: #e9e1d9;
    margin: 0.25rem 0 0;
}

.contact-footer .legal {
    display: flex;
    gap: 1.1rem;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    color: #dcd6d0;
    font-size: 0.9rem;
}

.contact-footer .legal a {
    color: #f7f1e9;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    padding-bottom: 2px;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.contact-footer .legal a:hover,
.contact-footer .legal a:focus-visible {
    border-color: #f7f1e9;
    outline: none;
}

/* Responsive */
@media (max-width: 768px) {
    .hero h1 {
        font-size: 2.5rem;
    }
    .hero p {
        font-size: 1rem;
    }
    .steps {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

@media (max-width: 900px) {
    .nav-links {
        display: none;
        position: absolute;
        top: calc(100% + 0.5rem);
        right: 1rem;
        left: 1rem;
        z-index: 1001;
        flex-direction: column;
        gap: 1rem;
        padding: 1rem;
        background: rgba(34, 24, 17, 0.95);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 16px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
    }
    .nav-links.open {
        display: flex;
    }
    .nav-links li a {
        opacity: 1;
    }
    /* Adjust nav container on small screens */
    .navbar {
        width: 96%;
    }
    .nav-wrapper {
        padding: 0.6rem 1rem;
        border-radius: 12px;
    }
    .nav-toggle {
        display: inline-flex;
    }
    .who,
    .high-quality .container {
        flex-direction: column;
        text-align: center;
    }
    .why-container {
        grid-template-columns: 1fr;
    }
    .why-text {
        text-align: center;
        align-items: center;
    }
    .reasons {
        align-items: center;
    }
    .method {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 640px) {
    .container {
        width: 94%;
    }

    .hero {
        padding: 6.5rem 1.25rem 4rem;
    }

    .hero h1 {
        font-size: 2.25rem;
    }

    .hero p {
        font-size: 1rem;
        margin-bottom: 1.5rem;
    }

    .hero .hero-btn {
        width: min(320px, 100%);
    }

    .service-cards {
        grid-template-columns: 1fr;
    }

    .services-action {
        justify-content: center;
    }

    .who {
        padding: 1.5rem;
    }

    .why .container {
        gap: 2rem;
    }

    .login-container {
        margin: 1rem auto;
        padding: 1.5rem;
    }

    .dashboard-kpi-grid,
    .dashboard-analytics-grid,
    .dashboard-posts-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-analytics-grid .side-stack {
        width: 100%;
    }

    .table-scroll table {
        min-width: 0;
        width: 100%;
    }
}

/* ===================================================== */
/* Contact page specific styles                          */
/* The contact page uses a two-column layout with an
   introductory message on the left and a form on the
   right.  Inputs, select boxes and textareas share
   consistent styling and spacing.                      */
.contact-page {
    background: var(--secondary);
    /* Provide extra top padding to clear the absolutely positioned navigation bar.
       This ensures the page content does not sit underneath the nav bar on
       pages without a hero image. */
    padding: 6rem 0 4rem;
}
.contact-page .contact-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 3rem;
}
.contact-page .intro {
    flex: 1;
    min-width: 260px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.75rem;
}
.contact-page .intro-headings {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    margin: 0;
}
.contact-page .intro h1 {
    font-size: 3rem;
    color: var(--primary);
    margin: 0;
}
.contact-page .intro h2 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--primary);
    margin: 0;
}
.contact-page .intro h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--primary);
    margin: 0;
}
.contact-page .intro p {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-dark);
}
.contact-page .contact-form {
    flex: 1;
    min-width: 260px;
    width: 100%;
    max-width: 720px;
}
.contact-form .form-row {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}
.contact-form .form-row.opt-in {
    align-items: flex-start;
}
.contact-form .form-row > * {
    flex: 1;
}
.contact-form input,
.contact-form select,
.contact-form textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    background: #f7f3ec;
    font-family: var(--font-family-base);
    font-size: 1rem;
    color: var(--text-dark);
}
.contact-form select {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    background-image: url('data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjM2QxNzAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMSIgaGVpZ2h0PSI2Ij48cGF0aCBkPSJNMi41IDAgNy41IDAgMTEgNiIgLz48L3N2Zz4=');
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 0.75rem 0.375rem;
    padding-right: 2rem;
}
.contact-form textarea {
    resize: vertical;
    min-height: 120px;
}
.contact-form .checkbox {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    font-size: 0.95rem;
    color: var(--text-dark);
    cursor: pointer;
}
.contact-form .checkbox input[type="checkbox"] {
    margin-top: 0.2rem;
}
.contact-form .helper {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-top: -0.25rem;
    margin-bottom: 0.5rem;
}
.form-feedback {
    font-size: 0.95rem;
    margin: 0;
}
.form-feedback.success {
    color: #0f5132;
}
.form-feedback.error {
    color: #b02a37;
}
.contact-form button.btn {
    width: 100%;
    margin: 0.75rem 0 0;
    justify-content: center;
    font-weight: 700;
    font-size: 2.2rem;
    font-size: 1.1rem;
    display: block;
}
@media (max-width: 1024px) {
    .contact-footer .contact-grid {
        grid-template-columns: 1fr;
    }

    .contact-footer .contact-intro {
        text-align: left;
        align-items: flex-start;
    }

    .contact-footer .contact-email-cta {
        margin-left: auto;
        margin-right: auto;
    }

    .contact-footer .contact-actions {
        max-width: 520px;
        width: 100%;
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    .contact-footer .contact-wrapper {
        gap: 2.5rem;
    }

    .contact-footer .contact-links {
        flex-direction: column;
    }

    .contact-footer .contact-link {
        width: 100%;
    }
}
/* Responsive layout adjustments for the contact page */
@media (max-width: 768px) {
    .contact-page .contact-wrapper {
        flex-direction: column;
        align-items: flex-start;
    }
    .contact-page .intro,
    .contact-page .contact-form {
        width: 100%;
    }

    .contact-form .form-row {
        flex-direction: column;
    }
}

/* ===================================================== */
/* Blog page styles                                      */
/* The blog page lists articles in a simple, clean layout
   with generous spacing and a light background. Each post
   sits on a white card with a subtle shadow and includes
   the title, date and content.                         */
.blog-list {
    background: #f7f0e6;
    /* Add extra top padding to clear the fixed navigation bar */
    padding: 7rem 0 5rem;
}

.blog-hero {
    text-align: center;
    max-width: 900px;
    margin: 0 auto 2.5rem;
}

.blog-hero h1 {
    font-size: 2.75rem;
    line-height: 1.2;
    color: var(--primary);
    margin-bottom: 1rem;
}

.hero-actions {
    margin-top: 1.25rem;
    display: flex;
    justify-content: center;
}

.section-eyebrow {
    color: #8c6a4f;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
}

.blog-list .subtitle {
    font-size: 1rem;
    color: #5b463b;
    line-height: 1.7;
}

.blog-filter-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin: 0 auto 1.5rem;
}

.filter-chip {
    border: 1px solid #c9b29e;
    background: #fff7ee;
    color: #4b2f1f;
    border-radius: 999px;
    padding: 0.55rem 1.2rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-chip.is-active,
.filter-chip:hover,
.filter-chip:focus-visible {
    background: #3d1e0f;
    color: #fff;
    border-color: #3d1e0f;
    outline: none;
}

.posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.75rem;
}

.blog-post {
    background: #fdf7ef;
    border: 1px solid #eadbcb;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.blog-post .featured-image {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
}

.post-body {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    flex: 1;
}

.blog-post .meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.blog-post h3 {
    font-size: 1.35rem;
    color: var(--primary);
    line-height: 1.4;
}

.blog-post .date {
    font-size: 0.9rem;
    color: #7a5f4c;
}

.blog-post .pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.9rem;
    background: #f2e5d9;
    color: #4b2f1f;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 700;
}

.post-excerpt {
    font-size: 0.95rem;
    color: #4b2f1f;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.post-full {
    font-size: 0.95rem;
    color: #4b2f1f;
    line-height: 1.6;
}

.post-full p + p {
    margin-top: 0.65rem;
}

.post-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    gap: 1rem;
}

.btn-read-more {
    border: 1px solid #3d1e0f;
    background: #3d1e0f;
    color: #fff;
    padding: 0.55rem 1.1rem;
    border-radius: 999px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-read-more:hover,
.btn-read-more:focus-visible {
    background: #fff;
    color: #3d1e0f;
    outline: none;
}

.blog-post.is-expanded {
    background: #fff;
}

.no-posts {
    text-align: center;
    color: #4b2f1f;
}

/* ===================================================== */
/* Blog detail page                                      */
.blog-post-page {
    background: #fffaf3;
    padding-top: 7rem;
}

.blog-post-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #2b140c, #4d260f);
    color: #fff;
}

.blog-post-hero .hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(18, 6, 2, 0.85), rgba(77, 38, 15, 0.75));
    z-index: 1;
}

.blog-post-hero .hero-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2.5rem;
    align-items: center;
    padding: 5rem 0 4rem;
}

.hero-meta {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 640px;
}

.hero-meta h1 {
    font-size: clamp(2.25rem, 3vw, 2.8rem);
    line-height: 1.2;
}

.hero-summary {
    font-size: 1.05rem;
    color: #f7ece1;
    line-height: 1.7;
}

.pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    color: #f2d7c0;
}

.back-link:hover,
.back-link:focus-visible {
    color: #fff;
}

.hero-image {
    min-height: 260px;
    border-radius: 20px;
    background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.08), transparent 40%),
        linear-gradient(135deg, #3d1e0f, #120602);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
    background-size: cover;
    background-position: center;
}

.hero-image.is-placeholder {
    background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
}

.article-section {
    padding: 3.5rem 0 2rem;
}

.article-header {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1.5rem;
}

.article-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.ghost-button {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.6rem 1.1rem;
    border: 1px solid #d4bfa8;
    border-radius: 12px;
    background: #fff;
    color: #3d1e0f;
    font-weight: 700;
    transition: all 0.2s ease;
}

.ghost-button:hover,
.ghost-button:focus-visible {
    background: #3d1e0f;
    color: #fff;
    outline: none;
}

.article-body {
    background: #fff;
    border: 1px solid #eadbcb;
    border-radius: 18px;
    padding: clamp(1.5rem, 3vw, 2.25rem);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.05);
    color: #3d1e0f;
    line-height: 1.8;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.article-body p {
    font-size: 1.02rem;
}

.muted {
    color: #7a5f4c;
}

.related-topics {
    padding: 2.5rem 0 4rem;
    background: #fdf7ef;
}

.related-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.related-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.25rem;
}

.related-card {
    background: #fff;
    border: 1px solid #eadbcb;
    border-radius: 14px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.05);
}

.related-card h3 {
    font-size: 1.15rem;
    color: #3d1e0f;
}

.related-card .post-excerpt {
    -webkit-line-clamp: 2;
}

.related-card .post-footer {
    margin-top: auto;
}

@media (max-width: 768px) {
    .blog-post-page {
        padding-top: 6rem;
    }

    .blog-post-hero .hero-grid {
        padding: 4rem 0 3rem;
    }

    .hero-image {
        min-height: 220px;
    }

    .article-header {
        justify-content: flex-start;
    }
}

@media (max-width: 768px) {
    .blog-list {
        padding-top: 6.5rem;
    }

    .blog-hero h1 {
        font-size: 2.1rem;
    }

    .blog-post .featured-image {
        height: 200px;
    }
}

/* ===================================================== */
/* Admin page styles                                     */
/* The admin dashboard provides a form to add new blog
   posts and lists existing posts and contact messages. A
   light background and card‑style sections keep the
   interface approachable while aligning with the rest of
   the site’s design.                                  */
.admin-page {
    background: var(--secondary);
    padding: 6rem 0 4rem;
}
.admin-page h1 {
    font-size: 2.5rem;
    margin-bottom: 2rem;
    color: var(--primary);
    text-align: center;
}
.admin-section {
    background: #fff;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    margin-bottom: 2rem;
}
.admin-section h2 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
    color: var(--primary);
    border-bottom: 2px solid var(--secondary);
    padding-bottom: 0.5rem;
}
.admin-item {
    margin-bottom: 1.5rem;
    border-bottom: 1px solid #eee;
    padding-bottom: 1rem;
}
.admin-item h3 {
    font-size: 1.4rem;
    margin-bottom: 0.25rem;
    color: var(--primary);
}
.admin-item .date {
    font-size: 0.8rem;
    color: #888;
    margin-bottom: 0.5rem;
}
.admin-item p {
    font-size: 0.95rem;
    margin-bottom: 0.25rem;
    color: #5b463b;
}

/* Admin dashboard refinements (Mazer-inspired) */
.admin-dashboard {
    background-color: #f4f6f8;
    color: #2d1a10;
}

.admin-dashboard .page-heading {
    padding-inline: clamp(1rem, 3vw, 2rem);
}

.admin-dashboard .card {
    border: 1px solid #e6e9ee;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.05);
}

.admin-dashboard .card .card-header {
    background: #f8fafc;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.admin-dashboard .stats-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--primary);
}

.admin-dashboard .admin-layout {
    padding-inline: clamp(1rem, 3vw, 2rem);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.dashboard-actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.admin-dashboard .action-card {
    border: 1px solid #eef1f4;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    min-height: 120px;
}

.admin-dashboard .action-card .card-body {
    padding: 1rem 1.25rem;
}

.admin-dashboard .action-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08);
    border-color: #d8dee4;
    text-decoration: none;
}

.admin-dashboard .action-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    font-size: 1.25rem;
}

.admin-dashboard .bg-primary-subtle { background-color: #e7ecff !important; }
.admin-dashboard .bg-success-subtle { background-color: #e6f4ec !important; }
.admin-dashboard .bg-warning-subtle { background-color: #fff6e5 !important; }
.admin-dashboard .bg-info-subtle { background-color: #e5f6ff !important; }

.dashboard-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
}

.dashboard-analytics-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) minmax(280px, 1fr);
    gap: 1.5rem;
    align-items: start;
}

.dashboard-analytics-grid .side-stack {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.dashboard-posts-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.05fr);
    gap: 1.5rem;
    align-items: start;
}

.dashboard-posts-grid .posts-table {
    grid-column: 1 / -1;
}

.dashboard-contacts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.5rem;
    align-items: start;
}

.admin-dashboard .card-body,
.admin-dashboard .card-header {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

.admin-dashboard .chart-container {
    position: relative;
    min-height: 260px;
    max-width: 100%;
    margin-inline: auto;
}

.admin-dashboard .chart-container.padded {
    padding: 0.75rem 0.5rem 0.5rem;
}

.admin-dashboard .chart-container.small {
    min-height: 200px;
    max-width: 480px;
}

.admin-dashboard .chart-container canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

.legend-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.legend-dot.bg-success {
    background: #22c55e !important;
}

.legend-dot.bg-secondary {
    background: #cbd5e1 !important;
}

.admin-dashboard .badge.bg-light-secondary {
    background-color: #f5f7fa;
}

.admin-dashboard .table td,
.admin-dashboard .table th {
    vertical-align: middle;
}

.dashboard-analytics-tables {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.25rem;
}

.dashboard-analytics-tables .card-body {
    padding-top: 0.5rem;
}

.table-scroll {
    overflow-x: auto;
    max-width: 100%;
}

.table-scroll table {
    min-width: 520px;
}

.admin-dashboard .breadcrumb a {
    color: var(--primary);
}

.admin-dashboard .form-check-input:focus {
    box-shadow: 0 0 0 0.25rem rgba(77, 38, 15, 0.25);
}

.admin-dashboard .form-control,
.admin-dashboard .form-select {
    padding: 0.7rem 0.9rem;
    border-radius: 10px;
    border: 1px solid #d8dde3;
    background-color: #fff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.admin-dashboard .create-post-card {
    background: #fff;
    border: 1px solid #edf0f3;
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
    padding: 1.5rem;
}

.admin-dashboard .create-post-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 1.25rem;
    align-items: start;
}

.admin-dashboard .create-post-field-span {
    grid-column: 1 / -1;
}

.admin-dashboard .create-post-input {
    padding: 10px;
    border-radius: 10px;
    border: 1px solid #d8dde3;
    background: #fff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.admin-dashboard .create-post-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 0.15rem rgba(77, 38, 15, 0.16);
}

.admin-dashboard .save-post-btn {
    background-color: #3E1F0A;
    border-color: #3E1F0A;
    color: #fff;
    box-shadow: 0 6px 18px rgba(62, 31, 10, 0.2);
}

.admin-dashboard .save-post-btn:hover,
.admin-dashboard .save-post-btn:focus-visible {
    background-color: #311806;
    border-color: #311806;
    color: #fff;
}

.admin-dashboard .create-post-card .row.g-3 {
    margin-top: 1rem;
}

.admin-dashboard .create-post-card .input-group .form-control {
    border-radius: 10px 0 0 10px;
}

.admin-dashboard .create-post-card .input-group .input-group-text {
    border-radius: 0 10px 10px 0;
}

@media (max-width: 768px) {
    .admin-dashboard .create-post-grid {
        grid-template-columns: 1fr;
    }
}

.admin-dashboard .form-control:focus,
.admin-dashboard .form-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 0.2rem rgba(77, 38, 15, 0.16);
}

.admin-dashboard .btn-primary,
.admin-dashboard .btn-outline-primary {
    background-color: var(--primary);
    border-color: var(--primary);
    color: #fff;
    box-shadow: 0 6px 18px rgba(77, 38, 15, 0.18);
}

.admin-dashboard .btn-primary:hover,
.admin-dashboard .btn-outline-primary:hover,
.admin-dashboard .btn-primary:focus-visible,
.admin-dashboard .btn-outline-primary:focus-visible {
    background-color: #3b1d08;
    border-color: #3b1d08;
    color: #fff;
}

.admin-dashboard .contacts-table th:nth-child(3),
.admin-dashboard .contacts-table td:nth-child(3) {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.admin-dashboard .table-responsive,
.admin-dashboard .accordion,
.admin-dashboard .list-group {
    max-width: 100%;
}

@media (max-width: 992px) {
    .dashboard-analytics-grid,
    .dashboard-posts-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-analytics-grid .side-stack,
    .dashboard-kpi-grid {
        gap: 1rem;
    }
}

@media (max-width: 768px) {
    .admin-dashboard .card-body,
    .admin-dashboard .card-header {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .dashboard-contacts-grid {
        grid-template-columns: 1fr;
    }
}

/* Admin login page */
body.admin-login {
    min-height: 100vh;
    background: radial-gradient(circle at 20% 20%, rgba(77, 38, 15, 0.12), transparent 35%),
        radial-gradient(circle at 80% 0%, rgba(214, 160, 95, 0.16), transparent 40%),
        #f8f6f3;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

.login-container {
    max-width: 420px;
    width: 100%;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 20px 80px rgba(0, 0, 0, 0.08);
    padding: 1.75rem;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.login-header {
    text-align: center;
    margin-bottom: 1.5rem;
}

.login-header .logo {
    color: var(--primary);
}

.login-card .form-control {
    border-radius: 12px;
}

.login-card .form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 0.25rem rgba(77, 38, 15, 0.1);
}

.login-card .btn-primary {
    background: var(--primary);
    border-color: var(--primary);
    border-radius: 12px;
}

.login-card .btn-primary:hover {
    background: #341708;
    border-color: #341708;
}

.login-card .alert {
    border-radius: 12px;
}