/**
 * ==============================================================================
 * DR. MAHAR KASHIF RASHEED — OFFICIAL BRANDING & EDITORIAL DESIGN TOKENS
 * ==============================================================================
 * Architecture: Agency Graphic Designer & Editorial Art Direction System
 * Core Philosophy: Clinical Precision meets Botanical Vitality (Integrated Medicine)
 * 
 * Typographic Scale: Major Third (1.25) & Golden Ratio (1.618)
 * Font Hierarchy:
 *   - Display / Headings: 'Outfit' (Geometric, Authoritative, Contemporary)
 *   - Editorial Body / Prose: 'Plus Jakarta Sans' (Legible, Friendly, Refined)
 *   - Badges, Registrations & Metrics: 'JetBrains Mono' (Clinical Diagnostics, Tabular)
 * 
 * Color Space: OKLCH perceptual lightness & chroma with modern RGB/Hex fallbacks
 * Credentials & Seals: MBBS KEMU, MD, M.Phil GCUF, Master Holistic Medicine Korea, RMP-74921-P
 * ==============================================================================
 */

/* ─── 1. CORE BRAND TOKENS & SYSTEM VARIABLES ────────────────────────── */
:root {
    /* ------------------------------------------------------------------
     * 1.1 CLINICAL BOTANICAL PALETTE — DEEP EMERALD FOREST (AUTHORITY)
     * ------------------------------------------------------------------ */
    --emerald-950-hex: #022c22;
    --emerald-950: var(--emerald-950-hex);
    --emerald-900-hex: #064e3b;
    --emerald-900: var(--emerald-900-hex);
    --emerald-850-hex: #053f30;
    --emerald-850: var(--emerald-850-hex);
    --emerald-800-hex: #065f46;
    --emerald-800: var(--emerald-800-hex);
    --emerald-700-hex: #047857;
    --emerald-700: var(--emerald-700-hex);
    --emerald-600-hex: #059669;
    --emerald-600: var(--emerald-600-hex);

    /* ------------------------------------------------------------------
     * 1.2 BOTANICAL VITALITY — LEAF MINT ACCENT (REJUVENATION & LIFE)
     * ------------------------------------------------------------------ */
    --mint-500-hex: #10b981;
    --mint-500: var(--mint-500-hex);
    --mint-400-hex: #34d399;
    --mint-400: var(--mint-400-hex);
    --mint-300-hex: #6ee7b7;
    --mint-300: var(--mint-300-hex);
    --mint-200-hex: #a7f3d0;
    --mint-200: var(--mint-200-hex);
    --mint-100-hex: #d1fae5;
    --mint-100: var(--mint-100-hex);
    --mint-50-hex:  #ecfdf5;
    --mint-50:  var(--mint-50-hex);

    /* ------------------------------------------------------------------
     * 1.3 EVIDENCE DIAGNOSTICS — SAPPHIRE SYSTEM (TELEMEDICINE & CLINICAL SCIENCE)
     * ------------------------------------------------------------------ */
    --sapphire-800-hex: #1e40af;
    --sapphire-800: var(--sapphire-800-hex);
    --sapphire-700-hex: #1d4ed8;
    --sapphire-700: var(--sapphire-700-hex);
    --sapphire-600-hex: #2563eb;
    --sapphire-600: var(--sapphire-600-hex);
    --sapphire-500-hex: #3b82f6;
    --sapphire-500: var(--sapphire-500-hex);
    --sapphire-400-hex: #60a5fa;
    --sapphire-400: var(--sapphire-400-hex);
    --sapphire-100-hex: #dbeafe;
    --sapphire-100: var(--sapphire-100-hex);
    --sapphire-50-hex:  #eff6ff;
    --sapphire-50:  var(--sapphire-50-hex);

    /* ------------------------------------------------------------------
     * 1.4 EDITORIAL CHARCOAL & PURE SLATE SYSTEM (CONTRAST & READING COMFORT)
     * ------------------------------------------------------------------ */
    --slate-950-hex: #090d16;
    --slate-950: var(--slate-950-hex);
    --slate-900-hex: #0f172a;
    --slate-900: var(--slate-900-hex);
    --slate-850-hex: #131d33;
    --slate-850: var(--slate-850-hex);
    --slate-800-hex: #1e293b;
    --slate-800: var(--slate-800-hex);
    --slate-700-hex: #334155;
    --slate-700: var(--slate-700-hex);
    --slate-600-hex: #475569;
    --slate-600: var(--slate-600-hex);
    --slate-500-hex: #64748b;
    --slate-500: var(--slate-500-hex);
    --slate-400-hex: #94a3b8;
    --slate-400: var(--slate-400-hex);
    --slate-300-hex: #cbd5e1;
    --slate-300: var(--slate-300-hex);
    --slate-200-hex: #e2e8f0;
    --slate-200: var(--slate-200-hex);
    --slate-100-hex: #f1f5f9;
    --slate-100: var(--slate-100-hex);
    --slate-50-hex:  #f8fafc;
    --slate-50:  var(--slate-50-hex);

    /* ------------------------------------------------------------------
     * 1.5 WARM ALABASTER CANVAS (EDITORIAL GROUNDING SURFACES)
     * ------------------------------------------------------------------ */
    --alabaster-canvas: #f8fafc;
    --alabaster-card:   #ffffff;
    --alabaster-subtle: #f1f5f9;
    --alabaster-warm:   #fbfcfc;
    --pure-white:       #ffffff;

    /* ------------------------------------------------------------------
     * 1.6 ACADEMIC PRESTIGE & ROYAL EMBLEM GOLD (KEMU & HONORS TRIM)
     * ------------------------------------------------------------------ */
    --gold-700-hex: #92400e;
    --gold-700: var(--gold-700-hex);
    --gold-600-hex: #b45309;
    --gold-600: var(--gold-600-hex);
    --gold-500-hex: #d97706;
    --gold-500: var(--gold-500-hex);
    --gold-400-hex: #f59e0b;
    --gold-400: var(--gold-400-hex);
    --gold-300-hex: #fbbf24;
    --gold-300: var(--gold-300-hex);
    --gold-100-hex: #fef3c7;
    --gold-100: var(--gold-100-hex);
    --gold-50-hex:  #fffbeb;
    --gold-50:  var(--gold-50-hex);

    /* ------------------------------------------------------------------
     * 1.7 SYNCHRONIZED SEMANTIC TOKENS
     * ------------------------------------------------------------------ */
    --color-brand-primary:      var(--emerald-900);
    --color-brand-secondary:    var(--emerald-950);
    --color-brand-accent:       var(--mint-500);
    --color-brand-mint-bright:  var(--mint-400);
    --color-brand-clinical:     var(--sapphire-600);
    --color-brand-honor:        var(--gold-500);

    --color-surface-base:       var(--alabaster-canvas);
    --color-surface-card:       var(--alabaster-card);
    --color-surface-raised:     var(--pure-white);
    --color-surface-inverted:   var(--emerald-950);
    --color-surface-darkcard:   var(--slate-900);

    --color-text-primary:       var(--slate-900);
    --color-text-secondary:     var(--slate-600);
    --color-text-tertiary:      var(--slate-500);
    --color-text-inverted:      var(--pure-white);
    --color-text-inverted-dim:  var(--slate-300);

    --color-border-subtle:      rgba(226, 232, 240, 0.85);
    --color-border-medium:      rgba(203, 213, 225, 0.95);
    --color-border-emerald:     rgba(16, 185, 129, 0.28);
    --color-border-gold:        rgba(245, 158, 11, 0.32);

    /* ------------------------------------------------------------------
     * 1.8 TYPOGRAPHIC SCALE — MAJOR THIRD (1.25) & CALIBRATED FLUID CLAMP
     * Calibrated specifically for mobile (320px–480px), tablet & desktop
     * ------------------------------------------------------------------ */
    /* Step -2: Micro-footnotes & Legal (~11px) */
    --font-scale-step-neg2: clamp(0.6875rem, 0.65rem + 0.10vw, 0.75rem);
    
    /* Step -1: Mono Badges, Overlines, Chips, Registration IDs (~12px to 13.6px) */
    --font-scale-step-neg1: clamp(0.75rem, 0.72rem + 0.12vw, 0.85rem);

    /* Step 0: Body Standard (15px on mobile, scaling to 17px on desktop for readability) */
    --font-scale-step-0:    clamp(0.9375rem, 0.90rem + 0.18vw, 1.0625rem);

    /* Step 1: Body Lead, Prominent Callouts, Subheads (17px on mobile, scaling to 20px) */
    --font-scale-step-1:    clamp(1.0625rem, 1.00rem + 0.28vw, 1.25rem);

    /* Step 2: H4, Card Headings, Service Titles (~19px to 25px) */
    --font-scale-step-2:    clamp(1.20rem, 1.10rem + 0.45vw, 1.5625rem);

    /* Step 3: H3, Section Subheads, Modal Headings (~21px to 29.6px) */
    --font-scale-step-3:    clamp(1.32rem, 1.18rem + 0.70vw, 1.85rem);

    /* Step 4: H2, Section Titles (Calibrated for mobile: prevents awkward wraps) */
    --font-scale-step-4:    clamp(1.35rem, 1.20rem + 1.0vw, 2.20rem);

    /* Step 5: H1, Page Titles (Calibrated for mobile: elegant proportion) */
    --font-scale-step-5:    clamp(1.65rem, 1.40rem + 1.4vw, 2.90rem);

    /* Step 6: Grand Hero Headline (Calibrated: starts at 1.95rem instead of ~3rem on mobile) */
    --font-scale-step-6:    clamp(1.95rem, 1.60rem + 1.8vw, 3.80rem);

    /* Step 7: Monumental Display Poster (Calibrated for mobile screens) */
    --font-scale-step-7:    clamp(2.35rem, 1.85rem + 2.4vw, 4.50rem);

    /* ------------------------------------------------------------------
     * 1.9 MICRO-TYPOGRAPHY: OPTICAL LETTER-SPACING & LEADING
     * ------------------------------------------------------------------ */
    /* Tracking (Calibrated Optical Letter-Spacing) */
    --tracking-display-tight: -0.035em; /* Grand Display */
    --tracking-display:       -0.030em; /* Headings H1 & Hero Display */
    --tracking-heading:       -0.022em; /* Headings H2 & H3 */
    --tracking-subhead:       -0.015em; /* H4 & Card Titles */
    --tracking-body:          -0.011em; /* Body text optical clarity */
    --tracking-mono:          +0.040em; /* JetBrains Mono Registration badges */
    --tracking-overline:      +0.080em; /* Uppercase Eyebrows & Overlines */
    --tracking-wide:          +0.120em; /* Category & Prestige Seals */

    /* Leading (Line Heights) */
    --leading-none:     1.00;
    --leading-tightest: 1.08; /* Poster display headlines */
    --leading-tight:    1.20; /* Primary Headings */
    --leading-snug:     1.35; /* Subheadings, Card Titles */
    --leading-normal:   1.62; /* Standard Body Copy */
    --leading-relaxed:  1.75; /* Editorial Narrative Prose */

    /* Optimal Measure (Character length per line for clinical comprehension) */
    --measure-tight:    48ch;
    --measure-optimal:  65ch; /* Agency Gold Standard: 55-75 chars */
    --measure-wide:     75ch;

    /* Font Family Stacks */
    --font-display: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
    --font-body:    'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
    --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, Consolas, Monaco, monospace;

    /* OpenType Features */
    --font-features-display: "cv02" 1, "cv03" 1, "cv04" 1, "cv11" 1, "kern" 1, "liga" 1;
    --font-features-body:    "cv02" 1, "cv04" 1, "cv11" 1, "kern" 1, "liga" 1;
    --font-features-mono:    "tnum" 1, "zero" 1, "ss01" 1;

    /* ------------------------------------------------------------------
     * 1.10 LUXURY SHADOWS & BOTANICAL ELEVATION
     * ------------------------------------------------------------------ */
    --shadow-subtle:      0 2px 8px -2px rgba(15, 23, 42, 0.05);
    --shadow-card:        0 12px 32px -8px rgba(15, 23, 42, 0.08), 0 4px 12px -2px rgba(15, 23, 42, 0.04);
    --shadow-hover:       0 24px 48px -12px rgba(6, 78, 59, 0.16), 0 8px 20px -4px rgba(15, 23, 42, 0.06);
    --shadow-glow-mint:   0 0 32px rgba(16, 185, 129, 0.28);
    --shadow-glow-strong: 0 0 44px rgba(16, 185, 129, 0.42), 0 10px 25px -5px rgba(6, 78, 59, 0.35);
    --shadow-glow-gold:   0 0 30px rgba(245, 158, 11, 0.28);
    --shadow-glow-blue:   0 0 32px rgba(37, 99, 235, 0.25);
    --shadow-specular:    inset 0 1px 1px 0 rgba(255, 255, 255, 0.85);

    /* ------------------------------------------------------------------
     * 1.11 LUXURY GLASSMORPHISM TOKENS
     * ------------------------------------------------------------------ */
    --glass-surface-light:    rgba(255, 255, 255, 0.82);
    --glass-border-light:     rgba(255, 255, 255, 0.90);
    --glass-surface-emerald:  rgba(2, 44, 34, 0.85);
    --glass-border-emerald:   rgba(52, 211, 153, 0.24);
    --glass-surface-slate:    rgba(15, 23, 42, 0.86);
    --glass-border-slate:     rgba(148, 163, 184, 0.20);
    --glass-surface-gold:     rgba(254, 243, 199, 0.75);
    --glass-border-gold:      rgba(245, 158, 11, 0.35);
    --glass-blur-sm:          blur(12px);
    --glass-blur-md:          blur(20px);
    --glass-blur-lg:          blur(28px);

    /* ------------------------------------------------------------------
     * 1.12 METALLIC GRADIENT BORDERS
     * ------------------------------------------------------------------ */
    --gradient-metallic-emerald: linear-gradient(
        135deg,
        rgba(52, 211, 153, 0.65) 0%,
        rgba(6, 78, 59, 0.15) 45%,
        rgba(16, 185, 129, 0.70) 75%,
        rgba(167, 243, 208, 0.50) 100%
    );

    --gradient-metallic-gold: linear-gradient(
        135deg,
        rgba(245, 158, 11, 0.75) 0%,
        rgba(254, 243, 199, 0.35) 40%,
        rgba(217, 119, 6, 0.70) 75%,
        rgba(251, 191, 36, 0.85) 100%
    );

    --gradient-metallic-sapphire: linear-gradient(
        135deg,
        rgba(96, 165, 250, 0.65) 0%,
        rgba(30, 64, 175, 0.15) 50%,
        rgba(37, 99, 235, 0.65) 100%
    );

    --gradient-metallic-platinum: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.95) 0%,
        rgba(226, 232, 240, 0.40) 45%,
        rgba(255, 255, 255, 0.90) 100%
    );

    /* ------------------------------------------------------------------
     * 1.13 RADII & GEOMETRY
     * ------------------------------------------------------------------ */
    --radius-xs:   6px;
    --radius-sm:   10px;
    --radius-md:   16px;
    --radius-lg:   22px;
    --radius-xl:   30px;
    --radius-pill: 9999px;

    /* ------------------------------------------------------------------
     * 1.14 TRANSITIONS & TIMING
     * ------------------------------------------------------------------ */
    --ease-editorial: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);
    --duration-fast:  180ms;
    --duration-base:  320ms;
    --duration-slow:  550ms;
}

/* ----------------------------------------------------------------------
 * 1.15 OKLCH HIGH-GAMUT COLOR OVERRIDES (FOR SUPPORTED MODERN BROWSERS)
 * Provides photorealistic botanical vibrancy with mathematically pure chroma
 * ---------------------------------------------------------------------- */
@supports (color: oklch(0.5 0.2 160)) {
    :root {
        --emerald-950: oklch(0.22 0.065 160);
        --emerald-900: oklch(0.33 0.088 160);
        --emerald-850: oklch(0.30 0.082 160);
        --emerald-800: oklch(0.40 0.102 160);
        --emerald-700: oklch(0.49 0.125 160);
        --emerald-600: oklch(0.59 0.145 160);

        --mint-500: oklch(0.72 0.175 160);
        --mint-400: oklch(0.81 0.150 162);
        --mint-300: oklch(0.89 0.115 162);
        --mint-200: oklch(0.93 0.075 162);
        --mint-100: oklch(0.96 0.040 162);
        --mint-50:  oklch(0.985 0.018 162);

        --sapphire-800: oklch(0.38 0.210 260);
        --sapphire-700: oklch(0.46 0.230 260);
        --sapphire-600: oklch(0.54 0.235 260);
        --sapphire-500: oklch(0.63 0.205 260);
        --sapphire-400: oklch(0.72 0.160 260);
        --sapphire-100: oklch(0.94 0.045 260);
        --sapphire-50:  oklch(0.98 0.015 260);

        --slate-950: oklch(0.12 0.020 260);
        --slate-900: oklch(0.18 0.028 260);
        --slate-800: oklch(0.26 0.032 260);
        --slate-700: oklch(0.36 0.036 260);
        --slate-600: oklch(0.46 0.036 260);
        --slate-500: oklch(0.56 0.034 260);
        --slate-400: oklch(0.71 0.028 260);
        --slate-300: oklch(0.86 0.018 260);
        --slate-200: oklch(0.92 0.012 260);
        --slate-100: oklch(0.965 0.008 260);
        --slate-50:  oklch(0.988 0.004 260);

        --gold-700: oklch(0.45 0.135 65);
        --gold-600: oklch(0.56 0.155 65);
        --gold-500: oklch(0.67 0.180 70);
        --gold-400: oklch(0.77 0.190 75);
        --gold-300: oklch(0.85 0.165 80);
        --gold-100: oklch(0.96 0.050 85);
        --gold-50:  oklch(0.99 0.020 85);
    }
}


/* ─── 2. TYPOGRAPHIC HIERARCHY & MICRO-TYPOGRAPHY RULES ─────────────── */

/* 2.1 BASE RESETS & ROOT SMOOTHING */
body {
    font-family: var(--font-body);
    font-size: var(--font-scale-step-0);
    font-weight: 400;
    line-height: var(--leading-normal);
    letter-spacing: var(--tracking-body);
    color: var(--color-text-primary);
    background-color: var(--color-surface-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: var(--font-features-body);
    text-rendering: optimizeLegibility;
}

/* 2.2 EDITORIAL DISPLAY & POSTER HEADINGS */
h1, h2, h3, h4, h5,
.editorial-display-grand,
.hero-headline-poster,
.editorial-h1, .editorial-h2, .editorial-h3, .editorial-h4, .editorial-h5,
.hero-headline, .section-title, .card-header-title {
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: manual;
    text-wrap: balance;
}

.editorial-display-grand,
.hero-headline-poster {
    font-family: var(--font-display);
    font-size: var(--font-scale-step-7);
    font-weight: 900;
    line-height: var(--leading-tightest);
    letter-spacing: var(--tracking-display-tight);
    color: var(--color-brand-secondary);
    font-feature-settings: var(--font-features-display);
}

h1:not(.brand-title-text),
.editorial-h1,
.hero-headline {
    font-family: var(--font-display);
    font-size: var(--font-scale-step-6);
    font-weight: 800;
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-display);
    color: var(--color-brand-secondary);
    font-feature-settings: var(--font-features-display);
    margin-bottom: 0.5em;
}

h2,
.editorial-h2,
.section-title {
    font-family: var(--font-display);
    font-size: var(--font-scale-step-4);
    font-weight: 800;
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-heading);
    color: var(--slate-950);
    font-feature-settings: var(--font-features-display);
    margin-bottom: 0.45em;
}

h3,
.editorial-h3,
.card-header-title {
    font-family: var(--font-display);
    font-size: var(--font-scale-step-3);
    font-weight: 700;
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-heading);
    color: var(--slate-900);
    font-feature-settings: var(--font-features-display);
    margin-bottom: 0.35em;
}

h4,
.editorial-h4 {
    font-family: var(--font-display);
    font-size: var(--font-scale-step-2);
    font-weight: 700;
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-subhead);
    color: var(--slate-900);
}

h5,
.editorial-h5 {
    font-family: var(--font-display);
    font-size: var(--font-scale-step-1);
    font-weight: 600;
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-subhead);
    color: var(--slate-800);
}

/* 2.3 EDITORIAL SUBHEADS & PROSE MEASURE */
.editorial-subhead,
.hero-subhead {
    font-family: var(--font-body);
    font-size: var(--font-scale-step-1);
    font-weight: 400;
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-body);
    color: var(--slate-600);
    max-width: var(--measure-optimal);
}

.editorial-prose,
.reading-column {
    max-width: var(--measure-optimal);
    font-size: var(--font-scale-step-0);
    line-height: var(--leading-relaxed);
    color: var(--slate-700);
}

.editorial-prose p + p {
    margin-top: 1.25em;
}

/* 2.4 UPPERCASE EYEBROWS & CATEGORY OVERLINES */
.editorial-eyebrow,
.section-badge-pill,
.category-overline {
    font-family: var(--font-display);
    font-size: var(--font-scale-step-neg1);
    font-weight: 800;
    letter-spacing: var(--tracking-overline);
    text-transform: uppercase;
    color: var(--emerald-800);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.editorial-eyebrow::before,
.section-badge-pill::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: var(--radius-pill);
    background-color: var(--mint-500);
    box-shadow: 0 0 8px var(--mint-500);
}

/* 2.5 DROP CAPS FOR CLINICAL EDITORIAL ARTICLES */
.editorial-dropcap::first-letter {
    font-family: var(--font-display);
    font-size: 3.4em;
    font-weight: 900;
    float: left;
    line-height: 0.82;
    padding-right: 0.15em;
    padding-top: 0.08em;
    color: var(--emerald-900);
}

/* 2.6 EDITORIAL PULLQUOTES */
.editorial-pullquote {
    position: relative;
    padding: 32px 36px;
    margin: 40px 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(236, 253, 245, 0.5));
    border-left: 4px solid var(--mint-500);
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    box-shadow: var(--shadow-card);
}

.editorial-pullquote p {
    font-family: var(--font-display);
    font-size: var(--font-scale-step-2);
    font-weight: 600;
    font-style: italic;
    line-height: 1.4;
    letter-spacing: -0.015em;
    color: var(--emerald-950);
}

.editorial-pullquote cite {
    display: block;
    margin-top: 14px;
    font-family: var(--font-mono);
    font-size: var(--font-scale-step-neg1);
    font-weight: 600;
    font-style: normal;
    letter-spacing: var(--tracking-overline);
    text-transform: uppercase;
    color: var(--emerald-700);
}


/* ─── 3. HIGH-CONTRAST CREDENTIALS BADGES & REGISTRATION SEALS ───────── */

/* 3.0 CREDENTIAL STRIPS & BADGE WRAPPERS */
.hero-creds-strip,
.badge-cluster,
.badge-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 28px;
    max-width: 100%;
}

/* 3.1 BASE CREDENTIAL CHIP ARCHITECTURE */
.cred-chip,
.cred-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 16px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(226, 232, 240, 0.95);
    font-family: var(--font-display);
    font-size: var(--font-scale-step-neg1);
    font-weight: 700;
    color: var(--slate-800);
    letter-spacing: -0.01em;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
    backdrop-filter: var(--glass-blur-sm);
    -webkit-backdrop-filter: var(--glass-blur-sm);
    transition: all var(--duration-base) var(--ease-editorial);
    position: relative;
    user-select: none;
    max-width: 100%;
    box-sizing: border-box;
}

/* Accessible touch targets for clickable badges & pills */
a.cred-chip,
button.cred-chip,
.cred-chip[role="button"],
a.rmp-badge,
button.rmp-badge {
    min-height: 44px;
    touch-action: manipulation;
}

.cred-chip:hover,
.cred-badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px -4px rgba(6, 78, 59, 0.15);
    border-color: var(--mint-400);
}

.cred-chip svg,
.cred-badge svg {
    color: var(--emerald-700);
    flex-shrink: 0;
    transition: transform var(--duration-fast) var(--ease-editorial);
}

.cred-chip:hover svg,
.cred-badge:hover svg {
    transform: scale(1.15);
}

/* 3.2 MBBS (KEMU) — KING EDWARD MEDICAL UNIVERSITY PRESTIGE BADGE */
.cred-badge-kemu,
.cred-chip[data-cred="kemu"] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(254, 243, 199, 0.45));
    border: 1.5px solid rgba(245, 158, 11, 0.45);
    color: var(--slate-950);
    box-shadow: 0 4px 12px -2px rgba(217, 119, 6, 0.12), inset 0 1px 1px rgba(255, 255, 255, 0.9);
}

.cred-badge-kemu svg,
.cred-chip[data-cred="kemu"] svg {
    color: var(--gold-600);
}

.cred-badge-kemu:hover,
.cred-chip[data-cred="kemu"]:hover {
    border-color: var(--gold-500);
    box-shadow: var(--shadow-glow-gold);
}

/* 3.3 DOCTOR OF MEDICINE (MD) CLINICAL SPECIALIST BADGE */
.cred-badge-md,
.cred-chip[data-cred="md"] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(236, 253, 245, 0.65));
    border: 1.5px solid rgba(16, 185, 129, 0.45);
    color: var(--emerald-950);
    box-shadow: 0 4px 12px -2px rgba(6, 78, 59, 0.10);
}

.cred-badge-md svg,
.cred-chip[data-cred="md"] svg {
    color: var(--emerald-700);
}

.cred-badge-md:hover,
.cred-chip[data-cred="md"]:hover {
    border-color: var(--mint-500);
    box-shadow: var(--shadow-glow-mint);
}

/* 3.4 M.PHIL PUBLIC HEALTH (GCUF) BADGE */
.cred-badge-gcuf,
.cred-chip[data-cred="gcuf"] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(239, 246, 255, 0.7));
    border: 1.5px solid rgba(37, 99, 235, 0.35);
    color: var(--slate-900);
    box-shadow: 0 4px 12px -2px rgba(37, 99, 235, 0.08);
}

.cred-badge-gcuf svg,
.cred-chip[data-cred="gcuf"] svg {
    color: var(--sapphire-600);
}

.cred-badge-gcuf:hover,
.cred-chip[data-cred="gcuf"]:hover {
    border-color: var(--sapphire-500);
    box-shadow: var(--shadow-glow-blue);
}

/* 3.5 MASTER OF HOLISTIC MEDICINE (KOREA) BADGE */
.cred-badge-korea,
.cred-chip[data-cred="korea"] {
    background: linear-gradient(135deg, rgba(236, 253, 245, 0.9), rgba(209, 250, 229, 0.5));
    border: 1.5px solid rgba(5, 150, 105, 0.4);
    color: var(--emerald-950);
    box-shadow: 0 4px 12px -2px rgba(5, 150, 105, 0.15);
}

.cred-badge-korea svg,
.cred-chip[data-cred="korea"] svg {
    color: var(--emerald-600);
}

/* 3.6 HIGH-CONTRAST RMP REGISTRATION BADGE (PMC / PMDC RMP-74921-P) */
.rmp-badge,
.cred-badge-rmp {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: var(--slate-900);
    border: 1px solid rgba(52, 211, 153, 0.4);
    border-radius: var(--radius-pill);
    color: var(--pure-white);
    font-family: var(--font-mono);
    font-size: var(--font-scale-step-neg1);
    font-weight: 700;
    letter-spacing: var(--tracking-mono);
    font-feature-settings: var(--font-features-mono);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.25);
    position: relative;
    overflow: hidden;
}

.rmp-badge .rmp-prefix {
    color: var(--mint-400);
    font-weight: 800;
}

.rmp-badge .rmp-number {
    color: var(--pure-white);
    font-weight: 700;
}

.rmp-badge::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -60%;
    width: 40%;
    height: 200%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.22),
        transparent
    );
    transform: rotate(25deg);
    animation: rmpShimmer 4.5s infinite ease-in-out;
}

@keyframes rmpShimmer {
    0%, 75% { transform: translateX(0) rotate(25deg); }
    100% { transform: translateX(380%) rotate(25deg); }
}

/* 3.7 TRADEMARK CLINICAL PHILOSOPHY SEAL: KITCHEN AS MEDICAL STORE™ */
.trademark-philosophy-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    background: linear-gradient(135deg, var(--emerald-950), var(--emerald-900));
    border: 1.5px solid var(--mint-400);
    border-radius: var(--radius-pill);
    color: var(--pure-white);
    font-family: var(--font-display);
    font-size: var(--font-scale-step-neg1);
    font-weight: 700;
    letter-spacing: var(--tracking-overline);
    text-transform: uppercase;
    box-shadow: var(--shadow-glow-strong);
}

.trademark-philosophy-badge .badge-leaf-icon {
    width: 20px;
    height: 20px;
    color: var(--mint-400);
    filter: drop-shadow(0 0 6px rgba(52, 211, 153, 0.7));
}


/* ─── 4. TRUST SEALS & VERIFICATION EMBLEMS ──────────────────────────── */

/* 4.1 ROTATING / STATIC OFFICIAL MEDALLION SEAL */
.trust-seal-medallion {
    width: 110px;
    height: 110px;
    border-radius: var(--radius-pill);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 35% 35%, #064e3b 0%, #022c22 100%);
    box-shadow: 0 10px 25px -5px rgba(2, 44, 34, 0.45), 0 0 0 4px rgba(52, 211, 153, 0.25);
    border: 2px solid var(--mint-400);
}

.trust-seal-medallion::before {
    content: '';
    position: absolute;
    inset: 4px;
    border: 1px dashed rgba(167, 243, 208, 0.4);
    border-radius: var(--radius-pill);
    animation: rotateSlow 24s linear infinite;
}

@keyframes rotateSlow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.trust-seal-center-crest {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    z-index: 1;
}

.trust-seal-center-crest .crest-text-top {
    font-family: var(--font-display);
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: var(--tracking-overline);
    color: var(--mint-300);
    text-transform: uppercase;
}

.trust-seal-center-crest .crest-text-title {
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 900;
    color: var(--pure-white);
    line-height: 1.1;
    margin: 2px 0;
}

.trust-seal-center-crest .crest-text-sub {
    font-family: var(--font-mono);
    font-size: 0.58rem;
    color: var(--mint-200);
}

/* 4.2 PULSE STATUS DOT (LIVE CLINICAL AVAILABILITY) */
.pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-pill);
    background-color: var(--mint-500);
    display: inline-block;
    position: relative;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    animation: clinicalPulse 2.2s infinite cubic-bezier(0.66, 0, 0, 1);
}

@keyframes clinicalPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(16, 185, 129, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
    }
}


/* ─── 5. METALLIC GRADIENT BORDERS & REFINED FRAMES ──────────────────── */

/* 5.1 METALLIC EMERALD FRAME */
.frame-metallic-emerald,
.card-metallic-emerald {
    position: relative;
    background: var(--alabaster-card);
    border-radius: var(--radius-xl);
    padding: 2.5rem;
    box-shadow: var(--shadow-card);
    border: 1px solid transparent;
    background-clip: padding-box;
    transition: transform var(--duration-base) var(--ease-editorial), box-shadow var(--duration-base) var(--ease-editorial);
}

.frame-metallic-emerald::before,
.card-metallic-emerald::before {
    content: '';
    position: absolute;
    inset: -1.5px;
    border-radius: inherit;
    background: var(--gradient-metallic-emerald);
    z-index: -1;
    transition: opacity var(--duration-base) var(--ease-editorial);
}

.frame-metallic-emerald:hover,
.card-metallic-emerald:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
}

/* 5.2 METALLIC GOLD ROYAL FRAME (KEMU & AWARDS) */
.frame-metallic-gold,
.card-metallic-gold {
    position: relative;
    background: var(--alabaster-card);
    border-radius: var(--radius-xl);
    padding: 2.5rem;
    box-shadow: var(--shadow-card);
    border: 1px solid transparent;
    background-clip: padding-box;
    transition: transform var(--duration-base) var(--ease-editorial), box-shadow var(--duration-base) var(--ease-editorial);
}

.frame-metallic-gold::before,
.card-metallic-gold::before {
    content: '';
    position: absolute;
    inset: -1.5px;
    border-radius: inherit;
    background: var(--gradient-metallic-gold);
    z-index: -1;
}

.frame-metallic-gold:hover,
.card-metallic-gold:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 45px -10px rgba(217, 119, 6, 0.18);
}

/* 5.3 ANIMATED BORDER-BEAM SHIMMER */
.border-beam-active {
    position: relative;
    overflow: hidden;
}

.border-beam-active::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: inherit;
    padding: 2px;
    background: linear-gradient(
        90deg,
        transparent,
        var(--mint-400),
        transparent
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}


/* ─── 6. LUXURY GLASSMORPHISM CARDS ──────────────────────────────────── */

/* 6.1 LIGHT ALABASTER GLASS (DEFAULT CONTENT CARDS) */
.glass-card-alabaster,
.hero-stat-card,
.service-glass-card {
    background: var(--glass-surface-light);
    backdrop-filter: var(--glass-blur-md);
    -webkit-backdrop-filter: var(--glass-blur-md);
    border: 1px solid var(--glass-border-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card), var(--shadow-specular);
    padding: 24px 28px;
    transition: transform var(--duration-base) var(--ease-editorial), box-shadow var(--duration-base) var(--ease-editorial), border-color var(--duration-base) var(--ease-editorial);
}

.glass-card-alabaster:hover,
.hero-stat-card:hover,
.service-glass-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-hover);
    border-color: rgba(16, 185, 129, 0.35);
}

/* 6.2 DEEP EMERALD PRESTIGE GLASS (DARK MODE SURFACES / HERO CARDS) */
.glass-card-emerald,
.hero-visual-card {
    background: var(--glass-surface-emerald);
    backdrop-filter: var(--glass-blur-lg);
    -webkit-backdrop-filter: var(--glass-blur-lg);
    border: 1px solid var(--glass-border-emerald);
    border-radius: var(--radius-xl);
    box-shadow: 0 24px 56px -12px rgba(2, 44, 34, 0.45), inset 0 1px 1px 0 rgba(167, 243, 208, 0.25);
    color: var(--pure-white);
    position: relative;
    overflow: hidden;
}

/* 6.3 PURE SLATE GLASS (CLINICAL DIAGNOSTICS & METRICS) */
.glass-card-slate {
    background: var(--glass-surface-slate);
    backdrop-filter: var(--glass-blur-md);
    -webkit-backdrop-filter: var(--glass-blur-md);
    border: 1px solid var(--glass-border-slate);
    border-radius: var(--radius-lg);
    box-shadow: 0 16px 36px -8px rgba(15, 23, 42, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.15);
    color: var(--pure-white);
    padding: 24px;
}

/* 6.4 FLOATING BADGES OVER DOCTOR PORTRAITS */
.floating-badge-top,
.floating-badge-bottom {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: var(--radius-lg);
    padding: 12px 18px;
    box-shadow: 0 14px 34px -8px rgba(15, 23, 42, 0.18), 0 2px 8px rgba(15, 23, 42, 0.04);
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 10;
    transition: transform var(--duration-base) var(--ease-editorial);
}

.floating-badge-top:hover,
.floating-badge-bottom:hover {
    transform: translateY(-2px) scale(1.02);
}

.badge-icon-box {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--mint-100), var(--mint-50));
    color: var(--emerald-800);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.9);
    flex-shrink: 0;
}

.badge-text-title {
    font-family: var(--font-display);
    font-size: var(--font-scale-step-neg1);
    font-weight: 800;
    color: var(--slate-950);
    line-height: 1.25;
}

.badge-text-sub {
    font-family: var(--font-mono);
    font-size: var(--font-scale-step-neg2);
    font-weight: 600;
    color: var(--slate-500);
    letter-spacing: var(--tracking-mono);
}


/* ─── 7. METRIC LOCKUPS & TABULAR STATISTICAL HIERARCHY ──────────────── */

.hero-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 36px;
}

.hero-stat-card {
    display: flex;
    flex-direction: column;
    padding: 18px 20px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(226, 232, 240, 0.9);
}

.hero-stat-number,
.stat-metric-number {
    font-family: var(--font-mono);
    font-size: var(--font-scale-step-3);
    font-weight: 700;
    line-height: 1.1;
    color: var(--emerald-900);
    letter-spacing: -0.03em;
    font-feature-settings: var(--font-features-mono);
}

.hero-stat-label,
.stat-metric-label {
    font-family: var(--font-body);
    font-size: var(--font-scale-step-neg1);
    font-weight: 600;
    color: var(--slate-600);
    margin-top: 4px;
    line-height: 1.35;
}


/* ─── 8. EDITORIAL POSTER LAYOUT & ASYMMETRIC GRID UTILITIES ─────────── */

/* 8.1 GOLDEN RATIO ASYMMETRIC SECTION GRID */
.editorial-grid-golden {
    display: grid;
    grid-template-columns: 1.618fr 1fr;
    gap: 56px;
    align-items: center;
}

.editorial-grid-golden-reverse {
    display: grid;
    grid-template-columns: 1fr 1.618fr;
    gap: 56px;
    align-items: center;
}

/* 8.2 HIGHLIGHT CALLOUT ACCENTS */
.highlight-green,
.editorial-mark-mint {
    color: var(--emerald-700);
    position: relative;
    display: inline-block;
    background: linear-gradient(120deg, transparent 0%, rgba(52, 211, 153, 0.22) 15%, rgba(16, 185, 129, 0.15) 85%, transparent 100%);
    padding: 0 4px;
    border-radius: var(--radius-xs);
}

.highlight-gold,
.editorial-mark-gold {
    color: var(--gold-700);
    background: linear-gradient(120deg, transparent 0%, rgba(251, 191, 36, 0.25) 15%, rgba(245, 158, 11, 0.15) 85%, transparent 100%);
    padding: 0 4px;
    border-radius: var(--radius-xs);
}

.highlight-sapphire {
    color: var(--sapphire-700);
    background: linear-gradient(120deg, transparent 0%, rgba(96, 165, 250, 0.22) 15%, rgba(37, 99, 235, 0.12) 85%, transparent 100%);
    padding: 0 4px;
    border-radius: var(--radius-xs);
}

/* 8.3 BOTANICAL EDITORIAL DIVIDER */
.editorial-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 48px 0;
    gap: 16px;
    width: 100%;
}

.editorial-divider::before,
.editorial-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(203, 213, 225, 0.8), transparent);
}

.editorial-divider-glyph {
    width: 10px;
    height: 10px;
    background: var(--mint-500);
    transform: rotate(45deg);
    border-radius: 2px;
    box-shadow: 0 0 10px var(--mint-400);
}


/* ─── 9. LUXURY BUTTONS & CTAS ───────────────────────────────────────── */

.btn-hero-primary,
.btn-editorial-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px 30px;
    background: linear-gradient(135deg, var(--emerald-800) 0%, var(--emerald-950) 100%);
    color: var(--pure-white);
    border: 1px solid rgba(52, 211, 153, 0.35);
    border-radius: var(--radius-pill);
    font-family: var(--font-display);
    font-size: var(--font-scale-step-0);
    font-weight: 700;
    letter-spacing: -0.01em;
    cursor: pointer;
    box-shadow: 0 12px 28px -6px rgba(2, 44, 34, 0.35), var(--shadow-specular);
    transition: all var(--duration-base) var(--ease-editorial);
    position: relative;
    overflow: hidden;
    min-height: 44px;
    min-width: 44px;
    touch-action: manipulation;
}

.btn-hero-primary:hover,
.btn-editorial-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 36px -6px rgba(2, 44, 34, 0.48), 0 0 24px rgba(52, 211, 153, 0.3);
    border-color: var(--mint-400);
}

.btn-hero-secondary,
.btn-editorial-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 28px;
    background: rgba(255, 255, 255, 0.95);
    color: var(--slate-800);
    border: 1.5px solid var(--slate-200);
    border-radius: var(--radius-pill);
    font-family: var(--font-display);
    font-size: var(--font-scale-step-0);
    font-weight: 700;
    letter-spacing: -0.01em;
    cursor: pointer;
    box-shadow: var(--shadow-subtle);
    transition: all var(--duration-base) var(--ease-editorial);
    min-height: 44px;
    min-width: 44px;
    touch-action: manipulation;
}

.btn-hero-secondary:hover,
.btn-editorial-secondary:hover {
    transform: translateY(-2px);
    border-color: var(--emerald-700);
    color: var(--emerald-900);
    box-shadow: 0 10px 24px -6px rgba(15, 23, 42, 0.1);
}

.touch-target-min {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
}


/* ─── 10. ACCESSIBILITY & PRINT FIDELITY ──────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

:focus-visible {
    outline: 2px solid var(--mint-500);
    outline-offset: 3px;
    border-radius: var(--radius-xs);
}

@media print {
    body {
        background: #ffffff !important;
        color: #000000 !important;
    }
    .floating-badge-top,
    .floating-badge-bottom,
    .btn-hero-primary,
    .btn-hero-secondary {
        box-shadow: none !important;
        border: 1px solid #cccccc !important;
    }
}


/* ─── 11. RESPONSIVE BREAKPOINT ADAPTATIONS & MOBILE CALIBRATION ──────── */

/* Tablet & Desktop Large */
@media (max-width: 1024px) {
    .editorial-grid-golden,
    .editorial-grid-golden-reverse {
        grid-template-columns: 1fr;
        gap: 36px;
    }
    .hero-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}

/* Tablet & Mobile Screens: GPU Performance & Crisp Elevation */
@media (max-width: 768px) {
    /* Subtle crisp borders & reduced box-shadow spread to eliminate mobile GPU lag */
    .glass-card-alabaster,
    .hero-stat-card,
    .service-glass-card,
    .card-metallic-emerald,
    .card-metallic-gold,
    .frame-metallic-emerald,
    .frame-metallic-gold,
    .card,
    .clinic-card {
        border: 1px solid rgba(226, 232, 240, 0.90) !important;
        box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        padding: 20px !important;
    }

    .glass-card-emerald,
    .hero-visual-card {
        box-shadow: 0 6px 20px rgba(2, 44, 34, 0.25) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
    }

    .editorial-pullquote {
        padding: 20px 22px;
        margin: 28px 0;
    }

    .editorial-divider {
        margin: 32px 0;
    }
}

/* Mobile Viewports (320px–640px): Badge Scaling, Touch Targets & Flow */
@media (max-width: 640px) {
    .hero-stats-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    /* Calibrated Badge & Pill Tokens for Mobile */
    .cred-chip,
    .cred-badge,
    .cred-badge-kemu,
    .cred-badge-md,
    .cred-badge-gcuf,
    .cred-badge-korea,
    .rmp-badge,
    .cred-badge-rmp,
    .section-badge-pill,
    .editorial-eyebrow,
    .status-pill,
    .clinic-city-badge {
        font-size: 0.72rem !important;
        padding: 4px 10px !important;
        max-width: 100% !important;
        white-space: normal;
        line-height: 1.35;
        gap: 6px !important;
    }

    .cred-chip svg,
    .cred-badge svg {
        width: 13px !important;
        height: 13px !important;
    }

    .hero-creds-strip {
        gap: 8px !important;
        margin-bottom: 24px !important;
    }

    .floating-badge-top,
    .floating-badge-bottom {
        padding: 8px 12px !important;
        border-radius: var(--radius-md) !important;
        box-shadow: 0 4px 14px rgba(15, 23, 42, 0.10) !important;
    }

    .badge-icon-box {
        width: 32px !important;
        height: 32px !important;
    }

    .badge-text-title {
        font-size: 0.75rem !important;
    }

    .badge-text-sub {
        font-size: 0.65rem !important;
    }

    /* Touch Target Accessibility on Mobile (Min 44px to 48px) */
    .btn-hero-primary,
    .btn-editorial-primary,
    .btn-hero-secondary,
    .btn-editorial-secondary {
        min-height: 48px !important;
        width: 100% !important;
        padding: 13px 20px !important;
        font-size: 0.95rem !important;
        justify-content: center !important;
    }

    .hero-actions {
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
    }
}

/* Small Smartphone Viewports (320px–480px) */
@media (max-width: 480px) {
    body {
        font-size: 0.9375rem; /* Crisp, comfortable 15px body copy */
        line-height: 1.60;
    }

    h1, .hero-headline {
        margin-bottom: 0.35em;
        letter-spacing: -0.025em;
    }

    h2, .section-title {
        margin-bottom: 0.35em;
        letter-spacing: -0.02em;
    }

    .card-metallic-emerald,
    .card-metallic-gold,
    .frame-metallic-emerald,
    .frame-metallic-gold {
        padding: 1.25rem !important;
    }
}

/* Ultra-Narrow Viewports (320px–360px) */
@media (max-width: 360px) {
    .cred-chip,
    .cred-badge,
    .rmp-badge {
        font-size: 0.6875rem !important;
        padding: 3px 8px !important;
    }

    .floating-badge-top {
        top: 10px !important;
        left: 10px !important;
        right: 10px !important;
    }

    .floating-badge-bottom {
        bottom: 10px !important;
        left: 10px !important;
        right: 10px !important;
    }
}