.ss-main { display: block; background: var(--color-paper); } radial-gradient(circle at 90% 12%, rgba(184, 138, 68, 0.08), transparent 18rem), linear-gradient(180deg, var(--ss-bg, var(--ss-bg)) 0%, var(--ss-surface) 100%); } @media (max-width: 767.98px) { .ss-cta-footer-section { padding: 1.25rem 0.75rem; } } .hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: 1.5rem; } .btn-primary { display: inline-flex; justify-content: center; align-items: center; min-height: 48px; padding: .85rem 1.15rem; border-radius: 999px; font-weight: 850; text-decoration: none; } .btn-primary { background: #f97316; color: #fff; box-shadow: 0 12px 26px rgba(249, 115, 22, .24); } @media (max-width: 760px) { .hero-actions { display: grid; grid-template-columns: 1fr; } .btn-primary { width: 100%; } } :root { --ss-green: #116A42; --ss-dark: #211d18; --ss-ink: #211d18; --ss-muted: #756b5f; --ss-soft: #fffaf2; --ss-line: rgba(33, 29, 24, 0.12); --ss-card: #fffaf2; --ss-teal: #5f6f52; --ss-cyan: #b88a44; --ss-cream: #f7f3ec; --ss-border: rgba(33, 29, 24, .12); } body { color: var(--ss-ink); background: #f7f3ec; font-family: "Lexend", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.55; margin: 0; overflow-x: hidden; } #focus { scroll-margin-top: 84px; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .ss-hero-content h1 { font-family: var(--font-display, "Instrument Serif", Georgia, serif); font-size: clamp(2.5rem, 8vw, 4.5rem); line-height: 1.05; margin-bottom: 1.5rem; font-weight: 400; letter-spacing: -0.01em; } .ss-cta-footer-section { padding: clamp(1.5rem, 4vw, 3.25rem) 0.875rem; background: radial-gradient(circle at 10% 0%, rgba(40, 159, 161, 0.08), transparent 20rem), html, body { overflow-x: hidden; } body { padding-bottom: max(86px, env(safe-area-inset-bottom)); } @media (min-width: 769px) { body { padding-bottom: 0; } } body { text-rendering: optimizeLegibility; } .bio-hero { background: radial-gradient(900px 320px at 50% 0%, rgba(104, 150, 60, 0.12), transparent 70%), linear-gradient(180deg, #f8fbf4 0%, var(--ss-surface) 65%); } .page-bio .bio-hero .btn { min-height: 48px; } .bio-hero-copy { max-width: 40rem; } @keyframes pulseGlow { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(220, 53, 69, 0); } 50% { transform: scale(1.01); box-shadow: 0 0 0 10px rgba(220, 53, 69, 0.16); } } :root { --bg: #f7f2ea; --card: var(--ss-surface); --line: #e3d5c2; --text: #1b1b1b; --muted: #4c4c4c; --gold: #8c6a2e; --warn: #b4563d; --shadow: 0 14px 30px rgba(27, 20, 12, 0.12); --radius: 16px; --radius-lg: 24px; --max: 1000px; } * { box-sizing: border-box; } body { margin: 0; color: var(--text); background: radial-gradient(1200px 700px at 15% -10%, rgba(140, 106, 46, 0.18), transparent 60%), radial-gradient(900px 600px at 85% 10%, rgba(217, 176, 106, 0.18), transparent 55%), linear-gradient(180deg, #fbf8f2 0%, #f3ede4 100%); padding-bottom: 92px; } .brand { font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; margin-bottom: 14px; } .hero { border-radius: var(--radius-lg); background: linear-gradient(180deg, var(--ss-surface) 0%, #f3ede4 100%); } h1 { font-size: clamp(28px, 4vw, 44px); line-height: 1.08; margin: 0 0 10px; } h2 { font-size: clamp(21px, 3vw, 30px); margin: 0 0 10px; } h3 { font-size: 1.125rem; margin: 0 0 8px; } p { margin: 0 0 10px; } .lead { color: var(--muted); font-size: 1.125rem; line-height: 1.5; } @media (min-width: 992px) { main#main-content>section { padding-top: 2rem; padding-bottom: 2rem; } main#main-content>section+section { margin-top: 0; } } .ss-hero { background: radial-gradient(circle at top left, rgba(17, 106, 66, 0.10), transparent 34rem), linear-gradient(180deg, var(--ss-bg) 0%, var(--ss-surface) 100%); } html, body { max-width: 100%; overflow-x: clip; } @media (min-width: 992px) { [class*="mobile"][class*="action"]:not(body), [class*="mobile"][class*="cta"]:not(body) { display: none !important; visibility: hidden; pointer-events: none; } } @media (max-width: 767.98px) { body { padding-bottom: calc(84px + env(safe-area-inset-bottom)); } } @media (min-width: 768px) { body { padding-bottom: 0; } } img { display: block; max-width: 100%; } img { height: auto; } .ss-hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; } .ss-hero-actions .btn { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; } @media (max-width: 767.98px) { .ss-hero-actions .btn { width: 100%; } } padding: 0.6rem 0.95rem; line-height: 1.2; } } @media (max-width: 767.98px) and (max-height: 760px) { .ss-main>section:first-of-type :is(h1, .h1, .display-6) { font-size: clamp(1.4rem, 5.8vw, 1.8rem); } .ss-main>section:first-of-type :is(.lead, p, li) { font-size: clamp(0.84rem, 3.1vw, 0.92rem); line-height: 1.35; } .ss-main>section:first-of-type :is(.btn-primary) { font-size: clamp(0.84rem, 3vw, 0.92rem); padding: 0.54rem 0.88rem; } } :root { --ss-green: #116A42; --ss-teal: #289FA1; --ss-bg: #FBFAF8; --ss-text: #1F1712; --ss-muted: #4F433C; --ss-border: rgba(54, 43, 36, 0.14); --ss-radius: 18px; --ss-radius-sm: 12px; --ss-shadow-soft: 0 12px 28px rgba(31, 23, 18, 0.11); --ss-shell-max: 1100px; --ss-shell-pad: clamp(1rem, 2.4vw, 1.25rem); --ss-step-1: 8px; --ss-step-2: 16px; --ss-step-3: 24px; --ss-step-4: 32px; --ss-step-5: 48px; --ss-step-6: 64px; --ss-step-7: 96px; --ss-section-space: clamp(48px, 7vw, 72px); --ss-section-space-tight: clamp(36px, 5.2vw, 48px); --ss-h1: clamp(2.2rem, 5.6vw, 3rem); --ss-h2: clamp(1.6rem, 3.6vw, 2.2rem); --ss-h3: clamp(1.2rem, 2.2vw, 1.6rem); } body { background: var(--ss-bg); color: var(--ss-text); font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 1rem; line-height: 1.62; text-align: center; } main, .ss-main { background: radial-gradient(1000px 420px at 8% -4%, rgba(40, 159, 161, 0.09), transparent 58%), linear-gradient(180deg, #fcfaf7 0%, #f7f3ed 100%); } h1, .h1 { font-size: var(--ss-h1); line-height: 1.08; letter-spacing: -0.015em; } h2, .h2 { font-size: var(--ss-h2); line-height: 1.14; letter-spacing: -0.012em; } h3, .h3 { font-size: var(--ss-h3); line-height: 1.2; } p, li { color: var(--ss-muted); } .container { max-width: var(--ss-shell-max); margin-left: auto; margin-right: auto; padding-left: var(--ss-shell-pad); padding-right: var(--ss-shell-pad); } .btn { border-radius: 999px; font-weight: 700; letter-spacing: 0.01em; min-height: 46px; padding: 0.68rem 1.12rem; transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease, border-color 160ms ease; } .btn:hover { transform: translateY(-1px); } .btn-primary { background: var(--ss-green); border-color: var(--ss-green); color: #fff; box-shadow: 0 12px 24px rgba(17, 106, 66, 0.24); } .btn-primary:hover, .btn-primary:focus-visible { background: #bb4700; border-color: #bb4700; color: #fff; } img { display: block; margin-left: auto; margin-right: auto; } main img { border-radius: var(--ss-radius-sm); box-shadow: var(--ss-shadow-soft); } :root { --ss-font-size: clamp(16px, 0.35vw + 15px, 18px); --ss-leading: 1.65; --ss-prose-measure: 68ch; --ss-prose-gutter: clamp(16px, 3vw, 28px); --ss-anchor-offset: 88px; } html { -webkit-text-size-adjust: 100%; } body { font-size: var(--ss-font-size); line-height: var(--ss-leading); } h1, h2, h3 { line-height: 1.18; letter-spacing: -0.01em; text-wrap: balance; } h1 { line-height: 1.12; } p { margin-bottom: 0.95em; max-width: none; text-wrap: pretty; } a { text-decoration: underline; text-decoration-thickness: 0.08em; text-underline-offset: 0.16em; } a:hover { text-decoration-thickness: 0.12em; } body:not(.page-blog):not(.page-faq) .ss-main section>.container>p { max-width: var(--ss-prose-measure); } body { --ss-retro-ink: #1f1712; --ss-retro-paper: #f7f3ec; --ss-retro-panel: #fffaf2; --ss-retro-border: rgba(33, 29, 24, 0.18); --ss-retro-shadow: rgba(33, 29, 24, 0.16); background: radial-gradient(circle at 1px 1px, rgba(33, 29, 24, 0.03) 1px, transparent 1.5px) 0 0 / 18px 18px, var(--ss-retro-paper); } .ss-main { background: transparent; max-width: 1040px; margin-inline: auto; padding: 12px; } .ss-main>section { border: 1px solid var(--ss-retro-border); border-radius: 14px; box-shadow: 0 10px 26px var(--ss-retro-shadow); overflow: clip; margin-bottom: 14px; } .ss-main>section:not(.ss-hero):not([class*="bg-"]) { background: linear-gradient(#fff, #f7f2ed); } .ss-main>section:not(.ss-hero)::before { content: ""; display: block; height: 14px; background: linear-gradient(90deg, rgba(40, 159, 161, 0.3), rgba(0, 221, 224, 0.25)); border-bottom: 1px solid var(--ss-retro-border); } .ss-main>section>.container { padding-top: 10px; } .ss-main>section.ss-hero::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 14px; background: linear-gradient(90deg, rgba(40, 159, 161, 0.3), rgba(0, 221, 224, 0.25)); border-bottom: 1px solid var(--ss-retro-border); z-index: 2; pointer-events: none; } .btn-primary { border: 1px solid rgba(0, 0, 0, 0.18); background: linear-gradient(#fff, rgba(0, 221, 224, 0.22)); color: var(--ss-retro-ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 10px 18px rgba(0, 0, 0, 0.1); font-weight: 800; } .btn-primary:hover { background: linear-gradient(#fff, rgba(40, 159, 161, 0.26)); color: var(--ss-retro-ink); } @media (max-width: 767.98px) { .ss-main .row>[class*="col-"] { min-width: 0; } .ss-main .btn { max-width: 100%; white-space: normal; } } @media (max-width: 767.98px) { .ss-main>section:first-of-type { padding-top: clamp(12px, 2.8vh, 18px); padding-bottom: clamp(14px, 3.2vh, 22px); } .ss-main>section:first-of-type :is(h1, .h1, .display-6) { font-size: clamp(1.55rem, 6.4vw, 2rem); line-height: 1.08; } .ss-main>section:first-of-type :is(.lead, p, li) { font-size: clamp(0.9rem, 3.5vw, 0.98rem); line-height: 1.42; } .ss-main>section:first-of-type .small { font-size: clamp(0.74rem, 2.8vw, 0.82rem); line-height: 1.35; } .ss-main>section:first-of-type :is(.mb-4, .mb-3, .mb-2) { margin-bottom: 0.6rem; } .ss-main>section:first-of-type :is(.btn-primary) { font-size: clamp(0.9rem, 3.4vw, 0.97rem); .ss-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-bottom: 1.25rem; } .ss-hero-actions .btn { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; } @media (max-width: 575px) { .ss-hero-actions { align-items: stretch; } } main, .main { background: radial-gradient(1100px 420px at 20% -10%, rgba(40, 159, 161, 0.14), transparent 55%), radial-gradient(900px 360px at 90% 0%, rgba(0, 221, 224, 0.10), transparent 55%); } .container { max-width: var(--ss-max); } section, .section { padding-top: var(--ss-pad-y); padding-bottom: var(--ss-pad-y); } .py-5 { padding-top: 2.25rem; padding-bottom: 2.25rem; } ul { margin-bottom: 0.9rem; } li { margin-bottom: 0.35rem; } .card, .shadow-sm { border: 1px solid var(--ss-border); border-radius: var(--ss-radius-2); background: var(--ss-surface); box-shadow: var(--ss-shadow-1); } .card:hover { box-shadow: var(--ss-shadow-2); transform: translateY(-1px); transition: 180ms ease; } .bg-light { background: var(--ss-surface2); } img, .img-fluid { border-radius: var(--ss-radius-2); } .btn, .btn-primary { border-radius: 999px; } .btn { padding: 0.72rem 1.05rem; font-weight: 700; letter-spacing: 0.01em; } .btn-primary { background: var(--ss-teal); border-color: var(--ss-teal); color: #fff; box-shadow: 0 10px 22px rgba(40, 159, 161, 0.22); } .btn-primary:hover { background: var(--ss-slate); border-color: var(--ss-slate); } :root { --ss-accent: #5f6f52; --ss-accent-strong: #4e5d44; --ss-accent-soft: rgba(95, 111, 82, 0.1); --ss-conversion: #116A42; --ss-conversion-hover: #c94800; --ss-bg: #f7f3ec; --ss-surface: rgba(255, 250, 242, 0.92); --ss-surface-solid: #fffaf2; --ss-surface-alt: #efe8dc; --ss-text: #211d18; --ss-muted: #756b5f; --ss-border: rgba(33, 29, 24, 0.12); --ss-hairline: rgba(33, 29, 24, 0.1); --ss-shadow-soft: 0 14px 34px rgba(33, 29, 24, 0.09); --ss-ring: 0 0 0 3px rgba(184, 138, 68, 0.22); --ss-r1: 10px; --ss-r2: 16px; --ss-r3: 22px; --ss-max: 1160px; --ss-prose: 66ch; --ss-space-1: 8px; --ss-space-2: 16px; --ss-space-3: 24px; --ss-space-4: 32px; --ss-space-5: 48px; --ss-space-6: 64px; --ss-space-7: 96px; } body { background: var(--ss-bg); color: var(--ss-text); font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 1rem; line-height: 1.62; } p { max-width: var(--ss-prose); line-height: 1.65; color: var(--ss-muted); } h1, h2, h3 { font-family: "Instrument Serif", Georgia, "Times New Roman", serif; letter-spacing: -0.01em; color: var(--ss-text); } h1 { font-size: clamp(2.1rem, 3.6vw, 3.5rem); line-height: 1.05; margin: 0 0 var(--ss-space-2); } h2 { font-size: clamp(1.7rem, 2.5vw, 2.5rem); line-height: 1.12; margin: 0 0 var(--ss-space-2); } h3 { font-size: clamp(1.35rem, 1.9vw, 1.8rem); line-height: 1.18; margin: 0 0 12px; } .small, .text-uppercase.small { letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; } a { color: var(--ss-accent); } a:hover { color: var(--ss-accent-strong); } .ss-main { background: linear-gradient(180deg, #fbf8f3 0%, #f7f4ef 30%, #f4efe7 100%); } .container { max-width: var(--ss-max); } section, .section { padding-top: clamp(var(--ss-space-5), 6vw, var(--ss-space-6)); padding-bottom: clamp(var(--ss-space-5), 6vw, var(--ss-space-6)); } .btn { border-radius: 999px; font-weight: 600; letter-spacing: 0.01em; padding: 0.72rem 1.1rem; transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease, border-color 180ms ease, color 180ms ease; } .btn:hover { transform: translateY(-1px); } .btn-primary { background: var(--ss-conversion); border-color: var(--ss-conversion); color: #fff; box-shadow: 0 12px 24px rgba(220, 90, 18, 0.22); } .btn-primary:hover, .btn-primary:focus-visible { background: var(--ss-conversion-hover); border-color: var(--ss-conversion-hover); } .card { background: var(--ss-surface-solid); border: 1px solid var(--ss-border); border-radius: var(--ss-r2); box-shadow: var(--ss-shadow-soft); padding: clamp(18px, 2.6vw, 30px); } .card:hover { transform: translateY(-2px); } img, .img-fluid { border-radius: var(--ss-r2); border: 1px solid var(--ss-hairline); } .ss-hero { position: relative; min-height: clamp(440px, 56vw, 620px); border-bottom: 1px solid var(--ss-hairline); background: linear-gradient(180deg, rgba(17, 15, 13, 0.42), rgba(17, 15, 13, 0.66)), url("/assets/images/programs-hero-20260215.2bd0b5.jpg") center 34%/cover no-repeat; background: linear-gradient(180deg, rgba(17, 15, 13, 0.42), rgba(17, 15, 13, 0.66)), image-set(url("/assets/images/programs-hero-20260215.fbf13a.webp") type("image/webp"), url("/assets/images/programs-hero-20260215.2bd0b5.jpg") type("image/jpeg")) center 34%/cover no-repeat; } @media (max-width: 767px) { .ss-hero { background-position: center 28%; } } .ss-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.09)); pointer-events: none; } .ss-hero>.container { position: relative; z-index: 1; } .ss-hero .text-muted { color: #53463d; } .bg-light { background: var(--ss-surface-alt); } body.page-bio .ss-mobile-sticky { position: fixed; bottom: 0; left: 0; right: 0; z-index: 1050; display: flex; align-items: center; justify-content: center; gap: 0.75rem; padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom)); background: rgba(251, 250, 248, 0.96); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--ss-border, rgba(54, 43, 36, 0.14)); box-shadow: 0 -4px 20px rgba(54, 43, 36, 0.08); } body.page-bio .ss-mobile-sticky a { flex: 1; text-align: center; justify-content: center; padding: 0.75rem 1rem; font-size: 0.95rem; font-weight: 700; border-radius: 999px; text-decoration: none; }