/* ==========================================================================
   WordPress integration for the design (loaded after assets/css/design/*).
   Keeps the design files identical to the snapshot.
   ========================================================================== */

/* The design uses <a> for some triggers; we use <button> for accessibility. Neutralise UA button styles. */
button.soc,
button.rail-a { padding: 0; margin: 0; font: inherit; text-align: inherit; }
button.soc.vert { padding-bottom: 14px; }
button.rail-a.a2 { padding: 8px 22px 8px 8px; }
.rail.hide button.rail-a.a2 { padding: 8px; }

/* <main> wrapper added inside .hero-wrap: keep it layout-neutral. */
.c2-main { display: contents; }
.c2-main:focus { outline: none; }

/* Admin bar (logged-in users): keep fixed UI below it. */
.admin-bar .hdr { top: 32px; }
.admin-bar body .hdr.solid,
body.admin-bar .hdr.solid { top: 44px; }
body.admin-bar .mpanel { top: 32px; }
@media (max-width: 900px) { body.admin-bar .hdr.solid { top: 40px; } }
@media (max-width: 782px) {
	.admin-bar .hdr { top: 46px; }
	body.admin-bar .hdr.solid { top: 54px; }
	body.admin-bar .mpanel { top: 46px; }
}
@media (max-width: 600px) {
	/* The admin bar scrolls away on small screens. */
	.admin-bar .hdr, body.admin-bar .hdr.solid { top: 8px; }
}

/* Contact / CV: the single grid column used `1fr` (min-content floor), so the form card could push the page
   5px wider than a 390px screen. Let the column and its children shrink. */
.ctp-in { grid-template-columns: minmax(0, 1fr); }
.ctp-in > * { min-width: 0; }

/* Scroll reveal on small screens: slide up, never sideways. The design has this override, but it is declared before
   the base .rv-l/.rv-r rules and loses the cascade, so the right-hand column started 48px off-screen. That made the page
   wider than the phone, zoomed it out and pushed fixed panels (Caiden chat, its close button) off the edge. */
@media (max-width: 820px) {
	.rv-on .rv.rv-l:not(.in),
	.rv-on .rv.rv-r:not(.in) { transform: translate3d(0, 32px, 0); }
}

/* Companies (mobile): the stacked column used `1fr` (min-content floor), so wide logos could make the whole page
   28px wider than the screen. That also pushed fixed panels (e.g. the Caiden chat and its close button) off-screen. */
.ac-in { grid-template-columns: minmax(0, 1fr); }
.ac-in > * { min-width: 0; }
@media (min-width: 901px) { .ac-in { grid-template-columns: 200px minmax(0, 1fr); } }

/* Hidden honeypot field in the forms. */
.c2-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Inline error state + loading state for the forms. */
.c2-form-err { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: rgba(229, 51, 75, .1); color: #B3192E; font-size: 13.5px; line-height: 1.45; }
.c2-form-err[hidden] { display: none; }
.nl-btn { position: relative; }
.nl-btn:disabled { opacity: .6; cursor: progress; transform: none; box-shadow: none; }
/* Loading state: label hides, a spinner shows while the form is being sent. */
.nl-btn.is-loading:disabled { opacity: 1; color: transparent; cursor: progress; }
.nl-btn.is-loading::after { content: ""; position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border: 2.5px solid rgba(255, 255, 255, .35); border-top-color: #fff; border-radius: 50%; animation: c2-spin .7s linear infinite; }
@keyframes c2-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .nl-btn.is-loading::after { animation-duration: 1.8s; } } /* slower, but it must still show progress */

/* Cookie banner colour (from the legacy Additional CSS, which is skipped on coded pages). */
#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-bottom { background: #202020; }

/* reCAPTCHA v3 badge: hidden; the required notice is shown in the footer instead. */
.grecaptcha-badge { visibility: hidden; }
.c2-recaptcha-note { margin: 10px 0 0; font-size: 11.5px; line-height: 1.45; color: #6B6F73; }
.c2-recaptcha-note a { color: inherit; text-decoration: underline; }

/* Ask Caiden: the widget iframe fills the panel under the header. */
.askp-frame { flex: 1; min-height: 0; display: flex; background: transparent; }
.askp-frame iframe { flex: 1; width: 100%; height: 100%; border: 0; background: transparent; }
.askp-off { margin: auto; padding: 24px; text-align: center; color: #5B6475; }
/* The widget brings its own header, so the panel only needs a close button:
   desktop = floating circle on the panel's left edge, mobile = slim row above the widget. */
.askp-x { position: absolute; left: -56px; top: 16px; width: 44px; height: 44px; padding: 0; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, .7); border-radius: 50%; background: rgba(255, 255, 255, .88); color: #15171A; box-shadow: 0 8px 24px rgba(14, 24, 40, .25); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); cursor: pointer; transition: background .2s, transform .2s; }
.askp-x:hover { background: #fff; transform: scale(1.06); }
.askp-x svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
@media (max-width: 760px) {
	.askp-x { position: static; flex: none; align-self: flex-end; width: 40px; height: 40px; margin: 8px 12px 0; box-shadow: none; background: rgba(21, 23, 26, .07); }
}

/* Phones: the floating buttons sit on the right edge and cover the end of the company description. Keep the text clear. */
@media (max-width: 760px) {
	.ac-det { padding-right: 64px; }
}

/* ==========================================================================
   Floating buttons
   - Popups (Partner form, Newsletter, Brochure status) always sit in front of the buttons.
   - Phones: the LinkedIn / Newsletter / Brochure buttons become a bottom-aligned row in the bottom-right corner (instead
     of a column at the vertical centre), so they no longer cover the hero text and the middle of the page.
   ========================================================================== */
.rail { z-index: 95; }                      /* Partner card above the right-hand buttons (both were 90) */
.bdp, .nlp { z-index: 5; }                  /* status/newsletter cards above sibling buttons inside .social */

@media (max-width: 760px) {
	/* Home hero: on phones the text is taller than the hero's min-height, so the 3D logo's 196px bottom margin (the
	   design's phone override of 84px loses the cascade) spilled out as a white band above "30 specialist businesses".
	   No margin, and a little space under the logo instead. */
	.stage { margin-bottom: 0; }
	.hero-wrap { padding-bottom: 28px; }

	/* Home hero stats (30+ Companies | 1000+ People | 1 Shared vision): at desktop size the third stat wrapped onto its
	   own, off-centre row. On phones: one even, centred row of three with smaller type. (!important: the sizes are inline.) */
	.c2-stats { flex-wrap: nowrap !important; align-items: stretch; width: 100%; max-width: 340px; gap: 0 !important; margin-top: 8px !important; }
	.c2-stats > div { flex: 1 1 0 !important; min-width: 0; padding: 0 4px !important; text-align: center; }
	.c2-stats > div > div:first-of-type { font-size: clamp(22px, 7.4vw, 30px) !important; min-width: 0 !important; }
	.c2-stats > div > div:last-child { font-size: 10px !important; letter-spacing: .08em !important; line-height: 1.35; }
	#our-companies { width: 100% !important; } /* inline width:98% left white slivers beside the full-width phone hero */

	/* Floating buttons: a row in the bottom-right corner, bottom-aligned — LinkedIn, Newsletter, then the tall Brochure pill. */
	/* bottom: 29px = the Partner pill's 24px offset + half the 10px difference in height, so the round buttons sit on the pill's centre line;
	   the Brochure pill shares their baseline (and is therefore lifted 13px). */
	.social, .social.far { top: auto; bottom: 29px; left: auto; right: 12px; transform: none; width: auto; max-width: none; padding: 0; flex-direction: row; align-items: flex-end; justify-content: flex-end; gap: 10px; }
	/* Status/newsletter cards open above the row instead of on top of the buttons. */
	.bdp, .nlw .nlp { bottom: 184px; }
	/* Leave room under the footer for the floating buttons. */
	.ft { padding-bottom: 88px; }
}
@media (max-width: 360px) {
	/* Very narrow phones: the Partner pill collapses to its icon so it never touches the button row. */
	.rail .rail-a.a2 { gap: 0; padding: 8px; }
	.rail .rail-a.a2 .rail-cap { max-width: 0; opacity: 0; }
}

/* "Ask Caiden" always pulses: an expanding brand-blue ring (separate layer, so the button's own glass/shadows are untouched).
   It pauses only while the chat is open, and shows a static soft ring for people who prefer reduced motion. */
.chat-btn { position: relative; }
.chat-btn::after {
	content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
	box-shadow: 0 0 0 0 rgba(0, 159, 227, .6);
	animation: c2-pulse 2s ease-out infinite;
}
.chat-btn[aria-expanded="true"]::after { animation: none; box-shadow: none; }
@keyframes c2-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(0, 159, 227, .6); }
	70%  { box-shadow: 0 0 0 14px rgba(0, 159, 227, 0); }
	100% { box-shadow: 0 0 0 0 rgba(0, 159, 227, 0); }
}
@media (prefers-reduced-motion: reduce) {
	.chat-btn::after { animation: none; box-shadow: 0 0 0 4px rgba(0, 159, 227, .28); }
	.chat-btn[aria-expanded="true"]::after { box-shadow: none; }
}

/* Home hero (tablet/desktop): the hero is 98% wide, leaving 1% either side but nothing above. Give the top the same gap.
   padding-top in % is relative to the width, exactly like the 1% side margins, so the two always match.
   Phones keep a full-width, edge-to-edge hero. Other pages (.pg-contact) have no dark hero panel. */
@media (min-width: 761px) {
	.c2-page:not(.pg-contact) { padding-top: 1%; }

	/* The navbar (transparent state, over the hero) sits lower too: the hero's top gap + 10px, so it has room inside the hero
	   instead of hugging its top edge. Once it turns into the white bar on scroll it keeps its own position (top: 12px). */
	.c2-page:not(.pg-contact) .hdr:not(.solid) { top: calc(1vw + 10px); }
	.admin-bar .c2-page:not(.pg-contact) .hdr:not(.solid) { top: calc(32px + 1vw + 10px); }
}
@media (min-width: 761px) and (max-width: 782px) {
	.admin-bar .c2-page:not(.pg-contact) .hdr:not(.solid) { top: calc(46px + 1vw + 10px); }
}

/* Our Team heading: same size and type as the Join Our Team / Contact Us headings (.ctp-h) at every width. */
.tm-intro h1 { font-size: 28px; font-weight: 800; line-height: 1.15; letter-spacing: -.01em; }

/* ==========================================================================
   Locations on phones/tablets (<= 900px): same composition as desktop.
   Dark image panel with the glass card on top; the globe sits BELOW the card, crossing the panel's bottom edge, and its
   base ends inside the blue footer. (The design's stacked version put a small clipped globe above a white card.)
   Everything scales from one value: --loc-g = globe width. Globe height = 1.2183 x width (765:932).
   ========================================================================== */
@media (max-width: 900px) {
	:root { --loc-g: min(72vw, 330px); }

	#locations { padding-bottom: 0 !important; }          /* inline 96px: the globe now provides the overlap */
	.loc { display: flex; flex-direction: column; background: none; border-radius: 0; overflow: visible; }
	.loc-bg { display: block; inset: 0 0 calc(var(--loc-g) * 0.357 - 28px) 0; border-radius: 32px; }   /* panel ends ~55% down the globe */

	/* glass card, as on desktop */
	.loc-card { order: 1; position: static; transform: none; width: auto; margin: 20px 16px 10px;
		background: rgba(255, 255, 255, .15); border-color: rgba(255, 255, 255, .04); box-shadow: 0 6px 24px rgba(0, 0, 0, .18);
		-webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%); }
	.loc-eye { color: rgba(255, 255, 255, .8); }
	.loc-h, .loc-d h3 { color: #fff; }
	.loc-d p { color: rgba(255, 255, 255, .94); }
	.loc-d a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
	.loc-tab { background: rgba(255, 255, 255, .22); color: #fff; }
	.loc-tab:hover { background: rgba(255, 255, 255, .34); }
	.loc-tab.on { background: #009FE3; color: #fff; }
	.loc-tab:focus-visible, .loc-st:focus-visible { outline-color: #fff; }
	.loc-st { color: rgba(255, 255, 255, .65); }
	.loc-st:hover, .loc-st.on { color: #fff; }

	/* globe below the card, overflowing the section so its base lands in the footer */
	.loc-map { order: 2; position: relative; width: 100%; aspect-ratio: auto; height: calc(var(--loc-g) * 1.0391 - 28px); background: none; margin: 0; }
	.loc-globe { top: 0; left: 50%; right: auto; transform: translateX(-50%); width: var(--loc-g); height: auto; aspect-ratio: 765 / 932; }

	/* room in the footer for the globe's base (about 0.18 x globe width) */
	#locations + .ft { padding-top: calc(var(--loc-g) * 0.179 + 58px); }   /* only footers that follow the Locations section */
}