/*
 * Sovereign brand layer.
 *
 * Loaded last so it overrides the base theme without editing 119KB of CSS.
 *
 * The problem this solves: every section in the base theme sits on white or
 * #f8f9fa, so navy and yellow only ever appear as small decorative touches.
 * A brand built on deep navy and a hard industrial yellow should own surfaces,
 * not just text.
 *
 * The rules here:
 *   - Navy is a surface colour, not only an ink colour. Dark bands give the
 *     page rhythm and make the brand unmistakable on a phone screen.
 *   - Yellow is the single accent, used for one thing per view: the action you
 *     want taken. It is never body text, because #fdec08 on white is around
 *     1.5:1 contrast and effectively unreadable.
 *   - Sky blue steps down to a supporting tint.
 */

/* ---------- Hero ---------- */

/* Solid, high-contrast type instead of gradient-filled text. On a photographic
   background this is both stronger branding and far more legible. */
.hero-content h1 {
	color: #fff;
	text-shadow: 0 2px 24px rgba(0, 57, 112, 0.55);
	letter-spacing: -0.015em;
}

.hero-content h1 .gradient-text {
	background: none;
	-webkit-background-clip: border-box;
	background-clip: border-box;
	color: var(--accent-color);
	-webkit-text-fill-color: currentColor;
	text-shadow: 0 2px 24px rgba(0, 57, 112, 0.55);
}

.hero-slogan {
	color: #fff;
	opacity: 0.92;
	letter-spacing: 0.08em;
}

/* One yellow rule under the hero, echoing the accent without adding noise. */
.hero-content h1::after {
	content: "";
	display: block;
	width: 4.5rem;
	height: 4px;
	margin-top: 1.25rem;
	background: var(--accent-color);
}

/* ---------- Primary action ---------- */

/* Yellow on navy is the strongest, most on-brand contrast available and reads
   instantly as the thing to press. Navy text on yellow clears AA comfortably. */
.btn-primary,
.hero-cta-btn,
.submit-btn {
	background: var(--accent-color);
	background-image: none;
	color: var(--primary-color);
	font-weight: 700;
	letter-spacing: 0.02em;
	border: 2px solid var(--accent-color);
	box-shadow: none;
}

.btn-primary:hover,
.hero-cta-btn:hover,
.submit-btn:hover,
.btn-primary:focus-visible,
.hero-cta-btn:focus-visible,
.submit-btn:focus-visible {
	background: #fff;
	color: var(--primary-color);
	border-color: #fff;
}

/* On navy surfaces the yellow button already sits on brand colour, so the
   hover inverts to navy-on-yellow rather than washing out to white. */
.sov-linkedin .btn:hover,
.sov-linkedin .btn:focus-visible,
.world-map-section .btn:hover {
	background: var(--primary-color);
	color: #fff;
	border-color: var(--accent-color);
}

/* ---------- Section rhythm ---------- */

/* Deliberately NOT darkening .creative-process or .clients-section: their inner
   panels carry their own light backgrounds, so making the section navy leaves
   white text sitting on white cards. Brand weight comes instead from the
   sections this theme fully controls - sectors, LinkedIn, the world map - plus
   the accent treatment on the figures below. */

.stats-section .stat-item h3 {
	color: var(--primary-color);
	font-size: clamp(2.25rem, 5vw, 3.5rem);
	line-height: 1;
	letter-spacing: -0.02em;
	margin-bottom: 0.5rem;
}

/* A yellow rule under each figure ties the statistics to the brand without
   needing a dark band behind them. */
.stats-section .stat-item h3::after {
	content: "";
	display: block;
	width: 2.5rem;
	height: 3px;
	margin: 0.5rem auto 0;
	background: var(--accent-color);
}

.stats-section .stat-item p {
	font-size: 0.9rem;
	letter-spacing: 0.04em;
	margin: 0;
}

/* ---------- Section headings ---------- */

/* The theme puts a small caps label above each H2. Rather than delete it,
   it becomes a functional marker: a short yellow rule plus quiet type. */
.section-header h3 {
	color: var(--primary-color);
	font-size: 0.8rem;
	letter-spacing: 0.14em;
	font-weight: 700;
	opacity: 0.7;
}

.section-header h2 {
	letter-spacing: -0.015em;
}

/* Kill gradient-filled headings everywhere else; they lower contrast and are
   the single most recognisable template default in modern web design. */
.section-header h2 .gradient-text,
.sov-sectors__title .gradient-text {
	background: none;
	-webkit-background-clip: border-box;
	background-clip: border-box;
	color: var(--primary-color);
	-webkit-text-fill-color: currentColor;
}

/* ---------- Supporting blue steps back ---------- */

.service-icon,
.service-card .icon-wrapper {
	background: rgba(0, 57, 112, 0.07);
	border-color: rgba(0, 57, 112, 0.14);
}

/* ---------- Focus visibility ---------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: 3px solid var(--accent-color);
	outline-offset: 2px;
	border-radius: 2px;
}

/* On navy the yellow outline already reads; on white it needs a navy halo. */
.sov-sectors a:focus-visible,
.gallery-item a:focus-visible {
	box-shadow: 0 0 0 6px rgba(0, 57, 112, 0.25);
}

/* ---------- Accessibility guard ---------- */

/* Yellow text on a light background is roughly 1.5:1 and fails badly. Anywhere
   the base theme tried it, fall back to navy. */
.world-map-fallback__lead {
	color: rgba(255, 255, 255, 0.85);
}

@media (prefers-reduced-motion: reduce) {
	.btn-primary,
	.hero-cta-btn,
	.submit-btn {
		transition: none;
	}
}


/* ------------------------------------------------------------------
   Corrections from review
   ------------------------------------------------------------------ */

/* The base theme sets these eyebrow headings to sky blue on a near-white
   background - about 2:1 contrast, which reads as invisible. These selectors
   carry the same specificity as the base rules so they actually win. */
.contact-section .section-header h3,
.stats-section .section-header h3,
.gallery-section .section-header h3,
.faq-section .section-header h3,
.services-section .section-header h3,
.testimonial-section .section-header h3,
.global-presence-section .section-header h3 {
	color: var(--primary-color);
	opacity: 0.75;
}

/* The decorative overlay on these sections was a purple-to-cyan wash. It is
   now brand-tinted, and transparent over the navy bands so the navy reads. */
.clients-section::before {
	background: none;
}

.global-presence-section::before {
	background: linear-gradient(135deg, rgba(0, 57, 112, 0.05) 0%, rgba(89, 190, 255, 0.05) 100%);
}

/* Icon and label were colliding in the Get Directions button. */
.get-directions-btn i,
.btn i.fas,
.btn i.far {
	margin-right: 0.5em;
}

/* The contact map container has no height until the map script runs, so the
   Visit Us panel collapsed to an empty box. Give it a reserved size and a
   brand placeholder so it never renders blank. */
.contact-map,
#contact-map {
	min-height: 320px;
	border-radius: var(--border-radius);
	background: var(--bg-color-light);
	border: 1px solid rgba(0, 57, 112, 0.12);
}

.map-actions {
	margin-top: 1rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}


/* A borrowed gallery photograph fills the FAQ slot until a specific one is set. */
.faq-image-photo {
	width: 100%;
	height: 100%;
	max-height: 460px;
	object-fit: cover;
	border-radius: var(--border-radius);
	display: block;
}


/* ==================================================================
   Fixes from looking at the rendered page
   ================================================================== */

/* Navigation. The base theme never set a link colour here - it relied on
   inheriting something readable against the old sky-blue bar. On navy the
   links came out navy-on-navy and vanished. */
.main-nav a,
#primary-menu a,
.main-nav ul li a {
	color: #fff;
}

.main-nav a:hover,
.main-nav a:focus-visible,
.main-nav a.active,
#primary-menu a:hover,
#primary-menu a.active {
	color: var(--accent-color);
}

/* Primary buttons. The base theme styles these through two-class selectors
   such as .hero-cta-btn.btn-primary, which outrank a single .btn-primary no
   matter what order the files load in. Matching that specificity is what makes
   the yellow actually apply. */
.hero-cta-btn.btn-primary,
.load-more-btn.btn-primary,
.contact-us-now-btn.btn-primary,
.send-message-btn.btn-primary,
.get-directions-btn.btn-primary,
.stats-cta-btn.btn-primary,
.clients-cta .btn,
.creative-process-content .btn {
	background: var(--accent-color);
	background-image: none;
	color: var(--primary-color);
	border: 2px solid var(--accent-color);
	box-shadow: none;
	font-weight: 700;
}

.hero-cta-btn.btn-primary:hover,
.load-more-btn.btn-primary:hover,
.contact-us-now-btn.btn-primary:hover,
.send-message-btn.btn-primary:hover,
.get-directions-btn.btn-primary:hover,
.stats-cta-btn.btn-primary:hover,
.clients-cta .btn:hover,
.creative-process-content .btn:hover {
	background: #fff;
	background-image: none;
	color: var(--primary-color);
	border-color: #fff;
}

/* Section headings. Every H2 is gradient-clipped text in the base theme, which
   is why they read as washed-out blue rather than solid navy. Undoing it needs
   the fill colour reset too, not just the background. */
.section-header h2,
.section-header > h2 {
	background: none;
	background-image: none;
	-webkit-background-clip: border-box;
	background-clip: border-box;
	-webkit-text-fill-color: currentColor;
	color: var(--primary-color);
}




/* ---------- Merged from the parallel review ---------- */

/* Photographs carried a stray accent border. Images should be framed by their
   own content, not by a rule around them. */
.gallery-item,
.gallery-item a,
.lg-thumb-item {
	border-color: rgba(0, 57, 112, 0.12);
}

.gallery-item img {
	border: none;
}

/* Icon and label were sitting flush together.
 *
 * .contact-btn is deliberately NOT in this list. It used to be, and that one
 * word took the mobile header apart: styles.css hides .contact-btn below
 * 991px, but this rule has the same specificity and loads later, so it won
 * the cascade and put the "Contact Us" button back on small screens - on top
 * of the logo, and wide enough to push the header past the edge of a 320px
 * phone. A media query adds no specificity, so the narrower rule lost.
 * Keep .contact-btn out of any unconditional display rule.
 */
.get-directions-btn,
.contact-us-now-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
}

.contact-btn {
	/* Spacing only - never 'display'. styles.css owns whether this is shown. */
	align-items: center;
	gap: 0.55em;
}

.get-directions-btn i,
.contact-us-now-btn i,
.contact-btn i {
	margin-right: 0;
}

.main-header nav a,
.main-header #primary-menu a {
	color: #fff;
}

.main-header nav a:hover,
.main-header #primary-menu a:hover {
	color: var(--accent-color);
}

/*
 * Not .current-menu-item on its own.
 *
 * Most of this menu points at sections of the front page - /#services,
 * /#gallery, /#contact. WordPress compares a custom link's URL with the
 * current page and ignores the fragment, so on the home page it marks
 * EVERY one of them current-menu-item + aria-current="page" at once, and
 * the whole bar lights up yellow instead of one item. Only a link without
 * a fragment can be trusted to mean "the page you are on"; for the
 * in-page ones the scroll spy in main.js sets .active on exactly one.
 */
.main-header #primary-menu .current-menu-item > a:not([href*="#"]) {
	color: var(--accent-color);
}

/* ---------- LinkedIn feed ---------- */

.sov-linkedin__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.5rem;
	margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
}

.sov-linkedin__feed {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
	gap: clamp(1.25rem, 2.5vw, 2rem);
	align-items: start;
}

/* A fixed aspect keeps the embeds from shifting the page as they load. */
.sov-linkedin__item {
	background: rgba(255, 255, 255, 0.06);
	border-radius: var(--border-radius);
	overflow: hidden;
	min-height: 420px;
}

.sov-linkedin__item iframe {
	display: block;
	width: 100%;
	height: 420px;
	border: 0;
	background: #fff;
}

/* Fallback for posts LinkedIn will not embed. */
.sov-linkedin__card {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.75rem;
	height: 100%;
	min-height: 420px;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(253, 236, 8, 0.35);
	border-radius: var(--border-radius);
	text-align: left;
}

.sov-linkedin__card-label {
	margin: 0;
	font-size: 0.8rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--accent-color);
}

.sov-linkedin__card-date {
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.75);
}

.sov-linkedin__card-link {
	align-self: flex-start;
	margin-top: 0.5rem;
	padding-bottom: 2px;
	color: #fff;
	font-weight: 700;
	text-decoration: none;
	border-bottom: 2px solid var(--accent-color);
}

.sov-linkedin__card-link:hover,
.sov-linkedin__card-link:focus-visible {
	color: var(--accent-color);
}

@media (max-width: 600px) {
	.sov-linkedin__item,
	.sov-linkedin__item iframe,
	.sov-linkedin__card {
		min-height: 360px;
	}
	.sov-linkedin__item iframe { height: 360px; }
}

/* ---------- Contact bar ---------- */

.sov-topbar {
	/* Inside .main-header, which is already full width. */
	background: #00264a;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	color: rgba(255, 255, 255, 0.92);
	font-size: 0.85rem;
	position: relative;
	z-index: 1001;
}

.sov-topbar__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 0.4rem 1.5rem;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}

.sov-topbar__item {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	color: inherit;
	text-decoration: none;
	letter-spacing: 0.01em;
	white-space: nowrap;
}

.sov-topbar__item:hover,
.sov-topbar__item:focus-visible {
	color: var(--accent-color);
}

.sov-topbar__icon {
	display: inline-flex;
	color: var(--accent-color);
}

/* The bar carries the full address and number by default; the short labels
   only appear on phones, where the full address wraps and doubles the
   header height. Exactly one of the pair is ever in the document. */
.sov-topbar__full {
	display: inline;
}

.sov-topbar__compact {
	display: none;
}

@media (max-width: 600px) {
	.sov-topbar__inner {
		justify-content: center;
		gap: 0.35rem 1.25rem;
		font-size: 0.8rem;
	}
}

/* ---------- World map ---------- */

.sov-worldmap-wrap {
	border-radius: var(--border-radius);
	overflow: hidden;
	background: var(--primary-color);
}

/* The base theme locks this container to 450px with overflow hidden, which cut
   the bottom off the map. Let it size to the artwork instead. */
.global-presence-section .world-map-container,
.global-presence-section .map-container {
	height: auto;
	min-height: 0;
	overflow: visible;
}

.global-presence-section .world-map {
	height: auto;
}

.sov-worldmap {
	display: block;
	width: 100%;
	height: auto;
}

/* ---------- Contact map fallback ---------- */

/* Sits underneath the embed. If the iframe loads it covers this; if it is
   blocked or slow, the visitor still gets the address and a working link. */
.contact-map {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.contact-map iframe {
	position: relative;
	z-index: 2;
}

.contact-map__fallback {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 1.5rem;
	text-align: center;
	color: var(--primary-color);
}

.contact-map__name {
	margin: 0;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.contact-map__address {
	margin: 0;
	font-style: normal;
	line-height: 1.6;
	font-size: 0.92rem;
}

.contact-map__link {
	margin-top: 0.25rem;
	color: var(--primary-color);
	font-weight: 700;
	text-decoration: none;
	border-bottom: 2px solid var(--accent-color);
	padding-bottom: 2px;
}

/* ---------- Client logos as case study links ---------- */

.clients-invite {
	text-align: center;
	margin: 0 0 1.5rem;
	font-size: 0.95rem;
	color: var(--primary-color);
}

.client-logo--linked a {
	display: block;
	border-radius: 6px;
	transition: transform 0.25s ease;
}

.client-logo--linked a:hover,
.client-logo--linked a:focus-visible {
	transform: translateY(-3px);
}

.client-logo--linked a:focus-visible {
	outline: 3px solid var(--accent-color);
	outline-offset: 4px;
}

/* ---------- Case study page ---------- */

.sov-case__header {
	padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(1.5rem, 3vw, 2.5rem);
	background: var(--primary-color);
	color: #fff;
}

.sov-case__eyebrow {
	margin: 0 0 0.75rem;
	font-size: 0.8rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.sov-case__eyebrow a {
	color: var(--accent-color);
	text-decoration: none;
}

.sov-case__title {
	margin: 0 0 0.75rem;
	font-size: clamp(1.9rem, 4.5vw, 3rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: #fff;
}

.sov-case__meta {
	margin: 0;
	color: var(--accent-color);
	font-weight: 600;
	letter-spacing: 0.02em;
}

.sov-case__hero img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 560px;
	object-fit: cover;
}

.sov-case__body {
	padding: clamp(2rem, 5vw, 3.5rem) 0;
	max-width: 44rem;
}

.sov-case__body p {
	line-height: 1.75;
}

.sov-case__sectors {
	margin-top: 2rem;
	font-size: 0.9rem;
}

.sov-case__sectors a {
	color: var(--primary-color);
	border-bottom: 2px solid var(--accent-color);
	text-decoration: none;
	margin-right: 0.5rem;
}

.sov-case__cta {
	margin-top: clamp(2.5rem, 5vw, 4rem);
	padding: clamp(1.75rem, 4vw, 2.75rem);
	background: var(--bg-color-light);
	border-left: 4px solid var(--accent-color);
	border-radius: var(--border-radius);
}

.sov-case__cta h2 {
	margin: 0 0 0.5rem;
	font-size: 1.4rem;
	color: var(--primary-color);
}

.sov-case__more {
	padding: clamp(2.5rem, 6vw, 4.5rem) 0;
	background: var(--bg-color-light);
}

.sov-case__more h2 {
	margin: 0 0 1.75rem;
	color: var(--primary-color);
}

.sov-case__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
	gap: clamp(1.25rem, 3vw, 2rem);
}

.sov-case__card {
	display: block;
	text-decoration: none;
	color: var(--primary-color);
	background: #fff;
	border-radius: var(--border-radius);
	overflow: hidden;
	box-shadow: var(--card-shadow);
}

.sov-case__card-img {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
}

.sov-case__card-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sov-case__card-title {
	display: block;
	padding: 1rem 1rem 0.25rem;
	font-weight: 700;
	line-height: 1.3;
}

.sov-case__card-meta {
	display: block;
	padding: 0 1rem 1.1rem;
	font-size: 0.85rem;
	opacity: 0.75;
}

/* ---------- Contact bar sits below the nav row ---------- */

.main-header .sov-topbar {
	background: rgba(0, 0, 0, 0.22);
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	border-bottom: none;
}

.main-header .sov-topbar__inner {
	justify-content: center;
	gap: 0.35rem 2.25rem;
	padding-top: 0.45rem;
	padding-bottom: 0.45rem;
}

/* ---------- Scrollbar ---------- */

/* Brand-coloured rather than the browser default grey. */
html {
	scrollbar-width: thin;
	scrollbar-color: var(--primary-color) rgba(0, 57, 112, 0.1);
}

::-webkit-scrollbar {
	width: 12px;
	height: 12px;
}

::-webkit-scrollbar-track {
	background: rgba(0, 57, 112, 0.08);
}

::-webkit-scrollbar-thumb {
	background: var(--primary-color);
	border-radius: 999px;
	border: 3px solid transparent;
	background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
	background: var(--accent-color);
	background-clip: content-box;
}

::-webkit-scrollbar-corner {
	background: transparent;
}

/* ---------- Client marquee: draggable ---------- */

.clients-track,
.logos-slide,
.clients-carousel {
	cursor: grab;
}

.clients-track.is-dragging,
.logos-slide.is-dragging,
.clients-carousel.is-dragging {
	cursor: grabbing;
	user-select: none;
}

/* Playback is driven by script now, so the keyframe animation is switched off
   to stop the two fighting over the transform. */
.clients-carousel {
	animation: none !important;
}


/* ---------- Header edge ---------- */

/* The header carried bottom padding, so a sliver of navy showed under the
   darker contact strip. The strip is the last thing in the header; nothing
   should sit below it. */
.main-header {
	padding-bottom: 0;
}

.main-header .sov-topbar {
	margin-bottom: 0;
}

/* Phone under the logo, email under the contact button, rather than both
   bunched in the middle. */
.main-header .sov-topbar__inner {
	justify-content: space-between;
}

@media (max-width: 700px) {
	.main-header .sov-topbar__inner {
		justify-content: center;
		gap: 0.3rem 1.25rem;
	}
}

/* ---------- 404 ---------- */

.sov-404 {
	padding: clamp(7rem, 12vw, 10rem) 0 clamp(4rem, 8vw, 6rem);
	background: var(--primary-color);
	color: #fff;
}

.sov-404__eyebrow {
	margin: 0 0 0.75rem;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--accent-color);
}

.sov-404__title {
	margin: 0 0 1rem;
	font-size: clamp(2rem, 5vw, 3.25rem);
	line-height: 1.1;
	color: #fff;
	-webkit-text-fill-color: currentColor;
}

.sov-404__lead {
	max-width: 56ch;
	margin: 0 0 2rem;
	font-size: 1.05rem;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.88);
}

.sov-404__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-bottom: clamp(2.5rem, 6vw, 4rem);
}

.sov-404 .btn.btn-primary {
	background: var(--accent-color);
	color: var(--primary-color);
	border: none;
	font-weight: 700;
}

.sov-404__ghost {
	border: 2px solid rgba(255, 255, 255, 0.5);
	color: #fff;
	background: none;
	font-weight: 700;
}

.sov-404__ghost:hover,
.sov-404__ghost:focus-visible {
	border-color: var(--accent-color);
	color: var(--accent-color);
}

.sov-404__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
	gap: clamp(1.25rem, 3vw, 2rem);
}

.sov-404__card {
	padding: clamp(1.25rem, 3vw, 1.75rem);
	background: rgba(255, 255, 255, 0.07);
	border-radius: var(--border-radius);
}

.sov-404__card--wide {
	grid-column: 1 / -1;
}

.sov-404__card h2 {
	margin: 0 0 1rem;
	font-size: 1.05rem;
	letter-spacing: 0.02em;
	color: #fff;
	-webkit-text-fill-color: currentColor;
}

.sov-404__card a {
	color: #fff;
	text-decoration: none;
	border-bottom: 1px solid rgba(253, 236, 8, 0.6);
}

.sov-404__card a:hover,
.sov-404__card a:focus-visible {
	color: var(--accent-color);
}

.sov-404__contact,
.sov-404__posts {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.75rem;
}

.sov-404__posts li {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.75rem;
	align-items: baseline;
}

.sov-404__posts span {
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.6);
}

.sov-404 .search-form {
	display: flex;
	gap: 0.5rem;
}

.sov-404 .search-form label,
.sov-404 .search-form input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
}

.sov-404 .search-form input[type="search"] {
	width: 100%;
	padding: 0.7rem 0.9rem;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: var(--border-radius);
	background: rgba(255, 255, 255, 0.95);
	color: var(--primary-color);
}

.sov-404 .search-form input[type="submit"] {
	padding: 0.7rem 1.1rem;
	border: none;
	border-radius: var(--border-radius);
	background: var(--accent-color);
	color: var(--primary-color);
	font-weight: 700;
	cursor: pointer;
}

/* =========================================================================
 * Blog, archives and standard pages
 *
 * These templates were inheriting the old palette's light grey body text on
 * white, which is what made the articles look faded and unfinished. Everything
 * below puts them on the same navy/yellow system as the homepage and gives the
 * text enough contrast to actually read.
 * ====================================================================== */

.blog-archive,
.blog-single,
.page-standard {
	padding: clamp(7rem, 11vw, 9.5rem) 0 clamp(3.5rem, 7vw, 5.5rem);
	background: var(--bg-color);
	color: #1d2b3a;
}

.blog-page-header {
	margin-bottom: clamp(2rem, 5vw, 3rem);
}

.blog-page-header .page-title,
.page-standard__title {
	font-size: clamp(2rem, 4.5vw, 3rem);
	line-height: 1.12;
	color: var(--primary-color);
	-webkit-text-fill-color: currentColor;
	margin: 0 0 0.75rem;
}

.archive-description {
	max-width: 62ch;
	margin: 0 auto;
	color: #40566d;
	line-height: 1.7;
}

/* ---------- Category filter ---------- */

.blog-category-filter {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
	margin-bottom: clamp(2rem, 4vw, 2.75rem);
}

.category-filter-btn {
	display: inline-block;
	padding: 0.5rem 1rem;
	border: 1px solid rgba(0, 58, 112, 0.18);
	border-radius: 999px;
	background: #fff;
	color: var(--primary-color);
	font-size: 0.9rem;
	font-weight: 600;
	text-decoration: none;
	transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.category-filter-btn:hover,
.category-filter-btn:focus-visible {
	border-color: var(--primary-color);
	background: rgba(0, 58, 112, 0.06);
	color: var(--primary-color);
}

.category-filter-btn.active {
	background: var(--primary-color);
	border-color: var(--primary-color);
	color: #fff;
}

/* ---------- Post grid ---------- */

.blog-posts-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
	gap: clamp(1.25rem, 3vw, 2rem);
}

.blog-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: #fff;
	border: 1px solid rgba(0, 58, 112, 0.1);
	border-radius: var(--border-radius);
	box-shadow: 0 4px 18px rgba(0, 58, 112, 0.06);
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.blog-card:hover,
.blog-card:focus-within {
	transform: translateY(-3px);
	border-color: rgba(0, 58, 112, 0.25);
	box-shadow: 0 14px 30px rgba(0, 58, 112, 0.12);
}

.blog-card-image {
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: rgba(0, 58, 112, 0.07);
}

.blog-card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.blog-card-content {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	flex: 1 1 auto;
	padding: clamp(1.1rem, 2.4vw, 1.5rem);
}

.blog-card-category a,
.blog-card-category {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #0a5ca8;
	text-decoration: none;
}

.blog-card-title {
	margin: 0;
	font-size: 1.1rem;
	line-height: 1.35;
}

.blog-card-title a {
	color: var(--primary-color);
	text-decoration: none;
	-webkit-text-fill-color: currentColor;
}

.blog-card-title a:hover,
.blog-card-title a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.blog-card-meta,
.blog-card-date {
	font-size: 0.82rem;
	color: #5b6b7d;
}

.blog-card-excerpt {
	font-size: 0.95rem;
	line-height: 1.65;
	color: #3c4d60;
}

.blog-card-footer {
	margin-top: auto;
	padding-top: 0.4rem;
}

.blog-card-read-more {
	font-weight: 700;
	color: var(--primary-color);
	text-decoration: none;
	border-bottom: 2px solid var(--accent-color);
	padding-bottom: 1px;
}

.blog-card-read-more:hover,
.blog-card-read-more:focus-visible {
	color: #0a5ca8;
}

.no-posts-found {
	padding: 2rem;
	text-align: center;
	color: #40566d;
}

/* ---------- Single post and standard pages ---------- */

.blog-single-wrapper {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(2rem, 4vw, 3rem);
	max-width: 100%;
}

@media (min-width: 60rem) {
	.blog-single-wrapper.has-sidebar {
		grid-template-columns: minmax(0, 1fr) 18rem;
	}
}

.blog-single-content,
.page-standard__content {
	max-width: 74ch;
	font-size: 1.02rem;
	line-height: 1.75;
	color: #2b3a4a;
}

.blog-single-content h1,
.blog-single-content h2,
.blog-single-content h3,
.page-standard__content h2,
.page-standard__content h3 {
	color: var(--primary-color);
	-webkit-text-fill-color: currentColor;
	line-height: 1.25;
	margin: 2rem 0 0.75rem;
}

.blog-single-content h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); margin-top: 0; }
.blog-single-content h2, .page-standard__content h2 { font-size: clamp(1.4rem, 2.6vw, 1.75rem); }
.blog-single-content h3, .page-standard__content h3 { font-size: 1.15rem; }

.blog-single-content p,
.page-standard__content p {
	margin: 0 0 1.15rem;
}

.blog-single-content a,
.page-standard__content a {
	color: #0a5ca8;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.blog-single-content a:hover,
.page-standard__content a:hover {
	color: var(--primary-color);
}

.blog-single-content img,
.page-standard__content img {
	max-width: 100%;
	height: auto;
	border-radius: var(--border-radius);
	margin: 1rem 0;
}

.blog-single-content ul,
.blog-single-content ol,
.page-standard__content ul,
.page-standard__content ol {
	margin: 0 0 1.15rem 1.25rem;
	padding-left: 0.75rem;
}

.blog-single-content li,
.page-standard__content li {
	margin-bottom: 0.4rem;
}

.blog-single-content blockquote,
.page-standard__content blockquote {
	margin: 1.5rem 0;
	padding: 1rem 1.25rem;
	border-left: 4px solid var(--accent-color);
	background: rgba(0, 58, 112, 0.04);
	font-style: italic;
	color: #2b3a4a;
}

/* ---------- Breadcrumbs ---------- */

.blog-breadcrumbs {
	margin-bottom: 1.25rem;
	font-size: 0.85rem;
	color: #5b6b7d;
}

.blog-breadcrumbs a {
	color: #0a5ca8;
	text-decoration: none;
}

.blog-breadcrumbs a:hover {
	text-decoration: underline;
}

.breadcrumb-separator {
	margin: 0 0.4rem;
	color: rgba(0, 58, 112, 0.35);
}

.breadcrumb-current {
	color: #2b3a4a;
}

/* ---------- Post navigation and related ---------- */

.post-navigation {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	gap: 1rem;
	margin: 2.5rem 0;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(0, 58, 112, 0.12);
}

.post-navigation a {
	display: block;
	padding: 1rem;
	border: 1px solid rgba(0, 58, 112, 0.12);
	border-radius: var(--border-radius);
	background: #fff;
	color: var(--primary-color);
	text-decoration: none;
}

.post-navigation a:hover {
	border-color: var(--primary-color);
}

.post-navigation .nav-subtitle {
	display: block;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #5b6b7d;
	margin-bottom: 0.25rem;
}

.related-posts-section {
	margin-top: 3rem;
	padding-top: 2rem;
	border-top: 1px solid rgba(0, 58, 112, 0.12);
}

.related-posts-section h2 {
	font-size: 1.3rem;
	color: var(--primary-color);
	-webkit-text-fill-color: currentColor;
	margin-bottom: 1.25rem;
}

/* ---------- Pagination ---------- */

.pagination,
.navigation.pagination {
	display: flex;
	justify-content: center;
	gap: 0.4rem;
	margin-top: clamp(2rem, 4vw, 3rem);
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding: 0 0.6rem;
	border: 1px solid rgba(0, 58, 112, 0.18);
	border-radius: var(--border-radius);
	background: #fff;
	color: var(--primary-color);
	text-decoration: none;
	font-weight: 600;
}

.pagination .page-numbers.current {
	background: var(--primary-color);
	border-color: var(--primary-color);
	color: #fff;
}

.pagination .page-numbers:hover {
	border-color: var(--primary-color);
}

/* ---------- Sidebar ---------- */

.blog-sidebar .widget {
	margin-bottom: 1.75rem;
	padding: 1.25rem;
	background: #fff;
	border: 1px solid rgba(0, 58, 112, 0.1);
	border-radius: var(--border-radius);
}

.blog-sidebar .widget-title {
	margin: 0 0 0.85rem;
	font-size: 0.95rem;
	letter-spacing: 0.04em;
	color: var(--primary-color);
	-webkit-text-fill-color: currentColor;
}

.blog-sidebar ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.55rem;
}

.blog-sidebar a {
	color: #2b3a4a;
	text-decoration: none;
}

.blog-sidebar a:hover {
	color: #0a5ca8;
	text-decoration: underline;
}

/* Pagination screen-reader helper used by the news page. */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---------- Client logos ----------
 *
 * Wrapping a logo in a link broke its sizing: .client-logo img was constrained
 * with max-height:100%, which resolves against the anchor, and an inline anchor
 * has no height - so the Citroen SVG rendered at its intrinsic size and burst
 * out of the tile. The anchor now fills the tile, and the image is capped in
 * absolute units so every logo matches whether it is linked or not.
 */

.client-logo {
	display: flex;
	align-items: center;
	justify-content: center;
}

.client-logo > a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	text-decoration: none;
}

.client-logo img,
.client-logo > a img {
	max-height: 46px;
	max-width: 82%;
	width: auto;
	height: auto;
	object-fit: contain;
}

@media (max-width: 600px) {
	.client-logo img,
	.client-logo > a img {
		max-height: 38px;
	}
}

/* A logo that leads somewhere should look like it does. */
.client-logo--linked {
	position: relative;
	cursor: pointer;
}


.client-logo--linked > a:focus-visible {
	outline: 3px solid var(--primary-color);
	outline-offset: 2px;
}

.clients-invite {
	text-align: center;
	margin-top: 1rem;
	font-size: 0.92rem;
	color: #40566d;
}

/* ---------- Header layout ----------
 *
 * .main-nav was absolutely positioned and centred on the header. That works
 * for a short menu and fails silently for a longer one: the nav simply grows
 * out from the centre until it sits on top of the logo, which is what happened
 * when the menu went from six items to eight. Laying the header out as a real
 * three-part flex row means the nav can never overlap its neighbours - it runs
 * out of room and the items tighten up instead.
 */

@media (min-width: 992px) {
	.main-header .container {
		display: flex;
		align-items: center;
		gap: clamp(0.75rem, 2vw, 2rem);
	}

	.logo-container {
		flex: 0 0 auto;
		margin-right: 0;
		max-width: 200px;
	}

	.main-nav {
		position: static;
		left: auto;
		transform: none;
		flex: 1 1 auto;
		min-width: 0;
		display: flex;
		justify-content: center;
	}

	.main-nav ul#primary-menu,
	.main-nav ul {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		gap: clamp(0.6rem, 1.5vw, 1.75rem);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.main-nav a {
		white-space: nowrap;
		font-size: clamp(0.82rem, 1vw, 0.95rem);
	}

	.right-header-elements {
		flex: 0 0 auto;
	}
}

/* Below this the menu is too tight to read; hand over to the mobile menu. */
@media (max-width: 1180px) and (min-width: 992px) {
	.main-nav a {
		font-size: 0.8rem;
	}

	.main-nav ul {
		gap: 0.6rem;
	}

	.logo-container {
		max-width: 160px;
	}
}

/* The active item: yellow text plus the underline, on the real current page. */
/* These carry #primary-menu because the base colour rule above does too;
   without it the active item loses the cascade and nothing is highlighted. */
.main-header .main-nav a.active,
.main-header #primary-menu a.active,
.main-header #primary-menu a[aria-current]:not([href*="#"]) {
	color: var(--accent-color);
}

.main-nav a.active::after,
.main-nav a[aria-current]::after {
	width: 100%;
}

/* =====================================================================
   MOBILE LAYOUT
   ---------------------------------------------------------------------
   Everything below 992px. The theme it grew out of was built for a
   desktop header with a centred, absolutely-positioned nav; on a phone
   that left the header 144px tall with the hero starting underneath it,
   and several blocks wider than the screen. This section rebuilds the
   parts that a phone actually touches: the header, the hero, the contact
   form, tap targets and the footer.

   Measured on a 320px and a 390px viewport, not assumed.
   ===================================================================== */

/* ---------- 1. Things that are wrong at every width ---------- */

/*
 * The contact form sat 374px wide inside a 311px column and hung off the
 * right edge. A grid/flex item defaults to min-width:auto, so the form
 * could not shrink below the intrinsic width of its widest field. Letting
 * the fields shrink, and the form with them, is the whole fix.
 */
.contact-grid,
.contact-grid > *,
.contact-form-container,
.contact-form,
.contact-form > *,
.contact-info,
.contact-info > *,
.visit-us-container,
.visit-us-container > *,
.visit-address {
	min-width: 0;
}

/*
 * A 1fr grid track still refuses to go below the widest item's min-content
 * width, so one long unbroken string - an email address, a phone number
 * with a nowrap on it - drags the whole column past the edge of the screen.
 * Let those strings break.
 */
.contact-info a,
.contact-details a,
.contact-text a,
.contact-text,
.visit-address a {
	/* 'anywhere' is what actually lets a grid track shrink - unlike
	   break-word it counts toward min-content width - but it will also
	   break a word that had room, which is how the address ended up as
	   "sovereignexhibitio / ns.co.uk". Sizing the text to fit on one line
	   first means the break almost never has to happen. */
	overflow-wrap: anywhere;
}

@media (max-width: 991px) {
	.contact-text a,
	.contact-info a,
	.contact-details a {
		font-size: clamp(0.8rem, 3.5vw, 1rem);
	}

	/* Label and number were on separate lines with the number indented
	   under nothing. Stack them properly instead. */
	.contact-text .whatsapp-line,
	.contact-text p {
		display: block;
	}
}

.contact-form input,
.contact-form textarea,
.contact-form select,
.contact-form .form-group {
	width: 100%;
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
}

/*
 * WordPress' own blocks and long unbroken words pushed single posts 3px
 * past the edge at 320px: the search block's input and button refuse to
 * shrink, and a long bold word will not break on its own.
 */
.wp-block-search,
form.wp-block-search__button-outside,
form.wp-block-search__button-inside {
	max-width: 100%;
	flex-wrap: wrap;
}

/* The label sits in the same flex row as the field, so on a narrow screen
   the field started after it and ran off the edge. Give the label its own
   line and let the field have the next one. */
.wp-block-search__label {
	flex: 1 0 100%;
}

.wp-block-search__inside-wrapper {
	flex: 1 1 100%;
	max-width: 100%;
	min-width: 0;
	flex-wrap: wrap;
}

.wp-block-search__input {
	flex: 1 1 auto;
	min-width: 0;
}

.site-main h1,
.site-main h2,
.site-main h3,
.site-main h4,
.site-main p,
.site-main li,
.site-main b,
.site-main strong,
.entry-content a {
	overflow-wrap: break-word;
}

.widget-area,
.sidebar,
.widget-area > *,
.sidebar > * {
	min-width: 0;
	max-width: 100%;
}

/*
 * The footer was the thing actually breaking the page width. Its grid
 * columns measured 326px inside a 320px phone, because a grid track is
 * sized by its items' min-content width and nothing in
 * "hello@sovereignexhibitions.co.uk" is allowed to break. The whole
 * document then scrolled sideways, and - because a mobile layout viewport
 * grows to fit its content - the fixed header stretched to 358px with it,
 * which is what made the header look shoved off to one side.
 */
.footer-grid,
.footer-grid > *,
.footer-logo-column,
.footer-links-column,
.footer-contact-column {
	min-width: 0;
}

.footer-links-column a,
.footer-contact-column a,
.footer-contact-column p,
.footer-logo-column p,
.footer-bottom a {
	overflow-wrap: anywhere;
}

/* The floating "return to home" button sat 20px off the corner at 45px
   square, directly over the footer's legal links and the stats CTA. */
.return-to-home-btn {
	width: 42px;
	height: 42px;
	right: 12px;
	bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}

/* ---------- 2. Below 992px ---------- */

@media (max-width: 991px) {

	:root {
		--sov-header-h: 96px;
	}

	/*
	 * Belt and braces. The root cause is fixed above, but this header has
	 * now been broken twice by a stray display rule, so state the intent
	 * here too: there is no room for this button beside the logo and the
	 * hamburger, and the same link is in the menu, the contact section
	 * and the footer.
	 */
	.contact-btn {
		display: none !important;
	}

	.main-header {
		padding: 0;
	}

	.main-header .container {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 8px 16px;
		min-height: 56px;
	}

	.logo-container {
		max-width: 150px;
		margin-right: 0;
		flex: 0 1 auto;
		min-width: 0;
	}

	.main-header .logo,
	.logo-container .logo {
		max-height: 36px;
		width: auto;
	}

	.right-header-elements {
		margin-left: 0;
		gap: 0;
	}

	/* A real 44px target instead of a 25px-wide stack of bars. */
	.mobile-menu-toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 auto;
		margin-left: 0;
		padding: 0;
		width: 44px;
		height: 44px;
		border-radius: 8px;
	}

	.mobile-menu-toggle span {
		width: 24px;
	}

	/* ----- contact bar ----- */

	.main-header .sov-topbar__inner,
	.sov-topbar__inner {
		display: flex;
		flex-wrap: nowrap;
		justify-content: stretch;
		align-items: stretch;
		gap: 0;
		padding: 0;
	}

	.sov-topbar__item {
		flex: 1 1 50%;
		justify-content: center;
		min-height: 40px;
		padding: 4px 8px;
		font-size: 0.82rem;
		white-space: nowrap;
	}

	.sov-topbar__item + .sov-topbar__item {
		border-left: 1px solid rgba(255, 255, 255, 0.12);
	}

	/* Two short, unmistakable actions rather than a 32-character address
	   wrapping onto a second line and doubling the header height. */
	.sov-topbar__full {
		display: none;
	}

	.sov-topbar__compact {
		display: inline;
	}

	/* ----- the fixed header no longer sits on top of the page ----- */

	html {
		scroll-padding-top: calc(var(--sov-header-h) + 8px);
	}

	/*
	 * The hero is sized by sovereign_generate_hero_css(), printed inline in
	 * <head>, which sets height:100vh as well as min-height:100vh. Overriding
	 * min-height alone changed nothing - the hero stayed a full screen tall
	 * with the content floating in the middle of it. Both have to go.
	 */
	.hero-section,
	#home.hero-section {
		height: auto;
		min-height: 0;
		padding-top: calc(var(--sov-header-h) + 28px);
		padding-bottom: 48px;
	}

	body:not(.home) .site-main {
		padding-top: calc(var(--sov-header-h) + 32px);
	}

	/* ----- hero type ----- */

	.hero-content h1,
	.hero-title {
		font-size: clamp(1.7rem, 8vw, 2.25rem);
		line-height: 1.15;
	}

	.hero-slogan,
	.hero-content .hero-slogan {
		font-size: clamp(0.85rem, 3.6vw, 1rem);
		letter-spacing: 0.06em;
	}

	.hero-description,
	.hero-content p {
		font-size: 1rem;
		line-height: 1.6;
		max-width: 34ch;
		margin-left: auto;
		margin-right: auto;
	}

	/* ----- menu drawer: readable rows, proper targets -----
	 *
	 * The drawer opened white, and the links inside it came out yellow on
	 * white - and one of them, the item with no state class, inherited
	 * "color:#fff" from `.main-header #primary-menu a` and was white on
	 * white, i.e. invisible. That rule carries an ID, so nothing with a
	 * plain class could override it; these selectors are deliberately
	 * specific enough to win.
	 *
	 * The drawer is now navy like the header it drops out of, so the panel
	 * reads as part of the header, and background and text colour are set
	 * together in one place so neither can drift on its own again.
	 */

	.main-nav.show {
		background-color: var(--primary-color);
		padding: 8px 0;
		max-height: calc(100vh - var(--sov-header-h));
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		box-shadow: 0 12px 24px rgba(0, 0, 0, 0.28);
	}

	.main-header .main-nav.show a,
	.main-header .main-nav.show #primary-menu a,
	.main-header .main-nav.show ul li a {
		color: #fff;
		background: transparent;
		border-left: 3px solid transparent;
	}

	.main-header .main-nav.show #primary-menu a:hover,
	.main-header .main-nav.show #primary-menu a:focus-visible,
	.main-header .main-nav.show ul a:hover,
	.main-header .main-nav.show ul a:focus-visible {
		color: var(--accent-color);
		background: rgba(255, 255, 255, 0.07);
	}

	/* The page you are actually on. */
	.main-header .main-nav.show #primary-menu a.active,
	.main-header .main-nav.show ul a.active,
	.main-header .main-nav.show #primary-menu a[aria-current]:not([href*="#"]),
	.main-header .main-nav.show #primary-menu .current-menu-item > a:not([href*="#"]) {
		color: var(--accent-color);
		background: rgba(255, 255, 255, 0.1);
		border-left-color: var(--accent-color);
		font-weight: 600;
	}

	/* The underline animation belongs to the desktop bar, not to rows. */
	.main-nav.show a::after {
		display: none;
	}

	.main-nav.show ul {
		gap: 0;
	}

	.main-nav.show a {
		display: flex;
		align-items: center;
		min-height: 48px;
		padding: 10px 20px;
		font-size: 1rem;
		border-radius: 0;
	}

	.main-nav.show li + li a {
		border-top: 1px solid rgba(255, 255, 255, 0.1);
	}

	/* ----- tap targets everywhere else ----- */

	.btn,
	.category-filter-btn,
	.filter-btn,
	.tab-btn {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.service-card .learn-more,
	.learn-more,
	.blog-card-read-more,
	.blog-card-title a,
	.email-link,
	.footer-links-column a,
	.footer-bottom a,
	.sov-404__contact a,
	.sov-404__posts a {
		display: inline-flex;
		align-items: center;
		min-height: 42px;
	}

	/* ----- sections: less dead space, tighter rhythm ----- */

	section {
		padding-top: 48px;
		padding-bottom: 48px;
	}

	.section-header {
		margin-bottom: 28px;
	}

	.section-header h2 {
		font-size: clamp(1.45rem, 6.2vw, 1.9rem);
		line-height: 1.2;
	}

	/* ----- footer ----- */

	.footer-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}

	.footer-logo-column {
		grid-column: auto;
		text-align: center;
	}

	.footer-links-column ul {
		margin: 0;
	}

	.social-icons {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 12px;
	}

	/*
	 * Five 44px circles with a 14px gap and the base theme's 10px
	 * margin-right come to 326px - wider than a 320px phone. Flex then
	 * shrank them, which is why they looked squashed and crowded rather
	 * than round. 40px with no extra margin fits with room to spare, and
	 * flex:0 0 auto stops them being squeezed out of shape again.
	 */
	.social-icons a {
		flex: 0 0 auto;
		width: 40px;
		height: 40px;
		margin-right: 0;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	/* Keep the legal links clear of the floating button. */
	.footer-bottom {
		padding-bottom: 68px;
	}
}

/* ---------- 3. Narrow phones (<= 420px) ---------- */

@media (max-width: 420px) {

	:root {
		--sov-header-h: 92px;
	}

	.main-header .container {
		padding: 6px 12px;
		min-height: 52px;
	}

	.logo-container {
		max-width: 132px;
	}

	.main-header .logo,
	.logo-container .logo {
		max-height: 32px;
	}

	.sov-topbar__item {
		font-size: 0.78rem;
	}

	section {
		padding-top: 40px;
		padding-bottom: 40px;
	}

	.container {
		padding-left: 16px;
		padding-right: 16px;
	}
}

/* =====================================================================
   WP RESPONSIVE MENU (plugin) - switched off for this theme only
   ---------------------------------------------------------------------
   The site runs WP Responsive Menu 3.2.3, which below 1000px injects its
   own bar - div.wprm-wrapper > #wprmenu_bar, position:fixed, 42px tall,
   z-index:99999 - and forces `html { padding-top: 42px !important }`.

   This theme has its own mobile header and menu drawer, so on a phone V2
   ended up with two fixed bars on the same strip. The plugin's sits at
   99999 against this header's 1000, so it covered the logo completely and
   its html padding pushed the page down behind it. That is the yellow
   "MENU" strip over the top of the Sovereign logo.

   These rules live in the THEME stylesheet, which is only loaded while
   this theme is active or being previewed. The published site runs a
   different theme and never loads this file, so its mobile menu is
   untouched. Nothing is changed in the plugin's own settings.

   If the plugin's menu is ever wanted back for this theme, delete this
   block - that is the whole of the change.

   1000px, not 992px, because the plugin's own breakpoint is 999px and
   between 992 and 999 the desktop header is showing and was being
   covered too.
   ===================================================================== */

@media (max-width: 999px) {

	.wprm-wrapper,
	#wprmenu_bar,
	#mg-wprm-wrap {
		display: none !important;
	}

	/*
	 * :root rather than html. The plugin sets this with !important, so an
	 * equally-weighted `html` rule would come down to which stylesheet the
	 * browser saw last - and the plugin's is enqueued first on some pages
	 * and not others. :root is one specificity step higher, so this wins
	 * regardless of order.
	 */
	html:root {
		padding-top: 0 !important;
	}
}


/* =====================================================================
   MICRO-FIXES from review
   ===================================================================== */

/*
 * Filter buttons looked shaved off along the top on hover.
 *
 * .filter-btn sets overflow:hidden, while its ::before - the gradient that
 * forms the active border - was inset by -2px on every side, i.e. sitting
 * outside the button. The overflow clipped it, and on hover, where ::after
 * pulls in by 1px to reveal that gradient, the reveal landed on a clipped
 * edge and read as a cut-off top. Bringing the gradient inside the box means
 * there is nothing to clip.
 */
.filter-btn::before {
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

/* Room for the 3px lift on hover, so it never rides under anything above. */
.filter-buttons {
	padding-top: 6px;
}

/* An empty category should say so rather than leave a void. */
.gallery-empty {
	grid-column: 1 / -1;
	margin: 0;
	padding: 28px 16px;
	text-align: center;
	color: rgba(0, 57, 112, 0.75);
	font-size: 0.95rem;
}

@media (max-width: 991px) {

	/*
	 * "WhatsApp: +44 ..." was one line of running text, so on a phone the
	 * number wrapped and sat indented under the middle of the label, which
	 * read as it having drifted off to one side. Label on its own line,
	 * number directly beneath it.
	 */
	/*
	 * styles.css has `.contact-info p { display: flex; gap: 15px }`, which is
	 * more specific than a bare `.contact-whatsapp`, so the label and the
	 * number stayed side by side with a 15px gap between them - the number
	 * looked pushed off to one side. These selectors out-rank it, and the
	 * column direction means it still stacks even if something else forces
	 * the paragraph back to flex.
	 */
	.contact-info .contact-whatsapp,
	.contact-details .contact-whatsapp,
	p.contact-whatsapp {
		display: block;
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
	}

	.contact-whatsapp__label {
		display: block;
		font-weight: 600;
		margin-bottom: 2px;
	}

	.contact-whatsapp__number {
		display: block;
		white-space: nowrap;
	}

	/* The address is 32 characters and has no natural break point; size it
	   to the column so it stays on one line instead of splitting mid-word. */
	/*
	 * The real reason the address did not fit was not the type size: the
	 * column it sits in was only 132px wide on a 320px screen, while the
	 * address needs 189px. Shrinking the font just made a too-narrow column
	 * hold smaller broken text. Let the contact rows use the full width and
	 * give the text column whatever is left beside the icon.
	 */
	.contact-info {
		width: 100%;
	}

	.contact-method {
		display: flex;
		align-items: flex-start;
		width: 100%;
		gap: 12px;
		padding: 12px;
	}

	.contact-info {
		padding-left: 12px;
		padding-right: 12px;
	}

	/* Every pixel taken off the icon and the padding is a pixel the address
	   gets, and it needs about 210 of them to stay on one line. */
	.contact-icon {
		flex: 0 0 auto;
		width: 42px;
		height: 42px;
		min-width: 42px;
	}

	.contact-details {
		flex: 1 1 auto;
		min-width: 0;
	}

	/*
	 * The address in the contact block is written by JS from data- attributes
	 * (anti-scraping), and comes out as a.email-link - not an href^="mailto"
	 * element, which is why an earlier attempt at this never matched it.
	 */
	.email-link,
	.contact-details .email-link,
	.contact-details a[href^="mailto"] {
		display: block;
		font-size: clamp(0.7rem, 3.1vw, 0.95rem);
		overflow-wrap: anywhere;
		line-height: 1.4;
	}
}

/*
 * Smallest phones (iPhone SE and similar). At 320px the address still had
 * to split its domain across two lines - it needs about 146px and the
 * column gave it 139. Trimming the icon and the padding buys the ~26px
 * that lets "sovereignexhibitions.co.uk" stay whole on its own line,
 * without shrinking the type any further.
 */
@media (max-width: 360px) {

	.contact-info {
		padding-left: 8px;
		padding-right: 8px;
	}

	.contact-method {
		padding: 8px;
		gap: 8px;
	}

	.contact-icon {
		width: 36px;
		height: 36px;
		min-width: 36px;
	}
}

/*
 * FAQ photo ("Need to know a little more?").
 *
 * On phones the base theme keeps the frame at a fixed 500px tall but pulls
 * the image to max-width:80%, so a landscape photograph is cropped hard by
 * object-fit:cover and sits in a tall narrow box - which is what made it
 * look off-centre and badly framed. Size the frame by aspect ratio instead
 * and let the picture use the full width, centred.
 */
@media (max-width: 991px) {

	.faq-image {
		height: auto;
		aspect-ratio: 16 / 10;
		margin-left: auto;
		margin-right: auto;
	}

	.faq-image img {
		display: block;
		width: 100%;
		max-width: 100%;
		height: 100%;
		margin: 0 auto;
		object-fit: cover;
		object-position: center;
	}

	/*
	 * The gap between the last portfolio tile and the clients strip was
	 * 150px of nothing: 50px grid margin, 50px section padding and 50px on
	 * the section below. The Load More button that the margin was there to
	 * separate is hidden when there is nothing more to load.
	 */
	.gallery-grid {
		margin-bottom: 16px;
	}

	.gallery-section {
		padding-bottom: 32px;
	}

	.clients-section {
		padding-top: 32px;
	}
}

/* =====================================================================
   PORTFOLIO GRID ON SMALL PHONES (<= 380px)
   ---------------------------------------------------------------------
   The inherited stylesheet sizes the grid like this below 380px:

       grid-template-rows: repeat(12, 1fr);
       min-height: 400px;
       max-height: 800px;
       aspect-ratio: 1/12;

   Twelve equal rows squeezed into at most 800px is about 60px a row,
   while a tile with its 250px photograph and caption is around 354px
   tall. Every tile therefore overflowed its row and was drawn over the
   one below it - which is why the last tile appeared to be sitting on
   top of the one before it, and only the final caption was readable.

   It only bites at 380px and under, which is why it looked fine on a
   390px preview and wrong on an actual iPhone SE, 8 or 12 mini.

   Rows should be sized by their contents; there is no reason to cap the
   height of a list that grows with the number of photographs.
   ===================================================================== */

@media (max-width: 380px) {

	.gallery-grid {
		grid-template-rows: none;
		grid-auto-rows: auto;
		min-height: 0;
		max-height: none;
		aspect-ratio: auto;
		gap: 16px;
	}

	/*
	 * overflow-x:hidden makes the other axis compute to auto, so this box
	 * clipped vertically too - and took the top off each filter button as
	 * it lifted 3px on hover or tap.
	 */
	.filter-buttons {
		overflow-x: visible;
		overflow-y: visible;
		padding-top: 6px;
	}
}

/* Honeypot: must be invisible to people but still fillable by a bot, so it
   is moved off-screen rather than display:none, which some bots detect. */
.sov-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* =====================================================================
   SERVICES BACKGROUND PANELS BLEEDING INTO THE NEXT SECTION
   ---------------------------------------------------------------------
   The services section is backed by three decorative panels
   (.services-bg-1/2/3), each 1150px tall on a phone and each positioned
   with a z-index of 1 to 3. A positioned element with a z-index above 0
   paints on top of a later element whose z-index is auto - so the third
   panel, which runs 575px past the end of the services section, was
   being painted OVER the Creative Process copy that follows it.

   That copy is navy (#003A70) on what should be a white section, so
   against a dark blue panel it was effectively invisible. It is not a
   colour bug: the text and the section background are both correct, the
   wrong thing was simply drawn on top of them.

   Giving the sections that follow a stacking order above the panels puts
   them back on top of their own background. The panels still show where
   they are meant to, behind the services content.
   ===================================================================== */

.creative-process,
.stats-section {
	position: relative;
	z-index: 5;
}

.creative-process {
	background-color: #fff;
}

/* FOOTER IN THE SOVEREIGN BLUE (requested by Caroline).
   --footer-bg is defined once in styles.css and used only by .main-footer,
   so redefining it is the whole change. Contrast on #003a70:
   body #e1e1e1 8.6:1, headings #fff 11.4:1, accent #fdec08 9.4:1. */
:root { --footer-bg: #003a70; }

/* Social icon hover was var(--primary-color) - the same navy the footer just
   became, so hovering made the icon vanish. Yellow keeps it legible. */
.social-icons a:hover,
.social-icons a:focus-visible { background-color: var(--accent-color); color: #003a70; }
.main-footer .social-icons a { background-color: rgba(255,255,255,0.14); }

/* CREATIVE PROCESS - UNREADABLE BLUE-ON-BLUE TEXT.
   This panel was built dark with white text (styles.css:657). A later block
   (styles.css:2486) made it light and turned the copy navy, but left a hard
   rgba(0,57,112,0.95) stop at 65% of the gradient - so navy text sits on a
   navy band. Measured on the real backdrop: 1.16:1 at 390px, 1.23:1 at 768,
   1.27:1 at 1200, 1.13:1 at 1574. AA needs 4.5:1.
   Fix: same diagonal panel, same blue, lighter shades. Now 7.3-7.9:1. */
.creative-process-content::before {
	background: linear-gradient(135deg,
		rgba(255,255,255,0.96) 0%,
		rgba(244,248,252,0.96) 35%,
		rgba(219,233,247,0.96) 65%,
		rgba(255,255,255,0.96) 100%) !important;
}

/* Heading is gradient-clipped text ending at #59beff = 2.05:1 on a pale
   panel (the washed-out "behind our"). Deeper blue end -> 6.58:1. */
.creative-process .content-wrapper h2 {
	background: linear-gradient(to right, #1e293b 0%, #0b5fa5 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* =====================================================================
 * SEO LANDING PAGES
 * Styling for the virtual landing pages (inc/landing-pages.php).
 * Measured against the same contrast bar as the rest of the site:
 * body #1f2b3a on #ffffff = 12.6:1, on #f4f8fc = 11.9:1.
 * ===================================================================== */
.sov-landing {
	/*
	 * The header is fixed. --sov-header-h is only declared inside the <=991px
	 * mobile block, so on desktop this fell back to 0 and the header sat on
	 * top of the H1. Desktop header measures 101px; 108px clears it with a
	 * little breathing room.
	 */
	padding-top: 108px;
	color: #1f2b3a;
}
@media (max-width: 991px) {
	.sov-landing {
		padding-top: var(--sov-header-h, 96px);
	}
}
.sov-landing__hero {
	background: linear-gradient(135deg, #ffffff 0%, #eaf2fa 100%);
	padding: 56px 0 44px;
	border-bottom: 3px solid #59beff;
}
.sov-landing__crumbs {
	font-size: 0.9rem;
	color: #48607a;
	margin-bottom: 18px;
}
.sov-landing__crumbs a { color: #0b5fa5; text-decoration: none; }
.sov-landing__crumbs a:hover { text-decoration: underline; }
.sov-landing__crumbs span { margin: 0 8px; }
.sov-landing__crumbs span[aria-current] { margin: 0; color: #48607a; }

.sov-landing__title {
	font-size: clamp(1.9rem, 4.2vw, 3rem);
	line-height: 1.15;
	margin: 0 0 18px;
	color: #14243a;
}
.sov-landing__lede {
	font-size: clamp(1.05rem, 1.6vw, 1.25rem);
	line-height: 1.6;
	max-width: 62ch;
	color: #2a3c52;
	margin: 0 0 28px;
}
.sov-landing__cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px;
	margin: 0;
}
.sov-landing__tel {
	font-weight: 600;
	color: #0b5fa5;
	text-decoration: none;
	white-space: nowrap;
}
.sov-landing__tel:hover { text-decoration: underline; }

/* Venue facts table */
.sov-landing__facts { background: #f4f8fc; padding: 40px 0; }
.sov-landing__facts-title { font-size: 1.35rem; margin: 0 0 20px; color: #14243a; }
.sov-facts { margin: 0; display: grid; gap: 0; grid-template-columns: 1fr; }
.sov-facts__row {
	display: grid;
	grid-template-columns: minmax(140px, 34%) 1fr;
	gap: 16px;
	padding: 12px 0;
	border-bottom: 1px solid #d7e4f2;
	min-width: 0;
}
.sov-facts__row:last-child { border-bottom: 0; }
.sov-facts dt { font-weight: 600; color: #14243a; margin: 0; min-width: 0; }
.sov-facts dd { margin: 0; color: #2a3c52; min-width: 0; overflow-wrap: anywhere; }

/* Body */
.sov-landing__body { padding: 48px 0 64px; }
.sov-landing__section { margin-bottom: 44px; max-width: 72ch; }
.sov-landing__section h2 {
	font-size: clamp(1.4rem, 2.4vw, 1.9rem);
	line-height: 1.25;
	margin: 0 0 18px;
	color: #14243a;
}
.sov-landing__section p {
	line-height: 1.7;
	margin: 0 0 16px;
	color: #2a3c52;
}

.sov-deflist { margin: 24px 0 0; }
.sov-deflist__item {
	padding: 18px 20px;
	background: #f4f8fc;
	border-left: 4px solid #0b5fa5;
	border-radius: 0 6px 6px 0;
	margin-bottom: 14px;
}
.sov-deflist dt { font-weight: 700; color: #14243a; margin: 0 0 6px; }
.sov-deflist dd { margin: 0; color: #2a3c52; line-height: 1.65; }

.sov-steps { margin: 24px 0 0; padding-left: 0; list-style: none; counter-reset: sovstep; }
.sov-steps li {
	counter-increment: sovstep;
	position: relative;
	padding: 0 0 20px 54px;
	line-height: 1.65;
	color: #2a3c52;
}
.sov-steps li::before {
	content: counter(sovstep);
	position: absolute;
	left: 0;
	top: 0;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #0b5fa5;
	color: #fff;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}
.sov-steps strong { display: block; color: #14243a; margin-bottom: 4px; }

/* FAQs - <details> so they work with no JavaScript */
.sov-faq {
	border: 1px solid #d7e4f2;
	border-radius: 8px;
	margin-bottom: 12px;
	background: #fff;
}
.sov-faq summary {
	cursor: pointer;
	padding: 16px 20px;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
}
.sov-faq summary::-webkit-details-marker { display: none; }
.sov-faq summary h3 {
	font-size: 1.05rem;
	margin: 0;
	color: #14243a;
	font-weight: 600;
	display: inline;
}
.sov-faq summary::after {
	content: '+';
	font-size: 1.4rem;
	line-height: 1;
	color: #0b5fa5;
	flex: 0 0 auto;
}
.sov-faq[open] summary::after { content: '\2212'; }
.sov-faq p { padding: 0 20px 18px; margin: 0; line-height: 1.7; color: #2a3c52; }
.sov-faq summary:focus-visible { outline: 3px solid #0b5fa5; outline-offset: 2px; }

.sov-related { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.sov-related a {
	display: inline-block;
	padding: 10px 18px;
	background: #f4f8fc;
	border: 1px solid #d7e4f2;
	border-radius: 999px;
	color: #0b5fa5;
	text-decoration: none;
	font-weight: 600;
}
.sov-related a:hover { background: #0b5fa5; color: #fff; border-color: #0b5fa5; }

.sov-landing__closing {
	padding: 28px;
	background: #f4f8fc;
	border-radius: 10px;
	max-width: none;
}

@media (max-width: 767px) {
	.sov-landing__hero { padding: 36px 0 30px; }
	.sov-facts__row { grid-template-columns: 1fr; gap: 4px; padding: 10px 0; }
	.sov-landing__body { padding: 32px 0 44px; }
	.sov-landing__section { margin-bottom: 34px; }
	.sov-steps li { padding-left: 46px; }
	.sov-steps li::before { width: 32px; height: 32px; }
	.sov-landing__closing { padding: 22px 18px; }
}

/* =====================================================================
 * SECTION EYEBROW LABELS
 * These were <h3> elements sitting above the section <h2>, which produced
 * an H1 -> H3 -> H2 heading order six times on the homepage. They are
 * kickers, not headings, so they are now <p class="section-eyebrow">.
 * This replicates the styling the h3 rules in styles.css gave them, so
 * nothing changes visually.
 * ===================================================================== */
.section-header .section-eyebrow {
	color: #59beff;
	font-size: 1rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 2px;
	margin-bottom: 15px;
	margin-top: 0;
	line-height: 1.3;
}
/* Per-section overrides, copied from the originals rather than guessed:
   gallery used #fdec08, contact used var(--accent-secondary) at 14px,
   clients used the same #59beff as the base rule. */
.gallery-section .section-header .section-eyebrow {
	color: #fdec08;
}
.contact-section .section-header .section-eyebrow {
	color: var(--accent-secondary);
	font-size: 14px;
}

/* =====================================================================
 * ACCESSIBILITY
 * .screen-reader-text is already defined above (line ~1438) for the news
 * pagination helper, and the contact form labels reuse it - no second base
 * rule needed. What was missing is a :focus state, so a visually hidden
 * element that CAN receive focus becomes visible when it does.
 * ===================================================================== */
.screen-reader-text:focus {
	background-color: #ffffff;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #0b5fa5;
	display: block;
	font-size: 0.95rem;
	font-weight: 700;
	height: auto;
	left: 8px;
	line-height: normal;
	padding: 14px 22px;
	text-decoration: none;
	top: 8px;
	width: auto;
	z-index: 100000;
}

/* Skip link - lets keyboard users jump the header nav on every page. */
.sov-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
}
.sov-skip-link:focus {
	left: 8px;
	top: 8px;
	background: #ffffff;
	color: #0b5fa5;
	padding: 14px 22px;
	border-radius: 3px;
	font-weight: 700;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
}

/* The honeypot must be unreachable, not merely off-screen-looking. */
.sov-hp input { pointer-events: none; }


/* ---------- LinkedIn embeds: scrollable on demand (Oct 2026) ----------
 * Each post is taller than its frame. If the frame took the mouse wheel all the
 * time, scrolling down the page past it dragged the post half-way down its own
 * white frame. Now a click or tap hands scrolling to that one post, so the
 * whole post - text and every photo - can be read here; moving away (or
 * tapping elsewhere) hands scrolling back to the page. */
.sov-linkedin__item:not(.sov-linkedin__item--fallback) {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #fff;
}

.sov-linkedin__item:not(.sov-linkedin__item--fallback) iframe {
	height: 600px;
	pointer-events: none;
}

.sov-linkedin__item.is-active iframe {
	pointer-events: auto;
}

.sov-linkedin__activate {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 600px;
	z-index: 2;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding: 0 1rem 1rem;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.sov-linkedin__item.is-active .sov-linkedin__activate {
	display: none;
}

.sov-linkedin__activate-label {
	padding: 0.5rem 1rem;
	border-radius: 999px;
	background: var(--primary-color);
	color: #fff;
	font-size: 0.85rem;
	font-weight: 700;
	line-height: 1.2;
	opacity: 0;
	transition: opacity 0.2s ease;
}

.sov-linkedin__activate:hover .sov-linkedin__activate-label,
.sov-linkedin__activate:focus-visible .sov-linkedin__activate-label {
	opacity: 1;
}

/* Phones and tablets have no hover, so the hint is always shown. */
@media (hover: none) {
	.sov-linkedin__activate-label {
		opacity: 0.92;
	}
}

.sov-linkedin__link {
	display: block;
	padding: 0.8rem 1rem;
	border-top: 1px solid #e6e6e6;
	background: #fff;
	color: var(--primary-color);
	font-size: 0.9rem;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
}

.sov-linkedin__link:hover,
.sov-linkedin__link:focus-visible {
	text-decoration: underline;
}

@media (max-width: 600px) {
	.sov-linkedin__item:not(.sov-linkedin__item--fallback) iframe,
	.sov-linkedin__activate {
		height: 520px;
	}
}

/* ---------- Header "Contact Us" button (Oct 2026) ----------
 * styles.css turns this button into a navy-to-light-blue gradient on hover,
 * left over from the previous design. It now stays yellow and keeps the lift. */
.contact-btn .btn-primary:hover,
.contact-btn .btn-primary:focus-visible {
	background: var(--accent-color);
	background-image: none;
	color: var(--primary-color);
	border-color: var(--accent-color);
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

/* Contact Us page: the homepage contact section on its own page. The extra top
 * space keeps the "Get in touch" label clear of the fixed header. */
.page-contact {
	padding-top: 3.5rem;
}

.page-contact .contact-section .section-header h1 {
	color: var(--primary-color);
}

/* Thank-you page contact list. */
.sov-thanks__list {
	list-style: none;
	padding: 0;
	margin: 0 0 1.75rem;
	line-height: 2;
}

.page-standard__content .btn {
	text-decoration: none;
}