:root {
  color-scheme: light;
  --navy: #3d5a80;
  --deep: #304965;
  --coral: #db8289;
  --ink: #334860;
  --muted: #67798b;
  --pale: #f7f8fb;
  --cream: #fffefa;
}
* { box-sizing: border-box; }
html { min-height: 100%; }
body { margin: 0; font-family: Arial, Helvetica, sans-serif; color: var(--ink); background: var(--pale); }
.page { position: relative; display: grid; place-items: center; min-height: 100svh; padding: 32px 24px; overflow: hidden; background: radial-gradient(circle at 10% 5%, #ffffff 0%, #f7f8fb 40%, #eff2f7 100%); }
.frame { z-index: 1; width: min(100%, 930px); min-height: min(800px, calc(100svh - 64px)); padding: 44px clamp(28px, 7vw, 90px) 30px; display: flex; flex-direction: column; align-items: center; text-align: center; border: 1px solid rgba(61,90,128,.13); border-radius: 30px; background: rgba(255,255,255,.92); box-shadow: 0 24px 85px rgba(42,60,84,.075); }
.accent { position: absolute; pointer-events: none; border-radius: 50%; filter: blur(2px); }
.accent-top { width: 360px; height: 360px; top: -220px; right: -110px; background: rgba(219,130,137,.12); }
.accent-bottom { width: 400px; height: 400px; bottom: -275px; left: -180px; background: rgba(61,90,128,.08); }
.masthead { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.logo { width: clamp(96px, 12vw, 144px); height: auto; object-fit: contain; }
.brand { display: flex; flex-direction: column; align-items: center; margin-top: -4px; }
.brand-name { font: italic 35px/1.1 Georgia, 'Times New Roman', serif; color: var(--navy); letter-spacing: -.04em; }
.brand-subtitle { margin-top: 8px; font-size: 10px; line-height: 1.3; font-weight: 700; letter-spacing: .28em; color: var(--coral); }
.hero { width: 100%; margin: auto 0; padding: 48px 0 42px; }
.eyebrow { margin: 0 0 22px; font-size: 11px; font-weight: 800; letter-spacing: .21em; color: var(--coral); }
h1 { margin: 0 auto 27px; max-width: 780px; font: 400 clamp(44px, 6.4vw, 78px)/1.11 Georgia, 'Times New Roman', serif; letter-spacing: -.045em; color: var(--deep); }
h1 em { font-weight: 400; color: var(--coral); }
.intro { max-width: 635px; margin: 0 auto; font-size: clamp(15px, 1.8vw, 18px); line-height: 1.85; color: var(--muted); }
.rule { position: relative; width: 172px; height: 1px; background: #dde2e9; margin: 38px auto 27px; }
.rule span { position: absolute; left: calc(50% - 4px); top: -4px; width: 9px; height: 9px; border: 1px solid var(--coral); border-radius: 50%; background: white; }
.values { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .13em; color: var(--navy); }
.footer { margin-top: auto; display: flex; flex-direction: column; align-items: center; }
.quote { margin: 0 0 4px; font: italic 16px/1.5 Georgia, serif; color: var(--navy); }
.attribution { margin: 0 0 29px; font-size: 11px; color: var(--muted); }
.copyright { margin: 0; font-size: 10px; color: #9aa6b1; letter-spacing: .04em; }
@media (max-width: 620px) {
  .page { padding: 12px; }
  .frame { min-height: calc(100svh - 24px); border-radius: 22px; padding: 28px 22px 25px; }
  .brand-name { font-size: 29px; }
  .hero { padding: 44px 0; }
  h1 { font-size: clamp(37px, 9vw, 51px); }
  .values { font-size: 10px; gap: 12px; }
  .quote { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior: auto !important; } }