:root {
    --bg-ivory:     #FAFAFA;
    --text-black:   #000000;
    --text-white:   #FFFFFF;
    --border:       #E0E0E0;
    --frost-bg:     rgba(255, 255, 255, 0.06);
    --frost-border: rgba(255, 255, 255, 0.22);
}

/* ==========================================================================
   BASE
   ========================================================================== */

html {
    scroll-behavior: smooth;
}

html, body {
    background: var(--bg-ivory);                /* global ivory base color */
}

body {
    margin: 0;
    /* video still covers header via absolute positioning */
    color: var(--text-white);
    font-family: 'Inter', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* ==========================================================================
   VIDEO BACKGROUND
   ========================================================================== */

/* video background is only used inside header now */
header video {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    z-index: -10 !important;
    pointer-events: none;
}

video {
    /* fallback for other uses */
    object-fit: cover;
    pointer-events: none;
}

/* Optional dark overlay – comment out or adjust opacity if video is already dark enough */
.overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.12);
    z-index: -9;
    pointer-events: none;
}

/* Frost effect specifically for header video background overlay */
header .video-frost {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(14px) saturate(150%);
    pointer-events: none;
    z-index: -9;
}

/* ==========================================================================
   GLOBAL GRAIN OVERLAY
   ========================================================================== */

/*
  Apply a subtle, responsive noise texture on top of all content without
  affecting layout or interactivity. The grain lives in a fixed pseudo‑element
  so it covers the entire viewport. Opacity is kept low for a gentle effect
  and mix-blend-mode ensures it works on light or dark background areas.
  Prefers-reduced-motion users will not see the grain.
*/

body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;          /* allow clicks through the overlay */
    background-repeat: repeat;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAABuUlEQVR4Xu3ZsUoDQRAG4CcWmoBzo28gJxgLuAtsgJjA2wgu4BDuBinZBWx6ZrsSE2FwHusvNvfS+vs50e1+5M35nn/zPnLMMMc8wxxzDHPMC0G/korTm55XgCXxwB3bkAC2U3WrIAGz/s2QC+BgDuK+HIDcGgDuGEC4HgHuGEC4HgHuGEC4HgHuGEC4HgHuGEC4HgHuGEC4HgHuGEC4HgHuGEC4HgHuGEC4HgHuGEC4HgHuGEC4HgHuGEC4HgHuGEC4HgHuGEC4HgHuGEC4HgHuGEC4HgHuGEC4HgHuGEC4HgHuGEC4HgHuGEC4HgHuGEC4HgHuGEC4HgHuGEC4HgHuGEC4HgHuGEC4HgHuGEC4HgHuGEC4HgHuGEC4HgHuGEC4HgHuGEC4HgHuGEC4HgHuGEC4HgHuGEC4HgHuGEC4HgHuGEC4HgHuGEC4HgHuGEC4HgHuGEC4HgHuGEC4HgHuGEC4HgHuGEC4HgHuGEC4HgHuGEC4HgHuGEC4HgHuGEC4HgHuGEC4HgHuGEC4HgHuGEC4HgHuGEC4HgHuGEC4HgHuGEC4HgHuGEC4HgHuGEC4HgHuGEC4HgHuGEC4HgHuGEC4HgHuGEC4HgHuGEC4HgHuGEC4HgHuGEC4HgHuGEC4HgHuGEC4HgHuGEC4HgHuGEC4HgHuGEC4HgHuGEC4HgHuGEC4HgHuGEC4HgHuGEC4HgHuGEC4HgHuGEC4HgHuGEC4HgHuGEC4HgHuGEC4HgH+fAC/3aD3NgFv4AAAAASUVORK5CYII=');
    opacity: 0.08;
    mix-blend-mode: normal;
    z-index: 9999;
}

@media (prefers-reduced-motion: reduce) {
    body::before { display: none; }
}


/* ==========================================================================
   BUTTON
   ========================================================================== */

   .header-btn {
    padding: 0.75rem 1.5rem;
    font-size: 0.75rem;
}

/* Mobile: reduce header button pill size and type for small screens */
@media (max-width: 640px) {
    .header-btn {
        padding: 0.5rem 0.75rem; /* smaller pill */
        font-size: 0.6875rem;   /* ~11px */
        max-width: calc(50% - 0.5rem); /* allow two buttons per row */
        white-space: nowrap;
    }
    .header-btn i {
        width: 1rem;
        height: 1rem;
    }
}

.header-btn {
    flex: 0 0 auto;       /* do not grow or shrink to fill row */
    min-width: 0;
}

/* container utility to keep buttons inline and centered on very small widths */
.btns-inline { display: flex; flex-direction: row; gap: 0.5rem; flex-wrap: wrap; align-items: center; }

/* Move header inner content closer to bottom on small screens to reduce dead space */
@media (max-width: 640px) {
    header {
        min-height: 60vh; /* shorter overall header */
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
    }

    /* target the inner wrapper to align content to bottom */
    header .max-w-7xl {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        height: 100%;
        padding-bottom: 0.5rem;
    }

    /* ensure heading spacing is not too large on small screens */
    header h1 {
        margin-bottom: 0.5rem;
    }
}


/* ==========================================================================
   NAVIGATION
   ========================================================================== */

nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    pointer-events: none;
}

nav > * {
    pointer-events: auto;
}

/* Mobile bar */
nav .mobile-bar {
    height: 56px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255,255,255,0.15);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.25rem;
}

@media (min-width: 768px) {
    nav .mobile-bar { display: none; }
}

/* Desktop pill – transparent glass */
.desktop-pill {
    display: none;
    margin: 1.5rem auto 0;
    max-width: 1150px;
    height: 64px;
    background: var(--frost-bg);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid var(--frost-border);
    border-radius: 9999px;
    box-shadow: 0 12px 48px rgba(0,0,0,0.20);
    align-items: center;
    justify-content: space-between;
}

@media (min-width: 768px) {
    .desktop-pill { display: flex; }
}

.desktop-pill .logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-left: 1.75rem;
    font-family: 'Instrument Serif', serif;
    font-size: 1.75rem;
    color: white;
    text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

.desktop-pill .nav-links {
    display: flex;
    align-items: center;
    gap: 2.5rem;
    padding-right: 1.75rem;
}

.desktop-pill .nav-links a {
    color: rgba(255,255,255,0.92);
    font-weight: 500;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    transition: all 0.2s ease;
}

.desktop-pill .nav-links a:hover {
    background: rgba(255,255,255,0.15);
    color: white;
}

.desktop-pill .inquire-btn {
    background: white;
    color: black;
    padding: 0.75rem 1.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 9999px;
    transition: all 0.22s ease;
}

.desktop-pill .inquire-btn:hover {
    background: rgba(255,255,255,0.92);
    transform: translateY(-1px);
}

/* ==========================================================================
   HEADER & CONTENT
   ========================================================================== */

header {
    position: relative;
    min-height: 90vh;
    padding-top: 8rem;
    padding-bottom: 6rem;
    z-index: 10;
}

/* Make sure text is readable on video */
header h1, header p, header span, header a:not(.inquire-btn) {
    text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}


/* Footer uses the same background as the surrounding page; markup can supply a utility class if desired */
footer {
    background: inherit;
    color: inherit;
    padding: 4rem 2rem 2rem;
}

/* no forced background overrides; let the HTML class (e.g. bg-[#FAFAFA]) control color */

/* Marquee animation */
.animate-marquee {
    display: inline-flex;
    animation: marquee 45s linear infinite;
    will-change: transform;
}

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

/* Accordion tweaks: no arrows, left-aligned numbers */
details > summary {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 1rem;
    padding: 1rem 0;
    cursor: pointer;
}

/* remove browser default disclosure triangle */
summary::-webkit-details-marker { display: none; }
summary::marker { font-size: 0; }

details > summary h3 {
    margin: 0;
}

/* the icon spans were removed from markup; ensure any leftover styling doesn’t show */
details > summary i {
    display: none;
}

/* Sourcing cards – override yellow backgrounds */
#sourcing [class*="bg-[#F5F0EA]"] {
    background-color: var(--bg-ivory) !important;
    border-color: var(--border) !important;
}
#sourcing [class*="bg-[#EDE5DC]"] {
    background-color: var(--bg-ivory) !important;
    border-color: var(--border) !important;
}

/* Transitions */
a, button {
    transition: all 0.22s ease-out;
}




/* Kill amber/brown texts in sourcing – force black */
#sourcing [class*="text-[#6B5A4A]"],
#sourcing [class*="text-[#3C2F25]"],
#sourcing p,
#sourcing h3,
#sourcing li,
#sourcing span {
    color: var(--text-black) !important;
}

/* Also force icon colors to black if they are brown */
#sourcing i[data-lucide],
#sourcing svg {
    color: var(--text-black) !important;
    stroke: var(--text-black) !important;
}

/* Kill any remaining amber backgrounds (just in case) */
#sourcing [class*="bg-[#F5F0EA]"],
#sourcing [class*="bg-[#EDE5DC]"],
#sourcing [class*="bg-amber"],
#sourcing [class*="bg-yellow"] {
    background-color: #FDFDFD !important;
    border-color: #E8E8E8 !important;
}

/* ==========================================================================
   SOURCING – FORCE CLEAN BLACK/GRAY BORDERS + KILL BROWN/AMBER
   ========================================================================== */

/* All borders in sourcing → force consistent light gray */
#sourcing [class*="border-[#"],
#sourcing [class*="border-"],
#sourcing .border,
#sourcing .border-t,
#sourcing .border-b,
#sourcing .border-l,
#sourcing .border-r,
#sourcing .border-x,
#sourcing .border-y {
    border-color: #E8E8E8 !important;     /* clean light gray */
}

/* Hover borders → slightly darker gray instead of brown */
#sourcing [class*="hover:border-[#"],
#sourcing .group:hover .border,
#sourcing .group:hover {
    border-color: #D0D0D0 !important;     /* darker on hover, still neutral */
}

/* Kill any remaining warm tones on borders */
#sourcing [class*="border-[#D4C4B2]"],
#sourcing [class*="border-[#BCA89A]"],
#sourcing [class*="border-[#6B5A4A]"],
#sourcing [class*="border-[#3C2F25]"] {
    border-color: #E8E8E8 !important;
}

/* Inner lines / hr / dividers */
#sourcing .w-px,
#sourcing hr,
#sourcing [class*="h-px"],
#sourcing [class*="border-t"],
#sourcing [class*="border-b"] {
    background-color: #E8E8E8 !important;
    border-color: #E8E8E8 !important;
}

/* Force icon containers / small boxes to neutral */
#sourcing .p-3,
#sourcing [class*="p-3"],
#sourcing .rounded-md.border {
    border-color: #E8E8E8 !important;
    background-color: #F8F8F8 !important;
}

/* Icons inside sourcing – make them black/gray, not brown */
#sourcing i[data-lucide],
#sourcing svg {
    color: var(--text-black) !important;
    stroke: var(--text-black) !important;
}



/* ==========================================================================
   SUBTLE BLUR EFFECT ON VIDEO BACKGROUND
   ========================================================================== */

/* Base video positioning (keep if not already present) */
video {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -10;
    pointer-events: none;
}

/* Apply blur filter + optional light tint */
.video-blurred {
    filter: blur(6px) brightness(0.92) saturate(1.05);
    /* 
       Breakdown:
       - blur(6px):     main soft focus effect — adjust 4–10px
       - brightness(0.92): slight darkening to reduce visual noise
       - saturate(1.05): tiny boost to prevent washed-out colors
    */
}

/* Stronger blur on mobile if video feels too busy */
@media (max-width: 768px) {
    .video-blurred {
        filter: blur(10px) brightness(0.88) saturate(1.02);
    }
}

/* Optional: add a very light vignette / edge fade (premium touch) */
.video-blurred::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -9;
    background: radial-gradient(
        circle at center,
        transparent 60%,
        rgba(0,0,0,0.12) 100%
    );
}


/* ==========================================================================
   PROCESS / ACCORDION – force ivory everywhere, kill white
   ========================================================================== */

#process {
    background-color: var(--bg-ivory) !important;
}

#process details,
#process details > div,
#process details summary,
#process .group,
#process [class*="bg-white"],
#process [class*="bg-gray-50"],
#process [class*="bg-gray-100"],
#process [style*="background: white"],
#process [style*="background-color: white"],
#process [style*="background: #fff"],
#process [style*="background-color: #ffffff"] {
    background-color: var(--bg-ivory) !important;
    background: var(--bg-ivory) !important;
}

/* Open state must stay ivory */
#process details[open] > div,
#process details[open] {
    background-color: var(--bg-ivory) !important;
}

/* Subtle hover feedback – never white */
#process summary:hover {
    background: rgba(0,0,0,0.02) !important;
}

/* Prevent any nested white leaks */
#process p,
#process h3,
#process span,
#process div {
    background-color: transparent !important;
}



/* Remove text shadow from ALL header text – clean and sharp */
header,
header * {
    text-shadow: none !important;
}

/* If you still see shadow on specific elements, target them more precisely */
header h1,
header p,
header span,
header .inline-flex,
header a {
    text-shadow: none !important;
}

/* Optional: add back a very subtle lift if it feels too flat */
header h1,
header .text-6xl,
header .text-8xl,
header .text-9xl {
    text-shadow: 0 2px 8px rgba(0,0,0,0.25) !important; /* very light, optional */
}



/* Completely hide hamburger menu icon on mobile */
@media (max-width: 767.98px) {
    #mobile-menu-btn {
        display: none !important;
    }
}


/* Premium spacing for mobile nav bar */
@media (max-width: 767.98px) {
    nav .md\\:hidden {
        margin-top: 1rem;              /* 16px top margin – adjust 0.75rem–1.5rem */
        border-radius: 1rem;           /* soft rounded corners on mobile bar */
        border: 1px solid rgba(0,0,0,0.06);
        box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    }
    
    /* Optional: even more premium – slight inset from sides too */
    nav .md\\:hidden {
        margin-left: 1rem;
        margin-right: 1rem;
    }
}

nav .md\\:hidden a {
    font-family: 'Instrument Serif', Georgia, serif !important;
    font-weight: 400 !important;
}