/* ==========================================================================
   McGillivray - Global Design System
   Owns: reset, container, typography (h1-h6), buttons, animations, components.
   Tailwind owns: layout, grid, spacing, flexbox.
   Colours are literal hex values by project rule (no CSS variables).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Global reset
   -------------------------------------------------------------------------- */

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
	
}

body {
	font-family: "Open Sans", sans-serif;
	font-size: 18px;
	font-weight: 400;
	line-height: 28px;
	color: #6C8094;
	background-color: #ffffff;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;

}

img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

a {
	color: inherit;
	text-decoration: none;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

ul,
ol {
	list-style: none;
}

/* --------------------------------------------------------------------------
   2. Container
   -------------------------------------------------------------------------- */

.container {
	max-width: 1440px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 15px;
	padding-right: 15px;
	width: 100%;
}

/* Inner rhythm used by most sections of the comp. */
.container-inner {
	max-width: 1340px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 15px;
	padding-right: 15px;
	width: 100%;
}

/* --------------------------------------------------------------------------
   3. Spacing system
   -------------------------------------------------------------------------- */

.row-padd {
	padding-top: 110px;
	padding-bottom: 110px;
}

@media (max-width: 1023px) {
	.row-padd {
		padding-top: 70px;
		padding-bottom: 70px;
	}
}

@media (max-width: 767px) {
	.row-padd {
		padding-top: 50px;
		padding-bottom: 50px;
	}
}

/* --------------------------------------------------------------------------
   4. Typography - headings
   Mobile-first ladder. Base values are the small-screen sizes; each
   breakpoint scales up. Never override these with Tailwind text-* utilities.
   -------------------------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: "Inter Tight", sans-serif;
	color: #0C2640;
}

/* h1-h3 carry the wider tracking called for in the brief. h4-h6 stay at
   their natural spacing, and the .display-* classes keep their own tight
   tracking - see section 6. */
h1,
h2,
h3 {
	letter-spacing: 2px;
}

h1 {
	font-size: 34px;
	font-weight: 600;
	line-height: 40px;
}

h2 {
	font-size: 30px;
	font-weight: 800;
	line-height: 36px;
}

h3 {
	font-size: 24px;
	font-weight: 700;
	line-height: 30px;
}

h4 {
	font-size: 20px;
	font-weight: 500;
	line-height: 1.35;
}

h5 {
	font-family: "IBM Plex Mono", monospace;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.4;
}

h6 {
	font-size: 16px;
	font-weight: 500;
	line-height: 1.4;
}

@media (min-width: 768px) {
	h1 {
		font-size: 40px;
		line-height: 48px;
	}

	h2 {
		font-size: 34px;
		line-height: 43px;
	}

	h3 {
		font-size: 28px;
		line-height: 36px;
	}
}

@media (min-width: 1024px) {
	h1 {
		font-size: 48px;
		line-height: 58px;
	}

	h2 {
		font-size: 40px;
		line-height: 50px;
	}

	h3 {
		font-size: 32px;
		line-height: 42px;
	}
}

@media (min-width: 1440px) {
	h1 {
		font-size: 60px;
		line-height: 80px;
	}

	h2 {
		font-size: 44px;
		line-height: 60px;
	}

	h3 {
		font-size: 36px;
		line-height: 47px;
	}

	h4 {
		font-size: 24px;
		line-height: 1.35;
	}
	 
	.hero-banner-heading{
       font-size: 115px !important;
       line-height: 105px !important;
	 }
}

/* --------------------------------------------------------------------------
   5. Typography - body
   -------------------------------------------------------------------------- */

p {
	font-family: "Open Sans", sans-serif;
	font-size: 18px;
	font-weight: 400;
	line-height: 28px;
	color: #6C8094;
}

p + p {
	margin-top: 20px;
}

@media (max-width: 767px) {
	p {
		font-size: 16px;
		line-height: 26px;
	}
}

/* --------------------------------------------------------------------------
   6. Display headings
   The comp uses oversized section titles that sit above the h1-h6 scale.
   These are design-system classes, applied to semantic tags, so heading
   sizes are never redefined per section.
   -------------------------------------------------------------------------- */

.display-1,
.display-2,
.display-3 {
	font-family: "Inter Tight", sans-serif;
	font-weight: 700;
	color: #0C2640;
	letter-spacing: 2px;
	text-transform: uppercase;
}

/* Footer "WANNA CHAT?" */
.display-1 {
	font-size: 44px;
	line-height: 46px;
}

/* Intro "BRANDS & CONTENT & ..." */
.display-2 {
	font-size: 38px;
	line-height: 42px;
}

/* Section titles: FEATURED WORK / OUR EXPERTISE / WE GET RESULTS */
.display-3 {
	font-size: 32px;
	line-height: 36px;
}

@media (min-width: 768px) {
	.display-1 {
		font-size: 62px;
		line-height: 66px;
	}

	.display-2 {
		font-size: 54px;
		line-height: 58px;
	}

	.display-3 {
		font-size: 44px;
		line-height: 48px;
	}
}

@media (min-width: 1024px) {
	.display-1 {
		font-size: 76px;
		line-height: 80px;
	}

	.display-2 {
		font-size: 64px;
		line-height: 68px;
	}

	.display-3 {
		font-size: 52px;
		line-height: 56px;
	}
}

@media (min-width: 1440px) {
	.display-1 {
		font-size: 90px;
		line-height: 94px;
	}

	.display-2 {
		font-size: 76px;
		line-height: 82px;
	}

	.display-3 {
		font-size: 72px;
		line-height: 68px;
	}
	.expertise-section .display-3 {
		line-height: 72px;
	}
}

/* Section-specific display sizes, laptop and desktop only.
   Scoped to the section so the global h1-h6 scale is untouched. */
@media (min-width: 1024px) {

	.results-section .display-3 {
		font-size: 90px;
		line-height: 0.98;
	}

	.faq-section .display-3 {
		font-size: 72px;
		line-height: 1.02;
	}

	/* Footer "WANNA CHAT?". Sits on .display-1 for family, weight, tracking
	   and the small-screen ladder, and owns only its own size from laptop up
	   - 115/105, the h1 pairing from the design spec. */
	.footer-heading {
		font-size: 115px;
		line-height: 105px;
	}
}

/* Colour utilities used by the split-colour headings in the comp. */
.text-navy {
	color: #0C2640;
}

.text-blue {
	color: #246EB7;
}

.text-grey {
	color: #818C98;
}

.text-white-solid {
	color: #ffffff;
}

/* --------------------------------------------------------------------------
   7. Eyebrow / label
   -------------------------------------------------------------------------- */

.eyebrow {
	display: block;
	font-family: "IBM Plex Mono", monospace;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: #7C8793;
}

/* The eyebrow owns the gap to the heading beneath it, rather than every
   template repeating its own mt-3/mt-4. Headings drop from 72px to 32px on
   the way down, so a flat gap reads as too airy on small screens - the
   spacing scales with them.

   :not(:last-child) keeps a standalone eyebrow flush, which is the keywords
   section and any block whose heading fields are left empty. */
.eyebrow:not(:last-child) {
	margin-bottom: 8px;
}

@media (min-width: 768px) {
	.eyebrow:not(:last-child) {
		margin-bottom: 12px;
	}
}

@media (min-width: 1024px) {
	.eyebrow:not(:last-child) {
		margin-bottom: 16px;
	}
}

.eyebrow--light {
	color: #7C8793;
}

.label-mono {
	font-family: "IBM Plex Sans", sans-serif;
	font-size: 12px;
	font-weight: lighter;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #ffffffba;
}

/* --------------------------------------------------------------------------
   8. Buttons
   Default: coloured background + white text.
   Hover:   white background, black text, 1px secondary border.
   -------------------------------------------------------------------------- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-family: "IBM Plex Sans", sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 18px 30px;
	border: 1px solid transparent;
	cursor: pointer;
	transition: all 0.3s ease;
}

.btn-primary {
	background-color: #246EB7;
	color: #ffffff;
	border-color: #246EB7;
}

.btn-primary:hover,
.btn-primary:focus-visible {
	background-color: #ffffff;
	color: #090909;
	border: 1px solid #246EB7;
}

.btn-navy {
	background-color: #0C2640;
	color: #ffffff;
	border-color: #0C2640;
}

.btn-navy:hover,
.btn-navy:focus-visible {
	background-color: #ffffff;
	color: #090909;
	border: 1px solid #246EB7;
}

.btn-sm {
	padding: 12px 20px;
	font-size: 12px;
	font-weight: 400;
	font-family: "IBM Plex Sans", sans-serif;
}

.btn svg,
.btn i {
	transition: transform 0.3s ease;
}

.btn:hover svg,
.btn:hover i {
	transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   9. Header
   -------------------------------------------------------------------------- */

.site-header {
	background-color: #FBFBFB;
	border-bottom: 1px solid #E8EAED;
	position: sticky;
	top: 0;
	z-index: 60;
}

.nav-link {
	font-family: "IBM Plex Mono", monospace;
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #6C8094;
	transition: color 0.3s ease;
}

.nav-link:hover,
.nav-link:focus-visible,
.current-menu-item > .nav-link,
.current_page_item > .nav-link {
	color: #246EB7;
}

.nav-social {
	color: #818C98;
	transition: color 0.3s ease;
}

.nav-social:hover {
	color: #246EB7;
}

/* Dropdown */
.menu-item-has-children > .nav-link::after {
	content: "";
	display: inline-block;
	width: 4px;
	height: 4px;
	margin-left: 8px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform 0.3s ease;
}

.sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 240px;
	background-color: #ffffff;
	border: 1px solid #E8EAED;
	box-shadow: 0 18px 40px rgba(12, 38, 64, 0.10);
	padding: 10px 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: all 0.3s ease;
	z-index: 70;
}

.menu-item-has-children:hover > .sub-menu,
.menu-item-has-children:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.sub-menu a {
	display: block;
	padding: 11px 22px;
	font-family: "IBM Plex Mono", monospace;
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #6C8094;
	transition: all 0.3s ease;
}

.sub-menu a:hover {
	background-color: #F0F0F0;
	color: #246EB7;
}

/* --- Mobile menu ------------------------------------------------------ */

[x-cloak] {
	display: none !important;
}

.mobile-backdrop {
	position: fixed;
	inset: 64px 0 0;
	background-color: rgba(12, 38, 64, 0.5);
	backdrop-filter: blur(2px);
	z-index: 55;
}

/* Slide-in panel, comfortably thumb-reachable and never full-bleed on
   larger phones so the backdrop stays tappable to dismiss. */
.mobile-panel {
	position: fixed;
	top: 64px;
	right: 0;
	bottom: 0;
	width: min(88vw, 400px);
	background-color: #ffffff;
	box-shadow: -18px 0 44px rgba(12, 38, 64, 0.16);
	z-index: 58;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

.mobile-panel-inner {
	display: flex;
	flex-direction: column;
	min-height: 100%;
	padding: 8px 24px 28px;
}

.mobile-menu {
	flex: 1 1 auto;
}

.mobile-panel .nav-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	/* 56px tall - comfortably above the 44px minimum touch target. */
	min-height: 56px;
	padding: 16px 0;
	font-size: 15px;
	letter-spacing: 0.12em;
	border-bottom: 1px solid #EDF0F3;
	background: none;
	border-left: 0;
	border-right: 0;
	border-top: 0;
	cursor: pointer;
	text-align: left;
}

.mobile-panel .nav-link:active {
	color: #246EB7;
}

/* The mobile toggle already shows a +/- indicator, so suppress the
   desktop dropdown chevron here. */
.mobile-panel .menu-item-has-children > .nav-link::after {
	display: none;
}

.mobile-panel .sub-menu {
	position: static;
	opacity: 1;
	visibility: visible;
	transform: none;
	border: 0;
	box-shadow: none;
	padding: 4px 0 10px 16px;
	min-width: 0;
	background: transparent;
}

.mobile-panel .sub-menu a {
	padding: 13px 0;
	font-size: 12px;
	color: #6C8094;
	border-bottom: 1px solid #F4F6F8;
}

.mobile-panel .sub-menu li:last-child a {
	border-bottom: 0;
}

.mobile-panel .sub-menu a:hover,
.mobile-panel .sub-menu a:active {
	background: transparent;
	color: #246EB7;
}

.mobile-panel-foot {
	padding-top: 26px;
	margin-top: auto;
}

.mobile-social {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border: 1px solid #E1E6EB;
	border-radius: 50%;
	color: #0C2640;
	font-size: 16px;
	transition: all 0.3s ease;
}

.mobile-social:hover,
.mobile-social:active {
	background-color: #246EB7;
	border-color: #246EB7;
	color: #ffffff;
}

/* Hamburger */
.burger {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border: 1px solid #E1E6EB;
	background-color: #ffffff;
	cursor: pointer;
	transition: all 0.3s ease;
}

.burger:hover {
	border-color: #246EB7;
}

.burger span {
	display: block;
	width: 20px;
	height: 2px;
	background-color: #0C2640;
	transition: all 0.3s ease;
}

.burger span + span {
	margin-top: 5px;
}

@media (min-width: 1024px) {

	.mobile-backdrop,
	.mobile-panel {
		display: none !important;
	}
}

/* --------------------------------------------------------------------------
   10. Hero
   -------------------------------------------------------------------------- */

.hero-media {
	position: relative;
	width: 100%;
	height: 748px;
	overflow: hidden;
}

@media (max-width: 1023px) {
	.hero-media {
		height: 540px;
	}
}

@media (max-width: 767px) {
	.hero-media {
		height: 440px;
	}
}

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

/* Navy tint so headline copy stays legible over photography. */
.hero-overlay {
	position: absolute;
	inset: 0;
	background-color: rgba(12, 38, 64, 0.62);
	pointer-events: none;
}

/* The cue is centred in the hero while the copy is left-aligned, so on a
   narrow hero the two land on top of each other - a three-line headline at
   440px tall reaches straight through the cue. Below the tablet breakpoint
   there is no room for both, and the cue is the expendable one. */
.hero-scroll {
	display: none;
}

@media (min-width: 768px) {
	.hero-scroll {
		display: block;
	}
}

.hero-scroll-line {
	width: 0.8px;
	height:55px;
	/* background: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0)); */
	background: #ffffff7d;
	margin: 2px auto 0;
}

/* Matches the comp: transparent square, hairline white border, white
   glyph - not a filled white chip. */
.hero-control {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	background-color: transparent;
	border: 1px solid rgba(255, 255, 255, 0.75);
	color: #ffffff;
	font-size: 13px;
	line-height: 1;
	cursor: pointer;
	transition: all 0.3s ease;
}

.hero-control:hover,
.hero-control:focus-visible {
	background-color: rgba(255, 255, 255, 0.18);
	border-color: #ffffff;
	color: #ffffff;
}

/* --------------------------------------------------------------------------
   11. Ticker / marquee
   -------------------------------------------------------------------------- */

.ticker {
	border-top: 1px solid #DDE0E3;
	border-bottom: 1px solid #DDE0E3;
	overflow: hidden;
	padding: 22px 0;
	/* Fixed height so the strip keeps its proportions in the comp regardless
	   of the label copy. */
	min-height: 88px;
	display: flex;
	align-items: center;
}

.ticker-track {
	display: flex;
	align-items: center;
	animation: mcg-marquee 38s linear infinite;
}

.ticker:hover .ticker-track {
	animation-play-state: paused;
}

/* Cells size to their label rather than to a fraction of the strip. A fixed
   6-across grid could not fit the longest labels - "INTEGRATED CAMPAIGNS" -
   on one line, so every label now sets its own width and the number visible
   at once simply falls out of the copy. The label carries the horizontal
   padding and the separator sits flush at the cell boundary, which keeps the
   separator exactly midway between the two labels either side of it. */
.ticker-cell {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
}

/* Labels always stay on a single line. */
.ticker-item {
	flex: 0 0 auto;
	padding: 0 24px;
	font-family: "Inter Tight", sans-serif;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.03em;
	line-height: 1.25;
	text-transform: uppercase;
	text-align: center;
	color: #B5BCC7;
	white-space: nowrap;
}

@media (min-width: 1024px) {
	.ticker-item {
		padding: 0 40px;
	}
}

.ticker-sep {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	color: #246EB7;
	line-height: 1;
}

@keyframes mcg-marquee {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-50%);
	}
}

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

/* --------------------------------------------------------------------------
   12. Dark sections + grid pattern
   -------------------------------------------------------------------------- */

.section-dark {
	background-color: #0C2640;
	position: relative;
	overflow: hidden;
}

.section-dark h1,
.section-dark h2,
.section-dark h3,
.section-dark h4,
.section-dark h5,
.section-dark h6 {
	color: #ffffff;
}

.grid-pattern::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(to right, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
	background-size: 72px 72px;
	pointer-events: none;
}

.grid-pattern > * {
	position: relative;
	z-index: 1;
}

/* --------------------------------------------------------------------------
   13. Expertise cards
   -------------------------------------------------------------------------- */

/* Light cards sitting inside a dark section must keep dark headings -
   .section-dark h1-h6 would otherwise paint them white on white. */
.section-dark .expertise-card h1,
.section-dark .expertise-card h2,
.section-dark .expertise-card h3,
.section-dark .expertise-card h4,
.section-dark .expertise-card h5,
.section-dark .expertise-card h6 {
	color: #0C2640;
}

.expertise-card {
	background-color: #EEF3F8;
	padding: 44px 40px;
	height: 100%;
	display: flex;
	flex-direction: column;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.expertise-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 22px 50px rgba(0, 0, 0, 0.18);
}

.expertise-card h3 {
	text-transform: uppercase;
}

.expertise-num {
	font-family: "Inter Tight", sans-serif;
	font-size: 34px;
	font-weight: 700;
	color: #0C2640;
	line-height: 1.3;
	letter-spacing: 1.2px;
}

.expertise-num span {
	color: #2A74B7;
}
.expertise-card h3{
	line-height: 1;
}

/* Card copy sits on the light card, so it takes the navy rather than the
   global paragraph grey. Typography lives here rather than on Tailwind
   text-* utilities, per the theme's styling split. */
.expertise-card-description {
	font-size: 14px;
	font-weight: 400;
	line-height: 26px;
	color: #0C2640;
	margin: 25px 0px;
}

@media (min-width: 1024px) {
	.expertise-card-description {
		line-height: 21px;
	}
}

.expertise-divider {
	height: 1px;
	background-color: #C9D6E2;
	margin: 26px 0 22px;
}

.tag-chip {
	display: inline-block;
	font-family: "IBM Plex Mono", monospace;
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #0C2640;
	border: 1px solid #B9C9D8;
	padding: 0px 12px;
	transition: all 0.3s ease;
}

.tag-chip:hover {
	background-color: #246EB7;
	border-color: #246EB7;
	color: #ffffff;
}

@media (max-width: 767px) {
	.expertise-card {
		padding: 32px 24px;
	}
}

@media (min-width: 1024px) {
	.expertise-card {
		padding: 45px 45px;
	}
}

/* --------------------------------------------------------------------------
   14. Stats
   -------------------------------------------------------------------------- */

.stat-block {
	border-top: 1px solid #D8DEE5;
	padding-top: 14px;
}

@media (min-width: 1024px) {
	.stat-block {
		padding-top: 18px;
	}
}

.stat-number {
	font-family: "Inter Tight", sans-serif;
	font-size: 44px;
	font-weight: 700;
	line-height: 1.05;
	color: #0C2640;
	letter-spacing: 1px;
	/* Fixed-width figures so the number does not jitter while it counts up. */
	font-variant-numeric: tabular-nums;
}

@media (min-width: 1024px) {
	.stat-number {
		font-size: 54px;
	}
}
@media (min-width: 1280px) {
	.stat-number {
		font-size: 58px;
	}
}

.stat-label {
	font-family: "IBM Plex Mono", monospace;
	font-size: 12px;
	letter-spacing: 0px;
	line-height: 1.5;
	text-transform: uppercase;
	color: #818C98;
	font-weight: 400;
	margin-top: 8px;
}

/* The 2-up grid starts at 430px, so on a narrow phone these labels wrap to
   two or three lines. Full size only once the columns are wide enough. */
@media (min-width: 1024px) {
	.stat-label {
		font-size: 14px;
		letter-spacing: 0px;
		margin-top: 12px;
	}
}



/* --------------------------------------------------------------------------
   15. Partners
   -------------------------------------------------------------------------- */

/* Flex wrap rather than a fixed grid, so logos sit on their natural
   width and the rows stay evenly balanced whatever the count. */

   .partners-section  {
    border-top: 1px solid #E3E3E3;
    border-bottom: 1px solid #E3E3E3;
}

.partner-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 14px 18px;
}

@media (min-width: 1024px) {
	.partner-list {
		gap: 14px 30px;
	}
}

/* Logos show at full colour and full opacity - no greyscale, no fade. */
.partner-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	padding: 8px 10px;
	transition: transform 0.4s ease;
}

.partner-logo:hover {
	transform: scale(1.06);
}

.partner-logo img {
	max-height: 96px;
	max-width: 210px;
	width: auto;
	object-fit: contain;
}

@media (min-width: 1024px) {
	.partner-logo img {
		max-height: 112px;
		max-width: 150px;
	}
}

/* Shown until a real logo is uploaded for a partner. */
.partner-wordmark {
	font-family: "Inter Tight", sans-serif;
	font-size: 24px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #0C2640;
	text-align: center;
	line-height: 1.2;
	white-space: nowrap;
}

@media (min-width: 1024px) {
	.partner-wordmark {
		font-size: 28px;
	}
}

/* --------------------------------------------------------------------------
   16. FAQ accordion
   -------------------------------------------------------------------------- */
#faqs{
	scroll-margin-top: 50px;
}
.faq-item {
	border-bottom: 1px solid #DDE0E3;
}

.faq-item:first-child {
	border-top: 1px solid #DDE0E3;
}

.faq-trigger {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	text-align: left;
	background: none;
	border: 0;
	padding: 26px 0;
	cursor: pointer;
	transition: color 0.3s ease;
}

.faq-question {
	font-family: "Inter Tight", sans-serif;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.4;
	color: #0C2640;
	transition: color 0.3s ease;
}

.faq-trigger:hover .faq-question,
.faq-trigger[aria-expanded="true"] .faq-question {
	color: #246EB7;
}

.faq-icon {
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #DDE0E3;
	color: #8F98A3;
	font-size: 17px;
	line-height: 1;
	transition: all 0.3s ease;
}

.faq-trigger:hover .faq-icon,
.faq-trigger[aria-expanded="true"] .faq-icon {
	border-color: #246EB7;
	color: #246EB7;
}

/* Height is animated from JS. Padding lives on the inner wrapper so a
   collapsed panel measures a true 0px instead of flooring at the padding. */
.faq-answer {
	overflow: hidden;
	height: 0;
	transition: height 0.35s ease;
}

.faq-answer-inner {
	padding-bottom: 26px;
}

.faq-answer p {
	font-size: 16px;
	line-height: 26px;
}

@media (prefers-reduced-motion: reduce) {
	.faq-answer {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   17. Contact form (footer)
   The footer form is whatever the Form Shortcode field renders. Its styling
   lives in assets/css/gravity-forms.css, which has to load after the plugin's
   own sheets to win - see inc/gravity-forms.php.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   18. Footer
   -------------------------------------------------------------------------- */

.footer-divider {
	height: 1px;
	background-color: rgba(255, 255, 255, 0.16);
}

.footer-copy {
	font-family: "IBM Plex Mono", monospace;
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #7A8996;
}

.footer-link {
	font-family: "IBM Plex Mono", monospace;
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.75);
	transition: color 0.3s ease;
}

.footer-link:hover {
	color: #246EB7;
}

/* --------------------------------------------------------------------------
   19. Work / case study cards
   -------------------------------------------------------------------------- */

.work-media {
	overflow: hidden;
}

.work-media img {
	width: 100%;
	transition: transform 0.6s ease;
}

/* The grid runs flush at desktop. Below 1280 the columns are narrow enough
   that two stills butting together read as one image, so they get a hairline
   gutter back. Single-column widths are below 768, where the row gap on the
   grid already does the separating. */
@media (max-width: 1279px) {
	.work-grid {
		column-gap: 15px;
	}
}

/* A single case study, so it gets more height than the old slider. */
.featured-work-section .work-card {
	max-width: 100%;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}

.featured-work-section .work-media {
	height: 280px;
}

.featured-work-section .work-media img {
	height: 100%;
	object-fit: cover;
	/* Campaign stills are people-led, so bias the crop upward and keep
	   faces in frame rather than centre-cropping through them. */
	object-position: center 0%;
}

@media (min-width: 768px) {
	.featured-work-section .work-media {
		height: 360px;
	}
}

@media (min-width: 1024px) {
	.featured-work-section .work-media {
		height: 440px;
	}
	.work-meta .block{
    /* max-width: 130px; */
	}
}

@media (min-width: 1440px) {
	.featured-work-section .work-media {
		height: 518px;
	}
}

.work-card:hover .work-media img {
	transform: scale(1.04);
}

.work-card .work-brand{
	line-height: 1.8;
}

.work-brand {
	font-family: "Inter Tight", sans-serif;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #0C2640;
}

.work-meta {
	font-family: "IBM Plex Mono", monospace;
	font-size: 12px;
	line-height: 17px;
	color: #6C8094;
	text-align: right;
}

/* --------------------------------------------------------------------------
   20. Swiper overrides
   -------------------------------------------------------------------------- */

.swiper-button-next,
.swiper-button-prev {
	color: #246EB7;
	transition: opacity 0.3s ease;
}

.swiper-button-next::after,
.swiper-button-prev::after {
	font-size: 22px;
}

.swiper-pagination-bullet {
	background-color: #818C98;
	opacity: 0.4;
}

.swiper-pagination-bullet-active {
	background-color: #246EB7;
	opacity: 1;
}

/* --------------------------------------------------------------------------
   21. Scroll animations
   -------------------------------------------------------------------------- */

.fade-in {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.6s ease, transform 0.6s ease;
	will-change: opacity, transform;
}

.fade-in.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.fade-in-delay-1 {
	transition-delay: 0.1s;
}

.fade-in-delay-2 {
	transition-delay: 0.2s;
}

.fade-in-delay-3 {
	transition-delay: 0.3s;
}

@media (prefers-reduced-motion: reduce) {

	html {
		scroll-behavior: auto;
	}

	.fade-in {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   22. Editor / misc
   -------------------------------------------------------------------------- */

.entry-content p + p {
	margin-top: 18px;
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
	margin-top: 36px;
	margin-bottom: 14px;
}

.entry-content ul,
.entry-content ol {
	margin: 0 0 20px 22px;
}

.entry-content ul {
	list-style: disc;
}

.entry-content ol {
	list-style: decimal;
}

.entry-content li {
	margin-bottom: 8px;
}

.entry-content a {
	color: #246EB7;
	text-decoration: underline;
}

.entry-content blockquote {
	border-left: 3px solid #246EB7;
	padding-left: 22px;
	margin: 26px 0;
	font-style: italic;
}

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.skip-link:focus {
	position: fixed;
	top: 10px;
	left: 10px;
	z-index: 100000;
	background: #ffffff;
	color: #0C2640;
	padding: 12px 20px;
	clip-path: none;
	width: auto;
	height: auto;
}

/* --------------------------------------------------------------------------
   23. Foundation cards (image cards on a dark band)
   -------------------------------------------------------------------------- */

.foundation-card {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: flex-end;
	min-height: 320px;
	background-color: #0A1F35;
}

@media (min-width: 1024px) {
	.foundation-card {
		min-height: 333px;
	}
}

.foundation-media {
	position: absolute;
	inset: 0;
}

.foundation-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}

.foundation-card:hover .foundation-media img {
	transform: scale(1.05);
}

/* Keeps the copy legible over any photograph. */
.foundation-card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, #00000000, #ffffff00);
	pointer-events: none;
}

.foundation-body {
	position: relative;
	z-index: 1;
	padding: 34px 32px 32px;
	width: 100%;
}

@media (max-width: 767px) {
	.foundation-body {
		padding: 26px 22px 24px;
	}
	.expertise-card-description{
		margin-bottom: 0px;
	}
}

/* Always white: the card sits on a darkened photo whatever the section
   background is, so this must not depend on .section-dark h3. */
   
.foundation-title {
	max-width: 333px;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.06;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #ffffff;
}

/* The wide (7-column) cards only exist from lg up, where the extra card
   width lets the title run longer before it wraps. */
@media (min-width: 1024px) {
	.foundation-card--wide .foundation-title {
		max-width: 520px;
	}
}

@media (min-width: 1440px) {
	.foundation-title {
		font-size: 36px;
	}

	.foundation-card--wide .foundation-title {
		max-width: 377px;
	}
}

.foundation-copy {
	margin-top: 14px;
	font-size: 18px;
	font-weight: 300;
	line-height: 25px;
	color: #C3C3C3;
	
}

/* --------------------------------------------------------------------------
   23b. Partnership Models cards (Brand Partnership "How We Work")
   Same data as Foundation, different comp - so a separate class set rather
   than a variant of .foundation-card. All figures below are read off
   figma/Brand Partnership at its 1440 canvas.
   -------------------------------------------------------------------------- */

.partnership-head {
	max-width: 900px;
	margin: 0 auto 48px;
	text-align: center;
}

@media (min-width: 1024px) {
	.partnership-head {
		margin-bottom: 64px;
	}
}

/* Two cards per row on a 12px gutter. The comp steps the split between the
   rows - 45.83/54.17 then 40.27/59.73 - so the widths repeat on a cycle of
   four and the rhythm holds however many cards an editor adds.
   Each pair sums to 100%, and gap takes 6px off each side of the pair. */
.partnership-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.partnership-card {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: flex-end;
	width: 100%;
	min-height: 340px;
	background-color: #0A1F35;
}

@media (min-width: 768px) {
	.partnership-card {
		min-height: 420px;
	}
}

@media (min-width: 1024px) {
	.partnership-card {
		min-height: 460px;
		width: calc(45.83% - 6px);
	}

	.partnership-card:nth-child(4n + 2) {
		width: calc(54.17% - 6px);
	}

	.partnership-card:nth-child(4n + 3) {
		width: calc(40.27% - 6px);
	}

	.partnership-card:nth-child(4n + 4) {
		width: calc(59.73% - 6px);
	}
}

@media (min-width: 1280px) {
	.partnership-card {
		min-height: 520px;
	}
}

.partnership-media {
	position: absolute;
	inset: 0;
}

.partnership-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}

.partnership-card:hover .partnership-media img {
	transform: scale(1.05);
}

/* The comp darkens the lower half of every card almost to black - the copy
   runs long here and sits over bright kitchens and daylight interiors, so
   the scrim is doing real work rather than decorating. */
.partnership-card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, #00000000, #ffffff00);
	pointer-events: none;
}

.partnership-body {
	position: relative;
	z-index: 1;
	width: 100%;
	padding: 32px;
}

@media (max-width: 767px) {
	.partnership-body {
		padding: 26px 22px 24px;
	}
}

/* Always white - the card sits on a darkened photo on a white section, so
   this must not inherit from the global h3 colour. */
/* 400px is the cap the comp's line breaks imply: "BRAND AMBASSADOR" and
   "BROADCAST & MEDIA" stay on one line, "CONTENT & CAMPAIGNS" and
   "EVENTS & EXPERIENTIAL" break. */

   .partnership-section{
        border-top: 1px solid #E3E3E3;

   }

.partnership-title {
	max-width: 400px;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.17;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #ffffff;
}

@media (min-width: 1024px) {
	.partnership-title {
		font-size: 32px;
	}
}

@media (min-width: 1440px) {
	.partnership-title {
		font-size: 36px;
	}
}

.partnership-copy {
	margin-top: 14px;
	font-size: 18px;
	font-weight: 300;
	line-height: 26px;
	color: #E4EBF1;
}

@media (max-width: 767px) {
	.partnership-copy {
		font-size: 16px;
		line-height: 24px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.partnership-media img {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   23c. Beyond Video cards (Marketing "What We Do")
   Same data as Foundation, different comp - so a separate class set rather
   than a variant of .foundation-card. Figures read off figma/Marketing at
   its 1440 canvas: content 1343 wide, 12px gutters, rows of 582/413/324 at
   420 tall and 530/801 at 290 tall.
   -------------------------------------------------------------------------- */

.beyond-head {
	max-width: 900px;
	margin: 0 auto 48px;
	text-align: center;
}

@media (min-width: 1024px) {
	.beyond-head {
		margin-bottom: 64px;
	}
}

/* Three cards then two, on a 12px gutter. Each row's widths sum to 100%
   minus its own gutters, so the rows wrap themselves and the cycle of five
   holds however many cards an editor adds. */
.beyond-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.beyond-card {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: flex-end;
	width: 100%;
	min-height: 300px;
	background-color: #0A1F35;
}

@media (min-width: 768px) {
	.beyond-card {
		min-height: 340px;
	}
}

@media (min-width: 1024px) {
	/* Row one - two 12px gutters, so 8px comes off each of the three. */
	.beyond-card:nth-child(5n + 1) {
		width: calc(44.12% - 8px);
		min-height: 420px;
	}

	.beyond-card:nth-child(5n + 2) {
		width: calc(31.31% - 8px);
		min-height: 420px;
	}

	.beyond-card:nth-child(5n + 3) {
		width: calc(24.57% - 8px);
		min-height: 420px;
	}

	/* Row two - one 12px gutter, so 6px comes off each of the two. */
	.beyond-card:nth-child(5n + 4) {
		width: calc(39.82% - 6px);
		min-height: 290px;
	}

	.beyond-card:nth-child(5n + 5) {
		width: calc(60.18% - 6px);
		min-height: 290px;
	}
}

.beyond-media {
	position: absolute;
	inset: 0;
}

.beyond-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}

.beyond-card:hover .beyond-media img {
	transform: scale(1.05);
}

/* The comp takes the foot of each card almost to black - sampled at rgb(0,0,1)
   a few pixels off the bottom edge - which is what keeps the strapline
   readable over daylight studio stills. */
.beyond-card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, #00000000, #ffffff00);
	pointer-events: none;
}

.beyond-body {
	position: relative;
	z-index: 1;
	width: 100%;
	padding: 32px;
}

@media (max-width: 767px) {
	.beyond-body {
		padding: 26px 22px 24px;
	}
}

/* Always white - the card sits on a darkened photo inside a white section,
   so this must not inherit the global h3 colour. 400px is the cap the comp's
   line breaks imply: "EDITORIAL CONTENT" holds one line while
   "PHOTOGRAPHY & DESIGN" and "EVENTS & EXPERIENTIAL" break. */
   .beyond-section{
	    border-top: 1px solid #E3E3E3;
	    border-bottom: 1px solid #E3E3E3;
   }
.beyond-title {
	max-width: 400px;
	font-size: 26px;
	font-weight: 700;
	line-height: 1.12;
	text-transform: uppercase;
	/* Set solid, unlike Foundation's 1px - "PHOTOGRAPHY" measures 266px at
	   36px in the comp, which is the face's natural width. The extra pixel
	   per character is enough to break "EDITORIAL CONTENT" onto three lines
	   in the narrow middle card. */
	letter-spacing: 0;
	color: #ffffff;
}

@media (min-width: 1024px) {
	.beyond-title {
		font-size: 30px;
	}
}

@media (min-width: 1440px) {
	.beyond-title {
		font-size: 36px;
	}
}

/* A strapline rather than a paragraph - smaller than Foundation's copy. */
.beyond-copy {
	margin-top: 12px;
	font-size: 18px;
	font-weight: 300;
	line-height: 1.4;
	color: #E4EBF1;
}

@media (max-width: 767px) {
	.beyond-copy {
		font-size: 15px;
		line-height: 23px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.beyond-media img {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   24. Team cards
   -------------------------------------------------------------------------- */

/* Two stacked row-padd sections leave 200px between them. Where the team
   grid follows the dark foundation band, the band's own bottom padding
   already supplies the breathing room, so the team's top padding is
   trimmed rather than doubled up. Scoped to the pairing - a team section
   anywhere else keeps the standard rhythm. */
.foundation-section + .team-section {
	padding-top: 56px;
}

@media (max-width: 1023px) {
	.foundation-section + .team-section {
		padding-top: 40px;
	}
}

@media (max-width: 767px) {
	.foundation-section + .team-section {
		padding-top: 30px;
	}
}

.team-media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	background-color: #F0F0F0;
}

.team-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.team-media.has-overlay {
	cursor: pointer;
}

/* A band across the middle of the portrait rather than a full cover, so the
   face stays visible either side of it. Height follows the bio, capped so a
   long one scrolls instead of overflowing the image. */
.team-overlay {
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	transform: translateY(-46%);
	max-height: 78%;
	background-color: rgba(12, 38, 64, 0.96);
	opacity: 0;
	transition: opacity 0.4s ease, transform 0.4s ease;
	overflow-y: auto;
}

.team-media:hover .team-overlay,
.team-media:focus .team-overlay,
.team-media:focus-within .team-overlay {
	opacity: 1;
	transform: translateY(-50%);
}

.team-media.has-overlay:focus-visible {
	outline: 2px solid #246EB7;
	outline-offset: 3px;
}

.team-overlay-inner {
	padding: 28px 26px;
	width: 100%;
}

@media (max-width: 767px) {
	.team-overlay-inner {
		padding: 20px 18px;
	}
}

/* Overrides the global h3 scale - this is a card label, not a section head. */
.team-overlay-title {
	font-size: 16px;
	font-weight: 500;
	line-height: 1.3;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: #ffffff;
}

.team-overlay-bio p {
	margin-top: 12px;
	font-size: 14px;
	font-weight: 300;
	line-height: 22px;
	color: #A4B7C7;
}

.team-overlay-social {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	margin-top: 18px;
	border: 1px solid rgba(255, 255, 255, 0.35);
	color: #ffffff;
	transition: all 0.3s ease;
}

.team-overlay-social:hover {
	background-color: #246EB7;
	border-color: #246EB7;
}

.team-name {
	margin-top: 16px;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
	text-transform: uppercase;
	color: #0C2640;
	letter-spacing: 1px;
}

.team-role {
	display: block;
	margin-top:4px;
	color: #246EB7;
	letter-spacing: 0px;
font-family: "IBM Plex Mono", monospace;
}

@media (prefers-reduced-motion: reduce) {
	.team-overlay,
	.foundation-media img {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   25. Testimonial quote cards
   -------------------------------------------------------------------------- */
.testimonials-section .eyebrow {
    color: #246EB7;
    letter-spacing: 0px;
    font-family: "IBM Plex Mono", monospace;
}
.testimonials-content p{
	color: #A4B7C7;
	font-weight: 400;
}

.quote-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	background-color: #ffffff;
	border-radius: 14px;
	    padding: 40px 22px 16px;
}
.quote-card .quote-role{
	text-transform: none;
	margin-top: 0px;
}

@media (max-width: 767px) {
	.quote-card {
		padding: 26px 22px 24px;
		border-radius: 10px;
	}
}

@media (max-width: 767px) {
	.stat-block {
    padding-top: 30px;
}
}

.quote-text p {
	font-size: 14px;
	line-height: 21px;
	color: #0C2640;
}

.quote-foot {
    margin-top: 17px;
    padding-top: 15px;
	padding-top: 20px;
	border-top: 1px solid #BDD3E9;
}

.quote-author {
	display: block;
	font-family: "Inter Tight", sans-serif;
	font-size: 16px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: #246EB7;
}

.quote-role {
	display: block;
	margin-top: 6px;
	color: #246EB7;
}

/* Stacked variant: cards overlap slightly so the marks tuck between them. */
.quote-stack > * + * {
	margin-top: 26px;
}

.quote-card.has-marks {
	overflow: visible;
}

.quote-mark {
	position: absolute;
	width: 60px;
	height: auto;
	pointer-events: none;
}

.quote-mark--open {
	top: -22px;
	left: -20px;
}

.quote-mark--close {
	bottom: -19px;
	right: -20px;
}

@media (max-width: 767px) {
	.quote-mark {
		width: 40px;
	}

	.quote-mark--open {
		top: -16px;
		left: -10px;
	}

	.quote-mark--close {
		bottom: -16px;
		right: -10px;
	}
}

/* --------------------------------------------------------------------------
   26. Keyword wrap ("Our Bread & Butter")
   -------------------------------------------------------------------------- */

.keyword-wrap {
	font-family: "Inter Tight", sans-serif;
	font-size: 30px;
	font-weight: 700;
	line-height: 1.28;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #ffffff;
}

@media (min-width: 768px) {
	.keyword-wrap {
		font-size: 38px;
	}
}

@media (min-width: 1024px) {
	.keyword-wrap {
		font-size: 46px;
	}
}

@media (min-width: 1440px) {
	.keyword-wrap {
		font-size: 60px;
	}
}

.keywords-section.bg-white .keyword-wrap {
	color: #0C2640;
}

/* No nowrap on .keyword-item: long phrases break across lines in the comp. */

.keyword-item {
	transition: color 0.3s ease;
}

.keyword-item:hover {
	color: #246EB7;
}

/* The slash keeps the blue accent even when the term itself is white. */
.keyword-slash {
	color: #246EB7;
	margin-right: 0.18em;
}

@media (prefers-reduced-motion: reduce) {
	.keyword-item {
		transition: none;
	}
}
@media (max-width: 768px) {
.keyword-item {
	font-size: 33px;
}
}

@media (max-width: 640px) {
.keyword-item {
	font-size: 24px;
}
}
/* --------------------------------------------------------------------------
   27. Portfolio cards + video modal
   -------------------------------------------------------------------------- */

/* Fixed, not an editor choice. The comp runs this band on a warm off-white
   that separates it from the pure-white section beneath it - sampled at
   #F9F9F7 from figma/Production. */
.portfolio-section {
	background-color: #F9F9F7;
}

.portfolio-card {
	position: relative;
	display: block;
	width: 100%;
	overflow: hidden;
	background-color: #0A1F35;
	text-align: left;
	border: 0;
	padding: 0;
	cursor: default;
}

button.portfolio-card {
	cursor: pointer;
}

.portfolio-media {
	aspect-ratio: 16 / 10;
}

.portfolio-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}

button.portfolio-card:hover .portfolio-media img {
	transform: scale(1.04);
}

/* Bottom scrim so the label stays legible on any still. */
.portfolio-card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, #00000000, #ffffff00);
	pointer-events: none;
}

.portfolio-play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 62px;
	height: 62px;
	border: 2px solid rgba(255, 255, 255, 0.9);
	color: #ffffff;
	font-size: 18px;
	z-index: 2;
	transition: all 0.3s ease;
}

button.portfolio-card:hover .portfolio-play {
	background-color: #246EB7;
	border-color: #246EB7;
	transform: translate(-50%, -50%) scale(1.06);
}

button.portfolio-card:focus-visible {
	outline: 2px solid #246EB7;
	outline-offset: 3px;
}

.portfolio-label {
	position: absolute;
	left: 26px;
	bottom: 22px;
	z-index: 2;
	font-family: "Inter Tight", sans-serif;
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #ffffff;
}

@media (max-width: 767px) {
	.portfolio-label {
		left: 18px;
		bottom: 16px;
	}

	.portfolio-play {
		width: 50px;
		height: 50px;
		font-size: 15px;
	}
}

body.has-modal-open {
	overflow: hidden;
}

.video-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

.video-modal[hidden] {
	display: none;
}

.video-modal-backdrop {
	position: absolute;
	inset: 0;
	background-color: rgba(6, 16, 27, 0.9);
}

.video-modal-inner {
	position: relative;
	width: 100%;
	max-width: 1040px;
}

.video-modal-frame video {
	width: 100%;
	height: auto;
	max-height: 80vh;
	background-color: #000000;
	display: block;
}

.video-modal-close {
	position: absolute;
	top: -46px;
	right: 0;
	width: 38px;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.4);
	color: #ffffff;
	font-size: 16px;
	cursor: pointer;
	transition: all 0.3s ease;
}

.video-modal-close:hover {
	background-color: #246EB7;
	border-color: #246EB7;
}

/* --------------------------------------------------------------------------
   28. Services accordion
   -------------------------------------------------------------------------- */

.services-item {
	border-top: 1px solid #DDE3E9;
}

.services-item:last-child {
	border-bottom: 1px solid #DDE3E9;
}

.services-accordion .services-trigger {
	padding: 22px 0;
}

.services-title {
	font-family: "Inter Tight", sans-serif;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #0C2640;
	transition: color 0.3s ease;
}

@media (min-width: 1024px) {
	.services-title {
		font-size: 22px;
	}
}

.services-slash {
	color: #246EB7;
	margin-right: 0.4em;
}

.services-trigger:hover .services-title,
.services-trigger[aria-expanded="true"] .services-title {
	color: #0C2640;
}

.services-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px 30px;
	padding-bottom: 8px;
}

@media (min-width: 640px) {
	.services-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.services-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

.services-capability {
	font-family: "Open Sans", sans-serif;
	font-size: 15px;
	font-weight: 400;
	line-height: 22px;
	color: #6C8094;
}

/* The comp's services rows use a bare glyph, not the FAQ's boxed icon. */
.services-accordion .faq-icon {
	width: auto;
	height: auto;
	border: 0;
	font-size: 20px;
	color: #8FA0B0;
}

.services-trigger:hover .faq-icon,
.services-trigger[aria-expanded="true"] .faq-icon {
	background: transparent;
	border: 0;
	color: #246EB7;
}

/* --------------------------------------------------------------------------
   29. Work page title
   Scoped like the results/faq overrides in section 6, so the global
   display-2 scale is untouched. The comp runs this title much larger than a
   section heading: ~128px with tight 0.88 leading at desktop.
   -------------------------------------------------------------------------- */

@media (min-width: 1024px) {
	.work-header-section .display-2 {
		font-size: 96px;
		line-height: 0.9;
	}
}

@media (min-width: 1440px) {
	.work-header-section .display-2 {
		font-size: 126px;
		line-height: 0.88;
	}
}

.work-header-copy p {
	color: #A4B7C7;
	font-style: normal;
font-weight: 400;
	font-size: 18px;
	line-height: 26px;
}

/* --------------------------------------------------------------------------
   30. Single case study
   -------------------------------------------------------------------------- */

.cs-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 340px;
	overflow: hidden;
}

@media (min-width: 1024px) {
	.cs-hero {
		min-height: 455px;
	}
}

.cs-hero-media {
	position: absolute;
	inset: 0;
}

.cs-hero-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}

/* Weighted to the left so the title stays legible over a busy still. */
.cs-hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, #13304e 0%, #13304e5e 65%, rgb(36 110 183 / 0%) 100%);
}

.cs-hero-body {
	max-width: 900px;
	padding-top: 30px;
	padding-bottom: 30px;
}
.cs-hero-body .eyebrow {
	color:white
}
.cs-hero-body .text-blue{
	
    background: linear-gradient(355deg, #baddff 0%, #3b88d5 50%, #27639f 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

/* The comp runs this title well above the display-2 scale. */
@media (min-width: 1024px) {
	.cs-hero .display-2 {
		font-size: 84px;
		line-height: 0.92;
	}
}

@media (min-width: 1440px) {
	.cs-hero .display-2 {
		font-size: 100px;
		line-height: 0.88;
	}
}
@media (max-width: 1440px) {
.cs-hero-media img {

    object-position: 70% top;
}
}


.cs-meta-inner {
	border-top: 1px solid #E1E6EB;
	border-bottom: 1px solid #E1E6EB;
	padding-top: 34px;
	padding-bottom: 34px;
}

.cs-meta-inner .label-mono.block{
color:#0A1F35
}

.cs-meta-value {
	font-family: "Inter Tight", sans-serif;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	color: #0C2640;
}

@media (min-width: 1024px) {
	.cs-meta-value {
		font-size: 30px;
	}
}

.cs-story-block + .cs-story-block {
	margin-top: 70px;
}

@media (min-width: 1024px) {
	.cs-story-block + .cs-story-block {
		margin-top: 110px;
	}
}

.cs-story-media img {
	width: 100%;
	height: auto;
}

/* Section titles on this page sit between display-3 and display-2.
   The .section-dark selector is needed for "WHAT WE MADE": .section-dark h2
   is more specific than .text-blue and would otherwise paint it white. */
.cs-story-heading,
.section-dark .cs-story-heading {
	font-family: "Inter Tight", sans-serif;
	font-size: 38px;
	font-weight: 800;
	line-height: 1.02;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	color: #246EB7;
}

/* Both selectors are repeated at every step. The base rule above carries
   .section-dark .cs-story-heading, which outranks a bare .cs-story-heading
   here - without the pair, "WHAT WE MADE" would keep the mobile size. */
@media (min-width: 768px) {
	.cs-story-heading,
	.section-dark .cs-story-heading {
		font-size: 56px;
	}
}

/* Laptop and desktop: 72px at weight 700. Smaller widths stay on the ladder
   because 72px needs about 500px of line and would overflow a phone. */
@media (min-width: 1024px) {
	.cs-story-heading,
	.section-dark .cs-story-heading {
		font-size: 72px;
		font-weight: 700;
	}
}

.cs-story-subheading {
	margin-top: 20px;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: 0;
	text-transform: uppercase;
	color: #0C2640;
}

@media (min-width: 1024px) {
	.cs-story-subheading {
		font-size: 22px;
	}
}

.cs-story-copy {
	margin-top: 20px;
}

.cs-story-copy p {
    font-size: 18px;
    line-height: 1.6;
}

.cs-made-frame video,
.cs-made-frame iframe {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	display: block;
	background-color: #000000;
}

/* Gallery beneath the case study film. */
.cs-gallery-item {
	position: relative;
	overflow: hidden;
	background-color: #0A1F35;
}

.cs-gallery-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 16 / 10;
	transition: transform 0.6s ease;
}

.cs-gallery-item:hover img {
	transform: scale(1.04);
}

.cs-gallery-caption {
	padding: 14px 2px 0;
	font-family: "IBM Plex Mono", monospace;
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.6);
}

@media (prefers-reduced-motion: reduce) {
	.cs-gallery-item img {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   31. Contact anchor
   The header is sticky, so an anchor jump would tuck the top of the block
   underneath it. scroll-margin backs the landing point off by the header's
   height. html already carries scroll-behavior: smooth (section 1).
   -------------------------------------------------------------------------- */

#contact,
#contact-form {
	scroll-margin-top: 90px;
}

@media (max-width: 767px) {
	#contact,
	#contact-form {
		scroll-margin-top: 70px;
	}
}

/* --------------------------------------------------------------------------
   32. Outlined LinkedIn glyph
   Font Awesome Free ships brand marks solid only, but the comp draws the
   "in" as an outline. Stroking the glyph and clearing its fill gets there
   without leaving the icon-class system the ACF fields are built on.
   The stroke colour is set explicitly rather than via currentColor, which
   would resolve to the transparent fill.
   -------------------------------------------------------------------------- */

.nav-social .fa-linkedin-in {
	color: transparent;
	-webkit-text-stroke: 1.1px #818C98;
	transition: -webkit-text-stroke-color 0.3s ease;
}

.nav-social:hover .fa-linkedin-in,
.nav-social:focus-visible .fa-linkedin-in {
	-webkit-text-stroke-color: #246EB7;
}

.mobile-social .fa-linkedin-in {
	color: transparent;
	-webkit-text-stroke: 1.1px #0C2640;
	transition: -webkit-text-stroke-color 0.3s ease;
}

.mobile-social:hover .fa-linkedin-in,
.mobile-social:active .fa-linkedin-in {
	-webkit-text-stroke-color: #ffffff;
}

/* --------------------------------------------------------------------------
   33. Intro headline size
   Scoped like the work-page and case-study overrides above so the shared
   display-2 scale - also used by the hero h1, the work header and the 404
   title - stays where it is. 90/82 is the h2 pairing from the design spec,
   so the leading is deliberately tighter than the ratio used elsewhere in
   the display scale. Desktop only; the smaller breakpoints keep the fluid
   scale from section 6.
   -------------------------------------------------------------------------- */

@media (min-width: 1440px) {
	.intro-section .display-2 {
		font-size: 90px;
		line-height: 82px;
	}
}


/* --------------------------------------------------------------------------
   34. Intro grid

   The headline / copy split is set per section in wp-admin, because it really
   does differ page to page - measured off the comps the copy column starts at
   61% on Home, 56% on Brand Partnership and Production, 57.5% on Marketing
   and 34% on About. Those are not twelfths of a grid, so the split is a plain
   percentage and arrives as a custom property on the element rather than as a
   utility class: Tailwind only compiles classes it can find as literal text in
   the source, and a number an editor types is not there to be found.

   Two values drive it. --intro-start is where the copy column begins, as a
   percentage of the row. --intro-gap is the space between the columns, which
   pulls the headline column's right edge back from that line - so changing
   the gap never moves the copy.

   The -desk properties apply from 1024px up. The -lap ones, when set,
   override them between 1024px and 1439px only. Below 1024px the section is
   a single stacked column.
   -------------------------------------------------------------------------- */

.intro-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 40px;
	align-items: center !important;
}

@media (min-width: 1024px) {
	.intro-grid {
		grid-template-columns:
			calc(
				var(--intro-start-lap, var(--intro-start-desk, 61%)) -
				var(--intro-gap-lap, var(--intro-gap-desk, 64px))
			)
			minmax(0, 1fr);
		column-gap: var(--intro-gap-lap, var(--intro-gap-desk, 64px));
		align-items: start;
	}

	/* Optical offset that sets the copy against the headline's cap line. */
	.intro-grid__body {
		padding-top: 24px;
	}

	.intro-grid--middle {
		align-items: center;
	}

	/* Centring already balances the two columns - the offset would undo it. */
	.intro-grid--middle .intro-grid__body {
		padding-top: 0;
	}

	/* A section with no headline lines takes the full width rather than
	   leaving an empty column beside it. */
	.intro-grid .intro-grid__body--full {
		grid-column: 1 / -1;
		padding-top: 0;
	}
}

@media (min-width: 1440px) {
	.intro-grid {
		grid-template-columns:
			calc(var(--intro-start-desk, 61%) - var(--intro-gap-desk, 64px))
			minmax(0, 1fr);
		column-gap: var(--intro-gap-desk, 64px);
	}
}