/*
 * NMS Global Section Styles — Nifty Theme Integration
 * Scope: .nms — all styles are namespaced, zero theme collision.
 * CSS variables are mapped to live Nifty theme brand colors.
 */
.nms, .nms *, .nms *::before, .nms *::after {
    box-sizing: border-box;
}

.nms {
    /* ── Brand Colors (Nifty theme) ── */
    --nms-accent:       #057485;
    --nms-accent-dark:  #046072;
    --nms-accent-light: #8fe9e2;
    --nms-accent-glow:  #5eead4;
    --nms-alternate:    #222e41;
    --nms-ink:          #1a2332;
    --nms-ink-alt:      #0b1220;
    --nms-muted:        #64748b;
    --nms-surface:      #f7f7f5;
    --nms-border:       #e2e8f0;
    --nms-white:        #ffffff;

    /* ── Radii & Shadows ── */
    --nms-radius:       20px;
    --nms-radius-sm:    14px;
    --nms-shadow-card:  0 15px 35px -20px rgba(15,23,42,.15);
    --nms-shadow-hover: 0 25px 50px -20px rgba(5,116,133,.28);
    --nms-shadow-btn:   0 10px 30px -10px rgba(5,116,133,.45);

    /* ── Layout ── */
    --nms-wrap:         1200px;
    --nms-sticky-offset:96px;
    --nms-gutter:       24px;

    /* ── Typography ── */
    --nms-font-sans:    'Nunito Sans', 'Jost', Arial, Helvetica, sans-serif;
    --nms-font-display: 'Spartan', 'Playfair Display', serif;

    /* ── Hero gradient (matches original) ── */
    --nms-grad-hero:    radial-gradient(1200px 500px at 80% -10%, rgba(5,116,133,.35), transparent 60%),
                        radial-gradient(900px 500px at 10% 20%, rgba(5,116,133,.25), transparent 60%),
                        linear-gradient(180deg, var(--nms-ink-alt) 0%, #0f2a2e 100%);

    /* Apply base */
    color: var(--nms-ink);
    line-height: 1.6;
    scroll-behavior: smooth;
}

/* ──────────────────── UTILITY ──────────────────── */
.nms img { max-width: 100%; height: auto; display: block; }
.nms-wrap { max-width: var(--nms-wrap); margin-inline: auto; padding-inline: var(--nms-gutter); }

/* Eyebrow */
.nms-eyebrow {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .25em;
    text-transform: uppercase;
    color: var(--nms-accent);
}

/* Headings */
.nms-h2 {
    font-size: clamp(28px, 4vw, 48px);
    line-height: 1.15;
    margin: 12px 0 0;
    letter-spacing: -.01em;
    font-family: var(--nms-font-display);
    font-weight: 600;
}
.nms-h3 {
    font-size: 20px;
    margin: 0 0 8px;
    letter-spacing: -.01em;
    font-family: var(--nms-font-sans);
    font-weight: 600;
}

/* Body copy */
.nms p { color: var(--nms-muted); margin: 12px 0 0; }

/* ──────────────────── BUTTONS ──────────────────── */
.nms-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: 999px;
    font-weight: 600;
    text-decoration: none;
    transition: transform .2s ease, filter .2s ease, box-shadow .2s ease;
    font-family: var(--nms-font-sans);
}

.nms-btn-primary {
    background: linear-gradient(90deg, var(--nms-accent), var(--nms-accent-dark));
    color: var(--nms-white);
    box-shadow: var(--nms-shadow-btn);
}

.nms-btn-primary:hover {
    filter: brightness(1.08);
    transform: translateY(-2px);
}

.nms-btn-ghost {
    border: 1px solid var(--nms-border);
    color: var(--nms-ink);
    background: var(--nms-white);
}

.nms-btn-ghost:hover {
    background: var(--nms-surface);
}

.nms-btn-light {
    color: var(--nms-white);
    border: 1px solid rgba(255,255,255,.25);
    background: transparent;
}

.nms-btn-light:hover {
    background: rgba(255,255,255,.1);
}

/* ──────────────────── SECTIONS ──────────────────── */
.nms-sec { padding: 80px 0; }
@media(min-width:960px) { .nms-sec { padding: 112px 0; } }

.nms-sec-alt { background: var(--nms-surface); }

.nms-sec-head {
    text-align: center;
    max-width: 640px;
    margin: 0 auto;
}

.nms-two-col {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    align-items: start;
}

@media(min-width:960px) {
    .nms-two-col { grid-template-columns: 1fr 1fr; gap: 56px; }
}

/* ──────────────────── BASE CARDS ──────────────────── */
.nms-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 56px;
}

@media(min-width:640px) { .nms-cards { grid-template-columns: 1fr 1fr; } }
@media(min-width:960px) { .nms-cards { grid-template-columns: repeat(3, 1fr); } }

.nms-card {
    background: var(--nms-white);
    border: 1px solid var(--nms-border);
    border-radius: var(--nms-radius);
    padding: 32px;
    transition: transform .3s ease, box-shadow .3s ease;
}

.nms-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--nms-shadow-hover);
}

.nms-card-ic {
    width: 48px;
    height: 48px;
    border-radius: var(--nms-radius-sm);
    background: rgba(5,116,133,.1);
    color: var(--nms-accent);
    display: grid;
    place-items: center;
    margin-bottom: 20px;
}

.nms-card-ic svg { width: 24px; height: 24px; }

/* ──────────────────── SERVICE CARDS (w/ image) ──────────────────── */
.nms-svc-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    margin-top: 56px;
}

@media(min-width:640px) { .nms-svc-cards { grid-template-columns: 1fr 1fr; } }
@media(min-width:960px) { .nms-svc-cards { grid-template-columns: repeat(3, 1fr); } }

.nms-svc {
    background: var(--nms-white);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--nms-shadow-card);
    transition: transform .3s ease, box-shadow .3s ease;
}

.nms-svc:hover {
    transform: translateY(-6px);
    box-shadow: var(--nms-shadow-hover);
}

.nms-svc img { aspect-ratio: 4/3; object-fit: cover; width: 100%; }

.nms-svc-body { padding: 24px; }

/* ──────────────────── BENEFIT CARDS (number style) ──────────────────── */
.nms-benefits {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 56px;
}

@media(min-width:640px) { .nms-benefits { grid-template-columns: 1fr 1fr; } }
@media(min-width:960px) { .nms-benefits { grid-template-columns: repeat(3, 1fr); } }

.nms-benefit {
    background: var(--nms-white);
    border: 1px solid var(--nms-border);
    border-radius: 16px;
    padding: 28px;
    transition: transform .3s ease, box-shadow .3s ease;
}

.nms-benefit:hover {
    transform: translateY(-4px);
    box-shadow: var(--nms-shadow-hover);
}

.nms-benefit-num {
    color: var(--nms-accent);
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -.02em;
    font-family: var(--nms-font-display);
}