| :root { |
| --navy: #1a1f36; |
| --body: #374151; |
| --red: #ff003c; |
| --pink: #fff0f3; |
| --mist: #e8ecf7; |
| --ink: #0a1172; |
| --white: #ffffff; |
| } |
|
|
| * { |
| box-sizing: border-box; |
| } |
|
|
| html, |
| body { |
| margin: 0; |
| padding: 0; |
| } |
|
|
| body { |
| font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; |
| color: var(--navy); |
| background: var(--white); |
| line-height: 1.65; |
| } |
|
|
| .hero, |
| .mission, |
| .services, |
| footer { |
| padding: 2rem 1.25rem; |
| max-width: 920px; |
| margin: 0 auto; |
| } |
|
|
| h1 { |
| font-size: clamp(1.65rem, 4vw, 2.35rem); |
| font-weight: 700; |
| letter-spacing: -0.02em; |
| line-height: 1.2; |
| margin: 0 0 0.85rem; |
| } |
|
|
| h2 { |
| font-size: clamp(1.35rem, 3vw, 1.85rem); |
| font-weight: 650; |
| margin: 0 0 1.1rem; |
| } |
|
|
| h3 { |
| font-size: 1.15rem; |
| font-weight: 650; |
| line-height: 1.3; |
| margin: 0 0 0.55rem; |
| } |
|
|
| p { |
| margin: 0 0 0.85rem; |
| color: var(--body); |
| font-size: 1.02rem; |
| } |
|
|
| .eyebrow { |
| font-size: 0.72rem; |
| font-weight: 700; |
| letter-spacing: 0.2em; |
| text-transform: uppercase; |
| margin: 0 0 0.65rem; |
| color: var(--navy); |
| opacity: 0.7; |
| } |
|
|
| .eyebrow.red { |
| color: var(--red); |
| opacity: 1; |
| } |
|
|
| .lede { |
| font-size: 1.05rem; |
| max-width: 40rem; |
| } |
|
|
| .cta { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 0.65rem; |
| margin-top: 1.25rem; |
| } |
|
|
| .btn-primary, |
| .btn-ghost { |
| display: inline-block; |
| padding: 0.55rem 1.1rem; |
| border-radius: 999px; |
| text-decoration: none; |
| font-size: 0.92rem; |
| font-weight: 600; |
| } |
|
|
| .btn-primary { |
| background: var(--red); |
| color: var(--white); |
| } |
|
|
| .btn-ghost { |
| background: var(--white); |
| color: var(--navy); |
| border: 1px solid var(--navy); |
| } |
|
|
| blockquote { |
| position: relative; |
| margin: 0 0 1.75rem; |
| padding: 3.25rem 1.5rem 2.75rem 1.35rem; |
| background: var(--pink); |
| border-left: 4px solid var(--red); |
| border-radius: 1rem; |
| overflow: hidden; |
| } |
|
|
| blockquote p { |
| margin: 0; |
| color: var(--navy); |
| font-size: clamp(1.25rem, 3.2vw, 1.85rem); |
| font-weight: 700; |
| line-height: 1.3; |
| } |
|
|
| .q { |
| position: absolute; |
| color: var(--red); |
| font-family: Georgia, "Times New Roman", serif; |
| font-size: clamp(3.5rem, 12vw, 5.5rem); |
| line-height: 0.8; |
| opacity: 0.9; |
| pointer-events: none; |
| } |
|
|
| .q-open { |
| top: 0.15rem; |
| left: 0.55rem; |
| } |
|
|
| .q-close { |
| right: 0.7rem; |
| bottom: -0.35rem; |
| } |
|
|
| .prose p:last-child { |
| margin-bottom: 0; |
| } |
|
|
| .services { |
| background: var(--mist); |
| max-width: none; |
| padding-left: 0; |
| padding-right: 0; |
| } |
|
|
| .services header, |
| .services .grid { |
| max-width: 920px; |
| margin-left: auto; |
| margin-right: auto; |
| padding-left: 1.25rem; |
| padding-right: 1.25rem; |
| } |
|
|
| .services header { |
| text-align: center; |
| margin-bottom: 1.5rem; |
| } |
|
|
| .services header p { |
| max-width: 36rem; |
| margin-left: auto; |
| margin-right: auto; |
| } |
|
|
| .rule { |
| width: 3rem; |
| height: 2px; |
| background: var(--red); |
| margin: 0 auto 1rem; |
| } |
|
|
| .grid { |
| display: grid; |
| grid-template-columns: 1fr; |
| gap: 1rem; |
| } |
|
|
| @media (min-width: 720px) { |
| .grid { |
| grid-template-columns: repeat(3, 1fr); |
| } |
| } |
|
|
| article { |
| background: var(--white); |
| border: 1px solid rgba(10, 17, 114, 0.08); |
| box-shadow: 0 4px 24px rgba(10, 17, 114, 0.08); |
| border-radius: 1rem; |
| padding: 1.35rem 1.25rem 1.2rem; |
| border-top: 3px solid var(--red); |
| } |
|
|
| .cat { |
| display: inline-block; |
| font-size: 0.7rem; |
| font-weight: 700; |
| letter-spacing: 0.16em; |
| text-transform: uppercase; |
| color: var(--red); |
| margin-bottom: 0.4rem; |
| } |
|
|
| article p { |
| font-size: 0.95rem; |
| margin: 0; |
| } |
|
|
| footer { |
| text-align: center; |
| font-size: 0.95rem; |
| color: var(--body); |
| } |
|
|
| footer a { |
| color: var(--navy); |
| font-weight: 600; |
| } |
|
|
