/* =========================================================
   MAORI CASA LUXURY — Design System
   Single source of truth. Loaded on every page.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,400&family=Inter:wght@200;300;400;500;600;700&display=swap');

:root {
  /* ── Palette ─────────────────────────────────────────── */
  --ink:        #1A1815;   /* foreground, deep charcoal */
  --ink-soft:   #2A2722;
  --stone:      #6B6760;   /* secondary text */
  --stone-soft: #8E8A82;
  --line:       #E5DED2;   /* hairline separators */
  --line-soft:  #EFEAE0;
  --ivory:      #FBF8F3;   /* cards, nav */
  --bone:       #F4EFE8;   /* page background */
  --sand:       #ECE5D8;   /* tonal section */
  --clay:       #A8704F;   /* single earth accent */
  --clay-deep:  #8A5A3E;
  --clay-soft:  #C68B6A;

  /* ── Type ────────────────────────────────────────────── */
  --font-display: "Cormorant Garamond", "Times New Roman", serif;
  --font-sans:    "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

  /* ── Space scale (8pt grid) ──────────────────────────── */
  --s-1: 4px;  --s-2: 8px;  --s-3: 16px; --s-4: 24px;
  --s-5: 40px; --s-6: 64px; --s-7: 96px; --s-8: 160px;

  /* ── Misc ────────────────────────────────────────────── */
  --maxw: 1320px;
  --header-h: 84px;
  --ease: cubic-bezier(.2,.7,.2,1);
  --shadow-1: 0 1px 2px rgba(26,24,21,.04), 0 8px 24px rgba(26,24,21,.05);
  --shadow-2: 0 2px 4px rgba(26,24,21,.06), 0 24px 48px rgba(26,24,21,.08);
}

/* =========================================================
   RESET + BASE
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bone);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, video { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }

/* =========================================================
   TYPOGRAPHY PRIMITIVES
   ========================================================= */
.m-display,
h1.m-display, h2.m-display, h3.m-display {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.05;
  color: var(--ink);
}
.m-eyebrow {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--clay);
  display: inline-block;
}
.m-lead {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 18px;
  line-height: 1.6;
  color: var(--stone);
  max-width: 62ch;
}
.m-rule {
  width: 56px;
  height: 1px;
  background: var(--clay);
  display: inline-block;
  vertical-align: middle;
  margin: 0 var(--s-3);
}

/* =========================================================
   LAYOUT PRIMITIVES
   ========================================================= */
.m-container { max-width: var(--maxw); margin: 0 auto; padding: 0 max(24px, 4vw); }
.m-section   { padding: clamp(64px, 9vw, 128px) 0; }
.m-section--tight { padding: clamp(48px, 6vw, 80px) 0; }
.m-section--bone  { background: var(--bone); }
.m-section--ivory { background: var(--ivory); }
.m-section--sand  { background: var(--sand); }
.m-section--ink   { background: var(--ink); color: var(--bone); }
.m-section--ink .m-eyebrow { color: var(--clay-soft); }

/* =========================================================
   BUTTONS — flat, rectangular, no radius
   ========================================================= */
.m-btn,
.m-btn-ghost,
.m-btn-line {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 32px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 0;
  transition: all .35s var(--ease);
  white-space: nowrap;
  cursor: pointer;
}
.m-btn { background: var(--ink); color: var(--bone); }
.m-btn:hover { background: var(--clay); color: #fff; transform: translateY(-1px); }

.m-btn-ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.7); }
.m-btn-ghost:hover { background: #fff; color: var(--ink); }

.m-btn-line {
  background: transparent;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding: 8px 0;
  letter-spacing: 0.18em;
}
.m-btn-line:hover { color: var(--clay); border-color: var(--clay); }

.m-btn--clay { background: var(--clay); }
.m-btn--clay:hover { background: var(--clay-deep); }

/* =========================================================
   LINKS
   ========================================================= */
.m-link {
  position: relative;
  font-family: var(--font-sans);
  color: var(--ink);
  font-weight: 400;
}
.m-link::after {
  content: ""; position: absolute; left: 0; bottom: -2px;
  width: 100%; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform .4s var(--ease);
}
.m-link:hover::after { transform: scaleX(1); transform-origin: left; }
.m-link:hover { color: var(--clay); }

/* =========================================================
   IMAGES + REVEAL
   ========================================================= */
.m-frame {
  position: relative;
  overflow: hidden;
  background: var(--sand);
}
.m-frame img,
.m-frame video {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}
.m-frame:hover img,
.m-frame:hover video { transform: scale(1.04); }
.m-frame--3x4  { aspect-ratio: 3 / 4; }
.m-frame--4x5  { aspect-ratio: 4 / 5; }
.m-frame--1x1  { aspect-ratio: 1 / 1; }
.m-frame--16x9 { aspect-ratio: 16 / 9; }
.m-frame--21x9 { aspect-ratio: 21 / 9; }

[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}
[data-reveal].is-in {
  opacity: 1;
  transform: translateY(0);
}

/* =========================================================
   FORMS — minimal, line-only inputs
   ========================================================= */
.m-field { display: flex; flex-direction: column; gap: 8px; }
.m-field label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--stone);
}
.m-field input,
.m-field select,
.m-field textarea {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 12px 0;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 300;
  color: var(--ink);
  border-radius: 0;
  outline: none;
  transition: border-color .3s var(--ease);
  width: 100%;
}
.m-field input:focus,
.m-field select:focus,
.m-field textarea:focus { border-bottom-color: var(--ink); }
.m-field textarea { min-height: 92px; resize: vertical; }

/* =========================================================
   LEGACY OVERRIDES — apply Maori design system to old pages
   without rewriting them. Targets the existing class names
   used across dev pages (developpement, durabilite, etc).
   ========================================================= */
body {
  font-family: var(--font-sans) !important;
  background: var(--bone) !important;
  color: var(--ink) !important;
}

/* Typography */
h1, h2, h3, h4, h5, h6,
.section-heading, .villa-title, .exp-title,
.card-title, .hero-content h1, .hero h1, .hero h2, .hero h3,
.global-modal-title-dev, .modal-title, .modal-content h2 {
  font-family: var(--font-display) !important;
  font-weight: 400 !important;
  letter-spacing: -0.005em !important;
  line-height: 1.1;
}
/* Heading color: only on light-ground contexts; pages set their own on dark */
.section-heading,
.villa-title, .exp-title, .card-title,
.global-modal-title-dev, .modal-title, .modal-content h2 {
  color: var(--ink);
}
p, li, span, a, label, div, button, input, select, textarea {
  font-family: var(--font-sans);
}

/* SCORCHED-EARTH font override for legacy dev pages.
   Beats any class-level font-family declared inline in:
   developpement.php / aproposdenous.php / aproposdecolombie.php /
   gestionvilla.php / durabilite.php */
body, body p, body li, body span, body a, body label,
body button, body input, body textarea, body select,
body .info-card p, body .lead, body .description,
body .form-group input, body .btn, body .btn-subscribe,
body .nav-links a, body .logo-text, body .lang-switch,
body .hero p, body .section-sub, body .intro p,
body .lead, body .text, body .copy, body .body-text {
  font-family: var(--font-sans) !important;
}
body h1, body h2, body h3, body h4, body h5, body h6,
body .hero-title, body .hero h1, body .hero h2, body .hero h3,
body .info-card h3, body .project-info h2,
body .subscribe-form h3, body .modal-title, body .section-heading {
  font-family: var(--font-display) !important;
  font-weight: 400 !important;
}
/* Icon fonts must keep their own font-family */
body i.fa, body i.fas, body i.far, body i.fab, body i.fal,
body [class*="fa-"], body .fa, body .fas, body .far, body .fab {
  font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands", "FontAwesome" !important;
}

/* Legacy color map */
.section-title { color: var(--clay) !important; font-family: var(--font-sans) !important; font-size: 11px !important; font-weight: 500 !important; letter-spacing: 0.28em !important; text-transform: uppercase !important; }
.section-heading { font-size: clamp(36px, 5vw, 64px) !important; margin-bottom: 24px !important; }
.section-text { font-family: var(--font-sans) !important; color: var(--stone) !important; font-weight: 300 !important; font-size: 16px !important; line-height: 1.75 !important; }

/* Hero on legacy pages: white text on dark video */
.hero { background: var(--ink) !important; }
.hero h1, .hero-content h1 { color: #fff !important; font-weight: 300 !important; font-size: clamp(48px, 7vw, 96px) !important; line-height: 1.05 !important; }
.hero p, .hero-content p { color: rgba(255,255,255,.88) !important; font-weight: 300 !important; font-size: 17px !important; }
.hero-overlay { background: linear-gradient(180deg, rgba(26,24,21,.2) 0%, rgba(26,24,21,.65) 100%) !important; }

/* Buttons */
.btn-outline-dark, .btn-secondary, .btn-primary, .btn-subscribe,
button.btn-subscribe, button.btn-outline-dark,
.cta-btn, .btn-card, .btn-outline {
  font-family: var(--font-sans) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.24em !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
  padding: 14px 28px !important;
  transition: all .35s var(--ease) !important;
}
.btn-primary, .btn-subscribe { background: var(--ink) !important; color: var(--bone) !important; border: 0 !important; }
.btn-primary:hover, .btn-subscribe:hover { background: var(--clay) !important; color: #fff !important; }
.btn-outline-dark { background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--ink) !important; color: var(--ink) !important; padding: 8px 0 !important; }
.btn-outline-dark:hover { color: var(--clay) !important; border-bottom-color: var(--clay) !important; }

/* Cards */
.reason-card, .project-card, .card, .exp-card, .offer-card {
  background: var(--ivory) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: transform .5s var(--ease) !important;
}
.reason-card:hover, .project-card:hover, .card:hover, .exp-card:hover, .offer-card:hover {
  background: #fff !important;
  transform: translateY(-6px) !important;
  box-shadow: none !important;
}
.reason-card h3, .project-card h3, .card h3 {
  font-family: var(--font-display) !important;
  font-weight: 400 !important;
  font-size: 26px !important;
  line-height: 1.15 !important;
  margin-bottom: 16px !important;
}
.reason-card p, .project-card p {
  color: var(--stone) !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
  font-weight: 300 !important;
}
.project-badge {
  font-family: var(--font-sans) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.36em !important;
  text-transform: uppercase !important;
  color: var(--clay) !important;
}
.project-link {
  font-family: var(--font-sans) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  color: var(--ink) !important;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 4px;
  transition: all .35s var(--ease);
}
.project-link:hover { color: var(--clay) !important; border-bottom-color: var(--clay); }

/* Section background tone replacements */
.section-light, .section-beige, .bg-light, .bg-beige { background: var(--bone) !important; }
.bg-dark { background: var(--ink) !important; color: var(--bone) !important; }

/* Forms — generic */
input:not([type=submit]):not([type=button]):not([type=checkbox]):not([type=radio]),
textarea, select {
  border-radius: 0 !important;
}

/* Form wrapper on dev pages */
.form-wrapper {
  background: var(--ivory) !important;
  border-radius: 0 !important;
  padding: 56px 48px !important;
}
.form-row input {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--line) !important;
  border-radius: 0 !important;
}
.form-row input:focus { border-bottom-color: var(--ink) !important; box-shadow: none !important; }

/* Image placeholders */
.image-placeholder { border-radius: 0 !important; }

/* Carousel items */
.carousel-item, .marquee-item, .slide { border-radius: 0 !important; }

/* Footers — sometimes inline overrides remain */
footer { border-radius: 0 !important; }

/* Hide overly bright accent stars / generic emoji-as-icon */
.testimonial-stars span { color: var(--clay) !important; }

/* === Specific to durabilite / aproposdenous / gestionvilla === */
.pledge-card, .value-card, .team-card, .service-card,
.colombie-card, .badge {
  background: var(--ivory) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.pledge-card h3, .value-card h3, .team-card h3, .service-card h3 {
  font-family: var(--font-display) !important;
  font-weight: 400 !important;
  font-size: 22px !important;
  color: var(--ink) !important;
}
.badge {
  font-family: var(--font-sans) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.32em !important;
  text-transform: uppercase !important;
  color: var(--clay) !important;
  background: transparent !important;
  border: 1px solid var(--line) !important;
  padding: 8px 14px !important;
}