/* ═══════════════════════════════════════════════════
   DESIGN SYSTEM — IE WHITE LUXURY (Services Module)
   InteriorsExpress Services · services.interiorsexpress.biz
   ═══════════════════════════════════════════════════ */

:root {
  /* ─── Core Whites ─── */
  --white: #FFFFFF;
  --off-white: #FAFAF8;
  --warm-white: #F5F2EC;
  --cream: #EDE9E0;

  /* ─── Gold Palette ─── */
  --gold: #B8860B;
  --gold-l: #C9A84C;
  --gold-rich: #9A6E00;
  --gold-pale: #F0E8D0;
  --gold-bg: #FBF6EB;

  /* ─── Neutrals ─── */
  --charcoal: #1A1814;
  --ink: #2C2820;
  --stone: #5C564E;
  --pebble: #8C867E;
  --mist: #C4BEB6;
  --fog: #E2DDD6;
  --border: #E0DAD0;
  --border-light: #EDE9E0;

  /* ─── Semantic Colours ─── */
  --teal: #0A9488;
  --teal-l: #0CBFB0;
  --rust: #C0392B;
  --green: #22753A;

  /* ─── Services Module Accent ─── */
  --svc: #1B5E8A;
  --svc-l: #2577B5;
  --svc-bg: #EBF4FB;
  --svc-pale: #D0E8F5;
  --svc-amber: #D97706;
  --svc-amber-bg: #FEF3C7;

  /* ─── Typography Scale ─── */
  --fs-xs: 11px;
  --fs-sm: 13px;
  --fs-base: 15px;
  --fs-md: 17px;
  --fs-lg: 22px;
  --fs-xl: 28px;
  --fs-2xl: 36px;
  --fs-3xl: 48px;
  --fs-4xl: 62px;

  /* ─── Spacing Scale ─── */
  --sp-xs: 6px;
  --sp-sm: 12px;
  --sp-md: 20px;
  --sp-lg: 32px;
  --sp-xl: 52px;
  --sp-2xl: 80px;

  /* ─── Elevation ─── */
  --shadow-xs: 0 1px 4px rgba(26,24,20,.06);
  --shadow-sm: 0 2px 12px rgba(26,24,20,.08);
  --shadow-md: 0 8px 30px rgba(26,24,20,.10);
  --shadow-lg: 0 20px 60px rgba(26,24,20,.12);
  --shadow-xl: 0 40px 100px rgba(26,24,20,.14);

  /* ─── Motion ─── */
  --ease: .28s cubic-bezier(.25,.46,.45,.94);

  /* ─── Layout ─── */
  --nav-h: 62px;
  --mnav-h: 46px;
  --max-w: 1640px;
}

/* ═══ RESET ═══ */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: var(--fs-base); }
body {
  background: var(--white);
  color: var(--ink);
  font-family: 'DM Sans', sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; }
button { cursor: pointer; font-family: 'DM Sans', sans-serif; border: none; background: none; }
img { max-width: 100%; display: block; }
input, select, textarea { font-family: 'DM Sans', sans-serif; outline: none; }
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: var(--border-light); }
::-webkit-scrollbar-thumb { background: var(--mist); border-radius: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* ═══ PAGE SYSTEM ═══ */
.svc-page { display: none; animation: pageIn .28s ease; }
.svc-page.active { display: block; }
@keyframes pageIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }