/**
 * SAP Migration Project Theme -- main stylesheet.
 *
 * Plain CSS. Edit this file directly -- there is no build step. It is
 * organized into sections (Variables, Fonts, Base, Header, Service Hero,
 * Service Why, Partners, Footer); use the header comments to jump around.
 *
 * The home page (front page / "Home" page template) has its own
 * stylesheet -- see assets/css/home.css -- kept separate so every rule
 * for it (.home-hero, .home-stats, and so on) lives in one file instead
 * of here. It depends on the design tokens declared below (:root), so
 * it is always enqueued alongside this file, never instead of it.
 */

/* ==========================================================================
   Variables -- shared colors, spacing, and typography tokens.
   Values transcribed from the approved reference designs; flagged in the
   README as needing sign-off against real brand guidelines.
   ========================================================================== */

:root {
	/* Header */
	--color-navy: #1b3b6f;
	--color-nav-text: #5b6478;
	--color-border-light: #e6ecf5;
	--color-btn-outline-border: #d8dee8;
	--gradient-btn-start: #0b4da2;
	--gradient-btn-end: #1596e8;

	--header-height: 76px;
	--header-padding-x: 80px;
	--header-padding-x-tablet: 24px;
	--header-padding-x-mobile: 16px;
	--header-max-width: 1280px;
	--header-breakpoint: 1024px;

	/* Service hero / Why / Partners */
	--color-heading: #0f172a;
	--color-body-text: #475569;
	--color-eyebrow: #64748b;
	--color-badge-icon-light-bg: #e0f0ff;
	--color-badge-icon-dark-bg: var(--gradient-btn-start);
}

/* ==========================================================================
   Fonts
   ========================================================================== */

/* Self-hosted Geist (Latin subset, variable font covering weights
   100-900). Fetched once from the official npm package into
   assets/fonts/geist/ -- the browser never requests a third-party font
   CDN at runtime. This is the only webfont on the site: every single
   font-family declaration, sitewide, is the literal `'Geist', sans-serif`
   -- no other named fallback (no Roboto, no system-font stack) anywhere,
   by explicit request. `sans-serif` is only a same-frame placeholder for
   the brief font-display: swap window before this loads. */
@font-face {
	font-family: 'Geist';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('../fonts/geist/geist-variable.woff2') format('woff2');
}

/* ==========================================================================
   Base -- element resets and base typography.
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: 'Geist', sans-serif;
	-webkit-font-smoothing: antialiased;
}

img {
	max-width: 100%;
}

a {
	color: inherit;
}

/* Visible focus outline for keyboard users. Never remove `outline`
   without a replacement -- see the theme's accessibility requirements. */
a:focus-visible,
button:focus-visible {
	outline: 2px solid var(--gradient-btn-end, #1596e8);
	outline-offset: 2px;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
}

.skip-link.screen-reader-text {
	position: absolute;
	top: -999px;
	left: 0;
	z-index: 100000;
}

.skip-link.screen-reader-text:focus {
	position: fixed;
	top: 0;
	width: auto;
	height: auto;
	padding: 12px 16px;
	clip: auto;
	background: #fff;
}

/* ==========================================================================
   Header -- a floating rounded "pill" bar (1280px max-width, 80px height,
   999px radius) inset from the viewport edges, rather than a full-bleed
   bar. The pill itself lives on .site-header__inner; .site-header is just
   a transparent positioning wrapper so it can stay sticky without adding
   its own background/shadow/border.
   ========================================================================== */

.site-header {
	position: sticky;
	top: 16px;
	margin-top: 16px;
	z-index: 1000;
	padding-left: var(--header-padding-x);
	padding-right: var(--header-padding-x);
	background-color: transparent;
	font-family: 'Geist', sans-serif;
}

/* The full desktop nav + both action buttons + logo need ~965px of
   real room inside the header pill (measured directly) -- comfortably
   available once the 80px side padding leaves enough at ~1125px+, but
   not yet in this narrow band just above the tablet breakpoint where
   the desktop nav is still shown in full. Tighten the padding only
   here (not the toggle bar's tablet/mobile padding above, which stays
   on its own -- this is purely about reclaiming width for content the
   80px-padded pill doesn't have room for yet). */
@media (min-width: 1025px) and (max-width: 1124px) {
	.site-header {
		padding-left: var(--header-padding-x-tablet);
		padding-right: var(--header-padding-x-tablet);
	}
}

@media (max-width: 1024px) {
	/* Tablet/mobile: the toggle-bar row is always solid white, never
	   transparent, regardless of scroll position. */
	.site-header {
		padding-left: var(--header-padding-x-tablet);
		padding-right: var(--header-padding-x-tablet);
		background-color: #fff;
	}
}

@media (max-width: 640px) {
	.site-header {
		top: 8px;
		margin-top: 8px;
		padding-left: var(--header-padding-x-mobile);
		padding-right: var(--header-padding-x-mobile);
	}
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	max-width: var(--header-max-width);
	height: 80px;
	margin-inline: auto;
	padding: 10px 24px;
	border-radius: 999px;
	background-color: transparent;
	box-shadow: 0 4px 16px rgba(15, 23, 42, 0.1);
	transition: background-color 0.25s ease;
}

/* Solid white once the page is scrolled (see the "is-scrolled" class
   toggled by assets/js/src/navigation.js), applied only to this pill --
   not the full-width .site-header behind it -- so scrolling never
   paints a full-width white bar over whatever section is underneath.
   Stays transparent at the very top so the hero's background photo
   shows through it. */

.site-header.is-scrolled .site-header__inner {
	background-color: #fff;
}

/* Branding. */

.site-header__branding {
	flex-shrink: 0;
}

.site-header__logo {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}

.site-header__logo-img {
	display: block;
	width: auto;
	height: 27px;
	max-width: 176.8px;
	max-height: 27px;
}

.site-header__logo-text {
	font-size: 20px;
	font-weight: 700;
	color: var(--color-navy);
}

/* Primary navigation (desktop) -- top-level bar + mega-menu flyout.

   Markup (via wp_nav_menu( 'depth' => 0 )):
     ul#primary-menu > li.menu-item-has-children            (e.g. "Services")
       > a, button.sub-menu-toggle
       > ul.sub-menu                                        (depth 1: categories column)
           > li.menu-item-has-children                      (e.g. "Pre-Migration Services")
               > a, button.sub-menu-toggle
               > ul.sub-menu                                (depth 2: that column's links)
                   > li > a                                  (leaf links)

   Default: a small dropdown under the item -- a categories column, with
   the hovered/active category's links flying out to its right. Only
   one item per level is "open" at a time (assets/js/src/navigation.js).

   Grid: typing "mega-panel-grid" into the top-level item's "CSS
   Classes" field (Appearance > Menus) turns that dropdown into a
   full-width panel instead -- see "Mega grid panel" below. */

.site-header__nav {
	flex: 1;
	display: flex;
	justify-content: center;
}

@media (max-width: 1024px) {
	.site-header__nav {
		display: none;
	}
}

.site-header__nav > ul {
	display: flex;
	align-items: center;
	gap: 32px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Reclaims the room the reduced header padding above (1025-1124px)
   still isn't quite enough for on its own: 6 top-level items at the
   full 32px gap need noticeably more width than is left over even
   after that padding cut. Must come after the base rule above --
   equal specificity, so source order decides, and a media query alone
   doesn't win against a later plain rule. */
@media (min-width: 1025px) and (max-width: 1124px) {
	.site-header__nav > ul {
		gap: 18px;
	}
}

.site-header__nav a {
	display: inline-block;
	padding: 8px 0;
	font-size: 15px;
	font-weight: 500;
	color: var(--color-nav-text);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.site-header__nav a:hover,
.site-header__nav a:focus-visible {
	color: var(--color-navy);
}

.site-header__nav > ul > .current-menu-item > a,
.site-header__nav > ul > .current-menu-ancestor > a {
	color: var(--color-navy);
	border-bottom-color: var(--gradient-btn-end);
}

/* Top-level item ("Services") -- relative anchor for the flyout panel. */

.site-header__nav > ul > li {
	position: relative;
	display: flex;
	align-items: center;
}

.site-header__nav .sub-menu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-left: 4px;
	padding: 0;
	background: none;
	border: none;
	color: currentColor;
	cursor: pointer;
}

/* Depth-0 chevron rotates open; depth-1 ("category row") chevron stays a
   static right-pointing arrow, matching the reference design. */
.site-header__nav > ul > li > .sub-menu-toggle .sub-menu-toggle-icon {
	transition: transform 0.15s ease;
}

.site-header__nav > ul > li.is-open > .sub-menu-toggle .sub-menu-toggle-icon {
	transform: rotate(180deg);
}

/* Depth-1 flyout panel (categories column) -- anchored under the
   top-level item. */

.site-header__nav .sub-menu {
	display: none;
	position: absolute;
	top: calc(100% + 12px);
	left: 0;
	min-width: 260px;
	margin: 0;
	padding: 8px;
	list-style: none;
	background-color: #fff;
	border: 1px solid var(--color-border-light);
	border-radius: 12px;
	box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12);
	z-index: 60;
}

/* Invisible bridge over the 12px gap between the pill and the panel, so
   moving the pointer down onto the panel never counts as leaving it. */
.site-header__nav > ul > li > .sub-menu::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 100%;
	height: 16px;
}

.site-header__nav > ul > li.is-open > .sub-menu {
	display: block;
}

.site-header__nav .sub-menu > li {
	position: relative;
}

.site-header__nav .sub-menu > li > a {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	/* Right padding reserves room for the absolutely positioned
	   .sub-menu-toggle button below so long labels never run under it. */
	padding: 12px 36px 12px 16px;
	border-radius: 8px;
	border-bottom: none;
	color: var(--color-navy);
	font-weight: 600;
	white-space: nowrap;
	box-sizing: border-box;
}

.site-header__nav .sub-menu > li > .sub-menu-toggle {
	position: absolute;
	top: 0;
	right: 8px;
	bottom: 0;
	margin: 0;
	padding: 0 8px;
}

.site-header__nav .sub-menu > li:hover > a,
.site-header__nav .sub-menu > li.is-open > a,
.site-header__nav .sub-menu > li > a:focus-visible {
	background-color: #eef2ff;
	color: var(--gradient-btn-end);
}

/* Depth-2 panel (right-hand column) -- anchored to the right of the
   categories column, only shown for the active category. */

.site-header__nav .sub-menu .sub-menu {
	top: 0;
	left: 100%;
	margin-left: 8px;
	min-width: 320px;
	max-height: 70vh;
	overflow-y: auto;
}

.site-header__nav .sub-menu > li.is-open > .sub-menu {
	display: block;
}

.site-header__nav .sub-menu .sub-menu > li > a {
	display: block;
	padding: 10px 12px;
	border-radius: 6px;
	color: var(--color-navy);
	font-weight: 500;
	font-size: 15px;
	line-height: 1.35;
	white-space: normal;
}

.site-header__nav .sub-menu .sub-menu > li > a:hover,
.site-header__nav .sub-menu .sub-menu > li > a:focus-visible {
	background-color: #f8fafc;
	color: var(--gradient-btn-end);
}

/* Mega grid panel -- opt-in via the "mega-panel-grid" CSS class on a
   top-level menu item. The panel spans the full width of the header
   pill (the <li> drops its own positioning so the panel anchors to
   .site-header__inner) with one equal column per category: the
   category is the column heading and its links are always listed
   underneath, no sideways flyout. */

.site-header__inner {
	position: relative;
}

.site-header__nav > ul > li.mega-panel-grid {
	position: static;
}

/* Sized to its columns rather than always full width: each category
   column is up to 300px, and the panel is only as wide as they need,
   centred under the pill -- so 2 columns sit compactly in the middle
   while 4+ grow up to the pill's full width, where the columns shrink
   evenly to share it (no 220px floor, so 5+ columns or a narrower
   window never overflow the panel or the page). */
.site-header__nav > ul > li.mega-panel-grid > .sub-menu {
	left: 50%;
	right: auto;
	transform: translateX(-50%);
	width: max-content;
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 300px);
	gap: 40px;
	padding: 36px 40px 32px;
	border-radius: 20px;
}

.site-header__nav > ul > li.mega-panel-grid.is-open > .sub-menu {
	display: grid;
}

/* Column heading (depth-1 category). */

.site-header__nav > ul > li.mega-panel-grid > .sub-menu > li > a,
.site-header__nav > ul > li.mega-panel-grid > .sub-menu > li:hover > a,
.site-header__nav > ul > li.mega-panel-grid > .sub-menu > li.is-open > a {
	display: block;
	padding: 0 0 16px;
	border-radius: 0;
	background: none;
	color: var(--color-navy);
	font-size: 17px;
	line-height: 1.35;
	white-space: normal;
}

.site-header__nav > ul > li.mega-panel-grid > .sub-menu > li > a:hover,
.site-header__nav > ul > li.mega-panel-grid > .sub-menu > li > a:focus-visible {
	color: var(--gradient-btn-end);
}

/* Columns are always expanded, so the category toggle has nothing to do. */
.site-header__nav > ul > li.mega-panel-grid > .sub-menu > li > .sub-menu-toggle {
	display: none;
}

/* Column links (depth-2 pages) -- static list under each heading. */

.site-header__nav > ul > li.mega-panel-grid .sub-menu .sub-menu {
	display: block;
	position: static;
	min-width: 0;
	max-height: none;
	margin: 0;
	padding: 0;
	overflow: visible;
	background: none;
	border: none;
	border-radius: 0;
	box-shadow: none;
}

.site-header__nav > ul > li.mega-panel-grid .sub-menu .sub-menu > li > a {
	padding: 8px 0;
	border-radius: 0;
	color: var(--color-nav-text);
	font-weight: 400;
	line-height: 1.4;
}

.site-header__nav > ul > li.mega-panel-grid .sub-menu .sub-menu > li > a:hover,
.site-header__nav > ul > li.mega-panel-grid .sub-menu .sub-menu > li > a:focus-visible {
	background: none;
	color: var(--gradient-btn-end);
}

/* CTA buttons -- shared shape, distinct fill. */

/* Box model per-variant (equal 42px height on both, via padding + line-height
   math) rather than one shared padding value, since the two buttons have
   different padding specs -- see .site-header__btn--outline/--gradient. */

.site-header__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	white-space: nowrap;
	text-decoration: none;
	transition: opacity 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.site-header__btn--outline {
	padding: 11px 14px;
	border: 1px solid #004195;
	border-radius: 999px;
	background-color: #fff;
	color: #004195;
}

.site-header__btn--outline:hover,
.site-header__btn--outline:focus-visible {
	background-color: #f2f8ff;
	border-color: #004195;
}

.site-header__btn--gradient {
	padding: 6px 6px 6px 16px;
	border-radius: 40px;
	border: none;
	font-weight: 700;
	color: #fff;
	background: linear-gradient(103.84deg, #004195 0%, #01aef0 100%);
}

.site-header__btn--gradient:hover,
.site-header__btn--gradient:focus-visible {
	opacity: 0.92;
}

/* Button 2's icon only -- Button 1 (outline) never has one. Sized via
   padding so it fills the 30px gap the gradient button's own padding
   leaves (42px height - 6px top - 6px bottom = 30px), matching the same
   pattern used for the home hero buttons. */

.site-header__btn-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	flex-shrink: 0;
	border-radius: 50%;
	color: #004195;
	background-color: #fff;
}

.site-header__btn-icon svg,
.site-header__btn-icon img {
	width: auto;
	height: auto;
	object-fit: contain;
}

/* Actions cluster (buttons + mobile toggle). */

.site-header__actions {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
}

@media (max-width: 1024px) {
	.site-header__actions .site-header__btn {
		display: none;
	}
}

.site-header__toggle {
	display: none;
	align-items: center;
	justify-content: center;
	padding: 8px;
	background: none;
	border: none;
	color: var(--color-navy);
	cursor: pointer;
}

@media (max-width: 1024px) {
	.site-header__toggle {
		display: inline-flex;
	}
}

/* Mobile/tablet nav panel -- accordion, not a flyout. Any depth of
   .sub-menu is closed by default and expands inline in place when its
   sibling .sub-menu-toggle is activated; nesting is shown via
   indentation rather than a second column, since there's no room for
   one. */

.site-header__mobile-nav {
	border-top: 1px solid var(--color-border-light);
	padding: 16px var(--header-padding-x-tablet) 24px;
	background-color: #fff;
}

@media (min-width: 1025px) {
	.site-header__mobile-nav {
		display: none !important;
	}
}

.site-header__mobile-nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-header__mobile-nav li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

/* Scoped to the actual <nav> links, not just ".site-header__mobile-nav
   a" -- that broader selector also matched the two CTA <a> buttons in
   the sibling .site-header__mobile-actions div (same DOM parent), and
   its higher specificity than .site-header__btn--gradient/--outline's
   own color rules silently overrode them, so "Start Migration" (meant
   to be white on its blue gradient) rendered in this muted nav-link
   grey instead -- nearly invisible against the gradient. */
.site-header__mobile-nav nav a {
	flex: 1;
	display: block;
	padding: 10px 4px;
	font-size: 15px;
	font-weight: 500;
	color: var(--color-nav-text);
	text-decoration: none;
}

.site-header__mobile-nav nav a:hover,
.site-header__mobile-nav nav a:focus-visible {
	color: var(--color-navy);
}

.site-header__mobile-nav .sub-menu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px;
	background: none;
	border: none;
	color: var(--color-nav-text);
	cursor: pointer;
}

.site-header__mobile-nav .sub-menu-toggle-icon {
	transition: transform 0.15s ease;
}

.site-header__mobile-nav .is-open > .sub-menu-toggle .sub-menu-toggle-icon {
	transform: rotate(180deg);
}

.site-header__mobile-nav .sub-menu {
	flex-basis: 100%;
	display: none;
	padding-left: 16px;
	margin-left: 4px;
}

.site-header__mobile-nav .is-open > .sub-menu {
	display: block;
}

@media (max-width: 640px) {
	.site-header__mobile-nav {
		padding-left: var(--header-padding-x-mobile);
		padding-right: var(--header-padding-x-mobile);
	}
}

.site-header__mobile-actions {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 16px;
}

.site-header__mobile-actions .site-header__btn {
	width: 100%;
}

/* ==========================================================================
   Service Resources -- "Resources & Insights" section: a heading with a
   "View All Resources" link beside a responsive 3-column grid of the
   latest blog posts. Unlike every other service-page section, the cards
   are populated live from get_posts() rather than ACF fields -- only the
   heading/link text around them is ACF-managed.
   ========================================================================== */

.service-resources {
	background-color: #F8FAFC;
}

.service-resources__inner {
	max-width: var(--header-max-width);
	margin-inline: auto;
	padding: 96px var(--header-padding-x);
}

@media (max-width: 1024px) {
	.service-resources__inner {
		padding: 64px var(--header-padding-x-tablet);
	}
}

@media (max-width: 640px) {
	.service-resources__inner {
		padding: 48px var(--header-padding-x-mobile);
	}
}

/* Header block. */

.service-resources__header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 40px;
}

@media (max-width: 640px) {
	.service-resources__header {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}
}

.service-resources__eyebrow {
	margin: 0 0 16px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #004195;
}

.service-resources__heading {
	margin: 0;
	font-size: 36px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--color-heading);
}

@media (max-width: 640px) {
	.service-resources__heading {
		font-size: 26px;
	}
}

.service-resources__view-all {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
	font-size: 15px;
	font-weight: 600;
	color: #004195;
	text-decoration: none;
}

.service-resources__view-all-icon {
	display: inline-flex;
	width: 16px;
	height: 16px;
	transition: transform 0.15s ease;
}

.service-resources__view-all-icon svg {
	width: 100%;
	height: 100%;
}

.service-resources__view-all:hover .service-resources__view-all-icon,
.service-resources__view-all:focus-visible .service-resources__view-all-icon {
	transform: translateX(3px);
}

/* Card grid. */

.service-resources__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

@media (max-width: 1024px) {
	.service-resources__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	.service-resources__grid {
		grid-template-columns: 1fr;
	}
}

.service-resources__card {
	display: flex;
	flex-direction: column;
	background-color: #fff;
    border: 1px solid #E6ECF5;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0px 4px 24px 0px #0000000F;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;

}

/* Hover lift -- shared by these cards wherever they appear (Home, Insights,
   blog posts, Service page). The Service page's own cards have the same
   effect in assets/css/service.css. */
.service-resources__card:hover,
.service-resources__card:focus-within {
	transform: translateY(-6px);
	border-color: #004195;
	box-shadow: 0px 16px 40px 0px #0041951F;
}

.service-resources__card-media {
	display: block;
}

.service-resources__card-image {
	display: block;
	width: 100%;
	height: 200px;
	object-fit: cover;
}

.service-resources__card-image--placeholder {
	background-color: #e2e8f0;
}

.service-resources__card-body {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	padding: 24px;
}

.service-resources__card-tag {
	align-self: flex-start;
	margin-bottom: 16px;
	padding: 6px 12px;
	border-radius: 999px;
	background: #E6F7FE;
	color: #004195;
	font-size: 12px;
	font-weight: 700;
	text-decoration: none;
}

.service-resources__card-title {
	margin: 0 0 10px;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.35;
	color: #0F172A;	
}

.service-resources__card-title a {
	text-decoration: none;
	color: inherit;
}

.service-resources__card-excerpt {
	flex-grow: 1;
	margin: 0 0 20px;
	font-size: 14px;
	line-height: 1.6;
	color:#64748B;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.service-resources__card-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-top: 20px;
	border-top: 1px solid #E6ECF5;
}

.service-resources__card-author {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	/* Links to the author's page (author.php). */
	color: inherit;
	text-decoration: none;
}

.service-resources__card-author:hover .service-resources__card-author-name,
.service-resources__card-author:focus-visible .service-resources__card-author-name {
	color: #004195;
}

.service-resources__card-avatar {
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	/* Uploaded profile photos aren't always square. */
	object-fit: cover;
}

.service-resources__card-author-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.service-resources__card-author-name {
	font-size: 13px;
	font-weight: 700;
	color:#0F172A;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.service-resources__card-date {
	font-size: 12px;
	color: #64748B;
}

.service-resources__card-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
	font-size: 13px;
	font-weight: 700;
	color: #004195;
	text-decoration: none;
	white-space: nowrap;
}

.service-resources__card-link-icon {
	display: inline-flex;
	width: 14px;
	height: 14px;
	transition: transform 0.15s ease;
}

.service-resources__card-link-icon svg {
	width: 100%;
	height: 100%;
}

.service-resources__card-link:hover .service-resources__card-link-icon,
.service-resources__card-link:focus-visible .service-resources__card-link-icon {
	transform: translateX(3px);
}

/* ==========================================================================
   Service FAQ -- accordion of question/answer pairs built from native
   <details>/<summary> elements (see template-parts/services/faq.php),
   so expand/collapse, keyboard support, and ARIA semantics come from the
   browser for free -- no JS needed. The +/- toggle glyph is drawn with
   CSS pseudo-elements rather than an icon asset.
   ========================================================================== */

.service-faq {
	background-color: #f8fafc;
}

.service-faq__inner {
	max-width: 900px;
	margin-inline: auto;
	padding: 96px var(--header-padding-x);
}

@media (max-width: 1024px) {
	.service-faq__inner {
		padding: 64px var(--header-padding-x-tablet);
	}
}

@media (max-width: 640px) {
	.service-faq__inner {
		padding: 48px var(--header-padding-x-mobile);
	}
}

/* Header block. */

.service-faq__header {
	max-width: 640px;
	margin: 0 auto 48px;
	text-align: center;
}

@media (max-width: 640px) {
	.service-faq__header {
		margin-bottom: 32px;
	}
}

.service-faq__eyebrow {
	margin: 0 0 16px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #0066FF;
}

.service-faq__heading {
	margin: 0 0 20px;
	font-size: 40px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: #0F172A;
}

@media (max-width: 1024px) {
	.service-faq__heading {
		font-size: 32px;
	}
}

@media (max-width: 640px) {
	.service-faq__heading {
		font-size: 26px;
	}
}

.service-faq__subheading {
	margin: 0;
	font-size: 17px;
	line-height: 1.6;
	color: #64748B;
}

@media (max-width: 640px) {
	.service-faq__subheading {
		font-size: 15px;
	}
}

/* Accordion list. */

.service-faq__list {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.service-faq__item {
	background-color: #fff;
border: 1px solid #E6ECF5;
	border-radius: 16px;
box-shadow: 0px 1px 6px 0px #0000000A;

}

.service-faq__item-question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 24px 28px;
	list-style: none;
	cursor: pointer;
}

.service-faq__item-question::-webkit-details-marker {
	display: none;
}

.service-faq__item-question-text {
	font-size: 17px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--color-heading);
}

@media (max-width: 640px) {
	.service-faq__item-question {
		padding: 20px;
	}

	.service-faq__item-question-text {
		font-size: 15px;
	}
}

.service-faq__item-toggle {
	position: relative;
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	color: var(--gradient-btn-start);
	background-color: var(--color-badge-icon-light-bg);
	transition: background-color 0.2s ease, color 0.2s ease;
}

.service-faq__item[open] .service-faq__item-toggle {
	color: #fff;
background: linear-gradient(135deg, #004195 0%, #01AEF0 100%);
}

.service-faq__item-toggle::before,
.service-faq__item-toggle::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	background-color: currentColor;
	border-radius: 1px;
	transform: translate(-50%, -50%);
}

.service-faq__item-toggle::before {
	width: 14px;
	height: 2px;
}

.service-faq__item-toggle::after {
	width: 2px;
	height: 14px;
	transition: opacity 0.15s ease;
}

.service-faq__item[open] .service-faq__item-toggle::after {
	opacity: 0;
}

.service-faq__item-answer {
	padding: 0 28px 24px;
	border-top: 1px solid var(--color-border-light);
	margin-top: -1px;
	padding-top: 20px;
}

.service-faq__item-answer p {
	margin: 0;
	font-size: 15px;
	line-height: 1.7;
	color: #64748B;
}

@media (max-width: 640px) {
	.service-faq__item-answer {
		padding-left: 20px;
		padding-right: 20px;
	}
}

/* ==========================================================================
   Service Contact -- "Get in Touch" section: a centered heading over a
   contact form (left) beside a photo + contact info card (right). Form
   submission/validation live in assets/js/src/contact-form.js and
   inc/contact-form/ajax-handler.php -- this block is layout/visual only.
   ========================================================================== */

.service-contact {
	background-color: #f8fafc;
}

.service-contact__inner {
	max-width: var(--header-max-width);
	margin-inline: auto;
	padding: 96px var(--header-padding-x);
}

@media (max-width: 1024px) {
	.service-contact__inner {
		padding: 64px var(--header-padding-x-tablet);
	}
}

@media (max-width: 640px) {
	.service-contact__inner {
		padding: 48px var(--header-padding-x-mobile);
	}
}

/* Header block. */

.service-contact__header {
	max-width: 720px;
	margin: 0 auto 56px;
	text-align: center;
}

@media (max-width: 640px) {
	.service-contact__header {
		margin-bottom: 40px;
	}
}

.service-contact__eyebrow {
	margin: 0 0 16px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #004195;
}

.service-contact__heading {
	margin: 0 0 20px;
	font-size: 44px;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--color-heading);
}

@media (max-width: 1024px) {
	.service-contact__heading {
		font-size: 36px;
	}
}

@media (max-width: 640px) {
	.service-contact__heading {
		font-size: 28px;
	}
}

.service-contact__subheading {
	margin: 0;
	font-size: 18px;
	line-height: 1.6;
	color: #64748B;
}

@media (max-width: 640px) {
	.service-contact__subheading {
		font-size: 16px;
	}
}

/* Content layout -- form card + side column. */

.service-contact__content {
	display: grid;
	grid-template-columns: 1fr 400px;
	align-items: start;
	gap: 24px;
}

@media (max-width: 1024px) {
	.service-contact__content {
		grid-template-columns: 1fr;
	}
}

/* Form card. */

.service-contact__form-card {
	padding: 40px;
	background-color: #fff;
border: 1px solid #E6ECF5;
	border-radius: 20px;
box-shadow: 0px 8px 40px 0px #00000012;

}

@media (max-width: 640px) {
	.service-contact__form-card {
		padding: 24px;
	}
}

.service-contact__form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

@media (max-width: 640px) {
	.service-contact__form-row {
		grid-template-columns: 1fr;
	}
}

.service-contact__field {
	margin-bottom: 20px;
}

.service-contact__field label {
	display: block;
	margin-bottom: 8px;
	font-size: 14px;
	font-weight: 700;
	color: #0F172A;
}

.service-contact__field input,
.service-contact__field textarea {
	display: block;
	width: 100%;
	padding: 14px 16px;
	font-family: 'Geist', sans-serif;
	font-size: 15px;
	color: var(--color-heading);
background: #F4F8FC;
	border: 1px solid #E6ECF5;
	border-radius: 10px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.service-contact__field textarea {
	resize: vertical;
	min-height: 120px;
}

.service-contact__field input::placeholder,
.service-contact__field textarea::placeholder {
	color: #94a3b8;
}

.service-contact__field input:focus,
.service-contact__field textarea:focus {
	outline: none;
	border-color: var(--gradient-btn-start);
	box-shadow: 0 0 0 3px rgba(11, 77, 162, 0.12);
}

.service-contact__field input[aria-invalid='true'],
.service-contact__field textarea[aria-invalid='true'] {
	border-color: #dc2626;
}

.service-contact__field-error {
	display: block;
	margin-top: 6px;
	font-size: 13px;
	font-weight: 600;
	color: #dc2626;
	min-height: 0;
}

.service-contact__field-error:empty {
	display: none;
}

.service-contact__form-banner {
	margin-bottom: 20px;
	padding: 14px 18px;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 600;
}

.service-contact__form-banner[data-state='success'] {
	background-color: #dcfce7;
	color: #166534;
}

.service-contact__form-banner[data-state='error'] {
	background-color: #fee2e2;
	color: #991b1b;
}

.service-contact__submit {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	padding: 14px;
	border: none;
	border-radius: 12px;
background: linear-gradient(94.23deg, #004195 0%, #01AEF0 100%);
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	transition: opacity 0.15s ease;
}

.service-contact__submit:hover,
.service-contact__submit:focus-visible {
	opacity: 0.92;
}

.service-contact__submit:disabled {
	opacity: 0.7;
	cursor: not-allowed;
}

.service-contact__submit-spinner {
	display: none;
	width: 16px;
	height: 16px;
	border: 2px solid rgba(255, 255, 255, 0.4);
	border-top-color: #fff;
	border-radius: 50%;
}

.service-contact__submit[data-loading='true'] .service-contact__submit-spinner {
	display: inline-block;
	animation: sapmig-spin 0.7s linear infinite;
}

@keyframes sapmig-spin {
	to {
		transform: rotate(360deg);
	}
}

.service-contact__privacy {
	margin: 16px 0 0;
	font-size: 13px;
	line-height: 1.6;
	color: var(--color-eyebrow);
	text-align: center;
}

.service-contact__privacy a {
	color: var(--gradient-btn-start);
	text-decoration: underline;
}

/* Side column -- photo + contact info card. */

.service-contact__side {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.service-contact__media {
	border-radius: 20px;
	overflow: hidden;
}

.service-contact__image {
	display: block;
	width: 100%;
	object-fit: cover;
}

.service-contact__image--placeholder {
	background-color: #e2e8f0;
}

.service-contact__info-card {
	padding: 28px;
	background-color: #fff;
	border: 1px solid var(--color-border-light);
	border-radius: 20px;
	box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
}

.service-contact__info-heading {
	margin: 0 0 20px;
	font-size: 18px;
	font-weight: 700;
	color: var(--color-heading);
}

.service-contact__info-item {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 14px 0;
}

.service-contact__info-item:first-of-type {
	border-top: none;
	padding-top: 0;
}

.service-contact__info-icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	color: var(--gradient-btn-start);
background: linear-gradient(135deg, #EEF4FF 0%, #DBEAFE 100%);

}

.service-contact__info-icon svg,
.service-contact__info-icon img {
	width: 16px;
	height: 16px;
	object-fit: contain;
}

.service-contact__info-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding-top: 2px;
}

.service-contact__info-label {
	font-size: 12px;
	color: var(--color-eyebrow);
}

.service-contact__info-value {
	font-size: 14px;
	font-weight: 700;
	color: var(--color-heading);
}

/* ==========================================================================
   Footer -- brand column, three link columns (nav menus), a newsletter
   signup, and a legal bottom bar. Dark theme -- colors here are local to
   this component rather than added to :root, since nothing else on the
   site currently uses a dark surface.
   ========================================================================== */

.site-footer {
	background-color: #0b1733;
	color: #94a3b8;
	font-family: 'Geist', sans-serif;
}

.site-footer__columns {
	display: grid;
	grid-template-columns: 1.6fr 1.1fr 1.1fr 1.3fr;
	gap: 40px;
	max-width: var(--header-max-width);
	margin-inline: auto;
	padding: 80px var(--header-padding-x) 48px;
}

@media (max-width: 1024px) {
	.site-footer__columns {
		grid-template-columns: repeat(2, 1fr);
		padding: 64px var(--header-padding-x-tablet) 40px;
		gap: 40px 32px;
	}
}

@media (max-width: 640px) {
	.site-footer__columns {
		grid-template-columns: 1fr;
		padding: 48px var(--header-padding-x-mobile) 32px;
		gap: 36px;
	}
}

@media (max-width: 1024px) {
	.site-footer__brand {
		grid-column: 1 / -1;
	}
}

.site-footer__logo {
	display: inline-flex;
	align-items: center;
	margin-bottom: 16px;
	text-decoration: none;
}

.site-footer__logo img {
	display: block;
	height: auto;
	width: auto;
}

.site-footer__logo-text {
	font-size: 20px;
	font-weight: 700;
	color: #fff;
}

.site-footer__tagline {
	margin: 0 0 12px;
	font-family: 'Geist', sans-serif;
	font-weight: 700;
	font-size: 16px;
	line-height: 1.4;
	color: #fff;
}

.site-footer__description {
	max-width: 28em;
	margin: 0 0 24px;
	font-family: 'Geist', sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.6;
	color: #8A97B8;
}

.site-footer__contact {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer__contact a {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: 14px;
	color: #fffffccc;
	text-decoration: none;
	transition: color 0.15s ease;
}

.site-footer__contact a:hover,
.site-footer__contact a:focus-visible {
	color: #fff;
}

.site-footer__contact-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	flex-shrink: 0;
	color: #01aef0;
}

.site-footer__contact-icon svg,
.site-footer__contact-icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.site-footer__heading {
	position: relative;
	margin: 0 0 24px;
	padding-bottom: 18px;
	font-family: 'Geist', sans-serif;
	font-weight: 700;
	font-size: 16px;
	line-height: 1.4;
	color: #fff;
}

.site-footer__heading::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 30px;
	height: 2px;
	background-color: #01aef0;
}

/* The "Stay Updated" heading doesn't get the underline the other
   column headings have. */


.site-footer__menu-column--stacked {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.site-footer__menu-column ul {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer__menu-column a {
	font-size: 16px;
	color: #8A97B8;
	text-decoration: none;
	transition: color 0.15s ease;
}

.site-footer__menu-column a:hover,
.site-footer__menu-column a:focus-visible {
	color: #fff;
}

/* Bottom bar. */

.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
	max-width: var(--header-max-width);
	margin-inline: auto;
	padding: 24px var(--header-padding-x) 32px;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	font-size: 13px;
	color: #FFFFFFCC;

}

@media (max-width: 1024px) {
	.site-footer__bottom {
		padding: 24px var(--header-padding-x-tablet) 32px;
	}
}

@media (max-width: 640px) {
	.site-footer__bottom {
		padding: 20px var(--header-padding-x-mobile) 28px;
	}
}

.site-footer__copyright,
.site-footer__legal {
	margin: 0;
}

.site-footer__legal-group {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
}

.site-footer__legal-logo {
	display: block;
	width: auto;
	height: auto;
}