/*
Theme Name: Groww Child Theme
Theme URI: https://groww.g5plus.net/
Author: G5 Theme
Author URI: https://themeforest.net/user/g5theme
Description: Child theme for Groww Theme
Version: 1.0.0
Template: groww
Text Domain: groww-child
*/

/* ------------------------------------------------------------------
   S4V brand overrides
   Groww paints Elementor Pro form submit buttons with its own pink/purple
   gradient, which beats the per-widget colour set in the builder. Override
   it here so every form on the site follows the brand.
   ------------------------------------------------------------------ */
.elementor-form .elementor-button,
.elementor-form button[type="submit"] {
	background-image: none !important;
	background-color: #00D1FF;
	color: #0F1E3D;
}

.elementor-form .elementor-button:hover,
.elementor-form button[type="submit"]:hover {
	background-color: #1FA0DC;
	color: #0F1E3D;
}

/* ------------------------------------------------------------------
   Hero artwork stage
   Elementor's custom-position controls apply to widgets but not to
   containers, so the stage is positioned here instead. It bleeds past the
   boxed container to the right edge, and sits behind the headline.
   ------------------------------------------------------------------ */
.s4v-hero-stage {
	position: absolute;
	top: 0;
	right: 0;
	pointer-events: none;
}

@media (max-width: 1024px) {
	.s4v-hero-stage { opacity: 0.45; }
}

/* Lock the stage to the artwork's own proportions (668 x 767). Every layer
   inside is offset in %, so the composition only holds if this ratio does. */
.s4v-hero-stage {
	aspect-ratio: 668 / 767;
	min-height: 0;
}

/* Clear the floating nav with room to spare; the arcs are the topmost layer. */
.s4v-hero-stage { top: 118px; }

@media (max-width: 1024px) {
	.s4v-hero-stage { top: 80px; }
}

/* Breathing room on the right so the dot grid doesn't run into the edge. */
.s4v-hero-stage { right: 48px; }

@media (max-width: 1024px) {
	.s4v-hero-stage { right: 20px; }
}

/* ------------------------------------------------------------------
   News slider (ube-post-slider)
   The widget nests the byline inside .ube-entry-header, so it renders
   between the title and the excerpt. `display: contents` on the header
   promotes the title and byline to flex items of .card-body, which lets
   them be ordered independently to match the design.
   ------------------------------------------------------------------ */
.s4v-news-slider .card-body {
	display: flex;
	flex-direction: column;
	padding: 24px 0 0;
}

.s4v-news-slider .ube-entry-header  { display: contents; }
/* Category - S4V / Label / Default (IBM Plex Sans 500, 14px, 100%, 0.5%)
   in Harvest Orange/400, centred in a 21px row, as in the Figma. */
.s4v-news-slider .ube-post-terms {
	order: 1;
	display: flex;
	align-items: center;
	min-height: 21px;
	margin: 0 0 15px;
	font-family: "IBM Plex Sans", sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.07px;
	color: #FF8A3D;
}

.s4v-news-slider .ube-post-terms a {
	font: inherit;
	letter-spacing: inherit;
}

/* The widget's own "Term colour" (#F58220) is written by Elementor at five
   classes and loads after this file, and staging's homepage carries client
   edits so the layout cannot be pushed. Six classes set the Figma colour from
   here - the Elementor field for it no longer has any effect. */
.elementor .elementor-element.elementor-widget.s4v-news-slider .ube-posts .ube-post-terms {
	color: #FF8A3D;
}
.s4v-news-slider .ube-entry-title {
	order: 2;
	margin: 0 0 18px;
	font-size: 19px;
	line-height: 1.35;
	font-weight: 700;
}
.s4v-news-slider .ube-entry-content {
	order: 3;
	margin: 0;
	font-size: 18px;
	line-height: 1.65;
	color: #0B0F1A !important;
}
.s4v-news-slider .ube-entry-meta    { order: 4; margin: 18px 0 0; font-size: 13px; }

/* The design shows no author portrait. */
.s4v-news-slider .author-image { display: none; }

.s4v-news-slider .ube-entry-meta .ube-posted-on::before {
	content: "|";
	margin: 0 8px;
	color: #B9C4D6;
}

/* The thumbnail is an <a> with a background image, not an <img> - the radius
   has to sit on it (an img rule here never applied). */
.s4v-news-slider .ube-entry-post-thumb,
.s4v-news-slider .ube-entry-post-thumb img {
	border-radius: 20px;
	overflow: hidden;
}

/* Design puts a chevron after the newsletter CTA label. */
.s4v-newsletter-form .elementor-button-text::after {
	content: "›";
	margin-left: 10px;
	font-size: 1.25em;
	line-height: 0;
	vertical-align: middle;
}

/* Footer newsletter: the design is one wide field with the arrow sitting
   inside it, not a field plus a separate button below. */
.s4v-footer-form .elementor-form {
	position: relative;
	max-width: 470px;
}

.s4v-footer-form input[type="email"] {
	height: 58px;
	padding: 0 62px 0 20px;
	border: 0;
	border-radius: 8px;
	background: #fff;
	font-size: 16px;
}

/* The arrow belongs inside the email field. It used to be pinned to the
   bottom of the form, which was the same thing while the form was one row
   tall - adding the consent checkbox made the form taller and the arrow fell
   to the bottom, beside the consent text. The fields are a grid now and the
   arrow shares the email field's cell, so any field added below leaves it
   where it is. */
.s4v-footer-form .elementor-form-fields-wrapper {
	display: grid;
	grid-template-columns: 100%;
	row-gap: 12px;
}

.s4v-footer-form .elementor-field-group-email {
	grid-area: 1 / 1;
}

.s4v-footer-form .elementor-field-type-submit {
	grid-area: 1 / 1;
	position: static;
	justify-self: end;
	align-self: center;
	width: auto;
	margin: 0 6px 0 0;
	padding: 0;
	z-index: 1;
}

/* Consent line: white, and smaller than the field's own text. */
.s4v-footer-form .elementor-field-type-acceptance,
.s4v-footer-form .elementor-field-type-acceptance label,
.s4v-footer-form .elementor-field-type-acceptance .elementor-field-option label,
.s4v-footer-form .elementor-field-type-acceptance a {
	color: #FFFFFF;
	font-size: 14px;
	line-height: 1.45;
}

.s4v-footer-form .elementor-field-type-acceptance a {
	text-decoration: underline;
}

.s4v-footer-form .elementor-field-type-acceptance input[type="checkbox"] {
	margin-right: 8px;
	accent-color: #00D1FF;
}

.s4v-footer-form .elementor-button {
	min-width: 46px;
	height: 46px;
	padding: 0;
	background: transparent !important;
	color: #0F1E3D;
	box-shadow: none;
	font-size: 22px;
	line-height: 1;
}

.s4v-footer-form .elementor-button:hover { color: #00D1FF; }

/* ------------------------------------------------------------------
   News section glow
   The Figma export (Group 27, 1920x1237) is the section background at 100%
   width, so its rendered height is always 64.43% of the viewport width. The
   section has to be at least that tall or the artwork is cropped at the
   boundary and shows as a hard seam on wide screens.
   ------------------------------------------------------------------ */
.s4v-news-glow {
	min-height: 46vw;
	background-color: #fff;
	background-image:
		/* fades the glow into white before the section ends, so shortening the
		   section no longer slices the artwork with a hard horizontal edge */
		linear-gradient(to bottom, rgba(255, 255, 255, 0) 55%, #fff 92%),
		url("../../uploads/2026/09/s4v-news-glow.png");
	background-size: 100% 100%, 100% auto;
	background-position: 0 0, center top;
	background-repeat: no-repeat, no-repeat;
}

/* ------------------------------------------------------------------
   Blur exports are cropped tighter than the blur actually extends, so the
   PNG's own bounds read as a faint rectangle against the navy. A radial mask
   fades each one out at its edges regardless of how it was exported.
   ------------------------------------------------------------------ */
.s4v-soft-blur img {
	-webkit-mask-image: radial-gradient(ellipse closest-side, #000 50%, transparent 100%);
	mask-image: radial-gradient(ellipse closest-side, #000 50%, transparent 100%);
}

/* ------------------------------------------------------------------
   Pill label (S4V/Label/Default)
   The label is not two words in two colours - the text itself carries a
   linear gradient fill, Sky Aqua/400 -> Sky Aqua/900. Painted by clipping
   the gradient to the glyphs.
   ------------------------------------------------------------------ */
.s4v-pill .elementor-heading-title {
	/* The gradient used to start on Sky Aqua/400 (#00D1FF), which reads at
	   1.65:1 on the chip - the first letters were all but invisible. It starts
	   further down the same ramp now: 4.59:1 on the chip, past the 4.5:1 that
	   WCAG AA asks for, and the dark end is unchanged. */
	color: #00789B;
	background-image: linear-gradient(90deg, #00789B 0%, #004255 100%);
	-webkit-background-clip: text;
	background-clip: text;
}

/* Clipping the gradient to the glyphs hides the text itself; only do that
   where the browser can paint it. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.s4v-pill .elementor-heading-title {
		color: transparent;
		-webkit-text-fill-color: transparent;
	}
}

/* Grid cell size: the design's is tighter than the 190px I first used. */

/* Logo cards are a fixed 344x100 in the design; as flex children they were
   being shrunk to fit, so pin the basis and stop them flexing. */
.s4v-logo-card {
	/* four equal cards across the 1170 content grid, 26px gaps -> 273 each */
	flex: 1 1 0;
	min-width: 0;
}

/* Pill chip box: fixed 38px height, centred, no shadow. */
.s4v-pill {
	height: 38px;
	line-height: normal;
	box-shadow: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.s4v-pill .elementor-heading-title { line-height: normal; }

/* Centre the label within the chip. */
.s4v-pill .elementor-heading-title {
	text-align: center;
	width: 100%;
	margin: 0;
}

/* Cta chevron is a 16x16 export; Elementor sizes inline SVGs to 1em otherwise. */
.s4v-cta .elementor-button-icon svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
}

/* Groww's desktop layout-02 hardcodes "content-fill content-center" on the menu
   wrapper (templates/header/desktop/layout-02.php) and frontend.css declares
   .content-center { justify-content: center !important }. No theme option
   exists for it, and an !important can only be beaten by another. */
.g5core-site-header .g5core-header-inner .g5core-primary-menu.content-fill {
	justify-content: flex-end !important;
}

/* Centre label + chevron as a unit inside the Cta. */
.s4v-cta .elementor-button-content-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px !important;
}

/* Elementor adds its own icon margin (icon_indent); with the gap above that
   would stack to 34px, so neutralise it and let the gap govern. */
.s4v-cta .elementor-button-icon {
	margin: 0 !important;
}

/* ------------------------------------------------------------------
   Step number badge
   The badge was drawn by padding a heading, so once the number grew to 26px
   the box became taller than it was wide and read as an oval. aspect-ratio
   keeps it a true circle whatever the type does.
   ------------------------------------------------------------------ */
.s4v-step-number {
	aspect-ratio: 1 / 1;
	display: flex !important;
	align-items: center;
	justify-content: center;
	padding: 0 !important;
	border-radius: 50% !important;
}

.s4v-step-number .elementor-heading-title {
	line-height: 1;
}

/* ------------------------------------------------------------------
   Footer grid
   75px cells, measured off the original v10-bg-01.png.

   The grid sits in the upper part of the footer only: it fades in over the
   first 8% (where it meets the pale section above), runs clear to 30%, then
   is covered again by 62% so the lower half is plain navy. One extra
   background layer does both ends
   painting the footer navy over the grid, NOT with a masked ::before.
   A positioned pseudo-element needed .e-con-inner to be position:relative
   to sit behind the content, and that re-anchored every absolutely
   positioned decoration in the footer from the full-width container to the
   narrower boxed wrapper - which visibly moved all of them.
   Background layers paint below content, so nothing needs lifting.
   ------------------------------------------------------------------ */
.s4v-footer-grid {
	background-image:
		linear-gradient(to bottom,
			#0F1E3D 0%,
			rgba(15, 30, 61, 0) 8%,
			rgba(15, 30, 61, 0) 30%,
			#0F1E3D 62%,
			#0F1E3D 100%),
		/* 75px grid - horizontal and vertical, as in the design */
		linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
		linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
	background-size: 100% 100%, 100% 75px, 75px 100%;
	background-position: 0 0, center top, center top;
	background-repeat: no-repeat, repeat-y, repeat-x;
	overflow: hidden;
}

/* ------------------------------------------------------------------
   Partner logos
   The source files have very different aspect ratios (Sploro 2.07:1, EurA
   3.65:1), so sizing them by width made Sploro render 82px tall against the
   others' ~45px. Constrain the height instead and let width follow, which
   keeps them optically level.
   ------------------------------------------------------------------ */
.s4v-logo-card img {
	height: auto;
	max-height: 56px;
	width: auto !important;
	max-width: 200px;
	object-fit: contain;
}

/* ---------------------------------------------------------------------
   Home partner logos
   Figma: no frame, the logos in grey; on hover or keyboard focus they take
   their own colours and lead to each partner's site. The frame itself (white
   background, 10px radius) is off in the layout, so it stays editable.
   --------------------------------------------------------------------- */
.s4v-logo-card a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
}

.s4v-logo-card img {
	filter: grayscale(1);
	opacity: .65;
	transition: filter .25s ease, opacity .25s ease;
}

.s4v-logo-card:hover img,
.s4v-logo-card a:hover img,
.s4v-logo-card a:focus-visible img {
	filter: none;
	opacity: 1;
}

.s4v-logo-card a:focus-visible {
	outline: 2px solid #00789B;
	outline-offset: 4px;
}

/* Someone who asked for less motion still gets the colour, just not the fade. */
@media (prefers-reduced-motion: reduce) {
	.s4v-logo-card img {
		transition: none;
	}
}

/* Newsletter CTA: centre label and chevron together. */
.s4v-newsletter-form .elementor-button-content-wrapper,
.s4v-newsletter-form .elementor-button {
	display: flex;
	align-items: center;
	justify-content: center;
}

.s4v-newsletter-form .elementor-button-text {
	display: inline-flex;
	align-items: center;
	flex-grow: 0;
}

/* ------------------------------------------------------------------
   Hero carousel navigation
   One 118x118 frosted circle holding both chevrons.

   The circle is drawn in CSS, not from Ellipse 1.svg: that file carries its
   frost as a foreignObject with backdrop-filter, and foreignObject is ignored
   when an SVG is used as a CSS background-image - so the export could only
   ever render as a flat disc. backdrop-filter here blurs the artwork behind
   it for real, using Figma's own 7.5px radius.

   The chevrons are drawn with borders too. The exported chevron is the chunky
   CTA glyph; the design's are thin strokes.

   Elementor renders prev/next as DIRECT CHILDREN of the widget wrapper
   (siblings of .swiper), hence the child combinator and the specificity
   needed to beat e-swiper.css.
   ------------------------------------------------------------------ */
.s4v-hero-carousel {
	position: relative;
}

.s4v-hero-carousel::after {
	content: "";
	position: absolute;
	z-index: 2;
	bottom: 160px;
	right: 225px;
	width: 118px;
	height: 118px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.28);
	-webkit-backdrop-filter: blur(7.5px);
	backdrop-filter: blur(7.5px);
	pointer-events: none;
}

.s4v-hero-carousel.elementor-element.elementor-widget > .elementor-swiper-button {
	position: absolute;
	top: auto;
	bottom: 160px;
	transform: none;
	width: 59px;
	height: 118px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	z-index: 3;
}

/* the exported glyph is the chunky CTA chevron; draw a thin one instead */
.s4v-hero-carousel.elementor-element.elementor-widget > .elementor-swiper-button svg,
.s4v-hero-carousel.elementor-element.elementor-widget > .elementor-swiper-button i {
	display: none;
}

.s4v-hero-carousel.elementor-element.elementor-widget > .elementor-swiper-button::before {
	content: "";
	width: 13px;
	height: 13px;
	border-right: 2px solid #FFFFFF;
	border-bottom: 2px solid #FFFFFF;
	border-radius: 1px;
	transition: opacity .2s ease;
}

.s4v-hero-carousel.elementor-element.elementor-widget > .elementor-swiper-button-next::before {
	transform: rotate(-45deg);
	margin-right: 6px;
}

.s4v-hero-carousel.elementor-element.elementor-widget > .elementor-swiper-button-prev::before {
	transform: rotate(135deg);
	margin-left: 6px;
}

.s4v-hero-carousel.elementor-element.elementor-widget > .elementor-swiper-button:hover::before {
	opacity: .7;
}

.s4v-hero-carousel.elementor-element.elementor-widget > .elementor-swiper-button-prev {
	left: auto;
	right: 284px;
}

.s4v-hero-carousel.elementor-element.elementor-widget > .elementor-swiper-button-next {
	left: auto;
	right: 225px;
}

@media (max-width: 1220px) {
	.s4v-hero-carousel::after,
	.s4v-hero-carousel.elementor-element.elementor-widget > .elementor-swiper-button-next { right: 20px; }
	.s4v-hero-carousel.elementor-element.elementor-widget > .elementor-swiper-button-prev { right: 79px; }
}

/* ------------------------------------------------------------------
   Column rules
   Frame 168 is the real asset (1920x722) - lines at ~333px with softened
   ends - so it is used directly rather than approximated with a gradient.
   Stretched to the section height: vertical lines are unaffected by a
   vertical stretch, and the fade stretches with them.
   Applied as a background layer, so nothing inside gains a positioning
   context it did not have.
   ------------------------------------------------------------------ */
.s4v-colgrid {
	background-image: url("../../uploads/2026/09/s4v-ab-frame168.png");
	background-size: 100% 100%;
	background-position: center top;
	background-repeat: no-repeat;
}

/* ------------------------------------------------------------------

/* Chip row hugs its content; chips never wrap mid-label. */
.s4v-chiprow {
	width: max-content;
	max-width: 100%;
	margin-inline: auto;
}

.s4v-chiprow .elementor-heading-title { white-space: nowrap; }
.s4v-chiprow > .e-con { width: auto !important; flex: 0 0 auto; }

/* Card icons keep a 98px minimum height regardless of their canvas. */
.s4v-card-icon img {
	min-height: 98px;
	height: auto;
	object-fit: contain;
}

/* ------------------------------------------------------------------
   Text selection
   Groww sets ::selection{background-color: var(--g5-color-accent)} - the
   demo pink. Overridden here with the brand cyan; qualified with html so
   it outranks the theme's bare ::selection regardless of load order.
   ------------------------------------------------------------------ */

/* ------------------------------------------------------------------
   Text selection — split, deliberately
   These MUST be separate rules. In a comma-separated list, one selector the
   browser does not recognise invalidates the WHOLE rule: Chrome drops
   `html ::selection, html ::-moz-selection {...}` entirely because of the
   -moz- half. That is why the previous version silently did nothing.
   ------------------------------------------------------------------ */
html ::selection {
	background-color: #00D1FF;
	color: #0F1E3D;
}

html ::-moz-selection {
	background-color: #00D1FF;
	color: #0F1E3D;
}

/* Pill radius belongs on the class, not per-widget, so every pill matches
   the homepage without needing the setting repeated on each one. */
.s4v-pill {
	border-radius: 40px;
	overflow: hidden;
}

/* ------------------------------------------------------------------
   Partner list — invisible scroll, faded tail
   Scrollbar hidden on every engine (it still scrolls), and the column is
   masked so the last card fades out rather than being cut by a hard edge.
   ------------------------------------------------------------------ */
.s4v-partner-scroll {
	max-height: 560px;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding-right: 0;
	scrollbar-width: none;          /* Firefox */
	-ms-overflow-style: none;       /* legacy Edge */
	-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 80%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 0%, #000 80%, transparent 100%);
}

.s4v-partner-scroll::-webkit-scrollbar {
	width: 0;
	height: 0;
	display: none;
}

/* the design's partner boxes are flat */
.s4v-partner-scroll .e-con {
	box-shadow: none;
}

/* ------------------------------------------------------------------
   News archive (large-image list)
   The featured image sits in an inline-block anchor
   (.g5core__entry-thumbnail) that shrink-wraps the file's natural size, so
   a 360px source rendered at 360px inside a 1170px column. Block + 100%
   makes it span the column; the aspect ratio matches the design's banner
   crop so a 4:3 source is cropped rather than stretched tall.
   ------------------------------------------------------------------ */
.g5blog__post-large-image .g5core__entry-thumbnail {
	display: block;
	width: 100%;
}

.g5blog__post-large-image .g5core__entry-thumbnail img {
	width: 100%;
	height: 100%;
	aspect-ratio: 21 / 9;
	object-fit: cover;
	border-radius: 14px;
	display: block;
}

/* Read More: brand cyan, not the theme's demo gradient */
.g5blog__post-large-image .btn,
.g5blog__post-large-image .g5core-button,
.g5blog__post-large-image a.g5blog__readmore,
.g5blog__post-large-image .g5blog__post-readmore a {
	background-image: none !important;
	background-color: #00D1FF;
	color: #0F1E3D;
	border-color: #00D1FF;
	border-radius: 10px;
}

.g5blog__post-large-image .btn:hover,
.g5blog__post-large-image .g5core-button:hover,
.g5blog__post-large-image a.g5blog__readmore:hover {
	background-color: #1FC0E8;
	color: #0F1E3D;
}

/* ---------------------------------------------------------------------------
   Contact page — info columns + Contact Form 7
   --------------------------------------------------------------------------- */

.s4v-contact-top .elementor-widget-heading + .e-con {
	max-width: 1060px;
}

.s4v-contact-top .elementor-widget-text-editor p {
	margin: 0 0 6px;
}

.s4v-contact-top .elementor-widget-text-editor p:last-child {
	margin-bottom: 0;
}

/* Placeholder values the client still has to supply read as regular copy */
.s4v-contact-top .elementor-widget-text-editor em {
	font-style: normal;
}

/* Contact Form 7 ---------------------------------------------------------- */

.s4v-cf7 {
	width: 100%;
	max-width: 1060px;
}

.s4v-cf7-row {
	display: flex;
	gap: 20px;
}

.s4v-cf7-row > span.wpcf7-form-control-wrap {
	flex: 1 1 0;
	min-width: 0;
}

.s4v-cf7 .wpcf7-form-control-wrap {
	display: block;
	margin-bottom: 20px;
}

.s4v-cf7 input[type="text"],
.s4v-cf7 input[type="email"],
.s4v-cf7 textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 17px 22px;
	border: 1px solid #E3E8EF;
	border-radius: 10px;
	background-color: #FFFFFF;
	font-family: "IBM Plex Sans", sans-serif;
	font-size: 15px;
	line-height: 1.6;
	color: #0F1E3D;
	transition: border-color .18s ease, box-shadow .18s ease;
}

.s4v-cf7 textarea {
	min-height: 170px;
	resize: vertical;
}

.s4v-cf7 input::placeholder,
.s4v-cf7 textarea::placeholder {
	color: #93A0B4;
	opacity: 1;
}

.s4v-cf7 input:focus,
.s4v-cf7 textarea:focus {
	outline: none;
	border-color: #00D1FF;
	box-shadow: 0 0 0 3px rgba(0, 209, 255, .16);
}

.s4v-cf7 input[type="submit"] {
	display: inline-block;
	margin-top: 4px;
	padding: 16px 44px;
	border: 0;
	border-radius: 999px;
	background-color: #00D1FF;
	font-family: "IBM Plex Sans", sans-serif;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: .3px;
	color: #0F1E3D;
	cursor: pointer;
	transition: background-color .18s ease;
}

.s4v-cf7 input[type="submit"]:hover {
	background-color: #1FC0E8;
}

.s4v-cf7 .wpcf7-not-valid-tip {
	margin-top: 6px;
	font-family: "IBM Plex Sans", sans-serif;
	font-size: 13px;
	color: #D63638;
}

.s4v-cf7 .wpcf7-response-output {
	margin: 22px 0 0;
	padding: 14px 20px;
	border-radius: 10px;
	font-family: "IBM Plex Sans", sans-serif;
	font-size: 14px;
}

@media (max-width: 767px) {
	.s4v-cf7-row {
		display: block;
	}
}

/* Contact: icon tile must not shrink as a flex item */
.s4v-ct-icon {
	flex: 0 0 40px;
	width: 40px;
	min-width: 40px;
	height: 40px;
}

/* CF7 wraps each row's fields in a <p>; that <p> is the real flex row */
.s4v-cf7-row > p {
	display: flex;
	gap: 20px;
	margin: 0;
}

.s4v-cf7-row > p > span.wpcf7-form-control-wrap {
	flex: 1 1 0;
	min-width: 0;
}

.s4v-cf7-full > p {
	margin: 0;
}

.s4v-cf7 form > p:last-of-type {
	margin: 0;
}

/* ---------------------------------------------------------------------------
   Contact form corrections — supersede the first pass above
   --------------------------------------------------------------------------- */

/* The <p> that wpautop inserts is the flex row, so .s4v-cf7-row must stay a
   plain block; as a flex container it made that <p> a shrink-to-fit item. */
.s4v-cf7-row {
	display: block;
}

/* Fill the Elementor container, matching the textarea width */
.s4v-cf7 {
	max-width: none;
}

.s4v-cf7 .wpcf7-form-control-wrap {
	margin-bottom: 0;
}

.s4v-cf7-row > p,
.s4v-cf7-full > p {
	margin: 0 0 20px;
}

/* Field padding, measured against the design */
.s4v-cf7 input[type="text"],
.s4v-cf7 input[type="email"],
.s4v-cf7 textarea {
	padding: 12px 24px;
	font-size: 16px;
}

.s4v-cf7 input::placeholder,
.s4v-cf7 textarea::placeholder {
	color: #8A97AB;
}

/* Groww paints buttons with a gradient background-image, which covers any
   background-color. It has to be cleared before the brand cyan shows. */
.s4v-cf7 input[type="submit"],
.s4v-cf7 input[type="submit"]:hover,
.s4v-cf7 input[type="submit"]:focus {
	background-image: none;
	background-color: #00D1FF;
	color: #0F1E3D;
	box-shadow: none;
	text-shadow: none;
}

.s4v-cf7 input[type="submit"]:hover {
	background-color: #1FC0E8;
}

.s4v-cf7 input[type="submit"] {
	margin-top: 10px;
	padding: 18px 52px;
	font-size: 16px;
}

.s4v-cf7 .wpcf7-spinner {
	vertical-align: middle;
}

/* The three glyphs have different native aspects (pin 28x35, phone/clock
   40x40), so sizing by width alone made the pin taller. Fit each into the
   same 20x20 box instead. */
.s4v-ct-icon img,
.s4v-ct-icon .elementor-widget-image img {
	width: 20px;
	height: 20px;
	max-width: 20px;
	object-fit: contain;
}

/* Groww pins inputs to height:48px with border-box, which swallows the padding
   and clips the text. Let them size to their own content. */
.s4v-cf7 input[type="text"],
.s4v-cf7 input[type="email"] {
	height: auto;
}

/* ---------------------------------------------------------------------------
   S4V Hero Carousel widget
   Replaces the Nested Carousel. The artwork used to be duplicated inside every
   slide container; it is now rendered once per slide from a single source, so
   the layers below reproduce what those per-widget _offset_* controls did.
   --------------------------------------------------------------------------- */

.elementor-widget-s4v-hero-carousel {
	width: 100%;
}

.s4v-hero-slide {
	position: relative;
	min-height: 955px;
	overflow: hidden;
}

/* Artwork stage - 28% wide, locked to the artwork's own 668x767 proportions
   because every layer inside is offset in %. */
.s4v-hero-slide .s4v-hero-stage {
	position: absolute;
	top: 118px;
	right: 48px;
	width: 33%;
	aspect-ratio: 668 / 767;
	min-height: 0;
	pointer-events: none;
}

.s4v-hero-decor {
	position: absolute;
	height: auto;
	max-width: none;
}

.s4v-hero-decor--arcs   { left: 1.2%;  top: 2.3%;  width: 28%; }
.s4v-hero-decor--circle { left: 53.1%; top: 14.7%; width: 37.3%; }
.s4v-hero-decor--mesh   { left: 10.2%; top: 13.7%; width: 79.6%; }

/* Static by design - the dot grid does not take part in the parallax. */
.s4v-hero-dots {
	position: absolute;
	right: 48px;
	bottom: 0;
	width: 87px;
	height: auto;
	pointer-events: none;
}

.s4v-hero-copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 34px;
	padding: 0 20px 60px;
	position: relative;
	z-index: 2;
}

.s4v-hero-headline {
	margin: 296px 0 0;
	font-family: "Space Grotesk", sans-serif;
	font-weight: 700;
	font-size: 82px;
	line-height: 1.05;
	letter-spacing: -1.64px;
	color: #00D1FF;
	text-align: left;
}

.s4v-hero-body {
	max-width: 560px;
	font-family: "IBM Plex Sans", sans-serif;
	font-size: 18px;
	line-height: 1.6;
	color: #FFFFFF;
}

.s4v-hero-body p { margin: 0 0 12px; }
.s4v-hero-body p:last-child { margin-bottom: 0; }

/* The CTA was an Elementor button widget; as a plain anchor it needs the same
   fill, radius and chevron spelled out. */
.s4v-hero-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 24px;
	border-radius: 10px;
	background-color: #00D1FF;
	font-family: "Space Grotesk", sans-serif;
	font-weight: 500;
	font-size: 15px;
	line-height: 1;
	color: #0F1E3D;
	text-decoration: none;
	transition: background-color .18s ease;
}

.s4v-hero-cta:hover,
.s4v-hero-cta:focus {
	background-color: #1FC0E8;
	color: #0F1E3D;
}

.s4v-hero-cta::after {
	content: "";
	width: 16px;
	height: 16px;
	background: currentColor;
	-webkit-mask: url("../../uploads/2026/09/s4v-chevron.svg") no-repeat center / contain;
	mask: url("../../uploads/2026/09/s4v-chevron.svg") no-repeat center / contain;
}

/* Arrows and dots - the original rules required .elementor-element on the same
   node; in the new markup the buttons are direct children of the plain
   wrapper, so match on that instead. */
.s4v-hero-carousel > .elementor-swiper-button {
	position: absolute;
	top: auto;
	bottom: 160px;
	transform: none;
	width: 59px;
	height: 118px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	cursor: pointer;
	z-index: 3;
}

.s4v-hero-carousel > .elementor-swiper-button::before {
	content: "";
	width: 13px;
	height: 13px;
	border-right: 2px solid #FFFFFF;
	border-bottom: 2px solid #FFFFFF;
	border-radius: 1px;
	transition: opacity .2s ease;
}

.s4v-hero-carousel > .elementor-swiper-button-prev { right: 284px; }
.s4v-hero-carousel > .elementor-swiper-button-next { right: 225px; }
.s4v-hero-carousel > .elementor-swiper-button-prev::before { transform: rotate(135deg); margin-left: 4px; }
.s4v-hero-carousel > .elementor-swiper-button-next::before { transform: rotate(-45deg); margin-right: 4px; }

.s4v-hero-carousel > .elementor-swiper-button:hover::before { opacity: .7; }

.s4v-hero-carousel .swiper-pagination {
	bottom: 90px;
	z-index: 3;
}

/* ---- Responsive ---------------------------------------------------------- */

@media (max-width: 1366px) {
	.s4v-hero-headline { font-size: 64px; letter-spacing: -1.28px; }
}

@media (max-width: 1024px) {
	.s4v-hero-slide { min-height: 720px; }
	.s4v-hero-slide .s4v-hero-stage { top: 80px; right: 20px; width: 45%; opacity: .45; }
	.s4v-hero-headline { margin-top: 170px; font-size: 48px; letter-spacing: -0.96px; }
	.s4v-hero-dots { width: 64px; right: 20px; }
	.s4v-hero-carousel > .elementor-swiper-button { bottom: 96px; }
	.s4v-hero-carousel > .elementor-swiper-button-prev { right: 79px; }
	.s4v-hero-carousel > .elementor-swiper-button-next { right: 20px; }
	.s4v-hero-carousel .swiper-pagination { bottom: 48px; }
}

@media (max-width: 767px) {
	.s4v-hero-slide { min-height: 580px; }
	.s4v-hero-slide .s4v-hero-stage { width: 70%; }
	.s4v-hero-copy { padding: 0 20px 40px; gap: 24px; }
	.s4v-hero-headline { margin-top: 140px; font-size: 32px; letter-spacing: -0.64px; }
	.s4v-hero-body { font-size: 16px; }
	.s4v-hero-dots { width: 44px; }
	.s4v-hero-carousel > .elementor-swiper-button { bottom: 64px; height: 80px; }
}

/* Elementor's e-swiper.css positions the buttons with
   `.elementor-element .swiper ~ .elementor-swiper-button-next { right: 10px }`
   - three classes, loaded after the child theme, so it beat the rules above and
   put the arrows back on the sides. Four classes takes it back. */
.elementor-element.elementor-widget-s4v-hero-carousel .s4v-hero-carousel > .elementor-swiper-button {
	position: absolute;
	top: auto;
	left: auto;
	bottom: 160px;
	transform: none;
	width: 59px;
	height: 118px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	color: transparent;
	font-size: 0;
	cursor: pointer;
	z-index: 3;
}

.elementor-element.elementor-widget-s4v-hero-carousel .s4v-hero-carousel > .elementor-swiper-button-prev { right: 284px; }
.elementor-element.elementor-widget-s4v-hero-carousel .s4v-hero-carousel > .elementor-swiper-button-next { right: 225px; }

.elementor-element.elementor-widget-s4v-hero-carousel .s4v-hero-carousel > .elementor-swiper-button::before {
	content: "";
	width: 13px;
	height: 13px;
	border-right: 2px solid #FFFFFF;
	border-bottom: 2px solid #FFFFFF;
	border-radius: 1px;
	transition: opacity .2s ease;
}

.elementor-element.elementor-widget-s4v-hero-carousel .s4v-hero-carousel > .elementor-swiper-button-prev::before {
	transform: rotate(135deg);
	margin-left: 4px;
}

.elementor-element.elementor-widget-s4v-hero-carousel .s4v-hero-carousel > .elementor-swiper-button-next::before {
	transform: rotate(-45deg);
	margin-right: 4px;
}

.elementor-element.elementor-widget-s4v-hero-carousel .s4v-hero-carousel > .elementor-swiper-button:hover::before {
	opacity: .7;
}

@media (max-width: 1024px) {
	.elementor-element.elementor-widget-s4v-hero-carousel .s4v-hero-carousel > .elementor-swiper-button { bottom: 96px; }
	.elementor-element.elementor-widget-s4v-hero-carousel .s4v-hero-carousel > .elementor-swiper-button-prev { right: 79px; }
	.elementor-element.elementor-widget-s4v-hero-carousel .s4v-hero-carousel > .elementor-swiper-button-next { right: 20px; }
}

@media (max-width: 767px) {
	.elementor-element.elementor-widget-s4v-hero-carousel .s4v-hero-carousel > .elementor-swiper-button { bottom: 64px; height: 80px; }
}

/* The old hero copy lived inside a boxed Elementor container, so it inherited
   the 1170px site grid. The widget renders full-bleed, so put the copy back on
   that grid - tracking Elementor's own container width rather than a literal,
   and only falling back to a gutter once the viewport is narrower than the box. */
.elementor-widget-s4v-hero-carousel .s4v-hero-copy {
	width: 100%;
	max-width: var(--container-max-width, 1170px);
	margin-inline: auto;
	padding: 0 0 60px;
}

@media (max-width: 1210px) {
	.elementor-widget-s4v-hero-carousel .s4v-hero-copy {
		padding-inline: 20px;
	}
}

@media (max-width: 767px) {
	.elementor-widget-s4v-hero-carousel .s4v-hero-copy {
		padding-bottom: 40px;
	}
}

/* ---------------------------------------------------------------------------
   Hero entrance animations
   The theme's .groww-* classes only set an animation-name; .animated adds the
   duration. Elements stay hidden until the JS adds .animated, so a slide that
   has not played yet never flashes its final state first.
   --------------------------------------------------------------------------- */
.s4v-anim {
	opacity: 0;
}

.s4v-anim.animated {
	opacity: 1;
	animation-duration: 1s;
	animation-fill-mode: both;
}

/* The artwork layers are transformed by the parallax on every frame, so they
   must not also carry a CSS transition - the two fight and the motion stutters. */
.s4v-hero-decor {
	will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
	.s4v-anim,
	.s4v-anim.animated {
		opacity: 1;
		animation: none;
	}

	.s4v-hero-decor {
		transform: none !important;
	}
}

/* The decor layer is now a positioned wrapper (it carries the entrance
   animation) with the image inside it (it carries the parallax transform).
   Keeping them on separate nodes is what stops the animation's final
   `transform: none` from cancelling the parallax. */
.s4v-hero-decor {
	display: block;
}

.s4v-hero-decor > img {
	display: block;
	width: 100%;
	height: auto;
	max-width: none;
	will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
	.s4v-hero-decor > img {
		transform: none !important;
	}
}
/* The column rules used to stop dead at the section edge, which read as a hard
   seam against the neighbouring section (and the asset's own softened ends were
   lost to the 100% stretch). Fade them in and out instead. */
.s4v-colgrid {
	-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%);
	mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%);
}

/* The theme's title block now supplies the breadcrumb and the page heading, so
   the content below it no longer needs to clear a heading of its own. */
.s4v-contact-top {
	padding-top: 20px;
}

/* ---------------------------------------------------------------------------
   Page title - S4V / Display / D1
   Space Grotesk 700, 48px, 110% line height, -1.5% tracking, centred.
   -1.5% of 48px = -0.72px. The theme ships Plus Jakarta Sans 800 / 60px here.
   --------------------------------------------------------------------------- */
.page-title-wrap .page-main-title {
	font-family: "Space Grotesk", sans-serif;
	font-weight: 700;
	font-size: 48px;
	line-height: 1.1;
	letter-spacing: -0.72px;
	color: #16233A;
	text-align: center;
	margin: 0;
}

.page-title-wrap .page-sub-title {
	font-family: "IBM Plex Sans", sans-serif;
	font-size: 18px;
	line-height: 1.6;
	font-weight: 400;
	color: #4A77AC;
	text-align: center;
}

@media (max-width: 1024px) {
	.page-title-wrap .page-main-title {
		font-size: 40px;
		letter-spacing: -0.6px;
	}
}

@media (max-width: 767px) {
	.page-title-wrap .page-main-title {
		font-size: 32px;
		letter-spacing: -0.48px;
	}
}

/* ---------------------------------------------------------------------------
   Contact form - match the design
   Fields are a solid light fill with no border (the earlier pass had white
   with a hairline border), the Submit is a rounded rectangle rather than a
   pill, and the column gap is proportionally wider.
   --------------------------------------------------------------------------- */
.s4v-cf7 input[type="text"],
.s4v-cf7 input[type="email"],
.s4v-cf7 textarea {
	background-color: #F3F4F7;
	border: 1px solid transparent;
	border-radius: 10px;
}

.s4v-cf7 input[type="text"]:focus,
.s4v-cf7 input[type="email"]:focus,
.s4v-cf7 textarea:focus {
	background-color: #FFFFFF;
	border-color: #00D1FF;
}

.s4v-cf7 textarea {
	min-height: 180px;
}

.s4v-cf7-row > p {
	gap: 44px;
}

/* Rounded rectangle, matching the field radius - not the pill from the first pass. */
.s4v-cf7 input[type="submit"] {
	border-radius: 10px;
	padding: 16px 34px;
	font-size: 15px;
}

/* The theme gives buttons line-height:48px, which stacked with the padding to
   make an 80px-tall Submit; the design's is wider than it is tall. */
.s4v-cf7 input[type="submit"] {
	line-height: 1;
	padding: 15px 5px;
	height: 50px;
	width: 100px;
}

/* The textarea carries rows="10", which outweighs min-height. */
.s4v-cf7 textarea {
	height: 180px;
	min-height: 0;
}

/* ---------------------------------------------------------------------------
   About - icon cards
   The description sat under the icon; the design aligns it under the title.
   The indent is the icon row's own geometry: 15px row padding + 22px icon
   + 10px gap = 47px.
   --------------------------------------------------------------------------- */
.s4v-icon-cards .elementor-widget-text-editor {
	padding-left: 47px;
}

.s4v-icon-cards .elementor-widget-text-editor,
.s4v-icon-cards .elementor-widget-text-editor p {
	font-size: 18px;
	line-height: 1.55;
	color: #0B0F1A;
}

@media (max-width: 767px) {
	.s4v-icon-cards .elementor-widget-text-editor {
		padding-left: 0;
	}
}

/* ---------------------------------------------------------------------------
   About - partners
   The section sits between two white sections, so its flat #F4FBFE fill left a
   hard seam at both edges. A gradient over the background-color fades it into
   white top and bottom. Fixed 140px ramps, so the fade reads the same however
   tall the section grows.
   --------------------------------------------------------------------------- */
.s4v-about-partners {
	background-image: linear-gradient(
		to bottom,
		#FFFFFF 0,
		#F4FBFE 140px,
		#F4FBFE calc(100% - 140px),
		#FFFFFF 100%
	);
}

/* Two full cards (377 + 18 gap + 311 = 706) plus part of the third, so there is
   a visible cue that the list scrolls. */
.s4v-partner-scroll {
	max-height: 800px;
}

/* ---------------------------------------------------------------------------
   Footer - S4V / Display / D2
   Space Grotesk 700, 32px, 115% line height, -1% tracking.
   -1% of 32px = -0.32px. The theme ships Plus Jakarta Sans 700 / 34px here.
   --------------------------------------------------------------------------- */
.s4v-footer-title .elementor-heading-title,
.s4v-footer-title.elementor-widget-heading .elementor-heading-title {
	font-family: "Space Grotesk", sans-serif;
	font-weight: 700;
	font-size: 32px;
	line-height: 1.15;
	letter-spacing: -0.32px;
}

/* The theme's heading rule (line-height 1.2) outranked the D2 block above,
   leaving 38.4px where the spec asks for 36.8px. */
.s4v-footer-grid .s4v-footer-title .elementor-heading-title,
.elementor-widget.s4v-footer-title .elementor-heading-title {
	line-height: 1.15;
}

/* Newsletter input: 378 x 49 per the design. */
.s4v-footer-form,
.s4v-footer-form input[type="email"],
.s4v-footer-form input[type="text"] {
	width: 378px;
	max-width: 100%;
}

.s4v-footer-form input[type="email"],
.s4v-footer-form input[type="text"] {
	height: 49px;
	padding: 0 54px 0 20px;
}

/* Keep the arrow inside the shorter field */
.s4v-footer-form button,
.s4v-footer-form .elementor-button,
.s4v-footer-form input[type="submit"] {
	width: 37px;
	height: 37px;
}

/* The design's newsletter column is 378px wide; the theme's was 356, which
   capped the input below its spec. */
/* The column's 408px width (378px of content + 2 x 15px padding) is set in the
   widget's own settings - Elementor's generated per-element CSS outranks
   anything declared here, so a rule in this file would never have applied. */
.s4v-footer-newsletter {
	max-width: 100%;
}

/* All footer copy is white. */
.s4v-footer-grid,
.s4v-footer-grid p,
.s4v-footer-grid li,
.s4v-footer-grid a,
.s4v-footer-grid .elementor-heading-title,
.s4v-footer-grid .elementor-widget-text-editor {
	color: #FFFFFF;
}

.s4v-footer-grid a:hover {
	color: #00D1FF;
}

/* Quick links: one column, 32px from line to line (14px Label/Default + 18px)
   per the Figma update. The spacing used to be inline on each <p>, which the
   text editor can drop when someone edits the list. */
.s4v-footer-grid .s4v-footer-links p {
	margin: 0 0 18px;
}

.s4v-footer-grid .s4v-footer-links p:last-child {
	margin-bottom: 0;
}

/* The theme gives every <p> a 19.2px bottom margin, which pushed the ERA badge
   away from the disclaimer. */
.s4v-footer-grid .s4v-footer-disclaimer p {
	margin: 0;
}

/* ---------------------------------------------------------------------------
   Steps - hover
   Hovering a step turns its number circle the site orange (#F58220, the same
   value the "Learn More" links use). Elementor's generated per-element CSS
   sets the cyan fill at three classes, so this needs four to win.
   --------------------------------------------------------------------------- */
.s4v-step .s4v-step-number {
	transition: background-color .2s ease;
}

.elementor-element.s4v-step:hover .s4v-step-number {
	background-color: #F58220;
}

/* Back-to-top: brand cyan on hover/focus. */
.g5core-back-to-top:focus,
.g5core-back-to-top:hover {
	text-decoration: none;
	color: var(--g5-color-accent-foreground);
	background-color: #00d1ff;
}

/* ---------------------------------------------------------------------------
   Goals marquee
   Matches the Groww demo's "What makes Groww different" row: a full-bleed track
   of flat cards scrolling continuously. Measured off that demo - 400px slide
   pitch (370px card + 30px gap) drifting at ~27.5px/s. One set is 5 x 400 =
   2000px, and the animation runs to -50% of the doubled track, so 2000px in
   ~73s reproduces that speed.
   --------------------------------------------------------------------------- */
.elementor-element.s4v-marquee {
	width: 100vw;
	max-width: 100vw;
	margin-left: 0;
	padding-left: 0;
	padding-right: 0;
	overflow: hidden;
	display: block;
	/* overflow:hidden clips the 10px hover lift and its shadow, so the row
	   carries vertical headroom and pulls it back with negative margins -
	   the demo does the same thing with 30px of slack inside its slide. */
	padding-top: 40px;
	padding-bottom: 40px;
	margin-top: -40px;
	margin-bottom: -40px;
}

.s4v-marquee-track {
	display: flex;
	gap: 30px;
	width: max-content;
	animation: s4v-marquee-scroll 73s linear infinite;
	will-change: transform;
}

.s4v-marquee:hover .s4v-marquee-track,
.s4v-marquee:focus-within .s4v-marquee-track {
	animation-play-state: paused;
}

@keyframes s4v-marquee-scroll {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}

/* Flat cards, as in the demo - no shadow, 20px radius, 30px padding */
.s4v-marquee-track > .e-con {
	flex: 0 0 370px;
	width: 370px;
	max-width: 370px;
	margin: 0;
	border-radius: 20px;
	padding: 30px;
	box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
	.s4v-marquee-track {
		animation: none;
	}

	.elementor-element.s4v-marquee {
		overflow-x: auto;
	}
}

@media (max-width: 767px) {
	.s4v-marquee-track > .e-con {
		flex-basis: 300px;
		width: 300px;
		max-width: 300px;
	}
}

/* Marquee card body sits under the title, not under the icon. The indent is
   icon inset (15) + icon width + gap (10), so it is expressed as a variable
   rather than a magic number - an icon sized differently only needs its own
   --s4v-icon-w, not a new rule. */
.s4v-marquee-track > .e-con {
	--s4v-icon-w: 26px;
}

.s4v-marquee-track .elementor-widget-text-editor {
	padding-left: calc(15px + var(--s4v-icon-w) + 10px);
}

/* "Increase reach" uses a 35px icon */
.s4v-marquee-track > .e-con:has(.elementor-element-7a200049) {
	--s4v-icon-w: 35px;
}

@media (max-width: 767px) {
	.s4v-marquee-track .elementor-widget-text-editor {
		padding-left: 0;
	}
}

/* Card hover, matching the demo's boxed-slider pattern:
   transform + box-shadow over 0.4s ease-in-out, lifting 10px. */
.s4v-marquee-track > .e-con {
	transition: transform .4s ease-in-out, box-shadow .4s ease-in-out;
}

.s4v-marquee-track > .e-con:hover {
	transform: translate3d(0, -10px, 0);
	/* the /startup demo overrides the generic 0 20px 24px with this */
	box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.1);
}

@media (prefers-reduced-motion: reduce) {
	.s4v-marquee-track > .e-con,
	.s4v-marquee-track > .e-con:hover {
		transition: none;
		transform: none;
	}
}

/* ---------------------------------------------------------------------------
   CTA hover - site orange with white text
   Elementor's generated per-element rule sets the resting fill at three
   classes, so these need four to win. background-image is cleared because
   Groww paints buttons with a gradient that would sit over the colour.
   --------------------------------------------------------------------------- */
.elementor-element.s4v-cta .elementor-button,
a.s4v-hero-cta {
	transition: background-color .25s ease, color .25s ease,
	            transform .25s ease, box-shadow .25s ease;
}

.elementor-element.s4v-cta .elementor-button:hover,
.elementor-element.s4v-cta .elementor-button:focus,
a.s4v-hero-cta:hover,
a.s4v-hero-cta:focus {
	background-image: none;
	background-color: #F58220;
	color: #FFFFFF;
	transform: translateY(-2px);
	box-shadow: 0 12px 15px 0 rgba(245, 130, 32, .28);
}

/* the chevron is drawn from currentColor, so it turns white with the label */
.elementor-element.s4v-cta .elementor-button:hover .elementor-button-icon svg {
	fill: currentColor;
}

@media (prefers-reduced-motion: reduce) {
	.elementor-element.s4v-cta .elementor-button,
	a.s4v-hero-cta,
	.elementor-element.s4v-cta .elementor-button:hover,
	a.s4v-hero-cta:hover {
		transition: none;
		transform: none;
	}
}

/* ---------------------------------------------------------------------------
   Blog listing excerpt - S4V / Body / Large
   IBM Plex Sans 400 / 18px / 160%. The listing is rendered by the theme, not
   Elementor, so it cannot be bound to the kit token - these values mirror it.
   Theme default here is Plus Jakarta Sans 500 / 16px / #777.
   --------------------------------------------------------------------------- */
.g5blog__post-excerpt,
.g5blog__post-excerpt p {
	font-family: "IBM Plex Sans", sans-serif;
	font-weight: 400;
	font-size: 18px;
	line-height: 1.6;
	letter-spacing: normal;
	color: #0B0F1A;
}

/* ===========================================================================
   Mobile pass (<= 767px)
   =========================================================================== */

/* Bootstrap rows carry margin: 0 -15px expecting 15px of container padding.
   The theme zeroes that padding on small screens, so the row hangs 15px past
   the viewport on each side. Adding the padding back loses to the theme's own
   rule, so the negative margin is neutralised instead - the columns are
   full-width and stacked at this size, so the gutter is not doing anything. */
@media (max-width: 767px) {
	.wrapper-content .container > .row {
		margin-left: 0;
		margin-right: 0;
	}

	.wrapper-content .container > .row > [class*="col"] {
		padding-left: 0;
		padding-right: 0;
	}
}

/* The marquee used 100vw, which includes the scrollbar width - 15px wider than
   the visible area. 100% of its (full-bleed) parent is the honest measure. */
.elementor-element.s4v-marquee {
	width: 100%;
	max-width: 100%;
}

@media (max-width: 767px) {
	/* The step connectors join steps that sit side by side; stacked on a phone
	   they point at nothing. (The other decorations are placed for phones in
	   "Phone pass 3" below.) */
	img[src*="s4v-connector-"] {
		display: none;
	}

	/* Category / meta links in the news cards are 13px tall - too small to tap.
	   The markup is .ube-term-list li a; padding gives a ~44px target without
	   changing how they look. */
	.ube-term-list a,
	.ube-entry-meta a,
	.g5blog__post-meta a {
		display: inline-block;
		padding: 14px 0;
		line-height: 16px;
	}

}

/* --- Mobile menu: brand it -------------------------------------------------
   The theme ships a #222 panel with #ccc links in Plus Jakarta Sans. Bring it
   onto the site palette: navy panel, white IBM Plex Sans links, cyan on touch.
   --------------------------------------------------------------------------- */
#g5core_menu_mobile {
	background-color: #0F1E3D;
}

#g5core_menu_mobile a {
	font-family: "IBM Plex Sans", sans-serif;
	font-weight: 500;
	font-size: 16px;
	color: #FFFFFF;
}

#g5core_menu_mobile a:hover,
#g5core_menu_mobile a:focus,
#g5core_menu_mobile .current-menu-item > a {
	color: #00D1FF;
}

#g5core_menu_mobile .off-canvas-close,
#g5core_menu_mobile .off-canvas-close i {
	color: #FFFFFF;
}

@media (max-width: 767px) {
	/* Footer links sit at 14px (Label/Default), giving an 18px tap target.
	   Padding lifts them to ~44px without altering the type. */
	.s4v-footer-grid .elementor-widget-text-editor a,
	.s4v-footer-grid .g5core-social-share a,
	.s4v-footer-grid a[href^="mailto:"] {
		display: inline-block;
		padding: 13px 0;
		line-height: 18px;
	}

	/* Each link is already 44px tall from the padding above, so the gap
	   between them goes. */
	.s4v-footer-grid .s4v-footer-links p {
		margin: 0;
	}

	.s4v-footer-grid .g5core-socials a {
		min-width: 44px;
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	/* The icons are 30px white circles now; growing the circle to 44px would
	   change the design, so an invisible ring takes the tap target to 44px. */
	.s4v-footer-grid .elementor-social-icon {
		position: relative;
		overflow: visible;
	}

	.s4v-footer-grid .elementor-social-icon::after {
		content: "";
		position: absolute;
		inset: -7px;
	}
}

@media (max-width: 767px) {
	/* The partner list is a column flexbox with wrap + a max-height. Cards are
	   taller on a phone, so wrapping spilled them into extra columns off to the
	   right. No wrap = one column that scrolls, which is the intent. */
	.s4v-partner-scroll {
		flex-wrap: nowrap;
		max-height: 70vh;
	}

	/* About page artwork is positioned for a wide canvas and only bleeds here. */
	img[src*="s4v-ab-clip-path"],
	img[src*="s4v-ab-role-glow"],
	img[src*="s4v-ab-container-9"],
	img[src*="s4v-ab-container-10"],
	img[src*="s4v-ab-container-12"],
	img[src*="s4v-ab-group-2"],
	img[src*="s4v-ab-vector-3"],
	img[src*="s4v-ab-cta-glow"],
	img[src*="s4v-ab-group-21"] {
		display: none;
	}

	/* "Learn More" links are 20px tall; give them a real target. */
	.s4v-partner-scroll a,
	.elementor-widget-text-editor a[href] {
		display: inline-block;
		padding: 12px 0;
		line-height: 20px;
	}
}

@media (max-width: 767px) {
	/* The flex row is the <p> wpautop inserts, not .s4v-cf7-row itself - the
	   earlier mobile rule targeted the wrapper and left the fields side by
	   side at 131px each. */
	.s4v-cf7-row > p {
		display: block;
	}

	.s4v-cf7-row > p > span.wpcf7-form-control-wrap {
		display: block;
		margin-bottom: 20px;
	}

	.s4v-cf7 input[type="submit"] {
		width: 100%;
		max-width: 220px;
	}
}


/* ---------------------------------------------------------------------------
   CTA chevron
   s4v-chevron.svg carries fill="#0B0F1A" on its <path>, so a fill on the <svg>
   never reaches it - the arrow stayed dark on the orange hover. Target the
   path, and slide it on hover.
   --------------------------------------------------------------------------- */
.elementor-element.s4v-cta .elementor-button .elementor-button-icon {
	transition: transform .25s ease;
}

.elementor-element.s4v-cta .elementor-button .elementor-button-icon svg path {
	transition: fill .25s ease;
}

.elementor-element.s4v-cta .elementor-button:hover .elementor-button-icon svg path,
.elementor-element.s4v-cta .elementor-button:focus .elementor-button-icon svg path {
	fill: #FFFFFF;
}

.elementor-element.s4v-cta .elementor-button:hover .elementor-button-icon,
.elementor-element.s4v-cta .elementor-button:focus .elementor-button-icon {
	transform: translateX(5px);
}

/* the hero CTA draws its chevron from a mask, so currentColor already carries
   the white - it only needs the same slide */
a.s4v-hero-cta::after {
	transition: transform .25s ease;
}

a.s4v-hero-cta:hover::after,
a.s4v-hero-cta:focus::after {
	transform: translateX(5px);
}

@media (prefers-reduced-motion: reduce) {
	.elementor-element.s4v-cta .elementor-button:hover .elementor-button-icon,
	a.s4v-hero-cta:hover::after {
		transform: none;
	}
}

/* ===========================================================================
   Tablet pass (768 - 1024)
   =========================================================================== */

/* The Bootstrap row gutter problem is not mobile-specific: the container's
   padding is missing at every width below the boxed desktop layout, so the
   -15px row margin hangs over the edge at 1024 and 768 too. */
@media (max-width: 1024px) {
	.wrapper-content .container > .row {
		margin-left: 0;
		margin-right: 0;
	}

	.wrapper-content .container > .row > [class*="col"] {
		padding-left: 0;
		padding-right: 0;
	}

}

/* ===========================================================================
   Mobile hero + header corrections
   =========================================================================== */
@media (max-width: 767px) {
	/* NOTE: the mobile header colour is NOT set here. The theme already holds
	   the right values per header set - the home header carries the white logo
	   and a transparent background, inner pages carry s4v-logo-dark.png on
	   white. Forcing navy here broke the dark logo on every inner page. */


	/* With the arrows moved to bottom 64px, the frosted circle stayed at
	   bottom 160px and detached from them. 45px re-centres it on the pair. */
	.s4v-hero-carousel::after {
		bottom: 45px;
		right: 20px;
	}
}

/* ---------------------------------------------------------------------------
   Hero per-slide media
   Image / video / YouTube fill the whole slide. Only the decoration artwork
   keeps the small stage box on the right.
   --------------------------------------------------------------------------- */
.s4v-hero-slide {
	/* the media cover maths needs the slide height as a number */
	--s4v-hero-h: 955px;
}

.s4v-hero-media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	z-index: 0;
	pointer-events: none;
}

.elementor .s4v-hero-media img,
.elementor .s4v-hero-media video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border: 0;
}

/* Keeps the cyan headline readable over a photo or video. */
.s4v-hero-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to right,
		rgba(15, 30, 61, 0.88) 0%,
		rgba(15, 30, 61, 0.65) 45%,
		rgba(15, 30, 61, 0.25) 100%
	);
}

/* A YouTube iframe is always 16:9 and letterboxes itself inside any other
   shape, which is where the black bars came from. Growing it past the slide in
   both axes and centring it crops instead. The earlier attempt used vh/vw,
   which bear no relation to this box - hence the bars. */
/* `.elementor iframe { width: 100% }` in custom-frontend.css is the same
   specificity as a bare `.s4v-hero-media--youtube iframe` and loads later, so
   it won and the iframe stayed letterboxed. The .elementor prefix wins it. */
.elementor .s4v-hero-media--youtube iframe {
	/* custom-frontend.css also sets `max-width: 100%`, which clamped the iframe
	   back to the container no matter what width was asked for - proven by an
	   inline width:1698px still computing to 1425px until this was cleared. */
	max-width: none;
	max-height: none;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: max(100%, calc(var(--s4v-hero-h) * 16 / 9));
	height: max(100%, calc(100vw * 9 / 16));
	border: 0;
}

@media (max-width: 1024px) {
	.s4v-hero-slide { --s4v-hero-h: 720px; }
}

@media (max-width: 767px) {
	.s4v-hero-slide { --s4v-hero-h: 580px; }

	/* Media stays on mobile - unlike the decoration artwork it is the content,
	   and the scrim keeps the headline legible over it. */
	.s4v-hero-media::after {
		background: linear-gradient(
			to bottom,
			rgba(15, 30, 61, 0.80) 0%,
			rgba(15, 30, 61, 0.70) 100%
		);
	}
}

/* ---------------------------------------------------------------------------
   Hero cursor ball
   Groww's magic cursor: over the hero the mouse pointer becomes the frosted
   ball with both arrows. s4v-hero-carousel.js adds --ball only for a real
   mouse outside the editor, so touch screens and a failed script keep the
   static circle and arrow buttons above.
   --------------------------------------------------------------------------- */
.s4v-hero-carousel--ball,
.s4v-hero-carousel--ball .swiper {
	cursor: none;
}

.s4v-hero-carousel--ball a,
.s4v-hero-carousel--ball button,
.s4v-hero-carousel--ball [role="button"] {
	cursor: pointer;
}

/* The static circle and buttons give way to the ball. The buttons stay
   focusable, and a keyboard user tabbing onto one brings the pair back. */
.s4v-hero-carousel--ball::after {
	opacity: 0;
	transition: opacity .2s ease;
}

.elementor-element.elementor-widget-s4v-hero-carousel .s4v-hero-carousel--ball > .elementor-swiper-button {
	opacity: 0;
	pointer-events: none;
}

.s4v-hero-carousel--ball:has(> .elementor-swiper-button:focus-visible)::after,
.elementor-element.elementor-widget-s4v-hero-carousel .s4v-hero-carousel--ball:has(> .elementor-swiper-button:focus-visible) > .elementor-swiper-button {
	opacity: 1;
}

/* Same glass as the static circle, so the ball reads as that circle following
   the mouse. Size, timing and blur behaviour follow the theme's .ball-cursor. */
.s4v-hero-ball {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
	width: 118px;
	height: 118px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.28);
	-webkit-backdrop-filter: blur(7.5px);
	backdrop-filter: blur(7.5px);
	pointer-events: none;
	opacity: 0;
	transition: opacity .3s ease-in-out .1s;
	will-change: transform;
}

.s4v-hero-ball.is-visible {
	opacity: 1;
}

.s4v-hero-ball::before,
.s4v-hero-ball::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 13px;
	height: 13px;
	border-right: 2px solid #FFFFFF;
	border-bottom: 2px solid #FFFFFF;
	border-radius: 1px;
	transition: opacity .2s ease;
}

/* Centred where the chevrons sit inside the static circle. */
.s4v-hero-ball::before {
	left: 36px;
	transform: translate(-50%, -50%) rotate(135deg);
}

.s4v-hero-ball::after {
	right: 36px;
	transform: translate(50%, -50%) rotate(-45deg);
}

/* A click goes the way of the bright arrow. */
.s4v-hero-ball.is-next::before,
.s4v-hero-ball.is-prev::after,
.s4v-hero-ball.is-disabled.is-prev::before,
.s4v-hero-ball.is-disabled.is-next::after {
	opacity: .4;
}

/* ---------------------------------------------------------------------------
   News listing - tags row
   Figma: the post's type tag as a pill, then category | by author - date,
   40px above the title. Each type tag's colour is set in Posts -> Tags
   (inc/news-types.php) and arrives as --s4v-pill-bg / --s4v-pill-fg; the
   fallbacks are the News colours from the design. The theme's #9B9B9B meta grey is 2.8:1 on white
   and the client asked for contrast on the tags, so the grey text takes the
   Body token (#4A5568, 7.5:1).
   --------------------------------------------------------------------------- */
.g5blog__post-large-image .g5blog__post-featured {
	margin-bottom: 17px;
}

.g5blog__post-large-image .g5blog__post-meta {
	align-items: center;
	margin-bottom: 40px;
	font-family: "IBM Plex Sans", sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 1;
	color: #4A5568;
}

.g5blog__post-large-image .g5blog__post-meta li,
.g5blog__post-large-image .g5blog__post-meta li a:not(.s4v-news-pill) {
	font-family: "IBM Plex Sans", sans-serif;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
	color: #4A5568;
}

.g5blog__post-large-image .g5blog__post-meta .meta-author a {
	color: #0B0F1A;
}

.g5blog__post-large-image .g5blog__post-meta .meta-cat i {
	display: none;
}

/* a.s4v-news-pill outranks the theme's `.g5blog__post-meta li a`
   (colour: inherit) and the mobile tap-target padding on meta links. */
.g5blog__post-meta a.s4v-news-pill {
	display: inline-flex;
	align-items: center;
	margin-right: 12px;
	padding: 10px 11px;
	border-radius: 12px;
	background: var(--s4v-pill-bg, #5CE2FF);
	color: var(--s4v-pill-fg, #0B0F1A);
	font-family: "IBM Plex Sans", sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	/* the theme's category item is uppercase and letter-spaced */
	letter-spacing: normal;
	text-transform: none;
}

.g5blog__post-meta a.s4v-news-pill:hover,
.g5blog__post-meta a.s4v-news-pill:focus {
	color: var(--s4v-pill-fg, #0B0F1A);
	opacity: .85;
}

/* S4V / Display / D2, as in the frame (the theme ships Plus Jakarta Sans 800) */
.g5blog__post-large-image .g5blog__post-title,
.g5blog__post-large-image .g5blog__post-title a {
	font-family: "Space Grotesk", sans-serif;
	font-weight: 700;
	font-size: 32px;
	line-height: 1.15;
	letter-spacing: -0.32px;
	color: #16233A;
}

/* ---------------------------------------------------------------------------
   Single news post - spacing under the category and the title
   --------------------------------------------------------------------------- */
.g5blog__single-meta-top .g5blog__single-title,
.g5blog__single-meta-top .entry-meta-cat {
	margin-bottom: 50px;
}

/* Single post - space above the breadcrumbs (theme: 30px) and between them
   and the post (theme: 70px). */
body.single-post .g5core__single-breadcrumbs.g5blog__single-breadcrumbs {
	padding-top: 85px;
}

body.single-post .g5blog__single-breadcrumbs + #primary-content {
	padding-top: 80px;
}

/* Single post content at the full 1170px column (theme: 800px / 900px) */
body.single-post.no-sidebar #main-content {
	-ms-flex: 0 0 1170px;
	flex: 0 0 1170px;
	max-width: 100%;
	padding: 0;
	/* flex items default to min-width: auto, so the related carousel's wide
	   track stretched the column to 1200px, 15px past the logo line */
	min-width: 0;
}

/* The theme also widens the featured image and the Related Post carousel
   30-200px past both sides of its 800px post column. With the column at
   1170px they came out 1600px wide: below a 1600px window the related cards
   (549px each) ran off the left edge and the image off both. Both keep to the
   content column now. */
body.single-post.no-sidebar .g5blog__single-featured.g5core__post-featured,
body.single-post.no-sidebar div.g5blog__single-related-wrap {
	margin-left: 0;
	margin-right: 0;
	width: auto;
}

/* The theme pulls the title 30-120px past both sides to widen it beyond its
   narrow 800px column. With the column at 1170px that overhang pushed the
   title outside the grid, so it lines up with the text again. */
body.single-post.no-sidebar .g5blog__single-meta-top .g5blog__single-title {
	margin-left: 0;
	margin-right: 0;
	width: auto;
}

/* Blockquote box: the theme's centred 620px quote with 30px above and 40px
   below. Single posts widen it to the Figma's 682px further down. */
blockquote {
	border-left: none;
	margin: 30px 0 40px;
	max-width: 620px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 0;
	text-align: center;
}

/* Quote icon above blockquote text, in the site cyan */
blockquote p:before {
	content: "\f10e";
	font-family: var(--g5-font-icon);
	display: block;
	color: #00d1ff;
	font-size: 1em;
	font-weight: 900;
	line-height: 1;
	margin-bottom: 24px;
}

/* Single post - Previous / Next label: S4V / Label / Default (IBM Plex Sans
   500, 14px, 0.5%) in Ink Black/200, centred in a 21px row as in the Figma.
   A 21px line box centres the one-line label without making it a flex item,
   so the right-aligned "Next" keeps its alignment. */
body .post-navigation .nav-links .nav-subtitle {
	display: block;
	height: 21px;
	font-family: "IBM Plex Sans", sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 21px;
	letter-spacing: 0.07px;
	text-transform: none;
	color: #8E96A5;
	margin-bottom: 16px;
}

/* Previous / Next post title: S4V / Heading / H2 (IBM Plex Sans 500, 18px,
   130%) in Prussian Blue/900, wrapping at the design's ~300px. */
body .post-navigation .nav-links .nav-title {
	display: block;
	max-width: 300px;
	font-family: "IBM Plex Sans", sans-serif;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0;
	color: #16233A;
}

/* "Next" sits on the right, so its narrower title hugs that edge too. */
body .post-navigation .nav-links .nav-next .nav-title {
	margin-left: auto;
}

/* Single post tags: #Tag in S4V / Label / Default, #ABABAB, no "Tags:" label
   (Figma). Spacing between tags stays the theme's 10px, which matches. */
.g5blog__single-meta-tag.tagcloud > label {
	display: none;
}

.g5blog__single-meta-tag.tagcloud a {
	font-family: "IBM Plex Sans", sans-serif;
	/* the theme sets this size with !important */
	font-size: 14px !important;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.07px;
	color: #ABABAB;
}

.g5blog__single-meta-tag.tagcloud a::before {
	content: "#";
}

/* Related Post cards - category in the Figma "Card News - Highlight" style,
   the same as the homepage news cards: S4V / Label / Default in Harvest
   Orange/400 on a 21px row. The theme's is grey, uppercase, 700, spaced. */
.g5blog__single-related-wrap .entry-meta-cat ul.post-categories li > a {
	font-family: "IBM Plex Sans", sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 21px;
	letter-spacing: 0.07px;
	text-transform: none;
	color: #FF8A3D;
}

/* Single post text - Semantic/Text/On Primary. The typography is S4V / Body /
   Large and only goes on paragraphs directly in the content, so a blockquote
   keeps its larger quote style. */
.g5blog__single p {
	color: #0B0F1A;
}

.g5blog__single .entry-content > p {
	font-family: "IBM Plex Sans", sans-serif;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: 0;
}

/* Single post quote - S4V / Display / D3 (Space Grotesk 500, 24px, 120%,
   -0.5%) in Prussian Blue/900, centred in a 682px box. In the Figma the icon
   sits on the box's left edge, 24px above a 66px text box with the line
   centred in it; the icon lives inside the <p>, so that 66px box is its
   18.6px top half folded into the icon's margin plus the same underneath. */
.g5blog__single .entry-content blockquote {
	max-width: 682px;
	margin-left: auto;
	margin-right: auto;
}

.g5blog__single .entry-content blockquote p {
	padding-bottom: 19px;
	font-family: "Space Grotesk", sans-serif;
	font-size: 24px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.12px;
	text-align: center;
	color: #16233A;
}

.g5blog__single .entry-content blockquote p:before {
	text-align: left;
	margin-bottom: 43px;
}

/* Heading inside the post content - 18px Medium, 130%, Prussian Blue/900
   (Figma). The demo post's only heading is an H6. */
.g5blog__single .entry-content h6 {
	margin-bottom: 16px;
	font-family: "IBM Plex Sans", sans-serif;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0;
	color: #16233A;
}

/* "Related Post" - S4V / Display / D2 in Prussian Blue/900 on the design's
   40px row. */
body .g5blog__single-related-wrap .g5blog__block-title {
	font-family: "Space Grotesk", sans-serif;
	font-size: 32px;
	font-weight: 700;
	line-height: 40px;
	letter-spacing: -0.32px;
	text-align: center;
	color: #16233A;
}

/* ===========================================================================
   Responsive pass 2 - checked against the Groww insurance demo
   (IDs are the same on local and staging, so these ship with the theme files)
   =========================================================================== */

@media (max-width: 767px) {
	/* "Our actions" step labels were set to 12px for when the steps sit side by
	   side; stacked on a phone they have the full width, so S4V / Heading / H2. */
	.elementor-2189 .elementor-element.s4v-step .elementor-widget-heading:not(.s4v-step-number) .elementor-heading-title {
		font-size: 18px;
		line-height: 1.3;
	}

	/* The number's 30px bottom margin spaces the row of steps on desktop;
	   stacked, it left the label floating 44px below its number. */
	.elementor-2189 .elementor-element.s4v-step .elementor-element.s4v-step-number {
		margin-bottom: 8px;
	}
}

@media (max-width: 1199px) {
	/* Home and About carry manual <br>s that shape the lines at desktop width.
	   Any narrower, they leave ragged half-empty lines ("Train and equip KTO/TTO
	   staff and / create a dedicated community of / practice."), so the text
	   wraps naturally instead. Contact keeps its breaks - there they separate
	   address and phone lines. Some breaks sit straight between two words;
	   assets/js/s4v-soft-breaks.js puts a space before those so they do not
	   run together. */
	.elementor-2189 br,
	.elementor-12 br {
		display: none;
	}
}

@media (min-width: 768px) and (max-width: 1199px) {
	/* Decorative artwork positioned for the desktop grid lands on top of text
	   once the grid narrows - the coil and fan over the Home steps, the
	   shapes over the About hero headline, the "Our Role" copy and the closing
	   CTA. Tablets and small laptops drop them; phones place them for their own
	   width in "Phone pass 3". The soft glow PNGs stay. */
	.elementor-2189 .elementor-element.elementor-element-7e900001,
	.elementor-2189 .elementor-element.elementor-element-7e900002,
	.elementor-12 .elementor-element.elementor-element-7a200001,
	.elementor-12 .elementor-element.elementor-element-7a200002,
	.elementor-12 .elementor-element.elementor-element-7a200003,
	.elementor-12 .elementor-element.elementor-element-7a200024,
	.elementor-12 .elementor-element.elementor-element-7a200025,
	.elementor-12 .elementor-element.elementor-element-7a200143,
	.elementor-12 .elementor-element.elementor-element-7a200144,
	.elementor-12 .elementor-element.elementor-element-7a200145 {
		display: none;
	}
}

@media (max-width: 991px) {
	/* Home hero: the decoration stage sat behind the headline. Below the text
	   the slide is empty, so the artwork moves down into that space. */
	.s4v-hero-slide .s4v-hero-stage {
		top: auto;
		bottom: 24px;
		width: 38%;
	}

	/* Home newsletter CTA: the 56px frame padding and the card's 48% width
	   squeezed the form (to 127px on a phone) and wrapped the heading onto six
	   lines beside it. Stacked, the demo's way, both get the full width. */
	.elementor-2189 .elementor-element.elementor-element-7a500045.e-con {
		--flex-direction: column;
		--align-items: stretch;
		--padding-top: 40px;
		--padding-right: 32px;
		--padding-bottom: 40px;
		--padding-left: 32px;
	}

	.elementor-2189 .elementor-element.elementor-element-7a500044.e-con {
		--width: 100%;
	}

	/* Home partner logos: four 280px cards squeezed to 151px each - the MWC
	   logo spilled out of its card - so two per row. */
	.elementor-2189 .elementor-element.elementor-element-7a500051.e-con {
		--flex-wrap: wrap;
	}

	.elementor-2189 .elementor-element.elementor-element-7a500051 > .elementor-element.e-con {
		--width: calc(50% - 13px);
		/* the light band behind the logos ends after the first row; a hairline
		   keeps the second row reading as cards */
		box-shadow: 0 0 0 1px #E6ECF3;
	}

	/* About hero cards: four in a row left 1-2 words per line - two per row. */
	.elementor-12 .elementor-element.elementor-element-7a200022.e-con {
		--flex-wrap: wrap;
	}

	.elementor-12 .elementor-element.elementor-element-7a200022 > .elementor-element.e-con {
		--width: calc(50% - 11px);
		/* the desktop row staggers cards 2 and 3 down 100px; in a 2x2 grid
		   that left the rows lopsided */
		margin-top: 0;
	}

	/* About "What we deliver": the cards were a 47% column beside the image,
	   272px wide with the image floating half-way down. Cards become a 2x2
	   grid with the image underneath. */
	.elementor-12 .elementor-element.elementor-element-7a200097.e-con {
		--flex-direction: column;
		--gap: 40px 40px;
		--row-gap: 40px;
	}

	.elementor-12 .elementor-element.elementor-element-7a200091.e-con {
		--width: 100%;
		--flex-direction: row;
		--flex-wrap: wrap;
	}

	.elementor-12 .elementor-element.elementor-element-7a200091 > .elementor-element.e-con {
		--width: calc(50% - 7px);
	}

	.elementor-12 .elementor-element.elementor-element-7a200096.e-con {
		--width: 100%;
	}
}

/* Contact info (Address / Contact / Hours): three columns of ~200px with the
   icon beside the text left ~160px for it, so "Mobile: 068 26589 996" and
   "Mon - Fri: [08:30 - 20:00]" broke mid-number. Two columns per row, with
   the icon above the text, give every line room. */
@media (max-width: 991px) {
	.elementor-14 .elementor-element.elementor-element-7c100023.e-con {
		--flex-wrap: wrap;
	}

	.elementor-14 .elementor-element.elementor-element-7c100023 > .elementor-element.e-con {
		--width: calc(50% - 15px);
	}
}

/* Up to 1199px (three columns still, ~290px each) the icon above the text is
   what keeps the opening hours on one line. */
@media (max-width: 1199px) {
	.elementor-14 .elementor-element.elementor-element-7c100007.e-con,
	.elementor-14 .elementor-element.elementor-element-7c100014.e-con,
	.elementor-14 .elementor-element.elementor-element-7c100021.e-con {
		--flex-direction: column;
		--align-items: flex-start;
	}
}

/* Phone values for the newsletter CTA - after the tablet block so they win. */
@media (max-width: 767px) {
	.elementor-2189 .elementor-element.elementor-element-7a500045.e-con {
		--padding-right: 20px;
		--padding-left: 20px;
	}

	.elementor-2189 .elementor-element.elementor-element-7a500044.e-con {
		--padding-top: 24px;
		--padding-right: 24px;
		--padding-bottom: 24px;
		--padding-left: 24px;
	}

	/* Logos stack one per row on a phone, as before. */
	.elementor-2189 .elementor-element.elementor-element-7a500051 > .elementor-element.e-con,
	.elementor-14 .elementor-element.elementor-element-7c100023 > .elementor-element.e-con,
	.elementor-12 .elementor-element.elementor-element-7a200022 > .elementor-element.e-con,
	.elementor-12 .elementor-element.elementor-element-7a200091 > .elementor-element.e-con {
		--width: 100%;
	}
}

@media (max-width: 991px) {
	/* Footer: once Contact and Quick Links drop under the newsletter, their
	   15px inner padding left them indented from its left edge. */
	.elementor-2193 .elementor-element.elementor-element-7b600008.e-con,
	.elementor-2193 .elementor-element.elementor-element-7b600011.e-con {
		--padding-left: 0px;
	}
}

/* Touch screens of any width get the 44px tap height on news meta links;
   the phone rule above only covered narrow screens, not tablets. */
@media (pointer: coarse) {
	.ube-term-list a,
	.ube-entry-meta a,
	.g5blog__post-meta a:not(.s4v-news-pill) {
		display: inline-block;
		padding: 14px 0;
		line-height: 16px;
	}
}

/* Comment form submit: the theme demo's pink-to-purple gradient, the only one
   left on the site - brand cyan like the news "Read More" buttons. */
.comment-form .form-submit .btn,
#commentform #submit {
	background-image: none !important;
	background-color: #00D1FF;
	border-color: #00D1FF;
	color: #0F1E3D;
	border-radius: 10px;
}

.comment-form .form-submit .btn:hover,
#commentform #submit:hover {
	background-color: #1FC0E8;
	border-color: #1FC0E8;
	color: #0F1E3D;
}

/* About "Five goals" marquee: the Figma runs the cards edge to edge across the
   screen. The 100vw above lost to Elementor's container width (clamped to the
   1170px column) and margin-left: 0 kept it starting at the column edge, so
   only ~3 cards showed between two hard cut-offs. Pulled out to both viewport
   edges; the section (.s4v-about-goals) already clips horizontal overflow. */
.elementor-12 .elementor-element.elementor-element-7a200069.s4v-marquee {
	--width: 100vw;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* Goal cards: 286px tall against the Figma's ~246px. The icon + title row
   carried 10px of container padding above and below, and the description
   kept the theme's 19px paragraph margin under its last line. */
.elementor-12 .s4v-marquee .s4v-marquee-track > .elementor-element.e-con > .elementor-element.e-con {
	--padding-top: 0px;
	--padding-bottom: 0px;
}

.elementor-12 .s4v-marquee .s4v-marquee-track .elementor-widget-text-editor p:last-child {
	margin-bottom: 0;
}

/* Title colour - Figma: titles are Prussian Blue/900 (#16233A), body text is
   Semantic/Text/On Primary (#0B0F1A). Elementor headings get theirs from the
   widget settings; these are the titles the theme renders itself, which were
   still the theme's #000. */
body .g5blog__single-meta-top .g5blog__single-title,
body .g5blog__single-related-wrap .g5blog__post-title,
body .g5blog__single-related-wrap .g5blog__post-title a,
body .comment-respond .comment-reply-title {
	color: #16233A;
}

/* ===========================================================================
   Phone pass 3 (<= 767px) - tighter spacing, decorations back where desktop
   has them
   =========================================================================== */
@media (max-width: 767px) {

	/* --- Spacing -------------------------------------------------------------
	   Section padding and the gaps between blocks were desktop values (up to
	   150px). Sections get about 30% of their desktop padding, between 20 and
	   32px; gaps are halved, never below 16px. */
	.elementor-2189 .e-con.e-parent.e-con-boxed > .e-con-inner,
	.elementor-12 .e-con.e-parent.e-con-boxed > .e-con-inner,
	.elementor-14 .e-con.e-parent.e-con-boxed > .e-con-inner,
	.elementor-2193 .e-con.e-parent.e-con-boxed > .e-con-inner,
	.elementor-2189 .e-con.e-parent.e-con-full,
	.elementor-12 .e-con.e-parent.e-con-full,
	.elementor-14 .e-con.e-parent.e-con-full,
	.elementor-2193 .e-con.e-parent.e-con-full {
		padding-block-start: min(var(--padding-top), clamp(20px, calc(var(--padding-top) * .3), 32px));
		padding-block-end: min(var(--padding-bottom), clamp(20px, calc(var(--padding-bottom) * .3), 32px));
	}

	.elementor-2189 .e-con-full,
	.elementor-2189 .e-con-boxed > .e-con-inner,
	.elementor-12 .e-con-full,
	.elementor-12 .e-con-boxed > .e-con-inner,
	.elementor-14 .e-con-full,
	.elementor-14 .e-con-boxed > .e-con-inner,
	.elementor-2193 .e-con-full,
	.elementor-2193 .e-con-boxed > .e-con-inner {
		row-gap: min(var(--row-gap), max(16px, calc(var(--row-gap) * .5)));
	}

	/* Elementor gives every container a default padding (10px top/bottom,
	   15px left/right), set on .e-con itself. Invisible layout containers
	   nested two or three deep stacked that into 40-60px of empty space above
	   and below, and pushed text up to 83px in from the screen edge (partner
	   cards were 260px wide on a 390px phone). On phones the default is 0;
	   sections and cards keep the padding they set themselves. The footer keeps
	   it - its decorations are placed against its measured layout. */
	.elementor-2189 .e-con,
	.elementor-12 .e-con,
	.elementor-14 .e-con {
		--container-default-padding-top: 0px;
		--container-default-padding-bottom: 0px;
		--container-default-padding-left: 0px;
		--container-default-padding-right: 0px;
	}

	/* Cards: 26-30px of padding left narrow text columns (the partner cards
	   wrapped every few words). */
	body .elementor-12 .elementor-element.elementor-element-7a200009.e-con,
	body .elementor-12 .elementor-element.elementor-element-7a200013.e-con,
	body .elementor-12 .elementor-element.elementor-element-7a200017.e-con,
	body .elementor-12 .elementor-element.elementor-element-7a200021.e-con {
		--padding-top: 22px;
		--padding-right: 20px;
		--padding-bottom: 22px;
		--padding-left: 20px;
	}

	body .elementor-12 .elementor-element.elementor-element-7a200127.e-con,
	body .elementor-12 .elementor-element.elementor-element-7a200131.e-con,
	body .elementor-12 .elementor-element.elementor-element-7a200135.e-con,
	body .elementor-12 .elementor-element.elementor-element-7a200139.e-con {
		--padding-top: 20px;
		--padding-right: 18px;
		--padding-bottom: 20px;
		--padding-left: 18px;
	}

	body .elementor-12 .s4v-marquee-track > .elementor-element.e-con {
		padding: 22px 20px;
	}

	/* Partner logos filled the card width; capped so the text leads. */
	body .elementor-12 .elementor-element.elementor-element-7a200127 .elementor-widget-image img,
	body .elementor-12 .elementor-element.elementor-element-7a200131 .elementor-widget-image img,
	body .elementor-12 .elementor-element.elementor-element-7a200135 .elementor-widget-image img,
	body .elementor-12 .elementor-element.elementor-element-7a200139 .elementor-widget-image img {
		width: auto;
		max-width: 150px;
		max-height: 56px;
		object-fit: contain;
	}

	/* Desktop margins and paddings left on single blocks */
	body .elementor-2189 .elementor-element.elementor-element-7a500034,
	body .elementor-2189 .elementor-element.elementor-element-7a500037 {
		padding-bottom: 20px;
	}

	body .elementor-2189 .elementor-element.elementor-element-7a500053.e-con {
		margin-top: 16px;
	}

	body .elementor-12 .elementor-element.elementor-element-7a200044.e-con,
	body .elementor-12 .elementor-element.elementor-element-7a200097.e-con {
		margin-top: 12px;
	}

	/* About stats stack on a phone; their spacing came from the container
	   default padding, so they get their own. */
	body .elementor-12 .elementor-element.elementor-element-7a200044.e-con {
		--row-gap: 20px;
		row-gap: 20px;
	}

	/* Home steps: the second row of steps (4 and 5) carries a 50px top
	   margin for desktop - halved like the rest. */
	.elementor-2189 .elementor-element.elementor-element-7a500032.e-con {
		margin-top: 20px;
	}

	/* Theme-rendered pages (news, single post) */
	body {
		--g5-page-title-pd-top: 40px;
		--g5-page-title-pd-bottom: 40px;
		--g5-content-padding-bottom: 50px;
	}

	body.single-post .g5core__single-breadcrumbs.g5blog__single-breadcrumbs {
		padding-top: 42px;
	}

	body.single-post .g5blog__single-breadcrumbs + #primary-content {
		padding-top: 40px;
	}

	body.single-post div.g5blog__single-related-wrap {
		margin-top: 50px;
		padding-top: 50px;
		padding-bottom: 60px;
	}

	/* --- Decorations: behind the text, anchored like desktop ----------------
	   Every container becomes its own stacking context, so a decoration at
	   z-index -1 paints over the section background but under the section's
	   text, cards and images - it can sit near copy without covering it. */
	.elementor-2189 .e-con,
	.elementor-12 .e-con,
	.elementor-2193 .e-con {
		isolation: isolate;
	}

	.elementor-2189 .elementor-element.elementor-absolute,
	.elementor-12 .elementor-element.elementor-absolute,
	.elementor-2193 .elementor-element.elementor-absolute {
		z-index: -1;
		pointer-events: none;
	}

	.elementor-2189 .elementor-element.elementor-absolute img,
	.elementor-12 .elementor-element.elementor-absolute img,
	.elementor-2193 .elementor-element.elementor-absolute img {
		display: block;
		width: 100%;
		height: auto;
	}

	/* Home hero: artwork bottom-right under the copy, dot grid at the edge -
	   the same corner as desktop, clear of the headline. */
	.s4v-hero-slide .s4v-hero-stage {
		display: block;
		top: auto;
		bottom: 12px;
		right: -18px;
		width: 58%;
		opacity: .55;
		z-index: 0;
	}

	.s4v-hero-dots {
		display: block;
		right: 12px;
		bottom: 0;
		width: 36px;
		z-index: 0;
	}

	.s4v-hero-copy {
		position: relative;
		z-index: 1;
	}
}

/* Positions: [page] [element] - desktop anchor -> phone anchor. Each rule
   names left/right and top/bottom explicitly, and starts with body:not(.rtl)
   because that is how Elementor writes the desktop offsets - without it their
   left: still won and every decoration stayed where desktop puts it. */
@media (max-width: 767px) {
	body:not(.rtl) .elementor-2189 .elementor-element.elementor-element-7e900002.elementor-absolute { /* fan, steps top-right */
		left: auto; right: -30px; top: 164px; bottom: auto;
		--container-widget-width: 80px; width: 80px; max-width: none;
	}

	body:not(.rtl) .elementor-2189 .elementor-element.elementor-element-7e900001.elementor-absolute { /* coil, steps lower-left */
		left: -70px; right: auto; top: auto; bottom: 10%;
		--container-widget-width: 127px; width: 127px; max-width: none;
	}

	body:not(.rtl) .elementor-2189 .elementor-element.elementor-element-7h100200.elementor-absolute { /* rings, logos left */
		left: -90px; right: auto; top: 12px; bottom: auto;
		--container-widget-width: 55vw; width: 55vw; max-width: none;
	}

	body:not(.rtl) .elementor-2189 .elementor-element.elementor-element-7h100201.elementor-absolute { /* rings, logos right */
		left: auto; right: -100px; top: 38%; bottom: auto;
		--container-widget-width: 62vw; width: 62vw; max-width: none;
	}

	/* Footer (every page) - in the empty spaces beside the text, never
	   behind it: sunburst next to the "Newsletter" title, cube beside the
	   social icons, rings to the right of the Quick Links list. */
	body:not(.rtl) .elementor-2193 .elementor-element.elementor-element-7g200060.elementor-absolute { /* sunburst */
		left: auto; right: 8px; top: 4px; bottom: auto;
		--container-widget-width: 110px; width: 110px; max-width: none;
	}

	body:not(.rtl) .elementor-2193 .elementor-element.elementor-element-7g200061.elementor-absolute { /* cube */
		left: auto; right: 16px; top: 408px; bottom: auto;
		--container-widget-width: 88px; width: 88px; max-width: none;
	}

	body:not(.rtl) .elementor-2193 .elementor-element.elementor-element-7g100003.elementor-absolute { /* rings */
		left: auto; right: -40px; top: 560px; bottom: auto;
		--container-widget-width: 170px; width: 170px; max-width: none;
	}

	body:not(.rtl) .elementor-2193 .elementor-element.elementor-element-7g400140.elementor-absolute { /* glow, top-right */
		left: auto; right: -50vw; top: -120px; bottom: auto;
		--container-widget-width: 110vw; width: 110vw; max-width: none;
	}

	body:not(.rtl) .elementor-2193 .elementor-element.elementor-element-7g300090.elementor-absolute { /* glow, top-left */
		left: -45vw; right: auto; top: -30px; bottom: auto;
		--container-widget-width: 95vw; width: 95vw; max-width: none;
	}

	/* About */
	/* The hero shapes sit top-left of the headline as on desktop; the
	   headline starts below them so they frame it instead of covering it. */
	.elementor-12 .elementor-element.elementor-element-7a200023.e-con > .e-con-inner {
		padding-block-start: 104px;
	}

	body:not(.rtl) .elementor-12 .elementor-element.elementor-element-7a200001.elementor-absolute { /* half circles, hero top-left */
		left: 8px; right: auto; top: 12px; bottom: auto;
		--container-widget-width: 84px; width: 84px; max-width: none;
	}

	body:not(.rtl) .elementor-12 .elementor-element.elementor-element-7a200002.elementor-absolute { /* circle, hero top-left */
		left: 36px; right: auto; top: 30px; bottom: auto;
		--container-widget-width: 62px; width: 62px; max-width: none;
	}

	body:not(.rtl) .elementor-12 .elementor-element.elementor-element-7a200003.elementor-absolute { /* waves, hero top-right */
		left: auto; right: -70px; top: 0; bottom: auto;
		--container-widget-width: 64vw; width: 64vw; max-width: none;
	}

	body:not(.rtl) .elementor-12 .elementor-element.elementor-element-7a200900.elementor-absolute { /* glow, role */
		left: -30vw; right: auto; top: -40px; bottom: auto;
		--container-widget-width: 130vw; width: 130vw; max-width: none;
	}

	body:not(.rtl) .elementor-12 .elementor-element.elementor-element-7a200024.elementor-absolute { /* stripes, role left */
		left: -80px; right: auto; top: 8%; bottom: auto;
		--container-widget-width: 46vw; width: 46vw; max-width: none;
	}

	body:not(.rtl) .elementor-12 .elementor-element.elementor-element-7a200025.elementor-absolute { /* waves, role right */
		left: auto; right: -80px; top: 3%; bottom: auto;
		--container-widget-width: 46vw; width: 46vw; max-width: none;
	}

	body:not(.rtl) .elementor-12 .elementor-element.elementor-element-7a200092.elementor-absolute { /* sunburst, mission image top-right */
		left: auto; right: -10px; top: -26px; bottom: auto;
		--container-widget-width: 24vw; width: 24vw; max-width: none;
	}

	body:not(.rtl) .elementor-12 .elementor-element.elementor-element-7a200093.elementor-absolute { /* teal circle, behind mission image left */
		left: -44px; right: auto; top: 28%; bottom: auto;
		--container-widget-width: 42vw; width: 42vw; max-width: none;
	}

	body:not(.rtl) .elementor-12 .elementor-element.elementor-element-7a200094.elementor-absolute { /* cube, mission image right */
		left: auto; right: -46px; top: 56%; bottom: auto;
		--container-widget-width: 36vw; width: 36vw; max-width: none;
	}

	body:not(.rtl) .elementor-12 .elementor-element.elementor-element-7a32231.elementor-absolute { /* rings, partners left */
		left: -90px; right: auto; top: 18%; bottom: auto;
		--container-widget-width: 52vw; width: 52vw; max-width: none;
	}

	body:not(.rtl) .elementor-12 .elementor-element.elementor-element-7a32232.elementor-absolute { /* rings, partners right */
		left: auto; right: -110px; top: -3%; bottom: auto;
		--container-widget-width: 60vw; width: 60vw; max-width: none;
	}

	body:not(.rtl) .elementor-12 .elementor-element.elementor-element-7a4gl001.elementor-absolute { /* glow, CTA */
		left: -10vw; right: auto; top: 30%; bottom: auto;
		--container-widget-width: 120vw; width: 120vw; max-width: none;
	}

	body:not(.rtl) .elementor-12 .elementor-element.elementor-element-7a200143.elementor-absolute { /* coil, CTA left */
		left: -46px; right: auto; top: 44%; bottom: auto;
		--container-widget-width: 34vw; width: 34vw; max-width: none;
	}

	body:not(.rtl) .elementor-12 .elementor-element.elementor-element-7a200144.elementor-absolute { /* circle, CTA lower right */
		left: auto; right: 14px; top: auto; bottom: 18px;
		--container-widget-width: 22vw; width: 22vw; max-width: none;
	}

	body:not(.rtl) .elementor-12 .elementor-element.elementor-element-7a200145.elementor-absolute { /* sunburst, CTA top-right */
		left: auto; right: -8px; top: 12px; bottom: auto;
		--container-widget-width: 22vw; width: 22vw; max-width: none;
	}
}

/* Phone heading scale for titles the theme renders (Elementor headings carry
   theirs in the widget settings): page H1 30, display 24, card titles 20. */
@media (max-width: 767px) {
	.page-title-wrap .page-main-title,
	body .g5blog__single-meta-top .g5blog__single-title {
		font-size: 30px;
		line-height: 1.15;
	}

	.g5blog__post-large-image .g5blog__post-title,
	.g5blog__post-large-image .g5blog__post-title a,
	body .g5blog__single-related-wrap .g5blog__block-title,
	body .comment-respond .comment-reply-title,
	body .elementor-2193 .elementor-element.elementor-element-7b600001 .elementor-heading-title {
		font-size: 24px;
		line-height: 1.2;
	}

	body .g5blog__single-related-wrap .g5blog__post-title,
	body .g5blog__single-related-wrap .g5blog__post-title a {
		font-size: 20px;
		line-height: 1.3;
	}

	body .g5blog__single-related-wrap .g5blog__block-title {
		margin-bottom: 28px;
	}
}

/* Below 360px (older small phones) the footer has no free space beside the
   text for the cube and rings, and they would sit on the links. */
@media (max-width: 359px) {
	body:not(.rtl) .elementor-2193 .elementor-element.elementor-element-7g200061.elementor-absolute,
	body:not(.rtl) .elementor-2193 .elementor-element.elementor-element-7g100003.elementor-absolute {
		display: none;
	}
}

/* ===========================================================================
   Footer decorations, tablet and laptop (>= 768px)
   The shapes were pinned to the right edge of the screen while the content is
   a centred column, so below 1440px they slid onto the Quick Links, the email
   and the EU disclaimer. They are now placed from the centre of the column
   (50% of the footer) into space that is empty at each width, and always sit
   behind the text. 1440px and wider keep the desktop positions.
   =========================================================================== */
@media (min-width: 768px) {
	.elementor-2193 .elementor-element.elementor-element-7b600024.e-con {
		isolation: isolate;
	}

	body:not(.rtl) .elementor-2193 .elementor-element.elementor-element-7b600024 > .elementor-element.elementor-absolute,
	body:not(.rtl) .elementor-2193 .elementor-element.elementor-element-7b600024 > .e-con-inner > .elementor-element.elementor-absolute {
		z-index: -1;
		pointer-events: none;
	}
}

/* Tablet: newsletter on top, Contact and Quick Links under it. Sunburst right
   of the newsletter, cube right of Quick Links, rings beside the ERA badge. */
@media (min-width: 768px) and (max-width: 991px) {
	/* Also keeps the older four-column footer from squeezing into one row
	   (the email ran into "Quick Links") until the new layout is applied. */
	.elementor-2193 .elementor-element.elementor-element-7b600015.e-con {
		--flex-wrap: wrap;
	}

	body:not(.rtl) .elementor-2193 .elementor-element.elementor-element-7g200060.elementor-absolute { /* sunburst */
		left: calc(50% + 100px); right: auto; top: 60px; bottom: auto;
		--container-widget-width: 240px; width: 240px; max-width: none;
	}

	body:not(.rtl) .elementor-2193 .elementor-element.elementor-element-7g200061.elementor-absolute { /* cube */
		left: calc(50% + 120px); right: auto; top: 350px; bottom: auto;
		--container-widget-width: 200px; width: 200px; max-width: none;
	}

	body:not(.rtl) .elementor-2193 .elementor-element.elementor-element-7g100003.elementor-absolute { /* rings */
		left: calc(50% + 140px); right: auto; top: 780px; bottom: auto;
		--container-widget-width: 200px; width: 200px; max-width: none;
	}
}

/* Small laptop: three columns in a 900px content box. Sunburst under the Quick
   Links, cube right of the EU disclaimer. */
@media (min-width: 992px) and (max-width: 1199px) {
	body:not(.rtl) .elementor-2193 .elementor-element.elementor-element-7g200060.elementor-absolute {
		left: calc(50% + 310px); right: auto; top: 285px; bottom: auto;
		--container-widget-width: 160px; width: 160px; max-width: none;
	}

	body:not(.rtl) .elementor-2193 .elementor-element.elementor-element-7g200061.elementor-absolute {
		left: calc(50% + 320px); right: auto; top: 440px; bottom: auto;
		--container-widget-width: 150px; width: 150px; max-width: none;
	}
}

/* Laptop up to 1440px: desktop sizes, anchored to the column instead of the
   screen edge so they stay clear of the Quick Links. */
@media (min-width: 1200px) and (max-width: 1439px) {
	body:not(.rtl) .elementor-2193 .elementor-element.elementor-element-7g200060.elementor-absolute {
		left: calc(50% + 452px); right: auto; top: 0; bottom: auto;
	}

	body:not(.rtl) .elementor-2193 .elementor-element.elementor-element-7g200061.elementor-absolute {
		left: calc(50% + 332px); right: auto; top: 330px; bottom: auto;
	}
}

/* ===========================================================================
   Live: settings that used to be applied to the page data
   These were Elementor settings before; they live here so the live site never
   needs a database write (a bulk write to _elementor_data left Elementor's
   element cache unusable there - widgets rendered empty or as raw
   [elementor-element] text). Same values, applied from the theme.
   =========================================================================== */

/* Home partner logos: no white frame.
   Elementor writes container backgrounds as
   `.elementor-2189 .elementor-element.elementor-element-ID:not(.elementor-motion-effects-element-type-background)`
   - four classes - so the same :not() is needed here to outrank it. */
body .elementor-2189 .elementor-element.s4v-logo-card:not(.elementor-motion-effects-element-type-background) {
	background-color: transparent;
	--border-radius: 0;
	border-radius: 0;
}

/* The theme wraps images in a lazy-load placeholder with a grey background;
   the placeholder is wider than the logo, so the grey showed around it. */
.s4v-logo-card .g5core__lazy-image,
.s4v-logo-card .g5core__lazy-image::before {
	background: none;
	background-color: transparent;
}

/* "News and Updates" is the cyan variant of the chip: the gradient label all
   but disappears on cyan, so this one - and only this one - gets the solid
   navy the site uses on its cyan buttons (9.1:1 on cyan). The chip's
   background stays an Elementor setting. */
body .elementor-2189 .elementor-element.elementor-element-7a500036 .elementor-heading-title {
	background-image: none;
	color: #0F1E3D;
	-webkit-text-fill-color: #0F1E3D;
}

/* News slider: a width of its own.
   The section centres its children, so the widget took its width from its
   content - and slick sizes slides from the widget's width. With a single
   published post there was nothing to measure: the widget collapsed to 15px
   and the card's text wrapped one letter per line (live, 22/09). A width of
   its own makes the slider independent of how many posts exist. */
.s4v-news-slider {
	width: 100%;
	align-self: stretch;
}

/* Newsletter button: 59px tall (Figma). */
body .elementor-2189 .elementor-element.elementor-element-7a500043 .elementor-button {
	padding-top: 22px;
	padding-bottom: 22px;
}

/* Name and Email match the submit button's height (48 -> 59). */
body .elementor-2189 .elementor-element.elementor-element-7a500043 .elementor-field-textual {
	height: 59px;
	min-height: 59px;
	line-height: normal;
}

/* Tablet heading scale (About, Contact). */
@media (max-width: 1024px) {
	body .elementor-12 .elementor-element.elementor-element-7a200004 .elementor-heading-title,
	body .elementor-12 .elementor-element.elementor-element-7a200027 .elementor-heading-title,
	body .elementor-12 .elementor-element.elementor-element-7a200047 .elementor-heading-title,
	body .elementor-12 .elementor-element.elementor-element-7a200072 .elementor-heading-title,
	body .elementor-12 .elementor-element.elementor-element-7a200159 .elementor-heading-title {
		font-size: 40px;
	}

	body .elementor-12 .elementor-element.elementor-element-7a200074 .elementor-heading-title,
	body .elementor-12 .elementor-element.elementor-element-7a200102 .elementor-heading-title,
	body .elementor-12 .elementor-element.elementor-element-7a200121 .elementor-heading-title,
	body .elementor-14 .elementor-element.elementor-element-7c100025 .elementor-heading-title {
		font-size: 28px;
	}
}

/* Phone heading scale (About, Contact). */
@media (max-width: 767px) {
	body .elementor-12 .elementor-element.elementor-element-7a200029 .elementor-heading-title,
	body .elementor-12 .elementor-element.elementor-element-7a200032 .elementor-heading-title,
	body .elementor-12 .elementor-element.elementor-element-7a200035 .elementor-heading-title,
	body .elementor-12 .elementor-element.elementor-element-7a200038 .elementor-heading-title,
	body .elementor-12 .elementor-element.elementor-element-7a200041 .elementor-heading-title {
		font-size: 32px;
	}

	body .elementor-12 .elementor-element.elementor-element-7a200004 .elementor-heading-title {
		font-size: 30px;
	}

	body .elementor-12 .elementor-element.elementor-element-7a200027 .elementor-heading-title,
	body .elementor-12 .elementor-element.elementor-element-7a200047 .elementor-heading-title,
	body .elementor-12 .elementor-element.elementor-element-7a200072 .elementor-heading-title,
	body .elementor-12 .elementor-element.elementor-element-7a200159 .elementor-heading-title {
		font-size: 26px;
	}

	body .elementor-12 .elementor-element.elementor-element-7a200074 .elementor-heading-title,
	body .elementor-12 .elementor-element.elementor-element-7a200102 .elementor-heading-title,
	body .elementor-12 .elementor-element.elementor-element-7a200121 .elementor-heading-title,
	body .elementor-14 .elementor-element.elementor-element-7c100025 .elementor-heading-title {
		font-size: 24px;
	}

	body .elementor-12 .elementor-element.elementor-element-7a200007 .elementor-heading-title,
	body .elementor-12 .elementor-element.elementor-element-7a200011 .elementor-heading-title,
	body .elementor-12 .elementor-element.elementor-element-7a200015 .elementor-heading-title,
	body .elementor-12 .elementor-element.elementor-element-7a200019 .elementor-heading-title,
	body .elementor-14 .elementor-element.elementor-element-7c100004 .elementor-heading-title,
	body .elementor-14 .elementor-element.elementor-element-7c100011 .elementor-heading-title,
	body .elementor-14 .elementor-element.elementor-element-7c100018 .elementor-heading-title {
		font-size: 18px;
	}
}

/* ---------------------------------------------------------------------------
   Cookie banner (Complianz)
   The theme paints every <button> with its demo gradient - peach to magenta,
   --g5-btn-image - and it leaked into the consent banner, so "To accept" and
   the rest came out pink. Unsetting the variable here lets the banner show the
   colours set in Complianz -> Appearance; the theme does the same for
   Elementor's editor buttons. Colours stay a back-office setting.
   --------------------------------------------------------------------------- */
.cmplz-cookiebanner,
.cmplz-cookiebanner .cmplz-btn,
.cmplz-manage-consent,
.cmplz-manage-consent .cmplz-btn {
	--g5-btn-image: none;
}

/* ---------------------------------------------------------------------------
   Header menu: active page and hover
   The theme paints both in cyan, text and the 2px underline. They follow the
   brand's Prussian Blue now. Scoped to the solid header: on the homepage the
   header floats over the dark hero with light links, where this colour would
   disappear, and the off-canvas menu on phones sits on navy and keeps its cyan.
   --------------------------------------------------------------------------- */
.g5core-site-header:not(.header-float) .menu-horizontal > .menu-item.current-menu-item > a,
.g5core-site-header:not(.header-float) .menu-horizontal > .menu-item.current-menu-ancestor > a,
.g5core-site-header:not(.header-float) .menu-horizontal > .menu-item.current_page_item > a,
.g5core-site-header:not(.header-float) .menu-horizontal > .menu-item > a:hover,
.g5core-site-header:not(.header-float) .menu-horizontal > .menu-item > a:focus {
	color: #16233A;
}

/* The bar itself, in every state. Setting it only on :hover left the theme's
   blue showing while the bar shrank back on mouse out. */
.g5core-site-header:not(.header-float) .menu-horizontal > .menu-item > a:before {
	background-color: #16233A;
}