/* Confiance — shared base styles (complement to Tailwind CDN) */

html { background: #F7F4EE; }
body { font-family: 'Inter', system-ui, sans-serif; color: #0D1B38; -webkit-font-smoothing: antialiased; }

.display { font-family: 'Fraunces', Georgia, serif; font-weight: 600; letter-spacing: -0.02em; line-height: 1.05; }
.overline { font-family: 'Inter', system-ui, sans-serif; letter-spacing: 0.18em; text-transform: uppercase; font-size: 11px; font-weight: 700; color: #7A1A1A; }

.rule { height: 1px; background: linear-gradient(to right, transparent, rgba(13,27,56,0.15), transparent); }

.fade-up { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
.fade-up.visible { opacity: 1; transform: translateY(0); }

.nav-wrap {
  background: rgba(247, 244, 238, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(13,27,56,0.08);
}
.nav-scrolled { background: rgba(247, 244, 238, 0.96) !important; }

.card {
  background: #FDFBF7;
  border: 1px solid rgba(13,27,56,0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -24px rgba(13,27,56,0.25);
  border-color: rgba(122,26,26,0.3);
}

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(13,27,56,0.06);
  font-size: 11px; font-weight: 600; color: #1A2332; letter-spacing: 0.04em;
}

.btn-primary {
  background: #0D1B38; color: #F7F4EE;
  padding: 12px 22px; border-radius: 4px;
  font-weight: 600; letter-spacing: 0.01em;
  display: inline-flex; align-items: center; gap: 10px;
  transition: background 0.2s ease;
}
.btn-primary:hover { background: #7A1A1A; }

.btn-ghost {
  color: #0D1B38;
  padding: 12px 22px; border-radius: 4px;
  font-weight: 600; border: 1px solid rgba(13,27,56,0.25);
  display: inline-flex; align-items: center; gap: 10px;
  transition: border-color 0.2s, color 0.2s;
}
.btn-ghost:hover { color: #7A1A1A; border-color: #7A1A1A; }

.link-arrow {
  color: #0D1B38; font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px;
  border-bottom: 1px solid rgba(13,27,56,0.2);
  padding-bottom: 2px;
  transition: color 0.2s, border-color 0.2s;
}
.link-arrow:hover { color: #7A1A1A; border-color: #7A1A1A; }

/* Mega-menu dropdown — positions to the fixed #nav (full width), not the button */
.has-drop { position: static; }
.drop {
  position: absolute;
  left: 0; right: 0; top: 100%;
  background: #FDFBF7;
  border-top: 1px solid rgba(13,27,56,0.08);
  box-shadow: 0 20px 40px -20px rgba(13,27,56,0.2);
  opacity: 0; pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.has-drop:hover .drop,
.has-drop:focus-within .drop,
.drop.drop-open {
  opacity: 1; pointer-events: auto; transform: translateY(0);
}
/* Keep the whole nav as the positioning context so left/right:0 spans its width */
#nav > div { position: relative; }

.hero-bg {
  background:
    radial-gradient(1200px 500px at 85% 10%, rgba(122,26,26,0.08), transparent 60%),
    radial-gradient(900px 500px at 10% 90%, rgba(13,27,56,0.08), transparent 60%),
    linear-gradient(180deg, #FAF7F1 0%, #F7F4EE 100%);
}

.mono-grid {
  background-image:
    linear-gradient(rgba(13,27,56,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13,27,56,0.05) 1px, transparent 1px);
  background-size: 48px 48px;
}

details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }

/* Minimise partial-include FOUC: reserve vertical space for nav */
body { padding-top: 0; }
[data-include="nav"]:empty { display: block; height: 80px; background: rgba(247,244,238,0.85); }