/* ============================================================
   BASE.CSS — Reset, Typography, Utilities
   Light · Elegant · Classy
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--dm-font-body);
    font-size: var(--dm-fs-base);
    font-weight: 400;
    line-height: 1.75;
    color: var(--dm-text);
    background: var(--dm-bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--dm-saffron); text-decoration: none; transition: color var(--dm-dur-1) var(--dm-ease); }
a:hover { color: var(--dm-gold); }
button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4, h5 {
    font-family: var(--dm-font-display);
    font-weight: 500;
    line-height: 1.18;
    letter-spacing: 0.01em;
    color: var(--dm-primary-dark);
    margin: 0 0 var(--dm-space-4);
}
h1 { font-size: var(--dm-fs-3xl); }
h2 { font-size: var(--dm-fs-2xl); }
h3 { font-size: var(--dm-fs-xl); }
h4 { font-size: var(--dm-fs-lg); }
p  { margin: 0 0 var(--dm-space-4); }

::selection { background: var(--dm-saffron); color: #fff; }

/* ── Container ───────────────────────────────────────────────── */
.dm-container {
    width: 100%;
    max-width: var(--dm-container);
    margin: 0 auto;
    padding: 0 var(--dm-space-5);
}
.dm-container--wide { max-width: var(--dm-container-w); }

/* ── Sections ────────────────────────────────────────────────── */
.dm-section { padding: var(--dm-space-9) 0; position: relative; }
.dm-section--alt     { background: var(--dm-ivory); }
.dm-section--ivory   { background: var(--dm-ivory); }
.dm-section--beige   { background: var(--dm-beige); }
.dm-section--feature { background: var(--dm-ivory); }
.dm-section--dark {
    background: var(--dm-grad-dark);
    color: var(--dm-text-on-dark);
}
.dm-section--dark h1,
.dm-section--dark h2,
.dm-section--dark h3,
.dm-section--dark h4 { color: var(--dm-gold-light); }
.dm-section--dark p   { color: rgba(255,252,244,0.70); }

/* ── Eyebrow ─────────────────────────────────────────────────── */
.dm-eyebrow {
    display: inline-block;
    font-family: var(--dm-font-body);
    font-size: var(--dm-fs-xs);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--dm-saffron);
    margin-bottom: var(--dm-space-3);
    font-weight: 600;
}

/* ── Section heading ─────────────────────────────────────────── */
.dm-section-head { text-align: center; margin-bottom: var(--dm-space-7); }
.dm-section-head h2 { font-style: italic; font-weight: 600; }
.dm-section-head h2::after {
    content: '';
    display: block;
    width: 48px; height: 1px;
    background: var(--dm-gold);
    margin: var(--dm-space-3) auto 0;
}
.dm-section-head p {
    color: var(--dm-text-mute);
    max-width: 580px;
    margin-left: auto; margin-right: auto;
    font-size: var(--dm-fs-md);
}

/* ── Utilities ───────────────────────────────────────────────── */
.dm-stack > * + * { margin-top: var(--dm-space-4); }
.dm-grid { display: grid; gap: var(--dm-space-5); }
.dm-fullwidth { width: 100%; }
.dm-canvas { width: 100%; }

/* ── Mandala background ──────────────────────────────────────── */
.dm-mandala-bg { position: relative; isolation: isolate; }
.dm-mandala-bg::before {
    content: '';
    position: absolute; inset: 0;
    background-image: url("../img/motifs/mandala.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 680px 680px;
    opacity: 0.04;
    pointer-events: none;
    z-index: -1;
}

/* ── Skip & a11y ─────────────────────────────────────────────── */
.dm-screen-reader-text {
    border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%);
    height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0;
    position: absolute !important; word-wrap: normal !important;
}
.skip-link {
    position: absolute; top: -100px; left: 0;
    background: var(--dm-maroon); color: #fff;
    padding: 12px 18px; z-index: 1500;
}
.skip-link:focus { top: 0; }