/* ----------------------------------------------------------------------------------------
 * Graplia UI layer — loads after custom.css (template) and graphia-brand.css (brand colours).
 *
 * Holds the design tokens (type scale, spacing, surfaces) and the `ui-*` components used by
 * the redesigned pages, plus the few template overrides needed so older blocks match them.
 *
 * INDEX
 * 01. Tokens          06. Cards
 * 02. Base            07. Section blocks (why, process, FAQ, CTA, panels)
 * 03. Buttons/links   08. Template overrides (header, reviews, footer, forms, listings)
 * 04. Sections        09. Responsive
 * 05. Heroes          10. Motion preferences
 * ---------------------------------------------------------------------------------------- */

/* 01. Tokens ------------------------------------------------------------------------------ */
:root{
	--ui-ink				: var(--dark-surface-color, #101828);
	--ui-ink-raised			: var(--dark-surface-raised-color, #1D2939);
	--ui-text				: #475467;
	--ui-muted				: #667085;
	--ui-line				: #E4E7EC;
	--ui-line-dark			: rgba(255, 255, 255, .14);
	--ui-page				: #FFFFFF;
	--ui-surface			: #F3F7FA;
	--ui-accent				: var(--brand-blue, #0091C8);
	--ui-accent-ink			: #00729E;	/* brand blue darkened to pass 4.5:1 for small text on white */
	--ui-accent-light		: #6CCDF2;	/* brand blue lightened for text on navy */
	--ui-star				: #FDB022;

	--ui-radius-sm			: 12px;
	--ui-radius				: 20px;
	--ui-radius-lg			: 28px;
	--ui-shadow				: 0 1px 2px rgba(16, 24, 40, .04), 0 12px 32px -12px rgba(16, 24, 40, .14);

	--ui-section-y			: clamp(72px, 8vw, 120px);
	--ui-gap				: 24px;

	--ui-fs-h1				: clamp(2.5rem, 1.55rem + 3.6vw, 4.5rem);
	--ui-fs-h2				: clamp(2rem, 1.45rem + 1.9vw, 3rem);
	--ui-fs-h3				: 1.25rem;
	--ui-fs-lead			: clamp(1.0625rem, 1rem + .3vw, 1.25rem);

	--ui-ease				: cubic-bezier(.2, .7, .2, 1);
}

/* 02. Base -------------------------------------------------------------------------------- */
body{
	font-size: 17px;
	line-height: 1.65;
	color: var(--ui-text);
	background: var(--ui-page);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

p{
	line-height: 1.65;
}

h1, h2, h3, h4{
	color: var(--ui-ink);
	letter-spacing: -0.025em;
	text-wrap: balance;
}

img{
	max-width: 100%;
	height: auto;
}

.skip-link{
	position: fixed;
	top: 12px;
	left: 12px;
	z-index: 2000;
	padding: 12px 18px;
	border-radius: 10px;
	background: var(--ui-ink);
	color: #FFF;
	font-weight: 600;
	transform: translateY(-200%);
	transition: transform .2s var(--ui-ease);
}

.skip-link:focus{
	color: #FFF;
	transform: translateY(0);
}

:focus-visible{
	outline: 2px solid var(--ui-accent);
	outline-offset: 3px;
}

.ui-eyebrow{
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 16px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ui-accent-ink);
}

.ui-eyebrow::before{
	content: '';
	width: 20px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
}

.ui-eyebrow-light{
	color: var(--ui-accent-light);
}

.ui-h2{
	font-size: var(--ui-fs-h2);
	font-weight: 600;
	line-height: 1.1;
	margin: 0;
}

.ui-lead{
	font-size: var(--ui-fs-lead);
	line-height: 1.6;
	margin: 0;
}

.ui-prose p{
	margin: 0 0 1em;
}

.ui-h2 + .ui-prose{
	margin-top: 24px;
}

.ui-prose + .ui-btn-group{
	margin-top: 32px;
}

.ui-prose p:last-child{
	margin-bottom: 0;
}

.ui-tag{
	display: inline-block;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ui-accent-ink);
}

/* 03. Buttons & links --------------------------------------------------------------------- */
.ui-btn-group{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.ui-btn-outline{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 50px;
	padding: 0 24px;
	border: 1px solid var(--ui-ink);
	border-radius: 100px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
	color: var(--ui-ink);
	background: transparent;
	transition: background-color .25s var(--ui-ease), color .25s var(--ui-ease), border-color .25s var(--ui-ease);
}

.ui-btn-outline:hover,
.ui-btn-outline:focus-visible{
	color: #FFF;
	background: var(--ui-ink);
}

.ui-btn-outline-light{
	color: #FFF;
	border-color: rgba(255, 255, 255, .5);
}

.ui-btn-outline-light:hover,
.ui-btn-outline-light:focus-visible{
	color: var(--ui-ink);
	background: #FFF;
	border-color: #FFF;
}

.ui-btn-outline .fa-whatsapp{
	font-size: 20px;
}

.ui-text-link,
.ui-card-link{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	color: var(--ui-ink);
}

.ui-text-link{
	margin-top: 24px;
	padding-bottom: 2px;
	border-bottom: 1px solid currentColor;
}

.ui-text-link::after,
.ui-card-link::after{
	content: '\2192';
	transition: transform .25s var(--ui-ease);
}

.ui-text-link:hover{
	color: var(--ui-accent-ink);
}

.ui-text-link:hover::after{
	transform: translateX(4px);
}

/* 04. Sections ---------------------------------------------------------------------------- */
.ui-section{
	position: relative;
	padding: var(--ui-section-y) 0;
}

.ui-section-surface{
	background: var(--ui-surface);
}

.ui-section-dark{
	background: var(--ui-ink);
	color: rgba(255, 255, 255, .72);
}

.ui-section-dark h2,
.ui-section-dark h3{
	color: #FFF;
}

.ui-section-dark .ui-eyebrow{
	color: var(--ui-accent-light);
}

/* Two consecutive sections on the same background share one gap instead of doubling it */
.ui-section:not(.ui-section-surface):not(.ui-section-dark) + .ui-section:not(.ui-section-surface):not(.ui-section-dark){
	padding-top: 0;
}

.ui-section-surface + .ui-section-surface,
.ui-section-dark + .ui-section-dark{
	padding-top: 0;
}

.ui-section-head{
	margin-bottom: clamp(40px, 5vw, 64px);
}

.ui-section-head-split{
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px 64px;
	align-items: end;
}

.ui-section-head-split > :last-child{
	justify-self: start;
}

.ui-section-head-center{
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.ui-section-head-center .ui-lead{
	margin-top: 16px;
}

.ui-section-foot{
	margin-top: 48px;
	text-align: center;
}

.ui-section-note{
	margin: 40px 0 0;
	text-align: center;
	color: var(--ui-muted);
}

.ui-section-note a{
	font-weight: 600;
	color: var(--ui-accent-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ui-section-note a:hover{
	color: var(--ui-ink);
}

.ui-grid{
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ui-gap);
}

.ui-intro .ui-h2{
	max-width: 14ch;
}

/* 05. Heroes ------------------------------------------------------------------------------ */
.hero.ui-hero{
	display: flex;
	align-items: center;
	min-height: min(92vh, 860px);
	padding: 180px 0 96px;
	background-image: none;
}

.hero.ui-hero::before,
.hero.ui-hero::after{
	display: none;
}

/* Left-weighted overlay keeps left-aligned copy legible over any uploaded video */
.hero.ui-hero.hero-video-layout .hero-bg-video::before{
	opacity: 1;
	background: linear-gradient(90deg, rgba(16, 24, 40, .9) 0%, rgba(16, 24, 40, .72) 55%, rgba(16, 24, 40, .45) 100%);
}

.ui-hero .container{
	width: 100%;
}

.ui-hero-content{
	max-width: 820px;
}

.ui-hero h1,
.ui-page-hero h1{
	font-size: var(--ui-fs-h1);
	font-weight: 600;
	line-height: 1.04;
	letter-spacing: -0.035em;
	color: #FFF;
	margin: 0;
}

.ui-hero-lead{
	max-width: 620px;
	margin: 24px 0 0;
	font-size: var(--ui-fs-lead);
	line-height: 1.6;
	color: rgba(255, 255, 255, .8);
}

.ui-hero .ui-btn-group,
.ui-page-hero .ui-btn-group{
	margin-top: 36px;
}

.ui-rating-badge{
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 10px 18px;
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 100px;
	background: rgba(255, 255, 255, .06);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	font-size: 15px;
	line-height: 1.3;
	color: rgba(255, 255, 255, .85);
}

a.ui-rating-badge:hover{
	color: #FFF;
	border-color: rgba(255, 255, 255, .4);
}

.ui-rating-badge strong{
	color: #FFF;
	font-weight: 600;
}

.ui-rating-badge-stars{
	display: inline-flex;
	gap: 2px;
	font-size: 13px;
	color: var(--ui-star);
}

.ui-rating-badge-stars .is-empty{
	opacity: .3;
}

/* Stats strip: a navy band attached to the bottom of the home hero */
.ui-stats{
	padding: 28px 0;
	background: var(--ui-ink);
	border-top: 1px solid var(--ui-line-dark);
}

.ui-stats-list{
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 28px 24px;
	margin: 0;
}

/* Label is the <dt> for screen readers; the figure is shown above it */
.ui-stat{
	display: flex;
	flex-direction: column-reverse;
	align-items: center;
	gap: 6px;
	text-align: center;
}

.ui-stat dd{
	margin: 0;
	font-size: clamp(1.875rem, 1.5rem + 1.2vw, 2.5rem);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
	color: #FFF;
}

.ui-stat dt{
	font-size: 15px;
	font-weight: 500;
	line-height: 1.3;
	color: rgba(255, 255, 255, .8);
}

/* Inner page hero (page-header component and service pages) */
/* Background photo sits under a navy gradient: dense on the left where the copy and
   breadcrumb sit, lighter on the right so the image still reads. Home uses .ui-hero, so
   it is unaffected. */
.ui-page-hero{
	position: relative;
	padding: 190px 0 clamp(64px, 7vw, 96px);
	background-color: var(--ui-ink);
	background-image:
		linear-gradient(90deg, rgba(16, 24, 40, .94) 0%, rgba(16, 24, 40, .82) 50%, rgba(16, 24, 40, .6) 100%),
		url('../images/hero-bg-image-1.jpg');
	background-repeat: no-repeat;
	background-position: center, 70% 30%;
	background-size: cover;
	color: rgba(255, 255, 255, .78);
	overflow: hidden;
}

.ui-page-hero::after{
	content: '';
	position: absolute;
	inset: auto 0 0 0;
	height: 1px;
	background: var(--ui-line-dark);
}

.ui-page-hero-content{
	max-width: 860px;
}

.ui-page-hero h1{
	font-size: clamp(2.25rem, 1.5rem + 2.8vw, 4rem);
}

.ui-page-hero-media{
	margin: 0;
	border-radius: var(--ui-radius-lg);
	overflow: hidden;
	aspect-ratio: 4 / 3;
}

.ui-page-hero-media img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ui-breadcrumb{
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
	font-size: 14px;
	color: rgba(255, 255, 255, .6);
}

.ui-breadcrumb li + li::before{
	content: '/';
	margin-right: 8px;
	color: rgba(255, 255, 255, .35);
}

.ui-breadcrumb a{
	color: rgba(255, 255, 255, .75);
}

.ui-breadcrumb a:hover{
	color: #FFF;
}

.ui-breadcrumb [aria-current]{
	color: #FFF;
}

/* Article meta inside the page hero */
.ui-page-hero .post-single-meta{
	margin-top: 24px;
}

.ui-page-hero .post-single-meta ol{
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
	color: rgba(255, 255, 255, .75);
}

.ui-page-hero .post-single-meta i{
	margin-right: 6px;
	color: var(--ui-accent-light);
}

/* 06. Cards ------------------------------------------------------------------------------- */
.ui-service-card,
.ui-feature{
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 32px;
	border: 1px solid var(--ui-line);
	border-radius: var(--ui-radius);
	background: #FFF;
	transition: transform .3s var(--ui-ease), box-shadow .3s var(--ui-ease), border-color .3s var(--ui-ease);
}

.ui-service-card:hover,
.ui-service-card:focus-within{
	transform: translateY(-4px);
	border-color: rgba(0, 145, 200, .45);
	box-shadow: var(--ui-shadow);
}

.ui-service-card-top{
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	margin-bottom: 40px;
}

.ui-service-card-icon,
.ui-feature-icon{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	border-radius: 16px;
	background: var(--ui-surface);
}

.ui-service-card-icon img{
	width: 34px;
	height: 34px;
}

.ui-service-card-no{
	font-size: 14px;
	font-weight: 600;
	color: var(--ui-muted);
	font-variant-numeric: tabular-nums;
}

.ui-service-card-title{
	font-size: 1.375rem;
	font-weight: 600;
	line-height: 1.25;
	margin: 0 0 10px;
}

.ui-service-card-title a{
	color: inherit;
}

/* Keyboard focus lands on the link but the outline is drawn around the whole card */
.ui-service-card-title a:focus-visible,
.ui-project-card-title a:focus-visible,
.ui-insight-card-title a:focus-visible{
	outline: none;
}

.ui-service-card:focus-within,
.ui-project-card:focus-within .ui-project-card-media,
.ui-insight-card:focus-within .ui-insight-card-media{
	outline: 2px solid var(--ui-accent);
	outline-offset: 3px;
}

.ui-service-card p{
	margin: 0 0 28px;
}

.ui-card-link{
	margin-top: auto;
	font-size: 15px;
	color: var(--ui-accent-ink);
}

.ui-service-card:hover .ui-card-link::after,
.ui-project-card:hover .ui-card-link::after,
.ui-insight-card:hover .ui-card-link::after{
	transform: translateX(4px);
}

.ui-feature-icon{
	width: 52px;
	height: 52px;
	margin-bottom: 24px;
}

.ui-feature-icon img{
	width: 30px;
	height: 30px;
}

.ui-feature h3{
	font-size: var(--ui-fs-h3);
	margin: 0 0 10px;
}

.ui-feature p{
	margin: 0;
}

.ui-project-card,
.ui-insight-card{
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.ui-project-card-media,
.ui-insight-card-media{
	position: relative;
	margin: 0 0 20px;
	border-radius: var(--ui-radius);
	overflow: hidden;
	background: var(--ui-surface);
	aspect-ratio: 4 / 3;
}

.ui-insight-card-media{
	aspect-ratio: 16 / 10;
}

.ui-project-card-media img,
.ui-insight-card-media img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s var(--ui-ease);
}

.ui-project-card:hover img,
.ui-insight-card:hover img{
	transform: scale(1.04);
}

.ui-project-card-body,
.ui-insight-card-body{
	display: flex;
	flex-direction: column;
	flex: 1;
}

.ui-project-card-title,
.ui-insight-card-title{
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.3;
	margin: 6px 0 6px;
}

.ui-project-card-title a,
.ui-insight-card-title a{
	color: inherit;
}

.ui-project-card p,
.ui-insight-card p{
	margin: 0 0 16px;
	font-size: 16px;
	color: var(--ui-muted);
}

.ui-insight-card-meta{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 14px;
	font-size: 14px;
	color: var(--ui-muted);
}

.ui-section-dark .ui-project-card p,
.ui-section-dark .ui-insight-card p{
	color: rgba(255, 255, 255, .65);
}

.ui-section-dark .ui-tag,
.ui-section-dark .ui-card-link{
	color: var(--ui-accent-light);
}

.ui-section-dark .ui-project-card-media{
	background: var(--ui-ink-raised);
}

/* 07. Section blocks ---------------------------------------------------------------------- */
/* Why Choose Us: compact reason cards with an icon tile beside the copy */
.ui-why-list{
	margin: 0;
	padding: 0;
	list-style: none;
	gap: 20px;
}

.ui-why-card{
	display: flex;
	align-items: flex-start;
	gap: 18px;
	height: 100%;
	padding: 28px 26px;
	background: var(--ui-page);
	border: 1px solid var(--ui-line);
	border-radius: var(--ui-radius);
	transition: border-color .3s var(--ui-ease), box-shadow .3s var(--ui-ease), transform .3s var(--ui-ease);
}

.ui-why-card:hover{
	transform: translateY(-4px);
	border-color: rgba(0, 145, 200, .45);
	box-shadow: var(--ui-shadow);
}

.ui-why-card-icon{
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 14px;
	background: rgba(0, 145, 200, .1);
	color: var(--ui-accent-ink);
	font-size: 22px;
	transition: background-color .3s var(--ui-ease), color .3s var(--ui-ease);
}

.ui-why-card:hover .ui-why-card-icon{
	background: var(--ui-accent);
	color: #FFFFFF;
}

.ui-why-card h3{
	font-size: 1.125rem;
	line-height: 1.3;
	margin: 2px 0 8px;
}

.ui-why-card p{
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--ui-muted);
}

/* Blogs: the template's post-item card, sized for the grid and set on white over the surface band */
.ui-blogs-list{
	margin: 0;
	padding: 0;
	list-style: none;
	gap: 20px;
}

.ui-blogs-list .post-item{
	position: relative;
	height: 100%;
	margin: 0;
	background: var(--ui-page);
	border: 1px solid var(--ui-line);
	transition: border-color .3s var(--ui-ease), box-shadow .3s var(--ui-ease), transform .3s var(--ui-ease);
}

.ui-blogs-list .post-item:hover,
.ui-blogs-list .post-item:focus-within{
	transform: translateY(-4px);
	border-color: rgba(0, 145, 200, .45);
	box-shadow: var(--ui-shadow);
}

.ui-blogs-list .post-item article{
	display: flex;
	flex-direction: column;
	height: 100%;
}

.ui-blogs-list .post-featured-image figure img{
	aspect-ratio: 16 / 10;
}

.ui-blogs-list .post-item-body{
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 14px 14px 16px;
}

.ui-blogs-list .post-item-content h3{
	font-size: 1.125rem;
	line-height: 1.35;
	margin: 8px 0;
}

.ui-blogs-list .post-item-content h3 a{
	color: inherit;
}

.ui-blogs-list .post-item-content h3 a:focus-visible{
	outline: none;
}

.ui-blogs-list .post-item-content p{
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--ui-muted);
}

.ui-blogs-list .post-item-btn{
	margin-top: auto;
	padding-top: 20px;
}

.ui-blogs-list .post-item:hover .readmore-btn::before{
	transform: translateY(-50%) rotate(0deg);
}

.ui-blogs-list .post-item:focus-within{
	outline: 2px solid var(--ui-accent);
	outline-offset: 3px;
}

/* Home services: calmer cards (no index numbers), icon tile, divided link row; scoped so the Services page keeps its own layout */
.ui-section.ui-services{
	padding-block: clamp(48px, 5vw, 72px);
}

.ui-services .ui-service-card{
	padding: 36px 32px 28px;
	border-color: transparent;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

.ui-services .ui-service-card:hover,
.ui-services .ui-service-card:focus-within{
	border-color: var(--ui-accent);
	box-shadow: var(--ui-shadow);
}

.ui-services .ui-service-card-no{
	display: none;
}

.ui-services .ui-service-card-top{
	margin-bottom: 28px;
}

.ui-services .ui-service-card-icon{
	width: 64px;
	height: 64px;
	border-radius: 18px;
	background: rgba(0, 145, 200, .1);
	transition: background-color .3s var(--ui-ease);
}

.ui-services .ui-service-card:hover .ui-service-card-icon,
.ui-services .ui-service-card:focus-within .ui-service-card-icon{
	background: rgba(0, 145, 200, .18);
}

.ui-services .ui-service-card p{
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-bottom: 24px;
}

.ui-services .ui-card-link{
	width: 100%;
	padding-top: 20px;
	border-top: 1px solid var(--ui-line);
}

/* Home call promo: single premium CTA card */
.ui-section.ui-call-promo{
	padding-block: clamp(48px, 5vw, 72px);
}

.ui-call-card{
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(28px, 5vw, 64px);
	padding: clamp(32px, 5vw, 64px);
	overflow: hidden;
	isolation: isolate;
	border-radius: var(--ui-radius-lg);
	background:
		radial-gradient(520px 320px at 100% 0%, rgba(0, 145, 200, .38), transparent 70%),
		radial-gradient(420px 280px at 0% 100%, rgba(108, 205, 242, .14), transparent 70%),
		linear-gradient(135deg, var(--ui-ink) 0%, var(--ui-ink-raised) 100%);
	box-shadow: 0 24px 48px -24px rgba(16, 24, 40, .45);
	transition: transform .4s var(--ui-ease), box-shadow .4s var(--ui-ease);
}

.ui-call-card::before{
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	border: 1px solid var(--ui-line-dark);
	background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .06) 50%, transparent 60%) no-repeat -120% 0 / 220% 100%;
	transition: background-position .9s var(--ui-ease);
}

.ui-call-card:hover{
	transform: translateY(-4px);
	box-shadow: 0 32px 64px -24px rgba(0, 145, 200, .45);
}

.ui-call-card:hover::before{
	background-position: 120% 0;
}

.ui-call-card .ui-eyebrow{
	color: var(--ui-accent-light);
}

.ui-call-card-title{
	margin: 0 0 16px;
	font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem);
	font-weight: 600;
	line-height: 1.15;
	color: #FFF;
}

.ui-call-card-text{
	max-width: 52ch;
	margin: 0;
	color: rgba(255, 255, 255, .74);
}

.ui-call-card-actions{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
}

.ui-call-card-phone{
	display: flex;
	align-items: center;
	gap: 16px;
	width: 100%;
	padding: 16px 20px;
	border: 1px solid var(--ui-line-dark);
	border-radius: var(--ui-radius);
	background: rgba(255, 255, 255, .06);
	color: #FFF;
	transition: background-color .3s var(--ui-ease), border-color .3s var(--ui-ease), transform .3s var(--ui-ease);
}

.ui-call-card-phone:hover,
.ui-call-card-phone:focus-visible{
	color: #FFF;
	border-color: var(--ui-accent-light);
	background: rgba(255, 255, 255, .1);
	transform: translateX(4px);
}

.ui-call-card-phone:focus-visible{
	outline: 2px solid var(--ui-accent-light);
	outline-offset: 3px;
}

.ui-call-card-phone-icon{
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 16px;
	background: var(--ui-accent);
	font-size: 18px;
	box-shadow: 0 0 0 0 rgba(0, 145, 200, .5);
	animation: ui-call-pulse 2.6s infinite;
}

.ui-call-card-phone-text{
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.ui-call-card-phone-text small{
	font-size: 13px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--ui-accent-light);
}

.ui-call-card-phone-text strong{
	font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
	font-weight: 600;
	line-height: 1.2;
	overflow-wrap: anywhere;
}

@keyframes ui-call-pulse{
	0%{ box-shadow: 0 0 0 0 rgba(0, 145, 200, .5); }
	70%, 100%{ box-shadow: 0 0 0 14px rgba(0, 145, 200, 0); }
}

@media (prefers-reduced-motion: reduce){
	.ui-call-card,
	.ui-call-card::before,
	.ui-call-card-phone{
		transition: none;
	}

	.ui-call-card-phone-icon{
		animation: none;
	}
}

@media (max-width: 991px){
	.ui-call-card{
		grid-template-columns: 1fr;
	}

	.ui-call-card-actions{
		max-width: 480px;
	}
}

@media (max-width: 575px){
	.ui-call-card-actions,
	.ui-call-card-actions .btn-default{
		width: 100%;
		max-width: none;
	}

	.ui-call-card-actions .btn-default{
		display: block;
		text-align: center;
	}
}

/* Problem + Solution: tightened padding and heading so each fits one laptop screen */
.ui-section.ui-problem,
.ui-section.ui-solution{
	padding-block: clamp(40px, 4.5vw, 64px);
}

.ui-problem .ui-h2,
.ui-solution .ui-h2{
	font-size: clamp(1.625rem, 2.6vw, 2.125rem);
}

/* Problem: intro column beside a numbered, divided list of pain points */
.ui-problem-layout{
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
}

.ui-problem-intro .ui-lead{
	margin: 12px 0 16px;
}

.ui-problem-list{
	margin: 0;
	padding: 0;
	list-style: none;
	background: var(--ui-page);
	border: 1px solid var(--ui-line);
	border-radius: var(--ui-radius-sm);
}

.ui-problem-row{
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 4px 18px;
	align-items: start;
	padding: 18px 22px;
}

.ui-problem-row + .ui-problem-row{
	border-top: 1px solid var(--ui-line);
}

.ui-problem-no{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: var(--ui-ink);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.ui-problem-copy h3{
	margin: 0 0 2px;
	font-size: 1.0625rem;
}

.ui-problem-copy p{
	margin: 0;
	font-size: 15px;
	line-height: 1.55;
}

.ui-problem-cost{
	grid-column: 2;
	justify-self: start;
	margin: 6px 0 0;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--ui-surface);
	font-size: 13px;
	font-weight: 600;
	color: var(--ui-ink);
	white-space: nowrap;
}

.ui-problem-cost span{
	font-weight: 500;
	color: var(--ui-muted);
}

/* Solution: full-width comparison table (problem → fix → benefit); rows stack into labelled blocks below 768px */
.ui-solution{
	scroll-margin-top: 80px;	/* "See how we fix them" link lands below the sticky header */
}

.ui-solution .ui-section-head{
	margin-bottom: 24px;
}

.ui-solution-table{
	border: 1px solid var(--ui-line-dark);
	border-radius: var(--ui-radius-sm);
	background: var(--ui-ink-raised);
	overflow: hidden;
}

.ui-solution-cols{
	display: none;
}

.ui-solution-rows{
	margin: 0;
	padding: 0;
	list-style: none;
}

.ui-solution-row{
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	padding: 20px 22px;
}

.ui-solution-row + .ui-solution-row{
	border-top: 1px solid var(--ui-line-dark);
}

.ui-solution-label{
	display: block;
	margin-bottom: 4px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .5);
}

.ui-solution-before{
	margin: 0;
	font-size: 15px;
	color: rgba(255, 255, 255, .55);
}

.ui-solution-before::before{
	content: "\00D7";
	margin-right: 8px;
	color: rgba(255, 255, 255, .4);
}

.ui-solution-fix h3{
	margin: 0 0 2px;
	font-size: 1.0625rem;
}

.ui-solution-fix p{
	margin: 0;
	font-size: 15px;
	line-height: 1.55;
}

.ui-solution-gain{
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	color: #fff;
}

.ui-solution-gain::before{
	content: "\2713";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	margin-right: 8px;
	border-radius: 50%;
	background: var(--ui-accent);
	color: #fff;
	font-size: 11px;
	vertical-align: 1px;
}

@media (max-width: 767.98px){
	.ui-solution .ui-section-head .btn-default{
		justify-self: start;
	}
}

@media (min-width: 768px){
	.ui-problem-row{
		grid-template-columns: auto minmax(0, 1fr) auto;
		align-items: center;
	}

	.ui-problem-cost{
		grid-column: auto;
		justify-self: end;
		margin: 0;
	}

	.ui-solution-cols,
	.ui-solution-row{
		display: grid;
		grid-template-columns: minmax(0, .9fr) minmax(0, 1.7fr) minmax(0, 1fr);
		gap: 28px;
		align-items: center;
	}

	.ui-solution-cols{
		padding: 12px 24px;
		border-bottom: 1px solid var(--ui-line-dark);
		background: rgba(255, 255, 255, .03);
		font-size: 11px;
		font-weight: 600;
		letter-spacing: .08em;
		text-transform: uppercase;
		color: var(--ui-accent-light);
	}

	.ui-solution-row{
		padding: 18px 24px;
	}

	/* Column header carries the labels visually; per-cell labels stay for screen readers */
	.ui-solution-label{
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	.ui-solution-before{
		position: relative;
		padding-right: 28px;
	}

	.ui-solution-before::after{
		content: "\2192";
		position: absolute;
		top: 50%;
		right: 0;
		transform: translateY(-50%);
		color: var(--ui-accent-light);
	}
}

@media (min-width: 992px){
	.ui-problem-layout{
		grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
		gap: 56px;
		align-items: center;
	}
}

/* Our Team: compact four-up profile cards; the photo is cropped short so the row fits one laptop screen */
.ui-section.ui-team,
.ui-section.ui-why,
.ui-section.ui-blogs{
	padding-block: clamp(40px, 4.5vw, 64px);
}

/* Team heading: centred stack */
.ui-team-head{
	max-width: 860px;
	margin: 0 auto 28px;
	text-align: center;
}

.ui-team-head .ui-eyebrow{
	margin-bottom: 6px;
}

.ui-team-head .ui-h2{
	margin: 0;
	font-size: clamp(1.625rem, 2.6vw, 2.125rem);
}

.ui-team-head-lead{
	margin: 10px auto 0;
	font-size: 16px;
	line-height: 1.55;
	color: var(--ui-text);
}

/* Single line from laptop width up; wraps naturally on tablet and mobile */
@media (min-width: 992px){
	.ui-team-head-lead{
		white-space: nowrap;
	}
}

.ui-team-list{
	margin: 0;
	padding: 0;
	list-style: none;
	gap: 20px;
}

.ui-team-card{
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--ui-page);
	border: 1px solid var(--ui-line);
	border-radius: var(--ui-radius-sm);
	transition: border-color .3s var(--ui-ease), box-shadow .3s var(--ui-ease);
}

.ui-team-card:hover,
.ui-team-card:focus-within{
	border-color: var(--ui-accent);
	box-shadow: var(--ui-shadow);
}

.ui-team-card-media{
	margin: 0;
	aspect-ratio: 4 / 3;
	background: var(--ui-surface);
}

/* Ratio set on the image too: its width/height attributes otherwise make it square and stretch the figure */
.ui-team-card-media img{
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: center 20%;
}

.ui-team-card-body{
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 18px 20px 20px;
}

.ui-team-card-head{
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 10px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--ui-line);
}

/* Role reads as a small label above the name; DOM keeps name first for screen readers */
.ui-team-card-title{
	display: flex;
	flex-direction: column-reverse;
	gap: 4px;
	min-width: 0;
}

.ui-team-card h3{
	margin: 0;
	font-size: 1.1875rem;
	line-height: 1.25;
}

.ui-team-card-role{
	margin: 0;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ui-accent-ink);
}

.ui-team-card-social{
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--ui-surface);
	color: var(--ui-ink);
	font-size: 14px;
	transition: background-color .3s var(--ui-ease), color .3s var(--ui-ease);
}

.ui-team-card-social:hover,
.ui-team-card-social:focus-visible{
	background: var(--ui-accent);
	color: #fff;
}

.ui-team-card-body > p{
	margin: 0 0 14px;
	font-size: 15px;
	line-height: 1.55;
}

.ui-team-card-focus{
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: auto 0 0;
	padding: 0;
	list-style: none;
}

.ui-team-card-focus li{
	padding: 3px 10px;
	border-radius: 999px;
	background: rgba(0, 145, 200, .1);
	font-size: 12px;
	font-weight: 600;
	color: var(--ui-accent-ink);
}

/* Process steps */
.ui-process{
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px var(--ui-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ui-process-step{
	padding-top: 28px;
	border-top: 1px solid var(--ui-line-dark);
}

.ui-process-step-head{
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 24px;
}

.ui-process-step-icon{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .08);
}

.ui-process-step-icon img{
	width: 26px;
	height: 26px;
}

.ui-process-step-no{
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ui-accent-light);
}

.ui-process-step h3{
	font-size: var(--ui-fs-h3);
	margin: 0 0 10px;
}

.ui-process-step p{
	margin: 0;
	font-size: 16px;
}

/* Process steps: card variant (home / about) */
.ui-process-cards{
	gap: 20px var(--ui-gap);
}

.ui-process-cards .ui-process-step{
	position: relative;
	padding: 32px 28px;
	border: 1px solid var(--ui-line-dark);
	border-top: 3px solid var(--ui-accent);
	border-radius: var(--ui-radius);
	background: var(--ui-ink-raised);
}

.ui-process-cards .ui-process-step-icon{
	width: 56px;
	height: 56px;
	border-radius: var(--ui-radius-sm);
	background: rgba(0, 145, 200, .18);
}

.ui-process-cards .ui-process-step h3{
	color: #fff;
}

@media (min-width: 992px){
	.ui-process-cards .ui-process-step:not(:last-child)::after{
		content: "\2192";
		position: absolute;
		top: 48px;
		right: calc(var(--ui-gap) / -2 - 14px);
		z-index: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 28px;
		height: 28px;
		border-radius: 50%;
		background: var(--ui-accent);
		color: #fff;
		font-size: 15px;
		line-height: 1;
	}
}

/* Intro / capabilities / panels */
.ui-capabilities{
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ui-capabilities li{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 40px;
	min-height: 168px;
	padding: 28px;
	border-radius: var(--ui-radius);
	background: var(--ui-surface);
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--ui-ink);
}

.ui-capabilities li span{
	font-size: 14px;
	color: var(--ui-accent-ink);
}

.ui-panel{
	padding: clamp(28px, 3vw, 40px);
	border: 1px solid var(--ui-line);
	border-radius: var(--ui-radius);
	background: #FFF;
}

.ui-panel-dark{
	border-color: var(--ui-ink);
	background: var(--ui-ink);
}

.ui-panel-text{
	margin: 0;
	font-size: 1.125rem;
	line-height: 1.6;
	color: var(--ui-ink);
}

.ui-panel-dark .ui-panel-text{
	color: rgba(255, 255, 255, .85);
}

.ui-checklist{
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px 32px;
	margin: 0 0 32px;
	padding: 0;
	list-style: none;
}

.ui-checklist li{
	position: relative;
	padding-left: 34px;
	color: var(--ui-ink);
	font-weight: 500;
}

.ui-checklist li::before{
	content: '';
	position: absolute;
	top: 3px;
	left: 0;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: rgba(0, 145, 200, .12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300729E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat;
}

/* About page -------------------------------------------------------------------------- */
/* Hero motto: three short statements separated by brand-blue dots */
.ui-about-motto{
	display: flex;
	flex-wrap: wrap;
	gap: 10px 0;
	margin: 28px 0 0;
	padding: 0;
	list-style: none;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #FFF;
}

.ui-about-motto li{
	display: inline-flex;
	align-items: center;
}

.ui-about-motto li + li::before{
	content: '';
	width: 6px;
	height: 6px;
	margin: 0 16px;
	border-radius: 50%;
	background: var(--ui-accent-light);
}

/* Compact vertical rhythm for every About section (as Our Team / Why on Home) */
.ui-section.ui-about-story,
.ui-section.ui-about-who,
.ui-section.ui-about-purpose,
.ui-section.ui-about-ceo,
.ui-section.ui-about-why{
	padding-block: clamp(48px, 5.5vw, 80px);
}

.ui-about-purpose .ui-section-head{
	margin-bottom: clamp(28px, 3.5vw, 44px);
}

/* Story: centred intro over a bento grid (photo, then → today stages, closing tile) */
.ui-about-story-intro{
	max-width: 760px;
	margin-bottom: clamp(28px, 3.5vw, 44px);
}

.ui-about-story-intro .ui-h2{
	margin-bottom: 16px;
}

.ui-about-story-lead{
	margin: 0;
	font-size: var(--ui-fs-lead);
	line-height: 1.65;
	color: var(--ui-text);
}

.ui-about-bento{
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}

.ui-about-bento > *{
	border-radius: var(--ui-radius-lg);
}

.ui-about-bento-media{
	position: relative;
	margin: 0;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	box-shadow: var(--ui-shadow);
}

.ui-about-bento-media img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 30%;
	transition: transform 1.2s var(--ui-ease);
}

.ui-about-bento-media:hover img{
	transform: scale(1.04);
}

.ui-about-bento-media::after{
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(16, 24, 40, 0) 55%, rgba(16, 24, 40, .55) 100%);
	pointer-events: none;
}

/* Frosted caption: a positioning line, not a claim */
.ui-about-bento-caption{
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: 16px;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px 12px 12px;
	border: 1px solid rgba(255, 255, 255, .25);
	border-radius: var(--ui-radius-sm);
	background: rgba(16, 24, 40, .45);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
	color: #FFF;
}

.ui-about-bento-caption-icon{
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 10px;
	background: var(--ui-accent);
	font-size: 15px;
}

/* Stage tiles: "where we started" on a light surface, "today" on brand navy */
.ui-about-stage{
	position: relative;
	display: flex;
	flex-direction: column;
	padding: clamp(22px, 2.4vw, 30px);
	border: 1px solid var(--ui-line);
	background: var(--ui-surface);
	transition: transform .35s var(--ui-ease), box-shadow .35s var(--ui-ease);
}

.ui-about-stage:hover{
	transform: translateY(-4px);
	box-shadow: var(--ui-shadow);
}

.ui-about-stage-top{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: auto;
	padding-bottom: 28px;
}

.ui-about-stage-icon{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 14px;
	background: var(--ui-page);
	box-shadow: var(--ui-shadow);
	color: var(--ui-accent-ink);
	font-size: 19px;
}

.ui-about-stage-label{
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ui-muted);
}

.ui-about-stage-title{
	margin: 0 0 6px;
	font-size: var(--ui-fs-h3);
	line-height: 1.3;
	color: var(--ui-ink);
}

.ui-about-stage p{
	margin: 0;
	font-size: 15px;
	color: var(--ui-text);
}

.ui-about-stage.is-current{
	overflow: hidden;
	border-color: transparent;
	background: var(--ui-ink);
}

/* Connector from "where we started" to "today": points down when stacked, right when side by side */
.ui-about-stage-next{
	position: absolute;
	left: 50%;
	bottom: -26px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 4px solid var(--ui-page);
	border-radius: 50%;
	background: var(--ui-accent);
	color: #FFF;
	font-size: 13px;
	transform: translateX(-50%) rotate(90deg);
}

/* Soft brand-blue glow in the corner of the "today" tile */
.ui-about-stage.is-current::before{
	content: '';
	position: absolute;
	top: -90px;
	right: -90px;
	width: 240px;
	height: 240px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(0, 145, 200, .55) 0%, rgba(0, 145, 200, 0) 70%);
	pointer-events: none;
	animation: ui-about-glow 6s ease-in-out infinite alternate;
}

.ui-about-stage.is-current > *{
	position: relative;
}

.ui-about-stage.is-current .ui-about-stage-icon{
	background: var(--ui-accent);
	box-shadow: none;
	color: #FFF;
}

.ui-about-stage.is-current .ui-about-stage-label{
	color: var(--ui-accent-light);
}

.ui-about-stage.is-current .ui-about-stage-title{
	color: #FFF;
}

.ui-about-stage.is-current p{
	color: rgba(255, 255, 255, .72);
}

@keyframes ui-about-glow{
	from{ opacity: .6; transform: scale(.9); }
	to{ opacity: 1; transform: scale(1.1); }
}

/* Closing tile: the rest of the story, the four promises and the next step */
.ui-about-bento-story{
	padding: clamp(22px, 2.6vw, 34px);
	border: 1px solid var(--ui-line);
	background: var(--ui-page);
	box-shadow: var(--ui-shadow);
}

.ui-about-bento-text{
	margin: 0 0 20px;
	font-size: 16px;
	line-height: 1.7;
	color: var(--ui-text);
}

.ui-about-promises{
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px 24px;
	margin: 0 0 24px;
	padding: 20px 0 0;
	border-top: 1px solid var(--ui-line);
	list-style: none;
}

.ui-about-promises li{
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--ui-ink);
}

.ui-about-promise-icon{
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: rgba(0, 145, 200, .1);
	color: var(--ui-accent-ink);
	font-size: 14px;
}

/* Who We Are: intro + supplier comparison beside a 2×2 grid of capability pillars */
.ui-about-who-grid{
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
	align-items: center;
}

.ui-about-who-intro .ui-lead{
	margin-top: 16px;
}

.ui-about-compare{
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
	margin-top: 24px;
}

.ui-about-compare-col{
	padding: 16px 18px;
	border: 1px dashed #C9D3DD;
	border-radius: var(--ui-radius-sm);
	background: transparent;
}

.ui-about-compare-col h3{
	margin: 0 0 10px;
	font-size: 13px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ui-muted);
}

.ui-about-compare-col ul{
	display: grid;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 15px;
	line-height: 1.5;
}

.ui-about-compare-col li{
	position: relative;
	padding-left: 22px;
}

.ui-about-compare-col li::before{
	content: '\2013';
	position: absolute;
	left: 4px;
	color: var(--ui-muted);
}

.ui-about-compare-col-us{
	border: 1px solid var(--ui-accent);
	background: var(--ui-page);
	box-shadow: var(--ui-shadow);
}

.ui-about-compare-col-us h3{
	color: var(--ui-accent-ink);
}

.ui-about-compare-col-us li{
	color: var(--ui-ink);
	font-weight: 500;
}

.ui-about-compare-col-us li::before{
	content: '\2713';
	left: 0;
	font-weight: 700;
	color: var(--ui-accent);
}

.ui-about-pillars{
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ui-about-pillar{
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 18px;
	min-height: 150px;
	padding: 22px 24px;
	overflow: hidden;
	border: 1px solid var(--ui-line);
	border-radius: var(--ui-radius);
	background: var(--ui-page);
	transition: transform .3s var(--ui-ease), box-shadow .3s var(--ui-ease), border-color .3s var(--ui-ease);
}

/* Brand-blue bar that grows along the top edge on hover */
.ui-about-pillar::after{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 3px;
	background: var(--ui-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .4s var(--ui-ease);
}

.ui-about-pillar:hover{
	transform: translateY(-4px);
	border-color: rgba(0, 145, 200, .45);
	box-shadow: var(--ui-shadow);
}

.ui-about-pillar:hover::after{
	transform: scaleX(1);
}

.ui-about-pillar-icon{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 14px;
	background: rgba(0, 145, 200, .1);
	color: var(--ui-accent-ink);
	font-size: 22px;
	transition: background-color .3s var(--ui-ease), color .3s var(--ui-ease);
}

.ui-about-pillar:hover .ui-about-pillar-icon{
	background: var(--ui-accent);
	color: #FFF;
}

.ui-about-pillar-no{
	position: absolute;
	top: 24px;
	right: 26px;
	font-size: 14px;
	font-weight: 600;
	color: var(--ui-muted);
	font-variant-numeric: tabular-nums;
}

.ui-about-pillar p{
	margin: auto 0 0;
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.015em;
	color: var(--ui-ink);
}

/* Mission & Vision: navy and brand-blue statement cards, principles strip underneath */
.ui-about-purpose-grid{
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ui-gap);
}

.ui-about-purpose-card{
	position: relative;
	padding: clamp(24px, 3vw, 36px);
	overflow: hidden;
	border-radius: var(--ui-radius-lg);
	color: rgba(255, 255, 255, .82);
	isolation: isolate;
}

/* Soft ring in the corner as a quiet graphic accent */
.ui-about-purpose-card::before{
	content: '';
	position: absolute;
	top: -90px;
	right: -90px;
	z-index: -1;
	width: 260px;
	height: 260px;
	border: 40px solid rgba(255, 255, 255, .06);
	border-radius: 50%;
}

.ui-about-purpose-card-mission{
	background: var(--ui-ink);
}

.ui-about-purpose-card-vision{
	background: linear-gradient(135deg, var(--ui-accent) 0%, var(--ui-accent-ink) 100%);
	color: rgba(255, 255, 255, .92);
}

.ui-about-purpose-icon{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin-bottom: 18px;
	border-radius: 16px;
	background: rgba(255, 255, 255, .12);
	color: #FFF;
	font-size: 22px;
}

.ui-about-purpose-card-mission .ui-about-purpose-icon{
	background: rgba(0, 145, 200, .25);
	color: var(--ui-accent-light);
}

.ui-about-purpose-card h3{
	margin: 0 0 10px;
	font-size: 1.375rem;
	color: #FFF;
}

.ui-about-purpose-card p{
	margin: 0;
	font-size: var(--ui-fs-lead);
	line-height: 1.6;
}

.ui-about-values{
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-top: 20px;
	padding: 16px 22px;
	border: 1px solid var(--ui-line);
	border-radius: var(--ui-radius);
	background: var(--ui-surface);
}

.ui-about-values-title{
	flex-shrink: 0;
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
	color: var(--ui-ink);
}

.ui-about-values-list{
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ui-about-values-list li{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	border: 1px solid var(--ui-line);
	border-radius: 999px;
	background: var(--ui-page);
	font-size: 14px;
	font-weight: 600;
	color: var(--ui-ink);
}

.ui-about-values-list i{
	color: var(--ui-accent);
}

/* CEO Profile: centred head over one white card; framed portrait (or monogram) beside name, role, bio and links */

/* Dash on both sides of the centred label */

/* Soft brand-blue glow in the corner behind the copy */

/* Hairline inside the photo edge so light portraits keep a crisp outline */

/* No photo yet: initials on brand navy with a fine dot grid */

/* Oversized quote mark as a quiet watermark */

/* Designation as a brand pill under the name */

/* CEO Profile: full-bleed navy feature. Portrait with an offset brand frame and a floating nameplate beside the
   introduction and a pull-quote panel; a ghosted "CEO" watermark and a soft brand glow sit behind. */
.ui-section.ui-about-ceo{
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background:
		radial-gradient(900px 520px at 8% 0%, rgba(0, 145, 200, .28), transparent 60%),
		radial-gradient(700px 480px at 100% 100%, rgba(108, 205, 242, .12), transparent 60%),
		radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px) 0 0 / 26px 26px,
		linear-gradient(160deg, var(--ui-ink) 0%, #0B1220 100%);
}

.ui-about-ceo-watermark{
	position: absolute;
	right: -2vw;
	bottom: -.22em;
	z-index: -1;
	color: transparent;
	-webkit-text-stroke: 1px rgba(255, 255, 255, .08);
	font-size: clamp(9rem, 26vw, 24rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.04em;
	pointer-events: none;
	user-select: none;
}

.ui-about-ceo-layout{
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(40px, 6vw, 72px);
	align-items: center;
}

.ui-about-ceo-visual{
	position: relative;
	width: 100%;
	max-width: 400px;
	margin: 0 auto;
	padding: 0 0 36px;
}

/* Offset frame behind the portrait */
.ui-about-ceo-visual::before{
	content: '';
	position: absolute;
	inset: 22px -18px 14px 22px;
	border: 2px solid var(--ui-accent);
	border-radius: var(--ui-radius-lg);
	opacity: .55;
	transition: transform .6s var(--ui-ease), opacity .6s var(--ui-ease);
}

.ui-about-ceo-visual:hover::before{
	transform: translate(6px, 6px);
	opacity: .9;
}

.ui-about-ceo-media{
	position: relative;
	margin: 0;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: var(--ui-radius-lg);
	background: var(--ui-ink-raised);
	box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .55);
}

.ui-about-ceo-media::after{
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(180deg, transparent 60%, rgba(16, 24, 40, .35) 100%);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
	pointer-events: none;
}

.ui-about-ceo-media img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	transition: transform .9s var(--ui-ease);
}

.ui-about-ceo-visual:hover .ui-about-ceo-media img{
	transform: scale(1.04);
}

.ui-about-ceo-media-empty{
	display: flex;
	align-items: center;
	justify-content: center;
}

.ui-about-ceo-monogram{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 132px;
	height: 132px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--ui-accent) 0%, var(--ui-accent-ink) 100%);
	box-shadow: 0 0 0 12px rgba(0, 145, 200, .18);
	color: #FFF;
	font-size: 2.75rem;
	font-weight: 600;
	letter-spacing: .04em;
}

/* Nameplate floating over the lower edge of the portrait */
.ui-about-ceo-plate{
	position: absolute;
	right: 16px;
	bottom: 0;
	left: 16px;
	z-index: 1;
	padding: 16px 20px;
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: var(--ui-radius);
	background: rgba(16, 24, 40, .72);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .6);
}

.ui-about-ceo-name{
	margin: 0 0 4px;
	color: #FFF;
	font-size: clamp(1.375rem, 1.15rem + .8vw, 1.75rem);
	font-weight: 600;
	line-height: 1.15;
}

.ui-about-ceo-role{
	margin: 0;
	color: var(--ui-accent-light);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.ui-about-ceo-content{
	min-width: 0;
}

.ui-about-ceo-content .ui-h2{
	margin-bottom: 24px;
	color: #FFF;
}

.ui-about-ceo-content .ui-eyebrow{
	color: var(--ui-accent-light);
}

.ui-about-ceo-bio p{
	margin: 0 0 16px;
	color: rgba(255, 255, 255, .78);
	font-size: 1.0625rem;
	line-height: 1.75;
}

/* First paragraph reads as the lead */
.ui-about-ceo-bio p:first-child{
	color: #FFF;
	font-size: clamp(1.125rem, 1.05rem + .35vw, 1.3125rem);
	line-height: 1.6;
}

.ui-about-ceo-bio p:last-child{
	margin-bottom: 0;
}

/* Pull-quote panel */
.ui-about-ceo-message{
	position: relative;
	margin: 32px 0 0;
	padding: 28px 28px 24px 32px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: var(--ui-radius);
	background: linear-gradient(135deg, rgba(0, 145, 200, .22) 0%, rgba(255, 255, 255, .04) 100%);
	transition: transform .4s var(--ui-ease), border-color .4s var(--ui-ease);
}

.ui-about-ceo-message::before{
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 4px;
	background: linear-gradient(180deg, var(--ui-accent-light), var(--ui-accent));
}

.ui-about-ceo-message:hover{
	transform: translateY(-3px);
	border-color: rgba(108, 205, 242, .45);
}

.ui-about-ceo-quote{
	display: block;
	margin-bottom: 10px;
	color: var(--ui-accent-light);
	font-size: 28px;
	line-height: 1;
}

.ui-about-ceo-message p{
	margin: 0;
	color: #FFF;
	font-size: clamp(1.125rem, 1.05rem + .4vw, 1.375rem);
	font-style: italic;
	font-weight: 500;
	line-height: 1.55;
}

.ui-about-ceo-message footer{
	margin-top: 16px;
	color: var(--ui-accent-light);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.ui-about-ceo-social{
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 28px 0 0;
	padding: 0;
	list-style: none;
}

.ui-about-ceo-social a{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: 50%;
	color: #FFF;
	font-size: 17px;
	transition: transform .3s var(--ui-ease), background-color .3s var(--ui-ease), border-color .3s var(--ui-ease);
}

.ui-about-ceo-social a:hover,
.ui-about-ceo-social a:focus-visible{
	transform: translateY(-3px);
	border-color: var(--ui-accent);
	background: var(--ui-accent);
}

@media (min-width: 992px){
	.ui-about-ceo-layout{
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	}

	.ui-about-ceo-visual{
		max-width: none;
		margin: 0;
	}
}

@media (max-width: 575.98px){
	.ui-about-ceo-visual{
		padding-bottom: 44px;
	}

	.ui-about-ceo-visual::before{
		inset: 18px -8px 14px 14px;
	}

	.ui-about-ceo-message{
		padding: 22px 20px 20px 24px;
	}
}

@media (prefers-reduced-motion: reduce){
	.ui-about-ceo-visual::before,
	.ui-about-ceo-media img,
	.ui-about-ceo-message{
		transition: none;
	}

	.ui-about-ceo-visual:hover .ui-about-ceo-media img,
	.ui-about-ceo-message:hover,
	.ui-about-ceo-visual:hover::before{
		transform: none;
	}
}

/* Ambient background: a slow cinematic scene behind the content of every flat-navy band (<x-ambient-bg />; aria-hidden,
   transform/opacity-only animation, no reflow). Three wave layers drift at different speeds for depth; two soft beams sweep across.
   The host just needs its own stacking context so the z-index:-1 layer stays above the band's background. */
.ui-section-dark,
.google-reviews{
	position: relative;
	isolation: isolate;
}

.ui-ambient{
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	pointer-events: none;
}

/* Each wave is two seamless tiles wide and slides exactly one tile, so the loop never jumps */
.ui-ambient-wave{
	position: absolute;
	left: 0;
	width: 200%;
	will-change: transform;
	--wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 200' preserveAspectRatio='none'%3E%3Cpath d='M0 100C200 40 400 40 600 100S1000 160 1200 100V200H0Z' fill='%230091C8'/%3E%3C/svg%3E");
	-webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 100%);
	mask-image: linear-gradient(180deg, #000 0%, transparent 100%);
}

.ui-ambient-wave::before{
	content: '';
	position: absolute;
	inset: 0;
	background: var(--wave) repeat-x 0 0 / 50% 100%;
}

.ui-ambient-wave-back{
	bottom: 18%;
	height: 46%;
	opacity: .10;
	animation: ui-ambient-wave 90s linear infinite;
}

.ui-ambient-wave-mid{
	bottom: 6%;
	height: 40%;
	opacity: .13;
	animation: ui-ambient-wave 64s linear infinite reverse;
}

.ui-ambient-wave-front{
	bottom: -4%;
	height: 34%;
	opacity: .17;
	animation: ui-ambient-wave 46s linear infinite;
}

.ui-ambient-beam{
	position: absolute;
	top: -30%;
	bottom: -30%;
	width: 34%;
	background: linear-gradient(90deg, transparent 0%, rgba(108, 205, 242, .10) 50%, transparent 100%);
	opacity: 0;
	transform: translate3d(-60vw, 0, 0) rotate(18deg);
	will-change: transform, opacity;
}

.ui-ambient-beam-1{
	left: 20%;
	animation: ui-ambient-beam 24s ease-in-out infinite;
}

.ui-ambient-beam-2{
	left: 45%;
	width: 22%;
	animation: ui-ambient-beam 32s ease-in-out -12s infinite;
}

@keyframes ui-ambient-wave{
	to{ transform: translate3d(-50%, 0, 0); }
}

@keyframes ui-ambient-beam{
	0%{ transform: translate3d(-40vw, 0, 0) rotate(18deg); opacity: 0; }
	30%, 70%{ opacity: 1; }
	100%{ transform: translate3d(60vw, 0, 0) rotate(18deg); opacity: 0; }
}

/* One beam is plenty on small screens */
@media (max-width: 767.98px){
	.ui-ambient-beam-2{
		display: none;
	}
}

@media (prefers-reduced-motion: reduce){
	.ui-ambient-wave,
	.ui-ambient-beam{
		animation: none;
		will-change: auto;
	}

	.ui-ambient-beam{
		display: none;
	}
}

/* Why Choose Us: sticky intro + image beside a two-column list of reasons */
.ui-about-why-grid{
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
}

.ui-about-why-intro .ui-lead{
	margin-top: 16px;
}

.ui-about-why-media{
	margin: 24px 0 0;
	overflow: hidden;
	aspect-ratio: 16 / 10;
	border-radius: var(--ui-radius-lg);
}

.ui-about-why-media img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .8s var(--ui-ease);
}

.ui-about-why-media:hover img{
	transform: scale(1.04);
}

.ui-about-why-list{
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* About uses the shared reason card at a slightly tighter size */
.ui-about-why-list .ui-why-card{
	padding: 22px 22px;
}

@media (min-width: 576px){
	.ui-about-pillars,
	.ui-about-compare,
	.ui-about-why-list,
	.ui-about-promises{
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ui-about-bento{
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ui-about-bento-media,
	.ui-about-bento-story{
		grid-column: 1 / -1;
	}

	.ui-about-stage-next{
		top: 50%;
		left: auto;
		right: -26px;
		bottom: auto;
		transform: translateY(-50%);
	}
}

@media (min-width: 768px){
	.ui-about-story-intro{
		margin-inline: auto;
		text-align: center;
	}

	.ui-about-story-intro .ui-eyebrow{
		justify-content: center;
	}

	.ui-about-bento-media{
		aspect-ratio: 16 / 8;
	}

	.ui-about-purpose-grid{
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ui-about-values{
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}

@media (min-width: 992px){
	/* Photo spans both rows on the left; stages sit side by side above the closing tile */
	.ui-about-bento{
		grid-template-columns: minmax(0, 5fr) minmax(0, 3.5fr) minmax(0, 3.5fr);
		gap: 20px;
	}

	.ui-about-bento-media{
		grid-column: 1;
		grid-row: 1 / span 2;
		aspect-ratio: auto;
		min-height: 100%;
	}

	.ui-about-bento-story{
		grid-column: 2 / -1;
	}

	.ui-about-who-grid{
		grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
		gap: 48px;
	}

	.ui-about-why-grid{
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		gap: 48px;
		align-items: start;
	}

	/* Intro stays in view while the reasons scroll past */
	.ui-about-why-intro{
		position: sticky;
		top: 120px;
	}
}

@media (max-width: 575px){
	.ui-about-bento-caption{
		font-size: 14px;
	}

	.ui-about-motto{
		font-size: 13px;
	}

	.ui-about-motto li + li::before{
		margin: 0 10px;
	}

	/* Photo is supporting only; dropped on phones to keep the reasons close to the heading */
	.ui-about-why-media{
		display: none;
	}

	.ui-about-why-list .ui-why-card{
		padding: 18px;
	}

	/* Pillars become compact rows: icon beside the label */
	.ui-about-pillar{
		flex-direction: row;
		align-items: center;
		gap: 16px;
		min-height: 0;
		padding: 16px 18px;
	}

	.ui-about-pillar-no{
		display: none;
	}

	.ui-about-pillar p{
		margin: 0;
		font-size: 1.0625rem;
	}

	.ui-about-pillars{
		gap: 12px;
	}

}

/* FAQ */
.faq-accordion .accordion-item{
	margin-bottom: 12px;
	border: 1px solid var(--ui-line);
	border-radius: 16px;
	background: #FFF;
	transition: border-color .25s var(--ui-ease);
}

.faq-accordion .accordion-item:has(.accordion-button:not(.collapsed)){
	border-color: rgba(0, 145, 200, .45);
}

.faq-accordion .accordion-header{
	margin: 0;
}

.faq-accordion .accordion-header .accordion-button{
	padding: 22px 60px 22px 24px;
	font-size: 17px;
	line-height: 1.45;
	box-shadow: none;
}

.faq-accordion .accordion-item .accordion-body{
	padding: 0 24px 24px;
}

.faq-accordion .accordion-item .accordion-body p{
	color: var(--ui-text);
}

/* Home FAQs (after Blogs): compact spacing matching Our Team; navy intro card beside an icon-led accordion */
.ui-section.ui-faqs{
	padding-block: clamp(40px, 4.5vw, 64px);
}

.ui-faqs-layout{
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 20px;
}

.ui-faqs-intro{
	position: relative;
	overflow: hidden;
	padding: clamp(28px, 3.2vw, 40px);
	border-radius: var(--ui-radius-lg);
	background:
		radial-gradient(120% 80% at 100% 0%, rgba(0, 145, 200, .32) 0%, rgba(0, 145, 200, 0) 60%),
		var(--ui-ink);
	color: rgba(255, 255, 255, .72);
	isolation: isolate;
}

/* Oversized question mark as a quiet watermark */
.ui-faqs-intro::after{
	content: '?';
	position: absolute;
	right: -12px;
	bottom: -64px;
	z-index: -1;
	font-size: 240px;
	font-weight: 700;
	line-height: 1;
	color: rgba(255, 255, 255, .04);
	pointer-events: none;
}

.ui-faqs-intro .ui-eyebrow{
	margin-bottom: 8px;
}

.ui-faqs-intro .ui-h2{
	margin: 0;
	font-size: clamp(1.625rem, 2.6vw, 2.125rem);
	color: #FFF;
}

.ui-faqs-lead{
	margin: 12px 0 20px;
	font-size: 16px;
	line-height: 1.55;
}

.ui-faqs-points{
	display: grid;
	gap: 10px;
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
	font-size: 15px;
	color: rgba(255, 255, 255, .88);
}

.ui-faqs-points li{
	display: flex;
	align-items: center;
	gap: 10px;
}

.ui-faqs-points i{
	display: inline-grid;
	place-items: center;
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: rgba(108, 205, 242, .16);
	color: var(--ui-accent-light);
	font-size: 11px;
}

.ui-faqs-actions{
	padding-top: 20px;
	border-top: 1px solid var(--ui-line-dark);
}

.ui-faqs-actions p{
	margin: 0 0 12px;
	font-size: 15px;
	font-weight: 600;
	color: #FFF;
}

.ui-faqs-actions .btn-default{
	border-color: #FFF;
}

/* Accordion */
.ui-faqs-list{
	display: grid;
	gap: 12px;
	align-content: start;
}

.ui-faqs-item{
	border: 1px solid var(--ui-line);
	border-radius: var(--ui-radius);
	background: var(--ui-page);
	transition: border-color .3s var(--ui-ease), box-shadow .3s var(--ui-ease), background-color .3s var(--ui-ease);
}

.ui-faqs-item:hover{
	border-color: rgba(0, 145, 200, .35);
}

.ui-faqs-item:has(.ui-faqs-trigger:not(.collapsed)){
	border-color: rgba(0, 145, 200, .45);
	background: linear-gradient(180deg, rgba(0, 145, 200, .05) 0%, rgba(0, 145, 200, 0) 100%), var(--ui-page);
	box-shadow: var(--ui-shadow);
}

.ui-faqs-question{
	margin: 0;
	font-size: inherit;
}

.ui-faqs-trigger{
	display: flex;
	align-items: center;
	gap: 16px;
	width: 100%;
	padding: 16px 18px;
	border: 0;
	border-radius: var(--ui-radius);
	background: none;
	text-align: left;
	cursor: pointer;
}

.ui-faqs-trigger:focus-visible{
	outline: 2px solid var(--ui-accent);
	outline-offset: 2px;
}

.ui-faqs-icon{
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 42px;
	height: 42px;
	border-radius: var(--ui-radius-sm);
	background: var(--ui-surface);
	color: var(--ui-accent-ink);
	font-size: 16px;
	transition: background-color .3s var(--ui-ease), color .3s var(--ui-ease), transform .3s var(--ui-ease);
}

.ui-faqs-q{
	flex: 1;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--ui-ink);
	transition: color .3s var(--ui-ease);
}

/* Plus that turns into a minus: two bars, the vertical one rotates flat */
.ui-faqs-toggle{
	position: relative;
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	border: 1px solid var(--ui-line);
	border-radius: 50%;
	transition: background-color .3s var(--ui-ease), border-color .3s var(--ui-ease), transform .4s var(--ui-ease);
}

.ui-faqs-toggle::before,
.ui-faqs-toggle::after{
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 12px;
	height: 2px;
	margin: -1px 0 0 -6px;
	border-radius: 2px;
	background: var(--ui-ink);
	transition: transform .4s var(--ui-ease), background-color .3s var(--ui-ease);
}

.ui-faqs-toggle::after{
	transform: rotate(90deg);
}

.ui-faqs-trigger:hover .ui-faqs-q{
	color: var(--ui-accent-ink);
}

.ui-faqs-trigger:hover .ui-faqs-icon{
	transform: scale(1.05);
}

.ui-faqs-trigger:not(.collapsed) .ui-faqs-icon{
	background: var(--ui-accent);
	color: #FFF;
}

.ui-faqs-trigger:not(.collapsed) .ui-faqs-toggle{
	border-color: var(--ui-ink);
	background: var(--ui-ink);
	transform: rotate(180deg);
}

.ui-faqs-trigger:not(.collapsed) .ui-faqs-toggle::before,
.ui-faqs-trigger:not(.collapsed) .ui-faqs-toggle::after{
	background: #FFF;
}

.ui-faqs-trigger:not(.collapsed) .ui-faqs-toggle::after{
	transform: rotate(0deg);
}

/* Answer sits under the question text and fades in alongside Bootstrap's height transition */
.ui-faqs-item .collapsing{
	transition: height .35s var(--ui-ease);
}

.ui-faqs-answer{
	margin: 0;
	padding: 0 64px 20px 76px;
	font-size: 16px;
	line-height: 1.6;
	color: var(--ui-text);
	opacity: 0;
	transform: translateY(-6px);
	transition: opacity .35s var(--ui-ease), transform .35s var(--ui-ease);
}

.ui-faqs-item .collapse.show .ui-faqs-answer{
	opacity: 1;
	transform: none;
}

@media (min-width: 992px){
	.ui-faqs-layout{
		grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
		gap: 32px;
		align-items: start;
	}

	.ui-faqs-intro{
		position: sticky;
		top: 120px;
	}
}

@media (min-width: 768px) and (max-width: 991.98px){
	/* Tablet: intro copy and actions side by side so the card stays short */
	.ui-faqs-intro{
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: 32px;
	}

	.ui-faqs-intro > .ui-eyebrow,
	.ui-faqs-intro > .ui-h2,
	.ui-faqs-intro > .ui-faqs-lead{
		grid-column: 1;
	}

	.ui-faqs-points{
		grid-column: 2;
		grid-row: 1 / span 3;
		align-self: center;
		margin: 0;
	}

	.ui-faqs-actions{
		grid-column: 1 / -1;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: 12px 24px;
	}

	.ui-faqs-actions p{
		margin: 0;
	}
}

@media (max-width: 575px){
	.ui-faqs-trigger{
		gap: 12px;
		padding: 14px;
	}

	.ui-faqs-icon{
		width: 36px;
		height: 36px;
		font-size: 14px;
	}

	.ui-faqs-q{
		font-size: 16px;
	}

	.ui-faqs-toggle{
		width: 28px;
		height: 28px;
	}

	.ui-faqs-answer{
		padding: 0 14px 16px 62px;
		font-size: 15px;
	}

	.ui-faqs-actions .ui-btn-group > *{
		flex: 1 1 100%;
		text-align: center;
	}
}

@media (prefers-reduced-motion: reduce){
	.ui-faqs-answer{
		opacity: 1;
		transform: none;
	}
}

/* Home trusted clients (after Home FAQs): surface band with an edge-faded, auto-scrolling strip of plain logos */
.ui-clients{
	padding-block: clamp(48px, 5.5vw, 80px);
	background: var(--ui-page);
	overflow: hidden;
}

.ui-clients .ui-section-head{
	margin-bottom: clamp(28px, 3.5vw, 44px);
}

.ui-clients-marquee{
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
}

.ui-clients-track{
	display: flex;
	width: max-content;
	animation: ui-clients-scroll 36s linear infinite;
}

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

.ui-clients-list{
	display: flex;
	flex-shrink: 0;
	align-items: center;
	gap: clamp(32px, 4.5vw, 72px);
	margin: 0;
	padding: 0 clamp(16px, 2.25vw, 36px);
	list-style: none;
}

/* Logos sit directly on the band in uniform slots, so wide and tall marks read at a similar weight */
.ui-clients-item{
	display: grid;
	place-items: center;
	width: clamp(140px, 13vw, 190px);
	height: clamp(72px, 7vw, 96px);
	transition: transform .3s var(--ui-ease);
}

.ui-clients-item:hover{
	transform: scale(1.06);
}

/* Explicit max-height: a percentage would not resolve inside the grid cell, and the global img rule resets height to auto */
.ui-clients-item img{
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: clamp(64px, 6.5vw, 92px);
	object-fit: contain;
}

.ui-clients-wordmark{
	font-size: 17px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -.01em;
	text-align: center;
	color: var(--ui-ink);
	opacity: .7;
	transition: color .3s var(--ui-ease), opacity .3s var(--ui-ease);
}

.ui-clients-item:hover .ui-clients-wordmark{
	color: var(--ui-accent-ink);
	opacity: 1;
}

@keyframes ui-clients-scroll{
	to{ transform: translateX(-50%); }
}

/* Without motion the strip becomes a static, wrapped logo grid and the duplicate list is dropped */
@media (prefers-reduced-motion: reduce){
	.ui-clients-marquee{
		-webkit-mask-image: none;
		mask-image: none;
	}

	.ui-clients-track{
		width: auto;
		justify-content: center;
		animation: none;
	}

	.ui-clients-list{
		flex-wrap: wrap;
		justify-content: center;
		flex-shrink: 1;
	}

	.ui-clients-list[aria-hidden="true"]{
		display: none;
	}
}

/* Closing CTA */
.ui-cta{
	padding: 0 0 var(--ui-section-y);
}

.ui-section-surface + .ui-cta,
.ui-section-dark + .ui-cta,
.google-reviews + .ui-cta{
	padding-top: var(--ui-section-y);
}

.ui-cta-box{
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
	align-items: end;
	padding: clamp(40px, 6vw, 80px);
	border-radius: var(--ui-radius-lg);
	background: var(--ui-ink);
	color: rgba(255, 255, 255, .78);
}

.ui-cta-box h2{
	color: #FFF;
	max-width: 16ch;
}

.ui-cta-copy p:last-child{
	max-width: 540px;
	margin: 16px 0 0;
	font-size: var(--ui-fs-lead);
}

/* Booking (closes the home page): compact surface band, navy pitch card beside a white enquiry card, as Home FAQs */
.ui-section.ui-booking{
	padding-block: clamp(40px, 4.5vw, 64px);
}

.ui-booking-grid{
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 20px;
}

.ui-booking-copy{
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding: clamp(28px, 3.2vw, 40px);
	border-radius: var(--ui-radius-lg);
	background:
		radial-gradient(120% 80% at 100% 0%, rgba(0, 145, 200, .32) 0%, rgba(0, 145, 200, 0) 60%),
		var(--ui-ink);
	color: rgba(255, 255, 255, .72);
	isolation: isolate;
}

/* Quiet phone watermark, mirroring the FAQ card's question mark */
.ui-booking-copy::after{
	content: '\f095';
	position: absolute;
	right: -24px;
	bottom: -40px;
	z-index: -1;
	font-family: 'Font Awesome 7 Free';
	font-weight: 900;
	font-size: 200px;
	line-height: 1;
	color: rgba(255, 255, 255, .04);
	transform: rotate(-12deg);
	pointer-events: none;
}

.ui-booking-copy .ui-eyebrow{
	margin-bottom: 8px;
}

.ui-booking-copy .ui-h2{
	margin: 0;
	font-size: clamp(1.625rem, 2.6vw, 2.125rem);
	color: #FFF;
}

.ui-booking-lead{
	margin: 12px 0 0;
	font-size: 16px;
	line-height: 1.55;
}

.ui-booking .ui-next-steps{
	margin-top: 24px;
	padding-top: 24px;
}

.ui-booking .ui-next-steps h3{
	margin-bottom: 14px;
	font-size: 17px;
}

.ui-booking .ui-next-steps ol{
	gap: 12px;
}

.ui-booking .ui-next-steps li{
	padding-left: 36px;
	font-size: 15px;
	line-height: 1.5;
}

.ui-booking .ui-next-steps li::before{
	top: -1px;
	width: 24px;
	height: 24px;
	font-size: 12px;
}

.ui-booking-note{
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 20px 0 0;
	padding: 14px 16px;
	border: 1px solid var(--ui-line-dark);
	border-radius: var(--ui-radius-sm);
	background: rgba(255, 255, 255, .04);
	font-size: 15px;
	line-height: 1.5;
	color: rgba(255, 255, 255, .88);
}

.ui-booking-note i{
	flex-shrink: 0;
	margin-top: 3px;
	color: var(--ui-accent-light);
}

.ui-booking-alt{
	margin-top: auto;
	padding-top: 24px;
}

.ui-booking-alt p{
	margin: 0 0 12px;
	font-size: 15px;
	font-weight: 600;
	color: #FFF;
}

/* Enquiry card: the shared form partial, tightened for this section only (contact page keeps its spacing) */
.contact-form.ui-booking-form{
	height: auto;
	padding: clamp(22px, 3vw, 36px);
	border: 1px solid var(--ui-line);
	background: #FFF;
	box-shadow: var(--ui-shadow);
}

.ui-booking-form-head{
	margin-bottom: 20px;
}

.ui-booking-form-head h3{
	margin: 0;
	font-size: 20px;
	line-height: 1.3;
}

.ui-booking-form-head p{
	margin: 4px 0 0;
	font-size: 15px;
	color: var(--ui-muted);
}

/* The template fixes row gutters at 15px; halve them so the two field columns sit closer */
.ui-booking-form .row{
	margin-inline: -8px;
}

.ui-booking-form .row > *{
	padding-inline: 8px;
}

/* Overrides the partial's Bootstrap mb-4 utility (which is !important) */
.ui-booking-form .form-group{
	margin-bottom: 16px !important;
}

.ui-booking-form .form-control{
	min-height: 50px;
	padding: 12px 18px;
	font-size: 15px;
}

.ui-booking-form select.form-control{
	padding-right: 44px;
	background-position: right 18px center;
	text-overflow: ellipsis;
}

.ui-booking-form textarea.form-control{
	min-height: 120px;
}

.ui-booking-form .contact-form-btn{
	margin-top: 4px;
}

.ui-booking-form .btn-default{
	width: 100%;
}

.ui-booking-form .form-alert-stack{
	margin-top: 16px;
}

.ui-booking-form .form-alert-stack:empty{
	display: none;
}

@media (min-width: 992px){
	.ui-booking-grid{
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		gap: 32px;
		align-items: stretch;
	}
}

@media (min-width: 768px) and (max-width: 991.98px){
	/* Tablet: pitch on the left, next steps on the right so the card stays short above the form */
	.ui-booking-copy{
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		grid-template-rows: auto auto 1fr;
		column-gap: 32px;
		align-content: start;
	}

	.ui-booking-lead{
		align-self: start;
	}

	.ui-booking-copy > .ui-eyebrow,
	.ui-booking-copy > .ui-h2,
	.ui-booking-copy > .ui-booking-lead{
		grid-column: 1;
	}

	.ui-booking .ui-next-steps{
		grid-column: 2;
		grid-row: 1 / span 3;
		align-self: center;
		margin: 0;
		padding: 0 0 0 32px;
		border-top: 0;
		border-left: 1px solid var(--ui-line-dark);
	}

	.ui-booking-note{
		grid-column: 1 / -1;
		margin-top: 24px;
	}

	.ui-booking-alt{
		grid-column: 1 / -1;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: 12px 24px;
		margin-top: 24px;
		border-top: 1px solid var(--ui-line-dark);
	}

	.ui-booking-alt p{
		margin: 0;
	}
}

@media (max-width: 575px){
	.contact-form.ui-booking-form{
		padding: 20px 16px;
	}

	.ui-booking-form-head h3{
		font-size: 18px;
	}

	.ui-booking-alt .ui-btn-outline{
		width: 100%;
	}

	.ui-booking-copy::after{
		font-size: 150px;
	}
}

/* Service detail page --------------------------------------------------------------------- */
/* Compact rhythm, as on About: the page stays short and every section earns its place */
.ui-section.ui-service-section{
	padding-block: clamp(48px, 5.5vw, 80px);
}

/* Hero: service icon chip above the heading; frosted proof badge over the cover */
.ui-service-hero-label{
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 18px;
	padding: 6px 16px 6px 6px;
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 100px;
	background: rgba(255, 255, 255, .06);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .02em;
	color: #FFF;
}

.ui-service-hero-label:not(:has(.ui-service-hero-icon)){
	padding-left: 16px;
}

.ui-service-hero-icon{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #FFF;
}

.ui-service-hero-icon img{
	width: 18px;
	height: 18px;
}

.ui-service-hero-media{
	position: relative;
	box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6);
}

.ui-service-hero-badge{
	position: absolute;
	left: 16px;
	bottom: 16px;
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: calc(100% - 32px);
	padding: 12px 18px 12px 12px;
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: var(--ui-radius-sm);
	background: rgba(16, 24, 40, .62);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	font-size: 14px;
	line-height: 1.35;
	color: rgba(255, 255, 255, .8);
}

.ui-service-hero-badge strong{
	display: block;
	font-size: 15px;
	font-weight: 600;
	color: #FFF;
}

.ui-service-hero-badge-icon{
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: linear-gradient(135deg, var(--ui-accent) 0%, var(--ui-accent-ink) 100%);
	color: #FFF;
}

/* About this service: visual with floating chip and stats beside the intro, then a row of key offerings */
.ui-service-about{
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

/* Soft brand glow behind the visual */
.ui-service-about::before{
	content: '';
	position: absolute;
	top: 18%;
	left: -12%;
	z-index: -1;
	width: min(560px, 70vw);
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(0, 145, 200, .10) 0%, rgba(0, 145, 200, 0) 70%);
	pointer-events: none;
}

.ui-service-about-head{
	margin-bottom: clamp(32px, 4vw, 48px);
}

.ui-service-about-head .ui-eyebrow::after{
	content: '';
	width: 20px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
}

.ui-service-about-grid{
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(28px, 4vw, 64px);
	align-items: center;
}

.ui-service-about-grid-text{
	max-width: 820px;
	margin-inline: auto;
}

.ui-service-about-visual{
	position: relative;
	margin: 0 0 24px;
	aspect-ratio: 5 / 4;
	border-radius: var(--ui-radius-lg);
	overflow: visible;
}

.ui-service-about-visual > img,
.ui-service-about-art{
	display: block;
	width: 100%;
	height: 100%;
	border-radius: inherit;
}

.ui-service-about-visual > img{
	object-fit: cover;
	box-shadow: 0 30px 60px -32px rgba(16, 24, 40, .45);
	transition: transform .6s var(--ui-ease), box-shadow .6s var(--ui-ease);
}

.ui-service-about-visual:hover > img{
	transform: scale(1.015);
	box-shadow: 0 36px 70px -30px rgba(16, 24, 40, .5);
}

/* Offset brand frame peeking out behind the visual */
.ui-service-about-visual::before{
	content: '';
	position: absolute;
	inset: 18px -18px -18px 18px;
	z-index: -1;
	border: 2px solid rgba(0, 145, 200, .22);
	border-radius: inherit;
	transition: transform .6s var(--ui-ease);
}

.ui-service-about-visual:hover::before{
	transform: translate(-6px, -6px);
}

/* No photo: a navy art panel built around the service icon */
.ui-service-about-art{
	position: relative;
	display: grid;
	place-items: center;
	overflow: hidden;
	background:
		radial-gradient(circle at 30% 25%, rgba(108, 205, 242, .35) 0%, rgba(108, 205, 242, 0) 45%),
		radial-gradient(rgba(255, 255, 255, .12) 1px, transparent 1px) 0 0 / 22px 22px,
		linear-gradient(145deg, var(--ui-ink-raised) 0%, var(--ui-ink) 100%);
	box-shadow: 0 30px 60px -32px rgba(16, 24, 40, .55);
}

.ui-service-about-art img{
	width: clamp(88px, 12vw, 128px);
	height: auto;
	padding: clamp(22px, 3vw, 32px);
	box-sizing: content-box;
	border-radius: 32px;
	background: #FFF;
	box-shadow: 0 0 0 14px rgba(255, 255, 255, .06), 0 0 0 30px rgba(255, 255, 255, .03);
	animation: ui-service-about-float 6s ease-in-out infinite;
}

.ui-service-about-chip{
	position: absolute;
	top: 20px;
	left: 20px;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	max-width: calc(100% - 40px);
	padding: 6px 16px 6px 6px;
	border: 1px solid rgba(255, 255, 255, .5);
	border-radius: 100px;
	background: rgba(255, 255, 255, .82);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: var(--ui-shadow);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--ui-ink);
}

.ui-service-about-chip:not(:has(.ui-service-about-chip-icon)){
	padding-left: 16px;
}

.ui-service-about-chip-icon{
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--ui-surface);
}

.ui-service-about-chip-icon img{
	width: 20px;
	height: 20px;
}

.ui-service-about-stats{
	position: absolute;
	right: -12px;
	bottom: -20px;
	display: flex;
	margin: 0;
	padding: 16px 6px;
	border: 1px solid var(--ui-line);
	border-radius: var(--ui-radius);
	background: #FFF;
	box-shadow: 0 20px 40px -20px rgba(16, 24, 40, .3);
	animation: ui-service-about-float 7s ease-in-out infinite;
}

.ui-service-about-stats > div{
	padding: 0 18px;
	text-align: center;
}

.ui-service-about-stats > div + div{
	border-left: 1px solid var(--ui-line);
}

.ui-service-about-stats dt{
	font-size: clamp(1.5rem, 1.3rem + .6vw, 1.875rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
	background: linear-gradient(135deg, var(--ui-accent) 0%, var(--ui-accent-ink) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.ui-service-about-stats dd{
	margin: 6px 0 0;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--ui-muted);
}

@keyframes ui-service-about-float{
	0%, 100%{ transform: translateY(0); }
	50%{ transform: translateY(-8px); }
}

.ui-service-about-copy p{
	margin: 0 0 14px;
	font-size: 16px;
	line-height: 1.7;
}

.ui-service-about-copy p:last-child{
	margin-bottom: 0;
}

.ui-service-about-copy .ui-service-about-lead{
	font-size: var(--ui-fs-lead);
	font-weight: 500;
	line-height: 1.55;
	color: var(--ui-ink);
}

.ui-service-fit{
	display: flex;
	align-items: flex-start;
	gap: 16px;
	margin-top: 24px;
	padding: 18px 20px;
	border: 1px solid rgba(0, 145, 200, .18);
	border-radius: var(--ui-radius);
	background: linear-gradient(135deg, rgba(0, 145, 200, .07) 0%, rgba(0, 145, 200, .02) 100%);
	transition: border-color .3s var(--ui-ease), transform .3s var(--ui-ease);
}

.ui-service-fit:hover{
	border-color: rgba(0, 145, 200, .4);
	transform: translateX(4px);
}

.ui-service-fit-icon{
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 12px;
	background: linear-gradient(135deg, var(--ui-accent) 0%, var(--ui-accent-ink) 100%);
	box-shadow: 0 8px 18px -8px rgba(0, 114, 158, .6);
	color: #FFF;
}

.ui-service-fit-label{
	margin: 0 0 4px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ui-accent-ink);
}

.ui-service-fit-text{
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	color: var(--ui-ink);
}

.ui-service-offerings{
	margin-top: clamp(48px, 5.5vw, 72px);
}

/* Centred label between two hairlines */
.ui-service-offerings-title{
	display: flex;
	align-items: center;
	gap: 18px;
	margin: 0 0 24px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .12em;
	text-align: center;
	text-transform: uppercase;
	color: var(--ui-muted);
}

.ui-service-offerings-title::before,
.ui-service-offerings-title::after{
	content: '';
	flex: 1;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--ui-line) 40%, var(--ui-line) 60%, transparent);
}

.ui-service-offerings-list{
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ui-service-offering{
	position: relative;
	height: 100%;
	padding: 26px 22px 24px;
	overflow: hidden;
	border: 1px solid var(--ui-line);
	border-radius: var(--ui-radius);
	background: #FFF;
	text-align: center;
	transition: transform .3s var(--ui-ease), box-shadow .3s var(--ui-ease), border-color .3s var(--ui-ease);
}

/* Brand-blue bar that grows out from the centre of the top edge on hover */
.ui-service-offering::before{
	content: '';
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: linear-gradient(90deg, var(--ui-accent), var(--ui-accent-light));
	transform: scaleX(0);
	transition: transform .4s var(--ui-ease);
}

.ui-service-offering:hover{
	transform: translateY(-4px);
	border-color: rgba(0, 145, 200, .35);
	box-shadow: var(--ui-shadow);
}

.ui-service-offering:hover::before{
	transform: scaleX(1);
}

.ui-service-offering-icon{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	margin-bottom: 16px;
	border-radius: 14px;
	background: var(--ui-surface);
	font-size: 15px;
	font-weight: 700;
	color: var(--ui-accent-ink);
	transition: background-color .3s var(--ui-ease), transform .3s var(--ui-ease);
}

.ui-service-offering:hover .ui-service-offering-icon{
	background: rgba(0, 145, 200, .12);
	transform: rotate(-6deg) scale(1.05);
}

.ui-service-offering-icon img{
	width: 26px;
	height: 26px;
}

.ui-service-offering h4{
	margin: 0 0 6px;
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.3;
}

.ui-service-offering p{
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
}

/* Scope: what's included (light) beside how it runs (navy); equal twins: eyebrow, title, list, footer pinned to the base */
.ui-service-scope{
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ui-gap);
}

.ui-service-scope-card{
	display: flex;
	flex-direction: column;
	padding: clamp(28px, 3.5vw, 44px);
	border: 1px solid var(--ui-line);
	border-radius: var(--ui-radius-lg);
	background: #FFF;
}

.ui-service-scope-title{
	margin: 0 0 24px;
	font-size: clamp(1.375rem, 1.2rem + .6vw, 1.75rem);
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

.ui-service-checklist{
	margin-bottom: 32px;
}

.ui-service-scope-card-dark{
	position: relative;
	overflow: hidden;
	isolation: isolate;
	border-color: var(--ui-ink);
	background: var(--ui-ink);
	color: rgba(255, 255, 255, .75);
}

.ui-service-scope-card-dark .ui-service-scope-title{
	color: #FFF;
}

/* Soft brand-blue glow in the corner */
.ui-service-scope-card-dark::before{
	content: '';
	position: absolute;
	top: -140px;
	right: -140px;
	z-index: -1;
	width: 360px;
	height: 360px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(0, 145, 200, .35) 0%, rgba(0, 145, 200, 0) 70%);
}

.ui-service-steps{
	position: relative;
	display: grid;
	gap: 22px;
	margin: 0 0 32px;
	padding: 0;
	list-style: none;
}

/* Vertical line joining the step numbers */
.ui-service-steps::before{
	content: '';
	position: absolute;
	top: 20px;
	bottom: 20px;
	left: 19px;
	width: 1px;
	background: var(--ui-line-dark);
}

.ui-service-step{
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 16px;
}

.ui-service-step-no{
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid rgba(108, 205, 242, .4);
	border-radius: 50%;
	background: var(--ui-ink-raised);
	font-size: 13px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--ui-accent-light);
}

.ui-service-step h3{
	margin: 8px 0 4px;
	font-size: 1.0625rem;
	font-weight: 600;
	color: #FFF;
}

.ui-service-step p{
	margin: 0;
	font-size: 15px;
	line-height: 1.55;
}

.ui-service-scope-foot{
	margin-top: auto;
	padding-top: 24px;
	border-top: 1px solid var(--ui-line);
}

.ui-service-scope-card-dark .ui-service-scope-foot{
	border-top-color: var(--ui-line-dark);
}

.ui-service-scope-foot-label{
	margin: 0 0 8px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ui-accent-ink);
}

.ui-service-scope-card-dark .ui-service-scope-foot-label{
	color: var(--ui-accent-light);
}

.ui-service-scope-foot-label i{
	margin-right: 6px;
}

.ui-service-scope-foot p:not(.ui-service-scope-foot-label){
	margin: 0;
}

.ui-service-scope-card-dark .ui-service-scope-foot p:not(.ui-service-scope-foot-label){
	color: rgba(255, 255, 255, .85);
}

.ui-service-scope-foot .ui-text-link{
	margin-top: 14px;
}

/* Completed projects band: brand navy with a soft blue glow behind the image-led project tiles */
.ui-service-work-section{
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background:
		radial-gradient(circle at 85% 0%, rgba(0, 145, 200, .28) 0%, rgba(0, 145, 200, 0) 45%),
		radial-gradient(circle at 0% 100%, rgba(0, 145, 200, .16) 0%, rgba(0, 145, 200, 0) 40%),
		var(--ui-ink);
}

.ui-service-work-section .ui-lead{
	color: rgba(255, 255, 255, .75);
}

/* Completed projects: every related project, 1 / 2 / 3 cards a row on mobile / tablet / desktop.
   Columns keep a fixed share of the row, so a short last row stays the same size and sits centred. */
.ui-service-work{
	--ui-service-work-cols: 1;
	display: grid;
	grid-template-columns: repeat(auto-fit, calc((100% - (var(--ui-service-work-cols) - 1) * var(--ui-gap)) / var(--ui-service-work-cols)));
	justify-content: center;
	gap: var(--ui-gap);
}

/* Image-led tile: the photo fills the card, a navy scrim carries the copy at the foot.
   The figure sits at z-index -1 inside the isolated card so the in-flow copy (and the stretched link) paint above it. */
.ui-service-project{
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: clamp(380px, 32vw, 460px);
	padding: 18px;
	overflow: hidden;
	isolation: isolate;
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: var(--ui-radius-lg);
	color: #FFF;
	background: var(--ui-ink-raised);
	box-shadow: 0 24px 48px -28px rgba(0, 0, 0, .8);
	transition: transform .4s var(--ui-ease), box-shadow .4s var(--ui-ease), border-color .4s var(--ui-ease);
}

/* Brand-blue light along the top edge, revealed on hover */
.ui-service-project::before{
	content: '';
	position: absolute;
	top: 0;
	left: 10%;
	right: 10%;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--ui-accent-light), transparent);
	opacity: 0;
	transition: opacity .4s var(--ui-ease);
}

.ui-service-project:hover{
	transform: translateY(-6px);
	border-color: rgba(108, 205, 242, .4);
	box-shadow: 0 36px 60px -28px rgba(0, 0, 0, .9), 0 0 40px -12px rgba(0, 145, 200, .45);
}

.ui-service-project:hover::before{
	opacity: 1;
}

.ui-service-project:focus-within{
	outline: 2px solid var(--ui-accent-light);
	outline-offset: 3px;
}

.ui-service-project-title a:focus-visible{
	outline: none;
}

.ui-service-project-media{
	position: absolute;
	inset: 0;
	z-index: -1;
	margin: 0;
	background: linear-gradient(160deg, var(--ui-ink-raised) 0%, var(--ui-ink) 100%);
}

.ui-service-project-media img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .8s var(--ui-ease);
}

/* Scrim: clear at the top, deep navy behind the copy */
.ui-service-project-media::after{
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(10, 17, 32, .97) 0%, rgba(10, 17, 32, .82) 32%, rgba(10, 17, 32, .2) 62%, rgba(10, 17, 32, .05) 100%);
	transition: opacity .4s var(--ui-ease);
}

.ui-service-project:hover .ui-service-project-media img{
	transform: scale(1.07);
}

.ui-service-project-top{
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}

/* Frosted chip and index, readable over any photo */
.ui-service-project-industry,
.ui-service-project-index{
	border: 1px solid rgba(255, 255, 255, .25);
	background: rgba(16, 24, 40, .45);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	color: #FFF;
}

.ui-service-project-industry{
	padding: 8px 12px;
	border-radius: 100px;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.ui-service-project-index{
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	margin-left: auto;
	border-radius: 50%;
	letter-spacing: .02em;
}

.ui-service-project-body{
	padding: 0 6px 4px;
}

.ui-service-project-title{
	margin: 0 0 8px;
	font-size: clamp(1.25rem, 1.1rem + .4vw, 1.5rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -.01em;
	color: #FFF;
}

.ui-service-project-title a{
	color: inherit;
}

.ui-service-project-body p{
	display: -webkit-box;
	margin: 0;
	overflow: hidden;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	min-height: 3.1em;	/* two lines, so titles align across a row */
	font-size: 15px;
	line-height: 1.55;
	color: rgba(255, 255, 255, .78);
}

/* Footer row: label left, round arrow right; the arrow fills brand blue and straightens on hover */
.ui-service-project-cta{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid rgba(255, 255, 255, .16);
	font-size: 15px;
	font-weight: 600;
	color: #FFF;
}

.ui-service-project-arrow{
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border: 1px solid rgba(255, 255, 255, .35);
	border-radius: 50%;
	font-size: 14px;
	transition: background-color .3s var(--ui-ease), border-color .3s var(--ui-ease), box-shadow .3s var(--ui-ease);
}

.ui-service-project-arrow i{
	transform: rotate(-45deg);
	transition: transform .35s var(--ui-ease);
}

.ui-service-project:hover .ui-service-project-arrow{
	border-color: var(--ui-accent);
	background: var(--ui-accent);
	box-shadow: 0 8px 20px -6px rgba(0, 145, 200, .9);
}

.ui-service-project:hover .ui-service-project-arrow i{
	transform: rotate(0);
}

/* Free Consultation: brand-blue split panel; the pitch sits left, a floating white booking card (over slow concentric rings) right */
.ui-section.ui-consultation-cta{
	padding-block: clamp(48px, 5.5vw, 80px);
}

.ui-consultation-panel{
	position: relative;
	display: grid;
	align-items: center;
	gap: clamp(28px, 4vw, 64px);
	padding: clamp(28px, 4.5vw, 64px);
	overflow: hidden;
	isolation: isolate;
	border-radius: var(--ui-radius-lg);
	color: rgba(255, 255, 255, .86);
	background:
		radial-gradient(55% 85% at 0% 0%, rgba(108, 205, 242, .32) 0%, rgba(108, 205, 242, 0) 70%),
		linear-gradient(125deg, var(--ui-accent-ink) 0%, #075A82 45%, var(--ui-ink) 100%);
	box-shadow: 0 40px 80px -40px rgba(0, 114, 158, .65);
}

/* Fine line grid, fading out from the top-left corner */
.ui-consultation-panel::before{
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image:
		linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px);
	background-size: 44px 44px;
	-webkit-mask-image: radial-gradient(70% 90% at 0% 0%, #000 0%, transparent 70%);
	mask-image: radial-gradient(70% 90% at 0% 0%, #000 0%, transparent 70%);
}

/* Concentric rings behind the booking card, breathing slowly */
.ui-consultation-rings{
	position: absolute;
	top: 50%;
	right: -14%;
	z-index: -1;
	width: min(760px, 95%);
	aspect-ratio: 1;
	border-radius: 50%;
	background: repeating-radial-gradient(circle, rgba(255, 255, 255, 0) 0 44px, rgba(255, 255, 255, .14) 44px 45px);
	-webkit-mask-image: radial-gradient(circle, #000 25%, transparent 70%);
	mask-image: radial-gradient(circle, #000 25%, transparent 70%);
	transform: translateY(-50%);
	animation: ui-consultation-breathe 9s ease-in-out infinite alternate;
}

@keyframes ui-consultation-breathe{
	from{ transform: translateY(-50%) scale(1); }
	to{ transform: translateY(-50%) scale(1.06); }
}

.ui-consultation-eyebrow{
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 20px;
	padding: 7px 16px;
	border: 1px solid rgba(255, 255, 255, .24);
	border-radius: 100px;
	background: rgba(255, 255, 255, .08);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #FFF;
}

/* "Open now" dot with a soft ripple */
.ui-consultation-pulse{
	position: relative;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--ui-accent-light);
}

.ui-consultation-pulse::after{
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var(--ui-accent-light);
	animation: ui-consultation-ripple 2s var(--ui-ease) infinite;
}

@keyframes ui-consultation-ripple{
	from{ transform: scale(1); opacity: .7; }
	to{ transform: scale(3); opacity: 0; }
}

.ui-consultation-title{
	margin: 0;
	font-size: clamp(2.25rem, 1.5rem + 2.6vw, 3.5rem);
	line-height: 1.05;
	letter-spacing: -.02em;
	color: #FFF;
	text-wrap: balance;
}

.ui-consultation-text{
	max-width: 520px;
	margin: 18px 0 0;
	font-size: var(--ui-fs-lead);
	line-height: 1.6;
	text-wrap: pretty;
}

/* Booking card: white, haloed, lifts on hover */
.ui-consultation-card{
	position: relative;
	padding: clamp(22px, 2.6vw, 32px);
	border-radius: var(--ui-radius);
	color: var(--ui-text);
	background: #FFF;
	box-shadow: 0 0 0 8px rgba(255, 255, 255, .08), 0 30px 60px -24px rgba(16, 24, 40, .6);
	transition: transform .4s var(--ui-ease), box-shadow .4s var(--ui-ease);
}

.ui-consultation-card:hover{
	transform: translateY(-4px);
	box-shadow: 0 0 0 10px rgba(255, 255, 255, .12), 0 40px 70px -24px rgba(16, 24, 40, .7);
}

.ui-consultation-card-head{
	display: flex;
	align-items: center;
	gap: 14px;
}

.ui-consultation-card-icon{
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 14px;
	font-size: 22px;
	color: #FFF;
	background: linear-gradient(135deg, var(--ui-accent) 0%, var(--ui-accent-ink) 100%);
	box-shadow: 0 10px 20px -10px rgba(0, 145, 200, .9);
}

.ui-consultation-card-title{
	margin: 0;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--ui-ink);
}

.ui-consultation-card-sub{
	margin: 2px 0 0;
	font-size: 14px;
	color: var(--ui-muted);
}

.ui-consultation-points{
	display: grid;
	gap: 10px;
	margin: 20px 0 22px;
	padding: 18px 0 0;
	border-top: 1px dashed var(--ui-line);
	list-style: none;
	font-size: 15px;
	font-weight: 500;
	color: var(--ui-ink);
}

.ui-consultation-points li{
	display: flex;
	align-items: center;
	gap: 10px;
}

.ui-consultation-points i{
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	font-size: 11px;
	color: var(--ui-accent-ink);
	background: rgba(0, 145, 200, .1);
}

/* The header pill, full-width and taller as the lead action; out-specifies the header's small-screen sizing */
.ui-consultation-cta .ui-consultation-btn{
	display: flex;
	justify-content: center;
	width: 100%;
	min-height: 58px;
	padding: 0 24px;
	font-size: 17px;
	text-align: center;
	white-space: normal;
	box-shadow: 0 14px 32px -12px rgba(0, 145, 200, .85), inset 0 1px 0 rgba(255, 255, 255, .22);
}

.ui-consultation-cta .ui-consultation-btn:hover,
.ui-consultation-cta .ui-consultation-btn:focus-visible{
	box-shadow: 0 20px 40px -12px rgba(0, 145, 200, .95), 0 0 0 5px rgba(0, 145, 200, .15), inset 0 1px 0 rgba(255, 255, 255, .3);
}

.ui-consultation-cta .ui-consultation-btn:focus-visible{
	outline-color: var(--ui-accent);
}

.ui-consultation-cta .ui-consultation-btn i{
	display: inline-block;
	font-size: 15px;
}

.ui-consultation-cta .ui-consultation-btn:hover .ui-consultation-arrow,
.ui-consultation-cta .ui-consultation-btn:focus-visible .ui-consultation-arrow{
	transform: translateX(5px);
}

/* "or reach us directly" rule */
.ui-consultation-or{
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 20px 0 12px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ui-muted);
}

.ui-consultation-or::before,
.ui-consultation-or::after{
	content: '';
	flex: 1;
	height: 1px;
	background: var(--ui-line);
}

/* Side by side where they fit, stacked otherwise; labels never break mid-number */
.ui-consultation-direct{
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.ui-consultation-direct a{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	flex: 1 1 auto;
	min-height: 46px;
	padding: 0 16px;
	border: 1px solid var(--ui-line);
	border-radius: 100px;
	font-size: 15px;
	font-weight: 600;
	white-space: nowrap;
	color: var(--ui-ink);
	transition: color .25s var(--ui-ease), border-color .25s var(--ui-ease), background-color .25s var(--ui-ease), transform .3s var(--ui-ease);
}

.ui-consultation-direct a:hover,
.ui-consultation-direct a:focus-visible{
	color: var(--ui-accent-ink);
	border-color: var(--ui-accent);
	background: rgba(0, 145, 200, .06);
	transform: translateY(-2px);
}

.ui-consultation-direct a:focus-visible{
	outline: 2px solid var(--ui-accent);
	outline-offset: 2px;
}

.ui-consultation-direct .fa-whatsapp{
	font-size: 18px;
	color: #25D366;
}

.ui-consultation-direct .fa-phone{
	font-size: 14px;
	color: var(--ui-accent);
}

@media (min-width: 576px){
	.ui-service-offerings-list{
		grid-template-columns: repeat(min(2, var(--ui-offering-cols, 2)), minmax(0, 1fr));
	}
}

@media (min-width: 768px){
	.ui-service-checklist{
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ui-service-work{
		--ui-service-work-cols: 2;
	}
}

@media (min-width: 992px){
	.ui-service-about-grid:not(.ui-service-about-grid-text){
		grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	}

	.ui-service-about-visual{
		margin-bottom: 0;
	}

	.ui-service-scope{
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ui-service-work{
		--ui-service-work-cols: 3;
	}
}

@media (min-width: 768px){
	.ui-consultation-panel{
		grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
	}
}

@media (min-width: 1200px){
	.ui-consultation-panel{
		grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
	}
}

@media (min-width: 992px){
	.ui-service-offerings-list{
		grid-template-columns: repeat(var(--ui-offering-cols, 3), minmax(0, 1fr));
	}
}

@media (max-width: 575px){
	.ui-service-about-visual{
		aspect-ratio: 4 / 3;
	}

	.ui-service-about-visual::before{
		inset: 10px -10px -10px 10px;
	}

	.ui-service-about-chip{
		top: 12px;
		left: 12px;
		max-width: calc(100% - 24px);
	}

	.ui-service-about-stats{
		right: 8px;
		bottom: -24px;
		padding: 12px 2px;
	}

	.ui-service-about-stats > div{
		padding: 0 12px;
	}

	.ui-service-about-body{
		margin-top: 12px;
	}

	.ui-service-hero-badge{
		left: 12px;
		bottom: 12px;
		max-width: calc(100% - 24px);
	}

	/* Stacked panel: rings move up behind the pitch, the card spans the width */
	.ui-consultation-panel{
		padding: 28px 18px 18px;
	}

	.ui-consultation-rings{
		top: 0;
		right: -40%;
		width: 120%;
	}

	.ui-consultation-cta .ui-consultation-btn{
		min-height: 54px;
		font-size: 16px;
	}
}

/* Projects page --------------------------------------------------------------------------- */
/* Same building blocks as the service pages: service-style hero over a navy project band */
.ui-section.ui-projects-section{
	padding-block: clamp(56px, 6vw, 96px);
	background: var(--ui-surface);
}

.ui-section.ui-projects-section .ui-lead{
	color: var(--ui-text);
}

/* Directly under the hero its bottom padding already separates the two, so a full top padding would double the gap */
.ui-projects-hero + .ui-section.ui-projects-section{
	padding-top: clamp(32px, 3.5vw, 56px);
}

/* Hero: the portfolio chip carries an icon where service pages show the service artwork */
.ui-projects-hero .ui-service-hero-icon{
	font-size: 14px;
	color: var(--ui-accent-ink);
}

/* All projects: centred head and frosted service filters over the navy band */
.ui-section-head.ui-projects-head{
	margin-bottom: 32px;
}

.ui-projects-filters{
	margin-bottom: clamp(28px, 3vw, 40px);
}

.ui-projects-filters ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ui-projects-filters a{
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 46px;
	padding: 0 8px 0 18px;
	border: 1px solid var(--ui-line);
	border-radius: 100px;
	background: #FFF;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	color: var(--ui-ink);
	transition: color .25s var(--ui-ease), background-color .25s var(--ui-ease), border-color .25s var(--ui-ease);
}

.ui-projects-filters a:hover{
	border-color: var(--ui-accent);
	background: #FFF;
}

.ui-projects-filters a:focus-visible{
	outline: 2px solid var(--ui-accent);
	outline-offset: 2px;
}

.ui-projects-filters a.is-active{
	border-color: var(--ui-ink);
	background: var(--ui-ink);
	color: #FFF;
}

.ui-projects-filter-count{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 30px;
	height: 30px;
	padding: 0 8px;
	border-radius: 100px;
	background: var(--ui-accent);
	font-size: 13px;
	color: #FFF;
	font-variant-numeric: tabular-nums;
	transition: background-color .25s var(--ui-ease), color .25s var(--ui-ease);
}

.ui-projects-filters a.is-active .ui-projects-filter-count{
	background: var(--ui-accent);
	color: #FFF;
}

/* Grid: the shared Completed Projects grid (1 / 2 / 3 a row); each list item stretches its tile */
.ui-projects-grid{
	margin: 0;
	padding: 0;
	list-style: none;
}

.ui-projects-item{
	display: flex;
	transition: opacity .35s var(--ui-ease), transform .35s var(--ui-ease);
}

.ui-projects-item > .ui-service-project{
	flex: 1;
}

.ui-projects-item[hidden],
.ui-projects-empty[hidden]{
	display: none;
}

/* Filter transitions, driven by the page script */
.ui-projects-item.is-leaving,
.ui-projects-item.is-entering{
	opacity: 0;
	transform: translateY(16px) scale(.97);
}

/* Services line above the tile title (project tile component) */
.ui-service-project-body .ui-service-project-type{
	min-height: 0;
	margin: 0 0 8px;
	-webkit-line-clamp: 1;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ui-accent-light);
	text-shadow: 0 1px 10px rgba(10, 17, 32, .9);
}

/* Empty state: no project in the picked category, or none published yet */
.ui-projects-empty{
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 640px;
	margin: 0 auto;
	padding: clamp(40px, 5vw, 64px) clamp(24px, 4vw, 48px);
	border: 1px dashed #C5CCD6;
	border-radius: var(--ui-radius-lg);
	background: #FFF;
	text-align: center;
}

.ui-projects-empty-icon{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	margin-bottom: 22px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--ui-accent) 0%, var(--ui-accent-ink) 100%);
	box-shadow: 0 14px 30px -12px rgba(0, 145, 200, .8);
	font-size: 28px;
	color: #FFF;
}

.ui-projects-empty h3{
	margin: 0 0 10px;
	font-size: clamp(1.375rem, 1.2rem + .6vw, 1.75rem);
	color: var(--ui-ink);
}

.ui-projects-empty p{
	margin: 0 0 28px;
	color: var(--ui-text);
}

.ui-projects-empty .ui-btn-group{
	justify-content: center;
}

/* Mobile: filters become one swipeable row that bleeds to the screen edge */
@media (max-width: 767.98px){
	.ui-projects-filters{
		margin-inline: -15px;
	}

	.ui-projects-filters ul{
		flex-wrap: nowrap;
		justify-content: flex-start;
		padding: 2px 15px 6px;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
		-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent);
		mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent);
	}

	.ui-projects-filters ul::-webkit-scrollbar{
		display: none;
	}

	.ui-projects-filters li{
		flex: none;
		scroll-snap-align: start;
	}

	.ui-projects-filters a{
		min-height: 42px;
		font-size: 14px;
	}
}

/* Project detail page (case study) ---------------------------------------------------------- */
/* A split hero (copy beside the featured image), then the story and deliverables beside a sticky
   project-details panel, an adaptive gallery, results, and a next-project / all-projects pair. */
.ui-section.ui-pd-section{
	padding-block: clamp(64px, 7vw, 104px);
}

.ui-pd-h2{
	margin: 0;
	font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.375rem);
	font-weight: 600;
	line-height: 1.15;
}

.ui-pd-head{
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px 32px;
	margin-bottom: clamp(28px, 3.5vw, 44px);
}

.ui-pd-head-note{
	margin: 0;
	font-size: 15px;
	color: var(--ui-muted);
}

/* Hero: navy with a soft brand glow in place of the shared stock photo */
.ui-page-hero.ui-pd-hero{
	padding-bottom: clamp(56px, 6vw, 88px);
	background-color: var(--ui-ink);
	background-image:
		radial-gradient(ellipse at 85% 0%, rgba(0, 145, 200, .32) 0%, rgba(0, 145, 200, 0) 55%),
		radial-gradient(ellipse at 0% 100%, rgba(0, 145, 200, .14) 0%, rgba(0, 145, 200, 0) 45%);
	background-size: auto;
	background-position: center;
}

.ui-pd-hero-top{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 24px;
	margin-bottom: clamp(32px, 4vw, 48px);
}

.ui-pd-hero-top .ui-breadcrumb{
	margin: 0;
}

.ui-pd-back{
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	padding: 0 20px 0 16px;
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: 100px;
	background: rgba(255, 255, 255, .06);
	font-size: 15px;
	font-weight: 600;
	color: #FFF;
	transition: background-color .25s var(--ui-ease), color .25s var(--ui-ease), border-color .25s var(--ui-ease);
}

.ui-pd-back i{
	transition: transform .25s var(--ui-ease);
}

.ui-pd-back:hover,
.ui-pd-back:focus-visible{
	border-color: #FFF;
	background: #FFF;
	color: var(--ui-ink);
}

.ui-pd-back:hover i{
	transform: translateX(-3px);
}

.ui-pd-hero-grid{
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 40px 64px;
	align-items: center;
}

.ui-pd-hero-grid:not(.ui-pd-hero-grid-media) .ui-pd-hero-copy{
	max-width: 820px;
}

.ui-pd-kicker{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	margin: 0 0 20px;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ui-accent-light);
}

.ui-pd-kicker-type{
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-weight: 600;
	letter-spacing: .06em;
	color: rgba(255, 255, 255, .7);
}

.ui-pd-kicker-type::before{
	content: '';
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .45);
}

.ui-page-hero.ui-pd-hero h1{
	font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.75rem);
	line-height: 1.06;
	letter-spacing: -0.035em;
}

.ui-pd-hero .ui-hero-lead{
	max-width: 560px;
	margin-top: 20px;
	color: rgba(255, 255, 255, .82);
}

.ui-pd-hero-media{
	position: relative;
	margin: 0;
	border-radius: var(--ui-radius-lg);
	background: var(--ui-ink-raised);
	box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .7);
	overflow: hidden;
}

/* Inset hairline so a light image keeps a crisp edge against the navy */
.ui-pd-hero-media::after{
	content: '';
	position: absolute;
	inset: 0;
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: inherit;
	pointer-events: none;
}

.ui-pd-hero-media img{
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* Overview: details panel first on small screens, beside the content from 992px */
.ui-pd-layout{
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 48px;
}

.ui-pd-panel{
	align-self: start;
	padding: clamp(24px, 3vw, 32px);
	border: 1px solid var(--ui-line);
	border-radius: var(--ui-radius);
	background: var(--ui-page);
	box-shadow: var(--ui-shadow);
}

.ui-pd-panel-title{
	margin: 0 0 8px;
	font-size: 1.125rem;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.ui-pd-facts{
	margin: 0;
}

.ui-pd-fact{
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr);
	column-gap: 14px;
	align-items: center;
	padding: 14px 0;
	border-bottom: 1px solid var(--ui-line);
}

.ui-pd-fact-icon{
	grid-row: span 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--ui-radius-sm);
	background: rgba(0, 145, 200, .09);
	font-size: 15px;
	color: var(--ui-accent-ink);
}

.ui-pd-fact dt{
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ui-muted);
}

.ui-pd-fact dd{
	margin: 2px 0 0;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--ui-ink);
	overflow-wrap: anywhere;
}

.ui-pd-panel-block{
	padding-top: 20px;
}

.ui-pd-panel-label{
	margin: 0 0 12px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ui-muted);
}

.ui-pd-chips{
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ui-pd-chips a{
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 0 16px;
	border: 1px solid var(--ui-line);
	border-radius: 100px;
	background: var(--ui-surface);
	font-size: 14px;
	font-weight: 600;
	color: var(--ui-ink);
	transition: background-color .25s var(--ui-ease), color .25s var(--ui-ease), border-color .25s var(--ui-ease);
}

.ui-pd-chips a:hover,
.ui-pd-chips a:focus-visible{
	border-color: var(--ui-ink);
	background: var(--ui-ink);
	color: #FFF;
}

.ui-pd-panel-actions{
	display: grid;
	gap: 12px;
	margin-top: 24px;
	padding-top: 24px;
	border-top: 1px solid var(--ui-line);
}

.ui-pd-panel-actions .btn-default{
	justify-content: center;
	width: 100%;
	text-align: center;
}

.ui-pd-panel-back{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	font-size: 15px;
	font-weight: 600;
	color: var(--ui-ink);
}

.ui-pd-panel-back:hover{
	color: var(--ui-accent-ink);
}

.ui-pd-main{
	display: grid;
	gap: clamp(56px, 6vw, 80px);
	min-width: 0;
}

/* Story: numbered steps joined by a vertical rule */
.ui-pd-timeline{
	position: relative;
	margin: 32px 0 0;
	padding: 0;
	list-style: none;
}

.ui-pd-step{
	position: relative;
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	gap: 20px;
	padding-bottom: clamp(28px, 3.5vw, 40px);
}

.ui-pd-step:last-child{
	padding-bottom: 0;
}

.ui-pd-step:not(:last-child)::before{
	content: '';
	position: absolute;
	top: 52px;
	bottom: 8px;
	left: 21px;
	width: 2px;
	border-radius: 2px;
	background: var(--ui-line);
}

.ui-pd-step-no{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--ui-ink);
	font-size: 14px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: #FFF;
}

.ui-pd-step-label{
	margin: 0 0 4px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ui-accent-ink);
}

.ui-pd-step-body h3{
	margin: 0 0 12px;
	font-size: clamp(1.25rem, 1.15rem + .4vw, 1.5rem);
	font-weight: 600;
	line-height: 1.3;
}

.ui-pd-step-text{
	max-width: 68ch;
	margin: 0;
	font-size: 17px;
	line-height: 1.8;
}

/* Deliverables: compact cards, two per row from 576px */
.ui-pd-deliverables{
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 12px;
	margin: 28px 0 0;
	padding: 0;
	list-style: none;
}

.ui-pd-deliverable{
	display: grid;
	grid-template-columns: 36px minmax(0, 1fr);
	align-items: center;
	gap: 6px 16px;
	padding: 18px 20px;
	border: 1px solid var(--ui-line);
	border-radius: var(--ui-radius-sm);
	background: var(--ui-page);
	transition: border-color .25s var(--ui-ease), box-shadow .25s var(--ui-ease);
}

.ui-pd-deliverable:hover{
	border-color: rgba(0, 145, 200, .4);
	box-shadow: var(--ui-shadow);
}

.ui-pd-deliverable-icon{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--ui-accent);
	font-size: 14px;
	color: #FFF;
}

.ui-pd-deliverable-name{
	font-size: 17px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--ui-ink);
}

.ui-pd-deliverable-link{
	grid-column: 2;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	justify-self: start;
	font-size: 14px;
	font-weight: 600;
	color: var(--ui-accent-ink);
}

.ui-pd-deliverable-link i{
	font-size: 12px;
	transition: transform .25s var(--ui-ease);
}

.ui-pd-deliverable-link:hover{
	color: var(--ui-ink);
}

.ui-pd-deliverable-link:hover i{
	transform: translateX(3px);
}

/* Gallery: each creative is shown whole (never cropped) over a blurred copy of itself, so
   screenshots of any shape sit in an even grid. One per row on phones so they stay readable;
   from 768px a six-column bento whose layout per count keeps every row filled. */
.ui-pd-head-note i{
	margin-right: 6px;
	color: var(--ui-accent-ink);
}

.ui-pd-gallery{
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ui-pd-shot{
	position: relative;
	isolation: isolate;
	aspect-ratio: 4 / 3;
	border: 1px solid var(--ui-line);
	border-radius: var(--ui-radius);
	background: var(--ui-ink-raised);
	box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 18px 40px -24px rgba(16, 24, 40, .35);
	overflow: hidden;
}

.ui-pd-shot::before{
	content: '';
	position: absolute;
	inset: -40px;
	z-index: -1;
	background: var(--ui-pd-shot) center / cover no-repeat;
	filter: blur(28px) saturate(1.1);
	opacity: .55;
}

.ui-pd-shot a{
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	padding: clamp(10px, 1.6vw, 20px);
	cursor: zoom-in;
}

.ui-pd-shot a:focus-visible{
	outline-offset: -4px;
}

.ui-pd-shot img{
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	border-radius: 8px;
	box-shadow: 0 12px 32px -12px rgba(0, 0, 0, .5);
	transition: transform .6s var(--ui-ease);
}

.ui-pd-shot-zoom{
	position: absolute;
	right: 14px;
	bottom: 14px;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #FFF;
	box-shadow: 0 6px 16px -6px rgba(16, 24, 40, .4);
	font-size: 15px;
	color: var(--ui-ink);
	opacity: 0;
	transform: translateY(6px);
	transition: opacity .3s var(--ui-ease), transform .3s var(--ui-ease);
}

.ui-pd-shot a:hover img,
.ui-pd-shot a:focus-visible img{
	transform: scale(1.025);
}

.ui-pd-shot a:hover .ui-pd-shot-zoom,
.ui-pd-shot a:focus-visible .ui-pd-shot-zoom{
	opacity: 1;
	transform: none;
}

/* Touch screens have no hover, so the zoom cue stays visible */
@media (hover: none){
	.ui-pd-shot-zoom{
		opacity: 1;
		transform: none;
	}
}

@media (min-width: 768px){
	.ui-pd-gallery{
		grid-template-columns: repeat(6, minmax(0, 1fr));
		grid-auto-rows: clamp(150px, 17vw, 240px);
		gap: 20px;
	}

	/* Rows set the height from here, so tiles drop their own ratio */
	.ui-pd-shot{
		grid-column: span 2;
		grid-row: span 1;
		aspect-ratio: auto;
	}

	.ui-pd-gallery-1 .ui-pd-shot{
		grid-column: 1 / -1;
		grid-row: span 3;
	}

	.ui-pd-gallery-2 .ui-pd-shot,
	.ui-pd-gallery-4 .ui-pd-shot{
		grid-column: span 3;
		grid-row: span 2;
	}

	/* Three: one large creative beside a stacked pair */
	.ui-pd-gallery-3 .ui-pd-shot:first-child{
		grid-column: span 4;
		grid-row: span 2;
	}

	/* Five: a large pair above a row of three */
	.ui-pd-gallery-5 .ui-pd-shot:nth-child(-n + 2){
		grid-column: span 3;
		grid-row: span 2;
	}

	/* Six: the default, even landscape rows of three */
}

/* Results: cards on the navy band */
.ui-pd-results{
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--ui-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ui-pd-result{
	padding: clamp(24px, 3vw, 32px);
	border: 1px solid var(--ui-line-dark);
	border-radius: var(--ui-radius);
	background: rgba(255, 255, 255, .04);
}

.ui-pd-result-icon{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--ui-radius-sm);
	background: rgba(108, 205, 242, .14);
	font-size: 17px;
	color: var(--ui-accent-light);
}

.ui-pd-result h3{
	margin: 20px 0 8px;
	font-size: clamp(1.375rem, 1.2rem + .7vw, 1.75rem);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.02em;
}

.ui-pd-result p{
	margin: 0;
	font-size: 16px;
	line-height: 1.65;
	color: rgba(255, 255, 255, .75);
}

/* Continue exploring: the next project beside a link back to the full portfolio */
.ui-pd-continue-grid{
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--ui-gap);
}

.ui-pd-next,
.ui-pd-all{
	position: relative;
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 16px;
	border: 1px solid var(--ui-line);
	border-radius: var(--ui-radius);
	background: var(--ui-page);
	transition: border-color .3s var(--ui-ease), box-shadow .3s var(--ui-ease);
}

.ui-pd-all{
	padding: 24px;
	background: var(--ui-surface);
}

.ui-pd-next:hover,
.ui-pd-all:hover{
	border-color: rgba(0, 145, 200, .45);
	box-shadow: var(--ui-shadow);
}

.ui-pd-next:focus-within,
.ui-pd-all:focus-within{
	outline: 2px solid var(--ui-accent);
	outline-offset: 3px;
}

.ui-pd-next .stretched-link:focus-visible,
.ui-pd-all .stretched-link:focus-visible{
	outline: none;
}

.ui-pd-next-media{
	flex: none;
	width: clamp(96px, 22vw, 168px);
	aspect-ratio: 4 / 3;
	margin: 0;
	border-radius: var(--ui-radius-sm);
	background: var(--ui-surface);
	overflow: hidden;
}

.ui-pd-next-media img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s var(--ui-ease);
}

.ui-pd-next:hover .ui-pd-next-media img{
	transform: scale(1.05);
}

.ui-pd-next-body,
.ui-pd-all > div{
	flex: 1;
	min-width: 0;
}

.ui-pd-next-label{
	margin: 0 0 6px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ui-accent-ink);
}

.ui-pd-next-title,
.ui-pd-all-title{
	margin: 0;
	font-size: clamp(1.25rem, 1.1rem + .6vw, 1.625rem);
	font-weight: 600;
	line-height: 1.2;
}

.ui-pd-next-title a,
.ui-pd-all-title a{
	color: inherit;
}

.ui-pd-next-type{
	margin: 4px 0 0;
	font-size: 15px;
	color: var(--ui-muted);
}

.ui-pd-all-icon{
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: var(--ui-radius-sm);
	background: var(--ui-ink);
	font-size: 20px;
	color: #FFF;
}

.ui-pd-arrow{
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border: 1px solid var(--ui-line);
	border-radius: 50%;
	background: var(--ui-page);
	font-size: 16px;
	color: var(--ui-ink);
	transition: background-color .3s var(--ui-ease), color .3s var(--ui-ease), border-color .3s var(--ui-ease), transform .3s var(--ui-ease);
}

.ui-pd-next:hover .ui-pd-arrow,
.ui-pd-all:hover .ui-pd-arrow{
	border-color: var(--ui-accent);
	background: var(--ui-accent);
	color: #FFF;
	transform: translateX(4px);
}

@media (min-width: 576px){
	.ui-pd-deliverables{
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ui-pd-next{
		padding: 20px;
	}
}

@media (min-width: 768px){
	.ui-pd-results{
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ui-pd-results > :last-child:nth-child(odd){
		grid-column: 1 / -1;
	}
}

@media (min-width: 992px){
	.ui-pd-hero-grid-media{
		grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	}

	.ui-pd-layout{
		grid-template-columns: minmax(0, 1fr) 340px;
		gap: 64px;
	}

	.ui-pd-panel{
		position: sticky;
		top: 120px;
		grid-column: 2;
		grid-row: 1;
	}

	.ui-pd-main{
		grid-column: 1;
		grid-row: 1;
	}

	.ui-pd-results{
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.ui-pd-results > :last-child:nth-child(odd){
		grid-column: auto;
	}

	/* Two or four results read better as halves than as a part-filled row of three */
	.ui-pd-results-pair{
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ui-pd-continue-grid{
		grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
	}

	.ui-pd-continue-solo{
		grid-template-columns: minmax(0, 560px);
		justify-content: center;
	}
}

/* No story to tell: the panel becomes a full-width details bar above the deliverables */
@media (min-width: 768px){
	.ui-pd-overview-compact .ui-pd-panel{
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		column-gap: 32px;
	}

	.ui-pd-overview-compact .ui-pd-panel > *{
		grid-column: 1 / -1;
	}

	.ui-pd-overview-compact .ui-pd-facts{
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
		gap: 0 24px;
	}

	.ui-pd-overview-compact .ui-pd-fact{
		padding: 16px 0 20px;
	}

	.ui-pd-overview-compact .ui-pd-panel-block,
	.ui-pd-overview-compact .ui-pd-panel-actions{
		align-self: stretch;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 12px 20px;
		margin: 0;
		padding-top: 24px;
		border-top: 0;
	}

	.ui-pd-overview-compact .ui-pd-panel-block{
		grid-column: 1;
	}

	.ui-pd-overview-compact .ui-pd-panel-block .ui-pd-panel-label{
		margin: 0;
	}

	.ui-pd-overview-compact .ui-pd-panel-actions{
		grid-column: 2;
		justify-content: flex-end;
	}

	.ui-pd-overview-compact .ui-pd-panel-actions:only-of-type{
		grid-column: 1 / -1;
	}

	.ui-pd-overview-compact .ui-pd-panel-actions .btn-default{
		order: 2;
		width: auto;
	}
}

@media (min-width: 992px){
	.ui-pd-overview-compact .ui-pd-layout{
		grid-template-columns: minmax(0, 1fr);
		gap: clamp(56px, 6vw, 80px);
	}

	.ui-pd-overview-compact .ui-pd-panel,
	.ui-pd-overview-compact .ui-pd-main{
		position: static;
		grid-column: 1;
		grid-row: auto;
	}

	.ui-pd-overview-compact .ui-pd-deliverables{
		grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	}
}

@media (min-width: 1200px){
	.ui-pd-layout{
		grid-template-columns: minmax(0, 1fr) 360px;
		gap: 88px;
	}
}

@media (max-width: 575px){
	.ui-pd-hero-top{
		flex-direction: column;
		align-items: flex-start;
	}

	.ui-pd-hero-top .ui-breadcrumb{
		order: -1;
		font-size: 13px;
	}

	.ui-pd-step{
		grid-template-columns: 36px minmax(0, 1fr);
		gap: 16px;
	}

	.ui-pd-step-no{
		width: 36px;
		height: 36px;
		font-size: 13px;
	}

	.ui-pd-step:not(:last-child)::before{
		top: 44px;
		left: 17px;
	}

	.ui-pd-step-text{
		font-size: 16px;
	}

	.ui-pd-arrow{
		width: 40px;
		height: 40px;
		font-size: 14px;
	}

	.ui-pd-all-icon{
		width: 48px;
		height: 48px;
		font-size: 18px;
	}
}

@media (prefers-reduced-motion: reduce){
	.ui-pd-back i,
	.ui-pd-shot img,
	.ui-pd-shot-zoom,
	.ui-pd-next-media img,
	.ui-pd-arrow,
	.ui-pd-deliverable-link i{
		transition: none;
	}

	.ui-pd-back:hover i,
	.ui-pd-shot a:hover img,
	.ui-pd-shot a:focus-visible img,
	.ui-pd-next:hover .ui-pd-next-media img,
	.ui-pd-next:hover .ui-pd-arrow,
	.ui-pd-all:hover .ui-pd-arrow,
	.ui-pd-deliverable-link:hover i{
		transform: none;
	}
}

/* 08. Template overrides ------------------------------------------------------------------ */
/* Primary buttons keep the brand navy; on navy surfaces a white border keeps them visible (as in graphia-brand.css) */
.ui-section-dark .btn-default,
.ui-page-hero .btn-default,
.ui-cta-box .btn-default,
.ui-panel-dark .btn-default,
.google-reviews .btn-default{
	border-color: var(--white-color);
}

/* Header: active nav item and a tighter sticky bar */
.main-menu ul li.is-active > a{
	color: var(--ui-accent-light);
}

header.main-header .header-sticky.active{
	box-shadow: 0 10px 30px -12px rgba(16, 24, 40, .45);
}

/*
 * Header colour states. At the top of the page the bar is white with the full-colour logo and
 * navy links; once scrolled (.active, toggled in function.js) it keeps the existing navy bar and
 * only the logo switches to white. Paint-only properties, so the swap never shifts layout.
 */
header.main-header .header-sticky{
	background-color: var(--white-color);
	border-color: var(--divider-color);
}

header.main-header .header-sticky.active{
	border-color: var(--dark-divider-color);
}

header.main-header .navbar-brand img{
	transition: filter .4s ease;
}

header.main-header .header-sticky.active .navbar-brand img{
	filter: brightness(0) invert(1);
}

/* Top-level links only: dropdown links keep their white-on-blue styling in both states */
header.main-header .header-sticky:not(.active) .nav-menu-wrapper > ul > li > a{
	color: var(--primary-color);
}

header.main-header .header-sticky:not(.active) .nav-menu-wrapper > ul > li > a:hover,
header.main-header .header-sticky:not(.active) .nav-menu-wrapper > ul > li > a:focus{
	color: var(--accent-color);
}

header.main-header .header-sticky:not(.active) .nav-menu-wrapper > ul > li.is-active > a{
	color: var(--ui-accent-ink);
}

header.main-header .header-sticky:not(.active) .header-cta-btn:focus-visible{
	outline-color: var(--ui-accent-ink);
}

@media (prefers-reduced-motion: reduce){
	header.main-header .navbar-brand img{
		transition: none;
	}
}

/* Header CTA: brand-blue pill that stands out on the navy bar; also shown beside the mobile toggle */
.header-cta{
	flex-shrink: 0;
}

.header-cta-btn{
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 50px;
	padding: 0 24px;
	overflow: hidden;
	isolation: isolate;
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: 100px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	color: #FFF;
	/* Oversized gradient so hover can slide it toward the deeper tone; gradients themselves can't be transitioned */
	background: linear-gradient(135deg, var(--ui-accent) 0%, var(--ui-accent-ink) 50%, #005A7D 100%);
	background-size: 200% 200%;
	background-position: 0% 0%;
	box-shadow: 0 8px 22px -10px rgba(0, 145, 200, .75), inset 0 1px 0 rgba(255, 255, 255, .22);
	/*
	 * Hover must never transform the button itself: moving its hit area out from under a cursor
	 * resting near an edge or rounded corner toggles :hover every frame and makes it shake.
	 * Feedback is paint-only (colour, shadow, inner sweep), which never changes hit-testing.
	 */
	transition: background-position .4s var(--ui-ease), box-shadow .3s var(--ui-ease), border-color .3s var(--ui-ease);
}

/* Light sweep across the pill on hover */
.header-cta-btn::before{
	content: '';
	position: absolute;
	top: 0;
	left: -75%;
	z-index: -1;
	width: 50%;
	height: 100%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent);
	transform: skewX(-20deg);
	transition: left .6s var(--ui-ease);
}

.header-cta-btn i{
	font-size: 17px;
	transition: transform .3s var(--ui-ease);
}

.header-cta-btn:hover,
.header-cta-btn:focus-visible{
	color: #FFF;
	border-color: rgba(255, 255, 255, .45);
	background-position: 100% 100%;
	box-shadow: 0 14px 30px -10px rgba(0, 145, 200, .9), 0 0 0 4px rgba(108, 205, 242, .18), inset 0 1px 0 rgba(255, 255, 255, .3);
}

.header-cta-btn:hover::before,
.header-cta-btn:focus-visible::before{
	left: 125%;
}

.header-cta-btn:hover i,
.header-cta-btn:focus-visible i{
	transform: rotate(-8deg) scale(1.1);
}

.header-cta-btn:active{
	box-shadow: 0 6px 16px -8px rgba(0, 145, 200, .8);
}

.header-cta-btn:focus-visible{
	outline: 2px solid var(--ui-accent-light);
	outline-offset: 3px;
}

@media (max-width: 991px){
	.header-cta{
		margin-left: auto;
		margin-right: 12px;
	}

	.header-cta-btn{
		min-height: 40px;
		padding: 0 18px;
		gap: 8px;
		font-size: 15px;
	}

	.header-cta-btn i{
		font-size: 15px;
	}
}

@media (max-width: 400px){
	.header-cta{
		margin-right: 8px;
	}

	.header-cta-btn{
		min-height: 38px;
		padding: 0 12px;
		font-size: 13px;
	}

	/* Icon dropped on the narrowest phones so the label, logo and toggle fit on one row */
	.header-cta-btn i{
		display: none;
	}

	/* On very small screens the logo may give up width before the row wraps; untouched otherwise */
	.navbar-brand{
		min-width: 0;
		flex-shrink: 1;
	}

	.navbar-brand img{
		max-width: 100%;
	}
}

/* Google reviews: navy band; white cards with stars, quote and reviewer */
.google-reviews{
	padding: var(--ui-section-y) 0;
	background: var(--ui-ink);
}

.google-reviews .section-title h2{
	color: var(--white-color);
	font-size: var(--ui-fs-h2);
	line-height: 1.1;
}

.google-reviews-lead{
	max-width: 560px;
	margin: 20px auto 0;
	color: rgba(255, 255, 255, .78);
	font-size: var(--ui-fs-lead);
}

.google-review-stars i{
	color: var(--ui-star);
}

.google-review-stars i.is-empty{
	color: rgba(152, 162, 179, .5);
}

.google-review-card{
	height: auto;
	gap: 28px;
	padding: clamp(28px, 3vw, 40px);
	border: 0;
	border-radius: var(--ui-radius-lg);
	box-shadow: 0 24px 48px -24px rgba(0, 0, 0, .45);
}

.google-review-card::after{
	content: none;
}

.google-review-card:hover{
	transform: translateY(-6px);
	box-shadow: 0 32px 56px -24px rgba(0, 0, 0, .55);
}

.google-review-stars{
	display: flex;
	gap: 10px;
}

.google-review-stars i{
	font-size: 18px;
}

.google-review-card blockquote{
	flex: 0 1 auto;
	font-size: 17px;
	line-height: 1.85;
	color: var(--ui-ink);
}

.google-review-card figcaption{
	gap: 20px;
	padding-top: 0;
	border-top: 0;
}

.google-review-avatar{
	width: auto;
	height: auto;
	background: none;
	color: var(--ui-ink);
	font-size: 56px;
	line-height: 1;
}

.google-review-card figcaption strong{
	color: var(--ui-ink);
	font-size: 18px;
	font-weight: 600;
}

.google-review-card figcaption small{
	color: var(--ui-muted);
}

.google-reviews-cta{
	margin-top: 32px;
}

/* Section titles still used by template blocks (featured case study, contact, 404) */
.section-title h1,
.section-title h2{
	cursor: auto;
}

.section-title h2{
	font-size: var(--ui-fs-h2);
	line-height: 1.1;
}

.section-title .section-sub-title{
	padding-left: 30px;
	font-size: 13px;
	letter-spacing: .12em;
	color: var(--ui-accent-ink);
}

.section-title .section-sub-title::before{
	width: 20px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
}

/* Listing pages (Insights) */
.page-blog{
	padding: var(--ui-section-y) 0;
}

#insight-grid > [class*='col']{
	margin-bottom: 48px;
}

.work-filters{
	gap: 8px;
}

/* Article bodies read best at a measured line length */
.post-content{
	max-width: 780px;
}

.post-content{
	margin: 0 auto;
}

.post-entry p,
.post-entry li{
	font-size: 18px;
	line-height: 1.75;
}

.post-image img{
	border-radius: var(--ui-radius-lg);
}

/* What happens after an enquiry is sent (home booking pitch card, contact page) */
.ui-next-steps{
	margin-top: 32px;
	padding-top: 32px;
	border-top: 1px solid var(--ui-line-dark);
}

.ui-next-steps h2,
.ui-next-steps h3{
	margin-bottom: 20px;
	color: var(--white-color);
	font-size: 20px;
	line-height: 1.3;
}

.ui-next-steps ol{
	display: grid;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: next-step;
}

.ui-next-steps li{
	position: relative;
	padding-left: 40px;
	color: rgba(255, 255, 255, .82);
	counter-increment: next-step;
}

.ui-next-steps li::before{
	content: counter(next-step);
	position: absolute;
	top: 0;
	left: 0;
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: rgba(108, 205, 242, .16);
	color: var(--ui-accent-light);
	font-size: 13px;
	font-weight: 700;
}

.contact-form{
	border-radius: var(--ui-radius-lg);
}

.contact-form .form-control,
.ui-consult-form .form-control{
	min-height: 54px;
	border: 1px solid var(--ui-line);
	border-radius: 12px;
	background: #FFF;
	color: var(--ui-ink);
}

.contact-form textarea.form-control,
.ui-consult-form textarea.form-control{
	min-height: 150px;
	resize: none;
}

.contact-form .form-control::placeholder,
.ui-consult-form .form-control::placeholder{
	color: var(--ui-muted);
}

.contact-form .form-control,
.ui-consult-form .form-control{
	transition: border-color .2s var(--ui-ease), box-shadow .2s var(--ui-ease);
}

.contact-form .form-control:hover,
.ui-consult-form .form-control:hover{
	border-color: #CBD5E1;
}

.contact-form .form-control:focus,
.ui-consult-form .form-control:focus{
	border-color: var(--ui-accent);
	box-shadow: 0 0 0 4px rgba(0, 145, 200, .15);
}

/* Native select with a drawn chevron so it matches the text inputs */
.contact-form select.form-control,
.ui-consult-form select.form-control{
	padding-right: 48px;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23667085' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 20px center;
	cursor: pointer;
}

/* Bootstrap-validator flags invalid fields on the parent .form-group */
.contact-form .has-error .form-control,
.ui-consult-form .has-error .form-control{
	border-color: #E65757;
}

.contact-form .help-block.with-errors,
.ui-consult-form .help-block.with-errors{
	margin-top: 6px;
	color: #B42318;
	font-size: 14px;
}

.contact-form .help-block.with-errors:empty,
.ui-consult-form .help-block.with-errors:empty{
	display: none;
}

/* Footer: flat navy like every other dark surface (drops the template's blurred gradient image) */
.main-footer{
	width: 100%;
	margin: 0;
	border-radius: 0;
	max-width: none;
	padding-top: 80px;
	background-image: none;
	background-color: var(--ui-ink);
	border-top: 1px solid var(--ui-line-dark);
}

.footer-links h2{
	font-size: 15px;
	letter-spacing: .02em;
}

/* Blog listing & article cards ------------------------------------------------------------ */
/* Article card (listing grid and related articles): a framed card with a fixed-ratio cover,
   the category chip over the photo, then meta, a clamped title and excerpt, and the link at the foot. */
.ui-insight-card{
	overflow: hidden;
	border: 1px solid var(--ui-line);
	border-radius: var(--ui-radius);
	background: #FFF;
	transition: transform .3s var(--ui-ease), box-shadow .3s var(--ui-ease), border-color .3s var(--ui-ease);
}

.ui-insight-card:hover,
.ui-insight-card:focus-within{
	transform: translateY(-4px);
	border-color: rgba(0, 145, 200, .45);
	box-shadow: var(--ui-shadow);
}

.ui-insight-card:focus-within{
	outline: 2px solid var(--ui-accent);
	outline-offset: 3px;
}

.ui-insight-card:focus-within .ui-insight-card-media{
	outline: none;
}

.ui-insight-card-media{
	flex-shrink: 0;
	margin: 0;
	border-radius: 0;
	aspect-ratio: 16 / 10;
}

.ui-insight-card-placeholder{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-size: 40px;
	color: rgba(0, 145, 200, .35);
	background: linear-gradient(135deg, var(--ui-surface) 0%, #E3EEF5 100%);
}

.ui-insight-card-chip{
	position: absolute;
	top: 16px;
	left: 16px;
	max-width: calc(100% - 32px);
	padding: 6px 12px;
	border-radius: 100px;
	background: rgba(255, 255, 255, .94);
	box-shadow: 0 4px 12px -4px rgba(16, 24, 40, .25);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .06em;
	line-height: 1.2;
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: var(--ui-accent-ink);
}

.ui-insight-card-body{
	padding: 22px 24px 24px;
}

.ui-insight-card-meta{
	gap: 6px 18px;
	font-size: 13px;
}

.ui-insight-card-meta i{
	margin-right: 6px;
	color: var(--ui-accent);
}

.ui-insight-card-title{
	display: -webkit-box;
	margin: 12px 0 10px;
	font-size: 1.25rem;
	line-height: 1.35;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ui-insight-card-title a{
	transition: color .25s var(--ui-ease);
}

.ui-insight-card:hover .ui-insight-card-title a{
	color: var(--ui-accent-ink);
}

.ui-insight-card p{
	display: -webkit-box;
	margin: 0 0 20px;
	font-size: 15px;
	line-height: 1.6;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ui-insight-card .ui-card-link{
	padding-top: 16px;
	border-top: 1px solid var(--ui-line);
	width: 100%;
}

/* Listing section: tighter than the default section rhythm so the grid starts sooner */
.ui-section.ui-blog-section{
	padding: clamp(56px, 6vw, 88px) 0;
}

.ui-blog-head{
	margin-bottom: clamp(24px, 3vw, 32px);
}

.ui-blog-head .ui-lead{
	margin-top: 12px;
}

/* Topic filters: centred pills that wrap on desktop and scroll sideways on phones */
.ui-blog-filters{
	margin: 0 0 20px;
}

.ui-blog-filters ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ui-blog-filters a{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 8px 0 18px;
	border: 1px solid var(--ui-line);
	border-radius: 100px;
	background: #FFF;
	font-size: 15px;
	font-weight: 600;
	white-space: nowrap;
	color: var(--ui-ink);
	transition: background-color .25s var(--ui-ease), color .25s var(--ui-ease), border-color .25s var(--ui-ease);
}

.ui-blog-filters a:hover{
	border-color: var(--ui-accent);
	color: var(--ui-accent-ink);
}

.ui-blog-filters a.is-active{
	border-color: var(--ui-ink);
	background: var(--ui-ink);
	color: #FFF;
}

.ui-blog-filter-count{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 28px;
	height: 28px;
	padding: 0 8px;
	border-radius: 100px;
	background: var(--ui-surface);
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	color: var(--ui-muted);
}

.ui-blog-filters a.is-active .ui-blog-filter-count{
	background: rgba(255, 255, 255, .16);
	color: #FFF;
}

/* 1 / 2 / 3 cards a row on mobile / tablet / desktop; every card in a row shares the tallest height */
.ui-blog-grid{
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ui-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Pagination: centred under the grid; numbered pages on tablet and up, "Page x of y" on phones */
.ui-pagination{
	display: flex;
	justify-content: center;
	margin-top: clamp(32px, 4vw, 48px);
}

.ui-pagination ul{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ui-pagination a,
.ui-pagination span[aria-current],
.ui-pagination-gap,
.ui-pagination-step.is-disabled{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-width: 44px;
	height: 44px;
	padding: 0 14px;
	border: 1px solid var(--ui-line);
	border-radius: 100px;
	background: #FFF;
	font-size: 15px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	line-height: 1;
	color: var(--ui-ink);
	transition: background-color .25s var(--ui-ease), color .25s var(--ui-ease), border-color .25s var(--ui-ease);
}

.ui-pagination a:hover,
.ui-pagination a:focus-visible{
	border-color: var(--ui-accent);
	color: var(--ui-accent-ink);
}

.ui-pagination span[aria-current]{
	border-color: var(--ui-ink);
	background: var(--ui-ink);
	color: #FFF;
}

.ui-pagination-gap{
	border-color: transparent;
	background: transparent;
	color: var(--ui-muted);
}

.ui-pagination-step{
	padding-inline: 18px;
}

.ui-pagination-step.is-disabled{
	color: var(--ui-muted);
	opacity: .55;
	cursor: not-allowed;
}

.ui-pagination-status{
	display: none;
	padding: 0 8px;
	font-size: 14px;
	color: var(--ui-muted);
}

.ui-pagination-status strong{
	color: var(--ui-ink);
}

.ui-blog-empty{
	max-width: 520px;
	margin: 0 auto;
	padding: 40px 24px;
	text-align: center;
}

.ui-blog-empty-icon{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	margin-bottom: 20px;
	border-radius: 50%;
	background: #FFF;
	font-size: 26px;
	color: var(--ui-accent);
}

.ui-blog-empty h3{
	margin: 0 0 10px;
	font-size: var(--ui-fs-h3);
}

.ui-blog-empty p{
	margin: 0 0 24px;
}

.ui-blog-empty .ui-btn-group{
	justify-content: center;
}

@media (min-width: 768px){
	.ui-blog-grid{
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1200px){
	.ui-blog-grid{
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 575px){
	/* One scrolling row of pills keeps the grid close to the top on phones */
	.ui-blog-filters{
		margin-inline: -16px;
	}

	.ui-blog-filters ul{
		flex-wrap: nowrap;
		justify-content: flex-start;
		padding: 2px 16px 6px;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
	}

	.ui-blog-filters ul::-webkit-scrollbar{
		display: none;
	}

	.ui-blog-filters li{
		scroll-snap-align: start;
	}

	.ui-insight-card-body{
		padding: 20px;
	}

	/* Prev / Page x of y / Next fits a 320px screen without wrapping */
	.ui-pagination ul{
		flex-wrap: nowrap;
	}

	.ui-pagination-page,
	.ui-pagination-step-label{
		display: none;
	}

	.ui-pagination-status{
		display: block;
		white-space: nowrap;
	}

	.ui-pagination-step{
		padding-inline: 0;
	}
}

@media (prefers-reduced-motion: reduce){
	.ui-insight-card,
	.ui-insight-card:hover,
	.ui-insight-card:focus-within{
		transform: none;
	}
}

/* Contact page ---------------------------------------------------------------------------- */
/* Service-style hero (copy only), channel cards on the surface band, the enquiry card beside the
   next steps, the admin FAQs (Home FAQ accordion) and the shared closing CTA. The form reuses the
   Free Consultation popup's field, alert, submit and success styles. */
.ui-contact-hero-copy{
	max-width: 780px;
}

.ui-contact-hero .ui-service-hero-icon{
	font-size: 14px;
	color: var(--ui-accent-ink);
}

/* Contact: the Home booking layout (navy info card beside the white enquiry card), with the channels as rows */
.ui-section.ui-contact-main{
	scroll-margin-top: 80px;
}

.ui-booking-channels{
	display: grid;
	gap: 12px;
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
}

.ui-booking-channels a{
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	border: 1px solid var(--ui-line-dark);
	border-radius: var(--ui-radius-sm);
	background: rgba(255, 255, 255, .04);
	color: #FFF;
	transition: border-color .25s var(--ui-ease), background-color .25s var(--ui-ease);
}

.ui-booking-channels a:hover,
.ui-booking-channels a:focus-visible{
	border-color: rgba(108, 205, 242, .55);
	background: rgba(255, 255, 255, .08);
	color: #FFF;
}

.ui-booking-channel-icon{
	display: grid;
	flex-shrink: 0;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(108, 205, 242, .16);
	color: var(--ui-accent-light);
	font-size: 16px;
}

.ui-booking-channel-text{
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.ui-booking-channel-label{
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .6);
}

.ui-booking-channel-value{
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
	overflow-wrap: anywhere;
}

.ui-booking-social .footer-social-links ul{
	gap: 10px;
}

/* Submit button and privacy note stack inside the compact card, as the Home button does */
.ui-booking-form .ui-consult-actions{
	flex-direction: column;
	align-items: stretch;
	gap: 12px;
	margin-top: 4px;
}

.ui-booking-form .ui-consult-submit{
	width: 100%;
}

.ui-booking-form .ui-consult-privacy{
	justify-content: center;
}

.ui-booking-form .ui-consult-alert{
	margin-bottom: 16px;
}

.ui-contact-form-card [data-enquiry-view][hidden]{
	display: none !important;
}

/* Contact page success alert: slides down above the form, then dismisses itself */
.ui-enquiry-success{
	display: flex;
	align-items: flex-start;
	gap: 12px;
	max-height: 0;
	margin-bottom: 0;
	padding: 0 16px;
	overflow: hidden;
	border: 1px solid transparent;
	border-radius: var(--ui-radius-sm);
	background: var(--ui-surface);
	color: var(--ui-ink);
	opacity: 0;
	transform: translateY(-12px);
	transition: max-height .4s ease, margin-bottom .4s ease, padding .4s ease, opacity .4s ease, transform .4s ease;
}

.ui-enquiry-success.is-visible{
	max-height: 200px;
	margin-bottom: 20px;
	padding: 14px 16px;
	border-color: var(--ui-accent);
	border-left-width: 4px;
	opacity: 1;
	transform: none;
}

.ui-enquiry-success[hidden]{
	display: none;
}

.ui-enquiry-success p{
	flex: 1;
	margin: 0;
	font-weight: 500;
	line-height: 1.5;
}

.ui-enquiry-success-icon{
	display: grid;
	flex-shrink: 0;
	place-items: center;
	width: 24px;
	height: 24px;
	margin-top: 1px;
	border-radius: 50%;
	background: var(--ui-accent);
	color: #FFF;
	font-size: 12px;
}

.ui-enquiry-success-close{
	flex-shrink: 0;
	padding: 2px 4px;
	border: 0;
	background: none;
	color: var(--ui-muted);
	cursor: pointer;
}

/* Animated "..." after the button's loading text */
.ui-dots span{
	display: inline-block;
	animation: ui-dot-blink 1.2s infinite both;
}

.ui-dots span:nth-child(2){ animation-delay: .2s; }
.ui-dots span:nth-child(3){ animation-delay: .4s; }

@keyframes ui-dot-blink{
	0%, 80%, 100%{ opacity: .2; }
	40%{ opacity: 1; }
}

@media (prefers-reduced-motion: reduce){
	.ui-enquiry-success{ transition: none; }
	.ui-dots span{ animation: none; opacity: 1; }
}

.ui-contact-form textarea.form-control{
	min-height: 120px;
}

/* FAQs: the Home FAQ accordion, numbered in place of per-question icons */
.ui-section.ui-faqs.ui-contact-faqs{
	padding-block: clamp(56px, 6vw, 88px);
}

.ui-faqs-index{
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .02em;
}

@media (max-width: 575.98px){
	.ui-contact-hero .ui-btn-group > *{
		flex: 1 1 100%;
	}
}

/* Free Consultation popup ------------------------------------------------------------------ */
/* A two-pane dialog: the navy pitch (with the CTA panel's rings) beside the form on desktop; on
   tablet and phone the pitch shrinks to a header strip above the form, and phones go full screen.
   Field styling is shared with the Contact form (see the .contact-form rules). */
.ui-consult-modal{
	/* Above the cookie banner (10050), which would otherwise cover the submit button on phones */
	--bs-modal-zindex: 10060;
}

.modal-backdrop{
	--bs-backdrop-zindex: 10055;
	--bs-backdrop-bg: #0B1220;
	--bs-backdrop-opacity: .64;
}

.ui-consult-dialog{
	--bs-modal-width: 640px;
}

.ui-consult-content{
	position: relative;
	border: 0;
	border-radius: var(--ui-radius-lg);
	overflow: hidden;
	background: #FFF;
	box-shadow: 0 40px 90px -24px rgba(16, 24, 40, .5);
}

.ui-consult-modal.fade .ui-consult-dialog{
	transform: translateY(24px) scale(.98);
	transition: transform .35s var(--ui-ease);
}

.ui-consult-modal.show .ui-consult-dialog{
	transform: none;
}

.ui-consult-close{
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 3;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--ui-line-dark);
	border-radius: 50%;
	background: rgba(255, 255, 255, .08);
	color: #FFF;
	font-size: 18px;
	transition: background-color .2s var(--ui-ease), color .2s var(--ui-ease), transform .2s var(--ui-ease);
}

.ui-consult-close:hover,
.ui-consult-close:focus-visible{
	background: rgba(255, 255, 255, .18);
	transform: rotate(90deg);
}

.ui-consult-close:focus-visible{
	outline: 3px solid var(--ui-accent-light);
	outline-offset: 2px;
}

.ui-consult-aside{
	position: relative;
	isolation: isolate;
	overflow: hidden;
	flex-shrink: 0;
	padding: 28px 72px 26px 28px;
	background: radial-gradient(120% 90% at 0% 0%, rgba(0, 145, 200, .45) 0%, transparent 60%), var(--ui-ink);
	color: rgba(255, 255, 255, .78);
}

.ui-consult-rings{
	position: absolute;
	right: -140px;
	bottom: -160px;
	z-index: -1;
	width: 360px;
	height: 360px;
	border-radius: 50%;
	box-shadow: 0 0 0 1px rgba(108, 205, 242, .14), 0 0 0 60px rgba(108, 205, 242, .04), 0 0 0 61px rgba(108, 205, 242, .12), 0 0 0 120px rgba(108, 205, 242, .03);
	pointer-events: none;
}

.ui-consult-eyebrow{
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 10px;
	color: var(--ui-accent-light);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.ui-consult-title{
	margin: 0;
	color: #FFF;
	font-size: clamp(1.375rem, 1.1rem + 1vw, 2rem);
	line-height: 1.2;
}

.ui-consult-intro{
	margin: 10px 0 0;
	font-size: 15px;
	line-height: 1.6;
	color: rgba(255, 255, 255, .78);
}

.ui-consult-perks,
.ui-consult-direct{
	display: none;
}

.ui-consult-main{
	padding: 28px;
}

.ui-consult-label{
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 6px;
	color: var(--ui-ink);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
}

.ui-consult-label > span[aria-hidden="true"]{
	color: #D92D20;
}

.ui-consult-optional{
	padding: 2px 8px;
	border-radius: 100px;
	background: var(--ui-surface);
	color: var(--ui-muted);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .02em;
}

.ui-consult-form .form-control{
	min-height: 50px;
	font-size: 16px;	/* 16px stops iOS Safari zooming the page on focus */
}

.ui-consult-form textarea.form-control{
	min-height: 120px;
}

.ui-consult-alert{
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 18px;
	padding: 12px 14px;
	border: 1px solid #FECDCA;
	border-radius: var(--ui-radius-sm);
	background: #FEF3F2;
	color: #B42318;
	font-size: 15px;
	line-height: 1.5;
}

.ui-consult-alert::before{
	content: '!';
	display: grid;
	flex-shrink: 0;
	place-items: center;
	width: 20px;
	height: 20px;
	margin-top: 1px;
	border-radius: 50%;
	background: #D92D20;
	color: #FFF;
	font-size: 13px;
	font-weight: 700;
}

.ui-consult-alert[hidden],
.ui-consult-main [data-consult-view][hidden]{
	display: none !important;
}

.ui-consult-actions{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 20px;
	margin-top: 24px;
}

.ui-consult-submit{
	justify-content: center;
	min-height: 54px;
	padding: 0 28px;
}

.ui-consult-submit-idle,
.ui-consult-submit-busy{
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.ui-consult-submit-busy,
.ui-consult-submit.is-loading .ui-consult-submit-idle{
	display: none;
}

.ui-consult-submit.is-loading .ui-consult-submit-busy{
	display: inline-flex;
}

.ui-consult-submit:disabled{
	cursor: progress;
	opacity: .85;
	pointer-events: none;
}

.ui-consult-privacy{
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: var(--ui-muted);
	font-size: 13px;
}

.ui-consult-success{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 100%;
	padding: 40px 12px;
	text-align: center;
	outline: none;
}

.ui-consult-success-icon{
	display: grid;
	place-items: center;
	width: 76px;
	height: 76px;
	margin-bottom: 22px;
	border-radius: 50%;
	background: var(--light-sky, #E6F4F9);
	box-shadow: 0 0 0 10px rgba(0, 145, 200, .08);
	color: var(--ui-accent);
	font-size: 30px;
	animation: ui-consult-pop .5s var(--ui-ease) both;
}

@keyframes ui-consult-pop{
	from{ transform: scale(.6); opacity: 0; }
	to{ transform: scale(1); opacity: 1; }
}

.ui-consult-success h3{
	margin: 0 0 10px;
	color: var(--ui-ink);
	font-size: 1.5rem;
}

.ui-consult-success p{
	max-width: 420px;
	margin: 0 0 26px;
	color: var(--ui-text);
}

/* Phones: full-screen sheet; the submit button spans the width for an easy thumb target */
@media (max-width: 575.98px){
	.ui-consult-content{
		border-radius: 0;
	}

	.ui-consult-aside{
		padding: 22px 64px 20px 20px;
	}

	.ui-consult-intro{
		display: none;
	}

	.ui-consult-main{
		padding: 22px 20px 28px;
	}

	.ui-consult-submit{
		width: 100%;
	}

	.ui-consult-privacy{
		justify-content: center;
		width: 100%;
	}
}

/* Desktop: pitch and form side by side */
@media (min-width: 992px){
	.ui-consult-dialog{
		--bs-modal-width: 1040px;
	}

	.ui-consult-content{
		flex-direction: row;
	}

	.ui-consult-aside{
		display: flex;
		flex: 0 0 37%;
		flex-direction: column;
		padding: 44px 36px;
	}

	.ui-consult-intro{
		margin-top: 14px;
	}

	.ui-consult-perks{
		display: grid;
		gap: 12px;
		margin: 28px 0 0;
		padding: 0;
		list-style: none;
		color: #FFF;
		font-size: 15px;
	}

	.ui-consult-perks li{
		display: flex;
		align-items: center;
		gap: 12px;
	}

	.ui-consult-perks i{
		display: grid;
		flex-shrink: 0;
		place-items: center;
		width: 24px;
		height: 24px;
		border-radius: 50%;
		background: rgba(108, 205, 242, .16);
		color: var(--ui-accent-light);
		font-size: 11px;
	}

	.ui-consult-direct{
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
		margin-top: auto;
		padding-top: 32px;
	}

	.ui-consult-direct p{
		flex: 1 0 100%;
		margin: 0;
		color: rgba(255, 255, 255, .6);
		font-size: 13px;
	}

	.ui-consult-direct a{
		display: inline-flex;
		align-items: center;
		gap: 8px;
		padding: 8px 14px;
		border: 1px solid var(--ui-line-dark);
		border-radius: 100px;
		color: #FFF;
		font-size: 14px;
		font-weight: 600;
		transition: background-color .2s var(--ui-ease), border-color .2s var(--ui-ease);
	}

	.ui-consult-direct a:hover,
	.ui-consult-direct a:focus-visible{
		border-color: rgba(255, 255, 255, .4);
		background: rgba(255, 255, 255, .08);
	}

	.ui-consult-main{
		flex: 1 1 auto;
		min-width: 0;
		padding: 44px 40px 36px;
	}

	/* Over the white form pane the close button turns dark */
	.ui-consult-close{
		top: 20px;
		right: 20px;
		border-color: var(--ui-line);
		background: #FFF;
		color: var(--ui-ink);
	}

	.ui-consult-close:hover,
	.ui-consult-close:focus-visible{
		background: var(--ui-surface);
	}

	.ui-consult-close:focus-visible{
		outline-color: var(--ui-accent);
	}
}

/* 09. Responsive -------------------------------------------------------------------------- */
@media (min-width: 576px){
	.ui-grid-3,
	.ui-grid-4,
	.ui-capabilities,
	.ui-checklist{
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

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

@media (min-width: 992px){
	:root{
		--ui-gap: 28px;
	}

	.ui-grid-3{
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.ui-grid-center{
		grid-template-columns: repeat(auto-fit, minmax(280px, 380px));
		justify-content: center;
	}

	.ui-section-head-split{
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	}

	.ui-section-head-split > :last-child{
		justify-self: end;
	}

	.ui-section-head-split > p:last-child,
	.ui-section-head-split > .ui-prose:last-child{
		justify-self: stretch;
	}

	.ui-process,
	.ui-process-4{
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.ui-process-3{
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.ui-cta-box{
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.ui-stats-list{
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (min-width: 1200px){
	.ui-grid-4{
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.ui-process{
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}

	.ui-process-3{
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.ui-process-4{
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (max-width: 991px){
	.hero.ui-hero{
		min-height: 0;
		padding: 150px 0 72px;
	}

	.ui-page-hero{
		padding-top: 150px;
		background-image:
			linear-gradient(180deg, rgba(16, 24, 40, .88) 0%, rgba(16, 24, 40, .9) 100%),
			url('../images/hero-bg-image-1.jpg');
		background-position: center, 65% center;
	}

	.ui-section-head-split .ui-btn-outline{
		justify-self: start;
	}
}

@media (max-width: 575px){
	body{
		font-size: 16px;
	}

	.ui-hero .ui-btn-group > *,
	.ui-cta-box .ui-btn-group > *{
		flex: 1 1 100%;
		text-align: center;
	}

	.ui-rating-badge{
		flex-wrap: wrap;
		border-radius: 16px;
	}

	.ui-service-card,
	.ui-feature{
		padding: 26px;
	}

	.ui-service-card-top{
		margin-bottom: 28px;
	}
}

/* 10. Motion preferences ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce){
	*,
	*::before,
	*::after{
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}

	/* Scroll reveals are skipped entirely: content is shown in place, with no delayed fade */
	.wow{
		visibility: visible !important;
		opacity: 1 !important;
		animation: none !important;
	}
}