/* WordPress integration styles. These rules preserve the approved static design
   while supporting native menus, editable content, galleries and pagination. */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.screen-reader-text:focus {
	z-index: 100000;
	top: 8px;
	left: 8px;
	width: auto;
	height: auto;
	padding: .8rem 1rem;
	clip: auto;
	color: var(--ink);
	background: var(--orange);
	border-radius: .5rem;
}

/* The original prototype revealed elements with JavaScript. The WordPress
   edition is intentionally script-free, so all content is visible by default. */
.reveal { opacity: 1; transform: none; }
/* Browsers paint <mark> as black text on a yellow highlight. This design never
   wants that highlight anywhere, so every mark in the page content is covered
   rather than only the hero ones.

   !important is deliberate: the yellow can also be reintroduced by WordPress
   global styles, the block library stylesheet or a plugin, all of which load
   after the theme and would otherwise win. */
.site-main mark,
.hero-copy mark,
.page-hero-copy mark,
.entry-content mark {
	padding: 0;
	color: var(--orange) !important;
	background: transparent !important;
	background-color: transparent !important;
}

/* The design has no pure-white surface. A section that ended up white — from
   the block palette, a pasted inline style or a plugin default — is corrected
   to the theme paper so every light section matches. */
.site-main .has-white-background-color,
.site-main [style*="background-color:#fff"],
.site-main [style*="background-color: #fff"],
.site-main [style*="background-color:#FFF"],
.site-main [style*="background-color: #FFF"],
.site-main [style*="background-color:rgb(255,255,255)"],
.site-main [style*="background-color: rgb(255, 255, 255)"],
.site-main [style*="background:#fff"],
.site-main [style*="background: #fff"] {
	background-color: var(--paper) !important;
}

/* Keep the dark sections dark even if a white block sits inside one. */
.section-dark .has-white-background-color,
.if-tone-band .has-white-background-color {
	background-color: var(--ink) !important;
}
/* Buttons. One treatment covering the theme's own markup and block-editor
   buttons, so a hero built either way looks and behaves identically. The block
   versions previously had no hover state at all beyond the lift, and the
   primary button's border was transparent, so its rounded edge never read. */
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: .8rem; }

.button,
.wp-block-button .wp-block-button__link {
	min-height: 50px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: .85rem 1.5rem;
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .02em;
	text-decoration: none;
	border: 1px solid transparent;
	border-radius: var(--button-radius);
	transition: transform .2s, background .2s, color .2s, border-color .2s, box-shadow .2s;
}

.button:hover,
.wp-block-button .wp-block-button__link:hover {
	transform: translateY(-2px);
}

/* Orange. The border matches the fill so the pill edge stays crisp, then both
   lighten together on hover. */
.button-primary,
.wp-block-button.button-primary .wp-block-button__link {
	color: var(--ink);
	background: var(--orange);
	border-color: var(--orange);
}

.button-primary:hover,
.wp-block-button.button-primary .wp-block-button__link:hover {
	color: var(--ink);
	background: var(--orange-hover);
	border-color: var(--orange-hover);
	box-shadow: 0 10px 26px color-mix(in srgb, var(--orange) 30%, transparent);
}

/* Outlined. The ring is the whole button, so it brightens and fills on hover. */
.button-ghost,
.wp-block-button.button-ghost .wp-block-button__link {
	color: var(--white);
	background: transparent;
	border-color: rgba(255, 255, 255, .4);
}

.button-ghost:hover,
.wp-block-button.button-ghost .wp-block-button__link:hover {
	color: var(--white);
	background: rgba(255, 255, 255, .1);
	border-color: var(--white);
}

.wp-block-button.button-dark .wp-block-button__link { color: var(--white); background: var(--ink); }

/* Keyboard focus has to be as obvious as hover, not just the browser default. */
.button:focus-visible,
.wp-block-button .wp-block-button__link:focus-visible {
	outline: 2px solid var(--orange);
	outline-offset: 3px;
}

/* Only needed when a split section is set to render its link as a button. */
.intro-copy .button {
	margin-top: 1.8rem;
}
.page-editor-shortcut { position: fixed; z-index: 90; right: 1rem; bottom: 1rem; padding: .7rem 1rem; color: var(--ink); font-size: .72rem; font-weight: 700; background: var(--orange); border-radius: 999px; box-shadow: 0 10px 30px rgba(0,0,0,.2); }
.capability-card > p:first-child { color: var(--orange); font-size: .65rem; }

body.admin-bar .site-header { top: 32px; }
.custom-logo-link { display: flex; align-items: center; }
.custom-logo { width: auto; max-width: 220px; height: 38px; object-fit: contain; }

/* Header alignment. Every element in the bar centres on the same axis, and the
   links carry no inherited line-height, which is what makes menu text sit a
   few pixels below a tall logo.

   .site-nav is deliberately NOT listed here. It already carries display:flex
   from site.css, and naming it as a descendant would out-specify the
   .desktop-navigation { display: none } rule below, leaving the desktop menu
   alive on mobile behind the hamburger. */
.site-header { align-items: center; }
.site-header .brand,
.site-header .custom-logo-link,
.site-nav .menu,
.site-nav .menu-item {
	display: flex;
	align-items: center;
}

.site-nav .menu,
.footer-links .menu,
.mobile-navigation .menu {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2.5vw, 2.6rem);
	padding: 0;
	margin: 0;
	list-style: none;
}

.site-nav .menu-item { position: relative; }
.site-nav .sub-menu {
	position: absolute;
	left: -.8rem;
	/* Opens flush with the link. The visual gap comes from the transparent top
	   border below, which keeps the space hoverable — a plain offset here left
	   a dead zone that closed the dropdown as the pointer crossed it. */
	top: 100%;
top: calc(100% + 1.15rem);
	min-width: 220px;
	padding: .65rem;
	margin: 0;
	visibility: hidden;
	opacity: 0;
	list-style: none;
	background: rgba(10,10,11,.98);
	border: 1px solid var(--line-dark);
	border-radius: .75rem;
	transform: translateY(.5rem);
	transition: opacity .2s, transform .2s, visibility .2s;
}
.site-nav .sub-menu::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 100%;
	height: var(--sub-gap);
}
.site-nav .menu-item:hover > .sub-menu,
.site-nav .menu-item:focus-within > .sub-menu { margin-top: 1.6rem solid transparent;     visibility: visible; opacity: 1; transform: none; }
.site-nav .sub-menu a { display: block; padding: .7rem .8rem; }

.mobile-navigation { display: none; }
.mobile-navigation > summary { width: 42px; height: 42px; padding: 9px; cursor: pointer; list-style: none; }
.mobile-navigation > summary::-webkit-details-marker { display: none; }
.mobile-navigation > summary > span:not(.screen-reader-text) { display: block; width: 100%; height: 2px; margin: 5px 0; background: var(--white); transition: transform .2s, opacity .2s; }
.mobile-navigation[open] > summary > span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mobile-navigation[open] > summary > span:nth-child(2) { opacity: 0; }
.mobile-navigation[open] > summary > span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.footer-links .menu { gap: 1.4rem; }
.footer-links ul { padding: 0; margin: 0; list-style: none; }

.wp-project-card { min-height: 390px; }
.wp-project-card summary { display: flex; flex: 1; flex-direction: column; cursor: pointer; list-style: none; }
.wp-project-card summary::-webkit-details-marker { display: none; }
.wp-project-card .project-expanded { display: none; padding-top: 1rem; color: #c4c2bd; font-size: .82rem; line-height: 1.7; border-top: 1px solid var(--line-dark); }
.wp-project-card[open] .project-expanded { display: block; }
.wp-project-card[open] .project-summary { display: none; }
.wp-project-card[open] .project-meta i { transform: rotate(45deg); }
.wp-project-card .project-meta i { display: inline-block; margin-left: .4rem; color: var(--service-color, var(--orange)); font-style: normal; font-size: 1rem; transition: transform .2s; }

.section-button { max-width: var(--max); margin: 2.5rem auto 0; }
.page-featured { position: relative; z-index: 2; }
.page-featured img { width: 100%; max-height: 520px; object-fit: cover; border-radius: var(--radius); }
.compact-hero { min-height: 58svh; }
.content-shell { max-width: 1060px; margin: auto; }
.entry-content { font-size: 1.05rem; line-height: 1.8; }
.entry-content > * { max-width: 820px; margin-right: auto; margin-left: auto; }
.entry-content > .alignwide { max-width: 1200px; }
.entry-content > .alignfull { width: 100vw; max-width: none; margin-left: calc(50% - 50vw); }
.entry-content h2 { margin-top: 2.5rem; font-size: clamp(2rem, 4vw, 3.5rem); letter-spacing: -.05em; }
.entry-content h3 { margin-top: 2rem; font-size: 1.6rem; }
.entry-content p, .entry-content li { color: #55534e; }
.entry-content img { height: auto; border-radius: .8rem; }
.entry-content .wp-block-gallery { max-width: 1200px; }
.entry-content a:not(.button) { text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: .18em; }
.edit-link, .post-edit-link { display: inline-flex; margin-top: 2rem; color: #686660; font-size: .75rem; }
.single-meta { display: flex; flex-wrap: wrap; gap: .8rem; color: #aaa8a2; font-size: .72rem; }
.single-meta span + span::before { content: "/"; margin-right: .8rem; color: var(--orange); }

.insight-card > a { display: block; }
.insight-feature { aspect-ratio: 16 / 10; overflow: hidden; background: var(--ink); }
.insight-feature > span { width: 100%; height: 100%; display: grid; place-items: center; color: var(--orange); font: 800 4rem var(--font-heading); }
.insight-card img, .archive-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.insight-card:hover .insight-feature img { transform: scale(1.025); }
.product-art img { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.admin-entry { display: inline-flex; align-items: center; }
.insights-grid-full { margin-bottom: 2rem; }
.archive-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; max-width: var(--max); margin: auto; }
.archive-card { overflow: hidden; padding: 1.2rem; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255,255,255,.4); }
.archive-card > a:first-child { display: block; height: 230px; margin: -1.2rem -1.2rem 1.2rem; }
.archive-card small { color: var(--orange); text-transform: uppercase; letter-spacing: .08em; }
.archive-card h2 { font-size: 1.45rem; letter-spacing: -.035em; }
.archive-card p { color: #62605b; line-height: 1.65; }
.navigation.pagination { max-width: var(--max); margin: 3rem auto 0; }
.nav-links { display: flex; flex-wrap: wrap; gap: .4rem; }
.page-numbers { min-width: 40px; padding: .65rem .8rem; text-align: center; border: 1px solid var(--line); border-radius: 999px; }
.page-numbers.current { color: var(--ink); background: var(--orange); border-color: var(--orange); }
.not-found { min-height: 72svh; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding-top: calc(var(--header) + var(--section-y)); color: var(--white); background: var(--ink); }
.not-found h1 { max-width: 900px; margin-bottom: 1rem; font-size: clamp(3rem,7vw,7rem); line-height: .98; letter-spacing: -.07em; }
.not-found p { max-width: 650px; margin-bottom: 2rem; color: #aaa8a2; font-size: 1.1rem; line-height: 1.7; }

@media (max-width: 820px) {
	body.admin-bar .site-header { top: 46px; }
	.desktop-navigation { display: none; }
	.mobile-navigation { display: block; }
	/* The header sets backdrop-filter, which makes it the containing block for
	   any fixed-position descendant. A fixed panel therefore measured itself
	   against the header box, not the viewport, and collapsed to no height.
	   Absolute positioning resolves against the header deliberately: top:100%
	   is the header's own height, so the panel starts exactly below it and
	   follows the admin bar without a second rule. */
	.mobile-navigation[open] nav { position: absolute; top: 100%; left: 0; right: 0; max-height: calc(100svh - var(--header)); padding: 1rem 1.2rem 2rem; overflow-y: auto; background: rgba(10,10,11,.99); border-top: 1px solid var(--line-dark); }
	.mobile-navigation .menu { align-items: stretch; flex-direction: column; gap: 0; }
	.mobile-navigation .menu a { display: block; padding: 1rem 0; font: 600 clamp(1.35rem,6vw,2.1rem) var(--font-heading); border-bottom: 1px solid var(--line-dark); }
	.mobile-navigation .sub-menu { padding: 0 0 0 1rem; margin: 0; list-style: none; }
	.mobile-navigation .sub-menu a { color: #aaa8a2; font-size: 1rem; }
	.archive-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
	.custom-logo { max-width: 180px; height: 32px; }
	.archive-grid { grid-template-columns: 1fr; }
}

@media print {
	.site-header, .site-footer, .mobile-navigation { display: none; }
	.site-main { overflow: visible; }
}

/* ------------------------------------------------------ Social media links
   Used by the IF Social Media Links element, the social option of the
   IF Two-Column Statement and the footer. Colours follow currentColor, so
   the icons suit light and dark sections alike. */
.if-social { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
.if-social .if-social-title { margin-bottom: 1.1rem; }
.if-social-list { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.if-social-list li { margin: 0; }
.if-social-link {
	display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
	height: 2.75rem; padding: 0 1.05rem 0 .9rem;
	color: inherit; font-size: .78rem; font-weight: 700; line-height: 1; text-decoration: none;
	border: 1px solid rgba(127, 127, 127, .35); border-color: color-mix(in srgb, currentColor 24%, transparent);
	border-radius: 999px;
	transition: color .2s, background-color .2s, border-color .2s, transform .2s;
}
.if-social-icons .if-social-link { width: 2.75rem; padding: 0; }
.if-social-icon { width: 1.05rem; height: 1.05rem; flex: none; }
.if-social-link:hover,
.if-social-link:focus-visible { color: var(--ink); background: var(--orange); border-color: var(--orange); transform: translateY(-2px); }
.if-social-link:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.if-social-lg .if-social-link { height: 3.4rem; font-size: .88rem; }
.if-social-lg.if-social-icons .if-social-link { width: 3.4rem; }
.if-social-lg .if-social-icon { width: 1.3rem; height: 1.3rem; }
.if-social-centre { align-items: center; }
.if-social-centre .if-social-list { justify-content: center; }
.if-social-end { align-items: flex-end; }
.if-social-end .if-social-list { justify-content: flex-end; }
.if-social-empty { margin: 0; padding: .8rem 1rem; font-size: .8rem; border: 1px dashed var(--orange); border-radius: .6rem; }
.if-social-empty a { color: var(--orange); text-decoration: underline; }

/* Inside the right column of an IF Two-Column Statement. */
.intro-copy .if-social { margin-top: 2.2rem; }
.intro-copy > .if-social:first-child { margin-top: 0; }

/* Footer: compact icons above the location line, right-aligned like it. */
.footer-social { align-items: flex-end; margin-bottom: .5rem; }
.footer-social .if-social-list { justify-content: flex-end; gap: .45rem; }
.footer-social .if-social-link { width: 2.25rem; height: 2.25rem; color: #aaa8a2; }
.footer-social .if-social-icon { width: .95rem; height: .95rem; }
@media (max-width: 1100px) {
	.footer-social { align-items: flex-start; }
	.footer-social .if-social-list { justify-content: flex-start; }
}

/* ---------------------------------------------- Element Layout / Columns tabs
   Classes added by the "Layout" and "Columns" tabs of every IF element (see
   inc/wpbakery/layout-controls.php). !important is used because these are
   explicit per-element choices that must win over the design defaults. */

/* Text alignment */
.ifl-align-left { text-align: left !important; }
.ifl-align-center { text-align: center !important; }
.ifl-align-right { text-align: right !important; }
.ifl-align-center .eyebrow, .ifl-align-center :is(.hero-actions, .if-social-list, .tag-row, .project-key) { justify-content: center; }
.ifl-align-right .eyebrow, .ifl-align-right :is(.hero-actions, .if-social-list, .tag-row, .project-key) { justify-content: flex-end; }
.ifl-align-center .if-social { align-items: center; }
.ifl-align-right .if-social { align-items: flex-end; }
.ifl-align-center :is(p, h1, h2, h3, blockquote) { margin-left: auto; margin-right: auto; }
.ifl-align-right :is(p, h1, h2, h3, blockquote) { margin-left: auto; }

/* Maximum width */
.ifl-maxw-narrow { max-width: 46rem !important; margin-left: auto !important; margin-right: auto !important; }
.ifl-maxw-medium { max-width: 64rem !important; margin-left: auto !important; margin-right: auto !important; }
.ifl-maxw-wide { max-width: var(--max) !important; margin-left: auto !important; margin-right: auto !important; }
.ifl-maxw-full { max-width: none !important; }

/* Main heading size */
.ifl-hsize-xs :is(h1, h2) { font-size: clamp(1.4rem, 2vw, 1.9rem) !important; }
.ifl-hsize-s :is(h1, h2) { font-size: clamp(1.7rem, 2.8vw, 2.7rem) !important; }
.ifl-hsize-m :is(h1, h2) { font-size: clamp(2rem, 4vw, 4rem) !important; }
.ifl-hsize-l :is(h1, h2) { font-size: clamp(2.6rem, 5.4vw, 5.6rem) !important; }
.ifl-hsize-xl :is(h1, h2) { font-size: clamp(3.2rem, 7vw, 7.5rem) !important; }

/* Paragraph text size */
.ifl-tsize-s :is(p, li) { font-size: .9rem !important; }
.ifl-tsize-l :is(p, li) { font-size: 1.22rem !important; }
.ifl-tsize-xl :is(p, li) { font-size: 1.45rem !important; }

/* Colours */
.ifl-hc :is(h1, h2, h3, h4, blockquote) { color: var(--ifl-hc) !important; }
.ifl-tc :is(p, li, small) { color: var(--ifl-tc) !important; }

/* Space above / below */
.ifl-mt-none { margin-top: 0 !important; }
.ifl-mt-s { margin-top: 1rem !important; }
.ifl-mt-m { margin-top: 2.5rem !important; }
.ifl-mt-l { margin-top: 5rem !important; }
.ifl-mt-xl { margin-top: 8rem !important; }
.ifl-mb-none { margin-bottom: 0 !important; }
.ifl-mb-s { margin-bottom: 1rem !important; }
.ifl-mb-m { margin-bottom: 2.5rem !important; }
.ifl-mb-l { margin-bottom: 5rem !important; }
.ifl-mb-xl { margin-bottom: 8rem !important; }

/* Gap between columns / cards */
.ifl-gap-none { gap: 0 !important; }
.ifl-gap-s { gap: .75rem !important; }
.ifl-gap-m { gap: 2rem !important; }
.ifl-gap-l { gap: 4rem !important; }
.ifl-gap-xl { gap: 8vw !important; }

/* Columns */
.ifl-stack { grid-template-columns: 1fr !important; flex-direction: column; align-items: flex-start; }
.ifl-stack > * { padding-top: 0; }
.ifl-valign-top { align-items: start !important; }
.ifl-valign-top > * { align-self: start !important; }
.ifl-valign-center { align-items: center !important; }
.ifl-valign-center > * { align-self: center !important; }
.ifl-valign-bottom { align-items: end !important; }
.ifl-valign-bottom > * { align-self: end !important; }
.ifl-valign-stretch { align-items: stretch !important; }
.ifl-valign-stretch > * { align-self: stretch !important; }
/* Aligned on purpose, so the "level with the heading" offset is dropped. */
:is(.ifl-valign-center, .ifl-valign-bottom, .ifl-valign-stretch) > .intro-copy { padding-top: var(--if-copy-offset, 0px) !important; }

@media (min-width: 821px) {
	.ifl-cols { grid-template-columns: var(--ifl-cols) !important; }
	.ifl-reverse > :first-child { order: 2; }
	.ifl-reverse.contact-band, .ifl-reverse.next-service { flex-direction: row-reverse; }
}
@media (max-width: 820px) {
	.ifl-mobile-reverse > :first-child { order: 2; }
	.ifl-mobile-reverse.contact-band, .ifl-mobile-reverse.next-service { flex-direction: column-reverse; }
}

/* Hide on device. Never while editing, so a hidden element can be found again. */
@media (min-width: 1101px) { body:not(.vc_editor) .ifl-hide-desktop { display: none !important; } }
@media (min-width: 768px) and (max-width: 1100px) { body:not(.vc_editor) .ifl-hide-tablet { display: none !important; } }
@media (max-width: 767px) { body:not(.vc_editor) .ifl-hide-mobile { display: none !important; } }
body.vc_editor :is(.ifl-hide-desktop, .ifl-hide-tablet, .ifl-hide-mobile) { outline: 1px dashed var(--orange); opacity: .55; }

/* ------------------------------------------------------- Header options
   Set in Appearance > Customize > Header & Footer > Header. */
.header-button { min-height: 40px; padding: .55rem 1.1rem; font-size: .76rem; white-space: nowrap; }
.site-header .header-button-desktop { margin-left: clamp(1rem, 2vw, 2rem); }
.header-button-mobile { display: none; }
body.header-menu-right .site-header .site-nav { margin-left: auto; }
body.header-menu-center .site-header .site-nav { margin-inline: auto; }
body.header-menu-left .site-header .site-nav { margin-left: clamp(1.5rem, 3vw, 3rem); margin-right: auto; }
body.header-static .site-header { position: absolute; }
body.header-bg-solid .site-header { background: var(--ink); backdrop-filter: none; }
body.header-bg-transparent .site-header { background: transparent; border-bottom-color: transparent; backdrop-filter: none; }
@media (max-width: 820px) {
	.site-header .header-button-desktop { display: none; }
	.mobile-navigation .header-button-mobile { display: inline-flex; margin-top: 1.5rem; }
	body.header-bg-transparent .mobile-navigation[open] nav { background: var(--ink); }
}

/* ------------------------------------------------------- Footer options */
.footer-brand .footer-text { margin-top: .5rem; line-height: 1.6; }
.footer-brand .footer-text a, .footer-contact a { text-decoration: underline; text-underline-offset: .2em; }
.footer-contact a:hover, .footer-brand .footer-text a:hover { color: var(--orange); }
body.footer-stacked .site-footer { grid-template-columns: 1fr; justify-items: center; gap: 1.5rem; padding-top: 2.5rem; padding-bottom: 2.5rem; text-align: center; }
body.footer-stacked .footer-brand { flex-direction: column; }
body.footer-stacked .footer-links .menu { flex-wrap: wrap; justify-content: center; }
body.footer-stacked .footer-meta { grid-column: auto; text-align: center; }
body.footer-stacked .footer-social, body.footer-stacked .footer-social .if-social-list { align-items: center; justify-content: center; }

/* Footer widget columns (Appearance > Widgets > Footer column 1–3). */
.footer-widgets { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 2.5rem 4rem; padding: var(--section-y) var(--section-x); color: #aaa8a2; font-size: .85rem; line-height: 1.7; background: var(--ink); border-top: 1px solid var(--line-dark); }
.footer-widget + .footer-widget { margin-top: 1.5rem; }
.footer-widget-title { margin: 0 0 1rem; color: var(--white); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; }
.footer-widgets ul { margin: 0; padding: 0; list-style: none; }
.footer-widgets li + li { margin-top: .45rem; }
.footer-widgets a:hover { color: var(--orange); }

/* Long footer menus wrap instead of running off the screen. */
.footer-links .menu { flex-wrap: wrap; row-gap: .6rem; }

/* Service map arrangements for five and six items (four is the original). */
.hero-system.has-5-nodes .node-1 { top: 0; left: 37%; right: auto; bottom: auto; }
.hero-system.has-5-nodes .node-2 { top: 20%; left: 0; right: auto; bottom: auto; }
.hero-system.has-5-nodes .node-3 { top: 20%; right: 0; left: auto; bottom: auto; }
.hero-system.has-5-nodes .node-4 { bottom: 26%; left: 2%; right: auto; top: auto; }
.hero-system.has-5-nodes .node-5 { bottom: 26%; right: 2%; left: auto; top: auto; }
.hero-system.has-6-nodes .node-1 { top: 3%; left: 7%; right: auto; bottom: auto; }
.hero-system.has-6-nodes .node-2 { top: 3%; right: 7%; left: auto; bottom: auto; }
.hero-system.has-6-nodes .node-3 { top: 35%; left: -3%; right: auto; bottom: auto; }
.hero-system.has-6-nodes .node-4 { top: 35%; right: -3%; left: auto; bottom: auto; }
.hero-system.has-6-nodes .node-5 { bottom: 22%; left: 2%; right: auto; top: auto; }
.hero-system.has-6-nodes .node-6 { bottom: 22%; right: 2%; left: auto; top: auto; }
@media (max-width: 560px) {
	.hero-system.has-5-nodes .node-1 { left: 34%; }
	.hero-system.has-6-nodes :is(.node-3) { left: 0; }
	.hero-system.has-6-nodes :is(.node-4) { right: 0; }
}

/* ---------------------------------------------------- Project card images
   See inc/project-images.php. The image sits behind the top of the card —
   from the top edge down to the end of the heading — or behind the whole
   card. "Show on hover" fades it in on hover, keyboard focus, and when the
   card is opened (the only state a phone has). */
.project-card.has-media { position: relative; overflow: hidden; isolation: isolate; }
.project-card.has-media { --media-top: .3; --media-bottom: .86; }
.project-card.media-light { --media-top: .12; --media-bottom: .7; }
.project-card.media-strong { --media-top: .55; --media-bottom: .95; }

.project-card-top {
	position: relative;
	isolation: isolate;
	flex: 1;
	display: flex;
	flex-direction: column;
	min-height: 220px;
	/* Reach the card edges, so the image fills the top corner to corner. */
	margin: -1.5rem -1.5rem 0;
	padding: 1.5rem 1.5rem 1.4rem;
	border-bottom: 1px solid transparent;
	transition: border-color .4s;
}
.media-area-full .project-card-top { position: static; isolation: auto; }
.project-card-titles { margin-top: auto; padding-top: 2.5rem; }
.project-card-titles h3 { margin-bottom: 0; }
.project-card.has-media .project-summary { margin: 1.1rem 0 1.5rem; }

.project-card-media { position: absolute; z-index: -1; inset: 0; overflow: hidden; pointer-events: none; }
.project-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.06); transition: transform .8s ease, opacity .45s ease; }
.project-card-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(10, 10, 11, var(--media-bottom)) 0%, rgba(10, 10, 11, var(--media-top)) 70%, rgba(10, 10, 11, calc(var(--media-top) + .15)) 100%);
}
/* On the whole-card variant, the lower half must stay readable too. */
.media-area-full .project-card-media::after { background: linear-gradient(to top, rgba(10, 10, 11, .96) 0%, rgba(10, 10, 11, var(--media-bottom)) 45%, rgba(10, 10, 11, var(--media-top)) 100%); }

/* Always show */
.media-always .project-card-media img { transform: scale(1); }
.media-always.media-area-top .project-card-top { border-bottom-color: var(--line-dark); }

/* Show on hover */
.media-hover .project-card-media { opacity: 0; transition: opacity .45s ease; }
.media-hover:is(:hover, :focus-within, [open]) .project-card-media { opacity: 1; }
.media-hover:is(:hover, :focus-within, [open]) .project-card-media img { transform: scale(1); }
.media-hover.media-area-top:is(:hover, :focus-within, [open]) .project-card-top { border-bottom-color: var(--line-dark); }

/* Text over the image keeps its contrast. */
.project-card.has-media:is(.media-always, :hover, :focus-within, [open]) :is(.project-card-head > span, .project-category) { text-shadow: 0 1px 12px rgba(0, 0, 0, .45); }
.project-card.has-media:is(.media-always, :hover, :focus-within, [open]) .project-card-head small { background: rgba(10, 10, 11, .55); backdrop-filter: blur(6px); }

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

/* Service Cards with "Automatic" columns follow the number of services on
   large screens; smaller screens and narrow builder columns still reduce it. */
@media (min-width: 1101px) {
	.service-grid.if-auto-1 { grid-template-columns: minmax(0, 1fr); }
	.service-grid.if-auto-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.service-grid.if-auto-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.service-grid.if-auto-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* ------------------------------------------------------- Client logos
   Website Content > Clients & logos. Each tile shows a logo when the client
   has one, otherwise the name. The old rules style every span in the grid as
   a tile, so the name inside a tile is reset here. */
:is(.client-list, .client-wall) .client-name { display: inline; min-height: 0; padding: 0; color: inherit; font: inherit; background: none; }
.client-list .client-tile { color: #a9a7a2; }
:is(.client-list, .client-wall) .client-link { display: grid; place-items: center; width: 100%; height: 100%; color: inherit; text-decoration: none; }
:is(.client-list, .client-wall) .client-link:hover .client-name { color: var(--orange); }
:is(.client-list, .client-wall) .client-link:focus-visible { outline: 2px solid var(--orange); outline-offset: -4px; }

.client-logo {
	display: block;
	width: auto;
	height: calc(var(--client-logo-h, 64px) * var(--client-logo-s, 1));
	max-width: min(82%, 260px);
	object-fit: contain;
	image-rendering: auto;
	transition: filter .3s ease, opacity .3s ease, transform .3s ease;
}
.client-tile.has-logo:hover .client-logo { transform: scale(1.04); }

/* All white: logos read as one set on the dark grid. Hover brightens them
   but keeps them white; original colours (navy, grey) disappear on black. */
.clients-logo-white .client-logo { filter: brightness(0) invert(1); opacity: .85; }
.clients-logo-white .client-tile:hover .client-logo,
.clients-logo-white .client-link:focus-visible .client-logo { opacity: 1; }

/* Greyscale: quieter; real colours on hover. */
.clients-logo-grey .client-logo { filter: grayscale(1); opacity: .72; }
.clients-logo-grey .client-tile:hover .client-logo,
.clients-logo-grey .client-link:focus-visible .client-logo { filter: none; opacity: 1; }

@media (prefers-reduced-motion: reduce) {
	.client-logo { transition: none; }
	.client-tile.has-logo:hover .client-logo { transform: none; }
}

/* Service number grid: never underline, wherever the grid is placed. */
.hero-index a.index-cell, .entry-content .hero-index a.index-cell:not(.button) { text-decoration: none; }

/* Service number grid, default look: the service name only, large and in the
   accent colour (IF Page Hero > Visual > "What each box shows"). */
.hero-index.is-names-only .index-number { display: none; }
.hero-index.is-names-only .index-title {
	max-width: 14ch;
	color: var(--orange);
	font: 700 clamp(1.1rem, 1.7vw, 1.55rem)/1.15 var(--font-heading);
	letter-spacing: -.02em;
	text-wrap: balance;
	transition: transform .25s ease;
}
.hero-index.is-names-only .index-cell:hover .index-title,
.hero-index.is-names-only .index-cell:focus-visible .index-title { transform: translateY(-3px); }
@media (max-width: 560px) {
	.hero-index.is-names-only .index-title { font-size: 1.05rem; }
}

/* -------------------------------------------------- Capability card images
   Same behaviour as the project cards (see inc/capability-images.php). */
.capability-card.has-media { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; outline-offset: -2px; }
.capability-card.has-media { --media-top: .3; --media-bottom: .86; }
.capability-card.media-light { --media-top: .12; --media-bottom: .7; }
.capability-card.media-strong { --media-top: .55; --media-bottom: .95; }
.capability-card.has-media:focus-visible { outline: 2px solid var(--orange); }

.capability-card-top {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	min-height: 200px;
	margin: -1.7rem -1.7rem 0;
	padding: 1.7rem 1.7rem 1.3rem;
	border-bottom: 1px solid transparent;
	transition: border-color .4s;
}
.media-area-full .capability-card-top { position: static; isolation: auto; }
.capability-card-top > span { color: var(--orange); font-size: .65rem; }
.capability-card-top h3 { margin: auto 0 0; padding-top: 3rem; }
.capability-card.has-media > p { margin-top: 1rem; }

.capability-card.media-always .project-card-media img { transform: scale(1); }
.capability-card.media-always.media-area-top .capability-card-top { border-bottom-color: var(--line-dark); }
.capability-card.media-hover .project-card-media { opacity: 0; transition: opacity .45s ease; }
.capability-card.media-hover:is(:hover, :focus, :focus-within) .project-card-media { opacity: 1; }
.capability-card.media-hover:is(:hover, :focus, :focus-within) .project-card-media img { transform: scale(1); }
.capability-card.media-hover.media-area-top:is(:hover, :focus, :focus-within) .capability-card-top { border-bottom-color: var(--line-dark); }
.capability-card.has-media:is(.media-always, :hover, :focus, :focus-within) .capability-card-top h3 { color: #fff; text-shadow: 0 1px 14px rgba(0, 0, 0, .45); }

/* All cards in a grid with images share the same image height, so titles and
   text line up across each row (CSS subgrid). */
@supports (grid-template-rows: subgrid) {
	.capability-grid.has-card-media { grid-auto-rows: auto; }
	.capability-grid.has-card-media > .capability-card { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; }
}
.capability-grid.has-card-media .capability-card:not(.has-media) .capability-card-top > span { color: var(--orange); }
.capability-card-top h3 { line-height: 1.15; letter-spacing: -.035em; }
.project-card-media img { border-radius: 0 !important; }

/* ------------------------------------------- Card images: dim, clear on hover
   Project and capability cards set to "Always show": the image is darkened by
   default so the card reads as part of the dark page, and returns to its
   normal brightness on hover, keyboard focus or when the card is opened (the
   phone equivalent of hover). A light shade stays along the bottom edge so
   the white title is always readable. Numbers on image cards are white. */
:is(.project-card, .capability-card).has-media { --media-dim: .55; --media-top: 0; --media-bottom: .72; }
:is(.project-card, .capability-card).media-light { --media-dim: .35; --media-bottom: .6; }
:is(.project-card, .capability-card).media-strong { --media-dim: .7; --media-bottom: .82; }

.project-card-media::after { z-index: 2; }
.project-card-media::before {
	content: "";
	position: absolute;
	z-index: 1;
	inset: 0;
	background: rgb(10, 10, 11);
	opacity: 0;
	transition: opacity .45s ease;
	pointer-events: none;
}
.media-area-top .project-card-media::after,
.media-area-full .project-card-media::after {
	background: linear-gradient(to top, rgba(10, 10, 11, var(--media-bottom)) 0%, rgba(10, 10, 11, 0) 55%);
}
.media-area-full .project-card-media::after {
	background: linear-gradient(to top, rgba(10, 10, 11, .94) 0%, rgba(10, 10, 11, var(--media-bottom)) 45%, rgba(10, 10, 11, 0) 80%);
}

/* Always show: darkened until hovered. */
:is(.project-card, .capability-card).media-always .project-card-media::before { opacity: var(--media-dim); }
.project-card.media-always:is(:hover, :focus-within, [open]) .project-card-media::before,
.capability-card.media-always:is(:hover, :focus, :focus-within) .project-card-media::before { opacity: 0; }
.project-card.media-always:is(:hover, :focus-within, [open]) .project-card-media img,
.capability-card.media-always:is(:hover, :focus, :focus-within) .project-card-media img { transform: scale(1.03); }
:is(.project-card, .capability-card).media-always .project-card-media img { transition: transform .8s ease; }

/* White numbers on image cards. */
.project-card.media-always .project-card-head > span,
.project-card.media-hover:is(:hover, :focus-within, [open]) .project-card-head > span,
.capability-card.has-media .capability-card-top > span {
	color: #fff;
	text-shadow: 0 1px 10px rgba(0, 0, 0, .5);
}
.project-card.has-media .project-card-head > span { transition: color .3s ease; }

@media (prefers-reduced-motion: reduce) {
	.project-card-media::before { transition: none; }
}

/* ---------------------------------------------------- Project "View more"
   Orange outline pill, matching the status badge at the top of the card. */
.project-expanded .project-more {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	margin-top: .6rem;
	padding: .5rem .95rem;
	color: var(--orange);
	font-size: .72rem;
	font-weight: 700;
	line-height: 1;
	text-decoration: none !important;
	border: 1px solid color-mix(in srgb, var(--orange) 55%, transparent);
	border-radius: 999px;
	transition: color .2s, background-color .2s, border-color .2s;
}
.project-expanded .project-more span { transition: transform .2s; }
.project-expanded .project-more:hover,
.project-expanded .project-more:focus-visible { color: var(--ink); background: var(--orange); border-color: var(--orange); }
.project-expanded .project-more:hover span { transform: translateX(3px); }
.project-expanded .project-more:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }

/* --------------------------------------- Capability cards: separate cards
   Same look as the project cards — rounded, outlined, spaced apart — instead
   of one joined grid. (IF Capability Cards > "Card style" can switch back.) */
.capability-grid.if-cards { gap: 1rem; background: none; border: 0; }
.capability-grid.if-cards > .capability-card {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	min-height: 300px;
	border: 1px solid var(--line); /* follows the light / dark scheme */
	border-radius: var(--radius);
	background: var(--card, rgba(255, 255, 255, .03));
	transition: border-color .25s, background-color .25s, transform .25s;
}
.capability-grid.if-cards > .capability-card:hover {
	border-color: color-mix(in srgb, var(--orange) 65%, transparent);
	transform: translateY(-4px);
}
.capability-grid.if-cards .capability-card-top { border-radius: 0; }
@supports (grid-template-rows: subgrid) {
	.capability-grid.if-cards.has-card-media { row-gap: 1rem; }
}

/* ------------------------------------------------------- Image zoom bar
   Images that open in the lightbox: a bar with a magnifier slides up from
   the bottom on hover or keyboard focus. */
.if-zoom { position: relative; display: block; overflow: hidden; cursor: zoom-in; border-radius: .8rem; }
.if-zoom-wrap { display: block; }
.if-zoom img { display: block; width: 100%; transition: transform .5s ease, filter .3s ease; }
.if-zoom::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3.6rem;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff9d00' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21'/%3E%3C/svg%3E") center / 1.6rem no-repeat;
	transform: translateY(100%);
	transition: transform .3s ease;
	pointer-events: none;
}
.if-zoom:hover::after, .if-zoom:focus-visible::after { transform: none; }
.if-zoom:hover img, .if-zoom:focus-visible img { transform: scale(1.04); filter: brightness(.85); }
.if-zoom:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.entry-content .if-zoom img, .page-featured .if-zoom img { border-radius: 0; }
.page-featured .if-zoom { border-radius: var(--radius); }

/* -------------------------------------------------------------- Lightbox */
html.if-lb-open { overflow: hidden; }
.if-lightbox { position: fixed; z-index: 9999; inset: 0; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .5rem; padding: 3.5rem 1rem 2.5rem; background: rgba(5, 5, 6, .94); animation: if-lb-in .2s ease; }
.if-lightbox[hidden] { display: none; }
@keyframes if-lb-in { from { opacity: 0; } to { opacity: 1; } }
.if-lb-stage { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; height: 100%; }
.if-lb-stage img { max-width: 100%; max-height: calc(100vh - 9rem); object-fit: contain; border-radius: .6rem; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); transition: opacity .2s; }
.if-lightbox.is-loading .if-lb-stage img { opacity: .3; }
.if-lb-caption { max-width: 70ch; margin: .9rem 0 0; color: #d6d4cf; font-size: .85rem; text-align: center; }
.if-lb-count { position: absolute; left: 1.2rem; top: 1.2rem; color: #aaa8a2; font-size: .75rem; letter-spacing: .08em; }
.if-lightbox button { display: grid; place-items: center; width: 3rem; height: 3rem; padding: 0; color: #fff; font-size: 2rem; line-height: 1; cursor: pointer; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18); border-radius: 50%; transition: background-color .2s, border-color .2s, color .2s; }
.if-lightbox button:hover, .if-lightbox button:focus-visible { color: var(--ink); background: var(--orange); border-color: var(--orange); outline: none; }
.if-lb-close { position: absolute; right: 1rem; top: 1rem; font-size: 1.6rem !important; }
.if-lightbox.is-single .if-lb-prev, .if-lightbox.is-single .if-lb-next { visibility: hidden; }
@media (max-width: 600px) {
	.if-lightbox { grid-template-columns: 1fr; padding: 3.5rem .5rem 4.5rem; }
	.if-lb-prev, .if-lb-next { position: absolute; bottom: 1rem; }
	.if-lb-prev { left: calc(50% - 3.5rem); }
	.if-lb-next { right: calc(50% - 3.5rem); }
}
@media (prefers-reduced-motion: reduce) {
	.if-zoom img, .if-zoom::after, .if-lightbox { transition: none; animation: none; }
}

/* Long words in card titles wrap instead of being cut off on narrow cards. */
.capability-card h3, .project-card h3 { overflow-wrap: break-word; hyphens: auto; }
.capability-grid > .capability-card { grid-template-columns: minmax(0, 1fr); min-width: 0; }

/* ----------------------------------------- Single pages: full-width images
   On project, solution, product and insight pages, content images fill the
   width of their column and are centred, whatever size was inserted
   (WPBakery Single Image, image blocks, and every zoomable image). Small
   inline images and icons are left alone. */
.single .entry-content :is(.wpb_single_image, .wp-block-image, figure:has(> img), figure:has(> a > img)) { text-align: center; }
.single .entry-content .wpb_single_image :is(.vc_figure, .vc_single_image-wrapper),
.single .entry-content :is(.if-zoom, .if-zoom-wrap),
.single .entry-content .wp-block-image,
.single .entry-content .wp-block-image > a,
.single .entry-content figure:has(> img),
.single .entry-content figure:has(> a > img) {
	display: block;
	width: 100%;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}
.single .entry-content .wpb_single_image img,
.single .entry-content .wp-block-image img,
.single .entry-content :is(.if-zoom, .if-zoom-wrap) img,
.single .entry-content figure > img,
.single .entry-content figure > a > img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	margin-left: auto;
	margin-right: auto;
}
/* WPBakery's "Image alignment: left / right" would otherwise push it aside. */
.single .entry-content .wpb_single_image:is(.vc_align_left, .vc_align_right) { text-align: center; }
/* Space between stacked images. */
.single .entry-content :is(.wpb_single_image, .wp-block-image) { margin-bottom: 1.5rem; }