/**
 * Tecology child theme — brand styles.
 *
 * The brand is deliberately flat and restrained: navy / white / grey, with
 * teal rationed to kickers and the occasional panel. No gradients, no
 * decorative loops.
 *
 * Sections:
 *   0. Graphie @font-face (self-hosted brand typeface)
 *   1. Kicker / eyebrow
 *   2. Buttons (navy primary, outline secondary, text link)
 *   3. Hairline rules
 *   4. Quiet motion (scroll reveal helper class)
 */

/* Global border-box — matches the prototype's reset. Without this, .wrap and the
 * hero size in content-box (padding added OUTSIDE max-width), making columns and
 * cards wider than the design. Core blocks already assume border-box. */
*, *::before, *::after { box-sizing: border-box; }

/* ---------------------------------------------------------------------------
 * 0. Design-token bridge + typeface.
 *    Graphie is the approved brand typeface, self-hosted and applied site-wide.
 *    Here we (a) map the prototype's tokens to the theme.json presets so component
 *    CSS ports across verbatim, and (b) add a high-specificity Graphie override
 *    so it wins over the parent's global font on every surface.
 * ------------------------------------------------------------------------- */
:root {
	--navy:       var(--wp--preset--color--contrast);    /* #0E1924 */
	--navy-2:     var(--wp--preset--color--contrast-2);  /* #3A4654 */
	--grey-700:   var(--wp--preset--color--contrast-2);  /* deep text alt */
	--grey-600:   var(--wp--preset--color--contrast-3);  /* secondary text */
	--grey-400:   var(--wp--preset--color--contrast-3);  /* muted text — folded into contrast-3 (#5B6B7A, AA on white) */
	--teal:       var(--wp--preset--color--accent-2);    /* #4AD7D1 — teal is Quantum's accent-2, never the primary accent */
	--teal-ink:   #0C6E6A;                               /* accessible teal text — internal token, not a palette slug */
	--paper:      var(--wp--preset--color--base-2);      /* #E6EBF0 */
	--border:     var(--wp--preset--color--borderline);  /* #D7DCE0 */
	--white:      var(--wp--preset--color--base);        /* #FFFFFF */
	--grey-muted: var(--wp--preset--color--contrast-4);  /* #9AA7B2 muted text on dark */
}

/* Self-hosted Graphie — the approved brand typeface (OTF, in assets/fonts/).
   Declared here so the front-end always loads it (theme.json fontFace doesn't
   reliably emit on this Quantum child). 500/600 map to SemiBold (no Medium cut). */
@font-face { font-family:'Graphie'; font-weight:300;     font-style:normal; font-display:swap; src:url('fonts/Graphie-Light.woff2') format('woff2'), url('fonts/Graphie-Light.otf') format('opentype'); }
@font-face { font-family:'Graphie'; font-weight:350;     font-style:normal; font-display:swap; src:url('fonts/Graphie-Book.woff2') format('woff2'), url('fonts/Graphie-Book.otf') format('opentype'); }
@font-face { font-family:'Graphie'; font-weight:400;     font-style:normal; font-display:swap; src:url('fonts/Graphie-Regular.woff2') format('woff2'), url('fonts/Graphie-Regular.otf') format('opentype'); }
@font-face { font-family:'Graphie'; font-weight:400;     font-style:italic;  font-display:swap; src:url('fonts/Graphie-Italic.woff2') format('woff2'), url('fonts/Graphie-Italic.otf') format('opentype'); }
@font-face { font-family:'Graphie'; font-weight:500 600; font-style:normal; font-display:swap; src:url('fonts/Graphie-SemiBold.woff2') format('woff2'), url('fonts/Graphie-SemiBold.otf') format('opentype'); }
@font-face { font-family:'Graphie'; font-weight:500 600; font-style:italic; font-display:swap; src:url('fonts/Graphie-SemiBoldItalic.woff2') format('woff2'), url('fonts/Graphie-SemiBoldItalic.otf') format('opentype'); }
@font-face { font-family:'Graphie'; font-weight:700;     font-style:normal; font-display:swap; src:url('fonts/Graphie-Bold.woff2') format('woff2'), url('fonts/Graphie-Bold.otf') format('opentype'); }
@font-face { font-family:'Graphie'; font-weight:800;     font-style:normal; font-display:swap; src:url('fonts/Graphie-ExtraBold.woff2') format('woff2'), url('fonts/Graphie-ExtraBold.otf') format('opentype'); }

:root body,
:root body .wp-site-blocks,
:root body .editor-styles-wrapper {
	font-family: 'Graphie', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
	/* Match the prototype's crisp rendering — grayscale antialiasing makes Graphie
	   render finer (the WP default subpixel-antialiasing reads as "thicker"). */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}
body h1, body h2, body h3, body h4, body h5, body h6, .wp-block-heading {
	font-family: 'Graphie', ui-sans-serif, system-ui, -apple-system, sans-serif;
}

/* ---------------------------------------------------------------------------
 * 1. Kicker / eyebrow — spaced uppercase label. Teal only on navy surfaces.
 * ------------------------------------------------------------------------- */
.tecology-kicker {
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast-3);
	margin: 0 0 16px;
}
.tecology-kicker.is-on-navy,
.is-dark .tecology-kicker {
	color: var(--wp--preset--color--accent-2);
}

/* ---------------------------------------------------------------------------
 * 2. Buttons. Navy is the systematic action colour — never teal.
 *    Quiet hover: opacity drop or one-step darken, no colour shift to teal.
 * ------------------------------------------------------------------------- */
.wp-block-button.is-style-fill .wp-block-button__link,
.wp-block-button:not(.is-style-outline):not(.is-style-tecology-link) .wp-block-button__link {
	border-radius: var(--wp--preset--spacing--20, 8px);
	border-radius: 8px;
	font-weight: 500;
	padding: 13px 22px;
	transition: opacity 0.15s ease, background-color 0.15s ease;
}
.wp-block-button:not(.is-style-outline):not(.is-style-tecology-link) .wp-block-button__link:hover {
	opacity: 0.82;
}

/* Outline / secondary — navy hairline that fills navy on hover. */
.wp-block-button.is-style-outline .wp-block-button__link {
	border-width: 1px;
	border-color: var(--wp--preset--color--contrast);
	border-radius: 8px;
	color: var(--wp--preset--color--contrast);
	font-weight: 500;
	padding: 13px 22px;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

/* Text link — no chrome, navy (or white on navy), gentle opacity hover.
   !important guards beat the global .wp-element-button border-width/style rule
   (added for outline-button height parity) which otherwise draws a pill here. */
.wp-block-button.is-style-tecology-link .wp-block-button__link {
	background: transparent !important;
	border: 0 !important;
	padding: 13px 4px;
	color: var(--wp--preset--color--contrast);
	font-weight: 500;
}
.is-dark .wp-block-button.is-style-tecology-link .wp-block-button__link {
	color: var(--wp--preset--color--base);
}
.wp-block-button.is-style-tecology-link .wp-block-button__link:hover {
	opacity: 0.6;
}

/* ---------------------------------------------------------------------------
 * 3. Hairline rule — 1px divider in border grey, used sparingly.
 * ------------------------------------------------------------------------- */
.tecology-rule {
	border: 0;
	border-top: 1px solid var(--wp--preset--color--borderline);
	margin: 0;
}
.is-dark .tecology-rule {
	border-top-color: color-mix(in srgb, var(--white) 12%, transparent);
}

/* ---------------------------------------------------------------------------
 * 4. Quiet scroll-reveal. Add `.tecology-reveal`; JS (or the no-JS fallback
 *    below) settles it. Transform-only so content is never stuck hidden.
 *    Honours reduced-motion.
 * ------------------------------------------------------------------------- */
.tecology-reveal {
	opacity: 1;
	transform: translateY(14px);
	transition: transform 0.5s ease;
}
.tecology-reveal.is-revealed,
.no-js .tecology-reveal {
	transform: none;
}
@media (prefers-reduced-motion: reduce) {
	.tecology-reveal {
		transform: none;
		transition: none;
	}
}

/* ===========================================================================
 * 5. Site chrome — ported from the design prototype.
 *    Container, buttons for custom markup, and the fixed top nav (mega menu +
 *    animated mobile drill-down). Inversion is driven by `nav-scrolled` on
 *    <html>, toggled by nav.js.
 * ======================================================================== */

/* Container — content fills the full 1320 (no padding inset shrinking it to
   1240). A side gutter is kept via calc so content never touches the screen
   edge below ~1400px (40px gutter; 20px on mobile). */
.wrap { width: min(1320px, calc(100% - 80px)); margin: 0 auto; }
@media (max-width: 620px) { .wrap { width: min(1320px, calc(100% - 40px)); } }

/* Buttons for custom markup (nav CTA, hero CTAs). Core button blocks styled in §2. */
.btn { font-family: inherit; font-size: 15px; font-weight: 500; border-radius: 8px; padding: 13px 22px;
  cursor: pointer; border: 1px solid transparent; text-decoration: none; line-height: normal; box-sizing: border-box;
  display: inline-flex; align-items: center; gap: 8px;
  transition: opacity .15s ease, background-color .15s ease, color .15s ease; }
.btn svg { width: 17px; height: 17px; }
.btn-primary { background: var(--navy); color: var(--white); }
.btn-primary:hover { opacity: .82; }
.btn-primary-light { background: var(--white); color: var(--navy); }
.btn-primary-light:hover { opacity: .85; }
.btn-ghost-light { background: transparent; color: var(--white); border-color: color-mix(in srgb, var(--white) 30%, transparent); }
.btn-ghost-light:hover { background: color-mix(in srgb, var(--white) 8%, transparent); }
.btn-secondary { background: transparent; color: var(--navy); border-color: color-mix(in srgb, var(--navy) 28%, transparent); }
.btn-secondary:hover { background: var(--navy); color: var(--white); border-color: var(--navy); }
.btn-tertiary { background: transparent; color: var(--navy); padding: 13px 4px; }
.btn-tertiary:hover { opacity: .6; }

/* (Legacy custom-header CSS removed — see assets/legacy-header-css.bak. The
   header is now native blocks: parts/header.html + wp_navigation 16013.) */

/* ===========================================================================
 * SITE FOOTER — navy. Ported from the prototype (Footer.jsx). All colours via
 * palette vars; translucent whites are color-mix() of --white (no hardcoded rgba).
 * Muted text on navy uses --grey-muted (contrast-4 #9AA7B2).
 * ========================================================================= */
.site-footer { position: relative; overflow: hidden; }
.site-footer > * { position: relative; z-index: 1; }
.site-footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 300px; pointer-events: none; z-index: 0;
  background-image: radial-gradient(color-mix(in srgb, var(--white) 12%, transparent) 1px, transparent 1px);
  background-size: 24px 24px;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 12%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 12%, transparent 100%); }

/* Brand column — column widths/gaps come from the native core/columns settings. */
.footer-logo { margin: 0; }
.footer-logo img { width: 160px; height: auto; display: block; }
.footer-col-head { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--white); margin: 0 0 16px; }
/* Link columns — core/navigation blocks (.footer-navi). Vertical stack + 14px
   (x-small) + 10px gap come from the block's own settings; CSS only colours the
   links muted-grey → white on hover. The `.site-footer` prefix + the item's own
   class beat core's `.wp-block-navigation-item__content{color:inherit}` (0-2-0). */
.footer-navi .wp-block-navigation-item { margin: 0; }
.site-footer .footer-navi .wp-block-navigation-item__content { color: var(--grey-muted); text-decoration: none; transition: color .15s ease; }
.site-footer .footer-navi .wp-block-navigation-item__content:hover,
.site-footer .footer-navi .wp-block-navigation-item__content:focus { color: var(--white); text-decoration: none; background: transparent; }

/* Policy strip — core/navigation (.navi-legal). Horizontal wrapping row, 13px. */
.navi-legal .wp-block-navigation__container { flex-wrap: wrap; row-gap: 10px; column-gap: 24px; }
.navi-legal .wp-block-navigation-item { margin: 0; }
.site-footer .navi-legal .wp-block-navigation-item__content { color: var(--grey-muted); font-size: 13px; text-decoration: none; transition: color .15s ease; }
.site-footer .navi-legal .wp-block-navigation-item__content:hover,
.site-footer .navi-legal .wp-block-navigation-item__content:focus { color: var(--white); text-decoration: none; background: transparent; }

/* Newsletter column */
.footer-news-title { font-size: 16px; font-weight: 600; color: var(--white); margin: 0; }
.footer-news-copy { font-size: 14px; color: var(--grey-muted); margin: 8px 0 16px; max-width: 380px; line-height: 1.55; }
.footer-fineprint { font-size: 12px; color: color-mix(in srgb, var(--white) 40%, transparent); margin: 12px 0 0; max-width: 420px; line-height: 1.55; }
.footer-fineprint a { color: color-mix(in srgb, var(--white) 60%, transparent); text-decoration: underline; text-underline-offset: 2px; }

/* JetForm (Newsletter Signup, 15287) — JFB nests email + submit in a core
   wp-block-columns. LAYOUT is left entirely to the native column block: it
   sits side-by-side on desktop and auto-stacks full-width at <=781px (core's
   own isStackedOnMobile breakpoint). We add NO width cap, NO forced flex, and
   NO custom media query — only the appearance rules below. */
.footer-news .jet-form-builder { margin: 0; }
.footer-news .jet-form-builder .jet-form-builder-row.field-type-hidden-field { display: none; }
.footer-news .jet-form-builder__label { display: none; }
.footer-news .jet-form-builder-row { margin: 0; padding: 0; }
.footer-news .jet-form-builder__field-wrap { margin: 0; }
/* The form's old dark-context field/button skin (ghost input + white button)
   was retired with the contained-shell treatment — the global form-15287
   shell rules (end of file) now own all field/button appearance, footer
   included: the white shell carries the contrast on the navy band. */
.footer-news .jet-form-builder__field.text-field { width: 100%; font-family: inherit; font-size: 14px; box-sizing: border-box; }
.footer-news .jet-form-builder__action-button-wrapper { margin: 0; }
.footer-news .jet-form-builder__action-button {
  font-family: inherit; font-size: 15px !important; font-weight: 500; line-height: normal; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: opacity .15s ease; }
.footer-news .jet-form-builder__action-button:hover { opacity: .85; }
.footer-news .jet-form-builder__action-button:focus-visible { outline: 2px solid var(--teal) !important; outline-offset: 2px; }
.footer-news .jet-form-builder-messages-wrap { margin: 0; }
.footer-news .jet-form-builder-messages-wrap:empty { display: none; }
/* Address / meta */
.footer-meta-head { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--white); margin-bottom: 14px; }
.footer-find { font-size: 14px; color: var(--grey-muted); line-height: 1.7; }
.footer-find a { color: var(--grey-muted); text-decoration: none; text-underline-offset: 3px; }
.footer-find a:hover { color: var(--white); text-decoration: underline; }

/* Live status beacon dot (the bordered pill + hover are native block settings) */
.beacon { position: relative; width: 9px; height: 9px; border-radius: 50%; background: var(--teal); flex: 0 0 auto; display: inline-block; }
.beacon::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--teal); animation: beacon-pulse 2.4s ease-out infinite; }
@keyframes beacon-pulse { 0% { transform: scale(1); opacity: .55; } 70% { opacity: 0; } 100% { transform: scale(3.4); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .beacon::after { animation: none; } }

/* ===========================================================================
 * HOMEPAGE HERO (brief §1) + assembling-platform signature (HeroBuild) + trust
 * marquee (brief §2). Ported from the prototype. Brand colours via palette vars;
 * the mockup's neutral greys are illustrative UI (kept as literals).
 * ========================================================================= */
/* z-index:1 overrides Quantum's `header { z-index:1000 }` (our hero is a <header>);
   keeps this content section below the fixed nav (.nav is z-1001). */
.home-hero { position: relative; z-index: 1 !important; background: var(--navy); color: var(--white); padding-bottom: 4px; }
/* dots-live: dot-repel.js replaces the painted grid with its canvas (same
   look + cursor repulsion); the wrapper's fade mask applies to the canvas */
.home-hero-dotfield.dots-live { background-image: none; }
/* Full-hero coverage (Ramp-style trial, Round 35b) — was a bottom 300px
   strip with a fade-to-top mask. A soft top fade remains so the dots ease
   in below the solid nav bar rather than starting on a hard line. */
.home-hero-dotfield { position: absolute; inset: 0; height: auto; pointer-events: none; z-index: 0;
  background-image: radial-gradient(color-mix(in srgb, var(--white) 16%, transparent) 1px, transparent 1px);
  background-size: 24px 24px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 100%); }
/* paddingTop absorbs the 76px fixed-nav overlay so the gap above the headline matches below. */
/* bottom was the prototype's 104 — bottom-heavy against the 73px above the
   trust strip (Tony agreed): 72 centres the strip in the band's tail */
.home-hero-inner { position: relative; z-index: 1; padding-top: 180px; padding-bottom: 72px; }
.home-hero-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); gap: 48px; align-items: center; }
.home-hero-title { font-size: var(--wp--preset--font-size--xxxxx-large); line-height: 1.08; letter-spacing: -0.025em; font-weight: 600; margin: 0; color: var(--white); }
.home-hero-title em { font-style: italic; }
.home-hero-dash { font-weight: 300; color: var(--grey-muted); }
/* Force the prototype's break (AI | — built) on the desktop two-column layout;
   below 900px the hero stacks full-width and wraps naturally (no forced break). */
.home-hero-br { display: none; }
@media (min-width: 901px) { .home-hero-br { display: inline; } }
.home-hero-sub { font-size: var(--wp--preset--font-size--large); line-height: 1.6; color: var(--grey-muted); max-width: 560px; margin: 28px 0 0; }
.home-hero-cta { display: flex; gap: 14px; margin-top: 38px; flex-wrap: wrap; }
/* Hero CTAs are native wp:buttons — style the link to match the brand .btn look
   (the .btn classes sit on the button wrapper; these target the inner link). */
.home-hero-cta .wp-block-button { margin: 0; }
@media (max-width: 900px) { .home-hero-cta .wp-block-button { flex: 1 1 auto; } .home-hero-cta .wp-block-button__link { width: 100%; text-align: center; } }

/* Interim custom button styles (being migrated to Quantum's native button styles). */
.wp-block-button.is-style-primary-light .wp-block-button__link { background-color: var(--white); color: var(--navy); border-color: transparent; }
.wp-block-button.is-style-primary-light .wp-block-button__link:hover { background-color: var(--white); color: var(--navy); opacity: .85; }
.wp-block-button.is-style-ghost .wp-block-button__link { background-color: transparent; color: var(--white); border: 1px solid color-mix(in srgb, var(--white) 30%, transparent); }
.wp-block-button.is-style-secondary .wp-block-button__link { background-color: transparent; color: var(--navy); border: 1px solid color-mix(in srgb, var(--navy) 28%, transparent); }
.wp-block-button.is-style-secondary .wp-block-button__link:hover { background-color: var(--navy); color: var(--white); border-color: var(--navy); }
/* Global button hover transition (Tony): all buttons ease-in-out 0.3s. !important to beat the theme's own button transition (loaded later, same specificity). */
.wp-element-button, .wp-block-button__link, .btn { transition: all 0.3s ease-in-out !important; }
/* Consistent height: every button carries a 1px border so outline buttons aren't 2px taller than fill ones (colour stays per-style — transparent on fill, visible on outline). */
.wp-element-button, .wp-block-button__link { border-style: solid !important; border-width: 1px !important; }
.home-trust { margin-top: 64px; padding-top: 34px; border-top: 1px solid color-mix(in srgb, var(--white) 12%, transparent); }
.home-trust-kicker { text-align: center; font-size: 11.5px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--grey-muted); opacity: .85; margin-bottom: 26px; }

/* fade-in entrance (transform-only; never holds content hidden) */
.fade-in { opacity: 1; }
@media (prefers-reduced-motion: no-preference) { .fade-in { animation: tec-fade .55s ease backwards; } }
@keyframes tec-fade { from { transform: translateY(12px); } to { transform: none; } }

/* Trust marquee — slow, seamless, edge-faded. White single-tone logos on navy. */
.trust-marquee { overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); }
.trust-marquee-track { display: flex; width: max-content; align-items: center; animation: trust-scroll 54s linear infinite; }
.trust-marquee:hover .trust-marquee-track { animation-play-state: paused; }
.trust-cell { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; padding: 0 clamp(30px, 4vw, 58px); }
.trust-logo { width: auto; max-width: 100%; object-fit: contain; filter: brightness(0) invert(1); opacity: .55; transition: opacity .2s ease; }
.trust-cell:hover .trust-logo { opacity: .9; }
@keyframes trust-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .trust-marquee-track { animation: none; flex-wrap: wrap; justify-content: center; width: 100%; row-gap: 18px; }
}

/* ---- HeroBuild: a platform that assembles itself ---- */
.hb-wrap { width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.hb-window { width: 100%; max-width: 520px; background: var(--white); border: 1px solid color-mix(in srgb, var(--white) 10%, transparent);
  border-radius: 14px; box-shadow: 0 30px 80px rgba(0,0,0,0.45); overflow: hidden; }
.hb-bar { position: relative; height: 42px; background: #f1f3f6; border-bottom: 1px solid #e6e9ee; display: flex; align-items: center; gap: 7px; padding: 0 16px; }
.hb-dot { width: 10px; height: 10px; border-radius: 50%; background: #d7dce2; flex: 0 0 auto; }
.hb-url { position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 58%; max-width: 280px; height: 24px; border-radius: 12px; background: var(--white); border: 1px solid #e4e8ed; padding: 0 12px; }
.hb-url svg { color: #aeb6bf; flex: 0 0 auto; }
.hb-url-text { font-size: 10.5px; color: #5B6B7A; letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hb-body { position: relative; height: 360px; }
.hb-scene { position: absolute; inset: 0; padding: 26px 28px; opacity: 0; }
.hb-topnav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 26px; }
.hb-logo { width: 30px; height: 30px; border-radius: 8px; background: var(--navy); display: flex; align-items: center; justify-content: center; }
.hb-logo img { height: 54%; width: auto; display: block; }
.hb-navlinks { display: flex; gap: 13px; }
.hb-navlinks span { width: 38px; height: 8px; border-radius: 4px; background: #e2e6ec; }
.hb-title { margin-bottom: 20px; }
.hb-kicker { width: 64px; height: 8px; border-radius: 4px; background: var(--teal); margin-bottom: 12px; }
.hb-htitle { width: 72%; height: 18px; border-radius: 5px; background: var(--navy); }
.hb-caption { margin-top: 18px; width: 100%; max-width: 520px; padding: 18px 26px; text-align: center;
  border: 1px solid color-mix(in srgb, var(--white) 12%, transparent); border-radius: 14px; background: color-mix(in srgb, var(--white) 3%, transparent); }
.hb-cap-kicker { font-size: 11.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--teal); min-height: 14px; }
.hb-cap-text { font-size: 15px; line-height: 1.5; color: var(--grey-muted); margin-top: 9px; min-height: 45px; }
.hb-cols { display: grid; grid-template-columns: 1fr 0.92fr; gap: 18px; align-items: start; }
.hb-list { display: flex; flex-direction: column; gap: 16px; }
.hb-row { display: flex; align-items: center; gap: 11px; }
.hb-av { width: 32px; height: 32px; border-radius: 50%; background: #eef1f5; border: 1px solid #e2e6ec; flex: 0 0 auto; }
.hb-lines { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.hb-lines i { height: 7px; border-radius: 3px; background: #e2e6ec; }
.hb-lines i:first-child { width: 82%; background: #ccd3db; }
.hb-lines i:last-child { width: 54%; }
.hb-card { border: 1px solid #e6e9ee; border-radius: 11px; padding: 16px; display: flex; flex-direction: column; }
.hb-card-num { font-weight: 600; font-size: 27px; color: var(--navy); letter-spacing: -0.02em; line-height: 1; white-space: nowrap; }
/* the records card is ~150px wide on phones — 27px + the delta wraps "1,240" */
@media (max-width: 781px) { .hb-card-num { font-size: 19px; } .hb-delta { font-size: 11px; } }
.hb-chart { width: 100%; height: 52px; margin-top: 12px; display: block; }
.hb-chart-line { stroke: var(--teal); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.hb-ai { margin-top: 20px; display: flex; align-items: center; gap: 10px;
  background: color-mix(in srgb, var(--teal) 10%, transparent); border: 1px solid color-mix(in srgb, var(--teal) 28%, transparent); border-radius: 10px; padding: 12px 15px; }
.hb-ai-text { font-size: 12.5px; color: var(--navy); min-height: 15px; line-height: 1.25; }
.hb-card-cap { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: #5B6B7A; margin-bottom: 9px; }
.hb-num-row { display: flex; align-items: baseline; gap: 8px; }
.hb-delta { font-size: 11px; font-weight: 600; color: var(--teal-ink); }
.hb-tag { margin-left: auto; font-size: 9.5px; font-weight: 500; color: #51606E; background: #f2f4f7; border: 1px solid #e6e9ee; border-radius: 6px; padding: 3px 8px; flex: 0 0 auto; }
.hb-stats { display: flex; gap: 12px; margin-bottom: 22px; container-type: inline-size; }
.hb-stat { flex: 1; border: 1px solid #e6e9ee; border-radius: 10px; padding: 14px; }
.hb-stat-num { font-weight: 600; font-size: clamp(15px, 5.2cqw, 23px); color: var(--navy); letter-spacing: -0.02em; line-height: 1; white-space: nowrap; }
.hb-stat-label { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: #5B6B7A; margin-top: 9px; }
.hb-mem-list { display: flex; flex-direction: column; gap: 15px; }
.hb-mrow { display: flex; align-items: center; gap: 11px; }
.hb-pill { margin-left: auto; font-size: 10.5px; font-weight: 600; color: var(--teal-ink);
  background: color-mix(in srgb, var(--teal) 16%, transparent); border: 1px solid color-mix(in srgb, var(--teal) 40%, transparent); border-radius: 999px; padding: 4px 12px; flex: 0 0 auto; }
.hb-bar-wrap { margin-top: 22px; }
.hb-bar-label { width: 38%; height: 7px; border-radius: 3px; background: #e2e6ec; margin-bottom: 11px; }
.hb-track { height: 9px; border-radius: 999px; background: #eef1f5; overflow: hidden; }
.hb-bar-fill { height: 100%; width: 0; border-radius: 999px; background: var(--teal); }
.hb-uptime { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }
.hb-beacon-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 8px color-mix(in srgb, var(--teal) 70%, transparent); flex: 0 0 auto; }
.hb-uptime-num { font-weight: 600; font-size: 30px; color: var(--navy); letter-spacing: -0.02em; line-height: 1; }
.hb-uptime-label { font-size: 12px; color: #5B6B7A; margin-top: 6px; }
.hb-checks { display: flex; flex-direction: column; gap: 17px; }
.hb-check { display: flex; align-items: center; gap: 12px; color: var(--navy); }
.hb-check-label { font-size: 13.5px; color: #46515c; }
.hb-check-dot { margin-left: auto; width: 10px; height: 10px; border-radius: 50%; background: #d2d8df; flex: 0 0 auto; }
.hb-chat { display: flex; flex-direction: column; gap: 12px; min-height: 204px; }
.hb-bubble { max-width: 82%; padding: 12px 15px; border-radius: 14px; font-size: 12.5px; line-height: 1.45; }
.hb-bubble-user { align-self: flex-end; background: var(--navy); color: var(--white); border-bottom-right-radius: 4px; }
.hb-bubble-bot { align-self: flex-start; background: #eef1f5; color: var(--navy); border-bottom-left-radius: 4px; min-height: 20px; display: flex; align-items: center; }
.hb-typing { display: inline-flex; gap: 4px; align-items: center; }
.hb-typing i { width: 6px; height: 6px; border-radius: 50%; background: #6b7785; display: inline-block; animation: hb-typing 1s infinite ease-in-out; }
.hb-typing i:nth-child(2) { animation-delay: .15s; }
.hb-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes hb-typing { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .hb-typing i { animation: none; } }
.hb-input { display: flex; align-items: center; gap: 9px; margin-top: 20px; }
.hb-input-field { flex: 1; height: 38px; border: 1px solid #e6e9ee; border-radius: 9px; }
.hb-send { width: 38px; height: 38px; border-radius: 9px; background: var(--teal); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; color: var(--navy); }

/* Hero responsive */
@media (max-width: 900px) {
  .home-hero-grid { grid-template-columns: 1fr; gap: 44px; }
  .home-hero-inner { padding-top: 132px; padding-bottom: 72px; }
  .hb-wrap { order: 2; }
}
@media (max-width: 560px) {
  .home-hero-inner { padding-top: 116px; }
  .home-hero-cta .btn { flex: 1 1 auto; justify-content: center; }
}

/* ===========================================================================
 * HOMEPAGE SECTIONS 3–8 — native-block patterns, ported from the prototype.
 * Section background + 120px vertical padding come from each group's block
 * attributes; these classes style the inner content.
 * ========================================================================= */
.home-h2 { font-size: var(--wp--preset--font-size--xxx-large); line-height: 1.12; max-width: 640px; margin: 0; }
.home-lede { font-size: var(--wp--preset--font-size--large); color: var(--grey-700); line-height: 1.65; max-width: 640px; margin: 20px 0 0; }

/* Card grids */
.tec-cards { display: grid; gap: 20px; margin-top: 52px; }
.tec-cards--2 { grid-template-columns: repeat(2, 1fr); }
.tec-cards--3 { grid-template-columns: repeat(3, 1fr); }

/* Service / sector card */
.tec-card { border: 1px solid var(--border); border-radius: 12px; padding: 32px; background: var(--white);
  display: flex; flex-direction: column; height: 100%; text-decoration: none;
  transition: box-shadow .2s ease, transform .2s ease; }
.tec-card:hover { box-shadow: 0 8px 22px color-mix(in srgb, var(--navy) 7%, transparent); transform: translateY(-3px); }
.tec-card-icon { width: 44px; height: 44px; border-radius: 10px; background: var(--navy); color: var(--white);
  display: inline-flex; align-items: center; justify-content: center; margin-bottom: 24px; }
.tec-card-icon svg { width: 21px; height: 21px; }
.tec-card-title { font-size: clamp(18px, 1.7vw, 20px); font-weight: 600; letter-spacing: -0.01em; margin: 0 0 10px; color: var(--navy); }
.tec-card-body { font-size: var(--wp--preset--font-size--small); color: var(--grey-600); line-height: 1.6; margin: 0 0 26px; }
.tec-card-link { margin-top: auto; display: inline-flex; align-items: center; gap: 12px; color: var(--navy); font-weight: 500; font-size: 14.5px; text-decoration: none; }
.arrow-circle { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--navy); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; color: var(--navy); transition: background .2s ease, transform .2s ease, color .2s ease; }
.arrow-circle svg { width: 14px; height: 14px; }
.tec-card:hover .arrow-circle { background: var(--navy); color: var(--white) !important; transform: translateX(3px); }

/* AI Augmentation banner */
.ai-banner-grid { display: grid; grid-template-columns: minmax(0, 1fr) 540px; gap: 48px; align-items: center; position: relative; z-index: 1; }
.ai-banner-text { max-width: 520px; }
.ai-banner-h2 { font-size: clamp(32px, 3.8vw, 46px); line-height: 1.1; margin: 0; color: var(--white); }
.ai-banner-body { font-size: 17px; color: var(--grey-muted); line-height: 1.65; margin: 22px 0 0; }

/* ── Inner-page hero (parts/inner-hero.html) ──────────────────────────────
   Navy band matching the prototype PageHero: dot-field fading up from the
   bottom, dynamic breadcrumb + post-title + post-excerpt. The transparent
   site header sits over it (white-on-navy), exactly like the homepage hero. */
.inner-hero { position: relative; overflow: hidden; }
.inner-hero::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 300px; pointer-events: none; z-index: 0;
  background-image: radial-gradient(color-mix(in srgb, var(--white) 16%, transparent) 1px, transparent 1px); background-size: 24px 24px;
  -webkit-mask-image: linear-gradient(to top, #000 0%, #000 12%, transparent 100%);
  mask-image: linear-gradient(to top, #000 0%, #000 12%, transparent 100%); }
.inner-hero > .wrap { position: relative; z-index: 1; }
/* Reusable dot-field — the navy-band radial dot pattern (CTA, managed panel, AI showcase).
   Place as an absolutely-positioned child inside a position:relative;overflow:hidden navy band.
   --bottom fades the field in from the lower edge (matches the prototype's dot-field--bottom). */
.dot-field { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  max-width: none; margin: 0; /* constrained layouts impose max-width even on abs-pos children — kill it so the field spans full-bleed */
  background-image: radial-gradient(color-mix(in srgb, var(--white) 16%, transparent) 1px, transparent 1px); background-size: 24px 24px; }
.dot-field--bottom { top: auto; height: 300px;
  -webkit-mask-image: linear-gradient(to top, #000 0%, #000 12%, transparent 100%);
  mask-image: linear-gradient(to top, #000 0%, #000 12%, transparent 100%); }
/* Host for a dot-field: positions the field and lifts the real content above it. */
.dot-host { position: relative; overflow: hidden; }
.dot-host > *:not(.dot-field) { position: relative; z-index: 1; }
.inner-hero-title { font-size: var(--wp--preset--font-size--xxxx-large); line-height: 1.06; letter-spacing: -0.025em; font-weight: 600; color: var(--white); margin: 0; max-width: 900px; }
.inner-hero-intro { font-size: var(--wp--preset--font-size--large); color: var(--grey-muted); line-height: 1.6; max-width: 640px; margin: 20px 0 0; }
.inner-hero-intro:empty, .inner-hero-intro .wp-block-post-excerpt__excerpt:empty { display: none; }
/* breadcrumb — native core/breadcrumbs (.wp-block-breadcrumbs). textColor:base
   keeps the current item + separator white; links are muted to 60%. */
.inner-hero .wp-block-breadcrumbs { font-size: 13px; margin-bottom: 16px; }
.inner-hero .wp-block-breadcrumbs a { color: color-mix(in srgb, var(--white) 60%, transparent); text-decoration: none; }
.inner-hero .wp-block-breadcrumbs a:hover { color: var(--white); }
.inner-hero .wp-block-breadcrumbs li:not(:last-child)::after { color: color-mix(in srgb, var(--white) 32%, transparent); }
@media (max-width: 781px) { .inner-hero { padding-top: 104px !important; padding-bottom: 40px !important; } }
/* Section must be the positioning context so the dot layer (.ai-bg, absolute)
   is anchored to THIS banner — without it the layer escapes to the initial
   containing block and the dots paint at the top of the page (invisible here). */
.ai-banner { position: relative; }
.ai-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.ai-grid { position: absolute; inset: 0;
  background-image: radial-gradient(color-mix(in srgb, var(--white) 11%, transparent) 1px, transparent 1px); background-size: 30px 30px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 35%, transparent 100%);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 35%, transparent 100%); }
.ai-flow-wrap { container-type: inline-size; position: relative; width: 100%; max-width: 540px; aspect-ratio: 540 / 480; margin: 0 auto; }
.ai-flow-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ai-flow-line { fill: none; stroke: color-mix(in srgb, var(--white) 22%, transparent); stroke-width: 1.5; stroke-dasharray: 5 7; animation: ai-flow-move 2.8s linear infinite; }
@keyframes ai-flow-move { to { stroke-dashoffset: -48; } }
.ai-flow-node { position: absolute; border-radius: 14px; background: color-mix(in srgb, var(--white) 5%, transparent); border: 1px solid color-mix(in srgb, var(--white) 16%, transparent); display: flex; align-items: center; justify-content: center; transition: border-color .2s ease, background-color .2s ease; }
.ai-flow-node:hover { border-color: color-mix(in srgb, var(--white) 35%, transparent); background: color-mix(in srgb, var(--white) 8%, transparent); }
.ai-flow-logo { width: 5.19cqw; height: 5.19cqw; object-fit: contain; filter: brightness(0) invert(1); opacity: .82; }
.ai-flow-node:hover .ai-flow-logo { opacity: 1; }
.ai-flow-agent { background: color-mix(in srgb, var(--teal) 12%, transparent); border-color: color-mix(in srgb, var(--teal) 50%, transparent); box-shadow: 0 0 26px color-mix(in srgb, var(--teal) 20%, transparent); }
@media (prefers-reduced-motion: reduce) { .ai-flow-line { animation: none; } }

/* ---------------------------------------------------------------------------
   AI Augmentation showcase — the dialled-up flow diagram (prototype .aix-*):
   tools stream through the pulsing Tecology agent and back out, particles
   travelling along drawn connectors. Pure CSS (offset-path); no JS.
   Node positions/sizes in cqw against the 540px design width (same container-
   query scaling as .ai-flow-wrap); the dots' offset-paths are px-fixed to the
   540px stage, so they hide when the stage shrinks — the dashed-line drift
   still conveys the motion. */
.aix-band { position: relative; overflow: hidden; }
.aix-band > .wp-block-group { position: relative; z-index: 1; }
.aix-backdrop { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  max-width: none; margin: 0;
  background-image: radial-gradient(rgba(255,255,255,0.10) 1px, transparent 1px); background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 100% 80% at 50% 32%, #000 38%, transparent 100%);
  mask-image: radial-gradient(ellipse 100% 80% at 50% 32%, #000 38%, transparent 100%); }
.aix-wrap { container-type: inline-size; position: relative; width: 100%; max-width: 540px; aspect-ratio: 540 / 480; margin: 44px auto 0; }
.aix-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.aix-line { fill: none; stroke: rgba(255,255,255,0.16); stroke-width: 1.5; stroke-dasharray: 5 7; animation: ai-flow-move 2.8s linear infinite; }
.aix-node { position: absolute; border-radius: 14px; background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.16); display: flex; align-items: center; justify-content: center;
  transition: border-color .2s ease, background-color .2s ease, transform .2s ease; }
.aix-node:hover { border-color: rgba(255,255,255,0.4); background: rgba(255,255,255,0.09); transform: translateY(-2px); }
.aix-logo { width: 5.19cqw; height: 5.19cqw; object-fit: contain; filter: brightness(0) invert(1); opacity: 0.85; }
.aix-node:hover .aix-logo { opacity: 1; }
.aix-agent { background: rgba(74,215,209,0.14); border-color: rgba(74,215,209,0.55);
  border-radius: 18px; animation: aix-pulse 2.6s ease-out infinite; }
.aix-mark { width: 5.93cqw; height: 5.93cqw; } /* prototype <Mark size={32}/> — 32px square at the 540 design width */
.aix-dot { position: absolute; top: 0; left: 0; width: 8px; height: 8px; border-radius: 50%;
  background: var(--teal); box-shadow: 0 0 9px 2px rgba(74,215,209,0.7); offset-rotate: 0deg;
  offset-distance: 0%; animation: aix-flow 2.6s linear infinite; }
.aix-dot--out { background: var(--white); box-shadow: 0 0 9px 2px rgba(255,255,255,0.45); }
@keyframes aix-flow { 0% { offset-distance: 0%; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
@keyframes aix-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(74,215,209,0.45); } 70% { box-shadow: 0 0 0 18px rgba(74,215,209,0); } }
@container (max-width: 539px) { .aix-dot { display: none; } }
@media (prefers-reduced-motion: reduce) { .aix-line, .aix-agent { animation: none; } .aix-dot { display: none; } }

/* Selected work */
.work-head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 16px; }
.work-card { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--white); height: 100%; display: flex; flex-direction: column; text-decoration: none; transition: box-shadow .2s ease, transform .2s ease; }
.work-card:hover { box-shadow: 0 8px 22px color-mix(in srgb, var(--navy) 7%, transparent); transform: translateY(-3px); }
.work-card-media { aspect-ratio: 16 / 9; background: var(--navy); display: flex; align-items: center; justify-content: center; position: relative; flex: 0 0 auto; }
.work-card-media img { width: 46px; height: 46px; }
.work-card-sector { position: absolute; top: 14px; left: 16px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--grey-muted); }
.work-card-foot { padding: 22px 22px 24px; display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; flex: 1 1 auto; }
.work-card-meta { font-size: 13px; color: var(--grey-600); margin: 0 0 8px; }
.work-card-title { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; margin: 0; color: var(--navy); }

/* Testimonials */
.tquote-featured { background: var(--navy); border-radius: 16px; padding: clamp(32px, 4vw, 52px); margin: 0; color: var(--white); }
.tquote-mark { font-size: 88px; line-height: 0.5; height: 38px; overflow: hidden; color: var(--teal); font-weight: 700; margin: 0 0 18px; }
.tquote-featured blockquote { font-size: clamp(20px, 2.1vw, 26px); line-height: 1.5; font-weight: 500; color: var(--white); margin: 0; letter-spacing: -0.01em; max-width: 880px; border: 0; padding: 0; }
.tquote-cap { display: flex; align-items: center; gap: 16px; margin-top: 32px; }
.tquote-cap img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.tquote-cap-name { font-size: 16px; font-weight: 600; color: var(--white); }
.tquote-cap-role { font-size: 14px; color: var(--grey-muted); margin-top: 3px; }
.tquote-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 20px; }
.tquote-card { border: 1px solid var(--border); border-radius: 12px; padding: 30px; height: 100%; display: flex; flex-direction: column; margin: 0; background: var(--white); }
.tquote-card .tquote-mark { font-size: 64px; height: 28px; margin: 0 0 14px; }
.tquote-card blockquote { font-size: 16.5px; line-height: 1.6; color: var(--navy); margin: 0 0 24px; flex: 1 1 auto; border: 0; padding: 0; }
.tquote-card-cap { display: flex; align-items: center; gap: 13px; border-top: 1px solid var(--border); padding-top: 18px; }
.tquote-card-cap img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.tquote-card-cap-name { font-size: 14.5px; font-weight: 600; color: var(--navy); }
.tquote-card-cap-role { font-size: 13.5px; color: var(--grey-600); margin-top: 2px; }

/* Tertiary text link (See all work / Read more from our clients) */
.tec-tertiary { display: inline-flex; align-items: center; gap: 8px; color: var(--navy); font-weight: 500; font-size: 15px; text-decoration: none; }
.tec-tertiary svg { width: 17px; height: 17px; }
.tec-tertiary:hover { opacity: .6; }

/* Final CTA */
.cta-grid { display: grid; grid-template-columns: 1.45fr 0.85fr; gap: clamp(36px, 5vw, 72px); align-items: center; }
.cta-actions { display: flex; flex-direction: column; align-items: stretch; gap: 12px; border-left: 1px solid var(--border); padding-left: clamp(28px, 4vw, 52px); }
.cta-actions .btn { width: 100%; justify-content: center; }
/* §8 CTA now uses native wp:buttons — style the link to match .btn-primary / .btn-secondary. */
.cta-actions .wp-block-buttons { width: 100%; }
.cta-actions .wp-block-button { width: 100%; margin: 0; }
.cta-actions .wp-block-button__link { width: 100%; text-align: center; }
.cta-tail { font-size: 14px; color: var(--grey-700); margin: 6px 0 0; line-height: 1.6; }
.cta-tail a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }

/* ── Service pages (Website Development etc.) ───────────────────────────── */
.svc-lead { font-size: clamp(19px, 2vw, 23px); line-height: 1.55; color: var(--navy); font-weight: 500; letter-spacing: -0.01em; max-width: 820px; margin: 0; }
/* Trust / exclusivity callout (Quantum "exclusive to Tecology clients", etc.) — constrained to the lead column width, never full-bleed. */
.svc-callout { max-width: 820px; }
/* Pricing tier card — positioning context for the absolute "Most popular" pill. */
.svc-tier { position: relative; }
.svc-card { border: 1px solid var(--border); border-radius: 12px; padding: 28px; background: var(--white); height: 100%; }
/* Lucide icons in the Icon Block chips are stroke-based — keep them as outlines (the block defaults to filling). */
.svc-card .icon-container svg, .svc-card .icon-container svg * { fill: none !important; }
.svc-card-title { font-size: 17.5px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 9px; color: var(--navy); }
.svc-card-body { font-size: 14.5px; color: var(--grey-600); line-height: 1.6; margin: 0; }
.svc-stat { font-size: clamp(56px, 7vw, 86px); font-weight: 600; color: var(--navy); letter-spacing: -0.03em; line-height: 1; margin: 0; }
.svc-stat-label { font-size: 15.5px; color: var(--grey-600); line-height: 1.5; margin: 10px 0 0; max-width: 280px; }
.svc-compare { border: 1px solid var(--border); border-radius: 14px; background: var(--white); height: 100%; }
.svc-compare.is-featured { border: 1.5px solid var(--navy); }
.svc-compare-label { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--grey-400); margin: 0 0 6px; }
.svc-compare.is-featured .svc-compare-label { color: var(--teal-ink); }
.svc-compare-title { font-size: 19px; font-weight: 600; color: var(--navy); margin: 0 0 18px; }
.svc-bars { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 20px; }
.svc-bars span { width: 34px; height: 13px; border-radius: 4px; background: #e2e6ec; }
.svc-bars.is-lean span { background: var(--teal); }
.svc-compare ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.svc-compare li { font-size: 14px; color: var(--grey-600); line-height: 1.4; padding-left: 24px; position: relative; }
.svc-compare li::before { content: "✕"; position: absolute; left: 0; color: #b0b7bf; font-weight: 600; }
.svc-compare.is-featured li { color: var(--grey-700); }
.svc-compare.is-featured li::before { content: "✓"; color: var(--teal-ink); }
.svc-build-own { display: flex; gap: 18px; align-items: flex-start; }
.svc-quote { font-size: clamp(26px, 3.4vw, 42px); line-height: 1.25; font-weight: 600; color: var(--navy); letter-spacing: -0.025em; max-width: 820px; margin: 0 auto; border: 0; padding: 0; }
.svc-quote cite { display: block; font-size: 14.5px; color: var(--grey-600); margin-top: 22px; font-style: normal; letter-spacing: .02em; }
/* Cards on the navy bands (conversion, phases) — translucent, palette can't express these. */
.svc-band-dark h2, .svc-band-dark .home-h2 { color: var(--white); }
.svc-darkcard { background: color-mix(in srgb, var(--white) 4%, transparent); border: 1px solid color-mix(in srgb, var(--white) 10%, transparent); border-radius: 14px; height: 100%; }
.svc-darkcard .icon-container { background: color-mix(in srgb, var(--teal) 12%, transparent) !important; border: 1px solid color-mix(in srgb, var(--teal) 28%, transparent); }
.svc-darkcard .svc-card-title { color: var(--white); }
.svc-darkcard .svc-card-body { color: var(--grey-muted); }
/* Accessibility points — top-rule, bare icon (no chip) */
.svc-accpoint { border-top: 2px solid var(--navy); padding-top: 20px; }
.svc-accpoint .icon-container { background: transparent !important; padding: 0 !important; width: 22px !important; }
/* FAQ — native core/details items */
.svc-faq .wp-block-details { border-top: 1px solid var(--border); margin: 0; }
.svc-faq .wp-block-details:last-of-type { border-bottom: 1px solid var(--border); }
.svc-faq summary { font-size: 16px; font-weight: 600; color: var(--navy); padding: 20px 36px 20px 0; cursor: pointer; list-style: none; position: relative; }
.svc-faq summary::-webkit-details-marker { display: none; }
.svc-faq summary::after { content: "+"; position: absolute; right: 6px; top: 18px; font-size: 22px; font-weight: 400; color: var(--grey-600); }
.svc-faq details[open] summary::after { content: "\2013"; }
.svc-faq .wp-block-details > :not(summary) { font-size: 15px; color: var(--grey-700); line-height: 1.65; margin: 0 0 20px; max-width: 780px; }
/* Retainer pricing table */
.svc-rate { font-size: 40px; font-weight: 600; color: var(--navy); letter-spacing: -0.02em; line-height: 1; margin: 0; }
.svc-rate small { font-size: 15px; font-weight: 400; color: var(--grey-600); letter-spacing: 0; }
.svc-pricing-table { border: 1px solid var(--border); border-radius: 14px; overflow: hidden; margin: 0; }
.svc-pricing-table table { border-collapse: collapse; width: 100%; }
.svc-pricing-table th, .svc-pricing-table td { text-align: left; padding: 14px 20px; font-size: 14px; border: 0; }
.svc-pricing-table thead th { background: var(--paper); font-weight: 600; color: var(--navy); font-size: 12.5px; }
.svc-pricing-table tbody tr { border-top: 1px solid var(--border); }
.svc-pricing-table tbody td:first-child { font-weight: 600; color: var(--navy); }
.svc-pricing-table tbody td:last-child { font-weight: 600; color: var(--navy); }
.home-cta { position: relative; overflow: hidden; }
.home-cta > * { position: relative; z-index: 1; }
.cta-watermark { position: absolute; right: -1%; bottom: -32%; height: 165%; width: auto; opacity: .045; pointer-events: none; user-select: none; z-index: 0; }

/* Homepage sections responsive */
@media (max-width: 980px) {
  .tec-cards--2, .tec-cards--3, .tquote-grid { grid-template-columns: repeat(2, 1fr); }
  .ai-banner-grid { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 640px) {
  .tec-cards--2, .tec-cards--3, .tquote-grid { grid-template-columns: 1fr; }
  .cta-grid { grid-template-columns: 1fr; gap: 32px; }
  .cta-actions { border-left: 0; padding-left: 0; }
}

/* ---------------------------------------------------------------------------
   Error 404 — full navy stage: the type-construction blueprint (white, faint)
   draws itself in behind centred content (type-specimen.js, gated on is_404
   too). Content enters with a small staggered fade-up (pure CSS).
   ------------------------------------------------------------------------- */
.err-404 { position: relative; overflow: hidden; }
.err-404 > .wrap { position: relative; z-index: 1; width: min(1320px, calc(100% - 80px)); margin: 0 auto; }
.err-404-specimen { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(760px, 94vw); height: auto; color: var(--white); opacity: 0.10; pointer-events: none; z-index: 0; max-width: none; margin: 0; }
.err-404-title { font-size: var(--wp--preset--font-size--xxxxx-large); line-height: 1.06; letter-spacing: -0.025em;
  font-weight: 600; color: var(--white); margin: 0 auto; max-width: 760px; }
.err-404-intro { font-size: var(--wp--preset--font-size--large); color: var(--grey-muted); line-height: 1.6;
  max-width: 560px; margin: 18px auto 30px; }
/* Search, restyled for the navy stage. */
.err-404 .wp-block-search__inside-wrapper { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.18);
  border-radius: 10px; padding: 4px; transition: border-color .2s ease, background-color .2s ease; }
.err-404 .wp-block-search__inside-wrapper:focus-within { border-color: rgba(255,255,255,0.45); background: rgba(255,255,255,0.09); }
.err-404 .wp-block-search__input { background: transparent; border: 0; color: var(--white); padding: 9px 14px; font-size: 15px; }
.err-404 .wp-block-search__input::placeholder { color: var(--grey-muted); }
.err-404 .wp-block-search__input:focus { outline: none; }
.err-404 .wp-block-search__button { background: var(--white); color: var(--navy); border: 0; border-radius: 7px; padding: 9px 14px; }
/* Staggered entrance — JS-free; respects reduced motion. */
@keyframes err404-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.err-404-item { animation: err404-up .7s cubic-bezier(0.22, 1, 0.36, 1) both; }
.err-404-item:nth-child(2) { animation-delay: .08s; }
.err-404-item:nth-child(3) { animation-delay: .16s; }
.err-404-item:nth-child(4) { animation-delay: .24s; }
.err-404-item:nth-child(5) { animation-delay: .32s; }
@media (prefers-reduced-motion: reduce) { .err-404-item { animation: none; } }

/* ---------------------------------------------------------------------------
   Scroll reveals (prototype <Reveal>): cards fade-up with a per-sibling
   stagger as they enter the viewport. Classes are added by reveal.js only,
   so content is fully visible without JS; reduced-motion skips entirely.
   ------------------------------------------------------------------------- */
.rv { opacity: 0; visibility: hidden; transform: translateY(16px); }
/* The ENTRANCE owns the transition unconditionally until .rv-done hands over:
   card hover rules (.tm-card/.tec-card, transform+box-shadow only, NO opacity)
   sit later in the file and were replacing this at equal specificity — JE
   cards POPPED to full opacity with a 0.2s slide instead of fading. LONGHANDS,
   not the shorthand: a `transition: … !important` shorthand also forces
   transition-delay:0s !important, which beat the inline stagger delays and
   made whole grids fade AT ONCE (Tony). Delay is deliberately not declared —
   the script's inline transition-delay is the stagger. */
.rv:not(.rv-done) {
  transition-property: opacity, transform, visibility !important;
  transition-duration: .55s, .55s, 0s !important;
  transition-timing-function: ease, cubic-bezier(0.22, 1, 0.36, 1), linear !important; }
.rv-in { opacity: 1; visibility: visible; transform: none; }

/* ---------------------------------------------------------------------------
   Case-study WorkCard (JetEngine listing "Work Card — Case Studies").
   Prototype WorkCard: navy 16:9 cover (t-mark + taxonomy kicker), then
   client · title + arrow-circle. The listing item carries .tec-card (hover
   lift + reveal) with padding zeroed; these classes do the fine styling.
   ------------------------------------------------------------------------- */
.work-card { padding: 0 !important; overflow: hidden; }
.work-cover { aspect-ratio: 16 / 9; background: var(--navy); display: flex; align-items: center; justify-content: center; position: relative; }
.work-cover img { width: 46px; height: 46px; }
.work-cover .jet-listing-dynamic-terms { position: absolute; top: 14px; left: 16px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--grey-muted); }
.work-cover .jet-listing-dynamic-terms a { color: inherit; text-decoration: none; pointer-events: none; }
.work-body { padding: 22px 22px 24px; display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex: 1 1 auto; }
.work-body .work-arrow-ib, .work-body .work-arrow { align-self: flex-end; }
.work-client { font-size: 13px; color: var(--grey-600); margin-bottom: 8px; }
.work-title { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; color: var(--navy); }
.work-arrow { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--border); display: inline-flex; align-items: center; justify-content: center; color: var(--navy); transition: background-color .2s ease, color .2s ease, transform .2s ease; }
.tec-card:hover .work-arrow { background: var(--navy); color: #fff; transform: translateX(3px); }
/* The listing grid item wrapper should stretch cards evenly. */
.jet-listing-grid__item > .tec-card { height: 100%; }

/* Insights post card (JetEngine listing "Post Card — Insights") — prototype BlogPage card. */
.post-card { padding: 0 !important; overflow: hidden; border-radius: 14px !important; }
.post-media { aspect-ratio: 16 / 9; background: var(--navy); position: relative; overflow: hidden;
  background-image: radial-gradient(rgba(255,255,255,0.09) 1px, transparent 1px); background-size: 18px 18px; }
.post-media img { width: 100%; height: 100%; object-fit: cover; display: block; position: relative; z-index: 1; }
.post-body { padding: 24px; display: flex; flex-direction: column; flex: 1 1 auto; }
.post-cat .jet-listing-dynamic-terms, .post-cat { font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--teal-ink, #0C6E6A); margin-bottom: 12px; }
.post-cat a { color: inherit; text-decoration: none; pointer-events: none; }
.post-title { font-size: 18px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; margin: 0 0 10px; color: var(--navy); }
.post-excerpt { font-size: 14px; color: var(--grey-600); line-height: 1.6; margin: 0 0 20px; flex: 1 1 auto; }
.post-readmore { font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 7px; margin-top: auto; }

/* Testimonial wall card (JetEngine listing "Testimonial Card") — prototype WallOfLove. */
.tm-card { background: var(--white); border: 1px solid var(--border); border-radius: 12px; padding: 26px; }
.tm-quote { font-size: 17.5px; font-weight: 500; line-height: 1.6; color: var(--navy); margin: 0 0 18px; }
.tm-foot { border-top: 1px solid var(--border); padding-top: 16px; }
.tm-person { gap: 12px; }
.tm-avatar img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; display: block; }
.tm-name { font-size: 14.5px; font-weight: 600; color: var(--navy); line-height: 1.3; }
.tm-role, .tm-org { font-size: 13.5px; color: var(--grey-600); line-height: 1.3; }
.jet-listing-grid__item { align-self: start; }
/* sector kicker = navy pill, top-left (Tony): wrapper positions, INNER div
   is the pill (JE renders wrapper+inner both carrying the class) */
.work-cover div.jet-listing-dynamic-field-block.work-kicker { position: absolute; top: 14px; left: 16px; z-index: 2; }
.work-cover .work-kicker .jet-listing-dynamic-field.work-kicker,
.work-cover div.jet-listing.work-kicker {
  position: static; display: inline-block;
  background: rgba(14, 25, 36, 0.78); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  color: var(--white); font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  line-height: 1; padding: 7px 12px 6px; border-radius: 999px; white-space: nowrap; }
.work-meta { gap: 6px; margin-bottom: 8px; font-size: 13px; color: var(--grey-600); align-items: baseline; }
/* JE renders each field as wrapper>inner divs (both block) — keep everything
   on one baseline row: wrappers inline-flex, inners inline. */
.work-meta .jet-listing-dynamic-field { display: inline-flex; align-items: baseline; }
.work-meta .jet-listing-dynamic-field > div, .work-meta .jet-listing-dynamic-field .work-client, .work-meta .jet-listing-dynamic-field .work-year { display: inline; margin: 0; }
.work-meta .work-client, .work-meta .work-year { margin-bottom: 0; }
.work-meta > div:last-child::before { content: "·"; color: var(--grey-400, #9AA6B2); margin-right: 6px; }
.work-meta .work-year { white-space: nowrap; }

/* JetSmartFilters — prototype chip styling, matched to JSF's real DOM:
   .jet-radio-list > __row(.jet-filter-row!) > label.__item > input.__input + div.__button > (__decorator + text).
   NB JSF's own option rows carry `jet-filter-row` — our layout wrapper class is `tec-filter-row`. */
.tec-filter-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tec-filter-label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--grey-400); min-width: 64px; }
.jet-smart-filters-radio .jet-radio-list { display: flex; flex-wrap: wrap; gap: 10px; }
.jet-smart-filters-radio .jet-radio-list__row { margin: 0 !important; }
.jet-smart-filters-radio .jet-radio-list__item { margin: 0; display: block; }
.jet-smart-filters-radio .jet-radio-list__input { position: absolute; opacity: 0; pointer-events: none; }
.jet-smart-filters-radio .jet-radio-list__decorator { display: none !important; }
.jet-smart-filters-radio .jet-radio-list__label { margin: 0 !important; }
.jet-smart-filters-radio .jet-radio-list__button { display: inline-flex; align-items: center; font-size: 13px; font-weight: 500; cursor: pointer;
  padding: 7px 15px; border-radius: 999px; border: 1px solid #c9d1d9; background: #fff; color: var(--grey-600); transition: all .15s ease; }
.jet-smart-filters-radio .jet-radio-list__button:hover { border-color: var(--navy); color: var(--navy); }
.jet-smart-filters-radio .jet-radio-list__input:checked ~ .jet-radio-list__button { background: var(--navy); border-color: var(--navy); color: #fff; }
.jet-search-filter { max-width: 420px; }
.jet-search-filter__input { width: 100%; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; font-size: 15px; font-family: inherit; color: var(--navy); background: #fff; }
.jet-search-filter__input:focus { outline: none; border-color: var(--navy); }

/* ---------------------------------------------------------------------------
   Equal-height cards — every card fills its grid track / column, so rows of
   cards always match heights regardless of copy length.
   ------------------------------------------------------------------------- */
.is-layout-grid > .svc-card, .is-layout-grid > .tec-card, .is-layout-grid > .svc-darkcard, .is-layout-grid > .svc-tier { height: 100%; }
.is-layout-grid > .wp-block-html { display: flex; }
.is-layout-grid > .wp-block-html > a.tec-card, .is-layout-grid > .wp-block-html > .tec-card { flex: 1 1 auto; height: auto; }
.wp-block-column > .svc-card, .wp-block-column > .tec-card { height: 100%; }
.jet-listing-grid__item { display: flex; }
.jet-listing-grid__item > * { flex: 1 1 auto; }
/* Cards lay out as columns so footers (links/arrows) sit on a shared baseline. */
.svc-card { display: flex; flex-direction: column; }
.svc-card > .wp-block-outermost-icon-block { flex: 0 0 auto; }

/* ---------------------------------------------------------------------------
   Single insights post (templates/single.html) — prototype BlogPostPage.
   ------------------------------------------------------------------------- */
.post-hero { position: relative; }
.post-hero .post-back { font-size: 13.5px; color: var(--grey-muted); display: inline-flex; align-items: center; gap: 7px; margin-bottom: 26px; text-decoration: none; }
.post-hero .post-back:hover { color: var(--white); }
.post-hero .jet-listing-dynamic-terms, .post-hero .post-cat-line { font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--teal); margin-bottom: 16px; }
.post-hero .post-cat-line a { color: inherit; text-decoration: none; }
.post-hero-title { font-size: clamp(30px, 3.6vw, 44px); letter-spacing: -0.025em; font-weight: 600; color: var(--white); margin: 0 0 22px; line-height: 1.12; max-width: 760px; }
.post-hero-meta { display: flex; align-items: center; gap: 12px; font-size: 14.5px; color: rgba(255, 255, 255, 0.85); flex-wrap: wrap; }
.post-hero-meta .wp-block-post-author-name { font-weight: 600; color: var(--white); }
.post-hero-meta .wp-block-post-date { color: rgba(255, 255, 255, 0.85); }
.post-hero-meta > p { color: rgba(255, 255, 255, 0.35); margin: 0; }
.post-article { font-size: 16.5px; color: var(--wp--preset--color--contrast-2); line-height: 1.75; }
.post-article > p { margin: 0 0 20px; }
.post-article h2 { font-size: clamp(22px, 2.4vw, 28px); font-weight: 600; letter-spacing: -0.02em; color: var(--navy); margin: 40px 0 14px; line-height: 1.2; }
.post-article h3 { font-size: 19px; font-weight: 600; color: var(--navy); margin: 32px 0 12px; }
.post-article blockquote { margin: 32px 0; padding: 4px 0 4px 24px; border-left: 3px solid var(--teal); font-size: clamp(20px, 2.2vw, 24px); line-height: 1.45; font-weight: 500; color: var(--navy); letter-spacing: -0.01em; }
.post-article blockquote p { margin: 0; font-size: inherit; color: inherit; }
.post-article ul { margin: 0 0 20px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
/* lists read tighter than prose: 1.6 leading (the article's 1.75 made 11px
   gaps look like ~23px of air between items) */
.post-article ul li { position: relative; padding-left: 18px; margin: 0; line-height: 1.6; }
.post-article ul li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 7px; height: 7px; border-radius: 50%; background: var(--teal); }
.post-article a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.post-article img { border-radius: 12px; }

/* Testimonial popup (jet-popup 15770) — full quote with attribution. */
.jet-popup .tm-popup { max-width: 640px; }
.tm-popup-body { font-size: 16px; line-height: 1.7; color: var(--wp--preset--color--contrast-2); }
.tm-popup-body p { margin: 0 0 14px; }
.tm-popup-head { gap: 16px; border-bottom: 1px solid var(--border); padding-bottom: 18px; margin-bottom: 22px; }
.tm-popup-head .tm-avatar img { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; }
/* Popup shell — brand theme via JetPopup's own CSS variables */
.jet-popup.jet-popup--front-mode {
  --jp-overlay-bg-color: rgba(14, 25, 36, 0.55) !important;
  --jp-container-width: 680px !important;
  --jp-container-box-shadow: 0 30px 80px rgba(14, 25, 36, 0.35) !important;
  --jp-container-ver-padding: 38px !important;
  --jp-container-hor-padding: 42px !important;
  --jp-close-button-size: 36px !important;
  --jp-close-button-icon-size: 13px !important;
  --jp-close-button-bg-color: #EEF2F6 !important;
  --jp-close-button-icon-color: #0E1924 !important;
  --jp-close-button-border-radius: 50% !important;
  --jp-close-button-translate-x: -14px !important;
  --jp-close-button-translate-y: 14px !important;
}
.jet-popup__container { border-radius: 18px; }
.jet-popup.jet-popup--front-mode .jet-popup__container-inner { border-radius: 18px; }
.jet-popup.jet-popup--front-mode .jet-popup__close-button {
  box-shadow: none !important;
  border: 0 !important; outline: none;
  transform: translate(-14px, 14px) !important;
  transition: transform .45s cubic-bezier(0.33, 1, 0.68, 1), background-color .2s ease !important;
}
/* hover: soft grey circle (Google-style), the × turns a slow quarter */
.jet-popup.jet-popup--front-mode .jet-popup__close-button:hover {
  background-color: #E3E8EE !important;
  transform: translate(-14px, 14px) rotate(90deg) !important;
}
@media (prefers-reduced-motion: reduce) {
  .jet-popup.jet-popup--front-mode .jet-popup__close-button { transition: none; }
  .jet-popup.jet-popup--front-mode .jet-popup__close-button:hover { transform: translate(-14px, 14px) !important; }
}

/* Trust strip as a clients-CPT listing: two identical grids ride the marquee
   track for the seamless loop; grid forced into a flex row. Logos uniform
   height (38px) — the old hand-tuned per-logo heights are superseded. */
.trust-track--listing { display: flex; flex-wrap: nowrap; width: max-content; }
/* both halves (the live grid AND its aria-hidden duplicate wrapper) must
   shrink-wrap to identical content widths or the -50% loop wrap jumps */
.trust-track--listing > div { width: max-content; flex: 0 0 auto; }
.trust-track--listing .jet-listing-grid__items { display: flex !important; flex-wrap: nowrap; gap: 0; grid-template-columns: none !important; align-items: center !important; width: max-content; }
/* JE items default to flex-basis calc(100%/columns) — a PERCENTAGE of two
   different containers here; force content-sized items so the halves match */
.trust-track--listing .jet-listing-grid__item { display: flex; flex: 0 0 auto !important; width: auto !important; max-width: none; align-items: center; align-self: center !important; }
.trust-track--listing .jet-engine-listing-overlay-wrap { display: flex; align-items: center; }
.client-cell { padding: 0 36px; display: flex; align-items: center; }
.client-cell .client-logo img, .client-cell img { height: 40px; width: auto; max-width: 220px; object-fit: contain; filter: brightness(0) invert(1); opacity: .55; transition: opacity .2s ease; }
.jet-engine-listing-overlay-wrap:hover .client-cell img { opacity: .9; }
/* JE dynamic-image renders TWO wrapper divs that inherit the legacy .trust-logo
   class — neutralise them so opacity/filter apply once, on the img only. */
.client-cell div.trust-logo, .client-cell .jet-listing-dynamic-image { opacity: 1 !important; filter: none !important; }

/* Home testimonial cards from the CPT — compact card + explicit click hint. */
.tquote-grid--listing { display: block !important; }
/* JE sizes flex items at calc(100%/columns); +gap that overflows the row and
   stacks 1-per-row. Use a real 2-col grid instead (1-col when stacked). */
.tquote-grid--listing .jet-listing-grid__items {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--wp--preset--spacing--20, 20px);
}
.tquote-grid--listing .jet-listing-grid__item { padding: 0 !important; }
@media (max-width: 781px) {
  .tquote-grid--listing .jet-listing-grid__items { grid-template-columns: 1fr; }
}
.tquote-grid--listing .jet-listing-grid__item { width: auto !important; max-width: none; }
/* Pin person + read-hint to the card bottom so dividers align across the row.
   JE items default align-self:start (gotcha #3) and the popup overlay-wrap sits
   between item and card — stretch the whole chain or rows go ragged. */
.tquote-grid--listing .jet-listing-grid__item { align-self: stretch !important; display: flex; }
.tquote-grid--listing .jet-engine-listing-overlay-wrap { display: flex; flex-direction: column; width: 100%; }
.tquote-grid--listing .tm-card--home { display: flex; flex-direction: column; height: 100%; flex: 1; }
.tquote-grid--listing .tm-quote--home { flex: 1 0 auto; }
.tm-card { transition: box-shadow .2s ease, transform .2s ease; position: relative; overflow: hidden; }
.tm-card:hover { box-shadow: 0 8px 22px rgba(14,25,36,.07); transform: translateY(-3px); }
.tm-quote--home { font-size: 17.5px; line-height: 1.5; font-weight: 500; letter-spacing: -0.01em; color: var(--navy); margin: 0 0 20px; }
/* Testimonial cards (home + wall) — lift + teal underline sweep on hover */
.tm-card--home { padding: 30px !important; border-radius: 14px !important; }
.tm-card::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--teal, #4AD7D1); transform: scaleX(0); transform-origin: left;
  transition: transform .25s ease;
}
.tm-card:hover::after { transform: scaleX(1); }
.tm-card--home .tm-avatar img { width: 52px; height: 52px; }
.tm-card--home .tm-name { font-size: 15px; }
.tm-card--home .tm-foot { border-top: 1px solid var(--border, #D7DCE0); padding-top: 16px; }
.tm-read-hint { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: #0c6e6a; margin-top: 14px; }
.tm-card--home .tm-foot { margin-top: 0; }

/* Testimonial proof links (ORCID / Scholar / ResearchGate / LinkedIn) — icon
   buttons; each renders only when its URL meta is set (JetEngine dynamic
   visibility). Label text is visually hidden but stays for screen readers. */
.tm-meta-row { border-top: 1px solid var(--border); padding-top: 12px; margin-top: 12px; gap: 12px; }
.tm-sector { font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--teal-ink, #0C6E6A); }
.tm-links { gap: 7px; }
.tm-link .jet-listing-dynamic-link__link { display: inline-flex; width: 28px; height: 28px; border-radius: 7px; border: 1px solid var(--border);
  align-items: center; justify-content: center; background-color: #fff; background-repeat: no-repeat; background-position: center; background-size: 13px 13px;
  opacity: .65; transition: opacity .15s ease, border-color .15s ease; }
.tm-link .jet-listing-dynamic-link__link:hover { opacity: 1; border-color: var(--navy); }
.tm-link .jet-listing-dynamic-link__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tm-link--orcid .jet-listing-dynamic-link__link { background-image: url('brand-icons/orcid.svg'); }
.tm-link--googlescholar .jet-listing-dynamic-link__link { background-image: url('brand-icons/googlescholar.svg'); }
.tm-link--researchgate .jet-listing-dynamic-link__link { background-image: url('brand-icons/researchgate.svg'); }
.tm-link--linkedin .jet-listing-dynamic-link__link { background-image: url('brand-icons/linkedin.svg'); }

/* ============================================================
   Contact page — OSM map (brand-muted) + sticky form
   ============================================================ */
.contact-map { z-index: 0; }
.contact-map .leaflet-tile-pane {
  filter: grayscale(1) contrast(0.92) brightness(1.04);
}
.contact-map-pin-dot {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  position: relative;
  background: var(--teal, #4AD7D1);
  border: 3px solid #fff;
  box-shadow: 0 0 0 2px rgba(74, 215, 209, 0.35), 0 2px 8px rgba(14, 25, 36, 0.35);
}
.contact-map-pin-dot::after { content: ""; position: absolute; inset: -3px; border-radius: 50%;
  background: var(--teal, #4AD7D1); animation: beacon-pulse 2.4s ease-out infinite; }
@media (prefers-reduced-motion: reduce) { .contact-map-pin-dot::after { animation: none; opacity: 0; } }
.contact-map .leaflet-popup-content-wrapper {
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(14, 25, 36, 0.18);
}
.contact-map .leaflet-popup-content {
  font-size: 13px;
  line-height: 1.55;
  color: var(--navy, #0E1924);
  margin: 12px 16px;
}
.contact-map .leaflet-control-attribution {
  font-size: 10px;
  background: rgba(255, 255, 255, 0.82);
}
/* Sticky form: the column must stretch to full row height for sticky to track */
.wp-block-column.contact-form-col { align-self: stretch !important; }
.contact-sticky { position: sticky; top: 96px; }
@media (max-width: 781px) {
  .contact-sticky { position: static; }
}

/* Marquee logo optical balance — the ORIGINAL hand-tuned heights from
   patterns/home-hero.php $clients. New clients default to 40px. */
.client-cell img[src*="aspa"]    { height: 34px; }
.client-cell img[src*="uea"]     { height: 40px; }
.client-cell img[src*="sdu"]     { height: 48px; }
.client-cell img[src*="ispah"]   { height: 50px; }
.client-cell img[src*="thekids"] { height: 52px; }
.client-cell img[src*="uws"]     { height: 46px; }

/* Membersites lead — logo card + faded divider between text and logo */
.ms-logo-card {
  box-shadow: 0 6px 18px rgba(14, 25, 36, 0.04);
  transition: box-shadow .2s ease, transform .2s ease;
}
.ms-logo-card img { border-radius: 0 !important; }
.ms-logo-card:hover {
  box-shadow: 0 10px 24px rgba(14, 25, 36, 0.07);
  transform: translateY(-2px);
}
.ms-logo-col { position: relative; }
.ms-logo-col::before {
  content: "";
  position: absolute;
  left: -28px;
  top: 8%;
  bottom: 8%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(215, 220, 224, 0.55) 50%, transparent);
}
@media (max-width: 781px) {
  .ms-logo-col::before { display: none; }
}

/* ============================================================
   Home §6 — Selected work carousel (JE listing-grid + Swiper)
   Arrows live BELOW the track, bottom-left, brand circles.
   ============================================================ */
.work-carousel .jet-listing-grid__slider {
  padding-bottom: 78px; /* room for the arrow row */
}
/* tighten JE's default 60px slide gutter to the design's 20px */
.work-carousel .jet-listing-grid__item {
  padding-left: 10px !important;
  padding-right: 10px !important;
}
.work-carousel .jet-listing-grid__slider { margin-left: -10px; margin-right: -10px; }
.work-carousel .swiper-arrow {
  top: auto !important;
  bottom: 0 !important;
  margin: 0 !important;
  transform: none !important;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--white, #fff);
  border: 1px solid var(--border, #D7DCE0);
  color: var(--navy, #0E1924);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease, opacity .18s ease;
  z-index: 2;
}
.work-carousel .prev-arrow { left: 10px !important; right: auto !important; }
.work-carousel .next-arrow { left: 68px !important; right: auto !important; }
.work-carousel .swiper-arrow svg { width: 17px; height: 17px; fill: currentColor; }
/* JE flips the next arrow via transform on the wrapper, which our repositioning
   resets — rotate the icon itself instead */
.work-carousel .next-arrow svg { transform: rotate(180deg); }
/* Equal-height slides: stretch every card to the tallest in view */
.work-carousel .swiper-wrapper { align-items: stretch; }
.work-carousel .jet-listing-grid__item { height: auto; display: flex; align-self: stretch !important; }
.work-carousel .jet-listing-grid__item > * { width: 100%; display: flex; flex-direction: column; }
.work-carousel .work-card { height: 100%; display: flex; flex-direction: column; }
.work-carousel .work-card .work-body { flex: 1; }
.work-carousel .swiper-arrow:hover {
  background: var(--navy, #0E1924);
  border-color: var(--navy, #0E1924);
  color: #fff;
}
.work-carousel .swiper-arrow.swiper-button-disabled {
  opacity: .35;
  pointer-events: none;
}

/* Popup trigger inside testimonial cards (whole card is NOT a link) */
.tm-read-link { cursor: pointer; margin-top: 14px; }
.tm-read-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Home — Insights carousel: post cards fill slide height */
.insights-carousel .post-card { height: 100%; display: flex; flex-direction: column; }
.insights-carousel .post-card .post-excerpt, .insights-carousel .post-card p:last-of-type { margin-top: auto; }

/* Post-card meta row: category pill + clock-iconed reading time */
.post-cat { display: flex !important; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px !important; }
/* month-year on the cat row's right — quiet, never uppercase like the row */
.post-cat .post-date { font-size: 12px; font-weight: 500; color: var(--grey-600, #5B6B7A); letter-spacing: 0; text-transform: none; white-space: nowrap; }
/* foot: read time left, Read article right, pinned to the card base */
.post-foot { margin-top: auto !important; width: 100%; }
.post-foot .post-readmore { margin-top: 0; }
.post-cat .jet-listing-dynamic-terms {
  margin-bottom: 0; font-size: 11px; letter-spacing: .08em;
  background: rgba(74, 215, 209, 0.12); border: 1px solid rgba(74, 215, 209, 0.3);
  color: var(--teal-ink, #0C6E6A); padding: 4px 10px; border-radius: 999px; line-height: 1.4;
}
.post-readtime { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--grey-600, #5B6B7A); white-space: nowrap; letter-spacing: 0; text-transform: none; }
.post-readtime .post-readtime { gap: 0; }
.post-readtime .post-readtime::before { content: none !important; }
.post-readtime::before {
  content: ""; width: 13px; height: 13px; flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>') center / contain no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>') center / contain no-repeat;
}
/* Read article — quiet link that becomes a navy pill on card hover */
.post-readmore {
  align-self: flex-start; padding: 9px 16px; border-radius: 999px;
  border: 1px solid var(--border, #D7DCE0); color: var(--navy, #0E1924);
  background: transparent; transition: background .18s ease, color .18s ease, border-color .18s ease, gap .18s ease;
}
.post-readmore svg { transition: transform .18s ease; }
.tec-card.post-card:hover .post-readmore { background: var(--navy, #0E1924); border-color: var(--navy, #0E1924); color: #fff; }
.tec-card.post-card:hover .post-readmore svg { transform: translateX(3px); }


/* ============================================================
   Single post — featured image overlap, author box, meta
   ============================================================ */
/* (post-feature-wrap retired — featured image now lives inside the split hero) */
.post-feature-img img, .post-feature-img {
  border-radius: 16px; overflow: hidden; display: block; width: 100%;
}
.post-feature-img img { box-shadow: 0 24px 60px rgba(14, 25, 36, 0.18); }
.post-author-main { gap: 18px; max-width: 640px; }
.post-author-avatar img { border-radius: 50%; display: block; }
.post-author-kicker { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--grey-600, #5B6B7A); margin: 0; }
.post-author-name { font-size: 17px; font-weight: 600; color: var(--navy); margin: 0; }
.post-author-bio { font-size: 14px; line-height: 1.6; color: var(--grey-600, #5B6B7A); margin: 0; }
.post-author-social .wp-social-link { transition: transform .15s ease, opacity .15s ease; opacity: .75; }
.post-author-social .wp-social-link:hover { opacity: 1; transform: translateY(-1px); }
.post-author-social .wp-social-link svg { width: 19px; height: 19px; }


/* Post-card grids (archive, More insights): equal heights everywhere.
   JE items default align-self:start — stretch them and let the card fill. */
.jet-listing-grid--15728 .jet-listing-grid__item { align-self: stretch !important; display: flex; }
.jet-listing-grid--15728 .jet-listing-grid__item > * { width: 100%; display: flex; flex-direction: column; }
.jet-listing-grid--15728 .post-card { height: 100%; display: flex; flex-direction: column; }
.jet-listing-grid--15728 .post-excerpt { flex: 1 1 auto; }

/* JSF filter rows — brand styling + horizontal scroll on mobile */
.jet-search-filter .jet-search-filter__input {
  border: 1px solid var(--border, #D7DCE0); border-radius: 10px;
  padding: 11px 16px; font-size: 14.5px; color: var(--navy, #0E1924);
  background: var(--white, #fff); width: 100%; max-width: 420px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.jet-search-filter .jet-search-filter__input:focus {
  outline: none; border-color: var(--teal, #4AD7D1);
  box-shadow: 0 0 0 3px rgba(74, 215, 209, 0.18);
}
/* Filter chip rows: one horizontal line everywhere. When they don't fit they
   scroll sideways (hidden scrollbar) with a right-edge fade as the hint; the
   trailing padding keeps the last chip clear of the fade at scroll end. */
.jet-smart-filters-radio .jet-radio-list {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  align-items: center;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 2px 56px 6px 2px; /* 2px head/foot room stops chip borders clipping */
  scroll-padding-left: 2px;
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 48px), transparent);
  mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 48px), transparent);
}
.jet-smart-filters-radio .jet-radio-list::-webkit-scrollbar { display: none; }
/* JSF nests the real chip row in .jet-radio-list-wrapper with margin-left:-3px
   (the clipped first chip) — it, not .jet-radio-list, controls wrapping. */
.jet-smart-filters-radio .jet-radio-list-wrapper {
  display: flex;
  flex-wrap: nowrap;
  margin-left: 0 !important;
  width: max-content;
}
/* …and the rows actually live in a FIELDSET inside the wrapper (display:block
   with inline-block rows = the wrapping) */
.jet-smart-filters-radio .jet-radio-list-wrapper > fieldset,
.jet-smart-filters-radio .jet-radio-list-wrapper > div {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  align-items: center;
  width: max-content;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.jet-smart-filters-radio .jet-radio-list__row { flex: 0 0 auto; }
/* Inside a label+chips flex row (.tec-filter-row, case studies/testimonials)
   the filter block must be allowed to SHRINK below its chip-strip width —
   flex items default to min-width:max-content, which blew the strip out of
   the viewport instead of letting the inner list scroll. */
.tec-filter-row .jet-smart-filters-radio { flex: 1 1 0%; min-width: 0; max-width: 100%; }


/* ============================================================
   Single post — split hero (navy + dots, image inside), byline,
   author card under content, subscribe band
   ============================================================ */
.post-hero { position: relative; overflow: hidden; }
.post-hero .post-hero-wrap { position: relative; z-index: 1; }
.post-hero-media .post-feature-img img {
  border-radius: 16px; display: block; width: 100%;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.post-byline { gap: 12px; font-size: 14.5px; color: rgba(255, 255, 255, 0.85); margin-top: 26px; }
.post-byline .post-byline-avatar img { border-radius: 50%; display: block; border: 2px solid rgba(255, 255, 255, 0.18); }
.post-byline .post-byline-name { font-weight: 600; color: var(--white); margin: 0; }
.post-byline > p { color: rgba(255, 255, 255, 0.35); margin: 0; }
.post-byline .wp-block-post-date { color: rgba(255, 255, 255, 0.85); }
@media (max-width: 781px) {
  .post-hero-media { margin-top: 28px; }
}
/* author block is a plain hairline-topped section now (Tony) — no box, no shadow */
.post-author-card { box-shadow: none; }
.post-author-inner { gap: 18px; }
/* Subscribe band — keep the form a tidy left-aligned group like the footer */
.post-subscribe .post-subscribe-form { min-width: 430px; }
@media (max-width: 781px) {
  .post-subscribe .post-subscribe-form { min-width: 0; width: 100%; }
}

/* Author card socials — footer-style chips (Quantum group-as-link, native
   hover colours); just add a gentle lift + colour transition */
.post-author-social > .wp-block-group { transition: border-color .15s ease, color .15s ease, transform .15s ease; }
.post-author-social > .wp-block-group:hover { transform: translateY(-1px); }
.post-author-social .icon-container svg { display: block; }

/* Newsletter form (JetForm 15287) — paper-plane icon after "Subscribe",
   everywhere the form appears (footer, single-post band, Brief page). */
form[data-form-id="15287"] .jet-form-builder__submit {
  display: inline-flex; align-items: center; justify-content: center;
}
/* paper-plane suffix icon RETIRED (Tony, round 23 — overkill inside the
   contained shell; restore from git/backup if ever wanted again) */

/* Single-post subscribe band — input matches the button */
.post-subscribe .jet-form-builder__field.text-field,
.post-subscribe input[type="email"], .post-subscribe input[type="text"] {
  height: 46px; padding: 0 16px; font-size: 14.5px;
  border: 1px solid var(--border, #D7DCE0); border-radius: 10px;
  background: var(--white, #fff); color: var(--navy, #0E1924); width: 100%;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.post-subscribe input:focus {
  outline: none; border-color: var(--teal, #4AD7D1);
  box-shadow: 0 0 0 3px rgba(74, 215, 209, 0.18);
}
.post-subscribe input::placeholder { color: var(--grey-600, #5B6B7A); opacity: .7; }
.post-subscribe .jet-form-builder__submit {
  height: 46px; padding: 0 22px; border-radius: 10px; font-size: 14.5px; font-weight: 600;
}
.post-subscribe .post-subscribe-privacy {
  font-size: 12.5px; color: var(--grey-600, #5B6B7A); margin-top: 4px; max-width: 430px;
}
.post-subscribe .post-subscribe-privacy a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* Newsletter submit: never wrap; let its column grow to fit the icon
   (desktop only — core's mobile stacking keeps full-width) */
form[data-form-id="15287"] .jet-form-builder__submit { white-space: nowrap; }
@media (min-width: 782px) {
  form[data-form-id="15287"] .wp-block-column:has(.jet-form-builder__submit) {
    flex-basis: auto !important;
    flex-grow: 0;
  }
}


/* Newsletter form 15287 — field and button always the same height */
form[data-form-id="15287"] input.jet-form-builder__field,
form[data-form-id="15287"] .jet-form-builder__field[type="email"],
form[data-form-id="15287"] .jet-form-builder__field[type="text"] {
  height: 46px !important; box-sizing: border-box;
}
form[data-form-id="15287"] .jet-form-builder__submit { height: 46px !important; box-sizing: border-box; }
form[data-form-id="15287"] { margin-bottom: 0 !important; }


/* Work card — native rebuild support */
.work-cover { aspect-ratio: 16 / 9; }
.work-cover .work-mark { margin: auto 0; }
.work-arrow-ib { flex: 0 0 auto; }
.work-arrow-ib .icon-container { transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease; }
.tec-card:hover .work-arrow-ib .icon-container { background: var(--navy, #0E1924); border-color: var(--navy, #0E1924); color: #fff !important; transform: translateX(3px); }

/* Skip link — hidden until keyboard focus, then a clear navy pill top-left */
.skip-link.screen-reader-text {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100000;
  padding: 12px 20px;
  background: var(--navy, #0E1924);
  color: #fff;
  font-size: 14.5px;
  font-weight: 600;
  border-radius: 0 0 10px 0;
  text-decoration: none;
}
.skip-link.screen-reader-text:focus {
  left: 0;
  outline: 2px solid var(--teal, #4AD7D1);
  outline-offset: 2px;
}

/* Generic visually-hidden text (sr-only headings etc.) — focusable items
   like the skip link un-hide on focus */
.screen-reader-text {
  border: 0;
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  word-wrap: normal !important;
}
.screen-reader-text:focus {
  clip-path: none;
  height: auto;
  width: auto;
  overflow: visible;
}

/* Kickers promoted to h2 for heading order keep the kicker look exactly */
h2.tecology-kicker {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.18em;
  line-height: 1.4;
  margin: 0 0 16px;
}

/* Separators: core's block CSS ships a 2px top border that beats theme.json's
   hairline on some pages (cascade-order dependent) — pin the 1px bottom rule. */
.wp-block-separator:not(.is-style-dots) {
  border-style: solid;
  border-top-width: 0;
  border-bottom-width: 1px;
}

/* "Page builder -> native" blueprint backdrop: tangled builder boxes (left)
   resolve into a clean block grid (right). Decorative, dot-field subtlety. */
.svc-blueprint-host { position: relative; overflow: hidden; }
.svc-blueprint-host > .wp-block-group { position: relative; z-index: 1; }
.svc-blueprint {
  position: absolute;
  top: 44px;
  left: calc(50% + 104px); /* just right of the text column's edge */
  width: min(40vw, 660px);
  pointer-events: none;
}
.svc-blueprint svg { width: 100%; height: auto; display: block; }
@media (max-width: 1024px) { .svc-blueprint { display: none; } }
.svc-blueprint .bp-mess rect { stroke: rgba(255, 255, 255, 0.14); stroke-width: 1; }
.svc-blueprint .bp-grid rect { stroke: rgba(255, 255, 255, 0.22); stroke-width: 1; }
.svc-blueprint .bp-grid rect:nth-child(3) { stroke: rgba(74, 215, 209, 0.45); }
.svc-blueprint .bp-flow { stroke: rgba(74, 215, 209, 0.42); stroke-width: 1.6; }
@media (max-width: 781px) {
  .svc-blueprint { opacity: .6; }
}


/* Pricing tiers: cards stay equal height, but the CTA pins to the bottom so
   Basic/Advanced don't strand their buttons mid-card. */
.svc-tier { display: flex; flex-direction: column; }
.svc-tier > .wp-block-buttons:last-child,
.svc-tier > .wp-block-button:last-child { margin-top: auto; padding-top: 24px; }


/* Work-card grids (case-studies archive): equal heights; meta + title sit at
   the top of every body, the arrow pins bottom-right. */
.jet-listing-grid--15725 .jet-listing-grid__item { align-self: stretch !important; display: flex; }
.jet-listing-grid--15725 .jet-listing-grid__item > * { width: 100%; display: flex; flex-direction: column; }
.jet-listing-grid--15725 .work-card { height: 100%; display: flex; flex-direction: column; }

/* ============================================================
   Case-study single (template 15999) — prototype CaseStudy
   ============================================================ */
.cs-hero-summary,
.cs-hero-summary .jet-listing-dynamic-field__content { font-size: 18px; line-height: 1.6; color: rgba(255, 255, 255, 0.78); }
.cs-hero-summary { max-width: 660px; margin-top: 18px; }
.cs-hero .post-hero-title { max-width: 840px; }
.cs-facts { gap: 48px; row-gap: 22px; } /* legacy facts-bar rule, harmless */
/* Project details — facts stacked in the sticky rail (Round 34): labelled
   rows under hairlines, separating cleanly from the note + CTA below. */
.cs-rail-facts { margin-bottom: 20px; }
.cs-rail-facts .cs-meta { padding: 11px 0; border-bottom: 1px solid var(--border, #D7DCE0); }
.cs-rail-facts .cs-meta:first-of-type { padding-top: 8px; border-top: 1px solid var(--border, #D7DCE0); }
.cs-meta { max-width: 300px; }
.cs-meta-label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--grey-600, #5B6B7A); margin: 0; font-weight: 600; }
.cs-meta-value,
.cs-meta-value .jet-listing-dynamic-field__content { font-size: 14.5px; font-weight: 500; color: var(--navy, #0E1924); line-height: 1.45; }
.cs-prose,
.cs-prose .jet-listing-dynamic-field__content { font-size: 16.5px; color: var(--grey-700, #3A4654); line-height: 1.7; }
.cs-prose p { margin: 0 0 18px; }
.cs-prose p:last-child { margin-bottom: 0; }
/* "Built with" repeater: keep items + delimiters on one inline run
   (JE renders block-level delimiter divs that would otherwise stack) */
.cs-meta-value .jet-listing-dynamic-repeater__items,
.cs-meta-value .jet-listing-dynamic-repeater__item,
.cs-meta-value .jet-listing-dynamic-repeater__item div,
.cs-meta-value .jet-listing-dynamic-repeater__delimiter { display: inline; }
/* deliverables: two-column checklist with teal checks
   (grid lives on JE's __items wrapper, checks on its __item divs) */
.cs-delivs .jet-listing-dynamic-repeater__items { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 28px; }
.cs-delivs .jet-listing-dynamic-repeater__item { position: relative; padding-left: 28px; font-size: 15px; line-height: 1.5; color: var(--grey-700, #3A4654); }
.cs-delivs .jet-listing-dynamic-repeater__item::before {
  content: ""; position: absolute; left: 0; top: 3px; width: 16px; height: 16px;
  background: var(--teal, #4AD7D1);
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>') center / contain no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>') center / contain no-repeat;
}
@media (max-width: 781px) { .cs-delivs .jet-listing-dynamic-repeater__items { grid-template-columns: 1fr; } }
/* pull quote (navy card) */
.cs-quote-text,
.cs-quote-text .jet-listing-dynamic-field__content { font-size: 21px; line-height: 1.5; font-weight: 500; letter-spacing: -0.01em; color: #fff; }
.cs-quote-cap,
.cs-quote-cap .jet-listing-dynamic-field__content { font-size: 14px; color: rgba(255, 255, 255, 0.66); }
.cs-quote-name,
.cs-quote-name .jet-listing-dynamic-field__content { font-weight: 600; color: rgba(255, 255, 255, 0.9); }
/* outcomes rail */
.cs-rail-col { align-self: stretch !important; }
.cs-rail { position: sticky; top: 132px; }
.cs-outcomes .jet-listing-dynamic-repeater__items { display: block; }
.cs-outcomes .jet-listing-dynamic-repeater__item { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 13px 0; border-top: 1px solid var(--border, #D7DCE0); }
.cs-outcomes .jet-listing-dynamic-repeater__item:first-child { border-top: 0; padding-top: 0; }
.cs-outcomes { margin-bottom: 18px; }
.cs-out-label { font-size: 14px; color: var(--grey-600, #5B6B7A); }
.cs-out-value { font-size: 19px; font-weight: 600; color: var(--navy, #0E1924); text-align: right; white-space: nowrap; }
@media (max-width: 781px) { .cs-rail { position: static; } }

/* newsletter input: Graphie renders high in the fixed 46px box — optical nudge */
form[data-form-id="15287"] .jet-form-builder__field[type="email"] { padding-top: 3px !important; }


/* ===========================================================================
 * NATIVE HEADER — core navigation block (wp_navigation 16013) styled to the
 * prototype Nav.jsx spec. Replaces the legacy custom header (markup retired,
 * CSS archived in assets/legacy-header-css.bak). Scroll inversion is still
 * `nav-scrolled` on <html> (nav.js, scroll-only now). Submenus open on hover,
 * keyboard focus, or the caret toggle (core a11y machinery: aria-expanded,
 * Esc, overlay focus trap all ship with the block).
 * ========================================================================= */

/* ---- fixed bar ---- */
.tec-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1001; background: var(--navy);
  border-bottom: 1px solid transparent;
  transition: background-color .3s ease, border-color .3s ease, box-shadow .3s ease; }
/* near-solid scrolled bar (Tony, Ramp reference — the 92% frost was too
   see-through). ⚠️ the backdrop-filter must STAY even at 98%: it makes the
   bar the containing block for the fixed scrolled mega (top:62px is
   bar-relative — round 21d). */
.nav-scrolled .tec-nav { background: color-mix(in srgb, var(--white) 98%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border); box-shadow: 0 2px 18px color-mix(in srgb, var(--navy) 7%, transparent); }
.tec-nav-inner { height: 76px; border-bottom: 1px solid color-mix(in srgb, var(--white) 13%, transparent);
  transition: height .3s ease, border-color .3s ease; }
.nav-scrolled .tec-nav-inner { height: 62px; border-bottom-color: transparent; }
.tec-nav:has(.wp-block-navigation-submenu:hover, .wp-block-navigation-submenu:focus-within) .tec-nav-inner { border-bottom-color: transparent; }
.admin-bar .tec-nav { top: 32px; }
@media screen and (max-width: 782px) { .admin-bar .tec-nav { top: 46px; } }

/* ---- logo: white wordmark -> navy mark on scroll; navy wordmark in overlay ---- */
.tec-nav .nav-logo { position: relative; display: inline-flex; align-items: center; height: 45px; }
.tec-nav .nav-logo figure { margin: 0; }
.tec-nav .nav-logo-full img { width: 140px; height: auto; display: block; transform: translateY(5px); transition: opacity .3s ease; }
.tec-nav .nav-logo-mark { position: absolute; left: 0; top: 50%; transform: translateY(-50%); opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.tec-nav .nav-logo img { border-radius: 0 !important; }
.tec-nav .nav-logo-mark img { width: 40px; height: 40px; border-radius: 4px !important; display: block; }
.nav-scrolled .tec-nav .nav-logo-full img { opacity: 0; }
.nav-scrolled .tec-nav .nav-logo-mark { opacity: 1; }


/* ---- top-level links ---- */
.tec-nav-menu { font-size: 15px; }
.tec-nav-menu .wp-block-navigation__container { align-items: center; }
/* items span the full bar so the pointer can travel straight into a panel
   (the old header's .nav-item{height:100%} trick — a 27px dead gap between a
   23px item and the bar-bottom panels was closing menus mid-travel) */
.tec-nav-menu .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item {
  height: 76px; display: flex; align-items: center; transition: height .3s ease; }
.nav-scrolled .tec-nav-menu .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item { height: 62px; }
.tec-nav-menu .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
  font-size: 15px; font-weight: 400; color: var(--white); text-decoration: none; transition: opacity .15s ease, color .3s ease; }
.tec-nav-menu .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover { opacity: .65; }
.nav-scrolled .tec-nav-menu .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content { color: var(--navy); }
/* caret toggle (core button) */
.tec-nav-menu .wp-block-navigation__submenu-icon { width: 11px; height: 11px; margin-left: 4px; padding: 0;
  background: none; border: 0; cursor: pointer; color: var(--white); transition: transform .2s ease, color .3s ease; }
.tec-nav-menu .wp-block-navigation__submenu-icon svg { width: 11px; height: 11px; stroke: currentColor; stroke-width: 2; display: block; }
.nav-scrolled .tec-nav-menu .wp-block-navigation__submenu-icon { color: var(--navy); }
.tec-nav-menu .wp-block-navigation-submenu:is(:hover, :focus-within) > .wp-block-navigation__submenu-icon,
.tec-nav-menu .wp-block-navigation-submenu.kb-open > .wp-block-navigation__submenu-icon,
.tec-nav-menu .wp-block-navigation__submenu-icon[aria-expanded="true"] { transform: rotate(180deg); }
/* Quantum parent outlines every :focus-visible in --accent (NAVY, !important) —
   invisible on the navy bar, so tabbing looked broken. Its :not() chain carries
   (0,8,0) specificity, so the teal override has to out-spec it (chained class). */
.tec-nav.tec-nav.tec-nav.tec-nav.tec-nav.tec-nav.tec-nav.tec-nav.tec-nav :is(a, button):focus-visible {
  outline: 2px solid var(--teal) !important; outline-offset: 3px; border-radius: 3px; }

/* ---- CTA pill ---- */
.tec-nav-menu .nav-cta > .wp-block-navigation-item__content {
  font-size: 15px !important; font-weight: 500 !important; border-radius: 8px; padding: 9px 22px !important; line-height: normal;
  background: var(--white); color: var(--navy) !important; border: 1px solid transparent;
  transition: opacity .15s ease, background-color .3s ease, color .3s ease; }
.nav-scrolled .tec-nav-menu .nav-cta > .wp-block-navigation-item__content { background: var(--navy); color: var(--white) !important; }
.tec-nav-menu .nav-cta > .wp-block-navigation-item__content:hover { opacity: .85; }

/* ---- dropdown panels (desktop) ---- */
.tec-nav-menu .wp-block-navigation-item.has-child { position: relative; }
.tec-nav-menu .wp-block-navigation__submenu-container {
  /* anchored to the li, offset so every panel hangs from the bar's bottom line
     (li is 23px tall, vertically centred in the 76px bar -> 27px below; 19.5px when scrolled @62) */
  position: absolute !important; z-index: 60; display: block;
  height: auto !important; width: max-content !important; min-width: 312px; overflow: visible !important;
  padding: 8px; background: var(--white) !important; border: 1px solid var(--border) !important; border-radius: 14px;
  box-shadow: 0 24px 60px color-mix(in srgb, var(--navy) 16%, transparent);
  visibility: hidden; opacity: 0 !important; transform: translateY(10px); pointer-events: none;
  transition: opacity .2s cubic-bezier(0.22,1,0.36,1), transform .2s cubic-bezier(0.22,1,0.36,1), visibility 0s linear .26s;
  transition-delay: .12s; }
/* panels hang directly off the li bottom — the li is bar-height, so that IS
   the bar's bottom line at 76 or 62 (core's .has-child rule owns top/left
   at (0,3,0) — match it) */
.tec-nav-menu .has-child .wp-block-navigation__submenu-container { top: 100%; left: 0; }
.tec-nav-menu .has-child:hover > .wp-block-navigation__submenu-container,
.tec-nav-menu .has-child:focus-within > .wp-block-navigation__submenu-container,
.tec-nav-menu .has-child.kb-open > .wp-block-navigation__submenu-container,
.tec-nav-menu .has-child .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
  visibility: visible; opacity: 1 !important; transform: translateY(0); pointer-events: auto; transition-delay: 0s; z-index: 70; }
.tec-nav-menu .wp-block-navigation__submenu-container .wp-block-navigation-item { width: 100%; }

/* Never two menus at once (Tony): while ANY top-level item is open, the other
   panels skip their exit fade entirely — open crossfade only ever shows one. */
.tec-nav-menu .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container:has(> .has-child:is(:hover, :focus-within, .kb-open)) > .has-child:not(:hover):not(:focus-within):not(.kb-open) > .wp-block-navigation__submenu-container {
  transition: none !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }

/* menu items: title + description (+ icon chip) */
.tec-nav-menu .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  display: block !important; width: 100%; padding: 10px 12px !important; border-radius: 9px; text-decoration: none;
  transition: background-color .15s ease; }
.tec-nav-menu .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { background: #EAEEF3; }
.tec-nav-menu .wp-block-navigation__submenu-container .wp-block-navigation-item__label {
  display: block; font-size: 14.5px; font-weight: 600; color: var(--navy); line-height: 1.3; }
.tec-nav-menu .wp-block-navigation__submenu-container .wp-block-navigation-item__description {
  display: block; font-size: 12.5px; color: var(--grey-600); margin-top: 3px; line-height: 1.4; }
/* icon chips (absolute, so label + description stack normally) — Ramp-sized:
   38px, white face with a crisp hairline (border via inset shadow — the
   background slot carries the icon) */
.tec-nav-menu .mi > .wp-block-navigation-item__content { position: relative; padding-left: 64px !important; }
.tec-nav-menu .mi > .wp-block-navigation-item__content::before { content: ""; position: absolute; left: 12px; top: 50%;
  transform: translateY(-50%); width: 38px; height: 38px; border-radius: 10px; background-color: var(--white, #fff);
  box-shadow: inset 0 0 0 1px var(--border, #D7DCE0);
  background-repeat: no-repeat; background-position: center; background-size: 18px 18px; }
.tec-nav-menu .mi-code > .wp-block-navigation-item__content::before { background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%230E1924%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%2216%2018%2022%2012%2016%206%22%2F%3E%3Cpolyline%20points%3D%228%206%202%2012%208%2018%22%2F%3E%3C%2Fsvg%3E'); }
.tec-nav-menu .mi-shield > .wp-block-navigation-item__content::before { background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%230E1924%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%2013c0%205-3.5%207.5-7.66%208.95a1%201%200%200%201-.67-.01C7.5%2020.5%204%2018%204%2013V6a1%201%200%200%201%201-1c2%200%204.5-1.2%206.24-2.72a1.17%201.17%200%200%201%201.52%200C14.51%203.81%2017%205%2019%205a1%201%200%200%201%201%201z%22%2F%3E%3Cpath%20d%3D%22m9%2012%202%202%204-4%22%2F%3E%3C%2Fsvg%3E'); }
.tec-nav-menu .mi-cloud > .wp-block-navigation-item__content::before { background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%230E1924%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M17.5%2019H9a7%207%200%201%201%206.71-9h1.79a4.5%204.5%200%201%201%200%209Z%22%2F%3E%3C%2Fsvg%3E'); }
.tec-nav-menu .mi-sparkles > .wp-block-navigation-item__content::before { background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%230E1924%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9.937%2015.5A2%202%200%200%200%208.5%2014.063l-6.135-1.582a.5.5%200%200%201%200-.962L8.5%209.936A2%202%200%200%200%209.937%208.5l1.582-6.135a.5.5%200%200%201%20.963%200L14.063%208.5A2%202%200%200%200%2015.5%209.937l6.135%201.581a.5.5%200%200%201%200%20.964L15.5%2014.063a2%202%200%200%200-1.437%201.437l-1.582%206.135a.5.5%200%200%201-.963%200z%22%2F%3E%3Cpath%20d%3D%22M20%203v4%22%2F%3E%3Cpath%20d%3D%22M22%205h-4%22%2F%3E%3C%2Fsvg%3E'); }
.tec-nav-menu .mi-gradcap > .wp-block-navigation-item__content::before { background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%230E1924%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21.42%2010.922a1%201%200%200%200-.019-1.838L12.83%205.18a2%202%200%200%200-1.66%200L2.6%209.08a1%201%200%200%200%200%201.832l8.57%203.908a2%202%200%200%200%201.66%200z%22%2F%3E%3Cpath%20d%3D%22M22%2010v6%22%2F%3E%3Cpath%20d%3D%22M6%2012.5V16a6%203%200%200%200%2012%200v-3.5%22%2F%3E%3C%2Fsvg%3E'); }
.tec-nav-menu .mi-users > .wp-block-navigation-item__content::before { background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%230E1924%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M16%2021v-2a4%204%200%200%200-4-4H6a4%204%200%200%200-4%204v2%22%2F%3E%3Ccircle%20cx%3D%229%22%20cy%3D%227%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M22%2021v-2a4%204%200%200%200-3-3.87%22%2F%3E%3Cpath%20d%3D%22M16%203.13a4%204%200%200%201%200%207.75%22%2F%3E%3C%2Fsvg%3E'); }
.tec-nav-menu .mi-heart > .wp-block-navigation-item__content::before { background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%230E1924%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M19%2014c1.49-1.46%203-3.21%203-5.5A5.5%205.5%200%200%200%2016.5%203c-1.76%200-3%20.5-4.5%202-1.5-1.5-2.74-2-4.5-2A5.5%205.5%200%200%200%202%208.5c0%202.3%201.5%204.05%203%205.5l7%207Z%22%2F%3E%3C%2Fsvg%3E'); }
.tec-nav-menu .mi-building > .wp-block-navigation-item__content::before { background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%230E1924%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%2022V4a2%202%200%200%201%202-2h8a2%202%200%200%201%202%202v18Z%22%2F%3E%3Cpath%20d%3D%22M6%2012H4a2%202%200%200%200-2%202v6a2%202%200%200%200%202%202h2%22%2F%3E%3Cpath%20d%3D%22M18%209h2a2%202%200%200%201%202%202v9a2%202%200%200%201-2%202h-2%22%2F%3E%3Cpath%20d%3D%22M10%206h4%22%2F%3E%3Cpath%20d%3D%22M10%2010h4%22%2F%3E%3Cpath%20d%3D%22M10%2014h4%22%2F%3E%3Cpath%20d%3D%22M10%2018h4%22%2F%3E%3C%2Fsvg%3E'); }
.tec-nav-menu .mi-idcard > .wp-block-navigation-item__content::before { background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%230E1924%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M16%2010h2%22%2F%3E%3Cpath%20d%3D%22M16%2014h2%22%2F%3E%3Cpath%20d%3D%22M6.17%2015a3%203%200%200%201%205.66%200%22%2F%3E%3Ccircle%20cx%3D%229%22%20cy%3D%2211%22%20r%3D%222%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%225%22%20width%3D%2220%22%20height%3D%2214%22%20rx%3D%222%22%2F%3E%3C%2Fsvg%3E'); }
.tec-nav-menu .mi-layout > .wp-block-navigation-item__content::before { background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%230E1924%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20width%3D%2218%22%20height%3D%227%22%20x%3D%223%22%20y%3D%223%22%20rx%3D%221%22%2F%3E%3Crect%20width%3D%229%22%20height%3D%227%22%20x%3D%223%22%20y%3D%2214%22%20rx%3D%221%22%2F%3E%3Crect%20width%3D%225%22%20height%3D%227%22%20x%3D%2216%22%20y%3D%2214%22%20rx%3D%221%22%2F%3E%3C%2Fsvg%3E'); }
.tec-nav-menu .mi-puzzle > .wp-block-navigation-item__content::before { background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%230E1924%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20width%3D%227%22%20height%3D%227%22%20x%3D%2214%22%20y%3D%223%22%20rx%3D%221%22%2F%3E%3Cpath%20d%3D%22M10%2021V8a1%201%200%200%200-1-1H4a1%201%200%200%200-1%201v12a1%201%200%200%200%201%201h12a1%201%200%200%200%201-1v-5a1%201%200%200%200-1-1H3%22%2F%3E%3C%2Fsvg%3E'); }
.tec-nav-menu .mi-news > .wp-block-navigation-item__content::before { background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%230E1924%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M15%2018h-5%22%2F%3E%3Cpath%20d%3D%22M18%2014h-8%22%2F%3E%3Cpath%20d%3D%22M4%2022h16a2%202%200%200%200%202-2V4a2%202%200%200%200-2-2H8a2%202%200%200%200-2%202v16a2%202%200%200%201-4%200V5a1%201%200%200%201%201-1h3%22%2F%3E%3Crect%20width%3D%228%22%20height%3D%224%22%20x%3D%2210%22%20y%3D%226%22%20rx%3D%221%22%2F%3E%3C%2Fsvg%3E'); }
.tec-nav-menu .mi-mail > .wp-block-navigation-item__content::before { background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%230E1924%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20width%3D%2220%22%20height%3D%2216%22%20x%3D%222%22%20y%3D%224%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22m22%207-8.97%205.7a1.94%201.94%200%200%201-2.06%200L2%207%22%2F%3E%3C%2Fsvg%3E'); }
.tec-nav-menu .mi-book > .wp-block-navigation-item__content::before { background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%230E1924%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%207v14%22%2F%3E%3Cpath%20d%3D%22M3%2018a1%201%200%200%201-1-1V4a1%201%200%200%201%201-1h5a4%204%200%200%201%204%204%204%204%200%200%201%204-4h5a1%201%200%200%201%201%201v13a1%201%200%200%201-1%201h-6a3%203%200%200%200-3%203%203%203%200%200%200-3-3z%22%2F%3E%3C%2Fsvg%3E'); }
.tec-nav-menu .mi-dash > .wp-block-navigation-item__content::before { background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%230E1924%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20width%3D%227%22%20height%3D%229%22%20x%3D%223%22%20y%3D%223%22%20rx%3D%221%22%2F%3E%3Crect%20width%3D%227%22%20height%3D%225%22%20x%3D%2214%22%20y%3D%223%22%20rx%3D%221%22%2F%3E%3Crect%20width%3D%227%22%20height%3D%229%22%20x%3D%2214%22%20y%3D%2212%22%20rx%3D%221%22%2F%3E%3Crect%20width%3D%227%22%20height%3D%225%22%20x%3D%223%22%20y%3D%2216%22%20rx%3D%221%22%2F%3E%3C%2Fsvg%3E'); }
.tec-nav-menu .mi-buoy > .wp-block-navigation-item__content::before { background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%230E1924%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22m4.93%204.93%204.24%204.24%22%2F%3E%3Cpath%20d%3D%22m14.83%209.17%204.24-4.24%22%2F%3E%3Cpath%20d%3D%22m14.83%2014.83%204.24%204.24%22%2F%3E%3Cpath%20d%3D%22m9.17%2014.83-4.24%204.24%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%224%22%2F%3E%3C%2Fsvg%3E'); }
.tec-nav-menu .mi-info > .wp-block-navigation-item__content::before { background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%230E1924%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22M12%2016v-4%22%2F%3E%3Cpath%20d%3D%22M12%208h.01%22%2F%3E%3C%2Fsvg%3E'); }
.tec-nav-menu .mi-briefcase > .wp-block-navigation-item__content::before { background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%230E1924%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M16%2020V4a2%202%200%200%200-2-2h-4a2%202%200%200%200-2%202v16%22%2F%3E%3Crect%20width%3D%2220%22%20height%3D%2214%22%20x%3D%222%22%20y%3D%226%22%20rx%3D%222%22%2F%3E%3C%2Fsvg%3E'); }
.tec-nav-menu .mi-quote > .wp-block-navigation-item__content::before { background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%230E1924%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M16%203a2%202%200%200%200-2%202v6a2%202%200%200%200%202%202%201%201%200%200%201%201%201v1a2%202%200%200%201-2%202%201%201%200%200%200-1%201v2a1%201%200%200%200%201%201%206%206%200%200%200%206-6V5a2%202%200%200%200-2-2z%22%2F%3E%3Cpath%20d%3D%22M5%203a2%202%200%200%200-2%202v6a2%202%200%200%200%202%202%201%201%200%200%201%201%201v1a2%202%200%200%201-2%202%201%201%200%200%200-1%201v2a1%201%200%200%200%201%201%206%206%200%200%200%206-6V5a2%202%200%200%200-2-2z%22%2F%3E%3C%2Fsvg%3E'); }
.tec-nav-menu .mi-gift > .wp-block-navigation-item__content::before { background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%230E1924%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%228%22%20width%3D%2218%22%20height%3D%224%22%20rx%3D%221%22%2F%3E%3Cpath%20d%3D%22M12%208v13%22%2F%3E%3Cpath%20d%3D%22M19%2012v7a2%202%200%200%201-2%202H7a2%202%200%200%201-2-2v-7%22%2F%3E%3Cpath%20d%3D%22M7.5%208a2.5%202.5%200%200%201%200-5A4.8%208%200%200%201%2012%208a4.8%208%200%200%201%204.5-5%202.5%202.5%200%200%201%200%205%22%2F%3E%3C%2Fsvg%3E'); }
.tec-nav-menu .mi-handshake > .wp-block-navigation-item__content::before { background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%230E1924%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m11%2017%202%202a1%201%200%201%200%203-3%22%2F%3E%3Cpath%20d%3D%22m14%2014%202.5%202.5a1%201%200%201%200%203-3l-3.88-3.88a3%203%200%200%200-4.24%200l-.88.88a1%201%200%201%201-3-3l2.81-2.81a5.79%205.79%200%200%201%207.06-.87l.47.28a2%202%200%200%200%201.42.25L21%204%22%2F%3E%3Cpath%20d%3D%22m21%203%201%2011h-2%22%2F%3E%3Cpath%20d%3D%22M3%203%202%2014l6.5%206.5a1%201%200%201%200%203-3%22%2F%3E%3Cpath%20d%3D%22M3%204h8%22%2F%3E%3C%2Fsvg%3E'); }

/* ---- Services mega panel ---- */
.tec-nav-menu .wp-block-navigation__responsive-container:not(.is-menu-open) ul.menu-services { position: fixed !important; left: 50% !important; right: auto; top: 76px;
  width: min(972px, calc(100vw - 32px)) !important; min-width: 0; padding: 0 0 10px;
  transform: translate(-50%, 10px);
  display: grid !important; grid-template-columns: 1fr 1fr 248px; column-gap: 0; align-items: start;
  background-image: linear-gradient(var(--border), var(--border)), linear-gradient(var(--border), var(--border));
  background-repeat: no-repeat; background-size: 1px 100%, 1px 100%;
  background-position: calc((100% - 248px) / 2) 0, calc(100% - 248px) 0; }
/* unscrolled: fixed = viewport coords (admin bar shifts the whole bar down 32px) */
.admin-bar .tec-nav-menu .wp-block-navigation__responsive-container:not(.is-menu-open) ul.menu-services { top: 108px; }
/* scrolled: the frosted bar's backdrop-filter makes the BAR the containing
   block for fixed descendants — so top:62 (= bar height) lands exactly on the
   bar's bottom edge in every configuration, admin bar included. Must come
   LAST: it ties the admin rule on specificity and wins by order. */
.nav-scrolled .tec-nav-menu .wp-block-navigation__responsive-container:not(.is-menu-open) ul.menu-services { top: 62px; }
.tec-nav-menu .wp-block-navigation__responsive-container:not(.is-menu-open) .has-child:hover > ul.menu-services,
.tec-nav-menu .wp-block-navigation__responsive-container:not(.is-menu-open) .has-child:focus-within > ul.menu-services,
.tec-nav-menu .wp-block-navigation__responsive-container:not(.is-menu-open) .has-child.kb-open > ul.menu-services,
.tec-nav-menu .wp-block-navigation__responsive-container:not(.is-menu-open) .has-child .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ ul.menu-services { transform: translate(-50%, 0); }
.tec-nav-menu .wp-block-navigation__responsive-container:not(.is-menu-open) ul.menu-services::before { content: "Services"; grid-area: 1 / 1 / 2 / 3; }
.tec-nav-menu .wp-block-navigation__responsive-container:not(.is-menu-open) ul.menu-services::after { content: "Who we work with"; grid-area: 4 / 1 / 5 / 3;
  border-top: 1px solid var(--border); margin: 10px 22px 0; padding: 16px 0 4px !important; }
.tec-nav-menu .wp-block-navigation__responsive-container:not(.is-menu-open) ul.menu-services::before, .tec-nav-menu .wp-block-navigation__responsive-container:not(.is-menu-open) ul.menu-services::after {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--grey-400); padding: 16px 22px 4px; }
.tec-nav-menu .wp-block-navigation__responsive-container:not(.is-menu-open) ul.menu-services > .wp-block-navigation-item { margin: 0 10px; width: auto; }
.tec-nav-menu .wp-block-navigation__responsive-container:not(.is-menu-open) ul.menu-services > li:nth-child(1) { grid-area: 2 / 1; }
.tec-nav-menu .wp-block-navigation__responsive-container:not(.is-menu-open) ul.menu-services > li:nth-child(2) { grid-area: 2 / 2; }
.tec-nav-menu .wp-block-navigation__responsive-container:not(.is-menu-open) ul.menu-services > li:nth-child(3) { grid-area: 3 / 1; }
.tec-nav-menu .wp-block-navigation__responsive-container:not(.is-menu-open) ul.menu-services > li:nth-child(4) { grid-area: 3 / 2; }
.tec-nav-menu .wp-block-navigation__responsive-container:not(.is-menu-open) ul.menu-services > li:nth-child(5) { grid-area: 7 / 1; }
.tec-nav-menu .wp-block-navigation__responsive-container:not(.is-menu-open) ul.menu-services > li:nth-child(6) { grid-area: 5 / 1; }
.tec-nav-menu .wp-block-navigation__responsive-container:not(.is-menu-open) ul.menu-services > li:nth-child(7) { grid-area: 5 / 2; }
.tec-nav-menu .wp-block-navigation__responsive-container:not(.is-menu-open) ul.menu-services > li:nth-child(8) { grid-area: 6 / 1; }
.tec-nav-menu .wp-block-navigation__responsive-container:not(.is-menu-open) ul.menu-services > li:nth-child(9) { grid-area: 6 / 2; }
.tec-nav-menu .wp-block-navigation__responsive-container:not(.is-menu-open) ul.menu-services > li:nth-child(10) { grid-area: 7 / 2; }
.tec-nav-menu .wp-block-navigation__responsive-container:not(.is-menu-open) ul.menu-services > li:nth-child(11) { grid-area: 1 / 3 / 8 / 4; }
/* footer strip: the two "All …" links breathe below the groups */
.tec-nav-menu .wp-block-navigation__responsive-container:not(.is-menu-open) ul.menu-services > li:nth-child(5), .tec-nav-menu .wp-block-navigation__responsive-container:not(.is-menu-open) ul.menu-services > li:nth-child(10) { margin-top: 12px; }
/* "All services" text link */
.tec-nav-menu .nav-mega-all > .wp-block-navigation-item__content { display: inline-flex !important; align-items: center; gap: 8px;
  width: auto; margin: 6px 0 0 2px; padding: 4px 12px !important; font-size: 13.5px; }
.tec-nav-menu .nav-mega-all .wp-block-navigation-item__label { font-size: 13.5px; font-weight: 600; color: var(--navy); }
.tec-nav-menu .nav-mega-all > .wp-block-navigation-item__content::after { content: ""; width: 15px; height: 15px;
  background: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%230E1924%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012h14%22%2F%3E%3Cpath%20d%3D%22m12%205%207%207-7%207%22%2F%3E%3C%2Fsvg%3E') center / contain no-repeat; transition: transform .18s ease; }
.tec-nav-menu .nav-mega-all > .wp-block-navigation-item__content:hover { background: none; }
.tec-nav-menu .nav-mega-all > .wp-block-navigation-item__content:hover .wp-block-navigation-item__label { color: var(--teal-ink); }
.tec-nav-menu .nav-mega-all > .wp-block-navigation-item__content:hover::after { transform: translateX(3px); }
/* featured navy card */
.tec-nav-menu .nav-mega-featured { align-self: stretch; margin: 10px 10px 0 0 !important; }
.tec-nav-menu .nav-mega-featured > .wp-block-navigation-item__content { display: flex !important; flex-direction: column; justify-content: center;
  gap: 7px; height: 100%; padding: 22px !important; border-radius: 12px;
  background-color: var(--navy);
  /* dot grid, fading out toward the top-left so the copy stays quiet */
  background-image: linear-gradient(135deg, var(--navy) 32%, color-mix(in srgb, var(--navy) 35%, transparent) 70%, transparent 100%),
    radial-gradient(color-mix(in srgb, var(--white) 16%, transparent) 1px, transparent 1px);
  background-size: 100% 100%, 18px 18px;
  transition: background-color .2s ease; }
.tec-nav-menu .nav-mega-featured > .wp-block-navigation-item__content:hover { background-color: #16273a; }
.tec-nav-menu .nav-mega-featured > .wp-block-navigation-item__content::before { content: "Flagship \00b7 2026";
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--teal); }
.tec-nav-menu .nav-mega-featured .wp-block-navigation-item__label { font-size: 18px; font-weight: 600; color: var(--white); letter-spacing: -0.01em; }
.tec-nav-menu .nav-mega-featured .wp-block-navigation-item__description { font-size: 12.5px; line-height: 1.5; color: var(--grey-muted); margin-top: 0; }
.tec-nav-menu .nav-mega-featured > .wp-block-navigation-item__content::after { content: "Explore"; margin-top: 4px;
  font-size: 13.5px; color: var(--white); padding-right: 21px; align-self: flex-start;
  background: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012h14%22%2F%3E%3Cpath%20d%3D%22m12%205%207%207-7%207%22%2F%3E%3C%2Fsvg%3E') right center / 15px 15px no-repeat; }

/* ---- responsive: collapse at 960 (core's own breakpoint is 600) ---- */
.tec-nav-menu .wp-block-navigation__responsive-container-open { display: none; }
@media (max-width: 960px) {
  .tec-nav-inner { height: 62px; }
  .tec-nav-menu .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none !important; }
  .tec-nav-menu .wp-block-navigation__responsive-container-open { display: flex !important; }
}

/* ---- the toggle: two 3px lines that cross into an X (Apple-style) ---- */
.tec-nav-menu .wp-block-navigation__responsive-container-open,
.tec-nav-menu .wp-block-navigation__responsive-container-close {
  position: relative; width: 44px; height: 44px; padding: 0; margin: -7px -7px -7px 0;
  background: none; border: 0; cursor: pointer; color: var(--white); transition: color .3s ease; }
.nav-scrolled .tec-nav-menu .wp-block-navigation__responsive-container-open { color: var(--navy); }
.tec-nav-menu .wp-block-navigation__responsive-container-open svg,
.tec-nav-menu .wp-block-navigation__responsive-container-close svg { display: none; }
.tec-nav-menu .wp-block-navigation__responsive-container-open::before,
.tec-nav-menu .wp-block-navigation__responsive-container-open::after,
.tec-nav-menu .wp-block-navigation__responsive-container-close::before,
.tec-nav-menu .wp-block-navigation__responsive-container-close::after {
  content: ""; position: absolute; left: 9px; width: 26px; height: 3px; border-radius: 3px; background: currentColor; }
.tec-nav-menu .wp-block-navigation__responsive-container-open::before { top: 14px; height: 2px; }
.tec-nav-menu .wp-block-navigation__responsive-container-open::after { top: 28px; height: 2px; }
.tec-nav-menu .wp-block-navigation__responsive-container-open {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat; background-size: 26px 2px; background-position: 9px 21px; }
.tec-nav-menu .wp-block-navigation__responsive-container-close { position: fixed; top: 15px; right: 16px; margin: 0 !important; color: var(--navy); z-index: 4; width: 40px; height: 40px; }
.admin-bar .tec-nav-menu .wp-block-navigation__responsive-container-close { top: 55px; }
.tec-nav-menu .wp-block-navigation__responsive-container-close::before { top: 19px; left: 11px; width: 18px; height: 2px; animation: tec-x-top .32s cubic-bezier(0.22,1,0.36,1) forwards; }
.tec-nav-menu .wp-block-navigation__responsive-container-close::after { top: 19px; left: 11px; width: 18px; height: 2px; animation: tec-x-bot .32s cubic-bezier(0.22,1,0.36,1) forwards; }
@keyframes tec-x-top { from { transform: translateY(-5px) rotate(0); } to { transform: translateY(0) rotate(45deg); } }
@keyframes tec-x-bot { from { transform: translateY(5px) rotate(0); } to { transform: translateY(0) rotate(-45deg); } }
@media (prefers-reduced-motion: reduce) {
  .tec-nav-menu .wp-block-navigation__responsive-container-close::before { animation: none; transform: rotate(45deg); }
  .tec-nav-menu .wp-block-navigation__responsive-container-close::after { animation: none; transform: rotate(-45deg); }
}
.tec-nav-menu .wp-block-navigation__responsive-container-open:focus-visible,
.tec-nav-menu .wp-block-navigation__responsive-container-close:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 6px; }

/* ---- mobile overlay (white sheet via the WP 7.0 overlay template part:
        parts/menu-overlay.html — navy wordmark + nested navigation) ---- */
.tec-overlay-logo { margin: 0 0 14px; padding: 8px 0 16px; border-bottom: 1px solid var(--border); }
.tec-overlay-logo img { width: 140px; height: auto; display: block; border-radius: 0 !important; }
.tec-overlay-menu { width: 100%; }

.tec-nav-menu .wp-block-navigation__responsive-container.is-menu-open {
  background: var(--white) !important; color: var(--navy);
  padding: 11px 20px 0 !important;
  display: flex !important; flex-direction: column;
  /* Ramp-style sheet: the SHEET never scrolls — only the menu area between
     the logo line and the CTA bar does. Panels anchor to this fixed box, so
     they land correctly however far the list is scrolled (the old all-in-one
     scroll misplaced open panels), and the parked translateX(100%) panels
     can't create sideways scroll either — `clip` (unlike `hidden`) makes the
     box a NON-scroll container: programmatic/focus scrollLeft is impossible. */
  overflow: clip !important; }
.tec-nav-menu .is-menu-open .wp-block-navigation__responsive-close,
.tec-nav-menu .is-menu-open .wp-block-navigation__responsive-dialog,
.tec-nav-menu .is-menu-open .wp-block-navigation__overlay-container,
.tec-nav-menu .is-menu-open .tec-overlay {
  display: flex !important; flex-direction: column; flex: 1 1 auto; min-height: 0; width: 100%; }
.tec-nav-menu .is-menu-open .tec-overlay-logo { flex: 0 0 auto; }
/* the flattened nested-nav renders as a flex-row div that vertically centres
   its list — flatten it to a plain scrollable block */
.tec-nav-menu .is-menu-open div.tec-overlay-menu { display: block !important; flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; }
.tec-nav-menu .is-menu-open .wp-block-navigation__responsive-container-content {
  padding: 0 !important; display: flex !important; flex-direction: column; flex: 1 1 auto; min-height: 0; width: 100%; }
.tec-nav-menu .is-menu-open .wp-block-navigation__container { display: flex; flex-direction: column; align-items: stretch !important; gap: 0; width: 100%; }
/* top-level rows */
.tec-nav-menu .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item { display: flex !important; align-items: center; width: 100%; border-bottom: 1px solid var(--border); }
.tec-nav-menu .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content { flex: 1 1 auto; }
.tec-nav-menu .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
  display: block !important; width: 100%; padding: 17px 0 !important;
  font-size: 19px !important; font-weight: 600; letter-spacing: -0.015em; color: var(--navy) !important; }
.tec-nav-menu .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover { opacity: 1; }
/* caret button: drill-down chevron, always points right (no flip states);
   right-aligned so the arrow's edge mirrors the text's 20px left gutter.
   (Quantum parent forces position:absolute right:0 60x60 pad20 on open-menu
   toggles for its own header — every contested prop needs !important.) */
.tec-nav-menu .is-menu-open .wp-block-navigation__submenu-icon {
  flex: 0 0 32px; width: 32px !important; height: 44px !important; margin: 0 !important;
  padding: 0 !important; position: static !important; right: auto !important;
  display: flex; align-items: center !important; justify-content: flex-end !important;
  color: var(--grey-400); transform: none !important; }
.tec-nav-menu .is-menu-open .wp-block-navigation__submenu-icon svg { width: 19px; height: 19px; transform: rotate(-90deg) !important; transition: none; }
/* drill-down: each submenu is a full sheet that slides in from the right
   (nav.js owns the open/close + injected Back button; li.msub-open drives it) */
.tec-nav-menu .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item.has-child { position: static !important; }
/* panels must anchor to the FULL fixed sheet — core positions the dialog and
   the menu ul (position:relative), which trapped inset:0 panels inside the
   rows area. Make everything between panel and sheet static. */
.tec-nav-menu .is-menu-open .wp-block-navigation__responsive-dialog,
.tec-nav-menu .is-menu-open .tec-overlay-menu,
.tec-nav-menu .is-menu-open .wp-block-navigation__container { position: static !important; }

.tec-nav-menu .is-menu-open .wp-block-navigation__submenu-container {
  display: block !important; position: absolute !important;
  /* full-sheet panel: covers the logo line too (Ramp: logo swaps for Back);
     stops above the fixed CTA bar (77px = 14+48+14 padding/buttons + 1px line) */
  inset: 0 0 calc(77px + env(safe-area-inset-bottom, 0px)) 0 !important;
  margin: 0 !important;
  transform: translateX(100%) !important; transition: transform .32s cubic-bezier(0.22,1,0.36,1);
  width: auto !important; min-width: 0 !important; padding: 0 20px 32px !important;
  border: 0 !important; border-radius: 0; box-shadow: none; background: var(--white) !important;
  visibility: visible; opacity: 1 !important; pointer-events: auto; z-index: 2; overflow-y: auto; overflow-x: hidden; }
.tec-nav-menu .is-menu-open .wp-block-navigation-item.msub-open > .wp-block-navigation__submenu-container { transform: translateX(0) !important; }
@media (prefers-reduced-motion: reduce) {
  .tec-nav-menu .is-menu-open .wp-block-navigation__submenu-container { transition: none; } }
/* injected back row (nav.js) — Ramp pattern: the panel header replaces the
   logo line: ‹ Back left, full-width hairline below, items thereafter */
.tec-nav-menu .is-menu-open .nav-mback-li {
  display: flex !important; align-items: center; height: 70px; position: relative;
  width: auto !important; max-width: none !important;
  margin: 0 -20px 12px; padding: 0 20px !important; border-bottom: 1px solid var(--border); }
.tec-nav-menu .is-menu-open .nav-mback { display: inline-flex; align-items: center; gap: 5px; background: none; border: 0;
  font-family: inherit; font-size: 15.5px; font-weight: 600; color: var(--navy); cursor: pointer; padding: 8px 8px 8px 0; }
.tec-nav-menu .is-menu-open .nav-mback::before { content: "\2039"; font-size: 21px; line-height: 1; transform: translateY(-1px); }
/* panel title, centred in the header row (so you always know where you are) */
.tec-nav-menu .is-menu-open .nav-msub-title {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-size: 15.5px; font-weight: 600; color: var(--navy); padding: 0;
  letter-spacing: normal; text-transform: none; white-space: nowrap; }
.tec-nav-menu .is-menu-open ul.menu-services { background-image: none; }
.tec-nav-menu .is-menu-open ul.menu-services::before, .tec-nav-menu .is-menu-open ul.menu-services::after { display: none; }
.tec-nav-menu .is-menu-open .wp-block-navigation__submenu-container > .wp-block-navigation-item { margin: 0; border: 0; }
/* Quantum parent paints open-menu submenu items base-2 (its own header design) — keep ours on the white sheet */
.tec-nav-menu .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item { background: transparent !important; }
.tec-nav-menu .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  padding: 13px !important; margin: 3px 0;
  border: 0 !important; border-radius: 8px !important; transition: none; }
.tec-nav-menu .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.tec-nav-menu .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:active,
.tec-nav-menu .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
  background: var(--base-3, #F2F4F7) !important; }
.tec-nav-menu .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__label { font-size: 16.5px; font-weight: 500; }
.tec-nav-menu .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__description { display: none; }
.tec-nav-menu .is-menu-open .mi > .wp-block-navigation-item__content { padding-left: 56px !important; }
/* the 38px chip overflows the text-height tile, leaving ~4px above/below —
   the LEFT gap must match that, not the 13px text padding (Tony) */
.tec-nav-menu .is-menu-open .mi > .wp-block-navigation-item__content::before { left: 4px; }
/* sub-section head inside the Services accordion (parity with the old drill-down) */
.tec-nav-menu .is-menu-open li.mi-gradcap::before { content: "Who we work with"; display: block;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--grey-400); padding: 16px 4px 4px; }
.tec-nav-menu .is-menu-open ul.menu-services > li { display: block; }
/* the mega-only items adapt to plain rows */
.tec-nav-menu .is-menu-open .nav-mega-featured { display: none !important; }
.tec-nav-menu .is-menu-open .nav-mega-all > .wp-block-navigation-item__content { display: inline-flex !important; margin: 0; padding: 9px 4px !important; }
/* the menu's own CTA row is replaced by the fixed bottom bar (overlay part) —
   must out-spec the (0,4,0) display:flex row rule above */
.tec-nav-menu .is-menu-open .wp-block-navigation__container > .nav-cta { display: none !important; }
/* fixed CTA bar (Ramp pattern): Contact us + Book a meeting, hairline above,
   always visible — main list AND open panels alike (z above the panels) */
.tec-overlay-cta { display: none; }
.tec-nav-menu .is-menu-open .tec-overlay-cta {
  display: block; flex: 0 0 auto; margin: 0 -20px; position: relative; z-index: 3;
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border); background: var(--white); }
.tec-nav-menu .is-menu-open .tec-overlay-cta .wp-block-buttons { display: flex; flex-wrap: nowrap; gap: 10px; }
.tec-nav-menu .is-menu-open .tec-overlay-cta .wp-block-button { flex: 1 1 0; min-width: 0; }
.tec-nav-menu .is-menu-open .tec-overlay-cta .wp-block-button__link {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 48px;
  padding: 0 10px !important; font-size: 15.5px; border-radius: 8px; white-space: nowrap; }
/* close button: subtle tint square behind the X (Ramp); z above the
   drill-down panels so it stays tappable in submenu views */
.tec-nav-menu .wp-block-navigation__responsive-container-close { background: var(--base-3, #F2F4F7); border-radius: 10px; transition: background-color .15s ease; z-index: 80; }
.tec-nav-menu .wp-block-navigation__responsive-container-close:hover { background: #E8ECF1; }
/* reduced motion: panels and carets appear/disappear without animation */
@media (prefers-reduced-motion: reduce) {
  .tec-nav, .tec-nav-inner, .tec-nav .nav-logo-full img, .tec-nav .nav-logo-mark, .tec-nav .nav-logo-mword,
  .tec-nav-menu .wp-block-navigation__submenu-container, .tec-nav-menu .wp-block-navigation__submenu-icon,
  .tec-nav-menu .nav-cta > .wp-block-navigation-item__content { transition: none !important; }
}

/* Digital emissions — turbine scene (gentle rotation; stilled for reduced motion) */
.de-rotor { animation: de-spin 11s linear infinite; }
.de-rotor--slow { animation-duration: 16s; }
@keyframes de-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .de-rotor, .de-rotor--slow { animation: none; } }
/* footer chips (status + renewable): equal width, identical construction */
.site-footer .footer-chip { box-sizing: border-box; width: 100%; max-width: 246px; margin-top: 0; }
.site-footer .footer-chip p { white-space: nowrap; }
.footer-chip--eco { margin-top: 10px !important; }
/* both chips share a 20px icon slot so the text columns align exactly:
   the 9px status dot is centred in it via margins; the turbine sits in a
   ringed 20px roundel (the ring holds still, the blades turn) */
.site-footer .footer-chip > .wp-block-group.beacon { margin-inline: 5.5px 5.5px; }
.eco-beacon { display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%; flex: 0 0 auto;
  border: 1px solid color-mix(in srgb, var(--teal) 38%, transparent);
  color: var(--teal); }
/* the blades are a native image block now (editor-safe — wp:html previews in
   a white sandbox iframe in the canvas); figure margins zeroed, spin on img */
figure.eco-beacon { margin: 0; }
.eco-beacon svg, .eco-beacon img { display: block; width: 20px; height: 20px; animation: eco-spin 14s linear infinite; }
@keyframes eco-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .eco-beacon svg, .eco-beacon img { animation: none; } }

/* Fixed-count grids (layout columnCount) never stack on small screens — core
   only auto-stacks minimumColumnWidth grids. Below 1024px every grid reflows
   with auto-fit (which, unlike auto-fill, collapses empty tracks). */
@media (max-width: 1024px) {
  .wp-block-group.is-layout-grid { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)) !important; }
}

/* ============================================================
   Newsletter form 15287 — contained shell (Lytbox-style): the
   subscribe button lives INSIDE the field. One treatment for
   every placement: footer, Brief page, single-post band.
   ============================================================ */
form[data-form-id="15287"] .wp-block-columns {
  display: flex !important; flex-wrap: nowrap !important; gap: 4px !important;
  align-items: center !important;
  background: var(--white); border: 1px solid var(--border, #D7DCE0); border-radius: 12px;
  padding: 4px; margin: 0 !important;
  max-width: 432px; width: 100%;
  transition: border-color .15s ease, box-shadow .15s ease;
}
form[data-form-id="15287"] .wp-block-columns:focus-within {
  border-color: var(--teal, #4AD7D1); box-shadow: 0 0 0 3px rgba(74, 215, 209, 0.18);
}
form[data-form-id="15287"] .wp-block-column { flex: 0 0 auto !important; margin: 0 !important; }
form[data-form-id="15287"] .wp-block-column:first-child { flex: 1 1 auto !important; min-width: 0; }
/* the field sheds its own chrome — the shell carries it now */
form[data-form-id="15287"] input.jet-form-builder__field,
form[data-form-id="15287"] .jet-form-builder__field[type="email"],
form[data-form-id="15287"] .jet-form-builder__field[type="text"] {
  height: 42px !important; width: 100%;
  border: 0 !important; border-radius: 8px; background: transparent !important;
  box-shadow: none !important; padding: 3px 6px 0 12px !important;
}
form[data-form-id="15287"] input:focus { outline: none !important; box-shadow: none !important; border: 0 !important; }
form[data-form-id="15287"] .jet-form-builder__submit {
  height: 42px !important; border-radius: 8px !important; padding: 0 18px !important;
}
form[data-form-id="15287"] .wp-block-columns .jet-form-builder-row { padding: 0 !important; margin: 0 !important; }
/* Brief page: the subscribe band is centred — centre the shell in the form */
form.brief-subscribe[data-form-id="15287"] .wp-block-columns { margin-inline: auto !important; }
/* shell field/button colours — identical in every context (incl. navy footer) */
form[data-form-id="15287"] input.jet-form-builder__field {
  color: var(--navy, #0E1924) !important; font-size: 14.5px;
}
form[data-form-id="15287"] input.jet-form-builder__field::placeholder { color: var(--grey-600, #5B6B7A); opacity: .7; }
form[data-form-id="15287"] .jet-form-builder__submit {
  background: var(--navy, #0E1924) !important; color: var(--white, #fff) !important;
}
/* beat core's ≤781px stacking (flex-basis:100% at (0,3,0)) — the shell never stacks */
form[data-form-id="15287"] .wp-block-column:last-child { flex: 0 0 auto !important; }

/* Footer variant of the contained shell (Tony): INVERSE — navy shell that
   sits on the footer band, light border, WHITE button. The global rules
   above stay the default (white shell) for the Brief page + single posts. */
.footer-news form[data-form-id="15287"] .wp-block-columns {
  background: color-mix(in srgb, var(--white) 4%, transparent);
  border-color: color-mix(in srgb, var(--white) 22%, transparent);
}
.footer-news form[data-form-id="15287"] input.jet-form-builder__field { color: var(--white) !important; }
.footer-news form[data-form-id="15287"] input.jet-form-builder__field::placeholder { color: var(--grey-muted); opacity: 1; }
.footer-news form[data-form-id="15287"] .jet-form-builder__submit {
  background: var(--white) !important; color: var(--navy) !important;
}
.footer-news form[data-form-id="15287"] .wp-block-columns:focus-within {
  border-color: var(--teal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 22%, transparent);
}
/* button text vertical centring: kill inherited line-height (Brief-page
   instance computed 22.475px → text rode 1.4px high); Graphie's high-riding
   glyphs get the same optical down-nudge the input needed */
form[data-form-id="15287"] .jet-form-builder__submit { line-height: normal !important; padding-top: 2px !important; }
/* Focus exception (Tony): inside the contained shell the INPUT itself shows
   no focus chrome — the shell's :focus-within teal ring is the indicator
   (a11y-safe: the composite control is clearly indicated). The parent theme
   outlines every :focus-visible in navy at (0,8,0) !important — out-spec it. */
form[data-form-id="15287"] input.jet-form-builder__field.jet-form-builder__field.jet-form-builder__field.jet-form-builder__field.jet-form-builder__field.jet-form-builder__field.jet-form-builder__field.jet-form-builder__field.jet-form-builder__field:focus,
form[data-form-id="15287"] input.jet-form-builder__field.jet-form-builder__field.jet-form-builder__field.jet-form-builder__field.jet-form-builder__field.jet-form-builder__field.jet-form-builder__field.jet-form-builder__field.jet-form-builder__field:focus-visible {
  outline: none !important; box-shadow: none !important; border: 0 !important;
}
/* rows keep their height — the menu area scrolls instead of compressing */
.tec-nav-menu .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item { flex-shrink: 0; }

/* Mega column dividers (Ramp): a later `background:` shorthand was wiping the
   gradient hairlines — re-asserted here, inset 20px from top/bottom */
.tec-nav-menu .wp-block-navigation__responsive-container:not(.is-menu-open) ul.menu-services {
  background-color: var(--white) !important;
  background-image: linear-gradient(var(--border), var(--border)) !important;
  background-repeat: no-repeat !important;
  background-size: 1px calc(100% - 40px) !important;
  background-position: calc(100% - 248px) 20px !important;
}

/* Learn-about-Tecology menu icon = the tecology t-mark (Tony) */
.tec-nav-menu .mi-tmark > .wp-block-navigation-item__content::before { background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%22125%20126%201124%201124%22%20fill%3D%22%230E1924%22%3E%3Cpath%20d%3D%22M914.14%2C1036.66v206.25c-64.72-1.27-126.25-15.74-181.72-41-13.83-6.32-27.29-13.2-40.38-20.79-8.42-4.85-16.66-9.98-24.8-15.48-50.91-33.87-94.75-77.63-128.64-128.43-.17-.19-.36-.38-.36-.55-40.28-60.33-66.64-130.64-74.7-206.45-1.83-16.2-2.66-32.86-2.66-49.61v-50.82h206.35v306.88h246.91Z%22%2F%3E%3Cpath%20d%3D%22M914.14%2C523.43v206.27c-64.72-1.28-126.25-15.84-181.72-41.02-13.83-6.32-27.29-13.18-40.38-20.78-8.42-4.95-16.66-10.08-24.8-15.48-50.91-33.97-94.75-77.73-128.64-128.54-.17-.19-.36-.27-.36-.46-40.28-60.33-66.64-130.64-74.7-206.44-1.83-16.3-2.66-32.96-2.66-49.71v-134.04h206.35v390.18h246.91Z%22%2F%3E%3C%2Fsvg%3E'); background-size: 15px 15px; }

/* Work-card covers: the case study's FEATURED IMAGE fills the cover; the
   navy + t-mark is only the fallback when no thumbnail is set (Tony).
   NB JE double-wrapper: both .work-cover-img divs need abs-fill. */
.work-cover { position: relative; overflow: hidden; }
.work-cover .work-cover-img,
.work-cover .work-cover-img .jet-listing-dynamic-image { position: absolute; inset: 0; margin: 0 !important; max-width: none; }
.work-cover .work-cover-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* (the kicker pill carries its own contrast — no veil needed over photos) */
.work-cover .work-mark, .work-cover .wp-block-spacer { position: relative; z-index: 2; }
/* photo present → hide the fallback t-mark */
.work-cover:has(.work-cover-img img) .work-mark { visibility: hidden; }

/* ============================================================
   Single post — sticky rail (Duna-style): author mini + the parent
   theme's table-of-contents block (scrollspy built in). Rail goes
   static when core stacks the columns at ≤781px.
   ============================================================ */
.post-rail-col { align-self: stretch; }
.post-rail { position: sticky; top: 108px; }
.post-rail-avatar img { border-radius: 50% !important; display: block; }
.post-rail-name { font-size: 15px; font-weight: 600; color: var(--navy); line-height: 1.3; }
.post-rail-job { font-size: 12.5px; color: var(--grey-600); line-height: 1.4; margin: 0; }
.post-rail .tecology-table-of-contents { font-size: 13.5px; }
.post-rail .tecology-table-of-contents .toc-title {
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--grey-400); font-weight: 600; margin-bottom: 10px; }
@media (max-width: 781px) {
  .post-rail { position: static; }
  .post-rail-col { border-bottom: 1px solid var(--border); padding-bottom: 22px; }
}
/* mega footer links ("All services" / "All sectors") — quiet, roomy */
.tec-nav-menu .wp-block-navigation__responsive-container:not(.is-menu-open) ul.menu-services { padding-bottom: 18px !important; }
.tec-nav-menu .wp-block-navigation__responsive-container:not(.is-menu-open) ul.menu-services .nav-mega-all > .wp-block-navigation-item__content {
  display: inline-flex !important; align-items: center; gap: 7px; width: auto;
  padding: 8px 12px !important; border-radius: 8px;
  background-image: none !important; /* the legacy right-edge arrow doubled with ::after */
  font-size: 13.5px; }
.tec-nav-menu .wp-block-navigation__responsive-container:not(.is-menu-open) ul.menu-services .nav-mega-all .wp-block-navigation-item__label {
  font-size: 13.5px; font-weight: 600; color: var(--grey-600); transition: color .15s ease; }
.tec-nav-menu .wp-block-navigation__responsive-container:not(.is-menu-open) ul.menu-services .nav-mega-all > .wp-block-navigation-item__content::after {
  content: "\2192"; font-size: 14px; color: var(--grey-600); transition: color .15s ease, transform .15s ease;
  /* the base .nav-mega-all rule paints an SVG arrow as this pseudo's BACKGROUND —
     with the text → on top that read as a double arrow (Tony, twice) */
  background: none !important; width: auto; height: auto; }
.tec-nav-menu .wp-block-navigation__responsive-container:not(.is-menu-open) ul.menu-services .nav-mega-all > .wp-block-navigation-item__content:hover .wp-block-navigation-item__label,
.tec-nav-menu .wp-block-navigation__responsive-container:not(.is-menu-open) ul.menu-services .nav-mega-all > .wp-block-navigation-item__content:hover::after { color: var(--navy); }
.tec-nav-menu .wp-block-navigation__responsive-container:not(.is-menu-open) ul.menu-services .nav-mega-all > .wp-block-navigation-item__content:hover::after { transform: translateX(2px); }

/* Comparison/retainer tables on mobile (Tony): columns were crushed — the
   shell becomes a horizontal swipe area; columns keep natural width */
@media (max-width: 781px) {
  .svc-table-scroll { overflow-x: auto !important; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .svc-table-scroll::-webkit-scrollbar { display: none; }
  .svc-table-scroll table { min-width: 640px; }
}

/* Sustainability menu icon (Lucide leaf) */
.tec-nav-menu .mi-leaf > .wp-block-navigation-item__content::before { background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%230E1924%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M11%2020A7%207%200%200%201%209.8%206.1C15.5%205%2017%204.48%2019%202c1%202%202%204.18%202%208%200%205.5-4.78%2010-10%2010Z%22%2F%3E%3Cpath%20d%3D%22M2%2021c0-3%201.85-5.36%205.08-6C9.5%2014.52%2012%2013%2013%2012%22%2F%3E%3C%2Fsvg%3E'); }

/* ============================================================
   BENTO (reference pattern — Bento Lab page): mixed-span cells
   in one 12-col native grid, Ramp-style. Cells use native grid
   columnSpan/rowSpan; below 1024 every cell goes full-width
   (the global auto-fit override can't host 7-col spans).
   ============================================================ */
.bento-cell { position: relative; overflow: hidden; }
.bento-cell.dot-host > * { position: relative; z-index: 1; }
.bento-h { font-size: 20px; font-weight: 600; letter-spacing: -0.015em; color: var(--navy); }
.bento-cell.has-contrast-background-color .bento-h { color: var(--white); }
.bento-body { font-size: 14.5px; color: var(--grey-600); line-height: 1.6; max-width: 460px; }
.bento-quote { font-size: 17.5px; font-weight: 500; line-height: 1.55; letter-spacing: -0.01em; }
.bento-quote-name { font-size: 12.5px; color: var(--grey-muted); }
.bento-checks { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.bento-checks li { position: relative; padding-left: 26px; font-size: 14.5px; color: var(--navy); }
.bento-checks li::before { content: ""; position: absolute; left: 0; top: 3px; width: 15px; height: 15px;
  background-color: var(--teal); -webkit-mask: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%206%209%2017l-5-5%22%2F%3E%3C%2Fsvg%3E') center / contain no-repeat;
  mask: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%206%209%2017l-5-5%22%2F%3E%3C%2Fsvg%3E') center / contain no-repeat; }
.bento-num { font-size: 38px; font-weight: 600; letter-spacing: -0.02em; color: var(--navy); line-height: 1; margin: 0; }
.bento-stat-label { font-size: 13px; color: var(--grey-600); line-height: 1.5; }
/* the diagram fills the rest of the tall cell */
.bento-cell .ai-flow-wrap { margin-top: 8px; }
@media (max-width: 1024px) {
  .bento-grid > .wp-block-group { grid-column: 1 / -1 !important; grid-row: auto !important; }
}

/* Remote Support page */
.rs-step-num { font-size: 12px; font-weight: 600; letter-spacing: .14em; color: var(--teal-ink, #0C6E6A); margin: 0; }
.rs-widget-note { font-size: 12.5px; color: var(--grey-600); margin-top: 2px; }
.rs-widget-col .rs-widget-card { position: sticky; top: 108px; }
/* Remote-support menu icon (Lucide screen-share) */
.tec-nav-menu .mi-screen > .wp-block-navigation-item__content::before { background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%230E1924%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M13%203H4a2%202%200%200%200-2%202v10a2%202%200%200%200%202%202h16a2%202%200%200%200%202-2v-3%22%2F%3E%3Cpath%20d%3D%22M8%2021h8%22%2F%3E%3Cpath%20d%3D%22M12%2017v4%22%2F%3E%3Cpath%20d%3D%22m17%208%205-5%22%2F%3E%3Cpath%20d%3D%22M17%203h5v5%22%2F%3E%3C%2Fsvg%3E'); }

/* Emissions: Hetzner card is a link now — teal ring on hover; third rotor speed */
.de-hetzner-card { text-decoration: none; transition: border-color .18s ease, background-color .18s ease, transform .18s ease; position: relative; }
.de-hetzner-card:hover { border-color: rgba(74, 215, 209, 0.65) !important; background: rgba(74, 215, 209, 0.06) !important; transform: translateY(-1px); }
.de-hetzner-arrow { position: absolute; top: 12px; right: 14px; color: var(--grey-muted); transition: color .18s ease; display: inline-flex; }
.de-hetzner-arrow svg { display: block; }
.de-hetzner-card:hover .de-hetzner-arrow { color: var(--teal); }
.de-rotor--slower { animation-duration: 21s; }
/* popup close: the quarter-turn must not replay/reverse while the popup is
   closing (Tony: jiggle) — on press the transform snaps home instantly */
.jet-popup.jet-popup--front-mode .jet-popup__close-button:active {
  transition: none !important;
  transform: translate(-14px, 14px) !important;
}

/* About bento: featured navy cell — inverted chip, white text, dots behind */
.about-card--featured { overflow: hidden; }
.about-card--featured > * { position: relative; z-index: 1; }
.about-card--featured h3 { color: var(--white) !important; }
.about-card--featured p { color: var(--grey-muted) !important; }
.about-card--featured .icon-container { background-color: var(--white) !important; color: var(--navy) !important; }
/* bento dark cells (navy bands): white heads, muted body, teal count-ups */
.bento-cell--dark .bento-h { color: var(--white); }
.bento-cell--dark .bento-body { color: var(--grey-muted); }
.bento-cell--dark .bento-num { color: var(--teal); }
.bento-cell--dark .bento-stat-label { color: var(--grey-muted); }

/* ============ Round 28 — review batch ============ */
/* Remote support: security-card icons get a bordered chip + air before titles
   (scoped — other pages keep their bare icons) */
.rs-secure .svc-card > svg { box-sizing: content-box; padding: 9px; border: 1px solid var(--border); border-radius: 10px; margin-bottom: 16px; color: var(--navy); display: block; }
/* Remote support: widget card content centres around the fixed-size widget */
.rs-widget-card { text-align: center; }
.rs-widget-card .tecology-kicker { text-align: center; }
.rs-widget-card iframe { margin: 6px auto 0 !important; }
.rs-widget-card .bento-h { text-align: center; }
.rs-widget-card .rs-widget-note { text-align: center; }

/* Single posts on mobile: the rail (author + TOC) steps aside entirely */
@media (max-width: 781px) {
  .post-rail-col { display: none; }
  /* subscribe shell goes full width */
  form[data-form-id="15287"] .wp-block-columns { max-width: 100%; }
}

/* Contact page mobile: form first, un-boxed, full-width submit */
@media (max-width: 781px) {
  .contact-form-col { order: -1; }
  .contact-sticky { border: 0 !important; padding: 0 !important; background: transparent !important; }
  form[data-form-id="14615"] .jet-form-builder__submit { width: 100%; }
  .report-form-card { border: 0 !important; padding: 0 !important; }
}

/* Homepage mobile rhythm (Tony): tighter §2 tail, calmer §5/§7 padding,
   §7 featured quote and grid share the same gutter */
@media (max-width: 781px) {
  .trust-marquee { margin-bottom: -36px; }
  section.wp-block-group:has(.ai-flow-wrap) { padding-top: 40px !important; padding-bottom: 40px !important; }
  section.wp-block-group:has(.tquote-featured) { padding-top: 48px !important; padding-bottom: 48px !important; }

}

/* Insights pagination (JSF) — brand circles, matches the carousel arrows */
.tec-pagination { margin-top: 44px; }
.tec-pagination .jet-filters-pagination { display: flex; justify-content: center; align-items: center; gap: 8px; flex-wrap: wrap; }
.tec-pagination .jet-filters-pagination__item { margin: 0 !important; }
.tec-pagination .jet-filters-pagination__link {
  min-width: 40px; height: 40px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border) !important; border-radius: 999px; background: var(--white) !important;
  font-size: 14px; font-weight: 500; color: var(--navy) !important; cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease; box-shadow: none !important; }
.tec-pagination .jet-filters-pagination__item:hover .jet-filters-pagination__link { background: var(--navy) !important; color: var(--white) !important; border-color: var(--navy) !important; }
.tec-pagination .jet-filters-pagination__current .jet-filters-pagination__link,
.tec-pagination .jet-filters-pagination__item.jet-filters-pagination__current { background: transparent; }
.tec-pagination .jet-filters-pagination__current .jet-filters-pagination__link { background: var(--navy) !important; color: var(--white) !important; border-color: var(--navy) !important; }
.tec-pagination .jet-filters-pagination__dots { color: var(--grey-600); padding: 0 2px; }

/* Care plans + any tier grid: single column on tablet and below (Tony) */
@media (max-width: 1024px) {
  .wp-block-group.is-layout-grid:has(> .svc-tier) { grid-template-columns: 1fr !important; }
}
/* WebDev: the 43% stat — % as small superscript */
.svc-stat .stat-pct { font-size: 0.45em; vertical-align: super; margin-left: 2px; letter-spacing: 0; }
/* (blueprint brightness handled at its source rules below) */
/* type-specimen quote: breathing room below on mobile */
@media (max-width: 781px) {
  .svc-specimen-host, section:has(.svc-specimen) { padding-bottom: 56px !important; }
  /* related-work header: heading + link stack left when wrapped */
  section:has(.work-carousel) .wp-block-buttons, .svc-related-head .wp-block-buttons { justify-content: flex-start; }
}
/* The PARENT (utility-classes.css ≤767px) forces ALL buttons full-width with
   !important — right for pill CTAs, wrong for text links: the stretched anchor
   inherits core's text-align:center and the link reads as centred (Tony's
   "centred back link" — the wrapper measured left while the ANCHOR stretched).
   Text-style links stay content-width; their wp:buttons row still controls
   placement (left/center) via its own justification. */
@media (max-width: 767px) {
  .wp-block-button.is-style-tecology-link,
  .wp-block-button.is-style-tecology-link .wp-block-button__link,
  .wp-block-button.is-style-tecology-link a {
    width: fit-content !important;
    text-align: left;
  }
}

/* light dot field (white bands): navy dots at whisper opacity */
.dot-host-light { position: relative; overflow: hidden; }
.dot-host-light > * { position: relative; z-index: 1; }
.dot-field--light { position: absolute; inset: 0; max-width: none; margin: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(rgba(14, 25, 36, 0.10) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 40%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 40%, #000 100%); }
/* case-study hero back button (native) — mirrors the old .post-back look */
.cs-back .wp-block-button__link { font-size: 13.5px; opacity: .8; padding: 0 !important; transition: opacity .15s ease; }
.cs-back .wp-block-button__link:hover { opacity: 1; }

/* Home §7: JE's default -10px item margins made the grid overhang the
   container by 10px each side — pin it to the alignwide edges at all widths */
.tquote-grid--listing .jet-listing-grid__items { margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; }

/* Settled (revealed) elements: reveal.js adds .rv-done AFTER the entrance
   completes (and clears the stagger delay). The entrance always runs on .rv's
   own transition; this rule then hands hovers back to fast, snappy timings —
   without it the reveal curve REPLACES the card's hover transition and
   box-shadow/border snap while transform floats ("jumpy"). */
.rv.rv-done {
  transition: opacity .3s ease,
              transform .25s cubic-bezier(.25, .8, .25, 1),
              visibility 0s,
              box-shadow .25s cubic-bezier(.25, .8, .25, 1),
              border-color .25s ease;
}