:root {
  --old-gold: #C8AE04; --stormy-teal: #076974; --vintage-berry: #8B415F;
  --rose-wine: #C94077; --pine-teal: #305F4E; --grey-olive: #89948F;
  --text-dark: #1A1A18; --text-mid: #4a4a48; --text-soft: #7a7a78;
  --bg: #fcfcfb;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--text-mid);
  font-family: 'Jost', sans-serif; font-weight: 400; line-height: 1.75;
  font-size: 16px; -webkit-font-smoothing: antialiased;
}
a { color: var(--stormy-teal); }

/* ── Header ── */
.doc-header { border-bottom: 1px solid rgba(7,105,116,0.12); background: #fff; }
.doc-header-inner {
  max-width: 780px; margin: 0 auto; padding: 24px 32px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.doc-logo { display: flex; flex-direction: column; line-height: 1; text-decoration: none; width: max-content; }
.doc-brand { font-size: 17px; font-weight: 400; letter-spacing: 0.3em; text-transform: uppercase; color: var(--stormy-teal); }
.doc-name { font-size: 13px; font-weight: 400; letter-spacing: 0.04em; color: var(--text-mid); margin-top: 6px; text-align: left; }
.doc-back { font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-mid); text-decoration: none; white-space: nowrap; }
.doc-back:hover { color: var(--stormy-teal); }

/* ── Document body ── */
.doc { max-width: 780px; margin: 0 auto; padding: 60px 32px 76px; }
.doc-eyebrow {
  font-size: 12px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--stormy-teal); margin: 0 0 14px; display: flex; align-items: center; gap: 14px;
}
.doc-eyebrow::before { content: ''; width: 30px; height: 1px; background: var(--stormy-teal); }
.doc h1 {
  font-family: 'Cormorant Garamond', serif; font-size: clamp(34px, 5vw, 52px);
  font-weight: 500; line-height: 1.1; color: var(--text-dark); margin: 0;
}
.doc-rule { width: 48px; height: 1px; background: var(--old-gold); margin: 22px 0 26px; }
.doc-intro {
  font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 20px;
  font-weight: 400; line-height: 1.6; color: var(--text-mid); margin: 0;
}

.doc section { margin-top: 44px; }
.doc h2 {
  font-family: 'Cormorant Garamond', serif; font-size: 25px; font-weight: 600;
  color: var(--text-dark); margin: 0 0 14px; display: flex; align-items: center; gap: 14px;
}
.doc h2 .num {
  font-family: 'Jost', sans-serif; font-size: 13px; font-weight: 600;
  color: var(--stormy-teal); border: 1px solid rgba(7,105,116,0.3); border-radius: 50%;
  width: 30px; height: 30px; min-width: 30px; display: inline-flex; align-items: center; justify-content: center;
}
.doc p { margin: 0 0 16px; }
.doc strong { color: var(--text-dark); font-weight: 600; }
.doc ul { margin: 0 0 18px; padding: 0; list-style: none; }
.doc li { position: relative; padding-left: 22px; margin-bottom: 10px; line-height: 1.7; }
.doc li::before { content: ''; position: absolute; left: 2px; top: 0.62em; width: 6px; height: 6px; border-radius: 50%; background: var(--old-gold); }

.doc-contact {
  background: #fff; border-left: 3px solid var(--stormy-teal); border-radius: 2px;
  padding: 20px 24px; margin: 0 0 20px; box-shadow: 0 4px 18px rgba(7,105,116,0.05);
}
.doc-contact .name { display: block; font-family: 'Cormorant Garamond', serif; font-size: 20px; font-weight: 600; color: var(--text-dark); margin-bottom: 4px; }

.doc-updated { margin-top: 44px; padding-top: 20px; border-top: 1px solid rgba(137,148,143,0.22); font-weight: 500; color: var(--text-dark); }
.doc-note { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 17px; color: var(--text-soft); margin-top: 32px; }

/* ── Footer ── */
.doc-footer {
  text-align: center; padding: 40px 8vw 48px; border-top: 1px solid rgba(7,105,116,0.1); background: #fff;
}
.doc-foot-brand { font-size: 14px; font-weight: 300; letter-spacing: 0.3em; text-transform: uppercase; color: var(--stormy-teal); display: block; margin-bottom: 8px; }
.doc-footer a { font-size: 13px; color: var(--grey-olive); text-decoration: none; }
.doc-footer a:hover { color: var(--stormy-teal); }

@media (max-width: 600px) {
  .doc-header-inner { padding: 18px 24px; }
  .doc { padding: 42px 24px 58px; }
  .doc h2 { font-size: 22px; }
  .doc-intro { font-size: 18px; }
}