/**
 * Shared block styles — loaded on the FRONT END and in the BLOCK EDITOR.
 *
 * Everything here must render identically in both contexts. Anything that
 * depends on front-end-only behaviour (JS toggles, document-level overflow)
 * belongs in frontend.css, with an editor-side counterpart in editor.css.
 *
 * Do not enqueue this file directly - functions.php wires it to both contexts.
 */

/* ---------------------------------------------------------------------------
   Header pill navigation
   Figma: the nav sits in a #124889 rounded container; each item is a 10px
   padded pill; the current page is a solid white pill with navy text.

   The pill container is a core/group wrapper rather than styling applied to
   core/navigation directly. core/navigation supports neither border nor
   padding, and core forces `background-color: inherit !important` onto its
   inner responsive container - so any fill placed on the <nav> gets re-painted
   by square-cornered descendants that notch the rounded silhouette. Putting
   the fill on a parent group sidesteps all of it.

   Item padding/radius and the current-item pill still need CSS: neither
   core/navigation-link nor core/navigation exposes those, and there is no
   block-level styling hook for the current menu item.
   --------------------------------------------------------------------------- */
.rga-nav-pill .wp-block-navigation-item__content {
	padding: 10px;
	border-radius: 100px;
	text-transform: capitalize;
	letter-spacing: -0.01em;
	text-decoration: none;
}

.rga-nav-pill .current-menu-item > .wp-block-navigation-item__content,
.rga-nav-pill .current_page_item > .wp-block-navigation-item__content {
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--secondary);
	font-weight: 600;
}

/* Colouring part of a heading in the editor wraps that run in <mark>, which
   carries the browser's yellow highlight by default - the class WordPress adds
   sets only the text colour. Neither core nor the browser clears it, so it has
   to be cleared here. A deliberate highlight still works: preset background
   classes are !important and inline styles outrank this. */
mark { background-color: transparent; }

/* The site logo is a fixed-height mark in the header bar. */
.rga-header .wp-block-site-logo img {
	height: 90px;
	width: auto;
}

/* ===========================================================================
   HOMEPAGE SECTIONS
   Each rule below covers something the block layer cannot express. Anything
   achievable with block attributes (color, spacing, radius, grid, flex) is
   set on the blocks themselves, not here.
   =========================================================================== */

/* --- Hero -----------------------------------------------------------------
   The header (logo / menu / portal button) is an overlay spanning both halves
   of the split hero, so it is absolutely positioned over the columns rather
   than being a separate header template part. */
.rga-hero { position: relative; }

.rga-hero > .wp-block-columns { margin-block: 0; gap: 0; }

.rga-hero .wp-block-column { min-height: 900px; display: flex; flex-direction: column; justify-content: center; }

.rga-hero__header.rga-hero__header {
	position: absolute;
	inset: 0 0 auto 0;
	z-index: 2;
	width: 100%;
}

/* --- Header login button ---------------------------------------------------
   "Login to Portal" holds its place beside the menu for as long as the header
   row genuinely fits it. At their natural widths the three items need
   218 (logo) + 227 (button) + 121 (menu) + 2 x 36 (gaps) + 40 (padding) = 678px.
   Below that flexbox has to start compressing the logo to make room, so the
   button gives way and the toggle carries the header on its own. */
@media ( max-width: 677px ) {
	.rga-hero__controls > .wp-block-buttons { display: none; }
}

/* From 782 down the band behind the button turns off-white, and the button is a
   white outline with white text - it would disappear into it. Invert it to navy,
   the same flip the MENU label and the toggle already make at this line. Core
   prints its preset colour classes with !important, so these have to as well. */
@media ( max-width: 781px ) {
	.rga-hero__controls > .wp-block-buttons .wp-block-button__link {
		color: var(--wp--preset--color--secondary) !important;
		border-color: var(--wp--preset--color--secondary) !important;
	}
}

.rga-hero__content { width: 100%; }

/* The hero photo fills its half and bleeds edge to edge. Absolute
   positioning avoids the circular sizing where the image drives the column
   height and height:100% then resolves against it. */
.rga-hero__media { padding: 0 !important; position: relative; overflow: hidden; }
.rga-hero__media .rga-hero__image.rga-hero__image {
	position: absolute;
	inset: 0;
	margin: 0;
}
.rga-hero__media .rga-hero__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Figma applies a 50% white fill in soft-light blend to the category pill. */
.rga-eyebrow {
	display: inline-block;
	align-self: flex-start;
	margin: 0;
	padding: 8px 14px;
	border-radius: 100px;
	background-color: #2668a2;
}

.rga-menu-toggle {
	width: 50px;
	height: 50px;
	flex: 0 0 50px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 100px;
	background-color: var(--wp--preset--color--white);
}
.rga-menu-toggle svg {
	width: 26px;
	height: 26px;
	padding: 0;
	background: none;
	border-radius: 0;
	color: var(--wp--preset--color--primary);
	fill: currentColor;
}

/* --- Media carousel -------------------------------------------------------
   Five 360px cards overflow the 1440 frame in the design, so this is a
   horizontal scroller. There is no core carousel block. */
.rga-media-scroller {
	overflow-x: auto;
	max-width: 100%;
	scroll-snap-type: x mandatory;
	/* Snap targets are the card edges, which sit inside the track's gutter.
	   Without matching scroll-padding the container snaps past the gutter and
	   the first/last card ends up flush against the viewport edge. */
	scroll-padding-inline: var(--wp--preset--spacing--60);
	padding-bottom: var(--wp--preset--spacing--20);
}

.rga-media-scroller .wp-block-post-template {
	display: flex;
	flex-wrap: nowrap;
	/* `safe` centre: cards sit centred while they fit, but fall back to
	   start-alignment once they overflow, so the first card is never clipped
	   off the left edge and unreachable. `width: max-content` would make
	   justify-content a no-op, so the track fills the scroller instead. */
	justify-content: safe center;
	min-width: 100%;
	gap: var(--wp--preset--spacing--30);
	margin: 0;
}

/* Gutters are spacer flex items rather than padding on the track: browsers
   leave the END padding of an overflowing flex scroll container out of
   scrollWidth, so a padded track can be scrolled to with the last card flush
   against the edge. Two equal spacers also keep the centred state symmetric.
   The track gap already supplies part of the gutter, hence the subtraction. */
.rga-media-scroller .wp-block-post-template::before {
	content: "";
	flex: 0 0 calc( var(--wp--preset--spacing--60) - var(--wp--preset--spacing--30) );
}

/* Symmetric spacer keeps the centred state balanced. Note: browsers exclude
   trailing space (padding, margin, or a pseudo-element alike) from the
   scrollWidth of an overflowing flex scroll container, so at maximum scroll
   the last card sits flush to the edge. Verified across all three approaches;
   there is no CSS-only fix on this structure. */
.rga-media-scroller .wp-block-post-template::after {
	content: "";
	flex: 0 0 calc( var(--wp--preset--spacing--60) - var(--wp--preset--spacing--30) );
}

.rga-media-scroller .wp-block-post-template > li {
	flex: 0 0 360px;
	max-width: 360px;
	scroll-snap-align: start;
	margin: 0;
}

/* Ticker mode (Dev QA, todo 10381886681): rga.js clones the cards and moves
   the track continuously right-to-left like a news crawl. Snap points would
   fight a continuous scroll, and a scrollbar under a crawl reads as broken,
   so both go while the crawl runs. Touch and wheel still scroll it. */
.rga-media-scroller.is-ticker {
	scroll-snap-type: none;
	scrollbar-width: none;
}

.rga-media-scroller.is-ticker::-webkit-scrollbar {
	display: none;
}

.rga-media-scroller.is-ticker .wp-block-post-template {
	justify-content: flex-start;
}

.rga-media-card { height: 100%; display: flex; flex-direction: column; }
.rga-media-card .wp-block-post-featured-image { margin-bottom: 0; }
.rga-media-card .wp-block-post-featured-image img { border-radius: 10px; height: 200px; object-fit: cover; width: 100%; }

/* Teaser and post-hero images crop from the top so headlines in the artwork
   (faces, channel chyrons) survive the fixed-height frame (Dev QA round 2). */
.rga-media-card .wp-block-post-featured-image img,
.rga-media-card--framed .wp-block-post-featured-image img,
.rga-mc-featured__media img,
.rga-mc-row__thumb img,
.rga-featured__image img,
.rga-posthero__image img {
	object-position: top center;
}
.rga-media-card .wp-block-post-title { flex: 1 0 auto; }
.rga-media-card .wp-block-read-more { text-decoration: none; }

/* --- Services grid --------------------------------------------------------
   6 x 180px tiles with 30px gutters = the design's 1230px row. */
.rga-services-grid { justify-content: center; }
.rga-service__icon {
	width: 80px;
	height: 80px;
	flex: 0 0 80px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: center;
	border-radius: 100px;
	background-color: var(--wp--preset--color--secondary-light);
}
.rga-service__icon svg {
	width: 36px;
	height: 36px;
	padding: 0;
	background: none;
	border-radius: 0;
	color: var(--wp--preset--color--primary);
	fill: currentColor;
}

/* --- Why choose RGA -------------------------------------------------------
   The seal straddles the seam between the off-white band above and the blue
   panel below; no block expresses an element crossing a section boundary. */
.rga-why__cap { min-height: 100px; padding: 0; }
.rga-seal.rga-seal {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	margin: 0;
	z-index: 3;
}
.rga-seal img { display: block; }

/* --- Retirement -----------------------------------------------------------
   A 3px outlined frame sits behind and offset from the photo. */
.rga-retire__media { position: relative; }
.rga-retire__media::before {
	content: "";
	position: absolute;
	inset: -16px;
	border: 3px solid var(--wp--preset--color--secondary-light);
	border-radius: 20px;
	pointer-events: none;
	z-index: 0;
}
.rga-retire__media .wp-block-image { position: relative; z-index: 1; }

/* --- Financial-freedom mosaic ---------------------------------------------
   The grid block gives equal columns; the design is 425 / 342 / 425. */
.rga-mosaic.rga-mosaic { grid-template-columns: 425fr 342fr 425fr; align-items: stretch; }
.rga-mosaic > .rga-tile { min-height: 320px; display: flex; flex-direction: column; justify-content: center; }
.rga-mosaic > .rga-tile--span2 { grid-column: span 2; }
.rga-mosaic .wp-block-cover { padding: 0; }

/* --- App / client portal --------------------------------------------------
   Two colour bands with the screenshot card straddling the boundary. A
   gradient keeps the split proportional as content height changes. */
.rga-portal {
	background-image: linear-gradient(
		to bottom,
		var(--wp--preset--color--secondary) 0 47.75%,
		var(--wp--preset--color--light-gray) 47.75% 100%
	);
}
.rga-portal__card { box-shadow: 0 4px 10px 1px rgba(0, 0, 0, 0.1); overflow: hidden; }
.rga-portal__card .wp-block-group { align-items: center; }

/* --- Footer ---------------------------------------------------------------
   The first footer nav item carries an underline accent in the design; again
   there is no block-level hook for the current/first item. */
/* The comp underlines the CURRENT page in the footer nav, not the first item. */
/* The comp's footer menu keeps a dead-uniform 45px pitch, current row included, so
   the rule under the current item cannot take part in the flow. */
.rga-footer__nav .current-menu-item > .wp-block-navigation-item__content,
.rga-footer__nav .current_page_item > .wp-block-navigation-item__content {
	border-bottom: 2px solid var(--wp--preset--color--secondary-light);
	padding-bottom: 8px;
	margin-bottom: -10px;
}
.rga-footer__nav .wp-block-navigation-item__content { text-decoration: none; }
.rga-footer a { color: inherit; }

/* The logo is referenced by URL, so core/image emits no intrinsic width/height and
   the row collapses until the PNG decodes. Adding the attributes by hand would fail
   the block's own markup validation, so reserve the box here instead. */
.rga-footer__logo img { aspect-ratio: 654 / 270; height: auto; }

/* Nothing in the footer had a focus ring; the charcoal ground needs a light one. */
.rga-footer a:focus-visible,
.rga-footer .wp-block-button__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--secondary-light);
	outline-offset: 3px;
	border-radius: 4px;
}


/* --- Hero decorative artwork ----------------------------------------------
   Positions taken from the comp: the lion bleeds off the blue panel, the
   rule sits near the panel's lower left, and the pager arrows straddle the
   seam between the two halves. All are decorative, so they live in CSS
   rather than as content blocks. */
.rga-hero__panel { position: relative; }
.rga-hero__panel > * { position: relative; z-index: 1; }



/* The same lion reappears behind the "Why choose" panel. */
.rga-why { position: relative; overflow: hidden; }
.rga-why::before {
	content: "";
	position: absolute;
	left: 965px;
	top: 153px;
	width: 822px;
	height: 1029.69px;
	background: url("../images/lion.svg") no-repeat center / 100% 100%;
	pointer-events: none;
	z-index: 0;
}
.rga-why > * { position: relative; z-index: 1; }

/* --- Media card polish ----------------------------------------------------
   Cards are equal height in the comp with the read-more row pinned to the
   bottom, and the link carries a trailing arrow. */
.rga-media-scroller .wp-block-post-template > li { display: flex; }
.rga-media-card { min-height: 484px; }
.rga-media-card .wp-block-post-title { margin-block: 0; }

.rga-media-card .wp-block-read-more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: auto;
}
.rga-media-card .wp-block-read-more::after {
	content: "";
	width: 22px;
	height: 15px;
	background: url("../images/arrow.svg") no-repeat center / contain;
	flex: 0 0 22px;
}

/* --- Section photo crops --------------------------------------------------
   The comp crops these to fixed boxes (618x651 and 618x721). core/image has
   no aspect-ratio control that survives a percentage-width column, so the
   ratio is pinned here and the image covers it. */
.rga-why .wp-block-column:first-child img {
	aspect-ratio: 618 / 651;
	width: 100%;
	height: auto;
	object-fit: cover;
	border-radius: 10px;
}

.rga-retire__media img {
	aspect-ratio: 618 / 721;
	width: 100%;
	height: auto;
	object-fit: cover;
	border-radius: 10px;
}

/* Mosaic photo tiles match the 320px row height of their text siblings. */
.rga-mosaic .wp-block-cover { min-height: 320px; }

/* --- Section flow ---------------------------------------------------------
   Full-bleed sections butt against each other in the design; the theme's
   blockGap was inserting 36px between every one of them. */
/* Sections inside the post content. */
.entry-content > .wp-block-group.alignfull,
.wp-block-post-content > .wp-block-group.alignfull,
.is-root-container > .wp-block-group.alignfull {
	margin-block: 0;
}

/* And at the template level: WordPress applies the root block gap between the
   header part, <main> and the footer part, which shows as a band above the
   footer and under the header on every page. Sections carry their own padding,
   so there is never a gap between them. */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

/* Same for the direct children of <main> (page header band + post content). */
main.wp-block-group > * + * {
	margin-block-start: 0;
}

/* --- Video poster ---------------------------------------------------------
   The poster is a core/cover and the player a core/video, so both stay
   editable. Theme JS swaps them on click; without JS the poster simply shows.  */
.rga-video { position: relative; }

/* The poster and the player are the same 16:9 frame at every width. core/cover
   writes BOTH `min-height:696px` and `aspect-ratio:unset` inline - 696px is 16:9
   only at the 1240px design width, and everywhere else the frame distorted (0.98
   at 800px, 1.44 at 1100). Overriding the inline pair needs !important on each. */
.rga-video__poster.rga-video__poster {
	min-height: 0 !important;
	aspect-ratio: 16 / 9 !important;
}

.rga-video__poster { cursor: pointer; }

/* The poster's "Play Video" caption becomes a play disc (Dev QA round 3,
   todo 10315806131). font-size:0 hides the words visually but screen readers
   still get them, so the label stays in the content where editors can change it. */
.rga-video__poster .wp-block-cover__inner-container p {
	width: 96px;
	height: 96px;
	margin: 0;
	border-radius: 50%;
	font-size: 0 !important;
	background: var(--wp--preset--color--white) url("../images/play.svg") no-repeat 56% 50% / 34px 34px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
	transition: transform 0.2s ease, background-color 0.2s ease;
}

.rga-video__poster:hover .wp-block-cover__inner-container p,
.rga-video__poster:focus-visible .wp-block-cover__inner-container p {
	transform: scale(1.08);
	background-color: var(--wp--preset--color--secondary-light);
}

.rga-video__player video {
	aspect-ratio: 16 / 9;
	height: auto;
	object-fit: cover;
}


.rga-video__player figure { margin: 0; }

/* The player may be a core/video (file) or a core/embed (Vimeo / YouTube);
   both fill the same 16:9 frame. */
.rga-video__player video,
.rga-video__player iframe {
	display: block;
	width: 100%;
	border-radius: 10px;
	box-shadow: 0 4px 10px 1px rgba( 0, 0, 0, 0.1 );
	background: #000;
}

.rga-video__player .wp-block-embed__wrapper {
	position: relative;
	aspect-ratio: 16 / 9;
}

.rga-video__player .wp-block-embed__wrapper iframe {
	position: absolute;
	inset: 0;
	height: 100%;
	border: 0;
}

/* --- Hero dropdown menu ---------------------------------------------------
   Tapping the toggle drops a navigation card beneath it; the toggle itself
   becomes the close button. */

.rga-menu-toggle { cursor: pointer; }

/* The toggle turns into a filled disc with a white X while the menu is open.
   The X is drawn rather than swapped in so the icon block stays untouched. */
.rga-menu-toggle { position: relative; }

.is-menu-open .rga-menu-toggle {
	background-color: var(--wp--preset--color--primary);
}

.is-menu-open .rga-menu-toggle svg { opacity: 0; }

.is-menu-open .rga-menu-toggle::before,
.is-menu-open .rga-menu-toggle::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 23px;
	height: 3px;
	border-radius: 2px;
	background-color: var(--wp--preset--color--white);
}

.is-menu-open .rga-menu-toggle::before { transform: translate( -50%, -50% ) rotate( 45deg ); }
.is-menu-open .rga-menu-toggle::after  { transform: translate( -50%, -50% ) rotate( -45deg ); }

/* --- Hero dropdown menu (geometry) ----------------------------------------
   Shared so the editor lays it out identically. Resting visibility is
   front-end-only (frontend.css) with an editor counterpart in editor.css.
   The comp anchors a 202px card 21px under the 50px toggle, right edge flush
   with it. */
.rga-hero__menu.rga-hero__menu {
	position: absolute;
	top: 130px;
	right: var(--wp--preset--spacing--60);
	width: 202px;
	padding-block: 5px;
	border-radius: 15px;
	background-color: var(--wp--preset--color--off-white);
	box-shadow: 0 12px 28px rgba( 7, 51, 90, 0.22 );
	overflow: hidden;
	z-index: 5;
}

/* Items stack full width so the current one can paint edge to edge, with the
   label itself right-aligned. */
.rga-menu-panel__nav .wp-block-navigation__container {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	width: 100%;
}

.rga-menu-panel__nav .wp-block-navigation-item { width: 100%; }

/* Core forces navigation links to `color: inherit` through a doubled-class
   selector, so the class has to be doubled here too to set a colour at all.
   17px rather than the 18px body token: the comp fits "Market Commentary" on
   one line inside the 202px card, which 18px does not. */
.rga-hero__menu .rga-hero__nav .wp-block-navigation-item__content.wp-block-navigation-item__content {
	display: block;
	width: 100%;
	box-sizing: border-box;
	/* 9 + 24 line box + 9 = the comp's 42px row. */
	padding: 9px 16px;
	color: var(--wp--preset--color--secondary);
	font-size: 17px;
	text-align: right;
	text-decoration: none;
	line-height: 1.4;
}

/* The current item is a rounded pill inset from the card, not a full-bleed
   band: 5px in on each side with an 11px inner pad, so its label still lands on
   the same 16px right margin as every other item. */
.rga-hero__menu .rga-hero__nav .current-menu-item > .wp-block-navigation-item__content.wp-block-navigation-item__content,
.rga-hero__menu .rga-hero__nav .current_page_item > .wp-block-navigation-item__content.wp-block-navigation-item__content {
	/* The nav item is a flex container, so `auto` would shrink-to-fit. */
	width: calc( 100% - 10px );
	margin-inline: 5px;
	padding-inline: 11px;
	border-radius: 15px;
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
}

/* --- Interior page header -------------------------------------------------
   Every interior page opens with a light-grey band carrying the page title
   and a decorative mark bleeding off the right edge. Lives in the template,
   so a new page gets it just by having a title. */
.rga-pagehead {
	position: relative;
	overflow: hidden;
	min-height: 196px;
	display: flex;
	align-items: center;
}

.rga-pagehead::after {
	content: "";
	position: absolute;
	left: 694px;
	top: -316px;
	width: 746px;
	height: 800px;
	background: url("../images/svc-titlebar.svg") no-repeat center / 100% 100%;
	pointer-events: none;
	z-index: 0;
}

.rga-pagehead > * {
	position: relative;
	z-index: 1;
	width: 100%;
}

/* The desktop mark is placed from the left edge of a 1440px band, which walks
   it off the side of a phone. Narrow screens anchor it to the right instead and
   scale it to the shorter band, so the same crop reads across the width. */
@media ( max-width: 781px ) {
	.rga-pagehead::after {
		left: auto;
		right: -100px;
		top: 50%;
		transform: translateY(-50%);
		width: 466px;
		height: 500px;
	}
}

@media ( max-width: 480px ) {
	.rga-pagehead::after {
		right: -80px;
		width: 400px;
		height: 429px;
	}
}

.rga-pagehead .wp-block-post-title {
	margin: 0;
}

/* --- Service cards ---------------------------------------------------------
   A flat list of cards laid out two-up, every panel open. It is a grid rather
   than core/columns so the reading order survives the drop to one column: with
   two column blocks the stack would run all of the left column, then all of the
   right, instead of alternating the way the design pairs them.

   Dev QA round 5: the cards used to collapse into an accordion on phones; the
   client asked for the click behaviour to go, so the copy is always shown. */
/* Rows stretch (grid's default) so the two cards in a row share a bottom edge -
   with a border on every card, panels of unequal length would otherwise leave
   one side stopping short. */
.rga-svc-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px 24px;
}

/* The group is a flow layout, so core hands every child the global block gap
   as a margin. Grid `gap` is doing that job here. */
.rga-svc-grid > * {
	margin-block: 0;
}

.rga-svc-card {
	border: 1px solid var(--wp--preset--color--primary);
	border-radius: 20px;
	padding: 12px 24px;
	/* Pale blue fill per the client (Dev QA, todo 10381879098); not a theme
	   preset, it only appears here. */
	background-color: #e6edf6;
}

/* The comp sets the panel copy tighter than the theme's 1.5 - it is the
   smallest text in the design and it sits in a dense stack. */
.rga-svc-card__panel {
	line-height: 1.375;
}

/* 60px navy icon disc beside a Georgia title. core/icon paints its own
   background onto the <svg>, so the disc is the wrapper here, same approach as
   the homepage service tiles. */
.rga-svc-card__head {
	width: 100%;
	flex-wrap: nowrap;
}

.rga-svc-card__head .wp-block-heading {
	margin: 0;
}

.rga-svc-card__icon {
	width: 60px;
	height: 60px;
	flex: 0 0 60px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 100px;
	background-color: var(--wp--preset--color--primary);
}

.rga-svc-card__icon svg {
	width: 28px;
	height: 28px;
	padding: 0;
	background: none;
	border-radius: 0;
	color: var(--wp--preset--color--white);
	fill: currentColor;
}

/* One column from the width where two cards can no longer hold a title on a
   single line - the same point core/columns used to stack at. */
@media (max-width: 781px) {
	.rga-svc-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 480px) {
	.rga-svc-card {
		padding: 12px 20px;
	}

	.rga-svc-card__head {
		gap: 16px;
	}

	.rga-svc-card__icon {
		width: 50px;
		height: 50px;
		flex-basis: 50px;
	}
}

/* --- Personalized planning section ----------------------------------------
   Same seal-straddles-the-seam treatment as the homepage "Why choose"
   section, over the shared decorative mark. */
.rga-planning {
	position: relative;
	overflow: hidden;
}

.rga-planning::before {
	content: "";
	position: absolute;
	left: 965px;
	top: 153px;
	width: 822px;
	height: 1029.69px;
	background: url("../images/lion.svg") no-repeat center / 100% 100%;
	opacity: 0.5;
	pointer-events: none;
	z-index: 0;
}

.rga-planning > * {
	position: relative;
	z-index: 1;
}

/* Same problem, same fix: pinned to the bottom-right corner of the section so
   the head still bleeds off the edge the way the comp draws it. */
@media ( max-width: 781px ) {
	.rga-planning::before {
		left: auto;
		right: -130px;
		top: auto;
		bottom: -70px;
		width: 540px;
		height: 677px;
	}
}

.rga-planning__cap {
	min-height: 100px;
	padding: 0;
}

.rga-planning__media img {
	aspect-ratio: 618 / 607;
	width: 100%;
	height: auto;
	object-fit: cover;
	border-radius: 20px;
}

/* The photo column is a fixed 618px, which is half of the 1240px wide layout
   but the WHOLE of a tablet row - core only stacks columns at 781px, so
   between there and about 1100px the copy column was squeezed to nothing (at
   782px it measured 0px wide and 17,000px tall). Stack the section until the
   row can hold both, and above that cap the photo at half the row so it can
   never crowd the copy out again. */
@media ( max-width: 1023px ) {
	.rga-planning .wp-block-columns,
	.rga-why .wp-block-columns,
	.rga-retire .wp-block-columns {
		flex-direction: column;
		row-gap: 36px;
	}

	.rga-planning .wp-block-column,
	.rga-why .wp-block-column,
	.rga-retire .wp-block-column {
		flex-basis: 100% !important;
	}

	/* Stacked, these sections read as one centred column: the comp centres the
	   heading and the button over the full-width photo and keeps the body copy
	   ranged left. The photo also crops wider - the near-square desktop ratios
	   are far too tall once they span the whole screen. All three comps put the
	   picture at 350x230. */
	.rga-planning__media img,
	.rga-why .wp-block-column:first-child img,
	.rga-retire__media img {
		aspect-ratio: 35 / 23;
	}

	.rga-planning h2,
	.rga-planning .wp-block-buttons,
	.rga-why h2,
	.rga-why .wp-block-buttons,
	.rga-retire h2,
	.rga-retire .wp-block-buttons {
		text-align: center;
		justify-content: center;
	}

	/* Retire is authored copy-first so the desktop row reads text | photo. The
	   comp leads with the photo once it stacks. */
	.rga-retire__media { order: -1; }

	/* The mosaic is a 425/342/425 grid on desktop and has to collapse on the
	   same line as the sections above. At 800px its middle column is a 156px
	   strip that crops the faces out of the photo, the heading ladders to six
	   lines and the contact card runs to nine; by 1024 the three columns hold
	   their content again. One column from here down. */
	.rga-mosaic.rga-mosaic {
		grid-template-columns: minmax(0, 1fr);
		gap: 17px;
	}

	/* The copy tile spans two columns in the desktop mosaic; left in place it
	   conjures an implicit second column and the photo tiles collapse to 0. */
	.rga-mosaic > .rga-tile--span2 { grid-column: auto; }

	/* Cards size to their copy rather than the desktop grid's 320px row. */
	.rga-mosaic > .rga-tile { min-height: 0; }

	/* The grid is authored card, photo, card, copy, photo so the desktop mosaic
	   packs correctly. Stacked, the comp reads card, photo, copy, card, photo -
	   one swap, expressed as the two tiles that move after it. */
	.rga-mosaic > .rga-tile:nth-child(3) { order: 1; }
	.rga-mosaic > .rga-tile:nth-child(5) { order: 2; }

	/* Both sections keep desktop framing: a 150px run-up that clears the full
	   size seal, and 100px of band padding. The comp gives the stacked version
	   40px top and bottom, and 90px under the half-size seal. Padding is inline
	   on these blocks, hence !important. */
	.rga-why .wp-block-columns { padding-top: 90px !important; }

	.rga-why { padding-bottom: 40px !important; }

	.rga-retire {
		padding-top: 40px !important;
		padding-bottom: 40px !important;
	}

	/* Core's 36px column gap is the desktop rhythm; the comp sets the stacked
	   blocks about 24 apart. */
	.rga-why .wp-block-column > * + *,
	.rga-retire .wp-block-column > * + * {
		margin-block-start: 24px;
	}

	/* The outline frame offsets the photo by 16px on desktop; stacked it would
	   hang over the section gutter. */
	.rga-retire__media::before { inset: 0; }
}

@media ( min-width: 1024px ) {
	.rga-planning__media {
		flex-basis: min( 618px, 50% ) !important;
	}
}

@media ( max-width: 781px ) {
	/* Half-size seal, so the cap it straddles has to halve with it. */
	.rga-planning__cap,
	.rga-why__cap { min-height: 70px; }

	.rga-planning .rga-seal img,
	.rga-why .rga-seal img { width: 140px !important; }
}

@media ( max-width: 480px ) {
	.rga-planning__cap,
	.rga-why__cap { min-height: 50px; }

	.rga-planning .rga-seal img,
	.rga-why .rga-seal img { width: 100px !important; }
}

/* The browser's 40px list indent eats too much of a 350px measure - the comp
   sets the bullets 25px in, which is what keeps its first item on one line.
   Keyed to core/list specifically: the homepage's header sits inside the post
   content, so a bare `ul` also caught the navigation's list and shunted the
   whole menu 25px right. */
@media ( max-width: 480px ) {
	.entry-content ul.wp-block-list,
	.entry-content ol.wp-block-list {
		padding-left: 25px;
	}

	/* The bullets read as part of the line that introduces them, so the comp
	   drops the block gap between the two. Core's column block-gap rule is
	   (0,2,0), so this has to match it. */
	.rga-planning .wp-block-column > ul {
		margin-block-start: 8px;
	}

	/* Buttons come down from 52px to the comp's 40px row. */
	.wp-block-button__link {
		font-size: 16px;
		padding: 12px 24px 10px;
	}

	/* The section's desktop rhythm is 36px; stacked, the comp closes it to 28.
	   Core's column block-gap rule is a single class, so this outranks it. */
	.rga-planning .wp-block-column > * + * {
		margin-block-start: 28px;
	}
}


/* The footer sets its own gutter, so it is outside the root padding property
   too; `@mobile` in the part covers the phone, this covers the middle. */
@media ( min-width: 481px ) and ( max-width: 781px ) {
	.rga-footer {
		padding-left: 40px !important;
		padding-right: 40px !important;
	}
}

/* --- Footer contact icons -------------------------------------------------
   The comp sets these as small secondary-light discs with a primary-blue glyph.
   core/icon paints colour onto the <svg> itself, so the disc is the wrapper. */
.rga-footer .wp-block-icon {
	width: 25px;
	height: 25px;
	flex: 0 0 25px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 100px;
	background-color: var(--wp--preset--color--secondary-light);
	margin-top: 2px;
}

/* A navy disc is 1.47:1 against the charcoal footer - the shape all but vanishes.
   The comp has it the other way round: a secondary-light disc (6.77:1) carrying a
   primary-blue glyph (4.59:1 against the disc). The box has to stay square, and at
   20px the glyph lands at the comp's 14-15px once core/icon's own viewBox padding
   is taken off. */
.rga-footer .wp-block-icon svg {
	width: 20px;
	height: 20px;
	padding: 0;
	background: none;
	border-radius: 0;
	color: var(--wp--preset--color--primary);
	fill: currentColor;
}

/* Footer nav sits a little more open in the comp. */
.rga-footer__nav .wp-block-navigation-item__content {
	padding-block: 2px;
}

/* ===========================================================================
   TEAM  (block: rga/team-grid)
   Figma "Desktop - About Us" (node 323:2768): a 1128px column on the primary
   blue. The principal gets a 700px split card (navy copy panel | white photo
   panel), their bio runs below at 900px, then everyone else in a 3 x 360 grid
   of navy cards. Profile dialogs are unchanged.
   =========================================================================== */

.rga-team {
	background-color: var(--wp--preset--color--primary);
	padding-block: var(--wp--preset--spacing--70) var(--wp--preset--spacing--80);
	padding-inline: var(--wp--preset--spacing--60);
	color: var(--wp--preset--color--white);
}

/* --- Principal --------------------------------------------------------- */
.rga-team__lead {
	max-width: 1128px;
	margin: 0 auto var(--wp--preset--spacing--70);
}

.rga-team__lead-card {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 700px;
	border-radius: 20px;
	overflow: hidden;
}

/* Navy panel with the lion bleeding off its right edge, as on the homepage. */
.rga-team__lead-panel {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 52px;
	background-color: var(--wp--preset--color--secondary);
}

.rga-team__lead-panel::before {
	content: "";
	position: absolute;
	left: 223px;
	top: -40px;
	width: 623px;
	height: 780px;
	/* lion.svg is navy, the same as this panel, so it is used as a mask and
	   painted in the primary blue to read as a tone-on-tone watermark. */
	background-color: var(--wp--preset--color--primary);
	-webkit-mask: url("../images/lion.svg") no-repeat center / 100% 100%;
	mask: url("../images/lion.svg") no-repeat center / 100% 100%;
	opacity: 0.6;
	pointer-events: none;
}

.rga-team__lead-copy {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
	width: 100%;
	max-width: 460px;
}

.rga-team__lead-name {
	margin: 0 0 8px;
	font-family: var(--wp--preset--font-family--gelasio);
	font-size: var(--wp--preset--font-size--heading-1);
	font-weight: 400;
	line-height: 1.2;
	color: var(--wp--preset--color--white);
}

.rga-team__lead-role,
.rga-team__lead-specialties p,
.rga-team__lead-intro p {
	margin: 0;
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.5;
}

/* Specialties run in two columns; the light rule under them separates the
   facts from the opening paragraph. */
.rga-team__lead-specialties {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-bottom: var(--wp--preset--spacing--40);
	border-bottom: 1px solid var(--wp--preset--color--secondary-light);
}

.rga-team__lead-specialties ul {
	columns: 2;
	column-gap: var(--wp--preset--spacing--40);
	margin: 0;
	padding-left: 27px;
}

.rga-team__lead-specialties li {
	break-inside: avoid;
	line-height: 1.5;
}

/* White photo panel; the portrait is a 564-wide card sitting low so the head
   clears the top, per the comp. */
.rga-team__lead-photo {
	position: relative;
	overflow: hidden;
	background-color: var(--wp--preset--color--white);
}

/* Absolutely positioned so the portrait's intrinsic height cannot stretch the
   row past the comp's 700px; the panel's height comes from the copy side. */
.rga-team__lead-photo img,
.rga-team__lead-photo .rga-team-card__placeholder {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
}

/* Rest of the bio: 900px column under the card, white on the blue. */
.rga-team__lead-bio {
	max-width: 900px;
	margin: var(--wp--preset--spacing--70) auto 0;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--50);
}

.rga-team__lead-bio > * { margin: 0; }
.rga-team__lead-bio a { color: var(--wp--preset--color--white); }
.rga-team__lead-bio ul { padding-left: 27px; }

/* A bold-only paragraph becomes the navy callout band. */
.rga-team__lead-bio .rga-team__callout {
	padding: 10px 90px 8px;
	border-radius: 10px;
	background-color: var(--wp--preset--color--secondary);
	text-align: center;
	font-family: var(--wp--preset--font-family--condensed);
	font-size: var(--wp--preset--font-size--textlink);
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.01em;
}
.rga-team__lead-bio .rga-team__callout strong { font-weight: inherit; }

/* --- Everyone else ---------------------------------------------------- */
.rga-team__grid {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	max-width: 1128px;
	margin-inline: auto;
}

.rga-team-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
	background-color: var(--wp--preset--color--secondary);
	border-radius: 20px;
	padding: 24px 24px 28px;
	color: var(--wp--preset--color--white);
}

/* The whole card is the control; the arrow is decoration. */
.rga-team-card__trigger {
	position: absolute;
	inset: 0;
	z-index: 2;
	width: 100%;
	border: 0;
	padding: 0;
	background: none;
	cursor: pointer;
	border-radius: 20px;
}

.rga-team-card__trigger:focus-visible {
	outline: 3px solid var(--wp--preset--color--secondary-light);
	outline-offset: 3px;
}

.rga-team-card__photo {
	border-radius: 10px;
	overflow: hidden;
	background-color: #ababab;
	height: 312px;
}

.rga-team-card__photo img,
.rga-team-card__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
}

.rga-team-card__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1 0 auto;
}

.rga-team-card__name {
	margin: 0;
	font-family: var(--wp--preset--font-family--gelasio);
	font-size: var(--wp--preset--font-size--heading-2);
	font-weight: 700;
	line-height: 1.4;
	color: var(--wp--preset--color--white);
}

.rga-team-card__role {
	margin: 0;
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.5;
}

.rga-team-card__arrow {
	align-self: flex-end;
	margin-top: auto;
}

.rga-team-card__arrow img { display: block; width: 50px; height: 50px; }

.rga-team-card__trigger:hover ~ .rga-team-card__arrow { transform: translateX(3px); }
.rga-team-card__arrow { transition: transform 0.2s ease; }

/* --- Profile modal -------------------------------------------------------- */
.rga-modal[hidden] { display: none; }

.rga-modal {
	position: fixed;
	inset: 0;
	z-index: 999;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--30);
	overflow-y: auto;
}

.rga-modal__backdrop {
	position: fixed;
	inset: 0;
	background-color: rgba( 0, 0, 0, 0.1 );
	backdrop-filter: blur( 4px );
	-webkit-backdrop-filter: blur( 4px );
}

.rga-modal__panel {
	position: relative;
	/* content-box turned `min(800px, 100%)` into 426px on a 390px screen - the
	   100% branch was having the 72px padding and 4px border added to it. */
	box-sizing: border-box;
	width: min( 800px, 100% );
	margin-block: auto;
	background-color: var(--wp--preset--color--off-white);
	border: 2px solid var(--wp--preset--color--primary);
	border-radius: 20px;
	padding: 16px 36px 40px;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--charcoal);
}

.rga-modal__close {
	align-self: flex-end;
	border: 0;
	background: none;
	cursor: pointer;
	padding: 0;
	font-family: var(--wp--preset--font-family--condensed);
	font-size: var(--wp--preset--font-size--textlink);
	font-weight: 600;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	text-decoration: underline;
	color: var(--wp--preset--color--primary);
}

.rga-modal__head {
	display: flex;
	gap: var(--wp--preset--spacing--50);
	align-items: center;
}

.rga-modal__photo {
	flex: 0 0 280px;
	width: 280px;
	height: 280px;
	border-radius: 10px;
	overflow: hidden;
	background-color: #ababab;
}

.rga-modal__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }

.rga-modal__meta {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	min-width: 0;
}

.rga-modal__name {
	margin: 0;
	font-family: var(--wp--preset--font-family--gelasio);
	font-size: var(--wp--preset--font-size--heading-2);
	font-weight: 700;
	line-height: 1.4;
	color: var(--wp--preset--color--charcoal);
}

.rga-modal__social {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 10px;
}

.rga-modal__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 2px;
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
}

.rga-modal__social svg { width: 14px; height: 14px; }

.rga-modal__role,
.rga-modal__specialties p { margin: 0; }

.rga-modal__specialties ul { margin: 0; padding-left: 1.4em; }

.rga-modal__bio > *:first-child { margin-top: 0; }
.rga-modal__bio > *:last-child { margin-bottom: 0; }


/* --- Founding quote -------------------------------------------------------
   Oversized quote marks sit behind the pull-quote, one upright at the top
   left and one rotated at the lower right, exactly as in the comp. */
.rga-quote {
	position: relative;
	overflow: hidden;
	/* The marks were pinned at fixed pixel offsets taken from the 1440 comp, so
	   they stayed put while the copy column re-centred on wider screens. These
	   two numbers describe the relationship instead: the measure of the centred
	   column, and how far outside it each mark sits. */
	--rga-quote-measure: 800px;
	--rga-quote-inset: 144px;
}

.rga-quote::before,
.rga-quote::after {
	content: "";
	position: absolute;
	width: 209px;
	height: 166px;
	background: url("../images/quote-mark.svg") no-repeat center / contain;
	pointer-events: none;
	z-index: 0;
}

.rga-quote::before {
	left: calc( 50% - ( var(--rga-quote-measure) / 2 ) - var(--rga-quote-inset) );
	top: 56px;
}

.rga-quote::after {
	left: auto;
	right: calc( 50% - ( var(--rga-quote-measure) / 2 ) - var(--rga-quote-inset) );
	top: 246px;
	transform: rotate( 180deg );
}

/* Those offsets are measured outward from an 800px centred column, so below
   about 1100px they resolve negative and `overflow: hidden` clips both marks
   away - at 390 the opening one sits at -349px. Narrow screens tuck them into
   the gutters at a size that suits the column. */
@media ( max-width: 1023px ) {
	.rga-quote::before,
	.rga-quote::after {
		width: 100px;
		height: 79px;
	}

	.rga-quote::before {
		left: 4px;
		top: 40px;
	}

	.rga-quote::after {
		right: 4px;
		top: 240px;
	}
}

.rga-quote > * { position: relative; z-index: 1; }

/* Homepage variant (Rick's quote, Dev QA todo 10349360629): the copy is longer
   than About's, so the fixed top offset left the closing mark mid-paragraph.
   Pin it to the bottom of the band instead, next to the end of the quote. */
.rga-quote--home::after {
	top: auto;
	bottom: 40px;
}

@media ( max-width: 1023px ) {
	.rga-quote--home::after {
		top: auto;
		bottom: 150px;
	}
}

.rga-quote__mark {
	font-style: italic;
	line-height: 1.3;
}

/* The comp's 360x5 accent rule between the quote and the closing paragraph. */
.rga-quote-rule {
	width: 360px;
	height: 5px;
	border: 0;
	margin: 0 auto;
	background-color: var(--wp--preset--color--primary);
	opacity: 1;
}

/* ===========================================================================
   RICK IN THE MEDIA — listing + single post
   =========================================================================== */

/* --- Featured hero on the listing, and the single-post hero ---------------
   Both put the title over a full-bleed featured image. core/post-featured-image
   cannot host inner blocks, so the image is layered behind the content. */
.rga-featured__item,
.rga-posthero {
	position: relative;
	min-height: 600px;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
}

.rga-featured__image,
.rga-posthero__image {
	position: absolute;
	inset: 0;
	margin: 0;
	z-index: 0;
	overflow: hidden;
}

/* The still keeps its own 16:9 ratio at the band's full height, centred;
   behind it a blurred copy (span injected by rga_hero_blur_backdrop) fills the
   band so there is never bare colour at the sides. The copy bleeds past the
   edges so the blur's soft rim is clipped off (Figma 513-2). */
.rga-hero-blur {
	position: absolute;
	inset: -102px 0;
	background-size: cover;
	background-position: center;
	filter: blur(15px);
	z-index: 0;
}

.rga-featured__image > a,
.rga-posthero__image > a {
	display: block;
	height: 100%;
}

.rga-featured__image img,
.rga-posthero__image img {
	position: relative;
	z-index: 1;
	width: auto;
	max-width: 100%;
	height: 100%;
	margin: 0 auto;
	object-fit: cover;
	display: block;
	border-radius: 0;
}

/* A wash under the copy so white type stays legible on any photo: the comp's
   two flat primary layers, 50% multiplied then 30% normal (Figma 513-2). It
   replaced the round-2 left gradient when the blurred backdrop arrived. */
.rga-featured__item::before,
.rga-posthero::before,
.rga-featured__item::after,
.rga-posthero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

.rga-featured__item::before,
.rga-posthero::before {
	background: rgba( 18, 72, 137, 0.5 );
	mix-blend-mode: multiply;
}

.rga-featured__item::after,
.rga-posthero::after {
	background: rgba( 18, 72, 137, 0.3 );
}

.rga-featured__inner,
.rga-posthero__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--60);
}

.rga-featured__inner .wp-block-post-title,
.rga-posthero__inner .wp-block-post-title { margin: 0; }

/* The 80/50 frame is sized for a 1440 band. On a phone it leaves the headline
   a 290px column, which ladders a real article title to eight lines where the
   comp shows three; the gutter has to come in to the page's 20px and the
   vertical padding to half. min-height then stops fighting the content. */
@media ( max-width: 781px ) {
	.rga-featured__inner,
	.rga-posthero__inner {
		padding: 40px 20px;
	}

	.rga-featured__item,
	.rga-posthero {
		min-height: 360px;
	}
}

/* The gutter is 40px in this band, not the phone's 20 - one query for both was
   leaving the hero headline 20px left of the column beneath it. */
@media ( min-width: 481px ) and ( max-width: 781px ) {
	.rga-featured__inner,
	.rga-posthero__inner {
		padding: 40px;
	}
}

.rga-featured__inner .wp-block-post-title a { text-decoration: none; }

/* --- Listing grid --------------------------------------------------------- */
.rga-medialist .wp-block-post-template { margin: 0; }

.rga-media-card--framed .wp-block-post-featured-image {
	background-color: var(--wp--preset--color--white);
	padding: 6px;
	border-radius: 6px;
}

.rga-media-card--framed .wp-block-post-featured-image img {
	height: 170px;
	object-fit: cover;
	width: 100%;
	border-radius: 4px;
}

/* "View More" reads as a button rather than pagination. */
.rga-viewmore { margin-top: var(--wp--preset--spacing--60); }

.rga-viewmore .wp-block-query-pagination-next {
	display: inline-block;
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	border-radius: 5px;
	padding: 18px 32px 14px;
	font-family: var(--wp--preset--font-family--condensed);
	font-size: var(--wp--preset--font-size--button);
	font-weight: 700;
	line-height: 0.9;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
}

/* --- Single post ---------------------------------------------------------- */
.rga-crumbs { font-size: var(--wp--preset--font-size--label); }
.rga-crumbs p,
.rga-crumbs .wp-block-post-title { margin: 0; font-weight: 400; }

.rga-crumbs__current {
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 600;
	line-height: 1.4;
	color: var(--wp--preset--color--charcoal);
}

.rga-crumbs a { color: var(--wp--preset--color--secondary); }
.rga-crumbs__sep { color: var(--wp--preset--color--gray); }

/* Date and category render as outlined pills beside the copy. */
.rga-postmeta .rga-pill,
.rga-postmeta .rga-pill a {
	display: inline-block;
	border: 1px solid var(--wp--preset--color--primary);
	border-radius: 100px;
	padding: 6px 14px;
	color: var(--wp--preset--color--primary);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	font-weight: 600;
	text-decoration: none;
	line-height: 1.4;
}

/* post-terms wraps its links, so the pill belongs on the link itself. The
   pills stack, so the ", " separator between them is noise. The links are
   inline-blocks, so the gap needs flex to take effect. */
.rga-postmeta .wp-block-post-terms.rga-pill {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	border: 0;
	padding: 0;
}
.rga-postmeta .wp-block-post-terms.rga-pill .wp-block-post-terms__separator { display: none; }

.rga-coverage__source { margin-block: 0; }
.rga-coverage__source a { word-break: break-word; }

.rga-coverage__video { margin-top: var(--wp--preset--spacing--50); }

/* oEmbed iframes carry height="281"; as a presentational hint it beats
   aspect-ratio, squashing the player into a letterboxed strip. */
.rga-coverage__video video,
.rga-coverage__video iframe {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: var(--rga-video-ratio, 16 / 9);
	border: 0;
	border-radius: 10px;
	background: #000;
}

/* The featured CTA is a core/read-more (so it carries the post permalink)
   painted to match the theme's light button. */
.rga-featured__cta {
	display: inline-block;
	align-self: flex-start;
	/* The constrained layout indents block children to the wideSize grid via
	   `margin-inline: auto`. An inline-block resolves auto margins to zero, so
	   the CTA lands at the padding edge instead of under the title. Apply the
	   same offset explicitly; it collapses to 0 once the container is narrower
	   than wideSize, matching how the rest of the grid behaves. Core emits its
	   layout margins with !important, so this has to match that weight. */
	margin-left: calc( ( 100% - min( var(--wp--style--global--wide-size), 100% ) ) / 2 ) !important;
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--primary);
	border: 2px solid var(--wp--preset--color--white);
	border-radius: 5px;
	padding: 18px 32px 14px;
	font-family: var(--wp--preset--font-family--condensed);
	font-size: var(--wp--preset--font-size--button);
	font-weight: 700;
	line-height: 0.9;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
}

/* "Back" is secondary to "View More"; core hides it on the first page, so the
   comp's single-button treatment is preserved there. */
.rga-viewmore { gap: var(--wp--preset--spacing--30); align-items: center; }

.rga-viewmore .wp-block-query-pagination-previous {
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--condensed);
	font-size: var(--wp--preset--font-size--button);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: underline;
}

/* ===========================================================================
   MARKET COMMENTARY — listing + single
   =========================================================================== */

/* This section's page head is the primary blue with white type, unlike the
   light-grey band every other page uses. */
body.page-market-commentary .rga-pagehead {
	background-color: var(--wp--preset--color--primary) !important;
}

/* The shared page head uses a navy title; on this page's blue band it has to be
   white. Core prints preset colour classes (has-secondary-color) with
   !important, so this override needs the same weight to land. */
body.page-market-commentary .rga-pagehead .wp-block-post-title {
	color: var(--wp--preset--color--white) !important;
}

/* The shared head uses svc-titlebar.svg, whose lion is filled #124889 - the very
   colour this page's head is painted, so it disappears against it. lion.svg
   carries the darker #07335A fill instead. Its paths already ship
   fill-opacity="0.2", which is exactly the tint measured off the comp, so the
   CSS opacity stays at 1 rather than multiplying against it. */
body.page-market-commentary .rga-pagehead::after {
	background-image: url("../images/lion.svg");
	opacity: 1;
}

/* The comp gives this page a shallower head than the shared 196px default. */
body.page-market-commentary .rga-pagehead { min-height: 162px; }

/* --- Featured card -------------------------------------------------------- */
.rga-mc-featured__inner {
	border-radius: 20px;
	overflow: hidden;
	margin-block: 0;
	align-items: stretch;
}

.rga-mc-featured__inner { position: relative; }

/* The comp runs the photo across the full card and floats a translucent navy
   panel over its left half - the building is visible through it. Measured at
   ~0.88 alpha (texture stdev 5.5 through the panel vs 50 on the bare image). */
.rga-mc-featured__media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
}

.rga-mc-featured__copy {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--wp--preset--spacing--50);
	background-color: rgba( 7, 51, 90, 0.88 );  /* --wp--preset--color--secondary */
}

.rga-mc-featured__copy .wp-block-post-title { margin: 0; }
.rga-mc-featured__copy .wp-block-post-excerpt { margin: 0; }
.rga-mc-featured__copy .wp-block-post-excerpt__more-text { display: none; }


.rga-mc-featured__media .wp-block-post-featured-image,
.rga-mc-featured__media .wp-block-post-featured-image a,
.rga-mc-featured__media img {
	height: 100%;
	width: 100%;
	margin: 0;
	object-fit: cover;
	display: block;
}

/* Category pill on the dark panel. */
.rga-pill--light,
.rga-pill--light a {
	display: inline-block;
	border: 1px solid var(--wp--preset--color--white);
	border-radius: 100px;
	padding: 6px 14px;
	color: var(--wp--preset--color--white);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	font-weight: 600;
	text-decoration: none;
	line-height: 1.4;
}
.rga-mc-featured__copy .wp-block-post-terms.rga-pill--light { border: 0; padding: 0; }

.rga-mc-featured__cta {
	display: inline-block;
	align-self: flex-start;
	margin: 0;  /* the column gap sets the spacing; core adds a margin of its own */
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--primary);
	border-radius: 5px;
	padding: 18px 32px 14px;
	font-family: var(--wp--preset--font-family--condensed);
	font-size: var(--wp--preset--font-size--button);
	font-weight: 700;
	line-height: 0.9;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
}

/* The columns carry an explicit 50% width so they hit the comp's even 620/620
   split; min-width:0 stops the copy column's min-content from widening it. */
.rga-mc-featured__inner > .wp-block-column {
	min-width: 0;
	/* Without border-box the 50% basis excludes the copy column's 50px padding,
	   so the pair overflows and shrinks unevenly to 670/570. */
	box-sizing: border-box;
}

/* --- Horizontal list rows -------------------------------------------------
   The comp insets these rows well inside the 1240px grid the rest of the page
   uses, and gives them a much larger thumbnail than the media cards. */
.rga-mc-list .wp-block-post-template {
	margin: 0;
	max-width: 900px;
	margin-inline: auto;
}

.rga-mc-row {
	box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.06 );
	align-items: center;
}

.rga-mc-row__thumb {
	flex: 0 0 414px;
	margin: 0;
}

.rga-mc-row__thumb img {
	width: 414px;
	height: 219px;
	object-fit: cover;
	border-radius: 6px;
	display: block;
}

.rga-mc-row__body { flex: 1 1 auto; min-width: 0; }

/* The 414px thumbnail is wider than a phone, and the row is a flex line with
   no wrap - below the stacking width the picture goes over the copy and grows
   with the column instead. */
@media ( max-width: 781px ) {
	.rga-mc-row { flex-wrap: wrap; }

	.rga-mc-row__thumb { flex: 1 1 100%; }

	.rga-mc-row__thumb img {
		width: 100%;
		height: auto;
		aspect-ratio: 414 / 219;
	}
}
.rga-mc-row__body .wp-block-post-title { margin: 0; }
.rga-mc-row__title a { text-decoration: underline; }
.rga-mc-row__body .wp-block-post-excerpt { margin: 0; }
.rga-mc-row__body .wp-block-post-excerpt__more-text { display: none; }

/* arrow.svg ships with a fixed #8ABDF0 fill for the navy cards; mask it here so
   it picks up the navy link colour on white instead. */
.rga-mc-row__more {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.rga-mc-row__more::after {
	content: "";
	width: 22px;
	height: 15px;
	flex: 0 0 22px;
	background-color: currentColor;
	-webkit-mask: url("../images/arrow.svg") no-repeat center / contain;
	mask: url("../images/arrow.svg") no-repeat center / contain;
}

/* "View More" on this section sits on off-white, so it takes the navy fill. */
.rga-viewmore--dark .wp-block-query-pagination-next {
	background-color: var(--wp--preset--color--secondary);
}

/* --- Single: pills inline above the title, image below -------------------- */
.rga-postmeta--inline { align-items: center; }
.rga-postmeta--inline .wp-block-post-date,
.rga-postmeta--inline .wp-block-post-terms { margin: 0; }

.rga-mc-hero img {
	width: 100%;
	border-radius: 10px;
	display: block;
}

/* Related band: white cards on primary blue. */
.rga-related .rga-media-card--light .wp-block-post-title a { text-decoration: none; }
.rga-related .wp-block-heading { margin: 0; }

/* The comp's featured card is a tall banner; the copy alone would collapse it. */
.rga-mc-featured__inner { min-height: 700px; }

/* Title and image run the full content width, but body copy stays at a
   readable measure, as in the comp. */
.rga-mc-single .wp-block-post-content {
	max-width: 860px;
	margin-inline: auto;
}

/* --- Client Access --------------------------------------------------------
   The comp replaces the shared grey page head with a full-bleed blue hero that
   carries the title itself, so this page uses the page-full-width template. */
.rga-clientaccess {
	position: relative;
	overflow: hidden;
	min-height: 700px;
}

/* Same navy lion as the Market Commentary head - lion.svg already ships
   fill-opacity="0.2", so no extra CSS opacity here. It bleeds past the hero
   vertically, matching the comp where it runs the full band height. */
.rga-clientaccess::after {
	content: "";
	position: absolute;
	left: 545px;
	top: 50%;
	width: 950px;
	height: 1190px;
	transform: translateY( -50% );
	background: url("../images/lion.svg") no-repeat center / 100% 100%;
	pointer-events: none;
	z-index: 0;
}

.rga-clientaccess > * {
	position: relative;
	z-index: 1;
}

.rga-ca-title { margin-block: 0; }
.rga-ca-intro { margin-block: 0; }

/* Two cards to a row, so the client portal card sits centred beneath the
   first pair (Dev QA round 3): two 389px cards plus the 36px gap. */
.rga-ca-row {
	align-items: stretch;
	max-width: calc( 2 * 389px + 36px );
	margin-inline: auto;
}

/* Three-up in the comp at 389px each; two real portals here keep that width so
   the cards stay the size they were drawn, centred rather than stretched. */
.rga-ca-card {
	flex: 0 0 389px;
	max-width: 100%;
	min-height: 360px;
	border-radius: 4px;
}

.rga-ca-card__copy {
	margin-block: 0;
	line-height: 1.35;
}

.rga-ca-btn .wp-block-button__link {
	border-radius: 5px;
	padding: 15px 28px 12px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
}

/* --- Contact form ---------------------------------------------------------
   The comp uses underline-only fields on off-white: no boxes, the label doubles
   as the placeholder, and every rule is secondary-light. */
.rga-contact {
	position: relative;
	overflow: hidden;
	min-height: 730px;
}

/* svc-titlebar.svg is the right asset here - its lion is filled #124889 at
   fill-opacity 0.05, which is exactly the pale wash measured off the comp. */
.rga-contact::after {
	content: "";
	position: absolute;
	right: -120px;
	top: 50%;
	width: 860px;
	height: 922px;
	transform: translateY( -50% );
	background: url("../images/svc-titlebar.svg") no-repeat center / 100% 100%;
	pointer-events: none;
	z-index: 0;
}

.rga-contact > * {
	position: relative;
	z-index: 1;
}

/* The column itself takes the full 1240 track so the constrained layout leaves
   it at the grid edge; the 538px measure from the comp is applied to its
   children instead, which sit in flow and so are not auto-centred. */
.rga-contact__col > * { max-width: 538px; }
.rga-form__fields { display: flex; flex-direction: column; }

/* Block supports emit their classes and inline styles on the field wrapper, and
   form controls inherit neither typography nor colour from an ancestor - the UA
   stylesheet resets font, colour and letter-spacing on them. So the defaults sit
   on the wrapper and the control follows it, which is what makes the editor's
   Styles panel actually reach the input. */
.rga-field {
	position: relative;
	color: var(--wp--preset--color--charcoal);
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.4;
}

.rga-field__input {
	width: 100%;
	box-sizing: border-box;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--secondary-light);
	border-radius: 0;
	background: transparent;
	/* 16 + line-height + 13 + 1px rule = the comp's 55px row pitch. */
	padding: 16px 2px 13px;
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
}

.rga-field__input::placeholder {
	color: var(--wp--preset--color--gray);
	opacity: 1;
}

.rga-field__input:focus {
	outline: none;
	border-bottom-color: var(--wp--preset--color--primary);
	border-bottom-width: 2px;
	/* Keep the field from shifting when the rule thickens on focus. */
	padding-bottom: 12px;
}

.rga-field__input--textarea {
	min-height: 96px;
	resize: vertical;
}

.rga-field--error .rga-field__input { border-bottom-color: #b32d2e; }

.rga-field__error {
	margin: 6px 0 0;
	color: #b32d2e;
	font-size: var(--wp--preset--font-size--label);
}

/* Honeypot. Kept out of the layout and off the tab order without display:none,
   which some bots specifically skip. */
.rga-form__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.rga-form__submit {
	display: inline-block;
	margin-top: var(--wp--preset--spacing--50);
	border: 0;
	border-radius: 3px;
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	padding: 17px 26px 14px;
	font-family: var(--wp--preset--font-family--condensed);
	font-size: var(--wp--preset--font-size--button);
	font-weight: 700;
	line-height: 0.9;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
}


.rga-form__required {
	margin: var(--wp--preset--spacing--30) 0 0;
	color: var(--wp--preset--color--gray);
	font-size: var(--wp--preset--font-size--label);
}

.rga-form__notice {
	margin: 0 0 var(--wp--preset--spacing--40);
	border-radius: 4px;
	padding: 14px 18px;
	font-size: var(--wp--preset--font-size--body);
}

.rga-form__notice--success {
	background-color: #e6f2e6;
	color: #14571a;
}

.rga-form__notice--error {
	background-color: #fbeaea;
	color: #b32d2e;
}

/* Choice fields. The comp only shows text inputs, so these follow its language:
   the same secondary-light rule, and controls tinted to the brand blue. */
.rga-field__input--select {
	appearance: none;
	cursor: pointer;
	/* Room for the caret, which is drawn as a background chevron. */
	padding-right: 28px;
	background-image: linear-gradient( 45deg, transparent 50%, var(--wp--preset--color--primary) 50% ),
		linear-gradient( 135deg, var(--wp--preset--color--primary) 50%, transparent 50% );
	background-position: right 12px center, right 6px center;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
}

.rga-field__group {
	margin: 0;
	border: 0;
	padding: 14px 0 10px;
}

.rga-field__legend {
	padding: 0;
	font: inherit;
	letter-spacing: inherit;
	color: var(--wp--preset--color--gray);
}

.rga-field__option {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-top: 10px;
}

.rga-field__control {
	flex: 0 0 auto;
	margin: 2px 0 0;
	width: 17px;
	height: 17px;
	accent-color: var(--wp--preset--color--primary);
}

.rga-field__option-label {
	font: inherit;
	letter-spacing: inherit;
	color: inherit;
	cursor: pointer;
}

/* Groups carry the rule on the fieldset rather than an input. */
.rga-field--radio,
.rga-field--checkbox { border-bottom: 1px solid var(--wp--preset--color--secondary-light); }

.rga-field--radio.rga-field--error,
.rga-field--checkbox.rga-field--error { border-bottom-color: #b32d2e; }

/* --- Homepage hero slider -------------------------------------------------
   Slides are stacked in the same box and cross-faded. Layout is written out
   rather than borrowed from core's columns, so the two halves cannot be
   re-proportioned by a core change. */
/* One number drives the split, so the backdrop and the slide halves cannot
   drift apart. */
.rga-hero__slider {
	position: relative;
	--rga-hero-split: 55%;
}

/* The blue half is painted once, behind everything. Fading it with the slide
   made two translucent panels overlap mid-transition and the colour dipped. */
.rga-hero__backdrop {
	position: absolute;
	inset: 0 auto 0 0;
	width: var(--rga-hero-split);
	background-color: var(--wp--preset--color--primary);
	overflow: hidden;
	z-index: 0;
	pointer-events: none;
}

.rga-hero__backdrop::before {
	content: "";
	position: absolute;
	left: 42.92%;
	top: -7.2%;
	width: 822px;
	height: 1029.69px;
	background: url("../images/lion.svg") no-repeat center / 100% 100%;
}

.rga-hero__slides {
	position: relative;
	z-index: 1;
	display: grid;
	/* Every slide occupies the same cell, so the tallest one sets the height
	   and nothing reflows as they change. */
	grid-template-areas: "slide";
}

.rga-hero__slide {
	grid-area: slide;
	display: flex;
	min-height: 900px;
	visibility: hidden;
	transition: visibility 0s linear 0.6s;
}

.rga-hero__slide.is-active {
	visibility: visible;
	/* Above the outgoing slide, which stays opaque underneath it. */
	z-index: 1;
	transition: visibility 0s linear 0s;
}

/* Article titles run far longer than the comp's marketing copy, so the copy
   half takes a little more than half. At an even split the longest headline
   needs five lines; 55% brings it to three without the image reading as an
   afterthought. */
.rga-hero__slide > .rga-hero__panel { flex: 1 1 var(--rga-hero-split); }
.rga-hero__slide > .rga-hero__media { flex: 1 1 calc( 100% - var(--rga-hero-split) ); }

.rga-hero__slide > .rga-hero__panel,
.rga-hero__slide > .rga-hero__media {
	min-width: 0;
	box-sizing: border-box;
}

.rga-hero__slide > .rga-hero__panel {
	display: flex;
	flex-direction: column;
	justify-content: center;
	/* Transparent: the backdrop behind supplies the colour. */
	background-color: transparent;
	/* The left gutter stays on the 50px grid the logo and slide dashes use;
	   only the right side gives ground. */
	padding-left: var(--wp--preset--spacing--60);
	padding-right: 30px;
}

.rga-hero__slide .rga-hero__content {
	width: 100%;
	max-width: 760px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--40);
}

.rga-hero__slide .rga-hero__copy {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--50);
}

.rga-hero__headline {
	margin: 0;
	font-weight: 400;
	line-height: 1.1;
}

/* The incoming photo fades in on top; the outgoing one holds full opacity
   until that finishes, so the page never shows through the gap between them. */
.rga-hero__slide .rga-hero__media {
	position: relative;
	overflow: hidden;
	opacity: 0;
	transition: opacity 0s linear 0.6s;
}

.rga-hero__slide.is-active .rga-hero__media {
	opacity: 1;
	transition: opacity 0.6s ease;
}

.rga-hero__slide .rga-hero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* A light navy scrim over the photo so the white header controls (portal
   button, menu) stay readable on bright imagery (Dev QA round 2). */
.rga-hero__slide .rga-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(7, 51, 90, 0.35);
	pointer-events: none;
}

/* Video slides: the whole photo is the play control (the client asked for a
   click on the image to start the video), with a disc marking it. Playing
   swaps the photo for the player on navy (Dev QA round 3). */
.rga-hero__play {
	position: absolute;
	inset: 0;
	z-index: 2;
	width: 100%;
	border: 0;
	padding: 0;
	background: transparent;
	cursor: pointer;
}

.rga-hero__play::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 96px;
	height: 96px;
	margin: -48px 0 0 -48px;
	border-radius: 50%;
	background: var(--wp--preset--color--white) url("../images/play.svg") no-repeat 56% 50% / 34px 34px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
	transition: transform 0.2s ease, background-color 0.2s ease;
}

.rga-hero__play:hover::before,
.rga-hero__play:focus-visible::before {
	transform: scale(1.08);
	background-color: var(--wp--preset--color--secondary-light);
}

.rga-hero__play:focus-visible { outline: 3px solid var(--wp--preset--color--white); outline-offset: -6px; }

.rga-hero__player { display: none; }

.rga-hero__media--video.is-playing { background-color: var(--wp--preset--color--secondary); }
.rga-hero__media--video.is-playing::after,
.rga-hero__media--video.is-playing .rga-hero__img,
.rga-hero__media--video.is-playing .rga-hero__play { display: none; }

/* Header controls sit over the top of this half, so the player centres in
   the space below them. */
.rga-hero__media--video.is-playing .rga-hero__player {
	display: flex;
	align-items: center;
	position: absolute;
	inset: 130px 40px 40px;
	z-index: 2;
}

.rga-hero__player iframe,
.rga-hero__player video {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: 10px;
	background: #000;
}

/* --- Slider controls ------------------------------------------------------ */
/* These replace hero-rule.svg, which drew the same three dashes decoratively.
   Geometry and colours are taken straight from that file: 120x4 at 10px gaps,
   the current one in secondary-light against #416DA1. */
.rga-hero__dots {
	position: absolute;
	left: 57px;
	top: 785px;
	display: flex;
	gap: 10px;
	z-index: 3;
}

.rga-hero__dot {
	width: 120px;
	height: 4px;
	border: 0;
	padding: 0;
	background-color: #416da1;
	cursor: pointer;
}

.rga-hero__dot.is-active { background-color: var(--wp--preset--color--secondary-light); }

.rga-hero__arrows.rga-hero__arrows {
	position: absolute;
	left: 549px;
	top: 750px;
	display: flex;
	gap: 12px;
	z-index: 3;
}

/* The arrow SVGs already draw their own outlined box, so the button is just a
   transparent hit area - a border here would double it. */
.rga-hero__arrow {
	width: 50px;
	height: 50px;
	border: 0;
	padding: 0;
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 50px 50px;
	cursor: pointer;
	opacity: 0.9;
	transition: opacity 0.2s ease;
}

.rga-hero__arrow--prev { background-image: url("../images/hero-arrow-prev.svg"); }
.rga-hero__arrow--next { background-image: url("../images/hero-arrow-next.svg"); }

.rga-hero__arrow:hover { opacity: 1; }

/* Copy arrives as a short staggered rise from the left, rather than the whole
   panel blinking. Each element carries its own delay so they land in reading
   order. */
.rga-hero__slide .rga-eyebrow,
.rga-hero__slide .rga-hero__headline,
.rga-hero__slide .wp-block-buttons {
	opacity: 0;
	transform: translateX( -28px );
	transition: opacity 0.5s ease, transform 0.5s ease;
}

.rga-hero__slide.is-active .rga-eyebrow,
.rga-hero__slide.is-active .rga-hero__headline,
.rga-hero__slide.is-active .wp-block-buttons {
	opacity: 1;
	transform: none;
}

.rga-hero__slide.is-active .rga-eyebrow { transition-delay: 0.10s; }
.rga-hero__slide.is-active .rga-hero__headline { transition-delay: 0.18s; }
.rga-hero__slide.is-active .wp-block-buttons { transition-delay: 0.26s; }

/* --- Team, narrow ----------------------------------------------------------
   The principal card stacks (photo above copy) once two 564px halves no longer
   fit; the grid drops to two columns, then one on a phone. */
@media ( max-width: 1023px ) {
	.rga-team__lead-card {
		grid-template-columns: minmax( 0, 1fr );
		min-height: 0;
	}

	.rga-team__lead-photo { order: -1; aspect-ratio: 4 / 3; }
	.rga-team__lead-photo img { object-position: top center; }
	.rga-team__lead-panel { padding: 36px 24px; }
	.rga-team__lead-copy { max-width: none; }

	.rga-team__lead-bio .rga-team__callout { padding-inline: 24px; }

	.rga-team__grid {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}

	.rga-team-card__photo {
		height: auto;
		aspect-ratio: 1 / 1;
	}
}

@media ( max-width: 480px ) {
	.rga-team__grid {
		grid-template-columns: minmax( 0, 1fr );
	}

	.rga-team__lead-specialties ul { columns: 1; }
	.rga-team { padding-inline: 20px; }
}

@media ( min-width: 481px ) and ( max-width: 781px ) {
	.rga-team { padding-inline: 40px; }
}

/* The modal head is a photo beside a meta column holding the name, the social
   row, the role and the specialties. The comp keeps only the name and socials
   next to the photo and drops the rest to full width. `display: contents` lifts
   the meta children into the head's own grid so they can be placed
   individually - no markup change needed. */
@media ( max-width: 781px ) {
	.rga-modal { padding: 20px; }

	.rga-modal__panel { padding: 16px 20px 28px; }

	.rga-modal__head {
		display: grid;
		grid-template-columns: auto minmax( 0, 1fr );
		column-gap: 16px;
		row-gap: 10px;
		align-items: start;
	}

	.rga-modal__meta { display: contents; }

	.rga-modal__photo {
		grid-column: 1;
		grid-row: 1 / span 2;
		flex: none;
		width: 80px;
		height: 80px;
	}

	.rga-modal__name { grid-column: 2; grid-row: 1; }

	.rga-modal__social { grid-column: 2; grid-row: 2; }

	.rga-modal__role,
	.rga-modal__specialties { grid-column: 1 / -1; }
}

/* ===========================================================================
   NARROW-SCREEN FIXES FOR THE INTERIOR PAGES
   =========================================================================== */

/* --- Breadcrumbs ----------------------------------------------------------
   The bar is flex-nowrap, so on a phone both halves are squeezed into columns
   and ladder: at 390 the parent link took 46x92 (four lines) and the title
   277x90, making a 120px bar where the comp draws one 48px line. Pin the
   parent label and let the current title take the remaining width, truncated. */
.rga-crumbs > * {
	flex: 0 0 auto;
	white-space: nowrap;
}

.rga-crumbs__current {
	flex: 0 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* --- Gutters the root property cannot reach -------------------------------
   These blocks set their own horizontal padding, so the 481-781 band has to be
   spelled out the way it is for the footer and the services section. */
@media ( min-width: 481px ) and ( max-width: 781px ) {
	.rga-crumbs,
	.rga-pagehead {
		padding-left: 40px !important;
		padding-right: 40px !important;
	}
}

/* --- Horizontal card scrollers --------------------------------------------
   The leading spacer is sized off the 50px desktop gutter, so the first card
   sat at x=50 while the heading and rule above it sat on the page gutter. */
@media ( max-width: 480px ) {
	.rga-media-scroller .wp-block-post-template::before { flex-basis: 0; }
}

@media ( min-width: 481px ) and ( max-width: 781px ) {
	.rga-media-scroller .wp-block-post-template::before { flex-basis: 20px; }
}

/* --- Post meta pills ------------------------------------------------------
   Inline-block pills sit side by side until the column happens to be narrow
   enough to wrap them. The comp stacks them on every phone width. */
@media ( max-width: 781px ) {
	.rga-postmeta,
	.rga-postmeta--inline {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--wp--preset--spacing--20);
	}

	.rga-related .wp-block-heading { text-align: center; }
}

/* --- Market Commentary featured card --------------------------------------
   On desktop the photo runs the full card with a translucent navy panel over
   its left half. Stacked, that panel covers the whole card and the photo was
   measured 100% hidden. The comp turns it into a plain two-part card: photo
   band on top, opaque navy copy beneath. */
@media ( max-width: 781px ) {
	.rga-mc-featured__inner {
		min-height: 0;
		flex-direction: column;
	}

	/* The image rules inside set height:100%, which against a static parent
	   resolves to auto and lets the photo keep its 4:3 - the comp crops it to a
	   200px band. Doubling the class clears the column width rule. */
	.rga-mc-featured__media.rga-mc-featured__media {
		position: static;
		order: -1;
		min-height: 0;
		overflow: hidden;
	}

	/* Sizing the column itself loses to core's `flex-basis: 100% !important`, so
	   the band is set on the picture, which is what holds the height anyway.
	   Without this the 500x375 photo runs to 263px at 390. */
	.rga-mc-featured__media .wp-block-post-featured-image,
	.rga-mc-featured__media .wp-block-post-featured-image a,
	.rga-mc-featured__media img {
		height: 200px;
	}

	.rga-mc-featured__copy {
		background-color: var(--wp--preset--color--secondary);
		padding: 24px 20px 28px;
	}
}

/* --- Client Access --------------------------------------------------------
   The cards are drawn 389px wide and 360px tall for a three-up desktop row.
   Stacked they kept both, leaving ~118px of empty navy in each and a 156px
   bare strip beside them once the column was wider than 389. */
@media ( max-width: 1023px ) {
	.rga-clientaccess { min-height: 0; }

	.rga-ca-card {
		flex: 1 1 100%;
		min-height: 0;
	}
}

@media ( max-width: 480px ) {
	.rga-ca-card { padding: 28px 20px !important; }
}

/* Every other decorative lion is re-anchored for narrow screens; this one was
   left at its desktop offset and clipped away entirely. */
@media ( max-width: 1023px ) {
	.rga-clientaccess::after {
		left: auto;
		right: -150px;
		width: 520px;
		height: 651px;
	}
}

/* --- Contact --------------------------------------------------------------
   The comp centres the heading, the intro and the submit button, and the
   730px min-height leaves dead space under a short form on a phone. */
@media ( max-width: 781px ) {
	.rga-contact { min-height: 0; }

	.rga-contact__copy { text-align: center; }

	.rga-contact__col > * { max-width: none; }

	.rga-form__submit {
		display: block;
		margin-inline: auto;
	}
}

/* --- Hero, stacked ---------------------------------------------------------
   The comp drops the 55/45 split below the tablet line: a full-width navy copy
   block with the slider controls in its bottom band, then the photo full bleed
   underneath. Measured off the 390 comp - copy block 412px, photo 260px, and
   inside the copy block 40px of padding, a 34px pill, the headline at 32/36,
   the CTA, and a 40px controls row sitting 40px off the bottom. */
@media ( max-width: 781px ) {
	/* The header stops being an overlay and becomes a band the hero sits under,
	   which is what puts the pill at the comp's y=141.

	   `relative` with `inset: auto` sits exactly where `static` did, but it keeps
	   the header as the containing block for the menu sheet below it. Left static
	   the sheet's `top: 100%` resolved against the whole 842px hero and landed at
	   the hero's bottom edge. z-index is reset to auto so `relative` does not
	   promote the header's z-index:2 into a stacking context - that would trap the
	   sheet's z-index:5 at level 2 and let the slider's dots and arrows (3) paint
	   through it. */
	.rga-hero__header.rga-hero__header {
		position: relative;
		inset: auto;
		z-index: auto;
	}

	/* The comp puts the homepage header on an off-white band with the colour
	   logo, where every other page keeps the navy one. The site logo is a white
	   knockout, so the colour version is painted behind it and the <img> is held
	   at zero opacity - it still sizes the link and still names it for a screen
	   reader, which display:none would not.

	   */
	.rga-hero__header {
		background-color: var(--wp--preset--color--off-white);
	}

	.rga-hero__header .custom-logo-link {
		display: block;
		background: url("../images/logo-colour.png") no-repeat left center / contain;
	}

	.rga-hero__header .custom-logo-link img { opacity: 0; }

	/* Core prints the preset colour class with !important. */
	.rga-hero__header .rga-menu-label { color: var(--wp--preset--color--secondary) !important; }

	/* Inverted against the interior header: navy disc, white glyph, and it stays
	   navy when open so the X does not drop to white-on-off-white. */
	.rga-hero__header .rga-menu-toggle,
	.rga-hero__header.is-menu-open .rga-menu-toggle {
		background-color: var(--wp--preset--color--primary);
	}

	.rga-hero__header .rga-menu-toggle svg { color: var(--wp--preset--color--white); }

	.rga-hero__header.is-menu-open .rga-menu-toggle::before,
	.rga-hero__header.is-menu-open .rga-menu-toggle::after {
		background-color: var(--wp--preset--color--white);
	}

	/* Portal: the comp gives the band 50px top and bottom and 50px between the
	   copy and the card, against the desktop 100/80. */
	.rga-portal {
		padding-top: 50px !important;
		padding-bottom: 50px !important;
		/* The desktop split is a gradient at a fixed 47.75%, which stacked lands
		   well above the card instead of behind it. */
		background-image: none;
		background-color: var(--wp--preset--color--secondary);
	}

	.rga-portal > * + * { margin-block-start: 50px !important; }

	/* The comp starts the light-gray 50px down the card, so the card straddles
	   the seam. Anchoring it to the card rather than to a percentage of the
	   section keeps that true whatever the copy above does; -20px reaches the
	   section gutter and -50px covers its bottom padding. */
	.rga-video::before {
		content: "";
		position: absolute;
		left: -20px;
		right: -20px;
		top: 50px;
		bottom: -50px;
		background-color: var(--wp--preset--color--light-gray);
		z-index: 0;
	}

	.rga-video > * { position: relative; z-index: 1; }

	/* These two sections carry their comp padding as `@mobile` block styles,
	   which core only emits below 480. Everything else here runs to 781, so the
	   same values are repeated for the band in between. */
	.rga-quicklinks {
		padding: 20px !important;
	}

	.rga-mosaic-section {
		padding: 50px 20px !important;
	}

	/* Twelve services in core's 6-column grid leaves each tile ~50px wide and the
	   labels collide into each other. The comp runs them two-up. */
	.rga-services-grid.rga-services-grid {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}

	/* The section's 80px block gap is generous once everything is one column;
	   the comp runs the mosaic, rule, heading and logos closer together. */
	.rga-mosaic-section > * + * { margin-block-start: 40px !important; }

	/* The two partner logos stay side by side in the comp rather than taking a
	   row each, which is what core's stacking would give them. */
	.rga-mosaic-section > .wp-block-columns { flex-wrap: nowrap !important; }

	.rga-mosaic-section > .wp-block-columns > .wp-block-column {
		flex-basis: 0 !important;
		flex-grow: 1;
	}

	/* Card padding comes down from the desktop 50px: the comp's cards are 20px
	   round, which is what makes them 142 and 124 tall for three lines. */
	.rga-mosaic > .rga-tile:not(.wp-block-cover) { padding: 20px !important; }

	/* core/cover writes its min-height inline. */
	.rga-mosaic .wp-block-cover { min-height: 240px !important; }


	/* The three quick-link bars. On desktop they are a 3-up row of outline
	   buttons with the theme's generous 33/25 padding; stacked, the comp draws
	   them as a 50px list with 12px between, which the desktop padding blows
	   past and which forces the longest label onto a second line. */
	.rga-quicklinks .wp-block-columns {
		gap: 12px;
	}

	/* The 33/25 padding is inline on the <a>, so reaching it needs !important.
	   19 + a 14.4 line box + 15 + 2 borders = the comp's 50px bar. */
	.rga-quicklinks .wp-block-button__link {
		padding-top: 19px !important;
		padding-bottom: 15px !important;
	}

	.rga-hero__slide {
		flex-direction: column;
		min-height: 0;
	}

	/* The panel grows so a short slide still pins its photo to the bottom of the
	   grid cell the tallest slide sizes - which is what keeps the absolutely
	   positioned controls on the same line for every slide. */
	.rga-hero__slide > .rga-hero__panel {
		flex: 1 1 auto;
		justify-content: flex-start;
		/* 40 top; bottom clears the 40px controls row and its 24px gap. */
		padding: 40px 20px 104px;
	}

	.rga-hero__slide > .rga-hero__media {
		flex: 0 0 260px;
		height: 260px;
	}

	/* Full width now that there is no split; the photo covers its lower part. */
	.rga-hero__backdrop { width: 100%; }

	.rga-hero__slide .rga-hero__content { gap: 20px; }

	.rga-hero__slide .rga-hero__copy { gap: 28px; }

	/* The preset size class core prints for `display` carries !important, so
	   matching it is the only way to reach the comp's 32/36. */
	.rga-hero__headline.rga-hero__headline {
		font-size: 32px !important;
		line-height: 1.125;
	}

	/* 6 + a 22px line box + 6 = the comp's 34px pill. */
	.rga-hero__slide .rga-eyebrow {
		padding: 6px 14px;
		line-height: 1.375;
	}

	/* Controls share one 40px row, 40px above the photo (260 + 40). */
	.rga-hero__dots,
	.rga-hero__arrows.rga-hero__arrows {
		top: auto;
		bottom: 300px;
		height: 40px;
		align-items: center;
	}

	.rga-hero__dots {
		left: 20px;
		right: auto;
		gap: 3px;
		width: 141px;
	}

	.rga-hero__dot { width: auto; flex: 1 1 0; }

	.rga-hero__arrows.rga-hero__arrows {
		left: auto;
		right: 30px;
		gap: 12px;
	}

	.rga-hero__arrow {
		width: 40px;
		height: 40px;
		background-size: 40px 40px;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.rga-hero__slide,
	.rga-hero__slide .rga-hero__media,
	.rga-hero__slide .rga-eyebrow,
	.rga-hero__slide .rga-hero__headline,
	.rga-hero__slide .wp-block-buttons {
		transition: none;
		transform: none;
	}
}

/* ===========================================================================
   MOBILE
   781px matches core's own isStackedOnMobile breakpoint, so the footer columns
   stack on the same line the rest of this switches on rather than a second,
   competing one.
   =========================================================================== */

/* The shared header hosts the dropdown, so it has to be a positioning context
   at every width. The z-index matters: .rga-pagehead below it is also
   positioned (for its lion) and comes later in the DOM, so without this it
   paints straight over the open panel. */
.rga-header {
	position: relative;
	z-index: 20;
}

/* The toggle's open state is needed across the same band. On interior pages the
   label gives way to the X, which is what the comp draws. The homepage keeps it:
   its header is the page's only navigation at every width, so the word stays. */
.rga-header.is-menu-open .rga-menu-label { display: none; }

/* Wherever the toggle is the navigation, the disc stays white with a blue X.
   The hero above 1320 keeps the inverted desktop treatment from its own comp. */
@media ( max-width: 1320px ) {
	.is-menu-open .rga-menu-toggle { background-color: var(--wp--preset--color--white); }

	.is-menu-open .rga-menu-toggle::before,
	.is-menu-open .rga-menu-toggle::after { background-color: var(--wp--preset--color--primary); }

	/* --- Menu panel ------------------------------------------------------- */
	/* Interior pages lose their pill navigation at 1320, so from there down the
	   panel is a full-bleed navy sheet. */
	.rga-header__menu.rga-menu-panel {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		width: auto;
		max-width: none;
		padding: 20px;
		border-top: 1px solid var(--wp--preset--color--white);
		border-radius: 0 0 20px 20px;
		background-color: var(--wp--preset--color--secondary);
		box-shadow: 0 18px 34px rgba( 7, 51, 90, 0.28 );
		overflow: visible;
	}

	/* The sheet spans the screen but the links do not: past a phone the rows would
	   become 1200px-wide targets with a label adrift in the middle, so the column
	   holds the comp's 350px measure and centres. */
	.rga-header__menu.rga-menu-panel .rga-menu-panel__nav {
		max-width: 350px;
		margin-inline: auto;
	}

	.rga-header__menu.rga-menu-panel .rga-menu-panel__nav .wp-block-navigation-item__content.wp-block-navigation-item__content {
		display: block;
		width: 100%;
		box-sizing: border-box;
		/* 11 + 25 line box + 12 = the comp's 48px row. */
		padding: 11px 16px 12px;
		color: var(--wp--preset--color--white);
		font-size: 18px;
		line-height: 1.4;
		text-align: center;
		text-decoration: none;
	}

	/* The current item is a full-width white pill. Its own padding is reduced by
	   the 3px it gains in margin, so the label sits where the others do. */
	.rga-header__menu.rga-menu-panel .rga-menu-panel__nav .current-menu-item > .wp-block-navigation-item__content.wp-block-navigation-item__content,
	.rga-header__menu.rga-menu-panel .rga-menu-panel__nav .current_page_item > .wp-block-navigation-item__content.wp-block-navigation-item__content {
		margin-block: 3px;
		padding: 8px 16px 9px;
		border-radius: 100px;
		background-color: var(--wp--preset--color--white);
		color: var(--wp--preset--color--secondary);
	}
}

/* The homepage never had a pill: its header carries MENU and the toggle at every
   width, and its 202px dropdown card belongs to the navy overlay header. So the
   homepage switches to the sheet where the header itself switches - at 781, the
   same line the band turns off-white and the colour logo comes in - rather than
   at 1320 with the interior pages. The declarations repeat because the two
   headers differ only in WHERE they change, and a media query cannot be shared. */
@media ( max-width: 781px ) {
	.rga-hero__menu.rga-menu-panel.rga-menu-panel {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		width: auto;
		max-width: none;
		padding: 20px;
		border-top: 1px solid var(--wp--preset--color--white);
		border-radius: 0 0 20px 20px;
		background-color: var(--wp--preset--color--secondary);
		box-shadow: 0 18px 34px rgba( 7, 51, 90, 0.28 );
		overflow: visible;
	}

	/* The sheet spans the screen but the links do not: past a phone the rows would
	   become 1200px-wide targets with a label adrift in the middle, so the column
	   holds the comp's 350px measure and centres. */
	.rga-hero__menu.rga-menu-panel.rga-menu-panel .rga-menu-panel__nav {
		max-width: 350px;
		margin-inline: auto;
	}

	.rga-hero__menu.rga-menu-panel.rga-menu-panel .rga-menu-panel__nav .wp-block-navigation-item__content.wp-block-navigation-item__content {
		display: block;
		width: 100%;
		box-sizing: border-box;
		/* 11 + 25 line box + 12 = the comp's 48px row. */
		padding: 11px 16px 12px;
		color: var(--wp--preset--color--white);
		font-size: 18px;
		line-height: 1.4;
		text-align: center;
		text-decoration: none;
	}

	/* The current item is a full-width white pill. Its own padding is reduced by
	   the 3px it gains in margin, so the label sits where the others do. */
	.rga-hero__menu.rga-menu-panel.rga-menu-panel .rga-menu-panel__nav .current-menu-item > .wp-block-navigation-item__content.wp-block-navigation-item__content,
	.rga-hero__menu.rga-menu-panel.rga-menu-panel .rga-menu-panel__nav .current_page_item > .wp-block-navigation-item__content.wp-block-navigation-item__content {
		margin-block: 3px;
		padding: 8px 16px 9px;
		border-radius: 100px;
		background-color: var(--wp--preset--color--white);
		color: var(--wp--preset--color--secondary);
	}
}

@media ( max-width: 480px ) {

	/* --- Header ----------------------------------------------------------- */
	/* Padding, the pill, the controls, the panel and the portal button are all
	   handled by core block supports now (style['@mobile'] and
	   metadata.blockVisibility). What is left here is the element sizing and the
	   panel interior, which those cannot express. Keyed to 480 so it lines up
	   with the @mobile padding rather than introducing a third threshold. */
	.rga-header .wp-block-site-logo img,
	.rga-hero__header .wp-block-site-logo img {
		width: 145px;
		height: auto;
	}

	/* --- Page head -------------------------------------------------------- */
	/* The comp's band is 96px against 196 on desktop. */
	.rga-pagehead { min-height: 96px; }
	body.page-market-commentary .rga-pagehead { min-height: 96px; }
}

/* --- Narrow-screen gutters ------------------------------------------------
   theme.json's root padding is 50px, which core hands to every constrained
   full-width section AND uses to compute the negative margins that let an
   alignfull child break back out of one. Overriding the custom property rather
   than the padding keeps those two in step - setting the padding alone leaves
   the break-out margins at 50px and pushes the child past the viewport edge.

   Core declares the property on `body`, not `:root`, so the override has to
   land on the same element - and outrank it, hence the `html` prefix. */
@media ( max-width: 781px ) {
	html body {
		--wp--style--root--padding-left: 40px;
		--wp--style--root--padding-right: 40px;
	}
}

@media ( max-width: 480px ) {
	html body {
		--wp--style--root--padding-left: 20px;
		--wp--style--root--padding-right: 20px;
	}
}

/* Sections that set their own gutter are outside that property. The comp's
   20px phone band is handled by `@mobile` in the block, but core's viewport
   bands cannot express the phone-to-laptop middle, where a 100px gutter eats a
   quarter of the screen and 20px is too mean - so that stays a pair of queries.
   Both match on the preset appearing as `padding-left` specifically. Matching it
   anywhere in the inline style also caught sections that use the same preset for
   VERTICAL padding and set their horizontal to zero - which forced a 60px gutter
   on the full-bleed media scroller, and left the planning cap 10px short of both
   edges because its alignfull break-out is computed from the root property, not
   from the padding this rule was overriding. */
/* The `@mobile` padding is not emitted on the front end (WP 7.0.4), so the
   phone band needs the same treatment - without it the Our Services intro kept
   its 100px gutter at 390px and squeezed the service cards to 190px. */
@media ( max-width: 480px ) {
	.entry-content > .wp-block-group.alignfull[style*="padding-left:var(--wp--preset--spacing--80)"] {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}
}

@media ( min-width: 481px ) and ( max-width: 781px ) {
	.entry-content > .wp-block-group.alignfull[style*="padding-left:var(--wp--preset--spacing--80)"] {
		padding-left: 40px !important;
		padding-right: 40px !important;
	}
}

@media ( min-width: 782px ) and ( max-width: 1023px ) {
	.entry-content > .wp-block-group.alignfull[style*="padding-left:var(--wp--preset--spacing--80)"] {
		padding-left: 60px !important;
		padding-right: 60px !important;
	}
}

/* Core stacks the footer columns at its own 781px isStackedOnMobile breakpoint,
   but the first column is a fixed 451px: at 782px that left the other two 66px
   wide each. So the stack is held open to 1023px and the centring follows it.
   Above that the fixed column is capped at 40% of the row, which is still 451px
   once the layout reaches its 1340px content width. */
@media ( max-width: 1023px ) {
	.rga-footer .wp-block-columns { flex-direction: column; }

	.rga-footer .wp-block-column { flex-basis: 100% !important; }

	/* --- Footer ----------------------------------------------------------- */
	.rga-footer .wp-block-column { text-align: center; }

	.rga-footer .wp-block-column > * { margin-inline: auto; }

	.rga-footer .wp-block-buttons,
	.rga-footer .rga-footer__nav .wp-block-navigation__container {
		justify-content: center;
		align-items: center;
	}

	/* The footer nav stacks left-aligned by default; the comp centres it. */
	.rga-footer .rga-footer__nav .wp-block-navigation-item,
	.rga-footer .rga-footer__nav .wp-block-navigation-item__content {
		text-align: center;
		justify-content: center;
	}

	.rga-footer .wp-block-group[class*="is-layout-flex"] { justify-content: center; }

	/* The address carries desktop line breaks in the content. Centred in a full
	   -width column it has room for the comp's two lines, so let it wrap on its
	   own. Scoped to the icon rows, which are the flex ones - the hours sit in a
	   flow group and keep their break. */
	.rga-footer .wp-block-group[class*="is-layout-flex"] p br { display: none; }

	/* Core gives the vertical nav `align-items: flex-start`, which leaves the <ul>
	   shrink-to-fit and pinned to the left of a full-width <nav> - the menu sat
	   224px left of every other block's centre line. Stretching both boxes lets the
	   rows fill the column, which is also what turns each link into a real target:
	   at 12px of block padding a row is 44px tall, and with the gap closed the
	   pitch lands on the comp's 45px. */
	.rga-footer .rga-footer__nav,
	.rga-footer .rga-footer__nav .wp-block-navigation__container {
		align-items: stretch;
		gap: 1px;
	}

	.rga-footer .rga-footer__nav .wp-block-navigation__container { width: 100%; }

	.rga-footer .rga-footer__nav .wp-block-navigation-item { justify-content: center; }

	.rga-footer .rga-footer__nav .wp-block-navigation-item__content {
		padding-block: 10px;
		text-align: center;
	}

	.rga-footer__nav .current-menu-item > .wp-block-navigation-item__content,
	.rga-footer__nav .current_page_item > .wp-block-navigation-item__content {
		padding-bottom: 8px;
		margin-bottom: 0;
	}

	/* Each icon row centred itself on its own text width, so the two discs never
	   shared a left edge (169px vs 207px at 725). Centre the contact block as a
	   unit instead and range the rows left inside it. */
	.rga-footer .rga-footer__contact {
		width: fit-content;
		max-width: 100%;
		margin-inline: auto;
	}

	.rga-footer .rga-footer__contact .wp-block-group[class*="is-layout-flex"] {
		justify-content: flex-start;
		text-align: left;
	}

	/* A wrapped address line hangs under the first one in the comp rather than
	   centring on its own. */
	.rga-footer .rga-footer__contact .wp-block-group[class*="is-layout-flex"] p {
		text-align: left;
	}

	/* Stacked, the disclaimer is the smallest type in the footer and would other-
	   wise be its widest block - 645px at 725 and 923px at 1023, well past 100
	   characters a line. */
	.rga-footer .wp-block-column > p,
	.rga-footer > .wp-block-separator,
	.rga-footer > p {
		max-width: 520px;
		margin-inline: auto;
	}

	/* Stacked and centred, so it takes the phone logo the whole way. */
	.rga-footer__logo img { width: 194px !important; }

	.rga-footer > * + * { margin-block-start: 28px; }

	.rga-footer .wp-block-columns { row-gap: 36px; }
}

@media ( min-width: 1024px ) {
	.rga-footer .wp-block-columns > .wp-block-column:first-child {
		flex-basis: min( 451px, 40% ) !important;
	}
}


/* ===========================================================================
   THE TABLET BAND, 782-1320
   ---------------------------------------------------------------------------
   Comps exist at 390 and 1440 only. Between 782 and 1320 the page shows the
   hamburger but runs desktop layout, and most of the theme's mobile rules have
   already switched off - so this band inherited a mix of both and needed its
   own pass. Nothing here is a new design: it holds the phone treatment a little
   longer where the desktop one does not fit yet, and caps measures that were
   only ever bounded by the viewport.
   =========================================================================== */

/* --- Blocks that carry their own gutter -----------------------------------
   These set 100px inline for the 1440 grid. Everything else in the band sits on
   the 50px root padding, so the page head and breadcrumb were 50px out. */
@media ( min-width: 782px ) and ( max-width: 1320px ) {
	.rga-crumbs,
	.rga-pagehead {
		padding-left: 50px !important;
		padding-right: 50px !important;
	}
}

/* --- Decorative lion marks ------------------------------------------------
   Every one of these is positioned from the left edge of a 1440 grid, so
   through the band they are either clipped to a sliver or gone. They are
   right-anchored on a phone; carry that up to the point the desktop placement
   starts to work. */
@media ( min-width: 782px ) and ( max-width: 1320px ) {
	.rga-pagehead::after {
		left: auto;
		right: -140px;
		top: 50%;
		transform: translateY( -50% );
		width: 620px;
		height: 665px;
	}

	.rga-why::before,
	.rga-planning::before {
		left: auto;
		right: -160px;
		top: auto;
		bottom: -80px;
		width: 660px;
		height: 827px;
	}

	.rga-clientaccess::after {
		left: auto;
		right: -180px;
		width: 720px;
		height: 902px;
	}

	.rga-contact::after {
		right: -240px;
		width: 720px;
		height: 772px;
	}
}

/* --- Sections that stack to 1023 ------------------------------------------
   Stacked, their photo and copy were bounded only by the viewport: at 1023 the
   why/retire photos were 903x593 and the body copy ran 96-101 characters a
   line. Cap the stacked content so widening the window adds gutter, not photo. */
@media ( min-width: 782px ) and ( max-width: 1023px ) {
	.rga-why .wp-block-column > *,
	.rga-retire .wp-block-column > *,
	.rga-planning .wp-block-column > * {
		max-width: 620px;
		margin-inline: auto;
	}

	.rga-mosaic.rga-mosaic {
		max-width: 620px;
		margin-inline: auto;
	}

	/* The 320px desktop grid row turns a square portrait into a 2.8:1 letterbox
	   once the tile is full width; the stacked photos elsewhere use 35/23. */
	.rga-mosaic .wp-block-cover {
		min-height: 0 !important;
		aspect-ratio: 35 / 23;
	}
}

/* --- Homepage hero --------------------------------------------------------
   The `display` size is fluid against the VIEWPORT, but the headline lives in a
   55% panel: at 782 it jumped to 45px inside a 350px column and laddered a real
   article title to nine lines. Hold it near the phone size until the panel is
   wide enough to carry it. */
@media ( min-width: 782px ) and ( max-width: 1023px ) {
	.rga-hero__headline.rga-hero__headline {
		font-size: 34px !important;
		line-height: 1.15;
	}
}

/* Above 1023 the split returns but the panel is still only 483-646px, where the
   fluid 50-57px ran a real article title to seven lines. The desktop size takes
   over at 1321, which is also where the pill navigation comes back. */
@media ( min-width: 1024px ) and ( max-width: 1320px ) {
	.rga-hero__headline.rga-hero__headline {
		font-size: 40px !important;
		line-height: 1.15;
	}
}

/* The controls were pinned at left:549px, taken off the 1440 comp, so they sat
   over the photo for most of the band. Anchor them to the split instead. */
@media ( min-width: 782px ) and ( max-width: 1320px ) {
	/* The arrow pair is 112px wide (2 x 50 + 12 gap); sit its right edge 50px
	   inside the seam. The dot track then has to stop 24px short of that, or the
	   two collide - which they did from 782 to about 1100. */
	.rga-hero__arrows.rga-hero__arrows {
		left: calc( var(--rga-hero-split) - 162px );
	}

	.rga-hero__dots {
		width: min( 380px, calc( var(--rga-hero-split) - 243px ) );
	}

	.rga-hero__dot {
		width: auto;
		flex: 1 1 0;
	}
}

/* --- Quick-link bars ------------------------------------------------------
   Three-up with top-aligned columns, so a label that wraps leaves its bar 36px
   taller than its neighbours. Stretch the row so they grow together. */
@media ( min-width: 782px ) {
	.rga-quicklinks .wp-block-columns { align-items: stretch; }

	.rga-quicklinks .wp-block-column,
	.rga-quicklinks .wp-block-buttons,
	.rga-quicklinks .wp-block-button { display: flex; }

	.rga-quicklinks .wp-block-buttons,
	.rga-quicklinks .wp-block-button { flex: 1 1 auto; }

	.rga-quicklinks .wp-block-button__link {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
	}
}

/* --- Team grid ------------------------------------------------------------
   Two-up to 1023 left the fifth card beside an empty half-row. Three-up carries
   the five cards cleanly and lands close to the desktop span-2 width. */
@media ( min-width: 782px ) and ( max-width: 1023px ) {
	.rga-team__grid {
		grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	}
}

/* --- Client Access --------------------------------------------------------
   The cards were still in the phone's full-width stack at 1023, so a 389px card
   was being stretched to 900. Let them wrap two- then three-up. */
@media ( min-width: 782px ) and ( max-width: 1023px ) {
	.rga-ca-card { flex: 1 1 300px; }

	.rga-ca-intro { max-width: 620px; margin-inline: auto; }
}

/* --- Contact --------------------------------------------------------------
   Centring snapped off at 782 and the measure narrowed, leaving the copy hard
   left in a wide column. Hold the phone treatment across the band. */
@media ( min-width: 782px ) and ( max-width: 1023px ) {
	.rga-contact__copy { text-align: center; }

	.rga-contact__col > * {
		max-width: 620px;
		margin-inline: auto;
	}
}

/* --- Market Commentary listing --------------------------------------------
   The 414px thumbnail is a desktop measurement, and at 782 it left only ~230px
   for the copy. Stacking it instead (as the phone does) makes the picture
   full-width and the card taller than what it replaced, so through this band the
   row stays side by side with a proportional thumbnail. */
@media ( min-width: 782px ) and ( max-width: 999px ) {
	.rga-mc-row__thumb {
		flex: 0 0 38%;
	}

	.rga-mc-row__thumb img {
		width: 100%;
		height: auto;
		aspect-ratio: 414 / 219;
	}
}

/* Two-up at 782 gives the featured copy a phone-width column inside a wide
   card; hold the photo-on-top arrangement until the split has room. */
@media ( max-width: 1050px ) {
	.rga-mc-featured__inner {
		min-height: 0;
		flex-direction: column;
	}

	.rga-mc-featured__media.rga-mc-featured__media {
		position: static;
		order: -1;
		min-height: 0;
		overflow: hidden;
	}

	.rga-mc-featured__media .wp-block-post-featured-image,
	.rga-mc-featured__media .wp-block-post-featured-image a,
	.rga-mc-featured__media img {
		height: 240px;
	}

	.rga-mc-featured__copy {
		background-color: var(--wp--preset--color--secondary);
		padding: 32px 40px 36px;
	}
}

/* --- Rick in the Media listing --------------------------------------------
   Three-up holds down to 601px, so the whole lower band runs columns too narrow
   for a headline. Two-up through the band, and let the thumbnail keep a ratio
   rather than a fixed 170px height. */
@media ( min-width: 782px ) and ( max-width: 1023px ) {
	.rga-medialist .wp-block-post-template {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) ) !important;
	}
}

@media ( max-width: 1023px ) {
	.rga-media-card--framed .wp-block-post-featured-image img {
		height: auto;
		aspect-ratio: 16 / 9;
	}
}

/* --- Single post meta sidebar ---------------------------------------------
   The 220px meta column is a desktop measurement; once core stops stacking at
   782 it takes 40% of the row from the body copy. */
@media ( max-width: 1023px ) {
	/* The row has to change direction as well - setting the basis alone left the
	   body column at 0px wide and 11,700px tall, and `flex-wrap` alone just split
	   the row 50/50. Stacked matches the phone comp, where the pills sit above
	   the copy rather than beside it. */
	main .wp-block-columns:has( > .wp-block-column.rga-postmeta ) {
		flex-direction: column;
	}

	main .wp-block-columns:has( > .wp-block-column.rga-postmeta ) > .wp-block-column {
		flex-basis: auto !important;
	}
}

/* ===========================================================================
   Interactive states (Dev QA: "General site note - hover states")

   theme.json declares button/link hovers, but core compiles them to
   `:root :where(...)` (zero specificity) and every button in the content
   carries `has-*-color` preset classes that core emits with !important, so no
   hover ever won. Rather than fight the colour classes, these states use
   filter / transform / shadow / underline, which nothing else sets, so they
   read correctly on filled, outline, light and dark variants alike.
   Placeholder treatment pending a design spec - tune values, keep selectors.
   ========================================================================= */
.wp-element-button,
.wp-block-button__link,
.rga-viewmore .wp-block-query-pagination-next,
.rga-media-card,
.rga-media-card .wp-block-read-more,
.rga-featured__cta,
.wp-block-navigation-item__content,
.rga-footer a,
main a:not(.wp-element-button):not(.wp-block-button__link) {
	transition: filter 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease,
		text-decoration-color 0.2s ease, opacity 0.2s ease,
		background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

/* Filled buttons lift on hover. */
.wp-element-button:hover,
.wp-block-button__link:hover,
.rga-viewmore .wp-block-query-pagination-next:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}

/* Dark blue (primary / secondary) buttons ease to the lighter hover blue
   (#347CC2, David 2026-09-17). Core paints the preset background/text classes
   with !important, so the hover has to match that weight to win. White buttons
   and outline buttons keep their own treatment. */
.wp-block-button:not(.is-style-outline) > .wp-block-button__link:not(.has-white-background-color):not(.has-off-white-background-color):not(.has-light-gray-background-color):hover,
.wp-element-button:not(.wp-block-button__link):not(.has-white-background-color):hover,
.rga-viewmore .wp-block-query-pagination-next:hover,
.rga-form__submit:hover {
	background-color: var(--wp--preset--color--primary-hover) !important;
	border-color: var(--wp--preset--color--primary-hover) !important;
	color: var(--wp--preset--color--white) !important;
}

/* White buttons: darken slightly. brightness() works on the !important preset
   background too. */
.wp-block-button__link.has-white-background-color:hover {
	filter: brightness(0.9);
}

/* Outline buttons have a transparent background, so a tint is visible and
   reads better than darkening the (invisible) fill. */
.is-style-outline .wp-block-button__link:hover,
.wp-block-button__link.is-style-outline:hover {
	filter: none;
	background-color: rgba(255, 255, 255, 0.14);
}

.wp-element-button:active,
.wp-block-button__link:active,
.rga-viewmore .wp-block-query-pagination-next:active {
	transform: translateY(0);
	box-shadow: none;
}

/* Text links inside content: theme.json already flips the underline; give
   the arrow-style read-more links an underline + nudge instead, since they
   ship with text-decoration: none. */
.rga-media-card .wp-block-read-more:hover,
.rga-featured__cta:hover {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}
.rga-media-card .wp-block-read-more:hover::after {
	transform: translateX(4px);
}
.rga-media-card .wp-block-read-more::after {
	transition: transform 0.2s ease;
}

/* Whole card lifts when any part of it is hovered. */
.rga-media-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
}

/* Header navigation pills. */
.wp-block-navigation-item__content:hover {
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

/* Footer nav + plain footer links: no underline, light blue text instead
   (Dev QA round 2). Core's has-white-color on the nav uses !important. */
.rga-footer a:hover,
.rga-footer .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--secondary-light) !important;
	text-decoration: none;
}

/* Visible keyboard focus on every interactive control. WCAG 2.4.7. */
.wp-element-button:focus-visible,
.wp-block-button__link:focus-visible,
.rga-viewmore .wp-block-query-pagination-next:focus-visible,
.rga-viewmore .wp-block-query-pagination-previous:focus-visible,
.rga-media-card a:focus-visible,
.rga-featured__cta:focus-visible,
.wp-block-navigation-item__content:focus-visible,
main a:focus-visible {
	outline: 3px solid var(--wp--preset--color--secondary-light);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.wp-element-button,
	.wp-block-button__link,
	.rga-viewmore .wp-block-query-pagination-next,
	.rga-media-card,
	.rga-media-card .wp-block-read-more,
	.rga-media-card .wp-block-read-more::after {
		transition: none;
	}
	.wp-element-button:hover,
	.wp-block-button__link:hover,
	.rga-media-card:hover,
	.rga-media-card .wp-block-read-more:hover::after {
		transform: none;
	}
}

/* ===========================================================================
   "View More" load-more (Dev QA: Rick in the Media / Market Commentary)

   The pagination block still renders real prev/next links, so without JS
   the pages paginate as before. With JS, rga.js fetches the next page and
   appends its cards under the current set; "Back" is then redundant.
   ========================================================================= */
.rga-viewmore.is-enhanced .wp-block-query-pagination-previous {
	display: none;
}
.rga-viewmore.is-loading .wp-block-query-pagination-next {
	opacity: 0.6;
	pointer-events: none;
}
.rga-viewmore.is-loading .wp-block-query-pagination-next::after {
	content: "…";
}
