*,*::before,*::after{ margin: 0; padding: 0; box-sizing: border-box;}
html {scroll-behavior: smooth;}
body {margin: 0; padding: 0; font-family: var(--ff-secondary); font-size: var(--fs-base); color: var(--c-text); -webkit-font-smoothing: antialiased;line-height: 1.6;}
h1,h2,h3,h4,h5,h6 {margin: 0; padding: 0; font-family: var(--ff-primary); font-weight: 700;}
h1 {line-height: var(--lh-heading);}
h2 {line-height: var(--lh-h2);}
ol,ul {margin: 0; padding: 0; padding-left: 1rem;}
li {list-style: none; font-family: var(--ff-secondary); font-size: var(--fs-sm);}
p {padding: 0; margin:20px 0;; font-family: var(--ff-secondary); font-size: var(--fs-base); line-height: var(--lh-p); color: var(--c-text);}
a {text-decoration: none; display: block; font-family: var(--ff-secondary); color: var(--c-text);}
p a {display: inline; font-weight: 500;}
button {background-color: transparent; color: var(--c-white); border: none; cursor: pointer;}
img, picture {max-width: 100%; height: auto; font-style: italic; font-family: var(--ff-secondary); font-size: var(--fs-base); vertical-align: middle;}
picture {display: block;}
svg {vertical-align: middle;}

/* MODIFIER CLASSES */
.container {max-width: 1200px; margin-inline:auto; padding: 0; padding-inline:clamp(0.9375rem, 0.7708rem + 0.8333vw, 1.5rem);} 
.btn-primary {background: var(--c-gradient-rose); color: var(--c-white); border: none; border-radius: 999px; padding: 8px 22px; font-size: 14px; font-weight: 600; transition: opacity 0.2s, transform 0.2s; white-space: nowrap; } 
.btn-banner {display: inline-flex; align-items: center; gap: 6px; background: rgba(255, 255, 255, 0.22); color: var(--white); border-radius: 999px; padding: 6px 16px; font-size: 12px; font-weight: 600; letter-spacing: 0.5px; margin-bottom: 18px; backdrop-filter: blur(6px); }
.btn-social {display: flex; align-items: center; gap: 7px; border-radius: 999px; padding: 9px 18px; font-size: 13px; font-weight: 600; border: none; transition: opacity var(--trans-2), transform var(--trans-2); }
.btn-primary:hover {opacity: 0.9; transform: translateY(-1px); }

:root{
    /* Font Family */
    --ff-primary:'playfair',system-ui, sans-serif;
    --ff-secondary: 'dmsans',system-ui, sans-serif;
    /* font-size */
    --fs-xxl: clamp(1.75rem, 1.3173rem + 1.9231vw, 3rem);                    /* 320px to 1400px */
    --fs-lg: clamp(1.25rem, 1.1202rem + 0.5769vw, 1.625rem);                 /*20PX (320px/1400px) 26PX */
    --fs-base:clamp(0.875rem, 0.8101rem + 0.2885vw, 1.0625rem);             
    --fs-sm: clamp(0.875rem, 0.875rem + 0vw, 0.875rem);
    /* colors */
    --c-gold: #E8972A;
    --c-gold-light: #f5b942;
    --c-rose: #F25C7A;
    --c-teal: #3BBFAD;
    --c-cream: #FFF9F4;
    --c-charcoal: #2C2522;
    --c-surface: #FFF1E6;
    --c-text: #7A6A62;
    --c-border: #F5E8DC;
    --c-border-strong: #ecd9c8;
    --c-white: #FFFFFF;
    --c-gradient-main: linear-gradient(135deg, #F25C7A, #E8972A, #3BBFAD);
    --c-gradient-gold: linear-gradient(135deg, #E8972A, #f5b942);
    --c-gradient-rose: linear-gradient(135deg, #F25C7A, #e8972a);
    /* line height */
    --lh-heading:1.2;
    --lh-h2:1.25;
    --lh-p:1.8;
    --lh-cards:1.7;
    /* trasition */
    --trans-2 : 0.2s ease-in;
    --trans-3 : 0.3s ease-in;
    --menu-transition: 0.25s;
}