/*
 * CGEG Design System — design-system.css
 * CJ Global Express Group Unlimited
 * Style: Light Soft UI Evolution | Cormorant Garamond + DM Sans
 * Theme: Warm Cream & Gold — updated from Dark Espresso
 * Produced by Wivae Technologies
 */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400;1,600&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500&display=swap');

:root {
    /* === SURFACES (Light Soft UI) === */
    --surface-base:     #F5F1EB;   /* Warm cream page background */
    --surface-raised:   #FDFAF5;   /* Cards, navbar — slightly lighter */
    --surface-inset:    #EDE8DF;   /* Input fields, pressed wells */
    --surface-overlay:  #F0EBE1;   /* Modals, dropdowns */
    --surface-deep:     #E8E2D8;   /* Deeper inset elements */

    /* === SHADOW SYSTEM (Soft UI light — source: top-left) === */
    --shadow-raised:    5px 5px 14px rgba(180,160,120,0.28), -4px -4px 10px rgba(255,255,255,0.85);
    --shadow-raised-lg: 8px 8px 20px rgba(180,160,120,0.32), -5px -5px 14px rgba(255,255,255,0.9);
    --shadow-inset:     inset 3px 3px 8px rgba(180,160,120,0.25), inset -2px -2px 5px rgba(255,255,255,0.8);
    --shadow-hover:     10px 10px 24px rgba(180,160,120,0.38), -6px -6px 16px rgba(255,255,255,0.92);
    --shadow-nav:       0 2px 20px rgba(180,160,120,0.2), 0 1px 0 rgba(255,255,255,0.9);

    /* === GOLD PALETTE === */
    --gold-primary:   #B8913A;   /* Slightly deeper gold for contrast on light bg */
    --gold-bright:    #C9A84C;   /* Brighter gold for accents */
    --gold-muted:     #8C6E2F;   /* Subdued gold */
    --gold-glow:      rgba(184,145,58,0.1);
    --gold-border:    rgba(184,145,58,0.3);
    --gold-light:     rgba(201,168,76,0.08);

    /* === GRADIENT ACCENTS === */
    --gradient-hero:     linear-gradient(135deg, #F5F1EB 0%, #EDE4D0 50%, #F5F1EB 100%);
    --gradient-gold:     linear-gradient(135deg, #C9A84C 0%, #8C6E2F 100%);
    --gradient-section:  linear-gradient(180deg, #F5F1EB 0%, #EDE8DF 100%);
    --gradient-card:     linear-gradient(145deg, #FDFAF5 0%, #F0EBE1 100%);
    --gradient-band:     linear-gradient(135deg, #1C1814 0%, #2A2218 60%, #1C1814 100%);

    /* === TEXT === */
    --text-primary:   #1C1814;   /* Deep espresso text */
    --text-secondary: #6B5E4E;   /* Warm mid-tone */
    --text-muted:     #9C8E7E;   /* Tertiary labels */
    --text-on-gold:   #FFFFFF;
    --text-on-dark:   #F5F0E8;

    /* === BORDERS === */
    --border-subtle:  rgba(180,160,120,0.2);
    --border-hover:   rgba(184,145,58,0.35);

    /* === FEEDBACK === */
    --success:    #2D8A5E;
    --error:      #C0392B;
    --success-bg: rgba(45,138,94,0.08);
    --error-bg:   rgba(192,57,43,0.08);

    /* === TYPOGRAPHY === */
    --font-display: 'Cormorant Garamond', Georgia, serif;
    --font-body:    'DM Sans', system-ui, -apple-system, sans-serif;

    /* === TYPE SCALE === */
    --text-hero:    clamp(40px, 5.5vw, 64px);
    --text-h1:      clamp(32px, 4vw, 48px);
    --text-h2:      clamp(24px, 3vw, 36px);
    --text-h3:      20px;
    --text-body-lg: 16px;
    --text-body:    14px;
    --text-small:   12px;
    --text-label:   11px;

    /* === SPACING (8px base) === */
    --space-1:  8px;
    --space-2:  16px;
    --space-3:  24px;
    --space-4:  32px;
    --space-5:  48px;
    --space-6:  64px;
    --space-7:  96px;
    --space-8:  128px;

    /* === LAYOUT === */
    --container-max:  1280px;
    --container-pad:  clamp(24px, 5vw, 80px);
    --section-gap:    clamp(64px, 8vw, 120px);

    /* === RADII === */
    --radius-card:  14px;
    --radius-btn:   6px;
    --radius-input: 8px;
    --radius-icon:  10px;

    /* === TRANSITIONS === */
    --ease-default: all 200ms ease-out;
    --ease-card:    all 250ms ease-out;
}

/* =====================================================
   RESET & BASE
===================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    background-color: var(--surface-base);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: var(--text-body-lg);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; transition: var(--ease-default); }
ul { list-style: none; }

/* =====================================================
   TYPOGRAPHY
===================================================== */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    color: var(--text-primary);
    line-height: 1.1;
    font-weight: 600;
}
h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }

.text-hero  { font-size: var(--text-hero); font-family: var(--font-display); font-weight: 600; line-height: 1.05; }
.text-label { font-size: var(--text-label); font-family: var(--font-body); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; }
.text-muted { color: var(--text-secondary); }
.text-gold  { color: var(--gold-primary); }
.italic-gold { font-style: italic; color: var(--gold-bright); }

/* =====================================================
   LAYOUT UTILITIES
===================================================== */
.container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-pad); }
.section    { padding: var(--section-gap) 0; }
.section-sm { padding: var(--space-5) 0; }

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }

/* =====================================================
   EYEBROW
===================================================== */
.eyebrow {
    display: flex; align-items: center; gap: var(--space-1);
    font-size: var(--text-label); color: var(--gold-primary);
    letter-spacing: 0.1em; text-transform: uppercase;
    margin-bottom: var(--space-2);
}
.eyebrow::before {
    content: ''; display: block; width: 28px; height: 1px;
    background: var(--gold-primary); flex-shrink: 0;
}

/* =====================================================
   BUTTONS
===================================================== */
.btn {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-body); font-size: 13px; font-weight: 500;
    letter-spacing: 0.04em; border-radius: var(--radius-btn);
    padding: 13px 28px; cursor: pointer; border: none;
    transition: var(--ease-default); white-space: nowrap;
}
.btn-primary {
    background: var(--gradient-gold);
    color: var(--text-on-gold);
    box-shadow: 3px 3px 8px rgba(140,110,47,0.3);
}
.btn-primary:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 4px 4px 12px rgba(140,110,47,0.4); }

.btn-ghost {
    background: var(--surface-raised);
    color: var(--text-primary);
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-raised);
}
.btn-ghost:hover { border-color: var(--gold-border); color: var(--gold-primary); box-shadow: var(--shadow-hover); }

.btn-link { background: transparent; color: var(--gold-primary); padding: 0; font-size: var(--text-label); text-transform: uppercase; letter-spacing: 0.08em; }
.btn-link:hover { opacity: 0.8; gap: 12px; }

/* =====================================================
   CARDS — Soft UI Raised
===================================================== */
.card {
    background: var(--gradient-card);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-raised);
    padding: var(--space-3);
    transition: var(--ease-card);
}
.card:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.card-lg    { padding: var(--space-4); box-shadow: var(--shadow-raised-lg); }

/* Division Card */
.card-division { display: flex; flex-direction: column; }
.card-division .card-icon {
    width: 42px; height: 42px; background: var(--gold-glow);
    border-radius: var(--radius-icon);
    display: flex; align-items: center; justify-content: center;
    color: var(--gold-primary); font-size: 20px; margin-bottom: var(--space-2);
    box-shadow: 2px 2px 6px rgba(180,160,120,0.2), -1px -1px 4px rgba(255,255,255,0.7);
}
.card-division .card-title { font-family: var(--font-display); font-size: 17px; font-weight: 600; color: var(--text-primary); margin-bottom: 6px; }
.card-division .card-desc  { font-size: var(--text-small); color: var(--text-secondary); line-height: 1.6; flex: 1; }
.card-division .card-link  { margin-top: var(--space-2); display: flex; align-items: center; gap: 6px; font-size: var(--text-label); color: var(--gold-primary); text-transform: uppercase; letter-spacing: 0.06em; transition: var(--ease-default); }
.card-division .card-link:hover { gap: 10px; }

/* Stat Card */
.card-stat {
    background: var(--gradient-card);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-raised);
    padding: 20px 18px;
}
.card-stat .stat-num   { font-family: var(--font-display); font-size: 32px; font-weight: 600; color: var(--gold-primary); line-height: 1; margin-bottom: 4px; }
.card-stat .stat-label { font-size: var(--text-label); color: var(--text-secondary); letter-spacing: 0.06em; }

/* Person Card */
.card-person { text-align: center; }
.card-person .person-avatar {
    width: 80px; height: 80px; border-radius: 50%;
    background: var(--surface-inset); box-shadow: var(--shadow-inset);
    margin: 0 auto var(--space-2); overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    color: var(--gold-primary); font-family: var(--font-display); font-size: 22px; font-weight: 600;
}
.card-person .person-name  { font-family: var(--font-display); font-size: 17px; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; }
.card-person .person-title { font-size: var(--text-small); color: var(--text-secondary); letter-spacing: 0.03em; }

/* Project Card */
.card-project { overflow: hidden; }
.card-project .project-img {
    width: 100%; height: 200px; border-radius: 8px; margin-bottom: var(--space-2); overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-muted); font-size: var(--text-small); letter-spacing: 0.05em;
}
.card-project .project-division { font-size: var(--text-label); color: var(--gold-primary); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px; }
.card-project .project-title    { font-family: var(--font-display); font-size: 18px; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; }
.card-project .project-location { font-size: var(--text-small); color: var(--text-secondary); display: flex; align-items: center; gap: 4px; }

.badge-status       { display: inline-block; font-size: 10px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 10px; border-radius: 20px; margin-top: 8px; }
.badge-operational  { background: rgba(45,138,94,0.1); color: var(--success); }
.badge-development  { background: var(--gold-glow); color: var(--gold-primary); border: 1px solid var(--gold-border); }

/* =====================================================
   FORMS
===================================================== */
.form-group { margin-bottom: var(--space-2); }
.form-label { display: block; font-size: var(--text-label); color: var(--text-secondary); letter-spacing: 0.06em; margin-bottom: 6px; }

.form-input, .form-textarea, .form-select {
    width: 100%; background: var(--surface-inset);
    box-shadow: var(--shadow-inset); border: 1px solid var(--border-subtle);
    border-radius: var(--radius-input); padding: 13px 16px;
    color: var(--text-primary); font-family: var(--font-body);
    font-size: var(--text-body); transition: var(--ease-default); outline: none; appearance: none;
}
.form-input::placeholder, .form-textarea::placeholder { color: var(--text-muted); }
.form-input:focus, .form-textarea:focus, .form-select:focus {
    border-color: var(--gold-border);
    box-shadow: var(--shadow-inset), 0 0 0 3px rgba(184,145,58,0.1);
}
.form-textarea { resize: vertical; min-height: 140px; }
.form-select option { background: var(--surface-base); color: var(--text-primary); }
.honeypot { display: none !important; visibility: hidden; }

.form-success { background: var(--success-bg); border: 1px solid rgba(45,138,94,0.25); border-radius: var(--radius-input); padding: var(--space-2); color: var(--success); font-size: var(--text-body); margin-bottom: var(--space-3); }
.form-error-msg { font-size: 11px; color: var(--error); margin-top: 4px; }

/* =====================================================
   IMAGE SLOTS (placeholder helper)
===================================================== */
.img-slot {
    background: var(--surface-inset);
    box-shadow: var(--shadow-inset);
    border-radius: var(--radius-card);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 8px; color: var(--text-muted); font-family: var(--font-body);
    font-size: var(--text-label); letter-spacing: 0.06em; text-transform: uppercase;
    min-height: 200px; position: relative; overflow: hidden;
}
.img-slot i { font-size: 28px; color: var(--gold-muted); opacity: 0.4; }
.img-slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-card); }

/* =====================================================
   DIVIDERS
===================================================== */
.divider-gold    { width: 40px; height: 1px; background: var(--gold-primary); margin-bottom: var(--space-1); }
.divider-section { border: none; border-top: 1px solid var(--border-subtle); margin: 0; }

/* =====================================================
   BANDS
===================================================== */
.band {
    background: var(--surface-raised);
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
    padding: var(--space-6) 0;
}
/* Dark band (founder quotes, CTAs) */
.band-dark {
    background: var(--gradient-band);
    padding: var(--space-7) 0;
}
.band-dark h2, .band-dark h3 { color: var(--text-on-dark); }
.band-dark p  { color: rgba(245,240,232,0.7); }

.band-quote { text-align: center; padding: var(--space-7) 0; }
.band-quote blockquote {
    font-family: var(--font-display); font-size: clamp(20px, 2.5vw, 28px);
    font-style: italic; color: var(--text-primary); max-width: 800px; margin: 0 auto; line-height: 1.5;
}
.band-quote cite { display: block; margin-top: var(--space-3); font-family: var(--font-body); font-size: var(--text-label); color: var(--gold-primary); letter-spacing: 0.08em; font-style: normal; }

/* =====================================================
   PAGE HERO
===================================================== */
.page-hero { padding: var(--space-7) 0 var(--space-6); position: relative; overflow: hidden; background: var(--gradient-hero); }
.page-hero::after {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 60px;
    background: linear-gradient(to bottom, transparent, var(--surface-base));
    pointer-events: none;
}

/* =====================================================
   SCROLL ANIMATIONS
===================================================== */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 400ms ease-out, transform 400ms ease-out; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 80ms; }
.reveal-delay-2 { transition-delay: 160ms; }
.reveal-delay-3 { transition-delay: 240ms; }
.reveal-delay-4 { transition-delay: 320ms; }

/* =====================================================
   RESPONSIVE
===================================================== */
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    .btn, .card, a { transition: none; }
}
@media (max-width: 1024px) {
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    :root { --container-pad: 20px; }
}

/* =====================================================
   GLOBAL MOBILE RESPONSIVENESS
   Added: full responsive overhaul
===================================================== */

/* ── Responsive Typography ── */
@media (max-width: 768px) {
    :root {
        --text-hero: clamp(32px, 10vw, 48px);
        --text-h1:   clamp(26px, 8vw,  38px);
        --text-h2:   clamp(22px, 6vw,  30px);
        --section-gap: clamp(48px, 10vw, 80px);
    }
    .text-hero { font-size: clamp(32px, 10vw, 48px); }
}
@media (max-width: 480px) {
    :root {
        --text-hero: clamp(28px, 9vw, 40px);
        --text-h1:   clamp(24px, 8vw, 32px);
        --text-h2:   clamp(20px, 6vw, 26px);
    }
}

/* ── Responsive Grids ── */
@media (max-width: 1024px) {
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }
}

/* ── Responsive Buttons ── */
@media (max-width: 480px) {
    .btn { padding: 11px 22px; font-size: 12px; }
}

/* ── Responsive Cards ── */
@media (max-width: 480px) {
    .card { padding: var(--space-2); }
    .card-stat .stat-num { font-size: 26px; }
}

/* ── Responsive Page Heroes ── */
@media (max-width: 768px) {
    .page-hero { padding: var(--space-6) 0 var(--space-5); }
    .page-hero h1 { font-size: clamp(26px, 8vw, 38px); }
}

/* ── Responsive Sections ── */
@media (max-width: 768px) {
    .section    { padding: clamp(48px,10vw,80px) 0; }
    .section-sm { padding: var(--space-4) 0; }
    .band       { padding: var(--space-5) 0; }
    .band-dark  { padding: var(--space-6) 0; }
}

/* ── Band quotes mobile ── */
@media (max-width: 768px) {
    .band-quote blockquote { font-size: clamp(16px, 5vw, 22px); padding: 0 var(--space-2); }
}

/* ── Utility: hide on mobile ── */
.hide-mobile  { display: block; }
.show-mobile  { display: none; }
@media (max-width: 768px) {
    .hide-mobile { display: none; }
    .show-mobile { display: block; }
}

/* ── Touch targets ── */
@media (max-width: 768px) {
    a, button { min-height: 44px; }
    .nav-links a { min-height: auto; }
    .btn { min-height: 44px; }
}

/* ── Stat strip mobile ── */
@media (max-width: 600px) {
    .card-stat { padding: 16px 12px; }
    .card-stat .stat-num   { font-size: 22px; }
    .card-stat .stat-label { font-size: 9px; }
}