/* Future Proof Medical — design mockup.
   Palette and type from Rebeca's own brand kit: Midnight Navy, Champagne Gold,
   Soft Ivory, Slate Blue; Playfair Display for display, Montserrat for text. */
:root {
  --navy: #0F1B3D;
  --navy-deep: #0A1430;
  --navy-soft: #16264F;
  --gold: #C9A063;
  --gold-soft: #E3C89B;
  --ivory: #EEF0F3;
  --ivory-warm: #F7F5F1;
  --slate: #63738A;
  --slate-light: #8A97AA;
  --ink: #0F1B3D;
  --line-dark: rgba(201, 160, 99, 0.28);
  --line-light: rgba(15, 27, 61, 0.12);
  --display: "Playfair Display", Georgia, "Times New Roman", serif;
  --text: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wrap: 1180px;
  --gutter: max(20px, env(safe-area-inset-left, 0px));
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body { margin: 0; background: var(--ivory-warm); color: var(--ink); font: 400 16px/1.7 var(--text); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: var(--gutter); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.eyebrow { font: 600 11px/1 var(--text); letter-spacing: .32em; text-transform: uppercase; color: var(--gold); }
.display { font-family: var(--display); font-weight: 400; letter-spacing: -0.015em; line-height: 1.05; text-wrap: balance; margin: 0; }

/* Buttons: a gold block for the one action, a hairline for the second. */
.btn { display: inline-flex; align-items: center; gap: 14px; font: 600 12px/1 var(--text); letter-spacing: .22em; text-transform: uppercase; text-decoration: none; padding: 18px 28px; border: 1px solid transparent; transition: background .25s, color .25s, border-color .25s; }
.btn-gold { background: var(--gold); color: var(--navy); }
.btn-gold:hover { background: var(--gold-soft); }
.btn-line { border-color: var(--line-dark); color: var(--ivory); }
.btn-line:hover { border-color: var(--gold); }
.btn .arr { width: 22px; height: 1px; background: currentColor; position: relative; }
.btn .arr::after { content: ""; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }

/* Mockup ribbon */
.ribbon { background: var(--gold); color: var(--navy); font: 600 10.5px/1 var(--text); letter-spacing: .28em; text-transform: uppercase; text-align: center; padding: 9px 16px; }
.ribbon a { text-decoration: underline; text-underline-offset: 3px; }

/* The wordmark, rebuilt from her logo so it stays crisp at every size. */
.mark { display: inline-flex; flex-direction: column; align-items: center; text-decoration: none; color: var(--ivory); position: relative; padding: 10px 18px 8px; }
.mark::before, .mark::after { content: ""; position: absolute; width: 22px; height: 22px; border-color: var(--gold); border-style: solid; }
.mark::before { left: 0; top: 0; border-width: 1px 0 0 1px; }
.mark::after { right: 0; bottom: 0; border-width: 0 1px 1px 0; }
.mark b { font: 400 21px/1 var(--display); letter-spacing: -0.005em; white-space: nowrap; }
.mark i { font: 500 7.5px/1 var(--text); font-style: normal; letter-spacing: .38em; color: var(--gold); margin-top: 7px; white-space: nowrap; }

/* Wordmark on light backgrounds */
.mark.ink { color: var(--navy); }