/*
Theme Name: Real Immigration Law
Template: woodmart
Description: Premium navy-and-gold visual identity for Real Immigration Law & Consultants, built on Woodmart.
Version: 4.72.0
*/
/* The bottom "Powered by" bar was using the theme's default 20px top/bottom
   padding and standard body text size — too tall and too prominent for a
   one-line credit line. Shrink both. */
.copyrights-wrapper .min-footer {
	padding-top: 10px;
	padding-bottom: 10px;
}
.copyrights-wrapper .min-footer,
.copyrights-wrapper .min-footer * {
	font-size: 11px !important;
}
/* The mobile logo's actual size is governed by a fixed height (see the
   height:44px/60px rules further down) with width:auto — max-width has no
   effect here since height is the real constraint. This block just frees up
   the space the logo is centered within. */
@media (max-width: 1024px) {
	/* The mobile-right column is empty (no cart/search icon configured) but
	   still reserved 130px+ purely to mirror the hamburger column for
	   centering — that squeezed the logo's actual available space down to
	   ~100px regardless of any max-width set above. Let it collapse, and stop
	   the logo's wrapper chain from flex-shrinking, so the logo can actually
	   render at the size requested instead of being crushed to fit. */
	.whb-mobile-right.whb-empty-column {
		flex: 0 0 auto !important;
		width: auto !important;
		min-width: 0 !important;
	}
	.whb-mobile-center {
		flex: 1 1 auto !important;
	}
	.whb-mobile-center .site-logo,
	.whb-mobile-center .woodmart-logo-wrap,
	.whb-mobile-center .woodmart-logo {
		flex-shrink: 0 !important;
	}
}
/* The mobile menu's own accordion (Our Services expands into a long nested
   list) makes it scroll internally, and the default browser scrollbar is a
   thick light-gray bar that clashes hard against the navy panel. Give it a
   slim gold scrollbar matching the theme instead. */
.mobile-nav {
	scrollbar-width: thin;
	scrollbar-color: var(--brand-gold) var(--brand-navy);
}
.mobile-nav::-webkit-scrollbar {
	width: 6px;
}
.mobile-nav::-webkit-scrollbar-track {
	background: var(--brand-navy);
}
.mobile-nav::-webkit-scrollbar-thumb {
	background-color: var(--brand-gold);
	border-radius: 10px;
}
/* Every inner page's banner uses the same 150px-space + title + 150px-space
   pattern (300px of pure spacer before/after the title itself), sized for
   desktop. On mobile that makes the banner take up most of the first
   screen before any real content shows. Target only the large spacers
   (inline style height:150px) via attribute selector so smaller spacers
   elsewhere on a page aren't affected. */
@media (max-width: 767px) {
	.vc_empty_space[style*="150px"] {
		height: 60px !important;
	}
}
/* Mobile off-canvas menu ships as a plain white panel with generic dark
   text — the only nav surface on the whole site not using the navy/gold
   identity. Bring it in line with everything else. */
.mobile-nav {
	background-color: var(--brand-navy) !important;
}
.site-mobile-menu li a {
	color: var(--brand-white);
	border-bottom-color: rgba(255, 255, 255, 0.12) !important;
}
.site-mobile-menu li:active > a,
.site-mobile-menu li.opener-page > a,
.site-mobile-menu li a:hover {
	background-color: rgba(217, 173, 63, 0.12) !important;
	color: var(--brand-gold-light) !important;
}
/* Android Chrome's default tap-highlight is a generic blue tint — shows up
   as a jarring blue flash/box on every tap in the navy menu since nothing
   here was overriding it. Disable it and rely on our own gold :active
   background above for tap feedback instead. */
.mobile-nav,
.mobile-nav a,
.mobile-nav * {
	-webkit-tap-highlight-color: transparent;
}
.icon-sub-menu,
.icon-sub-menu.up-icon {
	background-color: transparent !important;
}
.site-mobile-menu .sub-menu li a,
.site-mobile-menu .sub-sub-menu li a {
	color: rgba(255, 255, 255, 0.7) !important;
}
/* The current-page highlight was still using the theme's old pre-rebrand
   blue accent color (a leftover Woodmart "primary color" theme-settings
   value) instead of the new palette. */
.site-mobile-menu li.current-menu-item > a,
.site-mobile-menu .sub-menu li.current-menu-item > a {
	color: var(--brand-gold) !important;
}
.icon-sub-menu {
	color: var(--brand-gold) !important;
	border-left-color: rgba(255, 255, 255, 0.12) !important;
}
.icon-sub-menu.up-icon {
	color: var(--brand-gold-light) !important;
}
.mobile-nav-tabs {
	background-color: var(--brand-black) !important;
	border-bottom-color: rgba(255, 255, 255, 0.12) !important;
}
.mobile-nav-tabs .mobile-tab-title {
	color: rgba(255, 255, 255, 0.6) !important;
}
.mobile-nav-tabs .active {
	background-color: rgba(255, 255, 255, 0.06) !important;
	color: var(--brand-gold) !important;
}
.mobile-nav-tabs .mobile-tab-title:after {
	background-color: var(--brand-gold) !important;
}
.woodmart-close-side {
	background-color: rgba(10, 16, 38, 0.85) !important;
}
/* The four services-hub pages (Citizenship, Residency, Education,
   Immigration Services) all reuse the same duplicated opening row
   (.vc_custom_1541669366609) — a promo-card grid with no top padding at
   all, so the cards sit flush against the nav with zero breathing room.
   Fixing this one shared class fixes all four pages at once. */
.vc_custom_1541669366609 {
	padding-top: 60px !important;
}
/* Woodmart's ".title-wrapper" (every [woodmart_title] heading, used
   throughout the Privacy Policy content for each section) only carries
   margin-bottom — no margin-top — so a heading sits right on top of the
   previous section's last paragraph while getting a generous 30px gap
   before its own paragraph below it. That asymmetry is what reads as
   "cramped" between sections. Give headings inside body content real
   breathing room above them too. */
.entry-content .title-wrapper {
	margin-top: 30px;
}
/* Privacy Policy's opening row was a flat, generic pale-gray "info page" box
   (#f8f8f8) with dark text — the only page on the site not using the
   navy/gold identity for its own title band. Now that the row itself is
   navy, its title/intro paragraph (originally styled for a light
   background) need to flip to light text. */
.ril-legal-banner .woodmart-title-container {
	color: var(--brand-white) !important;
}
.ril-legal-banner .wpb_text_column,
.ril-legal-banner .wpb_text_column p {
	color: rgba(255, 255, 255, 0.75);
}
/* The search icon lives in the gold top bar now, but Woodmart colors every
   "tools" icon in a ".whb-color-light" row white by default (meant for the
   dark general-header row) — invisible against our gold background. Give
   the top bar's own icons a dark color so they're actually visible. */
.whb-top-bar .wd-tools-element > a {
	color: var(--brand-navy) !important;
}
.whb-top-bar .wd-tools-element:hover > a {
	color: var(--brand-charcoal) !important;
}
/* The top bar's own row height (30px, sized for its slim phone/email text)
   is shorter than a "tools element" icon link's default height (40px), so
   the icon was being silently clipped out of view entirely — true of the
   social-follow icons already sitting in this column too, just never
   noticed because nothing there was actually visible before. Shrink the
   icon link to fit the bar instead of growing the bar to fit the icon. */
.whb-top-bar .wd-tools-element > a {
	height: 30px !important;
}
/* Woodmart's sticky header slides the whole header off-screen (translateY
   -100%) the instant you scroll down, then slides it back the instant you
   scroll up — on top of a separate shrink animation when it docks. Two
   overlapping motions on every scroll direction change reads as a jerk/jump.
   Keep the header always visible and drop the slide so only the gentle
   shrink-to-compact transition remains. */
.whb-scroll-stick.whb-scroll-down .whb-main-header,
.whb-scroll-stick.whb-scroll-up .whb-main-header {
	transform: none !important;
}
/* Contact Form 7 ships its own ".wpcf7 .hidden-fields-container { display:
   none; }" rule for its honeypot <fieldset>, but Woodmart's base.css also
   gives every bare <fieldset> a visible border + padding. On forms where
   CF7's own stylesheet doesn't load first (or at all), that generic border
   is the only rule left standing and the honeypot fieldset shows up as an
   empty bordered box above the visible fields. Force it hidden regardless
   of load order. */
.hidden-fields-container {
	display: none !important;
}
/* Woodmart centers the whole "404" and search "Nothing Found" templates
   (base.css .error404/.not-found rules), which reads as an odd, disconnected
   island on a site where every other page is left-aligned. Match the rest
   of the site. */
.error404 .page-title,
.error404 .page-content,
.not-found .entry-header,
.not-found .entry-content {
	text-align: left;
}
.error404 .page-header:before {
	left: 0;
	transform: none;
}
.not-found .entry-header:before {
	margin-left: 0;
	/* Woodmart's default magnifying-glass icon is 100px — oversized and
	   clashing with the page's actual heading size. Scale it down to
	   something proportionate. */
	font-size: 56px !important;
	line-height: 56px !important;
}
.error404 .page-content .woodmart-search-form,
.not-found .searchform {
	margin-left: 0;
	margin-right: auto;
}
/* Both templates only have a few lines of real content, so with the normal
   compact spacing the whole page reads as very short — the footer ends up
   sitting high on the screen with a lot of dead space below it on any
   normal-height viewport. Give both templates generous top padding (so the
   page doesn't start immediately under the nav) and a bigger gap before the
   CTA band, so the page has real presence instead of feeling like a stub. */
.error404 .site-content {
	padding-top: 40px;
	padding-bottom: 110px;
}
.not-found .entry-header {
	padding-top: 50px;
}
.not-found .entry-content {
	padding-bottom: 110px !important;
}
/* Woodmart's flyout dropdown ("Our Services" nav) ships a fixed 200px width
   for both the first-level panel and the second-level country flyout, which
   wraps longer labels ("New Zealand Immigration", "Australian Citizenship")
   onto two lines. Widen both panels so every label fits on one line. */
.menu-simple-dropdown .sub-menu-dropdown,
.menu-simple-dropdown .sub-sub-menu {
	width: 260px !important;
}
.entry-content, article.hentry, .site-content, .row.content-layout-wrapper {
	margin-bottom: 0 !important;
}
/* That zeroed margin fixed the homepage's own gap (its content is one
   self-contained block that already carries its own internal padding),
   but the same rule left plain text pages with zero breathing room before
   the navy CTA band — the last paragraph ran straight into it. Give
   entry-content its own bottom padding to compensate, sitewide.
   Excluded from blog listing cards specifically — their excerpt wrapper
   happens to share this same "entry-content" class name, so this was also
   adding 60px of dead space inside every card, after "Continue Reading". */
.entry-content:not(.woodmart-entry-content) {
	padding-bottom: 60px;
}

:root {
	/* Brand palette — matched exactly (via pixel sampling + the client's own
	   design-source globals.css) to the real "R⊙I" logo and its Next.js
	   prototype: deep ink/navy, warm sand/mist neutrals, two gold tones. */
	--brand-black: #0d1228;
	--brand-charcoal: #171c34;
	--brand-navy: #0a1026;
	--brand-gold: #d9ad3f;
	--brand-gold-light: #e8c876;
	--brand-gold-deep: #c9972e;
	--brand-white: #ffffff;
	--brand-cream: #f6f4ee;
	--brand-warm-white: #f6f4ee;
	--brand-mist: #ebe8df;
	--brand-line: #d8d2c2;
	--brand-text: #0d1228;
	--brand-text-muted: #67645d;

	--font-heading: Georgia, 'Times New Roman', serif;
	--font-body: Arial, Helvetica, sans-serif;
}

/* A stray pale seam kept reappearing between the navy "Need a Consultation"
   band and the navy footer right under it — never pinned to one exact
   cause (not .woodmart-prefooter's own margin/padding, not
   .footer-container's, not a sticky-footer reveal effect — all checked).
   Since .main-page-wrapper paints its own opaque white background over
   the actual content area (base.css), body's background only ever shows
   through in unaccounted gaps like this one — so matching it to the brand
   navy makes any such gap invisible regardless of what's technically
   causing it. */
body {
	font-family: var(--font-body);
	color: var(--brand-text);
	overflow-x: hidden;
	background-color: var(--brand-navy);
}
/* CSS Grid/flex items default to min-width:auto, which sizes to their
   content's intrinsic width instead of shrinking to the track — on narrow
   (mobile) viewports this let long uppercase/letter-spaced copy overflow
   its column instead of wrapping, silently clipped by the nearest
   overflow:hidden ancestor rather than shown. Every custom 2-up grid/flex
   layout in this theme needs its children reset to min-width:0. */
.ril-split > *,
.ril-numbered-grid > *,
.ril-contact-split > *,
.ril-contact-grid > *,
.ril-popup-grid > *,
.ril-contact-page-grid > *,
.ril-cta-flex > * {
	min-width: 0;
}

h1, h2, h3, h4, h5, h6,
.woodmart-title-text,
.wd-tabs-navigation li a,
.entry-title {
	font-family: var(--font-heading);
	font-weight: 400;
	letter-spacing: -0.02em;
	color: var(--brand-black);
}

a {
	color: var(--brand-black);
}
a:hover {
	color: var(--brand-gold-deep);
}

/* ==========================================================================
   Header — gold utility bar + translucent sand main row, matching the
   client-provided Next.js design source (app/globals.css: .announcement,
   .header, .nav-links, .brand-logo).
   ========================================================================== */
.whb-top-bar {
	background-color: var(--brand-gold-deep) !important;
}
.whb-top-bar,
.whb-top-bar .topphone,
.whb-top-bar strong {
	color: var(--brand-white) !important;
	font-size: 11px;
	letter-spacing: 0.05em;
}
.whb-top-bar a {
	color: var(--brand-white) !important;
}
/* The design's utility bar shows only a phone/email pair, no social icons —
   real social links move to the footer's "Connect" column instead. Scoped to
   the social element specifically (not the whole column) now that the
   search icon also lives in this column and needs to stay visible. */
.whb-top-bar .whb-col-right .woodmart-social-icons {
	display: none;
}
/* Woodmart's WHB builder had a mobile-only "share this page" column
   (generic Facebook/Twitter/Pinterest/LinkedIn/Telegram share links, left
   over from the theme's demo config) sitting where a mobile visitor would
   expect the phone/email — hide it and surface the same real contact info
   the desktop bar shows instead of leaving the bar empty. */
.whb-top-bar .whb-col-mobile {
	display: none !important;
}
/* "Call us :" / "Mail us :" as text labels — swap for icons (Font Awesome,
   already loaded sitewide) on every screen size, not just mobile. */
.whb-top-bar .tx-topphone strong,
.whb-top-bar .tx-topmail strong {
	display: none;
}
/* The markup has extra .tx-topphone/.tx-topmail divs beyond the real two
   (some fully empty, one wrapping the real .tx-topmail nested inside a pile
   of unrelated leftover markup). :has(strong) alone still matched that outer
   wrapper too, since :has() matches on ANY descendant, not just direct
   children — it was adding a stray phone icon right before the real nested
   mail icon. :has(> strong) requires a direct child, matching only the two
   elements that actually carry their own real label. */
.whb-top-bar .tx-topphone:has(> strong):before,
.whb-top-bar .tx-topmail:has(> strong):before {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	margin-right: 6px;
}
.whb-top-bar .tx-topphone:has(> strong):before {
	content: "\f095";
}
.whb-top-bar .tx-topmail:has(> strong):before {
	content: "\f0e0";
}
/* Tablet still has room for both phone and email on one line, same as
   desktop — just recenter it since the mobile-only column layout kicks in
   at this width. Icons apply at every width via the global rule above. */
@media (min-width: 768px) and (max-width: 1024px) {
	.whb-top-bar .whb-col-left.whb-visible-lg {
		display: flex !important;
		align-items: center;
		justify-content: center;
		gap: 14px;
		font-size: 11px;
	}
	.whb-top-bar .whb-flex-row {
		justify-content: center;
	}
}
@media (max-width: 767px) {
	.whb-top-bar .whb-col-left.whb-visible-lg {
		display: flex !important;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: center;
		gap: 10px;
		font-size: 11px;
		padding: 6px 8px;
		white-space: nowrap;
		width: 100%;
		min-width: 0;
		box-sizing: border-box;
	}
	.whb-top-bar .whb-col-left.whb-visible-lg .whb-text-element {
		display: block;
		min-width: 0;
	}
}
@media (max-width: 340px) {
	/* Very narrow phones (iPhone SE etc.) still don't quite fit the row
	   above — tighten font/gap/padding a bit further just at this width. */
	.whb-top-bar .whb-col-left.whb-visible-lg {
		gap: 6px;
		font-size: 9.5px;
		padding: 6px 4px;
	}
	.whb-top-bar .tx-topphone:before,
	.whb-top-bar .tx-topmail:before {
		margin-right: 3px;
	}
}

/* The header runs dark navy (not the design source's cream) so the
   transparent gold "R⊙I" logo mark reads clearly against it — a deliberate
   deviation requested after the gold-on-cream version looked washed out. */
.whb-general-header {
	background-color: var(--brand-navy) !important;
	border-bottom: none;
	position: relative;
}
.whb-general-header:after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--brand-gold) 50%, transparent);
	opacity: 0.8;
}
.whb-general-header,
.whb-general-header .woodmart-nav-link,
.whb-general-header .nav-link-text,
.whb-general-header a,
.whb-general-header-icon svg,
.whb-general-header-icon i {
	color: var(--brand-white) !important;
}
.whb-general-header li.menu-item > a:hover .nav-link-text,
.whb-general-header li.current-menu-item > a .nav-link-text,
.whb-general-header li.current-menu-ancestor > a .nav-link-text {
	color: var(--brand-gold) !important;
}
.whb-header .woodmart-nav-link.btn,
.whb-header .btn-color-primary {
	background-color: var(--brand-gold-deep) !important;
	color: var(--brand-white) !important;
}
.whb-general-header .nav-link-text {
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
/* The dropdown-caret glyph (woodmart-font, several codepoints depending on
   nesting level — \f127/\f128 for the top-level item, others for nested
   ones) rendered as an empty "tofu" box everywhere — none of those
   codepoints are mapped in this font build. Draw a plain CSS chevron
   instead. ".menu-simple-dropdown .menu-item-has-children" (descendant
   combinator) never matched "Our Services" itself, since that <li> carries
   BOTH classes on the one element rather than nesting them — the comma
   variant below covers that self-matching case too. */
.menu-simple-dropdown .menu-item-has-children > a:after,
.menu-simple-dropdown.menu-item-has-children > a:after,
.woodmart-navigation .item-level-0.menu-item-has-children > a:after {
	font-family: inherit !important;
	content: '' !important;
	text-indent: -9999px !important;
	font-size: 0 !important;
	overflow: hidden;
	width: 6px;
	height: 6px;
	border-right: 1.5px solid #fff;
	border-bottom: 1.5px solid #fff;
	transform: rotate(45deg);
	margin-top: -4px !important;
}
/* Woodmart's own .sub-menu-dropdown wrapper (base.css) ships a white
   background with 10px top/bottom padding around whatever is inside —
   painting only the inner <ul class="sub-menu"> black left that wrapper's
   own padding showing as a white strip above the first item and below the
   last one. Paint the wrapper itself too. */
.whb-header .sub-menu-dropdown,
.whb-header .sub-menu,
.whb-header .mega-menu-column {
	background-color: var(--brand-black) !important;
}
.whb-header .sub-menu a {
	color: var(--brand-white) !important;
}
.whb-header .sub-menu li a:hover,
.whb-header .sub-menu li.hovered-item > a {
	background-color: rgba(255, 255, 255, 0.06) !important;
}
.whb-header .sub-menu a:hover {
	color: var(--brand-gold) !important;
}
/* The second-level flyout (.sub-sub-menu, e.g. "USA Immigration" under
   "Immigration") is a separate panel that keeps Woodmart's default white
   background — the rule above only painted the first-level ".sub-menu" box
   black, so this nested panel was rendering white text on a white panel. */
.whb-header .sub-sub-menu {
	background-color: var(--brand-charcoal) !important;
	border-left: 2px solid var(--brand-gold);
}

/* Footer */
.footer-container {
	background-color: var(--brand-navy) !important;
	position: relative;
}
/* A ~36px white band renders inside footer-container's own top edge
   (confirmed via getBoundingClientRect + elementFromPoint: the point IS
   footer-container, its computed background-color IS already navy, yet
   that band paints white regardless — never pinned to an exact cause
   after extensive checking). Bridge it with a forced navy overlay rather
   than keep chasing the underlying rule. */
.footer-container:before {
	content: '';
	position: absolute;
	top: -40px;
	left: 0;
	right: 0;
	height: 40px;
	background-color: var(--brand-navy);
	box-shadow: inset 0 -2px 0 var(--brand-gold);
	z-index: 0;
}
.footer-container > * {
	position: relative;
	z-index: 1;
}
.footer-container,
.footer-container a {
	color: rgba(255, 255, 255, 0.8) !important;
}
.footer-container a:hover {
	color: var(--brand-gold) !important;
}
.footer-container h3,
.footer-container .widget-title {
	color: var(--brand-white) !important;
	font-family: var(--font-body);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.15em;
}

.ril-footer {
	padding: 58px 0 22px;
	max-width: 1200px;
	margin: 0 auto;
}
.ril-footer-grid {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 40px;
	padding-bottom: 50px;
}
.ril-footer-logo {
	width: 150px;
	height: auto;
}
.ril-footer-brand p {
	color: rgba(255, 255, 255, 0.55) !important;
	font-size: 12px;
	margin-top: 16px;
}
.ril-footer-links {
	display: flex;
	gap: 70px;
	flex-wrap: wrap;
}
.ril-footer-links div {
	display: grid;
	gap: 12px;
	align-content: start;
}
.ril-footer-links b {
	color: var(--brand-white) !important;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	margin-bottom: 6px;
}
.ril-footer-links a {
	color: rgba(255, 255, 255, 0.65) !important;
	font-size: 13px;
}
.ril-footer-social-link {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
}
.ril-footer-social-link i {
	font-size: 14px;
	width: 16px;
	text-align: center;
	color: var(--brand-gold);
}
.ril-footer-social-link:hover i {
	color: var(--brand-gold-light);
}
.ril-footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	padding-top: 18px;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	color: rgba(255, 255, 255, 0.45) !important;
	font-size: 11px;
	letter-spacing: 0.05em;
}
.ril-footer-bottom a {
	color: rgba(255, 255, 255, 0.45) !important;
}
@media (max-width: 700px) {
	.ril-footer { padding: 46px 0 20px; text-align: center; }
	.ril-footer-grid { display: block; padding-bottom: 34px; }
	.ril-footer-brand { display: flex; flex-direction: column; align-items: center; }
	.ril-footer-logo { width: 130px; }
	.ril-footer-links { margin-top: 34px; gap: 34px; justify-content: center; }
	.ril-footer-links div { gap: 15px; justify-items: center; }
	.ril-footer-links a { font-size: 14px; padding: 2px 0; display: inline-block; }
	.ril-footer-bottom { flex-direction: column; align-items: center; gap: 8px; font-size: 11px; }
}

/* Buttons — matches .button-accent / .button-dark in the design source:
   deep gold with white text as primary accent (not gold-with-black-text). */
.btn-color-primary,
.wpcf7-submit.btn-color-primary,
button.btn-color-primary,
input.btn-color-primary {
	background-color: var(--brand-gold-deep) !important;
	border-color: var(--brand-gold-deep) !important;
	color: var(--brand-white) !important;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	font-weight: 700;
	transition: transform 0.2s, background-color 0.2s;
}
.btn-color-primary:hover,
.wpcf7-submit.btn-color-primary:hover {
	background-color: var(--brand-navy) !important;
	border-color: var(--brand-navy) !important;
	color: var(--brand-white) !important;
	transform: translateY(-2px);
}
.btn-color-black,
.wpcf7-submit.btn-color-black {
	background-color: var(--brand-navy) !important;
	border-color: var(--brand-navy) !important;
	color: var(--brand-white) !important;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	font-weight: 700;
	transition: transform 0.2s, background-color 0.2s;
}
.btn-color-black:hover {
	background-color: var(--brand-gold-deep) !important;
	border-color: var(--brand-gold-deep) !important;
	color: var(--brand-white) !important;
	transform: translateY(-2px);
}
.btn-style-bordered.btn-color-primary {
	background-color: transparent !important;
	color: var(--brand-gold-deep) !important;
	border-color: var(--brand-gold-deep) !important;
}
.btn-style-bordered.btn-color-primary:hover {
	background-color: var(--brand-gold-deep) !important;
	color: var(--brand-white) !important;
}

/* Warm-white section backgrounds instead of stark/grey defaults. NOT body —
   that silently overrode the deliberate navy body background (set later in
   this file) meant to catch exactly this: on any page shorter than the
   viewport (e.g. search results with little content), the exposed strip
   below the footer was showing white instead of blending into the navy
   footer above it. */
.wrapper-content {
	background-color: var(--brand-white);
}

/* Thin gold divider accent, matching the logo's dash motif */
.wd-divider,
hr {
	border-color: var(--brand-gold) !important;
}

/* Woodmart's "color-scheme-light" modifier sets white text (#FFF), intended
   for elements placed on a dark/colored section background. This specific
   Home page block was left with that modifier while sitting on a plain white
   section, making its heading invisible (white-on-white). Force it dark. */
#wd-5e7e3282ec3cc .woodmart-title-container {
	color: var(--brand-navy) !important;
}

/* The 4 "Advantages" info-box titles on the Home page (Expert Strategy,
   Extended Support, Provide Best Solutions, High Liquidity) are present in
   the DOM but not visibly rendering. Force visibility defensively. */
.woodmart-info-box .info-box-content,
.woodmart-info-box .info-box-title {
	opacity: 1 !important;
	visibility: visible !important;
	display: block !important;
	width: auto !important;
	height: auto !important;
	font-size: 20px !important;
	color: var(--brand-navy) !important;
	overflow: visible !important;
}
.woodmart-info-box .info-box-content {
	flex: 1 1 auto !important;
	min-width: 0;
}

/* Carried over from the site's previous Additional CSS (Customizer) */
.hidden_section {
	display: none;
}
/* The old "justify" rule (from the site's previous Additional CSS, still
   loaded inline and marked !important) created ugly rivers of whitespace in
   narrow WPBakery columns. Needs matching !important plus higher specificity
   than a bare "p" to actually win against it. */
html body p {
	text-align: left !important;
}

/* Hero slide button (Revolution Slider layer) hardcodes its color via an
   inline style; only a stylesheet !important rule can override that. */
.rs-layer.rev-btn {
	background-color: var(--brand-gold) !important;
	border-color: var(--brand-gold) !important;
}
.rs-layer.rev-btn:hover {
	background-color: var(--brand-navy) !important;
	border-color: var(--brand-navy) !important;
}

/* Bottom "Need a Consultation?" band used Woodmart's default blue accent;
   align it with the brand's dark/gold palette. Compound selector needed to
   beat the row's own !important inline-generated background rule. */
.woodmart-prefooter .vc_row-has-fill {
	background-color: var(--brand-black) !important;
}

/* Woodmart's ".main-page-wrapper" ships with margin-top:-40px + padding-top:40px,
   which nets out to a 40px band of the wrapper's own white background sitting
   directly under the header on every page. Harmless on a plain white page, but
   it leaves a visible white seam above every full-bleed dark hero in this
   redesign. Every page here is meant to start flush against the header. */
.main-page-wrapper {
	padding-top: 0 !important;
}
/* Pages whose content starts with its own full-bleed hero/banner image
   (the [vc_row full_width="stretch_row"...] pattern most inner pages use)
   are meant to have that banner sit flush against the header — this is
   the default, correct state, and must NOT get extra top padding (that
   would shove the banner itself down, opening a gap above it instead of
   below it). Only pages with no such banner — the blog archive and the
   services grid — start their real content with nothing at all under the
   header, and need the padding restored there instead. */
body.blog .main-page-wrapper,
body.page-id-3147 .main-page-wrapper {
	padding-top: 60px !important;
}
/* The blog archive's post grid lives in .site-content (like the 404
   template), not .entry-content, so it never picked up the sitewide
   bottom-padding-before-the-CTA-band rule — the last row of posts ran
   straight into the navy band with zero gap. */
body.blog .site-content {
	padding-bottom: 60px;
}
/* The real fix for uneven card heights already exists further down (flex
   stretch + flex-column + margin-top:auto pins "Continue Reading" to the
   bottom of every card uniformly) — that's correct as-is. What was actually
   missing: blog-post-loop articles carry the "hentry" class, which the
   sitewide "article.hentry { margin-bottom: 0 !important }" rule (added for
   single post/page bottom spacing) also zeroes out here, leaving zero gap
   between wrapped rows. More specific selector to win over that rule. */
.woodmart-blog-holder .blog-post-loop.hentry {
	margin-bottom: 30px !important;
}
/* WPBakery gives every ".wpb_content_element" a default margin-bottom
   (~35-40px). Pages built from multiple [vc_row]s here had that cancelled
   by hand on their last row's own custom css (margin-bottom:-40px); the
   Home page's content is one bare [vc_raw_html] block with no such row to
   carry that override, so its trailing 40px margin was left in, showing as
   a pale gap between the last section and the navy prefooter band. */
.entry-content > .wpb_content_element:last-child,
.entry-content .wpb_content_element {
	margin-bottom: 0 !important;
}

/* New logo (the real "R⊙I" navy-and-gold lockup) is a proper rectangular
   asset. Woodmart's own dynamic header CSS (xts-header_*.css, regenerated
   by the builder) sets ".whb-general-header .woodmart-logo img{max-height:120px}"
   and loads AFTER this stylesheet — it isn't !important so ours should still
   win on paper, but its selector is on the <a class="woodmart-logo"> wrapper,
   one level different from ours; fixed pixel height (not max-height/auto,
   which can still inherit an intrinsic size from a competing rule) on every
   possible selector variant is the only combination that reliably pins it. */
.site-logo,
.woodmart-logo-wrap,
.woodmart-logo {
	display: inline-flex;
	align-items: center;
}
.site-logo img,
.woodmart-logo-wrap img,
.whb-general-header .woodmart-logo img,
.whb-top-bar .woodmart-logo img,
.whb-header-bottom .woodmart-logo img {
	width: auto !important;
	height: 80px !important;
	max-height: 80px !important;
	max-width: none !important;
}
@media (max-width: 1024px) {
	.site-logo img,
	.woodmart-logo-wrap img,
	.whb-general-header .woodmart-logo img,
	.whb-top-bar .woodmart-logo img,
	.whb-header-bottom .woodmart-logo img {
		height: 44px !important;
		max-height: 44px !important;
	}
}
@media (min-width: 768px) and (max-width: 1024px) {
	/* Tablet was still stuck at the 44px phone-and-tablet-shared size above —
	   give it its own bigger size, with the row grown to match so it doesn't
	   overflow into the top bar the same way the phone logo did. */
	.whb-mobile-center .woodmart-logo img {
		height: 56px !important;
		max-height: 56px !important;
	}
	.whb-general-header-inner,
	.whb-general-header {
		min-height: 76px !important;
	}
	.whb-mobile-center,
	.whb-mobile-left,
	.whb-mobile-right {
		padding-top: 10px !important;
		padding-bottom: 10px !important;
	}
}
@media (max-width: 767px) {
	/* Phone header specifically (not tablet) wants a noticeably bigger logo
	   than the 44px height above — width is auto/aspect-locked to height here,
	   so height is the actual lever, not max-width. */
	.whb-mobile-center .woodmart-logo img {
		height: 60px !important;
		max-height: 60px !important;
	}
	/* The row itself has a fixed ~60px height from Woodmart's own header-height
	   setting — it doesn't grow to fit content. With the bigger 60px logo
	   plus padding, the content wants to be taller than that fixed row, so it
	   overflowed evenly above and below (via the row's own vertical centering)
	   straight into the top bar above. Grow the row to actually fit instead
	   of just padding content that has nowhere to expand into. */
	.whb-general-header-inner,
	.whb-general-header {
		min-height: 80px !important;
	}
	.whb-mobile-center,
	.whb-mobile-left,
	.whb-mobile-right {
		padding-top: 10px !important;
		padding-bottom: 10px !important;
	}
}

/* ==========================================================================
   Home page custom design system (Real Immigration Law revamp)
   ========================================================================== */

/* Woodmart wraps page content in its own Bootstrap .container (~1200px,
   with its own side padding). Every full-bleed band on this page needs to
   break out of that constraint so its background actually spans the full
   browser width instead of floating as a narrow column on wide screens. */
.ril-hero,
.ril-hero-v2,
.ril-trust-strip,
.ril-section,
.ril-section-alt,
.ril-quote-band {
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
}

.ril-section-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
}
.ril-section {
	padding: 80px 0;
}
.ril-section-alt {
	background-color: var(--brand-warm-white);
}
.ril-section-mist {
	background-color: var(--brand-mist);
}
.ril-kicker {
	font-family: var(--font-body);
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 13px;
	font-weight: 700;
	color: var(--brand-gold);
	margin: 0 0 10px;
}
.ril-kicker-center {
	text-align: center;
}
.ril-section-title {
	font-family: var(--font-heading);
	color: var(--brand-navy);
	font-size: 34px;
	margin: 0 0 20px;
	line-height: 1.25;
}
.ril-section-title-center {
	text-align: center;
}

/* Buttons */
.ril-btn {
	display: inline-block;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	text-decoration: none;
	padding: 15px 34px;
	border-radius: 4px;
	border: 2px solid transparent;
	transition: all 0.25s ease;
}
.ril-btn-primary {
	background-color: var(--brand-gold);
	color: var(--brand-black);
}
.ril-btn-primary:hover {
	background-color: var(--brand-navy);
	color: var(--brand-white);
}
.ril-btn-ghost {
	border-color: rgba(255, 255, 255, 0.7);
	color: var(--brand-white);
}
.ril-btn-ghost:hover {
	background-color: var(--brand-white);
	color: var(--brand-black);
}
.ril-btn-outline {
	border-color: var(--brand-gold);
	color: var(--brand-navy);
}
.ril-btn-outline:hover {
	background-color: var(--brand-gold);
	color: var(--brand-black);
}

/* Hero */
.ril-hero {
	position: relative;
	min-height: 640px;
	display: flex;
	align-items: center;
	overflow: hidden;
}
.ril-hero-media {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
}
.ril-hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgba(16, 17, 19, 0.92) 0%, rgba(16, 17, 19, 0.72) 45%, rgba(16, 17, 19, 0.35) 100%);
}
.ril-hero-inner {
	position: relative;
	z-index: 2;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
	width: 100%;
}
.ril-eyebrow {
	color: var(--brand-gold);
	font-family: var(--font-body);
	text-transform: uppercase;
	letter-spacing: 3px;
	font-size: 14px;
	font-weight: 700;
	margin: 0 0 18px;
}
.ril-hero-title {
	font-family: var(--font-heading);
	color: var(--brand-white);
	font-size: 54px;
	line-height: 1.2;
	margin: 0 0 24px;
	max-width: 760px;
}
.ril-hero-sub {
	color: rgba(255, 255, 255, 0.85);
	font-size: 18px;
	line-height: 1.7;
	max-width: 620px;
	margin: 0 0 36px;
}
.ril-hero-actions {
	display: flex;
	gap: 18px;
	flex-wrap: wrap;
}

/* Trust strip */
.ril-trust-strip {
	background-color: var(--brand-black);
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.ril-trust-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 30px 24px;
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
	gap: 20px;
}
.ril-trust-item {
	text-align: center;
	color: var(--brand-white);
}
.ril-trust-num {
	display: block;
	font-family: var(--font-heading);
	font-size: 36px;
	color: var(--brand-gold);
	line-height: 1.1;
}
.ril-trust-label {
	display: block;
	font-size: 14px;
	color: rgba(255, 255, 255, 0.75);
	margin-top: 6px;
}

/* Services grid */
.ril-services-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
}
.ril-service-card {
	background: var(--brand-white);
	border: 1px solid rgba(0, 0, 0, 0.07);
	border-radius: 6px;
	padding: 36px 30px;
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.ril-service-card:hover {
	box-shadow: 0 18px 40px rgba(16, 17, 19, 0.1);
	transform: translateY(-4px);
}
.ril-service-icon {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: var(--brand-warm-white);
	color: var(--brand-gold);
	font-size: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20px;
}
.ril-service-card h3 {
	font-family: var(--font-heading);
	color: var(--brand-navy);
	font-size: 21px;
	margin: 0 0 12px;
}
.ril-service-card p {
	color: var(--brand-text-muted);
	font-size: 15px;
	line-height: 1.7;
	margin: 0 0 18px;
}
.ril-card-link {
	color: var(--brand-gold);
	font-weight: 700;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	text-decoration: none;
}
.ril-card-link:hover {
	color: var(--brand-navy);
}

/* About */
.ril-about-grid {
	display: grid;
	grid-template-columns: 0.85fr 1.15fr;
	gap: 60px;
	align-items: center;
}
.ril-about-media img {
	width: 100%;
	border-radius: 6px;
	display: block;
}
.ril-about-content p {
	color: var(--brand-text);
	font-size: 16px;
	line-height: 1.8;
	margin: 0 0 18px;
}
.ril-placeholder-note {
	color: var(--brand-text-muted) !important;
	font-size: 14px !important;
}

/* Advantages */
.ril-advantages-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}
.ril-advantage-card {
	text-align: center;
	background: var(--brand-warm-white);
	border-radius: 6px;
	padding: 36px 20px;
}
.ril-advantage-card i {
	font-size: 30px;
	color: var(--brand-gold);
	margin-bottom: 16px;
	display: block;
}
.ril-advantage-card h4 {
	font-family: var(--font-heading);
	color: var(--brand-navy);
	font-size: 17px;
	margin: 0;
}

/* Consultation form card — single flat surface; force out any nested
   background so the form never looks like a box-within-a-box. */
.ril-consult-card {
	background: var(--brand-navy);
	border-radius: 8px;
	padding: 50px 60px;
	max-width: 900px;
	margin: 0 auto;
}
.ril-consult-card .wpcf7,
.ril-consult-card .wpcf7-form,
.ril-consult-card #homecontacform,
.ril-consult-card #homecontacform > div {
	background: transparent !important;
	box-shadow: none !important;
	border: none !important;
}
.ril-consult-card h4 {
	font-family: var(--font-heading);
	font-size: 24px !important;
	margin-bottom: 24px !important;
}
.ril-consult-card p {
	color: rgba(255, 255, 255, 0.85);
	font-size: 14px;
	margin-bottom: 6px;
}
.ril-consult-card .wpcf7-form-control-wrap input,
.ril-consult-card .wpcf7-form-control-wrap textarea {
	border-radius: 4px;
	border: none;
	padding: 12px 16px;
	width: 100%;
	margin-bottom: 18px;
	font-family: var(--font-body);
}
.ril-consult-card .wpcf7-spinner {
	display: none;
}
@media (max-width: 600px) {
	.ril-consult-card {
		padding: 34px 24px;
	}
}

/* Testimonials */
.ril-testimonial-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 30px;
}
.ril-testimonial-card {
	background: var(--brand-warm-white);
	border-left: 3px solid var(--brand-gold);
	border-radius: 4px;
	padding: 36px;
}
.ril-quote-icon {
	color: var(--brand-gold);
	font-size: 22px;
	opacity: 0.6;
	margin-bottom: 14px;
	display: block;
}
.ril-testimonial-card p {
	color: var(--brand-text);
	font-size: 15px;
	line-height: 1.8;
	font-style: italic;
	margin: 0 0 18px;
}
.ril-testimonial-author {
	font-family: var(--font-heading);
	color: var(--brand-navy);
	font-weight: 600;
}

/* Responsive */
@media (max-width: 900px) {
	.ril-hero-title { font-size: 38px; }
	.ril-services-grid { grid-template-columns: repeat(2, 1fr); }
	.ril-about-grid { grid-template-columns: 1fr; }
	.ril-advantages-grid { grid-template-columns: repeat(2, 1fr); }
	.ril-testimonial-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
	.ril-services-grid { grid-template-columns: 1fr; }
	.ril-advantages-grid { grid-template-columns: 1fr; }
	.ril-hero { min-height: 520px; }
	.ril-hero-title { font-size: 30px; }
	.ril-consult-card { padding: 30px 20px; }
}

/* ==========================================================================
   Editorial v2 additions — italic-gold accent headline pattern, numbered
   service list, process steps, full-black pull-quote, split contact layout.
   ========================================================================== */

.ril-section-alt { background-color: var(--brand-cream); }

.ril-accent {
	font-style: italic;
	color: var(--brand-gold);
	font-weight: 400;
}

/* Hero v2 — navy gradient with a tilted "business card" visual, matching
   the client's design source (app/globals.css: .hero, .hero-visual). */
.ril-hero-v2 {
	background: linear-gradient(112deg, #071126 5%, #111a35 58%, #1d1c24 100%);
	padding: 90px 0 70px;
	position: relative;
	overflow: hidden;
}
.ril-hero-v2::after {
	content: "";
	position: absolute;
	top: -120px;
	right: -120px;
	width: 480px;
	height: 480px;
	border-radius: 50%;
	border: 1px solid rgba(217, 173, 63, 0.18);
}
.ril-hero-v2-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
	position: relative;
	z-index: 2;
}
.ril-hero-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	min-width: 0;
	align-items: center;
}
.ril-hero-visual-wrap {
	display: flex;
	align-items: center;
	justify-content: flex-end;
}
.ril-hero-visual {
	width: min(100%, 440px);
	aspect-ratio: 1.38;
	position: relative;
	overflow: hidden;
	border: 1px solid rgba(217, 173, 63, 0.55);
	background: #0d1733;
	box-shadow: 16px 16px 0 rgba(217, 173, 63, 0.14), 0 25px 70px rgba(0, 0, 0, 0.3);
	transform: rotate(1.5deg);
}
.ril-hero-visual::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(8, 17, 38, 0.2), rgba(8, 17, 38, 0.08) 50%, rgba(217, 173, 63, 0.22));
	pointer-events: none;
}
.ril-hero-visual img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.ril-hero-visual-caption {
	position: absolute;
	z-index: 1;
	left: 22px;
	right: 22px;
	bottom: 18px;
	display: flex;
	justify-content: space-between;
	gap: 20px;
	color: #f1d18a;
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.ril-hero-visual-caption span:last-child {
	color: rgba(255, 255, 255, 0.76);
	text-align: right;
	letter-spacing: 0.06em;
	text-transform: none;
}
.ril-hero-grid > * {
	min-width: 0;
}
@media (max-width: 900px) {
	.ril-hero-grid { grid-template-columns: 1fr; }
	.ril-hero-visual-wrap { justify-content: flex-start; margin-top: 30px; }
}
.ril-hero-v2 .ril-eyebrow { color: var(--brand-gold); }
.ril-hero-v2-title {
	font-family: var(--font-heading);
	color: var(--brand-white);
	font-size: 56px;
	line-height: 1.15;
	margin: 0 0 26px;
}
.ril-hero-v2-sub {
	color: rgba(255, 255, 255, 0.75);
	font-size: 17px;
	line-height: 1.7;
	max-width: 520px;
	margin: 0 0 36px;
}
.ril-hero-v2-fact {
	margin-top: 40px;
	color: rgba(255, 255, 255, 0.6);
	font-size: 13px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	row-gap: 8px;
}
.ril-hero-v2-fact .ril-stat {
	white-space: nowrap;
}
.ril-hero-v2-fact .ril-stat:not(:first-child)::before {
	content: '\00b7';
	margin: 0 10px;
	color: rgba(255, 255, 255, 0.35);
}
.ril-hero-v2-fact strong {
	color: var(--brand-gold);
	font-family: var(--font-heading);
	font-style: normal;
	font-size: 20px;
}

/* Pill buttons */
.ril-btn {
	border-radius: 999px;
}
.ril-btn-dark {
	background-color: var(--brand-black);
	color: var(--brand-white);
}
.ril-btn-dark:hover {
	background-color: var(--brand-gold);
	color: var(--brand-black);
}
.ril-btn-text {
	background: none;
	padding: 15px 4px;
	color: var(--brand-white);
	border: none;
	text-transform: none;
	font-size: 15px;
	letter-spacing: normal;
}
.ril-btn-text:hover {
	color: var(--brand-gold);
}

/* Intro split (kicker/headline left, supporting text right) */
.ril-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: start;
}
.ril-split .ril-section-title {
	font-size: 40px;
}
.ril-split-support p {
	color: var(--brand-text);
	font-size: 17px;
	line-height: 1.7;
	margin: 0 0 18px;
}
.ril-split-support .ril-muted {
	color: var(--brand-text-muted);
	font-size: 15px;
}

/* Numbered services list — 3 columns so 6 real services form two clean,
   evenly-filled rows instead of a 4+2 layout with a dangling gap. */
.ril-numbered-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
	margin-top: 40px;
}
.ril-numbered-item {
	padding: 30px 30px 30px 30px;
	border-right: 1px solid rgba(0, 0, 0, 0.1);
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.ril-numbered-item:nth-child(3n+1) {
	padding-left: 0;
}
.ril-numbered-item:nth-child(3n) {
	border-right: none;
}
.ril-numbered-item:nth-last-child(-n+3) {
	border-bottom: none;
}
.ril-numbered-item .ril-service-top {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}
.ril-numbered-item .ril-num {
	font-size: 12px;
	color: var(--brand-gold-deep);
	font-weight: 700;
	letter-spacing: 1px;
}
.ril-numbered-item .ril-service-icon {
	color: var(--brand-gold);
	font-size: 22px;
	line-height: 1;
}
.ril-numbered-item h3 {
	font-family: var(--font-heading);
	color: var(--brand-navy);
	font-size: 20px;
	margin: 14px 0 12px;
}
.ril-numbered-item p {
	color: var(--brand-text-muted);
	font-size: 14px;
	line-height: 1.7;
	margin: 0 0 14px;
}

/* Process steps */
.ril-process-list {
	border-top: 1px solid rgba(0, 0, 0, 0.12);
}
.ril-process-step {
	display: grid;
	grid-template-columns: 60px 1fr;
	gap: 20px;
	padding: 26px 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
.ril-process-step .ril-num {
	font-family: var(--font-heading);
	color: var(--brand-gold);
	font-size: 15px;
}
.ril-process-step h4 {
	font-family: var(--font-heading);
	color: var(--brand-navy);
	font-size: 19px;
	margin: 0 0 6px;
}
.ril-process-step p {
	color: var(--brand-text-muted);
	font-size: 14px;
	line-height: 1.6;
	margin: 0;
}

/* Full-navy pull-quote band */
.ril-quote-band {
	background-color: var(--brand-navy);
	padding: 100px 0;
	text-align: center;
}
.ril-quote-mark {
	font-family: var(--font-heading);
	color: var(--brand-gold);
	font-size: 60px;
	line-height: 1;
	display: block;
	margin-bottom: 10px;
}
.ril-quote-text {
	font-family: var(--font-heading);
	color: var(--brand-white);
	font-size: 32px;
	line-height: 1.5;
	max-width: 820px;
	margin: 0 auto 28px;
}
.ril-quote-author {
	color: var(--brand-gold);
	font-size: 14px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

/* Testimonials — editable from wp-admin (Testimonials CPT); the slider
   only appears once there are 2+ published, see functions.php. */
.ril-testimonial-track {
	position: relative;
}
.ril-testimonial-slide {
	display: none;
}
.ril-testimonial-slide.is-active {
	display: block;
	animation: ril-fade-in 0.5s ease;
}
@keyframes ril-fade-in {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: none; }
}
.ril-testimonial-dots {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-top: 30px;
}
.ril-testimonial-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	border: none;
	background: rgba(255, 255, 255, 0.3);
	padding: 0;
	cursor: pointer;
	transition: background 0.2s, transform 0.2s;
}
.ril-testimonial-dot.is-active {
	background: var(--brand-gold);
	transform: scale(1.3);
}

/* Contact split */
.ril-contact-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
}
.ril-contact-info p {
	color: var(--brand-text-muted);
	font-size: 16px;
	line-height: 1.7;
	margin: 0 0 30px;
}
.ril-contact-line {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--brand-navy);
	font-weight: 600;
	margin-bottom: 14px;
}
.ril-contact-line i {
	color: var(--brand-gold);
}
.ril-contact-form-wrap,
.ril-contact-form-wrap .wpcf7,
.ril-contact-form-wrap .wpcf7-form,
.ril-contact-form-wrap #homecontacform,
.ril-contact-form-wrap #homecontacform > div {
	background: transparent !important;
	box-shadow: none !important;
	border: none !important;
	padding: 0 !important;
}
/* #homecontacform carries Bootstrap's ".row" class, which ships a
   margin: 0 -15px — normally cancelled out by a parent ".container"'s own
   +15px padding, but nothing here provides that, so the row (and the text
   inside its ".col-md-*" children) sat 15px further left/right than this
   wrapper's own box. Invisible with page-wide horizontal scroll available;
   once body got overflow-x:hidden (to fix an unrelated mobile overflow
   bug) this instead silently clipped the first/last few characters of
   every label on narrow screens. */
.ril-contact-form-wrap #homecontacform {
	margin-left: 0 !important;
	margin-right: 0 !important;
}
.ril-contact-form-wrap .wpcf7-form-control-wrap input,
.ril-contact-form-wrap .wpcf7-form-control-wrap textarea {
	border: none !important;
	border-bottom: 1px solid rgba(0, 0, 0, 0.2) !important;
	border-radius: 0 !important;
	padding: 10px 4px !important;
	width: 100% !important;
	background: transparent !important;
	margin-bottom: 24px;
	box-shadow: none !important;
}
/* The site's legacy Additional CSS has "#homecontacform p { color: #fff; }"
   (this form was originally designed to sit on a dark navy glass box) — an
   ID selector, which outranks a plain class rule regardless of !important
   ordering. Match its specificity + !important to actually win. */
.ril-contact-form-wrap label,
.ril-contact-form-wrap p,
#homecontacform p {
	color: var(--brand-navy) !important;
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}
.ril-contact-form-wrap h4 {
	display: none;
}

@media (max-width: 900px) {
	.ril-split { grid-template-columns: 1fr; gap: 30px; }
	.ril-numbered-grid { grid-template-columns: repeat(2, 1fr); }
	.ril-numbered-item { border-bottom: 1px solid rgba(0,0,0,0.1); padding-bottom: 24px; margin-bottom: 10px; }
	.ril-hero-v2-title { font-size: 38px; }
	.ril-quote-text { font-size: 24px; }
	.ril-contact-split { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 600px) {
	/* iOS Safari auto-zooms on focusing any input under 16px font-size —
	   the contact form's fields were set at 13-14px throughout. */
	.ril-contact-form-wrap .wpcf7-form-control-wrap input,
	.ril-contact-form-wrap .wpcf7-form-control-wrap textarea {
		font-size: 16px !important;
		margin-bottom: 18px;
	}
	.ril-contact-form-wrap .wpcf7-form-control-wrap {
		max-width: 100%;
	}
	.ril-contact-form-wrap .wpcf7 form,
	.ril-contact-form-wrap #homecontacform {
		max-width: 100%;
		overflow-x: hidden;
	}
	.ril-contact-form-wrap iframe {
		max-width: 100%;
	}
}
@media (max-width: 600px) {
	.ril-numbered-grid { grid-template-columns: 1fr; }
}

/* Blog archive cards use Isotope masonry, which packs each card independently
   by height, so "Continue reading" links land at different vertical positions
   per card. Force a plain equal-height row instead: disable the JS-driven
   absolute positioning and stretch each card, then pin its "Continue reading"
   link to the bottom via flex so every row lines up cleanly. */
.woodmart-blog-holder.masonry-container {
	position: static !important;
	height: auto !important;
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: stretch !important;
}
.woodmart-blog-holder.masonry-container .blog-post-loop {
	position: static !important;
	top: auto !important;
	left: auto !important;
	right: auto !important;
	display: flex !important;
}
.woodmart-blog-holder.masonry-container .article-inner {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	width: 100%;
}
.woodmart-blog-holder.masonry-container .article-body-container {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}
.woodmart-blog-holder.masonry-container .entry-content.woodmart-entry-content {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}
.woodmart-blog-holder.masonry-container .read-more-section {
	margin-top: auto !important;
	padding-top: 12px;
}

/* Sitewide "Need a Consultation?" pre-footer CTA band + its "Inquire Now"
   popup (cms_block 3098, injected via woodmart_get_opt('prefooter_area')
   on every page). Band was legacy teal (#1e779f); popup body held stale
   demo data (161-Y address, yasir@localhost) and an icon that visually
   overlapped the first field. */
/* Woodmart's own .woodmart-prefooter wrapper (base.css) ships a hardcoded
   white background + 40px bottom padding around whatever the CTA band
   renders — that padding zone doesn't inherit the row's navy background,
   which is what left a pale gap above/below the band. Paint the wrapper
   itself and drop its padding so the band's own spacing is the only
   spacing. */
.woodmart-prefooter {
	background-color: var(--brand-navy) !important;
	padding: 0 !important;
	position: relative;
}
/* Same gold gradient line used under the header, echoed here to join the
   "Need a Consultation?" band to the footer directly beneath it. */
.woodmart-prefooter:after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: linear-gradient(90deg, transparent 0%, rgba(217, 173, 63, 0.15) 12%, rgba(217, 173, 63, 0.6) 30%, var(--brand-gold) 50%, rgba(217, 173, 63, 0.6) 70%, rgba(217, 173, 63, 0.15) 88%, transparent 100%);
	opacity: 0.8;
}
.ril-cta-flex {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 24px;
	max-width: 1200px;
	margin: 0 auto;
	padding: 22px 24px;
}
.ril-cta-copy h4 {
	color: var(--brand-white) !important;
	font-size: 22px;
	margin: 0 0 4px;
}
.ril-cta-copy p {
	color: rgba(255, 255, 255, 0.75);
	font-size: 14px;
	margin: 0;
}
@media (max-width: 700px) {
	.ril-cta-flex { padding: 20px 20px; }
}
.ril-popup-grid {
	display: grid;
	grid-template-columns: 1.5fr 1fr;
	gap: 40px;
}
.ril-popup-form .ril-form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}
.ril-popup-form label {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--brand-text-muted);
	margin-bottom: 20px;
}
.ril-popup-form .wpcf7-form-control-wrap {
	display: block;
	margin-top: 8px;
}
/* A leftover sitewide "Custom CSS" block from the pre-rebrand site (still
   visible: old #ef1818 red accents, an old #homecontacform id) forces
   border-radius:20px, a fixed height:30px and font-size:12px onto every
   text/email/tel input on the whole site via !important — it loads after
   this stylesheet, so on equal specificity it was quietly winning over the
   rule below. Bumped specificity here (input.wpcf7-form-control instead of
   plain input) to reliably beat it, and reset the height it hardcodes. */
.ril-popup-form input.wpcf7-form-control:not([type="submit"]),
.ril-popup-form textarea.wpcf7-form-control {
	width: 100% !important;
	height: auto !important;
	border: 1px solid var(--brand-line) !important;
	border-radius: 4px !important;
	background: var(--brand-white) !important;
	padding: 11px 12px !important;
	font-size: 14px !important;
	color: var(--brand-black);
	box-shadow: none !important;
}
.ril-popup-form input:focus,
.ril-popup-form textarea:focus {
	border-color: var(--brand-gold-deep) !important;
	outline: none;
}
.ril-popup-info {
	background-color: var(--brand-charcoal);
	color: rgba(255, 255, 255, 0.85);
	padding: 30px 26px;
	border-radius: 4px;
}
.ril-popup-info h5 {
	color: var(--brand-white) !important;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	margin: 0 0 20px;
}
.ril-contact-details {
	display: grid;
	gap: 12px;
	margin-bottom: 24px;
	padding-bottom: 24px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.ril-contact-details a {
	display: flex;
	align-items: center;
	gap: 10px;
	color: rgba(255, 255, 255, 0.9) !important;
	font-size: 13px;
}
.ril-contact-details a i {
	color: var(--brand-gold);
	width: 16px;
}
.ril-contact-offices {
	display: grid;
	gap: 16px;
}
.ril-contact-offices strong {
	display: block;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--brand-gold);
	margin-bottom: 4px;
}
.ril-contact-offices span {
	color: rgba(255, 255, 255, 0.65);
	font-size: 12px;
	line-height: 1.55;
}
@media (max-width: 700px) {
	.ril-popup-grid { grid-template-columns: 1fr; }
	.ril-popup-form .ril-form-row { grid-template-columns: 1fr; }
	/* Each field's 20px label margin + 8px input-wrap margin + the
	   paragraph's own default ~20px margin all stack up per field —
	   fine as generous desktop breathing room, but on a narrow phone
	   screen it triples the form's scroll length. Tighten all three. */
	.ril-popup-form p {
		margin-bottom: 14px;
	}
	.ril-popup-form label {
		margin-bottom: 6px;
	}
	.ril-popup-form .wpcf7-form-control-wrap {
		margin-top: 0;
	}
	/* Each field's own CF7-generated wrapper div also carries an inline
	   margin-bottom:20px (a 4th stacked spacing source alongside the three
	   above) — needs !important to beat the inline style. */
	.ril-popup-form .row > div {
		margin-bottom: 10px !important;
	}
}

/* Contact Us page (post 651) — "Send us an email" + "Contact details",
   previously plain default CF7/vc_column_text styling with no icons. */
.ril-contact-page-grid {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 90px;
	max-width: 1200px;
	margin: 0 auto;
	padding: 90px 24px;
}
.ril-contact-page-form h3,
.ril-contact-page-info h3 {
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: var(--brand-black);
	padding-bottom: 18px;
	margin: 0 0 30px;
	border-bottom: 1px solid var(--brand-line);
}
.ril-career-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 22px;
}
.ril-career-list li {
	position: relative;
	padding-left: 26px;
	color: var(--brand-text-muted);
	font-size: 14px;
	line-height: 1.65;
}
.ril-career-list li:before {
	content: '\2713';
	position: absolute;
	left: 0;
	top: 0;
	color: var(--brand-gold-deep);
	font-weight: 700;
}
.ril-contact-page-form .ril-form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}
.ril-contact-page-form label {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--brand-text-muted);
	margin-bottom: 20px;
}
.ril-contact-page-form .wpcf7-form-control-wrap {
	display: block;
	margin-top: 8px;
}
/* Same specificity gap as .ril-popup-form below — a legacy sitewide
   Custom-CSS block (border-radius:20px, height:30px, font-size:12px on
   every input[type] tag) ties this rule's specificity and loads later, so
   it was quietly winning and showing rounded white pill inputs here
   instead of the intended minimal underline style. */
.ril-contact-page-form input.wpcf7-form-control:not([type="submit"]),
.ril-contact-page-form textarea.wpcf7-form-control {
	width: 100% !important;
	height: auto !important;
	border: none !important;
	border-bottom: 1px solid var(--brand-line) !important;
	border-radius: 0 !important;
	background: transparent !important;
	padding: 10px 2px !important;
	font-size: 14px !important;
	color: var(--brand-black);
	box-shadow: none !important;
}
.ril-contact-page-form input:focus,
.ril-contact-page-form textarea:focus {
	border-color: var(--brand-gold-deep) !important;
	outline: none;
}
.ril-cd-block {
	display: flex;
	gap: 16px;
	margin-bottom: 26px;
}
.ril-cd-block i {
	color: var(--brand-gold-deep);
	font-size: 17px;
	width: 20px;
	margin-top: 3px;
}
.ril-cd-block strong {
	display: block;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--brand-black);
	margin-bottom: 4px;
}
.ril-cd-block span,
.ril-cd-block span a {
	color: var(--brand-text-muted) !important;
	font-size: 14px;
	line-height: 1.6;
}
@media (max-width: 900px) {
	.ril-contact-page-grid { grid-template-columns: 1fr; gap: 50px; padding: 60px 20px; }
	.ril-contact-page-form .ril-form-row { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
	.ril-popup-form input,
	.ril-popup-form textarea,
	.ril-contact-page-form input,
	.ril-contact-page-form textarea {
		font-size: 16px !important;
	}
	.ril-popup-grid { gap: 26px; }
	.ril-popup-info { padding: 24px 20px; }
}

/* Subtle, tasteful scroll-reveal used sitewide (see functions.php) — fades
   and lifts key blocks into place as they enter the viewport instead of
   everything appearing statically at once. No-ops under
   prefers-reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
	.ril-reveal {
		opacity: 0;
		transform: translateY(26px);
		transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.3, 1), transform 0.7s cubic-bezier(0.2, 0.7, 0.3, 1);
	}
	.ril-reveal.is-visible {
		opacity: 1;
		transform: none;
	}
}

/* Most inner pages (Visa Consultancy, Tour Management, the country/service
   sub-pages, About, Career...) are built as: a full-bleed image banner row
   with the page title, immediately followed by a plain text row with no
   custom top padding of its own — so the paragraph copy starts right at
   the banner's bottom edge. WPBakery marks every full-width row with
   data-vc-full-width="true" at render, which gives a single rule that
   reaches all of them without editing each page's content individually. */
.entry-content .vc_row[data-vc-full-width="true"] + .vc_row {
	padding-top: 70px !important;
}
/* Same gap, opposite order: a plain content row immediately followed by a
   full-width background-image row (e.g. Education in Europe's "Benefits /
   Qualifying Criteria" band) — text ran straight into the image with no
   breathing room at all. */
.entry-content .vc_row + .vc_row[data-vc-full-width="true"] {
	margin-top: 55px !important;
}

/* Woodmart's magnific-popup close button (".mfp-close") is styled as a
   fullscreen-gallery control: position:fixed, pinned to the browser
   viewport's top-right corner rather than the popup card itself — fine for
   a fullscreen lightbox, disorienting for our small "Inquire Now" modal.
   Its icon is also the same broken woodmart-font glyph as the nav
   dropdown arrows. Anchor it to the popup card and draw a plain CSS X. */
.woodmart-content-popup {
	position: relative;
}
.woodmart-content-popup .mfp-close {
	position: absolute !important;
	top: 10px !important;
	right: 10px !important;
	width: 34px;
	height: 34px;
	background: var(--brand-cream);
	border-radius: 50%;
	opacity: 1;
	z-index: 10;
}
.woodmart-content-popup .mfp-close:after {
	content: '' !important;
	font-family: inherit !important;
	color: transparent !important;
	text-indent: -9999px !important;
	font-size: 0 !important;
	overflow: hidden;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 14px;
	height: 14px;
	margin: -7px 0 0 -7px;
	background:
		linear-gradient(45deg, transparent 45%, var(--brand-black) 45%, var(--brand-black) 55%, transparent 55%),
		linear-gradient(-45deg, transparent 45%, var(--brand-black) 45%, var(--brand-black) 55%, transparent 55%);
}
.woodmart-content-popup .mfp-close:hover:after {
	background:
		linear-gradient(45deg, transparent 45%, var(--brand-gold-deep) 45%, var(--brand-gold-deep) 55%, transparent 55%),
		linear-gradient(-45deg, transparent 45%, var(--brand-gold-deep) 45%, var(--brand-gold-deep) 55%, transparent 55%);
}

/* The "back to top" button's icon comes from Woodmart's icon font
   (content: "\f112"). A border-rotation CSS shape was tried here previously
   to paper over that glyph rendering unreliably (sometimes showing a
   fallback "tofu" box/X instead of the arrow) — but per the client report
   it was still showing up broken. Font glyphs depend on the font file
   loading correctly; an inline SVG can't ever fail to a fallback glyph, so
   replace the icon entirely rather than continuing to fight the font. */
.scrollToTop {
	position: fixed;
}
.scrollToTop:after {
	content: '' !important;
	font-size: 0 !important;
	display: block !important;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 16px;
	height: 16px;
	margin: -8px 0 0 -8px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333333' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 15 12 9 18 15'%3E%3C/polyline%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	border: none;
	transform: none;
}
.woodmart-dark .scrollToTop:after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 15 12 9 18 15'%3E%3C/polyline%3E%3C/svg%3E");
}

/* "Why Choose us?" sidebar box on the 24 country/service sub-pages — was a
   plain white "double" border with no real polish; tagged via JS (see
   functions.php) since each page's box uses its own per-page custom-CSS
   class with no shared selector. */
.ril-why-choose-box,
.ril-why-choose-box .vc_column-inner {
	border: none !important;
	border-radius: 10px !important;
	box-shadow: none !important;
}
.ril-why-choose-box .vc_column-inner {
	background-color: var(--brand-navy) !important;
	box-shadow: 0 25px 60px rgba(10, 16, 38, 0.35) !important;
	padding: 22px 24px !important;
	margin-bottom: 30px !important;
	position: relative;
	overflow: hidden;
}
/* On mobile the column this box sits in has zero side padding (it's the
   only content on the page that doesn't — every paragraph around it has a
   15px gutter), so the box ran edge-to-edge: rounded corners with nothing
   to round against, and its shadow cut off flush against the screen. Inset
   it to match the rest of the page's mobile gutter. */
@media (max-width: 767px) {
	.ril-why-choose-box .vc_column-inner {
		margin-left: 15px;
		margin-right: 15px;
		width: auto;
		max-width: calc(100% - 30px);
	}
}
.ril-why-choose-box .vc_column-inner:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--brand-gold), var(--brand-gold-deep));
	z-index: 1;
}
.ril-why-choose-box .woodmart-title-container {
	padding-top: 0 !important;
}
.ril-why-choose-box .woodmart-title-text {
	font-size: 18px;
	margin-bottom: 6px !important;
	color: var(--brand-white) !important;
}
.ril-why-choose-box .title-underlined-border {
	background-color: var(--brand-gold) !important;
}
.ril-why-choose-box ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.ril-why-choose-box ul li {
	position: relative;
	padding: 0 0 10px 22px;
	color: rgba(255, 255, 255, 0.82);
	font-size: 13px;
	line-height: 1.45;
}
.ril-why-choose-box ul li:before {
	content: '\2713';
	position: absolute;
	left: 0;
	top: 0;
	color: var(--brand-gold);
	font-weight: 700;
}

/* "Book a Consultation" wizard modal (see functions.php) */
.ril-wizard-overlay {
	position: fixed;
	inset: 0;
	background: rgba(10, 16, 38, 0.7);
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease;
	padding: 20px;
}
.ril-wizard-overlay.is-open {
	opacity: 1;
	visibility: visible;
}
.ril-wizard-modal {
	background: var(--brand-white);
	border-radius: 12px;
	max-width: 560px;
	width: 100%;
	padding: 44px 40px 36px;
	position: relative;
	box-shadow: 0 40px 90px rgba(0, 0, 0, 0.35);
	max-height: 90vh;
	overflow-y: auto;
}
/* Something else on the page (never pinned down exactly what — no other
   rule in this file or Woodmart's own CSS targets .ril-wizard-close by
   name) contests top/right on this button specifically; matching values
   without !important left it rendering pinned to the top-left instead,
   overlapping the step-1 label. !important settles it outright. */
.ril-wizard-close {
	box-sizing: border-box !important;
	position: absolute !important;
	top: 14px !important;
	right: 14px !important;
	left: auto !important;
	width: 28px !important;
	height: 28px !important;
	padding: 0 !important;
	margin: 0 !important;
	min-width: 0 !important;
	line-height: 1 !important;
	border-radius: 50% !important;
	border: none !important;
	background: var(--brand-cream) !important;
	cursor: pointer;
	z-index: 10;
}
.ril-wizard-close:after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 11px;
	height: 11px;
	margin: -5.5px 0 0 -5.5px;
	background:
		linear-gradient(45deg, transparent 45%, var(--brand-black) 45%, var(--brand-black) 55%, transparent 55%),
		linear-gradient(-45deg, transparent 45%, var(--brand-black) 45%, var(--brand-black) 55%, transparent 55%);
}
.ril-wizard-close:hover:after {
	background:
		linear-gradient(45deg, transparent 45%, var(--brand-gold-deep) 45%, var(--brand-gold-deep) 55%, transparent 55%),
		linear-gradient(-45deg, transparent 45%, var(--brand-gold-deep) 45%, var(--brand-gold-deep) 55%, transparent 55%);
}
.ril-wizard-progress {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: var(--brand-line);
	border-radius: 12px 12px 0 0;
	overflow: hidden;
}
.ril-wizard-progress span {
	display: block;
	height: 100%;
	width: 25%;
	background: linear-gradient(90deg, var(--brand-gold), var(--brand-gold-deep));
	transition: width 0.3s ease;
}
.ril-wizard-step {
	display: none;
}
.ril-wizard-step.is-active {
	display: block;
	animation: ril-fade-in 0.3s ease;
}
.ril-wizard-eyebrow {
	color: var(--brand-gold-deep);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	margin: 0 0 8px;
}
.ril-wizard-step h3 {
	font-size: 26px;
	margin: 0 0 24px;
}
.ril-wizard-choices {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}
.ril-wizard-choice {
	border: 1px solid var(--brand-line);
	background: var(--brand-white);
	border-radius: 8px;
	padding: 16px;
	font-size: 14px;
	font-weight: 600;
	color: var(--brand-black);
	cursor: pointer;
	text-align: left;
	transition: border-color 0.2s, background 0.2s;
}
.ril-wizard-choice:hover {
	border-color: var(--brand-gold-deep);
	background: var(--brand-cream);
}
.ril-wizard-back {
	display: inline-block;
	margin-top: 22px;
	background: none;
	border: none;
	color: var(--brand-text-muted);
	font-size: 13px;
	cursor: pointer;
	padding: 0;
}
#ril-wizard-form {
	display: grid;
	gap: 18px;
}
#ril-wizard-form label {
	display: grid;
	gap: 8px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--brand-text-muted);
}
#ril-wizard-form input {
	border: none;
	border-bottom: 1px solid var(--brand-line);
	padding: 10px 2px;
	font-size: 15px;
	color: var(--brand-black);
}
#ril-wizard-form input:focus {
	outline: none;
	border-color: var(--brand-gold-deep);
}
.ril-wizard-error {
	color: #c0392b;
	font-size: 13px;
	margin: 0;
}
.ril-wizard-submit {
	justify-self: start;
}
.ril-wizard-thankyou {
	text-align: center;
	padding: 20px 0;
}
.ril-wizard-thankyou i {
	font-size: 48px;
	color: var(--brand-gold-deep);
	margin-bottom: 16px;
}
.ril-wizard-thankyou h3 {
	margin: 0 0 10px;
}
.ril-wizard-thankyou p {
	color: var(--brand-text-muted);
	margin: 0 0 6px;
}
.ril-wizard-direct a {
	color: var(--brand-gold-deep);
	font-weight: 600;
}
@media (max-width: 500px) {
	.ril-wizard-modal { padding: 40px 22px 28px; }
	.ril-wizard-choices { grid-template-columns: 1fr; }
}

/* Canada is the firm's primary focus — a direct, visually distinct shortcut
   in the main nav (see functions.php... actually added via wp-admin nav
   menu item ID 4282) rather than leaving it buried in the Services
   dropdown. */
.whb-general-header li.ril-nav-highlight > a .nav-link-text {
	background: linear-gradient(90deg, var(--brand-gold), var(--brand-gold-deep));
	color: var(--brand-black) !important;
	padding: 7px 14px;
	border-radius: 20px;
	font-weight: 700;
	position: relative;
	overflow: hidden;
	box-shadow: 0 2px 12px rgba(217, 173, 63, 0.5);
}
.whb-general-header li.ril-nav-highlight > a:hover .nav-link-text {
	color: var(--brand-black) !important;
	filter: brightness(1.08);
}
/* Periodic light sweep across the pill so the "Canada Immigration" nav item
   reads as shiny/premium rather than a flat button, matching this being the
   business's main-focus service. Clipped to the pill's own rounded shape via
   overflow:hidden above. */
.whb-general-header li.ril-nav-highlight > a .nav-link-text:before {
	content: '';
	position: absolute;
	top: 0;
	left: -75%;
	width: 45%;
	height: 100%;
	background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.75), transparent);
	transform: skewX(-20deg);
	animation: ril-nav-shine 4s ease-in-out infinite;
}
@keyframes ril-nav-shine {
	0% { left: -75%; }
	35% { left: 125%; }
	100% { left: 125%; }
}
@media (prefers-reduced-motion: reduce) {
	.whb-general-header li.ril-nav-highlight > a .nav-link-text:before {
		animation: none;
		display: none;
	}
}

/* Generic horizontal chip slider for long flat lists (e.g. Canada's PNP
   provinces) — a tall bulleted 2-column list added a lot of page scroll
   for what's really just a set of names; this scrolls sideways instead. */
.ril-chip-slider-wrap {
	margin-top: 16px;
}
.ril-chip-slider {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: 4px;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.ril-chip-slider::-webkit-scrollbar {
	display: none;
}
.ril-chip {
	flex: 0 0 auto;
	scroll-snap-align: start;
	background: var(--brand-cream);
	border: 1px solid var(--brand-line);
	border-radius: 30px;
	padding: 10px 20px;
	font-size: 13px;
	font-weight: 600;
	color: var(--brand-black);
	white-space: nowrap;
}
.ril-chip-slider-nav {
	display: flex;
	gap: 8px;
	margin-top: 14px;
}
/* Same issue as the wizard's close button: border-radius/box-sizing were
   silently losing to something else without !important, rendering as a
   plain square instead of a circle. Also replaced the plain text arrows
   with a drawn chevron for a cleaner look. */
.ril-chip-slider-btn {
	box-sizing: border-box !important;
	width: 34px !important;
	height: 34px !important;
	padding: 0 !important;
	margin: 0 !important;
	min-width: 0 !important;
	border-radius: 50% !important;
	border: 1px solid var(--brand-line) !important;
	background: var(--brand-white) !important;
	color: transparent !important;
	cursor: pointer;
	position: relative;
	box-shadow: 0 2px 6px rgba(10, 16, 38, 0.08);
	transition: border-color 0.2s, background 0.2s;
}
.ril-chip-slider-btn:after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 7px;
	height: 7px;
	margin: -5px 0 0 -3px;
	border-top: 1.6px solid var(--brand-black);
	border-right: 1.6px solid var(--brand-black);
	transform: rotate(-135deg);
}
.ril-chip-slider-next:after {
	margin-left: -5px;
	transform: rotate(45deg);
}
.ril-chip-slider-btn:hover {
	border-color: var(--brand-gold-deep) !important;
	background: var(--brand-cream) !important;
}
.ril-chip-slider-btn:hover:after {
	border-color: var(--brand-gold-deep);
}

/* Inline photos on the country/service sub-pages (WPBakery single-image)
   sat flush against the column's left edge once that column stacked full
   width on mobile, instead of sitting centered under the paragraph text. */
@media (max-width: 767px) {
	.vc_single_image-wrapper {
		display: block;
		margin-left: auto !important;
		margin-right: auto !important;
	}
}

/* The "Why Choose us?" sidebar column is much shorter than its sibling
   text column on several country pages (fewer bullet points than
   paragraphs), leaving a tall dead patch of white space below the navy
   card before the row ends. A flexbox equal-height approach fought the
   row's existing WPBakery layout in ways that were hard to pin down
   reliably (its own reported height didn't match the taller sibling even
   once flex was confirmed active) — matched via direct JS measurement
   instead (see functions.php), which sidesteps that entirely. */
.ril-why-choose-box .vc_column-inner {
	box-sizing: border-box;
}

/* Visa Consultancy page's two supporting photos (see functions.php-free,
   direct content rewrite) — plain side-by-side grid instead of the old
   awkward two-column WPBakery row that let text collide with the images. */
.ril-visa-image-grid {
	max-width: 1200px;
	margin: 40px auto 0;
	padding: 0 24px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}
.ril-visa-image-grid img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 10px;
	box-shadow: 0 20px 40px rgba(10, 16, 38, 0.15);
}
@media (max-width: 700px) {
	.ril-visa-image-grid {
		grid-template-columns: 1fr;
	}
}

/* Every page banner's [woodmart_title style="underlined"] gets a SECOND
   underline besides the intended tight one under the title text itself:
   Woodmart draws a border-bottom on ".liner-continer", the title's whole
   wrapper — which spans the full banner width (title_width="100" is used
   throughout this site), so a faint line stretches all the way to both
   edges of the banner instead of stopping under the words. The correct,
   narrow underline is the separate ".title { border-bottom }" rule, which
   this doesn't touch. */
.woodmart-title-style-underlined .liner-continer {
	border-bottom: none !important;
}

/* Two side-by-side closing images (Canadian Citizenship page) — one had
   missing thumbnail metadata (regenerated) and both used a "600x400" crop
   that didn't suit their real aspect ratios, so give them a shared fixed
   display box instead of relying on the crop dimensions matching. */
/* el_class="ril-even-image" lands on the OUTER ".wpb_single_image" wrapper
   div (WPBakery's own behavior), not the <img> itself — so the earlier
   version of this rule (width/height/object-fit on .ril-even-image
   directly) only ever constrained the wrapper's own box. object-fit does
   nothing on a <div>, and with no overflow:hidden the actual <img> kept
   its full natural height and visually spilled out past that box, running
   straight into the heading below with no real gap. Size the wrapper AND
   clip it, then size/cover the image inside it separately. */
.ril-even-image {
	height: 320px !important;
	overflow: hidden;
	border-radius: 10px;
	margin-bottom: 24px !important;
}
.ril-even-image .vc_single_image-wrapper,
.ril-even-image img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	border-radius: 10px;
}

/* Tried sticky-positioning the "Why Choose us?" box so it stays in view
   next to the longer article text (previous note here) — traded one visual
   complaint for another: once scrolled past, it left a stark navy box
   pinned above a big empty white column with nothing else around it,
   which read as more broken than the original short-box-then-plain-text
   layout. Reverted to normal, static flow. */