/* -----------------------------------------------------------
   Direction B: Warm Human & Photo-led
   - warm neutrals, friendly typography feel
   - softer gradients, rounder corners, warmer shadows
   - CTA: warm orange, secondary: soft outline
------------------------------------------------------------ */

/* Optional: Load a friendlier font if you want
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700;800&display=swap');
body{ font-family: 'Manrope', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
*/

:root{
    --brand: #0B4A8B;           /* keep brand blue */
    --navy: #0A1F33;
    --surface: #FBF7F2;         /* warm surface */
    --surface-2: #FFFDFB;       /* warm white */
    --text: #111827;
    --muted: #6B7280;
    --accent: #FF5A1F;

    --radius: 18px;
    --radius-lg: 24px;

    --shadow: 0 18px 45px rgba(17,24,39,.12);
    --shadow-sm: 0 10px 22px rgba(17,24,39,.10);
}

/* Background + text feel */
body{
    background: var(--surface-2);
    color: var(--text);
}

.bg-surface{ background: var(--surface); }

.small-muted{ color: var(--muted); }

/* Top strip: warm tint */
.top-strip{
    background: rgba(255, 255, 255, .7);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(17,24,39,.08);
}

/* Header / Nav: softer */
.top-bar{
    background: rgba(255, 255, 255, .85);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(17,24,39,.08);
}
.top-bar .menu a{
    color: var(--navy);
    font-weight: 650;
    border-radius: 999px;
}
.top-bar .menu a:hover{
    background: rgba(11,74,139,.06);
    color: var(--brand);
}

/* Brand mark: warmer gradient */
.brand-mark{
    background: linear-gradient(135deg, #0B4A8B, #3B82F6);
    border-radius: 12px;
    box-shadow: 0 10px 22px rgba(11,74,139,.18);
}

/* Buttons: more tactile */
.button.cta{
    background: linear-gradient(135deg, var(--accent), #FF7A45);
    border-radius: 999px;
    box-shadow: 0 12px 24px rgba(255,90,31,.25);
}
.button.cta:hover{ filter: brightness(.98); }

.button.secondary-outline{
    border: 2px solid rgba(255,90,31,.28);
    color: #B83A12;
    background: rgba(255,90,31,.06);
}
.button.secondary-outline:hover{
    border-color: rgba(255,90,31,.40);
    background: rgba(255,90,31,.09);
}

/* HERO: photo-led warm gradient + glow */
.hero{
    color: #fff;
    background:
            radial-gradient(1200px 600px at 20% 10%, rgba(255, 122, 69, .35), transparent 60%),
            radial-gradient(900px 500px at 70% 30%, rgba(59, 130, 246, .28), transparent 60%),
            linear-gradient(135deg, #0B4A8B 0%, #0A1F33 70%, #071a2a 100%);
    padding: 62px 0;
}

.hero p{ color: rgba(255,255,255,.86); }

.hero-card{
    border-radius: var(--radius-lg);
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.16);
    box-shadow: var(--shadow);
}

.hero-image{
    min-height: 320px;
    border-radius: var(--radius-lg);
    /* warm, “photographic” placeholder feel */
    background:
            linear-gradient(0deg, rgba(10,31,51,.35), rgba(10,31,51,.35)),
            radial-gradient(circle at 30% 30%, rgba(255,90,31,.35), transparent 45%),
            radial-gradient(circle at 70% 30%, rgba(255,255,255,.22), transparent 55%),
            linear-gradient(135deg, #dbeafe, #fff7ed);
}

/* Trust badges: softer pills */
.badge{
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.18);
    padding: 10px 14px;
    border-radius: 999px;
    font-weight: 700;
}

/* Cards: rounder + warmer shadows */
.card{
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(17,24,39,.06);
    background: rgba(255,255,255,.92);
}

.card .card-title{
    font-weight: 850;
}

/* Thumbs: warmer, more “photo” */
.thumb{
    height: 118px;
    background:
            radial-gradient(circle at 35% 35%, rgba(255,90,31,.22), transparent 48%),
            radial-gradient(circle at 70% 40%, rgba(11,74,139,.18), transparent 52%),
            linear-gradient(135deg, #fff7ed, #eff6ff);
}

/* Steps: friendly tiles */
.step{
    border-radius: var(--radius);
    background: rgba(255,255,255,.92);
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(17,24,39,.06);
}
.step-num{
    background: rgba(255,90,31,.12);
    color: #B83A12;
    box-shadow: 0 10px 18px rgba(255,90,31,.14);
}

/* Reference pills */
.logo-pill{
    border-radius: 999px;
    background: rgba(255,255,255,.9);
    border: 1px solid rgba(17,24,39,.08);
    box-shadow: 0 8px 16px rgba(17,24,39,.08);
}

/* CTA band: warm glow */
.cta-band{
    border-radius: var(--radius-lg);
    background:
            radial-gradient(900px 500px at 15% 20%, rgba(255,90,31,.35), transparent 60%),
            linear-gradient(135deg, #0B4A8B, #0A1F33);
    box-shadow: var(--shadow);
}

.cta-band input, .cta-band select, .cta-band textarea{
    border-radius: 14px;
}

/* Contact map placeholder: warmer */
.map{
    border-radius: var(--radius-lg);
    background:
            radial-gradient(circle at 55% 40%, rgba(255,90,31,.22), transparent 50%),
            linear-gradient(135deg, #fff7ed, #eff6ff);
}

/* Page hero: warm */
.page-hero{
    background: var(--surface);
    border-bottom: 1px solid rgba(17,24,39,.06);
}

/* Footer: keep dark but softer */
.site-footer{
    background: linear-gradient(135deg, #0A1F33, #071a2a);
}

/* Mobile CTA: rounded & warm */
.mobile-cta{
    border-radius: 22px;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(10px);
}
.button.call{
    background: linear-gradient(135deg, var(--brand), #2F7FD8);
}

/* Subtle global rounding for inputs */
input, select, textarea{
    border-radius: 12px;
}