/*
 * GF2 service-page system. Loaded only on templates in /v2.
 * Everything is scoped under .gf2 so custom.css and legacy pages are unaffected.
 */

@font-face { font-family: 'GF Roc'; src: url('/wp-content/uploads/2025/06/fonnts.com-Roc_Grotesk_Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'GF Roc'; src: url('/wp-content/uploads/2025/06/fonnts.com-Roc_Grotesk_Medium.ttf') format('truetype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'GF Roc'; src: url('/wp-content/uploads/2025/06/fonnts.com-Roc_Grotesk_Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'GF Roc'; src: url('/wp-content/uploads/2025/06/fonnts.com-Roc_Grotesk_ExtraBold.ttf') format('truetype'); font-weight: 800; font-display: swap; }

.gf2 {
	--gf2-navy: #031e94;
	--gf2-indigo: #2e3182;
	--gf2-sun: #febd1e;
	--gf2-brick: #b62025;
	--gf2-ice: #ecf6ff;
	--gf2-ink: #1d2340;
	--gf2-muted: #4a5270;
	--gf2-line: #d6e2f5;
	--gf2-display: 'GF Roc', 'Roc Grotesk', sans-serif;
	--gf2-text: 'Source Sans 3', 'Helvetica Neue', Arial, sans-serif;
	--gf2-space: clamp(64px, 8vw, 112px);

	font-family: var(--gf2-text);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.6;
	color: var(--gf2-ink);
	background: #fff;
}

/* Base rules use :where() so they stay at single-class weight and every component
   rule below overrides them; they still beat custom.css's bare element selectors. */
.gf2 *, .gf2 *::before, .gf2 *::after { box-sizing: border-box; }
.gf2 :where(h1, h2, h3, p, ul, ol) { margin: 0; padding: 0; }
.gf2 :where(ul, ol) { list-style: none; }
.gf2 :where(img) { display: block; max-width: 100%; height: auto; }

.gf2 h1, .gf2 h2, .gf2 h3 {
	font-family: var(--gf2-display);
	color: var(--gf2-navy);
	text-wrap: balance;
	letter-spacing: -0.01em;
	text-align: left;
	text-transform: none;
}
.gf2 h1 { font-size: clamp(2.4rem, 1.4rem + 3.4vw, 4.1rem); font-weight: 800; line-height: 1.02; }
.gf2 h2 { font-size: clamp(1.9rem, 1.3rem + 1.9vw, 2.9rem); font-weight: 700; line-height: 1.08; }
.gf2 h3 { font-size: 1.3rem; font-weight: 700; line-height: 1.2; }
.gf2 h1 em { font-style: normal; color: var(--gf2-brick); }
/* custom.css sets Roc Grotesk directly on p/li/span, so inheritance alone loses. */
.gf2 :where(p, li, span, a, label, input, textarea) { font-family: var(--gf2-text); }
.gf2 :where(p) { max-width: 62ch; text-wrap: pretty; font-size: 1em; line-height: 1.6; font-weight: 400; }

.gf2-wrap { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: 24px; }
.gf2-section { padding-block: var(--gf2-space); }
.gf2-section--ice { background: var(--gf2-ice); }
.gf2-lede { font-size: 1.2rem; color: var(--gf2-muted); margin-top: 20px; }
.gf2-intro { margin-top: 16px; color: var(--gf2-muted); }

/* Buttons */
.gf2-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 32px; }
.gf2 .gf2-btn {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 54px; padding: 14px 30px; border-radius: 999px;
	font-family: var(--gf2-display); font-size: 1.05rem; font-weight: 500; line-height: 1.1;
	text-decoration: none; border: 2px solid transparent;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.gf2 .gf2-btn--primary { background: var(--gf2-brick); color: #fff; }
.gf2 .gf2-btn--primary:hover { background: #961a1e; color: #fff; }
.gf2 .gf2-btn--outline { background: transparent; color: var(--gf2-navy); border-color: var(--gf2-navy); }
.gf2 .gf2-btn--outline:hover { background: var(--gf2-navy); color: #fff; }
.gf2 .gf2-btn--sun { background: var(--gf2-sun); color: var(--gf2-navy); }
.gf2 .gf2-btn--sun:hover { background: #fff; color: var(--gf2-navy); }
.gf2 .gf2-phone { color: var(--gf2-navy); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.gf2 .gf2-phone:hover { color: var(--gf2-brick); }
.gf2 a:focus-visible, .gf2 button:focus-visible { outline: 3px solid var(--gf2-sun); outline-offset: 3px; }

/* Hero */
.gf2-hero { padding-block: clamp(40px, 6vw, 88px) var(--gf2-space); }
.gf2-hero > .gf2-wrap { max-width: 1360px; }
.gf2-hero__grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 4vw, 56px); align-items: center; }
.gf2-hero h1 { font-size: clamp(2.4rem, 1.4rem + 3vw, 3.75rem); }
/* Title + tagline: the tagline sits on its own line, smaller and in teal so the two never read as one sentence. */
.gf2 h1 .gf2-h1-sub { display: block; margin-top: .45em; font-family: var(--gf2-display); font-size: .42em; font-weight: 500; line-height: 1.25; letter-spacing: 0; color: #0e7c93; }
.gf2 h1 .gf2-h1-sub--name { font-size: .5em; color: var(--gf2-navy); margin-top: .35em; }
.gf2 h1 .gf2-h1-sub--name + .gf2-h1-sub { font-size: .38em; margin-top: .6em; }
.gf2-hero .gf2-photo { aspect-ratio: 5 / 4; }
.gf2-assure { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 28px; font-size: 1rem; font-weight: 600; color: var(--gf2-ink); }
.gf2-assure li { display: flex; align-items: center; gap: 8px; }
.gf2-assure li::before {
	content: ''; width: 18px; height: 18px; flex: none; border-radius: 50%;
	background: var(--gf2-sun) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23031e94' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
}

/* Cost badge (from the client's telehealth flyer) */
.gf2 .gf2-badge { display: inline-flex; align-items: center; gap: 14px; margin-top: 26px; max-width: none; padding: 10px 24px 10px 10px; border-radius: 18px; background: var(--gf2-sun); color: var(--gf2-navy); font-size: 1.05rem; line-height: 1.2; }
.gf2 .gf2-badge__icon { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #fff; }
.gf2 .gf2-badge strong { display: block; font-family: var(--gf2-display); font-size: 1.45rem; font-weight: 800; line-height: 1.05; }
.gf2-badge + .gf2-actions { margin-top: 26px; }

/* Brand chevrons from the logo: navy + yellow, set behind hero media like the flyer
   and the site's other banners; faint versions in the band and marked sections. */
.gf2-hero { position: relative; overflow: hidden; }
.gf2-hero__media { position: relative; padding: clamp(44px, 6vw, 80px) 5% 0 0; }
.gf2-hero__media::before {
	content: ''; position: absolute; z-index: 0; top: 0; right: -6%; width: 70%; aspect-ratio: 17 / 10; pointer-events: none;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 170 100'%3E%3Cpath d='M0 0h50l50 50-50 50H0l50-50z' fill='%23031e94'/%3E%3Cpath d='M70 0h50l50 50-50 50H70l50-50z' fill='%23febd1e'/%3E%3C/svg%3E") no-repeat right top / contain;
}
.gf2-hero__media > * { position: relative; z-index: 1; }
.gf2-band, .gf2-section--chevrons { position: relative; overflow: hidden; }
.gf2-band::after, .gf2-section--chevrons::after {
	content: ''; position: absolute; z-index: 0; right: -6%; bottom: -12%; width: min(46vw, 560px); aspect-ratio: 17 / 10; pointer-events: none;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 170 100'%3E%3Cpath d='M0 0h50l50 50-50 50H0l50-50z' fill='%23ffffff' fill-opacity='.07'/%3E%3Cpath d='M70 0h50l50 50-50 50H70l50-50z' fill='%23febd1e' fill-opacity='.22'/%3E%3C/svg%3E") no-repeat center / contain;
}
.gf2-section--chevrons::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 170 100'%3E%3Cpath d='M0 0h50l50 50-50 50H0l50-50z' fill='%23031e94' fill-opacity='.07'/%3E%3Cpath d='M70 0h50l50 50-50 50H70l50-50z' fill='%23febd1e' fill-opacity='.35'/%3E%3C/svg%3E");
}
.gf2-band > .gf2-wrap, .gf2-section--chevrons > .gf2-wrap { position: relative; z-index: 1; }
.gf2 .gf2-intro--lead { margin-top: 0; font-size: 1.2rem; color: var(--gf2-ink); }

/* Media frames. "stage" hosts transparent cut-out artwork on a solid panel so it
   reads as a deliberate composition; "photo" is a full-bleed rectangular photo. */
.gf2-stage { position: relative; border-radius: 32px; background: var(--gf2-ice); overflow: hidden; aspect-ratio: 1 / 1; display: flex; align-items: flex-end; justify-content: center; }
.gf2-stage img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
.gf2-stage--sun { background: #fff4d6; }
.gf2-photo { border-radius: 28px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--gf2-ice); }
.gf2-photo img { width: 100%; height: 100%; object-fit: cover; }
.gf2-photo--tall { aspect-ratio: 4 / 5; }
.gf2-photo--left img { object-position: 22% 50%; }
.gf2-photo--right img { object-position: 85% 50%; }

/* Split section: heading column + content column */
.gf2-split { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.gf2-split--media { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }

/* Benefit points: brand chevron markers, no icons */
.gf2-points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 40px; }
.gf2-points--single { grid-template-columns: 1fr; gap: 18px; }
.gf2-points li { position: relative; padding-left: 34px; }
.gf2-points li::before {
	content: ''; position: absolute; left: 0; top: 5px; width: 18px; height: 18px;
	background: var(--gf2-sun);
	clip-path: polygon(0 0, 55% 0, 100% 50%, 55% 100%, 0 100%, 45% 50%);
}
.gf2-points strong { display: block; font-family: var(--gf2-display); font-weight: 700; font-size: 1.15rem; color: var(--gf2-navy); line-height: 1.25; }
.gf2-points span { display: block; margin-top: 4px; color: var(--gf2-muted); }
.gf2-points--single strong { font-family: var(--gf2-text); font-size: 1.05rem; font-weight: 600; color: var(--gf2-ink); }

/* Topic list */
.gf2-topics { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.gf2-topics li { padding: 8px 16px; border-radius: 999px; background: #fff; border: 1.5px solid var(--gf2-line); font-weight: 600; font-size: 1rem; color: var(--gf2-navy); }
.gf2-topics-label { margin-top: 28px; font-weight: 700; color: var(--gf2-ink); }

/* The forward path: numbered steps joined by a track */
.gf2-path-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px 40px; margin-bottom: 56px; }
.gf2-path { position: relative; display: grid; grid-template-columns: repeat(var(--gf2-steps, 4), minmax(0, 1fr)); gap: 32px; counter-reset: none; }
.gf2-path::before {
	content: ''; position: absolute; top: 31px; left: 32px; right: 32px; height: 4px; border-radius: 4px;
	background: linear-gradient(90deg, var(--gf2-sun), var(--gf2-sun) 70%, rgba(254, 189, 30, .25));
}
.gf2-path__step { position: relative; }
.gf2-path__num {
	position: relative; z-index: 1; display: grid; place-items: center;
	width: 66px; height: 66px; border-radius: 50%;
	background: var(--gf2-navy); color: #fff; border: 6px solid #fff;
	font-family: var(--gf2-display); font-size: 1.6rem; font-weight: 800; line-height: 1;
}
.gf2-section--ice .gf2-path__num { border-color: var(--gf2-ice); }
.gf2-path__step:last-child .gf2-path__num { background: var(--gf2-sun); color: var(--gf2-navy); }
.gf2-path h3 { margin-top: 22px; }
.gf2-path p { margin-top: 8px; color: var(--gf2-muted); font-size: 1.05rem; }

/* Why section with image (child peer support) */
.gf2-why { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 72px); align-items: center; margin-top: 40px; }
.gf2 .gf2-points--stack { grid-template-columns: 1fr; gap: 22px; }
.gf2-why__art img { width: 100%; height: auto; }

/* Audience panels (peer support) */
.gf2-audience { display: grid; grid-template-columns: 1.25fr 1fr; gap: 28px; align-items: stretch; margin-top: 40px; }
.gf2-section--ice .gf2-panel--primary { background: #fff; box-shadow: 0 1px 0 var(--gf2-line), 0 18px 40px -24px rgba(3, 30, 148, .35); }
.gf2-section--ice .gf2-panel--secondary { background: transparent; }
.gf2-panel { border-radius: 28px; padding: clamp(28px, 4vw, 48px); }
.gf2-panel--primary { background: var(--gf2-ice); }
.gf2-panel--secondary { background: #fff; border: 2px solid var(--gf2-line); }
.gf2-panel h3 { font-size: clamp(1.45rem, 1.2rem + .8vw, 1.9rem); }
.gf2-panel__kicker { margin-top: 6px; font-size: 1rem; color: var(--gf2-muted); }
.gf2-panel > p { margin-top: 16px; }
.gf2-panel .gf2-points { margin-top: 24px; }
.gf2-panel .gf2-actions { margin-top: 28px; }

/* Eligibility (CORE) */
.gf2-elig { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 40px; }
.gf2-elig li { background: #fff; border-radius: 24px; padding: 28px; border: 2px solid var(--gf2-line); }
.gf2-elig strong { display: block; font-family: var(--gf2-display); font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 800; color: var(--gf2-navy); line-height: 1.1; }
.gf2-elig span { display: block; margin-top: 8px; color: var(--gf2-muted); }

/* Service rows (CORE) */
.gf2-services { margin-top: 48px; border-top: 2px solid var(--gf2-line); }
.gf2-service { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 24px 64px; padding-block: 40px; border-bottom: 2px solid var(--gf2-line); }
.gf2-service__abbr { display: inline-block; margin-bottom: 10px; padding: 4px 12px; border-radius: 8px; background: var(--gf2-sun); font-family: var(--gf2-display); font-weight: 800; font-size: .95rem; color: var(--gf2-navy); }
.gf2-service h3 { font-size: clamp(1.4rem, 1.2rem + .7vw, 1.8rem); }
.gf2-service .gf2-points { gap: 14px 36px; }
.gf2-service .gf2-points--cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) { .gf2-service .gf2-points--cols { grid-template-columns: 1fr; } }

/* Closing band */
.gf2-band { background: var(--gf2-indigo); color: #fff; padding-block: var(--gf2-space); }
.gf2-band__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 40px 72px; align-items: center; }
.gf2-band h2 { color: #fff; }
.gf2-band p { margin-top: 18px; color: #dfe4ff; font-size: 1.15rem; }
.gf2-facts { display: grid; gap: 18px; }
.gf2-facts li { font-family: var(--gf2-display); font-size: clamp(1.3rem, 1.1rem + .8vw, 1.75rem); font-weight: 700; color: var(--gf2-sun); line-height: 1.15; padding-bottom: 18px; border-bottom: 1px solid rgba(255, 255, 255, .18); }
.gf2-facts li:last-child { border-bottom: 0; padding-bottom: 0; }
.gf2-band .gf2-phone { color: #fff; }
.gf2-band .gf2-phone:hover { color: var(--gf2-sun); }
.gf2-band a.gf2-mail { color: #fff; font-weight: 600; }

/* Therapy request dialog */
.gf2-dialog { position: fixed; inset: 0; z-index: 100000; display: grid; place-items: center; padding: 20px; background: rgba(3, 30, 148, .55); }
.gf2-dialog[hidden] { display: none; }
.gf2-dialog__box { position: relative; width: 100%; max-width: 520px; max-height: calc(100vh - 40px); overflow-y: auto; background: #fff; border-radius: 24px; padding: 40px 32px 32px; font-family: var(--gf2-text); color: var(--gf2-ink); }
.gf2-dialog__box h2 { font-family: var(--gf2-display); font-size: 1.9rem; font-weight: 700; color: var(--gf2-navy); line-height: 1.1; margin: 0; }
.gf2-dialog__box > p { margin: 10px 0 20px; color: var(--gf2-muted); font-size: 1.05rem; }
.gf2-dialog__close { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--gf2-ice); color: var(--gf2-navy); display: grid; place-items: center; cursor: pointer; }
#psychotherapy-signup .gf2-dialog__box label { display: block; font-weight: 600; font-size: .95rem; color: var(--gf2-ink); }
#psychotherapy-signup .gf2-dialog__box input:not([type=submit]), #psychotherapy-signup .gf2-dialog__box textarea,
#gfPopup input:not([type=submit]):not([type=hidden]), #gfPopup textarea { width: 100%; margin-top: 6px; background: #fff; border: 2px solid #b4c3e0; border-radius: 12px; padding: 12px 14px; font-family: var(--gf2-text); font-size: 1rem; color: var(--gf2-ink); }
#psychotherapy-signup .gf2-dialog__box input:focus, #psychotherapy-signup .gf2-dialog__box textarea:focus,
#gfPopup input:focus, #gfPopup textarea:focus { outline: none; border-color: var(--gf2-navy); box-shadow: 0 0 0 3px rgba(3, 30, 148, .15); }
#psychotherapy-signup .gf2-dialog__box textarea, #gfPopup textarea { height: 110px; resize: vertical; }
#gfPopup input[type=submit] { width: 100%; min-height: 52px; margin-top: 8px; border: 0; border-radius: 999px; background: var(--gf2-brick); color: #fff; font-family: var(--gf2-display); font-size: 1.05rem; cursor: pointer; }

/* Site-wide contact popup (#gfPopup). Legacy templates inline this CSS; v2 owns it here.
   footer.php's script toggles display directly and/or adds .active. */
#gfPopup.gf-popup-overlay { position: fixed; inset: 0; z-index: 100000; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(3, 30, 148, .55); }
#gfPopup.gf-popup-overlay.active { display: flex; }
#gfPopup .gf-popup-box { position: relative; width: 100%; max-width: 520px; max-height: calc(100vh - 40px); overflow-y: auto; background: #fff; border-radius: 24px; padding: 40px 32px 32px; font-family: 'Source Sans 3', Arial, sans-serif; color: #1d2340; }
#gfPopup .gf-popup-box h2 { margin: 0; font-family: 'GF Roc', 'Roc Grotesk', sans-serif; font-size: 1.9rem; font-weight: 700; line-height: 1.1; color: #031e94; text-align: left; }
#gfPopup .gf-popup-box > p { margin: 10px 0 16px; font-family: 'Source Sans 3', Arial, sans-serif; font-size: 1.05rem; color: #4a5270; }
#gfPopup .gf-close-popup { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border-radius: 50%; background: #ecf6ff; color: #031e94; display: grid; place-items: center; cursor: pointer; }
#gfPopup p { margin: 0 0 12px; }

#psychotherapy-signup .gf2-dialog__box input[type=submit] { width: 100%; min-height: 52px; border: 0; border-radius: 999px; background: var(--gf2-brick); color: #fff; font-family: var(--gf2-display); font-size: 1.05rem; cursor: pointer; }

/* Tablet */
@media (max-width: 1000px) {
	.gf2-hero__grid, .gf2-split, .gf2-split--media, .gf2-band__grid, .gf2-audience, .gf2-service, .gf2-why { grid-template-columns: 1fr; }
	.gf2-hero__media { max-width: 560px; }
	.gf2-path { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
	.gf2-path::before { display: none; }
}

/* Phone */
@media (max-width: 640px) {
	.gf2 { font-size: 17px; }
	.gf2-wrap { padding-inline: 20px; }
	.gf2-points, .gf2-elig { grid-template-columns: 1fr; }
	.gf2-path { grid-template-columns: 1fr; gap: 0; }
	.gf2-path::before { display: block; top: 32px; bottom: 32px; left: 31px; right: auto; width: 4px; height: auto; background: var(--gf2-sun); }
	.gf2-path__step { display: grid; grid-template-columns: 66px 1fr; column-gap: 18px; padding-bottom: 28px; }
	.gf2-path__step:last-child { padding-bottom: 0; }
	.gf2-path__num { grid-row: span 2; }
	.gf2-path h3 { margin-top: 12px; }
	.gf2-actions { flex-direction: column; align-items: stretch; }
	.gf2-actions .gf2-phone { text-align: center; }
	.gf2-lede { font-size: 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
	.gf2 * { transition: none !important; }
}

/* ---------------------------------------------------------------------------
   Children's HCBS page: client asked for blue + turquoise with small red
   accents, so `.gf2--teal` swaps the yellow accent for brand turquoise.
   Buttons stay red (the "small red accents").
   --------------------------------------------------------------------------- */
.gf2--teal { --gf2-sun: #1ba3bf; }
.gf2--teal .gf2-assure li::before {
	background: var(--gf2-sun) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.gf2--teal .gf2-path::before { background: linear-gradient(90deg, var(--gf2-sun), var(--gf2-sun) 70%, rgba(27, 163, 191, .25)); }
.gf2--teal .gf2-path__step:last-child .gf2-path__num { background: var(--gf2-sun); color: #fff; }
.gf2--teal .gf2-facts li { color: #8fe0ef; }
.gf2--teal .gf2-btn--sun { background: var(--gf2-sun); color: #fff; }
.gf2--teal .gf2-btn--sun:hover { background: #fff; color: var(--gf2-navy); }
.gf2--teal .gf2-hero__media::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 170 100'%3E%3Cpath d='M0 0h50l50 50-50 50H0l50-50z' fill='%23031e94'/%3E%3Cpath d='M70 0h50l50 50-50 50H70l50-50z' fill='%231ba3bf'/%3E%3C/svg%3E");
}
.gf2--teal .gf2-band::after, .gf2--teal .gf2-section--chevrons::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 170 100'%3E%3Cpath d='M0 0h50l50 50-50 50H0l50-50z' fill='%23ffffff' fill-opacity='.07'/%3E%3Cpath d='M70 0h50l50 50-50 50H70l50-50z' fill='%231ba3bf' fill-opacity='.5'/%3E%3C/svg%3E");
}

/* Two prominent service cards (CFASS + Respite) */
.gf2-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin-top: 44px; align-items: start; }
.gf2-card { position: relative; overflow: hidden; background: #fff; border: 2px solid var(--gf2-line); border-radius: 28px; padding: clamp(28px, 3.4vw, 44px); }
.gf2-card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 8px; background: var(--gf2-sun); }
.gf2-card__tag { display: inline-block; margin-bottom: 14px; padding: 5px 14px; border-radius: 999px; background: var(--gf2-ice); font-family: var(--gf2-display); font-weight: 700; font-size: .95rem; color: var(--gf2-navy); }
.gf2-card h3 { font-size: clamp(1.45rem, 1.2rem + .8vw, 1.95rem); }
.gf2 .gf2-card__kicker { margin-top: 8px; font-size: 1.1rem; font-weight: 600; color: var(--gf2-navy); }
.gf2 .gf2-card > p { margin-top: 14px; }
.gf2-card .gf2-points { margin-top: 22px; }
.gf2 .gf2-note { margin-top: 28px; max-width: 70ch; font-size: 1.05rem; color: var(--gf2-muted); }
@media (max-width: 1000px) { .gf2-cards { grid-template-columns: 1fr; } }
.gf2-elig--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .gf2-elig--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .gf2-elig--4 { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------------------
   Both dialogs render OUTSIDE main.gf2, so the design tokens defined on .gf2
   don't cascade into them. Without this the submit button's background
   (var(--gf2-brick)) resolved to nothing: white text on transparent = an
   invisible Submit button. Client reported exactly this.
   --------------------------------------------------------------------------- */
#gfPopup, #psychotherapy-signup, #gf2-request, #gf2-eligibility {
	--gf2-navy: #031e94;
	--gf2-sun: #febd1e;
	--gf2-brick: #b62025;
	--gf2-ice: #ecf6ff;
	--gf2-ink: #1d2340;
	--gf2-muted: #4a5270;
	--gf2-line: #d6e2f5;
	--gf2-display: 'GF Roc', 'Roc Grotesk', sans-serif;
	--gf2-text: 'Source Sans 3', 'Helvetica Neue', Arial, sans-serif;
}
#gfPopup input[type=submit], #psychotherapy-signup input[type=submit], .gf2-dialog input[type=submit] {
	background: #b62025; color: #fff; border: 0; cursor: pointer;
}
#gfPopup input[type=submit]:hover, #psychotherapy-signup input[type=submit]:hover, .gf2-dialog input[type=submit]:hover { background: #961a1e; }
#gfPopup input[type=submit]:focus-visible, #psychotherapy-signup input[type=submit]:focus-visible { outline: 3px solid #febd1e; outline-offset: 3px; }

/* Eligibility checklist shown above the eligibility form */
.gf2-dialog__criteria { margin: 14px 0 4px; display: grid; gap: 8px; }
.gf2-dialog__criteria li { position: relative; padding-left: 30px; font-size: 1rem; font-weight: 600; color: #1d2340; line-height: 1.35; }
.gf2-dialog__criteria li::before {
	content: ''; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%;
	background: #1ba3bf url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat;
}
/* generic dialog fields (the new dialogs reuse the psychotherapy dialog styling) */
.gf2-dialog .gf2-dialog__box input:not([type=submit]), .gf2-dialog .gf2-dialog__box textarea {
	width: 100%; margin-top: 10px; background: #fff; border: 2px solid #b4c3e0; border-radius: 12px;
	padding: 12px 14px; font-family: 'Source Sans 3', Arial, sans-serif; font-size: 1rem; color: #1d2340;
}
.gf2-dialog .gf2-dialog__box textarea { height: 104px; resize: vertical; }
.gf2-dialog .gf2-dialog__box input:focus, .gf2-dialog .gf2-dialog__box textarea:focus { outline: none; border-color: #031e94; box-shadow: 0 0 0 3px rgba(3, 30, 148, .15); }
.gf2-dialog .wpcf7-not-valid-tip { color: #b62025; font-size: .9rem; margin-top: 6px; }
.gf2-dialog .wpcf7-response-output { margin: 14px 0 0 !important; padding: 12px 14px !important; border-radius: 12px; border-width: 2px !important; font-size: .95rem; }

.gf2-elig--auto { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
@media (max-width: 640px) { .gf2-elig--auto { grid-template-columns: 1fr; } }

/* Switcher box (client asked for a "switcher-style box" to break up text) */
.gf2-switcher { margin-top: 32px; }
.gf2-switcher__tabs { display: flex; flex-wrap: wrap; gap: 8px; border-bottom: 2px solid var(--gf2-line); padding-bottom: 12px; }
.gf2 .gf2-switcher__tabs button {
	appearance: none; border: 2px solid transparent; background: var(--gf2-ice); color: var(--gf2-navy);
	font-family: var(--gf2-display); font-size: 1.02rem; font-weight: 500; line-height: 1.2;
	padding: 12px 22px; border-radius: 999px; cursor: pointer;
}
.gf2 .gf2-switcher__tabs button[aria-selected=true] { background: var(--gf2-navy); color: #fff; }
.gf2 .gf2-switcher__tabs button:hover[aria-selected=false] { border-color: var(--gf2-navy); }
.gf2 .gf2-switcher__tabs button:focus-visible { outline: 3px solid var(--gf2-sun); outline-offset: 3px; }
.gf2-switcher__panel { padding-top: 28px; }
.gf2-section--ice .gf2-switcher__tabs button { background: #fff; }
.gf2-section--ice .gf2-switcher__tabs button[aria-selected=true] { background: var(--gf2-navy); color: #fff; }
.gf2 .gf2-topics--lg li { font-size: 1.05rem; padding: 10px 20px; }
.gf2 .gf2-service-title { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); }
.gf2-split--flip .gf2-photo { order: 2; }
@media (max-width: 1000px) { .gf2-split--flip .gf2-photo { order: 0; } }

/* Credentials / trust strip */
.gf2-credentials { border-top: 2px solid var(--gf2-line); padding-block: 32px; background: #fff; }
.gf2-credentials ul { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px 44px; }
.gf2-credentials li { display: flex; align-items: center; gap: 12px; font-family: var(--gf2-display); font-weight: 700; font-size: 1rem; color: var(--gf2-navy); letter-spacing: .01em; }
.gf2-credentials li::before { content: ''; width: 22px; height: 22px; border-radius: 50%; flex: none; background: var(--gf2-ice) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3l7 3v5.5c0 4-2.9 7.6-7 8.5-4.1-.9-7-4.5-7-8.5V6z' fill='none' stroke='%23031e94' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") center / 15px no-repeat; }
.gf2-credentials__logo { max-height: 42px; width: auto; }
@media (max-width: 640px) { .gf2-credentials ul { gap: 14px 24px; } .gf2-credentials li { font-size: .92rem; } }
.gf2 .gf2-photo--wide { margin-top: 28px; aspect-ratio: 16 / 9; }
.gf2-card__media { margin: -8px 0 22px; border-radius: 18px; overflow: hidden; aspect-ratio: 16 / 10; background: var(--gf2-ice); }
.gf2-card__media img { width: 100%; height: 100%; object-fit: cover; }
.gf2 .gf2-intro + .gf2-points, .gf2 p + .gf2-points { margin-top: 24px; }

/* "Don't go solo" band - now using the live site's panel design (the one the
   client pointed at): ice panel, 60px corners, right-gofo / left-gofo chevron
   graphics either side. Type values still match the live band. */
.gf2-solo { padding-block: clamp(48px, 6vw, 80px); background: #fff; }
.gf2-solo__panel {
	position: relative; overflow: hidden;
	max-width: 1200px; margin: 0 auto;
	background: #ecf6ff; border-radius: 60px;
	padding: clamp(56px, 8vw, 110px) clamp(24px, 6vw, 80px);
	text-align: center;
}
.gf2-solo__panel::before, .gf2-solo__panel::after { content: ''; position: absolute; pointer-events: none; z-index: 0; background-repeat: no-repeat; background-size: contain; }
.gf2-solo__panel::before { right: 0; bottom: 0; width: 280px; height: 367px; background-image: url('/wp-content/uploads/2026/02/right-gofo.png'); background-position: right bottom; }
.gf2-solo__panel::after { left: 0; top: 30%; width: 304px; height: 554px; background-image: url('/wp-content/uploads/2026/02/left-gofo.png'); background-position: left top; }
.gf2-solo__inner { position: relative; z-index: 1; }
.gf2 .gf2-solo h2 { color: #febd1e; font-family: var(--gf2-display); font-weight: 400; font-size: clamp(1.9rem, 1.4rem + 1vw, 2.5rem); text-align: center; letter-spacing: 0; }
.gf2-solo__logo { width: min(560px, 78vw); height: auto; margin: 22px auto 0; }
.gf2 .gf2-solo__stats { max-width: 670px; margin: 24px auto 0; color: #031e94; font-family: var(--gf2-display); font-weight: 500; font-size: clamp(1.1rem, 1rem + .5vw, 1.56rem); line-height: 1.45; }
.gf2 .gf2-actions--center { justify-content: center; }
.gf2 .gf2-btn--navy { background: #031e94; color: #fff; }
.gf2 .gf2-btn--navy:hover { background: #02166b; color: #fff; }
.gf2-art--panel { border-radius: 24px; overflow: hidden; }
.gf2-art--panel img { width: 100%; height: auto; display: block; }
@media (max-width: 900px) {
	.gf2-solo__panel { border-radius: 36px; }
	.gf2-solo__panel::before { width: 150px; height: 196px; }
	.gf2-solo__panel::after { width: 160px; height: 290px; opacity: .8; }
}
.gf2-split--top { align-items: start; }
.gf2-core-body { margin-top: 36px; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
.gf2-core-body .gf2-switcher { margin-top: 26px; }
@media (max-width: 1000px) { .gf2-core-body { grid-template-columns: 1fr; } }

/* Oct 14, 2026 client round: header emphasis modeled on the Nutrition page.
   Navy base with sky-blue accent words, bolded key phrases in the intro text. */
.gf2 h1 .gf2-h1-sub { font-size: .5em; font-weight: 600; line-height: 1.2; color: var(--gf2-navy); }
.gf2 h1 .gf2-h1-sub b { font-weight: 800; color: #1ba3bf; }
.gf2 h1 .gf2-h1-sub--name { font-size: .5em; }
.gf2-hero .gf2-lede { color: var(--gf2-ink); font-size: 1.25rem; border-left: 6px solid var(--gf2-sun); padding-left: 20px; }
.gf2-hero .gf2-lede strong { font-weight: 700; color: var(--gf2-navy); background: linear-gradient(transparent 62%, rgba(27,163,191,.22) 0); }
.gf2-hero .gf2-lede em { font-style: normal; font-weight: 700; color: #0e7c93; }
.gf2-services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-top: 32px; }
.gf2-services-grid article { background: #fff; border: 2px solid var(--gf2-line); border-radius: 20px; padding: 24px; }
.gf2-services-grid article.is-note { background: var(--gf2-ice); border-color: #1ba3bf; }
.gf2-services-grid h3 { color: var(--gf2-navy); margin-bottom: 8px; }
.gf2-services-grid .tag { display: inline-block; margin-bottom: 10px; padding: 2px 10px; border-radius: 999px; background: var(--gf2-sun); color: var(--gf2-navy); font-weight: 700; font-size: .8rem; }
.gf2-affil { background: var(--gf2-ice); padding-block: 40px; }
.gf2-affil h2 { font-size: 1.1rem; letter-spacing: .08em; text-transform: uppercase; text-align: center; color: var(--gf2-navy); }
.gf2-affil__logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 24px 48px; margin-top: 24px; }
.gf2-affil__logos img { max-height: 64px; width: auto; }
.gf2-affil__note { margin: 24px auto 0; max-width: 720px; text-align: center; font-size: .95rem; color: var(--gf2-muted); }