/*
	Theme Name: Kevin Crawford Consulting 2026
	Theme URI: https://kevincrawfordconsulting.com/
	Description: Child theme of Hello Elementor for the Kevin Crawford Consulting site (2026 refresh). Layout is built with Elementor; this theme carries only what the builder cannot express.
	Author: Sagon Phior
	Author URI: https://sagon-phior.com/
	Template: hello-elementor
	Version: 1.0.0
	Requires at least: 6.0
	Requires PHP: 7.4
	License: GNU General Public License v3 or later.
	License URI: https://www.gnu.org/licenses/gpl-3.0.html
	Text Domain: ccig-2026
*/

/*
 * Design tokens are defined as Elementor Global Colors and Global Fonts.
 * Do not hardcode brand hex values here - reference the globals in the
 * Elementor editor so a token change propagates site-wide.
 *
 * For the rare case where CSS must know a brand color (pseudo-elements,
 * scrollbar, selection), Elementor exposes each global as a CSS custom
 * property: var(--e-global-color-<id>). Those are mapped below once the
 * kit IDs are known, so this file still has a single source of truth.
 */

/* -------------------------------------------------------------------------
 * Jump-link scroll offset
 * The header is fixed, so anchored sections must not slide under it.
 * ---------------------------------------------------------------------- */
:root {
	--ccig-header-offset: 120px;
}

html {
	scroll-behavior: smooth;
}

/* Applies to any Elementor section/container given an anchor ID. */
[id]:not(body) {
	scroll-margin-top: var(--ccig-header-offset);
}

@media (max-width: 767px) {
	:root {
		--ccig-header-offset: 90px;
	}
}

/* Respect users who ask the OS to reduce motion. */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* -------------------------------------------------------------------------
 * Hamburger menu trigger
 * Lives in an Elementor HTML widget, so its internals can't be styled from
 * the builder. Colors reference the Elementor global palette.
 * ---------------------------------------------------------------------- */
.ccig-menu-toggle {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 7px;
	width: 54px;
	height: 42px;
	padding: 0 7px;
	border: 0;
	border-radius: 8px;
	background: rgba(217, 217, 217, 0.8);
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.ccig-menu-toggle:hover,
.ccig-menu-toggle:focus-visible {
	background: rgba(217, 217, 217, 0.95);
}

/* Hello's reset paints button:focus solid #c36 (0-1-1), which lights the
 * toggle crimson after a tap - and it keeps focus after the overlay
 * closes. Restate the toggle's own gray for pointer focus; keyboard
 * focus (:focus-visible) keeps the highlight and outline above. */
.ccig-menu-toggle:focus:not(:focus-visible) {
	background: rgba(217, 217, 217, 0.8);
	outline: none;
}

.ccig-menu-toggle:focus-visible {
	outline: 2px solid var(--e-global-color-9a8edda, #e5b36e);
	outline-offset: 3px;
}

.ccig-menu-toggle__bar {
	display: block;
	width: 100%;
	height: 4px;
	border-radius: 2px;
	background: var(--e-global-color-29c5403, #f9f9f9);
	transition: transform 0.25s ease, opacity 0.2s ease;
}

/* Open state: the header sits above the nav popup, so the burger itself
 * becomes the close control - a bare 28px X in the burger's spot, per the
 * Overlay Menu comp (20165:247). nav.js flips aria-expanded. */
.ccig-menu-toggle[aria-expanded="true"],
.ccig-menu-toggle[aria-expanded="true"]:focus:not(:focus-visible) {
	background: transparent;
}

.ccig-menu-toggle[aria-expanded="true"] .ccig-menu-toggle__bar {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 38px;
	height: 3px;
	margin: -1.5px 0 0 -19px;
}

.ccig-menu-toggle[aria-expanded="true"] .ccig-menu-toggle__bar:nth-child(1) {
	transform: rotate(45deg);
}

.ccig-menu-toggle[aria-expanded="true"] .ccig-menu-toggle__bar:nth-child(2) {
	opacity: 0;
}

.ccig-menu-toggle[aria-expanded="true"] .ccig-menu-toggle__bar:nth-child(3) {
	transform: rotate(-45deg);
}

/* Mobile Nav comp (148:42): a 58x44 dark plate multiplied over the photo,
 * kept behind the X when the menu is open. The plate is a pseudo-element so
 * the multiply blend doesn't darken the white bars too. */
@media (max-width: 767px) {
	.ccig-menu-toggle,
	.ccig-menu-toggle:hover,
	.ccig-menu-toggle:focus-visible,
	.ccig-menu-toggle:focus:not(:focus-visible),
	.ccig-menu-toggle[aria-expanded="true"],
	.ccig-menu-toggle[aria-expanded="true"]:focus:not(:focus-visible) {
		width: 58px;
		height: 44px;
		padding: 0 8px;
		gap: 7px;
		border-radius: 6px;
		background: transparent;
	}

	.ccig-menu-toggle::before {
		content: "";
		position: absolute;
		inset: 0;
		border-radius: 6px;
		background: #030202;
		opacity: 0.3;
		mix-blend-mode: multiply;
	}

	.ccig-menu-toggle__bar {
		position: relative;
		height: 3px;
	}

	.ccig-menu-toggle[aria-expanded="true"] .ccig-menu-toggle__bar {
		position: absolute;
		width: 22px;
		margin-left: -11px;
	}
}

/* The header must outrank the nav popup (Elementor's dialog sits at 9999)
 * so the logo plate and the burger/X stay on top of the overlay. */
.ccig-header.e-con {
	z-index: 10001;
}

/* Mobile comp: no logo while the menu is open. */
@media (max-width: 767px) {
	.ccig-menu-open .ccig-header__plate {
		visibility: hidden;
	}
}

/* The burger closes the overlay, so Elementor's own close button is
 * redundant - hidden, but kept in the DOM because nav.js clicks it. */
#elementor-popup-modal-3084 .dialog-close-button {
	display: none;
}

/* -------------------------------------------------------------------------
 * Nav overlay
 * The menu is a full-screen Elementor popup. Remove the list chrome the
 * widget adds so the links sit as a clean centered stack.
 * ---------------------------------------------------------------------- */
.ccig-nav-overlay .elementor-nav-menu--main .elementor-item {
	padding-inline: 0;
}

.ccig-nav-overlay .elementor-nav-menu--layout-vertical > ul > li {
	width: auto;
}

/* -------------------------------------------------------------------------
 * Footer
 * The link columns and legal lines live inside text-editor widgets, so their
 * internals can't be styled from the builder.
 * ---------------------------------------------------------------------- */
.ccig-footer-links {
	margin: 0;
	padding: 0;
	list-style: none;
	/* One list carries all nine links; multicol reflows it per breakpoint:
	 * the same 3x3 layout the old three widgets gave on desktop, a 5/4
	 * two-column split on phones. */
	columns: 3;
	/* Footer Desktop comp: 233px column pitch (193px column + 40px gap). */
	column-gap: 40px;
}

/* Bottom margins rather than `li + li` top margins: a top margin on the
 * first item of columns two and three would sink them below column one. */
.ccig-footer-links li {
	break-inside: avoid;
	margin: 0 0 14px;
}

/* The single menu widget replaces three content-sized ones; let it take the
 * room between the logo and badge columns so the columns spread the same. */
.ccig-footer-row .ccig-footer-menu {
	flex: 1 1 auto;
	max-width: 659px;
}

.ccig-footer-links a,
.ccig-footer-phone a,
.ccig-footer-legal a {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease;
}

.ccig-footer-links a:hover,
.ccig-footer-links a:focus-visible,
.ccig-footer-phone a:hover,
.ccig-footer-phone a:focus-visible,
.ccig-footer-legal a:hover,
.ccig-footer-legal a:focus-visible {
	color: var(--e-global-color-9a8edda, #e5b36e);
}

.ccig-footer-phone,
.ccig-footer-legal {
	margin: 0;
}

/* The LinkedIn mark sits on the dark field. Elementor renders the icon as an
 * inline SVG, so it takes `fill` rather than the widget's color control. */
.ccig-footer-social .elementor-social-icon {
	background: transparent;
	padding: 0;
}

.ccig-footer-social .elementor-social-icon svg {
	fill: var(--e-global-color-29c5403, #f9f9f9);
	transition: fill 0.2s ease;
}

.ccig-footer-social .elementor-social-icon:hover svg,
.ccig-footer-social .elementor-social-icon:focus-visible svg {
	fill: var(--e-global-color-9a8edda, #e5b36e);
}

/* Let the footer rows reflow before Elementor's mobile breakpoint, so the
 * link columns never squeeze on tablets and narrow laptops.
 *
 * Elementor ships `.e-con-boxed.e-flex { flex-wrap: nowrap }` (specificity
 * 0-2-0), so a single-class selector here would lose regardless of load
 * order. Match its specificity rather than reaching for !important. */
.ccig-footer-row.e-con {
	--flex-wrap: wrap;
	flex-wrap: wrap;
}

@media (max-width: 1024px) {
	.ccig-footer-row > .e-con,
	.ccig-footer-row > .elementor-widget {
		flex-basis: auto;
	}
}

@media (max-width: 767px) {
	/* Per the mobile comp the menu sits in two left-aligned columns at a
	 * smaller size, while everything around it is centred. */
	.ccig-footer-links {
		columns: 2;
		column-gap: 28px;
		font-size: 15px;
		font-weight: 400;
		text-align: left;
	}

	.ccig-footer-links li {
		margin-bottom: 10px;
	}

	.ccig-footer-row.e-con {
		justify-content: center;
		text-align: center;
	}

	.ccig-footer-row > .e-con-inner > .elementor-widget-text-editor,
	.ccig-footer-row > .elementor-widget-text-editor {
		width: 100%;
		flex: 1 1 100%;
	}

	.ccig-footer-phone,
	.ccig-footer-legal {
		text-align: center;
	}
}

/* -------------------------------------------------------------------------
 * Home page panels (RND03)
 * Built to the September 2026 RND03 comps (Figma GNEEqkuEoxcLb0Xm5V4556,
 * desktop frame 2:2, mobile 10090:226). Section backgrounds, gradients and
 * paddings live on the Elementor containers; this carries the type scale
 * and the pieces the builder can't express.
 *   H1 KCC  Poppins SemiBold 44/52      H2 KCC  Poppins SemiBold 32/46
 *   BD01    Poppins Regular 18/28 (-0.18px)
 *   Pull quote  Poppins SemiBold Italic 30/38 (-0.6px), attribution Light 20
 *   Rick Black #171A21 body copy on light panels, Middle Blue #58789F tiles
 * ---------------------------------------------------------------------- */

/* --- Shared type ------------------------------------------------------- */
.ccig-panel .ccig-h2,
.ccig-quoteband .ccig-quote {
	max-width: 100%;
}

/* Tag-qualified to outrank the kit's `.elementor-kit-7 h2` (0-1-1). */
h2.ccig-h1 {
	margin: 0;
	color: var(--e-global-color-29c5403, #f9f9f9);
	font-family: Poppins, Helvetica, Arial, sans-serif;
	font-size: clamp(32px, 2.55vw, 44px);
	font-weight: 600;
	line-height: 1.18;
	text-align: center;
}

h2.ccig-h1--gold {
	color: var(--e-global-color-9a8edda, #e5b36e);
}

.ccig-sub {
	margin: 12px 0 0;
	color: var(--e-global-color-29c5403, #f9f9f9);
	font-family: Poppins, Helvetica, Arial, sans-serif;
	font-size: 20px;
	font-weight: 700;
	line-height: 28px;
	text-align: center;
}

h2.ccig-h2 {
	margin: 0 0 23px;
	color: var(--e-global-color-secondary, #296195);
	font-family: Poppins, Helvetica, Arial, sans-serif;
	font-size: clamp(26px, 1.85vw, 32px);
	font-weight: 600;
	line-height: 1.44;
}

h2.ccig-h2--gold {
	color: var(--e-global-color-9a8edda, #e5b36e);
}

h2.ccig-h2--light {
	color: var(--e-global-color-29c5403, #f9f9f9);
}

h2.ccig-h2--center {
	text-align: center;
}

/* The contact headline is the one bold H2 in the comp (32/38). */
h2.ccig-h2--contact {
	font-weight: 700;
	line-height: 1.19;
	letter-spacing: -0.64px;
}

.ccig-body {
	margin: 0 0 18px;
	color: #171a21;
	font-family: Poppins, Helvetica, Arial, sans-serif;
	font-size: 18px;
	line-height: 28px;
	letter-spacing: -0.18px;
}

.ccig-body:last-child {
	margin-bottom: 0;
}

.ccig-body strong {
	font-weight: 700;
}

.ccig-body--light {
	color: var(--e-global-color-29c5403, #f9f9f9);
}

/* Mobile-only image bands. The mobile comp drops the full-bleed photo
 * behind these panels for a photo band above solid Midnight copy. */
.ccig-band {
	display: none;
}

/* --- Hero ---------------------------------------------------------------- */
.ccig-hero {
	position: relative;
}

/* Elementor serves the 2560w hero; large Retina/5K screens need more pixels
 * or the photo goes soft (#79), so swap in the full 3840w export there. */
@media (min-width: 1300px) and (min-resolution: 1.5dppx), (min-width: 2600px) {
	.ccig-hero.e-con {
		background-image: url("/wp-content/uploads/2026/10/CCIG_Hero-07A-3840.jpg") !important;
	}
}

/* The hero row is wider than the site measure, so it needs its own gutters -
 * the outer container is edge-to-edge for the background photo.
 *
 * A *boxed* Elementor container nests its children inside `.e-con-inner`, so
 * the flex row that actually lays out the copy and video is the inner
 * wrapper - styling the outer element only ever moves its single child. */
.ccig-hero__row.e-con {
	width: 100%;
	max-width: 100%;
	--content-width: 100%;
	/* The comp keeps 135px gutters at 1728w (~7.8vw). */
	padding-inline: clamp(40px, 7.8vw, 135px) clamp(40px, 4.3vw, 75px);
}

.ccig-hero__row > .e-con-inner {
	display: flex;
	flex-direction: row;
	/* Elementor drives wrap through --flex-wrap; set the variable too or the
	 * inline custom property wins and the video drops below the copy. */
	--flex-wrap: nowrap;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: flex-end;
	gap: 40px;
	width: 100%;
}

/* Let the copy column give way before the fixed-width video card does. */
.ccig-hero__row > .e-con-inner > .e-con:first-child {
	flex: 1 1 auto;
	min-width: 0;
	/* The CTA sits ~38px above the video card's bottom edge in the comp. */
	padding-bottom: 38px;
}

.ccig-hero__row > .e-con-inner > .e-con:last-child {
	flex: 0 0 auto;
}

/* Elementor fixes the video column at 445px (the comp's width at 1728w).
 * Scale it with the viewport so the copy column keeps its proportions.
 * Desktop only - below 900px the row wraps and Elementor's 100% mobile
 * width must win. */
@media (min-width: 901px) {
	.ccig-hero__row > .e-con-inner > .e-con:last-child {
		width: clamp(320px, 25.75vw, 445px);
	}
}

@media (max-width: 900px) {
	.ccig-hero__row > .e-con-inner {
		--flex-wrap: wrap;
		flex-wrap: wrap;
		gap: 26px;
	}
}

/* Tag-qualified so this outranks the kit's `.elementor-kit-* h1`. */
h1.ccig-hero__title {
	margin: 0 0 12px;
	color: var(--e-global-color-29c5403, #f9f9f9);
	font-family: Poppins, Helvetica, Arial, sans-serif;
	font-size: clamp(32px, 2.55vw, 44px);
	font-weight: 600;
	line-height: 1.18;
}

.ccig-hero__sub {
	max-width: 622px;
	margin: 0;
	color: var(--e-global-color-29c5403, #f9f9f9);
	font-family: Poppins, Helvetica, Arial, sans-serif;
	font-size: 18px;
	font-weight: 400;
	line-height: 28px;
	letter-spacing: -0.18px;
}

/* Hero inset video card (20165:215): 445x250, 1px Snow keyline. */
.ccig-hero__video {
	position: relative;
	display: block;
	max-width: clamp(320px, 25.75vw, 445px);
	margin-left: auto;
	border: 1px solid var(--e-global-color-29c5403, #f9f9f9);
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
	transition: transform 0.2s ease;
}

.ccig-hero__video img {
	display: block;
	width: 100%;
	height: auto;
}

/* Scrim so the live eyebrow/caption stay legible over the poster. */
.ccig-hero__video::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to bottom, rgba(15, 26, 43, 0.45), rgba(15, 26, 43, 0) 32%),
		linear-gradient(to top, rgba(15, 26, 43, 0.7), rgba(15, 26, 43, 0) 55%);
}

.ccig-hero__video-eyebrow,
.ccig-hero__video-caption,
.ccig-hero__video .ccig-play {
	z-index: 1;
}

.ccig-hero__video-eyebrow {
	position: absolute;
	top: 18px;
	left: 18px;
	color: #ffffff;
	font-family: Poppins, Helvetica, Arial, sans-serif;
	font-size: clamp(12px, 0.93vw, 16px);
	font-weight: 500;
	line-height: 16px;
	letter-spacing: 0.8px;
	text-transform: uppercase;
}

.ccig-hero__video-dot {
	color: var(--e-global-color-accent, #8ea1c7);
}

.ccig-hero__video-caption {
	position: absolute;
	left: 25px;
	right: 80px;
	bottom: 22px;
	color: #ffffff;
	font-family: Poppins, Helvetica, Arial, sans-serif;
}

.ccig-hero__video-caption strong {
	display: block;
	margin-bottom: 4px;
	font-size: clamp(19px, 1.62vw, 28px);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.02em;
	text-transform: uppercase;
}

.ccig-hero__video-caption em {
	display: block;
	overflow: hidden;
	font-size: clamp(14px, 1.16vw, 20px);
	font-style: italic;
	font-weight: 400;
	line-height: 1.2;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Hero variant of the play icon: 42px, bottom-right beside the caption. */
.ccig-hero__video .ccig-play--hero {
	left: auto;
	top: auto;
	right: 35px;
	bottom: 26px;
	width: 42px;
	height: 42px;
	transform: none;
}

.ccig-hero__video:hover,
.ccig-hero__video:focus-visible {
	transform: translateY(-2px);
}

/* --- Play icon ------------------------------------------------------------
 * The comp's Font Awesome circle-play (outline ring, solid triangle) at 70%
 * white, drawn from the SVG as a mask so one asset serves every size. */
.ccig-play {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 62px;
	height: 62px;
	transform: translate(-50%, -50%);
	background: #ffffff;
	opacity: 0.7;
	-webkit-mask: url("assets/img/circle-play.svg") center / contain no-repeat;
	mask: url("assets/img/circle-play.svg") center / contain no-repeat;
	pointer-events: none;
	transition: opacity 0.2s ease;
}

.ccig-play--md {
	width: 80px;
	height: 80px;
}

.ccig-play--lg {
	width: 154px;
	height: 154px;
}

/* --- Executives come to Kevin for three reasons (16048:196) -------------- */
.ccig-reasons {
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin: 70px 0 57px;
}

/* A quote band now splits the reasons from the closing copy, so each panel
 * ends or starts on the section padding alone. */
.ccig-reasons:last-child {
	margin-bottom: 0;
}

.ccig-panel--closing h2.ccig-closing {
	margin-top: 0;
}

.ccig-reason {
	position: relative;
	display: flex;
	min-height: 293px;
}

/* Text tile: Middle Blue with the slanted edge that overlaps the photo
 * (Figma path M0 0H633L586 293H0Z). */
.ccig-reason__text {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 54.3%;
	padding: 40px 110px 40px 69px;
	background: #58789f;
	clip-path: polygon(0 0, 100% 0, 92.57% 100%, 0 100%);
}

.ccig-reason__media {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 51.7%;
}

.ccig-reason__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Middle row mirrors: photo left carrying the slant, tile right. */
.ccig-reason--flip .ccig-reason__text {
	width: 54.2%;
	margin-left: auto;
	padding: 40px 30px 40px 138px;
	clip-path: none;
}

.ccig-reason--flip .ccig-reason__media {
	right: auto;
	left: 0;
	z-index: 2;
	width: 52.7%;
	clip-path: polygon(0 0, 100% 0, 92.4% 100%, 0 100%);
}

.ccig-reasons h3.ccig-reason__title {
	margin: 0;
	color: var(--e-global-color-9a8edda, #e5b36e);
	font-family: Poppins, Helvetica, Arial, sans-serif;
	font-size: 24px;
	font-weight: 600;
	line-height: 32px;
}

.ccig-reason__copy {
	margin: 0;
	color: var(--e-global-color-29c5403, #f9f9f9);
	font-family: Poppins, Helvetica, Arial, sans-serif;
	font-size: 18px;
	line-height: 28px;
	letter-spacing: -0.18px;
}

/* --- The Work Begins With the Relationship (20025:211) -------------------
 * Eight cards that reveal the kind of engagement each describes. Hover or
 * keyboard focus crossfades to the label over 500ms (Marker.io KC-1 / #51);
 * touch screens have no hover, so relationship-cards.js toggles
 * aria-pressed on tap there instead. */
.ccig-rcards {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 37px 23px;
	margin-top: 27px;
}

.ccig-rcard {
	position: relative;
	display: grid;
	place-items: center;
	min-height: 160px;
	padding: 19px 28px;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: var(--e-global-color-29c5403, #f9f9f9);
	font-family: Poppins, Helvetica, Arial, sans-serif;
	font-size: 18px;
	font-weight: 400;
	line-height: 28px;
	text-align: center;
	text-transform: none;
	white-space: normal;
	cursor: default;
}

/* Both card faces are pseudo-elements so their opacity (and the revealed
 * face's multiply blend) doesn't fade the text with them. */
.ccig-rcard::before,
.ccig-rcard::after {
	content: "";
	position: absolute;
	inset: 0;
	border: 1px solid var(--e-global-color-9a8edda, #e5b36e);
	border-radius: 6px;
	transition: opacity 0.5s ease;
	z-index: 0;
}

.ccig-rcard::before {
	background: var(--e-global-color-primary, #262941);
	opacity: 0.5;
}

.ccig-rcard::after {
	background:
		linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
		linear-gradient(179.5deg, #296195 1%, #262941 74%);
	opacity: 0;
	mix-blend-mode: multiply;
}

/* The text face sits in the card's grid cell; the label face covers the
 * whole card so it can crossfade (desktop) or drop as a curtain (touch).
 * Both sit above the pseudo-element faces - ::after comes later in paint
 * order and its 70% multiply otherwise dims the label (Marker.io KC-5 / #55). */
.ccig-rcard > span {
	position: relative;
	z-index: 1;
	transition: opacity 0.5s ease;
}

.ccig-rcard > .ccig-rcard__label {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 19px 28px;
	color: var(--e-global-color-9a8edda, #e5b36e);
	font-weight: 500;
	letter-spacing: 0.9px;
	opacity: 0;
}

/* Hello's reset paints button hover/focus solid crimson; restate ours. */
.ccig-rcard:hover,
.ccig-rcard:focus,
.ccig-rcard:active {
	background: transparent;
	color: var(--e-global-color-29c5403, #f9f9f9);
}

.ccig-rcard:focus-visible {
	outline: 2px solid var(--e-global-color-9a8edda, #e5b36e);
	outline-offset: 3px;
}

/* Revealed state. :hover is scoped to devices that can hover: touch
 * browsers leave :hover stuck on the last-tapped element, which would stop
 * a second tap from closing the card. */
.ccig-rcard:is(:focus-visible, [aria-pressed="true"])::before {
	opacity: 0;
}

.ccig-rcard:is(:focus-visible, [aria-pressed="true"])::after {
	opacity: 0.7;
}

.ccig-rcard:is(:focus-visible, [aria-pressed="true"]) .ccig-rcard__text {
	opacity: 0;
}

.ccig-rcard:is(:focus-visible, [aria-pressed="true"]) .ccig-rcard__label {
	opacity: 1;
}

@media (hover: hover) {
	.ccig-rcard:hover::before {
		opacity: 0;
	}

	.ccig-rcard:hover::after {
		opacity: 0.7;
	}

	.ccig-rcard:hover .ccig-rcard__text {
		opacity: 0;
	}

	.ccig-rcard:hover .ccig-rcard__label {
		opacity: 1;
	}
}

/* Touch screens tap to reveal, and the revealed face drops over the card
 * like a curtain instead of fading (Marker.io KC-6 / #56): the dark face
 * and its label are fully opaque but clipped away above the card, and the
 * clip opens top to bottom. */
@media (hover: none) {
	.ccig-rcard {
		cursor: pointer;
		overflow: hidden;
	}

	.ccig-rcard::after,
	.ccig-rcard > .ccig-rcard__label {
		clip-path: inset(0 0 100% 0);
		transition: clip-path 0.5s ease;
	}

	.ccig-rcard::after {
		opacity: 0.7;
	}

	.ccig-rcard > .ccig-rcard__label {
		opacity: 1;
	}

	.ccig-rcard::before {
		transition: none;
	}

	.ccig-rcard[aria-pressed="true"]::before {
		opacity: 0.5;
	}

	.ccig-rcard .ccig-rcard__text {
		transition: opacity 0.3s ease 0.15s;
	}

	.ccig-rcard[aria-pressed="true"]::after,
	.ccig-rcard[aria-pressed="true"] > .ccig-rcard__label {
		clip-path: inset(0 0 0 0);
	}
}

/* Phones: the cards become a one-at-a-time carousel (Marker.io KC-6 /
 * #56) that autoplays and steps on a sideways swipe (#78).
 * All eight share one grid cell; the script swaps is-active, and the
 * outgoing card stays on top (is-leaving) while it
 * rolls up like a curtain, bottom edge rising, over the next card. The
 * clip-path animation itself runs through the Web Animations API.
 * Clip insets carry 6px of slack so focus outlines aren't cut off. */
@media (max-width: 767px) {
	/* Vertical swipes scroll the page; the script takes sideways ones. */
	.ccig-rcards--carousel {
		grid-template-columns: 1fr;
		gap: 0;
		touch-action: pan-y;
	}

	.ccig-rcards--carousel .ccig-rcard {
		grid-area: 1 / 1;
		z-index: 0;
		clip-path: inset(-6px -6px 100% -6px);
	}

	.ccig-rcards--carousel .ccig-rcard.is-active {
		z-index: 1;
		clip-path: inset(-6px);
	}

	.ccig-rcards--carousel .ccig-rcard.is-leaving {
		z-index: 2;
		clip-path: inset(-6px);
	}

	/* Each card briefly shows its engagement label as it arrives, then fades
	 * to its sentence (#62). In the carousel the revealed face fades rather
	 * than dropping as a curtain, so the two can share one transition. */
	.ccig-rcards--carousel .ccig-rcard::after,
	.ccig-rcards--carousel .ccig-rcard > .ccig-rcard__label {
		clip-path: none;
		opacity: 0;
		transition: opacity 0.6s ease;
	}

	.ccig-rcards--carousel .ccig-rcard:is(.is-peek, [aria-pressed="true"])::after {
		opacity: 0.7;
	}

	.ccig-rcards--carousel .ccig-rcard:is(.is-peek, [aria-pressed="true"]) > .ccig-rcard__label {
		opacity: 1;
	}

	.ccig-rcards--carousel .ccig-rcard.is-peek .ccig-rcard__text {
		opacity: 0;
	}

	.ccig-rcarousel__nav {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 16px;
		margin-top: 20px;
	}

	.ccig-rcarousel__nav[hidden] {
		display: none;
	}

	.ccig-rcarousel__dots {
		display: flex;
		gap: 8px;
	}

	/* Hello's reset styles buttons crimson; these are restated in full. */
	.ccig-rcarousel__dot,
	.ccig-rcarousel__dot:hover,
	.ccig-rcarousel__dot:focus {
		width: 10px;
		height: 10px;
		padding: 0;
		border: 1px solid var(--e-global-color-9a8edda, #e5b36e);
		border-radius: 50%;
		background: transparent;
		cursor: pointer;
	}

	.ccig-rcarousel__dot[aria-current="true"] {
		background: var(--e-global-color-9a8edda, #e5b36e);
	}

	.ccig-rcarousel__dot:focus-visible {
		outline: 2px solid var(--e-global-color-9a8edda, #e5b36e);
		outline-offset: 2px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ccig-rcard,
	.ccig-rcard::before,
	.ccig-rcard::after,
	.ccig-rcard > span {
		transition: none;
	}
}

/* --- Quote bands --------------------------------------------------------- */
.ccig-quote {
	margin: 0;
	text-align: center;
}

.ccig-quote__text {
	margin: 0;
	color: var(--e-global-color-secondary, #296195);
	font-family: Poppins, Helvetica, Arial, sans-serif;
	font-size: clamp(22px, 1.74vw, 30px);
	font-style: italic;
	font-weight: 600;
	line-height: 1.27;
	letter-spacing: -0.02em;
}

.ccig-quote__by {
	margin-top: 16px;
	color: #171a21;
	font-family: Poppins, Helvetica, Arial, sans-serif;
	font-size: 20px;
	font-weight: 300;
}

/* --- He Has Walked the Path: portrait + copy ----------------------------- */
.ccig-why {
	display: grid;
	grid-template-columns: 223px minmax(0, 1fr);
	gap: 38px;
	align-items: start;
}

/* Tag-qualified so this outranks Elementor's `.elementor img` reset
 * (border:none; border-radius:0), which beats a lone class. */
.ccig-why img.ccig-why__portrait {
	width: 223px;
	height: 210px;
	border: 1px solid var(--e-global-color-29c5403, #f9f9f9);
	border-radius: 6px;
	object-fit: cover;
}

/* Align the panel's CTA with the copy column (223px portrait + 38px gap). */
.ccig-panel--why .elementor-widget-button.ccig-cta {
	margin-left: 261px;
}

/* --- Featured video + Videos & Podcasts CTA ------------------------------ */
.ccig-vhero {
	position: relative;
	display: block;
	max-width: 1200px;
	margin: 0 auto;
	line-height: 0;
}

.ccig-vhero img {
	width: 100%;
	height: auto;
}

/* Variant2 of the Kevin-Video component drops the play icon on hover. */
.ccig-vhero:hover .ccig-play,
.ccig-vhero:focus-visible .ccig-play {
	opacity: 0;
}

.ccig-video-blurb {
	max-width: 1196px;
	margin: 0 auto;
}

/* --- Video cards (Videos & Podcasts page) -------------------------------- */
.ccig-vgrid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 46px;
}

.ccig-vcard__link {
	color: inherit;
	text-decoration: none;
}

.ccig-vcard__thumb {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	line-height: 0;
}

/* YouTube's hqdefault is 4:3 letterboxed; crop it to the comp's 16:9. */
.ccig-vcard__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.ccig-vcard__link:hover .ccig-vcard__thumb img,
.ccig-vcard__link:focus-visible .ccig-vcard__thumb img {
	transform: scale(1.03);
}

.ccig-vcard__eyebrow {
	margin: 16px 0 0;
	color: var(--e-global-color-secondary, #296195);
	font-family: Poppins, Helvetica, Arial, sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 22px;
	text-transform: uppercase;
}

.ccig-vgrid h3.ccig-vcard__title {
	margin: 16px 0 12px;
	color: #000000;
	font-family: Poppins, Helvetica, Arial, sans-serif;
	font-size: 20px;
	font-weight: 700;
	line-height: 28px;
}

.ccig-vcard__eyebrow + h3.ccig-vcard__title {
	margin-top: 0;
}

.ccig-vcard__copy {
	margin: 0;
	color: #000000;
	font-family: Poppins, Helvetica, Arial, sans-serif;
	font-size: 16px;
	line-height: 22px;
}

@media (max-width: 1024px) {
	.ccig-rcards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ccig-reason__text {
		padding-right: 70px;
		padding-left: 40px;
	}

	.ccig-reason--flip .ccig-reason__text {
		padding-left: 90px;
	}
}

@media (max-width: 900px) {
	.ccig-why {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.ccig-panel--why .elementor-widget-button.ccig-cta {
		margin-left: 0;
	}

	.ccig-vgrid {
		grid-template-columns: 1fr;
	}
}

/* -------------------------------------------------------------------------
 * Case Studies grid
 * ---------------------------------------------------------------------- */
/* minmax(0, 1fr) rather than 1fr: grid items default to min-width:auto, so a
 * long unbroken heading like "CONSTRUCTION" would otherwise widen its column
 * and push the card past the grid's right edge. */
.ccig-cs-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 34px 60px;
}

.ccig-cs-card {
	display: grid;
	grid-template-columns: 250px minmax(0, 1fr);
	gap: 31px;
	/* The comp (18032:177) centres each card's text on its image. */
	align-items: center;
}

/* Each card is an <a> opening its case-study PDF; keep the text colors the
 * card's own, and give pointer feedback consistent with the hero video card. */
a.ccig-cs-card {
	color: inherit;
	text-decoration: none;
	transition: transform 0.2s ease;
}

a.ccig-cs-card:hover,
a.ccig-cs-card:focus-visible {
	transform: translateY(-2px);
}

.ccig-cs-card__media {
	overflow: hidden;
	border-radius: 2px;
	line-height: 0;
}

.ccig-cs-card__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 250 / 149;
	object-fit: cover;
}

.ccig-cs-card__eyebrow {
	margin: 0;
	color: var(--e-global-color-primary, #262941);
	font-family: Poppins, Helvetica, Arial, sans-serif;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: -0.19px;
	text-transform: uppercase;
}

/* The kit styles headings as `.elementor-kit-7 h2` (specificity 0-1-1), so a
 * bare class here would lose. Scoping to the card matches that weight. */
.ccig-cs-card h2.ccig-cs-card__industry {
	margin: 0 0 6px;
	color: var(--e-global-color-secondary, #296195);
	font-family: Poppins, Helvetica, Arial, sans-serif;
	font-size: clamp(19px, 1.7vw, 24px);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.19px;
	overflow-wrap: break-word;
}

.ccig-cs-card__summary {
	margin: 0;
	color: var(--e-global-color-primary, #262941);
	font-family: Poppins, Helvetica, Arial, sans-serif;
	font-size: 17px;
	font-weight: 400;
	/* Tightened from the comp's 26px (Marker.io KC-3 / #53). */
	line-height: 1.35;
}

.ccig-cs-card__chevron {
	color: var(--e-global-color-9a8edda, #e5b36e);
	font-size: 19px;
	white-space: nowrap;
}

@media (max-width: 1024px) {
	.ccig-cs-grid {
		grid-template-columns: 1fr;
		gap: 30px;
	}
}

@media (max-width: 600px) {
	.ccig-cs-card {
		grid-template-columns: 1fr;
		gap: 14px;
	}

	.ccig-cs-card__img {
		aspect-ratio: 16 / 9;
	}
}

/* eBook variant of the case-study card: the media is a portrait book cover,
 * shown at its natural ratio instead of the landscape crop. Text stays
 * top-aligned - centred on a tall cover it would float. */
.ccig-cs-card--ebook {
	align-items: start;
}

.ccig-cs-card--ebook .ccig-cs-card__img {
	aspect-ratio: auto;
}

@media (max-width: 600px) {
	.ccig-cs-card--ebook .ccig-cs-card__img {
		aspect-ratio: auto;
		width: 210px;
	}
}

/* Page banner shared by Case Studies and other secondary pages. */
.ccig-page-banner {
	position: relative;
}

/* -------------------------------------------------------------------------
 * Single Insights post
 * ---------------------------------------------------------------------- */
.ccig-post-eyebrow {
	margin: 0;
	font-family: Poppins, Helvetica, Arial, sans-serif;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 2px;
	text-align: center;
	text-transform: uppercase;
}

.ccig-post-eyebrow a {
	color: var(--e-global-color-9a8edda, #e5b36e);
	text-decoration: none;
	transition: color 0.2s ease;
}

.ccig-post-eyebrow a:hover,
.ccig-post-eyebrow a:focus-visible {
	color: var(--e-global-color-29c5403, #f9f9f9);
}

/* The date sits under the title; drop the widget's default list chrome. */
.ccig-post-meta .elementor-icon-list-items {
	justify-content: center;
}

.ccig-post-featured img {
	width: 100%;
	height: auto;
}

/* --- Post body typography ---------------------------------------------- *
 * The kit styles headings as `.elementor-kit-7 h2` (specificity 0-1-1), so
 * these are scoped through the content wrapper to take precedence.        */
.ccig-post-content .elementor-widget-container > * {
	margin-block: 0 1.15em;
}

.ccig-post-content .elementor-widget-container > *:last-child {
	margin-bottom: 0;
}

.ccig-post-content .elementor-widget-container h2,
.ccig-post-content .elementor-widget-container h3,
.ccig-post-content .elementor-widget-container h4 {
	color: var(--e-global-color-primary, #262941);
	font-family: Poppins, Helvetica, Arial, sans-serif;
	font-weight: 700;
	line-height: 1.25;
	margin-top: 1.6em;
}

.ccig-post-content .elementor-widget-container h2 {
	font-size: 30px;
}

.ccig-post-content .elementor-widget-container h3 {
	font-size: 24px;
}

.ccig-post-content .elementor-widget-container h4 {
	font-size: 20px;
}

.ccig-post-content .elementor-widget-container a {
	color: var(--e-global-color-secondary, #296195);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.ccig-post-content .elementor-widget-container blockquote {
	margin: 1.6em 0;
	padding-left: 24px;
	border-left: 3px solid var(--e-global-color-9a8edda, #e5b36e);
	font-size: 20px;
	font-style: italic;
	line-height: 1.5;
}

.ccig-post-content .elementor-widget-container ul,
.ccig-post-content .elementor-widget-container ol {
	padding-left: 1.3em;
}

.ccig-post-content .elementor-widget-container li {
	margin-bottom: 0.5em;
}

.ccig-post-content .elementor-widget-container img {
	max-width: 100%;
	height: auto;
	border-radius: 4px;
}

/* --- Post navigation ---------------------------------------------------- */
.ccig-post-nav .elementor-post-navigation__link a {
	text-decoration: none;
}

.ccig-post-back {
	margin: 0;
	font-family: Poppins, Helvetica, Arial, sans-serif;
	font-size: 16px;
	font-weight: 500;
}

.ccig-post-back a {
	color: var(--e-global-color-secondary, #296195);
	text-decoration: none;
	transition: color 0.2s ease;
}

.ccig-post-back a:hover,
.ccig-post-back a:focus-visible {
	color: var(--e-global-color-primary, #262941);
}

/* -------------------------------------------------------------------------
 * Contact form (Gravity Forms #2)
 * RND03 comp (10021:706-717): Snow fields with a 1px Lapis keyline, 56px
 * tall, laid out 3 + 2 + 1 (Gravity's own column spans), centred CTA.
 * ---------------------------------------------------------------------- */
.ccig-contact-form .gform_wrapper.gravity-theme .gform_fields {
	grid-column-gap: 20px;
	grid-row-gap: 26px;
}

.ccig-contact-form .gform_wrapper .gfield input[type="text"],
.ccig-contact-form .gform_wrapper .gfield input[type="email"],
.ccig-contact-form .gform_wrapper .gfield input[type="tel"],
.ccig-contact-form .gform_wrapper .gfield select,
.ccig-contact-form .gform_wrapper .gfield textarea {
	width: 100%;
	min-height: 56px;
	padding: 12px 28px;
	border: 1px solid var(--e-global-color-secondary, #296195);
	border-radius: 6px;
	background: var(--e-global-color-29c5403, #f9f9f9);
	color: #3e3e3e;
	font-family: Poppins, Helvetica, Arial, sans-serif;
	font-size: 18px;
}

.ccig-contact-form .gform_wrapper .gfield ::placeholder {
	color: #3e3e3e;
	opacity: 1;
}

/* Without appearance:none the browser draws its native menulist control
 * (gray gradient, shorter box) and ignores the padding/background above -
 * reset it so the select matches the text inputs, and draw our own chevron. */
.ccig-contact-form .gform_wrapper .gfield select {
	-webkit-appearance: none;
	appearance: none;
	padding-right: 56px;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23296195' stroke-width='2'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 24px center;
	cursor: pointer;
}

/* Gravity Forms sizes the message box itself (.gform_wrapper.gravity-theme
 * .gfield textarea.large { height: 288px }, specificity 0-4-1), which beats
 * any sane theme selector - important is the honest fix here. */
.ccig-contact-form .gform_wrapper .gfield textarea {
	height: 159px !important;
	min-height: 159px !important;
	padding-top: 18px;
	resize: vertical;
}

.ccig-contact-form .gform_wrapper .gfield input:focus,
.ccig-contact-form .gform_wrapper .gfield select:focus,
.ccig-contact-form .gform_wrapper .gfield textarea:focus {
	outline: 2px solid var(--e-global-color-9a8edda, #e5b36e);
	outline-offset: 1px;
}

/* The comp centres the submit button under the form. */
.ccig-contact-form .gform_wrapper .gform_footer {
	display: flex;
	justify-content: center;
	margin-top: 44px;
	padding: 0;
}

.ccig-contact-form .gform_wrapper .gform_footer input[type="submit"],
.ccig-contact-form .gform_wrapper .gform_footer button {
	min-width: 292px;
	min-height: 52px;
	padding: 12px 24px;
	border: 1px solid var(--e-global-color-accent, #8ea1c7);
	border-radius: 6px;
	background: var(--e-global-color-secondary, #296195);
	color: var(--e-global-color-29c5403, #f9f9f9);
	font-family: Poppins, Helvetica, Arial, sans-serif;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.5;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.ccig-contact-form .gform_wrapper .gform_footer input[type="submit"]:hover,
.ccig-contact-form .gform_wrapper .gform_footer input[type="submit"]:focus-visible,
.ccig-contact-form .gform_wrapper .gform_footer button:hover {
	background: var(--e-global-color-primary, #262941);
}

/* -------------------------------------------------------------------------
 * CTA buttons (16046:178): Lapis fill, Blue Heron keyline, 18px Medium caps;
 * hover fills Midnight. Colours and type are set on each Elementor button;
 * this holds the comp's minimum size.
 * ---------------------------------------------------------------------- */
.ccig-cta .elementor-button {
	min-width: 292px;
	min-height: 52px;
	justify-content: center;
	transition: background-color 0.2s ease;
}

.ccig-cta--videos .elementor-button {
	min-width: 300px;
}

/* -------------------------------------------------------------------------
 * The Crawford Method diagram
 * The circle/arrows are an SVG; the six labels are live text positioned
 * around it so they stay readable, translatable, and animatable later.
 * ---------------------------------------------------------------------- */
.ccig-method-diagram {
	display: flex;
	justify-content: center;
	/* Room for the labels that sit outside the circle - including the
	 * "Perception" and "Plan" labels above and below it. */
	padding: 44px 90px 52px;
}

.ccig-method-diagram__canvas {
	position: relative;
	width: 100%;
	max-width: 518px;
}

.ccig-method-diagram svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

/* Numbered nodes on the ring. */
.ccig-method-diagram__node {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 17%;
	aspect-ratio: 1;
	transform: translate(-50%, -50%);
	border: 1px solid var(--e-global-color-9a8edda, #e5b36e);
	border-radius: 50%;
	background: linear-gradient(160deg, #4a5878 0%, #262941 100%);
	color: var(--e-global-color-9a8edda, #e5b36e);
	font-family: Poppins, Helvetica, Arial, sans-serif;
	font-size: clamp(16px, 2.2vw, 26px);
	font-weight: 500;
	line-height: 1;
	/* Own stacking context so the ::before fill overlay can sit between the
	 * node's background and its number. */
	z-index: 0;
}

/* Orange fill the node crossfades to while the comet lights it up.
 * Gradients can't be animated directly, so this overlay fades in instead. */
.ccig-method-diagram__node::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: linear-gradient(160deg, #f2a35f 0%, #b25015 100%);
	opacity: 0;
	z-index: -1;
}

/* Stage names outside the ring. */
.ccig-method-diagram__label {
	position: absolute;
	transform: translate(-50%, -50%);
	color: var(--e-global-color-29c5403, #f9f9f9);
	font-family: Poppins, Helvetica, Arial, sans-serif;
	font-size: clamp(14px, 1.5vw, 22px);
	font-weight: 500;
	white-space: nowrap;
}

/* "The Crawford Method / A Continuous Cycle" lockup at the centre. */
.ccig-method-diagram__center {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	margin: 0;
	text-align: center;
	color: var(--e-global-color-29c5403, #f9f9f9);
}

.ccig-method-diagram__eyebrow,
.ccig-method-diagram__cycle {
	display: block;
	font-family: Poppins, Helvetica, Arial, sans-serif;
}

.ccig-method-diagram__eyebrow {
	font-size: clamp(15px, 1.8vw, 24px);
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.ccig-method-diagram__cycle {
	margin-top: 4px;
	font-size: clamp(14px, 1.6vw, 22px);
	font-weight: 400;
}

/* On narrow screens the comp drops the circle for a stacked list, so the
 * diagram is decorative there - the numbered steps below carry the content. */
@media (max-width: 767px) {
	.ccig-method-diagram {
		padding: 0 56px;
	}

	.ccig-method-diagram__label {
		font-size: 12px;
	}
}

/* --- Archived Crawford Method panel: steps + eyebrow (template only) ----- */
.ccig-steps {
	margin-top: 22px;
}

.ccig-step {
	margin-bottom: 22px;
}

.ccig-step:last-child {
	margin-bottom: 0;
}

.ccig-steps h3.ccig-step__title {
	margin: 0 0 3px;
	color: var(--e-global-color-9a8edda, #e5b36e);
	font-family: Poppins, Helvetica, Arial, sans-serif;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.4;
}

.ccig-step__copy {
	margin: 0;
	color: #ffffff;
	font-family: Poppins, Helvetica, Arial, sans-serif;
	font-size: 18px;
	line-height: 1.45;
}

.ccig-eyebrow-strong {
	margin: 0 0 4px;
	color: #ffffff;
	font-family: Poppins, Helvetica, Arial, sans-serif;
	font-size: 18px;
	font-weight: 700;
}

.ccig-body--gold {
	color: var(--e-global-color-9a8edda, #e5b36e);
}

.ccig-body--strong {
	font-weight: 700;
}

/* -------------------------------------------------------------------------
 * Method diagram animation
 * A 12s loop, started by method-diagram.js adding `is-inview` once the
 * diagram is on screen. A gold "comet" orbits the ring clockwise; each stage
 * it reaches lights up (node + label) on a 2s stagger driven by the --seq
 * index stamped on every node, label, and arrowhead. The arrowhead between
 * two stages pulses as the comet passes it, halfway through each hop.
 * ---------------------------------------------------------------------- */

/* The comet arc lives in the SVG and stays hidden until the loop starts. */
.ccig-method-comet {
	opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
	.ccig-method-diagram.is-inview .ccig-method-comet {
		opacity: 1;
		animation: ccig-method-orbit 12s linear infinite;
	}

	.ccig-method-diagram.is-inview .ccig-method-diagram__node {
		animation: ccig-method-node 12s linear infinite;
		animation-delay: calc(var(--seq, 0) * 2s - 0.5s);
	}

	.ccig-method-diagram.is-inview .ccig-method-diagram__node::before {
		animation: ccig-method-node-fill 12s linear infinite;
		animation-delay: calc(var(--seq, 0) * 2s - 0.5s);
	}

	.ccig-method-diagram.is-inview .ccig-method-diagram__label {
		animation: ccig-method-label 12s linear infinite;
		animation-delay: calc(var(--seq, 0) * 2s - 0.5s);
	}

	/* The chevron sits halfway between two stages, so it fires 1s after
	 * the stage it leaves from. Scale pulses the whole filtered group;
	 * the stroke colour pulses on the path inside it. */
	.ccig-method-diagram.is-inview .ccig-method-arrow {
		transform-box: fill-box;
		transform-origin: center;
		animation: ccig-method-arrow-pop 12s linear infinite;
		animation-delay: calc(var(--seq, 0) * 2s + 1s);
	}

	.ccig-method-diagram.is-inview .ccig-method-arrow path {
		animation: ccig-method-arrow-glow 12s linear infinite;
		animation-delay: calc(var(--seq, 0) * 2s + 1s);
	}
}

/* One full clockwise revolution; pathLength=360 makes the units degrees. */
@keyframes ccig-method-orbit {
	from {
		stroke-dashoffset: 0;
	}

	to {
		stroke-dashoffset: -360;
	}
}

/* Lit for roughly the 2s the comet spends at/leaving the stage. */
@keyframes ccig-method-node {
	0%,
	30%,
	100% {
		border-color: var(--e-global-color-9a8edda, #e5b36e);
		color: var(--e-global-color-9a8edda, #e5b36e);
		box-shadow: 0 0 0 0 rgba(237, 137, 54, 0);
	}

	3%,
	17% {
		border-color: #f6b078;
		color: #ffffff;
		box-shadow:
			0 0 0 3px rgba(237, 137, 54, 0.35),
			0 0 28px 4px rgba(237, 137, 54, 0.6);
	}
}

@keyframes ccig-method-node-fill {
	0%,
	30%,
	100% {
		opacity: 0;
	}

	3%,
	17% {
		opacity: 1;
	}
}

@keyframes ccig-method-label {
	0%,
	30%,
	100% {
		color: var(--e-global-color-29c5403, #f9f9f9);
		text-shadow: 0 0 0 rgba(237, 137, 54, 0);
	}

	3%,
	17% {
		color: #f09a5a;
		text-shadow: 0 0 14px rgba(237, 137, 54, 0.5);
	}
}

@keyframes ccig-method-arrow-pop {
	0%,
	16%,
	100% {
		transform: scale(1);
	}

	5% {
		transform: scale(1.25);
	}
}

@keyframes ccig-method-arrow-glow {
	0%,
	26%,
	100% {
		stroke: #8ea1c7;
	}

	5%,
	16% {
		stroke: #f09a5a;
	}
}

/* -------------------------------------------------------------------------
 * Contact panel on the dark gradient
 * ---------------------------------------------------------------------- */
.ccig-panel--contact .gform_wrapper .gfield_label,
.ccig-panel--contact .gform_wrapper .gform_required_legend {
	color: #ffffff;
}

.ccig-panel--contact .gform_wrapper .gform_validation_errors {
	color: var(--e-global-color-primary, #262941);
}

/* -------------------------------------------------------------------------
 * Mobile (RND03, spec = Home Mobile 10090:226)
 * The 393px comp restructures rather than merely reflowing: the hero and
 * the photo panels become an image band above solid copy, the reasons rows
 * stack photo-first, and the type steps down to 28/34 heads, 16/22 body.
 * ---------------------------------------------------------------------- */
@media (max-width: 767px) {

	/* --- Gutters ---------------------------------------------------------
	 * Elementor did not compile the padding_mobile values set on these
	 * containers, so the section gutters are declared here instead. */
	.ccig-panel.e-con,
	.ccig-quoteband.e-con {
		--padding-left: 20px;
		--padding-right: 20px;
	}

	.ccig-panel.e-con {
		--padding-top: 40px;
		--padding-bottom: 40px;
	}

	.ccig-quoteband.e-con {
		--padding-top: 40px;
		--padding-bottom: 40px;
		--min-height: 0;
		min-height: 0;
	}

	/* Inner boxed containers must not exceed the padded area.
	 *
	 * Elementor compiles `boxed_width` to `--content-width:<px>` with no
	 * mobile override, so the inner box stays desktop-wide inside a 393px
	 * viewport and the copy clips. Reset the variable where Elementor sets it. */
	.ccig-panel > .e-con-inner,
	.ccig-quoteband > .e-con-inner,
	.ccig-panel .e-con-inner,
	.ccig-quoteband .e-con-inner,
	.ccig-panel .e-con.e-con-boxed,
	.ccig-quoteband .e-con.e-con-boxed {
		--content-width: 100%;
		max-width: 100%;
	}

	/* Long words must not force a scrollbar. */
	.ccig-panel h2,
	.ccig-panel h3,
	.ccig-panel p,
	.ccig-quoteband p {
		overflow-wrap: break-word;
	}

	/* --- Type scale ------------------------------------------------------ */
	h2.ccig-h1,
	h2.ccig-h2 {
		font-size: 28px;
		line-height: 34px;
	}

	h2.ccig-h2 {
		margin-bottom: 20px;
	}

	.ccig-sub {
		font-size: 18px;
		line-height: 26px;
		text-align: left;
	}

	.ccig-body,
	.ccig-reason__copy,
	.ccig-vcard__copy {
		font-size: 16px;
		line-height: 22px;
	}

	.ccig-body {
		margin-bottom: 14px;
	}

	.ccig-quote,
	.ccig-quote__text {
		text-align: left;
	}

	.ccig-quote__text {
		font-size: 24px;
		line-height: 32px;
	}

	.ccig-quote__by {
		margin-top: 14px;
		font-size: 18px;
		text-align: left;
	}

	/* --- Hero ------------------------------------------------------------
	 * Photo band on top, then the copy centred on the navy the band fades
	 * into, then the video card full width. */
	.ccig-hero.e-con {
		--min-height: 0;
		min-height: 0;
		position: relative;
		background-image: none !important;
		/* The band's bottom edge is #020d29; the copy block continues it. */
		background-color: #020d29 !important;
		--padding-top: 85vw;
	}

	.ccig-hero.e-con::before {
		content: "";
		position: absolute;
		inset: 0 0 auto 0;
		/* 1150/1179 image ratio - the band tracks the viewport width. */
		height: 97.54vw;
		background-image: url("/wp-content/uploads/2026/10/CCIG_Hero-Mobile-05A.jpg");
		background-size: 100% auto;
		background-position: center top;
		background-repeat: no-repeat;
	}

	.ccig-hero__row.e-con {
		position: relative;
		z-index: 1;
		--padding-left: 20px;
		--padding-right: 20px;
		padding-inline: 20px;
	}

	.ccig-hero__row > .e-con-inner {
		gap: 36px;
	}

	.ccig-hero__row > .e-con-inner > .e-con:first-child {
		align-items: center;
		padding-bottom: 20px;
		text-align: center;
	}

	h1.ccig-hero__title {
		font-size: 28px;
		line-height: 34px;
	}

	.ccig-hero__sub {
		font-size: 16px;
		line-height: 22px;
	}

	.ccig-hero__video {
		margin-left: 0;
		max-width: 100%;
	}

	/* --- CTA buttons: 225x40 at 14px, centred ----------------------------- */
	.ccig-cta .elementor-button,
	.ccig-cta--videos .elementor-button {
		min-width: 225px;
		min-height: 40px;
		padding: 9px 16px;
		font-size: 14px;
	}

	/* --- Photo panels: image band + solid Midnight copy -------------------
	 * Elementor's background image sits on the container itself; drop it
	 * and show the band <img> carried in the panel's HTML widget. */
	.ccig-panel--photo.e-con {
		background-image: none !important;
		background-color: var(--e-global-color-primary, #262941) !important;
	}

	.ccig-panel--photo.e-con::before,
	.ccig-panel--photo > .elementor-background-video-container,
	.ccig-panel--photo > .elementor-background-overlay {
		display: none;
	}

	/* Bleed out through the panel gutter (20px) and the inner container's
	 * default 10px padding to the viewport edges. */
	img.ccig-band,
	.ccig-why img.ccig-why__portrait {
		display: block;
		width: calc(100% + 60px);
		max-width: none;
		height: 250px;
		margin: -50px -30px 32px;
		border: 0;
		border-radius: 0;
		object-fit: cover;
	}

	/* --- Reasons: photo first, slanted bottom edge, tile beneath ---------- */
	.ccig-reasons {
		gap: 28px;
		margin: 40px 0 48px;
	}

	.ccig-reason {
		flex-direction: column;
		min-height: 0;
	}

	.ccig-reason__media,
	.ccig-reason--flip .ccig-reason__media {
		position: relative;
		inset: auto;
		z-index: 2;
		order: -1;
		width: 100%;
		height: auto;
		aspect-ratio: 340 / 250;
		clip-path: polygon(0 0, 100% 0, 100% 100%, 0 89%);
	}

	.ccig-reason__text,
	.ccig-reason--flip .ccig-reason__text {
		width: 100%;
		margin: -28px 0 0;
		padding: 52px 22px 34px;
		clip-path: none;
	}

	/* --- Relationship cards: one column ------------------------------------ */
	.ccig-rcards {
		grid-template-columns: 1fr;
		gap: 16px;
		margin-top: 28px;
	}

	.ccig-panel--relationship h2.ccig-h1,
	.ccig-panel--relationship .ccig-sub,
	.ccig-panel--reasons .ccig-closing {
		text-align: left;
	}

	/* --- He Has Walked: the portrait is the band --------------------------- */
	.ccig-why {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.ccig-why img.ccig-why__portrait {
		object-position: center 30%;
	}

	/* --- Video cards ------------------------------------------------------- */
	.ccig-vgrid {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.ccig-play--lg {
		width: 64px;
		height: 64px;
	}

	/* --- Contact form: every field full width ----------------------------- */
	/* Legacy sitewide custom CSS (written for the old popup form) forces
	 * every form's field list to display:block !important under 687px, which
	 * ignores the row gap and stacks the fields edge to edge (#63). */
	.ccig-contact-form .gform_wrapper.gravity-theme .gform_fields {
		display: grid !important;
		grid-template-columns: 1fr;
		grid-row-gap: 16px;
	}

	.ccig-contact-form .gform_wrapper.gravity-theme .gfield {
		grid-column: 1 / -1;
	}

	.ccig-contact-form .gform_wrapper .gfield input[type="text"],
	.ccig-contact-form .gform_wrapper .gfield input[type="email"],
	.ccig-contact-form .gform_wrapper .gfield input[type="tel"],
	.ccig-contact-form .gform_wrapper .gfield select,
	.ccig-contact-form .gform_wrapper .gfield textarea {
		/* 16px keeps iOS from zooming the viewport on focus. */
		padding-inline: 20px;
		font-size: 16px;
	}

	.ccig-contact-form .gform_wrapper .gfield textarea {
		height: 287px !important;
		min-height: 287px !important;
	}

	.ccig-contact-form .gform_wrapper .gform_footer {
		margin-top: 28px;
	}

	.ccig-contact-form .gform_wrapper .gform_footer input[type="submit"],
	.ccig-contact-form .gform_wrapper .gform_footer button {
		min-width: 261px;
		min-height: 46px;
		font-size: 16px;
	}

	/* --- Archived Crawford Method panel (template only) --------------------
	 * Kept so the saved "Crawford Method (pre-RND03)" template still renders
	 * if re-inserted; removal is a pre-launch decision (#50). */
	.ccig-method-diagram {
		padding: 26px 56px 34px;
	}

	.ccig-method-diagram__canvas > .ccig-method-diagram__label:nth-child(4) {
		transform: translate(-50%, -50%) translateY(-8px);
	}

	.ccig-method-diagram__canvas > .ccig-method-diagram__label:nth-child(6) {
		transform: translate(-50%, -50%) translate(6px, -6px);
	}

	.ccig-method-diagram__canvas > .ccig-method-diagram__label:nth-child(8) {
		transform: translate(-50%, -50%) translate(6px, 6px);
	}

	.ccig-method-diagram__canvas > .ccig-method-diagram__label:nth-child(10) {
		transform: translate(-50%, -50%) translateY(8px);
	}

	.ccig-method-diagram__canvas > .ccig-method-diagram__label:nth-child(12) {
		transform: translate(-50%, -50%) translate(-6px, 6px);
	}

	.ccig-method-diagram__canvas > .ccig-method-diagram__label:nth-child(14) {
		transform: translate(-50%, -50%) translate(-6px, -6px);
	}

	.ccig-steps h3.ccig-step__title {
		font-size: 16px;
	}
}

/* Tablet: keep the two-column pieces from squeezing before they stack. */
@media (min-width: 768px) and (max-width: 1024px) {
	.ccig-why {
		grid-template-columns: 180px minmax(0, 1fr);
	}

	.ccig-why img.ccig-why__portrait {
		width: 180px;
		height: auto;
		aspect-ratio: 223 / 210;
	}

	.ccig-panel--why .elementor-widget-button.ccig-cta {
		margin-left: 218px;
	}

	.ccig-vgrid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ccig-method-diagram {
		padding-inline: 60px;
	}
}

/* -------------------------------------------------------------------------
 * Secondary-page banners on mobile
 * The header is absolutely positioned, so banner copy must clear the logo
 * plate and hamburger rather than sliding under them.
 * ---------------------------------------------------------------------- */
/* Banner title (18032:213): 32px, 0.64px tracking, soft drop shadow. The
 * shadow is also set on each heading widget; this covers any banner built
 * without it. */
.ccig-page-banner .elementor-heading-title {
	text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}

@media (max-width: 767px) {
	.ccig-page-banner.e-con {
		--padding-top: 132px;
		--padding-bottom: 36px;
		--padding-left: 20px;
		--padding-right: 20px;
	}

	.ccig-page-banner .elementor-heading-title {
		font-size: 26px;
		line-height: 1.2;
	}

	.ccig-post-eyebrow {
		font-size: 12px;
		letter-spacing: 1.6px;
	}
}

/* -------------------------------------------------------------------------
 * Insights pagination (loop grid, 12 per page)
 * Hello's reset colours links crimson; restate them in the palette.
 * ---------------------------------------------------------------------- */
.elementor-pagination {
	margin: 48px 0 96px;
	font-family: Poppins, Helvetica, Arial, sans-serif;
	font-size: 18px;
	font-weight: 500;
}

.elementor-pagination .page-numbers {
	margin: 0 6px;
	color: var(--e-global-color-secondary, #296195);
	text-decoration: none;
}

.elementor-pagination a.page-numbers:hover,
.elementor-pagination a.page-numbers:focus-visible {
	color: var(--e-global-color-primary, #262941);
	text-decoration: underline;
}

.elementor-pagination .page-numbers.current {
	color: var(--e-global-color-primary, #262941);
	font-weight: 700;
}

/* Case Studies and Insights are parked until their content is ready (#76).
 * Remove the class from the menu items / footer links to bring them back. */
.ccig-hidden {
	display: none !important;
}