:root {
    /* ── Enterprise Brand Palette ────────────────────────────────────────────── */
    --purple:            #1E1030;
    --purple-mid:        #2D1B4E;
    --purple-light:      #6B4FA0;
    --purple-tint:       #f5f2fa;
    --gold:              #C8A84B;
    --gold-light:        #E0BC5A;
    /* WCAG AA compliant gold for use on white/light backgrounds (4.5:1+ contrast) */
    --gold-accessible:   #7A5C00;

    /* ── Compliance / Safety Green ───────────────────────────────────────────── */
    --green-compliance:  #2E7D32;
    --green-light:       #4CAF50;

    /* ── Surfaces ────────────────────────────────────────────────────────────── */
    --color-bg:          #FAF7F0;
    --color-primary:     #1A1A1F;
    --color-surface:     #FAF7F0;
    --color-surface-2:   #F0EBE0;
    --color-charcoal:    #1A1A1F;
    --color-border:      rgba(200,168,75,0.15);
    --color-border-subtle: rgba(200,168,75,0.07);

    /* ── Accent aliases ──────────────────────────────────────────────────────── */
    --color-accent:      var(--purple);
    --color-accent-mid:  var(--purple-mid);
    --color-accent-soft: var(--purple-light);
    --color-accent-pale: var(--purple-tint);
    --color-secondary:   var(--gold);
    --color-secondary-light: var(--gold-light);

    /* ── Text ────────────────────────────────────────────────────────────────── */
    --color-white:  #ffffff;
    --color-text:   #1A1A1F;
    --color-muted:  #4A4560;
    --color-subtle: #8A8599;
    --color-dark:   #1A1A1F;
    --color-gray:   #4A4560;

    /* ── Gradients ───────────────────────────────────────────────────────────── */
    --gradient-hero:   linear-gradient(105deg,
                         rgba(14,6,28,.94) 0%,
                         rgba(30,16,48,.88) 35%,
                         rgba(45,27,78,.72) 60%,
                         rgba(58,36,96,.45) 80%,
                         transparent 100%);
    --gradient-accent: linear-gradient(135deg,var(--purple) 0%,var(--purple-mid) 100%);
    --gradient-gold:   linear-gradient(90deg,transparent,var(--purple-mid),var(--gold),var(--purple-mid),transparent);
    --gradient-soft:   linear-gradient(135deg,rgba(30,16,48,.06) 0%,rgba(30,16,48,.02) 100%);
    --gradient-card:   linear-gradient(145deg,var(--color-surface) 0%,var(--color-surface-2) 100%);
    --gradient-dark:   linear-gradient(180deg,#0d0618 0%,#1a0d2e 50%,#2D1B4E 100%);

    /* ── Typography (Playfair Display + DM Sans + DM Mono) ───────────────────── */
    --font-display:  'Playfair Display', Georgia, 'Times New Roman', serif;
    --font-primary:  'DM Sans', system-ui, -apple-system, sans-serif;
    --font-body:     'DM Sans', system-ui, -apple-system, sans-serif;
    --font-mono:     'DM Mono', 'Courier New', monospace;

    --text-xs:   .75rem;  --text-sm:   .875rem; --text-base: 1rem;
    --text-lg:   1.125rem; --text-xl:  1.25rem; --text-2xl:  1.5rem;
    --text-3xl:  1.875rem; --text-4xl: 2.25rem; --text-5xl:  3rem; --text-6xl: 3.75rem;

    /* ── Spacing ─────────────────────────────────────────────────────────────── */
    --space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;
    --space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;
    --space-12:3rem;--space-16:4rem;--space-20:5rem;--space-24:6rem;--space-32:8rem;

    /* ── Section backgrounds ─────────────────────────────────────────────────── */
    --section-bg-hero:    #0d0618;
    --section-bg-default: #FAF7F0;
    --section-bg-warm:    #FAF7F0;
    --section-bg-cool:    #F0EBE0;
    --section-bg-accent:  #1E1030;

    /* ── Radius ──────────────────────────────────────────────────────────────── */
    --radius-sm:4px;--radius-md:10px;--radius-lg:16px;
    --radius-xl:20px;--radius-2xl:28px;--radius-full:9999px;

    /* ── Shadows ─────────────────────────────────────────────────────────────── */
    --shadow-xs:       0 1px 3px rgba(0,0,0,.05);
    --shadow-sm:       0 2px 12px rgba(0,0,0,.06);
    --shadow-md:       0 8px 32px rgba(0,0,0,.08);
    --shadow-lg:       0 24px 60px rgba(0,0,0,.12);
    --shadow-purple:   0 6px 24px rgba(30,16,48,.22),0 2px 8px rgba(30,16,48,.12);
    --shadow-purple-lg:0 16px 48px rgba(30,16,48,.30),0 6px 20px rgba(30,16,48,.18);
    --glow-accent:     0 0 40px rgba(30,16,48,.12);
    --shadow-gold:     0 4px 30px rgba(200,168,75,.18),0 1px 8px rgba(200,168,75,.1);
    --shadow-card:     0 2px 20px rgba(30,16,48,.06),0 1px 4px rgba(30,16,48,.04);

    /* ── Transitions ─────────────────────────────────────────────────────────── */
    --transition-fast:   .35s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base:   .80s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow:   .100s cubic-bezier(0.22, 1, 0.36, 1);
    --transition-spring: .90s cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-out-expo:     cubic-bezier(0.16, 1, 0.3, 1);
    --ease-standard:     cubic-bezier(0.4, 0, 0.2, 1);
    --ease-decelerate:   cubic-bezier(0.0, 0.0, 0.2, 1);

    /* ── Layout ──────────────────────────────────────────────────────────────── */
    --container-width:   1440px;
    --gutter:            1.5rem;
    --section-padding:   4rem;
    --section-padding-sm:2.5rem;
}

@media (min-width: 1500px) {
    :root {
        --container-width: 94vw;
        --gutter: 2rem;
    }
}

/* FIX G1: tighten gutter on small screens so content isn't squeezed */
@media (max-width: 480px) {
    :root { --gutter: 1rem; }
}

/* ── Reset & Base ─────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{
    scroll-behavior:smooth;
    -webkit-text-size-adjust:100%;
    font-size:16px;
    /* FIX ANCHOR: sticky header is 72px + announce bar 36px + 8px buffer = 116px.
       JS (03-announce-bar.js) overrides this dynamically via setProperty()
       to match the exact rendered height on each viewport. */
    scroll-padding-top: 116px;
}
body{
    font-family:var(--font-primary);font-size:var(--text-base);line-height:1.7;
    color:var(--color-text);background-color:var(--purple);
    -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
    text-rendering:optimizeLegibility;overflow-x:hidden;
    font-weight:300;
}
.site-main { background-color: var(--color-bg); }
img,video{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
ul,ol{list-style:none;}
button,input,textarea,select{font:inherit;color:inherit;}
button{cursor:pointer;border:none;background:none;}
h1,h2,h3,h4,h5,h6{
    font-family:var(--font-display);line-height:1.1;
    color:var(--color-charcoal);letter-spacing:0;font-weight:400;
}
p{max-width:68ch;}
::selection{background:rgba(200,168,75,.18);color:var(--color-charcoal);}
::-webkit-scrollbar{width:6px;}
::-webkit-scrollbar-track{background:var(--color-surface);}
::-webkit-scrollbar-thumb{background:rgba(30,16,48,.3);border-radius:3px;}
::-webkit-scrollbar-thumb:hover{background:rgba(30,16,48,.55);}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px;}
@media(prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;}
    html{scroll-behavior:auto;}
}

/* ── Utilities ───────────────────────────────────────────────────────────────── */

.container{max-width:var(--container-width);margin:0 auto;padding:0 var(--gutter);}
.container-fluid{width:100%;padding:0 var(--gutter);}

.section{padding:var(--section-padding) 0;background:var(--section-bg-default);}
.section:nth-of-type(odd){background:var(--section-bg-default);}
.section:nth-of-type(even){background:var(--section-bg-warm);}
.section-light{background:var(--section-bg-cool)!important;}
.section-dark,.section-accent{background:var(--section-bg-accent)!important;}
@media(max-width:768px){.section{padding:var(--section-padding-sm) 0;}}

/* Section header */
.section-header{max-width:700px;margin-bottom:2.5rem;}
.section-header.centered{text-align:center;margin-left:auto;margin-right:auto;}
.section-header.centered p{max-width:60ch;margin-left:auto;margin-right:auto;}

/* Eyebrow label */
.section-eyebrow{
    display:inline-flex;align-items:center;gap:.75rem;
    font-family:var(--font-mono);font-size:.70rem;font-weight:400;
    text-transform:uppercase;letter-spacing:.22em;color:var(--purple);margin-bottom:.75rem;
}
.section-eyebrow::before{
    content:'';display:block;width:28px;height:1px;
    background:currentColor;flex-shrink:0;
}
.section-header.centered .section-eyebrow{justify-content:center;}
.section-header.centered .section-eyebrow::before{display:none;}

/* On dark sections */
.section-dark .section-eyebrow,.section-accent .section-eyebrow{color:var(--gold);}
.section-dark .section-eyebrow::before,.section-accent .section-eyebrow::before{background:var(--gold);}

/* Section title */
.section-title{
    font-family:var(--font-display);font-size:clamp(1.75rem,3vw,2.75rem);
    font-weight:400;color:var(--color-charcoal);line-height:1.08;
    margin-bottom:.9rem;letter-spacing:-.01em;
}
.section-title em{font-style:italic;color:var(--purple);}
.section-dark .section-title,.section-accent .section-title{color:#fff;}
.section-dark .section-title em,.section-accent .section-title em{color:var(--gold);}

.section-body{font-size:.95rem;line-height:1.75;color:var(--color-muted);font-weight:300;}

/* Text utils */
.text-center{text-align:center;}.text-muted{color:var(--color-muted);}
.text-purple{color:var(--purple);}.text-gold{color:var(--gold-accessible,#7A5C00);}
.text-white{color:#fff;}
.font-display{font-family:var(--font-display);}
.font-mono{font-family:var(--font-mono);}

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

/* Divider */
.divider-line{width:40px;height:1px;background:var(--gold);display:inline-block;border-radius:1px;}
.divider-gold{background:var(--gold);}

/* Animate helpers */
/* Animate helpers
   ─────────────────────────────────────────────────────────────────────────────
   Three animation selectors are used across the codebase:
     1. [data-animate]   — modern components (hero, compliance, who-we-serve …)
     2. .animate-box     — inner pages (gallery, about, contact, menu …)
     3. .reveal-up       — home-page cards (compliance, why-dbk, case studies)

   All three start hidden (opacity:0) and become visible when JS adds .is-visible
   via IntersectionObserver (03-animations.js).

   FIX REDUCED-MOTION: The global prefers-reduced-motion rule in reset.css sets
   transition-duration to 0.01ms, which kills the transition but leaves elements
   at opacity:0 forever. We override that here by immediately showing all three
   selectors when the user prefers reduced motion.

   FIX NO-JS: The .no-js class is added to <html> by a noscript inline style in
   app.php. When present, we immediately show all hidden animation elements so
   users without JS can read the content.
   ── */

/* Initial hidden state — all three selectors */
[data-animate],
.animate-box,
.reveal-up {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .55s var(--ease-out-expo), transform .55s var(--ease-out-expo);
}

/* Directional variants for animate-box */
.animate-box { transform: translateY(22px); }
.animate-box[data-animate-effect="fadeInLeft"]  { transform: translateX(-22px); }
.animate-box[data-animate-effect="fadeInRight"] { transform: translateX(22px); }

/* Visible state — added by JS */
[data-animate].is-visible,
.animate-box.is-visible,
.reveal-up.is-visible {
    opacity: 1;
    transform: none;
}

/* FIX: prefers-reduced-motion — show immediately, no animation */
@media (prefers-reduced-motion: reduce) {
    [data-animate],
    .animate-box,
    .reveal-up {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* FIX: no-JS — show immediately when JS is unavailable */
.no-js [data-animate],
.no-js .animate-box,
.no-js .reveal-up {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

/* Misc layout helpers */
.valign{display:flex;align-items:center;}
.position-re{position:relative;}
.o-hidden{overflow:hidden;}
.mb-30{margin-bottom:30px;}.mb-60{margin-bottom:60px;}
.mt-30{margin-top:30px;}.mt-60{margin-top:60px;}.mt-90{margin-top:90px;}

/* ── Inner page justified layout ─────────────────────────────────────────────── */
/* Pages other than home have full-width left-aligned content.
   .inner-page is added to <main> for all routes except /  */
.inner-page .section-header:not(.centered) {
    max-width: 100%;
    margin-bottom: 2.5rem;
    text-align: left;
}
.inner-page .section-header:not(.centered) .section-eyebrow {
    justify-content: flex-start;
}
.inner-page .section-header:not(.centered) .section-eyebrow::before {
    display: block;
}
.inner-page .section-body:not(.text-center) {
    max-width: 72ch;
    text-align: left;
}
/* Section titles on inner pages align left — but NOT when the section-header
   uses the .centered modifier, which explicitly opts in to centred alignment. */
.inner-page .section:not(.section-accent-cta) .section-header:not(.centered) .section-title {
    text-align: left;
}
/* Ensure explicitly-centered headers always win on inner pages */
.inner-page .section-header.centered .section-title,
.inner-page .section-header.centered .section-eyebrow,
.inner-page .section .section-header.centered .section-title {
    text-align: center !important;
}
/* Any element with text-center wins regardless of page/section context */
.text-center .section-title,
.section-title.text-center {
    text-align: center !important;
}
/* Centered wrappers that aren't .section-header.centered (e.g. .test-header) */
[class*="-header"][style*="text-align:center"] .section-title,
.test-header .section-title,
.supply-dark-intro .section-title,
.final-cta-intro .section-title {
    text-align: center;
}

/* ── Icon helpers (replaces CSP-violating SVG inline style= attributes) ── */
.icon-inline {
    vertical-align: middle;
    margin-right: .4rem;
    flex-shrink: 0;
}
.icon-inline--sm {
    margin-right: .3rem;
}

/* ── Thank-you page contact note (replaces inline style= on <p> and <a>) ─ */
.ty-contact-note {
    font-size: 14px;
    color: #6b7280;
}
.ty-contact-phone {
    color: #f59e0b;
    font-weight: 700;
}

/* ── FAQ answer body (replaces style="padding-top:14px") ──────────────── */
.faq-answer-text {
    padding-top: 14px;
}

/* ── Flaticon fallback ─────────────────────────────────────────────────────── */
.flaticon-call::before {
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1L6.6 10.8z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
}

/* ── Skip to main content — WCAG 2.4.1 ─────────────────────────────────────── */
.skip-to-content {
    position: absolute;
    top: -100%;
    left: 1rem;
    z-index: 9999;
    padding: 0.75rem 1.5rem;
    background: var(--purple);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 500;
    border-radius: 0 0 6px 6px;
    text-decoration: none;
    transition: top 0.2s;
}
.skip-to-content:focus {
    top: 0;
    outline: 3px solid var(--gold);
    outline-offset: 2px;
}


/* ── Flash Banner (session-based success notifications) ──────────────────── */
.flash-banner {
    position: fixed;
    top: 88px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    max-width: 520px;
    width: calc(100% - 2rem);
    padding: 16px 20px;
    border-radius: var(--radius-md);
    box-shadow: 0 8px 40px rgba(30,16,48,.16);
    animation: flash-in .3s var(--ease-out-expo);
}
@keyframes flash-in {
    from { opacity: 0; transform: translateX(-50%) translateY(-12px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.flash-banner--success {
    background: var(--color-surface);
    border-left: 3px solid #25D366;
}
.flash-banner__icon {
    font-size: 1.5rem;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 1px;
    color: #25D366;
    transition: color var(--transition-base);
}
.flash-banner__icon svg { display: block; }
.flash-banner__body {
    flex: 1;
    min-width: 0;
}
.flash-banner__title {
    display: block;
    font-family: var(--font-display);
    font-size: .9rem;
    color: var(--color-charcoal);
    margin-bottom: 3px;
    font-weight: 500;
}
.flash-banner__sub {
    font-size: .8rem;
    color: var(--color-muted);
    line-height: 1.6;
}
.flash-banner__sub a {
    color: var(--gold-accessible);
    font-weight: 500;
}
.flash-banner__close {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.2rem;
    color: var(--color-subtle);
    padding: 0;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 1px;
    transition: color var(--transition-fast);
}
.flash-banner__close:hover { color: var(--color-charcoal); }
@media (max-width: 480px) {
    .flash-banner { top: 72px; width: calc(100% - 1rem); }
}

/* ── Cookie Consent Banner ──────────────────────────────────────────────────── */
.cookie-consent {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9000;
    background: var(--purple);
    color: #fff;
    padding: 1rem 0;
    box-shadow: 0 -4px 32px rgba(0,0,0,.2);
    border-top: 1px solid rgba(200,168,75,.15);
    transition: bottom .2s ease;
}
.cookie-consent__inner {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.cookie-consent__text {
    flex: 1;
    font-size: 0.84rem;
    line-height: 1.6;
    color: rgba(255,255,255,.75);
}
.cookie-consent__link {
    color: var(--gold);
    text-decoration: underline;
}
.cookie-consent__actions {
    display: flex;
    gap: 0.75rem;
    flex-shrink: 0;
}
@media (max-width: 640px) {
    .cookie-consent__inner { flex-direction: column; align-items: flex-start; }
    .cookie-consent__actions { width: 100%; }
    .cookie-consent__actions .btn { flex: 1; text-align: center; }
}
/* FIX CK1: on mobile, sticky CTA sits at bottom=0; push cookie banner above it
   so the two fixed bars don't overlap. Sticky CTA is ~64px tall + safe area. */
@media (max-width: 768px) {
    .cookie-consent {
        bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    }
}

/* ── Footer ─────────────────────────────────────────────────────────────────── */
/* .site-footer base styles live in 17-enterprise.css */
.site-footer::before{
    content:'';position:absolute;top:0;left:0;right:0;height:2px;pointer-events:none;
    background:linear-gradient(90deg,transparent,var(--purple-mid),var(--gold),var(--purple-mid),transparent);
}
.footer-inner{max-width:var(--container-width);margin:0 auto;padding:0 var(--gutter);}
/* footer-grid definition and responsive rules live in 17-enterprise.css */
.footer-brand-name{
    font-family:var(--font-display);font-size:1.65rem;font-weight:400;
    color:#fff;letter-spacing:.03em;margin-bottom:.2rem;
}
.footer-brand-name .logo-accent{color:var(--gold);}
.footer-brand-sub{
    font-family:var(--font-mono);font-size:.52rem;letter-spacing:.22em;
    text-transform:uppercase;color:rgba(255,255,255,.28);margin-bottom:1.1rem;
}
.footer-brand-desc{font-size:.84rem;line-height:1.8;color:rgba(255,255,255,.32);margin-bottom:1.5rem;max-width:28ch;}
.footer-social{display:flex;gap:.6rem;}
.footer-social-btn{
    width:34px;height:34px;border:1px solid rgba(255,255,255,.1);border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:.85rem;color:rgba(255,255,255,.4);text-decoration:none;
    transition:all var(--transition-base);
}
.footer-social-btn:hover{border-color:var(--gold);background:var(--gold);color:var(--purple);}
.footer-certifications{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1.1rem;}
.footer-cert-tag{
    padding:.22rem .65rem;background:rgba(200,168,75,.08);
    border:1px solid rgba(200,168,75,.2);border-radius:var(--radius-full);
    font-family:var(--font-mono);font-size:.56rem;font-weight:400;
    color:var(--gold);letter-spacing:.1em;text-transform:uppercase;
}
.footer-heading{
    font-family:var(--font-mono);font-size:.62rem;font-weight:400;
    text-transform:uppercase;letter-spacing:.2em;
    color:rgba(255,255,255,.35);margin-bottom:1.1rem;
}
/* .footer-links styles live in 17-enterprise.css */

.footer-cta-group{display:flex;flex-direction:column;gap:.6rem;margin-top:1.4rem;}
/* .footer-bottom, .footer-legal-links and responsive rules live in 17-enterprise.css */


/* ── WhatsApp Floating Action Button ─────────────────────────────────────── */
.whatsapp-fab {
    position: fixed;
    bottom: 22px;
    right: 22px;
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 7px;
    background: #25D366;
    color: #fff;
    text-decoration: none;
    border-radius: 50px;
    padding: 10px 14px 10px 12px;
    box-shadow: 0 3px 14px rgba(37,211,102,.4), 0 2px 6px rgba(0,0,0,.15);
    font-family: var(--font-primary);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.3px;
    transition: transform .2s ease, box-shadow .2s ease;
    max-width: 135px;
}
.whatsapp-fab:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 22px rgba(37,211,102,.5), 0 3px 9px rgba(0,0,0,.18);
    color: #fff;
    text-decoration: none;
}
.whatsapp-fab:active { transform: translateY(0); }
@media (max-width: 480px) {
    .whatsapp-fab {
        bottom: 16px;
        right: 16px;
        padding: 11px;
        border-radius: 50%;
        max-width: none;
    }
    .whatsapp-fab-label { display: none; }
}
/* FIX WA1: hide FAB on mobile — sticky CTA already provides Call/WhatsApp/Proposal */
@media (max-width: 768px) {
    .whatsapp-fab { display: none; }
}

/* ── Footer Social Links ─────────────────────────────────────────────────── */
.footer-social {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}
.footer-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.5);
    transition: background .2s, color .2s;
    text-decoration: none;
}
.footer-social-link:hover,
.footer-social-link:focus-visible {
    background: var(--gold);
    color: var(--purple);
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

/* ── Grid & Layout Helpers — Éleve style ─────────────────────────────────────── */
/* .container and .container-fluid are defined in core/02-utilities.css */
.row{display:flex;flex-wrap:wrap;margin-right:-15px;margin-left:-15px;}
[class^="col-"],[class*=" col-"]{position:relative;width:100%;padding-right:15px;padding-left:15px;}
@media(min-width:768px){
    .col-md-1{flex:0 0 8.3333%;max-width:8.3333%;}.col-md-2{flex:0 0 16.6667%;max-width:16.6667%;}
    .col-md-3{flex:0 0 25%;max-width:25%;}.col-md-4{flex:0 0 33.3333%;max-width:33.3333%;}
    .col-md-5{flex:0 0 41.6667%;max-width:41.6667%;}.col-md-6{flex:0 0 50%;max-width:50%;}
    .col-md-7{flex:0 0 58.3333%;max-width:58.3333%;}.col-md-8{flex:0 0 66.6667%;max-width:66.6667%;}
    .col-md-9{flex:0 0 75%;max-width:75%;}.col-md-10{flex:0 0 83.3333%;max-width:83.3333%;}
    .col-md-11{flex:0 0 91.6667%;max-width:91.6667%;}.col-md-12{flex:0 0 100%;max-width:100%;}
    .offset-md-1{margin-left:8.3333%;}.offset-md-2{margin-left:16.6667%;}
    .offset-md-3{margin-left:25%;}.offset-md-4{margin-left:33.3333%;}
    .offset-md-5{margin-left:41.6667%;}.offset-md-6{margin-left:50%;}
}
@media(min-width:576px){.col-sm-6{flex:0 0 50%;max-width:50%;}.col-sm-12{flex:0 0 100%;max-width:100%;}}

/* Spacing helpers */
.mb-30{margin-bottom:30px;}.mb-60{margin-bottom:60px;}
.mt-30{margin-top:30px;}.mt-60{margin-top:60px;}.mt-90{margin-top:90px;}
.section-padding{padding-top:80px;padding-bottom:80px;}
@media(max-width:767px){.section-padding{padding-top:50px;padding-bottom:50px;}}

/* Banner header */
.banner-header{
    position:relative;padding:120px 0 80px;
    background:linear-gradient(160deg,rgba(30,6,60,.9) 0%,rgba(20,4,40,.95) 100%);
    color:#fff;text-align:center;overflow:hidden;
}
.banner-header::after{
    content:'';position:absolute;top:0;left:0;right:0;height:3px;
    background:linear-gradient(90deg,transparent,var(--purple),var(--gold),var(--purple),transparent);
}
.banner-header h5{font-size:.69rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:12px;font-weight:500;font-family:var(--font-primary);}
.banner-header h1{font-family:var(--font-display);font-size:clamp(2rem,5vw,3.5rem);font-weight:300;color:#fff;margin:0;line-height:1.1;}
.banner-header h1 em{font-style:italic;color:var(--gold);}

/* Stats band styles live in components/05-about.css */

/* Process steps */
.process-steps{display:flex;flex-wrap:wrap;gap:32px;counter-reset:step;}
.process-steps .step{flex:1 1 200px;position:relative;padding-left:52px;counter-increment:step;}
.process-steps .step::before{content:counter(step,decimal-leading-zero);position:absolute;left:0;top:0;font-family:var(--font-display);font-size:1.6rem;font-weight:300;color:var(--purple);line-height:1;}
.process-steps .step h5{font-size:1rem;font-weight:500;margin-bottom:8px;color:var(--color-charcoal);}
.process-steps .step p{font-size:.9rem;color:var(--color-muted);margin:0;line-height:1.6;}

/* Grid helpers */
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
@media(max-width:991px){.grid-4{grid-template-columns:repeat(2,1fr);}}
@media(max-width:575px){.grid-4{grid-template-columns:1fr;}}
.rooms1{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
@media(max-width:991px){.rooms1{grid-template-columns:repeat(2,1fr);}}
@media(max-width:575px){.rooms1{grid-template-columns:1fr;}}
.rooms1 .item{position:relative;overflow:hidden;border-radius:var(--radius-md);}
.rooms1 .item img{width:100%;height:260px;object-fit:cover;display:block;transition:transform .4s ease;}
.rooms1 .item:hover img{transform:scale(1.04);}

/* ── Client Logo Strip ──────────────────────────────────────────────────────── */
.client-logos-strip {
    padding: 1.75rem 0;
    border-bottom: 1px solid rgba(30,16,48,0.08);
    background: var(--color-surface);
    overflow: hidden;
}
.client-logos-strip__label {
    display: block;
    text-align: center;
    max-width: var(--container-width);
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 0 var(--gutter);
    box-sizing: border-box;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--color-muted, #9b8ea8);
    margin-bottom: 1.5rem;
    font-weight: 400;
    font-family: var(--font-mono);
}

/* ── Marquee wrapper ─────────────────────────────────────────────────────────
   FIX: previous approach animated 4 separate tracks each with translateX(-100%).
   That moves each element by its own offsetWidth — not the combined content
   width — causing gaps and doubled-logo artefacts at the seams.

   CORRECT pattern: one .inner wrapper holding exactly 2 identical tracks.
   Animating the inner by -50% scrolls exactly one full track width. At the
   end of the animation the view looks identical to the start, so the CSS
   reset to 0 is completely imperceptible — a seamless infinite loop.
── */
.client-logos-strip__marquee {
    overflow: hidden;
    user-select: none;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--gutter);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
/* Inner flex wrapper: width = exactly 2x one track. Translating -50% = one track. */
.client-logos-strip__inner {
    display: flex;
    width: max-content;
    animation: logoMarquee 22s linear infinite;
    will-change: transform;
}
.client-logos-strip__track {
    display: flex;
    align-items: center;
    gap: 4.5rem;
    flex-shrink: 0;
    padding: 0 2.25rem;
}
@keyframes logoMarquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
.client-logos-strip:hover .client-logos-strip__inner {
    animation-play-state: paused;
}
.client-logos-strip__item {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.client-logo-img {
    object-fit: contain;
    height: 52px;
    width: auto;
    max-width: 150px;
    opacity: .7;
    filter: grayscale(25%);
    transition: opacity .25s ease, filter .25s ease;
    flex-shrink: 0;
}
.client-logo-img:hover {
    opacity: 1;
    filter: grayscale(0%);
}
@media (hover: none) {
    .client-logo-img:hover { opacity: .7; filter: grayscale(25%); }
}
@media (prefers-reduced-motion: reduce) {
    .client-logos-strip__inner {
        animation: none;
        width: auto;
        flex-wrap: wrap;
        justify-content: center;
    }
    .client-logos-strip__marquee {
        -webkit-mask-image: none;
        mask-image: none;
    }
    .client-logos-strip__track:last-child { display: none; }
}

/* ── Site Header Wrapper — sticky, overlays hero ── */
.site-header-wrap {
    position: sticky;
    top: 0;
    z-index: 1200;
    display: block;
    margin-bottom: -116px;
    overflow: visible;
}

/* ── Site Header ────────────────────────────────────────────────────────────── */
.site-header {
    position: relative;
    background: transparent;
    border-bottom: 1px solid transparent;
    overflow: visible;
    will-change: background, box-shadow;
    transition: background .3s cubic-bezier(.4,0,.2,1),
                box-shadow .3s cubic-bezier(.4,0,.2,1),
                border-color .3s cubic-bezier(.4,0,.2,1);
}

/* On scroll: solid header */
.site-header.scrolled {
    background: rgb(250,247,240);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    box-shadow: 0 4px 40px rgba(30,16,48,.10);
    border-bottom-color: rgba(200,168,75,.18);
}

/* ── Transparent state: white content ── */
.site-header:not(.scrolled) .logo-wordmark { color: #fff; }
.site-header:not(.scrolled) .main-nav a { color: rgba(255,255,255,.85); }
.site-header:not(.scrolled) .main-nav a:hover,
.site-header:not(.scrolled) .main-nav a.active {
    color: var(--gold-light);
    background: rgba(255,255,255,.1);
}
.site-header:not(.scrolled) .menu-toggle span { background: rgba(255,255,255,.9); }
.site-header.scrolled .logo-wordmark { color: var(--color-charcoal); }
.site-header.scrolled .main-nav a { color: var(--color-muted); }

.header-inner {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--gutter);
    height: clamp(96px, 9vw, 116px);
    display: flex;
    align-items: center;
    position: relative;
    transition: height .28s cubic-bezier(0, 0, 0.2, 1);
}
.site-header.scrolled .header-inner {
    height: 52px;
}

/* ── Before scroll: logo left, nav centered ── */
.header-group {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    z-index: 2;
}
.header-inner .logo {
    z-index: 2;
    animation: navFadeIn .5s ease both;
}

/* Nav is ALWAYS absolutely centered — never moves */
.header-inner .main-nav {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    opacity: 1;
    transition: opacity .35s ease;
}

@keyframes navFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* CTA hidden before scroll */
.header-inner .header-actions {
    margin-left: auto;
    flex-shrink: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity .4s ease .1s;
}
.site-header.scrolled .header-inner .header-actions {
    opacity: 1;
    pointer-events: auto;
}

/* ── On scroll: logo stays left, shrinks ── */
.site-header.scrolled .header-group {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

/* ── Mobile: logo centered before scroll ── */
@media (max-width: 1024px) {
    .header-inner {
        justify-content: center;
    }
    .site-header:not(.scrolled) .header-inner .logo {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
    .site-header:not(.scrolled) .header-inner .main-nav { display: none; }
    .site-header.scrolled .header-inner .logo {
        position: static;
        transform: none;
    }
}

/* ── Logo ── */
.logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    gap: .5rem;
    padding: .25rem .25rem;
    border-radius: var(--radius-sm);
    transition: opacity var(--transition-base);
    flex-shrink: 0;
}
.logo:hover { opacity: .8; }

/* ── Logo image crossfade wrapper ── */
.logo-img-wrap {
    position: relative;
    display: block;
    flex-shrink: 0;
    /* Height matches the white logo; explicit so the absolute colour logo
       can't escape the box and cause a visual bulge */
    height: clamp(72px, 7vw, 88px);
    width: clamp(72px, 7vw, 88px);
    overflow: hidden;
    transition: height .28s cubic-bezier(0, 0, 0.2, 1),
                width  .28s cubic-bezier(0, 0, 0.2, 1);
}
.logo-img {
    display: block;
    height: 100%;
    width: auto;
    transition: opacity .3s cubic-bezier(.4,0,.2,1);
}
/* Colour logo overlays white logo; sized to match wrapper */
.logo-img--color {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: auto;
    opacity: 0;
}
.site-header.scrolled .logo-img-wrap     { height: 38px; width: 38px; }
.site-header.scrolled .logo-img--white   { opacity: 0; }
.site-header.scrolled .logo-img--color   { opacity: 1; }

/* Wordmark: hidden before scroll, visible on scroll */
.logo-wordmark {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--purple);
    line-height: 1.2;
    white-space: nowrap;
    opacity: 0;
    max-width: 0;
    overflow: hidden;
    transition: opacity .3s cubic-bezier(.4,0,.2,1),
                max-width .3s cubic-bezier(.4,0,.2,1);
}
.site-header.scrolled .logo-wordmark {
    opacity: 1;
    max-width: 240px;
}
.logo-sub {
    font-family: var(--font-mono);
    font-size: .48rem;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--color-subtle);
    line-height: 1;
    margin-top: 3px;
    display: block;
}

/* ── Center nav — grid column 2 ── */
.main-nav {
    position: static;
    transform: none;
}
.main-nav ul {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .2rem;
}
.main-nav a {
    display: block;
    padding: .45rem .85rem;
    color: var(--color-muted);
    font-size: .8125rem;
    font-weight: 400;
    letter-spacing: .04em;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    transition: color var(--transition-base), background var(--transition-base);
}
.main-nav a:hover {
    color: var(--purple);
    background: rgba(30,16,48,.06);
}
.main-nav a.active {
    color: var(--purple);
    background: rgba(30,16,48,.07);
    font-weight: 500;
}

/* ── Header Actions (right column) ── */
.header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
}
/* CTA compact in header */
.header-actions .btn {
    padding: .3rem 1rem;
    font-size: .75rem;
}

/* ── Mobile Toggle ── */
.menu-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    width: 40px;
    height: 40px;
    padding: 10px 8px;
    border-radius: var(--radius-sm);
    background: none;
    transition: background var(--transition-base);
}
.menu-toggle:hover { background: rgba(30,16,48,.06); }
.menu-toggle span {
    display: block;
    height: 1.5px;
    width: 100%;
    background: var(--color-charcoal);
    border-radius: 2px;
    transition: all var(--transition-base);
    transform-origin: center;
}
.menu-toggle span:nth-child(2) { width: 75%; }
.menu-toggle.active span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); width: 100%; }
.menu-toggle.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.menu-toggle.active span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); width: 100%; }

/* ── Mobile Nav Drawer ── */
.mobile-nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(360px, 88vw);
    background: var(--purple);
    border-left: 1px solid rgba(200,168,75,.15);
    z-index: 1201;
    transform: translateX(100%);
    transition: transform var(--transition-slow);
    display: flex;
    flex-direction: column;
    box-shadow: -20px 0 60px rgba(0,0,0,.25);
}
.mobile-nav.open { transform: translateX(0); }

.mobile-nav-top {
    padding: 20px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255,255,255,.08);
    flex-shrink: 0;
}
.mobile-nav-brand {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 500;
    color: #fff;
}
.mobile-nav-brand .logo-accent { color: var(--gold); }
.mobile-nav-close {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: rgba(255,255,255,.7);
    transition: all var(--transition-base);
    cursor: pointer;
    background: none;
}
.mobile-nav-close svg { display: block; transition: color var(--transition-base); }
.mobile-nav-close:hover { background: var(--gold); color: var(--purple); border-color: var(--gold); }

.mobile-nav-inner { padding: 16px 0 0; flex: 1; overflow-y: auto; }
.mobile-nav ul { display: flex; flex-direction: column; list-style: none; margin: 0; padding: 0; }
.mobile-nav li { display: block; }
.mobile-nav a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--font-primary);
    font-size: 1.05rem;
    font-weight: 400;
    color: rgba(255,255,255,.75);
    padding: 15px 28px;
    border-bottom: 1px solid rgba(255,255,255,.06);
    transition: color var(--transition-base), background var(--transition-base), padding-left var(--transition-base);
    letter-spacing: .02em;
    min-height: 52px;
    text-decoration: none;
    position: relative;
}
/* Left accent bar on active item */
.mobile-nav a.active {
    color: var(--gold);
    background: rgba(200,168,75,.07);
    padding-left: 32px;
    font-weight: 500;
}
.mobile-nav a.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--gold);
    border-radius: 0 2px 2px 0;
}
.mobile-nav a:hover {
    color: #fff;
    background: rgba(255,255,255,.06);
    padding-left: 32px;
}
/* Arrow — transitions from static › to animated → on hover */
.mobile-nav-arr {
    font-size: 1rem;
    opacity: .25;
    transition: opacity var(--transition-base), transform var(--transition-base);
    flex-shrink: 0;
}
.mobile-nav a:hover .mobile-nav-arr,
.mobile-nav a.active .mobile-nav-arr {
    opacity: .7;
    transform: translateX(4px);
}

.mobile-nav-ctas {
    padding: 20px 28px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-top: 1px solid rgba(255,255,255,.08);
    flex-shrink: 0;
}
.mobile-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 75%;
    margin: 0 auto;
    padding: .65rem .75rem;
    border-radius: var(--radius-md);
    font-size: .78rem;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    transition: all var(--transition-base);
}
.mobile-cta.btn-gold {
    background: var(--gold);
    color: #1a0d2e;
    border: 1px solid var(--gold);
    font-weight: 700;
    box-shadow: 0 2px 12px rgba(200,168,75,.35);
}
.mobile-cta.btn-outline-white {
    background: rgba(255,255,255,.08);
    color: rgba(255,255,255,.8);
    border: 1px solid rgba(255,255,255,.15);
}

/* Overlay */
.mobile-nav-overlay {
    position: fixed;
    inset: 0;
    background: rgba(14,6,28,.65);
    backdrop-filter: blur(4px);
    z-index: 1199;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-slow);
}
.mobile-nav-overlay.active { opacity: 1; pointer-events: all; }

/* ── Responsive ── */
@media (max-width: 1200px) {
    .header-inner { padding: 0 1rem; gap: 1rem; }
    .main-nav a { padding: .4rem .7rem; font-size: .78rem; }
}
@media (max-width: 1100px) {
    /* logo uses clamp() — no override needed */
}
@media (max-width: 1024px) {
    .header-inner { padding: 0 1.25rem; gap: .75rem; }
    .main-nav a { padding: .35rem .6rem; font-size: .75rem; }
    /* logo uses clamp() — no override needed */
}
@media (max-width: 1024px) {
    .main-nav { display: none; }
    .menu-toggle { display: flex; }
    .header-actions .btn { display: none; }
    .cart-toggle-btn { display: inline-flex !important; }
    .header-inner {
        display: flex;
        height: 96px;
        padding: 0 1.25rem;
        gap: .75rem;
        align-items: center;
    }
    .header-actions {
        gap: .375rem;
        flex-wrap: nowrap;
        min-width: 0;
    }
    /* Only show wordmark on scroll on mobile too */
    .site-header:not(.scrolled) .logo-wordmark { opacity: 0 !important; max-width: 0 !important; }
    .site-header.scrolled .logo-wordmark {
        font-size: .95rem;
        max-width: 180px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}
@media (min-width: 1025px) {
    .header-actions .btn { display: inline-flex; }
}
@media (max-width: 480px) {
    .cart-toggle-btn { padding: .4rem .6rem; font-size: .68rem; }
    .logo-wordmark { font-size: .82rem; letter-spacing: .01em; }
}

/* ── Right nav plain links ── */
.main-nav-link {
    display: block;
    padding: .45rem .85rem;
    color: var(--color-muted);
    font-size: .8125rem;
    font-weight: 400;
    letter-spacing: .04em;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    text-decoration: none;
    transition: color var(--transition-base), background var(--transition-base);
}
.main-nav-link:hover, .main-nav-link.active {
    color: var(--purple);
    background: rgba(30,16,48,.06);
}
@media (max-width: 900px) {
    .main-nav-link { display: none; }
}

/* ── Buttons ─────────────────────────────────────────────────────────────────── */
.btn{
    display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
    padding:.7rem 1.5rem;border-radius:var(--radius-sm);text-decoration:none;
    font-family:var(--font-primary);font-weight:500;font-size:.8125rem;
    letter-spacing:.08em;text-transform:uppercase;cursor:pointer;border:none;
    transition:all var(--transition-base);position:relative;white-space:nowrap;
    -webkit-user-select:none;user-select:none;
}
.btn:active{transform:scale(.97)!important;}

/* Primary (accent = plum) */
.btn-accent,.btn-primary{
    background:var(--purple);color:#fff;border:1.5px solid var(--purple);
    box-shadow:var(--shadow-purple);
}
.btn-accent:hover,.btn-primary:hover{
    background:var(--purple-mid);border-color:var(--purple-mid);color:#fff;
    transform:translateY(-2px);box-shadow:var(--shadow-purple-lg);
}

/* Gold accent button */
.btn-gold{
    background:var(--gold);color:var(--purple);border:1.5px solid var(--gold);
    box-shadow:var(--shadow-gold);
}
.btn-gold:hover{
    background:var(--gold-light);border-color:var(--gold-light);color:var(--purple);
    transform:translateY(-2px);box-shadow:0 8px 36px rgba(200,168,75,.35);
}

/* Outline (plum border) */
.btn-outline{background:transparent;border:1.5px solid var(--purple);color:var(--purple);}
.btn-outline:hover{background:var(--purple);color:#fff;transform:translateY(-2px);box-shadow:var(--shadow-purple);}

/* Outline white (for dark backgrounds) */
.btn-outline-white{background:transparent;border:1.5px solid rgba(255,255,255,.3);color:rgba(255,255,255,.85);}
.btn-outline-white:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-1px);}

/* Ghost */
.btn-ghost{background:transparent;color:var(--color-muted);border:1.5px solid var(--color-border);}
.btn-ghost:hover{background:rgba(30,16,48,.06);color:var(--purple);border-color:rgba(30,16,48,.2);}

/* Sizes */
.btn-sm{padding:.45rem .9rem;font-size:.72rem;}
.btn-lg{padding:1rem 2.25rem;font-size:.875rem;}
.btn-block,.w-100{width:100%;}

/* ── Cards ───────────────────────────────────────────────────────────────────── */

/* Feature card */
.feature-card{
    background:var(--color-surface);border:1px solid var(--color-border);
    border-radius:var(--radius-md);padding:2rem;
    transition:all var(--transition-base);position:relative;overflow:hidden;
}
.feature-card::before{
    content:'';position:absolute;top:0;left:0;right:0;height:2px;
    background:linear-gradient(90deg,var(--purple),var(--gold));
    opacity:0;transition:opacity var(--transition-base);
}
.feature-card:hover{transform:translateY(-4px);border-color:rgba(200,168,75,.25);box-shadow:var(--shadow-md);}
.feature-card:hover::before{opacity:1;}
.feature-card-icon{
    width:48px;height:48px;background:rgba(200,168,75,.08);
    border:1px solid rgba(200,168,75,.2);border-radius:var(--radius-sm);
    display:flex;align-items:center;justify-content:center;
    margin-bottom:1.25rem;font-size:1.4rem;color:var(--gold);
    transition:all var(--transition-spring);
}
.feature-card:hover .feature-card-icon{background:var(--purple);border-color:var(--purple);transform:scale(1.06);}
.feature-card:hover .feature-card-icon svg{stroke:white;}
.feature-card-title{font-family:var(--font-display);font-size:1.2rem;font-weight:400;color:var(--color-charcoal);margin-bottom:.55rem;}
.feature-card-body{font-size:.875rem;color:var(--color-muted);line-height:1.7;}
.feature-card-accent{width:28px;height:2px;background:linear-gradient(90deg,var(--purple),var(--gold));margin-top:1.1rem;border-radius:2px;}

/* Compliance badge */
.compliance-badge{
    background:var(--color-surface);border:1px solid var(--color-border);
    border-radius:var(--radius-md);padding:1.75rem;text-align:center;
    transition:all var(--transition-base);position:relative;overflow:hidden;
}
.compliance-badge:hover{border-color:rgba(200,168,75,.3);transform:translateY(-4px);box-shadow:var(--shadow-md);}
.compliance-badge-icon{
    width:52px;height:52px;margin:0 auto 1rem;
    background:rgba(200,168,75,.08);border:1px solid rgba(200,168,75,.2);
    border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;
    transition:all var(--transition-spring);color:var(--gold);
}
.compliance-badge:hover .compliance-badge-icon{background:var(--purple);transform:scale(1.08);}
.compliance-badge-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:stroke var(--transition-base);}
.compliance-badge:hover .compliance-badge-icon svg{stroke:white;}
.compliance-badge-name{font-family:var(--font-display);font-size:1rem;font-weight:400;color:var(--color-charcoal);margin-bottom:.35rem;}
.compliance-badge-desc{font-size:.75rem;color:var(--color-muted);line-height:1.6;}

/* Capacity item */
.capacity-list{display:flex;flex-direction:column;gap:.75rem;}
.capacity-item{
    display:flex;align-items:flex-start;gap:1rem;padding:1.1rem 1.4rem;
    background:var(--color-surface);border:1px solid var(--color-border);
    border-radius:var(--radius-md);transition:all var(--transition-base);
}
.capacity-item:hover{border-color:rgba(200,168,75,.25);transform:translateX(4px);box-shadow:var(--shadow-sm);}
.capacity-item-icon{
    width:36px;height:36px;flex-shrink:0;background:rgba(200,168,75,.08);
    border:1px solid rgba(200,168,75,.18);border-radius:var(--radius-sm);
    display:flex;align-items:center;justify-content:center;color:var(--gold);
    transition:all var(--transition-spring);
}
.capacity-item:hover .capacity-item-icon{background:var(--purple);color:white;border-color:var(--purple);}
.capacity-item-label{font-family:var(--font-mono);font-size:.6rem;text-transform:uppercase;letter-spacing:.12em;color:var(--gold);font-weight:400;margin-bottom:.2rem;}
.capacity-item-value{font-size:.875rem;color:var(--color-charcoal);line-height:1.5;}

/* Testimonial card */
.testimonial-card{
    background:var(--color-surface);border:1px solid var(--color-border);
    border-radius:var(--radius-md);padding:2.25rem;
    position:relative;overflow:hidden;transition:all var(--transition-base);
}
.testimonial-card::before{
    content:'\201C';position:absolute;top:-.25rem;left:1.5rem;
    font-size:6rem;font-family:var(--font-display);color:rgba(200,168,75,.1);
    line-height:1;pointer-events:none;
}
.testimonial-card:hover{border-color:rgba(200,168,75,.28);transform:translateY(-4px);box-shadow:var(--shadow-md);}
.testimonial-text{
    font-family:var(--font-display);font-size:1.05rem;font-style:italic;
    font-weight:400;color:var(--color-charcoal);line-height:1.65;
    margin-bottom:1.5rem;position:relative;z-index:1;
}
.testimonial-author{display:flex;align-items:center;gap:.75rem;}
.testimonial-author-avatar{
    width:40px;height:40px;border-radius:50%;background:rgba(200,168,75,.1);
    border:2px solid rgba(200,168,75,.2);display:flex;align-items:center;
    justify-content:center;font-size:1rem;flex-shrink:0;
}
.testimonial-author-name{font-family:var(--font-mono);font-size:.72rem;font-weight:400;letter-spacing:.1em;text-transform:uppercase;color:var(--color-charcoal);}
.testimonial-author-org{font-size:.75rem;color:var(--gold);margin-top:2px;}

/* Supply / dark-section card */
.supply-card{
    padding:1.75rem 1.5rem;background:rgba(255,255,255,.03);
    border:1px solid rgba(200,168,75,.1);border-radius:var(--radius-md);
    transition:border-color var(--transition-base),background var(--transition-base),
               box-shadow var(--transition-base),transform var(--transition-base);
    position:relative;overflow:hidden;
}
.supply-card::before{
    content:'';position:absolute;inset:0;
    background:radial-gradient(circle at 50% 0%,rgba(200,168,75,.08),transparent 70%);
    opacity:0;transition:opacity var(--transition-base);border-radius:var(--radius-md);
}
.supply-card:hover{border-color:rgba(200,168,75,.3);background:rgba(200,168,75,.04);box-shadow:0 8px 40px rgba(200,168,75,.1);transform:translateY(-3px);}
.supply-card:hover::before{opacity:1;}
.supply-card-icon{font-size:1.75rem;margin-bottom:1rem;color:var(--gold);}
.supply-card-title{font-family:var(--font-display);font-size:.9375rem;font-weight:400;color:#fff;margin-bottom:.5rem;}
.supply-card-desc{font-size:.8125rem;line-height:1.65;color:rgba(255,255,255,.4);}
.supply-card-accent{width:28px;height:1px;background:linear-gradient(90deg,var(--purple-light),var(--gold));margin-top:1rem;border-radius:2px;}

/* ── Forms ───────────────────────────────────────────────────────────────────── */
.form-group{margin-bottom:1.1rem;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
@media(max-width:480px){.form-row{grid-template-columns:1fr;}}
.form-label{
    display:block;font-family:var(--font-mono);font-size:.65rem;font-weight:400;
    text-transform:uppercase;letter-spacing:.15em;color:var(--color-muted);
    margin-bottom:.4rem;transition:color var(--transition-fast);
}
.form-group:focus-within .form-label{color:var(--purple);}
.form-control{
    width:100%;padding:.85rem 1rem;background:var(--color-bg);
    border:1.5px solid var(--color-border);border-radius:var(--radius-sm);
    color:var(--color-charcoal);font-size:.875rem;font-family:var(--font-primary);
    /* FIX FM1: .85rem top+bottom = ~27px + 1.5×14px line-height = ~48px — meets WCAG 2.5.5 44px minimum */
    line-height:1.5;transition:all var(--transition-base);outline:none;
    -webkit-appearance:none;appearance:none;
}
.form-control::placeholder{color:var(--color-subtle);}
.form-control:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(200,168,75,.12);}
.form-control:hover:not(:focus){border-color:rgba(200,168,75,.3);}
textarea.form-control{resize:vertical;min-height:110px;}
select.form-control{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B6B6B' stroke-width='2'%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;
}
/* Dark variant */
.form-control-dark{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1);color:#fff;}
.form-control-dark::placeholder{color:rgba(255,255,255,.3);}
.form-control-dark:focus{border-color:rgba(200,168,75,.5);background:rgba(200,168,75,.06);box-shadow:0 0 0 3px rgba(200,168,75,.12);color:#fff;}
/* Error */
.form-control.error{border-color:rgba(239,68,68,.5);background:rgba(239,68,68,.03);}
.form-error{font-size:.72rem;color:#e05252;margin-top:.3rem;}
/* Feedback */
#heroFeedback,.form-feedback{
    border-radius:var(--radius-sm);border:1px solid rgba(200,168,75,.2);
    background:rgba(200,168,75,.06);color:var(--color-charcoal);
    padding:.75rem 1rem;font-size:.875rem;
}
.form-error-summary{padding:.9rem 1.1rem;border-radius:var(--radius-sm);border:1px solid rgba(239,68,68,.3);background:rgba(239,68,68,.06);color:#f87171;font-size:.875rem;margin-bottom:1.1rem;}
.form-error-summary ul{list-style:disc;padding-left:1.25rem;margin-top:.5rem;}
.form-privacy{font-family:var(--font-mono);font-size:.65rem;color:var(--color-subtle);margin-top:.65rem;text-align:center;letter-spacing:.06em;}

/* ── Inline per-field error messages (aria-describedby pattern) ── */
.form-field-error {
    display: block;
    margin-top: .3rem;
    font-size: .8rem;
    color: #c0392b;
    font-family: var(--font-body, 'DM Sans', sans-serif);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   ANNOUNCE BAR
   ═══════════════════════════════════════════════════════════════════════════════ */
.announce-bar {
    background: transparent;
    color: rgba(255,255,255,.82);
    font-family: var(--font-mono);
    font-size: .7rem;
    letter-spacing: .1em;
    padding: 0;
    line-height: 1;
    border-bottom: none;
    display: flex;
    align-items: stretch;
    overflow: hidden;
    height: 36px;
}

/* ── Scrolling track — takes all available width ── */
.announce-bar__marquee-wrap {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

@keyframes announce-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Track — static by default, JS adds .is-scrolling when text overflows */
.announce-bar__track {
    display: flex;
    white-space: nowrap;
}

/* ── Static state: text fits, show centred, hide duplicate span ── */
.announce-bar__track:not(.is-scrolling) {
    justify-content: center;
    width: 100%;
}
.announce-bar__track:not(.is-scrolling) .announce-bar__text:nth-child(2) {
    display: none;
}

/* ── Scrolling state: JS-activated ── */
.announce-bar__track.is-scrolling {
    width: max-content; /* must be explicit — flex child collapses without it */
    animation: announce-scroll 28s linear infinite;
    will-change: transform;
}
.announce-bar__marquee-wrap:hover .announce-bar__track.is-scrolling,
.announce-bar__marquee-wrap:focus-within .announce-bar__track.is-scrolling {
    animation-play-state: paused;
}

.announce-bar__text {
    display: inline-block;
    padding: 0 3rem; /* gap between loop repetitions */
    white-space: nowrap;
}

/* ── Right-side fixed area: CTA + dismiss ── */
.announce-bar__actions {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    padding: 0 10px 0 0;
}

.announce-bar__cta {
    color: var(--gold);
    text-decoration: none;
    font-weight: 400;
    white-space: nowrap;
    padding: 0 10px;
    transition: opacity var(--transition-fast);
    display: inline-flex;
    align-items: center;
    height: 36px;
}
.announce-bar__cta:hover { opacity: .75; text-decoration: underline; }

/* Dismiss button — WCAG 2.5.5 44×44px touch target */
.announce-bar__dismiss {
    background: none;
    border: none;
    color: rgba(255,255,255,.5);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
    transition: color var(--transition-fast);
}
.announce-bar__dismiss:hover { color: rgba(255,255,255,.9); }

/* ── Mobile — hide distracting announce bar, use WhatsApp FAB instead ── */
@media (max-width: 480px) {
    .announce-bar { display: none; }
}
@media (min-width: 481px) and (max-width: 640px) {
    .announce-bar {
        font-size: .65rem;
        letter-spacing: .06em;
    }
}

/* .whatsapp-fab styles live in layout/01-footer.css */

/* ═══════════════════════════════════════════════════════════════════════════════
   HERO — Full-bleed
   ═══════════════════════════════════════════════════════════════════════════════ */
.hero {
    position: relative;
    min-height: 100vh;
    margin-top: -116px;
    padding-top: clamp(96px, 9vw, 116px);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    overflow: hidden;
    color: #fff;
    box-sizing: border-box;
}

/* ── Background image slideshow ── */
.hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}
.hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: var(--gradient-hero);
    pointer-events: none;
}
.hero-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
    filter: saturate(.7) brightness(.85);
    opacity: 0;
    transition: opacity 1.4s ease;
    transform: scale(1.06);
    will-change: opacity, transform;
}
.hero-slide.active {
    opacity: 1;
    transform: scale(1);
    transition: opacity 1.4s ease, transform 8s ease;
}

/* ── Mobile: disable ken-burns, darken overlay, anchor top ── */
@media (max-width: 768px) {
    .hero-slide {
        /* No zoom animation on mobile — reduces jitter and battery drain */
        transform: scale(1) !important;
        transition: opacity 1.4s ease !important;
        will-change: opacity;
        /* Anchor top-center so faces/food stay visible */
        object-position: center center;
        /* Slightly desaturated and dimmed for outdoor readability */
        filter: saturate(.5) brightness(.75);
    }
    .hero-slide.active {
        transform: scale(1) !important;
        transition: opacity 1.4s ease !important;
    }
    /* Heavier dark overlay on mobile */
    .hero-bg::after {
        background: linear-gradient(
            180deg,
            rgba(14,6,28,.75) 0%,
            rgba(14,6,28,.60) 40%,
            rgba(14,6,28,.80) 100%
        );
    }
}
@media (max-width: 480px) {
    .hero-slide {
        filter: saturate(.4) brightness(.7);
        object-position: center center;
    }
    .hero-bg::after {
        background: linear-gradient(
            180deg,
            rgba(14,6,28,.82) 0%,
            rgba(14,6,28,.68) 50%,
            rgba(14,6,28,.85) 100%
        );
    }
}

/* ── Grain overlay ── */
.hero-grain {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: .28;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
}

/* ── Inner wrap — fills hero, centres content vertically ── */
.hero__inner {
    position: relative;
    z-index: 3;
    width: 100%;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(2rem, 4vh, 3.5rem) 0 clamp(4rem, 8vh, 7rem);
    box-sizing: border-box;
    min-height: 0;
}

/* ── Centred single-column layout — wider on large screens ── */
.hero__content-wrap {
    width: min(1400px, 92%);
    margin: 0 auto;
    text-align: center;
    padding: 0 var(--gutter);
    animation: heroFadeUp 1.1s ease both;
}
@keyframes heroFadeUp {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Eyebrow ── */
.hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-bottom: clamp(1rem, 2vh, 1.75rem);
}
.hero__eyebrow-line {
    width: 36px;
    height: 1px;
    background: var(--gold);
    flex-shrink: 0;
}
.hero__eyebrow-text {
    font-family: var(--font-mono);
    font-size: clamp(.7rem, .85vw, 1.1rem);
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 300;
    white-space: nowrap;
}

/* ── Title — scales fluidly: ~42px @ 960px, ~58px @ 1440px, ~68px @ 1920px ── */
.hero__title {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 3.2vw, 4.8rem);
    font-weight: 400;
    line-height: 1.12;
    color: #fff;
    margin-bottom: clamp(1.25rem, 2.5vh, 2.5rem);
    letter-spacing: -.02em;
}
.hero__title em {
    font-style: italic;
    color: var(--gold-light);
}

/* ── Description — grows slightly on wide screens ── */
.hero__description {
    font-size: clamp(1rem, 1.2vw, 1.4rem);
    line-height: 1.72;
    color: rgba(255,255,255,.6);
    font-weight: 300;
    max-width: 60ch;
    margin: 0 auto clamp(1.5rem, 2.5vh, 2.5rem);
}

/* ── Action buttons ── */
.hero__actions {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    margin-bottom: clamp(1rem, 2vh, 1.75rem);
}
.btn-hero-pri {
    font-family: var(--font-primary);
    font-size: clamp(.875rem, .9vw, 1.1rem);
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--purple);
    background: var(--gold);
    border: 1.5px solid var(--gold);
    padding: clamp(.85rem, 1.5vh, 1.25rem) clamp(2rem, 3vw, 3.5rem);
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: all var(--transition-base);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    box-shadow: var(--shadow-gold);
}
.btn-hero-pri:hover {
    background: var(--gold-light);
    border-color: var(--gold-light);
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(200,168,75,.38);
    color: var(--purple);
}

.btn-hero-out {
    font-family: var(--font-primary);
    font-size: clamp(.8125rem, .85vw, 1rem);
    font-weight: 400;
    letter-spacing: .08em;
    color: rgba(255,255,255,.8);
    border: 1px solid rgba(255,255,255,.28);
    padding: clamp(.95rem, 1.5vh, 1.25rem) clamp(2.25rem, 3vw, 3rem);
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: all var(--transition-base);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}
.btn-hero-out:hover {
    border-color: var(--gold);
    color: var(--gold);
    background: rgba(200,168,75,.06);
}

/* ── Trust bar ── */
.hero__trust {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    flex-wrap: nowrap;
    margin-top: clamp(1rem, 2vh, 1.5rem);
    padding-top: clamp(1rem, 2vh, 1.5rem);
    border-top: 1px solid rgba(255,255,255,.1);
    width: 100%;
}
.hero__trust-item {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: .35rem clamp(.75rem, 2vw, 2rem);
    align-items: center;
    flex: 1;
    min-width: 0;
}
.hero__trust-value {
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 2vw, 2.8rem);
    font-weight: 400;
    color: #fff;
    line-height: 1;
    white-space: nowrap;
}
.hero__trust-label {
    font-family: var(--font-mono);
    font-size: clamp(.58rem, .6vw, .9rem);
    color: rgba(255,255,255,.45);
    text-transform: uppercase;
    letter-spacing: .12em;
    white-space: nowrap;
}
.hero__trust-divider {
    width: 1px;
    height: 32px;
    background: rgba(255,255,255,.1);
    flex-shrink: 0;
}

/* ── Slide counter — removed ── */
.hero-slide-indicator { display: none !important; }

/* ── Scroll bar — horizontal, centred at bottom of hero ── */
.hero-scroll-bar {
    position: absolute;
    bottom: 1.25rem;
    left: 0;
    right: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    opacity: 0;
    animation: heroFadeUp 1s 1.4s ease forwards;
}
.hero-scroll-bar__line {
    width: clamp(40px, 6vw, 80px);
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(200,168,75,.6));
    flex-shrink: 0;
}
.hero-scroll-bar__line:last-child {
    background: linear-gradient(90deg, rgba(200,168,75,.6), transparent);
}
.hero-scroll-bar__text {
    font-family: var(--font-mono);
    font-size: .58rem;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: rgba(255,255,255,.45);
    white-space: nowrap;
    animation: scrollPulse 3s ease-in-out infinite;
}
@keyframes scrollPulse {
    0%,100% { opacity: .45; }
    50%      { opacity: .85; }
}

/* ── Bottom accent line ── */
.hero-accent-line {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    z-index: 4;
    background: var(--gradient-gold);
}

/* ── Responsive — Tablet ── */
@media (max-width: 768px) {
    .hero {
        height: auto;
        min-height: 0;
        max-height: none;
    }
    .hero__inner {
        align-items: center;
        padding: 2.75rem 0 2.75rem;
    }
    .hero__content-wrap {
        width: 92%;
        padding: 0 1.25rem;
    }
    .hero__title {
        font-size: clamp(1.9rem, 6.5vw, 2.6rem);
        line-height: 1.1;
        margin-bottom: .85rem;
    }
    .hero__description {
        font-size: .9rem;
        max-width: 44ch;
        margin-bottom: 1.25rem;
    }
    .hero__eyebrow {
        margin-bottom: .75rem;
        justify-content: center;
    }
    .hero__eyebrow-line { display: none; }
    .hero__eyebrow-text {
        white-space: nowrap;
        text-align: center;
        font-size: clamp(.55rem, 2.2vw, .72rem);
        letter-spacing: .1em;
    }
    .hero__actions {
        flex-direction: column;
        width: 100%;
        max-width: 300px;
        margin-left: auto;
        margin-right: auto;
        gap: .6rem;
        margin-bottom: 1.1rem;
    }
    .btn-hero-pri, .btn-hero-out {
        width: 100%;
        text-align: center;
        justify-content: center;
        padding: .85rem 1.5rem;
    }
    .hero__trust {
        gap: 0;
        margin-top: 1rem;
        padding-top: 1rem;
    }
    .hero__trust-item { padding: .2rem .9rem; }
    .hero__trust-divider { display: none; }
    .hero-scroll-bar { display: none; }
}

/* ── Responsive — Mobile ── */
@media (max-width: 480px) {
    .hero { min-height: 0; }
    .hero__inner { padding: 2.25rem 0 2.25rem; }
    .hero__title { font-size: clamp(1.7rem, 7.5vw, 2.1rem); line-height: 1.08; }
    .hero__description { font-size: .85rem; max-width: 36ch; margin-bottom: 1rem; }
    .hero__trust-item { padding: .15rem .6rem; }
    .hero__trust-value { font-size: 1.1rem; }
    .hero__trust-label { font-size: .5rem; }
    .hero__actions { max-width: 280px; gap: .5rem; margin-bottom: .9rem; }
}

/* ── Responsive — Small phones (390px and under) ── */
@media (max-width: 390px) {
    .hero__inner { padding: 1.75rem 0 2rem; }
    .hero__title { font-size: 1.65rem; }
    .hero__eyebrow-text { font-size: .57rem; letter-spacing: .12em; }
    .hero__trust-item { padding: .15rem .45rem; }
    .hero__trust-value { font-size: 1rem; }
    .btn-hero-pri, .btn-hero-out { font-size: .78rem; padding: .78rem 1.1rem; }
}

/* ── Landscape mobile ── */
@media (max-width: 768px) and (orientation: landscape) {
    .hero { min-height: auto; }
    .hero__inner { padding: 2rem 0 2.5rem; }
    .hero__title { font-size: 1.75rem; }
    .hero__trust { display: none; }
    .hero__description { display: none; }
    .hero__actions { margin-bottom: .75rem; }
}

/* WCAG 2.1 SC 2.3.3 — prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .hero-slide { transition: none !important; }
    .hero-slide.active { transform: none !important; }
    .hero-content *,
    [data-animate],
    [data-animate-delay] {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    .hero-scroll-hint { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   STATS STRIP — dark charcoal band (How It Works)
   ═══════════════════════════════════════════════════════════════════════════════ */
.stats-strip {
    background: var(--color-charcoal);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background-color: rgba(200,168,75,.08);
}
.stats-strip__cell {
    background: var(--color-charcoal);
    text-align: center;
    padding: 2.25rem 1.5rem;
    position: relative;
    transition: background var(--transition-base);
}
.stats-strip__cell:hover { background: rgba(200,168,75,.04); }
.stats-strip__cell:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 20%;
    bottom: 20%;
    width: 1px;
    background: rgba(255,255,255,.06);
}

/* ── How-it-works steps ── */
.how-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.how-step__num {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 4vw, 3.5rem);
    font-weight: 400;
    color: var(--gold);
    line-height: 1;
    margin-bottom: .6rem;
    letter-spacing: -.02em;
}
.how-step__title {
    font-family: var(--font-mono);
    font-size: .75rem;
    font-weight: 400;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: .5rem;
}
.how-step__desc {
    font-size: .75rem;
    color: rgba(255,255,255,.38);
    line-height: 1.65;
    max-width: 20ch;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .stats-strip { grid-template-columns: repeat(2, 1fr); }
    /* FIX SS1: in a 2-col layout, cells 2 and 4 are end-of-row — suppress their
       right-side ::after border so col 2 (and 4 when it wraps to a second row)
       don't show a floating divider line with no adjacent cell to the right */
    .stats-strip__cell:nth-child(2n)::after { display: none; }
}
@media (max-width: 400px) {
    .stats-strip { grid-template-columns: 1fr 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   Pages CSS — DBK  (Éleve style retheme)
   ═══════════════════════════════════════════════════════════════════════════════ */


/* ── Inner Page Tag pill ─────────────────────────────────────────────────────── */
.tag {
    display: inline-flex;
    align-items: center;
    padding: .3rem .9rem;
    background: rgba(200,168,75,.1);
    border: 1px solid rgba(200,168,75,.25);
    border-radius: var(--radius-full);
    font-family: var(--font-mono);
    font-size: .62rem;
    font-weight: 400;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 1.25rem;
}

/* ── Section Divider ─────────────────────────────────────────────────────────── */
.section-divider {
    width: 40px;
    height: 2px;
    background: linear-gradient(90deg, var(--purple), var(--gold));
    border-radius: 2px;
    margin: 1.5rem 0;
    display: block;
}
/* Auto-center when inside a centered header or about-content */
.section-header.centered .section-divider,
.about-content .section-divider {
    margin-left: auto;
    margin-right: auto;
}

/* ── Three-column grid ───────────────────────────────────────────────────────── */
.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}
@media (max-width: 900px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .grid-3 { grid-template-columns: 1fr; } }

/* ── Section subtitle (lede under section title) ────────────────────────────── */
.section-subtitle {
    font-size: 1rem;
    color: var(--color-muted);
    line-height: 1.75;
    max-width: 60ch;
    margin: 0 auto;
    font-weight: 300;
}

/* ── Glow box — subtle card glow on hover ────────────────────────────────────── */
.glow-box {
    transition: box-shadow var(--transition-base);
}
.glow-box:hover {
    box-shadow: 0 12px 48px rgba(200,168,75,.12), 0 4px 16px rgba(30,16,48,.08);
}

/* ── Legal content ───────────────────────────────────────────────────────────── */
.legal-content {
    max-width: 760px;
    margin: 0 auto;
}
.legal-section {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--color-border);
}
.legal-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}
.legal-section h2 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 400;
    color: var(--color-charcoal);
    margin-bottom: 0.6rem;
    letter-spacing: -.01em;
}
.legal-section p {
    font-size: .9375rem;
    color: var(--color-muted);
    line-height: 1.8;
    margin: 0;
}
.legal-section-title {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 400;
    color: var(--color-charcoal);
    margin-bottom: .5rem;
    letter-spacing: -.01em;
}


/* ── Page Hero (inner pages) ─────────────────────────────────────────────────── */
.page-hero{position:relative;margin-top:-116px;padding:calc(clamp(96px,9vw,116px) + 5rem) 0 5rem;overflow:hidden;display:flex;align-items:center;}
.page-hero--sm{padding-bottom:4rem;}
.page-hero__bg{position:absolute;inset:0;background:var(--gradient-hero);z-index:0;}
.page-hero__bg::after{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,var(--purple),var(--gold),var(--purple),transparent);}
.page-hero__inner{position:relative;z-index:1;max-width:800px;text-align:left;}
.page-hero > .container{
    margin-left: max(var(--gutter), calc((100vw - var(--container-width)) / 2));
    margin-right: 0;
}
/* Inner page sections: full-width justified text, no artificial centering */
.page-hero ~ .section .section-header:not(.centered),
.page-hero ~ * .section-header:not(.centered) {
    max-width: 100%;
    text-align: left;
}
.page-hero ~ .section .section-header:not(.centered) .section-subtitle,
.page-hero ~ * .section-header:not(.centered) .section-subtitle {
    margin-left: 0;
    margin-right: 0;
    text-align: left;
}
.page-hero ~ .section .section-header:not(.centered) .section-divider,
.page-hero ~ * .section-header:not(.centered) .section-divider {
    margin-left: 0;
}
/* Preserve center alignment for explicitly centered headers on inner pages */
.page-hero ~ .section .section-header.centered,
.page-hero ~ * .section-header.centered {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
.page-hero__eyebrow{display:inline-flex;align-items:center;gap:.75rem;margin-bottom:1rem;}
.page-hero__eyebrow-line{width:32px;height:1px;background:var(--gold);flex-shrink:0;}
.page-hero__eyebrow-text{font-family:var(--font-mono);font-size:.65rem;letter-spacing:.25em;text-transform:uppercase;color:var(--gold);font-weight:400;}
.page-hero__title{font-family:var(--font-display);font-size:clamp(2.4rem,5vw,4rem);font-weight:400;line-height:1.05;color:#fff;margin:1rem 0 1.25rem;letter-spacing:-.01em;}
.page-hero__title em{font-style:italic;color:var(--gold-light);}
.page-hero__subtitle{font-size:var(--text-lg);color:rgba(255,255,255,.65);line-height:1.7;max-width:52ch;font-weight:300;}


/* ═══════════════════════════════════════════════════════════════════════════
   FAQ Page — search, horizontal nav, group cards, accordion
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Page background ── */
.faq-page { background: var(--color-bg); }

/* ── Search ── */
.faq-search-wrap {
    max-width: 600px;
    margin: 0 auto 2rem;
}
.faq-search-inner {
    position: relative;
    display: flex;
    align-items: center;
}
.faq-search-icon {
    position: absolute;
    left: 1rem;
    color: var(--color-subtle);
    display: flex;
    pointer-events: none;
}
.faq-search-input {
    width: 100%;
    padding: .875rem 3rem .875rem 2.75rem;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-full);
    background: #fff;
    font-family: var(--font-primary);
    font-size: .9375rem;
    color: var(--color-charcoal);
    outline: none;
    box-shadow: 0 2px 12px rgba(30,16,48,.05);
    transition: border-color .18s, box-shadow .18s;
    -webkit-appearance: none;
    appearance: none;
}
.faq-search-input::placeholder { color: var(--color-subtle); }
.faq-search-input:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(200,168,75,.12);
}
.faq-search-input::-webkit-search-cancel-button { display: none; }
.faq-search-clear {
    position: absolute;
    right: .875rem;
    background: var(--color-surface-2);
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--color-muted);
    transition: background .15s, color .15s;
}
.faq-search-clear:hover { background: var(--color-border); color: var(--color-charcoal); }
.faq-search-status {
    font-size: .8rem;
    color: var(--color-subtle);
    font-family: var(--font-mono);
    margin: .5rem 0 0 1rem;
    min-height: 1.2em;
}

/* ── Horizontal category nav ── */
.faq-nav {
    margin-bottom: 2.5rem;
}
.faq-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: center;
}
.faq-nav__link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem 1.125rem;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-full);
    background: #fff;
    font-family: var(--font-primary);
    font-size: .8125rem;
    font-weight: 500;
    color: var(--color-muted);
    text-decoration: none;
    white-space: nowrap;
    transition: border-color .15s, color .15s, background .15s, box-shadow .15s;
}
.faq-nav__link:hover {
    border-color: var(--gold);
    color: var(--purple);
    background: rgba(200,168,75,.04);
}
.faq-nav__link--active {
    border-color: var(--gold);
    background: var(--purple);
    color: #fff;
}
.faq-nav__link--active .faq-nav__icon { color: var(--gold); }
.faq-nav__icon {
    color: var(--gold);
    display: flex;
    flex-shrink: 0;
    opacity: .85;
}

/* ── Main accordion area ── */
.faq-main {
    max-width: 780px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* ── Group card ── */
.faq-group {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: box-shadow .2s;
}
.faq-group:hover {
    box-shadow: 0 4px 28px rgba(30,16,48,.09);
}

/* Group header bar */
.faq-group__hd {
    display: flex;
    align-items: center;
    gap: .875rem;
    padding: 1rem 1.5rem;
    background: linear-gradient(100deg, var(--purple) 0%, var(--purple-mid) 100%);
    border-bottom: 2px solid var(--gold);
}
.faq-group__icon {
    color: var(--gold);
    display: flex;
    flex-shrink: 0;
    opacity: .9;
}
.faq-group__title {
    font-family: var(--font-mono);
    font-size: .68rem;
    font-weight: 400;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(255,255,255,.9);
}

/* Group body */
.faq-group__body { padding: .25rem 0; }

/* ── Individual FAQ item ── */
.faq-item {
    border-bottom: 1px solid var(--color-border-subtle);
}
.faq-item:last-child { border-bottom: none; }

/* Question button */
.faq-item__btn {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
    padding: 1.125rem 1.5rem;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.25rem;
    font-family: var(--font-primary);
    font-size: .9375rem;
    font-weight: 600;
    color: var(--purple);
    line-height: 1.5;
    transition: background .15s;
}
.faq-item__btn:hover { background: rgba(30,16,48,.025); }
.faq-item__btn[aria-expanded="true"] { background: rgba(30,16,48,.03); }
.faq-item__q { flex: 1; }

/* Chevron */
.faq-item__chevron {
    color: var(--gold);
    flex-shrink: 0;
    margin-top: .3rem;
    display: flex;
    transition: transform .25s cubic-bezier(0.16,1,0.3,1);
}
.faq-item__btn[aria-expanded="true"] .faq-item__chevron {
    transform: rotate(180deg);
    color: var(--purple-light);
}

/* Answer panel — hidden by default, visible when open */
.faq-item__answer {
    display: none;
    padding: 0 1.5rem 1.125rem;
}
.faq-item__answer--open { display: block; }
.faq-item__answer p {
    margin: 0;
    font-size: .9125rem;
    color: var(--color-muted);
    line-height: 1.8;
    padding: .875rem 1.125rem;
    background: var(--color-bg);
    border-left: 3px solid var(--gold);
    border-radius: 0 .5rem .5rem 0;
}
.faq-answer-link {
    color: var(--gold-accessible);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.faq-answer-link:hover { color: var(--purple); }

/* ── No-results state ── */
.faq-no-results {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 3.5rem 2rem;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    text-align: center;
}
.faq-no-results svg { color: var(--color-border); }
.faq-no-results p { font-size: .9375rem; color: var(--color-muted); margin: 0; }

/* ── Hidden items (search filter) ── */
[data-faq-item][hidden],
[data-faq-group][hidden] { display: none !important; }

/* ── Responsive ── */
@media (max-width: 600px) {
    .faq-nav__link { font-size: .75rem; padding: .4375rem .875rem; }
    .faq-nav__icon { display: none; }
    .faq-item__btn { font-size: .875rem; padding: 1rem 1.25rem; }
    .faq-item__answer { padding: 0 1.25rem 1rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   ABOUT PAGE
   ═══════════════════════════════════════════════════════════════════════════════ */
.about-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:5rem;align-items:center;}
@media(max-width:900px){.about-grid{grid-template-columns:1fr;gap:3rem;}}
.about-content p{color:var(--color-muted);line-height:1.8;margin-bottom:1.25rem;max-width:60ch;}

.contact-methods{display:flex;flex-direction:column;gap:.75rem;margin-top:2.5rem;}
.contact-method{display:flex;align-items:center;gap:1rem;padding:1rem 1.25rem;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);transition:all var(--transition-base);text-decoration:none;}
.contact-method:hover{border-color:rgba(30,16,48,.28);transform:translateX(4px);box-shadow:var(--shadow-sm);}
.contact-method__icon{width:40px;height:40px;flex-shrink:0;background:var(--color-surface);border:1px solid rgba(30,16,48,.15);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;color:var(--purple);transition:all var(--transition-spring);}
.contact-method:hover .contact-method__icon{background:var(--purple);color:white;transform:rotate(6deg);}
.contact-method__icon--whatsapp{background:rgba(37,211,102,.08);border-color:rgba(37,211,102,.18);color:#25D366;}
.contact-method__label{font-family:var(--font-mono);font-size:.6rem;text-transform:uppercase;letter-spacing:.16em;color:var(--color-subtle);font-weight:400;margin-bottom:.15rem;}
.contact-method__value{font-size:.875rem;color:var(--color-charcoal);font-weight:500;}

/* About image stack */
.about-images{position:relative;}
.about-img-stack{position:relative;height:520px;}
.about-img-main{position:absolute;top:0;left:0;width:80%;height:380px;overflow:hidden;border-radius:var(--radius-lg);}
.about-img-main img,.about-img-accent img{width:100%;height:100%;object-fit:cover;transition:transform var(--transition-slow);}
.about-img-main:hover img,.about-img-accent:hover img{transform:scale(1.04);}
.about-img-accent{position:absolute;bottom:0;right:0;width:60%;height:260px;overflow:hidden;border-radius:var(--radius-lg);border:3px solid var(--color-bg);}
.about-img-badge{position:absolute;top:50%;left:55%;transform:translate(-50%,-50%);background:var(--purple);border-radius:var(--radius-md);padding:1.25rem 1.5rem;text-align:center;box-shadow:var(--shadow-purple-lg);z-index:2;}
.about-img-badge__num{display:block;font-family:var(--font-display);font-size:2rem;font-weight:300;color:white;line-height:1;}
.about-img-badge__label{display:block;font-size:.65rem;color:rgba(255,255,255,.7);text-transform:uppercase;letter-spacing:.1em;margin-top:.25rem;}
@media(max-width:480px){.about-img-stack{height:380px;}.about-img-main{height:280px;}.about-img-accent{height:200px;}}

/* ── Stats Band ───────────────────────────────────────────────────────────────── */
.stats-band{background:var(--color-surface-2);border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border);padding:3rem 0;}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;}
@media(max-width:768px){.stats-grid{grid-template-columns:repeat(2,1fr);}}
.stats-item{text-align:center;padding:1.25rem 1rem;position:relative;}
.stats-item:not(:last-child)::after{content:'';position:absolute;right:0;top:20%;height:60%;width:1px;background:var(--color-border);}
@media(max-width:768px){.stats-item:nth-child(2)::after{display:none;}}
.stats-value{display:block;font-family:var(--font-display);font-size:clamp(2rem,4vw,2.75rem);font-weight:300;line-height:1;color:var(--color-charcoal);margin-bottom:.5rem;}
.stats-value span,.stats-value em{font-style:italic;color:var(--purple);}
.stats-label{font-family:var(--font-mono);font-size:.64rem;text-transform:uppercase;letter-spacing:.14em;color:var(--color-subtle);font-weight:400;}

/* ── Inline CTA ───────────────────────────────────────────────────────────────── */
.section-accent-cta{background:var(--section-bg-warm);}
.inline-cta{display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap;padding:3rem 3.5rem;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);position:relative;overflow:hidden;}
.inline-cta::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--gold),var(--purple-mid),var(--gold),transparent);}
.inline-cta__title{font-family:var(--font-display);font-size:clamp(1.4rem,3vw,2rem);font-weight:300;color:var(--color-charcoal);margin-bottom:.5rem;}
.inline-cta__title em{font-style:italic;color:var(--purple);}
.inline-cta__sub{font-size:.875rem;color:var(--color-muted);max-width:none;}
.inline-cta__actions{display:flex;gap:.75rem;flex-wrap:wrap;flex-shrink:0;}
@media(max-width:640px){.inline-cta{padding:2rem;flex-direction:column;}.inline-cta__actions{width:100%;}.inline-cta__actions .btn{flex:1;}}

/* ═══════════════════════════════════════════════════════════════════════════════
   CONTACT PAGE
   ═══════════════════════════════════════════════════════════════════════════════ */
.contact-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:4rem;align-items:start;}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr;gap:3rem;}}
.contact-info__title{font-family:var(--font-display);font-size:clamp(1.5rem,3vw,2rem);font-weight:300;margin-bottom:.75rem;color:var(--color-charcoal);}
.contact-info__intro{font-size:.875rem;color:var(--color-muted);line-height:1.75;margin-bottom:2rem;max-width:44ch;}
.contact-detail-list{display:flex;flex-direction:column;gap:.65rem;margin-bottom:2rem;}
.contact-detail{display:flex;align-items:flex-start;gap:1rem;padding:1rem 1.25rem;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);transition:all var(--transition-base);text-decoration:none;color:inherit;}
.contact-detail:hover{border-color:rgba(30,16,48,.28);transform:translateX(4px);box-shadow:var(--shadow-sm);}
.contact-detail__icon{width:38px;height:38px;flex-shrink:0;background:var(--color-surface);border:1px solid rgba(30,16,48,.15);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;color:var(--purple);margin-top:1px;transition:all var(--transition-spring);}
.contact-detail:hover .contact-detail__icon{transform:rotate(6deg);background:var(--purple);color:white;}
.contact-detail__icon--green{background:rgba(37,211,102,.08);border-color:rgba(37,211,102,.18);color:#25D366;}
.contact-detail__label{font-family:var(--font-mono);font-size:.6rem;text-transform:uppercase;letter-spacing:.16em;color:var(--color-subtle);font-weight:400;margin-bottom:.15rem;}
.contact-detail__value{font-size:.875rem;color:var(--color-charcoal);font-weight:500;line-height:1.5;}
.contact-socials{display:flex;gap:.5rem;}

/* ── WhatsApp contact detail variant ────────────────────────────────────────── */
.contact-detail--whatsapp:hover {
    border-color: rgba(37,211,102,.3);
}
.contact-detail--whatsapp:hover .contact-detail__icon {
    background: rgba(37,211,102,.1) !important;
    border-color: rgba(37,211,102,.3) !important;
    transform: rotate(6deg);
}

.contact-social-btn{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-sm);color:var(--color-muted);transition:all var(--transition-base);}
.contact-social-btn:hover{background:var(--gold);border-color:var(--gold);color:var(--purple);transform:translateY(-2px);}
.contact-form-wrap{padding:2.5rem;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);}
.contact-form-title{font-family:var(--font-display);font-size:1.5rem;font-weight:300;color:var(--color-charcoal);margin-bottom:.3rem;}
.contact-form-sub{font-size:.875rem;color:var(--color-muted);margin-bottom:1.75rem;}
.contact-form-header{margin-bottom:1.75rem;}
.map-wrap{border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--color-border);box-shadow:var(--shadow-sm);}
.map-iframe { border: 0; display: block; width: 100%; }

/* Desktop: show iframe, hide card */
.map-desktop { display: block; }
.map-mobile  { display: none; }

/* Mobile: hide iframe (unusable at small sizes), show directions card */
@media (max-width: 768px) {
    .map-desktop { display: none; }
    .map-mobile  { display: block; }
    .map-wrap    { overflow: visible; background: transparent; border: none; box-shadow: none; }
}

.map-mobile__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
    padding: 2.5rem 1.5rem;
    background: var(--color-surface, #FAF7F0);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.map-mobile__icon {
    width: 56px; height: 56px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(30,16,48,.06);
    border-radius: 50%;
    color: var(--purple, #1E1030);
    flex-shrink: 0;
}
.map-mobile__title {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 400;
    color: var(--color-charcoal);
    margin-bottom: .25rem;
}
.map-mobile__address {
    font-size: .875rem;
    color: var(--color-muted);
    line-height: 1.6;
}
.map-mobile__btn { margin-top: .5rem; }

/* FIX CT5: Ensure "Find Us" section header and gallery-cta are centered
   even on .inner-page where section-title defaults to left align */
.contact-map-section .section-header.centered .section-title,
.contact-map-section .section-header.centered .section-eyebrow {
    text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   MISSION-VISION PAGE
   ═══════════════════════════════════════════════════════════════════════════════ */
.mv-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;}
@media(max-width:768px){.mv-grid{grid-template-columns:1fr;}}
.mv-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:3rem 2.75rem;position:relative;overflow:hidden;transition:all var(--transition-base);}
.mv-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--purple),var(--gold));opacity:0;transition:opacity var(--transition-base);}
.mv-card:hover{border-color:rgba(30,16,48,.22);transform:translateY(-4px);box-shadow:var(--shadow-md);}
.mv-card:hover::before{opacity:1;}
.mv-card--accent{border-left:3px solid var(--purple);}
.mv-card--accent::before{background:linear-gradient(90deg,var(--purple),var(--gold),transparent);opacity:1;}
.mv-card__eyebrow{font-family:var(--font-mono);font-size:.62rem;font-weight:400;text-transform:uppercase;letter-spacing:.2em;color:var(--gold-accessible);margin-bottom:.6rem;}
.mv-card__title{font-family:var(--font-display);font-size:clamp(1.6rem,3vw,2.25rem);font-weight:300;color:var(--color-charcoal);margin-bottom:.75rem;}
.mv-card__divider{width:40px;height:2px;background:linear-gradient(90deg,var(--gold),var(--purple));border-radius:2px;margin:0 0 1.5rem;display:block;}
.mv-card p{color:var(--color-muted);line-height:1.8;margin-bottom:1rem;}
.mv-card p:last-child{margin-bottom:0;}
/* FIX MV1: reduce card padding on mobile to give more usable text width */
@media(max-width:480px){
    .mv-card{padding:2rem 1.5rem;}
}

/* Values grid */
.values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;}
@media(max-width:900px){.values-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.values-grid{grid-template-columns:1fr;}}
.value-card{background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-md);padding:2rem 1.75rem;position:relative;transition:all var(--transition-base);overflow:hidden;display:flex;flex-direction:column;}
.value-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--purple),var(--gold));opacity:0;transition:opacity var(--transition-base);}
.value-card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(200,168,75,.2),transparent);}
.value-card:hover{border-color:rgba(30,16,48,.18);transform:translateY(-5px);box-shadow:0 20px 48px rgba(30,16,48,.1);}
.value-card:hover::before{opacity:1;}
.value-card__num{font-family:var(--font-display);font-size:2.5rem;font-weight:300;color:rgba(30,16,48,.45);line-height:1;margin-bottom:.5rem;letter-spacing:-.02em;}
.value-card__title{font-family:var(--font-display);font-size:1.1rem;font-weight:400;color:var(--color-charcoal);margin-bottom:.6rem;letter-spacing:-.01em;}
.value-card__body{font-size:.875rem;color:var(--color-muted);line-height:1.75;flex:1;}

/* Commitment block */
.commitment-block{text-align:center;max-width:720px;margin:0 auto;}
.commitment-block__quote{font-family:var(--font-display);font-size:clamp(1.2rem,2.5vw,1.7rem);font-weight:300;color:var(--color-charcoal);line-height:1.55;margin-bottom:1.25rem;position:relative;padding:0 2.5rem;font-style:italic;}
.commitment-block__quote::before,.commitment-block__quote::after{content:'\201C';font-size:4rem;font-family:var(--font-display);color:rgba(30,16,48,.12);position:absolute;line-height:.8;}
.commitment-block__quote::before{left:0;top:.2em;}
.commitment-block__quote::after{right:0;bottom:-.2em;content:'\201D';}
.commitment-block__source{font-size:.69rem;text-transform:uppercase;letter-spacing:.12em;color:var(--color-subtle);margin-bottom:2rem;}
.commitment-block__actions{display:flex;justify-content:center;gap:.75rem;flex-wrap:wrap;}

/* ═══════════════════════════════════════════════════════════════════════════════
   GALLERY PAGE
   ═══════════════════════════════════════════════════════════════════════════════ */
.gallery-masonry{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:240px;gap:1rem;margin-bottom:3rem;}
.gallery-item--large{grid-column:span 2;grid-row:span 2;}
.gallery-item--medium{grid-column:span 2;}
.gallery-item__inner{position:relative;width:100%;height:100%;border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--color-border);cursor:pointer;}
.gallery-item__inner img{width:100%;height:100%;object-fit:cover;transition:transform var(--transition-slow);}
.gallery-item__inner:hover img{transform:scale(1.06);}
.gallery-item__overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(15,10,26,.8) 0%,transparent 55%);display:flex;align-items:flex-end;padding:1.25rem;opacity:0;transition:opacity var(--transition-base);}
.gallery-item__inner:hover .gallery-item__overlay{opacity:1;}
.gallery-item__caption{font-family:var(--font-mono);font-size:.62rem;font-weight:400;text-transform:uppercase;letter-spacing:.18em;color:rgba(255,255,255,.9);}
.gallery-cta{text-align:center;padding:3rem 0 1rem;}
.gallery-cta__text{color:var(--color-muted);font-size:var(--text-lg);font-family:var(--font-display);font-weight:300;margin-bottom:1.75rem;text-align:center;max-width:72ch;margin-left:auto;margin-right:auto;}
.gallery-cta__actions{display:flex;justify-content:center;gap:.75rem;flex-wrap:wrap;}
@media(max-width:900px){.gallery-masonry{grid-template-columns:repeat(2,1fr);grid-auto-rows:200px;}.gallery-item--large{grid-column:span 2;}}
@media(max-width:560px){.gallery-masonry{grid-template-columns:1fr 1fr;grid-auto-rows:160px;}}
/* FIX GL2: at ≤400px the 2-col layout produces ~175px wide cards which are too
   small for food photography. Switch to single column for a better experience. */
@media(max-width:400px){
    .gallery-masonry{grid-template-columns:1fr;grid-auto-rows:220px;}
    .gallery-item--large,.gallery-item--medium{grid-column:span 1;grid-row:span 1;}
}

/* ═══════════════════════════════════════════════════════════════════════════════
   MENU PAGE
   ═══════════════════════════════════════════════════════════════════════════════ */
.menu-section{padding-top:4rem;}
.menu-search-outer{max-width:520px;margin:0 auto 2.5rem;position:relative;}
.menu-search-wrap{position:relative;}
.menu-search-wrap input{
    width:100%;padding:.85rem 1.1rem .85rem 2.8rem;
    background:var(--color-surface);border:1.5px solid var(--color-border);
    border-radius:var(--radius-full);color:var(--color-charcoal);
    font-size:.875rem;outline:none;transition:all var(--transition-base);
}
.menu-search-wrap input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(200,168,75,.1);}
.menu-search-icon{position:absolute;left:1rem;top:50%;transform:translateY(-50%);color:var(--color-muted);pointer-events:none;}
.menu-search-results{position:absolute;top:calc(100% + .5rem);left:0;right:0;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);z-index:100;max-height:360px;overflow-y:auto;}
.menu-search-result-row{padding:.65rem 1rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;font-size:.875rem;cursor:pointer;transition:background var(--transition-base);}
.menu-search-result-row:hover{background:rgba(30,16,48,.04);}
.menu-search-result-row:focus{outline:2px solid var(--gold);outline-offset:-2px;background:rgba(200,168,75,.08);}
.menu-search-result-row[tabindex="0"]{cursor:pointer;}
.menu-search-price{font-size:.8rem;color:var(--color-muted);white-space:nowrap;}
.menu-search-none{padding:1rem;text-align:center;font-size:.875rem;color:var(--color-muted);}

/* Menu tabs — full-width, items spread evenly across the container */
.menu-tabs{display:flex;gap:.4rem;flex-wrap:wrap;margin:0 auto 2.5rem;padding:.35rem;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-full);width:100%;justify-content:space-evenly;}
.menu-tab{padding:.45rem 1.1rem;font-family:var(--font-mono);font-size:.68rem;font-weight:400;letter-spacing:.1em;text-transform:uppercase;color:var(--color-subtle);border-radius:var(--radius-full);border:none;background:transparent;cursor:pointer;transition:all var(--transition-base);white-space:nowrap;flex:1;text-align:center;}
.menu-tab:hover{color:var(--purple);background:rgba(30,16,48,.08);}
.menu-tab.active{background:var(--purple);color:white;box-shadow:var(--shadow-purple);}
.menu-panel{display:none;}
.menu-panel[hidden]{display:none;}
.menu-panel.active,.menu-panel.active[hidden]{display:block;}
.menu-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;}
@media(max-width:900px){.menu-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.menu-grid{grid-template-columns:1fr;}}

/* Menu card */
.menu-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden;transition:all var(--transition-base);display:flex;flex-direction:column;}
.menu-card:hover{border-color:rgba(30,16,48,.25);transform:translateY(-5px);box-shadow:var(--shadow-md);}
.menu-card__img-wrap{position:relative;height:200px;overflow:hidden;}
.menu-card__img-wrap img{width:100%;height:100%;object-fit:cover;transition:transform var(--transition-slow);display:block;}
.menu-card:hover .menu-card__img-wrap img{transform:scale(1.06);}

/* Dietary badges */
.menu-dietary-badge{position:absolute;top:.75rem;right:.75rem;padding:.22rem .6rem;border-radius:var(--radius-full);font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;}
.tag-veg{background:rgba(34,197,94,.1);color:#16a34a;border:1px solid rgba(34,197,94,.2);}
.tag-vegan{background:rgba(234,179,8,.1);color:#b45309;border:1px solid rgba(234,179,8,.2);}
.tag-halal{background:var(--color-surface);color:var(--purple);border:1px solid rgba(30,16,48,.2);}
.tag-default{background:var(--color-surface);color:var(--color-muted);border:1px solid var(--color-border);}

.menu-card__body{padding:1.25rem 1.25rem 1.5rem;display:flex;flex-direction:column;flex:1;}
.menu-card__name{font-family:var(--font-display);font-size:1.1rem;font-weight:500;color:var(--color-charcoal);margin-bottom:.4rem;}
.menu-card__desc{font-size:.8125rem;color:var(--color-muted);line-height:1.65;flex:1;margin-bottom:1rem;max-width:none;}
.menu-card__footer{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding-top:.75rem;border-top:1px solid var(--color-border);}
.menu-card__price{font-family:var(--font-display);font-size:1.1rem;font-weight:400;color:var(--purple);letter-spacing:0;}

/* Search result highlight flash */
@keyframes menu-card-flash{0%,100%{box-shadow:none;}50%{box-shadow:0 0 0 3px var(--gold);}}
.menu-card-highlight{animation:menu-card-flash .6s ease 2;}

/* Menu legend */
.menu-legend{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;padding:1.1rem 1.4rem;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);margin-top:2.5rem;}
.menu-legend .menu-dietary-badge{position:static;}
.menu-legend__note{font-size:.75rem;color:var(--color-muted);margin-left:auto;max-width:none;}
@media(max-width:640px){.menu-tabs{border-radius:var(--radius-lg);width:100%;justify-content:flex-start;}.menu-legend__note{margin-left:0;width:100%;}}

/* Search clear button */
.menu-search-clear{position:absolute;right:.85rem;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--color-subtle);font-size:1.1rem;line-height:1;display:none;align-items:center;justify-content:center;width:20px;height:20px;transition:color var(--transition-base);}
.menu-search-clear:hover{color:var(--purple);}
/* Pad the search input to make room for the clear button */
.menu-search-wrap input{padding-right:2.5rem;}

/* Search no-results in grid */
.menu-search-no-grid-results{text-align:center;color:var(--color-muted);padding:3rem 1rem;font-size:.9rem;}

/* ── Cart overlay ─────────────────────────────────────────────────────────── */
.cart-overlay{position:fixed;inset:0;background:rgba(14,6,28,.55);backdrop-filter:blur(4px);z-index:1199;opacity:0;pointer-events:none;transition:opacity .3s ease;}
.cart-overlay.open{opacity:1;pointer-events:all;}

/* ── Cart drawer ──────────────────────────────────────────────────────────── */
.cart-drawer{position:fixed;right:0;top:0;bottom:0;width:min(460px,100vw);background:#fff;z-index:1202;transform:translateX(100%);transition:transform .35s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;box-shadow:-8px 0 60px rgba(14,6,28,.28);}
.cart-drawer.open{transform:none;}

.cart-drawer-header{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;background:var(--purple);border-bottom:1px solid rgba(200,168,75,.25);flex-shrink:0;}
.cart-drawer-title-wrap{display:flex;flex-direction:column;gap:2px;}
.cart-drawer-title{font-size:.75rem;font-weight:700;margin:0;color:#fff;letter-spacing:.14em;text-transform:uppercase;font-family:var(--font-mono);}
.cart-drawer-subtitle{font-size:.65rem;color:rgba(200,168,75,.75);letter-spacing:.04em;}
.cart-drawer-close{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:50%;width:34px;height:34px;font-size:1.3rem;cursor:pointer;color:rgba(255,255,255,.8);display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0;}
.cart-drawer-close:hover{background:var(--gold);color:var(--purple);border-color:var(--gold);}

#cart-section{flex:1;overflow-y:auto;display:flex;flex-direction:column;}

.cart-empty{text-align:center;color:#9ca3af;padding:48px 24px 24px;display:none;flex-direction:column;align-items:center;gap:.3rem;}
.cart-empty svg{opacity:.3;margin-bottom:.5rem;}
.cart-empty p{margin:0;font-size:.9rem;color:#374151;font-weight:500;}
.cart-empty-hint{font-size:.8rem !important;color:#9ca3af !important;font-weight:400 !important;}

.cart-items{padding:0 24px;flex:1;}
.cart-item{display:grid;grid-template-columns:1fr auto auto auto;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid #f3f4f6;}
.cart-item-name{font-size:.875rem;font-weight:500;color:#1e1030;line-height:1.4;}
.cart-item-qty{display:flex;align-items:center;gap:6px;white-space:nowrap;}
.cart-qty-num{min-width:20px;text-align:center;font-size:.875rem;font-weight:700;color:#1e1030;}
.cart-qty-btn{background:rgba(30,16,48,.07);border:none;width:26px;height:26px;border-radius:50%;cursor:pointer;font-size:1rem;line-height:1;display:flex;align-items:center;justify-content:center;transition:background .15s;color:#1e1030;}
.cart-qty-btn:hover{background:var(--purple);color:#fff;}
.cart-item-price{font-family:var(--font-mono);font-size:.78rem;color:var(--purple);white-space:nowrap;font-weight:600;}
.cart-remove{background:none;border:none;color:#d1d5db;cursor:pointer;font-size:1.2rem;padding:0;transition:color .15s;display:flex;align-items:center;}
.cart-remove:hover{color:#c0392b;}

.cart-total-row{display:flex;justify-content:space-between;align-items:center;padding:14px 24px;border-top:2px solid rgba(30,16,48,.08);background:#fafaf8;}
.cart-total-label{font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:#374151;}
.cart-total-amount{font-family:var(--font-mono);font-size:1.05rem;font-weight:700;color:var(--purple);}

.cart-footer{padding:14px 24px 20px;background:#fafaf8;flex-shrink:0;}
.cart-btn-full{width:100%;justify-content:center;}

.order-details-wrap{flex:1;overflow-y:auto;padding:20px 24px;}
.cart-back-btn{background:none;border:none;color:#6b7280;cursor:pointer;margin-bottom:20px;font-size:.875rem;padding:0;display:flex;align-items:center;gap:.4rem;transition:color .15s;}
.cart-back-btn:hover{color:var(--purple);}
.cart-success{background:#d1fae5;color:#065f46;padding:16px;border-radius:8px;margin-bottom:16px;font-size:.875rem;line-height:1.5;}
.cart-error{background:#fee2e2;color:#991b1b;padding:12px;border-radius:8px;margin-bottom:12px;font-size:.875rem;}
.cart-field{margin-bottom:14px;}
.cart-label{display:block;font-size:.65rem;font-weight:800;margin-bottom:5px;color:#374151;text-transform:uppercase;letter-spacing:.1em;}
.cart-input{width:100%;padding:10px 12px;border:1.5px solid #e5e7eb;border-radius:8px;font:inherit;box-sizing:border-box;font-size:.875rem;transition:border-color .2s;color:#1e1030;}
.cart-input:focus{outline:none;border-color:var(--purple);box-shadow:0 0 0 3px rgba(30,16,48,.08);}

/* ── Cart toggle button in header ─────────────────────────────────────────── */
.cart-toggle-btn{position:relative;display:inline-flex;align-items:center;gap:.45rem;padding:.5rem .85rem;background:var(--purple);color:#fff;border:1.5px solid rgba(200,168,75,.35);border-radius:var(--radius-sm);font-size:.72rem;font-family:var(--font-mono);letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:background .2s,border-color .2s;white-space:nowrap;}
.cart-toggle-btn:hover{background:var(--gold);color:var(--purple);border-color:var(--gold);}
.cart-toggle-label{display:inline;}
@media(max-width:400px){.cart-toggle-label{display:none;}}
.cart-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 4px;background:var(--gold);color:var(--purple);border-radius:9px;font-size:.65rem;font-weight:700;line-height:1;margin-left:2px;}
.cart-badge.js-hidden{display:none;}

/* ── Place Order button states ────────────────────────────────────────────── */
.btn-add-item.btn-in-cart{background:var(--green-compliance) !important;border-color:var(--green-compliance) !important;color:#fff !important;}
.btn-add-item.btn-in-cart:hover{background:#1b5e20 !important;border-color:#1b5e20 !important;}

.about-section {
    background: var(--color-bg);
    padding: var(--section-padding) 0;
}
.about-section__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}
.about-section__content {
    padding-right: 1rem;
}
.about-section__quote {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-style: italic;
    font-weight: 300;
    color: var(--color-muted);
    border-left: 2px solid var(--gold);
    padding-left: 1.25rem;
    margin: 1rem 0;
    line-height: 1.55;
}
.about-section__link {
    display: inline-flex;
    align-items: center;
    gap: .625rem;
    font-size: .8125rem;
    font-weight: 500;
    letter-spacing: .08em;
    color: var(--purple);
    text-decoration: none;
    border-bottom: 1px solid var(--purple);
    padding-bottom: 2px;
    margin-top: 1rem;
    transition: gap var(--transition-base), color var(--transition-base);
}
.about-section__link:hover { gap: 1rem; color: var(--gold-accessible, #7A5C00); }
.about-section__link svg {
    width: 16px; height: 16px;
    stroke: currentColor; fill: none;
    flex-shrink: 0;
}
@media (max-width: 900px) {
    .about-section__grid { grid-template-columns: 1fr; gap: 2rem; }
    .about-section__content { padding-right: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   WHO WE SERVE — Card grid with images
   ═══════════════════════════════════════════════════════════════════════════════ */
.who-section { background: var(--color-bg); }
.who-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
    margin-top: 3.5rem;
    margin-bottom: 0;
}
.who-card {
    position: relative;
    overflow: hidden;
    background: var(--color-charcoal);
}
.who-card__img-wrap {
    position: relative;
    aspect-ratio: 4/5;
    overflow: hidden;
}
.who-card__img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
    display: block;
}
.who-card:hover .who-card__img-wrap img { transform: scale(1.06); }
.who-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(10,2,25,.92) 0%, rgba(30,6,60,.45) 50%, transparent 100%);
    transition: opacity var(--transition-base);
}
.who-card__body {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2rem 1.75rem;
}
.who-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(255,255,255,.12);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.18);
    margin-bottom: .875rem;
    color: rgba(255,255,255,.9);
    transition: color var(--transition-base), background var(--transition-base), border-color var(--transition-base);
}
.who-card__icon svg { display: block; flex-shrink: 0; }
.who-card:hover .who-card__icon {
    color: var(--gold);
    background: rgba(200,168,75,.18);
    border-color: rgba(200,168,75,.4);
}
.who-card__title {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 400;
    color: #fff;
    line-height: 1.2;
    margin-bottom: .5rem;
}
.who-card__desc {
    font-size: .8125rem;
    color: rgba(255,255,255,.6);
    line-height: 1.6;
}
.who-cta {
    margin-top: 3rem;
    display: flex;
    justify-content: center;
}
@media (max-width: 1100px) {
    .who-grid { grid-template-columns: repeat(2, 1fr); }
    .who-card__img-wrap { aspect-ratio: 4/3; }
}
@media (max-width: 600px) {
    .who-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   PROCESS STEPS — Horizontal row
   ═══════════════════════════════════════════════════════════════════════════════ */
.process-section { background: var(--color-surface); }
.process-steps-row {
    display: flex;
    gap: .875rem;
    position: relative;
    margin-top: 3.5rem;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-top: 8px;
    padding-bottom: 16px;
    margin-top: calc(3.5rem - 8px);
}
.process-steps-row::-webkit-scrollbar { display: none; }
.process-step {
    flex: 1 0 220px;
    text-align: center;
    padding: 2.5rem 1.75rem;
    background: #fff;
    border: 1.5px solid rgba(30,16,48,.1);
    border-radius: var(--radius-md);
    position: relative;
    transition: all var(--transition-base);
    scroll-snap-align: start;
    box-shadow: 0 2px 12px rgba(30,16,48,.05);
    display: flex;
    flex-direction: column;
    align-items: center;
}
.process-step:last-child { margin-right: 0; }
.process-step:hover {
    border-color: var(--purple);
    transform: translateY(-5px);
    box-shadow: 0 8px 32px rgba(30,16,48,.12);
}
.process-step__num {
    font-family: var(--font-mono);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .08em;
    color: var(--purple);
    line-height: 1;
    margin-bottom: 1.25rem;
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(30,16,48,.2);
    border-radius: 50%;
    background: rgba(30,16,48,.04);
    flex-shrink: 0;
    transition: all var(--transition-base);
}
.process-step:hover .process-step__num {
    background: var(--purple);
    border-color: var(--purple);
    color: #fff;
}
.process-step__title {
    font-family: var(--font-primary);
    font-size: .9375rem;
    font-weight: 600;
    color: var(--color-charcoal);
    margin-bottom: .625rem;
    letter-spacing: .01em;
    line-height: 1.3;
}
.process-step__desc {
    font-size: .8375rem;
    color: #4a4057;
    line-height: 1.7;
    max-width: none;
}
.process-step__connector { display: none; }
@media (max-width: 900px) {
    .process-steps-row {
        flex-wrap: wrap;
        overflow-x: visible;
        scroll-snap-type: none;
        gap: .75rem;
    }
    .process-step {
        flex: 1 1 calc(50% - .5rem);
        min-width: 0;
    }
}
/* Mobile: vertical numbered timeline */
@media (max-width: 540px) {
    .process-steps-row {
        display: flex;
        flex-direction: column;
        gap: 0;
        position: relative;
        padding-left: 3.5rem;
    }
    .process-steps-row::before {
        content: '';
        position: absolute;
        left: 1.25rem;
        top: 1.5rem;
        bottom: 1.5rem;
        width: 2px;
        background: linear-gradient(to bottom, var(--purple, #1E1030), rgba(30,16,48,.1));
        border-radius: 1px;
    }
    .process-step {
        flex: none;
        width: 100%;
        flex-direction: row;
        text-align: left;
        padding: 1.25rem 1.25rem 1.25rem 0;
        border: none;
        border-radius: 0;
        box-shadow: none;
        background: transparent;
        align-items: flex-start;
        gap: 1rem;
        position: relative;
        transition: none;
    }
    .process-step:hover {
        transform: none;
        box-shadow: none;
        border-color: transparent;
    }
    .process-step__icon { display: none; }
    .process-step__num {
        position: absolute;
        left: -3.5rem;
        top: 1.25rem;
        width: 2.5rem;
        height: 2.5rem;
        font-size: .75rem;
        margin-bottom: 0;
        flex-shrink: 0;
        background: var(--purple, #1E1030);
        border-color: var(--purple, #1E1030);
        color: #fff;
    }
    .process-step__title { font-size: .9rem; margin-bottom: .35rem; }
    .process-step__desc  { font-size: .8rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   SUPPLY DARK SECTION — dark background with stats + supply cards
   ═══════════════════════════════════════════════════════════════════════════════ */
.supply-dark-section {
    background: var(--gradient-dark);
    padding: var(--section-padding) 0;
    position: relative;
    overflow: hidden;
}
.supply-dark-section::before {
    content: '';
    position: absolute;
    top: -20%;
    left: 50%;
    transform: translateX(-50%);
    width: 800px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(30,16,48,.18) 0%, transparent 70%);
    pointer-events: none;
}
.supply-dark-intro {
    text-align: center;
    margin-bottom: 4.5rem;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.supply-dark-intro .section-body {
    max-width: 56ch;
    margin: 0 auto;
    text-align: center;
}
.supply-dark-intro .section-eyebrow::before { background: var(--gold); }
.supply-dark-intro .section-title { color: #fff; }
.supply-dark-intro .section-title em { color: var(--gold); }

/* Supply stats */
.supply-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 4rem;
    position: relative;
    z-index: 1;
}
.supply-stat-cell {
    text-align: center;
    padding: 2.25rem 1.5rem;
    background: rgba(255,255,255,.02);
    transition: background var(--transition-base);
}
.supply-stat-cell:hover { background: rgba(30,16,48,.12); }
.supply-stat-num {
    font-family: var(--font-display);
    font-size: clamp(2.25rem, 3.5vw, 3.25rem);
    font-weight: 300;
    color: #fff;
    line-height: 1;
}
.supply-stat-num span { color: var(--gold); font-style: italic; }
.supply-stat-label {
    font-size: .65rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(255,255,255,.4);
    margin-top: .5rem;
}
.supply-dark-section .grid-4 {
    position: relative;
    z-index: 1;
}

/* Compliance note bar */
.compliance-note-bar {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    background: rgba(200,168,75,.06);
    border: 1px solid rgba(200,168,75,.16);
    border-radius: var(--radius-md);
    padding: 1.25rem 1.5rem;
    position: relative;
    z-index: 1;
    margin-top: 3rem;
    max-width: 50%;
    margin-left: auto;
    margin-right: auto;
}
@media (max-width: 900px) {
    .compliance-note-bar { max-width: 80%; }
}
@media (max-width: 600px) {
    .compliance-note-bar { max-width: 100%; }
}
.compliance-note-bar__icon {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    flex-shrink: 0;
}
.compliance-note-bar__icon span {
    font-family: var(--font-mono);
    font-size: .7rem;
    font-weight: 500;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: .12em;
    line-height: 1.4;
    /* Allow heading to wrap instead of overflow */
    white-space: normal;
    word-break: break-word;
}
.compliance-note-bar p {
    font-size: .8125rem;
    color: rgba(255,255,255,.55);
    margin: 0;
    line-height: 1.6;
}
@media (max-width: 768px) {
    .supply-stats-grid { grid-template-columns: repeat(2, 1fr); }
    .supply-dark-section { padding: var(--section-padding-sm) 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   TESTIMONIAL CAROUSEL
   ═══════════════════════════════════════════════════════════════════════════════ */
.testimonial-carousel-section {
    background: var(--color-surface);
    padding: var(--section-padding) 0;
    overflow: hidden;
}
.test-header {
    text-align: center;
    margin-bottom: 3.5rem;
}
.test-carousel {
    max-width: 720px;
    margin: 0 auto;
    width: 100%;
}
.test-track {
    width: 100%;
    min-height: 180px;
}
.test-slide {
    display: none;
    text-align: center;
    padding: 0 1.5rem;
    width: 100%;
    box-sizing: border-box;
}
.test-slide.active {
    display: block;
}
.test-quote {
    font-family: var(--font-display);
    font-size: clamp(1.1rem, 2.5vw, 1.65rem);
    font-weight: 300;
    font-style: italic;
    color: var(--color-charcoal);
    line-height: 1.6;
    margin-bottom: 2rem;
    max-width: none;
}
.test-divider {
    width: 40px;
    height: 1px;
    background: var(--gold);
    margin: 0 auto 1.25rem;
}
.test-author {
    font-family: var(--font-mono);
    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--color-charcoal);
}
.test-role {
    font-size: .8rem;
    color: var(--color-muted);
    margin-top: .2rem;
    font-style: italic;
}
.test-org {
    font-family: var(--font-mono);
    font-size: .68rem;
    color: var(--gold-accessible);
    margin-top: .25rem;
    letter-spacing: .06em;
}
.test-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 2.5rem;
}
.test-dot {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.test-dot::after {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--gold);
    opacity: .3;
    transition: opacity .25s, width .25s;
    display: block;
}
.test-dot.active::after { opacity: 1; width: 24px; border-radius: 4px; }
.test-dot:hover::after  { opacity: .65; }
.test-arrow {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1.5px solid var(--color-border);
    background: var(--color-surface);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .25s;
    flex-shrink: 0;
}
.test-arrow:hover { background: var(--purple); border-color: var(--purple); }
.test-arrow svg { width: 14px; height: 14px; stroke: var(--color-charcoal); transition: stroke .25s; }
.test-arrow:hover svg { stroke: #fff; }
.test-cta {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 4rem;
    padding-top: 1rem;
}
.test-cta .btn {
    min-width: min(280px, 80%);
    text-align: center;
    justify-content: center;
}
@media (max-width: 600px) {
    .test-slide { padding: 0 .75rem; }
    .testimonial-carousel-section { padding: var(--section-padding-sm) 0; }
    .test-quote { font-size: 1.05rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   TRUST MARQUEE
   ═══════════════════════════════════════════════════════════════════════════════ */
.trust-marquee-section {
    background: var(--color-charcoal);
    padding: 4rem 0;
    text-align: center;
}
.trust-marquee-heading {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2.5vw, 2.25rem);
    font-weight: 300;
    color: rgba(255,255,255,.85);
    margin-bottom: .5rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}
.trust-marquee-heading em { font-style: italic; color: var(--gold); }
.trust-marquee-sub {
    font-size: .8125rem;
    color: rgba(255,255,255,.35);
    letter-spacing: .04em;
    margin-bottom: 3rem;
    max-width: 56ch;
    margin-left: auto;
    margin-right: auto;
}
.trust-marquee-wrap {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--gutter);
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}
.trust-marquee {
    display: flex;
    gap: 4rem;
    width: max-content;
    animation: marqueeScroll 30s linear infinite;
}
.trust-marquee-wrap:hover .trust-marquee { animation-play-state: paused; }
@keyframes marqueeScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
.trust-name {
    font-family: var(--font-display);
    font-size: 1rem;
    color: rgba(255,255,255,.3);
    white-space: nowrap;
    letter-spacing: .08em;
    flex-shrink: 0;
    transition: color var(--transition-base);
    display: flex;
    align-items: center;
    gap: 1.5rem;
}
.trust-name::after {
    content: '·';
    color: rgba(255,255,255,.1);
    font-size: 1.25rem;
}
.trust-name:hover { color: rgba(255,255,255,.65); }

/* FIX TE3: respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .trust-marquee {
        animation: none;
        flex-wrap: wrap;
        justify-content: center;
        width: auto;
        gap: 2rem;
    }
    .trust-marquee-wrap {
        -webkit-mask-image: none;
        mask-image: none;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   FINAL CTA SECTION
   ═══════════════════════════════════════════════════════════════════════════════ */
.final-cta-section {
    background: var(--gradient-dark);
    padding: var(--section-padding) 0;
    position: relative;
    overflow: hidden;
}
.final-cta-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gradient-gold);
}
.final-cta-intro {
    max-width: 700px;
    margin: 0 auto 3rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.final-cta-intro .section-title { color: #fff; font-size: clamp(1.75rem, 3vw, 2.5rem); margin-bottom: .75rem; }
.final-cta-intro .section-title em { color: var(--gold); }
/* Fix 9: eyebrow visible on dark background */
.final-cta-eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    font-family: var(--font-mono);
    font-size: .70rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .22em;
    color: var(--gold);
    margin-bottom: .9rem;
}
.final-cta-eyebrow::before {
    content: '';
    display: block;
    width: 28px;
    height: 1px;
    background: var(--gold);
    flex-shrink: 0;
}
.final-cta-eyebrow::after {
    content: '';
    display: block;
    width: 28px;
    height: 1px;
    background: var(--gold);
    flex-shrink: 0;
}
.final-cta-body {
    color: rgba(255,255,255,.65);
    text-align: center;
    max-width: 56ch;
    margin: 0 auto;
}
.final-cta-form-wrap {
    max-width: 820px;
    margin: 0 auto;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: 2.5rem 3rem;
    box-shadow: 0 24px 64px rgba(0,0,0,.28);
    border: 1px solid rgba(200,168,75,.1);
}

/* Fix 10: Justified 2-column form grid */
.proposal-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem 2rem;
    margin-bottom: 1.5rem;
}
.form-field {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}
.form-field--full {
    grid-column: 1 / -1;
}
.form-field__label {
    font-family: var(--font-mono);
    font-size: .65rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--color-charcoal);
}
.form-field__required {
    color: var(--purple);
    margin-left: .2rem;
}
.form-field__input {
    width: 100%;
    padding: .7rem 1rem;
    border: 1.5px solid rgba(30,16,48,.15);
    border-radius: var(--radius-sm);
    font-family: var(--font-primary);
    font-size: .875rem;
    color: var(--color-charcoal);
    background: #fff;
    transition: border-color .2s, box-shadow .2s;
    box-sizing: border-box;
    appearance: none;
}
.form-field__input:focus {
    outline: none;
    border-color: var(--purple);
    box-shadow: 0 0 0 3px rgba(30,16,48,.08);
}
.form-field__textarea {
    resize: vertical;
    min-height: 90px;
}
.form-field__error {
    font-size: .68rem;
    color: #c0392b;
    min-height: 1em;
}

.final-cta-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: .5rem;
}
.final-cta-actions .btn {
    min-width: 220px;
    justify-content: center;
    text-align: center;
}

/* Issue 5: form-privacy centred */
.form-privacy {
    font-size: .72rem;
    color: var(--color-muted);
    text-align: center;
    margin: 1.25rem auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    width: 100%;
    line-height: 1.6;
    opacity: .75;
    transition: opacity var(--transition-base);
}
.form-privacy:hover { opacity: 1; }
.form-privacy svg {
    flex-shrink: 0;
    color: var(--color-muted);
    transition: color var(--transition-base);
}
.form-privacy:hover svg { color: var(--purple); }

/* FIX FC2: merged duplicate @media (max-width: 600px) blocks — second rule
   was overriding final-cta-form-wrap padding set by the first. */
@media (max-width: 600px) {
    .proposal-form-grid {
        grid-template-columns: 1fr;
    }
    .form-field--full { grid-column: 1; }
    /* use the larger padding value from the second (previously duplicate) block */
    .final-cta-form-wrap { padding: 2rem 1.5rem; }
    .final-cta-section { padding: var(--section-padding-sm) 0; }
}
.form-success {
    display: none; /* hidden until JS reveals it after confirmed submission */
    padding: 1.25rem;
    background: rgba(37,211,102,.08);
    border: 1px solid rgba(37,211,102,.25);
    border-radius: var(--radius-sm);
    color: #16a34a;
    font-size: .875rem;
    margin-bottom: 1.25rem;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ENTERPRISE REDESIGN — New Components
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Gold Primary Button ─────────────────────────────────────────────────── */
.btn-primary-gold {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .85rem 2rem;
    background: var(--gold);
    color: var(--purple);
    font-family: var(--font-primary);
    font-weight: 500;
    font-size: .875rem;
    letter-spacing: .02em;
    border-radius: var(--radius-md);
    border: 2px solid var(--gold);
    text-decoration: none;
    transition: background var(--transition-base), transform var(--transition-fast), box-shadow var(--transition-base);
    cursor: pointer;
    white-space: nowrap;
}
.btn-primary-gold:hover,
.btn-primary-gold:focus-visible {
    background: var(--gold-light);
    border-color: var(--gold-light);
    transform: translateY(-2px);
    box-shadow: var(--shadow-gold);
    color: var(--purple);
}


/* ── Menu card order button ──────────────────────────────────────────────────── */
.btn-add-item {
    font-family: var(--font-mono);
    font-size: .6rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 400;
    padding: .4rem .85rem;
    border-radius: var(--radius-full);
}
.btn-not-in-cart {
    background: transparent;
    border: 1px solid var(--gold);
    color: var(--gold);
}
.btn-not-in-cart:hover {
    background: var(--gold);
    color: var(--purple);
    box-shadow: var(--shadow-gold);
}
.btn-in-cart {
    background: var(--purple);
    border-color: var(--purple);
    color: #fff;
}

/* ── Operational Stats Strip ─────────────────────────────────────────────── */
.operational-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0;
    background: var(--purple);
    padding: 2.5rem var(--gutter);
}
.operational-strip .stats-strip__sep {
    width: 1px;
    height: 3.5rem;
    background: rgba(255,255,255,.15);
    flex-shrink: 0;
}
.op-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 3rem;
    gap: .4rem;
}
.op-stat__num {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 400;
    color: var(--gold);
    line-height: 1;
}
.op-stat__num span {
    font-size: .75em;
    font-weight: 600;
}
.op-stat__label {
    font-family: var(--font-mono);
    font-size: .7rem;
    font-weight: 400;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255,255,255,.6);
}

/* ── Problem / Solution Section ─────────────────────────────────────────── */
.problem-section {
    background: var(--color-surface);
}
.problem-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
}
/* FIX FT1b: breakpoint was in 18-sticky-mobile-cta.css (now removed). Moved here
   to its canonical location alongside the component definition. */
@media (max-width: 1024px) {
    .problem-two-col {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
}
.problem-eyebrow {
    margin-bottom: .75rem;
}
.solution-eyebrow {
    color: var(--green-compliance) !important;
}
.problem-solution-title {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: 400;
    color: var(--color-charcoal);
    margin-bottom: 1.5rem;
    line-height: 1.15;
}
.problem-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .85rem;
}
.problem-list li {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--color-text);
}
.risk-icon {
    color: #c0392b;
    font-weight: 700;
    font-size: 1.1rem;
    flex-shrink: 0;
    margin-top: .1rem;
    transition: color var(--transition-base);
}
.solution-icon {
    color: var(--green-compliance);
    font-weight: 700;
    font-size: 1.1rem;
    flex-shrink: 0;
    margin-top: .1rem;
    transition: color var(--transition-base);
}
.risk-list li:hover .risk-icon   { color: #922b21; }
.solution-list li:hover .solution-icon { color: var(--purple); }
.risk-list li { color: #555; }
.solution-list li { color: var(--color-text); font-weight: 500; }

/* ── Process Steps (updated with icons) ─────────────────────────────────── */
.process-step__icon {
    font-size: 2rem;
    margin-bottom: .5rem;
    display: block;
    color: var(--purple);
    transition: color var(--transition-base);
}
.process-step__icon svg { display: block; }
.process-step:hover .process-step__icon { color: var(--gold); }

/* ── Case Study Section ──────────────────────────────────────────────────── */
.case-study-section {
    background: var(--color-surface);
}
.case-study-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 3rem;
}
.case-study-card {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: 2.5rem;
    position: relative;
    overflow: hidden;
    transition: box-shadow var(--transition-base), transform var(--transition-base);
    display: flex;
    flex-direction: column;
}
.case-study-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 4px; height: 100%;
    background: linear-gradient(to bottom, var(--gold), var(--purple));
    border-radius: var(--radius-xl) 0 0 var(--radius-xl);
}
.case-study-card:hover {
    box-shadow: 0 20px 56px rgba(30,16,48,.12);
    transform: translateY(-5px);
    border-color: rgba(200,168,75,.3);
}
.case-study-card__tag {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: .62rem;
    font-weight: 400;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--gold);
    background: rgba(200,168,75,.08);
    border: 1px solid rgba(200,168,75,.2);
    padding: .25rem .8rem;
    border-radius: var(--radius-full);
    margin-bottom: 1.25rem;
}
.case-study-card__title {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 400;
    color: var(--color-charcoal);
    margin-bottom: 1rem;
    line-height: 1.2;
}
.case-study-card__context {
    font-size: .95rem;
    color: var(--color-muted);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}
.case-study-card__results {
    list-style: none;
    padding: 1.25rem 1.5rem;
    margin: 0 0 1.5rem;
    display: flex;
    flex-direction: column;
    gap: .85rem;
    background: rgba(30,16,48,.03);
    border: 1px solid rgba(30,16,48,.07);
    border-radius: var(--radius-md);
}
.case-study-card__results li {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.cs-result-num {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 400;
    color: var(--purple);
    font-style: italic;
    line-height: 1;
    min-width: 3.5rem;
    flex-shrink: 0;
}
.cs-result-label {
    font-size: .875rem;
    color: var(--color-text);
    font-weight: 500;
    line-height: 1.4;
}
.case-study-card__quote {
    border-top: 1px solid var(--color-border);
    padding-top: 1.25rem;
    margin-top: auto;
    padding-top: 1.25rem;
    background: rgba(200,168,75,.04);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    margin-left: -2.5rem;
    margin-right: -2.5rem;
    margin-bottom: -2.5rem;
    padding: 1.25rem 2.5rem 2rem;
    border-top: 1px solid rgba(200,168,75,.15);
}
.case-study-card__quote p {
    font-style: italic;
    color: var(--color-charcoal);
    font-size: .9rem;
    line-height: 1.65;
    margin-bottom: .5rem;
    quotes: '\201C' '\201D';
}
.case-study-card__quote span {
    font-family: var(--font-mono);
    font-size: .68rem;
    font-weight: 400;
    color: var(--gold);
    letter-spacing: .08em;
    padding-left: 1rem;
}
.case-study-cta {
    text-align: center;
    margin-top: 3rem;
}


/* ── Enterprise Footer ───────────────────────────────────────────────────── */
.site-footer {
    background: #0d0618;
    color: rgba(255,255,255,.7);
    padding-top: 5rem;
    position: relative;
    overflow: hidden;
    border-top: 1px solid rgba(200,168,75,.1);
}
.footer-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1.2fr 1.2fr;
    gap: 3rem;
    padding-bottom: 4rem;
    border-bottom: 1px solid rgba(255,255,255,.1);
}
.footer-logo { display: inline-flex; align-items: center; gap: .75rem; text-decoration: none; margin-bottom: 1.25rem; }
.footer-logo img { width: 56px; height: 56px; display: block; flex-shrink: 0; object-fit: contain; }
.footer-wordmark {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 500;
    color: #fff;
    line-height: 1.2;
    letter-spacing: .01em;
}
.footer-wordmark em {
    font-style: italic;
    color: var(--gold);
}
.footer-about-text {
    font-size: .875rem;
    line-height: 1.7;
    color: rgba(255,255,255,.6);
    margin-bottom: 1.5rem;
}
.footer-badges {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}
.footer-badge {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: .25rem .65rem;
    border-radius: var(--radius-full);
}
.footer-badge--haccp    { background: rgba(200,168,75,.15); color: var(--gold); border: 1px solid rgba(200,168,75,.3); }
.footer-badge--halal    { background: rgba(46,125,50,.2);  color: #81c784;     border: 1px solid rgba(46,125,50,.35); }
.footer-badge--approved { background: rgba(255,255,255,.1); color: rgba(255,255,255,.8); border: 1px solid rgba(255,255,255,.15); }

.footer-col-title {
    font-family: var(--font-mono);
    font-size: .68rem;
    font-weight: 400;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgba(255,255,255,.55);
    margin-bottom: 1.25rem;
}
.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .65rem;
}
.footer-links a {
    color: rgba(255,255,255,.6);
    text-decoration: none;
    font-size: .875rem;
    transition: color var(--transition-fast);
}
.footer-links a:hover { color: var(--gold); }

.footer-compliance-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.25rem;
    display: flex;
    flex-direction: column;
    gap: .65rem;
}
.footer-compliance-list li {
    display: flex;
    align-items: flex-start;  /* icon sits at top, text wraps cleanly */
    gap: .65rem;
    font-size: .8rem;
    line-height: 1.5;
    color: rgba(255,255,255,.65);
}
.footer-compliance-icon {
    color: var(--green-compliance);
    font-weight: 700;
    flex-shrink: 0;
    margin-top: .15rem;
    line-height: 1;
    transition: color var(--transition-base);
}
.footer-compliance-icon svg { display: block; }
.footer-compliance-list li:hover .footer-compliance-icon { color: var(--gold); }
.footer-docs-link {
    font-size: .875rem;
    color: var(--gold);
    text-decoration: none;
    font-weight: 600;
    transition: color var(--transition-fast);
}
.footer-docs-link:hover { color: var(--gold-light); }

/* .footer-contact-list and contact item styles live in 20-footer-contact.css */

.btn-whatsapp {
    background: #25D366;
    color: #fff;
    border: none;
    padding: .65rem 1.25rem;
    border-radius: var(--radius-md);
    font-size: .875rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    text-decoration: none;
    margin-bottom: .75rem;
    transition: background var(--transition-base), transform var(--transition-fast);
    width: 100%;
    justify-content: center;
}
.btn-whatsapp:hover { background: #1fba58; transform: translateY(-1px); color: #fff; }

/* ── Footer WhatsApp CTA button ─────────────────────────────────────────────── */
.footer-whatsapp {
    background: rgba(37,211,102,.12) !important;
    border-color: rgba(37,211,102,.3) !important;
    color: #25D366 !important;
    font-size: .72rem;
    padding: .65rem 1.25rem;
    margin-bottom: .5rem;
    width: 100%;
    justify-content: center;
}
.footer-whatsapp:hover {
    background: rgba(37,211,102,.22) !important;
    color: #25D366 !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(37,211,102,.2) !important;
}

.footer-proposal-btn {
    width: 100%;
    justify-content: center;
    text-align: center;
}

.footer-bottom {
    background: rgba(0,0,0,.2);
    padding: 1.25rem var(--gutter) 2rem;
}
.footer-bottom-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}
.footer-copyright {
    font-size: .8rem;
    color: rgba(255,255,255,.4);
    margin: 0;
}
.footer-legal-nav {
    display: flex;
    gap: 1.5rem;
}
.footer-legal-nav a {
    font-size: .8rem;
    color: rgba(255,255,255,.4);
    text-decoration: none;
    transition: color var(--transition-fast);
}
.footer-legal-nav a:hover { color: rgba(255,255,255,.8); }

/* ── Footer Responsive ───────────────────────────────────────────────────── */

/* Tablet: 2-column grid, about col spans full width */
@media (max-width: 1024px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2.5rem;
    }
    .footer-col--about {
        grid-column: 1 / -1;
    }
    .footer-about-text { max-width: 52ch; }
    .footer-badges { flex-wrap: wrap; }
}

/* Mobile: single column, sensible spacing */
@media (max-width: 640px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 2.25rem;
        padding-bottom: 2.5rem;
    }
    .footer-col--about { grid-column: 1; }

    .footer-logo img { max-width: 120px; }
    .footer-about-text { font-size: .84rem; }

    .footer-badges {
        gap: .4rem;
    }
    .footer-badge {
        font-size: .68rem;
        padding: .22rem .55rem;
    }

    .footer-contact-actions {
        flex-direction: column;
        gap: .5rem;
    }
    .footer-contact-btn {
        width: 100%;
        justify-content: center;
        padding: .7rem 1rem;
        font-size: .82rem;
    }

    .footer-bottom-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: .75rem;
    }
    .footer-legal-nav {
        gap: 1rem;
        flex-wrap: wrap;
    }
    .footer-copyright,
    .footer-legal-nav a {
        font-size: .75rem;
    }
}

/* ── Sticky Mobile CTA ───────────────────────────────────────────────────── */
.sticky-mobile-cta {
    display: none;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 900;
    background: var(--purple);
    border-top: 1px solid rgba(255,255,255,.1);
    /* FIX SM2: respect iOS home-indicator safe area */
    padding: .6rem 1rem calc(.6rem + env(safe-area-inset-bottom, 0px));
    gap: .5rem;
}
.sticky-mobile-cta a {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .65rem .75rem;
    border-radius: var(--radius-md);
    font-size: .75rem;
    font-weight: 500;
    text-decoration: none;
    text-align: center;
    color: rgba(255,255,255,.8);
}
.sticky-mobile-cta__call {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.15);
    flex: 0 0 auto;
    width: 64px;
    font-size: .7rem;
}
.sticky-mobile-cta__whatsapp {
    background: rgba(37,211,102,.15);
    color: #25D366;
    border: 1px solid rgba(37,211,102,.3);
    flex: 0 0 auto;
    width: 80px;
}
/* Proposal is the primary action — wider, bolder, gold */
.sticky-mobile-cta__proposal {
    flex: 1;
    /* FIX SM1: prevent collapse on 320px screens */
    min-width: 0;
    background: var(--gold);
    color: #1a0d2e;
    font-weight: 700;
    font-size: .82rem;
    box-shadow: 0 2px 12px rgba(200,168,75,.35);
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
/* FIX FT1: footer-grid responsive rules were duplicated here AND in
   01-footer.css and 17-enterprise.css — causing conflicts. Removed the
   footer-grid and problem-two-col overrides from this file; they now live
   exclusively in their canonical stylesheets (01-footer / 17-enterprise). */
@media (max-width: 1024px) {
    .case-study-grid {
        grid-template-columns: 1fr 1fr;
    }
    .op-stat {
        padding: 0 1.5rem;
    }
}

@media (max-width: 640px) {
    .case-study-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .operational-strip {
        flex-direction: column;
        gap: 1.5rem;
    }
    .operational-strip .stats-strip__sep {
        width: 4rem;
        height: 1px;
    }
    .sticky-mobile-cta {
        display: flex;
    }
    /* FIX SM2: account for sticky CTA height + iOS safe area */
    .site-footer {
        padding-bottom: 0;
    }
    .footer-bottom {
        padding-bottom: calc(1.25rem + 72px + env(safe-area-inset-bottom, 0px));
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   PROCESS STRIP — How We Work (dark purple band)
   ═══════════════════════════════════════════════════════════════════════════════ */
.process-strip {
    background: var(--purple);
    padding: 4rem 0;
    position: relative;
    overflow: hidden;
}
.process-strip__header {
    text-align: center;
    margin-bottom: 3rem;
}
.process-strip__divider {
    width: 48px;
    height: 2px;
    background: var(--gold);
    margin: 1.5rem auto 0;
    border-radius: 2px;
    opacity: .6;
}
.process-strip__title {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 3vw, 2.75rem);
    font-weight: 400;
    color: #fff;
    line-height: 1.12;
    letter-spacing: -.01em;
    margin-bottom: 1rem;
}
.process-strip__title em {
    font-style: italic;
    color: var(--gold);
}
.process-strip__subtitle {
    font-size: .9375rem;
    line-height: 1.75;
    color: rgba(255,255,255,.5);
    max-width: 56ch;
    margin: 0 auto;
}
.process-strip::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--gradient-gold);
}
.process-strip::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(200,168,75,.07) 0%, transparent 70%);
    pointer-events: none;
}
.process-strip__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
    align-items: stretch;
    gap: 0;
    position: relative;
    z-index: 1;
}
/* .strip-step avoids class conflict with .process-steps-row .process-step */
.strip-step {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem 2rem 1rem 1.75rem;
    text-align: left;
}
.strip-step__num {
    font-family: var(--font-display);
    font-size: 2.75rem;
    font-weight: 400;
    color: var(--gold);
    line-height: 1;
    letter-spacing: -.02em;
}
.strip-step__title {
    font-family: var(--font-mono);
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: #fff;
    margin: 0;
}
.strip-step__desc {
    font-size: .875rem;
    line-height: 1.75;
    color: rgba(255,255,255,.82);
    margin: 0;
    max-width: 26ch;
}
.process-strip__sep {
    width: 1px;
    background: rgba(255,255,255,.14);
    flex-shrink: 0;
    align-self: stretch;
    margin: .5rem 0;
}
@media (max-width: 900px) {
    .process-strip__inner {
        grid-template-columns: 1fr 1fr;
        gap: 0;
    }
    .process-strip__sep { display: none; }
    .strip-step {
        padding: 1.5rem 1.25rem;
        border-bottom: 1px solid rgba(255,255,255,.08);
    }
}
@media (max-width: 540px) {
    .process-strip__inner { grid-template-columns: 1fr; }
    .strip-step { padding: 1.5rem 1rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   FOOTER CONTACT LIST — improved (Fix 12)
   ═══════════════════════════════════════════════════════════════════════════════ */
.footer-contact-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    display: flex;
    flex-direction: column;
    gap: .9rem;
}
.footer-contact-item {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
}
.footer-contact-item__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: rgba(200,168,75,.1);
    border: 1px solid rgba(200,168,75,.18);
    color: var(--gold);
    flex-shrink: 0;
    margin-top: .1rem;
}
.footer-contact-item__body {
    display: flex;
    flex-direction: column;
    gap: .1rem;
}
.footer-contact-item__type {
    font-family: var(--font-mono);
    font-size: .55rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: rgba(255,255,255,.28);
}
.footer-contact-item__value {
    font-size: .84rem;
    color: rgba(255,255,255,.6);
    text-decoration: none;
    transition: color var(--transition-base);
    line-height: 1.3;
}
a.footer-contact-item__value:hover { color: var(--gold); }

.footer-contact-actions {
    display: flex;
    gap: .6rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}
.footer-contact-btn {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .55rem 1.1rem;
    border-radius: var(--radius-sm);
    font-family: var(--font-primary);
    font-size: .78rem;
    font-weight: 500;
    text-decoration: none;
    transition: all var(--transition-base);
    white-space: nowrap;
}
.footer-contact-btn--whatsapp {
    background: rgba(37,211,102,.12);
    border: 1px solid rgba(37,211,102,.3);
    color: #25D366;
}
.footer-contact-btn--whatsapp:hover {
    background: #25D366;
    border-color: #25D366;
    color: #fff;
}
.footer-contact-btn--proposal {
    background: rgba(200,168,75,.12);
    border: 1px solid rgba(200,168,75,.3);
    color: var(--gold);
}
.footer-contact-btn--proposal:hover {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--purple);
}

/* ── Utilities — Éleve style ─────────────────────────────────────────────────── */

/* .container, .container-fluid, .section, .section-light, .sr-only,
   .text-*, .font-display, .valign, .position-re, .o-hidden, .mb-*, .mt-*,
   .divider-gold are all defined in core/02-utilities.css — do not repeat here. */

/* section-eyebrow / section-title / section-body defined in core/utilities.css */

/* ── Flaticon fallback: flaticon-call (used on About page) ─────────────────── */
/* Renders a phone SVG when the Flaticon font fails to load */
.flaticon-call::before {
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1L6.6 10.8z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
}

/* ── CSP-safe hide helper ────────────────────────────────────────────────────
   Replaces inline style="display:none" on elements that need to be hidden
   initially. Inline style attributes are blocked by the style-src CSP directive
   (which allows 'nonce-{n}' but not 'unsafe-inline'). JavaScript toggles
   visibility via classList.add/remove('js-hidden') instead of .style.display.
   ── */
.js-hidden {
    display: none !important;
}

/* ── Menu Item Detail Page ───────────────────────────────────────────────────
   Replaces inline styles removed from menu-item.php (FIX MI1, MI2, MI3)
   ── */
.menu-item-tags {
    margin-top: 1.5rem;
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}
.menu-item-price {
    margin-top: 1.5rem;
}
/* FIX MI2: was var(--color-gold) which does not exist — correct variable is --gold */
.menu-item-price__value {
    font-family: var(--font-display);
    font-size: 1.75rem;
    color: var(--gold);
}
.menu-item-price__unit {
    font-size: .85rem;
    color: var(--color-muted);
    margin-left: .5rem;
}
/* FIX MI3: action buttons stack cleanly on mobile */
.menu-item-actions {
    margin-top: 2rem;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}
@media (max-width: 480px) {
    .menu-item-actions .btn {
        flex: 1 1 100%;
        text-align: center;
        justify-content: center;
    }
}
/* FIX MI1: image inside about-img-main on menu-item detail */
.menu-item-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-md);
}
/* FIX MI1: no-image placeholder without inline style */
.menu-item-no-img {
    width: 100%;
    height: 320px;
    background: var(--color-surface);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-muted);
}


/* ── CSP-safe replacements for inline style="" attributes ──────────────────── */

/* compliance.php: .section-eyebrow on dark background needs gold colour */
.section-eyebrow--gold {
    color: var(--gold);
}
.section-eyebrow--gold::before {
    background: var(--gold);
}

/* compliance.php: centred muted body text on dark background */
.section-body--dark-centered {
    color: rgba(255,255,255,.55);
    margin: 0 auto;
    text-align: center;
    max-width: 56ch;
}

/* compliance.php: grid-4 with bottom margin */
.grid-4--mb {
    margin-bottom: var(--space-8);
}

/* who-we-serve.php / general: button with top margin */
.btn-mt {
    margin-top: 2rem;
}

/* testimonials.php: centred section eyebrow (already in section-header.centered
   but this component's eyebrow sits outside .section-header) */
.section-eyebrow--centered {
    justify-content: center;
}
.section-eyebrow--centered::before {
    display: none;
}

/* final-cta.php: honeypot field — visually hidden but accessible to screen readers */
.visually-hidden-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ── Inline-style replacements (CSP / FIX) ───────────────────────────────────
   Replaces style="" attributes removed from:
   - order-confirmation.php
   - errors/404.php, errors/500.php
   - pages/privacy.php, pages/terms.php
   ── */

/* page-hero__inner centred variant (order confirmation, error pages) */
.page-hero__inner--centered { text-align: center; }

/* section centred variant */
.section--centered { text-align: center; }

/* narrow content wrapper */
.content-narrow { max-width: 540px; margin: 0 auto; }
.content-narrow--sm { max-width: 480px; }

/* card spacing */
.card--mb { margin-bottom: 2rem; }

/* WhatsApp-accented card */
.card--whatsapp-border { text-align: left; border-left: 4px solid #25D366; }

/* Order reference typography */
.order-ref__label {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--color-muted);
    margin-bottom: .25rem;
}
.order-ref__value {
    font-family: var(--font-display);
    font-size: 1.6rem;
    color: var(--color-charcoal);
}

/* CTA row of buttons */
.cta-row {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}
@media (max-width: 480px) {
    .cta-row .btn { flex: 1 1 100%; }
}

/* Legal page body intro paragraph spacing */
.section-body--mb { margin-bottom: 2rem; }

/* Menu item — no-image placeholder (replaces CSP-violating inline style) */
.menu-item-no-image {
    width: 100%;
    height: 320px;
    background: var(--color-surface);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-muted);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   UX TRANSITIONS — Choreographed reveal system
   Order: section → images → elements → text
   Cards: container → top → inner → bottom → next card same pattern
   Stacked images: base first → overlay second
   Forms: intro → wrap → fields → submit
   ═══════════════════════════════════════════════════════════════════════════════ */

:root {
    --r-dur:     1.0s;                            /* child reveal duration   */
    --r-ease:    cubic-bezier(0.22, 1, 0.36, 1); /* gentle expo out         */
    --r-rise:    48px;                            /* vertical travel         */
    --h-dur:     0.42s;                           /* hover duration          */
    --h-ease:    cubic-bezier(0.4, 0, 0.2, 1);   /* standard material ease  */
    --card-lift: translateY(-6px);
    --card-sh:   0 24px 64px rgba(30,16,48,.12), 0 6px 20px rgba(30,16,48,.07);
}

/* ═══════════════════════════════════════════════════════════════════
   GUARD — all hidden states only active when JS loaded
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. CONTAINERS / CARDS — hidden until observed ── */
.js-ready .menu-card,
.js-ready .who-card,
.js-ready .mv-card,
.js-ready .value-card,
.js-ready .process-step,
.js-ready .case-study-card,
.js-ready .contact-method,
.js-ready .compliance-note-bar,
.js-ready .about-img-main,
.js-ready .about-img-accent,
.js-ready .final-cta-form-wrap,
.js-ready [data-reveal],
.js-ready .section-reveal {
    opacity: 0;
    transform: translateY(var(--r-rise));
    transition:
        opacity   var(--r-dur) var(--r-ease),
        transform var(--r-dur) var(--r-ease),
        box-shadow var(--h-dur) var(--h-ease),
        border-color var(--h-dur) var(--h-ease);
}

/* ── Visible state ── */
.menu-card.is-visible,
.who-card.is-visible,
.mv-card.is-visible,
.value-card.is-visible,
.process-step.is-visible,
.case-study-card.is-visible,
.contact-method.is-visible,
.compliance-note-bar.is-visible,
.about-img-main.is-visible,
.about-img-accent.is-visible,
.final-cta-form-wrap.is-visible,
[data-reveal].is-visible,
.section-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ── Card grid stagger — CSS nth-child (no separators, safe to use) ── */
.menu-card:nth-child(2), .who-card:nth-child(2), .value-card:nth-child(2),
.process-step:nth-child(2), .case-study-card:nth-child(2) { transition-delay: .12s; }

.menu-card:nth-child(3), .who-card:nth-child(3), .value-card:nth-child(3),
.process-step:nth-child(3), .case-study-card:nth-child(3) { transition-delay: .24s; }

.menu-card:nth-child(4), .who-card:nth-child(4), .value-card:nth-child(4),
.process-step:nth-child(4), .case-study-card:nth-child(4) { transition-delay: .36s; }

.menu-card:nth-child(5), .process-step:nth-child(5) { transition-delay: .46s; }
.menu-card:nth-child(6), .process-step:nth-child(6) { transition-delay: .54s; }
.menu-card:nth-child(n+7)                           { transition-delay: .60s; }

/* ═══════════════════════════════════════════════════════════════════
   STRIP STEPS & STAT CELLS
   Stagger is driven entirely by JS setTimeout — no nth-child here.
   Each item uses a slower, more deliberate reveal duration.
   Children cascade inside after the container appears.
   ═══════════════════════════════════════════════════════════════════ */

/* Hidden state — JS adds is-visible with sequential setTimeout */
.js-ready .strip-step,
.js-ready .supply-stat-cell,
.js-ready .stats-strip__cell,
.js-ready .stats-item {
    opacity: 0;
    transform: translateY(40px);
    /* Slower, more deliberate than cards */
    transition:
        opacity   1.10s cubic-bezier(0.22, 1, 0.36, 1),
        transform 1.10s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Visible state — transition-delay is ZERO here, JS controls timing */
.strip-step.is-visible,
.supply-stat-cell.is-visible,
.stats-strip__cell.is-visible,
.stats-item.is-visible {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0s !important;
}

/* ── Strip-step inner cascade: num → title → desc ── */
.js-ready .strip-step .strip-step__num,
.js-ready .strip-step .strip-step__title,
.js-ready .strip-step .strip-step__desc {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.80s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.80s cubic-bezier(0.22, 1, 0.36, 1);
}
.strip-step.is-visible .strip-step__num   { opacity: 1; transform: none; transition-delay: 0.05s; }
.strip-step.is-visible .strip-step__title { opacity: 1; transform: none; transition-delay: 0.20s; }
.strip-step.is-visible .strip-step__desc  { opacity: 1; transform: none; transition-delay: 0.36s; }

/* ── Supply-stat-cell inner cascade: num → label ── */
.js-ready .supply-stat-cell .supply-stat-num,
.js-ready .supply-stat-cell .supply-stat-label {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.80s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.80s cubic-bezier(0.22, 1, 0.36, 1);
}
.supply-stat-cell.is-visible .supply-stat-num   { opacity: 1; transform: none; transition-delay: 0.05s; }
.supply-stat-cell.is-visible .supply-stat-label { opacity: 1; transform: none; transition-delay: 0.22s; }

/* ── Stats-item inner cascade: value → label ── */
.js-ready .stats-item .stats-value,
.js-ready .stats-item .stats-label,
.js-ready .stats-item .stats-unit {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.80s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.80s cubic-bezier(0.22, 1, 0.36, 1);
}
.stats-item.is-visible .stats-value { opacity: 1; transform: none; transition-delay: 0.05s; }
.stats-item.is-visible .stats-unit  { opacity: 1; transform: none; transition-delay: 0.05s; }
.stats-item.is-visible .stats-label { opacity: 1; transform: none; transition-delay: 0.22s; }

/* ═══════════════════════════════════════════════════════════════════
   2. CHILDREN — hidden until PARENT gets is-visible
      Order within card: top content → inner → body text → bottom
   ═══════════════════════════════════════════════════════════════════ */

/* ── WHO-CARD children ──
   image (0s) → icon (0.14s) → title (0.26s) → desc (0.38s)           */
.js-ready .who-card .who-card__img-wrap,
.js-ready .who-card .who-card__icon,
.js-ready .who-card .who-card__title,
.js-ready .who-card .who-card__desc {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity var(--r-dur) var(--r-ease), transform var(--r-dur) var(--r-ease);
}
.who-card.is-visible .who-card__img-wrap { opacity:1; transform:none; transition-delay: 0s;    }
.who-card.is-visible .who-card__icon     { opacity:1; transform:none; transition-delay: .14s;  }
.who-card.is-visible .who-card__title    { opacity:1; transform:none; transition-delay: .26s;  }
.who-card.is-visible .who-card__desc     { opacity:1; transform:none; transition-delay: .38s;  }

/* ── FEATURE-CARD children — only cascade inside [data-grid-seq] (handled there).
   Outside grid-seq the container itself reveals; children stay visible.     */
/* ── MV-CARD children ──
   eyebrow (0s) → title (0.12s) → divider (0.20s) → body (0.30s)      */
.js-ready .mv-card .mv-card__eyebrow,
.js-ready .mv-card .mv-card__title,
.js-ready .mv-card .mv-card__divider,
.js-ready .mv-card p {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity var(--r-dur) var(--r-ease), transform var(--r-dur) var(--r-ease);
}
.mv-card.is-visible .mv-card__eyebrow { opacity:1; transform:none; transition-delay: 0s;   }
.mv-card.is-visible .mv-card__title   { opacity:1; transform:none; transition-delay: .12s; }
.mv-card.is-visible .mv-card__divider { opacity:1; transform:none; transition-delay: .20s; }
.mv-card.is-visible p                 { opacity:1; transform:none; transition-delay: .30s; }

/* ── VALUE-CARD children ──
   num (0s) → title (0.12s) → body (0.24s)                            */
.js-ready .value-card .value-card__num,
.js-ready .value-card .value-card__title,
.js-ready .value-card .value-card__body {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity var(--r-dur) var(--r-ease), transform var(--r-dur) var(--r-ease);
}
.value-card.is-visible .value-card__num   { opacity:1; transform:none; transition-delay: 0s;   }
.value-card.is-visible .value-card__title { opacity:1; transform:none; transition-delay: .12s; }
.value-card.is-visible .value-card__body  { opacity:1; transform:none; transition-delay: .24s; }

/* ── PROCESS-STEP children ──
   icon (0s) → num (0.10s) → title (0.20s) → desc (0.32s)             */
.js-ready .process-step .process-step__icon,
.js-ready .process-step .process-step__num,
.js-ready .process-step .process-step__title,
.js-ready .process-step .process-step__desc {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity var(--r-dur) var(--r-ease), transform var(--r-dur) var(--r-ease);
}
.process-step.is-visible .process-step__icon  { opacity:1; transform:none; transition-delay: 0s;   }
.process-step.is-visible .process-step__num   { opacity:1; transform:none; transition-delay: .10s; }
.process-step.is-visible .process-step__title { opacity:1; transform:none; transition-delay: .20s; }
.process-step.is-visible .process-step__desc  { opacity:1; transform:none; transition-delay: .32s; }

/* ── MENU-CARD children ──
   img-wrap (0s) → name+cat (0.12s) → desc (0.22s) → footer (0.32s)   */
.js-ready .menu-card .menu-card__img-wrap,
.js-ready .menu-card .menu-card__name,
.js-ready .menu-card .menu-card__desc,
.js-ready .menu-card .menu-card__footer {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity var(--r-dur) var(--r-ease), transform var(--r-dur) var(--r-ease);
}
.menu-card.is-visible .menu-card__img-wrap { opacity:1; transform:none; transition-delay: 0s;   }
.menu-card.is-visible .menu-card__name     { opacity:1; transform:none; transition-delay: .12s; }
.menu-card.is-visible .menu-card__desc     { opacity:1; transform:none; transition-delay: .22s; }
.menu-card.is-visible .menu-card__footer   { opacity:1; transform:none; transition-delay: .32s; }

/* ── CASE-STUDY-CARD children ──
   tag (0s) → title (0.12s) → results (0.24s) → quote (0.38s)         */
.js-ready .case-study-card .case-study-card__tag,
.js-ready .case-study-card .case-study-card__title,
.js-ready .case-study-card .case-study-card__results,
.js-ready .case-study-card .case-study-card__quote {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity var(--r-dur) var(--r-ease), transform var(--r-dur) var(--r-ease);
}
.case-study-card.is-visible .case-study-card__tag     { opacity:1; transform:none; transition-delay: 0s;   }
.case-study-card.is-visible .case-study-card__title   { opacity:1; transform:none; transition-delay: .12s; }
.case-study-card.is-visible .case-study-card__results { opacity:1; transform:none; transition-delay: .24s; }
.case-study-card.is-visible .case-study-card__quote   { opacity:1; transform:none; transition-delay: .38s; }

/* ═══════════════════════════════════════════════════════════════════
   3. STACKED IMAGES — base/main first, overlay/accent second
   ═══════════════════════════════════════════════════════════════════ */

/* about-img-main: no extra delay (first = base layer)
   about-img-accent: 0.28s delay (second = overlay layer)              */
.js-ready .about-img-main { transition-delay: 0s;    }
.js-ready .about-img-accent { transition-delay: .28s; }

/* ═══════════════════════════════════════════════════════════════════
   4. FORMS — intro → wrap → fields top→bottom → submit
   ═══════════════════════════════════════════════════════════════════ */

/* final-cta-form-wrap delayed after intro text */
.js-ready .final-cta-form-wrap { transition-delay: .20s; }

/* Form fields stagger top-to-bottom once wrap is visible */
.js-ready .final-cta-form-wrap .form-field,
.js-ready .final-cta-form-wrap .final-cta-actions {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity var(--r-dur) var(--r-ease), transform var(--r-dur) var(--r-ease);
}
.final-cta-form-wrap.is-visible .form-field:nth-child(1)  { opacity:1; transform:none; transition-delay: .10s; }
.final-cta-form-wrap.is-visible .form-field:nth-child(2)  { opacity:1; transform:none; transition-delay: .18s; }
.final-cta-form-wrap.is-visible .form-field:nth-child(3)  { opacity:1; transform:none; transition-delay: .26s; }
.final-cta-form-wrap.is-visible .form-field:nth-child(4)  { opacity:1; transform:none; transition-delay: .34s; }
.final-cta-form-wrap.is-visible .form-field:nth-child(5)  { opacity:1; transform:none; transition-delay: .42s; }
.final-cta-form-wrap.is-visible .form-field:nth-child(6)  { opacity:1; transform:none; transition-delay: .50s; }
.final-cta-form-wrap.is-visible .form-field:nth-child(n+7){ opacity:1; transform:none; transition-delay: .56s; }
.final-cta-form-wrap.is-visible .final-cta-actions        { opacity:1; transform:none; transition-delay: .64s; }

/* Section-level reveal generic */
.section-reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1.1s var(--r-ease), transform 1.1s var(--r-ease);
}
.section-reveal.is-visible { opacity:1; transform:none; }
.section-reveal:nth-child(2) { transition-delay: .12s; }
.section-reveal:nth-child(3) { transition-delay: .24s; }

/* ═══════════════════════════════════════════════════════════════════
   GRID-4 SEQUENTIAL CARDS (feature-card, supply-card)
   JS fires each card 300ms after the previous.
   Inner children cascade after the card container appears.
   ═══════════════════════════════════════════════════════════════════ */

/* Hidden until JS adds is-visible */
.js-ready [data-grid-seq] .feature-card,
.js-ready [data-grid-seq] .supply-card {
    opacity: 0;
    transform: translateY(44px);
    transition:
        opacity   1.10s cubic-bezier(0.22, 1, 0.36, 1),
        transform 1.10s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: 0s;
}

/* Visible */
[data-grid-seq] .feature-card.is-visible,
[data-grid-seq] .supply-card.is-visible {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0s !important;
}

/* ── Feature-card inner cascade: icon → title → body → accent ── */
.js-ready [data-grid-seq] .feature-card .feature-card-icon,
.js-ready [data-grid-seq] .feature-card .feature-card-title,
.js-ready [data-grid-seq] .feature-card .feature-card-body,
.js-ready [data-grid-seq] .feature-card .feature-card-accent {
    opacity: 0;
    transform: translateY(12px);
    transition:
        opacity   0.75s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-grid-seq] .feature-card.is-visible .feature-card-icon   { opacity:1; transform:none; transition-delay: 0.08s; }
[data-grid-seq] .feature-card.is-visible .feature-card-title  { opacity:1; transform:none; transition-delay: 0.22s; }
[data-grid-seq] .feature-card.is-visible .feature-card-body   { opacity:1; transform:none; transition-delay: 0.36s; }
[data-grid-seq] .feature-card.is-visible .feature-card-accent { opacity:1; transform:none; transition-delay: 0.48s; }

/* ── Supply-card inner cascade: icon → title → desc → accent ── */
.js-ready [data-grid-seq] .supply-card .supply-card-icon,
.js-ready [data-grid-seq] .supply-card .supply-card-title,
.js-ready [data-grid-seq] .supply-card .supply-card-desc,
.js-ready [data-grid-seq] .supply-card .supply-card-accent {
    opacity: 0;
    transform: translateY(12px);
    transition:
        opacity   0.75s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-grid-seq] .supply-card.is-visible .supply-card-icon   { opacity:1; transform:none; transition-delay: 0.08s; }
[data-grid-seq] .supply-card.is-visible .supply-card-title  { opacity:1; transform:none; transition-delay: 0.22s; }
[data-grid-seq] .supply-card.is-visible .supply-card-desc   { opacity:1; transform:none; transition-delay: 0.36s; }
[data-grid-seq] .supply-card.is-visible .supply-card-accent { opacity:1; transform:none; transition-delay: 0.48s; }

/* ═══════════════════════════════════════════════════════════════════
   5. HOVER LIFTS
   ═══════════════════════════════════════════════════════════════════ */

.menu-card:hover, .mv-card:hover, .value-card:hover,
.case-study-card:hover, .who-card:hover, .feature-card:hover {
    transform: var(--card-lift) !important;
    box-shadow: var(--card-sh) !important;
}
.process-step:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 18px 50px rgba(30,16,48,.11) !important;
}
.contact-method:hover {
    transform: translateX(6px) !important;
    box-shadow: 0 10px 32px rgba(30,16,48,.09) !important;
    border-color: rgba(30,16,48,.28) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   6. IMAGE SCALE on hover
   ═══════════════════════════════════════════════════════════════════ */

.menu-card__img-wrap img,
.who-card__img-wrap img,
.gallery-item__inner img,
.about-img-main img,
.about-img-accent img {
    transition: transform 0.65s var(--r-ease) !important;
}
.menu-card:hover .menu-card__img-wrap img,
.who-card:hover .who-card__img-wrap img,
.gallery-item__inner:hover img,
.about-img-main:hover img,
.about-img-accent:hover img { transform: scale(1.05) !important; }

/* ═══════════════════════════════════════════════════════════════════
   7. ACCENT LINES, ICON HOVERS, PROCESS NUM
   ═══════════════════════════════════════════════════════════════════ */

.mv-card::before, .value-card::before {
    transition: opacity var(--h-dur) var(--h-ease) !important;
}
.mv-card:hover::before, .value-card:hover::before { opacity:1 !important; }

.menu-card { border-top: 2px solid transparent; }
.menu-card:hover { border-top-color: var(--gold) !important; }

.process-step__num {
    transition: background var(--h-dur) var(--h-ease),
                color var(--h-dur) var(--h-ease),
                border-color var(--h-dur) var(--h-ease) !important;
}
.process-step:hover .process-step__num {
    background: var(--purple) !important;
    color: #fff !important;
    border-color: var(--purple) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   8. GALLERY OVERLAY
   ═══════════════════════════════════════════════════════════════════ */

.gallery-item__inner {
    opacity: 0;
    transform: translateY(var(--r-rise));
    transition: opacity var(--r-dur) var(--r-ease), transform var(--r-dur) var(--r-ease);
}
.gallery-item__inner.is-visible { opacity:1; transform:none; }
.gallery-item__overlay { transition: opacity var(--h-dur) var(--h-ease) !important; }
.gallery-item__inner:hover .gallery-item__overlay { opacity:1 !important; }

/* ═══════════════════════════════════════════════════════════════════
   9. STATS STRIP CELLS
   ═══════════════════════════════════════════════════════════════════ */

.stats-strip__cell:hover { background: rgba(200,168,75,.07) !important; }
.supply-stat-cell:hover  { background: rgba(200,168,75,.06) !important; }
.strip-step:hover        { background: rgba(255,255,255,.04) !important; }

/* ═══════════════════════════════════════════════════════════════════
   10. BUTTONS — richer transitions
   ═══════════════════════════════════════════════════════════════════ */

.btn {
    transition:
        background   var(--h-dur) var(--h-ease),
        border-color var(--h-dur) var(--h-ease),
        color        var(--h-dur) var(--h-ease),
        transform    var(--h-dur) var(--h-ease),
        box-shadow   var(--h-dur) var(--h-ease) !important;
    overflow: hidden;
}
.btn:active { transform: scale(.97) !important; }

/* ═══════════════════════════════════════════════════════════════════
   11. FORM INPUT FOCUS
   ═══════════════════════════════════════════════════════════════════ */

.form-field__input {
    transition: border-color var(--h-dur) var(--h-ease),
                box-shadow var(--h-dur) var(--h-ease) !important;
}
.form-field__input:hover:not(:focus) { border-color: rgba(30,16,48,.3); }
.form-field__input:focus {
    border-color: var(--purple) !important;
    box-shadow: 0 0 0 4px rgba(30,16,48,.09) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   12. FOOTER LINKS — sliding underline
   ═══════════════════════════════════════════════════════════════════ */

.footer-nav a {
    position: relative;
    transition: color var(--h-dur) var(--h-ease) !important;
}
.footer-nav a::after {
    content: '';
    position: absolute;
    bottom: -2px; left: 0;
    width: 0; height: 1px;
    background: var(--gold);
    transition: width var(--h-dur) var(--h-ease);
}
.footer-nav a:hover::after { width: 100%; }

/* ═══════════════════════════════════════════════════════════════════
   13. MARQUEE — pause on hover
   ═══════════════════════════════════════════════════════════════════ */

.client-logos-strip__marquee:hover .client-logos-strip__inner,
.trust-marquee-wrap:hover .trust-marquee { animation-play-state: paused; }

/* ═══════════════════════════════════════════════════════════════════
   14. INLINE CTA
   ═══════════════════════════════════════════════════════════════════ */

.inline-cta {
    transition: box-shadow var(--h-dur) var(--h-ease), transform var(--h-dur) var(--h-ease);
}
.inline-cta:hover { box-shadow: 0 18px 52px rgba(30,16,48,.09); transform: translateY(-3px); }

/* ═══════════════════════════════════════════════════════════════════
   15. REDUCED MOTION
   ═══════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
        transition-delay: 0ms !important;
    }
    .js-ready .menu-card, .js-ready .who-card, .js-ready .mv-card,
    .js-ready .value-card, .js-ready .process-step, .js-ready .case-study-card,
    .js-ready .feature-card, .js-ready .gallery-item__inner,
    .js-ready .stats-strip__cell, .js-ready .supply-stat-cell,
    .js-ready .strip-step, .js-ready .stats-item, .js-ready .contact-method,
    .js-ready .about-img-main, .js-ready .about-img-accent,
    .js-ready .final-cta-form-wrap, .js-ready [data-reveal], .js-ready .section-reveal,
    .js-ready .who-card .who-card__img-wrap, .js-ready .who-card .who-card__icon,
    .js-ready .who-card .who-card__title,    .js-ready .who-card .who-card__desc,
    .js-ready .feature-card .feature-card-icon, .js-ready .feature-card .feature-card-title,
    .js-ready .feature-card .feature-card-body, .js-ready .feature-card .feature-card-accent,
    .js-ready .mv-card .mv-card__eyebrow, .js-ready .mv-card .mv-card__title,
    .js-ready .mv-card .mv-card__divider, .js-ready .mv-card p,
    .js-ready .value-card .value-card__num, .js-ready .value-card .value-card__title,
    .js-ready .value-card .value-card__body,
    .js-ready .process-step .process-step__icon, .js-ready .process-step .process-step__num,
    .js-ready .process-step .process-step__title,.js-ready .process-step .process-step__desc,
    .js-ready .menu-card .menu-card__img-wrap, .js-ready .menu-card .menu-card__name,
    .js-ready .menu-card .menu-card__desc,    .js-ready .menu-card .menu-card__footer,
    .js-ready .case-study-card .case-study-card__tag,
    .js-ready .case-study-card .case-study-card__title,
    .js-ready .case-study-card .case-study-card__results,
    .js-ready .case-study-card .case-study-card__quote,
    .js-ready .final-cta-form-wrap .form-field,
    .js-ready .final-cta-form-wrap .final-cta-actions {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   AUTO-ANIMATE: Section headers — eyebrow → title → body
   No HTML changes needed. Works on every section on every page.
   ═══════════════════════════════════════════════════════════════════ */

/* Section header wraps get observed by JS via .section-header selector */
.js-ready .section-header .section-eyebrow,
.js-ready .section-header .section-title,
.js-ready .section-header .section-body,
.js-ready .section-header .section-subtitle,
.js-ready .section-header .section-divider {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity var(--r-dur) var(--r-ease), transform var(--r-dur) var(--r-ease);
}
.js-ready .section-header.is-visible .section-eyebrow  { opacity:1; transform:none; transition-delay: 0s;    }
.js-ready .section-header.is-visible .section-title    { opacity:1; transform:none; transition-delay: .14s;  }
.js-ready .section-header.is-visible .section-body     { opacity:1; transform:none; transition-delay: .28s;  }
.js-ready .section-header.is-visible .section-subtitle { opacity:1; transform:none; transition-delay: .28s;  }
.js-ready .section-header.is-visible .section-divider  { opacity:1; transform:none; transition-delay: .38s;  }

/* Supply dark intro (same pattern) */
.js-ready .supply-dark-intro .section-eyebrow,
.js-ready .supply-dark-intro .section-title,
.js-ready .supply-dark-intro .section-body {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity var(--r-dur) var(--r-ease), transform var(--r-dur) var(--r-ease);
}
.js-ready .supply-dark-intro.is-visible .section-eyebrow { opacity:1; transform:none; transition-delay: 0s;   }
.js-ready .supply-dark-intro.is-visible .section-title   { opacity:1; transform:none; transition-delay: .14s; }
.js-ready .supply-dark-intro.is-visible .section-body    { opacity:1; transform:none; transition-delay: .28s; }

/* Final CTA intro */
.js-ready .final-cta-intro .section-eyebrow,
.js-ready .final-cta-intro .section-title,
.js-ready .final-cta-intro .section-body {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity var(--r-dur) var(--r-ease), transform var(--r-dur) var(--r-ease);
}
.js-ready .final-cta-intro.is-visible .section-eyebrow { opacity:1; transform:none; transition-delay: 0s;   }
.js-ready .final-cta-intro.is-visible .section-title   { opacity:1; transform:none; transition-delay: .14s; }
.js-ready .final-cta-intro.is-visible .section-body    { opacity:1; transform:none; transition-delay: .28s; }

/* Process strip header */
.js-ready .process-strip__header .process-strip__title,
.js-ready .process-strip__header .process-strip__subtitle,
.js-ready .process-strip__header .process-strip__divider {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity var(--r-dur) var(--r-ease), transform var(--r-dur) var(--r-ease);
}
.js-ready .process-strip__header.is-visible .process-strip__title    { opacity:1; transform:none; transition-delay: 0s;   }
.js-ready .process-strip__header.is-visible .process-strip__subtitle { opacity:1; transform:none; transition-delay: .14s; }
.js-ready .process-strip__header.is-visible .process-strip__divider  { opacity:1; transform:none; transition-delay: .26s; }

/* About-section content side: eyebrow → title → paragraphs → quote → link */
.js-ready .about-section__content .section-eyebrow,
.js-ready .about-section__content .section-title,
.js-ready .about-section__content .section-body,
.js-ready .about-section__content .about-section__quote,
.js-ready .about-section__content .about-section__link {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity var(--r-dur) var(--r-ease), transform var(--r-dur) var(--r-ease);
}
.js-ready .about-section__content.is-visible .section-eyebrow    { opacity:1; transform:none; transition-delay: 0s;   }
.js-ready .about-section__content.is-visible .section-title      { opacity:1; transform:none; transition-delay: .12s; }
.js-ready .about-section__content.is-visible .section-body       { opacity:1; transform:none; transition-delay: .24s; }
.js-ready .about-section__content.is-visible .about-section__quote { opacity:1; transform:none; transition-delay: .34s; }
.js-ready .about-section__content.is-visible .about-section__link  { opacity:1; transform:none; transition-delay: .44s; }

/* Problem section columns: each column reveals as a unit, list items stagger inside */
.js-ready .problem-col {
    opacity: 0;
    transform: translateY(var(--r-rise));
    transition: opacity var(--r-dur) var(--r-ease), transform var(--r-dur) var(--r-ease);
}
.js-ready .problem-col.is-visible { opacity:1; transform:none; }
.js-ready .problem-col--solution  { transition-delay: .18s; }

.js-ready .problem-col .section-eyebrow,
.js-ready .problem-col .section-title,
.js-ready .problem-col .problem-solution-title,
.js-ready .problem-col li,
.js-ready .problem-col .btn {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity var(--r-dur) var(--r-ease), transform var(--r-dur) var(--r-ease);
}
.problem-col.is-visible .section-eyebrow        { opacity:1; transform:none; transition-delay: .08s; }
.problem-col.is-visible .section-title,
.problem-col.is-visible .problem-solution-title { opacity:1; transform:none; transition-delay: .18s; }
.problem-col.is-visible li:nth-child(1)  { opacity:1; transform:none; transition-delay: .28s; }
.problem-col.is-visible li:nth-child(2)  { opacity:1; transform:none; transition-delay: .36s; }
.problem-col.is-visible li:nth-child(3)  { opacity:1; transform:none; transition-delay: .44s; }
.problem-col.is-visible li:nth-child(4)  { opacity:1; transform:none; transition-delay: .52s; }
.problem-col.is-visible li:nth-child(5)  { opacity:1; transform:none; transition-delay: .58s; }
.problem-col.is-visible li:nth-child(6)  { opacity:1; transform:none; transition-delay: .64s; }
.problem-col.is-visible .btn             { opacity:1; transform:none; transition-delay: .70s; }

/* Who-cta button */
.js-ready .who-cta {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity var(--r-dur) var(--r-ease), transform var(--r-dur) var(--r-ease);
}
.js-ready .who-cta.is-visible { opacity:1; transform:none; }

/* Commitment block */
.js-ready .commitment-block {
    opacity: 0;
    transform: translateY(var(--r-rise));
    transition: opacity var(--r-dur) var(--r-ease), transform var(--r-dur) var(--r-ease);
}
.js-ready .commitment-block.is-visible { opacity:1; transform:none; }



/* About-content text (about page story section) */
.js-ready .about-content .section-eyebrow,
.js-ready .about-content .section-title,
.js-ready .about-content .section-divider,
.js-ready .about-content p,
.js-ready .about-content .contact-methods {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity var(--r-dur) var(--r-ease), transform var(--r-dur) var(--r-ease);
}
.js-ready .about-content.is-visible .section-eyebrow  { opacity:1; transform:none; transition-delay: 0s;   }
.js-ready .about-content.is-visible .section-title    { opacity:1; transform:none; transition-delay: .12s; }
.js-ready .about-content.is-visible .section-divider  { opacity:1; transform:none; transition-delay: .20s; }
.js-ready .about-content.is-visible p:nth-of-type(1)  { opacity:1; transform:none; transition-delay: .28s; }
.js-ready .about-content.is-visible p:nth-of-type(2)  { opacity:1; transform:none; transition-delay: .36s; }
.js-ready .about-content.is-visible p:nth-of-type(3)  { opacity:1; transform:none; transition-delay: .44s; }
.js-ready .about-content.is-visible .contact-methods  { opacity:1; transform:none; transition-delay: .52s; }

/* Page-hero inner: tag → title → subtitle (sequential) */
.js-ready .page-hero__inner .tag,
.js-ready .page-hero__inner .page-hero__title,
.js-ready .page-hero__inner .page-hero__subtitle {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity var(--r-dur) var(--r-ease), transform var(--r-dur) var(--r-ease);
}
.js-ready .page-hero__inner.is-visible .tag               { opacity:1; transform:none; transition-delay: .10s; }
.js-ready .page-hero__inner.is-visible .page-hero__title  { opacity:1; transform:none; transition-delay: .24s; }
.js-ready .page-hero__inner.is-visible .page-hero__subtitle { opacity:1; transform:none; transition-delay: .40s; }

/* Reduced motion additions */
@media (prefers-reduced-motion: reduce) {
    .js-ready [data-grid-seq] .feature-card,
    .js-ready [data-grid-seq] .supply-card,
    .js-ready [data-grid-seq] .feature-card .feature-card-icon,
    .js-ready [data-grid-seq] .feature-card .feature-card-title,
    .js-ready [data-grid-seq] .feature-card .feature-card-body,
    .js-ready [data-grid-seq] .feature-card .feature-card-accent,
    .js-ready [data-grid-seq] .supply-card .supply-card-icon,
    .js-ready [data-grid-seq] .supply-card .supply-card-title,
    .js-ready [data-grid-seq] .supply-card .supply-card-desc,
    .js-ready [data-grid-seq] .supply-card .supply-card-accent,
    .js-ready .section-header .section-title,
    .js-ready .section-header .section-body,
    .js-ready .supply-dark-intro .section-eyebrow,
    .js-ready .supply-dark-intro .section-title,
    .js-ready .supply-dark-intro .section-body,
    .js-ready .final-cta-intro .section-eyebrow,
    .js-ready .final-cta-intro .section-title,
    .js-ready .final-cta-intro .section-body,
    .js-ready .process-strip__header .process-strip__title,
    .js-ready .process-strip__header .process-strip__subtitle,
    .js-ready .about-section__content .section-eyebrow,
    .js-ready .about-section__content .section-title,
    .js-ready .about-section__content .section-body,
    .js-ready .problem-col,
    .js-ready .problem-col .section-eyebrow,
    .js-ready .problem-col li,
    .js-ready .problem-col .btn,
    .js-ready .who-cta,
    .js-ready .commitment-block,
    .js-ready .strip-step,
    .js-ready .strip-step .strip-step__num,
    .js-ready .strip-step .strip-step__title,
    .js-ready .strip-step .strip-step__desc,
    .js-ready .supply-stat-cell,
    .js-ready .supply-stat-cell .supply-stat-num,
    .js-ready .supply-stat-cell .supply-stat-label,
    .js-ready .stats-strip__cell,
    .js-ready .stats-item,
    .js-ready .stats-item .stats-value,
    .js-ready .stats-item .stats-label,
    .js-ready .stats-item .stats-unit,
    .js-ready .supply-card .supply-card-icon,
    .js-ready .supply-card .supply-card-title,
    .js-ready .supply-card .supply-card-desc,
    .js-ready .about-content .section-eyebrow,
    .js-ready .about-content .section-title,
    .js-ready .about-content p,
    .js-ready .page-hero__inner .tag,
    .js-ready .page-hero__inner .page-hero__title,
    .js-ready .page-hero__inner .page-hero__subtitle { opacity:1 !important; transform:none !important; }
}