/*
Theme Name: Rogers Machinery
Theme URI:
Author: Pilot Digital
Author URI: https://pilotdigital.com
Description: FSE child theme of Pilot Mercury Atlas for Rogers Machinery Company. Forked from Pilot FSE 2026 and re-skinned to the Rogers homepage + blog mockups (design/). Design tokens live as CSS variables in :root here; legacy Pilot slugs (navy, coral, aqua, yellow...) are aliased to Rogers brand colors so the inherited component CSS re-skins automatically.
Template: pilot-mercury-atlas
Tags: full-site-editing
Text Domain: rogers-machinery
Requires at least: 6.5
Requires PHP: 8.0
Version: 0.1.0

License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/*--------------------------------------------------------------
# Design tokens

All design colors live here as CSS custom properties. Editor-exposed
swatches are ALSO registered in theme.json settings.color.palette;
their resolved values come through the --wp--preset--color--<slug>
overrides declared below.

Token values are populated in task #4 (theme.json + token population).
This scaffold leaves the :root block intentionally minimal so the
downstream populate pass can drop in the locked values cleanly.
--------------------------------------------------------------*/

:root {

	/* ---- neutrals scale (Figma neutrals panel; --neutral-300 and --neutral-700
	 * values are live-site CSS overrides of the Figma values; no --neutral-400
	 * step exists in the design) ---- */
	--neutral-100: #F8F8F8;
	--neutral-200: #E5E5E5;
	--neutral-300: #C2C2C2;
	--neutral-500: #8B9093;
	--neutral-600: #585959;
	--neutral-700: #767A7D;
	--neutral-800: #3B3838;


	/* ---- Rogers brand colours (Branded Colors Quick Ref.docx + sampled from
	 * the mockups). Palette-backed slugs (blue, dark-blue, orange, light-grey,
	 * dark-grey, grey, off-white) are emitted by theme.json; these --rm-* tokens
	 * are for internal CSS that needs states the palette doesn't carry. ---- */
	--rm-blue:         #28ACE2;
	--rm-blue-hover:   #3399CC;  /* "Contact Us" utility button in the mockup */
	--rm-dark-blue:    #004861;
	--rm-dark-blue-2:  #00303F;  /* deeper shade for hovers / hero gradients */
	--rm-orange:       #F6861F;
	--rm-orange-hover: #D9700F;
	--rm-card-border:  #000000;  /* 1px card outlines */
	--rm-hero-overlay: rgba(0, 0, 0, 0.5);  /* PSD 'Text Box background': #000 @ 50% */

	/* ---- legacy Pilot palette slugs, re-pointed at Rogers colours. These are
	 * NOT in the theme.json palette any more, so WP doesn't emit them; the
	 * inherited component CSS (and parent styles) still reference them. ---- */
	--wp--preset--color--navy:       var(--rm-dark-blue);
	--wp--preset--color--yellow:     var(--rm-orange);
	--wp--preset--color--coral:      var(--rm-orange);
	--wp--preset--color--aqua:       var(--rm-blue);
	--wp--preset--color--aqua-light: #E3F4FB;


	/* ---- other design (base) colors NOT in the palette and NOT in the neutrals.
	 * These are design-system colors the theme uses internally (e.g.
	 * yellow-light and coral-light for accent states; blue and coral-dark are
	 * now the vivid-cyan-blue / vivid-red presets). Intentionally not exposed in the editor
	 * color picker. Values are the live-site-canonical version where the live
	 * site defines a value, else the Figma value. ---- */
	--color-blue-dark:    var(--rm-blue-hover);
	--color-navy-dark:    var(--rm-dark-blue-2);
	--color-yellow-light: #FDD3AB;
	--color-coral-light:  #FDD3AB;
	--color-aqua-2:       #E3F4FB;
	--color-aqua-dark:    var(--rm-dark-blue);

	/* ---- preset slugs referenced by theme.json / parent styles but not in the editor palette (folded in from the retired wp-preset-overrides.css) ---- */
	--wp--preset--color--navy-dark: var(--color-navy-dark);

	/* ---- semantic colour aliases (standardized scheme) — three families (primary, secondary,
	 * primary-text), each with dark / light / action. Full preset namespace so each also backs a
	 * has-<slug>-color class; every value sources the canonical colorSet (colorset/child-colorset.html).
	 * Replaces the old --wp--preset--color--primary/secondary presets and the bare --primary/--secondary. ---- */
	--wp--preset--color--primary-dark:        var(--color-navy-dark);
	--wp--preset--color--primary-light:       var(--wp--preset--color--navy);
	--wp--preset--color--primary-action:      var(--wp--preset--color--coral);
	--wp--preset--color--secondary-dark:      var(--color-aqua-dark);
	--wp--preset--color--secondary-light:     var(--wp--preset--color--aqua-light);
	--wp--preset--color--secondary-action:    var(--wp--preset--color--orange);
	--wp--preset--color--primary-text-dark:   var(--color-navy-dark);
	--wp--preset--color--primary-text-light:  var(--wp--preset--color--white);
	--wp--preset--color--primary-text-action: var(--wp--preset--color--vivid-cyan-blue);

	/* breadcrumb compass accent needle (2nd colour of the 2-tone home icon;
	 * the ring/lower needle follow currentColor). Default = brand coral. */
	--compass-comp-color: var(--wp--preset--color--coral);


	/* ---- spacing tokens (Figma spacing/scale; matches theme.json settings.spacing.spacingSizes slugs) ---- */
	--spacing-tiny:     8px;
	--spacing-x-small:  16px;
	--spacing-small:    24px;
	--spacing-regular:  clamp(24px, 4vw, 48px);
	--spacing-large:    clamp(32px, 6vw, 72px);
	--spacing-x-large:  clamp(48px, 8vw, 96px);
	--spacing-xx-large: clamp(64px, 10vw, 140px);


	/* ---- font-family tokens (match theme.json fontFamilies; declared here so internal CSS can reference by semantic name instead of --wp--preset--font-family--<slug>) ---- */
	/* PLACEHOLDER: brand font TBD. Swap the theme.json fontFamilies (heading /
	 * body / display) and these tokens together when the font is chosen. */
	--font-heading:    var(--wp--preset--font-family--heading, Arial, Helvetica, sans-serif);
	--font-body:       var(--wp--preset--font-family--body, Arial, Helvetica, sans-serif);
	--font-display:    var(--wp--preset--font-family--display, 'Arial Black', sans-serif);
	--font-monospace:  ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Courier New', monospace;


	/* ---- WP preset-variable overrides (for non-palette slugs) live in
	 * `assets/css/wp-preset-overrides.css`, enqueued by functions.php. Keeping
	 * them out of this file so the design-token block stays easy to scan. ---- */

}

/*--------------------------------------------------------------
# Global / reset
--------------------------------------------------------------*/

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/*--------------------------------------------------------------
# Block style visuals

Visual CSS for each registered block style. The register_block_style()
declarations live in inc/block-styles.php. CSS is populated in task #5.
--------------------------------------------------------------*/

/* ---- headings — MOVED TO PARENT (2026-07-28) ----
 * core/heading styles now live in pilot-mercury-atlas/style.css:
 * redline · plus · with-line (with-line adopted from jpg). */


/* ---- paragraph "like heading" overrides ----
 * The like-h1/h2/h3 paragraph styles are REGISTERED + given a default look in
 * the parent (sanchez + parent size presets). Here the child overrides
 * font-family + metrics so they match THIS theme's actual headings
 * (Gilroy 900 for h1, Bold 700 for h2, Medium 500 for h3, the clamp
 * sizes from theme.json styles.elements.h1/h2/h3). */
p.is-style-like-h1,
p.is-style-like-h2,
p.is-style-like-h3 {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 900;
	letter-spacing: -0.02em;
}
p.is-style-like-h1 { font-size: clamp(55px, 6vw, 80px); line-height: 1.125; }
p.is-style-like-h2 { font-size: clamp(32px, 4vw, 54px); line-height: 1.125; font-weight: 700; }
p.is-style-like-h3 { font-size: clamp(22px, 3.5vw, 40px); line-height: 1.125; font-weight: 500; }


/* ---- Consecutive-paragraph rhythm (child) ----
 * The child sets a LARGE global blockGap (clamp 2rem-3.5rem), which WP applies as
 * margin-block-start on every sibling via a zero-specificity `:where(...) > * + *`
 * rule. For a RUN of body content that reads as too much air. Tighten the gap between
 * adjacent body items where a <p> is involved: a <p> after a <p>, a <ul>/<ol> after a
 * <p>, or a <p> after a <ul>/<ol> (list<->list pairs are left alone). Scoped to a <p>
 * that lives in a group whose parent is another group, a column, OR the post-content
 * wrapper (.entry-content) — i.e. the top-level content groups too, which is where
 * most paragraph runs actually sit. Still NOT site-wide (bare <p> runs directly in
 * entry-content, or elsewhere, are untouched). Our (0,2,2) selectors override the
 * zero-specificity :where() layout gap. `margin-block-start` value is a starting point
 * — tune to taste. theme.json cannot express an adjacent-sibling selector, so it lives here. */
:is(.wp-block-group, .wp-block-column, .entry-content) > .wp-block-group > p + :is(p, ul, ol),
:is(.wp-block-group, .wp-block-column, .entry-content) > .wp-block-group > :is(ul, ol) + p {
	margin-block-start: 1rem;
}

/* ---- Heading-to-body rhythm (child) ----
 * Same nested-group/column scope as the run rule above, but for a <p>/<ul>/<ol>
 * that directly FOLLOWS a heading (h1-h6). Kept a SEPARATE rule so its gap tunes
 * independently — 1.2rem, a touch more than the 1rem run gap, so a heading stays
 * tied to its copy without the full blockGap air. Same (0,2,2) specificity wins
 * over the :where() layout gap. */
:is(.wp-block-group, .wp-block-column, .entry-content) > .wp-block-group > :is(h1, h2, h3, h4, h5, h6) + :is(p, ul, ol) {
	margin-block-start: 1.2rem;
}


/* ---- buttons -- MOVED TO PARENT (2026-07-27): secondary / ma-outline / arrow-link / icon-arrow / icon-phone / icon-email now live in pilot-mercury-atlas/style.css ---- */


/* ---- lists — MOVED TO PARENT (2026-07-28) ----
 * core/list styles now live in pilot-mercury-atlas/style.css, renamed:
 * checkmark · plus · shield · dont · no-bullet
 * (was checkmark-list / sounder-plus / sounder-shield / sounder-dont). */


/* ---- blockquote block styles — the site's 4 quote styles ----
 *   Default  · theme.json base (navy 4px left border) — no class needed
 *   Simple   · is-style-simple        — borderless, plain
 *   Breakout · is-style-breakout-quote — yellow-triangle decoration
 *   Fancy    · is-style-fancy-quote-bg — pale yellow-circle decoration
 *
 * Breakout + Fancy carry a brand PNG (assets/images/) whose position follows
 * the quote's text alignment (core's has-text-align-left|center|right). That
 * absorbs the two legacy variants that were never ported as classes:
 *   legacy .fancy-quote-bg.reversed   => Fancy + text-align right
 *   legacy .fancy-quote-bg.new-home-quote => Fancy + text-align center
 * The decoration sits OPPOSITE the text edge (matching the legacy default +
 * .reversed), so the quote copy never fights the graphic for the same space.
 */

/* --- Simple: borderless plain quote --- */
.wp-block-quote.is-style-simple {
	border: none;
	padding-left: 0;
	font-family: var(--font-body);
	font-size: 20px;
	font-style: normal;
	line-height: 1.5;
	color: var(--wp--preset--color--navy);
	max-width: 60ch;
}
.wp-block-quote.is-style-simple cite {
	display: block;
	margin-top: 0.75rem;
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 15px;
	font-style: normal;
	color: var(--wp--preset--color--navy);
}

/* --- Breakout: fluid italic callout over a yellow triangle --- */
.wp-block-quote.is-style-breakout-quote {
	position: relative;
	max-width: 1200px;
	margin-inline: auto;
	padding: var(--spacing-regular) var(--spacing-large);
	font-size: calc(1.25rem + 0.5vw);
	font-style: italic;
	font-family: var(--font-body);
	color: var(--wp--preset--color--navy);
	border: none;
	z-index: 0;
}
.wp-block-quote.is-style-breakout-quote::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("assets/images/yellow-triangle.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: auto 82%;
	z-index: -1;
	pointer-events: none;
}
/* alignment-driven decoration position (default = centered) */
.wp-block-quote.is-style-breakout-quote.has-text-align-left::before   { background-position: left center; }
.wp-block-quote.is-style-breakout-quote.has-text-align-center::before  { background-position: center; }
.wp-block-quote.is-style-breakout-quote.has-text-align-right::before   { background-position: right center; }

/* --- Fancy: large italic quote balanced by a pale yellow circle --- */
.wp-block-quote.is-style-fancy-quote-bg {
	position: relative;
	padding: var(--spacing-large);
	font-family: var(--font-body);
	font-size: 30px;
	font-style: italic;
	line-height: 1.48;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--navy);
	border: none;
	z-index: 0;
}
.wp-block-quote.is-style-fancy-quote-bg::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("assets/images/yellow-circle.png");
	background-repeat: no-repeat;
	background-position: right center;
	background-size: contain; /* scales the circle to fit the box — never clips, no min-height needed */
	z-index: -1;
	pointer-events: none;
}
/* decoration sits opposite the text edge; centered text -> centered circle */
.wp-block-quote.is-style-fancy-quote-bg.has-text-align-left::before   { background-position: right center; }
.wp-block-quote.is-style-fancy-quote-bg.has-text-align-center::before { background-position: center; }
.wp-block-quote.is-style-fancy-quote-bg.has-text-align-right::before  { background-position: left center; }

.wp-block-quote.is-style-fancy-quote-bg cite {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 16px;
	font-style: normal;
	letter-spacing: -0.01em;
}
.has-navy-background-color .wp-block-quote.is-style-fancy-quote-bg,
.has-navy-dark-background-color .wp-block-quote.is-style-fancy-quote-bg {
	color: var(--wp--preset--color--aqua-light);
}
.has-navy-background-color .wp-block-quote.is-style-fancy-quote-bg cite,
.has-navy-dark-background-color .wp-block-quote.is-style-fancy-quote-bg cite {
	color: var(--wp--preset--color--yellow);
}


/* ---- table: is-style-stripes (core WP style, live-site override ported)
 * WordPress core registers `is-style-stripes` on core/table by default
 * (zebra-striped rows). The old live-site CSS customized its appearance;
 * we port those three rules here to avoid visual regression on existing
 * striped tables when the child theme activates. ---- */
.wp-block-table.is-style-stripes {
	border-bottom: 0;
}
.wp-block-table.is-style-stripes thead {
	border-bottom: 3px solid var(--wp--preset--color--navy);
}
.wp-block-table.is-style-stripes thead th {
	background: none;
}


/* ---- links (paragraph arrow) -- RETIRED 2026-07-27: superseded by parent a.is-style-arrow-link (arrow class on the <a>) ---- */

/*--------------------------------------------------------------
# Block-specific overrides

Additional styling that doesn't fit into theme.json (e.g. pseudo-
elements, complex selectors, responsive behavior).
--------------------------------------------------------------*/


/* ---- Responsive body size — reduce below the tablet breakpoint (2026-07-29) ----
 * theme.json sets the fluid body size clamp(1rem … 1.1875rem) = 16px → 19px.
 * Below 768px we pin a smaller flat size for mobile readability. Adjust the
 * value during the typography review. */
@media (max-width: 767.98px) {
	body {
		font-size: 16px;
	}
}


/*--------------------------------------------------------------
# Services grid (.services-wrapper)  — ported from legacy child

Pulled from the legacy child theme `pilotdigital-2018` for the block-
content grouping example on /services/analytics-consulting/. Sources:
  · style.css "Services Grid" block + its responsive @media fragments
  · new-home.css service-icon ::before data-URIs
Faithful port; only adaptation is legacy var(--coral) ->
var(--wp--preset--color--coral). Prune/rename during the later polish.
--------------------------------------------------------------*/
.services-wrapper {
  margin-top: 3rem;
  margin-bottom: 8.875rem;
}

.services-wrapper .search-engine-optimization-wrapper,
.services-wrapper .paid-search-wrapper,
.services-wrapper .web-dev-wrapper,
.services-wrapper .analytics-wrapper {
  width: 50%;
  max-height: 100%;
}

.services-wrapper .services-row-1 {
  margin-bottom: .5rem;
}

.services-wrapper .services-row-2 .web-dev-wrapper .wp-block-cover__image-background {
  left: -9px !important;
}

.services-wrapper .optimize-content,
.services-wrapper .paid-content,
.services-wrapper .web-dev-content,
.services-wrapper .analytics-content {
  padding: 1rem;
}

.services-wrapper h3 {
  font-size: 1.25rem;
  max-height: 440px;
  margin-top: 0px;
  position: relative;
  display: inline-block;
}

.services-wrapper h3 a {
  position: relative;
  display: inline-block;
}

.services-wrapper h3 a::after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 3px;
  bottom: -3px;
  left: 0;
  background-color: var(--wp--preset--color--coral);
  transform-origin: bottom center;
  transition: transform 0.2s ease-out;
}

.services-wrapper h3 a:hover {
  text-decoration: none;
}

.services-wrapper h3 a:hover::after {
  transform: scaleX(1);
  transform-origin: bottom center;
}

.services-wrapper p {
  font-size: 1rem;
}

.services-wrapper .optimize-icon::before,
.services-wrapper .ppc-icon::before,
.services-wrapper .web-icon::before,
.services-wrapper .analytics-icon::before {
  position: unset;
  margin-bottom: 1rem;
}

/* new-home.css service icons (AI search / web accessibility / HIPAA) */
.services-wrapper .ai-search-icon::before,
.services-wrapper .web-accessible-icon::before,
.services-wrapper .hipaa-icon::before {
  position: unset;
  margin-bottom: 1rem;
}

.services-wrapper .ai-search-icon::before {
  content: url("data:image/svg+xml,%3Csvg width='66' height='66' viewBox='0 0 66 66' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_2090_17)'%3E%3Cpath d='M33 65.34C50.8609 65.34 65.34 50.8609 65.34 33C65.34 15.1391 50.8609 0.660034 33 0.660034C15.1391 0.660034 0.660034 15.1391 0.660034 33C0.660034 50.8609 15.1391 65.34 33 65.34Z' fill='%23FFED80'/%3E%3Cpath d='M33 54.4501C44.8466 54.4501 54.4501 44.8466 54.4501 33C54.4501 21.1535 44.8466 11.55 33 11.55C21.1535 11.55 11.55 21.1535 11.55 33C11.55 44.8466 21.1535 54.4501 33 54.4501Z' fill='%23FDDC04'/%3E%3Cpath d='M32.9999 43.5599C38.8321 43.5599 43.5599 38.8321 43.5599 32.9999C43.5599 27.1678 38.8321 22.4399 32.9999 22.4399C27.1678 22.4399 22.4399 27.1678 22.4399 32.9999C22.4399 38.8321 27.1678 43.5599 32.9999 43.5599Z' fill='%23D8BF28'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_2090_17'%3E%3Crect width='66' height='66' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
}

.services-wrapper .web-accessible-icon::before {
  content: url('data:image/svg+xml,<svg width="51" height="51" viewBox="0 0 51 51" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_2078_489)"><path d="M13.005 13.005V25.5H0.51001V13.005H13.005Z" fill="%23D8BF28"/><path d="M25.4999 0.51001V13.005H13.0049V0.51001H25.4999ZM50.4899 13.005V25.5H37.9949V13.005H50.4899Z" fill="%23D8BF28"/><path d="M50.49 0.51001V13.005H37.995V0.51001H50.49ZM13.005 0.51001V13.005H0.51001V0.51001H13.005ZM37.995 13.005V25.5H25.5V13.005H37.995Z" fill="%23FCDB15"/><path d="M50.4901 25.5V37.995H37.9951V25.5H50.4901Z" fill="%23D8BF28"/><path d="M37.995 37.995V50.49H25.5V37.995H37.995Z" fill="%23FCDB15"/><path d="M50.4901 37.995V50.49H37.9951V37.995H50.4901Z" fill="%23FCDB15"/><path d="M37.995 0.51001V13.005H25.5V0.51001H37.995Z" fill="%23FFF4B2"/><path d="M25.5 25.5V50.49H0.51001V25.5H25.5Z" fill="%23FCDB15"/></g><defs><clipPath id="clip0_2078_489"><rect width="51" height="51" fill="white"/></clipPath></defs></svg>');
}

.services-wrapper .hipaa-icon::before {
  content: url("data:image/svg+xml,%3Csvg width='51' height='51' viewBox='0 0 51 51' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_2078_506)'%3E%3Cpath d='M25.6733 0.68335V25.4999H50.4899C50.4899 18.9182 47.8753 12.606 43.2213 7.95196C38.5673 3.29795 32.2551 0.68335 25.6733 0.68335Z' fill='%23FCDB15'/%3E%3Cpath d='M25.6731 0.683472C20.766 0.685048 15.9696 2.14137 11.8899 4.86836C7.81035 7.59535 4.63077 11.4706 2.75312 16.0042C0.875465 20.5379 0.384027 25.5265 1.34092 30.3394C2.29782 35.1523 4.66009 39.5734 8.12914 43.0441L25.6731 25.5001V0.683472Z' fill='%23FFED80'/%3E%3Cpath d='M25.6736 25.5L8.12964 43.044C11.5993 46.5155 16.0207 48.88 20.8344 49.8383C25.6481 50.7966 30.6379 50.3057 35.1726 48.4276C39.7073 46.5496 43.583 43.3687 46.3096 39.2876C49.0362 35.2064 50.4911 30.4082 50.4902 25.5H25.6736Z' fill='%23E7CC2B'/%3E%3Cpath d='M0.51001 15.5193L23.868 23.8935L13.26 1.45349C10.3132 2.84284 7.66986 4.80064 5.48183 7.21447C3.2938 9.62831 1.60418 12.4506 0.51001 15.5193Z' fill='%23FCDB15'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_2078_506'%3E%3Crect width='51' height='51' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
}

/* responsive */
@media screen and (max-width: 768px) {
  .services-wrapper .services-row-1,
  .services-wrapper .services-row-2 {
    flex-wrap: wrap !important;
    justify-content: center !important;
  }

  .services-wrapper .services-row-2 .web-dev-wrapper .wp-block-cover__image-background,
  .services-wrapper .services-row-1 .search-engine-optimization-wrapper .wp-block-cover__image-background {
    left: 6px !important;
  }

  .services-wrapper .search-engine-optimization-wrapper,
  .services-wrapper .paid-search-wrapper,
  .services-wrapper .web-dev-wrapper,
  .services-wrapper .analytics-wrapper {
    width: 70%;
  }

  .services-wrapper .services-row-1 {
    margin-bottom: .5rem;
  }
}

@media screen and (max-width: 600px) {
  .services-wrapper {
    margin-bottom: 5rem;
  }

  .services-wrapper .search-engine-optimization-wrapper,
  .services-wrapper .paid-search-wrapper,
  .services-wrapper .web-dev-wrapper,
  .services-wrapper .analytics-wrapper {
    width: 100%;
  }
}


/*--------------------------------------------------------------
# Logo block (.logo-block) — ported from legacy pilotdigital-2018
--------------------------------------------------------------*/
.logo-block .wp-block-column {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
  grid-auto-rows: 250px;
}

.wp-block-columns.logo-block > .wp-block-column figure {
  background: white;
  padding: 1rem;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.wp-block-columns.logo-block > .wp-block-column figure > img {
  width: 150px;
  padding: 1rem 0;
}


/*--------------------------------------------------------------
# CTA section (.section-cta) — swoop background parity with live

The section's swoop image (blue-swoop.svg — byte-identical to the
live inline SVG) is attached to the group in the editor, but the
block only sets background-image + size. Live also anchors it
`center bottom no-repeat`, so add those here. Size (auto 600px)
comes from the block's own custom CSS; the live background colour
is navy-dark (the block currently uses navy — change on the block
if an exact colour match is wanted).
--------------------------------------------------------------*/
.section-cta {
  background-repeat: no-repeat;
  background-position: center bottom;
}


/*--------------------------------------------------------------
# Case-study embed (.cs-embed) — ported from legacy pilotdigital-2018

A two-column "case study" callout: the FIRST column is an aqua-light
card with a navy offset drop-shadow; the SECOND column's image pulls
left (-3rem) to overlap the card. Stacks on mobile (card below, image
centered). Legacy vars mapped to our presets (--aqua-light, --navy).
--------------------------------------------------------------*/
.cs-embed {
  align-items: center;
  margin-top: 2rem;
}
.cs-embed .wp-block-column,
.cs-embed h3 {
  margin: 0;
}
.cs-embed .wp-block-column:first-of-type {
  background: var(--wp--preset--color--aqua-light);
  box-shadow: -10px 10px var(--wp--preset--color--navy);
  padding: 1.5rem;
  z-index: 1;
}
.cs-embed .wp-block-column .wp-block-image {
  margin-left: -3rem;
}
.cs-embed figure > img {
  margin-top: .5rem;
}
@media (max-width: 781px) {
  .cs-embed {
    padding: 1rem;
  }
  .cs-embed .wp-block-column:first-of-type {
    order: 2;
  }
  .cs-embed .wp-block-column .wp-block-image {
    margin-bottom: -4rem;
    margin-left: auto;
    margin-right: auto;
    max-height: 200px;
  }
}


/*--------------------------------------------------------------
# Case study results data + radial chart

Ported verbatim from the legacy pilotdigital-2018 stylesheet and kept
as bare advanced classes (.case-study-results-data / .radial-chart) —
NOT converted to block styles. Legacy --aqua / --aqua-light mapped to
the palette tokens --wp--preset--color--aqua / --aqua-light.

Markup: wp:columns.case-study-results-data > column.radial-chart
(wp:html: .outer-circle.p-### > span[outer label] + .inner-circle >
span[inner label]) + a text column (h3 stat / h4 label / p). The
inner-circle size encodes the stat, so each value has its own .p-###
sizing rule.
--------------------------------------------------------------*/
.case-study-results-data {
  justify-content: center;
  margin-top: 2rem;
  margin-bottom: 1rem;
}
.case-study-results-data .wp-block-column {
  max-width: max-content;
}
.case-study-results-data h3,
.case-study-results-data h4 {
  margin-top: 0;
}
.case-study-results-data .outer-circle,
.case-study-results-data .inner-circle {
  border-radius: 50%;
}
.case-study-results-data .outer-circle {
  border: 5px solid var(--wp--preset--color--aqua);
  position: relative;
  height: 250px;
  width: 250px;
}
.case-study-results-data .inner-circle {
  background: var(--wp--preset--color--aqua-light);
}
.case-study-results-data .outer-circle.p-215 .inner-circle  { height: 46.4%; width: 46.4%; }
.case-study-results-data .outer-circle.p-463 .inner-circle  { height: 17.8%; width: 17.8%; }
.case-study-results-data .outer-circle.p-2008 .inner-circle { height: 4.7%;  width: 4.7%;  }
.case-study-results-data .outer-circle.p-474 .inner-circle  { height: 17.4%; width: 17.4%; }
.case-study-results-data .outer-circle.p-90 .inner-circle   { height: 52.6%; width: 52.6%; }
.case-study-results-data .outer-circle.p-69 .inner-circle   { height: 59.2%; width: 59.2%; }
.case-study-results-data .outer-circle.p-58 .inner-circle   { height: 33.6%; width: 33.6%; }
.case-study-results-data .outer-circle.p-719 .inner-circle  { height: 12.2%; width: 12.2%; }
.case-study-results-data .inner-circle > span {
  width: 85px;
  text-align: center;
}
.case-study-results-data .inner-circle,
.case-study-results-data .inner-circle > span {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.case-study-results-data .outer-circle span {
  color: var(--wp--preset--color--aqua);
  font-size: .75rem;
  line-height: 1;
}
.case-study-results-data .outer-circle > span {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}
@media screen and (max-width: 600px) {
  .case-study-results-data .radial-chart { order: 1; }
  .case-study-results-data .wp-block-column:not(.radial-chart) { order: 2; }
}


/*--------------------------------------------------------------
# Breadcrumbs (Yoast block) — home icon · "/" separator · Gilroy

The Home crumb is prepended by a wpseo_breadcrumb_links filter
(functions.php) and rendered here as a home icon. The current-page
crumb (.breadcrumb_last) is hidden — it only repeats the page title.
Home icon uses the parent theme's home.svg via CSS mask (currentColor).
--------------------------------------------------------------*/
.yoast-breadcrumbs {
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
}
/* single centered row — aligns the home icon, "/", and text */
.yoast-breadcrumbs > span {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.yoast-breadcrumbs a {
  color: var(--wp--preset--color--vivid-cyan-blue);
  text-decoration: none;
}
.yoast-breadcrumbs a:hover { text-decoration: underline; }

/* hide the last crumb — it's the page you're already on */
.yoast-breadcrumbs .breadcrumb_last { display: none; }

/* "/" separator before every crumb except the first (Home) */
.yoast-breadcrumbs > span > span + span::before {
  content: "/";
  padding: 0 0.4rem;
  color: var(--wp--preset--color--navy);
}

/* first crumb → inline compass home icon (the "Home" text is replaced by the
 * SVG via a wpseo_breadcrumb_single_link filter; the SVG carries role=img +
 * aria-label="Home" for screen readers). Ring + lower needle follow
 * currentColor; the upper needle uses --compass-comp-color. */
.yoast-breadcrumbs > span > span:first-child > a {
  display: inline-flex;
  align-items: center;
  color: var(--wp--preset--color--vivid-cyan-blue);
}
.yoast-breadcrumbs > span > span:first-child > a .bc-home-compass {
  width: 1.3rem;
  height: 1.3rem;
  display: block; /* block inside the inline-flex: centered, no baseline/line-box clipping */
}
/* on load: the compass spins two turns, overshoots slightly, and settles. */
@media (prefers-reduced-motion: no-preference) {
  .yoast-breadcrumbs > span > span:first-child > a .bc-home-compass {
    transform-origin: center;
    animation: bc-compass-spin 1.5s ease-out both;
  }
}
/* spin two turns, then a damped bounce (overshoot / undershoot, decreasing) to rest */
@keyframes bc-compass-spin {
  0%   { transform: rotate(0deg); }
  55%  { transform: rotate(690deg); }
  70%  { transform: rotate(745deg); }
  82%  { transform: rotate(706deg); }
  90%  { transform: rotate(728deg); }
  96%  { transform: rotate(715deg); }
  100% { transform: rotate(720deg); }
}
/* No-parent pages: the breadcrumb is just the compass (no ancestor crumb), which
   reads as a stray icon. Instead, blow it up into a large faint decorative mark.
   Scoped via :has() to the case where the compass crumb (:first-child) is
   immediately followed by the hidden current crumb (.breadcrumb_last) — i.e. no
   middle/ancestor crumb. */
.yoast-breadcrumbs:has(> span > span:first-child + .breadcrumb_last) > span > span:first-child > a {
  position: absolute;
  zoom: 10;
}
.yoast-breadcrumbs:has(> span > span:first-child + .breadcrumb_last) > span > span:first-child > a .bc-home-compass {
  opacity: 0.1;
}


/*--------------------------------------------------------------
# Header + hero background — body-class driven

The <body> carries one hero-bg--{colour} class (set in functions.php
by page id / parent id, default yellow on the page-with-hero-bc
template). Each rule paints BOTH the site header and the page hero
(.entry-header) the same colour. Text / logo / nav contrast is handled
separately. Available colours: yellow · navy · aqua-light · white.

The header carries a white BASE background so the fixed-on-scroll bar
(.didScroll, parent mercury_atlas_menu.css) is never transparent; the
hero-bg--* rules below override it on pages that set a hero colour.
--------------------------------------------------------------*/
.site-header {
  background-color: var(--wp--preset--color--white);
}
.hero-bg--yellow .site-header,
.hero-bg--yellow .entry-header {
  background-color: var(--wp--preset--color--yellow);
}
.hero-bg--navy .site-header,
.hero-bg--navy .entry-header {
  background-color: var(--wp--preset--color--navy);
}
.hero-bg--navy-dark .site-header,
.hero-bg--navy-dark .entry-header {
  background-color: var(--color-navy-dark);
}
.hero-bg--aqua-light .site-header,
.hero-bg--aqua-light .entry-header {
  background-color: var(--wp--preset--color--aqua-light);
}
.hero-bg--white .site-header,
.hero-bg--white .entry-header {
  background-color: var(--wp--preset--color--white);
}
/* coral-light uses a design token (not a palette colour), applied via the
   body_class filter. Also paints .archive-header. */
.hero-bg--coral-light .site-header,
.hero-bg--coral-light .entry-header,
.hero-bg--coral-light .archive-header {
  background-color: var(--color-coral-light);
}

/* --------------------------------------------------------------
   On-dark header — when the header band is navy-dark, switch the header
   CONTENTS (logo + top-level nav) to on-dark. Reusable for any page the
   hero-bg filter maps to 'navy-dark'. Dropdown panels are intentionally left
   LIGHT for now (their nested links keep their default dark text).
   -------------------------------------------------------------- */
/* logo: no CSS needed — the navy-dark header swaps in the dedicated on-dark
   logo attachment server-side (rogers_on_dark_custom_logo in
   functions.php), so the correct white-ready SVG is rendered natively. */
/* top-level nav links -> white (submenu/dropdown links untouched) */
.hero-bg--navy-dark .site-header .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
  color: var(--wp--preset--color--white);
}
.hero-bg--navy-dark .site-header .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover {
  color: var(--wp--preset--color--yellow);
}
/* top-level submenu carets -> white */
.hero-bg--navy-dark .site-header .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation__submenu-icon {
  color: var(--wp--preset--color--white);
}

/* Header + hero read as one continuous band — drop <main>'s top block-gap
   whenever a hero background colour is active, so the coloured header sits
   flush against the coloured hero (no page-colour strip between them). */
[class*="hero-bg--"] main {
  margin-block-start: 0;
}

/*--------------------------------------------------------------
# Hero H1 icons  (ported from legacy pilotdigital-2018)

A 75px aqua service icon hangs in the left margin of the hero H1.
Two triggers share each icon: (1) an explicit class on the H1 —
`hero-icon-{service}` in the block's Advanced classes; (2) automatic
by page id — WordPress puts `page-id-{id}` on <body>. Decorative only
(content:"" + background), so the H1 text stays the heading.
Services: optimize·seo·ppc·cro·analytics·automation·web·local·content·paid-social.
--------------------------------------------------------------*/
.entry-header h1,
[class*="hero-icon-"] { position: relative; }

.hero-icon-optimize::before,
.page-id-90 .entry-header h1::before,
.hero-icon-seo::before,
.page-id-92 .entry-header h1::before,
.hero-icon-ppc::before,
.page-id-94 .entry-header h1::before,
.hero-icon-cro::before,
.page-id-96 .entry-header h1::before,
.hero-icon-analytics::before,
.page-id-98 .entry-header h1::before,
.hero-icon-automation::before,
.page-id-100 .entry-header h1::before,
.hero-icon-web::before,
.page-id-103 .entry-header h1::before,
.hero-icon-local::before,
.page-id-7249 .entry-header h1::before,
.hero-icon-content::before,
.page-id-7357 .entry-header h1::before,
.hero-icon-paid-social::before,
.page-id-7406 .entry-header h1::before {
  content: "";
  position: absolute;
  left: -5rem;
  top: 0;
  width: 75px;
  height: 75px;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

/* optimize — Search Engine Optimization (page 90) */
.hero-icon-optimize::before,
.page-id-90 .entry-header h1::before {
  background-image: url(data:image/svg+xml;base64,PHN2ZyBkYXRhLW5hbWU9IkxheWVyIDEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDEwMCAxMDAiPjxwYXRoIGZpbGw9IiM3OGQ1ZDgiIGQ9Ik03NC41IDI1LjV2NDloLTQ5di00OXoiLz48cGF0aCBmaWxsPSIjYmFlYWViIiBkPSJNNTAgNTB2NDlIMVY1MHoiLz48cGF0aCBmaWxsPSIjMzhiZmMzIiBkPSJNOTkgMXY0OUg1MFYxeiIvPjwvc3ZnPg==);
}

/* seo — SEO (old) (page 92) */
.hero-icon-seo::before,
.page-id-92 .entry-header h1::before {
  background-image: url(data:image/svg+xml;base64,PHN2ZyBkYXRhLW5hbWU9IkxheWVyIDEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDEwMCAxMDAiPjxwYXRoIGZpbGw9IiNiYWVhZWIiIGQ9Ik0xNy4zMyA2Ni40N2gxM1Y5OWgtMTN6Ii8+PHBhdGggZmlsbD0iIzc4ZDVkOCIgZD0iTTQzLjUgMzMuNjZoMTNWOTloLTEzeiIvPjxwYXRoIGZpbGw9IiMzOGJmYzMiIGQ9Ik02OS42NyAxaDEzdjk4aC0xM3oiLz48L3N2Zz4=);
}

/* ppc — PPC (page 94) */
.hero-icon-ppc::before,
.page-id-94 .entry-header h1::before {
  background-image: url(data:image/svg+xml;base64,PHN2ZyBkYXRhLW5hbWU9IkxheWVyIDEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDEwMCAxMDAiPjxjaXJjbGUgY3g9IjUwIiBjeT0iNTAiIHI9IjQ5IiBmaWxsPSIjYmFlYWViIi8+PGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgcj0iMzIuNSIgZmlsbD0iIzc4ZDVkOCIvPjxjaXJjbGUgY3g9IjUwIiBjeT0iNTAiIHI9IjE2IiBmaWxsPSIjMzhiZmMzIi8+PC9zdmc+);
}

/* cro — Conversion Rate Optimization (page 96) */
.hero-icon-cro::before,
.page-id-96 .entry-header h1::before {
  background-image: url(data:image/svg+xml;base64,PHN2ZyBkYXRhLW5hbWU9IkxheWVyIDEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDEwMCAxMDAiPjxwYXRoIGZpbGw9IiNiYWVhZWIiIGQ9Ik0xNy4zMyAzMy43M2gxM3YzMi41M2gtMTN6Ii8+PHBhdGggZmlsbD0iIzc4ZDVkOCIgZD0iTTQzLjUgMTcuMzNoMTN2NjUuMzRoLTEzeiIvPjxwYXRoIGZpbGw9IiMzOGJmYzMiIGQ9Ik02OS42NyAxaDEzdjk4aC0xM3oiLz48L3N2Zz4=);
}

/* analytics — Analytics (page 98) */
.hero-icon-analytics::before,
.page-id-98 .entry-header h1::before {
  background-image: url(data:image/svg+xml;base64,PHN2ZyBkYXRhLW5hbWU9IkxheWVyIDEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDEwMCAxMDAiPjxwYXRoIGQ9Ik01MC4zNCAxLjM0VjUwSDk5QTQ4LjY2IDQ4LjY2IDAgMCAwIDUwLjM0IDEuMzR6IiBmaWxsPSIjMzliZmMyIi8+PHBhdGggZD0iTTUwLjM0IDEuMzRhNDguNjYgNDguNjYgMCAwIDAtMzQuNCA4My4wNkw1MC4zNCA1MHoiIGZpbGw9IiNlMWYyZjMiLz48cGF0aCBkPSJNNTAuMzQgNTBsLTM0LjQgMzQuNEE0OC42NSA0OC42NSAwIDAgMCA5OSA1MHoiIGZpbGw9IiNiY2UzZTYiLz48cGF0aCBkPSJNMSAzMC40M2w0NS44IDE2LjQyLTIwLjgtNDRBNDguNSA0OC41IDAgMCAwIDEgMzAuNDN6IiBmaWxsPSIjMzliZmMyIi8+PC9zdmc+);
}

/* automation — Sales & Marketing Automation (page 100) */
.hero-icon-automation::before,
.page-id-100 .entry-header h1::before {
  background-image: url(data:image/svg+xml;base64,PHN2ZyBkYXRhLW5hbWU9IkxheWVyIDEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDEwMCAxMDAiPjxwYXRoIGQ9Ik01MCAxQTQ5IDQ5IDAgMCAwIDEgNTBoMTYuNWEzMi41IDMyLjUgMCAwIDEgNjUgMEg5OUE0OSA0OSAwIDAgMCA1MCAxeiIgZmlsbD0iI2JhZWFlYiIvPjxwYXRoIGQ9Ik01MCAzNGExNiAxNiAwIDAgMSAxNiAxNmgxNi41YTMyLjUgMzIuNSAwIDAgMC02NSAwSDM0YTE2IDE2IDAgMCAxIDE2LTE2eiIgZmlsbD0iIzc4ZDVkOCIvPjxwYXRoIGQ9Ik01MCAzNGExNiAxNiAwIDAgMC0xNiAxNmgzMmExNiAxNiAwIDAgMC0xNi0xNnoiIGZpbGw9IiMzOGJmYzMiLz48L3N2Zz4=);
}

/* web — Web Development (page 103) */
.hero-icon-web::before,
.page-id-103 .entry-header h1::before {
  background-image: url(data:image/svg+xml;base64,PHN2ZyBkYXRhLW5hbWU9IkxheWVyIDEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDEwMCAxMDAiPjxwYXRoIGZpbGw9IiM3OGQ1ZDgiIGQ9Ik0yNS41IDI1LjVWNTBIMVYyNS41eiIvPjxwYXRoIGZpbGw9IiMzOGJmYzMiIGQ9Ik01MCAxdjI0LjVIMjUuNVYxek05OSAyNS41VjUwSDc0LjVWMjUuNXoiLz48cGF0aCBmaWxsPSIjYmFlYWViIiBkPSJNOTkgMXYyNC41SDc0LjVWMXpNMjUuNSAxdjI0LjVIMVYxek03NC41IDI1LjVWNTBINTBWMjUuNXoiLz48cGF0aCBmaWxsPSIjNzhkNWQ4IiBkPSJNOTkgNTB2MjQuNUg3NC41VjUweiIvPjxwYXRoIGZpbGw9IiMzOGJmYzMiIGQ9Ik03NC41IDc0LjVWOTlINTBWNzQuNXoiLz48cGF0aCBmaWxsPSIjYmFlYWViIiBkPSJNOTkgNzQuNVY5OUg3NC41Vjc0LjV6Ii8+PHBhdGggZmlsbD0iIzc4ZDVkOCIgZD0iTTc0LjUgMXYyNC41SDUwVjF6Ii8+PHBhdGggZmlsbD0iI2JhZWFlYiIgZD0iTTUwIDUwdjQ5SDFWNTB6Ii8+PC9zdmc+);
}

/* local — Local SEO (page 7249) */
.hero-icon-local::before,
.page-id-7249 .entry-header h1::before {
  background-image: url(data:image/svg+xml;base64,PHN2ZyBkYXRhLW5hbWU9IkxheWVyIDEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDEwMCAxMDAiPjxjaXJjbGUgY3g9IjUwIiBjeT0iNTAiIHI9IjQ5IiBmaWxsPSIjYmFlYWViIi8+PGNpcmNsZSBjeD0iNTAiIGN5PSI2Ni41IiByPSIzMi41IiBmaWxsPSIjNzhkNWQ4Ii8+PGNpcmNsZSBjeD0iNTAiIGN5PSI4MyIgcj0iMTYiIGZpbGw9IiMzOGJmYzMiLz48L3N2Zz4=);
}

/* content — Content (page 7357) */
.hero-icon-content::before,
.page-id-7357 .entry-header h1::before {
  background-image: url(data:image/svg+xml;base64,PHN2ZyBkYXRhLW5hbWU9IkxheWVyIDEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDEwMCAxMDAiPjxwYXRoIGZpbGw9IiNiYWVhZWIiIGQ9Ik0xIDgyLjY2di0xM2gzMi41M3YxM3oiLz48cGF0aCBmaWxsPSIjNzhkNWQ4IiBkPSJNMSA1Ni41di0xM2g2NS4zNHYxM3oiLz48cGF0aCBmaWxsPSIjMzhiZmMzIiBkPSJNMSAzMC4zM3YtMTNoOTh2MTN6Ii8+PC9zdmc+);
}

/* paid-social — Paid Social (page 7406) */
.hero-icon-paid-social::before,
.page-id-7406 .entry-header h1::before {
  background-image: url(data:image/svg+xml;base64,PHN2ZyBkYXRhLW5hbWU9IkxheWVyIDEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDEwMCAxMDAiPjxwYXRoIGQ9Ik01MCA2NmExNiAxNiAwIDAgMSAwLTMyVjFhNDkgNDkgMCAxIDAgMzQuNjUgODMuNjVMNjEuMzEgNjEuMzFBMTUuOTEgMTUuOTEgMCAwIDEgNTAgNjZ6IiBmaWxsPSIjYmFlYWViIi8+PHBhdGggZD0iTTY2IDUwYTE1LjkxIDE1LjkxIDAgMCAxLTQuNjkgMTEuMzFsMjMuMzQgMjMuMzRBNDguODQgNDguODQgMCAwIDAgOTkgNTB6IiBmaWxsPSIjMzhiZmMzIi8+PHBhdGggZD0iTTY2IDUwaDMzQTQ5IDQ5IDAgMCAwIDUwIDF2MzNhMTYgMTYgMCAwIDEgMTYgMTZ6IiBmaWxsPSIjNzhkNWQ4Ii8+PC9zdmc+);
}

@media (max-width: 900px) {
  .hero-icon-optimize::before,
  .page-id-90 .entry-header h1::before,
  .hero-icon-seo::before,
  .page-id-92 .entry-header h1::before,
  .hero-icon-ppc::before,
  .page-id-94 .entry-header h1::before,
  .hero-icon-cro::before,
  .page-id-96 .entry-header h1::before,
  .hero-icon-analytics::before,
  .page-id-98 .entry-header h1::before,
  .hero-icon-automation::before,
  .page-id-100 .entry-header h1::before,
  .hero-icon-web::before,
  .page-id-103 .entry-header h1::before,
  .hero-icon-local::before,
  .page-id-7249 .entry-header h1::before,
  .hero-icon-content::before,
  .page-id-7357 .entry-header h1::before,
  .hero-icon-paid-social::before,
  .page-id-7406 .entry-header h1::before {
    position: static;
    display: block;
    margin: 0 auto 1rem;
  }
}

/*--------------------------------------------------------------
# Site footer — body text in Gilroy Medium (matches live)

Headings are already Gilroy (theme.json h4). The addresses / phone /
copyright / policy links inherit the body serif (pt-serif) by default;
override them to Gilroy 500 here.
--------------------------------------------------------------*/
.site-footer p,
.site-footer li,
.site-footer a,
.site-footer cite {
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 500;
}
/* Footer column headings: normalize across levels so the h3 ("Contact Pilot HQ",
   promoted to fix heading-order — h2 content -> h3 -> h4 -> h4) matches the h4
   location/signup titles. Keeps the footer look identical regardless of level. */
.site-footer .wp-block-heading {
  font-size: clamp(15px, 1.8vw, 19.2px);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.125;
}

/* Thumb-menu (fixed footer menu) branding — overrides the parent's neutral
   defaults. Resting navy; hover/active + focus-visible ring coral. The SVG
   icons follow currentColor automatically, so one token brands both. */
#chicagoFixedFooterMenu {
  /* text / icon colour per state — the SVG icons follow currentColor, so one
     token brands both the label and the glyph. Resting navy; hover/active coral. */
  --ma-thumb:            var(--wp--preset--color--navy);
  --ma-thumb-hover:      var(--wp--preset--color--white);
  --ma-thumb-active:     var(--wp--preset--color--white);
  --ma-thumb-focus-ring: var(--wp--preset--color--coral);
  /* segment background per state — overrides the parent defaults
     (--ma-thumb-hover-bg: --neutral-200; --ma-thumb-active-bg: --neutral-300). */
  --ma-thumb-hover-bg:   var(--wp--preset--color--vivid-cyan-blue);
  --ma-thumb-active-bg:  var(--color-blue-dark);
  /* type */
  --ma-thumb-font:       var(--wp--preset--font-family--heading);
  --ma-thumb-weight:     500;
}
/* all footer links: white + uppercase. The :not() chain matches the parent's
   .has-navy-background-color link rule (aqua-light) specificity so this wins. */
.site-footer .has-navy-background-color a:not(.wp-block-button__link):not(.wp-element-button) {
  color: var(--wp--preset--color--white);
  text-transform: uppercase;
}
/* office addresses (nested columns) render smaller */
.site-footer .wp-block-columns .wp-block-columns p {
  font-size: 0.875rem;
}
/* copyright line: all uppercase */
.footer-copyright {
  text-transform: uppercase;
}
/* bottom strip is flex + space-between (copyright | policy links | social).
   Grow the two outer items equally so the middle links sit at true page-center
   instead of the copyright/social midpoint. */
.footer-bottom > :first-child,
.footer-bottom > .wp-block-social-links {
  flex: 1 1 0;
}
.footer-bottom > .wp-block-social-links {
  justify-content: flex-end;
}

/*--------------------------------------------------------------
# Site footer — newsletter (Gravity Forms) layout

GF's own framework CSS is disabled (gform-theme--no-framework) and the
gf_simple_horizontal legacy layout collapses the email field to ~12px.
Lay the form out here: full-width stacked (email → turnstile → button).
--------------------------------------------------------------*/
.site-footer .gform_wrapper .gform_fields {
  display: block;
}
.site-footer .gform_wrapper .gfield {
  display: block;
  float: none;
  width: 100%;
  max-width: 100%;
  margin: 0 0 1rem;
  padding: 0;
}
.site-footer .gform_wrapper .ginput_container input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.6rem 0.75rem;
}
.site-footer .gform_wrapper .gfield_label {
  color: var(--wp--preset--color--white);
  margin-bottom: 0.35rem;
}
.site-footer .gform_wrapper .gform_footer {
  display: block;
  margin: 0.5rem 0 0;
  padding: 0;
}

/*--------------------------------------------------------------
# About page — "Our Team" grid (.pilot-team)

Ported from legacy pilotdigital-2018. Circular member photos in an
auto-fit grid; name (navy, Gilroy) + role (coral, uppercase). The legacy
staggered translateX transforms are omitted (page 108 reset them to none).
Markup: columns.pilot-team > column > repeated wp:image(is-style-rounded)
each with <figcaption><a>Name</a><br><span>Role</span></figcaption>.
--------------------------------------------------------------*/
.pilot-team .wp-block-column {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* always 3 per row: wider section = bigger images + more space, not more columns */
  gap: 3em;
}
/* Woven stagger (legacy): at 3 columns, alternate rows shift left / right by 2rem.
   6n formula = each row of 3 (not capped like the legacy nth-child list).
   Only above 820px — narrower than that there isn't room for the ±2rem offset. */
@media (min-width: 820px) {
  .pilot-team .wp-block-image:nth-child(6n+1),
  .pilot-team .wp-block-image:nth-child(6n+2),
  .pilot-team .wp-block-image:nth-child(6n+3) { transform: translateX(-2rem); }
  .pilot-team .wp-block-image:nth-child(6n+4),
  .pilot-team .wp-block-image:nth-child(6n+5),
  .pilot-team .wp-block-image:nth-child(6n+6) { transform: translateX(2rem); }
}
@media (max-width: 600px) {
  .pilot-team .wp-block-column { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
}
.pilot-team .wp-block-image {
  margin: 0;
}
.pilot-team .wp-block-image img {
  width: 100%;
  max-width: 300px;      /* a little larger than before, capped so it stays a headshot */
  margin-inline: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
}
.pilot-team figcaption {
  margin: 0.75rem 0 0;
  text-align: center;
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--wp--preset--color--navy);
}
.pilot-team figcaption a { color: var(--wp--preset--color--navy); text-decoration: none; }
.pilot-team figcaption a:hover { text-decoration: underline; }
.pilot-team figcaption > span {
  display: block;
  margin-top: 0.15rem;
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0.025rem;
  text-transform: uppercase;
  color: var(--wp--preset--color--coral);
}

/*--------------------------------------------------------------
# About page — "Our Office" collage (.office-collage)

Ported from legacy pilotdigital-2018 and FSE-adapted: the legacy CSS
targeted .wp-block-group__inner-container (classic group markup); FSE
groups render children directly, so these target .office-collage and
.office-collage > figure. 8 images; 5-col staggered collage stepping to
4-col (<=782px) then 2-col (<=600px).
--------------------------------------------------------------*/
.office-collage {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  max-width: 1400px;
  margin-inline: auto;
  padding: 3rem 1rem 5rem;
}
.office-collage > h2 { grid-column: 1 / -1; margin-bottom: 2rem; }
.office-collage > figure { height: 250px; overflow: hidden; margin: 0; }
.office-collage > figure img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center right;
}
.office-collage > figure:nth-of-type(2) img,
.office-collage > figure:nth-of-type(3) img,
.office-collage > figure:nth-of-type(4) img,
.office-collage > figure:last-of-type img { object-position: center center; }
.office-collage > figure:first-of-type,
.office-collage > figure:nth-of-type(7) { grid-column: 2 / span 2; }
.office-collage > figure:nth-of-type(6)  { grid-column: 3 / span 2; }
.office-collage > figure:last-of-type    { grid-column: 4 / span 2; }

@media (max-width: 782px) {
  .office-collage { grid-template-columns: repeat(4, 1fr); }
  .office-collage > figure:first-of-type,
  .office-collage > figure:nth-of-type(7) { grid-column: 1 / span 2; }
  .office-collage > figure:nth-of-type(6) { grid-column: auto; }
  .office-collage > figure:last-of-type   { grid-column: 3 / span 2; }
}
@media (max-width: 600px) {
  .office-collage { grid-template-columns: repeat(2, 1fr); }
  .office-collage > figure { height: auto; }
  .office-collage > figure:first-of-type,
  .office-collage > figure:nth-of-type(6),
  .office-collage > figure:nth-of-type(7),
  .office-collage > figure:last-of-type { grid-column: 1 / span 2; }
  .office-collage > figure:nth-of-type(6) { grid-row: 4; }
}

/*--------------------------------------------------------------
# Pricing table (.price-table-section / .price-table / .plan-* / pt-col)

Ported from legacy pilotdigital-2018. No __inner-container dependency (targets
the .pt-col-* columns + .plan-* blocks directly). Core structure + visuals here;
per-page min-height card-alignment is dialed in against each live page.
Plan accent colours (#39BFC2 plus / #4FA9D0 pro / #09549A priority) are plan-
specific, kept literal; neutral/coral/navy/yellow use tokens.
--------------------------------------------------------------*/
.price-table-section { gap: 64px; margin: 40px 0 72px; }
.price-table-section .wp-block-column { border: 1px solid var(--neutral-300); }
.price-table-section .pt-section-col-1,
.price-table-section .pt-section-col-2 { border: none; }
.price-table-section .hosted-by-text {
  margin: 0; padding: 16px; min-height: 90px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--wp--preset--font-family--heading); font-weight: 700; letter-spacing: -.02rem;
}
.price-table-section .hosted-by-you   { background: var(--wp--preset--color--coral); color: #fff; }
.price-table-section .hosted-by-pilot { background: var(--color-navy-dark); color: #fff; }
.price-table-section .pilot-hosted { gap: 0; } /* the 3 "Hosted by Pilot" plans butt together (border dividers), matching live */

.price-table { gap: 16px; }
.price-table .pt-col-1,
.price-table .pt-col-2,
.price-table .pt-col-3,
.price-table .pt-col-4 { padding: 0 12px 24px; background: #fff; }
.price-table .pt-col-2,
.price-table .pt-col-3 { border-right: 1px solid var(--neutral-300); }

.price-table .plan-title { font-size: 1.15rem; margin-top: 24px; }
.price-table .plan-title :is(.pilot-press, .pilot-plus, .pilot-pro, .pilot-priority) {
  font-size: 2.25rem; font-weight: 700; padding-bottom: 4px; border-bottom: 6px solid;
}
.price-table .plan-title .pilot-press    { border-color: var(--wp--preset--color--coral); }
.price-table .plan-title .pilot-plus     { border-color: #39BFC2; }
.price-table .plan-title .pilot-pro      { border-color: #4FA9D0; }
.price-table .plan-title .pilot-priority { border-color: #09549A; }

.price-table .pt-col-3 { position: relative; }
/* Pro plan: the "popular" badge sits INLINE beside the title (matches the live/legacy desktop),
   so it does NOT inflate the shared subgrid title-row. ★ is a ::before SVG.
   Responsive: legacy stacked the badge (flex-direction:column, badge-above-title) only at its
   ≤1050px breakpoint; ported here to the FSE subgrid breakpoint (≤781px, where the cards stack)
   to avoid re-inflating the shared row in the 781–1050px range. */
.price-table .pilot-pro-tag-group { align-items: center; }
.price-table .popular-tag {
  position: relative; margin-left: 30px; white-space: nowrap; /* margin leaves room for the ★ that sits OUTSIDE-left */
  background: var(--wp--preset--color--yellow);
  padding: 4px 12px; border-radius: 35px; font-size: 14px;
  font-family: var(--wp--preset--font-family--heading); font-weight: 700;
}
.price-table .popular-tag::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='16' fill='none'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23001B34' d='M9.903.563a1.001 1.001 0 0 0-1.8 0l-2.01 4.134-4.487.662a.998.998 0 0 0-.556 1.7l3.256 3.222-.768 4.553a1.003 1.003 0 0 0 1.459 1.05l4.01-2.14 4.009 2.14a1 1 0 0 0 1.056-.072c.31-.224.466-.603.403-.978l-.772-4.553L16.96 7.06a.999.999 0 0 0-.556-1.7l-4.49-.662L9.902.562Z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h18v16H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
  position: absolute; right: 100%; margin-right: 5px; top: 50%; transform: translateY(-50%) scale(.6); transform-origin: right center; /* OUTSIDE the pill, to its left */
}
@media (max-width: 781px) {
  .price-table .pilot-pro-tag-group { flex-direction: column; align-items: flex-start; }
  .price-table .popular-tag { order: 1; margin-left: 0; margin-bottom: 4px; }
  .price-table .plan-title { order: 2; }
}

.price-table .plan-price   { font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 1.25rem; }
.price-table .plan-details { padding-left: 1.2rem; }
.price-table .plan-cta     { margin-bottom: 2rem; }
.price-table .plan-plus-cta a     { background: #39BFC2; }
.price-table .plan-plus-cta a:hover     { background: #2B9DA0; }
.price-table .plan-pro-cta a      { background: #4FA9D0; }
.price-table .plan-pro-cta a:hover      { background: #418FB0; }
.price-table .plan-priority-cta a { background: #09549A; }
.price-table .plan-priority-cta a:hover { background: #064076; }

/*--------------------------------------------------------------
# Plan-details indent + plus markers (ported from legacy pricing)

`.pd-plan-details-indent` — the renamed legacy `.plan-details` indent
wrapper (padding-left; the old `.price-table .plan-details` rule above is
kept until content is migrated to the new class). The three plus paragraph
block styles below (is-style-plus-{teal,light-blue,dark-blue}, registered on
core/paragraph in inc/block-styles.php) hang a coloured plus SVG ::before at
left:-23px, which lands in this indent. Colours match the plan-tier CTAs
(plus #39BFC2 / pro #4FA9D0 / priority #09549A). SVGs verbatim from legacy
`.plus-*-icon`.
--------------------------------------------------------------*/
.pd-plan-details-indent {
	padding-left: 1.2rem;
}
@media screen and (max-width: 480px) {
	.pd-plan-details-indent {
		margin-top: 4rem;
	}
}

.is-style-plus-teal,
.is-style-plus-light-blue,
.is-style-plus-dark-blue {
	position: relative;
}
.is-style-plus-teal::before,
.is-style-plus-light-blue::before,
.is-style-plus-dark-blue::before {
	position: absolute;
	left: -23px;
	top: -2px;
	transform: scale(1.5);
}
.is-style-plus-teal::before {
	content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='11' fill='none'%3E%3Cpath fill='%2339BFC2' d='M5.714 1.719A.7.7 0 0 0 5 1.03a.7.7 0 0 0-.714.688v3.093H1.07a.7.7 0 0 0-.714.688.7.7 0 0 0 .714.688h3.215V9.28A.7.7 0 0 0 5 9.97a.7.7 0 0 0 .714-.688V6.187H8.93a.7.7 0 0 0 .714-.687.7.7 0 0 0-.714-.688H5.714V1.72Z'/%3E%3C/svg%3E");
}
.is-style-plus-light-blue::before {
	content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='11' fill='none'%3E%3Cpath fill='%234FA9D0' d='M5.714 1.719A.7.7 0 0 0 5 1.03a.7.7 0 0 0-.714.688v3.093H1.07a.7.7 0 0 0-.714.688.7.7 0 0 0 .714.688h3.215V9.28A.7.7 0 0 0 5 9.97a.7.7 0 0 0 .714-.688V6.187H8.93a.7.7 0 0 0 .714-.687.7.7 0 0 0-.714-.688H5.714V1.72Z'/%3E%3C/svg%3E");
}
.is-style-plus-dark-blue::before {
	content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='11' fill='none'%3E%3Cpath fill='%2309549A' d='M5.714 1.719A.7.7 0 0 0 5 1.03a.7.7 0 0 0-.714.688v3.093H1.07a.7.7 0 0 0-.714.688.7.7 0 0 0 .714.688h3.215V9.28A.7.7 0 0 0 5 9.97a.7.7 0 0 0 .714-.688V6.187H8.93a.7.7 0 0 0 .714-.687.7.7 0 0 0-.714-.688H5.714V1.72Z'/%3E%3C/svg%3E");
}

/*--------------------------------------------------------------
# Block style: is-style-subgrid-cards  (core/columns) — card-part alignment

Replaces the legacy per-page min-heights. Applied to a price table's grid-root
Columns block, it makes every plan card's parts line up on shared rows via CSS
subgrid, auto-sizing each row to the tallest instance — no fixed heights, no
per-page tuning. Parts flow into rows in document order (auto-placement), so it
works regardless of which parts a page has or whether they carry plan-* classes.

Two layouts, detected from structure (no page scoping):
  • FLAT      — direct plan columns (single grid). :not(:has(> .pt-section-col-1))
  • 2-SECTION — columns wrap .pt-section-col-* (header row + sub-columns), the row
               tracks thread down through both sections so all cards align across
               the gap. Section widths follow the plan split (1+3 -> 1fr 3fr, else
               1fr 1fr). :has(> .pt-section-col-1)
--------------------------------------------------------------*/
.wp-block-columns.is-style-subgrid-cards { row-gap: 0; }

/* ---- FLAT card row: plan columns are direct children of the grid root ---- */
.wp-block-columns.is-style-subgrid-cards:not(:has(> .pt-section-col-1)) {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  grid-template-rows: repeat(12, auto);
}
.wp-block-columns.is-style-subgrid-cards:not(:has(> .pt-section-col-1)) > .wp-block-column {
  grid-row: 1 / -1;
  display: grid;
  grid-template-rows: subgrid;
}

/* ---- 2-SECTION: header row + section sub-columns, rows thread to all cards ---- */
.wp-block-columns.is-style-subgrid-cards:has(> .pt-section-col-1) {
  display: grid;
  grid-template-rows: auto repeat(12, auto); /* row 1 = section header, rest = card parts */
}
.wp-block-columns.is-style-subgrid-cards:has(> .pt-section-col-1):has(.pt-col-4) { grid-template-columns: 1fr 3fr; }
.wp-block-columns.is-style-subgrid-cards:has(> .pt-section-col-1):not(:has(.pt-col-3)) { grid-template-columns: 1fr 1fr; }
.wp-block-columns.is-style-subgrid-cards > .pt-section-col-1 { grid-column: 1; }
.wp-block-columns.is-style-subgrid-cards > .pt-section-col-2 { grid-column: 2; }
.wp-block-columns.is-style-subgrid-cards:has(> .pt-section-col-1) > .wp-block-column {
  grid-row: 1 / -1;
  display: grid;
  grid-template-rows: subgrid;
  border: none;
}
.wp-block-columns.is-style-subgrid-cards .hosted-by-text { grid-row: 1; }
.wp-block-columns.is-style-subgrid-cards .pt-section-col-1 > .price-table,
.wp-block-columns.is-style-subgrid-cards .pt-section-col-2 > .price-table {
  grid-row: 2 / -1;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  grid-template-rows: subgrid;
  gap: 0;
  margin: 0;
}
.wp-block-columns.is-style-subgrid-cards .price-table > .wp-block-column {
  grid-row: 1 / -1;
  display: grid;
  grid-template-rows: subgrid;
}

/* ---- Responsive: below the WP columns breakpoint, undo the grid/subgrid so the
   cards fall back to normal stacked flow (grid alignment is moot once stacked).
   Selectors mirror the desktop rules above so they win by specificity + order. ---- */
@media (max-width: 781px) {
  .wp-block-columns.is-style-subgrid-cards:not(:has(> .pt-section-col-1)),
  .wp-block-columns.is-style-subgrid-cards:has(> .pt-section-col-1),
  .wp-block-columns.is-style-subgrid-cards .pt-section-col-1 > .price-table,
  .wp-block-columns.is-style-subgrid-cards .pt-section-col-2 > .price-table {
    display: block;
    grid-template-columns: none;
    grid-template-rows: none;
  }
  .wp-block-columns.is-style-subgrid-cards:not(:has(> .pt-section-col-1)) > .wp-block-column,
  .wp-block-columns.is-style-subgrid-cards:has(> .pt-section-col-1) > .wp-block-column,
  .wp-block-columns.is-style-subgrid-cards .price-table > .wp-block-column {
    display: block;
    grid-template-rows: none;
    grid-row: auto;
  }
}

/* ---- Tablet: the DENSE 2-section layout (1 + 3 plans, i.e. has a 4th card)
   crams to ~180px cards in the 782-991px band, so stack it earlier. The 1+1
   two-section and the flat 2-3 card tables stay side-by-side down to 781px. ---- */
@media (max-width: 991px) {
  .wp-block-columns.is-style-subgrid-cards:has(> .pt-section-col-1):has(.pt-col-4),
  .wp-block-columns.is-style-subgrid-cards:has(> .pt-section-col-1):has(.pt-col-4) .pt-section-col-1 > .price-table,
  .wp-block-columns.is-style-subgrid-cards:has(> .pt-section-col-1):has(.pt-col-4) .pt-section-col-2 > .price-table {
    display: block;
    grid-template-columns: none;
    grid-template-rows: none;
  }
  .wp-block-columns.is-style-subgrid-cards:has(> .pt-section-col-1):has(.pt-col-4) > .wp-block-column,
  .wp-block-columns.is-style-subgrid-cards:has(> .pt-section-col-1):has(.pt-col-4) .price-table > .wp-block-column {
    display: block;
    grid-template-rows: none;
    grid-row: auto;
  }
}

/*--------------------------------------------------------------
# Process steps — is-style-process (core/columns)

Ported from legacy pilotdigital-2018 `.process`. Each column's <h4> gets an
aqua step number (01, 02, 03 … via a CSS counter, so any column count works)
and a → connector between steps, on a light-grey panel. Migrated content also
carries an inert `process-depreciated` marker (the old bare class).
--------------------------------------------------------------*/
.wp-block-columns.is-style-process {
	counter-reset: pstep;
	max-width: 1100px;
	margin: 1.5rem auto;
	padding: 0 2rem;
	background: var(--wp--preset--color--grey);
}
.wp-block-columns.is-style-process > .wp-block-column {
	margin: 0 1rem 2.5rem;
}
.wp-block-columns.is-style-process > .wp-block-column h4::before {
	counter-increment: pstep;
	content: counter(pstep, decimal-leading-zero);
	display: block;
	color: var(--wp--preset--color--aqua);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 0.75rem;
}
.wp-block-columns.is-style-process > .wp-block-column:not(:last-child) h4::after {
	content: "\2192";
	display: inline-block;
	padding-left: 0.5rem;
	color: var(--wp--preset--color--aqua);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 1rem;
}

/*--------------------------------------------------------------
# List markers — is-style-green-checkmark-square / is-style-red-x (core/list)

Ports the legacy pilotdigital-2018 `.checkmark-list` (✅ green) and
`.x-marks-list` (❌ red) emoji-bullet lists to real block styles, verbatim.
The emoji carry their own colour; the `color` declarations are kept from the
legacy rules (harmless — they don't recolour emoji glyphs). Migrated content
also carries an inert `checkmark-list-depreciated` / `x-marks-list-depreciated`
marker (the old bare class).
--------------------------------------------------------------*/
.wp-block-list.is-style-red-x,
.wp-block-list.is-style-green-checkmark-square {
	list-style: none;
	margin-left: 0;
	padding-left: 0;
}
.wp-block-list.is-style-red-x li,
.wp-block-list.is-style-green-checkmark-square li {
	position: relative;
	margin-bottom: 0.8em;
	padding-left: 1.9em; /* room for the emoji marker + a clear gap before the text */
}
.wp-block-list.is-style-red-x li::before {
	content: "❌";
	color: #e53935; /* Red color */
	position: absolute;
	left: 0;
}
.wp-block-list.is-style-green-checkmark-square li::before {
	content: "✅"; /* Unicode checkmark in box */
	color: #4caf50; /* Green color */
	position: absolute;
	left: 0;
	font-weight: bold;
	font-size: 1em;
}

/*--------------------------------------------------------------
# Checkmarked panel — is-style-checkmarked (group / column / columns)

Ports the legacy pilotdigital-2018 `.checkmarked` container. The legacy marker
(`content:"\f058"` in `'FontAwesome'` at font-weight 700) is BROKEN on the live
site — that glyph needs FontAwesome 5 Solid at weight 900, so it renders as □.
This reproduces the INTENDED marker — an aqua check-circle hanging to the left
of every paragraph — with the parent's masked-SVG technique (currentColor-style
fill via background-color), so it needs no icon font. No panel/background: the
style only decorates the paragraphs, leaving the container's own layout intact.
Applied via the block style to a Group/Row/Stack/Grid, Column, or Columns block;
migrated content also carries an inert `checkmarked-depreciated` marker.
--------------------------------------------------------------*/
.is-style-checkmarked p {
	position: relative;
	padding-left: 1.9rem; /* room for the hanging check-circle */
}
.is-style-checkmarked p::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.28em;
	width: 1rem;
	height: 1rem;
	background-color: var(--wp--preset--color--aqua);
	-webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 25'%3E%3Cpath d='M24.6094 12.5C24.6094 19.1878 19.1878 24.6094 12.5 24.6094C5.81216 24.6094 0.390625 19.1878 0.390625 12.5C0.390625 5.81216 5.81216 0.390625 12.5 0.390625C19.1878 0.390625 24.6094 5.81216 24.6094 12.5ZM11.0993 18.9118L20.0837 9.92744C20.3888 9.62236 20.3888 9.12769 20.0837 8.82261L18.9789 7.71777C18.6738 7.41265 18.1791 7.41265 17.874 7.71777L10.5469 15.0448L7.12603 11.624C6.82095 11.3189 6.32627 11.3189 6.02114 11.624L4.91631 12.7288C4.61123 13.0339 4.61123 13.5286 4.91631 13.8336L9.99443 18.9118C10.2996 19.2169 10.7942 19.2169 11.0993 18.9118Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
	        mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 25'%3E%3Cpath d='M24.6094 12.5C24.6094 19.1878 19.1878 24.6094 12.5 24.6094C5.81216 24.6094 0.390625 19.1878 0.390625 12.5C0.390625 5.81216 5.81216 0.390625 12.5 0.390625C19.1878 0.390625 24.6094 5.81216 24.6094 12.5ZM11.0993 18.9118L20.0837 9.92744C20.3888 9.62236 20.3888 9.12769 20.0837 8.82261L18.9789 7.71777C18.6738 7.41265 18.1791 7.41265 17.874 7.71777L10.5469 15.0448L7.12603 11.624C6.82095 11.3189 6.32627 11.3189 6.02114 11.624L4.91631 12.7288C4.61123 13.0339 4.61123 13.5286 4.91631 13.8336L9.99443 18.9118C10.2996 19.2169 10.7942 19.2169 11.0993 18.9118Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
}

/*--------------------------------------------------------------
# Blog index — home.html + [pilot_blog_loop] shortcode (real <article>).
PORTED from the legacy pilotdigital-2018 /blog/ layout. WordPress adds
body.blog on the posts index and <main> carries .site-main, so the legacy
selectors (.blog-index article, .entry-header, .post-thumbnail,
.cat-links, .entry-meta, .blog-categories, .pagination-nav, .staff-picks)
match directly. Legacy colour tokens are re-declared here as FSE presets.
--------------------------------------------------------------*/
.blog-index {
	--secondary: var(--wp--preset--color--navy);
	--blue: var(--wp--preset--color--vivid-cyan-blue);
}

/* content column = legacy main (3 x 14rem = 42rem), centred. The main is a flow
   container with no global padding, so the column provides its own edge spacing
   (box-sizing keeps the padding inside the 42rem cap). */
.blog-index > .blog-categories,
.blog-index > .posts-search,
.blog-index > article,
.blog-index > .pagination-nav,
.blog-header > *,
.staff-picks > * {
	max-width: 42rem;
	margin-inline: auto;
	padding-inline: 1.25rem;
	box-sizing: border-box;
}

/* --- header band: full-bleed yellow, content constrained --- */
.blog-header {
	padding-block: clamp(2.5rem, 6vw, 4.5rem);
	margin-bottom: 1.5rem;
}
.blog-header > h1 {
	margin: 0;
}
.blog-header .page-description {
	margin-top: 0.75rem;
}

/* --- category filter row (legacy .blog-categories) --- */
.blog-categories .wp-block-categories {
	list-style: none;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	margin: 2rem auto;
	padding: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 0.85rem;
	letter-spacing: 0.025rem;
	text-transform: uppercase;
}
.blog-categories .wp-block-categories li {
	margin: 0.5rem;
}
.blog-categories .wp-block-categories a {
	color: var(--wp--preset--color--navy);
	text-decoration: none;
}
.blog-categories .wp-block-categories a:hover {
	text-decoration: underline;
}

/* --- search --- */
.posts-search {
	margin-bottom: 2rem;
}

/* --- post cards: legacy .blog-index article (thumb 14rem left, header right) --- */
.blog-index article {
	display: grid;
	grid-template-columns: minmax(0, 14rem) 1fr;
	gap: 1.5rem;
	align-items: center;
	margin-bottom: 1.5rem;
}
.blog-index article .post-thumbnail {
	grid-column: 1;
	grid-row: 1;
	display: block;
	margin: 0;
}
.blog-index article .post-thumbnail img {
	display: block;
	width: 100%;
	height: auto;
}
.blog-index article .entry-header {
	grid-column: 2;
}
.blog-index article .entry-content,
.blog-index article .entry-footer {
	display: none;
}

/* category label — legacy span.cat-links (navy) with coral links */
.cat-links {
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 0.85rem;
	letter-spacing: 0.025rem;
	text-transform: uppercase;
	color: var(--wp--preset--color--navy);
	margin-bottom: 0.35rem;
}
.cat-links a {
	color: var(--wp--preset--color--coral);
	text-decoration: none;
}
.cat-links a:hover {
	text-decoration: underline;
}

/* title — legacy entry-title (h2) */
.entry-title {
	margin: 0 0 0.5rem;
	line-height: 1.1;
}
.entry-title a {
	text-decoration: none;
}

/* meta — legacy .entry-meta (navy .9rem Gilroy-Medium, bullet before date) */
.entry-meta {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.9rem;
	color: var(--wp--preset--color--navy);
}
.entry-meta a {
	color: inherit;
	text-decoration: none;
}
.entry-meta .posted-on::before {
	content: "\2022";
	padding: 0 0.35rem;
}

@media (max-width: 600px) {
	.blog-index article {
		grid-template-columns: 1fr;
	}
	.blog-index article .post-thumbnail,
	.blog-index article .entry-header {
		grid-column: 1;
	}
}

/* --- pagination — legacy .pagination-nav (rogers_numeric_posts_nav) --- */
.pagination-nav > ul {
	list-style: none;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-items: center;
	gap: 0.25rem 0.5rem;
	margin: 2rem auto 0;
	padding: 1rem 0 0;
	border-top: 3px solid var(--neutral-100);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 0.85rem;
}
.pagination-nav > ul > li {
	margin: 0;
}
.pagination-nav > ul > li > a {
	display: inline-block;
	color: var(--wp--preset--color--navy);
	text-decoration: none;
	padding: 0.4rem 0.5rem 0.25rem;
}
.pagination-nav > ul > li.active > a {
	background: var(--neutral-100);
	box-shadow: 3px 3px var(--blue);
}

/* --- Staff Picks — legacy .staff-picks (swoosh bg, white-75 panels) --- */
.staff-picks {
	margin-top: 3rem;
	padding-block: clamp(2rem, 5vw, 3.5rem);
}
.staff-picks > h2 {
	margin: 0 0 1.5rem;
}
.staff-picks-list .wp-block-post-template {
	gap: 1rem;
}
.staff-picks-list li.wp-block-post {
	padding: 1rem;
	background: rgba(255, 255, 255, 0.75);
}
.staff-picks-list .cat-links {
	color: var(--wp--preset--color--navy);
}
.staff-picks-list .cat-links a {
	color: var(--wp--preset--color--coral);
}
.staff-picks-list h3 {
	font-size: 1.5rem;
	margin: 0.5rem 0;
}
.staff-picks-list h3 a {
	text-decoration: none;
}

/* --- thumbnail image sizing (legacy: 375px tall, cover, left-cropped) --- */
.blog-index article .post-thumbnail {
	overflow: hidden;
	line-height: 0;
	transition: all 0.5s ease-in-out;
}
.blog-index article .post-thumbnail img {
	width: 100%;
	height: 375px;
	object-fit: cover;
	object-position: left center;
}
.blog-index article .post-thumbnail:hover img {
	filter: grayscale(1);
	mix-blend-mode: overlay;
}

/* rotating thumbnail background per post (legacy brand-colour cycle) */
.blog-index article:first-of-type .post-thumbnail { background: var(--wp--preset--color--coral); }
.blog-index article:nth-of-type(2n) .post-thumbnail { background: var(--aqua); }
.blog-index article:nth-of-type(3n) .post-thumbnail { background: var(--yellow); }
.blog-index article:nth-of-type(4n) .post-thumbnail { background: var(--blue); }
.blog-index article:nth-of-type(6n) .post-thumbnail { background: var(--wp--preset--color--aqua-light); }
.blog-index article:nth-of-type(7n) .post-thumbnail { background: var(--wp--preset--color--navy); }

/* --- first post on page 1 (legacy body.blog:not(.paged) article:first-of-type):
   full-bleed aqua-light band, text LEFT / image RIGHT, image pushed up --- */
body.blog:not(.paged) .blog-index > article:first-of-type {
	/* full-bleed: the main is a flow container (no global padding), so a direct
	   child spans full width by default — just lift the base 42rem cap */
	max-width: none;
	margin-inline: 0;
	margin-top: 3rem;
	margin-bottom: 2.5rem;
	padding: 0;
	background: var(--wp--preset--color--aqua-light);
	/* centred content: gutter | text | image | gutter */
	grid-template-columns:
		minmax(1rem, 1fr)
		minmax(0, 34rem)
		minmax(0, 18rem)
		minmax(1rem, 1fr);
	column-gap: 2.5rem;
	align-items: center;
}
body.blog:not(.paged) .blog-index > article:first-of-type .entry-header {
	grid-column: 2;
	padding-block: 3rem;
}
body.blog:not(.paged) .blog-index > article:first-of-type .post-thumbnail {
	grid-column: 3;
	margin-top: -3rem; /* legacy push-up so the image breaks above the band */
	margin-bottom: 0;
	align-self: start;
}
body.blog:not(.paged) .blog-index > article:first-of-type .post-thumbnail img {
	height: 420px;
}
body.blog:not(.paged) .blog-index > article:first-of-type .entry-title {
	font-size: calc(1.5rem + 0.75vw);
}

@media (max-width: 600px) {
	.blog-index article .post-thumbnail img { height: 220px; }
	body.blog:not(.paged) .blog-index > article:first-of-type {
		grid-template-columns: 1fr;
		column-gap: 0;
		padding: 1.5rem;
	}
	body.blog:not(.paged) .blog-index > article:first-of-type .entry-header,
	body.blog:not(.paged) .blog-index > article:first-of-type .post-thumbnail {
		grid-column: 1;
	}
	body.blog:not(.paged) .blog-index > article:first-of-type .entry-header {
		padding-block: 0.5rem 0;
	}
	body.blog:not(.paged) .blog-index > article:first-of-type .post-thumbnail {
		margin-top: 1rem;
	}
	body.blog:not(.paged) .blog-index > article:first-of-type .post-thumbnail img {
		height: 260px;
	}
}


/*--------------------------------------------------------------
# Support-section icons (child block styles)

Ported verbatim from the legacy support block (`handshake-icon` /
`tickets-icon` / `response-time-icon`, teal #38BFC3, scale 1.5). Now
core/paragraph block styles applied to the support-section title <p>.
The icon hangs ABOVE the paragraph (bottom:100%, in the block's top-margin
space) and is self-contained (position:relative on the <p>) so it needs no
positioned column ancestor. Registered in inc/block-styles.php.
--------------------------------------------------------------*/
.is-style-handshake,
.is-style-tickets,
.is-style-response-time {
	position: relative;
}
.is-style-handshake::before,
.is-style-tickets::before,
.is-style-response-time::before {
	position: absolute;
	left: 0;
	bottom: 100%;
	transform: scale(1.5);
	transform-origin: bottom left;
}
.is-style-handshake::before { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='26' fill='none'%3E%3Cmask id='a' width='24' height='20' x='0' y='5.184' fill='%23000' maskUnits='userSpaceOnUse'%3E%3Cpath fill='%23fff' d='M0 5.184h24v20H0z'/%3E%3Cpath d='m23.123 18.845-3.152-2.66a1.593 1.593 0 0 0-.187-1.793 1.586 1.586 0 0 0-.76-.502 1.612 1.612 0 0 0-.057-2 1.588 1.588 0 0 0-.807-.513 1.611 1.611 0 0 0-.143-1.875 1.593 1.593 0 0 0-.988-.55 1.608 1.608 0 0 0-.29-1.56 1.593 1.593 0 0 0-1.092-.563 1.59 1.59 0 0 0-1.172.371l-.06.05-1.806-.842c-.945-.491-1.773-.105-2.173.494a1.725 1.725 0 0 0-.257.63L9.785 7.2a1.61 1.61 0 0 0-2.264.192 1.607 1.607 0 0 0-.29 1.56 1.597 1.597 0 0 0-1.36 1.721c.022.254.1.493.23.704a1.598 1.598 0 0 0-.808.513 1.61 1.61 0 0 0-.057 2 1.607 1.607 0 0 0-.945 2.294l-3.153 2.66a.387.387 0 1 0 .499.593l3.164-2.67 1.269 1.07a1.592 1.592 0 0 0 1.17.371 1.59 1.59 0 0 0 1.09-.563 1.606 1.606 0 0 0 .182-1.804c.32-.077.62-.249.847-.519.314-.372.422-.845.35-1.291.452 0 .897-.188 1.201-.547.285-.286.432-.676.414-1.096-.001-.014-.006-.027-.006-.04.063.007.126.018.19.018.047 0 .093-.002.14-.007a1.566 1.566 0 0 0 1.068-.538c.286-.285.434-.673.417-1.094a1.647 1.647 0 0 0-.423-1.024l2.264-1.911a.819.819 0 0 1 .607-.192.823.823 0 0 1 .566.291c.295.35.25.877-.1 1.173l-.293.248a.387.387 0 1 0 .5.59l.002-.001a.835.835 0 0 1 1.17.1.834.834 0 0 1-.1 1.173l-.622.525a.387.387 0 0 0 .5.592.839.839 0 0 1 .606-.193.824.824 0 0 1 .565.291c.295.35.25.877-.1 1.173l-.753.636a.387.387 0 1 0 .498.592h.002a.83.83 0 0 1 1.363.706.827.827 0 0 1-.291.565l-3.518 2.97c-1.436 1.212-2.62 1.084-4.399.73a.383.383 0 0 0-.325.084l-5.298 4.472a.387.387 0 1 0 .5.592l5.155-4.352c.735.141 1.407.24 2.057.216l4.944 4.137a.387.387 0 0 0 .497-.594l-4.419-3.698c.587-.166 1.172-.475 1.787-.994l3.386-2.858 3.163 2.67a.385.385 0 0 0 .545-.045.388.388 0 0 0-.046-.546ZM11.12 8.327c-.292-.248-.24-.698-.04-.995.099-.147.474-.6 1.188-.23l1.496.698-1.633 1.38-1.007-.85-.003-.002v-.001Zm-3.38 8.818a.82.82 0 0 1-.565.291.818.818 0 0 1-.606-.192l-1.402-1.182a.83.83 0 0 1 1.066-1.277l1.41 1.189a.822.822 0 0 1 .29.565.825.825 0 0 1-.193.606Zm1.028-2.323a.834.834 0 0 1-1.172.1l-.855-.72-.003-.004-.753-.636a.835.835 0 0 1-.1-1.172.828.828 0 0 1 .566-.292.827.827 0 0 1 .607.193l.003.002 1.607 1.357c.35.296.395.822.1 1.172Zm1.573-1.862a.834.834 0 0 1-1.173.099l-1.616-1.365h-.001l-.617-.52a.825.825 0 0 1-.29-.566.826.826 0 0 1 .757-.897.823.823 0 0 1 .603.189l.004.003 2.233 1.884c.184.156.3.393.31.633a.701.701 0 0 1-.21.54Zm1.807-1.663a.824.824 0 0 1-.564.29.816.816 0 0 1-.606-.19c-.019-.016-.036-.017-.052-.008a1.69 1.69 0 0 0-.186-.193L8.507 9.31l-.005-.004-.289-.243a.834.834 0 0 1-.1-1.173.835.835 0 0 1 1.173-.1l.529.447.841.71.26.22 1.134.957a.89.89 0 0 1 .31.634.7.7 0 0 1-.212.538Z'/%3E%3C/mask%3E%3Cpath fill='%2338BFC3' d='m23.123 18.845-3.152-2.66a1.593 1.593 0 0 0-.187-1.793 1.586 1.586 0 0 0-.76-.502 1.612 1.612 0 0 0-.057-2 1.588 1.588 0 0 0-.807-.513 1.611 1.611 0 0 0-.143-1.875 1.593 1.593 0 0 0-.988-.55 1.608 1.608 0 0 0-.29-1.56 1.593 1.593 0 0 0-1.092-.563 1.59 1.59 0 0 0-1.172.371l-.06.05-1.806-.842c-.945-.491-1.773-.105-2.173.494a1.725 1.725 0 0 0-.257.63L9.785 7.2a1.61 1.61 0 0 0-2.264.192 1.607 1.607 0 0 0-.29 1.56 1.597 1.597 0 0 0-1.36 1.721c.022.254.1.493.23.704a1.598 1.598 0 0 0-.808.513 1.61 1.61 0 0 0-.057 2 1.607 1.607 0 0 0-.945 2.294l-3.153 2.66a.387.387 0 1 0 .499.593l3.164-2.67 1.269 1.07a1.592 1.592 0 0 0 1.17.371 1.59 1.59 0 0 0 1.09-.563 1.606 1.606 0 0 0 .182-1.804c.32-.077.62-.249.847-.519.314-.372.422-.845.35-1.291.452 0 .897-.188 1.201-.547.285-.286.432-.676.414-1.096-.001-.014-.006-.027-.006-.04.063.007.126.018.19.018.047 0 .093-.002.14-.007a1.566 1.566 0 0 0 1.068-.538c.286-.285.434-.673.417-1.094a1.647 1.647 0 0 0-.423-1.024l2.264-1.911a.819.819 0 0 1 .607-.192.823.823 0 0 1 .566.291c.295.35.25.877-.1 1.173l-.293.248a.387.387 0 1 0 .5.59l.002-.001a.835.835 0 0 1 1.17.1.834.834 0 0 1-.1 1.173l-.622.525a.387.387 0 0 0 .5.592.839.839 0 0 1 .606-.193.824.824 0 0 1 .565.291c.295.35.25.877-.1 1.173l-.753.636a.387.387 0 1 0 .498.592h.002a.83.83 0 0 1 1.363.706.827.827 0 0 1-.291.565l-3.518 2.97c-1.436 1.212-2.62 1.084-4.399.73a.383.383 0 0 0-.325.084l-5.298 4.472a.387.387 0 1 0 .5.592l5.155-4.352c.735.141 1.407.24 2.057.216l4.944 4.137a.387.387 0 0 0 .497-.594l-4.419-3.698c.587-.166 1.172-.475 1.787-.994l3.386-2.858 3.163 2.67a.385.385 0 0 0 .545-.045.388.388 0 0 0-.046-.546ZM11.12 8.327c-.292-.248-.24-.698-.04-.995.099-.147.474-.6 1.188-.23l1.496.698-1.633 1.38-1.007-.85-.003-.002v-.001Zm-3.38 8.818a.82.82 0 0 1-.565.291.818.818 0 0 1-.606-.192l-1.402-1.182a.83.83 0 0 1 1.066-1.277l1.41 1.189a.822.822 0 0 1 .29.565.825.825 0 0 1-.193.606Zm1.028-2.323a.834.834 0 0 1-1.172.1l-.855-.72-.003-.004-.753-.636a.835.835 0 0 1-.1-1.172.828.828 0 0 1 .566-.292.827.827 0 0 1 .607.193l.003.002 1.607 1.357c.35.296.395.822.1 1.172Zm1.573-1.862a.834.834 0 0 1-1.173.099l-1.616-1.365h-.001l-.617-.52a.825.825 0 0 1-.29-.566.826.826 0 0 1 .757-.897.823.823 0 0 1 .603.189l.004.003 2.233 1.884c.184.156.3.393.31.633a.701.701 0 0 1-.21.54Zm1.807-1.663a.824.824 0 0 1-.564.29.816.816 0 0 1-.606-.19c-.019-.016-.036-.017-.052-.008a1.69 1.69 0 0 0-.186-.193L8.507 9.31l-.005-.004-.289-.243a.834.834 0 0 1-.1-1.173.835.835 0 0 1 1.173-.1l.529.447.841.71.26.22 1.134.957a.89.89 0 0 1 .31.634.7.7 0 0 1-.212.538Z'/%3E%3Cpath stroke='%2338BFC3' stroke-width='.2' d='m23.123 18.845-3.152-2.66a1.593 1.593 0 0 0-.187-1.793 1.586 1.586 0 0 0-.76-.502 1.612 1.612 0 0 0-.057-2 1.588 1.588 0 0 0-.807-.513 1.611 1.611 0 0 0-.143-1.875 1.593 1.593 0 0 0-.988-.55 1.608 1.608 0 0 0-.29-1.56 1.593 1.593 0 0 0-1.092-.563 1.59 1.59 0 0 0-1.172.371l-.06.05-1.806-.842c-.945-.491-1.773-.105-2.173.494a1.725 1.725 0 0 0-.257.63L9.785 7.2a1.61 1.61 0 0 0-2.264.192 1.607 1.607 0 0 0-.29 1.56 1.597 1.597 0 0 0-1.36 1.721c.022.254.1.493.23.704a1.598 1.598 0 0 0-.808.513 1.61 1.61 0 0 0-.057 2 1.607 1.607 0 0 0-.945 2.294l-3.153 2.66a.387.387 0 1 0 .499.593l3.164-2.67 1.269 1.07a1.592 1.592 0 0 0 1.17.371 1.59 1.59 0 0 0 1.09-.563 1.606 1.606 0 0 0 .182-1.804c.32-.077.62-.249.847-.519.314-.372.422-.845.35-1.291.452 0 .897-.188 1.201-.547.285-.286.432-.676.414-1.096-.001-.014-.006-.027-.006-.04.063.007.126.018.19.018.047 0 .093-.002.14-.007a1.566 1.566 0 0 0 1.068-.538c.286-.285.434-.673.417-1.094a1.647 1.647 0 0 0-.423-1.024l2.264-1.911a.819.819 0 0 1 .607-.192.823.823 0 0 1 .566.291c.295.35.25.877-.1 1.173l-.293.248a.387.387 0 1 0 .5.59l.002-.001a.835.835 0 0 1 1.17.1.834.834 0 0 1-.1 1.173l-.622.525a.387.387 0 0 0 .5.592.839.839 0 0 1 .606-.193.824.824 0 0 1 .565.291c.295.35.25.877-.1 1.173l-.753.636a.387.387 0 1 0 .498.592h.002a.83.83 0 0 1 1.363.706.827.827 0 0 1-.291.565l-3.518 2.97c-1.436 1.212-2.62 1.084-4.399.73a.383.383 0 0 0-.325.084l-5.298 4.472a.387.387 0 1 0 .5.592l5.155-4.352c.735.141 1.407.24 2.057.216l4.944 4.137a.387.387 0 0 0 .497-.594l-4.419-3.698c.587-.166 1.172-.475 1.787-.994l3.386-2.858 3.163 2.67a.385.385 0 0 0 .545-.045.388.388 0 0 0-.046-.546ZM11.12 8.327c-.292-.248-.24-.698-.04-.995.099-.147.474-.6 1.188-.23l1.496.698-1.633 1.38-1.007-.85-.003-.002v-.001Zm-3.38 8.818a.82.82 0 0 1-.565.291.818.818 0 0 1-.606-.192l-1.402-1.182a.83.83 0 0 1 1.066-1.277l1.41 1.189a.822.822 0 0 1 .29.565.825.825 0 0 1-.193.606Zm1.028-2.323a.834.834 0 0 1-1.172.1l-.855-.72-.003-.004-.753-.636a.835.835 0 0 1-.1-1.172.828.828 0 0 1 .566-.292.827.827 0 0 1 .607.193l.003.002 1.607 1.357c.35.296.395.822.1 1.172Zm1.573-1.862a.834.834 0 0 1-1.173.099l-1.616-1.365h-.001l-.617-.52a.825.825 0 0 1-.29-.566.826.826 0 0 1 .757-.897.823.823 0 0 1 .603.189l.004.003 2.233 1.884c.184.156.3.393.31.633a.701.701 0 0 1-.21.54Zm1.807-1.663a.824.824 0 0 1-.564.29.816.816 0 0 1-.606-.19c-.019-.016-.036-.017-.052-.008a1.69 1.69 0 0 0-.186-.193L8.507 9.31l-.005-.004-.289-.243a.834.834 0 0 1-.1-1.173.835.835 0 0 1 1.173-.1l.529.447.841.71.26.22 1.134.957a.89.89 0 0 1 .31.634.7.7 0 0 1-.212.538Z' mask='url(%23a)'/%3E%3Cpath fill='%2338BFC3' stroke='%2338BFC3' stroke-width='.1' d='M13.68 3.86a.437.437 0 0 0 .437-.437V1.387a.437.437 0 1 0-.874 0v2.036c0 .242.195.437.437.437ZM19.162 4.795l1.204-1.641a.437.437 0 1 0-.705-.517l-1.204 1.64a.437.437 0 1 0 .705.517ZM8.81 4.888 6.994 3.154 8.2 4.794a.436.436 0 0 0 .61.094ZM7.699 2.636a.437.437 0 0 0-.611-.093l1.816 1.735-1.205-1.642Z'/%3E%3C/svg%3E"); }
.is-style-tickets::before { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='23' height='24' fill='none'%3E%3Cpath fill='%2338BFC3' d='M22.948 4.211c0-.908-.739-1.646-1.647-1.646h-2.544a2.255 2.255 0 0 0-.417-1.298L17.622.254a.605.605 0 0 0-.983 0l-.642.9-.638-.9c-.226-.318-.758-.318-.983 0l-.64.9-.641-.9a.603.603 0 0 0-.983 0l-.637.9-.637-.9a.604.604 0 0 0-.49-.254h-.002a.605.605 0 0 0-.492.255l-.638.9L8.572.25A.604.604 0 0 0 8.082 0H8.08a.603.603 0 0 0-.49.254l-.637.899-.637-.898c-.225-.319-.758-.32-.984 0l-.718 1.012c-.27.38-.414.83-.416 1.298H1.646C.738 2.565 0 3.303 0 4.21v13.13c0 .907.738 1.646 1.646 1.646H9.27c-.203 1.067-.973 2.842-2.48 4.015H5.702a.499.499 0 1 0 0 .998h11.546a.499.499 0 1 0 0-.998h-1.09c-1.507-1.173-2.277-2.948-2.48-4.015h7.622c.908 0 1.647-.739 1.647-1.646V4.21ZM8.264 23.002c1.207-1.297 1.857-2.9 2.02-4.012h2.381c.162 1.112.811 2.715 2.019 4.012h-6.42ZM21.95 4.211v10.367h-3.192V3.562h2.543a.65.65 0 0 1 .649.649ZM5.194 2.579c0-.265.08-.52.234-.735l.396-.559.637.899c.226.318.758.319.984 0l.638-.9.643.903a.603.603 0 0 0 .49.251h.002a.603.603 0 0 0 .49-.254l.638-.899.638.901a.575.575 0 0 0 .492.252.603.603 0 0 0 .49-.254l.639-.9.64.9c.227.318.76.319.984 0l.638-.899.637.9c.227.318.76.316.983 0l.642-.9.397.559c.154.216.234.47.234.735v11.997H5.194V2.58Zm-3.548.983h2.55v11.016H.998V4.21a.65.65 0 0 1 .648-.649ZM21.301 17.99H1.646a.65.65 0 0 1-.648-.649v-1.764H21.95v1.764a.65.65 0 0 1-.649.65Z'/%3E%3Cpath fill='%2338BFC3' d='M11.853 16.276h-.752a.499.499 0 1 0 0 .997h.752a.499.499 0 1 0 0-.997ZM6.646 4.624h9.662a.499.499 0 1 0 0-.998H6.646a.499.499 0 1 0 0 .998ZM6.646 6.806h9.662a.499.499 0 1 0 0-.998H6.646a.499.499 0 1 0 0 .998ZM16.309 7.99h-6.171a.499.499 0 1 0 0 .998h6.17a.499.499 0 1 0 0-.998ZM16.309 10.172h-6.171a.499.499 0 1 0 0 .998h6.17a.499.499 0 1 0 0-.998ZM16.309 12.354h-6.171a.499.499 0 1 0 0 .998h6.17a.499.499 0 1 0 0-.998ZM8.067 7.66l-.685.684-.158-.158a.499.499 0 1 0-.705.705l.51.511a.497.497 0 0 0 .706 0l1.037-1.037a.499.499 0 1 0-.705-.705ZM6.836 13.352h1.506a.69.69 0 0 0 .689-.688v-1.502a.69.69 0 0 0-.689-.688H6.836a.69.69 0 0 0-.689.688v1.502c0 .38.31.688.69.688Zm.31-1.88h.887v.883h-.888v-.883Z'/%3E%3C/svg%3E"); }
.is-style-response-time::before { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath fill='%2338BFC3' fill-rule='evenodd' d='M14.352 1.299a11.256 11.256 0 0 1 .962.258.522.522 0 1 0 .315-.995A12.635 12.635 0 0 0 14.576.28a.522.522 0 0 0-.224 1.019ZM17.041 2.272a11.3 11.3 0 0 1 .863.498.522.522 0 1 0 .562-.88 12.598 12.598 0 0 0-.944-.545.522.522 0 0 0-.48.927ZM19.387 3.908a11.244 11.244 0 0 1 .705.705.522.522 0 1 0 .77-.704 12.66 12.66 0 0 0-.77-.771.522.522 0 0 0-.705.77ZM21.23 6.096a11.115 11.115 0 0 1 .498.863.522.522 0 1 0 .926-.48 12.566 12.566 0 0 0-.545-.945.522.522 0 0 0-.879.562ZM22.444 8.686a11.289 11.289 0 0 1 .258.962.522.522 0 1 0 1.019-.224 12.715 12.715 0 0 0-.282-1.054.522.522 0 0 0-.995.316ZM22.946 11.502c.007.165.01.331.01.498 0 6.047-4.909 10.956-10.956 10.956S1.043 18.047 1.043 12 5.953 1.043 12 1.043c.167 0 .333.004.498.011a.522.522 0 0 0 .047-1.042A12.614 12.614 0 0 0 12 0C5.377 0 0 5.377 0 12s5.377 12 12 12 12-5.377 12-12c0-.183-.004-.364-.012-.545a.522.522 0 0 0-1.042.047Z' clip-rule='evenodd'/%3E%3Cpath fill='%2338BFC3' fill-rule='evenodd' d='M11.478 6.718V12c0 .288.234.522.522.522h5.217a.522.522 0 0 0 0-1.044h-4.695v-4.76a.522.522 0 0 0-1.044 0Z' clip-rule='evenodd'/%3E%3Cpath fill='%2338BFC3' fill-rule='evenodd' d='M12 2.087c-5.471 0-9.913 4.442-9.913 9.913S6.529 21.913 12 21.913c5.47 0 9.913-4.442 9.913-9.913S17.471 2.087 12 2.087Zm.522 1.059a8.811 8.811 0 0 1 3.454.925L15.2 5.414a.522.522 0 0 0 .904.521l.775-1.342a8.933 8.933 0 0 1 2.528 2.528l-1.342.775a.522.522 0 0 0 .521.904l1.343-.776a8.812 8.812 0 0 1 .925 3.454h-1.55a.522.522 0 0 0 0 1.044h1.55a8.812 8.812 0 0 1-.925 3.454l-1.343-.776a.522.522 0 0 0-.521.904l1.342.775a8.93 8.93 0 0 1-2.528 2.528l-.775-1.342a.522.522 0 0 0-.904.521l.776 1.343a8.811 8.811 0 0 1-3.454.925v-1.55a.522.522 0 0 0-1.044 0v1.55a8.811 8.811 0 0 1-3.454-.925l.776-1.343a.522.522 0 0 0-.904-.521l-.775 1.342a8.932 8.932 0 0 1-2.528-2.528l1.342-.775a.522.522 0 0 0-.521-.904l-1.343.776a8.812 8.812 0 0 1-.925-3.454h1.55a.522.522 0 0 0 0-1.044h-1.55a8.812 8.812 0 0 1 .925-3.454l1.343.776a.522.522 0 0 0 .521-.904l-1.342-.775a8.932 8.932 0 0 1 2.528-2.528l.775 1.342a.522.522 0 0 0 .904-.521L8.024 4.07a8.811 8.811 0 0 1 3.454-.925v1.55a.522.522 0 0 0 1.044 0v-1.55Z' clip-rule='evenodd'/%3E%3C/svg%3E"); }

/*--------------------------------------------------------------
# Complementary-colour system — on-light (default) ground

No text colours are set in the editor; the compcolor-span accent (the
editor's "Complementary Colour" format) is derived from the section
background. This block = the ON-LIGHT default: a group with NO coloured
background, or a white-background group. Colour is canonical from the
colorSet artifact's Complement-on-light column (navy -> blue-dark).
Mid / dark grounds override in later blocks.
--------------------------------------------------------------*/
:where(.wp-block-group:not(.has-background),
       .wp-block-group.has-white-background-color)
	:is(p, h1, h2, h3, h4, h5, h6, li) > span.compcolor-span {
	color: var(--color-blue-dark);
}

/* 2 · all backgrounds → blue-dark */
.has-background
	:is(p, h1, h2, h3, h4, h5, h6, li) > span.compcolor-span {
	color: var(--color-blue-dark);
}

/* 3 · navy ground */
.has-navy-background-color
	:is(p, h1, h2, h3, h4, h5, h6, li) > span.compcolor-span {
	color: var(--wp--preset--color--yellow);
}

/*--------------------------------------------------------------
# WCAG contrast flag

Marker for blocks whose text/background pairing the editor flags for poor
contrast (class added manually: .wcag-flagged-contrast). The ::after adds a
small warning cue so flagged blocks are visible in the rendered page too.
--------------------------------------------------------------*/
.wcag-flagged-contrast::after {
	content: "!";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.2em;
	height: 1.2em;
	margin-left: 0.45em;
	border-radius: 50%;
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--yellow);
	box-shadow: 0 0 0 1.5px rgba(255,255,255,.65);
	font: 700 0.72em/1 system-ui, sans-serif;
	vertical-align: middle;
}

/*--------------------------------------------------------------
# Contrast fixes

Child rules that correct direct text/background contrast conflicts, plus a
"fixed" marker (.wcag-fixed-contrast) mirroring the flag badge, in aqua.
--------------------------------------------------------------*/
/* Direct conflict: yellow text on a yellow ground (direct children) -> default navy-dark */
.has-yellow-background-color > .has-yellow-color {
	color: var(--wp--preset--color--navy-dark) !important;
}
/* Direct conflict: navy text on a navy ground (direct children) -> white (dark ground) */
.has-navy-background-color > .has-navy-color {
	color: var(--wp--preset--color--white) !important;
}
/* Direct conflict: grey text on a grey ground (direct children) -> default navy-dark */
.has-grey-background-color > .has-grey-color {
	color: var(--wp--preset--color--navy-dark) !important;
}
/* Direct conflict: black text on a black ground (direct children) -> white (dark ground) */
.has-black-background-color > .has-black-color {
	color: var(--wp--preset--color--white) !important;
}
.wcag-fixed-contrast::before {
	content: "✓";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.2em;
	height: 1.2em;
	margin-right: 0.45em;
	border-radius: 50%;
	background: var(--wp--preset--color--aqua);
	color: var(--wp--preset--color--white);
	box-shadow: 0 0 0 1.5px rgba(255,255,255,.65);
	font: 700 0.72em/1 system-ui, sans-serif;
	vertical-align: middle;
}


/*--------------------------------------------------------------
# Complementary colour system - Layer 2: specific comp per (text x background)

Comp-span colour keyed to the block text colour AND the section background,
from the canonical colorset.json matrix. Emitted only where the value differs
from the per-ground default (blue-dark; yellow on navy). Fixed same-colour
paragraphs follow the FIXED colour comp, which equals the default, so no rule.
Specificity (0,3,1) beats the Layer-1 defaults (0,2,2).
--------------------------------------------------------------*/
/* on yellow */
.has-yellow-background-color .has-white-color > span.compcolor-span { color: var(--wp--preset--color--navy); }
.has-yellow-background-color .has-black-color > span.compcolor-span { color: var(--wp--preset--color--white); }
.has-yellow-background-color .has-grey-color > span.compcolor-span { color: var(--wp--preset--color--navy); }
/* on coral */
.has-coral-background-color .has-white-color > span.compcolor-span { color: var(--wp--preset--color--yellow); }
.has-coral-background-color .has-black-color > span.compcolor-span { color: var(--wp--preset--color--white); }
.has-coral-background-color .has-yellow-color > span.compcolor-span { color: var(--wp--preset--color--navy-dark); }
.has-coral-background-color .has-grey-color > span.compcolor-span { color: var(--wp--preset--color--yellow); }
/* on aqua */
.has-aqua-background-color .has-white-color > span.compcolor-span { color: var(--wp--preset--color--yellow); }
.has-aqua-background-color .has-black-color > span.compcolor-span { color: var(--wp--preset--color--white); }
.has-aqua-background-color .has-yellow-color > span.compcolor-span { color: var(--wp--preset--color--navy-dark); }
.has-aqua-background-color .has-grey-color > span.compcolor-span { color: var(--wp--preset--color--yellow); }
/* on aqua-light */
.has-aqua-light-background-color .has-white-color > span.compcolor-span { color: var(--wp--preset--color--yellow); }
.has-aqua-light-background-color .has-black-color > span.compcolor-span { color: var(--wp--preset--color--white); }
.has-aqua-light-background-color .has-yellow-color > span.compcolor-span { color: var(--wp--preset--color--navy-dark); }
.has-aqua-light-background-color .has-grey-color > span.compcolor-span { color: var(--wp--preset--color--yellow); }
/* on grey */
.has-grey-background-color .has-white-color > span.compcolor-span { color: var(--wp--preset--color--yellow); }
.has-grey-background-color .has-black-color > span.compcolor-span { color: var(--wp--preset--color--white); }
.has-grey-background-color .has-yellow-color > span.compcolor-span { color: var(--wp--preset--color--navy-dark); }
/* on navy */
.has-navy-background-color .has-yellow-color > span.compcolor-span { color: var(--wp--preset--color--white); }
/* on black */
.has-black-background-color .has-white-color > span.compcolor-span { color: var(--wp--preset--color--yellow); }
.has-black-background-color .has-black-color > span.compcolor-span { color: var(--wp--preset--color--yellow); }
.has-black-background-color .has-yellow-color > span.compcolor-span { color: var(--wp--preset--color--navy-dark); }
.has-black-background-color .has-grey-color > span.compcolor-span { color: var(--wp--preset--color--yellow); }

/* --------------------------------------------------------------
   Narrow-screen (< 480px) font-size overrides.
   Redefines the WP preset font-size vars for small screens; anything using
   var(--wp--preset--font-size--*) or a .has-*-font-size class scales with them.
   `:root:root` (specificity 0,2,0) is used so it beats WP's global-styles
   `:root` (0,1,0) regardless of stylesheet order. Values below start at the
   desktop defaults — adjust per size as needed.
   -------------------------------------------------------------- */
@media (max-width: 479.98px) {
  :root:root {
    --wp--preset--font-size--x-small: 12px;
    --wp--preset--font-size--small: 13px;
    --wp--preset--font-size--medium: 20px;
    --wp--preset--font-size--large: 36px;
    --wp--preset--font-size--x-large: 42px;
    --wp--preset--font-size--hero-large: clamp(56px, 8vw, 120px);
  }
  /* Heading sizes at < 480px — big cut on the large headings, tapering off;
     h4/h5/h6 keep their clamp-min sizes. :root hN (0,1,1) reliably overrides
     WP's clamp-based hN {} rules (0,0,1). */
  :root h1 { font-size: 34px; }
  :root h2 { font-size: 26px; }
  :root h3 { font-size: 20px; }
}

/* --------------------------------------------------------------
   .chi-flag — small navy Chicago flag icon above a heading (ported from
   legacy pilotdigital-2018). Used on the Contact page HQ heading:
   <h3 class="wp-block-heading chi-flag">. Self-contained SVG data-URI.
   -------------------------------------------------------------- */
h3.chi-flag {
  margin-top: 1rem;
}

.chi-flag::before {
  content: url(data:image/svg+xml;base64,PHN2ZyBkYXRhLW5hbWU9IkxheWVyIDEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDcyMCAzMjAiPjxwYXRoIGQ9Ik0xNTAgMTAwbDExIDQxIDQxLTExLTMwIDMwIDMwIDMwLTQxLTExLTExIDQxLTExLTQxLTQxIDExIDMwLTMwLTMwLTMwIDQxIDExem0xNDAgMGwxMSA0MSA0MS0xMS0zMCAzMCAzMCAzMC00MS0xMS0xMSA0MS0xMS00MS00MSAxMSAzMC0zMC0zMC0zMCA0MSAxMXptMTQwIDBsMTEgNDEgNDEtMTEtMzAgMzAgMzAgMzAtNDEtMTEtMTEgNDEtMTEtNDEtNDEgMTEgMzAtMzAtMzAtMzAgNDEgMTF6bTE0MCAwbDExIDQxIDQxLTExLTMwIDMwIDMwIDMwLTQxLTExLTExIDQxLTExLTQxLTQxIDExIDMwLTMwLTMwLTMwIDQxIDExek0wIDI0MGg3MjB2ODBIME0wIDBoNzIwdjgwSDAiIGZpbGw9IiMwMDI0NDUiLz48L3N2Zz4=);
  display: block;
  width: 50px;
}

/* --------------------------------------------------------------
   .headline.slide — rotating-word headline (ported from legacy
   pilotdigital-2018 homepage hero: "Your [SEO/PPC/AI/web]"). The <b> words
   are cycled by the rotator already enqueued in assets/js/pilot_digital_script.js
   (jQuery). Size + weight INHERIT the surrounding heading (legacy 3rem dropped);
   keyframes namespaced to avoid collisions.
   -------------------------------------------------------------- */
.headline .words-wrapper {
  display: inline-block;
  position: relative;
}
.headline .words-wrapper b {
  display: inline-block;
  font-weight: inherit;
  position: absolute;
  white-space: nowrap;
  left: 0;
  top: 0;
}
.headline .words-wrapper b.is-visible {
  position: relative;
}
.headline.slide .words-wrapper {
  overflow: hidden;
  vertical-align: top;
}
.headline.slide b {
  opacity: 0;
  top: 0.2em;
}
.headline.slide b.is-visible {
  top: 0;
  opacity: 1;
  animation: pilot-headline-slide-in 0.5s;
}
.headline.slide b.is-hidden {
  animation: pilot-headline-slide-out 0.5s;
}
@media (prefers-reduced-motion: reduce) {
  .headline.slide b { animation: none !important; }
}
@keyframes pilot-headline-slide-in {
  0%   { opacity: 0; transform: translateY(-100%); }
  60%  { opacity: 1; transform: translateY(20%); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes pilot-headline-slide-out {
  0%   { opacity: 1; transform: translateY(0); }
  60%  { opacity: 0; transform: translateY(120%); }
  100% { opacity: 0; transform: translateY(120%); }
}

/*--------------------------------------------------------------
# Homepage — .off-set-posts

This is to force the second column of the posts to span all the
rows to create an offset alternating blog pattern.

--------------------------------------------------------------*/

.off-set-posts .wp-block-query .wp-block-post-template {
    grid-row-gap: 18rem;
}

.off-set-posts .wp-block-query .wp-block-post-template li:nth-child(2) {
    grid-row: 1 / 3;
    grid-column: 2;
    align-self: center;
}

/*--------------------------------------------------------------
# Homepage — .compass-needle-icon

adds compass icon as :before element and allows for different
colors for each compass needle

--------------------------------------------------------------*/

.compass-needle-icon {
--needle-top: #ea494a;
  --needle-bottom: #001B34;
  --icon-size: 1.4em;
}

.has-navy-background-color .compass-needle-icon {
      --needle-bottom: #fff;
}

.compass-needle-icon::before {
  content: "";
  display: inline-block;
  width: var(--icon-size);
  height: var(--icon-size);
  margin-right: 0.6em;
  vertical-align: middle;
  background: linear-gradient(45deg, var(--needle-bottom) 50%, var(--needle-top) 50%);
  -webkit-mask: var(--compass) center / contain no-repeat;
          mask: var(--compass) center / contain no-repeat;
  --compass: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 21'%3E%3Cpath d='M14.9046 12.5988L20.9994 0L8.125 5.87945L14.9046 12.5988Z'/%3E%3Cpath d='M0 20.4719L12.7032 14.4313L5.93216 7.71191L0 20.4719Z'/%3E%3C/svg%3E");
}

/*--------------------------------------------------------------
# Homepage — .video-bg-right-aligned

Forces background image used in cover image to be right aligned

--------------------------------------------------------------*/

.video-bg-right-aligned .wp-block-cover__image-background, 
.video-bg-right-aligned .wp-block-cover__video-background {
    object-fit: contain!important;
    object-position: right;
}



/*==============================================================
  ROGERS MACHINERY — components
  Everything below is new for the Rogers fork, built from
  design/Hompage Mock-up-option1.png and design/Blog Page.png
  (1900px-wide mockups; fluid sizes clamp to those values at the top end).
  All classes are prefixed `rm-` so they never collide with the
  inherited Pilot component CSS above.
==============================================================*/

/*--------------------------------------------------------------
# Rogers — utilities
--------------------------------------------------------------*/
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

/* Every Rogers band handles its own vertical rhythm. */
.rm-front,
.rm-blog {
	margin-block-start: 0;
}
.rm-front > *,
.rm-front__content > * {
	margin-block-start: 0;
}

/*--------------------------------------------------------------
# Rogers — buttons + links (design/button-selection-ideas.pdf)

Button hierarchy from the PDF, in the site's brand colours. Registered
as block styles in inc/block-styles.php and as inserter variations in
assets/js/rogers-button-variations.js. Contrast (WCAG 2.x):
  Primary (default)    blue #28ACE2 + deep blue #00303F   5.4:1
  Primary – Orange     orange #F6861F + deep blue         5.6:1
  Secondary – Outline  white + blue border + deep blue   17.8:1
  Secondary – Solid    dark blue #004861 + white         10.0:1
  Hover (all)          orange #F6861F + deep blue         5.6:1
  Hover (Orange btn)   dark blue + white                 10.0:1
theme.json's :hover rule has zero specificity, so each style states its
own hover. A 2px border on every button keeps outline + filled buttons
the same size when placed side by side.
--------------------------------------------------------------*/
.wp-block-button .wp-block-button__link {
	border: 2px solid transparent;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.wp-block-button .wp-block-button__link:focus-visible {
	outline: 3px solid var(--wp--preset--color--orange);
	outline-offset: 2px;
}

/* Primary – Orange (the PDF's "Primary Example 2" accent) */
.wp-block-button.is-style-rm-primary-alt .wp-block-button__link {
	background-color: var(--wp--preset--color--orange);
	color: var(--wp--preset--color--deep-blue);
}
/* Secondary – Outline */
.wp-block-button.is-style-rm-secondary .wp-block-button__link {
	background-color: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--blue);
	color: var(--wp--preset--color--deep-blue);
}
/* Secondary – Solid */
.wp-block-button.is-style-rm-secondary-solid .wp-block-button__link {
	background-color: var(--wp--preset--color--dark-blue);
	color: var(--wp--preset--color--white);
}
/* shared hover / focus for the styled variants: brand orange */
.wp-block-button.is-style-rm-secondary .wp-block-button__link:hover,
.wp-block-button.is-style-rm-secondary .wp-block-button__link:focus-visible,
.wp-block-button.is-style-rm-secondary-solid .wp-block-button__link:hover,
.wp-block-button.is-style-rm-secondary-solid .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--orange);
	border-color: var(--wp--preset--color--orange);
	color: var(--wp--preset--color--deep-blue);
}
/* already orange at rest, so it hovers to dark blue instead */
.wp-block-button.is-style-rm-primary-alt .wp-block-button__link:hover,
.wp-block-button.is-style-rm-primary-alt .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--dark-blue);
	border-color: var(--wp--preset--color--dark-blue);
	color: var(--wp--preset--color--white);
}

/* Link – Arrow: bold dark-blue link + chevron (PDF "Link Style 1") */
.is-style-rm-link-arrow a {
	color: var(--wp--preset--color--dark-blue);
	font-weight: 700;
	text-decoration: none;
}
.is-style-rm-link-arrow a::after {
	content: "";
	display: inline-block;
	width: 0.42em;
	height: 0.42em;
	margin-left: 0.4em;
	border-top: 0.14em solid currentColor;
	border-right: 0.14em solid currentColor;
	transform: translateY(-0.1em) rotate(45deg);
	transition: transform 0.15s ease;
}
.is-style-rm-link-arrow a:hover,
.is-style-rm-link-arrow a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.18em;
}
.is-style-rm-link-arrow a:hover::after {
	transform: translate(0.2em, -0.1em) rotate(45deg);
}
/* Link – Underline (PDF "Link Style 2") */
.is-style-rm-link-underline a {
	color: var(--wp--preset--color--dark-blue);
	font-weight: 700;
	text-decoration: underline;
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.2em;
}
.is-style-rm-link-underline a:hover,
.is-style-rm-link-underline a:focus-visible {
	text-decoration-thickness: 0.16em;
}
/*--------------------------------------------------------------
# Rogers — header (patterns/header.php)
--------------------------------------------------------------*/
.rm-header {
	background: var(--wp--preset--color--white);
	padding-block: 8px 0;
}
.rm-header__inner {
	gap: clamp(1rem, 3vw, 3rem);
	align-items: stretch;
}
.rm-header__logo {
	flex: 0 0 auto;
	margin: 0;
	align-self: center;
}
.rm-header__logo img {
	width: clamp(90px, 9vw, 170px) !important;
	height: auto;
}
.rm-header__right {
	flex: 1 1 auto;
	gap: clamp(0.75rem, 2vw, 2.25rem);
	align-items: flex-end !important;
	justify-content: space-between !important;
	min-width: 0;
}
.rm-header__utility {
	gap: 6px;
	align-items: stretch;
}

/* search: bordered input with an icon button, per mockup */
.rm-header__search .wp-block-search__inside-wrapper {
	border: 1px solid #D9D9D9;
	padding: 0;
	background: var(--wp--preset--color--white);
}
.rm-header__search .wp-block-search__input {
	border: 0;
	width: clamp(180px, 16vw, 310px);
	padding: 0.65rem 1rem;
	font-size: 15px;
	font-family: var(--font-body);
}
.rm-header__search .wp-block-search__button {
	margin: 0;
	border: 0;
	border-left: 1px solid #D9D9D9;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--blue);
	padding: 0 0.85rem;
}
.rm-header__search .wp-block-search__button svg {
	fill: currentColor;
	width: 26px;
	height: 26px;
}

/* utility buttons (button-selection-ideas.pdf): Find a Distributor = Primary,
   Contact Us + Login = Secondary – Outline. Colours come from the button
   styles ("Rogers — buttons + links"); this only sizes them for the bar. */
.rm-header__buttons {
	gap: 6px;
}
.rm-btn-utility .wp-block-button__link {
	padding: 0.75rem 1.4rem;
	font-size: clamp(14px, 0.95vw, 17px);
	height: 100%;
	display: flex;
	align-items: center;
	box-sizing: border-box;
}

/* WooCommerce mini-cart icon, after the utility buttons
   (moved out of the primary nav by inc/woocommerce.php) */
.rm-header__icon {
	display: flex;
	align-items: center;
	margin: 0;
	color: var(--wp--preset--color--blue);
	font-size: 15px;
}
.rm-header__icon a,
.rm-header__icon .wc-block-mini-cart__button {
	color: inherit;
	padding: 0 0.25rem;
}
.rm-header__icon svg {
	width: 30px;
	height: 30px;
}

/* primary nav: spaced uppercase, spans the right column */
.rm-primary-nav {
	align-self: stretch;
	font-size: clamp(15px, 1.45vw, 28px);
	padding-bottom: 0.6rem;
}
.rm-primary-nav .wp-block-navigation__container {
	width: 100%;
	justify-content: space-between;
	gap: clamp(1rem, 3vw, 4rem);
}
.rm-primary-nav .wp-block-navigation-item__content {
	color: var(--wp--preset--color--black);
}
.rm-primary-nav .wp-block-navigation-item__content:hover,
.rm-primary-nav .wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--orange);
}

@media (max-width: 1100px) {
	.rm-header__search { display: none; }
}
@media (max-width: 781px) {
	.rm-header__inner { align-items: center; }
	.rm-header__right { flex-direction: row-reverse !important; align-items: center !important; }
	.rm-btn-utility .wp-block-button__link { padding: 0.5rem 0.7rem; font-size: 13px; }
	.rm-btn-utility--hide-mobile { display: none; }
	.rm-primary-nav { align-self: center; padding-bottom: 0; }
}

/*--------------------------------------------------------------
# Rogers — home hero (patterns/home-hero.php)
--------------------------------------------------------------*/
.rm-hero__panel {
	background: var(--rm-hero-overlay);
	padding: clamp(2rem, 3.5vw, 3.75rem) clamp(1.5rem, 4vw, 4.5rem);
	width: 100%;
	max-width: 1640px !important;
	margin-inline: auto !important;
	box-sizing: border-box;
}
.rm-hero__cols {
	gap: clamp(1.5rem, 4vw, 4rem);
}
.rm-hero .rm-hero__title {
	color: var(--wp--preset--color--white);
	font-size: clamp(34px, 3.6vw, 68px);
	line-height: 1.27;
	letter-spacing: 0.01em;
	margin: 0;
}
.rm-hero .rm-hero__intro {
	color: var(--wp--preset--color--white);
	font-weight: 700;
	font-size: clamp(17px, 1.65vw, 32px);
	line-height: 1.4;
	margin-top: clamp(1.25rem, 3vw, 3rem);
}
/* hero CTA = Primary with the PDF's crisp white frame (replaces the PSD glow) */
.rm-btn-hero .wp-block-button__link {
	font-size: clamp(20px, 1.75vw, 33px);
	line-height: 1.3;
	padding: 1.4rem 1.75rem;
	text-align: center;
	border: 3px solid var(--wp--preset--color--white);
}
.rm-btn-hero .wp-block-button__link:hover,
.rm-btn-hero .wp-block-button__link:focus-visible {
	border-color: var(--wp--preset--color--white);
}

/*--------------------------------------------------------------
# Rogers — card sections (product / brands / industries)
--------------------------------------------------------------*/
.rm-section {
	padding-block: clamp(2.5rem, 4vw, 4rem);
}
.rm-section h2 {
	font-size: clamp(28px, 2.7vw, 50px);
	margin: 0;
}
.rm-section__intro {
	font-size: clamp(17px, 1.5vw, 28px);
	line-height: 1.45;
	margin-top: 0.5rem;
}
.rm-card-grid {
	gap: 20px;
	margin-top: clamp(1.25rem, 2vw, 2rem);
}
.rm-card-grid--featured + .rm-card-grid {
	margin-top: clamp(1.5rem, 2.5vw, 2.75rem);
}
/* Cards (button-selection-ideas.pdf): white, soft shadow, linked title with a
   chevron; the whole card is clickable via a stretched title link. */
.rm-card {
	position: relative;
	background: var(--wp--preset--color--white);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.16);
	padding: clamp(1.25rem, 2.2vw, 2.5rem) clamp(1rem, 1.1vw, 1.25rem) clamp(1.25rem, 1.6vw, 2rem);
	gap: clamp(0.75rem, 1.2vw, 1.25rem);
	height: 100%;
	box-sizing: border-box;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.rm-card:hover {
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
	transform: translateY(-2px);
}
.rm-card:focus-within {
	outline: 3px solid var(--wp--preset--color--orange);
	outline-offset: 2px;
}
.rm-card > * {
	margin: 0;
}
/* Title box (Hompage Mock-up-option1.png): full-width brand-blue band with a
   1px dark outline, white bold uppercase label, chevron kept after the text. */
.rm-card .rm-card__title {
	text-align: center;
	text-transform: uppercase;
	font-size: clamp(17px, 1.45vw, 28px);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--white);
	background: var(--wp--preset--color--blue);
	border: 1px solid var(--wp--preset--color--deep-blue);
	padding: clamp(0.6rem, 0.9vw, 0.9rem) 0.75rem;
	transition: background-color 0.15s ease;
}
.rm-card__title a {
	color: var(--wp--preset--color--white);
	text-decoration: none;
}
/* PDF chevron. On the front end it is a span glued to the last word by
   rogers_card_title_chevron() (inc/rogers.php), so it never wraps alone. */
.rm-nowrap {
	white-space: nowrap;
}
.rm-chev,
.editor-styles-wrapper .rm-card__title a::before {
	display: inline-block;
	width: 0.42em;
	height: 0.68em;
	margin-left: 0.4em;
	/* mask + currentColor so the chevron follows the title text colour */
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 16'%3E%3Cpath d='M2 2l6 6-6 6' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 16'%3E%3Cpath d='M2 2l6 6-6 6' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
	transition: transform 0.15s ease;
}
.rm-card:hover .rm-chev {
	transform: translateX(0.2em);
}
/* editor preview (no render filter there): chevron after the link text */
.editor-styles-wrapper .rm-card__title a {
	display: inline-flex;
	flex-direction: row-reverse;
	align-items: center;
}
.editor-styles-wrapper .rm-card__title a::before {
	content: "";
}
/* the stretched-link overlay would cover the card's blocks in the editor */
.editor-styles-wrapper .rm-card__title a::after {
	content: none;
}
.editor-styles-wrapper .rm-card:hover {
	transform: none;
}
.rm-card__title a::after { /* stretched link: whole card is the hit area */
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}
.rm-card__title a:focus-visible {
	outline: none; /* the card's :focus-within ring shows instead */
}
.rm-card:hover .rm-card__title a,
.rm-card__title a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.18em;
}
.rm-card__text {
	font-size: clamp(15px, 1.2vw, 22px);
	line-height: 1.45;
	padding-inline: 0.5rem;
	text-align: center;
}
/* brand photos were shot on the section grey; keep the card on that ground */
.rm-brands .rm-card {
	background: var(--wp--preset--color--grey);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22);
}
.rm-card__image {
	margin-top: auto !important;
	text-align: center;
}
.rm-card__image img {
	max-width: 100%;
	max-height: 340px;
	width: auto;
	height: auto;
	margin-inline: auto;
	object-fit: contain;
}
.rm-card-grid--featured .rm-card__text {
	font-size: clamp(16px, 1.4vw, 26px);
}
/* industry photos fill the card width, as in the mockup */
.rm-industries .rm-card__image img {
	width: 100%;
	max-height: none;
	aspect-ratio: 7 / 6;
	object-fit: cover;
}
/* "View all ..." = Secondary – Outline button, centred under the grid */
.rm-section-cta {
	margin-top: clamp(2rem, 3.5vw, 3.5rem) !important;
}
.rm-section-cta .wp-block-button__link {
	font-size: clamp(16px, 1.15vw, 21px);
	padding: 0.85rem 2rem;
}

/*--------------------------------------------------------------
# Rogers — testimonials (patterns/testimonials.php)
--------------------------------------------------------------*/
.rm-testimonials__cols {
	gap: clamp(1.5rem, 3vw, 3rem);
}
.rm-testimonials .rm-testimonials__title {
	font-size: clamp(28px, 2.7vw, 50px);
	line-height: 1.45;
	padding-left: clamp(0rem, 2vw, 2.5rem);
}
.rm-testimonials__box {
	background: var(--wp--preset--color--off-white);
	padding: clamp(2rem, 5vw, 6rem) clamp(0.5rem, 1.5vw, 1.5rem);
	min-height: clamp(220px, 20vw, 380px);
	display: flex;
	align-items: center;
	gap: 0.5rem;
	box-sizing: border-box;
}
.rm-testimonials__track {
	flex: 1 1 auto;
	padding-inline: clamp(0.5rem, 2vw, 2.5rem);
}
.rm-testimonials__track:not(.is-slider) > .rm-testimonial + .rm-testimonial {
	margin-top: 2rem;
}
.rm-testimonial.wp-block-quote {
	border: 0;
	padding: 0;
	margin: 0;
	font-size: clamp(20px, 2.05vw, 40px);
	line-height: 1.5;
	font-style: italic;
}
.rm-testimonial p,
.rm-testimonial cite {
	display: inline;
	font-size: inherit;
	font-style: italic;
}
.rm-testimonial cite::before {
	content: " - ";
}
.rm-testimonials__nav {
	flex: 0 0 auto;
	background: none;
	border: 0;
	padding: 0.5rem;
	font: 700 clamp(22px, 2vw, 36px)/1 var(--font-heading);
	color: var(--wp--preset--color--black);
	cursor: pointer;
}
.rm-testimonials__nav:hover,
.rm-testimonials__nav:focus-visible {
	color: var(--wp--preset--color--orange);
}
/* the orange glyph alone is ~2.5:1 on off-white, so focus also gets a ring */
.rm-testimonials__nav:focus-visible,
.rm-testimonials__pill:focus-visible {
	outline: 3px solid var(--wp--preset--color--dark-blue);
	outline-offset: 2px;
}
/* pills sit on their own row under the  < quote >  row */
.rm-testimonials__box.has-slider {
	flex-wrap: wrap;
	align-content: center;
}
/* basis 0 so the quote takes the room between < and > instead of wrapping them */
.rm-testimonials__box.has-slider .rm-testimonials__track {
	flex: 1 1 0;
	min-width: 0;
}
.rm-testimonials__pills {
	flex: 1 0 100%;
	display: flex;
	justify-content: center;
	gap: 0.25rem;
	margin-top: clamp(1rem, 2vw, 2rem);
}
/* 24px hit area (WCAG 2.5.8); the visible pill is the ::before */
.rm-testimonials__pill {
	display: grid;
	place-items: center;
	min-width: 24px;
	height: 24px;
	padding: 0 2px;
	background: none;
	border: 0;
	cursor: pointer;
}
.rm-testimonials__pill::before {
	content: "";
	display: block;
	width: 12px;
	height: 12px;
	border-radius: 999px;
	background: var(--wp--preset--color--light-grey); /* 3.1:1 on off-white */
	transition: width 0.2s ease, background-color 0.15s ease;
}
.rm-testimonials__pill:hover::before {
	background: var(--wp--preset--color--orange);
}
/* active: wider as well as darker, so it isn't shown by colour alone */
.rm-testimonials__pill[aria-current="true"]::before {
	width: 32px;
	background: var(--wp--preset--color--dark-blue);
}
@media (prefers-reduced-motion: reduce) {
	.rm-testimonials__pill::before {
		transition: none;
	}
}

/*--------------------------------------------------------------
# Rogers — customer logos (patterns/customer-logos.php)
--------------------------------------------------------------*/
.rm-customers {
	padding-bottom: 0;
}
.rm-customers h2 {
	margin-bottom: clamp(1rem, 1.5vw, 1.5rem);
}
.rm-customers__band {
	--rm-logo-gap: clamp(2rem, 6vw, 7rem);
	background: #FBFBFB;
	padding: clamp(1.5rem, 2vw, 2rem) var(--wp--preset--spacing--50);
	gap: var(--rm-logo-gap);
	align-items: center;
}
.rm-customers__logo {
	margin: 0;
	flex-shrink: 0;
}
.rm-customers__logo img {
	max-height: clamp(70px, 7vw, 140px);
	width: auto;
}
/* Marquee (front end only). rogers_customers_marquee() in inc/rogers.php wraps
   the logos in a track holding the set twice; assets/js/rogers-marquee.js adds
   .is-marquee (starts the motion) plus a pause/play button (WCAG 2.2.2).
   Without .is-marquee (no JS, or prefers-reduced-motion) it's the static,
   centred, wrapping row and the copy is hidden. */
.rm-customers__track {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--rm-logo-gap);
	width: 100%;
}
.rm-customers__set {
	display: contents;
}
.rm-customers__set[aria-hidden="true"] {
	display: none;
}

/* animated: sliding the track -50% lands the copy exactly where the
   original started, so the loop is seamless */
.wp-block-group.rm-customers__band.is-marquee {
	display: block;
	position: relative;
	overflow: hidden;
	padding-inline: 0;
}
/* soft edges: band-coloured fades over the ends (a mask would fade the band too) */
.rm-customers__band.is-marquee::before,
.rm-customers__band.is-marquee::after {
	content: "";
	position: absolute;
	inset-block: 0;
	width: 6%;
	z-index: 1;
	pointer-events: none;
}
.rm-customers__band.is-marquee::before {
	left: 0;
	background: linear-gradient(90deg, #FBFBFB, rgba(251, 251, 251, 0));
}
.rm-customers__band.is-marquee::after {
	right: 0;
	background: linear-gradient(270deg, #FBFBFB, rgba(251, 251, 251, 0));
}
.is-marquee .rm-customers__track {
	flex-wrap: nowrap;
	gap: 0;
	width: max-content;
	animation: rm-marquee calc(var(--rm-logo-count, 4) * 5s) linear infinite;
}
/* hover/focus pause is on the track, not the band, so pointer or focus on the
   pause/play button never overrides what the button says */
.rm-customers__band.is-paused .rm-customers__track,
.is-marquee .rm-customers__track:hover,
.is-marquee .rm-customers__track:focus-within {
	animation-play-state: paused;
}
/* Each set is at least a viewport wide so no gap shows at the loop point on
   wide screens; space-around + half-gap ends keep the seam spacing equal to
   the spacing between logos. */
.is-marquee .rm-customers__set,
.is-marquee .rm-customers__set[aria-hidden="true"] {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: space-around;
	gap: var(--rm-logo-gap);
	min-width: 100vw;
	padding-inline: calc(var(--rm-logo-gap) / 2);
	box-sizing: border-box;
}
@keyframes rm-marquee {
	to { transform: translateX(-50%); }
}
/* pause / play: bottom-right, above the edge fade */
.rm-customers__toggle {
	position: absolute;
	right: 0.75rem;
	bottom: 0.75rem;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border: 2px solid var(--wp--preset--color--dark-blue);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--dark-blue);
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.rm-customers__toggle svg {
	width: 0.9rem;
	height: 0.9rem;
	fill: currentColor;
}
.rm-customers__toggle:hover,
.rm-customers__toggle:focus-visible {
	background: var(--wp--preset--color--orange);
	border-color: var(--wp--preset--color--orange);
	color: var(--wp--preset--color--deep-blue);
}
.rm-customers__toggle:focus-visible {
	outline: 3px solid var(--wp--preset--color--dark-blue);
	outline-offset: 2px;
}
.rm-customers__toggle[hidden] {
	display: none;
}

/*--------------------------------------------------------------
# Rogers — contact split + Gravity Forms (patterns/contact-split.php)
--------------------------------------------------------------*/
.rm-contact__cols {
	gap: clamp(2rem, 6vw, 7rem);
}
.rm-contact__copy h2 {
	font-size: clamp(28px, 2.7vw, 50px);
	line-height: 1.45;
	margin-bottom: clamp(1.5rem, 3vw, 3.5rem);
}
.rm-contact__copy p {
	font-size: clamp(17px, 1.5vw, 28px);
	line-height: 1.45;
}
.rm-contact__card {
	background: var(--wp--preset--color--white);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
	padding: clamp(1.5rem, 2.5vw, 3rem);
	align-self: flex-start;
}
.rm-contact__card .rm-contact__title {
	font-size: clamp(24px, 2vw, 38px);
	text-transform: none;
	margin: 0 0 1rem;
}
.rm-contact__lede {
	color: #555;
	font-size: clamp(15px, 1.1vw, 21px);
	line-height: 1.9;
}
.rm-contact__lede a {
	color: var(--wp--preset--color--dark-blue);
	text-decoration: underline;
}
.rm-contact__card .gform_wrapper .gfield_label,
.rm-contact__card .gform_wrapper legend {
	font-weight: 400;
	font-size: clamp(14px, 1vw, 19px);
	color: #222;
}
.rm-contact__card .gform_wrapper input[type="text"],
.rm-contact__card .gform_wrapper input[type="email"],
.rm-contact__card .gform_wrapper input[type="tel"],
.rm-contact__card .gform_wrapper input[type="url"],
.rm-contact__card .gform_wrapper select,
.rm-contact__card .gform_wrapper textarea {
	width: 100%;
	background: #F2F2F2;
	border: 0;
	border-radius: 999px;
	padding: 0.9rem 1.25rem;
	box-shadow: 0 2px 3px rgba(0, 0, 0, 0.12);
	font-size: clamp(14px, 1vw, 19px);
	font-family: var(--font-body);
	box-sizing: border-box;
}
.rm-contact__card .gform_wrapper textarea {
	border-radius: 24px;
	min-height: 6rem;
}
.rm-contact__card .gform_wrapper .gform_button,
.rm-contact__card .gform_wrapper input[type="submit"] {
	/* = "Primary – Orange": white-on-orange was 2.5:1; deep blue is 5.6:1 */
	background: var(--wp--preset--color--orange);
	color: var(--wp--preset--color--deep-blue);
	border: 0;
	border-radius: 999px;
	padding: 0.85rem 2.25rem;
	font: 700 clamp(15px, 1.1vw, 21px)/1 var(--font-heading);
	text-transform: uppercase;
	cursor: pointer;
}
.rm-contact__card .gform_wrapper .gform_button:hover,
.rm-contact__card .gform_wrapper input[type="submit"]:hover,
.rm-contact__card .gform_wrapper .gform_button:focus-visible,
.rm-contact__card .gform_wrapper input[type="submit"]:focus-visible {
	background: var(--wp--preset--color--orange);
	color: var(--wp--preset--color--deep-blue);
}
.rm-contact__card .gform_wrapper .gform_button:focus-visible,
.rm-contact__card .gform_wrapper input[type="submit"]:focus-visible {
	outline: 3px solid var(--wp--preset--color--orange);
	outline-offset: 2px;
}

/*--------------------------------------------------------------
# Rogers — footer (patterns/footer.php)
--------------------------------------------------------------*/
.rm-footer__cols {
	gap: clamp(1.5rem, 4vw, 4rem);
}
.rm-footer .rm-footer__heading {
	font-size: clamp(18px, 1.45vw, 28px);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin: 0 0 1.25rem;
}
.rm-footer p,
.rm-footer li {
	font-size: clamp(15px, 1.15vw, 22px);
	line-height: 1.3;
	font-weight: 400;
}
.rm-footer a {
	color: var(--wp--preset--color--black);
	text-transform: none;
}
.rm-footer a:hover,
.rm-footer a:focus-visible {
	color: var(--wp--preset--color--orange);
}
.rm-footer__brand figure {
	margin: 0;
}
.rm-footer .rm-footer__tagline {
	font-weight: 700;
	font-style: italic;
	font-size: clamp(18px, 1.4vw, 26px);
	line-height: 1.25;
	margin: 0.5rem 0 1.25rem;
}
.rm-footer__social {
	gap: 1.25rem;
}
.rm-footer__social .wp-social-link svg {
	width: 36px;
	height: 36px;
}
.rm-footer__list {
	list-style: none;
	padding: 0;
	margin: 0;
}
.rm-footer__list li + li {
	margin-top: 0.6rem;
}
.rm-footer .rm-footer__copyright {
	margin-top: clamp(2rem, 3vw, 3rem);
	font-size: 15px;
}

/* contact icons — CSS masks so they follow currentColor */
.rm-icon {
	position: relative;
	padding-left: 2rem;
}
.rm-icon::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.05em;
	width: 1.25em;
	height: 1.25em;
	background: currentColor;
	-webkit-mask: var(--rm-icon) center / contain no-repeat;
	mask: var(--rm-icon) center / contain no-repeat;
}
.rm-icon--phone    { --rm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A17 17 0 0 1 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1z'/%3E%3C/svg%3E"); }
.rm-icon--email    { --rm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 5h20v14H2zm2 2v.5l8 5 8-5V7zm0 2.9V17h16V9.9l-8 5z'/%3E%3C/svg%3E"); }
.rm-icon--pin      { --rm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.3 7 13 7 13s7-7.7 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E"); }
.rm-icon--building { --rm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 2h11v7h5v13H4zm2 2v2h2V4zm4 0v2h2V4zM6 8v2h2V8zm4 0v2h2V8zm-4 4v2h2v-2zm4 0v2h2v-2zm6-1v2h2v-2zm0 4v2h2v-2zM6 16v2h2v-2zm4 0v2h2v-2z'/%3E%3C/svg%3E"); }

/*--------------------------------------------------------------
# Rogers — page hero (blog, archives) (patterns/blog-hero.php)
--------------------------------------------------------------*/
.rm-page-hero {
	padding-block: clamp(2.5rem, 5vw, 5rem);
	margin-block-start: 0;
}
.rm-blog-hero {
	padding-bottom: 0;
	background-image: linear-gradient(90deg, var(--rm-dark-blue) 40%, #0A3F55 100%);
}
.rm-page-hero__cols {
	gap: clamp(1rem, 3vw, 3rem);
}
.rm-page-hero .rm-page-hero__title {
	font-family: var(--font-display);
	font-weight: 900;
	color: var(--wp--preset--color--white);
	text-transform: uppercase;
	font-size: clamp(40px, 4.1vw, 80px);
	line-height: 1.15;
	letter-spacing: 0.04em;
	margin: 0;
}
.rm-page-hero .rm-page-hero__intro,
.rm-page-hero .rm-page-hero__intro p {
	color: var(--wp--preset--color--white);
	font-size: clamp(17px, 1.55vw, 30px);
	line-height: 1.35;
	margin-top: clamp(1rem, 3vw, 3rem);
}
.rm-page-hero__art figure {
	margin: 0;
}
.rm-page-hero__art img {
	display: block;
	width: 100%;
	height: auto;
}

/*--------------------------------------------------------------
# Rogers — blog filter bar (rogers/blog-filters, inc/rogers.php)
--------------------------------------------------------------*/
.rm-blog-filters {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 1rem;
	margin-block: clamp(1.5rem, 2vw, 2rem) clamp(2rem, 4vw, 4rem) !important;
}
.rm-blog-filters__item {
	position: relative;
	flex: 1 1 200px;
	max-width: 250px;
}
.rm-blog-filters__item > summary {
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	border: 1px solid #555;
	padding: 0.5rem 1rem;
	font-size: clamp(18px, 1.6vw, 30px);
	text-transform: uppercase;
	cursor: pointer;
	background: var(--wp--preset--color--white);
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
/* secondary (orange) state: hover, keyboard focus and open. Deep-blue text
   on orange is 5.6:1, matching the orange button. */
.rm-blog-filters__item > summary:hover,
.rm-blog-filters__item > summary:focus-visible,
.rm-blog-filters__item[open] > summary {
	background: var(--wp--preset--color--orange);
	border-color: var(--wp--preset--color--orange);
	color: var(--wp--preset--color--deep-blue);
}
.rm-blog-filters__item[open] ul,
.rm-blog-filters__item[open] form {
	border-color: var(--wp--preset--color--orange);
}
.rm-blog-filters__item > summary::-webkit-details-marker {
	display: none;
}
.rm-blog-filters__item > summary > span {
	transition: transform 0.15s ease;
}
.rm-blog-filters__item[open] > summary > span {
	transform: rotate(90deg);
}
/* dark-blue ring: an orange ring would vanish against the orange fill */
.rm-blog-filters__item > summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--dark-blue);
	outline-offset: 2px;
}
.rm-blog-filters__item ul,
.rm-blog-filters__search form {
	position: absolute;
	z-index: 20;
	top: 100%;
	left: 0;
	right: 0;
	background: var(--wp--preset--color--white);
	border: 1px solid #555;
	border-top: 0;
	margin: 0;
	padding: 0.5rem 0;
	list-style: none;
	max-height: 320px;
	overflow: auto;
	font-size: 1rem;
}
.rm-blog-filters__item li a {
	display: block;
	padding: 0.4rem 1rem;
	color: var(--wp--preset--color--black);
}
.rm-blog-filters__item li a:hover,
.rm-blog-filters__item li a:focus-visible {
	background: var(--wp--preset--color--off-white);
	color: var(--wp--preset--color--orange);
}
.rm-blog-filters__item .is-empty {
	padding: 0.4rem 1rem;
	color: var(--wp--preset--color--light-grey);
}
.rm-blog-filters__search form {
	display: flex;
	gap: 0.5rem;
	padding: 0.75rem;
	overflow: visible;
}
.rm-blog-filters__search input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	border: 1px solid #C2C2C2;
	padding: 0.5rem 0.75rem;
	font: inherit;
}
.rm-blog-filters__search button {
	background: var(--wp--preset--color--blue);
	color: var(--wp--preset--color--white);
	border: 0;
	padding: 0.5rem 1rem;
	font-weight: 700;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.rm-blog-filters__search button:hover,
.rm-blog-filters__search button:focus-visible {
	background: var(--wp--preset--color--orange);
	color: var(--wp--preset--color--deep-blue);
}
.rm-blog-filters__search button:focus-visible {
	outline: 2px solid var(--wp--preset--color--dark-blue);
	outline-offset: 2px;
}

/*--------------------------------------------------------------
# Rogers — post cards (pilot/blog-loop, inc/shortcodes.php)
--------------------------------------------------------------*/
.rm-blog__loop {
	display: grid;
	gap: clamp(1.5rem, 2.5vw, 2.5rem);
	padding-bottom: clamp(3rem, 5vw, 5rem);
}
.rm-post-card {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 30%);
	gap: 1.5rem clamp(2rem, 4vw, 4.5rem);
	border: 1px solid #555;
	padding: clamp(1.5rem, 2.5vw, 2.5rem) clamp(1.25rem, 3vw, 3.5rem);
}
.rm-post-card__body {
	display: flex;
	flex-direction: column;
}
.rm-post-card .rm-post-card__title {
	font-size: clamp(24px, 2.3vw, 44px);
	line-height: 1.4;
	letter-spacing: 0.02em;
	margin: 0 0 1.25rem;
}
.rm-post-card__title a {
	color: var(--wp--preset--color--black);
}
.rm-post-card__title a:hover,
.rm-post-card__title a:focus-visible {
	color: var(--wp--preset--color--orange);
}
.rm-post-card__excerpt {
	color: #333;
	font-size: clamp(17px, 1.5vw, 28px);
	line-height: 1.45;
}
.rm-post-card__excerpt p {
	margin: 0;
}
.rm-post-card__meta {
	margin: auto 0 0;
	padding-top: 1.5rem;
	color: var(--wp--preset--color--light-grey);
	font-size: clamp(16px, 1.5vw, 28px);
}
.rm-post-card__meta a {
	color: inherit;
}
.rm-post-card__sep {
	margin-inline: 0.35em;
}
.rm-post-card__aside {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 1.5rem;
}
.rm-post-card__image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}
.rm-post-card__more {
	align-self: flex-end;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	font-size: clamp(17px, 1.5vw, 28px);
	color: var(--wp--preset--color--black);
}
.rm-post-card__more:hover,
.rm-post-card__more:focus-visible {
	color: var(--wp--preset--color--orange);
}
.rm-blog__loop .pagination-nav,
.rm-blog__loop .navigation {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
	font-weight: 700;
}

@media (max-width: 781px) {
	.rm-post-card {
		grid-template-columns: 1fr;
	}
	.rm-post-card__aside {
		order: -1;
	}
	.rm-blog-filters__item {
		max-width: none;
		flex-basis: calc(50% - 0.5rem);
	}
	.rm-testimonials__box {
		padding-inline: 0;
	}
}

/*--------------------------------------------------------------
# Rogers — product category page (templates/taxonomy-product_cat.html,
#   inc/product-catalog.php) — design/collection_view.png
--------------------------------------------------------------*/
.rm-category-hero {
	padding-block: clamp(2rem, 3.5vw, 3.5rem);
	margin-block-start: 0;
}
.rm-category-hero__cols {
	gap: clamp(1.5rem, 4vw, 4rem);
}
.rm-category-hero .rm-category-hero__title {
	font-family: var(--font-display);
	font-weight: 900;
	color: var(--wp--preset--color--white);
	text-transform: uppercase;
	font-size: clamp(34px, 3.6vw, 72px);
	line-height: 1.15;
	letter-spacing: 0.04em;
	margin: 0;
	overflow-wrap: anywhere;
}
.rm-category-hero .rm-category-hero__intro {
	color: var(--wp--preset--color--white);
	font-size: clamp(16px, 1.25vw, 24px);
	line-height: 1.4;
	margin: 1.25rem 0 0;
}
.rm-category-hero .rm-category-hero__buttons {
	gap: 1rem clamp(1rem, 2vw, 1.75rem);
	margin-top: clamp(1.5rem, 2.5vw, 2.5rem);
}
/* design: Rogers-blue fill, thin white outline, soft drop shadow. Deep-blue
   text on the hover orange matches the other orange buttons (5.6:1). */
.rm-category-hero__btn .wp-block-button__link {
	background: var(--wp--preset--color--blue);
	color: var(--wp--preset--color--white);
	border: 2px solid var(--wp--preset--color--white);
	border-radius: 0;
	box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
	padding: 0.7rem 1.6rem;
	font-size: clamp(17px, 1.3vw, 24px);
	font-weight: 700;
	text-transform: none;
	letter-spacing: normal;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.rm-category-hero__btn .wp-block-button__link:hover,
.rm-category-hero__btn .wp-block-button__link:focus-visible {
	background: var(--wp--preset--color--orange);
	border-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--deep-blue);
}
.rm-category-hero__btn .wp-block-button__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--white);
	outline-offset: 3px;
}
/* framed photo: rounded corners + orange outline */
.rm-category-hero .rm-category-hero__image {
	margin: 0;
	border: 3px solid var(--wp--preset--color--orange);
	border-radius: clamp(1.5rem, 3vw, 3rem);
	overflow: hidden;
	background: var(--wp--preset--color--white);
}
.rm-category-hero__image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: contain; /* product photos on white; a full-bleed photo fills it anyway */
}

/* filter bar (rogers/product-filters): same buttons as .rm-blog-filters, on an
   even 6-column grid so the second row lines up with the first (design);
   panels hold checkboxes */
.rm-product-filters {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	margin-block-end: clamp(1rem, 2vw, 1.5rem) !important;
}
.rm-product-filters .rm-blog-filters__item {
	max-width: none;
}
.rm-product-filters .rm-blog-filters__item > summary {
	font-size: clamp(16px, 1.25vw, 24px);
	white-space: nowrap;
}
.rm-product-filters__count {
	font-weight: 400;
}
.rm-product-filters__panel {
	position: absolute;
	z-index: 20;
	top: 100%;
	left: 0;
	min-width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: 0.5rem 0;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--orange);
	border-top: 0;
	max-height: 340px;
	overflow: auto;
	font-size: 1rem;
}
.rm-product-filters__panel label {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.35rem 1rem;
	cursor: pointer;
	white-space: nowrap;
}
.rm-product-filters__panel label:hover {
	background: var(--wp--preset--color--off-white);
}
.rm-product-filters__panel input[type="checkbox"] {
	width: 1.1rem;
	height: 1.1rem;
	margin: 0;
	accent-color: var(--wp--preset--color--dark-blue);
}
.rm-product-filters__apply,
.rm-product-filters__panel--search button {
	background: var(--wp--preset--color--blue);
	color: var(--wp--preset--color--white);
	border: 0;
	padding: 0.5rem 1rem;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.rm-product-filters__apply {
	margin: 0.5rem 1rem 0.25rem;
}
.rm-product-filters__apply:hover,
.rm-product-filters__apply:focus-visible,
.rm-product-filters__panel--search button:hover,
.rm-product-filters__panel--search button:focus-visible {
	background: var(--wp--preset--color--orange);
	color: var(--wp--preset--color--deep-blue);
}
.rm-product-filters.is-enhanced .rm-product-filters__apply {
	display: none; /* JS submits on change */
}
.rm-product-filters__panel--search {
	display: flex;
	gap: 0.5rem;
	padding: 0.75rem;
	overflow: visible;
}
.rm-product-filters__panel--search input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	border: 1px solid #C2C2C2;
	padding: 0.5rem 0.75rem;
	font: inherit;
}
.rm-product-filters__active {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.75rem;
	margin-block: 0 clamp(1.5rem, 3vw, 2.5rem) !important;
	font-size: 1rem;
}
.rm-product-filters__chip {
	display: inline-flex;
	gap: 0.4rem;
	padding: 0.25rem 0.75rem;
	border: 1px solid var(--wp--preset--color--dark-blue);
	color: var(--wp--preset--color--dark-blue);
	text-decoration: none;
}
.rm-product-filters__chip:hover,
.rm-product-filters__chip:focus-visible {
	background: var(--wp--preset--color--orange);
	border-color: var(--wp--preset--color--orange);
	color: var(--wp--preset--color--deep-blue);
}
.rm-product-filters__clear {
	color: var(--wp--preset--color--black);
	font-weight: 700;
}

/* product grid (Product Collection → Product Template): 4-up outlined cards;
   the title link covers the whole card */
.rm-catalog__loop {
	padding-bottom: clamp(3rem, 5vw, 5rem);
}
.rm-catalog__loop .rm-product-grid {
	gap: clamp(1rem, 1.5vw, 1.5rem);
	margin-bottom: clamp(2rem, 3vw, 3rem);
}
.rm-product-grid > li {
	display: flex;
	margin: 0;
	text-align: left;
}
.rm-product-card {
	position: relative;
	flex: 1;
	display: flex;
	flex-direction: column;
	border: 1px solid #555;
	padding: clamp(1.25rem, 1.5vw, 1.5rem) clamp(1rem, 1.25vw, 1.25rem) 1rem;
	background: var(--wp--preset--color--white);
	transition: border-color 0.15s ease;
}
.rm-product-card > * {
	margin-block: 0;
}
.rm-product-card:hover,
.rm-product-card:focus-within {
	border-color: var(--wp--preset--color--orange);
}
.rm-product-card .rm-product-card__title {
	font-family: var(--font-body);
	font-size: clamp(19px, 1.35vw, 26px);
	line-height: 1.35;
	font-weight: 700;
	text-align: center;
	margin-bottom: 1rem;
}
.rm-product-card__title a {
	color: var(--wp--preset--color--black);
	text-decoration: none;
}
.rm-product-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}
.rm-product-card:hover .rm-product-card__title a,
.rm-product-card__title a:focus-visible {
	color: var(--wp--preset--color--orange);
}
.rm-product-card__title a:focus-visible {
	outline: none;
}
.rm-product-card:focus-within {
	outline: 2px solid var(--wp--preset--color--dark-blue);
	outline-offset: 2px;
}
.rm-product-card__specs {
	font-size: clamp(14px, 0.95vw, 17px);
	line-height: 1.7;
	color: #333;
}
/* beats the theme's group rhythm rule (… > .wp-block-group > p + p) */
.rm-product-card > .rm-product-card__specs > p.wp-block-paragraph {
	margin: 0;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}
.rm-product-card .rm-product-card__image {
	margin-top: auto;
	padding-top: 1.25rem;
}
.rm-product-card__image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: contain;
}
.rm-product-grid__empty {
	font-size: clamp(17px, 1.3vw, 22px);
	padding-block: 2rem;
}
.rm-catalog__pagination {
	gap: 0.5rem 1rem;
	font-weight: 700;
	font-size: 1.125rem;
}
.rm-catalog__pagination a {
	color: var(--wp--preset--color--black);
}
.rm-catalog__pagination a:hover,
.rm-catalog__pagination a:focus-visible {
	color: var(--wp--preset--color--orange);
}
.rm-catalog__pagination .current {
	color: var(--wp--preset--color--orange);
}

@media (max-width: 1100px) {
	.rm-product-filters {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
@media (max-width: 781px) {
	.rm-product-filters {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.rm-product-filters .rm-blog-filters__item > summary {
		gap: 0.4rem;
		padding-inline: 0.5rem;
		font-size: 15px;
		white-space: normal;
		text-align: center;
	}
}
@media (max-width: 480px) {
	/* Woo's shrinkColumns grid still fits 2 cards at phone width; the spec
	   lines need the full width */
	.rm-catalog__loop .rm-product-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}