/* PRF site styles — single source of truth. Served as a real stylesheet by the "PRF Site Styles" must-use plugin (wp-content/mu-plugins/prf-site-styles.php) and printed last in , so it still wins over the theme and the Customizer. WHY THIS FILE EXISTS These rules used to live in the Customizer > Additional CSS box. That box is a single shared text field: every save rewrites the entire thing, so any editor or script working from a slightly stale copy silently wiped whatever had been added since it loaded. Six blocks were lost that way, which is what reverted the pages to their old broken state. A file on disk cannot be clobbered by a Customizer save. Generated 2026-07-19 12:59 from the per-page sources in the project folder. Edit those and redeploy; do not hand-edit this file on the server. */ /* ==================== prf-global-fixes.css ==================== */ /* BEGIN prf-global-fixes */ /* Site-wide corrections that are not tied to one page. */ /* The footer "About Us" blurb is justified with auto hyphenation on every page, which produced word rivers and mid-word breaks ("im-pact", "individ-uals", "pro-viding"). The header brand lockup is deliberately justified — that one is left alone. */ .footer-area p, .footer-area li, .footer-area .footer__info p, .footer__about p, footer p, footer li { text-align: left !important; text-align-last: left !important; hyphens: none !important; -webkit-hyphens: none !important; word-spacing: normal !important; } /* Content pages that have no bespoke stylesheet still inherit the theme's justified body copy. Excludes the header lockup, which needs justify. */ .page-main-content .entry-content p, .page-main-content .entry-content li, .page-main-content .elementor-widget-text-editor p { text-align: left !important; text-align-last: left !important; hyphens: none !important; -webkit-hyphens: none !important; word-spacing: normal !important; } /* END prf-global-fixes */ /* ==================== prf-header-lockup.css ==================== */ /* BEGIN prf-header-lockup */ /* Header brand lockup — emblem + name + tagline + Section 42 line. All three text lines are kept in full; only typography and layout change. Replaces the older "sizer" technique, which stretched every line to one fixed width by justifying it — that forced 8.5px type, rubber-band letter-spacing on the tagline, and a ~6px lockup on phones. Selectors are deliberately specific (and !important) because several older iterations of this lockup remain earlier in this stylesheet. */ .header .header__bottom_logo.prf-logo-lockup-v2, .header .header__bottom_logo { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 18px !important; max-width: none !important; text-decoration: none !important; } /* ---------- Emblem ---------- */ .header .header__brand-left .header__bottom_logo.prf-logo-lockup-v2 img.prf-header-emblem, .header .header__brand-left .header__bottom_logo img, .header .header__bottom_logo img.prf-header-emblem, .header .header__bottom_logo img { width: 86px !important; height: 86px !important; min-width: 86px !important; max-width: 86px !important; padding: 0 !important; background: none !important; border: none !important; border-radius: 0 !important; object-fit: contain !important; flex: 0 0 auto !important; } /* ---------- Text block ---------- */ .header .header__bottom_logo .prf-header-lockup-text { min-width: 0 !important; width: auto !important; max-width: 100% !important; flex: 0 1 auto !important; } /* the old grid + hidden width-setter are no longer needed */ .header .header__bottom_logo .prf-h-stack { display: block !important; width: auto !important; max-width: 100% !important; } .header .header__bottom_logo .prf-h-sizer { display: none !important; } .header .header__bottom_logo .prf-h-content { display: flex !important; flex-direction: column !important; align-items: flex-start !important; width: auto !important; max-width: 100% !important; gap: 0 !important; } /* Reading order: name, tagline, then the legal footnote. (Source order puts the legal line second; flex order fixes that.) */ .header .header__bottom_logo .prf-h-name-single { order: 1 !important; } .header .header__bottom_logo .prf-h-tagline-single { order: 2 !important; } .header .header__bottom_logo .prf-h-legal-bar { order: 3 !important; } /* no justification anywhere in the lockup */ .header .header__bottom_logo .prf-h-name-single, .header .header__bottom_logo .prf-h-legal-bar, .header .header__bottom_logo .prf-h-tagline-single { text-align: left !important; text-align-last: left !important; word-spacing: normal !important; white-space: normal !important; width: auto !important; max-width: 100% !important; box-sizing: border-box !important; } /* ---------- Organisation name + anchoring rule ---------- */ .header .header__bottom_logo .prf-h-name-single { display: block !important; font-family: 'Plus Jakarta Sans', Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important; font-size: 24px !important; font-weight: 700 !important; line-height: 1.12 !important; letter-spacing: 0.02em !important; color: #16352F !important; text-transform: uppercase !important; padding-bottom: 8px !important; border-bottom: 2px solid rgba(48, 102, 95, 0.22) !important; margin: 0 !important; } /* ---------- Tagline ---------- */ .header .header__bottom_logo .prf-h-tagline-single { display: block !important; font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif !important; font-size: 9.5px !important; font-weight: 600 !important; line-height: 1.4 !important; letter-spacing: 0.15em !important; color: #30665F !important; text-transform: uppercase !important; margin: 8px 0 0 !important; } /* ---------- Section 42 line ---------- Plain muted text; the old solid-green badge competed with the name. */ .header .header__bottom_logo .prf-h-legal-bar { display: block !important; font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif !important; font-size: 8.5px !important; font-weight: 500 !important; line-height: 1.4 !important; letter-spacing: 0.03em !important; text-transform: none !important; color: #5A6B68 !important; background-color: transparent !important; background-image: none !important; border: none !important; border-radius: 0 !important; padding: 0 !important; margin: 5px 0 0 !important; } .header .header__bottom_logo .prf-h-legal-bar::before, .header .header__bottom_logo .prf-h-legal-bar::after { content: none !important; } /* ---------- Laptop ---------- */ @media (max-width: 1199px) { .header .header__brand-left .header__bottom_logo.prf-logo-lockup-v2 img.prf-header-emblem, .header .header__brand-left .header__bottom_logo img, .header .header__bottom_logo img.prf-header-emblem, .header .header__bottom_logo img { width: 76px !important; height: 76px !important; min-width: 76px !important; max-width: 76px !important; } .header .header__bottom_logo .prf-h-name-single { font-size: 21px !important; } } /* ---------- Tablet / phone ---------- The name wraps rather than shrinking to an unreadable size, and the lockup leaves room for the menu button. */ @media (max-width: 991px) { .header .header__bottom_logo.prf-logo-lockup-v2, .header .header__bottom_logo { gap: 12px !important; max-width: calc(100vw - 108px) !important; } .header .header__brand-left .header__bottom_logo.prf-logo-lockup-v2 img.prf-header-emblem, .header .header__brand-left .header__bottom_logo img, .header .header__bottom_logo img.prf-header-emblem, .header .header__bottom_logo img { width: 58px !important; height: 58px !important; min-width: 58px !important; max-width: 58px !important; } .header .header__bottom_logo .prf-h-name-single { font-size: 16px !important; line-height: 1.15 !important; letter-spacing: 0.01em !important; padding-bottom: 6px !important; border-bottom-width: 1.5px !important; } .header .header__bottom_logo .prf-h-tagline-single { font-size: 8px !important; letter-spacing: 0.1em !important; margin-top: 6px !important; } .header .header__bottom_logo .prf-h-legal-bar { font-size: 7.5px !important; margin-top: 3px !important; } } @media (max-width: 600px) { .header .header__brand-left .header__bottom_logo.prf-logo-lockup-v2 img.prf-header-emblem, .header .header__brand-left .header__bottom_logo img, .header .header__bottom_logo img.prf-header-emblem, .header .header__bottom_logo img { width: 50px !important; height: 50px !important; min-width: 50px !important; max-width: 50px !important; } .header .header__bottom_logo .prf-h-name-single { font-size: 14.5px !important; padding-bottom: 5px !important; } .header .header__bottom_logo .prf-h-tagline-single { font-size: 7.4px !important; letter-spacing: 0.07em !important; margin-top: 5px !important; } .header .header__bottom_logo .prf-h-legal-bar { font-size: 7px !important; } } @media (max-width: 400px) { .header .header__bottom_logo.prf-logo-lockup-v2, .header .header__bottom_logo { gap: 9px !important; max-width: calc(100vw - 92px) !important; } .header .header__brand-left .header__bottom_logo.prf-logo-lockup-v2 img.prf-header-emblem, .header .header__brand-left .header__bottom_logo img, .header .header__bottom_logo img.prf-header-emblem, .header .header__bottom_logo img { width: 46px !important; height: 46px !important; min-width: 46px !important; max-width: 46px !important; } .header .header__bottom_logo .prf-h-name-single { font-size: 13px !important; } .header .header__bottom_logo .prf-h-tagline-single { font-size: 6.8px !important; letter-spacing: 0.05em !important; } .header .header__bottom_logo .prf-h-legal-bar { font-size: 6.6px !important; } } /* END prf-header-lockup */ /* ==================== prf-homepage-fixes.css ==================== */ /* BEGIN prf-homepage-fixes */ /* Homepage (page-id-140) — corrections on top of the existing redesign. Fixes invisible text, restores the hero background, and removes the theme's justified/hyphenated body copy. */ body.page-id-140 { --hp-green: #30665F; --hp-green-dark: #1E4A42; --hp-green-deep: #16352F; --hp-tint: #EAF4F1; --hp-text: #22302D; --hp-muted: #5A6B68; } /* ---------- Justified text ---------- Kulan sets text-align:justify + hyphens:auto, which produced word rivers and mid-word breaks ("men-torship", "ed-ucation", "ca-reer"). */ body.page-id-140 p, body.page-id-140 li, body.page-id-140 a, body.page-id-140 strong, body.page-id-140 h1, body.page-id-140 h2, body.page-id-140 h3, body.page-id-140 h4, body.page-id-140 .prf-section-sub, body.page-id-140 .counter__text, body.page-id-140 .review { hyphens: none !important; -webkit-hyphens: none !important; word-spacing: normal !important; } body.page-id-140 p, body.page-id-140 li, body.page-id-140 .prf-section-sub, body.page-id-140 .counter__text, body.page-id-140 .review { text-align: left !important; text-align-last: left !important; } /* centred blocks keep their centring */ body.page-id-140 .prf-section-sub, body.page-id-140 .prf-hero-actions, body.page-id-140 .prf-support-cta p, body.page-id-140 .elementor-widget-heading .elementor-heading-title { text-align: center !important; text-align-last: center !important; } /* ---------- Hero background ---------- The redesign gives this container a linear-gradient, but the custom CSS hides the containers above it with display:none, which pushes it to 7th position. Elementor's lazy-load rule .e-con.e-parent:nth-of-type(n+3):not(.e-lazyloaded) * then forces background-image:none !important, so the gradient vanished and the hero rendered flat grey. background-color is not affected by that rule, so it carries the colour and the gradient is a progressive enhancement. */ body.page-id-140 .elementor-140 .elementor-element.elementor-element-b3eb7e0, body.page-id-140 .elementor-element.elementor-element-b3eb7e0 { background-color: #F4F7F6 !important; } /* ---------- Invisible headings in the news/blog section ---------- section.blogs ships white headings for a dark background it no longer has, so "Latest News and Updates" and its subtitle were white-on-white. */ body.page-id-140 .blogs h1, body.page-id-140 .blogs h2, body.page-id-140 .blogs h3, body.page-id-140 .blogs h4, body.page-id-140 .blogs .section__title, body.page-id-140 .blogs .section__subtitle, body.page-id-140 .blogs p, body.page-id-140 section.blogs * { color: var(--hp-green-deep) !important; } body.page-id-140 .blogs h2, body.page-id-140 .blogs .section__title { font-weight: 700 !important; } body.page-id-140 .blogs p, body.page-id-140 .blogs .section__subtitle { color: var(--hp-muted) !important; } body.page-id-140 .blogs a { color: var(--hp-green) !important; } body.page-id-140 .blogs a:hover { color: var(--hp-green-dark) !important; } /* ---------- Buttons with matching text and background ---------- .elementor-button inherited the green text colour while also having a green background, so the label disappeared. */ body.page-id-140 .elementor-button, body.page-id-140 .elementor-button .elementor-button-text, body.page-id-140 .elementor-button .elementor-button-content-wrapper { color: #fff !important; } body.page-id-140 .elementor-button { background-color: var(--hp-green) !important; transition: background-color .18s ease, transform .18s ease !important; } body.page-id-140 .elementor-button:hover { background-color: var(--hp-green-dark) !important; transform: translateY(-1px); } body.page-id-140 .elementor-button:hover .elementor-button-text { color: #fff !important; } /* ---------- Safety net ---------- Any near-white text sitting on the light page background is unreadable; pin the known light-section text to the readable palette. */ body.page-id-140 .prf-portal-section h2, body.page-id-140 .prf-quick-section h2, body.page-id-140 .prf-section-title { color: var(--hp-green-deep) !important; } body.page-id-140 .prf-section-sub, body.page-id-140 .prf-portal-card p, body.page-id-140 .prf-quick-card p { color: var(--hp-muted) !important; } /* the support CTA keeps its dark band, so its text stays white */ body.page-id-140 .prf-support-cta h2, body.page-id-140 .prf-support-cta p, body.page-id-140 .prf-support-cta .prf-section-title { color: #fff !important; } body.page-id-140 .prf-support-cta p { color: rgba(255, 255, 255, .9) !important; } /* ---------- Remove the stats counter band ---------- The "150+ / 95% / 25+ / 10+" strip. Hidden by the theme's .counter class and by the container that holds it (verified to contain nothing else), so the surrounding white band and its padding go too. The element-id is kept as a fallback for browsers without :has(). */ body.page-id-140 .counter, body.page-id-140 .e-con:has(.counter), body.page-id-140 .elementor-element-b9d14b1, body.page-id-140 .elementor-element-328d990 { display: none !important; } @media (prefers-reduced-motion: reduce) { body.page-id-140 .elementor-button { transition: none !important; } body.page-id-140 .elementor-button:hover { transform: none !important; } } /* END prf-homepage-fixes */ /* ==================== prf-introduction.css ==================== */ /* BEGIN prf-introduction */ /* Introduction page (page-id-1290) — matches the Organizational Structure treatment. Driven off the semantic .prf-intro-* classes. */ body.page-id-1290 { background: #F7FAF9 !important; } body.page-id-1290 .prf-intro-page { --in-green: #30665F; --in-green-dark: #1E4A42; --in-green-deep: #16352F; --in-tint: #EAF4F1; --in-tint-soft: #F2F8F6; --in-text: #22302D; --in-muted: #5A6B68; --in-line: rgba(20, 34, 32, 0.09); --in-shadow: 0 1px 2px rgba(20, 34, 32, .04), 0 10px 24px rgba(20, 34, 32, .06); --in-shadow-lg: 0 2px 4px rgba(20, 34, 32, .04), 0 18px 40px rgba(20, 34, 32, .10); max-width: 1080px !important; margin: 0 auto !important; padding: 8px 20px 72px !important; color: var(--in-text) !important; font-family: 'Plus Jakarta Sans', Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important; } /* theme ships text-align:justify + hyphens:auto, which produced the word rivers and mid-word breaks ("ac-countability", "pay-it-for-ward") */ body.page-id-1290 .prf-intro-page, body.page-id-1290 .prf-intro-page p, body.page-id-1290 .prf-intro-page li, body.page-id-1290 .prf-intro-page a, body.page-id-1290 .prf-intro-page strong, body.page-id-1290 .prf-intro-page h1, body.page-id-1290 .prf-intro-page h2, body.page-id-1290 .prf-intro-page h3 { text-align: left !important; text-align-last: left !important; hyphens: none !important; -webkit-hyphens: none !important; word-spacing: normal !important; } /* ---------- Hero ---------- */ body.page-id-1290 .prf-intro-page .prf-intro-hero { text-align: center !important; padding: 56px 24px 44px !important; margin-bottom: 40px !important; background: radial-gradient(ellipse at 50% 0%, rgba(48, 102, 95, .10), transparent 62%), linear-gradient(180deg, #FFFFFF 0%, #F7FAF9 100%); background-color: #FFFFFF; border: 1px solid var(--in-line); border-radius: 22px; box-shadow: var(--in-shadow); } body.page-id-1290 .prf-intro-page .prf-intro-eyebrow { display: inline-block !important; margin: 0 0 18px !important; padding: 7px 16px !important; background-color: var(--in-green) !important; color: #fff !important; font-size: 11.5px !important; font-weight: 700 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; border-radius: 999px !important; max-width: none !important; text-align: center !important; } body.page-id-1290 .prf-intro-page .prf-intro-hero h1 { margin: 0 auto 18px !important; font-size: clamp(30px, 4.2vw, 46px) !important; line-height: 1.12 !important; font-weight: 700 !important; letter-spacing: -0.015em !important; color: var(--in-green-deep) !important; text-align: center !important; text-align-last: center !important; text-transform: none !important; } body.page-id-1290 .prf-intro-page .prf-intro-lead { margin: 0 auto !important; max-width: 62ch !important; font-size: 17.5px !important; line-height: 1.65 !important; color: var(--in-muted) !important; text-align: center !important; text-align-last: center !important; } /* ---------- Sections ---------- */ body.page-id-1290 .prf-intro-page .prf-intro-section { background-color: #fff !important; border: 1px solid var(--in-line) !important; border-radius: 18px !important; padding: 34px 36px !important; margin: 0 0 24px !important; box-shadow: var(--in-shadow) !important; } body.page-id-1290 .prf-intro-page h2 { position: relative !important; margin: 0 0 18px !important; padding-bottom: 14px !important; font-size: 23px !important; font-weight: 700 !important; letter-spacing: -0.01em !important; color: var(--in-green-deep) !important; } body.page-id-1290 .prf-intro-page h2::after { content: ''; position: absolute; left: 0; bottom: 0; width: 46px; height: 3px; border-radius: 2px; background-color: var(--in-green); } body.page-id-1290 .prf-intro-page p { font-size: 16px !important; line-height: 1.7 !important; color: var(--in-muted) !important; max-width: 74ch; } body.page-id-1290 .prf-intro-page strong { color: var(--in-text) !important; font-weight: 650 !important; } /* ---------- "What We Do" list ---------- */ body.page-id-1290 .prf-intro-page .prf-intro-list { margin: 20px 0 0 !important; padding: 0 !important; list-style: none !important; } body.page-id-1290 .prf-intro-page .prf-intro-list li { position: relative !important; margin: 0 0 12px !important; padding: 14px 18px 14px 40px !important; background-color: var(--in-tint-soft) !important; border: 1px solid rgba(48, 102, 95, .12) !important; border-radius: 12px !important; font-size: 15.5px !important; line-height: 1.6 !important; color: var(--in-muted) !important; list-style: none !important; transition: background-color .18s ease, border-color .18s ease, transform .18s ease !important; } body.page-id-1290 .prf-intro-page .prf-intro-list li::marker { content: '' !important; } body.page-id-1290 .prf-intro-page .prf-intro-list li::before { content: ''; position: absolute; left: 18px; top: 21px; width: 8px; height: 8px; border-radius: 50%; background-color: var(--in-green); box-shadow: 0 0 0 4px rgba(48, 102, 95, .12); } body.page-id-1290 .prf-intro-page .prf-intro-list li:hover { background-color: var(--in-tint) !important; border-color: rgba(48, 102, 95, .3) !important; transform: translateX(2px); } body.page-id-1290 .prf-intro-page .prf-intro-list li strong { color: var(--in-green-deep) !important; } /* ---------- Values ---------- */ body.page-id-1290 .prf-intro-page .prf-intro-value-grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important; gap: 16px !important; margin-top: 24px !important; } body.page-id-1290 .prf-intro-page .prf-intro-value-card { position: relative !important; padding: 22px 24px 22px 26px !important; background-color: #fff !important; border: 1px solid var(--in-line) !important; border-radius: 14px !important; overflow: hidden !important; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease !important; } body.page-id-1290 .prf-intro-page .prf-intro-value-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background-color: var(--in-green); } body.page-id-1290 .prf-intro-page .prf-intro-value-card:hover { transform: translateY(-3px); border-color: rgba(48, 102, 95, .3) !important; box-shadow: var(--in-shadow-lg) !important; } body.page-id-1290 .prf-intro-page .prf-intro-value-card h3 { margin: 0 0 8px !important; font-size: 16.5px !important; font-weight: 700 !important; color: var(--in-green-deep) !important; } body.page-id-1290 .prf-intro-page .prf-intro-value-card p { margin: 0 !important; max-width: none !important; font-size: 14.5px !important; line-height: 1.6 !important; color: var(--in-muted) !important; } /* ---------- Links + CTA ---------- */ body.page-id-1290 .prf-intro-page a { color: var(--in-green) !important; font-weight: 600 !important; text-decoration: none !important; border-bottom: 1px solid rgba(48, 102, 95, .35); transition: color .16s ease, border-color .16s ease; } body.page-id-1290 .prf-intro-page a:hover { color: var(--in-green-dark) !important; border-bottom-color: var(--in-green-dark); } body.page-id-1290 .prf-intro-page a:focus-visible { outline: 2px solid var(--in-green); outline-offset: 3px; border-radius: 3px; } body.page-id-1290 .prf-intro-page .prf-intro-cta { margin: 0 !important; padding: 30px 36px !important; background-color: var(--in-green-dark) !important; background-image: linear-gradient(135deg, var(--in-green) 0%, var(--in-green-dark) 100%) !important; border: none !important; border-radius: 18px !important; box-shadow: 0 10px 28px rgba(30, 74, 66, .22) !important; } body.page-id-1290 .prf-intro-page .prf-intro-cta h2 { color: #fff !important; } body.page-id-1290 .prf-intro-page .prf-intro-cta h2::after { background-color: rgba(255, 255, 255, .55) !important; } body.page-id-1290 .prf-intro-page .prf-intro-cta p { color: rgba(255, 255, 255, .9) !important; max-width: none !important; margin: 0 !important; } body.page-id-1290 .prf-intro-page .prf-intro-cta a, body.page-id-1290 .prf-intro-page .prf-intro-cta strong { color: #fff !important; border-bottom-color: rgba(255, 255, 255, .5) !important; } body.page-id-1290 .prf-intro-page .prf-intro-cta a:hover { color: #fff !important; border-bottom-color: #fff !important; } /* ---------- Cascade overrides ---------- The same blanket rule that affects page 1294 also sets `body.page-id-1290 .prf-intro-section p / li / strong { color:#1e4a42 }` at (0,2,2), which outranks the plain class rules above. */ body.page-id-1290 .prf-intro-page .prf-intro-section p, body.page-id-1290 .prf-intro-page .prf-intro-section li { color: var(--in-muted) !important; } body.page-id-1290 .prf-intro-page .prf-intro-section strong, body.page-id-1290 .prf-intro-page .prf-intro-list li strong { color: var(--in-green-deep) !important; } body.page-id-1290 .prf-intro-page .prf-intro-cta p, body.page-id-1290 .prf-intro-page .prf-intro-cta strong, body.page-id-1290 .prf-intro-page .prf-intro-cta a { color: #fff !important; } /* 2x2 reads better than the 3+1 auto-fit produces for four values */ @media (min-width: 900px) { body.page-id-1290 .prf-intro-page .prf-intro-value-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } /* ---------- Responsive ---------- */ @media (max-width: 700px) { body.page-id-1290 .prf-intro-page { padding: 4px 14px 52px !important; } body.page-id-1290 .prf-intro-page .prf-intro-hero { padding: 40px 20px 34px !important; border-radius: 18px; } body.page-id-1290 .prf-intro-page .prf-intro-section, body.page-id-1290 .prf-intro-page .prf-intro-cta { padding: 24px 20px !important; border-radius: 14px !important; } body.page-id-1290 .prf-intro-page .prf-intro-value-grid { grid-template-columns: 1fr !important; } body.page-id-1290 .prf-intro-page h2 { font-size: 20px !important; } } @media (prefers-reduced-motion: reduce) { body.page-id-1290 .prf-intro-page .prf-intro-value-card, body.page-id-1290 .prf-intro-page .prf-intro-list li { transition: none !important; } body.page-id-1290 .prf-intro-page .prf-intro-value-card:hover, body.page-id-1290 .prf-intro-page .prf-intro-list li:hover { transform: none !important; } } /* END prf-introduction */ /* ==================== prf-board-directors.css ==================== */ /* BEGIN prf-board-directors */ /* Board of Directors (page-id-1292) — matches Introduction / Org Structure. Pure Elementor markup: styled by element roles (h2 = name, h4 = role, img). */ body.page-id-1292 { background: #F7FAF9 !important; --bd-green: #30665F; --bd-green-dark: #1E4A42; --bd-green-deep: #16352F; --bd-tint: #EAF4F1; --bd-tint-soft: #F2F8F6; --bd-text: #22302D; --bd-muted: #5A6B68; --bd-line: rgba(20, 34, 32, 0.09); --bd-shadow: 0 1px 2px rgba(20, 34, 32, .04), 0 10px 24px rgba(20, 34, 32, .06); --bd-shadow-lg: 0 2px 4px rgba(20, 34, 32, .04), 0 18px 40px rgba(20, 34, 32, .10); } body.page-id-1292 .elementor.elementor-1292 { background-color: transparent !important; max-width: 1140px !important; margin: 0 auto !important; padding: 8px 20px 72px !important; } /* theme ships justify + auto hyphenation */ body.page-id-1292 .page-main-content p, body.page-id-1292 .page-main-content li, body.page-id-1292 .page-main-content strong, body.page-id-1292 .page-main-content em, body.page-id-1292 .page-main-content h1, body.page-id-1292 .page-main-content h2, body.page-id-1292 .page-main-content h3, body.page-id-1292 .page-main-content h4 { text-align: left !important; text-align-last: left !important; hyphens: none !important; -webkit-hyphens: none !important; word-spacing: normal !important; } /* ---------- Page title hero ---------- */ body.page-id-1292 .elementor-1292 > .e-con:first-child { text-align: center !important; padding: 48px 24px 36px !important; margin: 0 0 28px !important; background: radial-gradient(ellipse at 50% 0%, rgba(48, 102, 95, .10), transparent 62%), linear-gradient(180deg, #FFFFFF 0%, #F7FAF9 100%) !important; background-color: #fff !important; border: 1px solid var(--bd-line) !important; border-radius: 22px !important; box-shadow: var(--bd-shadow) !important; } body.page-id-1292 .elementor-1292 > .e-con:first-child h2.elementor-heading-title { margin: 0 !important; padding: 0 !important; font-size: clamp(28px, 3.6vw, 42px) !important; line-height: 1.15 !important; font-weight: 700 !important; letter-spacing: -0.01em !important; color: var(--bd-green-deep) !important; text-align: center !important; text-align-last: center !important; } body.page-id-1292 .elementor-1292 > .e-con:first-child h2.elementor-heading-title::after { display: none !important; } body.page-id-1292 .bod-accent { color: var(--bd-green) !important; } body.page-id-1292 .page-main-content > .container h1, body.page-id-1292 .elementor-widget-heading h1.elementor-heading-title { font-size: clamp(28px, 3.6vw, 40px) !important; line-height: 1.15 !important; font-weight: 700 !important; letter-spacing: -0.01em !important; color: var(--bd-green-deep) !important; text-align: center !important; text-align-last: center !important; } /* ---------- Member cards — uniform white tiles ---------- */ body.page-id-1292 .e-con-boxed:has(img):has(h2), body.page-id-1292 .elementor-1292 .e-con.e-parent:has(.elementor-widget-image):has(h2) { background-color: #fff !important; background-image: none !important; border: 1px solid var(--bd-line) !important; border-radius: 18px !important; box-shadow: var(--bd-shadow) !important; margin-bottom: 22px !important; overflow: hidden !important; transition: box-shadow .22s ease, border-color .22s ease !important; } body.page-id-1292 .e-con-boxed:has(img):has(h2):hover { border-color: rgba(48, 102, 95, .26) !important; box-shadow: var(--bd-shadow-lg) !important; } /* ---------- Card layout: fixed photo column, flexible bio ---------- */ @media (min-width: 768px) { body.page-id-1292 .e-con-boxed:has(img):has(h2) > .e-con-inner { display: flex !important; flex-direction: row !important; align-items: flex-start !important; gap: 32px !important; } body.page-id-1292 .e-con-boxed:has(img):has(h2) > .e-con-inner > .e-con:has(.elementor-widget-image) { flex: 0 0 218px !important; width: 218px !important; max-width: 218px !important; min-width: 218px !important; padding: 12px !important; background: linear-gradient(145deg, #E8F3F1 0%, #C5DDD9 100%) !important; border-radius: 14px !important; } body.page-id-1292 .e-con-boxed:has(img):has(h2) > .e-con-inner > .e-con:has(h2) { flex: 1 1 0 !important; width: auto !important; min-width: 0 !important; max-width: none !important; } } /* ---------- Portrait — identical size for every director ---------- */ body.page-id-1292 .e-con-boxed:has(img):has(h2) .elementor-widget-image, body.page-id-1292 .e-con-boxed:has(img):has(h2) .elementor-widget-image .elementor-widget-container { width: 100% !important; max-width: 194px !important; line-height: 0 !important; } body.page-id-1292 .e-con-boxed:has(img):has(h2) .elementor-widget-image img { display: block !important; width: 194px !important; height: 194px !important; max-width: 194px !important; max-height: 194px !important; min-width: 194px !important; min-height: 194px !important; aspect-ratio: 1 / 1 !important; object-fit: cover !important; object-position: top center !important; border-radius: 10px !important; box-shadow: 0 6px 20px rgba(20, 34, 32, .16) !important; } /* ---------- Member name (scoped to cards only) ---------- */ body.page-id-1292 .e-con-boxed:has(img):has(h2) .elementor-widget-heading h2.elementor-heading-title { position: relative !important; margin: 0 0 12px !important; padding-bottom: 12px !important; font-size: 23px !important; line-height: 1.2 !important; font-weight: 700 !important; letter-spacing: -0.005em !important; color: var(--bd-green-deep) !important; text-align: left !important; } body.page-id-1292 .e-con-boxed:has(img):has(h2) .elementor-widget-heading h2.elementor-heading-title::after { content: ''; position: absolute; left: 0; bottom: 0; width: 42px; height: 3px; border-radius: 2px; background-color: var(--bd-green); } /* ---------- Role chip ---------- */ body.page-id-1292 .e-con-boxed:has(img):has(h2) .elementor-widget-heading h4.elementor-heading-title { display: inline-block !important; margin: 0 0 16px !important; padding: 7px 15px !important; background-color: var(--bd-tint) !important; border: 1px solid rgba(48, 102, 95, .16) !important; border-radius: 999px !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.1em !important; line-height: 1.4 !important; text-transform: uppercase !important; color: var(--bd-green-dark) !important; text-align: left !important; } /* ---------- Bio copy — override Elementor light-on-dark leftovers ---------- */ body.page-id-1292 .e-con-boxed:has(img):has(h2) .elementor-widget-text-editor, body.page-id-1292 .e-con-boxed:has(img):has(h2) .elementor-widget-text-editor p, body.page-id-1292 .page-main-content .elementor-widget-text-editor p, body.page-id-1292 .page-main-content .elementor-widget-text-editor { font-size: 15.5px !important; line-height: 1.75 !important; color: var(--bd-muted) !important; } /* Director bios are justified for a clean block edge against the portrait. Hyphenation stays off — the theme's `hyphens: auto` is what produced the mid-word breaks ("sev-eral", "orga-nizations", "vulnera-ble"), and the bio column is wide enough that justify alone does not open ugly word gaps. text-align-last keeps the final line ragged instead of stretched. */ body.page-id-1292 .e-con-boxed:has(img):has(h2) .elementor-widget-text-editor, body.page-id-1292 .e-con-boxed:has(img):has(h2) .elementor-widget-text-editor p, body.page-id-1292 .page-main-content .elementor-widget-text-editor p, body.page-id-1292 .page-main-content .elementor-widget-text-editor { text-align: justify !important; text-align-last: left !important; hyphens: none !important; -webkit-hyphens: none !important; word-spacing: normal !important; } body.page-id-1292 .page-main-content .elementor-widget-text-editor p + p { margin-top: 14px !important; } body.page-id-1292 .page-main-content strong, body.page-id-1292 .e-con-boxed:has(img):has(h2) .elementor-widget-text-editor strong { color: var(--bd-text) !important; font-weight: 650 !important; } /* ---------- Pull quote (CEO vision statement) ---------- */ body.page-id-1292 .e-con-boxed:has(img):has(h2) .elementor-widget-text-editor:last-of-type strong, body.page-id-1292 .page-main-content blockquote, body.page-id-1292 .page-main-content .elementor-widget-text-editor em { color: var(--bd-green-dark) !important; } body.page-id-1292 .e-con-boxed:has(img):has(h2) .elementor-widget-text-editor:last-of-type p:has(strong) { margin: 18px 0 0 !important; padding: 16px 20px !important; background-color: var(--bd-tint-soft) !important; border-left: 3px solid var(--bd-green) !important; border-radius: 0 10px 10px 0 !important; } body.page-id-1292 .e-con-boxed:has(img):has(h2) .elementor-widget-text-editor:last-of-type p:has(strong), body.page-id-1292 .e-con-boxed:has(img):has(h2) .elementor-widget-text-editor:last-of-type p:has(strong) strong { font-style: italic !important; font-size: 15px !important; line-height: 1.65 !important; font-weight: 500 !important; } body.page-id-1292 .page-main-content blockquote { margin: 18px 0 0 !important; padding: 16px 20px !important; background-color: var(--bd-tint-soft) !important; border-left: 3px solid var(--bd-green) !important; border-radius: 0 10px 10px 0 !important; font-style: italic !important; font-size: 15px !important; line-height: 1.65 !important; } /* ---------- Links ---------- */ body.page-id-1292 .page-main-content a { color: var(--bd-green) !important; font-weight: 600 !important; text-decoration: none !important; border-bottom: 1px solid rgba(48, 102, 95, .35); } body.page-id-1292 .page-main-content a:hover { color: var(--bd-green-dark) !important; border-bottom-color: var(--bd-green-dark); } body.page-id-1292 .page-main-content a:focus-visible { outline: 2px solid var(--bd-green); outline-offset: 3px; border-radius: 3px; } /* ---------- Responsive ---------- */ @media (max-width: 767px) { body.page-id-1292 .elementor.elementor-1292 { padding: 8px 14px 56px !important; } body.page-id-1292 .elementor-1292 > .e-con:first-child { padding: 36px 18px 28px !important; margin-bottom: 20px !important; border-radius: 16px !important; } body.page-id-1292 .e-con-boxed:has(img):has(h2) { border-radius: 14px !important; margin-bottom: 16px !important; padding: 24px 20px !important; } body.page-id-1292 .e-con-boxed:has(img):has(h2) > .e-con-inner > .e-con:has(.elementor-widget-image) { width: 100% !important; max-width: 220px !important; min-width: 0 !important; margin: 0 auto 16px !important; padding: 10px !important; background: linear-gradient(145deg, #E8F3F1 0%, #C5DDD9 100%) !important; border-radius: 14px !important; } body.page-id-1292 .e-con-boxed:has(img):has(h2) .elementor-widget-heading h2.elementor-heading-title { font-size: 20px !important; text-align: center !important; } body.page-id-1292 .e-con-boxed:has(img):has(h2) .elementor-widget-heading h2.elementor-heading-title::after { left: 50% !important; transform: translateX(-50%) !important; } body.page-id-1292 .e-con-boxed:has(img):has(h2) .elementor-widget-heading h4.elementor-heading-title { display: inline-block !important; max-width: 100% !important; white-space: normal !important; margin-left: auto !important; margin-right: auto !important; text-align: center !important; } body.page-id-1292 .e-con-boxed:has(img):has(h2) .elementor-widget-image img { width: 100% !important; height: auto !important; max-width: 200px !important; max-height: 200px !important; min-width: 0 !important; min-height: 0 !important; aspect-ratio: 1 / 1 !important; margin: 0 auto !important; } } @media (prefers-reduced-motion: reduce) { body.page-id-1292 .e-con-boxed:has(img):has(h2) { transition: none !important; } } /* END prf-board-directors */ /* ==================== prf-org-structure.css ==================== */ /* BEGIN prf-org-structure */ /* Organizational Structure page (page-id-1294) — full restyle. Targets the semantic .prf-org-* classes in the page content, so nothing here depends on generated builder IDs. */ body.page-id-1294 { background: #F7FAF9 !important; } .prf-org-page { --org-green: #30665F; --org-green-dark: #1E4A42; --org-green-deep: #16352F; --org-tint: #EAF4F1; --org-tint-soft: #F2F8F6; --org-text: #22302D; --org-muted: #5A6B68; --org-line: rgba(20, 34, 32, 0.09); --org-shadow: 0 1px 2px rgba(20, 34, 32, .04), 0 10px 24px rgba(20, 34, 32, .06); --org-shadow-lg: 0 2px 4px rgba(20, 34, 32, .04), 0 18px 40px rgba(20, 34, 32, .10); max-width: 1080px !important; margin: 0 auto !important; padding: 8px 20px 72px !important; color: var(--org-text) !important; font-family: 'Plus Jakarta Sans', Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important; } /* Kill the theme's justified text + auto hyphenation — this is what caused the word rivers and mid-word breaks ("stu-dent", "individ-uals"). */ .prf-org-page, .prf-org-page p, .prf-org-page li, .prf-org-page a, .prf-org-page strong, .prf-org-page h1, .prf-org-page h2, .prf-org-page h3 { text-align: left !important; text-align-last: left !important; hyphens: none !important; -webkit-hyphens: none !important; word-spacing: normal !important; } .prf-org-page p { font-size: 16px !important; line-height: 1.7 !important; color: var(--org-muted) !important; max-width: 70ch; } .prf-org-page strong { color: var(--org-text) !important; font-weight: 650 !important; } /* ---------- Hero ---------- */ .prf-org-hero { text-align: center !important; padding: 56px 24px 44px !important; margin-bottom: 40px !important; background: radial-gradient(ellipse at 50% 0%, rgba(48, 102, 95, .10), transparent 62%), linear-gradient(180deg, #FFFFFF 0%, #F7FAF9 100%); border: 1px solid var(--org-line); border-radius: 22px; box-shadow: var(--org-shadow); } .prf-org-eyebrow { display: inline-block !important; margin: 0 0 18px !important; padding: 7px 16px !important; background: var(--org-green) !important; color: #fff !important; font-size: 11.5px !important; font-weight: 700 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; border-radius: 999px !important; max-width: none !important; } .prf-org-hero h1 { margin: 0 auto 18px !important; font-size: clamp(30px, 4.2vw, 46px) !important; line-height: 1.12 !important; font-weight: 700 !important; letter-spacing: -0.015em !important; color: var(--org-green-deep) !important; text-align: center !important; text-transform: none !important; } .prf-org-lead { margin: 0 auto !important; max-width: 62ch !important; font-size: 17.5px !important; line-height: 1.65 !important; color: var(--org-muted) !important; text-align: center !important; text-align-last: center !important; } /* ---------- Section cards ---------- */ .prf-org-section, .prf-org-chart-wrap { background: #fff !important; border: 1px solid var(--org-line) !important; border-radius: 18px !important; padding: 34px 36px !important; margin: 0 0 24px !important; box-shadow: var(--org-shadow) !important; } .prf-org-page h2 { position: relative !important; margin: 0 0 18px !important; padding-bottom: 14px !important; font-size: 23px !important; font-weight: 700 !important; letter-spacing: -0.01em !important; color: var(--org-green-deep) !important; } .prf-org-page h2::after { content: ''; position: absolute; left: 0; bottom: 0; width: 46px; height: 3px; border-radius: 2px; background: var(--org-green); } .prf-org-chart-wrap h2 { text-align: center !important; } .prf-org-chart-wrap h2::after { left: 50%; transform: translateX(-50%); } /* ---------- Org chart ---------- */ .prf-org-chart { margin-top: 30px !important; padding: 8px 0 4px !important; } .prf-org-level { display: flex !important; justify-content: center !important; gap: 18px !important; flex-wrap: wrap !important; } .prf-org-level-3 { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 16px !important; } .prf-org-node { flex: 0 1 auto; min-width: 0; padding: 18px 20px !important; background: #fff !important; border: 1px solid var(--org-line) !important; border-radius: 14px !important; box-shadow: 0 1px 2px rgba(20, 34, 32, .04), 0 6px 16px rgba(20, 34, 32, .05) !important; text-align: center !important; transition: transform .2s ease, box-shadow .2s ease !important; } .prf-org-node:hover { transform: translateY(-2px); box-shadow: var(--org-shadow-lg) !important; } .prf-org-node h3 { margin: 0 0 6px !important; font-size: 15.5px !important; font-weight: 700 !important; line-height: 1.3 !important; color: var(--org-green-deep) !important; text-align: center !important; } .prf-org-node p { margin: 0 !important; max-width: none !important; font-size: 13.5px !important; line-height: 1.5 !important; color: var(--org-muted) !important; text-align: center !important; } /* Primary node — was dark-green text on a dark-green gradient (~1.4:1). Both lines are now white/near-white on the gradient. */ .prf-org-node-primary { min-width: 320px !important; padding: 22px 30px !important; background: linear-gradient(135deg, var(--org-green) 0%, var(--org-green-dark) 100%) !important; border-color: transparent !important; box-shadow: 0 6px 18px rgba(30, 74, 66, .28) !important; } .prf-org-node-primary h3 { color: #fff !important; font-size: 17px !important; letter-spacing: 0.01em !important; } .prf-org-node-primary p { color: rgba(255, 255, 255, 0.88) !important; font-size: 14px !important; } /* Second tier reads as a distinct rank */ .prf-org-level-2 .prf-org-node { min-width: 280px !important; border-color: rgba(48, 102, 95, .28) !important; background: var(--org-tint-soft) !important; } /* Connectors */ .prf-org-connector { position: relative !important; height: 26px !important; margin: 0 auto !important; background: none !important; } .prf-org-connector::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: linear-gradient(180deg, rgba(48, 102, 95, .45), rgba(48, 102, 95, .22)); border-radius: 2px; } /* Horizontal rail across the four leaf nodes */ .prf-org-level-3 { position: relative !important; margin-top: 26px !important; } .prf-org-level-3::before { content: ''; position: absolute; top: -26px; left: 12.5%; right: 12.5%; height: 2px; background: rgba(48, 102, 95, .28); border-radius: 2px; } .prf-org-level-3 .prf-org-node { position: relative !important; } .prf-org-level-3 .prf-org-node::before { content: ''; position: absolute; top: -26px; left: 50%; width: 2px; height: 26px; margin-left: -1px; background: rgba(48, 102, 95, .28); } /* ---------- Board list ---------- */ .prf-org-list { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important; gap: 10px !important; margin: 22px 0 !important; padding: 0 !important; list-style: none !important; } .prf-org-list li { display: flex !important; align-items: center !important; gap: 12px !important; margin: 0 !important; padding: 13px 16px !important; background: var(--org-tint-soft) !important; border: 1px solid rgba(48, 102, 95, .12) !important; border-radius: 12px !important; font-size: 15px !important; font-weight: 600 !important; color: var(--org-text) !important; list-style: none !important; transition: background .18s ease, border-color .18s ease, transform .18s ease !important; } .prf-org-list li::marker { content: '' !important; } .prf-org-list li::before { content: ''; flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: var(--org-green); box-shadow: 0 0 0 4px rgba(48, 102, 95, .12); } .prf-org-list li:hover { background: var(--org-tint) !important; border-color: rgba(48, 102, 95, .3) !important; transform: translateX(2px); } /* ---------- Program function cards ---------- */ .prf-org-func-grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important; gap: 16px !important; margin-top: 24px !important; } .prf-org-func-card { position: relative !important; padding: 22px 24px 22px 26px !important; background: #fff !important; border: 1px solid var(--org-line) !important; border-radius: 14px !important; overflow: hidden !important; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease !important; } .prf-org-func-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--org-green), var(--org-green-dark)); } .prf-org-func-card:hover { transform: translateY(-3px); border-color: rgba(48, 102, 95, .3) !important; box-shadow: var(--org-shadow-lg) !important; } .prf-org-func-card h3 { margin: 0 0 8px !important; font-size: 16.5px !important; font-weight: 700 !important; color: var(--org-green-deep) !important; } .prf-org-func-card p { margin: 0 !important; max-width: none !important; font-size: 14.5px !important; line-height: 1.6 !important; } /* ---------- Links + CTA ---------- */ .prf-org-page a:not(.prf-org-list a) { color: var(--org-green) !important; font-weight: 600 !important; text-decoration: none !important; border-bottom: 1px solid rgba(48, 102, 95, .35); transition: color .16s ease, border-color .16s ease; } .prf-org-page a:hover { color: var(--org-green-dark) !important; border-bottom-color: var(--org-green-dark); } .prf-org-page a:focus-visible { outline: 2px solid var(--org-green); outline-offset: 3px; border-radius: 3px; } .prf-org-cta { margin: 0 !important; padding: 30px 36px !important; background: linear-gradient(135deg, var(--org-green) 0%, var(--org-green-dark) 100%) !important; border: none !important; border-radius: 18px !important; box-shadow: 0 10px 28px rgba(30, 74, 66, .22) !important; } .prf-org-cta h2, .prf-org-cta h3 { color: #fff !important; margin-bottom: 10px !important; padding-bottom: 12px !important; } .prf-org-cta h2::after { background: rgba(255, 255, 255, .55) !important; } .prf-org-cta p { color: rgba(255, 255, 255, .9) !important; max-width: none !important; margin: 0 !important; } .prf-org-cta a { color: #fff !important; border-bottom-color: rgba(255, 255, 255, .5) !important; } .prf-org-cta a:hover { color: #fff !important; border-bottom-color: #fff !important; } /* ---------- Responsive ---------- */ @media (max-width: 900px) { .prf-org-level-3 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .prf-org-level-3::before { left: 25%; right: 25%; } } @media (max-width: 700px) { .prf-org-page { padding: 4px 14px 52px !important; } .prf-org-hero { padding: 40px 20px 34px !important; border-radius: 18px; } .prf-org-section, .prf-org-chart-wrap, .prf-org-cta { padding: 24px 20px !important; border-radius: 14px !important; } .prf-org-level-3 { grid-template-columns: 1fr !important; margin-top: 18px !important; } /* stacked chart: drop the horizontal rail, keep single connectors */ .prf-org-level-3::before { display: none; } .prf-org-level-3 .prf-org-node::before { top: -14px; height: 14px; } .prf-org-level-3 .prf-org-node { margin-top: 14px !important; } .prf-org-node-primary, .prf-org-level-2 .prf-org-node { min-width: 0 !important; width: 100% !important; } .prf-org-page h2 { font-size: 20px !important; } } @media (prefers-reduced-motion: reduce) { .prf-org-node, .prf-org-func-card, .prf-org-list li { transition: none !important; } .prf-org-node:hover, .prf-org-func-card:hover, .prf-org-list li:hover { transform: none !important; } } /* ---------- Cascade overrides ---------- A pre-existing blanket rule sets every paragraph and on this page to one dark-green colour: body.page-id-1294 .page-main-content p, body.page-id-1294 .page-main-content strong { color: #1e4a42 !important; } At (0,2,2) it outranks the plain .prf-org-* class rules above — which is why the primary chart node's text rendered dark-green-on-dark-green (~1.4:1) even though the original CSS asked for #fff. These re-declare the same colours at (0,3,2) so the intended values win. Worth deleting that blanket rule when the 1290 / 1292 pages get reworked. */ body.page-id-1294 .page-main-content .prf-org-page p, body.page-id-1294 .page-main-content .prf-org-page li { color: var(--org-muted) !important; } body.page-id-1294 .page-main-content .prf-org-page .prf-org-lead { color: var(--org-muted) !important; } /* the eyebrow is a

, so it needs to opt out of the paragraph colour above */ body.page-id-1294 .page-main-content .prf-org-page .prf-org-eyebrow { color: #fff !important; } /* The blanket text-align:left above (which kills the theme's justify) also flattens the hero, so re-centre it at the same weight. */ body.page-id-1294 .page-main-content .prf-org-page .prf-org-hero, body.page-id-1294 .page-main-content .prf-org-page .prf-org-hero h1, body.page-id-1294 .page-main-content .prf-org-page .prf-org-hero .prf-org-lead, body.page-id-1294 .page-main-content .prf-org-page .prf-org-chart-wrap h2, body.page-id-1294 .page-main-content .prf-org-page .prf-org-node h3, body.page-id-1294 .page-main-content .prf-org-page .prf-org-node p { text-align: center !important; text-align-last: center !important; } /* 2x2 reads better than the 3+1 that auto-fit produces at this width */ @media (min-width: 900px) { body.page-id-1294 .page-main-content .prf-org-page .prf-org-func-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } body.page-id-1294 .page-main-content .prf-org-page strong { color: var(--org-text) !important; } body.page-id-1294 .page-main-content .prf-org-page .prf-org-node p { color: var(--org-muted) !important; } /* the two lines that sit on the dark gradient */ body.page-id-1294 .page-main-content .prf-org-page .prf-org-node-primary h3 { color: #fff !important; } body.page-id-1294 .page-main-content .prf-org-page .prf-org-node-primary p { color: rgba(255, 255, 255, 0.88) !important; } body.page-id-1294 .page-main-content .prf-org-page .prf-org-func-card p { color: var(--org-muted) !important; } body.page-id-1294 .page-main-content .prf-org-page .prf-org-list li { color: var(--org-text) !important; } /* CTA sits on the dark gradient too */ body.page-id-1294 .page-main-content .prf-org-page .prf-org-cta p { color: rgba(255, 255, 255, 0.9) !important; } body.page-id-1294 .page-main-content .prf-org-page .prf-org-cta h2, body.page-id-1294 .page-main-content .prf-org-page .prf-org-cta a, body.page-id-1294 .page-main-content .prf-org-page .prf-org-cta strong { color: #fff !important; } /* END prf-org-structure */ /* ==================== prf-c2c-program.css ==================== */ /* BEGIN prf-c2c-program */ /* C2C Program page (page-id-1299). Fixes invisible headings and styles the c2c-* components, which had lost all their CSS. Scoped to the page id and driven off the semantic c2c-* classes rather than Elementor's generated element ids. */ body.page-id-1299 { background: #F7FAF9 !important; --c2c-green: #30665F; --c2c-green-dark: #1E4A42; --c2c-green-deep: #16352F; --c2c-tint: #EAF4F1; --c2c-tint-soft: #F2F8F6; --c2c-text: #22302D; --c2c-muted: #5A6B68; --c2c-line: rgba(20, 34, 32, 0.09); --c2c-shadow: 0 1px 2px rgba(20, 34, 32, .04), 0 10px 24px rgba(20, 34, 32, .06); --c2c-shadow-lg: 0 2px 4px rgba(20, 34, 32, .04), 0 18px 40px rgba(20, 34, 32, .10); } /* ---------- Headings ---------- The Kulan theme sets h1-h6 { color:#fff } globally, and Elementor's saved per-element styles also force #FFFFFF (configured back when these sections had dark backgrounds). The backgrounds are transparent now, so every heading rendered white-on-white. */ body.page-id-1299 h1, body.page-id-1299 h2, body.page-id-1299 h3, body.page-id-1299 h4, body.page-id-1299 h5, body.page-id-1299 h6, body.page-id-1299 .elementor-heading-title, body.page-id-1299 .elementor-widget-heading .elementor-heading-title { color: var(--c2c-green-deep) !important; } body.page-id-1299 h1.elementor-heading-title, body.page-id-1299 .elementor-widget-heading h1.elementor-heading-title { font-size: clamp(30px, 4vw, 44px) !important; line-height: 1.12 !important; font-weight: 700 !important; letter-spacing: -0.015em !important; margin-bottom: 18px !important; } body.page-id-1299 h2.elementor-heading-title, body.page-id-1299 .elementor-widget-heading h2.elementor-heading-title { position: relative !important; font-size: clamp(23px, 2.6vw, 30px) !important; line-height: 1.2 !important; font-weight: 700 !important; letter-spacing: -0.01em !important; padding-bottom: 14px !important; margin-bottom: 22px !important; } body.page-id-1299 h2.elementor-heading-title::after { content: ''; position: absolute; left: 0; bottom: 0; width: 46px; height: 3px; border-radius: 2px; background: var(--c2c-green); } /* ---------- Body copy ---------- */ body.page-id-1299 .elementor p, body.page-id-1299 .elementor li, body.page-id-1299 .elementor a, body.page-id-1299 .elementor strong, body.page-id-1299 .elementor h1, body.page-id-1299 .elementor h2, body.page-id-1299 .elementor h3, body.page-id-1299 .elementor h4 { text-align: left !important; text-align-last: left !important; hyphens: none !important; -webkit-hyphens: none !important; word-spacing: normal !important; } body.page-id-1299 .elementor p, body.page-id-1299 .elementor li { font-size: 16px !important; line-height: 1.7 !important; color: var(--c2c-text) !important; } body.page-id-1299 .elementor strong { color: var(--c2c-green-deep) !important; font-weight: 650 !important; } body.page-id-1299 .c2c-lead { font-size: 18px !important; line-height: 1.65 !important; color: var(--c2c-muted) !important; max-width: 70ch; } body.page-id-1299 .c2c-intro { font-size: 16.5px !important; line-height: 1.7 !important; color: var(--c2c-muted) !important; max-width: 74ch; } /* ---------- Buttons ---------- */ body.page-id-1299 .c2c-cta-row { display: flex !important; flex-wrap: wrap !important; gap: 12px !important; margin-top: 26px !important; } body.page-id-1299 .c2c-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 13px 30px !important; background: var(--c2c-green) !important; color: #fff !important; font-size: 15px !important; font-weight: 600 !important; border: 1px solid var(--c2c-green) !important; border-radius: 999px !important; text-decoration: none !important; box-shadow: 0 4px 14px rgba(48, 102, 95, .22) !important; transition: background .18s ease, transform .18s ease, box-shadow .18s ease !important; } body.page-id-1299 .c2c-btn:hover { background: var(--c2c-green-dark) !important; border-color: var(--c2c-green-dark) !important; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(48, 102, 95, .3) !important; } body.page-id-1299 .c2c-btn-outline { background: transparent !important; color: var(--c2c-green) !important; border: 1px solid rgba(48, 102, 95, .4) !important; box-shadow: none !important; } body.page-id-1299 .c2c-btn-outline:hover { background: var(--c2c-tint) !important; color: var(--c2c-green-dark) !important; border-color: var(--c2c-green) !important; } /* ---------- Requirement cards ---------- */ body.page-id-1299 .c2c-grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)) !important; gap: 18px !important; margin: 26px 0 !important; } body.page-id-1299 .c2c-card, body.page-id-1299 .c2c-card-wide { position: relative !important; padding: 24px 26px !important; background: #fff !important; border: 1px solid var(--c2c-line) !important; border-radius: 16px !important; box-shadow: var(--c2c-shadow) !important; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease !important; } body.page-id-1299 .c2c-card:hover, body.page-id-1299 .c2c-card-wide:hover { transform: translateY(-2px); border-color: rgba(48, 102, 95, .28) !important; box-shadow: var(--c2c-shadow-lg) !important; } body.page-id-1299 .c2c-card-wide { grid-column: 1 / -1 !important; } body.page-id-1299 .c2c-card h4, body.page-id-1299 .c2c-card-wide h4 { margin: 0 0 14px !important; padding-bottom: 12px !important; font-size: 17px !important; font-weight: 700 !important; line-height: 1.3 !important; color: var(--c2c-green-deep) !important; border-bottom: 1px solid var(--c2c-line) !important; } body.page-id-1299 .c2c-card ul, body.page-id-1299 .c2c-card-wide ul { margin: 0 !important; padding-left: 0 !important; list-style: none !important; } body.page-id-1299 .c2c-card li, body.page-id-1299 .c2c-card-wide li { position: relative !important; margin: 0 0 9px !important; padding-left: 20px !important; font-size: 15px !important; line-height: 1.6 !important; list-style: none !important; } body.page-id-1299 .c2c-card li::before, body.page-id-1299 .c2c-card-wide li::before { content: ''; position: absolute; left: 2px; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--c2c-green); } /* nested requirement lists */ body.page-id-1299 .c2c-card li ul, body.page-id-1299 .c2c-card-wide li ul { margin: 8px 0 0 !important; } body.page-id-1299 .c2c-card li li::before, body.page-id-1299 .c2c-card-wide li li::before { background: transparent; border: 1.5px solid var(--c2c-green); } /* ordered document list keeps its numbers */ body.page-id-1299 .c2c-card-wide ol { margin: 0 !important; padding-left: 20px !important; } body.page-id-1299 .c2c-card-wide ol > li { padding-left: 4px !important; margin-bottom: 12px !important; list-style: decimal !important; } body.page-id-1299 .c2c-card-wide ol > li::before { display: none !important; } /* ---------- Field tags ---------- */ body.page-id-1299 .c2c-tags { display: flex !important; flex-wrap: wrap !important; gap: 9px !important; margin: 4px 0 0 !important; padding: 0 !important; list-style: none !important; } body.page-id-1299 .c2c-tags li { margin: 0 !important; padding: 8px 15px !important; background: var(--c2c-tint) !important; border: 1px solid rgba(48, 102, 95, .16) !important; border-radius: 999px !important; font-size: 14px !important; font-weight: 600 !important; color: var(--c2c-green-dark) !important; list-style: none !important; } body.page-id-1299 .c2c-tags li::before { display: none !important; } /* ---------- Notes ---------- */ body.page-id-1299 .c2c-note { margin: 20px 0 !important; padding: 16px 20px !important; background: var(--c2c-tint-soft) !important; border-left: 3px solid var(--c2c-green) !important; border-radius: 0 10px 10px 0 !important; font-size: 15.5px !important; color: var(--c2c-text) !important; } body.page-id-1299 .c2c-footnote { margin-top: 16px !important; font-size: 14.5px !important; color: var(--c2c-muted) !important; } /* ---------- Selection process steps ---------- */ body.page-id-1299 .c2c-steps { display: grid !important; gap: 14px !important; margin: 26px 0 !important; } body.page-id-1299 .c2c-step { display: flex !important; align-items: flex-start !important; gap: 18px !important; padding: 20px 24px !important; background: #fff !important; border: 1px solid var(--c2c-line) !important; border-radius: 14px !important; box-shadow: var(--c2c-shadow) !important; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease !important; } body.page-id-1299 .c2c-step:hover { transform: translateX(3px); border-color: rgba(48, 102, 95, .28) !important; box-shadow: var(--c2c-shadow-lg) !important; } /* Elementor's lazy-load rule forces `background-image: none !important` on every descendant of the 3rd+ container until JS adds .e-lazyloaded, which silently strips gradients. background-color is untouched by it, so the solid fill is the reliable layer and the gradient is a bonus when it survives — never a white-on-white circle. */ body.page-id-1299 .c2c-step-num { flex: 0 0 auto !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 44px !important; height: 44px !important; background-color: var(--c2c-green) !important; background-image: linear-gradient(135deg, var(--c2c-green) 0%, var(--c2c-green-dark) 100%) !important; color: #fff !important; font-size: 15px !important; font-weight: 700 !important; border-radius: 50% !important; box-shadow: 0 4px 12px rgba(48, 102, 95, .25) !important; } body.page-id-1299 .c2c-step h4 { margin: 0 0 5px !important; font-size: 16.5px !important; font-weight: 700 !important; color: var(--c2c-green-deep) !important; } body.page-id-1299 .c2c-step p { margin: 0 !important; font-size: 15px !important; color: var(--c2c-muted) !important; } /* ---------- Commitment ---------- */ body.page-id-1299 .c2c-commitment { margin: 26px 0 !important; padding: 26px 28px !important; background: #fff !important; border: 1px solid var(--c2c-line) !important; border-radius: 16px !important; box-shadow: var(--c2c-shadow) !important; } body.page-id-1299 .c2c-commitment h4 { margin: 0 0 10px !important; font-size: 17px !important; font-weight: 700 !important; color: var(--c2c-green-deep) !important; } body.page-id-1299 .c2c-commitment h4 ~ h4 { margin-top: 22px !important; padding-top: 20px !important; border-top: 1px solid var(--c2c-line) !important; } body.page-id-1299 .c2c-commitment p { margin: 0 !important; color: var(--c2c-muted) !important; } /* ---------- Quote ---------- */ body.page-id-1299 .c2c-quote { position: relative !important; margin: 30px 0 !important; padding: 30px 34px 30px 62px !important; background-color: var(--c2c-green-dark) !important; background-image: linear-gradient(135deg, var(--c2c-green) 0%, var(--c2c-green-dark) 100%) !important; border-radius: 18px !important; color: #fff !important; font-size: 19px !important; line-height: 1.55 !important; font-weight: 500 !important; font-style: italic !important; box-shadow: 0 10px 28px rgba(30, 74, 66, .22) !important; } body.page-id-1299 .c2c-quote::before { content: '\201C'; position: absolute; left: 22px; top: 14px; font-size: 56px; line-height: 1; font-family: Georgia, 'Times New Roman', serif; color: rgba(255, 255, 255, .38); } /* ---------- Links ---------- */ body.page-id-1299 .elementor a:not(.c2c-btn) { color: var(--c2c-green) !important; font-weight: 600 !important; text-decoration: none !important; border-bottom: 1px solid rgba(48, 102, 95, .35); transition: color .16s ease, border-color .16s ease; } body.page-id-1299 .elementor a:not(.c2c-btn):hover { color: var(--c2c-green-dark) !important; border-bottom-color: var(--c2c-green-dark); } body.page-id-1299 .elementor a:focus-visible { outline: 2px solid var(--c2c-green); outline-offset: 3px; border-radius: 3px; } /* ---------- Responsive ---------- */ @media (max-width: 780px) { body.page-id-1299 .c2c-grid { grid-template-columns: 1fr !important; } body.page-id-1299 .c2c-card, body.page-id-1299 .c2c-card-wide, body.page-id-1299 .c2c-commitment { padding: 20px 18px !important; } body.page-id-1299 .c2c-step { padding: 16px 18px !important; gap: 14px !important; } body.page-id-1299 .c2c-step-num { width: 38px !important; height: 38px !important; font-size: 14px !important; } body.page-id-1299 .c2c-quote { padding: 24px 22px 24px 46px !important; font-size: 17px !important; } body.page-id-1299 .c2c-quote::before { left: 14px; font-size: 44px; } body.page-id-1299 .c2c-btn { flex: 1 1 auto !important; } } @media (prefers-reduced-motion: reduce) { body.page-id-1299 .c2c-card, body.page-id-1299 .c2c-card-wide, body.page-id-1299 .c2c-step, body.page-id-1299 .c2c-btn { transition: none !important; } body.page-id-1299 .c2c-card:hover, body.page-id-1299 .c2c-card-wide:hover, body.page-id-1299 .c2c-step:hover, body.page-id-1299 .c2c-btn:hover { transform: none !important; } } /* END prf-c2c-program */ /* ==================== prf-contact-form.css ==================== */ /* BEGIN prf-contact-form */ /* Contact form submit button — center label vertically inside the button. */ body.page-id-8 .elementor-8 .contact__form input[type="submit"], body.page-id-8 .elementor-8 .contact__form .wpcf7-submit.common__btn { display: inline-block !important; width: auto !important; min-width: 220px !important; height: 48px !important; min-height: 48px !important; max-height: 48px !important; line-height: 48px !important; padding: 0 36px !important; text-align: center !important; vertical-align: middle !important; -webkit-appearance: none !important; appearance: none !important; box-sizing: border-box !important; border-radius: 8px !important; overflow: visible !important; } body.page-id-8 .elementor-8 .contact__form p:has(.wpcf7-submit) { display: flex !important; align-items: center !important; gap: 12px !important; height: auto !important; min-height: 0 !important; margin: 8px 0 0 !important; padding: 0 !important; line-height: normal !important; } /* END prf-contact-form */ /* ==================== prf-contact-map.css ==================== */ /* BEGIN prf-contact-map */ /* Contact page map — full-bleed, flush to viewport edges (no dark padding gaps). */ body.page-id-8 .elementor-element-bad09de, body.page-id-8 .elementor-element-bad09de > .elementor-widget-container, body.page-id-8 .elementor-8 .elementor-widget-google_maps { width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; margin-top: 40px !important; margin-bottom: 0 !important; padding: 0 !important; background: transparent !important; border: none !important; box-shadow: none !important; } body.page-id-8 .elementor-element-ee73629.e-con:has(.elementor-widget-google_maps) { width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; padding: 0 !important; background: transparent !important; } body.page-id-8 .elementor-8 .elementor-widget-google_maps .elementor-custom-embed { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; overflow: hidden !important; line-height: 0 !important; } body.page-id-8 .elementor-8 .elementor-widget-google_maps iframe { width: 100% !important; max-width: none !important; height: 420px !important; min-height: 320px !important; display: block !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; } @media (max-width: 767px) { body.page-id-8 .elementor-element-bad09de, body.page-id-8 .elementor-8 .elementor-widget-google_maps { margin-top: 28px !important; } body.page-id-8 .elementor-8 .elementor-widget-google_maps iframe { height: 320px !important; min-height: 280px !important; } } /* END prf-contact-map */ /* ==================== prf-service-details.css ==================== */ /* BEGIN prf-service-details */ /* PRF program detail pages (services CPT) — restyle the Kulan theme template and hide leftover demo sections (video, placeholder imagery). */ body.single-services { background: #F7FAF9 !important; --svc-green: #30665F; --svc-green-dark: #1E4A42; --svc-green-deep: #16352F; --svc-tint: #EAF4F1; --svc-text: #1A2624; --svc-muted: #3F4F4C; --svc-line: rgba(20, 34, 32, 0.09); --svc-shadow: 0 1px 2px rgba(20, 34, 32, .04), 0 10px 24px rgba(20, 34, 32, .06); } /* ---------- Hide theme demo leftovers ---------- */ body.single-services .thumb__img, body.single-services .second__para .pt__60.position-relative, body.single-services .service__details .dots__shap, body.single-services .service__details .rat__shap, body.single-services .second__para .icon__box img, body.single-services .work_process .bg__img { display: none !important; } /* ---------- Page header banner ---------- */ body.single-services .page__header { background: linear-gradient(135deg, #1e4a42 0%, #30665f 55%, #3d7a72 100%) !important; position: relative !important; overflow: hidden !important; } body.single-services .page__header::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 20% 50%, rgba(255, 255, 255, 0.06), transparent 55%), radial-gradient(ellipse at 80% 20%, rgba(255, 255, 255, 0.04), transparent 45%); pointer-events: none; } body.single-services .page__header .t__40, body.single-services .page__header h2 { color: #ffffff !important; font-weight: 700 !important; letter-spacing: -0.015em !important; position: relative; z-index: 1; } /* ---------- Main layout ---------- */ body.single-services .service__details { padding-top: 64px !important; padding-bottom: 80px !important; } body.single-services .service__details .col-lg-9 { background: #ffffff !important; border: 1px solid var(--svc-line) !important; border-radius: 20px !important; box-shadow: var(--svc-shadow) !important; padding: 28px 36px 36px !important; } /* Kill theme utility padding classes that create huge vertical gaps */ body.single-services .first__para.pt__60, body.single-services .first__para .pt__30, body.single-services .first__para .pt__35, body.single-services .first__para .transparent__btn.pt__40, body.single-services .second__para.pt__60, body.single-services .work_process .pt__30 { padding-top: 0 !important; } body.single-services .first__para { padding-top: 0 !important; margin-bottom: 0 !important; } body.single-services .second__para { padding-top: 24px !important; margin-top: 4px !important; border-top: 1px solid var(--svc-line) !important; } /* ---------- Typography fixes ---------- */ body.single-services .service__details, body.single-services .service__details p, body.single-services .service__details li, body.single-services .service__details h2, body.single-services .service__details h3, body.single-services .service__details h5, body.single-services .work_process p, body.single-services .work_process h2, body.single-services .work_process h3 { text-align: left !important; text-align-last: left !important; hyphens: none !important; -webkit-hyphens: none !important; word-spacing: normal !important; } body.single-services .service__details h2, body.single-services .service__details h3, body.single-services .service__details h5, body.single-services .work_process h2, body.single-services .work_process h3 { color: var(--svc-green-deep) !important; opacity: 1 !important; transform: none !important; } /* AOS fade-up can leave above-fold headings invisible if scroll never triggers */ body.single-services .service__details [data-aos], body.single-services .work_process [data-aos] { opacity: 1 !important; transform: none !important; } body.single-services .first__para .transparent__btn { display: inline-block !important; margin: 0 0 12px !important; padding: 7px 16px !important; background: var(--svc-green) !important; color: #fff !important; font-size: 11.5px !important; font-weight: 700 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; border-radius: 999px !important; border: none !important; } body.single-services .first__para .t__40 { color: var(--svc-green-deep) !important; opacity: 1 !important; transform: none !important; font-size: clamp(24px, 3vw, 32px) !important; font-weight: 700 !important; line-height: 1.2 !important; letter-spacing: -0.01em !important; margin-bottom: 14px !important; padding-top: 0 !important; position: relative; padding-bottom: 12px !important; } body.single-services .first__para .t__40::after { content: ''; position: absolute; left: 0; bottom: 0; width: 46px; height: 3px; border-radius: 2px; background: var(--svc-green); } body.single-services .first__para p.pt__35, body.single-services .service__details p { color: var(--svc-text) !important; font-size: 16px !important; line-height: 1.68 !important; margin-top: 0 !important; margin-bottom: 14px !important; } body.single-services .first__para p.pt__35:last-of-type { margin-bottom: 0 !important; } /* ---------- Feature highlight cards ---------- */ body.single-services .second__para .d-flex.justify-content-between { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 20px !important; margin-top: 8px !important; } body.single-services .second__para .d-flex.justify-content-between > div { background: var(--svc-tint) !important; border: 1px solid rgba(48, 102, 95, 0.12) !important; border-left: 4px solid var(--svc-green) !important; border-radius: 14px !important; padding: 22px 24px !important; transition: transform 0.2s ease, box-shadow 0.2s ease !important; } body.single-services .second__para .d-flex.justify-content-between > div:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(30, 74, 66, 0.1) !important; } body.single-services .second__para .icon__box { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 40px !important; height: 40px !important; border-radius: 10px !important; background: var(--svc-green) !important; flex-shrink: 0 !important; } body.single-services .second__para .icon__box::before { content: '✓'; color: #fff; font-size: 16px; font-weight: 700; } body.single-services .second__para h5.t__22 { color: var(--svc-green-deep) !important; font-size: 1.05rem !important; font-weight: 700 !important; margin: 0 !important; } body.single-services .second__para .d-flex.align-items-center.gap-3.mb-3 { margin-bottom: 12px !important; } body.single-services .second__para p { color: var(--svc-text) !important; font-size: 15px !important; line-height: 1.65 !important; margin: 0 !important; } /* ---------- Sidebar ---------- */ body.single-services .ser__sidebar { position: sticky !important; top: 100px !important; } body.single-services .more__service, body.single-services .help { background: #ffffff !important; border: 1px solid var(--svc-line) !important; border-radius: 16px !important; box-shadow: var(--svc-shadow) !important; padding: 22px 24px !important; margin-bottom: 20px !important; } body.single-services .more__service h3, body.single-services .help h3 { color: var(--svc-green-deep) !important; font-size: 1.05rem !important; font-weight: 700 !important; margin-bottom: 14px !important; padding-bottom: 10px !important; border-bottom: 2px solid var(--svc-tint) !important; } body.single-services .more__service ul { list-style: none !important; padding: 0 !important; margin: 0 !important; } body.single-services .more__service li { margin-bottom: 4px !important; } body.single-services .more__service a { color: var(--svc-text) !important; text-decoration: none !important; font-size: 14.5px !important; font-weight: 500 !important; transition: color 0.15s ease !important; display: block !important; padding: 5px 0 !important; line-height: 1.45 !important; } body.single-services .more__service a:hover { color: var(--svc-green) !important; } body.single-services .help ul { list-style: none !important; padding: 0 !important; margin: 0 !important; } body.single-services .help li { display: flex !important; align-items: flex-start !important; gap: 12px !important; margin-bottom: 10px !important; } body.single-services .help li i { color: var(--svc-green) !important; font-size: 16px !important; margin-top: 3px !important; flex-shrink: 0 !important; } body.single-services .help li p { color: var(--svc-text) !important; font-size: 14.5px !important; line-height: 1.5 !important; margin: 0 !important; } body.single-services .help li:empty, body.single-services .help li:has(p:empty) { display: none !important; } /* ---------- Work process section ---------- */ body.single-services .work_process { background: linear-gradient(180deg, #ffffff 0%, var(--svc-tint) 100%) !important; padding-top: 72px !important; padding-bottom: 80px !important; } body.single-services .work_process .transparent__btn { display: inline-block !important; padding: 7px 16px !important; background: rgba(48, 102, 95, 0.1) !important; color: var(--svc-green) !important; font-size: 11.5px !important; font-weight: 700 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; border-radius: 999px !important; border: none !important; } body.single-services .work_process .t__40 { color: var(--svc-green-deep) !important; opacity: 1 !important; transform: none !important; font-size: clamp(24px, 3vw, 32px) !important; font-weight: 700 !important; line-height: 1.2 !important; } body.single-services .work_process ul { list-style: none !important; padding: 0 !important; margin: 32px 0 0 !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 20px !important; } body.single-services .work_process ul li { background: #ffffff !important; border: 1px solid var(--svc-line) !important; border-radius: 14px !important; padding: 24px 26px !important; box-shadow: var(--svc-shadow) !important; transition: transform 0.2s ease, box-shadow 0.2s ease !important; } body.single-services .work_process ul li:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(30, 74, 66, 0.1) !important; } body.single-services .work_process ul li h3 { color: var(--svc-green-deep) !important; font-size: 1.05rem !important; font-weight: 700 !important; margin-bottom: 10px !important; } body.single-services .work_process ul li .no { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 32px !important; height: 32px !important; background: var(--svc-green) !important; color: #fff !important; font-size: 0.78rem !important; font-weight: 800 !important; border-radius: 8px !important; flex-shrink: 0 !important; } body.single-services .work_process ul li p { color: var(--svc-text) !important; font-size: 15px !important; line-height: 1.65 !important; margin: 0 !important; } /* ---------- Responsive ---------- */ @media (max-width: 991px) { body.single-services .service__details .col-lg-9 { padding: 28px 22px 32px !important; } body.single-services .second__para .d-flex.justify-content-between { grid-template-columns: 1fr !important; } body.single-services .work_process ul { grid-template-columns: 1fr !important; } body.single-services .ser__sidebar { position: static !important; } } @media (max-width: 767px) { body.single-services .service__details { padding-top: 40px !important; padding-bottom: 56px !important; } } /* END prf-service-details */