/* ── Forever Legacy Bridge — Global Design Tokens ── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=DM+Sans:wght@300;400;500;600&display=swap');

:root {
  --lb:    #1A2C2A;
  --lb2:   #2A3F3C;
  --lb3:   #0F1E1C;
  --ac:    #C8A96E;
  --ac2:   rgba(200,169,110,0.12);
  --tx:    #E8DDD0;
  --tx2:   #B5A898;
  --act:   #7DAA94;
  --act2:  #5D9A7E;
  --wh:    #F7F5F0;
  --warm:  #F0EDE6;
  --warm2: #E8E3D8;
  --bdr:   rgba(26,44,42,0.07);
  --blue:  #2A5C7A;
  --plum:  #6B4A7A;
  --fd:    'Cormorant Garamond', Georgia, serif;
  --fu:    'DM Sans', sans-serif;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--fu);
  background: var(--wh);
  color: var(--lb);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; }
h2 {
  font-family: var(--fd);
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  font-weight: 400;
  line-height: 1.18;
  margin-bottom: 14px;
}
.lb-label {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--act);
  margin-bottom: 12px;
}
.lead {
  font-size: 1rem;
  color: #5A4A3A;
  line-height: 1.78;
  max-width: 720px;
  margin-bottom: 40px;
}
.sec   { max-width: 980px; margin: 0 auto; padding: 76px 40px; }
.sec-t { background: var(--warm); padding: 76px 40px; }
.sec-t .si { max-width: 980px; margin: 0 auto; }
.sec-d { background: var(--lb); color: var(--tx); padding: 76px 40px; }
.sec-d .si { max-width: 980px; margin: 0 auto; }
.sec-d h2 { color: #fff; }
.sec-d .lb-label { color: var(--ac); }
.sec-d .lead { color: var(--tx2); }
.g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.g3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.g4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }

.btn {
  display: inline-block;
  background: var(--ac);
  color: var(--lb3);
  padding: 14px 36px;
  border-radius: 8px;
  font-size: .9rem;
  font-weight: 600;
  transition: all .3s;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(200,169,110,0.3); }
.btn-ghost {
  display: inline-block;
  border: 1px solid rgba(200,169,110,0.3);
  color: var(--ac);
  padding: 13px 36px;
  border-radius: 8px;
  font-size: .9rem;
  font-weight: 500;
  transition: all .3s;
}
.btn-ghost:hover { background: rgba(200,169,110,0.08); }

@media (max-width: 768px) {
  .sec, .sec-t, .sec-d { padding: 56px 20px; }
  .g2, .g3, .g4 { grid-template-columns: 1fr; }
}