/* ===========================================================
   VILLASIMIUS CHARTER — Brand foundation
   Navy + Gold + Cream. Type from Moneyfarm DS (IvyPresto + Inter).
   =========================================================== */

/* ---------- FONTS ---------- */
@font-face{font-family:"IvyPresto Display";font-weight:100;src:url("fonts/IvyPresto-Display-Thin.ttf") format("truetype");font-display:swap}
@font-face{font-family:"IvyPresto Display";font-weight:300;src:url("fonts/IvyPresto-Display-Light.ttf") format("truetype");font-display:swap}
@font-face{font-family:"IvyPresto Display";font-weight:400;src:url("fonts/IvyPresto-Display-Regular.ttf") format("truetype");font-display:swap}
@font-face{font-family:"IvyPresto Display";font-weight:600;src:url("fonts/IvyPresto-Display-SemiBold.ttf") format("truetype");font-display:swap}
@font-face{font-family:"Inter";font-weight:400;src:url("fonts/Inter-Regular.ttf") format("truetype");font-display:swap}
@font-face{font-family:"Inter";font-weight:500;src:url("fonts/Inter-Medium.ttf") format("truetype");font-display:swap}
@font-face{font-family:"Inter";font-weight:600;src:url("fonts/Inter-SemiBold.ttf") format("truetype");font-display:swap}
@font-face{font-family:"Inter";font-weight:700;src:url("fonts/Inter-Bold.ttf") format("truetype");font-display:swap}

:root{
  /* Navy (from logo) */
  --navy-900:#04223E;
  --navy-800:#0A2A4A;
  --navy-700:#143A60;
  --navy-600:#27557F;
  --navy-500:#4E7596;

  /* Gold (from logo swoosh/ring) */
  --gold-700:#8A6B33;
  --gold-600:#A8843E;
  --gold-500:#B8965A;   /* primary gold */
  --gold-400:#C9A86A;
  --gold-300:#D8C089;
  --gold-200:#E7D6AC;
  --gold-100:#F2E8CF;

  /* Cream / sand neutrals */
  --sand-50:#FBF8F2;
  --sand-100:#F5EFE3;
  --sand-200:#EBE2D0;
  --sand-300:#DCD0B8;

  --white:#FFFFFF;
  --ink:#1C2733;

  /* Semantic */
  --bg-page:var(--sand-50);
  --bg-deep:var(--navy-900);
  --fg-on-deep:#EAEFF5;
  --fg-on-deep-soft:#A9BACB;
  --fg-1:var(--navy-900);
  --fg-2:#33424F;
  --fg-3:#6A7783;
  --line:rgba(4,34,62,.12);
  --line-on-deep:rgba(216,192,137,.28);

  /* Gold gradient (matches the metallic swoosh) */
  --gold-grad:linear-gradient(105deg,#A8843E 0%,#D8C089 28%,#9A7634 55%,#E7D6AC 78%,#B8965A 100%);

  /* Fonts */
  --serif:"IvyPresto Display","Playfair Display",Georgia,serif;
  --sans:"Inter","Helvetica Neue",Arial,sans-serif;

  /* Spacing */
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;
  --sp-7:48px;--sp-8:64px;--sp-9:96px;--sp-10:128px;

  --radius-sm:6px;--radius-md:12px;--radius-lg:20px;--radius-pill:999px;
  --shadow-md:0 12px 32px rgba(4,34,62,.12);
  --shadow-lg:0 28px 70px rgba(4,34,62,.20);
  --maxw:1240px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg-page);color:var(--fg-2);
  font-family:var(--sans);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;}

img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

/* ---------- TYPE ---------- */
.eyebrow{font-family:var(--sans);font-weight:600;font-size:12.5px;letter-spacing:.32em;
  text-transform:uppercase;color:var(--gold-600);display:inline-flex;align-items:center;gap:12px;}
.eyebrow.on-deep{color:var(--gold-300)}
.eyebrow::before{content:"";width:26px;height:1px;background:currentColor;opacity:.7}
.eyebrow.center{justify-content:center}
.eyebrow.no-rule::before{display:none}

.display{font-family:var(--serif);font-weight:300;line-height:1.02;letter-spacing:-.01em;
  color:var(--navy-900);margin:0;font-size:clamp(44px,6vw,86px)}
.display em{font-style:italic;font-weight:300}
.h-xl{font-family:var(--serif);font-weight:300;line-height:1.06;letter-spacing:-.01em;
  color:var(--navy-900);margin:0;font-size:clamp(36px,4.6vw,62px)}
.h-lg{font-family:var(--serif);font-weight:400;line-height:1.1;color:var(--navy-900);margin:0;
  font-size:clamp(28px,3.2vw,42px)}
.h-md{font-family:var(--serif);font-weight:400;line-height:1.15;color:var(--navy-900);margin:0;
  font-size:clamp(22px,2.2vw,28px)}
.on-deep .display,.on-deep .h-xl,.on-deep .h-lg,.on-deep .h-md,.display.light{color:#fff}
.gold-text{color:var(--gold-500)}
.serif-italic{font-family:var(--serif);font-style:italic;font-weight:300}

.lede{font-size:clamp(17px,1.5vw,20px);line-height:1.7;color:var(--fg-2);max-width:54ch}
.muted{color:var(--fg-3)}
.on-deep .lede{color:var(--fg-on-deep)}
.on-deep .muted{color:var(--fg-on-deep-soft)}

.gold-rule{width:64px;height:2px;background:var(--gold-grad);border:0;margin:0;border-radius:2px}

/* ---------- BUTTONS ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--sans);font-weight:600;
  font-size:14px;letter-spacing:.04em;padding:15px 26px;border-radius:var(--radius-pill);
  cursor:pointer;border:1px solid transparent;transition:.25s ease;white-space:nowrap;}
.btn svg{width:17px;height:17px}
.btn-wa{background:var(--navy-900);color:#fff}
.btn-wa:hover{background:var(--navy-700);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.btn-gold{background:var(--gold-grad);color:var(--navy-900);background-size:160% 160%;background-position:0% 50%}
.btn-gold:hover{background-position:100% 50%;transform:translateY(-2px);box-shadow:0 14px 30px rgba(168,132,62,.4)}
.btn-ghost{background:transparent;color:var(--navy-900);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--gold-500);color:var(--gold-700)}
.on-deep .btn-ghost,.btn-ghost.on-deep{color:#fff;border-color:var(--line-on-deep)}
.on-deep .btn-ghost:hover,.btn-ghost.on-deep:hover{border-color:var(--gold-300);color:var(--gold-300)}
.btn-light{background:#fff;color:var(--navy-900)}
.btn-light:hover{background:var(--sand-100);transform:translateY(-2px)}
.btn-lg{padding:18px 34px;font-size:15px}

/* nav whatsapp (gold outline) + instagram glyph */
.btn-wa-out{border:1px solid var(--gold-500);color:var(--navy-900);background:transparent}
.btn-wa-out:hover{background:var(--gold-grad);color:var(--navy-900);border-color:transparent;transform:translateY(-1px)}
.btn-wa-out.on-deep{border-color:var(--gold-300);color:#fff}
.btn-wa-out.on-deep:hover{background:var(--gold-grad);color:var(--navy-900)}
.nav-ig{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;transition:.2s;flex:0 0 auto}
.nav-ig:hover{color:var(--gold-500) !important}

.link-gold{font-family:var(--sans);font-weight:600;font-size:14px;letter-spacing:.04em;
  color:var(--gold-700);display:inline-flex;align-items:center;gap:8px;transition:.2s}
.on-deep .link-gold{color:var(--gold-300)}
.link-gold svg{width:15px;height:15px;transition:transform .2s}
.link-gold:hover svg{transform:translateX(4px)}

/* ---------- LAYOUT ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}
.section{padding:clamp(64px,9vw,128px) 0}
.section.deep{background:var(--navy-900);color:var(--fg-on-deep)}
.section.sand{background:var(--sand-100)}
.eyebrow-stack{display:flex;flex-direction:column;gap:18px}

/* utility */
.center{text-align:center}
.mx-auto{margin-left:auto;margin-right:auto}
.tag{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;
  letter-spacing:.04em;color:var(--navy-700);background:var(--sand-100);
  border:1px solid var(--line);padding:7px 14px;border-radius:var(--radius-pill)}

/* image-slot polish */
image-slot{--is-bg:var(--sand-200);--is-fg:var(--navy-600);display:block;background:var(--sand-200)}

.fade-up{opacity:0;transform:translateY(26px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.fade-up.in{opacity:1;transform:none}

::selection{background:var(--gold-300);color:var(--navy-900)}