/* ==========================================================================
   KLADOFFKA — International self-storage design
   ========================================================================== */

:root {
    --bg:            #ffffff;
    --bg-2:          #f7f9fc;
    --bg-3:          #eef2f7;
    --surface:       #ffffff;
    --ink:           #0a2540;      /* deep navy — Stripe-like */
    --ink-2:         #425466;
    --ink-3:         #6b7280;
    --ink-4:         #9aa5b6;
    --border:        #e6e8ee;
    --border-strong: #d0d6df;

    --primary:       #0a2540;
    --primary-2:     #1a3a5c;
    --accent:        #ff6b35;      /* warm orange — like Shurgard */
    --accent-2:      #e35420;

    --wa:            #25d366;

    --radius:        6px;
    --radius-lg:     10px;
    --radius-xl:     16px;
    --shadow-sm:     0 1px 3px rgba(var(--primary-rgb), .06), 0 1px 2px rgba(var(--primary-rgb), .04);
    --shadow-md:     0 8px 30px -12px rgba(var(--primary-rgb), .18);
    --shadow-lg:     0 30px 60px -20px rgba(var(--primary-rgb), .25);
    --shadow-primary:0 10px 30px -8px rgba(var(--accent-rgb), .35);

    --container:     1240px;

    --primary-rgb:            10, 37, 64;

    --accent-rgb:            255, 107, 53;

    --surface-rgb:            255, 255, 255;

    --on-dark:            #ffffff;

    --on-dark-rgb:            255, 255, 255;

    --on-accent:            #ffffff;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--bg);
    color: var(--ink);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; transition: color .2s; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select, textarea { font: inherit; }
ul { list-style: none; }

.container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 24px;
}

h1, h2, h3, h4, h5 {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 1.15;
    color: var(--ink);
}
h1 em, h2 em, h3 em {
    font-style: italic;
    font-weight: 500;
    color: var(--accent);
}