/* ===============================
GLOBAL VARIABLES – TYPOGRAPHY & DESIGN TOKENS
================================= */
:root {
/* Font Variables */
--font-heading: 'Work Sans', sans-serif; /* Added for consistent heading calls */
--font-heading-h1: 'Work Sans', sans-serif;
--font-heading-h2: 'Work Sans', sans-serif;
--font-heading-h3: 'Work Sans', sans-serif;
--font-heading-h4: 'Work Sans', sans-serif;
--font-eyebrow: 'Work Sans', sans-serif;
--font-body: 'Karla', sans-serif;
/* Font Sizes — FLUID (revised so desktop actually scales) */
--text-h1: clamp(34px, 4.2vw, 60px); /* was max 52px */
--text-h2: clamp(26px, 3vw, 44px); /* was max 36px */
--text-h3: clamp(20px, 2.2vw, 26px); /* was max 24px */
--text-h4: clamp(18px, 1.8vw, 22px); /* was max 20px */
--text-body-lg: clamp(16px, 1.6vw, 19px);
--text-body: clamp(15px, 1.4vw, 17px);
--text-caption: clamp(13px, 1.2vw, 14px);
/* Line Heights */
--line-heading: 1.2;
--line-body: 1.6;
/* Base Colors */
--color-white: #ffffff;
--color-light: #f0f0f0;
--color-bg: #829AA0;
--color-bg-light: #E6EDF0;
--color-text: #3C5158;
--color-accent: #436D7D; /* Darkened slightly for AA compliance */
--color-pale-teal: #CDE3E6;
--color-bg-neutral: #f7f9f9;
/* Accent Shades */
--color-accent-200: #B6C9D0;
--color-accent-300: #9FB6C1;
--color-accent-500: #4B7A8B;
--color-accent-700: #395B68;
--color-accent-800: #2F4854;
--color-accent-900: #243940;
/* Gold Palette */
--color-gold: #866827;
--color-gold-dark: #5C4A1F;
--color-gold-bright: #D69E2E;
/* Spacing */
--space-lg: 180px;
--space-md: 60px;
/* Removed --space-sm (unused) */
}
/* ===============================
Utility: Content Width Container
Reusable container for centering
================================= */
.content-wrap {
max-width: 800px;
margin-left: auto;
margin-right: auto;
padding: 0 1.5rem;
text-align: left; /* Keeps body text aligned left by default */
}
.content-wrap h1,
.content-wrap h2,
.content-wrap h3,
.content-wrap h4 {
margin: 0 auto 1rem;
text-align: center; /* Optional: center all headings by default */
}
/* 🧠 NOTE:
Use <div class="content-wrap">…</div> around any custom HTML code blocks
to enforce consistent layout, max-width, and center-aligned headings.
Does NOT break legacy content — only applies when added.
*/
/* ===============================
GLOBAL TYPOGRAPHY STYLES + HEADINGS
================================= */
body,
p {
font-family: var(--font-body);
font-size: var(--text-body);
line-height: var(--line-body);
color: var(--color-text);
}
/* Base heading styles for all h1–h4 */
h1,
h2,
h3,
h4 {
line-height: var(--line-heading);
margin-top: 0;
margin-bottom: 0.5rem;
color: var(--color-text);
}
/* h5 used for kicker — inherit to align with global heading line-height */
h5 {
line-height: var(--line-heading);
}
/* H1 – large, left by default */
h1 {
font-family: var(--font-heading-h1);
font-size: var(--text-h1);
text-align: left; /* was center */
max-width: none;
}
h2 {
font-family: var(--font-heading-h2);
font-size: var(--text-h2);
text-align: left; /* changed from center */
max-width: none;
}
/* H3 & H4 keep body-aligned unless changed later */
h3 {
font-family: var(--font-heading-h3);
font-size: var(--text-h3);
}
h4 {
font-family: var(--font-heading-h4);
font-size: var(--text-h4);
}
/* Disable hyphenation and forced breaks sitewide */
html, body, h1, h2, h3, h4, p {
-webkit-hyphens: none;
-ms-hyphens: none;
hyphens: none;
word-break: normal;
overflow-wrap: normal;
}
/* Mobile safeguard for long headings */
@media (max-width: 480px) {
h1, h2 {
font-size: clamp(22px, 6vw, var(--text-h2));
white-space: normal; /* allow wrap if absolutely necessary */
}
}
/* ===============================
GLOBAL KICKER STYLE
Default: Left-aligned for better text flow
================================= */
.section-kicker {
font-family: var(--font-eyebrow); /* Or var(--font-heading) if preferred */
font-size: var(--text-h5); /* or var(--text-h4) for slightly larger */
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--color-accent-300);
line-height: 1.2; /* ← This is the fix */
margin-top: 0;
margin-bottom: 0.4rem;
text-align: left;
}
/* ===============================
SECTION BACKGROUND THEMES — WCAG-safe
================================= */
/* Light background = dark text */
.section-light {
background-color: var(--color-bg-light);
color: var(--color-text);
}
.section-light :is(h1, h2, h3, h4, p, .section-kicker) { color: var(--color-text); }
.section-light .section-kicker { color: var(--color-accent-300); }
/* Dark background = white text (use darker teal for AA+) */
.section-dark {
/* was var(--color-bg) #829AA0 (fails) */
background-color: var(--color-accent-800); /* #2F4854 passes 9.65:1 */
color: var(--color-white);
}
.section-dark :is(h1, h2, h3, h4, p, .section-kicker) { color: var(--color-white); }
/* Alt background = medium accent text */
.section-alt {
background-color: var(--color-light);
color: var(--color-accent);
}
.section-alt :is(h1, h2, h3, h4, p, .section-kicker) { color: var(--color-accent); }
/* Gold heading overrides */
.section-light .gold-heading,
.section-alt .gold-heading { color: var(--color-gold); }
.section-dark .gold-heading { color: var(--color-gold-dark); }
/* ===============================
HEADER NAVIGATION – DROPDOWN MENU
With subtle grow + soft theme-aware highlight
================================= */
.Header-nav-folder {
background-color: hsla(0, 0%, 100%, 0.92);
backdrop-filter: blur(4px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.Header-nav-folder-item {
padding: 0.75em 1.25em;
font-weight: 500;
color: var(--color-text);
transition: color 200ms ease, transform 150ms ease, background-color 200ms ease;
}
/* Light/Default dropdown background highlight */
.Header-nav-folder-item:hover,
.Header-nav-folder-item:focus {
color: var(--color-accent);
background-color: rgba(75, 122, 139, 0.08); /* soft teal tint from accent */
transform: scale(1.03);
}
/* Dark section dropdown background highlight */
.section-dark .Header-nav-folder-item:hover,
.section-dark .Header-nav-folder-item:focus {
color: var(--color-accent);
background-color: rgba(255, 255, 255, 0.12); /* soft white tint */
transform: scale(1.03);
}
.Header-nav-folder-item:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
}
/* ===============================
RESPONSIVE LOGO SIZING (fluid)
================================= */
.Header-branding img {
height: auto;
width: auto;
max-width: none;
max-height: clamp(48px, 8.5vw, 72px);
}
/* On scroll (if header compresses), make it a touch smaller */
.Header--scrolled .Header-branding img {
max-height: clamp(40px, 7vw, 60px);
}
/* Tablet breakpoint — expand slightly if header spacing is tight */
@media (max-width: 1024px) {
.Header-branding img {
max-height: clamp(52px, 9vw, 68px);
}
}
/* Mobile breakpoint — boost legibility */
@media (max-width: 480px) {
.Header-branding img {
max-height: clamp(56px, 11vw, 72px);
}
}
/* ===============================
COMPONENT: Glass Card (global)
================================= */
.glass-card {
background: rgba(255, 255, 255, 0.72);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 16px;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
padding: 2.5rem 2rem;
max-width: 800px;
margin: 0 auto 2.5rem;
font-family: var(--font-body);
font-size: var(--text-body);
color: var(--color-text);
line-height: var(--line-body);
position: relative;
overflow: hidden;
z-index: 1;
transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.25s ease;
transform: translateY(0);
}
.glass-card:hover {
background: rgba(255, 255, 255, 0.92);
transform: translateY(-6px) scale(1.01);
box-shadow: 0 16px 36px rgba(0, 0, 0, 0.12);
}
/* ===============================
HERO — VERTICALLY CENTERED TEXT
================================= */
#hero {
position: relative;
min-height: 680px; /* desktop hero height */
background-size: cover;
background-position: center;
color: var(--color-white);
}
/* Content wrapper inside hero */
#hero .hero-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
width: 100%;
max-width: 900px;
padding: 0 1rem;
}
#hero h1 {
font-family: var(--font-heading);
font-size: var(--text-h1);
font-weight: 700;
margin-bottom: 20px;
text-shadow: 0 4px 12px rgba(0,0,0,0.4);
color: var(--color-white) !important;
text-align: center; /* ✅ THIS LINE IS REQUIRED */
}
#hero p {
font-family: var(--font-body);
font-size: var(--text-body-lg);
margin-bottom: 36px; /* consistent breathing room before buttons */
text-shadow: 0 2px 6px rgba(0,0,0,0.35);
}
/* Tablet adjustments */
@media (max-width: 1024px) {
#hero {
min-height: 580px;
}
}
/* Mobile adjustments — push text slightly lower */
@media (max-width: 768px) {
#hero {
min-height: 500px;
}
#hero .hero-text {
top: 54%;
}
}
/* ===============================
GLOBAL BUTTON SYSTEM
================================= */
/* Base */
.button,
.sqs-block-button-element--small,
.sqs-block-button-element--medium,
.sqs-block-button-element--large {
display: inline-block;
font-family: var(--font-body);
font-weight: 500;
font-size: 16px;
line-height: 1.2;
border-radius: 999px; /* pill shape */
text-align: center;
text-decoration: none;
padding: 0.75em 1.6em;
cursor: pointer;
transition: all 0.3s ease;
border: 1.5px solid transparent;
}
/* Large variant typography */
.sqs-block-button-element--large,
.button.is-large {
font-family: var(--font-heading);
font-weight: 600;
padding: 16px 32px;
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* ===============================
BUTTON VARIANTS
================================= */
/* Gold (Primary) */
.button.is-gold,
.sqs-block-button-element--large.is-gold {
background-color: var(--color-gold-bright);
color: var(--color-white);
border-color: var(--color-gold-bright);
}
.button.is-gold:hover,
.sqs-block-button-element--large.is-gold:hover {
background-color: var(--color-white);
color: var(--color-gold-bright);
border-color: var(--color-gold-bright);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}
/* Secondary (Outline – Light Section) */
.button.is-secondary,
.sqs-block-button-element--large.is-secondary {
background-color: transparent;
color: var(--color-accent);
border-color: var(--color-accent);
}
.button.is-secondary:hover,
.sqs-block-button-element--large.is-secondary:hover {
background-color: var(--color-accent);
color: var(--color-white);
}
/* Secondary (Outline – Dark Section) */
.section-dark .button.is-secondary,
.section-dark .sqs-block-button-element--large.is-secondary {
background-color: transparent;
color: var(--color-white);
border-color: var(--color-white);
}
.section-dark .button.is-secondary:hover,
.section-dark .sqs-block-button-element--large.is-secondary:hover {
background-color: var(--color-white);
color: var(--color-accent);
}
/* ===============================
HERO BUTTON OVERRIDES
================================= */
/* Gold (Primary in Hero) */
#hero .button.is-gold {
background-color: var(--color-gold-bright) !important;
color: var(--color-white) !important;
border-color: var(--color-gold-bright) !important;
}
#hero .button.is-gold:hover {
background-color: var(--color-white) !important;
color: var(--color-gold-bright) !important;
border-color: var(--color-gold-bright) !important;
}
/* Secondary (Outline in Hero) */
#hero .button.is-secondary {
background-color: transparent !important;
color: var(--color-white) !important;
border-color: var(--color-white) !important;
}
#hero .button.is-secondary:hover {
background-color: var(--color-white) !important;
color: var(--color-accent) !important;
}
/* ===============================
HERO TEXT COLOR OVERRIDES
================================= */
#hero h1,
#hero p {
color: var(--color-white) !important;
}
/* ===============================
BUTTON GROUP LAYOUT
================================= */
.button-group {
display: flex;
gap: 1.25rem;
justify-content: center;
flex-wrap: wrap;
}
/* ===============================
MOBILE TWEAKS
================================= */
@media screen and (max-width: 480px) {
.button {
letter-spacing: 0.5px;
font-size: 0.95rem;
white-space: nowrap; /* prevent wrapping */
}
}
/* ===============================
INTRO TEXT — Desktop 2-col; stack at ≤1024px
================================= */
#intro-text {
padding: clamp(48px, 6vw, 88px) 1.5rem;
}
/* Base: single column (good default) */
#intro-text .intro-grid {
display: grid;
grid-template-columns: 1fr;
gap: clamp(20px, 3vw, 48px);
align-items: start;
}
/* Desktop: 2 columns, video left / text right */
@media (min-width: 1025px) {
#intro-text .intro-grid {
grid-template-columns: 1.1fr 1fr;
}
/* optional: control order if you add classes in HTML */
#intro-text .intro-media { order: 1; }
#intro-text .intro-copy { order: 2; }
}
/* Neutralize Brine floats/widths so tablet actually stacks */
@media (max-width: 1024px) {
#intro-text .sqs-row,
#intro-text .content-wrapper,
#intro-text .content-inner { display: block !important; }
#intro-text .sqs-row [class*="sqs-col"],
#intro-text .sqs-row .col,
#intro-text .sqs-row [class*="span-"] {
width: 100% !important;
max-width: none !important;
float: none !important;
flex: 0 0 100% !important;
clear: both !important;
}
/* tighten spacing between stacked blocks */
#intro-text .sqs-row [class*="sqs-col"] + [class*="sqs-col"] {
margin-top: clamp(20px, 3.5vw, 28px) !important;
}
#intro-text .sqs-block { padding-left: 0 !important; padding-right: 0 !important; }
}
/* Make code blocks look like normal text blocks in this section */
#intro-text .sqs-block-code .sqs-block-content {
background: transparent !important;
padding: 0 !important;
border: 0 !important;
box-shadow: none !important;
}
/* Media niceties for embeds */
#intro-text .intro-media :is(iframe, video, img) {
width: 100%;
height: auto;
border-radius: 12px;
display: block;
}
/* ===============================
INTRO SECTION — Dark Background + WCAG Text
================================= */
#intro-text {
background-color: var(--color-bg); /* dark teal background */
color: var(--color-pale-teal); /* default light text */
padding: clamp(64px, 8vw, 96px) 1.5rem;
text-align: left;
}
/* SECTION KICKER */
#intro-text .section-kicker {
font-family: var(--font-eyebrow);
font-size: var(--text-h5);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--color-pale-teal);
margin-bottom: 0.5rem;
display: block;
}
/* ===============================
MAIN HEADING – #intro-text
================================= */
#intro-text .intro-heading {
position: relative;
font-family: var(--font-heading-h2);
font-size: var(--text-h2);
font-weight: 600;
letter-spacing: 0.005em;
text-align: center;
line-height: 1.3;
white-space: normal;
margin: 0 auto 1.5rem;
max-width: 100%;
color: var(--color-pale-teal);
}
/* Decorative line above heading */
#intro-text .intro-heading::before {
content: "";
display: block;
width: 40px;
height: 2px;
margin: 0 auto 1rem;
background-color: var(--color-pale-teal);
opacity: 0.5;
}
/* RESPONSIVE: Hide video/image on tablet and down */
@media (max-width: 1024px) {
#intro-text .sqs-block-image {
display: none !important;
}
}
/* ===============================
#about-summary section on home page
================================= */
#about-summary .Index-page-content::before {
content: '';
position: absolute;
inset: 0;
background: rgba(255, 255, 255, 0.6); /* Light overlay for background image */
z-index: 0;
pointer-events: none;
}
/* Optional: constrain text block layout */
#about-summary .sqs-block-content {
/* Remove individual max-width styling here */
/* Now handled by .content-wrap */
}
/* ===============================
SECTION: STORY PREVIEW (THE DEEPER WHY)
Why Mindful Coaching + Quote
================================= */
/* Divider + Kicker Wrapper */
.section-kicker-wrapper {
margin-bottom: clamp(16px, 3vw, 28px);
text-align: left;
}
/* Horizontal Divider Line */
.section-divider {
width: 40px;
height: 2px;
background-color: var(--color-gold);
opacity: 0.5;
margin: 0 0 0.75rem 0;
}
/* Kicker Text Styling */
.section-kicker {
font-family: var(--font-eyebrow);
font-size: var(--text-h5);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--color-accent-300);
margin: 0;
line-height: var(--line-heading);
display: block;
text-align: left;
}
/* Ensure everything inside testimonial-header aligns left */
.testimonial-header {
text-align: left;
}
/* Divider + Kicker Wrapper */
.testimonial-header .section-kicker-wrapper {
margin-bottom: 1rem;
}
/* Horizontal Divider (Gold Line) */
.testimonial-header .section-divider {
width: 40px;
height: 2px;
background-color: var(--color-gold);
opacity: 0.5;
margin-bottom: 0.75rem;
}
/* Kicker Text (WHAT CLIENTS SAY) */
.testimonial-header .section-kicker {
font-family: var(--font-eyebrow);
font-size: var(--text-h5);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--color-accent-300);
margin: 0;
line-height: var(--line-heading);
text-align: left;
}
/* ===============================
TESTIMONIAL LAYOUT – FLEX, RESPONSIVE
================================= */
/* Center the kicker only in testimonial section */
#testimonial .section-kicker {
text-align: center;
}
/* Testimonial row layout - stacked by default */
.testimonial-row {
display: flex;
flex-direction: column;
gap: 2rem;
}
/* Two columns only on desktop (1024px and up) */
@media (min-width: 1024px) {
.testimonial-row {
flex-direction: row;
align-items: stretch; /* equal heights */
}
}
/* Card styles */
.testimonial-block {
flex: 1; /* equal width when side-by-side */
display: flex;
flex-direction: column;
justify-content: flex-start;
}
/* Keep vertical rhythm between icon, kicker, and heading */
#testimonial .section-kicker {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
#testimonial h2 {
margin-top: 0;
margin-bottom: 1rem; /* gap before cards */
}
/* Make sure testimonial cards align at the top in all layouts */
.testimonial-row {
align-items: flex-start; /* overrides stretch pushing effect */
}
/* ===============================
CERTIFICATIONS SECTION
================================= */
#certifications {
padding: clamp(48px, 6vw, 88px) 1.5rem;
}
#certifications .glass-card {
max-width: 900px;
margin: 0 auto;
text-align: left; /* keep lists aligned */
padding: 3rem 2rem; /* desktop/tablet breathing room */
}
/* Eyebrow + title */
#certifications .section-kicker {
margin-bottom: 8px; /* even gap before title */
text-align: center;
}
#certifications .section-title {
font-weight: 600; /* match other H2s */
margin-bottom: 16px; /* even gap before list */
text-align: center;
}
/* List */
#certifications ul {
margin: 0;
padding-left: 1.25rem;
}
#certifications li {
margin-bottom: 12px; /* consistent spacing between list items */
}
/* -------- Mobile refinements (wider content, same nice gutters) -------- */
@media (max-width: 640px) {
#certifications .glass-card {
padding: 2rem 1.25rem; /* was 3rem 2rem — reduces side padding only */
}
#certifications ul {
max-width: none; /* let list use full card width */
padding-left: 1rem; /* slightly tighter bullet indent */
}
}
/* ===============================
Footer CSS — Elevated
=============================== */
/* Footer spacing cleanup */
.custom-footer h2 {
margin-bottom: 0.5rem;
text-align: center;
}
.custom-footer p {
margin-top: 0;
}
/* Bottom padding on entire footer section */
.Footer-blocks--bottom {
padding-bottom: 2.5rem !important;
}
/* Social icon list layout */
.sqs-svg-icon--list {
display: flex;
justify-content: center;
gap: 1.5rem;
margin-top: 1.5rem;
}
/* Icon wrapper box */
.sqs-svg-icon--wrapper {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
overflow: visible !important;
}
/* Icon appearance + scaling */
.sqs-svg-icon--wrapper svg {
width: 24px;
height: 24px;
display: block;
overflow: visible !important;
max-width: 100%;
max-height: 100%;
transition: transform 0.2s ease;
}
/* Hover interaction */
.sqs-svg-icon--wrapper:hover svg {
transform: scale(1.1);
}
/* ===============================
LEADERSHIP SECTION – VIDEO, TEXT, CTA
================================= */
/* Section ID wrapper */
#leadership-video {
background-color: var(--color-bg);
color: var(--color-white);
padding: var(--space-md) 1rem var(--space-lg);
}
/* --- Video block styling --- */
#leadership-video .sqs-block-video {
max-width: 720px;
margin: 0 auto 3rem;
padding: 0 1rem;
}
#leadership-video iframe,
#leadership-video video {
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
border-radius: 12px;
box-shadow: 0 6px 28px rgba(0, 0, 0, 0.3);
}
/* --- Headline --- */
#leadership-video .section-headline {
font-family: var(--font-heading-h2);
font-size: var(--text-h2);
font-weight: 600;
text-align: center;
letter-spacing: 0.05em;
margin-bottom: 2rem;
color: var(--color-white);
}
/* --- Subsections --- */
#leadership-video .subsection-block {
max-width: 700px;
margin: 0 auto 2.5rem;
padding: 0 1rem;
}
#leadership-video .subsection-block h4 {
font-family: var(--font-heading);
font-size: var(--text-h4);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 1rem;
color: var(--color-white);
}
#leadership-video .subsection-block p {
font-family: var(--font-body);
font-size: var(--text-body);
line-height: var(--line-body);
color: rgba(255, 255, 255, 0.92);
margin-bottom: 1.25rem;
}
#leadership-video .subsection-block em {
font-style: italic;
color: rgba(255, 255, 255, 0.92);
}
/* --- CTA Button at Bottom --- */
#leadership-video .sqs-block-button-container {
text-align: center;
margin-top: 3rem;
}
#leadership-video .sqs-block-button-element--large {
background-color: transparent;
color: var(--color-white);
border: 2px solid var(--color-white);
}
#leadership-video .sqs-block-button-element--large:hover {
background-color: var(--color-white);
color: var(--color-bg);
}
.pull-quote.has-quotes {
font-size: clamp(32px, 4vw, 40px); /* bigger */
font-weight: 400; /* lighter for elegance */
font-family: var(--font-heading-h2); /* more hero presence */
text-align: center;
max-width: 800px;
margin: 4rem auto;
line-height: 1.3;
letter-spacing: -0.005em;
position: relative;
}
.pull-quote.has-quotes::before,
.pull-quote.has-quotes::after {
font-size: 200px; /* slightly larger ghost quotes */
color: rgba(75, 122, 139, 0.04); /* even softer */
}
/* ===============================
STORY PREVIEW — airy turquoise pull quote
================================= */
#story-preview .pull-quote.has-quotes {
font-family: var(--font-heading-h2);
font-weight: 400; /* lighter weight for softer look */
font-size: clamp(32px, 4.4vw, 44px); /* keep your current size */
line-height: 1.25;
letter-spacing: 0.005em;
color: rgba(75, 122, 139, 0.75); /* turquoise w/ subtle transparency */
max-width: 900px;
margin: clamp(40px, 6vw, 72px) auto;
text-align: center;
position: relative;
z-index: 1;
}
/* Ghost quotes */
#story-preview .pull-quote.has-quotes::before,
#story-preview .pull-quote.has-quotes::after {
font-family: Georgia, serif;
font-size: clamp(120px, 18vw, 220px);
color: rgba(75, 122, 139, 0.05); /* lighter ghost teal */
position: absolute;
z-index: -1;
}
#story-preview .pull-quote.has-quotes::before {
content: "“";
left: -0.5em;
top: -0.4em;
}
#story-preview .pull-quote.has-quotes::after {
content: "”";
right: -0.5em;
bottom: -0.4em;
}
/* ===============================
NEWSLETTER — Glass Card + Responsive Layout
Target: Squarespace Newsletter Block inside #newsletter-signup
================================= */
#newsletter-signup {
/* section padding (desktop) */
padding: 80px 24px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
text-align: center;
}
/* Glass card wrapper around the rendered newsletter block */
#newsletter-signup .sqs-block-newsletter {
background: rgba(255, 255, 255, 0.78);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.28);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
max-width: 1120px;
margin: 0 auto;
padding: 48px 40px;
}
/* Headline + lead copy – always take full width to avoid clipping */
#newsletter-signup h2,
#newsletter-signup p {
flex: 1 1 100%;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#newsletter-signup h2 {
font-family: var(--font-heading-h2);
font-size: var(--text-h2);
font-weight: 500; /* keep consistent with other H2s */
letter-spacing: -0.01em;
line-height: 1.2;
color: var(--color-text);
margin-bottom: 10px;
white-space: normal; /* never force single line */
}
#newsletter-signup p {
font-family: var(--font-body);
font-size: var(--text-body);
color: var(--color-text);
max-width: 780px;
margin-bottom: 28px;
}
/* Form row – inline on desktop, wraps safely, stacks on tablet/mobile */
#newsletter-signup .newsletter-form {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
flex-wrap: wrap; /* prevents squeezing the title */
}
/* Inputs */
#newsletter-signup input[type="text"],
#newsletter-signup input[type="email"] {
appearance: none;
-webkit-appearance: none;
font-family: var(--font-body);
font-size: var(--text-body);
line-height: 1.2;
padding: 13px 16px;
min-height: 48px;
border-radius: 10px;
border: 1px solid #cfd7da;
background: #fff;
color: var(--color-text);
width: clamp(260px, 34vw, 420px);
box-sizing: border-box;
}
#newsletter-signup input::placeholder {
color: rgba(60,81,88,0.6);
}
/* Submit button */
#newsletter-signup input[type="submit"] {
font-family: var(--font-body);
font-size: var(--text-body);
font-weight: 600;
padding: 13px 22px;
min-height: 48px;
border-radius: 10px;
border: 0;
cursor: pointer;
transition: transform 120ms ease, box-shadow 160ms ease, background 160ms ease, color 160ms ease;
background-color: var(--color-accent);
color: var(--color-white);
box-shadow: 0 4px 12px rgba(0,0,0,0.10);
}
#newsletter-signup input[type="submit"]:hover {
transform: translateY(-1px);
background-color: var(--color-accent-700);
box-shadow: 0 8px 18px rgba(0,0,0,0.12);
}
/* tiny legal/subtext */
#newsletter-signup .newsletter-block-subtext {
font-size: var(--text-caption);
color: var(--color-text);
margin-top: 16px;
opacity: 0.9;
}
/* ===============================
RESPONSIVE TUNING
================================= */
/* Tablet: stack inputs, keep comfortable padding */
@media (max-width: 1024px) {
#newsletter-signup { padding: 64px 20px; }
#newsletter-signup .sqs-block-newsletter {
padding: 40px 28px;
max-width: 900px;
}
#newsletter-signup .newsletter-form {
flex-direction: column;
align-items: center;
gap: 12px;
}
#newsletter-signup input[type="text"],
#newsletter-signup input[type="email"],
#newsletter-signup input[type="submit"] {
width: min(560px, 100%);
}
}
/* Mobile: tighter top/bottom, full‑width fields */
@media (max-width: 640px) {
#newsletter-signup { padding: 44px 16px; }
#newsletter-signup .sqs-block-newsletter {
padding: 28px 18px;
border-radius: 14px;
}
#newsletter-signup h2 { margin-bottom: 8px; }
#newsletter-signup p { margin-bottom: 20px; }
#newsletter-signup input[type="text"],
#newsletter-signup input[type="email"],
#newsletter-signup input[type="submit"] {
width: 100%;
}
}
/* ===============================
CONTACT PAGE STYLING
================================= */
/* Wrapper + Heading */
.contact-intro-wrapper {
padding: 2rem 1rem;
max-width: 900px;
margin: 0 auto;
}
.contact-heading,
.contact-intro-wrapper h1.contact-heading {
font-size: var(--text-h2);
font-family: var(--font-heading);
color: var(--color-text);
margin-bottom: 1.5rem;
text-align: left;
}
/* Intro Text */
.contact-intro {
font-size: var(--text-body);
font-family: var(--font-body);
line-height: var(--line-body);
color: var(--color-text);
}
.contact-intro p {
margin-bottom: 1.5rem;
}
/* Links */
.contact-link,
.contact-email {
color: var(--color-accent);
text-decoration: underline;
transition: color 0.3s ease;
}
.contact-link:hover,
.contact-email:hover {
color: var(--color-accent-200);
text-decoration: none;
}
/* Form Block Padding */
#intro .sqs-block.form-block {
padding: 0 2rem;
box-sizing: border-box;
}
@media (max-width: 768px) {
#intro .sqs-block.form-block {
padding: 1rem;
}
}
/* Success Message */
.form-success-message {
max-width: 600px;
margin: 2rem auto;
text-align: center;
font-size: var(--text-body);
color: var(--color-text);
}
/* ===============================
COACHING PAGE – INTRO SECTION
Matches overall site intro patterns
================================= */
.coaching-intro {
padding: clamp(64px, 8vw, 96px) 1.5rem;
max-width: 900px;
margin: 0 auto;
text-align: left;
background-color: #ffffff !important;
position: relative;
}
.coaching-intro::after {
content: "";
display: block;
width: 100%;
max-width: 1200px;
height: 1px;
background-color: var(--color-border, #e1e5e4);
margin: clamp(48px, 6vw, 72px) auto 0;
}
.coaching-intro .intro-divider {
width: 40px;
height: 2px;
background-color: var(--color-gold);
margin-bottom: 1rem;
}
.coaching-intro .eyebrow {
font: 600 var(--text-h4) var(--font-eyebrow);
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--color-accent-300);
margin-bottom: 0.75rem;
}
.coaching-intro h1 {
font: 600 var(--text-h1)/1.2 var(--font-heading);
color: var(--color-accent);
margin-bottom: 1rem;
}
.coaching-intro .subhead {
font: var(--text-body)/var(--line-body) var(--font-body);
color: var(--color-text);
max-width: 700px;
}
/* ===============================
COACHING – CARD GRID & BLURB
================================= */
.intro-blurb {
text-align: center;
margin: 0 auto clamp(32px, 5vw, 64px);
max-width: 800px;
}
.card-grid-wrap {
display: grid;
gap: var(--space-lg);
padding: clamp(64px, 8vw, 96px) 1.5rem;
max-width: 1200px;
margin: 0 auto;
}
.card-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-md);
}
.card-stack {
display: flex;
justify-content: center;
margin-top: var(--space-lg);
}
.card {
background-color: var(--color-bg-alt);
border-radius: var(--radius-lg);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
padding: clamp(32px, 4vw, 48px);
font: var(--text-body)/var(--line-body) var(--font-body);
color: var(--color-text);
}
.card h4 {
font: 600 var(--text-h4) var(--font-heading);
color: var(--color-accent);
margin-bottom: 1rem;
}
.card ul {
padding-left: 1.25rem;
list-style: disc;
}
.card ul li {
margin-bottom: 1rem;
}
/* ===============================
COACHING – REFLECTION CTA
================================= */
.coaching-reflection {
text-align: center;
padding: 0 1.5rem;
max-width: 700px;
margin: clamp(48px, 8vw, 96px) auto;
}
.coaching-reflection h3 {
font: 600 var(--text-h3) var(--font-heading);
color: var(--color-accent);
margin-bottom: 1rem;
}
.coaching-reflection p {
font: var(--text-body)/var(--line-body) var(--font-body);
color: var(--color-text);
margin-bottom: 1.25rem;
}
.coaching-reflection a {
color: var(--color-accent);
text-decoration: underline;
font-weight: 500;
transition: color 0.3s ease;
}
.coaching-reflection a:hover {
color: var(--color-accent-300);
text-decoration: none;
}
/* ======================================
COACHING OPTIONS – SHARED STYLES
====================================== */
.coaching-options {
background-color: var(--color-bg-light);
padding: clamp(64px, 8vw, 96px) 1.5rem;
}
.coaching-block {
max-width: 800px;
margin: 0 auto 64px;
padding: clamp(32px, 5vw, 48px);
background: #e4eff2;
border-radius: 12px;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
transition: background 0.3s ease;
}
.coaching-block.alt {
background: #dbe7ea;
}
.session-title {
font-family: var(--font-heading);
font-size: var(--text-h2);
font-weight: 600;
color: var(--color-accent);
margin-bottom: 1rem;
}
.session-eyebrow {
font-size: var(--text-meta);
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--color-accent-300);
margin-bottom: 1rem;
}
.session-list {
padding-left: 1.5rem;
margin-bottom: 1.25rem;
}
.session-list li {
font-size: var(--text-body);
font-family: var(--font-body);
color: var(--color-text);
line-height: var(--line-body);
margin-bottom: 0.75rem;
}
.session-highlight {
font-weight: 600;
color: var(--color-accent-700);
margin-bottom: 1.25rem;
display: block;
}
.coaching-block p {
font-family: var(--font-body);
font-size: var(--text-body);
line-height: var(--line-body);
color: var(--color-text);
margin-bottom: 1.25rem;
}
@media (max-width: 768px) {
.session-title {
font-size: var(--text-h3);
}
.coaching-block {
margin-bottom: 48px;
}
.coaching-block p,
.session-list li {
font-size: 1rem;
}
}
.team-coaching-section {
padding: clamp(64px, 8vw, 96px) 1.5rem;
}
.section-subhead {
font-family: var(--font-heading);
font-size: var(--text-h3);
font-weight: 600;
margin-bottom: 1rem;
color: var(--color-accent);
}
.section-list {
padding-left: 1rem;
margin-bottom: 1.5rem;
color: var(--color-text);
line-height: var(--line-body);
}
.coaching-offer-section {
margin-bottom: clamp(48px, 6vw, 72px);
}
/* =======================================
SESSION NAVIGATION STYLING
======================================= */
.session-nav {
margin: 2rem auto 3rem;
text-align: center;
}
.session-nav ul {
list-style: none;
padding: 0;
margin: 0;
display: inline-flex;
gap: 1.5rem;
}
.session-nav li a {
font-family: var(--font-body);
font-size: var(--text-body);
text-decoration: none;
color: var(--color-accent-600);
border-bottom: 1px solid transparent;
padding-bottom: 2px;
transition: all 0.2s ease;
}
.session-nav li a:hover,
.session-nav li a:focus {
border-bottom: 1px solid var(--color-accent-400);
color: var(--color-accent);
}
.session-nav li a.active {
font-weight: 600;
color: var(--color-accent);
border-bottom: 2px solid var(--color-accent);
}
/* Anchor offset for in-page navigation */
.coaching-block {
scroll-margin-top: 96px;
margin-bottom: clamp(64px, 8vw, 96px);
}
/* ======================================
TEAM COACHING SECTION – FINAL STYLES
====================================== */
/* Section container */
.team-coaching-section {
padding: clamp(64px, 8vw, 96px) 1.5rem;
}
/* Shared container style (glass box) */
.glass-box {
background: rgba(255, 255, 255, 0.72);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 12px;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
padding: clamp(32px, 5vw, 48px);
margin-bottom: clamp(48px, 6vw, 72px);
}
/* Clean, modern list styling (Apple-inspired) */
.team-coaching-section .clean-list {
list-style-type: disc;
padding-left: 1.5rem;
margin-bottom: 1.5rem;
color: var(--color-text); /* ensures bullets match text */
}
.team-coaching-section .clean-list li {
font-size: var(--text-body);
font-family: var(--font-body);
line-height: var(--line-body);
margin-bottom: 0.75rem;
}
/* ===============================
SECTION: About Intro
================================= */
.about-intro {
background: transparent;
padding: clamp(64px, 8vw, 96px) 1.5rem;
max-width: 900px;
margin: 0 auto;
text-align: left;
}
.about-intro .intro-divider {
width: 40px;
height: 2px;
background-color: var(--color-gold);
margin-bottom: 1rem;
}
.about-intro .eyebrow {
font-family: var(--font-eyebrow);
font-size: var(--text-h4);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--color-accent-300);
margin: 0 0 0.75rem;
}
.about-intro h1 {
font-family: var(--font-heading);
font-size: var(--text-h1);
font-weight: 600;
color: var(--color-accent);
margin: 0 0 1rem;
}
.about-intro .subhead {
font-family: var(--font-body);
font-size: var(--text-body-lg);
line-height: var(--line-body);
color: var(--color-text);
max-width: 700px;
}
.about-nav {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.5rem 1.25rem;
font-family: var(--font-body);
font-size: var(--text-body);
color: var(--color-text);
margin: 1rem auto 3rem;
padding: 0 1.5rem;
max-width: 800px;
text-align: center;
}
.about-nav a {
color: var(--color-accent);
text-decoration: none;
transition: color 0.3s ease;
}
.about-nav a:hover {
color: var(--color-accent-200);
text-decoration: underline;
}
.section-anchor {
position: relative;
top: -120px; /* adjust if your fixed header or spacing is different */
}
/* ===============================
SECTION: Professional Bio
================================= */
#professional-bio {
padding: clamp(48px, 6vw, 88px) 1.5rem;
border-top: 1px solid var(--color-border, #e5e5e5);
background-color: var(--color-bg, #ffffff);
}
#professional-bio .section-inner {
max-width: 1000px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
gap: clamp(24px, 4vw, 48px);
align-items: center;
}
#professional-bio .image-col {
flex: 1 1 360px;
max-width: 480px;
}
#professional-bio .about-photo {
width: 100%;
height: auto;
border-radius: 12px;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
}
#professional-bio .text-col {
flex: 1 1 480px;
}
#professional-bio p {
font-size: var(--text-body);
line-height: var(--line-body, 1.6);
color: var(--color-text);
margin-bottom: 1.25rem;
}
#professional-bio .linkedin-link {
font-size: var(--text-body);
font-weight: 500;
margin-top: 1rem;
}
#professional-bio .linkedin-link a {
color: var(--color-accent);
text-decoration: underline;
transition: color 0.3s ease;
}
#professional-bio .linkedin-link a:hover {
color: var(--color-accent-200);
}
/* ================================
CREDENTIALS SECTION STYLING
================================= */
#credentials {
padding: clamp(64px, 8vw, 96px) 1.5rem;
background-color: var(--color-bg-neutral);
}
.credentials-block {
max-width: 920px;
margin: 0 auto;
padding: 0;
}
#credentials .section-heading {
font-family: var(--font-heading);
font-size: var(--text-h2);
font-weight: 600;
color: var(--color-text-heading);
margin-bottom: 0.5rem;
}
#credentials .section-subhead {
font-family: var(--font-body);
font-size: var(--text-body);
font-style: italic;
color: var(--color-text-light);
margin-bottom: 2.5rem;
max-width: 800px;
line-height: var(--line-body);
}
/* ----------------------------------
LIST STRUCTURE
---------------------------------- */
.credentials-list {
list-style: none;
margin: 0 0 2.5rem;
padding: 0;
display: grid;
row-gap: 2rem;
}
.credentials-list li {
display: grid;
grid-template-columns: 140px 1fr;
gap: 1rem;
margin: 0;
padding: 0 0 2rem;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.credentials-list li:last-child {
border-bottom: none;
padding-bottom: 0;
}
/* Remove bullets cleanly */
.credentials-list li::marker {
content: '';
display: none;
}
/* ----------------------------------
DATE COLUMN
---------------------------------- */
.cred-date {
font-family: var(--font-body);
font-size: var(--text-body);
font-weight: 600;
color: var(--color-text);
white-space: nowrap;
}
/* ----------------------------------
CREDENTIAL DETAILS
---------------------------------- */
.cred-detail {
font-family: var(--font-body);
font-size: var(--text-body);
line-height: var(--line-body);
font-weight: 500;
color: var(--color-text);
}
/* Header within detail: stronger emphasis */
.cred-detail-header {
display: block;
font-weight: 600;
margin-bottom: 0.25rem;
color: var(--color-text);
}
/* Link styling */
.cred-detail a {
color: var(--color-accent);
text-decoration: underline;
transition: color 0.2s ease;
}
.cred-detail a:hover {
color: var(--color-accent-200);
text-decoration: none;
}
/* ----------------------------------
RESPONSIVE ADJUSTMENTS
---------------------------------- */
@media (max-width: 640px) {
.credentials-list li {
grid-template-columns: 1fr;
}
.cred-date {
margin-bottom: 0.25rem;
}
}
/* ================================
SECTION: MY PATH
================================= */
#path {
padding: clamp(64px, 8vw, 96px) 1.5rem;
background-color: var(--color-bg-light);
}
/* Image wrapper using <figure> for caption support */
#path .section-image-wrapper {
max-width: 1200px;
margin: 0 auto clamp(48px, 6vw, 64px);
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
}
/* Image styling – full width with white frame effect */
#path .section-image {
width: 100%;
max-width: 100%;
border: 12px solid #fff; /* white Polaroid-style border */
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06); /* soft elevation */
border-radius: 8px;
display: block;
}
/* Image caption */
#path .image-caption {
font-family: var(--font-body);
font-size: var(--text-caption);
color: var(--color-text-light);
text-align: center;
margin-top: 0.75rem;
line-height: 1.4;
max-width: 90%;
}
/* Text container */
.path-block {
max-width: 800px;
margin: 0 auto;
padding: 0;
}
/* Heading */
.path-block .section-heading {
font-family: var(--font-heading);
font-size: var(--text-h2);
font-weight: 600;
color: var(--color-text-heading);
margin-bottom: 2rem;
text-align: left;
}
/* Paragraphs */
.path-block p {
font-family: var(--font-body);
font-size: var(--text-body);
line-height: var(--line-body);
color: var(--color-text);
margin-bottom: 1.75rem;
}
/* Responsive spacing */
@media (max-width: 640px) {
#path .section-image {
border-width: 8px;
border-radius: 6px;
}
#path .image-caption {
font-size: 0.85rem;
max-width: 100%;
}
.path-block .section-heading {
font-size: var(--text-h3);
margin-bottom: 1.5rem;
}
.path-block p {
font-size: 1rem;
margin-bottom: 1.5rem;
}
}
/* ===============================
SECTION: MY FAVORITE THINGS
================================= */
#my-favorite-things {
background-color: var(--color-bg-neutral);
padding: clamp(64px, 8vw, 96px) 1.5rem;
}
#my-favorite-things .favorites-wrapper {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: center;
gap: 3rem;
max-width: 1200px;
margin: 0 auto;
}
.favorites-img-wrapper {
flex: 1 1 300px;
max-width: 420px;
}
.favorites-img {
width: 100%;
height: auto;
border-radius: 12px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
object-fit: cover;
}
.favorites-content {
flex: 1 1 400px;
max-width: 640px;
font-family: var(--font-body);
font-size: var(--text-body);
line-height: var(--line-body);
color: var(--color-text);
}
.favorites-eyebrow {
font-family: var(--font-eyebrow);
font-size: var(--text-h5);
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--color-accent-300);
margin-bottom: 0.5rem;
}
.favorites-content h2 {
font-family: var(--font-heading);
font-size: var(--text-h2);
font-weight: 600;
margin-bottom: 1rem;
color: var(--color-accent);
}
.favorites-content em {
font-style: italic;
color: var(--color-text-light);
}
.favorites-content ul {
padding-left: 1.25rem;
margin-top: 1rem;
}
.favorites-content ul li {
margin-bottom: 1rem;
line-height: var(--line-body);
list-style-type: disc;
}
/* ===============================
RESPONSIVE STACKING
================================= */
@media (max-width: 768px) {
.favorites-wrapper {
flex-direction: column;
gap: 2rem;
}
.favorites-img-wrapper,
.favorites-content {
max-width: 100%;
}
.favorites-content h2,
.favorites-eyebrow {
text-align: center;
}
}
/* ===============================
GIVING BACK SECTION
================================= */
#giving-back {
padding: clamp(64px, 8vw, 96px) 1.5rem;
background-color: var(--color-bg-light);
}
.giving-back-wrapper {
display: flex;
align-items: flex-start;
justify-content: center;
gap: 2.5rem;
max-width: 960px;
margin: 0 auto;
flex-wrap: wrap;
}
.giving-back-text {
flex: 1 1 480px;
font-family: var(--font-body);
font-size: var(--text-body);
color: var(--color-text);
line-height: var(--line-body);
}
.giving-back-text h2 {
font-family: var(--font-heading);
font-size: var(--text-h2);
font-weight: 600;
color: var(--color-text-heading);
margin-bottom: 1rem;
}
.giving-back-text ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.giving-back-text li {
margin-bottom: 1.25rem;
padding-left: 1.25rem;
position: relative;
}
.giving-back-text li::before {
content: "❖";
position: absolute;
left: 0;
color: var(--color-accent);
font-size: 1.1em;
line-height: 1;
}
.giving-back-img {
flex: 1 1 360px;
max-width: 420px;
border: 8px solid #fff;
box-shadow: 0 12px 36px rgba(0, 0, 0, 0.06);
border-radius: 8px;
object-fit: cover;
}
/* Responsive: stack on small screens */
@media (max-width: 768px) {
.giving-back-wrapper {
flex-direction: column;
}
.giving-back-img {
max-width: 100%;
}
}
/* ===============================
CREDENTIALS CALLOUT
================================= */
#credentials-callout {
padding: clamp(64px, 8vw, 96px) 1.5rem;
background-color: var(--color-bg-neutral);
}
.callout-with-bg {
position: relative;
max-width: 900px;
margin: 0 auto;
background: rgba(255, 255, 255, 0.8);
padding: 2.25rem 2rem;
border-left: 4px solid var(--color-accent);
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.05);
border-radius: 6px;
font-family: var(--font-body);
font-size: var(--text-body);
line-height: var(--line-body);
color: var(--color-text);
}
.callout-with-bg p {
margin: 0;
}
/* ===============================
LEGAL PAGE – PRIVACY & TERMS
================================= */
.legal-page {
max-width: 880px;
margin: 0 auto;
padding: clamp(64px, 8vw, 96px) 1.5rem;
font-family: var(--font-body);
font-size: var(--text-body);
line-height: var(--line-body);
color: var(--color-text);
}
.legal-page h1 {
font-family: var(--font-heading);
font-size: var(--text-h1);
font-weight: 600;
color: var(--color-accent);
margin-bottom: 2rem;
}
.legal-page h2 {
font-family: var(--font-heading);
font-size: var(--text-h2);
font-weight: 600;
color: var(--color-accent);
margin-top: 2.5rem;
margin-bottom: 1rem;
}
.legal-page p {
margin-bottom: 1.5rem;
}
.legal-page ul {
margin-bottom: 2rem;
padding-left: 1.5rem;
list-style-type: disc;
}
.legal-page li {
margin-bottom: 0.75rem;
}
.legal-page a {
color: var(--color-accent);
text-decoration: underline;
transition: color 0.2s ease;
}
.legal-page a:hover {
color: var(--color-accent-200);
}
/* ===============================
HEADER BOTTOM BORDER
================================= */
.Header {
border-bottom: 1px solid var(--color-border, rgba(0, 0, 0, 0.08));
}